done

2026-01-10 23:41:07 +00:00
commit e7a44a27af
1333 changed files with 483325 additions and 0 deletions
--- a/public/admin.html
+++ b/public/admin.html
@@ -0,0 +1,220 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Admin - Global Counter</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;500;700&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="style.css">
+    <style>
+        .admin-grid {
+            display: grid;
+            grid-template-columns: 1fr;
+            gap: 2rem;
+            width: 100%;
+            max-width: 900px;
+        }
+
+        @media(min-width: 768px) {
+            .admin-grid {
+                grid-template-columns: 1fr 2fr;
+            }
+        }
+
+        .stat-card {
+            background: white;
+            padding: 2rem;
+            border-radius: 20px;
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+        }
+
+        .recent-activity {
+            background: white;
+            padding: 2rem;
+            border-radius: 20px;
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
+            max-height: 500px;
+            overflow-y: auto;
+        }
+
+        .activity-header {
+            font-size: 1.2rem;
+            font-weight: 700;
+            margin-bottom: 1rem;
+            color: var(--text-color);
+        }
+
+        .log-item {
+            display: flex;
+            align-items: flex-start;
+            gap: 1rem;
+            padding: 1rem 0;
+            border-bottom: 1px solid #f0f0f0;
+            animation: fadeIn 0.3s ease;
+        }
+
+        .log-item:last-child {
+            border-bottom: none;
+        }
+
+        .avatar {
+            width: 40px;
+            height: 40px;
+            border-radius: 50%;
+            background: #eee;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-weight: 700;
+            color: #888;
+            font-size: 1.2rem;
+        }
+
+        .log-content {
+            flex: 1;
+        }
+
+        .log-name {
+            font-weight: 600;
+            font-size: 1rem;
+        }
+
+        .log-time {
+            font-size: 0.8rem;
+            color: #999;
+            margin-left: 0.5rem;
+        }
+
+        .log-quote {
+            font-size: 0.95rem;
+            color: #555;
+            margin-top: 0.2rem;
+            font-style: italic;
+        }
+
+        @keyframes fadeIn {
+            from {
+                opacity: 0;
+                transform: translateY(10px);
+            }
+
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+    </style>
+</head>
+
+<body>
+    <div class="app-container" style="max-width: 1000px;">
+        <header>
+            <div class="logo">🔒 Admin Dashboard</div>
+            <a href="/" class="admin-link">Back to Counter</a>
+        </header>
+
+        <main class="admin-grid">
+            <!-- Stats -->
+            <div class="stat-card">
+                <h1 id="admin-count">...</h1>
+                <p class="label">Total Clicks</p>
+            </div>
+
+            <!-- Logs -->
+            <div class="recent-activity">
+                <div class="activity-header">Recent Activity</div>
+                <div id="logs-container">
+                    <p style="text-align: center; color: #999;">Waiting for data...</p>
+                </div>
+            </div>
+        </main>
+    </div>
+
+    <script src="/socket.io/socket.io.js"></script>
+    <script>
+        const socket = io();
+        const logsContainer = document.getElementById('logs-container');
+        const adminCount = document.getElementById('admin-count');
+
+        socket.on('connect', () => {
+            socket.emit('join_admin');
+        });
+
+        socket.on('update', (data) => {
+            adminCount.innerText = data.count;
+        });
+
+        socket.on('admin_data', (data) => {
+            renderLogs(data.logs);
+        });
+
+        socket.on('new_log', (log) => {
+            prependLog(log);
+        });
+
+        function renderLogs(logs) {
+            logsContainer.innerHTML = '';
+            logs.forEach(log => {
+                logsContainer.appendChild(createLogElement(log));
+            });
+        }
+
+        function prependLog(log) {
+            const firstChild = logsContainer.firstChild;
+            const logEl = createLogElement(log);
+            if (logsContainer.children.length === 0 || logsContainer.innerHTML.includes('Waiting')) {
+                logsContainer.innerHTML = '';
+                logsContainer.appendChild(logEl);
+            } else {
+                logsContainer.insertBefore(logEl, logsContainer.firstChild);
+            }
+        }
+
+        function createLogElement(log) {
+            const div = document.createElement('div');
+            div.className = 'log-item';
+
+            const initial = log.name ? log.name.charAt(0).toUpperCase() : '?';
+            const timeAgo = new Date(log.timestamp).toLocaleTimeString();
+
+            div.innerHTML = `
+                <div class="avatar" style="background-color: ${stringToColor(log.name)}20; color: ${stringToColor(log.name)}">${initial}</div>
+                <div class="log-content">
+                    <div>
+                        <span class="log-name">${escapeHtml(log.name)}</span>
+                        <span class="log-time">${timeAgo}</span>
+                    </div>
+                    ${log.quote ? `<div class="log-quote">"${escapeHtml(log.quote)}"</div>` : ''}
+                </div>
+            `;
+            return div;
+        }
+
+        function escapeHtml(text) {
+            if (!text) return "";
+            return text
+                .replace(/&/g, "&amp;")
+                .replace(/</g, "&lt;")
+                .replace(/>/g, "&gt;")
+                .replace(/"/g, "&quot;")
+                .replace(/'/g, "&#039;");
+        }
+
+        function stringToColor(str) {
+            let hash = 0;
+            for (let i = 0; i < str.length; i++) {
+                hash = str.charCodeAt(i) + ((hash << 5) - hash);
+            }
+            const c = (hash & 0x00FFFFFF).toString(16).toUpperCase();
+            return '#' + "00000".substring(0, 6 - c.length) + c;
+        }
+    </script>
+</body>
+
+</html>
--- a/public/client.js
+++ b/public/client.js
@@ -0,0 +1,89 @@
+const socket = io();
+
+// DOM Elements
+const counterDisplay = document.getElementById('counter-display');
+const incrementBtn = document.getElementById('increment-btn');
+const usernameInput = document.getElementById('username');
+const quoteInput = document.getElementById('quote');
+const errorMessage = document.getElementById('error-message');
+const timerDisplay = document.getElementById('timer-display');
+
+// Cookie Helpers
+function setCookie(name, value, days) {
+    const expires = new Date(Date.now() + days * 864e5).toUTCString();
+    document.cookie = name + '=' + encodeURIComponent(value) + '; expires=' + expires + '; path=/';
+}
+
+function getCookie(name) {
+    return document.cookie.split('; ').reduce((r, v) => {
+        const parts = v.split('=');
+        return parts[0] === name ? decodeURIComponent(parts[1]) : r;
+    }, '');
+}
+
+// Load name from cookie
+const savedName = getCookie('username');
+if (savedName) {
+    usernameInput.value = savedName;
+}
+
+// Socket Events
+socket.on('update', (data) => {
+    counterDisplay.innerText = data.count;
+    // Animate
+    counterDisplay.parentElement.classList.remove('pop-anim');
+    void counterDisplay.parentElement.offsetWidth; // trigger reflow
+    counterDisplay.parentElement.classList.add('pop-anim');
+});
+
+socket.on('error', (msg) => {
+    showError(msg);
+});
+
+// Logic
+usernameInput.addEventListener('input', (e) => {
+    setCookie('username', e.target.value, 365);
+});
+
+incrementBtn.addEventListener('click', () => {
+    const name = usernameInput.value.trim();
+    if (!name) {
+        showError("Please enter your name!");
+        usernameInput.focus();
+        return;
+    }
+
+    const quote = quoteInput.value.trim();
+
+    // Optimistic disable
+    startCooldown();
+
+    socket.emit('increment', { name, quote });
+});
+
+function showError(msg) {
+    errorMessage.innerText = msg;
+    errorMessage.classList.remove('hidden');
+    setTimeout(() => {
+        errorMessage.classList.add('hidden');
+    }, 3000);
+}
+
+let cooldownInterval;
+function startCooldown() {
+    incrementBtn.disabled = true;
+    let secondsLeft = 30;
+    timerDisplay.classList.remove('hidden');
+    timerDisplay.innerText = `Wait ${secondsLeft}s`;
+
+    clearInterval(cooldownInterval);
+    cooldownInterval = setInterval(() => {
+        secondsLeft--;
+        timerDisplay.innerText = `Wait ${secondsLeft}s`;
+        if (secondsLeft <= 0) {
+            clearInterval(cooldownInterval);
+            incrementBtn.disabled = false;
+            timerDisplay.classList.add('hidden');
+        }
+    }, 1000);
+}
--- a/public/index.html
+++ b/public/index.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Global Counter</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;500;700&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <div class="app-container">
+        <header>
+            <div class="logo">✨ Global Counter</div>
+            <a href="/admin.html" class="admin-link">Admin Dashboard</a>
+        </header>
+
+        <main>
+            <div class="counter-cardglass">
+                <h1 id="counter-display">Loading...</h1>
+                <p class="label">Total Global Clicks</p>
+            </div>
+
+            <div class="controls-container">
+                <div class="input-group">
+                    <label for="username">Your Name</label>
+                    <input type="text" id="username" placeholder="Enter your name..." autocomplete="off">
+                </div>
+
+                <div class="input-group">
+                    <label for="quote">Leave a Quote (Optional)</label>
+                    <input type="text" id="quote" placeholder="Say something..." autocomplete="off">
+                </div>
+
+                <button id="increment-btn" class="primary-btn">
+                    <span class="btn-text">+1 Increment</span>
+                    <span class="btn-shine"></span>
+                </button>
+                <div id="error-message" class="error-toast hidden"></div>
+                <div id="timer-display" class="timer hidden">Wait 30s</div>
+            </div>
+        </main>
+    </div>
+
+    <script src="/socket.io/socket.io.js"></script>
+    <script src="client.js"></script>
+</body>
+</html>
--- a/public/style.css
+++ b/public/style.css
@@ -0,0 +1,192 @@
+:root {
+    --primary: #FF6B6B;
+    --primary-hover: #FF5252;
+    --bg-color: #F0F2F5;
+    --text-color: #2D3436;
+    --glass-bg: rgba(255, 255, 255, 0.7);
+    --glass-border: rgba(255, 255, 255, 0.5);
+    --shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
+    --input-bg: #FFFFFF;
+}
+
+* {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+}
+
+body {
+    font-family: 'Outfit', sans-serif;
+    background-color: var(--bg-color);
+    color: var(--text-color);
+    min-height: 100vh;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    overflow-x: hidden;
+    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+}
+
+.app-container {
+    width: 100%;
+    max-width: 480px;
+    padding: 2rem;
+    display: flex;
+    flex-direction: column;
+    gap: 2rem;
+}
+
+header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.logo {
+    font-weight: 700;
+    font-size: 1.2rem;
+    color: var(--text-color);
+}
+
+.admin-link {
+    text-decoration: none;
+    color: #636e72;
+    font-size: 0.9rem;
+    transition: color 0.3s;
+}
+
+.admin-link:hover {
+    color: var(--primary);
+}
+
+.counter-cardglass {
+    background: var(--glass-bg);
+    backdrop-filter: blur( 12px );
+    -webkit-backdrop-filter: blur( 12px );
+    border-radius: 24px;
+    border: 1px solid var(--glass-border);
+    padding: 3rem 2rem;
+    text-align: center;
+    box-shadow: var(--shadow);
+    transition: transform 0.2s;
+}
+
+.counter-cardglass:hover {
+    transform: translateY(-5px);
+}
+
+#counter-display {
+    font-size: 5rem;
+    font-weight: 700;
+    color: var(--primary);
+    line-height: 1;
+    margin-bottom: 0.5rem;
+    font-feature-settings: "tnum";
+    font-variant-numeric: tabular-nums;
+}
+
+.label {
+    text-transform: uppercase;
+    letter-spacing: 2px;
+    font-size: 0.8rem;
+    color: #636e72;
+}
+
+.controls-container {
+    background: var(--glass-bg);
+    padding: 2rem;
+    border-radius: 24px;
+    box-shadow: var(--shadow);
+    display: flex;
+    flex-direction: column;
+    gap: 1.2rem;
+}
+
+.input-group {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+}
+
+.input-group label {
+    font-size: 0.9rem;
+    font-weight: 500;
+    margin-left: 0.5rem;
+}
+
+input {
+    padding: 1rem;
+    border-radius: 12px;
+    border: 2px solid transparent;
+    background: var(--input-bg);
+    font-family: inherit;
+    font-size: 1rem;
+    transition: all 0.3s;
+    outline: none;
+}
+
+input:focus {
+    border-color: var(--primary);
+    box-shadow: 0 0 0 4px rgba(255, 107, 107, 0.1);
+}
+
+.primary-btn {
+    position: relative;
+    background: var(--primary);
+    color: white;
+    border: none;
+    padding: 1.2rem;
+    border-radius: 16px;
+    font-size: 1.2rem;
+    font-weight: 700;
+    cursor: pointer;
+    overflow: hidden;
+    transition: all 0.2s;
+    margin-top: 0.5rem;
+}
+
+.primary-btn:hover {
+    background: var(--primary-hover);
+    transform: scale(1.02);
+    box-shadow: 0 10px 20px rgba(255, 107, 107, 0.3);
+}
+
+.primary-btn:active {
+    transform: scale(0.98);
+}
+
+.primary-btn:disabled {
+    background: #bdc3c7;
+    cursor: not-allowed;
+    transform: none;
+    box-shadow: none;
+}
+
+.error-toast {
+    color: #e74c3c;
+    font-size: 0.9rem;
+    text-align: center;
+    min-height: 1.2rem;
+}
+
+.hidden {
+    opacity: 0;
+    visibility: hidden;
+}
+
+.timer {
+    text-align: center;
+    color: #636e72;
+    font-weight: 500;
+}
+
+/* Animations */
+@keyframes pop {
+    0% { transform: scale(1); }
+    50% { transform: scale(1.1); }
+    100% { transform: scale(1); }
+}
+
+.pop-anim {
+    animation: pop 0.15s ease-out;
+}