Spaces:

matthewspring
/

anycoder-09921165

Running

File size: 30,531 Bytes

<!DOCTYPE html>
<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>