Hugging Face's logo

Spaces:
matthewspring
/
anycoder-09921165
Running

App Files Community
matthewspring commited on
Commit
bdd3acf
·
verified ·
1 Parent(s): 268110c

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +789 -668
index.html CHANGED
@@ -1,696 +1,817 @@
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>Double Thumbs Up - Ultimate Gratitude</title>
7
- <script src="https://cdn.tailwindcss.com"></script>
8
- <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
9
- <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;800;900&display=swap" rel="stylesheet">
10
- <style>
11
- body {
12
- font-family: 'Inter', sans-serif;
13
- background-color: #0f172a;
14
- overflow-x: hidden;
15
- }
16
-
17
- /* Enhanced Animations */
18
- @keyframes float {
19
- 0%, 100% { transform: translateY(0px) rotate(0deg); }
20
- 50% { transform: translateY(-20px) rotate(3deg); }
21
- }
22
-
23
- @keyframes double-float {
24
- 0%, 100% { transform: translateY(0px) rotate(-5deg); }
25
- 50% { transform: translateY(-15px) rotate(5deg); }
26
- }
27
-
28
- @keyframes pulse-glow {
29
- 0%, 100% { box-shadow: 0 0 30px rgba(250, 204, 21, 0.3); }
30
- 50% { box-shadow: 0 0 60px rgba(250, 204, 21, 0.8), 0 0 100px rgba(250, 204, 21, 0.4); }
31
- }
32
-
33
- @keyframes pop-scale {
34
- 0% { transform: scale(0.5); opacity: 0; }
35
- 50% { transform: scale(1.3); opacity: 1; }
36
- 100% { transform: scale(1); opacity: 1; }
37
- }
38
-
39
- @keyframes shake {
40
- 0%, 100% { transform: translateX(0) rotate(0deg); }
41
- 25% { transform: translateX(-5px) rotate(-5deg); }
42
- 75% { transform: translateX(5px) rotate(5deg); }
43
- }
44
-
45
- @keyframes rainbow {
46
- 0% { filter: hue-rotate(0deg); }
47
- 100% { filter: hue-rotate(360deg); }
48
- }
49
-
50
- .animate-float { animation: float 6s ease-in-out infinite; }
51
- .animate-double-float { animation: double-float 5s ease-in-out infinite; }
52
- .animate-pop-scale { animation: pop-scale 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; }
53
- .animate-shake { animation: shake 0.5s ease-in-out; }
54
- .animate-rainbow { animation: rainbow 3s linear infinite; }
55
-
56
- /* Enhanced Glassmorphism */
57
- .glass-panel {
58
- background: rgba(255, 255, 255, 0.03);
59
- backdrop-filter: blur(20px);
60
- -webkit-backdrop-filter: blur(20px);
61
- border: 1px solid rgba(255, 255, 255, 0.08);
62
- box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
63
- }
64
-
65
- .glass-panel:hover {
66
- border-color: rgba(255, 255, 255, 0.15);
67
- background: rgba(255, 255, 255, 0.05);
68
- }
69
-
70
- /* Gradient Text */
71
- .text-gradient {
72
- background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 50%, #f97316 100%);
73
- -webkit-background-clip: text;
74
- -webkit-text-fill-color: transparent;
75
- background-size: 200% 200%;
76
- animation: gradient-shift 3s ease infinite;
77
- }
78
-
79
- @keyframes gradient-shift {
80
- 0%, 100% { background-position: 0% 50%; }
81
- 50% { background-position: 100% 50%; }
82
- }
83
-
84
- /* Enhanced Button Styles */
85
- .btn-super {
86
- background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 25%, #f97316 50%, #fbbf24 100%);
87
- background-size: 300% 300%;
88
- animation: gradient-shift 3s ease infinite, pulse-glow 2s ease-in-out infinite;
89
- transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
90
- position: relative;
91
- overflow: hidden;
92
- }
93
-
94
- .btn-super::before {
95
- content: '';
96
- position: absolute;
97
- top: 0;
98
- left: -100%;
99
- width: 100%;
100
- height: 100%;
101
- background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
102
- transition: left 0.5s;
103
- }
104
-
105
- .btn-super:hover::before {
106
- left: 100%;
107
- }
108
 
