Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>The Appreciation Station - Geometry of Gratitude</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet"> | |
| <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"> | |
| <style> | |
| :root { | |
| --primary-glow: rgba(251, 191, 36, 0.5); | |
| --geometric-accent: rgba(244, 114, 182, 0.3); | |
| } | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| background-color: #020617; | |
| overflow-x: hidden; | |
| color: #e2e8f0; | |
| } | |
| .font-display { | |
| font-family: 'Space Grotesk', sans-serif; | |
| } | |
| /* Sacred Geometry Background */ | |
| .geometry-bg { | |
| position: fixed; | |
| inset: 0; | |
| overflow: hidden; | |
| pointer-events: none; | |
| z-index: -1; | |
| } | |
| .geo-shape { | |
| position: absolute; | |
| opacity: 0.15; | |
| animation: rotate-slow 30s linear infinite; | |
| } | |
| .geo-triangle { | |
| width: 0; | |
| height: 0; | |
| border-left: 100px solid transparent; | |
| border-right: 100px solid transparent; | |
| border-bottom: 173px solid rgba(251, 191, 36, 0.3); | |
| filter: blur(1px); | |
| } | |
| .geo-circle { | |
| border: 2px solid rgba(244, 114, 182, 0.4); | |
| border-radius: 50%; | |
| background: radial-gradient(circle, transparent 40%, rgba(244, 114, 182, 0.1) 100%); | |
| } | |
| .geo-square { | |
| border: 2px solid rgba(96, 165, 250, 0.4); | |
| transform: rotate(45deg); | |
| background: linear-gradient(45deg, transparent, rgba(96, 165, 250, 0.1)); | |
| } | |
| .geo-hexagon { | |
| width: 100px; | |
| height: 55px; | |
| background: rgba(139, 92, 246, 0.2); | |
| position: relative; | |
| clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%); | |
| } | |
| @keyframes rotate-slow { | |
| from { transform: rotate(0deg); } | |
| to { transform: rotate(360deg); } | |
| } | |
| @keyframes float-geometry { | |
| 0%, 100% { transform: translate(0, 0) rotate(0deg); } | |
| 33% { transform: translate(30px, -30px) rotate(120deg); } | |
| 66% { transform: translate(-20px, 20px) rotate(240deg); } | |
| } | |
| /* Glassmorphism with Geometric Borders */ | |
| .glass-panel { | |
| background: rgba(15, 23, 42, 0.6); | |
| backdrop-filter: blur(20px); | |
| -webkit-backdrop-filter: blur(20px); | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5); | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .glass-panel::before { | |
| content: ''; | |
| position: absolute; | |
| inset: 0; | |
| background: linear-gradient(135deg, rgba(251, 191, 36, 0.1) 0%, transparent 50%, rgba(244, 114, 182, 0.1) 100%); | |
| pointer-events: none; | |
| } | |
| .geometric-border { | |
| position: relative; | |
| } | |
| .geometric-border::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: 0; | |
| left: 0; | |
| right: 0; | |
| height: 2px; | |
| background: linear-gradient(90deg, | |
| transparent 0%, | |
| rgba(251, 191, 36, 0.8) 20%, | |
| rgba(244, 114, 182, 0.8) 50%, | |
| rgba(96, 165, 250, 0.8) 80%, | |
| transparent 100% | |
| ); | |
| } | |
| /* Presence Indicator */ | |
| .presence-ring { | |
| position: relative; | |
| width: 200px; | |
| height: 200px; | |
| } | |
| .presence-ring svg { | |
| transform: rotate(-90deg); | |
| width: 100%; | |
| height: 100%; | |
| } | |
| .presence-ring circle { | |
| fill: none; | |
| stroke-width: 4; | |
| } | |
| .presence-ring .bg { | |
| stroke: rgba(255, 255, 255, 0.1); | |
| } | |
| .presence-ring .progress { | |
| stroke: url(#gradient); | |
| stroke-linecap: round; | |
| stroke-dasharray: 565; | |
| stroke-dashoffset: 565; | |
| transition: stroke-dashoffset 1s ease; | |
| filter: drop-shadow(0 0 10px rgba(251, 191, 36, 0.5)); | |
| } | |
| /* Sacred Button Geometry */ | |
| .sacred-btn { | |
| background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 50%, #f97316 100%); | |
| clip-path: polygon(20% 0%, 80% 0%, 100% 50%, 80% 100%, 20% 100%, 0% 50%); | |
| transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); | |
| position: relative; | |
| box-shadow: 0 0 40px rgba(251, 191, 36, 0.4); | |
| } | |
| .sacred-btn:hover { | |
| transform: scale(1.05); | |
| filter: brightness(1.2); | |
| box-shadow: 0 0 60px rgba(251, 191, 36, 0.6); | |
| } | |
| .sacred-btn:active { | |
| transform: scale(0.95); | |
| } | |
| .sacred-btn-inner { | |
| clip-path: polygon(22% 5%, 78% 5%, 95% 50%, 78% 95%, 22% 95%, 5% 50%); | |
| background: linear-gradient(135deg, #fcd34d 0%, #fbbf24 100%); | |
| position: absolute; | |
| inset: 3px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| /* Text Effects */ | |
| .text-gradient { | |
| background: linear-gradient(135deg, #fbbf24 0%, #f472b6 50%, #60a5fa 100%); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-size: 200% 200%; | |
| animation: gradient-shift 5s ease infinite; | |
| } | |
| @keyframes gradient-shift { | |
| 0%, 100% { background-position: 0% 50%; } | |
| 50% { background-position: 100% 50%; } | |
| } | |
| .glow-text { | |
| text-shadow: 0 0 20px rgba(251, 191, 36, 0.5), 0 0 40px rgba(251, 191, 36, 0.3); | |
| } | |
| /* Grid Layout for Station */ | |
| .station-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); | |
| gap: 2rem; | |
| align-items: start; | |
| } | |
| @media (min-width: 1024px) { | |
| .station-grid { | |
| grid-template-columns: 1fr 1.5fr 1fr; | |
| } | |
| } | |
| /* Animations */ | |
| @keyframes pulse-glow { | |
| 0%, 100% { box-shadow: 0 0 20px rgba(251, 191, 36, 0.3); } | |
| 50% { box-shadow: 0 0 40px rgba(251, 191, 36, 0.6), 0 0 60px rgba(244, 114, 182, 0.3); } | |
| } | |
| @keyframes float { | |
| 0%, 100% { transform: translateY(0px); } | |
| 50% { transform: translateY(-10px); } | |
| } | |
| .animate-float { | |
| animation: float 6s ease-in-out infinite; | |
| } | |
| .animate-pulse-glow { | |
| animation: pulse-glow 3s ease-in-out infinite; | |
| } | |
| /* Metric Cards */ | |
| .metric-card { | |
| background: rgba(255, 255, 255, 0.03); | |
| border: 1px solid rgba(255, 255, 255, 0.05); | |
| border-radius: 1rem; | |
| padding: 1.5rem; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .metric-card::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 2px; | |
| background: linear-gradient(90deg, transparent, currentColor, transparent); | |
| opacity: 0.5; | |
| } | |
| .metric-value { | |
| font-family: 'Space Grotesk', monospace; | |
| font-variant-numeric: tabular-nums; | |
| } | |
| /* Canvas */ | |
| #confetti-canvas { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| pointer-events: none; | |
| z-index: 50; | |
| } | |
| </style> | |
| </head> | |
| <body class="min-h-screen flex flex-col"> | |
| <!-- SVG Definitions for Gradients --> | |
| <svg width="0" height="0" style="position: absolute;"> | |
| <defs> | |
| <linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="0%"> | |
| <stop offset="0%" style="stop-color:#fbbf24;stop-opacity:1" /> | |
| <stop offset="50%" style="stop-color:#f472b6;stop-opacity:1" /> | |
| <stop offset="100%" style="stop-color:#60a5fa;stop-opacity:1" /> | |
| </linearGradient> | |
| </defs> | |
| </svg> | |
| <!-- Sacred Geometry Background --> | |
| <div class="geometry-bg"> | |
| <div class="geo-shape geo-triangle" style="top: 10%; left: 5%; animation: float-geometry 20s infinite;"></div> | |
| <div class="geo-shape geo-circle" style="width: 300px; height: 300px; top: 60%; right: 10%; animation: float-geometry 25s infinite reverse;"></div> | |
| <div class="geo-shape geo-square" style="width: 150px; height: 150px; top: 20%; right: 20%; animation: rotate-slow 40s linear infinite;"></div> | |
| <div class="geo-shape geo-hexagon" style="top: 70%; left: 15%; animation: float-geometry 18s infinite;"></div> | |
| <div class="geo-shape geo-circle" style="width: 200px; height: 200px; bottom: 10%; left: 40%; animation: rotate-slow 35s linear infinite reverse;"></div> | |
| </div> | |
| <canvas id="confetti-canvas"></canvas> | |
| <!-- Navigation --> | |
| <nav class="w-full glass-panel fixed top-0 z-40 geometric-border"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex items-center justify-between h-16"> | |
| <div class="flex items-center gap-3"> | |
| <div class="w-10 h-10 relative"> | |
| <div class="absolute inset-0 bg-gradient-to-br from-yellow-400 to-pink-500 rotate-45 transform"></div> | |
| <div class="absolute inset-1 bg-slate-900 rotate-45 transform flex items-center justify-center"> | |
| <i class="fa-solid fa-shapes text-yellow-400 text-sm"></i> | |
| </div> | |
| </div> | |
| <span class="font-display font-bold text-xl tracking-tight text-white"> | |
| The Appreciation <span class="text-gradient">Station</span> | |
| </span> | |
| </div> | |
| <div class="hidden md:flex items-center gap-4"> | |
| <div class="flex items-center gap-2 px-4 py-1.5 rounded-full bg-white/5 border border-white/10"> | |
| <div class="w-2 h-2 rounded-full bg-green-400 animate-pulse"></div> | |
| <span class="text-xs font-medium text-slate-300">Present Today</span> | |
| </div> | |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" | |
| 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"> | |
| <i class="fa-solid fa-code"></i> Built with anycoder | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Main Content --> | |
| <main class="flex-grow pt-24 pb-12 px-4 sm:px-6 lg:px-8 relative"> | |
| <div class="max-w-7xl mx-auto"> | |
| <!-- Header --> | |
| <div class="text-center mb-12"> | |
| <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"> | |
| <i class="fa-solid fa-sun"></i> | |
| Today's Geometry is Active | |
| <i class="fa-solid fa-moon"></i> | |
| </div> | |
| <h1 class="text-5xl md:text-6xl lg:text-7xl font-display font-black tracking-tight mb-4 glow-text"> | |
| <span class="text-white">Presence</span> <span class="text-gradient">Detected</span> | |
| </h1> | |
| <p class="text-lg text-slate-400 max-w-2xl mx-auto leading-relaxed"> | |
| The station is calibrated to your energy. Through sacred geometry and dual-vector appreciation, | |
| we channel <span class="text-yellow-400 font-semibold">2x gratitude</span> into the universal counter. | |
| </p> | |
| </div> | |
| <!-- Station Grid --> | |
| <div class="station-grid"> | |
| <!-- Left Panel: Metrics & Presence --> | |
| <div class="space-y-6"> | |
| <!-- Presence Meter --> | |
| <div class="glass-panel rounded-2xl p-6 flex flex-col items-center"> | |
| <h3 class="font-display font-bold text-lg mb-4 text-slate-200">Today's Presence</h3> | |
| <div class="presence-ring mb-4"> | |
| <svg viewBox="0 0 200 200"> | |
| <circle class="bg" cx="100" cy="100" r="90"></circle> | |
| <circle class="progress" id="presence-progress" cx="100" cy="100" r="90"></circle> | |
| </svg> | |
| <div class="absolute inset-0 flex items-center justify-center flex-col"> | |
| <span id="presence-percent" class="text-3xl font-display font-bold text-white">0%</span> | |
| <span class="text-xs text-slate-400 uppercase tracking-widest">Active</span> | |
| </div> | |
| </div> | |
| <p class="text-center text-sm text-slate-400"> | |
| Your appreciation frequency is resonating at optimal levels. | |
| </p> | |
| </div> | |
| <!-- Daily Stats --> | |
| <div class="metric-card text-cyan-400"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <span class="text-xs uppercase tracking-widest text-slate-400">Session Clicks</span> | |
| <i class="fa-solid fa-fingerprint text-cyan-400/50"></i> | |
| </div> | |
| <div id="user-clicks" class="metric-value text-3xl font-bold text-white">0</div> | |
| <div class="mt-2 text-xs text-slate-500">Geometric vectors deployed</div> | |
| </div> | |
| <div class="metric-card text-pink-400"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <span class="text-xs uppercase tracking-widest text-slate-400">Current Streak</span> | |
| <i class="fa-solid fa-fire text-pink-400/50"></i> | |
| </div> | |
| <div id="streak-display" class="metric-value text-3xl font-bold text-white">0</div> | |
| <div class="mt-2 text-xs text-slate-500">Consecutive appreciations</div> | |
| </div> | |
| </div> | |
| <!-- Center Panel: The Sacred Console --> | |
| <div class="glass-panel rounded-3xl p-8 md:p-12 relative overflow-hidden min-h-[500px] flex flex-col items-center justify-center"> | |
| <!-- Background Effects --> | |
| <div class="absolute inset-0 bg-gradient-to-br from-yellow-500/5 via-transparent to-pink-500/5"></div> | |
| <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> | |
| <!-- Geometric Frame --> | |
| <div class="absolute inset-4 border border-white/5 rounded-2xl pointer-events-none"></div> | |
| <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> | |
| <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> | |
| <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> | |
| <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> | |
| <div class="relative z-10 text-center w-full"> | |
| <!-- Global Counter --> | |
| <div class="mb-8"> | |
| <p class="text-slate-400 text-xs uppercase tracking-[0.3em] mb-2">Universal Appreciation Field</p> | |
| <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"> | |
| 2,840 | |
| </div> | |
| </div> | |
| <!-- The Sacred Button --> | |
| <div class="relative inline-block mb-8"> | |
| <div class="absolute inset-0 bg-gradient-to-r from-yellow-400 to-pink-500 opacity-50 blur-xl animate-pulse"></div> | |
| <button id="thumbs-up-btn" class="sacred-btn w-40 h-40 relative group"> | |
| <div class="sacred-btn-inner"> | |
| <div class="flex items-center justify-center gap-1"> | |
| <i class="fa-solid fa-thumbs-up text-4xl text-slate-900 transform -rotate-12 group-hover:rotate-0 transition-transform duration-300"></i> | |
| <i class="fa-solid fa-thumbs-up text-4xl text-slate-900 transform rotate-12 group-hover:rotate-0 transition-transform duration-300"></i> | |
| </div> | |
| </div> | |
| </button> | |
| <!-- Orbiting Elements --> | |
| <div class="absolute inset-0 animate-spin" style="animation-duration: 10s;"> | |
| <div class="absolute -top-2 left-1/2 w-2 h-2 bg-yellow-400 rounded-full shadow-lg shadow-yellow-400/50"></div> | |
| </div> | |
| <div class="absolute inset-0 animate-spin" style="animation-duration: 15s; animation-direction: reverse;"> | |
| <div class="absolute -bottom-2 left-1/2 w-2 h-2 bg-pink-400 rounded-full shadow-lg shadow-pink-400/50"></div> | |
| </div> | |
| </div> | |
| <!-- Feedback --> | |
| <div class="h-12 flex items-center justify-center"> | |
| <p id="feedback-text" class="text-slate-300 font-medium transition-all duration-300 text-lg"> | |
| Initialize appreciation protocol | |
| </p> | |
| </div> | |
| <!-- Combo Display --> | |
| <div id="combo-display" class="hidden mt-4"> | |
| <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"> | |
| <i class="fa-solid fa-bolt text-pink-400"></i> | |
| <span class="text-pink-400 font-display font-bold text-xl tracking-wider"> | |
| SACRED GEOMETRY x<span id="combo-count">2</span> | |
| </span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Right Panel: Wisdom & Best Streak --> | |
| <div class="space-y-6"> | |
| <!-- Daily Wisdom --> | |
| <div class="glass-panel rounded-2xl p-6 relative overflow-hidden"> | |
| <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> | |
| <i class="fa-solid fa-quote-left text-2xl text-yellow-500/30 mb-2"></i> | |
| <p id="daily-wisdom" class="text-slate-300 text-sm leading-relaxed mb-4 font-medium"> | |
| "The geometry of gratitude is infinite. Every angle reveals a new reason to appreciate." | |
| </p> | |
| <div class="flex items-center gap-2 text-xs text-slate-500"> | |
| <div class="w-6 h-px bg-slate-600"></div> | |
| <span>Station Wisdom</span> | |
| </div> | |
| </div> | |
| <!-- Best Streak --> | |
| <div class="metric-card text-yellow-400"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <span class="text-xs uppercase tracking-widest text-slate-400">Peak Resonance</span> | |
| <i class="fa-solid fa-trophy text-yellow-400/50"></i> | |
| </div> | |
| <div id="best-streak" class="metric-value text-3xl font-bold text-white">0</div> | |
| <div class="mt-2 text-xs text-slate-500">Highest frequency achieved</div> | |
| </div> | |
| <!-- Geometric Visualizer --> | |
| <div class="glass-panel rounded-2xl p-6 h-48 flex items-center justify-center relative overflow-hidden"> | |
| <div class="absolute inset-0 flex items-center justify-center"> | |
| <div id="geo-viz" class="w-24 h-24 border-2 border-yellow-400/30 rotate-45 transform transition-all duration-500"></div> | |
| <div id="geo-viz-2" class="absolute w-16 h-16 border-2 border-pink-400/30 rounded-full animate-pulse"></div> | |
| </div> | |
| <div class="absolute bottom-4 left-4 text-xs text-slate-500 font-mono">GEOMETRY_VISUALIZER.exe</div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Sacred Geometry Footer --> | |
| <div class="mt-12 grid grid-cols-3 gap-4 max-w-3xl mx-auto"> | |
| <div class="glass-panel rounded-xl p-4 text-center group hover:border-yellow-500/30 transition-colors"> | |
| <div class="text-2xl mb-2 group-hover:scale-110 transition-transform">🔺</div> | |
| <div class="text-xs text-slate-400">Trinity</div> | |
| </div> | |
| <div class="glass-panel rounded-xl p-4 text-center group hover:border-pink-500/30 transition-colors"> | |
| <div class="text-2xl mb-2 group-hover:scale-110 transition-transform">⭕</div> | |
| <div class="text-xs text-slate-400">Unity</div> | |
| </div> | |
| <div class="glass-panel rounded-xl p-4 text-center group hover:border-cyan-500/30 transition-colors"> | |
| <div class="text-2xl mb-2 group-hover:scale-110 transition-transform">⬡</div> | |
| <div class="text-xs text-slate-400">Harmony</div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <footer class="border-t border-white/10 bg-slate-950/50 backdrop-blur-sm py-6 mt-12"> | |
| <div class="max-w-7xl mx-auto px-4 text-center"> | |
| <p class="text-slate-600 text-xs uppercase tracking-widest mb-2"> | |
| The Appreciation Station • Established 2024 | |
| </p> | |
| <div class="flex justify-center gap-4 text-slate-500 text-xs"> | |
| <span>Geometry Active</span> | |
| <span>•</span> | |
| <span>Presence Confirmed</span> | |
| <span>•</span> | |
| <span>Gratitude Flowing</span> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Application State | |
| const state = { | |
| count: 2840, | |
| userClicks: 0, | |
| streak: 0, | |
| bestStreak: 0, | |
| combo: 1, | |
| lastClickTime: 0, | |
| presence: 0, | |
| messages: [ | |
| "Sacred geometry acknowledged! 👍👍", | |
| "Resonance increasing... 🌟", | |
| "Dimensional appreciation sent! ✨", | |
| "Harmonic convergence achieved! 🎵", | |
| "Geometric perfection! 📐", | |
| "Universal gratitude received! 🌌", | |
| "Presence amplified! 🔺", | |
| "Energy signature logged! ⚡", | |
| "Vibrational match confirmed! 🎯", | |
| "Transcendent thanks transmitted! 🚀" | |
| ], | |
| wisdoms: [ | |
| "The triangle represents the trinity of giver, receiver, and gratitude.", | |
| "In the circle of appreciation, there is no beginning and no end.", | |
| "Like the hexagon in nature, gratitude finds the most efficient path.", | |
| "Sacred geometry reminds us: every angle offers a new perspective.", | |
| "The square grounds us, the circle expands us, gratitude connects us.", | |
| "As above, so below. As within, so without. Appreciate everything.", | |
| "The golden ratio of happiness is gratitude divided by time.", | |
| "Your presence here creates ripples in the geometric field of joy." | |
| ] | |
| }; | |
| // DOM Elements | |
| const counterDisplay = document.getElementById('counter-display'); | |
| const userClicksDisplay = document.getElementById('user-clicks'); | |
| const bestStreakDisplay = document.getElementById('best-streak'); | |
| const streakDisplay = document.getElementById('streak-display'); | |
| const thumbsUpBtn = document.getElementById('thumbs-up-btn'); | |
| const feedbackText = document.getElementById('feedback-text'); | |
| const comboDisplay = document.getElementById('combo-display'); | |
| const comboCount = document.getElementById('combo-count'); | |
| const presenceProgress = document.getElementById('presence-progress'); | |
| const presencePercent = document.getElementById('presence-percent'); | |
| const dailyWisdom = document.getElementById('daily-wisdom'); | |
| const geoViz = document.getElementById('geo-viz'); | |
| const canvas = document.getElementById('confetti-canvas'); | |
| const ctx = canvas.getContext('2d'); | |
| // Initialize | |
| counterDisplay.textContent = state.count.toLocaleString(); | |
| // Rotate wisdom every 30 seconds | |
| setInterval(() => { | |
| const randomWisdom = state.wisdoms[Math.floor(Math.random() * state.wisdoms.length)]; | |
| dailyWisdom.style.opacity = 0; | |
| setTimeout(() => { | |
| dailyWisdom.textContent = `"${randomWisdom}"`; | |
| dailyWisdom.style.opacity = 1; | |
| }, 300); | |
| }, 30000); | |
| // Update Presence Ring | |
| function updatePresence() { | |
| state.presence = Math.min(100, state.presence + 5); | |
| const offset = 565 - (565 * state.presence) / 100; | |
| presenceProgress.style.strokeDashoffset = offset; | |
| presencePercent.textContent = state.presence + '%'; | |
| // Change color based on presence | |
| if (state.presence > 75) { | |
| presenceProgress.style.filter = 'drop-shadow(0 0 10px rgba(244, 114, 182, 0.8))'; | |
| } | |
| } | |
| // Combo System | |
| function updateCombo() { | |
| const now = Date.now(); | |
| const timeDiff = now - state.lastClickTime; | |
| if (timeDiff < 800) { | |
| state.combo++; | |
| if (state.combo > 1) { | |
| showCombo(); | |
| } | |
| } else { | |
| state.combo = 1; | |
| hideCombo(); | |
| } | |
| state.lastClickTime = now; | |
| } | |
| function showCombo() { | |
| comboDisplay.classList.remove('hidden'); | |
| comboCount.textContent = state.combo; | |
| if (state.combo >= 5) { | |
| feedbackText.innerHTML = `<span class="text-pink-400 font-bold text-xl">SACRED FREQUENCY x${state.combo}!</span>`; | |
| // Transform geometry visualizer | |
| geoViz.style.transform = `rotate(${45 + state.combo * 15}deg) scale(${1 + state.combo * 0.1})`; | |
| geoViz.style.borderColor = `rgba(244, 114, 182, ${0.3 + state.combo * 0.1})`; | |
| } | |
| } | |
| function hideCombo() { | |
| comboDisplay.classList.add('hidden'); | |
| geoViz.style.transform = 'rotate(45deg) scale(1)'; | |
| geoViz.style.borderColor = 'rgba(251, 191, 36, 0.3)'; | |
| } | |
| // Streak System | |
| function updateStreak() { | |
| state.streak++; | |
| if (state.streak > state.bestStreak) { | |
| state.bestStreak = state.streak; | |
| bestStreakDisplay.textContent = state.bestStreak; | |
| } | |
| streakDisplay.textContent = state.streak; | |
| } | |
| // Main Click Handler | |
| thumbsUpBtn.addEventListener('click', (e) => { | |
| // Update state | |
| state.count += 2; | |
| state.userClicks++; | |
| // Update displays | |
| counterDisplay.textContent = state.count.toLocaleString(); | |
| userClicksDisplay.textContent = state.userClicks; | |
| // Visual feedback | |
| counterDisplay.style.transform = 'scale(1.1)'; | |
| setTimeout(() => counterDisplay.style.transform = 'scale(1)', 150); | |
| // Systems | |
| updateStreak(); | |
| updateCombo(); | |
| updatePresence(); | |
| // Feedback text | |
| if (state.combo <= 2) { | |
| const msg = state.messages[Math.floor(Math.random() * state.messages.length)]; | |
| feedbackText.style.opacity = 0; | |
| setTimeout(() => { | |
| feedbackText.textContent = msg; | |
| feedbackText.style.opacity = 1; | |
| }, 150); | |
| } | |
| // Confetti | |
| const rect = thumbsUpBtn.getBoundingClientRect(); | |
| const x = (rect.left + rect.width / 2) / window.innerWidth; | |
| const y = (rect.top + rect.height / 2) / window.innerHeight; | |
| fireConfetti(x, y, Math.min(state.combo, 5)); | |
| }); | |
| // Confetti Engine (Sacred Geometry Particles) | |
| let particles = []; | |
| let isAnimating = false; | |
| function resizeCanvas() { | |
| canvas.width = window.innerWidth; | |
| canvas.height = window.innerHeight; | |
| } | |
| window.addEventListener('resize', resizeCanvas); | |
| resizeCanvas(); | |
| class SacredParticle { | |
| constructor(x, y, intensity = 1) { | |
| this.x = x; | |
| this.y = y; | |
| const angle = Math.random() * Math.PI * 2; | |
| const velocity = (Math.random() * 5 + 2) * (1 + intensity * 0.2); | |
| this.vx = Math.cos(angle) * velocity; | |
| this.vy = Math.sin(angle) * velocity - 3; | |
| this.gravity = 0.12; | |
| this.friction = 0.98; | |
| this.alpha = 1; | |
| this.decay = Math.random() * 0.01 + 0.008; | |
| this.size = (Math.random() * 8 + 4) * (1 + intensity * 0.15); | |
| this.rotation = Math.random() * 360; | |
| this.rotationSpeed = (Math.random() - 0.5) * 10; | |
| // Sacred colors | |
| const colors = ['#fbbf24', '#f472b6', '#60a5fa', '#a78bfa', '#ffffff']; | |
| this.color = colors[Math.floor(Math.random() * colors.length)]; | |
| // Shapes: 0=triangle, 1=circle, 2=square, 3=hexagon | |
| this.shape = Math.floor(Math.random() * 4); | |
| } | |
| update() { | |
| this.vx *= this.friction; | |
| this.vy *= this.friction; | |
| this.vy += this.gravity; | |
| this.x += this.vx; | |
| this.y += this.vy; | |
| this.alpha -= this.decay; | |
| this.rotation += this.rotationSpeed; | |
| } | |
| draw(ctx) { | |
| ctx.save(); | |
| ctx.translate(this.x, this.y); | |
| ctx.rotate((this.rotation * Math.PI) / 180); | |
| ctx.globalAlpha = this.alpha; | |
| ctx.fillStyle = this.color; | |
| switch(this.shape) { | |
| case 0: // Triangle | |
| ctx.beginPath(); | |
| ctx.moveTo(0, -this.size/2); | |
| ctx.lineTo(-this.size/2, this.size/2); | |
| ctx.lineTo(this.size/2, this.size/2); | |
| ctx.closePath(); | |
| ctx.fill(); | |
| break; | |
| case 1: // Circle | |
| ctx.beginPath(); | |
| ctx.arc(0, 0, this.size/2, 0, Math.PI * 2); | |
| ctx.fill(); | |
| break; | |
| case 2: // Square | |
| ctx.fillRect(-this.size/2, -this.size/2, this.size, this.size); | |
| break; | |
| case 3: // Hexagon | |
| ctx.beginPath(); | |
| for (let i = 0; i < 6; i++) { | |
| const angle = (Math.PI / 3) * i; | |
| const hx = Math.cos(angle) * this.size/2; | |
| const hy = Math.sin(angle) * this.size/2; | |
| if (i === 0) ctx.moveTo(hx, hy); | |
| else ctx.lineTo(hx, hy); | |
| } | |
| ctx.closePath(); | |
| ctx.fill(); | |
| break; | |
| } | |
| ctx.restore(); | |
| } | |
| } | |
| function fireConfetti(originX, originY, intensity = 1) { | |
| const x = originX * canvas.width; | |
| const y = originY * canvas.height; | |
| const count = 30 + (intensity * 15); | |
| for (let i = 0; i < count; i++) { | |
| particles.push(new SacredParticle(x, y, intensity)); | |
| } | |
| if (!isAnimating) animateConfetti(); | |
| } | |
| function animateConfetti() { | |
| isAnimating = true; | |
| ctx.clearRect(0, 0, canvas.width, canvas.height); | |
| for (let i = particles.length - 1; i >= 0; i--) { | |
| const p = particles[i]; | |
| p.update(); | |
| p.draw(ctx); | |
| if (p.alpha <= 0) particles.splice(i, 1); | |
| } | |
| if (particles.length > 0) { | |
| requestAnimationFrame(animateConfetti); | |
| } else { | |
| isAnimating = false; | |
| } | |
| } | |
| // Keyboard Support | |
| document.addEventListener('keydown', (e) => { | |
| if (e.code === 'Space' && !e.repeat) { | |
| e.preventDefault(); | |
| thumbsUpBtn.click(); | |
| thumbsUpBtn.style.transform = 'scale(0.95)'; | |
| setTimeout(() => thumbsUpBtn.style.transform = '', 100); | |
| } | |
| }); | |
| // Idle Animation | |
| setInterval(() => { | |
| if (Math.random() > 0.7 && state.presence > 0) { | |
| state.presence = Math.max(0, state.presence - 1); | |
| const offset = 565 - (565 * state.presence) / 100; | |
| presenceProgress.style.strokeDashoffset = offset; | |
| presencePercent.textContent = state.presence + '%'; | |
| } | |
| }, 2000); | |
| </script> | |
| </body> | |
| </html> |