yuuka click

index.html

@@ -24,8 +24,14 @@
 
       <!-- Top half: welcome -->
       <div id="about-hero">
-        <h1>Hello!!!!</h1>
-        <p>Welcome to my first website, I don't actually use here at all but if you are here you should leave a comment!!</p>
+        <div id="click-counter-container">
+          <img src="textures/yuuka_click.png" id="yuuka-click-btn" alt="Click Me!">
+          <div id="click-counter-display">...</div>
+        </div>
+        <div class="hero-text">
+          <h1>Hello!!!!</h1>
+          <p>Welcome to my first website, I don't actually use here at all but if you are here you should leave a comment!!</p>
+        </div>
       </div>
 
       <!-- Bottom half: Steam-style comments -->

js/comments.js

@@ -147,6 +147,37 @@ document.addEventListener('DOMContentLoaded', () => {
         }
     }
 
+    // ── Global Click Counter ─────────────────────────────────────
+    const clickBtn = document.getElementById('yuuka-click-btn');
+    const clickDisplay = document.getElementById('click-counter-display');
+    
+    if (clickBtn && clickDisplay && configured) {
+        const statsRef = db.collection('stats').doc('global_clicks');
+        
+        // Listen to changes in real-time
+        statsRef.onSnapshot(doc => {
+            if (doc.exists) {
+                clickDisplay.textContent = doc.data().count.toLocaleString();
+            } else {
+                clickDisplay.textContent = '0';
+            }
+        }, err => {
+            console.error("Click counter error:", err);
+            clickDisplay.textContent = 'Error';
+        });
+
+        // Increment on click
+        clickBtn.addEventListener('click', () => {
+            // Optimistic update for instant feel
+            let current = parseInt(clickDisplay.textContent.replace(/,/g, '')) || 0;
+            clickDisplay.textContent = (current + 1).toLocaleString();
+            
+            statsRef.set({
+                count: firebase.firestore.FieldValue.increment(1)
+            }, { merge: true }).catch(err => console.error("Failed to click:", err));
+        });
+    }
+
     db.collection(COLLECTION)
         .orderBy('timestamp', 'desc')
         .onSnapshot(snap => {

style/comments.css

@@ -5,13 +5,47 @@
 /* ── About hero (top half) ──────────────────────────────── */
 #about-hero {
     padding: 120px 20px 50px;
-    text-align: center;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 40px;
+}
+
+.hero-text {
+    text-align: left;
 }
 
 #about-hero h1 {
     margin-top: 0;
 }
 
+#click-counter-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 15px;
+}
+
+#yuuka-click-btn {
+    width: 200px;
+    cursor: pointer;
+    transition: transform 0.1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+    user-select: none;
+    -webkit-user-drag: none;
+}
+
+#yuuka-click-btn:active {
+    transform: scale(0.9);
+}
+
+#click-counter-display {
+    color: #153dee;
+    font-size: 2.5rem;
+    font-weight: bold;
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    text-shadow: 2px 2px 0 rgba(255, 255, 255, 0.8);
+}
+
 /* ── Steam panel wrapper ─────────────────────────────────── */
 #comments-section {
     width: 100%;