<title>Top Secret Quest for Dip ✨</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.6.0/dist/confetti.browser.min.js"></script>
<style>
* {
font-family: 'Fredoka', 'Quicksand', sans-serif;
user-select: none;
-webkit-user-select: none;
}
.scary-font {
font-family: 'Creepster', cursive;
}
body {
background: linear-gradient(135deg, #0F172A 0%, #1E1B4B 50%, #020617 100%);
transition: background 1.2s ease-in-out;
min-height: 100vh;
overflow-x: hidden;
}
body.cute-mode {
background: linear-gradient(135deg, #FFF0F5 0%, #E6E6FA 50%, #E0F8F7 100%);
}
@keyframes floatSlow {
0%, 100% { transform: translateY(0px) rotate(0deg); }
50% { transform: translateY(-12px) rotate(5deg); }
}
@keyframes pulseGlow {
0%, 100% { transform: scale(1); box-shadow: 0 10px 25px -5px rgba(244, 114, 182, 0.4); }
50% { transform: scale(1.06); box-shadow: 0 20px 35px -5px rgba(244, 114, 182, 0.7); }
}
@keyframes glitchRed {
0% { transform: translate(0); filter: hue-rotate(0deg); }
20% { transform: translate(-5px, 5px); filter: hue-rotate(90deg); }
40% { transform: translate(-5px, -5px); }
60% { transform: translate(5px, 5px); }
80% { transform: translate(5px, -5px); }
100% { transform: translate(0); filter: hue-rotate(0deg); }
}
@keyframes wiggleDoodle {
0%, 100% { transform: rotate(-3deg); }
50% { transform: rotate(3deg); }
}
.animate-float { animation: floatSlow 4s ease-in-out infinite; }
.animate-pulse-glow { animation: pulseGlow 2s ease-in-out infinite; }
.animate-glitch { animation: glitchRed 0.2s infinite; }
.animate-doodle { animation: wiggleDoodle 3s ease-in-out infinite; }
.glass-card-dark {
background: rgba(15, 23, 42, 0.88);
backdrop-filter: blur(18px);
border: 2px solid rgba(239, 68, 68, 0.35);
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.8);
}
.glass-card-cute {
background: rgba(255, 255, 255, 0.94);
backdrop-filter: blur(18px);
border: 3px solid rgba(255, 255, 255, 0.9);
box-shadow: 0 20px 45px rgba(219, 112, 147, 0.2);
}
#no-btn {
transition: all 0.15s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.toast-msg {
animation: fadeInOut 1.5s forwards;
}
@keyframes fadeInOut {
0% { opacity: 0; transform: translateY(10px) scale(0.9); }
20% { opacity: 1; transform: translateY(0) scale(1); }
80% { opacity: 1; transform: translateY(0) scale(1); }
100% { opacity: 0; transform: translateY(-10px) scale(0.9); }
}
</style>
<!-- Top Progress Bar -->
<div class="fixed top-3 left-1/2 -translate-x-1/2 z-50 w-11/12 max-w-md bg-black/40 backdrop-blur-md rounded-full p-1.5 border border-white/20 flex items-center justify-between gap-3 shadow-lg">
<div class="w-full bg-gray-700/60 rounded-full h-2.5 overflow-hidden ml-2">
<div id="progress-bar-fill" class="bg-gradient-to-r from-pink-500 to-purple-500 h-2.5 rounded-full transition-all duration-500" style="width: 7.6%;"></div>
</div>
<span id="progress-text" class="text-[11px] font-extrabold text-pink-300 font-mono pr-2 whitespace-nowrap">1 / 13</span>
</div>
<!-- Cute Background Background Decor (Revealed in Stage 5) -->
<div id="cute-bg-decor" class="absolute inset-0 pointer-events-none overflow-hidden z-0 opacity-0 transition-opacity duration-1000">
<div class="absolute top-12 left-6 text-4xl animate-float opacity-70" style="animation-delay: 0s;">🌸</div>
<div class="absolute top-1/4 right-8 text-3xl animate-float opacity-70" style="animation-delay: 1s;">✨</div>
<div class="absolute bottom-16 left-12 text-4xl animate-float opacity-70" style="animation-delay: 2s;">🍃</div>
<div class="absolute bottom-1/3 right-6 text-3xl animate-float opacity-70" style="animation-delay: 1.5s;">🧸</div>
<div class="absolute top-1/2 left-4 text-3xl animate-float opacity-60" style="animation-delay: 2.5s;">☁️</div>
<div class="absolute bottom-6 right-1/4 text-4xl animate-float opacity-70" style="animation-delay: 0.8s;">💖</div>
</div>
<!-- Main Interactive Card Container -->
<main class="w-full max-w-lg z-10 my-auto pt-8">
<!-- STAGE 1: THE SPOOKY INTRO -->
<section id="stage-1" class="glass-card-dark rounded-3xl p-6 sm:p-8 text-center transition-all duration-500 transform scale-100">
<div class="w-20 h-20 mx-auto mb-4 flex items-center justify-center bg-red-950/70 rounded-full border-2 border-red-800 animate-pulse">
<span class="text-4xl">🤫</span>
</div>
<span class="inline-block px-3.5 py-1 bg-red-900/50 text-red-400 rounded-full text-xs font-bold uppercase tracking-widest mb-3 border border-red-800">
Confidential Message
</span>
<h1 class="text-2xl sm:text-3xl font-bold text-red-500 mb-3 tracking-wide">
Dip... we need to talk. 🤐
</h1>
<p class="text-gray-300 text-sm mb-6 leading-relaxed font-mono">
Are you alone right now? Please make sure nobody is standing behind you...
</p>
<button onclick="goToStage(2, 'drone')" class="w-full py-4 px-6 bg-gradient-to-r from-red-800 to-red-950 hover:from-red-700 hover:to-red-900 text-red-100 font-bold text-base rounded-2xl border border-red-700 shadow-xl transition transform active:scale-95 flex items-center justify-center gap-2">
<span>I'm alone... what happened?! 😨</span>
</button>
</section>
<!-- STAGE 2: DRAMA & JEALOUSY SETUP -->
<section id="stage-2" class="glass-card-dark rounded-3xl p-6 sm:p-8 text-center hidden transition-all duration-500 transform scale-95 opacity-0">
<div class="w-20 h-20 mx-auto mb-4 flex items-center justify-center bg-purple-950/70 rounded-full border-2 border-purple-800">
<span class="text-4xl">👀</span>
</div>
<h2 class="text-2xl font-bold text-purple-400 mb-3 font-mono">
I've been trying to tell you...
</h2>
<p class="text-gray-300 text-sm mb-6 leading-relaxed">
Dip, there’s something serious. I’ve been trying to reach you for days because... <span class="text-red-400 font-bold underline">there is another girl!</span> 😳
</p>
<button onclick="goToStage(3, 'drone')" class="w-full py-4 px-6 bg-purple-900 hover:bg-purple-800 text-purple-100 font-bold text-base rounded-2xl shadow-lg transition transform active:scale-95 flex items-center justify-center gap-2">
<span>Wait, WHAT?! Another girl?! 😱</span>
</button>
</section>
<!-- STAGE 3: THE OFFICE DRAMA ESCALATION -->
<section id="stage-3" class="glass-card-dark rounded-3xl p-6 sm:p-8 text-center hidden transition-all duration-500 transform scale-95 opacity-0">
<div class="w-20 h-20 mx-auto mb-4 flex items-center justify-center bg-amber-950/70 rounded-full border-2 border-amber-800 animate-bounce">
<span class="text-4xl">🏢</span>
</div>
<h2 class="text-2xl font-bold text-amber-400 mb-3 font-mono">
She's Watching at Your Office...
</h2>
<p class="text-gray-300 text-sm mb-6 leading-relaxed">
Yes! She’s at your office... watching your attendance register every day, checking your leave balance... and even HR is getting involved! 📋💼
</p>
<button onclick="goToStage(4, 'drone')" class="w-full py-4 px-6 bg-amber-900 hover:bg-amber-800 text-amber-100 font-bold text-base rounded-2xl shadow-lg transition transform active:scale-95 flex items-center justify-center gap-2">
<span>HR is involved?! What did she do?! 😰</span>
</button>
</section>
<!-- STAGE 4: CRYPTIC WARNING -->
<section id="stage-4" class="glass-card-dark rounded-3xl p-6 sm:p-8 text-center hidden transition-all duration-500 transform scale-95 opacity-0">
<div class="w-20 h-20 mx-auto mb-4 flex items-center justify-center bg-red-950/80 rounded-full border-2 border-red-600 animate-pulse">
<span class="text-4xl">📩</span>
</div>
<h2 class="text-2xl font-bold text-red-400 mb-3 font-mono">
She Sent an Urgent Email...
</h2>
<p class="text-gray-300 text-sm mb-6 leading-relaxed">
She sent an email regarding <span class="text-amber-300 font-bold underline">OCTOBER 24TH</span>... An unavoidable calendar anomaly is coming right towards you!
</p>
<button onclick="triggerJumpscare()" class="w-full py-4 px-6 bg-red-800 hover:bg-red-700 text-red-100 font-bold text-base rounded-2xl shadow-lg transition transform active:scale-95 flex items-center justify-center gap-2">
<span>Open Urgent Email Notification! 🔍</span>
</button>
</section>
<!-- STAGE 5: HORROR JUMPSCARE PRANK -->
<section id="stage-5" class="glass-card-dark rounded-3xl p-6 sm:p-8 text-center hidden transition-all duration-500 transform scale-95 opacity-0 relative overflow-hidden">
<div id="jumpscare-box" class="py-4">
<div class="text-7xl mb-3 animate-glitch">👻</div>
<h2 class="scary-font text-5xl text-red-500 mb-2 tracking-widest animate-glitch">BOO!! 😈</h2>
<p class="text-red-300 font-bold text-lg mb-4">JUST KIDDING DIP!! 😜</p>
<p class="text-gray-300 text-xs mb-6 leading-relaxed">
There's no other girl or HR drama! It's just me teasing you! Let's switch to cute mode right now...💖
</p>
</div>
<button onclick="switchToCuteMode()" class="w-full py-4 px-6 bg-pink-500 hover:bg-pink-600 text-white font-bold text-lg rounded-2xl shadow-lg transition transform active:scale-95 flex items-center justify-center gap-2">
<span>Phew! You scared me so bad! 😤💖</span>
</button>
</section>
<!-- STAGE 6: OFFICE CALENDAR REALIZATION -->
<section id="stage-6" class="glass-card-cute rounded-3xl p-6 sm:p-8 text-center hidden transition-all duration-500 transform scale-95 opacity-0">
<span class="inline-block px-3 py-1 bg-purple-100 text-purple-600 rounded-full text-xs font-bold uppercase tracking-wider mb-2">
Office Math Realization 📅
</span>
<h2 class="text-2xl font-bold text-gray-800 mb-2">Dip, look at October Calendar:</h2>
<p class="text-xs text-gray-500 mb-4">Here is how we steal 3 full days of freedom:</p>
<div class="bg-purple-50/80 border border-purple-200 rounded-2xl p-4 mb-5 text-left space-y-2.5">
<div class="flex items-center justify-between text-sm">
<span class="font-bold text-gray-700">🗓️ Oct 24 (Sat):</span>
<span class="px-2.5 py-0.5 bg-emerald-100 text-emerald-700 font-extrabold rounded-full text-xs">OFFICE OFF 🎉</span>
</div>
<div class="flex items-center justify-between text-sm">
<span class="font-bold text-gray-700">💼 Oct 25 (Sun):</span>
<span class="px-2.5 py-0.5 bg-rose-100 text-rose-600 font-extrabold rounded-full text-xs">LEAVE #1 NEEDED 📝</span>
</div>
<div class="flex items-center justify-between text-sm">
<span class="font-bold text-gray-700">💼 Oct 26 (Mon):</span>
<span class="px-2.5 py-0.5 bg-rose-100 text-rose-600 font-extrabold rounded-full text-xs">LEAVE #2 NEEDED 📝</span>
</div>
</div>
<div class="bg-pink-50 border border-pink-200 rounded-2xl p-3 mb-5 text-xs text-pink-700 font-semibold">
✨ Take just <strong>2 days leave</strong> (25th & 26th) to unlock <strong>2 nights & 3 full days</strong> of getaway!
</div>
<button onclick="goToStage(7, 'pop')" class="w-full py-3.5 px-6 bg-gradient-to-r from-purple-500 to-pink-500 text-white font-extrabold rounded-2xl shadow-md transition transform active:scale-95 text-base">
Understood! Calculate Riddle ➡️
</button>
</section>
<!-- STAGE 7: INTERACTIVE MATH RIDDLE -->
<section id="stage-7" class="glass-card-cute rounded-3xl p-6 sm:p-8 text-center hidden transition-all duration-500 transform scale-95 opacity-0">
<span class="inline-block px-3 py-1 bg-pink-100 text-pink-600 rounded-full text-xs font-bold uppercase tracking-wider mb-2">
Getaway Equation 🧩
</span>
<h2 class="text-2xl font-bold text-gray-800 mb-2">Dip, solve this formula:</h2>
<div class="bg-pink-50 border border-pink-200 rounded-2xl p-3.5 mb-5 font-bold text-pink-800 text-sm leading-relaxed">
2 Nights 🌙 + 3 Days ☀️ + Dip 👸 + Me 🙋♂️ - 2 Leave Days 📝 = ???
</div>
<div class="space-y-2.5">
<button onclick="wrongAnswerRiddle(this)" class="w-full py-3 px-4 bg-white hover:bg-red-50 border-2 border-gray-200 rounded-2xl font-bold text-gray-700 text-xs sm:text-sm transition">
A) Overtime at Office 😴
</button>
<button onclick="wrongAnswerRiddle(this)" class="w-full py-3 px-4 bg-white hover:bg-red-50 border-2 border-gray-200 rounded-2xl font-bold text-gray-700 text-xs sm:text-sm transition">
B) Anxious Emailing HR 📧
</button>
<button onclick="goToStage(8, 'pop')" class="w-full py-3.5 px-4 bg-gradient-to-r from-pink-400 to-purple-400 text-white font-extrabold rounded-2xl shadow-md transition transform active:scale-95 text-sm sm:text-base border-2 border-pink-300">
C) Magical Shigoal Getaway Mission! 🌲✨
</button>
</div>
<p id="riddle-error" class="text-xs text-red-500 mt-3 font-bold opacity-0">Wrong answer! Try again Dip!</p>
</section>
<!-- STAGE 8: THE FOOD & VIBE BRIBE -->
<section id="stage-8" class="glass-card-cute rounded-3xl p-6 text-center hidden transition-all duration-500 transform scale-95 opacity-0">
<span class="inline-block px-3 py-1 bg-amber-100 text-amber-700 rounded-full text-xs font-bold uppercase tracking-wider mb-2">
VIP Bribe Time 🍫☕
</span>
<h2 class="text-2xl font-bold text-gray-800 mb-1">Dip's Getaway Treats</h2>
<p class="text-xs text-gray-500 mb-4">Tap ALL 4 treats to unlock the luggage challenge!</p>
<div class="grid grid-cols-2 gap-3 mb-5">
<button onclick="collectBribe(this)" class="bribe-btn bg-white hover:bg-pink-50 border-2 border-pink-100 p-3 rounded-2xl transition flex flex-col items-center gap-1 shadow-sm">
<span class="text-3xl">☕</span>
<span class="text-xs font-bold text-gray-700">Hot Chocolates</span>
</button>
<button onclick="collectBribe(this)" class="bribe-btn bg-white hover:bg-pink-50 border-2 border-pink-100 p-3 rounded-2xl transition flex flex-col items-center gap-1 shadow-sm">
<span class="text-3xl">🌅</span>
<span class="text-xs font-bold text-gray-700">Sunset Rooftop</span>
</button>
<button onclick="collectBribe(this)" class="bribe-btn bg-white hover:bg-pink-50 border-2 border-pink-100 p-3 rounded-2xl transition flex flex-col items-center gap-1 shadow-sm">
<span class="text-3xl">🧸</span>
<span class="text-xs font-bold text-gray-700">Cozy Blankets</span>
</button>
<button onclick="collectBribe(this)" class="bribe-btn bg-white hover:bg-pink-50 border-2 border-pink-100 p-3 rounded-2xl transition flex flex-col items-center gap-1 shadow-sm">
<span class="text-3xl">🗣️</span>
<span class="text-xs font-bold text-gray-700">Unlimited Gossip</span>
</button>
</div>
<button id="bribe-next-btn" onclick="goToStage(9, 'pop')" disabled class="w-full py-3.5 px-6 bg-gray-200 text-gray-400 font-bold rounded-2xl transition cursor-not-allowed">
Collect All Treats (0/4) ✨
</button>
</section>
<!-- STAGE 9: EXTENDED LUGGAGE CHALLENGE (15 ITEMS TOTAL, STRICT 5 SELECTION) -->
<section id="stage-9" class="glass-card-cute rounded-3xl p-5 sm:p-6 text-center hidden transition-all duration-500 transform scale-95 opacity-0">
<div class="flex items-center justify-between mb-2">
<span class="text-xs font-bold bg-pink-100 text-pink-600 px-3 py-1 rounded-full">Dip's Luggage</span>
<span id="pack-counter" class="text-xs font-bold text-purple-600 bg-purple-50 px-3 py-1 rounded-full border border-purple-200">
Selected: 0 / 5 🧳
</span>
</div>
<h2 class="text-2xl font-bold text-gray-800 mb-1">Pack Exactly 5 Items!</h2>
<p id="pack-instruction" class="text-xs text-pink-600 font-bold mb-3">You MUST pick EXACTLY 5 essential items from 15 below:</p>
<!-- Suitcase container -->
<div id="suitcase" class="bg-pink-50/80 border-2 border-dashed border-pink-300 rounded-2xl p-2.5 mb-3.5 min-h-[75px] flex flex-wrap items-center justify-center gap-1.5">
<span id="suitcase-empty" class="text-xs text-pink-400 font-medium">🧳 Luggage empty... tap items to pack!</span>
</div>
<!-- 15 Packing Items Grid -->
<div class="grid grid-cols-3 gap-2 mb-4 max-h-[220px] overflow-y-auto pr-1">
<button onclick="togglePackItem(this, '👙', 'Bikini')" class="pack-btn bg-white border-2 border-pink-100 p-2 rounded-xl transition flex flex-col items-center gap-0.5 shadow-sm active:scale-95">
<span class="text-xl">👙</span>
<span class="text-[10px] font-bold text-gray-700">Bikini</span>
</button>
<button onclick="togglePackItem(this, '🥻', 'Saree')" class="pack-btn bg-white border-2 border-pink-100 p-2 rounded-xl transition flex flex-col items-center gap-0.5 shadow-sm active:scale-95">
<span class="text-xl">🥻</span>
<span class="text-[10px] font-bold text-gray-700">Saree</span>
</button>
<button onclick="togglePackItem(this, '💄', 'Lipstick')" class="pack-btn bg-white border-2 border-pink-100 p-2 rounded-xl transition flex flex-col items-center gap-0.5 shadow-sm active:scale-95">
<span class="text-xl">💄</span>
<span class="text-[10px] font-bold text-gray-700">Lipstick</span>
</button>
<button onclick="togglePackItem(this, '💇♀️', 'Round Comb')" class="pack-btn bg-white border-2 border-pink-100 p-2 rounded-xl transition flex flex-col items-center gap-0.5 shadow-sm active:scale-95">
<span class="text-xl">💇♀️</span>
<span class="text-[10px] font-bold text-gray-700">Round Comb</span>
</button>
<button onclick="togglePackItem(this, '🙈', 'Random')" class="pack-btn bg-white border-2 border-pink-100 p-2 rounded-xl transition flex flex-col items-center gap-0.5 shadow-sm active:scale-95 col-span-2">
<span class="text-xl">🙈</span>
<span class="text-[10px] font-bold text-pink-600">Random Essentials 😏</span>
</button>
<button onclick="togglePackItem(this, '🧥', 'Hoodie')" class="pack-btn bg-white border-2 border-pink-100 p-2 rounded-xl transition flex flex-col items-center gap-0.5 shadow-sm active:scale-95">
<span class="text-xl">🧥</span>
<span class="text-[10px] font-bold text-gray-700">Big Hoodie</span>
</button>
<button onclick="togglePackItem(this, '🧴', 'Sunscreen')" class="pack-btn bg-white border-2 border-pink-100 p-2 rounded-xl transition flex flex-col items-center gap-0.5 shadow-sm active:scale-95">
<span class="text-xl">🧴</span>
<span class="text-[10px] font-bold text-gray-700">Sunscreen</span>
</button>
<button onclick="togglePackItem(this, '🕶️', 'Sunglasses')" class="pack-btn bg-white border-2 border-pink-100 p-2 rounded-xl transition flex flex-col items-center gap-0.5 shadow-sm active:scale-95">
<span class="text-xl">🕶️</span>
<span class="text-[10px] font-bold text-gray-700">Sunglasses</span>
</button>
<button onclick="togglePackItem(this, '🧦', 'Socks')" class="pack-btn bg-white border-2 border-pink-100 p-2 rounded-xl transition flex flex-col items-center gap-0.5 shadow-sm active:scale-95">
<span class="text-xl">🧦</span>
<span class="text-[10px] font-bold text-gray-700">Cozy Socks</span>
</button>
<button onclick="togglePackItem(this, '📷', 'Camera')" class="pack-btn bg-white border-2 border-pink-100 p-2 rounded-xl transition flex flex-col items-center gap-0.5 shadow-sm active:scale-95">
<span class="text-xl">📷</span>
<span class="text-[10px] font-bold text-gray-700">Camera</span>
</button>
<button onclick="togglePackItem(this, '🍫', 'Snacks')" class="pack-btn bg-white border-2 border-pink-100 p-2 rounded-xl transition flex flex-col items-center gap-0.5 shadow-sm active:scale-95">
<span class="text-xl">🍫</span>
<span class="text-[10px] font-bold text-gray-700">Snacks</span>
</button>
<button onclick="togglePackItem(this, '🎭', 'Face Mask')" class="pack-btn bg-white border-2 border-pink-100 p-2 rounded-xl transition flex flex-col items-center gap-0.5 shadow-sm active:scale-95">
<span class="text-xl">🎭</span>
<span class="text-[10px] font-bold text-gray-700">Face Mask</span>
</button>
<button onclick="togglePackItem(this, '🔋', 'Power Bank')" class="pack-btn bg-white border-2 border-pink-100 p-2 rounded-xl transition flex flex-col items-center gap-0.5 shadow-sm active:scale-95">
<span class="text-xl">🔋</span>
<span class="text-[10px] font-bold text-gray-700">Power Bank</span>
</button>
<button onclick="togglePackItem(this, '🕯️', 'Candle')" class="pack-btn bg-white border-2 border-pink-100 p-2 rounded-xl transition flex flex-col items-center gap-0.5 shadow-sm active:scale-95">
<span class="text-xl">🕯️</span>
<span class="text-[10px] font-bold text-gray-700">Candle</span>
</button>
</div>
<button id="pack-next-btn" onclick="goToStage(10, 'pop')" disabled class="w-full py-3.5 px-6 bg-gray-200 text-gray-400 font-bold rounded-2xl transition cursor-not-allowed">
Select Exactly 5 Items (0/5)
</button>
</section>
<!-- STAGE 10: SECURITY CLEARANCE PASSCODE -->
<section id="stage-10" class="glass-card-cute rounded-3xl p-6 sm:p-8 text-center hidden transition-all duration-500 transform scale-95 opacity-0">
<div class="w-16 h-16 mx-auto mb-3 flex items-center justify-center bg-teal-100 rounded-full border-2 border-teal-200 text-3xl">
🔐
</div>
<h2 class="text-2xl font-bold text-gray-800 mb-1">Security Gate</h2>
<p class="text-xs text-gray-500 mb-4">Enter passcode (Hint: The cutest person ever):</p>
<div class="mb-4">
<input id="passcode-input" type="text" placeholder="Enter Name Here..." class="w-full text-center py-3 px-4 rounded-2xl border-2 border-pink-200 font-bold text-lg text-pink-600 uppercase tracking-widest focus:outline-none focus:border-pink-400">
</div>
<button onclick="verifyPasscode()" class="w-full py-3.5 px-6 bg-gradient-to-r from-teal-400 to-emerald-400 text-white font-extrabold rounded-2xl shadow-md transition transform active:scale-95 text-base">
Unlock Portal 🗝️
</button>
<p id="passcode-error" class="text-xs text-red-500 mt-3 font-bold opacity-0">Hint: Capital DIP or dip! 😉</p>
</section>
<!-- STAGE 11: HEARTBEAT SCANNER MINI-GAME -->
<section id="stage-11" class="glass-card-cute rounded-3xl p-6 sm:p-8 text-center hidden transition-all duration-500 transform scale-95 opacity-0">
<span class="inline-block px-3 py-1 bg-rose-100 text-rose-600 rounded-full text-xs font-bold uppercase tracking-wider mb-2">
Lie Detector 💓
</span>
<h2 class="text-2xl font-bold text-gray-800 mb-2">Heartbeat Verification</h2>
<p class="text-xs text-gray-500 mb-6">Press and HOLD your thumb on the heart scanner to measure excitement!</p>
<div class="relative flex justify-center mb-6">
<button id="scanner-btn" onmousedown="startHeartScan()" onmouseup="endHeartScan()" ontouchstart="startHeartScan(event)" ontouchend="endHeartScan()" class="w-32 h-32 bg-gradient-to-tr from-rose-400 to-pink-500 rounded-full flex flex-col items-center justify-center text-white shadow-xl transform active:scale-95 transition-transform duration-300 relative overflow-hidden">
<span class="text-5xl animate-pulse">💓</span>
<span class="text-[10px] font-extrabold uppercase mt-1">HOLD TO SCAN</span>
<div id="scan-progress" class="absolute bottom-0 left-0 right-0 bg-white/30 h-0 transition-all duration-100 pointer-events-none"></div>
</button>
</div>
<p id="scan-status" class="text-xs font-bold text-gray-500">Waiting for Dip's thumbpress...</p>
</section>
<!-- STAGE 12: THE GRAND PROPOSAL (SHIGOAL TRIP) -->
<section id="stage-12" class="glass-card-cute rounded-3xl p-6 sm:p-8 text-center hidden transition-all duration-500 transform scale-95 opacity-0 relative">
<div class="relative w-full bg-gradient-to-b from-teal-50 to-emerald-50 rounded-2xl p-4 mb-4 border border-teal-100">
<div class="flex justify-center items-center gap-3 my-1">
<span class="text-4xl animate-doodle">⛰️</span>
<span class="text-5xl animate-wiggle">🏡</span>
<span class="text-4xl animate-doodle">🌲</span>
</div>
<div class="inline-block mt-2 px-3 py-1 bg-teal-500/10 text-teal-700 rounded-full text-xs font-bold">
📍 Destination: SHIGOAL
</div>
</div>
<h2 class="text-2xl sm:text-3xl font-extrabold text-gray-800 mb-2 leading-tight">
Dip... Will you go to <span class="text-pink-500 underline decoration-pink-300 decoration-wavy">SHIGOAL</span> with me?
</h2>
<!-- Detailed Trip Breakdown -->
<div class="bg-pink-50/90 border border-pink-200/60 rounded-2xl p-3.5 my-3 text-left space-y-2">
<div class="flex items-center gap-3 text-xs sm:text-sm font-semibold text-gray-700">
<span class="p-1.5 bg-pink-200 rounded-lg text-pink-700">📅</span>
<span><strong>Dates:</strong> Oct 24 – Oct 26</span>
</div>
<div class="flex items-center gap-3 text-xs sm:text-sm font-semibold text-gray-700">
<span class="p-1.5 bg-purple-200 rounded-lg text-purple-700">🌙</span>
<span><strong>Duration:</strong> 2 Nights, 3 Days</span>
</div>
<div class="flex items-center gap-3 text-xs sm:text-sm font-semibold text-gray-700">
<span class="p-1.5 bg-emerald-200 rounded-lg text-emerald-700">🚗</span>
<span><strong>Return:</strong> Back on Monday, Oct 26</span>
</div>
<div class="flex items-center gap-3 text-xs sm:text-sm font-semibold text-gray-700">
<span class="p-1.5 bg-amber-200 rounded-lg text-amber-700">📝</span>
<span><strong>Leave Needed:</strong> 2 Days (Oct 25 & 26)</span>
</div>
</div>
<!-- Teasing Toast Message area -->
<div id="toast-container" class="h-8 mb-1 flex items-center justify-center">
<span id="toast-text" class="text-xs font-bold text-pink-600 bg-pink-100 px-3 py-1 rounded-full opacity-0"></span>
</div>
<!-- Action Buttons Area -->
<div class="relative min-h-[110px] flex items-center justify-center gap-4 flex-wrap pt-2">
<!-- YES BUTTON -->
<button id="yes-btn" onclick="acceptProposal()" class="py-4 px-8 bg-gradient-to-r from-pink-500 to-rose-400 hover:from-pink-600 hover:to-rose-500 text-white font-extrabold text-xl rounded-2xl shadow-xl transition-all duration-300 transform active:scale-95 animate-pulse-glow z-20 flex items-center gap-2">
<span>YES, ABSOLUTELY!</span>
<span>💖</span>
</button>
<!-- NO BUTTON (Runaway button) -->
<button id="no-btn" onmouseover="dodgeNoButton()" onclick="dodgeNoButton()" ontouchstart="dodgeNoButton(event)" class="py-3 px-6 bg-gray-200 hover:bg-gray-300 text-gray-600 font-bold text-base rounded-2xl transition-all duration-150 z-10 shadow-sm border border-gray-300 select-none">
No 🙈
</button>
</div>
</section>
<!-- STAGE 13: CELEBRATION & COUNTDOWN -->
<section id="stage-13" class="glass-card-cute rounded-3xl p-6 sm:p-8 text-center hidden transition-all duration-500 transform scale-95 opacity-0">
<div class="w-20 h-20 mx-auto mb-3 flex items-center justify-center bg-yellow-100 rounded-full border-4 border-yellow-200 animate-bounce">
<span class="text-5xl">🥳</span>
</div>
<h2 class="text-2xl sm:text-3xl font-extrabold text-gray-800 mb-1">BEST DECISION EVER! 🎉</h2>
<p class="text-sm sm:text-base font-bold text-pink-500 mb-4">Pack your bags Dip, we are going to SHIGOAL!</p>
<!-- Countdown Box -->
<div class="bg-gradient-to-r from-pink-50 via-purple-50 to-teal-50 border-2 border-pink-200 rounded-2xl p-4 mb-5 text-center shadow-inner">
<div class="text-xs font-bold text-purple-600 uppercase tracking-widest mb-1">Countdown to Departure</div>
<div id="countdown-timer" class="text-xl sm:text-2xl font-black text-gray-800 tracking-wide font-mono">
Calculating days... ⏳
</div>
</div>
<div class="space-y-3">
<button onclick="copyItinerary()" class="w-full py-3.5 px-6 bg-white hover:bg-pink-50 border-2 border-pink-300 text-pink-600 font-bold rounded-2xl shadow-sm transition active:scale-95 flex items-center justify-center gap-2">
<span>📋 Copy Itinerary Details</span>
</button>
<button onclick="retriggerConfetti()" class="w-full py-3 px-6 bg-pink-100 hover:bg-pink-200 text-pink-700 font-bold rounded-2xl transition active:scale-95 flex items-center justify-center gap-2 text-sm">
<span>✨ More Confetti & Hearts!</span>
</button>
</div>
<p class="text-xs text-gray-400 mt-5">Can't wait for Oct 24–26! 💕</p>
</section>
</main>
<script>
let currentStage = 1;
const totalStages = 13;
let collectedBribes = 0;
let selectedItems = [];
let dodgeCount = 0;
let yesButtonScale = 1;
let scanInterval = null;
let scanProgress = 0;
const dodgePhrases = [
"Dip, nice try! 😜",
"No is not installed! 🏃♂️",
"YES is mandatory! ✨",
"Nope, too slow! 🌸",
"Think again Dip! 💖",
"Error: 'No' disabled! 🙅♂️",
"Almost, but NOPE! 🙈",
"You have to press YES! 👉"
];
function updateProgress(stageNum) {
const fill = document.getElementById('progress-bar-fill');
const text = document.getElementById('progress-text');
const pct = Math.round((stageNum / totalStages) * 100);
fill.style.width = `${pct}%`;
text.textContent = `${stageNum} / ${totalStages}`;
}
// Web Audio Synthesizer
function playSound(type) {
try {
const ctx = new (window.AudioContext || window.webkitAudioContext)();
if (ctx.state === 'suspended') ctx.resume();
const osc = ctx.createOscillator();
const gain = ctx.createGain();
osc.connect(gain);
gain.connect(ctx.destination);
const now = ctx.currentTime;
if (type === 'drone') {
osc.type = 'sawtooth';
osc.frequency.setValueAtTime(110, now);
osc.frequency.exponentialRampToValueAtTime(55, now + 0.5);
gain.gain.setValueAtTime(0.3, now);
gain.gain.linearRampToValueAtTime(0.01, now + 0.5);
osc.start(now);
osc.stop(now + 0.5);
} else if (type === 'jumpscare') {
osc.type = 'square';
osc.frequency.setValueAtTime(800, now);
osc.frequency.linearRampToValueAtTime(150, now + 0.35);
gain.gain.setValueAtTime(0.4, now);
gain.gain.linearRampToValueAtTime(0.01, now + 0.35);
osc.start(now);
osc.stop(now + 0.35);
} else if (type === 'pop') {
osc.type = 'sine';
osc.frequency.setValueAtTime(450, now);
osc.frequency.exponentialRampToValueAtTime(900, now + 0.12);
gain.gain.setValueAtTime(0.3, now);
gain.gain.linearRampToValueAtTime(0.01, now + 0.12);
osc.start(now);
osc.stop(now + 0.12);
} else if (type === 'dodge') {
osc.type = 'triangle';
osc.frequency.setValueAtTime(650, now);
osc.frequency.exponentialRampToValueAtTime(200, now + 0.15);
gain.gain.setValueAtTime(0.2, now);
gain.gain.linearRampToValueAtTime(0.01, now + 0.15);
osc.start(now);
osc.stop(now + 0.15);
} else if (type === 'victory') {
const notes = [523.25, 659.25, 783.99, 1046.50];
notes.forEach((freq, idx) => {
const noteOsc = ctx.createOscillator();
const noteGain = ctx.createGain();
noteOsc.type = 'sine';
noteOsc.frequency.setValueAtTime(freq, now + idx * 0.1);
noteGain.gain.setValueAtTime(0.3, now + idx * 0.1);
noteGain.gain.exponentialRampToValueAtTime(0.001, now + idx * 0.1 + 0.35);
noteOsc.connect(noteGain);
noteOsc.connect(ctx.destination);
noteOsc.start(now + idx * 0.1);
noteOsc.stop(now + idx * 0.1 + 0.35);
});
}
} catch (e) {
console.log("Audio not supported or blocked", e);
}
}
function goToStage(stageNum, soundType = 'pop') {
if (soundType) playSound(soundType);
const currEl = document.getElementById(`stage-${currentStage}`);
const nextEl = document.getElementById(`stage-${stageNum}`);
currEl.classList.add('opacity-0', 'scale-95');
setTimeout(() => {
currEl.classList.add('hidden');
nextEl.classList.remove('hidden');
void nextEl.offsetWidth;
nextEl.classList.remove('opacity-0', 'scale-95');
nextEl.classList.add('opacity-100', 'scale-100');
currentStage = stageNum;
updateProgress(stageNum);
}, 300);
}
function triggerJumpscare() {
playSound('jumpscare');
document.getElementById('main-body').classList.add('animate-glitch');
setTimeout(() => {
document.getElementById('main-body').classList.remove('animate-glitch');
}, 450);
goToStage(5, null);
}
function switchToCuteMode() {
playSound('pop');
document.getElementById('main-body').classList.add('cute-mode');
document.getElementById('cute-bg-decor').classList.remove('opacity-0');
document.getElementById('cute-bg-decor').classList.add('opacity-100');
goToStage(6, 'pop');
}
function wrongAnswerRiddle(btn) {
playSound('dodge');
btn.classList.add('bg-red-100', 'border-red-300');
document.getElementById('riddle-error').classList.remove('opacity-0');
}
function collectBribe(btn) {
if (btn.classList.contains('collected')) return;
playSound('pop');
btn.classList.add('collected', 'bg-pink-100', 'border-pink-300', 'scale-95', 'pointer-events-none');
collectedBribes++;
const nextBtn = document.getElementById('bribe-next-btn');
nextBtn.textContent = `Collect All Treats (${collectedBribes}/4) ✨`;
if (collectedBribes >= 4) {
nextBtn.disabled = false;
nextBtn.className = "w-full py-3.5 px-6 bg-gradient-to-r from-amber-400 to-pink-400 text-white font-extrabold rounded-2xl shadow-lg animate-pulse-glow cursor-pointer";
nextBtn.textContent = "All Treats Unlocked! Next Stage ➡️";
}
}
// Toggle Packing Items (Strict 5 items selection)
function togglePackItem(btn, emoji, name) {
playSound('pop');
const itemKey = `${emoji} ${name}`;
const idx = selectedItems.indexOf(itemKey);
if (idx > -1) {
// Deselect item
selectedItems.splice(idx, 1);
btn.classList.remove('border-pink-500', 'bg-pink-100', 'ring-2', 'ring-pink-300');
} else {
// Check if already 5 items packed
if (selectedItems.length >= 5) {
playSound('dodge');
const packInstruction = document.getElementById('pack-instruction');
packInstruction.textContent = "⚠️ Limit reached! Deselect an item to swap!";
packInstruction.className = "text-xs text-red-500 font-bold mb-3 animate-bounce";
setTimeout(() => {
packInstruction.textContent = "You MUST pick EXACTLY 5 essential items from 15 below:";
packInstruction.className = "text-xs text-pink-600 font-bold mb-3";
}, 2000);
return;
}
// Select item
selectedItems.push(itemKey);
btn.classList.add('border-pink-500', 'bg-pink-100', 'ring-2', 'ring-pink-300');
}
renderSuitcase();
}
function renderSuitcase() {
const suitcase = document.getElementById('suitcase');
const emptyHint = document.getElementById('suitcase-empty');
const counter = document.getElementById('pack-counter');
const nextBtn = document.getElementById('pack-next-btn');
suitcase.innerHTML = '';
if (selectedItems.length === 0) {
suitcase.appendChild(emptyHint);
emptyHint.style.display = 'block';
} else {
selectedItems.forEach(itemStr => {
const tag = document.createElement('div');
tag.className = "bg-white px-2 py-0.5 rounded-full shadow-sm text-[11px] font-bold text-pink-600 flex items-center gap-1 border border-pink-200 animate-wiggle";
tag.innerHTML = `<span>${itemStr}</span>`;
suitcase.appendChild(tag);
});
}
counter.textContent = `Selected: ${selectedItems.length} / 5 🧳`;
if (selectedItems.length === 5) {
nextBtn.disabled = false;
nextBtn.className = "w-full py-3.5 px-6 bg-gradient-to-r from-pink-400 to-purple-400 text-white font-extrabold rounded-2xl shadow-lg animate-pulse-glow cursor-pointer";
nextBtn.textContent = "Suitcase Packed with 5 Items! Ready! 🔒";
} else {
nextBtn.disabled = true;
nextBtn.className = "w-full py-3.5 px-6 bg-gray-200 text-gray-400 font-bold rounded-2xl transition cursor-not-allowed";
nextBtn.textContent = `Select Exactly 5 Items (${selectedItems.length}/5)`;
}
}
function verifyPasscode() {
const input = document.getElementById('passcode-input').value.trim().toUpperCase();
if (input === 'DIP') {
playSound('pop');
goToStage(11, 'pop');
} else {
playSound('dodge');
document.getElementById('passcode-error').classList.remove('opacity-0');
}
}
function startHeartScan(e) {
if (e) e.preventDefault();
scanProgress = 0;
const progressEl = document.getElementById('scan-progress');
const statusEl = document.getElementById('scan-status');
scanInterval = setInterval(() => {
scanProgress += 10;
progressEl.style.height = `${scanProgress}%`;
statusEl.textContent = `Scanning heart rate... ${60 + scanProgress} BPM`;
if (scanProgress >= 100) {
clearInterval(scanInterval);
statusEl.textContent = "120 BPM DETECTED! Target Dip is super excited! 💕";
playSound('victory');
setTimeout(() => {
goToStage(12, 'pop');
}, 1000);
}
}, 150);
}
function endHeartScan() {
if (scanProgress < 100) {
clearInterval(scanInterval);
document.getElementById('scan-progress').style.height = '0%';
document.getElementById('scan-status').textContent = "Scan canceled! Hold thumb longer!";
}
}
function dodgeNoButton(e) {
if (e) e.preventDefault();
playSound('dodge');
dodgeCount++;
const noBtn = document.getElementById('no-btn');
const yesBtn = document.getElementById('yes-btn');
const maxX = Math.min(window.innerWidth - 120, 240);
const maxY = 150;
const randomX = (Math.random() - 0.5) * maxX;
const randomY = (Math.random() - 0.5) * maxY;
const currentScale = Math.max(0.55, 1 - dodgeCount * 0.05);
noBtn.style.transform = `translate(${randomX}px, ${randomY}px) scale(${currentScale})`;
yesButtonScale += 0.09;
yesBtn.style.transform = `scale(${yesButtonScale})`;
showTeasingToast();
}
function showTeasingToast() {
const toastText = document.getElementById('toast-text');
const randomPhrase = dodgePhrases[Math.floor(Math.random() * dodgePhrases.length)];
toastText.textContent = randomPhrase;
toastText.className = "text-xs font-bold text-pink-600 bg-pink-100 border border-pink-200 px-3 py-1 rounded-full toast-msg";
setTimeout(() => {
toastText.className = "text-xs font-bold text-pink-600 bg-pink-100 border border-pink-200 px-3 py-1 rounded-full opacity-0";
}, 1400);
}
function acceptProposal() {
playSound('victory');
goToStage(13, null);
launchConfetti();
startCountdown();
}
function launchConfetti() {
if (typeof confetti === 'function') {
const count = 200;
const defaults = { origin: { y: 0.7 } };
function fire(particleRatio, opts) {
confetti(Object.assign({}, defaults, opts, {
particleCount: Math.floor(count * particleRatio)
}));
}
fire(0.25, { spread: 26, startVelocity: 55, colors: ['#F472B6', '#F43F5E', '#A78BFA'] });
fire(0.2, { spread: 60, colors: ['#34D399', '#FBBF24', '#F472B6'] });
fire(0.35, { spread: 100, decay: 0.91, scalar: 0.8 });
fire(0.1, { spread: 120, startVelocity: 25, decay: 0.92, colors: ['#E879F9', '#38BDF8', '#F472B6'] });
}
}
function retriggerConfetti() {
playSound('victory');
launchConfetti();
}
function startCountdown() {
const targetDate = new Date('October 24, 2026 00:00:00').getTime();
function updateTimer() {
const now = new Date().getTime();
const diff = targetDate - now;
if (diff <= 0) {
document.getElementById('countdown-timer').textContent = "IT'S TIME FOR SHIGOAL! 🎉";
return;
}
const days = Math.floor(diff / (1000 * 60 * 60 * 24));
const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
document.getElementById('countdown-timer').textContent = `${days}d : ${hours}h : ${minutes}m`;
}
updateTimer();
setInterval(updateTimer, 60000);
}
function copyItinerary() {
const packedListStr = selectedItems.length > 0 ? selectedItems.join(', ') : "Bikini, Saree, Lipstick, Round Comb, Random Essentials";
const details = `🌲 SHIGOAL TRIP GETAWAY FOR DIP 🌲\n📅 Dates: Oct 24 – Oct 26 (2 Nights, 3 Days)\n📝 Office Leave: Oct 25 & 26 (2 Days)\n🚗 Return: Monday, Oct 26\n🧳 Packed: ${packedListStr}\n✨ It's officially a date! 💕`;
const tempInput = document.createElement('textarea');
tempInput.value = details;
document.body.appendChild(tempInput);
tempInput.select();
document.execCommand('copy');
document.body.removeChild(tempInput);
const toastText = document.createElement('div');
toastText.className = "fixed bottom-6 left-1/2 transform -translate-x-1/2 bg-gray-800 text-white text-xs font-bold px-4 py-2 rounded-full shadow-lg z-50 animate-bounce";
toastText.textContent = "📋 Itinerary copied for Dip!";
document.body.appendChild(toastText);
setTimeout(() => { toastText.remove(); }, 2200);
}
// Initialize progress bar on load
updateProgress(1);
</script>
