humza7656 commited on
Commit
ddcebbc
·
verified ·
1 Parent(s): df1ab5c

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +609 -19
index.html CHANGED
@@ -1,19 +1,609 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>A Match Made In Heaven - Princess's Invitation</title>
7
+
8
+ <script>
9
+ window.tailwind = {
10
+ config: {
11
+ theme: {
12
+ extend: {
13
+ fontFamily: {
14
+ sans: ['Inter', 'sans-serif'],
15
+ serif: ['Playfair Display', 'serif'],
16
+ cursive: ['Great Vibes', 'cursive'],
17
+ },
18
+ colors: {
19
+ obsidian: {
20
+ DEFAULT: '#030106',
21
+ velvet: '#0b0410',
22
+ card: '#12071a',
23
+ rose: '#f43f5e',
24
+ gold: '#fbbf24',
25
+ }
26
+ },
27
+ animation: {
28
+ 'pulse-slow': 'pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite',
29
+ 'float-slow': 'float 8s ease-in-out infinite',
30
+ 'glow-radial': 'glow 3s ease-in-out infinite alternate',
31
+ },
32
+ keyframes: {
33
+ float: {
34
+ '0%, 100%': { transform: 'translateY(0px) rotate(0deg)' },
35
+ '50%': { transform: 'translateY(-12px) rotate(1deg)' },
36
+ },
37
+ glow: {
38
+ '0%': { 'box-shadow': '0 0 15px rgba(244, 63, 94, 0.4)' },
39
+ '100%': { 'box-shadow': '0 0 35px rgba(244, 63, 94, 0.8), 0 0 15px rgba(251, 191, 2, 0.4)' }
40
+ }
41
+ }
42
+ }
43
+ }
44
+ }
45
+ };
46
+ </script>
47
+ <script src="https://cdn.tailwindcss.com"></script>
48
+
49
+ <!-- Premium Fonts and Icons -->
50
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Playfair+Display:ital,wght@0,600;0,800;1,400&family=Great+Vibes&display=swap" rel="stylesheet">
51
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
52
+
53
+ <style>
54
+ body {
55
+ background-color: #030106;
56
+ background-image:
57
+ radial-gradient(at 0% 0%, rgba(50, 10, 40, 0.4) 0px, transparent 50%),
58
+ radial-gradient(at 100% 100%, rgba(10, 5, 30, 0.6) 0px, transparent 50%),
59
+ radial-gradient(at 50% 50%, rgba(5, 2, 12, 0.95) 0px, transparent 100%);
60
+ background-attachment: fixed;
61
+ overflow-x: hidden;
62
+ }
63
+ /* Glassmorphism panels */
64
+ .glass-panel {
65
+ background: rgba(18, 7, 26, 0.7);
66
+ backdrop-filter: blur(16px);
67
+ -webkit-backdrop-filter: blur(16px);
68
+ border: 1px solid rgba(244, 63, 94, 0.15);
69
+ }
70
+ .text-glow-rose {
71
+ text-shadow: 0 0 15px rgba(244, 63, 94, 0.7);
72
+ }
73
+ .text-glow-gold {
74
+ text-shadow: 0 0 15px rgba(251, 191, 36, 0.7);
75
+ }
76
+ </style>
77
+ </head>
78
+ <body class="text-gray-100 font-sans min-h-screen flex flex-col justify-between relative">
79
+
80
+ <!-- Ambient Hearts Canvas background -->
81
+ <canvas id="ambient-canvas" class="fixed top-0 left-0 w-full h-full pointer-events-none z-0"></canvas>
82
+
83
+ <!-- Invisible Audio Element with the custom romantic track -->
84
+ <audio id="romantic-music" loop preload="auto">
85
+ <source src="https://wxkzjhpzbtqekksgzsve.supabase.co/storage/v1/object/public/files/luvstr.mp3" type="audio/mpeg">
86
+ </audio>
87
+
88
+ <header class="relative z-10 border-b border-rose-950/20 bg-black/40 backdrop-blur-md px-6 py-4">
89
+ <div class="max-w-7xl mx-auto flex justify-between items-center">
90
+ <div class="flex items-center gap-3">
91
+ <div class="bg-gradient-to-tr from-rose-500 to-amber-500 p-2 rounded-full shadow-lg">
92
+ <i class="fa-solid fa-heart text-white animate-pulse"></i>
93
+ </div>
94
+ <div>
95
+ <h1 class="text-xl font-serif font-bold tracking-wider text-transparent bg-clip-text bg-gradient-to-r from-pink-400 via-rose-300 to-amber-300">
96
+ OUR DIGITAL ESCAPE
97
+ </h1>
98
+ <p class="text-xs text-rose-400/80 uppercase tracking-widest font-semibold">Tonight at 10:00 PM PKT</p>
99
+ </div>
100
+ </div>
101
+ <!-- Music status indicator -->
102
+ <button onclick="toggleMusic()" class="bg-rose-950/50 hover:bg-rose-900/60 border border-rose-500/30 px-4 py-1.5 rounded-full text-xs font-semibold tracking-wider flex items-center gap-2 transition-all">
103
+ <i id="music-icon" class="fa-solid fa-volume-xmark"></i>
104
+ <span id="music-text">Music Off</span>
105
+ </button>
106
+ </div>
107
+ </header>
108
+
109
+ <main class="relative z-10 max-w-7xl mx-auto w-full px-4 py-8 flex-grow flex items-center justify-center">
110
+
111
+ <!-- STEP 1: Elegant Romantic Invitation -->
112
+ <section id="invitation-card" class="w-full max-w-xl mx-auto text-center space-y-8 animate-float-slow transition-all duration-500">
113
+ <!-- Premium Royal Emblem -->
114
+ <div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-rose-500/10 border border-rose-500/20 shadow-md">
115
+ <i class="fa-solid fa-crown text-amber-400"></i>
116
+ <span class="text-xs text-rose-300 font-medium tracking-widest uppercase">An Invitation for Princess</span>
117
+ </div>
118
+
119
+ <!-- Main Invitation Panel -->
120
+ <div class="glass-panel p-8 sm:p-12 rounded-[2.5rem] shadow-2xl relative overflow-hidden group">
121
+ <div class="absolute -top-16 -right-16 w-36 h-36 bg-rose-500/10 rounded-full blur-2xl pointer-events-none"></div>
122
+ <div class="absolute -bottom-16 -left-16 w-36 h-36 bg-amber-500/10 rounded-full blur-2xl pointer-events-none"></div>
123
+
124
+ <div class="space-y-6">
125
+ <h2 class="text-3xl sm:text-5xl font-serif font-bold text-transparent bg-clip-text bg-gradient-to-b from-white to-gray-300 leading-tight">
126
+ Hey, Princess...
127
+ </h2>
128
+ <p class="text-lg sm:text-xl text-rose-200/90 font-cursive tracking-wide">
129
+ Would you like to go on an online date with me?
130
+ </p>
131
+ </div>
132
+
133
+ <!-- Interactive Dual Choices Pitch -->
134
+ <div id="action-pitch" class="relative mt-10 h-24 flex items-center justify-center gap-6">
135
+ <!-- Yes option (Smooth action) -->
136
+ <button onclick="acceptInvitation()" class="bg-gradient-to-r from-rose-600 to-pink-500 hover:from-rose-500 hover:to-pink-400 text-white font-bold tracking-wider px-8 py-4 rounded-full shadow-lg transform active:scale-95 transition-all text-sm uppercase flex items-center gap-2 z-20">
137
+ <i class="fa-solid fa-heart-circle-check"></i> YES!
138
+ </button>
139
+
140
+ <!-- Playful Dodging No Option -->
141
+ <button id="no-button" onmouseover="dodgeButton()" onclick="dodgeButton()" class="absolute bg-zinc-900 hover:bg-zinc-800 text-zinc-400 font-bold tracking-wider px-8 py-4 rounded-full border border-zinc-800 transition-all text-sm uppercase z-10 whitespace-nowrap">
142
+ No
143
+ </button>
144
+ </div>
145
+ </div>
146
+ </section>
147
+
148
+ <!-- STEP 2: Tonight Confirmation Pop-up -->
149
+ <section id="confirm-popup" class="hidden w-full max-w-md mx-auto text-center space-y-6 transition-all duration-500 scale-90 opacity-0">
150
+ <div class="glass-panel p-8 rounded-[2rem] border border-amber-500/20 shadow-2xl relative overflow-hidden">
151
+ <div class="absolute inset-x-0 top-0 h-1.5 bg-gradient-to-r from-rose-500 to-amber-500"></div>
152
+
153
+ <div class="w-16 h-16 bg-amber-400/10 rounded-full flex items-center justify-center mx-auto mb-4">
154
+ <i class="fa-solid fa-calendar-star text-2xl text-amber-400"></i>
155
+ </div>
156
+
157
+ <h3 class="text-2xl font-serif font-bold text-white mb-2">It's a Match!</h3>
158
+
159
+ <div class="bg-black/40 border border-rose-500/20 rounded-2xl p-4 my-6 space-y-3">
160
+ <p class="text-sm uppercase tracking-widest text-rose-400 font-semibold font-mono">Date Details</p>
161
+ <p class="text-lg font-bold text-amber-200 font-serif">Tonight 10:00 PM PKT</p>
162
+ <p class="text-xs text-gray-400">A beautiful evening dedicated entirely to you.</p>
163
+ </div>
164
+
165
+ <button onclick="enterLobby()" class="w-full bg-gradient-to-r from-rose-600 to-amber-500 hover:from-rose-500 hover:to-amber-400 text-white font-extrabold tracking-widest text-sm py-4 rounded-full transition-all duration-300 shadow-lg transform active:scale-95">
166
+ OK
167
+ </button>
168
+ </div>
169
+ </section>
170
+
171
+ <!-- STEP 3: Premium Love Arena & Match Center -->
172
+ <section id="date-lobby" class="hidden w-full max-w-6xl mx-auto space-y-8 transition-all duration-500 opacity-0 translate-y-4">
173
+
174
+ <div class="grid grid-cols-1 lg:grid-cols-12 gap-8 items-start">
175
+
176
+ <!-- LEFT COLUMN: The "How Much I Love Her" Ledger (7/12 cols) -->
177
+ <div class="lg:col-span-7 space-y-6">
178
+
179
+ <!-- Head Romance Card -->
180
+ <div class="glass-panel p-6 sm:p-8 rounded-[2.5rem] shadow-xl relative overflow-hidden">
181
+ <div class="absolute -top-10 -right-10 w-32 h-32 bg-rose-500/10 rounded-full blur-2xl pointer-events-none"></div>
182
+
183
+ <div class="space-y-4">
184
+ <span class="text-xs font-bold text-rose-400 uppercase tracking-widest font-mono"><i class="fa-solid fa-heart mr-1"></i> Infinite Love Declaration</span>
185
+ <h3 class="text-2xl sm:text-4xl font-serif font-bold text-transparent bg-clip-text bg-gradient-to-r from-white via-rose-100 to-rose-300">
186
+ More Than All The Stars
187
+ </h3>
188
+ <p class="text-sm text-gray-300 leading-relaxed">
189
+ "My love for you reaches into infinite horizons. No amount of distance, no standard of time, and no achievements on earth can ever compare to the rhythm of my heart whenever I think of you. You are my light, my comfort, and my entire world."
190
+ </p>
191
+ </div>
192
+
193
+ <!-- Telemetry Grid (Stats of Love) -->
194
+ <div class="grid grid-cols-2 sm:grid-cols-3 gap-4 mt-8 pt-6 border-t border-rose-950/40">
195
+ <div class="bg-black/30 p-3.5 rounded-2xl border border-rose-950/30 text-center">
196
+ <span class="block text-xl font-bold font-mono text-amber-400 text-glow-gold">Infinite %</span>
197
+ <span class="text-[10px] text-gray-400 uppercase tracking-widest font-semibold">Chemistry Rating</span>
198
+ </div>
199
+ <div class="bg-black/30 p-3.5 rounded-2xl border border-rose-950/30 text-center">
200
+ <span class="block text-xl font-bold font-mono text-rose-400 text-glow-rose">24/7/365</span>
201
+ <span class="text-[10px] text-gray-400 uppercase tracking-widest font-semibold">Thinking of You</span>
202
+ </div>
203
+ <div class="bg-black/30 p-3.5 rounded-2xl border border-rose-950/30 text-center col-span-2 sm:col-span-1">
204
+ <span class="block text-xl font-bold font-mono text-rose-300 text-glow-rose">Unlimited</span>
205
+ <span class="text-[10px] text-gray-400 uppercase tracking-widest font-semibold">Heartbeats Skipped</span>
206
+ </div>
207
+ </div>
208
+ </div>
209
+
210
+ <!-- Interactive Reasons Slider -->
211
+ <div class="glass-panel p-6 rounded-[2rem] shadow-xl relative overflow-hidden">
212
+ <div class="flex justify-between items-center mb-4">
213
+ <span class="text-xs font-bold text-amber-400 uppercase tracking-widest font-mono"><i class="fa-solid fa-wand-magic-sparkles mr-1.5"></i> Why You Are So Loved</span>
214
+ <div class="flex gap-2">
215
+ <button onclick="prevLoveReason()" class="w-8 h-8 rounded-full bg-rose-950/40 hover:bg-rose-900/50 flex items-center justify-center border border-rose-500/20 text-rose-300 transition-all">
216
+ <i class="fa-solid fa-chevron-left text-xs"></i>
217
+ </button>
218
+ <button onclick="nextLoveReason()" class="w-8 h-8 rounded-full bg-rose-950/40 hover:bg-rose-900/50 flex items-center justify-center border border-rose-500/20 text-rose-300 transition-all">
219
+ <i class="fa-solid fa-chevron-right text-xs"></i>
220
+ </button>
221
+ </div>
222
+ </div>
223
+
224
+ <!-- Love Reason Note Container -->
225
+ <div class="bg-black/40 border border-rose-950/30 rounded-2xl p-6 min-h-[140px] flex items-center justify-center text-center">
226
+ <div id="reason-content-wrapper" class="transition-all duration-300">
227
+ <p id="reason-text" class="text-lg font-cursive text-rose-100 italic">
228
+ "Your laugh is my absolute favorite sound in the universe. It makes any dark day instantly bright."
229
+ </p>
230
+ <span id="reason-count" class="text-[9px] text-rose-400/60 uppercase tracking-widest block mt-4 font-mono">Reason 1 of 5</span>
231
+ </div>
232
+ </div>
233
+ </div>
234
+
235
+ </div>
236
+
237
+ <!-- RIGHT COLUMN: Countdown Dashboard Card -->
238
+ <div class="lg:col-span-5 space-y-6">
239
+
240
+ <div class="glass-panel p-6 rounded-[2.5rem] shadow-xl text-center space-y-6">
241
+ <span class="text-xs font-bold text-rose-400 uppercase tracking-widest">Kick-off Countdown Clock</span>
242
+
243
+ <div class="grid grid-cols-4 gap-2">
244
+ <div class="bg-black/40 p-3 rounded-xl border border-rose-950/40">
245
+ <span id="days" class="block text-2xl font-mono font-bold text-glow-rose text-rose-400">00</span>
246
+ <span class="text-[9px] text-gray-400 uppercase font-semibold">Days</span>
247
+ </div>
248
+ <div class="bg-black/40 p-3 rounded-xl border border-rose-950/40">
249
+ <span id="hours" class="block text-2xl font-mono font-bold text-glow-rose text-rose-400">00</span>
250
+ <span class="text-[9px] text-gray-400 uppercase font-semibold">Hours</span>
251
+ </div>
252
+ <div class="bg-black/40 p-3 rounded-xl border border-rose-950/40">
253
+ <span id="minutes" class="block text-2xl font-mono font-bold text-glow-rose text-rose-400">00</span>
254
+ <span class="text-[9px] text-gray-400 uppercase font-semibold">Mins</span>
255
+ </div>
256
+ <div class="bg-black/40 p-3 rounded-xl border border-rose-950/40">
257
+ <span id="seconds" class="block text-2xl font-mono font-bold text-glow-rose text-rose-400 animate-pulse">00</span>
258
+ <span class="text-[9px] text-gray-400 uppercase font-semibold">Secs</span>
259
+ </div>
260
+ </div>
261
+
262
+ <!-- Real-time dynamic timezone reassuring widget -->
263
+ <div class="p-3 rounded-xl bg-black/60 border border-amber-500/10 text-[11px] text-gray-400 space-y-1">
264
+ <p class="font-semibold text-amber-200"><i class="fa-solid fa-earth-americas text-amber-400 mr-1.5"></i> Time Zone Synchronized</p>
265
+ <p>Target Kickoff: <span class="text-rose-300 font-bold">10:00 PM PKT Tonight</span></p>
266
+ </div>
267
+ </div>
268
+
269
+ <!-- Custom Music Visualizer Disk -->
270
+ <div class="glass-panel p-6 rounded-[2.5rem] shadow-xl flex flex-col items-center justify-center text-center space-y-4">
271
+ <span class="text-xs font-bold text-rose-300 uppercase tracking-widest">Now Playing</span>
272
+
273
+ <div class="relative w-24 h-24 flex items-center justify-center">
274
+ <div id="music-vinyl" class="w-20 h-20 bg-zinc-900 border-4 border-zinc-800 rounded-full flex items-center justify-center relative shadow-lg">
275
+ <div class="w-8 h-8 bg-pink-500/20 rounded-full border border-pink-500/40 flex items-center justify-center">
276
+ <i class="fa-solid fa-music text-rose-400 text-xs"></i>
277
+ </div>
278
+ </div>
279
+ </div>
280
+
281
+ <div>
282
+ <p class="text-sm font-semibold text-rose-100">Luvstr - Romantic Theme</p>
283
+ <p class="text-[10px] text-gray-500 uppercase font-mono tracking-widest mt-1">Calming Ambient Melody</p>
284
+ </div>
285
+ </div>
286
+
287
+ </div>
288
+
289
+ </div>
290
+
291
+ </section>
292
+
293
+ </main>
294
+
295
+ <!-- Footer decoration details -->
296
+ <footer class="relative z-10 py-6 text-center text-[10px] text-gray-500 uppercase tracking-widest">
297
+ <span>Designed with romance &bull; Dark mode calibrated &bull; June 2026</span>
298
+ </footer>
299
+
300
+ <!-- JAVASCRIPT LOGIC -->
301
+ <script>
302
+ // Set exact target date to 10:00 PM Pakistan Time tonight (UTC+5)
303
+ const targetDate = new Date("2026-06-23T22:00:00+05:00");
304
+ let countdownInterval = null;
305
+
306
+ // Reason deck listing "How much you love her"
307
+ const loveReasons = [
308
+ "Your laugh is my absolute favorite sound in the universe. It makes any dark day instantly bright.",
309
+ "The way your eyes light up when you speak is more magical than anything else in the world.",
310
+ "You are my counterpart. In the journey of life, my heart chose you as its lifelong companion.",
311
+ "I love you more than words can ever scale. Every second waiting for 10:00 PM feels like an eternity.",
312
+ "You have won every piece of my heart. No achievement on earth will ever feel as legendary as winning your love."
313
+ ];
314
+ let currentReasonIdx = 0;
315
+
316
+ // SOUND & MUSIC CONTROL
317
+ let isMusicPlaying = false;
318
+ let music = null;
319
+
320
+ // Safely retrieve elements on load to prevent reference errors
321
+ window.onload = function () {
322
+ music = document.getElementById('romantic-music');
323
+
324
+ // Initialize background canvas safely
325
+ initCanvas();
326
+ };
327
+
328
+ // PLAYFUL DODGE NO BUTTON LOGIC
329
+ function dodgeButton() {
330
+ const btn = document.getElementById('no-button');
331
+ const pitch = document.getElementById('action-pitch');
332
+ const rect = pitch.getBoundingClientRect();
333
+
334
+ // Calculate safe bounds within the parent box context
335
+ const widthBound = rect.width - btn.offsetWidth;
336
+ const heightBound = rect.height - btn.offsetHeight;
337
+
338
+ // Generate playful new positions
339
+ const randomX = (Math.random() - 0.5) * rect.width * 0.8;
340
+ const randomY = (Math.random() - 0.5) * 80;
341
+
342
+ btn.style.transform = `translate(${randomX}px, ${randomY}px)`;
343
+
344
+ // Sweet text shifting on dodge
345
+ const options = ["Are you sure? 🥺", "Wrong button! 😉", "Try again! 🥰", "Nope! 🌹", "Yes is better! 💕"];
346
+ btn.innerText = options[Math.floor(Math.random() * options.length)];
347
+ }
348
+
349
+ // STEP 1 -> STEP 2 TRANSITION
350
+ function acceptInvitation() {
351
+ // Trigger beautiful ambient celebration flash
352
+ triggerCelebrationConfetti();
353
+
354
+ // Play the gorgeous MP3 love track user supplied immediately upon interaction
355
+ playRomanticSong();
356
+
357
+ // Transition Animation
358
+ const card = document.getElementById('invitation-card');
359
+ card.classList.add('scale-90', 'opacity-0');
360
+
361
+ setTimeout(() => {
362
+ card.classList.add('hidden');
363
+
364
+ const popup = document.getElementById('confirm-popup');
365
+ popup.classList.remove('hidden');
366
+
367
+ // Pop scale transition
368
+ setTimeout(() => {
369
+ popup.classList.remove('scale-90', 'opacity-0');
370
+ popup.classList.add('scale-100', 'opacity-100');
371
+ }, 50);
372
+ }, 300);
373
+ }
374
+
375
+ // STEP 2 -> STEP 3 TRANSITION
376
+ function enterLobby() {
377
+ const popup = document.getElementById('confirm-popup');
378
+ popup.classList.add('scale-90', 'opacity-0');
379
+
380
+ setTimeout(() => {
381
+ popup.classList.add('hidden');
382
+
383
+ const lobby = document.getElementById('date-lobby');
384
+ lobby.classList.remove('hidden');
385
+
386
+ setTimeout(() => {
387
+ lobby.classList.remove('opacity-0', 'translate-y-4');
388
+ lobby.classList.add('opacity-100', 'translate-y-0');
389
+ }, 50);
390
+
391
+ // Start Live clock
392
+ startLobbyCountdown();
393
+ triggerCelebrationConfetti();
394
+ renderReason();
395
+ }, 300);
396
+ }
397
+
398
+ // START CHRONO COUNTDOWN CLOCK TO 10:00 PM PST
399
+ function startLobbyCountdown() {
400
+ const daysEl = document.getElementById('days');
401
+ const hoursEl = document.getElementById('hours');
402
+ const minsEl = document.getElementById('minutes');
403
+ const secsEl = document.getElementById('seconds');
404
+
405
+ function updateTime() {
406
+ const now = new Date();
407
+ const diff = targetDate - now;
408
+
409
+ if (diff <= 0) {
410
+ daysEl.innerText = "00";
411
+ hoursEl.innerText = "00";
412
+ minsEl.innerText = "00";
413
+ secsEl.innerText = "00";
414
+ clearInterval(countdownInterval);
415
+ return;
416
+ }
417
+
418
+ const days = Math.floor(diff / (1000 * 60 * 60 * 24));
419
+ const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
420
+ const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
421
+ const seconds = Math.floor((diff % (1000 * 60)) / 1000);
422
+
423
+ daysEl.innerText = String(days).padStart(2, '0');
424
+ hoursEl.innerText = String(hours).padStart(2, '0');
425
+ minsEl.innerText = String(minutes).padStart(2, '0');
426
+ secsEl.innerText = String(seconds).padStart(2, '0');
427
+ }
428
+
429
+ updateTime();
430
+ countdownInterval = setInterval(updateTime, 1000);
431
+ }
432
+
433
+ // REASONS INTERACTIVE SLIDER
434
+ function renderReason() {
435
+ const textEl = document.getElementById('reason-text');
436
+ const countEl = document.getElementById('reason-count');
437
+ const wrapper = document.getElementById('reason-content-wrapper');
438
+
439
+ // Quick fade transition effect
440
+ wrapper.style.opacity = 0;
441
+ wrapper.style.transform = "scale(0.95)";
442
+
443
+ setTimeout(() => {
444
+ textEl.innerText = `"${loveReasons[currentReasonIdx]}"`;
445
+ countEl.innerText = `Reason ${currentReasonIdx + 1} of ${loveReasons.length}`;
446
+ wrapper.style.opacity = 1;
447
+ wrapper.style.transform = "scale(1)";
448
+ }, 200);
449
+ }
450
+
451
+ function nextLoveReason() {
452
+ currentReasonIdx = (currentReasonIdx + 1) % loveReasons.length;
453
+ renderReason();
454
+ }
455
+
456
+ function prevLoveReason() {
457
+ currentReasonIdx = (currentReasonIdx - 1 + loveReasons.length) % loveReasons.length;
458
+ renderReason();
459
+ }
460
+
461
+ // PLAY MP3 WITH ROBUST BROWSER HANDLER
462
+ function playRomanticSong() {
463
+ if (!music) return;
464
+ music.play().then(() => {
465
+ isMusicPlaying = true;
466
+ updateMusicIcon();
467
+ }).catch(e => {
468
+ console.log("Autoplay context restriction blocked immediate audio: ", e);
469
+ });
470
+ }
471
+
472
+ // TOGGLE MUSIC STATE
473
+ function toggleMusic() {
474
+ if (!music) return;
475
+ if (isMusicPlaying) {
476
+ music.pause();
477
+ isMusicPlaying = false;
478
+ } else {
479
+ music.play().then(() => {
480
+ isMusicPlaying = true;
481
+ }).catch(e => console.log(e));
482
+ }
483
+ updateMusicIcon();
484
+ }
485
+
486
+ function updateMusicIcon() {
487
+ const icon = document.getElementById('music-icon');
488
+ const text = document.getElementById('music-text');
489
+ const vinyl = document.getElementById('music-vinyl');
490
+ if (!icon || !text) return;
491
+
492
+ if (isMusicPlaying) {
493
+ icon.className = "fa-solid fa-volume-high animate-pulse text-rose-400";
494
+ text.innerText = "Music On";
495
+ if (vinyl) vinyl.classList.add('animate-spin');
496
+ } else {
497
+ icon.className = "fa-solid fa-volume-xmark";
498
+ text.innerText = "Music Off";
499
+ if (vinyl) vinyl.classList.remove('animate-spin');
500
+ }
501
+ }
502
+
503
+ // CANVAS FLUID PARTICLES SYSTEM
504
+ let canvas = null;
505
+ let ctx = null;
506
+ let particles = [];
507
+
508
+ function initCanvas() {
509
+ canvas = document.getElementById('ambient-canvas');
510
+ if (!canvas) return; // Prevent Null Error
511
+
512
+ ctx = canvas.getContext('2d');
513
+ if (!ctx) return; // Prevent Context Error
514
+
515
+ resizeCanvas();
516
+ window.addEventListener('resize', resizeCanvas);
517
+
518
+ // Populate initial sweet stardust particles
519
+ for (let i = 0; i < 40; i++) {
520
+ particles.push(createNewParticle());
521
+ }
522
+ animateCanvas();
523
+ }
524
+
525
+ function resizeCanvas() {
526
+ if (!canvas) return;
527
+ canvas.width = window.innerWidth;
528
+ canvas.height = window.innerHeight;
529
+ }
530
+
531
+ function createNewParticle() {
532
+ return {
533
+ x: Math.random() * (canvas ? canvas.width : 500),
534
+ y: (canvas ? canvas.height : 500) + Math.random() * 100,
535
+ speedY: -(Math.random() * 0.7 + 0.3),
536
+ speedX: (Math.random() - 0.5) * 0.4,
537
+ size: Math.random() * 10 + 6,
538
+ color: `rgba(${230 + Math.random() * 25}, ${100 + Math.random() * 40}, ${140 + Math.random() * 50}, ${0.12 + Math.random() * 0.2})`,
539
+ isHeart: Math.random() > 0.4,
540
+ angle: Math.random() * 360,
541
+ spin: (Math.random() - 0.5) * 0.4
542
+ };
543
+ }
544
+
545
+ // Golden sparklers on click triggers
546
+ function triggerCelebrationConfetti() {
547
+ if (!canvas) return;
548
+ for (let i = 0; i < 35; i++) {
549
+ const p = createNewParticle();
550
+ p.x = Math.random() * canvas.width;
551
+ p.y = Math.random() * canvas.height;
552
+ p.speedY = -(Math.random() * 2.2 + 0.8);
553
+ p.speedX = (Math.random() - 0.5) * 3;
554
+ p.color = `rgba(251, 191, 36, ${Math.random() * 0.6 + 0.2})`; // Pure Golden Confetti Sparkles
555
+ particles.push(p);
556
+ }
557
+ }
558
+
559
+ function drawHeart(ctx, x, y, size) {
560
+ ctx.beginPath();
561
+ ctx.moveTo(x, y + size / 4);
562
+ ctx.quadraticCurveTo(x, y, x + size / 2, y);
563
+ ctx.quadraticCurveTo(x + size, y, x + size, y + size / 3);
564
+ ctx.quadraticCurveTo(x + size, y + size * 0.7, x + size / 2, y + size);
565
+ ctx.quadraticCurveTo(x, y + size * 0.7, x, y + size / 3);
566
+ ctx.quadraticCurveTo(x, y, x, y + size / 4);
567
+ ctx.closePath();
568
+ ctx.fill();
569
+ }
570
+
571
+ function animateCanvas() {
572
+ if (!ctx || !canvas) return;
573
+ ctx.clearRect(0, 0, canvas.width, canvas.height);
574
+
575
+ for (let i = 0; i < particles.length; i++) {
576
+ const p = particles[i];
577
+ p.y += p.speedY;
578
+ p.x += p.speedX;
579
+ p.angle += p.spin;
580
+
581
+ ctx.save();
582
+ ctx.translate(p.x, p.y);
583
+ ctx.rotate(p.angle * Math.PI / 180);
584
+ ctx.fillStyle = p.color;
585
+
586
+ if (p.isHeart) {
587
+ drawHeart(ctx, -p.size/2, -p.size/2, p.size);
588
+ } else {
589
+ // Delicate romantic star sparkle
590
+ ctx.beginPath();
591
+ for (let j = 0; j < 5; j++) {
592
+ ctx.lineTo(Math.cos((18 + j * 72) * Math.PI / 180) * p.size / 2, Math.sin((18 + j * 72) * Math.PI / 180) * p.size / 2);
593
+ ctx.lineTo(Math.cos((54 + j * 72) * Math.PI / 180) * p.size / 4, Math.sin((54 + j * 72) * Math.PI / 180) * p.size / 4);
594
+ }
595
+ ctx.closePath();
596
+ ctx.fill();
597
+ }
598
+ ctx.restore();
599
+
600
+ // Recycle out of bound particles
601
+ if (p.y < -30) {
602
+ particles[i] = createNewParticle();
603
+ }
604
+ }
605
+ requestAnimationFrame(animateCanvas);
606
+ }
607
+ </script>
608
+ </body>
609
+ </html>