diff --git a/README.md b/archive/README.md similarity index 100% rename from README.md rename to archive/README.md diff --git a/prototype-1/index.html b/archive/prototype-1/index.html similarity index 100% rename from prototype-1/index.html rename to archive/prototype-1/index.html diff --git a/prototype-2/index.html b/archive/prototype-2/index.html similarity index 100% rename from prototype-2/index.html rename to archive/prototype-2/index.html diff --git a/prototype-3/index.html b/archive/prototype-3/index.html similarity index 100% rename from prototype-3/index.html rename to archive/prototype-3/index.html diff --git a/index.html b/index.html new file mode 100644 index 0000000..61ba248 --- /dev/null +++ b/index.html @@ -0,0 +1,169 @@ + + + + + + ISSUE NO. 001: THE VALENTINE PROTOCOL + + + + + + + + + + + + + + + + + + + + + + + +
+ + +
+ +
❤️
+
⚡
+
💾
+
🔒
+
+ + +
+ + +
+ + +
+
+ ISSUE NO. 001 + THE VALENTINE PROTOCOL +
+
+
00:00:00
+ TIME REMAINING TO ACCEPT +
+
+ + +
+

+ BRIAN x [HER NAME] // OFFICIAL COLLABORATION +

+ +

+ WILL YOU BE
MY VALENTINE? +