109
- .btn-super:hover {
110
- transform: translateY(-4px) scale(1.05);
111
- box-shadow: 0 20px 40px -10px rgba(251, 191, 36, 0.6);
112
- }
113
-
114
- .btn-super:active {
115
- transform: translateY(-2px) scale(0.98);
116
- }
117
-
118
- /* Floating Particles Background */
119
- .bg-particle {
120
- position: absolute;
121
- border-radius: 50%;
122
- background: radial-gradient(circle, rgba(251, 191, 36, 0.15) 0%, transparent 70%);
123
- animation: float-particle 20s infinite ease-in-out;
124
- }
125
-
126
- @keyframes float-particle {
127
- 0%, 100% { transform: translateY(0) translateX(0); opacity: 0.3; }
128
- 25% { transform: translateY(-100px) translateX(50px); opacity: 0.6; }
129
- 50% { transform: translateY(-50px) translateX(-30px); opacity: 0.4; }
130
- 75% { transform: translateY(-150px) translateX(20px); opacity: 0.5; }
131
- }
132
-
133
- /* Combo Multiplier Styles */
134
- .combo-text {
135
- background: linear-gradient(135deg, #f472b6, #ec4899);
136
- -webkit-background-clip: text;
137
- -webkit-text-fill-color: transparent;
138
- font-weight: 900;
139
- }
140
-
141
- .streak-flame {
142
- animation: flicker 0.5s ease-in-out infinite alternate;
143
- }
144
-
145
- @keyframes flicker {
146
- 0%, 100% { opacity: 1; transform: scale(1); }
147
- 50% { opacity: 0.8; transform: scale(0.95); }
148
- }
149
- </style>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
150
  </head>
151
- <body class="text-slate-200 min-h-screen flex flex-col">
152
 
153
- <!-- Canvas for Confetti -->
154
- <canvas id="confetti-canvas"></canvas>
155
-
156
- <!-- Background Particles -->
157
- <div class="fixed inset-0 overflow-hidden pointer-events-none -z-10">
158
- <div class="bg-particle w-96 h-96 top-20 left-10" style="animation-delay: 0s;"></div>
159
- <div class="bg-particle w-64 h-64 top-1/2 right-20" style="animation-delay: 5s;"></div>
160
- <div class="bg-particle w-80 h-80 bottom-20 left-1/3" style="animation-delay: 10s;"></div>
161
- <div class="bg-particle w-48 h-48 top-1/3 right-1/3" style="animation-delay: 15s;"></div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
162
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
163
 
164
- <!-- Navigation -->
165
- <nav class="w-full glass-panel fixed top-0 z-40 border-b border-white/10">
166
- <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
167
- <div class="flex items-center justify-between h-16">
168
- <div class="flex items-center gap-2">
169
- <div class="w-10 h-10 bg-gradient-to-br from-yellow-400 to-orange-500 rounded-xl flex items-center justify-center text-slate-900 font-bold shadow-lg shadow-yellow-500/20">
170
- <i class="fa-solid fa-thumbs-up text-lg"></i>
171
- </div>
172
- <span class="font-bold text-xl tracking-tight text-white">Gratitude<span class="text-gradient">Hub</span></span>
173
- </div>
174
- <div class="hidden md:flex items-center gap-4">
175
- <div class="flex items-center gap-2 px-3 py-1.5 rounded-full bg-yellow-500/10 border border-yellow-500/20">
176
- <i class="fa-solid fa-fire text-orange-400 streak-flame"></i>
177
- <span class="text-sm font-semibold text-yellow-400" id="streak-display">Streak: 0</span>
178
- </div>
179
- <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank"
180
- class="text-xs font-medium text-slate-400 hover:text-white transition-colors flex items-center gap-2 bg-white/5 px-3 py-1.5 rounded-full border border-white/10 hover:border-white/20">
181
- <i class="fa-solid fa-code"></i> Built with anycoder
182
- </a>
183
- </div>
184
  </div>
 
 
 
185
  </div>
186
- </nav>
187
 
188
- <!-- Main Content -->
189
- <main class="flex-grow pt-20 pb-12 px-4 sm:px-6 lg:px-8 relative overflow-hidden">
190
-
191
- <div class="max-w-5xl mx-auto">
192
-
193
- <!-- Hero Section -->
194
- <div class="text-center mb-12">
195
- <div class="inline-flex items-center gap-2 mb-4 px-4 py-2 rounded-full bg-gradient-to-r from-yellow-500/10 to-orange-500/10 border border-yellow-500/20 text-yellow-400 text-sm font-semibold tracking-wide uppercase shadow-lg shadow-yellow-500/5">
196
- <i class="fa-solid fa-star text-xs"></i>
197
- Double Power Mode Activated
198
- <i class="fa-solid fa-star text-xs"></i>
199
- </div>
200
- <h1 class="text-5xl md:text-7xl lg:text-8xl font-black tracking-tight mb-6">
201
- <span class="text-white">Give It</span><br>
202
- <span class="text-gradient">Two Thumbs Up!</span>
203
- </h1>
204
- <p class="text-lg text-slate-400 max-w-2xl mx-auto mb-8 leading-relaxed">
205
- Double the appreciation, double the joy! Our new dual-thumb technology delivers
206
- <span class="text-yellow-400 font-semibold">2x the gratitude</span> with every click.
207
- Watch the streak counter rise and the confetti explode!
208
- </p>
209
-
210
- <!-- MEGA Counter Card -->
211
- <div class="glass-panel rounded-3xl p-8 md:p-12 max-w-3xl mx-auto relative overflow-hidden">
212
- <!-- Animated Background Glow -->
213
- <div class="absolute inset-0 bg-gradient-to-br from-yellow-500/10 via-transparent to-orange-500/10 opacity-50"></div>
214
- <div class="absolute -top-20 -right-20 w-40 h-40 bg-yellow-500/20 rounded-full blur-3xl animate-pulse"></div>
215
- <div class="absolute -bottom-20 -left-20 w-40 h-40 bg-orange-500/20 rounded-full blur-3xl animate-pulse" style="animation-delay: 1s;"></div>
216
-
217
- <div class="relative z-10">
218
- <!-- Stats Row -->
219
- <div class="flex justify-center gap-8 mb-8">
220
- <div class="text-center">
221
- <p class="text-slate-400 text-xs uppercase tracking-widest font-semibold mb-1">Your Clicks</p>
222
- <div id="user-clicks" class="text-2xl font-bold text-white">0</div>
223
- </div>
224
- <div class="text-center px-8 border-x border-white/10">
225
- <p class="text-slate-400 text-xs uppercase tracking-widest font-semibold mb-1">Global Total</p>
226
- <div id="counter-display" class="text-5xl md:text-7xl font-black text-transparent bg-clip-text bg-gradient-to-r from-yellow-400 via-orange-400 to-yellow-400 tabular-nums tracking-tighter drop-shadow-2xl animate-pulse">
227
- 2,840
228
- </div>
229
- </div>
230
- <div class="text-center">
231
- <p class="text-slate-400 text-xs uppercase tracking-widest font-semibold mb-1">Best Streak</p>
232
- <div id="best-streak" class="text-2xl font-bold text-orange-400">0</div>
233
- </div>
234
- </div>
235
-
236
- <!-- DOUBLE THUMBS UP BUTTON -->
237
- <div class="relative inline-block">
238
- <!-- Glow Ring -->
239
- <div class="absolute inset-0 bg-gradient-to-r from-yellow-400 to-orange-500 rounded-full blur-xl opacity-50 animate-pulse scale-110"></div>
240
-
241
- <button id="thumbs-up-btn" class="btn-super relative w-32 h-32 rounded-full flex items-center justify-center shadow-2xl transform transition-all duration-200 active:scale-95 group">
242
- <!-- Icon Container with Two Thumbs -->
243
- <div class="relative flex items-center justify-center">
244
- <i class="fa-solid fa-thumbs-up text-5xl text-slate-900 transition-all duration-300 group-hover:rotate-12 group-hover:scale-110 absolute -left-3 transform -rotate-12"></i>
245
- <i class="fa-solid fa-thumbs-up text-5xl text-slate-900 transition-all duration-300 group-hover:-rotate-12 group-hover:scale-110 absolute left-3 transform rotate-12"></i>
246
- </div>
247
-
248
- <!-- Ripple Effect -->
249
- <div class="absolute inset-0 rounded-full border-4 border-white/30 animate-ping opacity-0 group-hover:opacity-100"></div>
250
- </button>
251
-
252
- <!-- Floating Particles Around Button -->
253
- <div class="absolute -top-4 -right-4 w-3 h-3 bg-yellow-400 rounded-full animate-float" style="animation-delay: 0.5s;"></div>
254
- <div class="absolute -bottom-2 -left-6 w-2 h-2 bg-orange-400 rounded-full animate-float" style="animation-delay: 1s;"></div>
255
- </div>
256
-
257
- <!-- Dynamic Feedback -->
258
- <div class="mt-6 h-8">
259
- <p id="feedback-text" class="text-slate-300 text-lg font-medium transition-all duration-300">
260
- 👆 Click for <span class="text-yellow-400 font-bold">2x</span> appreciation power!
261
- </p>
262
- </div>
263
-
264
- <!-- Combo Multiplier Display -->
265
- <div id="combo-display" class="hidden mt-4">
266
- <div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-gradient-to-r from-pink-500/20 to-purple-500/20 border border-pink-500/30 animate-pulse">
267
- <i class="fa-solid fa-fire text-pink-400"></i>
268
- <span class="combo-text text-lg font-black text-transparent bg-clip-text bg-gradient-to-r from-pink-400 to-purple-400">
269
- COMBO x<span id="combo-count">2</span>!
270
- </span>
271
- </div>
272
- </div>
273
- </div>
274
- </div>
275
  </div>
276
 
277
- <!-- Enhanced Testimonials -->
278
- <div class="grid md:grid-cols-3 gap-6 mt-16">
279
- <!-- Card 1 -->
280
- <div class="testimonial-card glass-panel p-6 rounded-2xl border border-white/5 group hover:border-yellow-500/30 transition-all duration-300">
281
- <div class="flex items-center gap-4 mb-4">
282
- <div class="w-12 h-12 rounded-full bg-gradient-to-br from-yellow-400 to-orange-500 flex items-center justify-center text-slate-900 text-xl font-bold group-hover:scale-110 transition-transform">
283
- <i class="fa-solid fa-bolt"></i>
284
- </div>
285
- <div>
286
- <h3 class="font-bold text-white">Double Power</h3>
287
- <p class="text-slate-400 text-xs">2x the gratitude</p>
288
- </div>
289
- </div>
290
- <p class="text-slate-300 text-sm leading-relaxed">
291
- "Two thumbs means double the appreciation! This new feature delivers instant serotonin boosts with every click."
292
- </p>
293
- </div>
294
-
295
- <!-- Card 2 -->
296
- <div class="testimonial-card glass-panel p-6 rounded-2xl border border-white/5 group hover:border-pink-500/30 transition-all duration-300">
297
- <div class="flex items-center gap-4 mb-4">
298
- <div class="w-12 h-12 rounded-full bg-gradient-to-br from-pink-400 to-purple-500 flex items-center justify-center text-white text-xl font-bold group-hover:scale-110 transition-transform">
299
- <i class="fa-solid fa-fire-flame-curved"></i>
300
- </div>
301
- <div>
302
- <h3 class="font-bold text-white">Combo Streaks</h3>
303
- <p class="text-slate-400 text-xs">Keep it going</p>
304
- </div>
305
- </div>
306
- <p class="text-slate-300 text-sm leading-relaxed">
307
- "Build your appreciation streak! Fast consecutive clicks unlock combo multipliers and spectacular visual effects."
308
- </p>
309
  </div>
 
 
 
 
 
 
 
 
 
 
310
 
311
- <!-- Card 3 -->
312
- <div class="testimonial-card glass-panel p-6 rounded-2xl border border-white/5 group hover:border-cyan-500/30 transition-all duration-300">
313
- <div class="flex items-center gap-4 mb-4">
314
- <div class="w-12 h-12 rounded-full bg-gradient-to-br from-cyan-400 to-blue-500 flex items-center justify-center text-white text-xl font-bold group-hover:scale-110 transition-transform">
315
- <i class="fa-solid fa-wand-magic-sparkles"></i>
316
- </div>
317
- <div>
318
- <h3 class="font-bold text-white">Pure Magic</h3>
319
- <p class="text-slate-400 text-xs">Zero frameworks</p>
320
- </div>
321
- </div>
322
- <p class="text-slate-300 text-sm leading-relaxed">
323
- "Built with only HTML, CSS, and vanilla JavaScript. No dependencies, just pure web platform excellence."
324
- </p>
325
- </div>
326
  </div>
327
 
 
 
 
 
 
 
 
 
 
 
328
  </div>
329
- </main>
330
 
331
- <footer class="border-t border-white/10 bg-slate-900/50 backdrop-blur-sm py-8">
332
- <div class="max-w-7xl mx-auto px-4 text-center">
333
- <p class="text-slate-500 text-sm">
334
- &copy; 2024 GratitudeHub. Double the thanks, double the joy.
 
 
 
 
335
  </p>
336
- <div class="mt-4 md:hidden">
337
- <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank"
338
- class="text-xs font-medium text-slate-400 hover:text-white transition-colors">
339
- Built with anycoder
340
- </a>
341
  </div>
342
- </div>
343
- </footer>
344
-
345
- <script>
346
- // --- Enhanced Configuration & State ---
347
- const state = {
348
- count: 2840,
349
- userClicks: 0,
350
- streak: 0,
351
- bestStreak: 0,
352
- combo: 1,
353
- lastClickTime: 0,
354
- messages: [
355
- "Double Awesome! 👍👍",
356
- "Great Job! Keep it up! 🚀",
357
- "You Rock! Double time! ⭐⭐",
358
- "Fantastic! Power combo! 💪",
359
- "Legendary! Two thumbs way up! 🏆",
360
- "Superb! Double the love! ❤️❤️",
361
- "Incredible! Keep clicking! ⚡",
362
- "Outstanding! You're on fire! 🔥",
363
- "Amazing! Double appreciation! 🎉🎉",
364
- "Perfect! Don't stop now! 🎯"
365
- ],
366
- comboMessages: [
367
- "DOUBLE CLICK!",
368
- "TRIPLE THREAT!",
369
- "QUAD POWER!",
370
- "MEGA COMBO!",
371
- "ULTRA STREAK!",
372
- "GODLIKE!"
373
- ]
374
- };
375
-
376
- // --- DOM Elements ---
377
- const counterDisplay = document.getElementById('counter-display');
378
- const userClicksDisplay = document.getElementById('user-clicks');
379
- const bestStreakDisplay = document.getElementById('best-streak');
380
- const streakDisplay = document.getElementById('streak-display');
381
- const thumbsUpBtn = document.getElementById('thumbs-up-btn');
382
- const feedbackText = document.getElementById('feedback-text');
383
- const comboDisplay = document.getElementById('combo-display');
384
- const comboCount = document.getElementById('combo-count');
385
- const canvas = document.getElementById('confetti-canvas');
386
- const ctx = canvas.getContext('2d');
387
-
388
- // --- Counter Animation ---
389
- function animateValue(obj, start, end, duration) {
390
- let startTimestamp = null;
391
- const step = (timestamp) => {
392
- if (!startTimestamp) startTimestamp = timestamp;
393
- const progress = Math.min((timestamp - startTimestamp) / duration, 1);
394
- const current = Math.floor(progress * (end - start) + start);
395
- obj.innerHTML = current.toLocaleString();
396
- if (progress < 1) {
397
- window.requestAnimationFrame(step);
398
- }
399
- };
400
- window.requestAnimationFrame(step);
401
- }
402
-
403
- // Initialize
404
- animateValue(counterDisplay, 0, state.count, 2000);
405
- userClicksDisplay.textContent = state.userClicks;
406
- bestStreakDisplay.textContent = state.bestStreak;
407
-
408
- // --- Combo System ---
409
- function updateCombo() {
410
- const now = Date.now();
411
- const timeDiff = now - state.lastClickTime;
412
-
413
- if (timeDiff < 800) { // Within 800ms for combo
414
- state.combo++;
415
- if (state.combo > 2) {
416
- showCombo();
417
- }
418
- } else {
419
- state.combo = 1;
420
- hideCombo();
421
- }
422
-
423
- state.lastClickTime = now;
424
- }
425
-
426
- function showCombo() {
427
- comboDisplay.classList.remove('hidden');
428
- const multiplier = Math.min(state.combo, 6);
429
- comboCount.textContent = state.combo;
430
-
431
- // Change color based on combo level
432
- const comboText = document.querySelector('.combo-text');
433
- if (state.combo >= 5) {
434
- comboText.className = 'combo-text text-2xl font-black animate-rainbow';
435
- }
436
-
437
- // Show combo message
438
- if (state.combo <= state.comboMessages.length) {
439
- feedbackText.innerHTML = `<span class="text-pink-400 font-bold">${state.comboMessages[Math.min(state.combo - 1, state.comboMessages.length - 1)]}</span>`;
440
- }
441
- }
442
-
443
- function hideCombo() {
444
- comboDisplay.classList.add('hidden');
445
- }
446
-
447
- // --- Streak System ---
448
- function updateStreak() {
449
- state.streak++;
450
- if (state.streak > state.bestStreak) {
451
- state.bestStreak = state.streak;
452
- bestStreakDisplay.textContent = state.bestStreak;
453
- }
454
- streakDisplay.textContent = `Streak: ${state.streak}`;
455
-
456
- // Animate streak indicator
457
- const streakIcon = document.querySelector('.streak-flame');
458
- streakIcon.style.animationDuration = `${Math.max(0.2, 0.5 - state.streak * 0.02)}s`;
459
- }
460
-
461
- // --- Main Interaction ---
462
- thumbsUpBtn.addEventListener('click', (e) => {
463
- // Prevent rapid click issues
464
- if (thumbsUpBtn.disabled) return;
465
-
466
- // Visual feedback
467
- thumbsUpBtn.classList.add('animate-shake');
468
- setTimeout(() => thumbsUpBtn.classList.remove('animate-shake'), 500);
469
-
470
- // Update counters
471
- state.count += 2; // Double thumbs = +2
472
- state.userClicks++;
473
-
474
- // Animate counter
475
- counterDisplay.classList.remove('animate-pop-scale');
476
- void counterDisplay.offsetWidth;
477
- counterDisplay.textContent = state.count.toLocaleString();
478
- counterDisplay.classList.add('animate-pop-scale');
479
-
480
- userClicksDisplay.textContent = state.userClicks;
481
-
482
- // Update systems
483
- updateStreak();
484
- updateCombo();
485
-
486
- // Feedback message (if not in combo)
487
- if (state.combo <= 2) {
488
- const randomMsg = state.messages[Math.floor(Math.random() * state.messages.length)];
489
- feedbackText.style.opacity = 0;
490
- setTimeout(() => {
491
- feedbackText.innerHTML = randomMsg;
492
- feedbackText.style.opacity = 1;
493
- }, 150);
494
- }
495
-
496
- // Fire confetti from button position
497
- const rect = thumbsUpBtn.getBoundingClientRect();
498
- const x = (rect.left + rect.width / 2) / window.innerWidth;
499
- const y = (rect.top + rect.height / 2) / window.innerHeight;
500
-
501
- // Double confetti for double thumbs!
502
- const intensity = Math.min(state.combo, 5);
503
- fireConfetti(x, y, intensity);
504
- setTimeout(() => fireConfetti(x, y, intensity), 100);
505
- });
506
-
507
- // --- Enhanced Confetti Engine ---
508
- let particles = [];
509
- let isAnimating = false;
510
-
511
- function resizeCanvas() {
512
- canvas.width = window.innerWidth;
513
- canvas.height = window.innerHeight;
514
- }
515
- window.addEventListener('resize', resizeCanvas);
516
- resizeCanvas();
517
-
518
- class Particle {
519
- constructor(x, y, intensity = 1) {
520
- this.x = x;
521
- this.y = y;
522
-
523
- // Explosion physics with intensity multiplier
524
- const angle = Math.random() * Math.PI * 2;
525
- const baseVelocity = Math.random() * 6 + 2;
526
- const velocity = baseVelocity * (1 + intensity * 0.3);
527
-
528
- this.vx = Math.cos(angle) * velocity;
529
- this.vy = Math.sin(angle) * velocity - 4 - intensity;
530
-
531
- this.gravity = 0.15 + Math.random() * 0.1;
532
- this.friction = 0.98 - Math.random() * 0.02;
533
- this.alpha = 1;
534
- this.decay = Math.random() * 0.015 + 0.008;
535
-
536
- // Enhanced color palette with rarity
537
- const colors = [
538
- '#fbbf24', '#f59e0b', // Gold/Orange (common)
539
- '#f97316', '#fb923c', // Orange variants
540
- '#ffffff', '#fef3c7', // White/Cream
541
- '#60a5fa', '#818cf8', // Blue/Purple (rare)
542
- '#f472b6', '#ec4899', // Pink (rare)
543
- '#a78bfa', '#8b5cf6' // Purple (very rare)
544
- ];
545
-
546
- // Weighted random for rare colors
547
- const rand = Math.random();
548
- if (rand > 0.95) this.color = colors[colors.length - 1]; // Very rare
549
- else if (rand > 0.85) this.color = colors.slice(-3)[Math.floor(Math.random() * 3)]; // Rare
550
- else this.color = colors[Math.floor(Math.random() * (colors.length - 3))]; // Common
551
-
552
- this.size = (Math.random() * 6 + 4) * (1 + intensity * 0.2);
553
- this.rotation = Math.random() * 360;
554
- this.rotationSpeed = (Math.random() - 0.5) * 15;
555
-
556
- // Shape variety: 0 = square, 1 = circle, 2 = triangle
557
- this.shape = Math.random() > 0.7 ? (Math.random() > 0.5 ? 1 : 2) : 0;
558
- }
559
-
560
- update() {
561
- this.vx *= this.friction;
562
- this.vy *= this.friction;
563
- this.vy += this.gravity;
564
- this.x += this.vx;
565
- this.y += this.vy;
566
- this.alpha -= this.decay;
567
- this.rotation += this.rotationSpeed;
568
- }
569
-
570
- draw(ctx) {
571
- ctx.save();
572
- ctx.translate(this.x, this.y);
573
- ctx.rotate((this.rotation * Math.PI) / 180);
574
- ctx.globalAlpha = this.alpha;
575
- ctx.fillStyle = this.color;
576
-
577
- if (this.shape === 0) {
578
- // Square confetti
579
- ctx.fillRect(-this.size / 2, -this.size / 2, this.size, this.size);
580
- } else if (this.shape === 1) {
581
- // Circle confetti
582
- ctx.beginPath();
583
- ctx.arc(0, 0, this.size / 2, 0, Math.PI * 2);
584
- ctx.fill();
585
- } else {
586
- // Triangle confetti
587
- ctx.beginPath();
588
- ctx.moveTo(0, -this.size / 2);
589
- ctx.lineTo(-this.size / 2, this.size / 2);
590
- ctx.lineTo(this.size / 2, this.size / 2);
591
- ctx.closePath();
592
- ctx.fill();
593
- }
594
-
595
- ctx.restore();
596
- }
597
- }
598
-
599
- function fireConfetti(originX, originY, intensity = 1) {
600
- const x = originX * canvas.width;
601
- const y = originY * canvas.height;
602
-
603
- // Create explosion based on intensity
604
- const particleCount = 40 + (intensity * 20);
605
- for (let i = 0; i < particleCount; i++) {
606
- particles.push(new Particle(x, y, intensity));
607
- }
608
-
609
- if (!isAnimating) {
610
- animateConfetti();
611
- }
612
- }
613
 
614
- function animateConfetti() {
615
- isAnimating = true;
616
- ctx.clearRect(0, 0, canvas.width, canvas.height);
617
-
618
- for (let i = particles.length - 1; i >= 0; i--) {
619
- const p = particles[i];
620
- p.update();
621
- p.draw(ctx);
 
 
 
 
 
 
 
 
 
 
 
 
622
 
623
- if (p.alpha <= 0) {
624
- particles.splice(i, 1);
625
- }
626
- }
 
 
 
 
 
 
 
 
 
 
 
627
 
628
- if (particles.length > 0) {
629
- requestAnimationFrame(animateConfetti);
630
- } else {
631
- isAnimating = false;
632
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
633
  }
634
-
635
- // --- Easter Eggs & Advanced Features ---
636
-
637
- // Konami Code for "ULTRA MODE"
638
- let konamiCode = ['ArrowUp', 'ArrowUp', 'ArrowDown', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'ArrowLeft', 'ArrowRight', 'b', 'a'];
639
- let konamiIndex = 0;
640
-
641
- document.addEventListener('keydown', (e) => {
642
- if (e.key === konamiCode[konamiIndex]) {
643
- konamiIndex++;
644
- if (konamiIndex === konamiCode.length) {
645
- activateUltraMode();
646
- konamiIndex = 0;
647
- }
648
- } else {
649
- konamiIndex = 0;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
650
  }
651
- });
652
-
653
- function activateUltraMode() {
654
- feedbackText.innerHTML = "🔥 ULTRA MODE ACTIVATED! 🔥";
655
- feedbackText.className = "text-2xl font-black text-transparent bg-clip-text bg-gradient-to-r from-yellow-400 via-pink-400 to-cyan-400 animate-rainbow";
656
-
657
- // Visual indicator
658
- document.body.style.animation = "rainbow 10s linear infinite";
659
- document.body.style.filter = "hue-rotate(0deg)";
660
-
661
- // Auto super-clicker
662
- let clicks = 0;
663
- const interval = setInterval(() => {
664
- thumbsUpBtn.click();
665
- clicks++;
666
- if(clicks > 50) {
667
- clearInterval(interval);
668
- document.body.style.animation = "";
669
- document.body.style.filter = "";
670
- }
671
- }, 50);
672
  }
673
-
674
- // Space bar support
675
- document.addEventListener('keydown', (e) => {
676
- if (e.code === 'Space' && !e.repeat) {
677
- e.preventDefault();
678
- thumbsUpBtn.click();
679
- thumbsUpBtn.classList.add('scale-95');
680
- setTimeout(() => thumbsUpBtn.classList.remove('scale-95'), 100);
681
- }
682
- });
683
-
684
- // Idle animation for button
685
- setInterval(() => {
686
- if (Math.random() > 0.7) {
687
- thumbsUpBtn.style.transform = `scale(${1 + Math.random() * 0.02})`;
688
- setTimeout(() => {
689
- thumbsUpBtn.style.transform = '';
690
- }, 200);
691
- }
692
- }, 3000);
693
-
694
- </script>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
695
  </body>
 
696
  </html>
 
1
  <!DOCTYPE html>
2
  <html lang="en">
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
3
 
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>The Appreciation Station - Geometry of Gratitude</title>
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
10
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;800;900&family=Space+Grotesk:wght@300;500;700&display=swap" rel="stylesheet">
11
+ <style>
12
+ :root {
13
+ --primary-glow: rgba(251, 191, 36, 0.5);
14
+ --geometric-accent: rgba(244, 114, 182, 0.3);
15
+ }
16
+
17
+ body {
18
+ font-family: 'Inter', sans-serif;
19
+ background-color: #020617;
20
+ overflow-x: hidden;
21
+ color: #e2e8f0;
22
+ }
23
+
24
+ .font-display {
25
+ font-family: 'Space Grotesk', sans-serif;
26
+ }
27
+
28
+ /* Sacred Geometry Background */
29
+ .geometry-bg {
30
+ position: fixed;
31
+ inset: 0;
32
+ overflow: hidden;
33
+ pointer-events: none;
34
+ z-index: -1;
35
+ }
36
+
37
+ .geo-shape {
38
+ position: absolute;
39
+ opacity: 0.15;
40
+ animation: rotate-slow 30s linear infinite;
41
+ }
42
+
43
+ .geo-triangle {
44
+ width: 0;
45
+ height: 0;
46
+ border-left: 100px solid transparent;
47
+ border-right: 100px solid transparent;
48
+ border-bottom: 173px solid rgba(251, 191, 36, 0.3);
49
+ filter: blur(1px);
50
+ }
51
+
52
+ .geo-circle {
53
+ border: 2px solid rgba(244, 114, 182, 0.4);
54
+ border-radius: 50%;
55
+ background: radial-gradient(circle, transparent 40%, rgba(244, 114, 182, 0.1) 100%);
56
+ }
57
+
58
+ .geo-square {
59
+ border: 2px solid rgba(96, 165, 250, 0.4);
60
+ transform: rotate(45deg);
61
+ background: linear-gradient(45deg, transparent, rgba(96, 165, 250, 0.1));
62
+ }
63
+
64
+ .geo-hexagon {
65
+ width: 100px;
66
+ height: 55px;
67
+ background: rgba(139, 92, 246, 0.2);
68
+ position: relative;
69
+ clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
70
+ }
71
+
72
+ @keyframes rotate-slow {
73
+ from { transform: rotate(0deg); }
74
+ to { transform: rotate(360deg); }
75
+ }
76
+
77
+ @keyframes float-geometry {
78
+ 0%, 100% { transform: translate(0, 0) rotate(0deg); }
79
+ 33% { transform: translate(30px, -30px) rotate(120deg); }
80
+ 66% { transform: translate(-20px, 20px) rotate(240deg); }
81
+ }
82
+
83
+ /* Glassmorphism with Geometric Borders */
84
+ .glass-panel {
85
+ background: rgba(15, 23, 42, 0.6);
86
+ backdrop-filter: blur(20px);
87
+ -webkit-backdrop-filter: blur(20px);
88
+ border: 1px solid rgba(255, 255, 255, 0.1);
89
+ box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
90
+ position: relative;
91
+ overflow: hidden;
92
+ }
93
+
94
+ .glass-panel::before {
95
+ content: '';
96
+ position: absolute;
97
+ inset: 0;
98
+ background: linear-gradient(135deg, rgba(251, 191, 36, 0.1) 0%, transparent 50%, rgba(244, 114, 182, 0.1) 100%);
99
+ pointer-events: none;
100
+ }
101
+
102
+ .geometric-border {
103
+ position: relative;
104
+ }
105
+
106
+ .geometric-border::after {
107
+ content: '';
108
+ position: absolute;
109
+ bottom: 0;
110
+ left: 0;
111
+ right: 0;
112
+ height: 2px;
113
+ background: linear-gradient(90deg,
114
+ transparent 0%,
115
+ rgba(251, 191, 36, 0.8) 20%,
116
+ rgba(244, 114, 182, 0.8) 50%,
117
+ rgba(96, 165, 250, 0.8) 80%,
118
+ transparent 100%
119
+ );
120
+ }
121
+
122
+ /* Presence Indicator */
123
+ .presence-ring {
124
+ position: relative;
125
+ width: 200px;
126
+ height: 200px;
127
+ }
128
+
129
+ .presence-ring svg {
130
+ transform: rotate(-90deg);
131
+ width: 100%;
132
+ height: 100%;
133
+ }
134
+
135
+ .presence-ring circle {
136
+ fill: none;
137
+ stroke-width: 4;
138
+ }
139
+
140
+ .presence-ring .bg {
141
+ stroke: rgba(255, 255, 255, 0.1);
142
+ }
143
+
144
+ .presence-ring .progress {
145
+ stroke: url(#gradient);
146
+ stroke-linecap: round;
147
+ stroke-dasharray: 565;
148
+ stroke-dashoffset: 565;
149
+ transition: stroke-dashoffset 1s ease;
150
+ filter: drop-shadow(0 0 10px rgba(251, 191, 36, 0.5));
151
+ }
152
+
153
+ /* Sacred Button Geometry */
154
+ .sacred-btn {
155
+ background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 50%, #f97316 100%);
156
+ clip-path: polygon(20% 0%, 80% 0%, 100% 50%, 80% 100%, 20% 100%, 0% 50%);
157
+ transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
158
+ position: relative;
159
+ box-shadow: 0 0 40px rgba(251, 191, 36, 0.4);
160
+ }
161
+
162
+ .sacred-btn:hover {
163
+ transform: scale(1.05);
164
+ filter: brightness(1.2);
165
+ box-shadow: 0 0 60px rgba(251, 191, 36, 0.6);
166
+ }
167
+
168
+ .sacred-btn:active {
169
+ transform: scale(0.95);
170
+ }
171
+
172
+ .sacred-btn-inner {
173
+ clip-path: polygon(22% 5%, 78% 5%, 95% 50%, 78% 95%, 22% 95%, 5% 50%);
174
+ background: linear-gradient(135deg, #fcd34d 0%, #fbbf24 100%);
175
+ position: absolute;
176
+ inset: 3px;
177
+ display: flex;
178
+ align-items: center;
179
+ justify-content: center;
180
+ }
181
+
182
+ /* Text Effects */
183
+ .text-gradient {
184
+ background: linear-gradient(135deg, #fbbf24 0%, #f472b6 50%, #60a5fa 100%);
185
+ -webkit-background-clip: text;
186
+ -webkit-text-fill-color: transparent;
187
+ background-size: 200% 200%;
188
+ animation: gradient-shift 5s ease infinite;
189
+ }
190
+
191
+ @keyframes gradient-shift {
192
+ 0%, 100% { background-position: 0% 50%; }
193
+ 50% { background-position: 100% 50%; }
194
+ }
195
+
196
+ .glow-text {
197
+ text-shadow: 0 0 20px rgba(251, 191, 36, 0.5), 0 0 40px rgba(251, 191, 36, 0.3);
198
+ }
199
+
200
+ /* Grid Layout for Station */
201
+ .station-grid {
202
+ display: grid;
203
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
204
+ gap: 2rem;
205
+ align-items: start;
206
+ }
207
+
208
+ @media (min-width: 1024px) {
209
+ .station-grid {
210
+ grid-template-columns: 1fr 1.5fr 1fr;
211
+ }
212
+ }
213
+
214
+ /* Animations */
215
+ @keyframes pulse-glow {
216
+ 0%, 100% { box-shadow: 0 0 20px rgba(251, 191, 36, 0.3); }
217
+ 50% { box-shadow: 0 0 40px rgba(251, 191, 36, 0.6), 0 0 60px rgba(244, 114, 182, 0.3); }
218
+ }
219
+
220
+ @keyframes float {
221
+ 0%, 100% { transform: translateY(0px); }
222
+ 50% { transform: translateY(-10px); }
223
+ }
224
+
225
+ .animate-float {
226
+ animation: float 6s ease-in-out infinite;
227
+ }
228
+
229
+ .animate-pulse-glow {
230
+ animation: pulse-glow 3s ease-in-out infinite;
231
+ }
232
+
233
+ /* Metric Cards */
234
+ .metric-card {
235
+ background: rgba(255, 255, 255, 0.03);
236
+ border: 1px solid rgba(255, 255, 255, 0.05);
237
+ border-radius: 1rem;
238
+ padding: 1.5rem;
239
+ position: relative;
240
+ overflow: hidden;
241
+ }
242
+
243
+ .metric-card::before {
244
+ content: '';
245
+ position: absolute;
246
+ top: 0;
247
+ left: 0;
248
+ width: 100%;
249
+ height: 2px;
250
+ background: linear-gradient(90deg, transparent, currentColor, transparent);
251
+ opacity: 0.5;
252
+ }
253
+
254
+ .metric-value {
255
+ font-family: 'Space Grotesk', monospace;
256
+ font-variant-numeric: tabular-nums;
257
+ }
258
+
259
+ /* Canvas */
260
+ #confetti-canvas {
261
+ position: fixed;
262
+ top: 0;
263
+ left: 0;
264
+ width: 100%;
265
+ height: 100%;
266
+ pointer-events: none;
267
+ z-index: 50;
268
+ }
269
+ </style>
270
  </head>
 
271
 
272
+ <body class="min-h-screen flex flex-col">
273
+
274
+ <!-- SVG Definitions for Gradients -->
275
+ <svg width="0" height="0" style="position: absolute;">
276
+ <defs>
277
+ <linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="0%">
278
+ <stop offset="0%" style="stop-color:#fbbf24;stop-opacity:1" />
279
+ <stop offset="50%" style="stop-color:#f472b6;stop-opacity:1" />
280
+ <stop offset="100%" style="stop-color:#60a5fa;stop-opacity:1" />
281
+ </linearGradient>
282
+ </defs>
283
+ </svg>
284
+
285
+ <!-- Sacred Geometry Background -->
286
+ <div class="geometry-bg">
287
+ <div class="geo-shape geo-triangle" style="top: 10%; left: 5%; animation: float-geometry 20s infinite;"></div>
288
+ <div class="geo-shape geo-circle" style="width: 300px; height: 300px; top: 60%; right: 10%; animation: float-geometry 25s infinite reverse;"></div>
289
+ <div class="geo-shape geo-square" style="width: 150px; height: 150px; top: 20%; right: 20%; animation: rotate-slow 40s linear infinite;"></div>
290
+ <div class="geo-shape geo-hexagon" style="top: 70%; left: 15%; animation: float-geometry 18s infinite;"></div>
291
+ <div class="geo-shape geo-circle" style="width: 200px; height: 200px; bottom: 10%; left: 40%; animation: rotate-slow 35s linear infinite reverse;"></div>
292
+ </div>
293
+
294
+ <canvas id="confetti-canvas"></canvas>
295
+
296
+ <!-- Navigation -->
297
+ <nav class="w-full glass-panel fixed top-0 z-40 geometric-border">
298
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
299
+ <div class="flex items-center justify-between h-16">
300
+ <div class="flex items-center gap-3">
301
+ <div class="w-10 h-10 relative">
302
+ <div class="absolute inset-0 bg-gradient-to-br from-yellow-400 to-pink-500 rotate-45 transform"></div>
303
+ <div class="absolute inset-1 bg-slate-900 rotate-45 transform flex items-center justify-center">
304
+ <i class="fa-solid fa-shapes text-yellow-400 text-sm"></i>
305
+ </div>
306
+ </div>
307
+ <span class="font-display font-bold text-xl tracking-tight text-white">
308
+ The Appreciation <span class="text-gradient">Station</span>
309
+ </span>
310
+ </div>
311
+ <div class="hidden md:flex items-center gap-4">
312
+ <div class="flex items-center gap-2 px-4 py-1.5 rounded-full bg-white/5 border border-white/10">
313
+ <div class="w-2 h-2 rounded-full bg-green-400 animate-pulse"></div>
314
+ <span class="text-xs font-medium text-slate-300">Present Today</span>
315
+ </div>
316
+ <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank"
317
+ class="text-xs font-medium text-slate-400 hover:text-white transition-colors flex items-center gap-2 bg-white/5 px-3 py-1.5 rounded-lg border border-white/10 hover:border-yellow-500/30">
318
+ <i class="fa-solid fa-code"></i> Built with anycoder
319
+ </a>
320
+ </div>
321
+ </div>
322
  </div>
323
+ </nav>
324
+
325
+ <!-- Main Content -->
326
+ <main class="flex-grow pt-24 pb-12 px-4 sm:px-6 lg:px-8 relative">
327
+ <div class="max-w-7xl mx-auto">
328
+
329
+ <!-- Header -->
330
+ <div class="text-center mb-12">
331
+ <div class="inline-flex items-center gap-2 mb-4 px-4 py-2 rounded-full bg-gradient-to-r from-yellow-500/10 to-pink-500/10 border border-yellow-500/20 text-yellow-400 text-xs font-semibold tracking-widest uppercase">
332
+ <i class="fa-solid fa-sun"></i>
333
+ Today's Geometry is Active
334
+ <i class="fa-solid fa-moon"></i>
335
+ </div>
336
+ <h1 class="text-5xl md:text-6xl lg:text-7xl font-display font-black tracking-tight mb-4 glow-text">
337
+ <span class="text-white">Presence</span> <span class="text-gradient">Detected</span>
338
+ </h1>
339
+ <p class="text-lg text-slate-400 max-w-2xl mx-auto leading-relaxed">
340
+ The station is calibrated to your energy. Through sacred geometry and dual-vector appreciation,
341
+ we channel <span class="text-yellow-400 font-semibold">2x gratitude</span> into the universal counter.
342
+ </p>
343
+ </div>
344
+
345
+ <!-- Station Grid -->
346
+ <div class="station-grid">
347
+
348
+ <!-- Left Panel: Metrics & Presence -->
349
+ <div class="space-y-6">
350
+ <!-- Presence Meter -->
351
+ <div class="glass-panel rounded-2xl p-6 flex flex-col items-center">
352
+ <h3 class="font-display font-bold text-lg mb-4 text-slate-200">Today's Presence</h3>
353
+ <div class="presence-ring mb-4">
354
+ <svg viewBox="0 0 200 200">
355
+ <circle class="bg" cx="100" cy="100" r="90"></circle>
356
+ <circle class="progress" id="presence-progress" cx="100" cy="100" r="90"></circle>
357
+ </svg>
358
+ <div class="absolute inset-0 flex items-center justify-center flex-col">
359
+ <span id="presence-percent" class="text-3xl font-display font-bold text-white">0%</span>
360
+ <span class="text-xs text-slate-400 uppercase tracking-widest">Active</span>
361
+ </div>
362
+ </div>
363
+ <p class="text-center text-sm text-slate-400">
364
+ Your appreciation frequency is resonating at optimal levels.
365
+ </p>
366
+ </div>
367
 
368
+ <!-- Daily Stats -->
369
+ <div class="metric-card text-cyan-400">
370
+ <div class="flex justify-between items-start mb-2">
371
+ <span class="text-xs uppercase tracking-widest text-slate-400">Session Clicks</span>
372
+ <i class="fa-solid fa-fingerprint text-cyan-400/50"></i>
373
+ </div>
374
+ <div id="user-clicks" class="metric-value text-3xl font-bold text-white">0</div>
375
+ <div class="mt-2 text-xs text-slate-500">Geometric vectors deployed</div>
376
+ </div>
377
+
378
+ <div class="metric-card text-pink-400">
379
+ <div class="flex justify-between items-start mb-2">
380
+ <span class="text-xs uppercase tracking-widest text-slate-400">Current Streak</span>
381
+ <i class="fa-solid fa-fire text-pink-400/50"></i>
 
 
 
 
 
 
382
  </div>
383
+ <div id="streak-display" class="metric-value text-3xl font-bold text-white">0</div>
384
+ <div class="mt-2 text-xs text-slate-500">Consecutive appreciations</div>
385
+ </div>
386
  </div>
 
387
 
388
+ <!-- Center Panel: The Sacred Console -->
389
+ <div class="glass-panel rounded-3xl p-8 md:p-12 relative overflow-hidden min-h-[500px] flex flex-col items-center justify-center">
390
+ <!-- Background Effects -->
391
+ <div class="absolute inset-0 bg-gradient-to-br from-yellow-500/5 via-transparent to-pink-500/5"></div>
392
+ <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-64 h-64 bg-yellow-500/10 rounded-full blur-3xl animate-pulse"></div>
393
+
394
+ <!-- Geometric Frame -->
395
+ <div class="absolute inset-4 border border-white/5 rounded-2xl pointer-events-none"></div>
396
+ <div class="absolute top-4 left-4 w-8 h-8 border-t-2 border-l-2 border-yellow-500/30 rounded-tl-lg"></div>
397
+ <div class="absolute top-4 right-4 w-8 h-8 border-t-2 border-r-2 border-yellow-500/30 rounded-tr-lg"></div>
398
+ <div class="absolute bottom-4 left-4 w-8 h-8 border-b-2 border-l-2 border-yellow-500/30 rounded-bl-lg"></div>
399
+ <div class="absolute bottom-4 right-4 w-8 h-8 border-b-2 border-r-2 border-yellow-500/30 rounded-br-lg"></div>
400
+
401
+ <div class="relative z-10 text-center w-full">
402
+ <!-- Global Counter -->
403
+ <div class="mb-8">
404
+ <p class="text-slate-400 text-xs uppercase tracking-[0.3em] mb-2">Universal Appreciation Field</p>
405
+ <div id="counter-display" class="text-6xl md:text-7xl font-display font-black text-transparent bg-clip-text bg-gradient-to-r from-yellow-400 via-orange-400 to-yellow-400 metric-value animate-pulse-glow">
406
+ 2,840
407
+ </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
408
  </div>
409
 
410
+ <!-- The Sacred Button -->
411
+ <div class="relative inline-block mb-8">
412
+ <div class="absolute inset-0 bg-gradient-to-r from-yellow-400 to-pink-500 opacity-50 blur-xl animate-pulse"></div>
413
+
414
+ <button id="thumbs-up-btn" class="sacred-btn w-40 h-40 relative group">
415
+ <div class="sacred-btn-inner">
416
+ <div class="flex items-center justify-center gap-1">
417
+ <i class="fa-solid fa-thumbs-up text-4xl text-slate-900 transform -rotate-12 group-hover:rotate-0 transition-transform duration-300"></i>
418
+ <i class="fa-solid fa-thumbs-up text-4xl text-slate-900 transform rotate-12 group-hover:rotate-0 transition-transform duration-300"></i>
419
+ </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
420
  </div>
421
+ </button>
422
+
423
+ <!-- Orbiting Elements -->
424
+ <div class="absolute inset-0 animate-spin" style="animation-duration: 10s;">
425
+ <div class="absolute -top-2 left-1/2 w-2 h-2 bg-yellow-400 rounded-full shadow-lg shadow-yellow-400/50"></div>
426
+ </div>
427
+ <div class="absolute inset-0 animate-spin" style="animation-duration: 15s; animation-direction: reverse;">
428
+ <div class="absolute -bottom-2 left-1/2 w-2 h-2 bg-pink-400 rounded-full shadow-lg shadow-pink-400/50"></div>
429
+ </div>
430
+ </div>
431
 
432
+ <!-- Feedback -->
433
+ <div class="h-12 flex items-center justify-center">
434
+ <p id="feedback-text" class="text-slate-300 font-medium transition-all duration-300 text-lg">
435
+ Initialize appreciation protocol
436
+ </p>
 
 
 
 
 
 
 
 
 
 
437
  </div>
438
 
439
+ <!-- Combo Display -->
440
+ <div id="combo-display" class="hidden mt-4">
441
+ <div class="inline-flex items-center gap-2 px-6 py-3 rounded-full bg-gradient-to-r from-pink-500/20 to-purple-500/20 border border-pink-500/30 animate-pulse">
442
+ <i class="fa-solid fa-bolt text-pink-400"></i>
443
+ <span class="text-pink-400 font-display font-bold text-xl tracking-wider">
444
+ SACRED GEOMETRY x<span id="combo-count">2</span>
445
+ </span>
446
+ </div>
447
+ </div>
448
+ </div>
449
  </div>
 
450
 
451
+ <!-- Right Panel: Wisdom & Best Streak -->
452
+ <div class="space-y-6">
453
+ <!-- Daily Wisdom -->
454
+ <div class="glass-panel rounded-2xl p-6 relative overflow-hidden">
455
+ <div class="absolute top-0 right-0 w-20 h-20 bg-gradient-to-br from-yellow-400/20 to-transparent rounded-bl-full"></div>
456
+ <i class="fa-solid fa-quote-left text-2xl text-yellow-500/30 mb-2"></i>
457
+ <p id="daily-wisdom" class="text-slate-300 text-sm leading-relaxed mb-4 font-medium">
458
+ "The geometry of gratitude is infinite. Every angle reveals a new reason to appreciate."
459
  </p>
460
+ <div class="flex items-center gap-2 text-xs text-slate-500">
461
+ <div class="w-6 h-px bg-slate-600"></div>
462
+ <span>Station Wisdom</span>
 
 
463
  </div>
464
+ </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
465
 
466
+ <!-- Best Streak -->
467
+ <div class="metric-card text-yellow-400">
468
+ <div class="flex justify-between items-start mb-2">
469
+ <span class="text-xs uppercase tracking-widest text-slate-400">Peak Resonance</span>
470
+ <i class="fa-solid fa-trophy text-yellow-400/50"></i>
471
+ </div>
472
+ <div id="best-streak" class="metric-value text-3xl font-bold text-white">0</div>
473
+ <div class="mt-2 text-xs text-slate-500">Highest frequency achieved</div>
474
+ </div>
475
+
476
+ <!-- Geometric Visualizer -->
477
+ <div class="glass-panel rounded-2xl p-6 h-48 flex items-center justify-center relative overflow-hidden">
478
+ <div class="absolute inset-0 flex items-center justify-center">
479
+ <div id="geo-viz" class="w-24 h-24 border-2 border-yellow-400/30 rotate-45 transform transition-all duration-500"></div>
480
+ <div id="geo-viz-2" class="absolute w-16 h-16 border-2 border-pink-400/30 rounded-full animate-pulse"></div>
481
+ </div>
482
+ <div class="absolute bottom-4 left-4 text-xs text-slate-500 font-mono">GEOMETRY_VISUALIZER.exe</div>
483
+ </div>
484
+ </div>
485
+ </div>
486
 
487
+ <!-- Sacred Geometry Footer -->
488
+ <div class="mt-12 grid grid-cols-3 gap-4 max-w-3xl mx-auto">
489
+ <div class="glass-panel rounded-xl p-4 text-center group hover:border-yellow-500/30 transition-colors">
490
+ <div class="text-2xl mb-2 group-hover:scale-110 transition-transform">🔺</div>
491
+ <div class="text-xs text-slate-400">Trinity</div>
492
+ </div>
493
+ <div class="glass-panel rounded-xl p-4 text-center group hover:border-pink-500/30 transition-colors">
494
+ <div class="text-2xl mb-2 group-hover:scale-110 transition-transform">⭕</div>
495
+ <div class="text-xs text-slate-400">Unity</div>
496
+ </div>
497
+ <div class="glass-panel rounded-xl p-4 text-center group hover:border-cyan-500/30 transition-colors">
498
+ <div class="text-2xl mb-2 group-hover:scale-110 transition-transform">⬡</div>
499
+ <div class="text-xs text-slate-400">Harmony</div>
500
+ </div>
501
+ </div>
502
 
503
+ </div>
504
+ </main>
505
+
506
+ <footer class="border-t border-white/10 bg-slate-950/50 backdrop-blur-sm py-6 mt-12">
507
+ <div class="max-w-7xl mx-auto px-4 text-center">
508
+ <p class="text-slate-600 text-xs uppercase tracking-widest mb-2">
509
+ The Appreciation Station • Established 2024
510
+ </p>
511
+ <div class="flex justify-center gap-4 text-slate-500 text-xs">
512
+ <span>Geometry Active</span>
513
+ <span>•</span>
514
+ <span>Presence Confirmed</span>
515
+ <span>•</span>
516
+ <span>Gratitude Flowing</span>
517
+ </div>
518
+ </div>
519
+ </footer>
520
+
521
+ <script>
522
+ // Application State
523
+ const state = {
524
+ count: 2840,
525
+ userClicks: 0,
526
+ streak: 0,
527
+ bestStreak: 0,
528
+ combo: 1,
529
+ lastClickTime: 0,
530
+ presence: 0,
531
+ messages: [
532
+ "Sacred geometry acknowledged! 👍👍",
533
+ "Resonance increasing... 🌟",
534
+ "Dimensional appreciation sent! ✨",
535
+ "Harmonic convergence achieved! 🎵",
536
+ "Geometric perfection! 📐",
537
+ "Universal gratitude received! 🌌",
538
+ "Presence amplified! 🔺",
539
+ "Energy signature logged! ⚡",
540
+ "Vibrational match confirmed! 🎯",
541
+ "Transcendent thanks transmitted! 🚀"
542
+ ],
543
+ wisdoms: [
544
+ "The triangle represents the trinity of giver, receiver, and gratitude.",
545
+ "In the circle of appreciation, there is no beginning and no end.",
546
+ "Like the hexagon in nature, gratitude finds the most efficient path.",
547
+ "Sacred geometry reminds us: every angle offers a new perspective.",
548
+ "The square grounds us, the circle expands us, gratitude connects us.",
549
+ "As above, so below. As within, so without. Appreciate everything.",
550
+ "The golden ratio of happiness is gratitude divided by time.",
551
+ "Your presence here creates ripples in the geometric field of joy."
552
+ ]
553
+ };
554
+
555
+ // DOM Elements
556
+ const counterDisplay = document.getElementById('counter-display');
557
+ const userClicksDisplay = document.getElementById('user-clicks');
558
+ const bestStreakDisplay = document.getElementById('best-streak');
559
+ const streakDisplay = document.getElementById('streak-display');
560
+ const thumbsUpBtn = document.getElementById('thumbs-up-btn');
561
+ const feedbackText = document.getElementById('feedback-text');
562
+ const comboDisplay = document.getElementById('combo-display');
563
+ const comboCount = document.getElementById('combo-count');
564
+ const presenceProgress = document.getElementById('presence-progress');
565
+ const presencePercent = document.getElementById('presence-percent');
566
+ const dailyWisdom = document.getElementById('daily-wisdom');
567
+ const geoViz = document.getElementById('geo-viz');
568
+ const canvas = document.getElementById('confetti-canvas');
569
+ const ctx = canvas.getContext('2d');
570
+
571
+ // Initialize
572
+ counterDisplay.textContent = state.count.toLocaleString();
573
+
574
+ // Rotate wisdom every 30 seconds
575
+ setInterval(() => {
576
+ const randomWisdom = state.wisdoms[Math.floor(Math.random() * state.wisdoms.length)];
577
+ dailyWisdom.style.opacity = 0;
578
+ setTimeout(() => {
579
+ dailyWisdom.textContent = `"${randomWisdom}"`;
580
+ dailyWisdom.style.opacity = 1;
581
+ }, 300);
582
+ }, 30000);
583
+
584
+ // Update Presence Ring
585
+ function updatePresence() {
586
+ state.presence = Math.min(100, state.presence + 5);
587
+ const offset = 565 - (565 * state.presence) / 100;
588
+ presenceProgress.style.strokeDashoffset = offset;
589
+ presencePercent.textContent = state.presence + '%';
590
+
591
+ // Change color based on presence
592
+ if (state.presence > 75) {
593
+ presenceProgress.style.filter = 'drop-shadow(0 0 10px rgba(244, 114, 182, 0.8))';
594
+ }
595
+ }
596
+
597
+ // Combo System
598
+ function updateCombo() {
599
+ const now = Date.now();
600
+ const timeDiff = now - state.lastClickTime;
601
+
602
+ if (timeDiff < 800) {
603
+ state.combo++;
604
+ if (state.combo > 1) {
605
+ showCombo();
606
  }
607
+ } else {
608
+ state.combo = 1;
609
+ hideCombo();
610
+ }
611
+ state.lastClickTime = now;
612
+ }
613
+
614
+ function showCombo() {
615
+ comboDisplay.classList.remove('hidden');
616
+ comboCount.textContent = state.combo;
617
+
618
+ if (state.combo >= 5) {
619
+ feedbackText.innerHTML = `<span class="text-pink-400 font-bold text-xl">SACRED FREQUENCY x${state.combo}!</span>`;
620
+ // Transform geometry visualizer
621
+ geoViz.style.transform = `rotate(${45 + state.combo * 15}deg) scale(${1 + state.combo * 0.1})`;
622
+ geoViz.style.borderColor = `rgba(244, 114, 182, ${0.3 + state.combo * 0.1})`;
623
+ }
624
+ }
625
+
626
+ function hideCombo() {
627
+ comboDisplay.classList.add('hidden');
628
+ geoViz.style.transform = 'rotate(45deg) scale(1)';
629
+ geoViz.style.borderColor = 'rgba(251, 191, 36, 0.3)';
630
+ }
631
+
632
+ // Streak System
633
+ function updateStreak() {
634
+ state.streak++;
635
+ if (state.streak > state.bestStreak) {
636
+ state.bestStreak = state.streak;
637
+ bestStreakDisplay.textContent = state.bestStreak;
638
+ }
639
+ streakDisplay.textContent = state.streak;
640
+ }
641
+
642
+ // Main Click Handler
643
+ thumbsUpBtn.addEventListener('click', (e) => {
644
+ // Update state
645
+ state.count += 2;
646
+ state.userClicks++;
647
+
648
+ // Update displays
649
+ counterDisplay.textContent = state.count.toLocaleString();
650
+ userClicksDisplay.textContent = state.userClicks;
651
+
652
+ // Visual feedback
653
+ counterDisplay.style.transform = 'scale(1.1)';
654
+ setTimeout(() => counterDisplay.style.transform = 'scale(1)', 150);
655
+
656
+ // Systems
657
+ updateStreak();
658
+ updateCombo();
659
+ updatePresence();
660
+
661
+ // Feedback text
662
+ if (state.combo <= 2) {
663
+ const msg = state.messages[Math.floor(Math.random() * state.messages.length)];
664
+ feedbackText.style.opacity = 0;
665
+ setTimeout(() => {
666
+ feedbackText.textContent = msg;
667
+ feedbackText.style.opacity = 1;
668
+ }, 150);
669
+ }
670
+
671
+ // Confetti
672
+ const rect = thumbsUpBtn.getBoundingClientRect();
673
+ const x = (rect.left + rect.width / 2) / window.innerWidth;
674
+ const y = (rect.top + rect.height / 2) / window.innerHeight;
675
+ fireConfetti(x, y, Math.min(state.combo, 5));
676
+ });
677
+
678
+ // Confetti Engine (Sacred Geometry Particles)
679
+ let particles = [];
680
+ let isAnimating = false;
681
+
682
+ function resizeCanvas() {
683
+ canvas.width = window.innerWidth;
684
+ canvas.height = window.innerHeight;
685
+ }
686
+ window.addEventListener('resize', resizeCanvas);
687
+ resizeCanvas();
688
+
689
+ class SacredParticle {
690
+ constructor(x, y, intensity = 1) {
691
+ this.x = x;
692
+ this.y = y;
693
+ const angle = Math.random() * Math.PI * 2;
694
+ const velocity = (Math.random() * 5 + 2) * (1 + intensity * 0.2);
695
+ this.vx = Math.cos(angle) * velocity;
696
+ this.vy = Math.sin(angle) * velocity - 3;
697
+ this.gravity = 0.12;
698
+ this.friction = 0.98;
699
+ this.alpha = 1;
700
+ this.decay = Math.random() * 0.01 + 0.008;
701
+ this.size = (Math.random() * 8 + 4) * (1 + intensity * 0.15);
702
+ this.rotation = Math.random() * 360;
703
+ this.rotationSpeed = (Math.random() - 0.5) * 10;
704
+
705
+ // Sacred colors
706
+ const colors = ['#fbbf24', '#f472b6', '#60a5fa', '#a78bfa', '#ffffff'];
707
+ this.color = colors[Math.floor(Math.random() * colors.length)];
708
+
709
+ // Shapes: 0=triangle, 1=circle, 2=square, 3=hexagon
710
+ this.shape = Math.floor(Math.random() * 4);
711
+ }
712
+
713
+ update() {
714
+ this.vx *= this.friction;
715
+ this.vy *= this.friction;
716
+ this.vy += this.gravity;
717
+ this.x += this.vx;
718
+ this.y += this.vy;
719
+ this.alpha -= this.decay;
720
+ this.rotation += this.rotationSpeed;
721
+ }
722
+
723
+ draw(ctx) {
724
+ ctx.save();
725
+ ctx.translate(this.x, this.y);
726
+ ctx.rotate((this.rotation * Math.PI) / 180);
727
+ ctx.globalAlpha = this.alpha;
728
+ ctx.fillStyle = this.color;
729
+
730
+ switch(this.shape) {
731
+ case 0: // Triangle
732
+ ctx.beginPath();
733
+ ctx.moveTo(0, -this.size/2);
734
+ ctx.lineTo(-this.size/2, this.size/2);
735
+ ctx.lineTo(this.size/2, this.size/2);
736
+ ctx.closePath();
737
+ ctx.fill();
738
+ break;
739
+ case 1: // Circle
740
+ ctx.beginPath();
741
+ ctx.arc(0, 0, this.size/2, 0, Math.PI * 2);
742
+ ctx.fill();
743
+ break;
744
+ case 2: // Square
745
+ ctx.fillRect(-this.size/2, -this.size/2, this.size, this.size);
746
+ break;
747
+ case 3: // Hexagon
748
+ ctx.beginPath();
749
+ for (let i = 0; i < 6; i++) {
750
+ const angle = (Math.PI / 3) * i;
751
+ const hx = Math.cos(angle) * this.size/2;
752
+ const hy = Math.sin(angle) * this.size/2;
753
+ if (i === 0) ctx.moveTo(hx, hy);
754
+ else ctx.lineTo(hx, hy);
755
  }
756
+ ctx.closePath();
757
+ ctx.fill();
758
+ break;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
759
  }
760
+ ctx.restore();
761
+ }
762
+ }
763
+
764
+ function fireConfetti(originX, originY, intensity = 1) {
765
+ const x = originX * canvas.width;
766
+ const y = originY * canvas.height;
767
+ const count = 30 + (intensity * 15);
768
+
769
+ for (let i = 0; i < count; i++) {
770
+ particles.push(new SacredParticle(x, y, intensity));
771
+ }
772
+
773
+ if (!isAnimating) animateConfetti();
774
+ }
775
+
776
+ function animateConfetti() {
777
+ isAnimating = true;
778
+ ctx.clearRect(0, 0, canvas.width, canvas.height);
779
+
780
+ for (let i = particles.length - 1; i >= 0; i--) {
781
+ const p = particles[i];
782
+ p.update();
783
+ p.draw(ctx);
784
+ if (p.alpha <= 0) particles.splice(i, 1);
785
+ }
786
+
787
+ if (particles.length > 0) {
788
+ requestAnimationFrame(animateConfetti);
789
+ } else {
790
+ isAnimating = false;
791
+ }
792
+ }
793
+
794
+ // Keyboard Support
795
+ document.addEventListener('keydown', (e) => {
796
+ if (e.code === 'Space' && !e.repeat) {
797
+ e.preventDefault();
798
+ thumbsUpBtn.click();
799
+ thumbsUpBtn.style.transform = 'scale(0.95)';
800
+ setTimeout(() => thumbsUpBtn.style.transform = '', 100);
801
+ }
802
+ });
803
+
804
+ // Idle Animation
805
+ setInterval(() => {
806
+ if (Math.random() > 0.7 && state.presence > 0) {
807
+ state.presence = Math.max(0, state.presence - 1);
808
+ const offset = 565 - (565 * state.presence) / 100;
809
+ presenceProgress.style.strokeDashoffset = offset;
810
+ presencePercent.textContent = state.presence + '%';
811
+ }
812
+ }, 2000);
813
+
814
+ </script>
815
  </body>
816
+
817
  </html>