+ + +
+ + + + + + + +
+
+ + +
+
+
> Initializing Valentine Protocol v1.0...
+
> Target acquired: [HER NAME]
+
> Analysis: 100% Compatible
+
+
+ + +
+
+
+
+ +
+ + + + +
+ + + + \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..421acf6 --- /dev/null +++ b/script.js @@ -0,0 +1,209 @@ +document.addEventListener('DOMContentLoaded', () => { + // --- Elements --- + const noBtn = document.getElementById('no-btn'); + const yesBtn = document.getElementById('yes-btn'); + const productBox = document.getElementById('product-box'); + const terminal = document.getElementById('terminal'); + const countdownEl = document.getElementById('countdown'); + const floatingElements = document.querySelectorAll('.floating-icon'); + const voucherOverlay = document.getElementById('voucher-overlay'); + + // --- GSAP Entrance --- + gsap.from(productBox, { + duration: 1.5, + y: 100, + opacity: 0, + ease: "power4.out", + delay: 0.5 + }); + + gsap.from("#product-box > *", { + duration: 1, + y: 20, + opacity: 0, + stagger: 0.1, + ease: "power2.out", + delay: 1 + }); + + // --- Countdown Timer --- + // Set a random time between 2 to 5 hours from now + let remainingTime = (Math.floor(Math.random() * 3) + 2) * 60 * 60; + + function updateCountdown() { + if (remainingTime <= 0) { + remainingTime = (Math.floor(Math.random() * 3) + 2) * 60 * 60; // Reset + } + remainingTime--; + + const h = Math.floor(remainingTime / 3600); + const m = Math.floor((remainingTime % 3600) / 60); + const s = remainingTime % 60; + + countdownEl.innerText = `${h.toString().padStart(2, '0')}:${m.toString().padStart(2, '0')}:${s.toString().padStart(2, '0')}`; + } + + setInterval(updateCountdown, 1000); + updateCountdown(); + + // --- Terminal Logic --- + const logMessages = [ + "Analyzing relationship compatibility... 100%", + "Stress testing 'Yes' response... SUCCESS.", + "Error: 'No' option corrupted by Love.exe.", + "Optimizing romance algorithms...", + "Checking shipping availability... IMMEDIATE.", + "Heartbeat detected: ELEVATED.", + "Synchronizing emotional state...", + ]; + + let logIndex = 0; + + function addLog(message) { + const div = document.createElement('div'); + div.innerText = `> ${message}`; + terminal.appendChild(div); + terminal.scrollTop = terminal.scrollHeight; + } + + function runTerminal() { + if (logIndex < logMessages.length) { + addLog(logMessages[logIndex]); + logIndex++; + setTimeout(runTerminal, Math.random() * 2000 + 1000); + } + } + + setTimeout(runTerminal, 2000); + + // --- Evasive 'No' Button Logic --- + let noBtnScale = 1; + const noBtnTexts = ["NO", "ARE YOU SURE?", "REALLY?", "ERROR 404", "TRY AGAIN", "NOPE", "TOO SLOW"]; + let textIndex = 0; + + document.addEventListener('mousemove', (e) => { + const rect = noBtn.getBoundingClientRect(); + const btnX = rect.left + rect.width / 2; + const btnY = rect.top + rect.height / 2; + + const dist = Math.hypot(e.clientX - btnX, e.clientY - btnY); + + // If mouse is within 100px (as per prompt "The Logic" 50px vs "Solid Prompt" 100px, taking 100px for better effect) + if (dist < 100) { + teleportButton(); + } + }); + + function teleportButton() { + // Teleport + const maxX = window.innerWidth - noBtn.offsetWidth - 50; + const maxY = window.innerHeight - noBtn.offsetHeight - 50; + + const newX = Math.random() * maxX; + const newY = Math.random() * maxY; + + noBtn.style.position = 'fixed'; + noBtn.style.left = `${newX}px`; + noBtn.style.top = `${newY}px`; + noBtn.style.zIndex = '50'; // Ensure it's above other things but below overlay + + // Shrink + noBtnScale *= 0.9; + noBtn.style.transform = `scale(${noBtnScale})`; + + // Change Text + textIndex = (textIndex + 1) % noBtnTexts.length; + noBtn.innerText = noBtnTexts[textIndex]; + + // Add log + addLog(`Warning: 'No' evasion triggered. Integrity: ${Math.floor(noBtnScale * 100)}%`); + } + + // Just in case they tab to it or touch screen + noBtn.addEventListener('mouseover', teleportButton); + noBtn.addEventListener('click', (e) => { + e.preventDefault(); + teleportButton(); + }); + + // --- 'Yes' Button Logic --- + yesBtn.addEventListener('click', () => { + // 1. Confetti + const duration = 3000; + const end = Date.now() + duration; + + (function frame() { + confetti({ + particleCount: 5, + angle: 60, + spread: 55, + origin: { x: 0 }, + colors: ['#FF0055', '#FFFFFF', '#000000'] + }); + confetti({ + particleCount: 5, + angle: 120, + spread: 55, + origin: { x: 1 }, + colors: ['#FF0055', '#FFFFFF', '#000000'] + }); + + if (Date.now() < end) { + requestAnimationFrame(frame); + } + }()); + + // 2. Visual Feedback + addLog("RESPONSE CONFIRMED: YES."); + addLog("Initiating celebratory sequence..."); + + // 3. Transition + gsap.to(productBox, { + duration: 0.5, + scale: 0.9, + opacity: 0, + ease: "power2.in", + onComplete: () => { + productBox.style.display = 'none'; + voucherOverlay.classList.remove('hidden'); + // Trigger reflow to enable transition + void voucherOverlay.offsetWidth; + voucherOverlay.classList.remove('opacity-0'); + + // Animate voucher in + gsap.from("#voucher-overlay > div", { + duration: 1, + y: 50, + rotation: -5, + opacity: 0, + ease: "elastic.out(1, 0.5)" + }); + } + }); + }); + + // --- Interactive Parallax for Floating Elements --- + document.addEventListener('mousemove', (e) => { + const mouseX = e.clientX / window.innerWidth; + const mouseY = e.clientY / window.innerHeight; + + floatingElements.forEach((el, index) => { + const speed = (index + 1) * 10; + const x = (window.innerWidth / 2 - e.clientX) / speed; + const y = (window.innerHeight / 2 - e.clientY) / speed; + + // Apply parallax effect to the product box instead of floating elements + // to avoid conflict with CSS keyframe animations. + const depth = 20; + const moveX = (e.clientX - window.innerWidth / 2) / window.innerWidth * depth; + const moveY = (e.clientY - window.innerHeight / 2) / window.innerHeight * depth; + + gsap.to(productBox, { + duration: 1, + x: moveX, + y: moveY, + ease: "power1.out" + }); + }); + }); +}); diff --git a/style.css b/style.css new file mode 100644 index 0000000..e6384df --- /dev/null +++ b/style.css @@ -0,0 +1,74 @@ +/* Neobrutalist Custom Styles */ + +body { + background-color: #FF0055; + overflow-x: hidden; +} + +/* Grid Background */ +.grid-background { + background-image: + linear-gradient(#000000 2px, transparent 2px), + linear-gradient(90deg, #000000 2px, transparent 2px); + background-size: 50px 50px; + opacity: 0.1; + animation: gridPulse 4s ease-in-out infinite; +} + +@keyframes gridPulse { + 0% { opacity: 0.1; transform: scale(1); } + 50% { opacity: 0.15; transform: scale(1.02); } + 100% { opacity: 0.1; transform: scale(1); } +} + +/* Floating Elements Animation */ +.floating-icon { + animation: float 6s ease-in-out infinite; +} + +.floating-icon:nth-child(2) { + animation-delay: 1s; + animation-duration: 8s; +} + +.floating-icon:nth-child(3) { + animation-delay: 2s; + animation-duration: 7s; +} + +.floating-icon:nth-child(4) { + animation-delay: 0.5s; + animation-duration: 9s; +} + +@keyframes float { + 0% { transform: translate(0, 0) rotate(0deg); } + 25% { transform: translate(10px, -10px) rotate(5deg); } + 50% { transform: translate(-5px, 10px) rotate(-5deg); } + 75% { transform: translate(-10px, -5px) rotate(2deg); } + 100% { transform: translate(0, 0) rotate(0deg); } +} + +/* Scrollbar styling for terminal */ +#terminal::-webkit-scrollbar { + width: 8px; +} + +#terminal::-webkit-scrollbar-track { + background: #000; +} + +#terminal::-webkit-scrollbar-thumb { + background: #00FF00; + border: 2px solid #000; +} + +/* Cursor custom */ +.cursor-crosshair { + cursor: crosshair; +} + +/* Utility to hide cursor on elements if needed */ +.no-cursor { + cursor: none; +}