[#11 ] WebSocket reconnection with exponential backoff + offline vote queue

- Exponential backoff: 1s → 2s → 4s → … → 30s max - Full-screen overlay when disconnected (spinner + message) - Votes cast offline are queued and replayed on reconnect - Deduplicated queue: same voter+option only queued once - ✓ Reconnected toast on successful reconnect
[#6 ] Add admin panel at /admin
2026-04-28 21:43:58 -07:00 · 2026-04-28 21:42:41 -07:00 · 2026-04-28 21:40:54 -07:00
3 changed files with 609 additions and 14 deletions
--- a/public/admin.html
+++ b/public/admin.html
@@ -0,0 +1,372 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Cabo Voting — Admin</title>
+  <style>
+    :root {
+      --bg: #0b0d14;
+      --surface: #13161f;
+      --surface2: #1a1e2a;
+      --border: #252a38;
+      --accent: #00d4ff;
+      --text: #e0e6f0;
+      --text-muted: #7a8499;
+      --green: #34d399;
+      --red: #f87171;
+      --amber: #fbbf24;
+    }
+    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+    body { font-family: 'Segoe UI', system-ui, sans-serif; background: var(--bg); color: var(--text); min-height: 100vh; padding: 20px; }
+    a { color: var(--accent); }
+    h1 { font-size: 1.3rem; color: var(--accent); margin-bottom: 6px; }
+    h2 { font-size: 1rem; color: var(--text-muted); margin-bottom: 16px; font-weight: 500; }
+
+    .container { max-width: 900px; margin: 0 auto; }
+
+    /* Password gate */
+    #passwordGate {
+      position: fixed; inset: 0; background: var(--bg);
+      display: flex; align-items: center; justify-content: center; z-index: 1000;
+    }
+    #passwordGate.hidden { display: none; }
+    #passwordGate .box {
+      background: var(--surface); border: 1px solid var(--border);
+      border-radius: 16px; padding: 32px; width: 320px; text-align: center;
+      box-shadow: 0 20px 60px rgba(0,0,0,0.5);
+    }
+    #passwordGate .box h2 { font-size: 1.2rem; color: var(--accent); margin-bottom: 8px; }
+    #passwordGate .box p { color: var(--text-muted); font-size: 0.8rem; margin-bottom: 20px; }
+    #passwordGate input {
+      width: 100%; padding: 10px 14px; background: var(--surface2);
+      border: 1px solid var(--border); border-radius: 8px; color: var(--text);
+      font-size: 1rem; outline: none; margin-bottom: 12px; text-align: center;
+    }
+    #passwordGate input:focus { border-color: var(--accent); }
+    #passwordGate button {
+      width: 100%; padding: 10px; background: var(--accent); color: var(--bg);
+      border: none; border-radius: 8px; font-size: 0.9rem; font-weight: 700;
+      cursor: pointer;
+    }
+    #passwordGate button:hover { opacity: 0.85; }
+    #passwordGate .error { color: var(--red); font-size: 0.78rem; margin-top: 8px; }
+
+    /* Header */
+    .header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; flex-wrap: wrap; gap: 12px; }
+    .header-links { display: flex; gap: 12px; font-size: 0.8rem; }
+    .header-links a { color: var(--text-muted); }
+    .header-links a:hover { color: var(--text); }
+
+    /* Stat cards */
+    .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; margin-bottom: 24px; }
+    .stat-card {
+      background: var(--surface); border: 1px solid var(--border);
+      border-radius: 12px; padding: 14px 16px; text-align: center;
+    }
+    .stat-card .val { font-size: 1.8rem; font-weight: 700; color: var(--accent); }
+    .stat-card .label { font-size: 0.7rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; margin-top: 4px; }
+
+    /* Polls toggle */
+    .polls-toggle {
+      display: flex; align-items: center; justify-content: space-between;
+      background: var(--surface); border: 1px solid var(--border);
+      border-radius: 12px; padding: 16px 20px; margin-bottom: 24px;
+    }
+    .polls-toggle .label { font-size: 0.85rem; font-weight: 600; }
+    .polls-toggle .sub { font-size: 0.72rem; color: var(--text-muted); margin-top: 2px; }
+    .btn-toggle {
+      padding: 8px 20px; border: none; border-radius: 8px;
+      font-size: 0.82rem; font-weight: 700; cursor: pointer; transition: opacity 0.2s;
+    }
+    .btn-toggle:hover { opacity: 0.85; }
+    .btn-toggle.open { background: var(--red); color: #fff; }
+    .btn-toggle.closed { background: var(--green); color: #000; }
+
+    /* Sections */
+    .section { margin-bottom: 32px; }
+    .section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
+    .section-title { font-size: 0.85rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; }
+    .badge {
+      background: var(--surface2); border-radius: 10px; padding: 2px 8px;
+      font-size: 0.65rem; color: var(--text-muted);
+    }
+    .badge.pending { background: rgba(251,191,36,0.15); color: var(--amber); }
+
+    /* Option rows */
+    .option-list { display: flex; flex-direction: column; gap: 8px; }
+    .option-row {
+      background: var(--surface); border: 1px solid var(--border);
+      border-radius: 10px; padding: 12px 14px;
+      display: flex; align-items: center; gap: 12px;
+    }
+    .option-row.pending { border-color: rgba(251,191,36,0.4); }
+    .option-row .cat-tag {
+      font-size: 0.65rem; padding: 2px 7px; border-radius: 4px;
+      background: var(--surface2); color: var(--text-muted); flex-shrink: 0;
+    }
+    .option-row .name { flex: 1; font-size: 0.85rem; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+    .option-row .meta { font-size: 0.7rem; color: var(--text-muted); flex-shrink: 0; }
+    .option-row .votes-badge {
+      background: rgba(0,212,255,0.1); color: var(--accent);
+      border-radius: 6px; padding: 2px 8px; font-size: 0.7rem; font-weight: 700; flex-shrink: 0;
+    }
+    .btn {
+      padding: 6px 14px; border: none; border-radius: 6px;
+      font-size: 0.75rem; font-weight: 700; cursor: pointer; flex-shrink: 0; transition: opacity 0.2s;
+    }
+    .btn:hover { opacity: 0.85; }
+    .btn-approve { background: var(--green); color: #000; }
+    .btn-reject { background: var(--red); color: #fff; }
+    .btn-delete { background: transparent; border: 1px solid var(--border); color: var(--text-muted); }
+    .btn-delete:hover { border-color: var(--red); color: var(--red); }
+    .btn-row { display: flex; gap: 6px; flex-shrink: 0; }
+
+    /* Toast */
+    .toast {
+      position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(80px);
+      background: var(--surface2); border: 1px solid var(--border);
+      border-radius: 10px; padding: 10px 20px; font-size: 0.82rem; z-index: 500;
+      transition: transform 0.3s; color: var(--text);
+    }
+    .toast.show { transform: translateX(-50%) translateY(0); }
+    .toast.success { border-color: var(--green); color: var(--green); }
+    .toast.error { border-color: var(--red); color: var(--red); }
+
+    /* Loading */
+    .loading { text-align: center; padding: 40px; color: var(--text-muted); font-size: 0.85rem; }
+
+    /* Responsive */
+    @media (max-width: 600px) {
+      .option-row { flex-wrap: wrap; }
+      .btn-row { width: 100%; justify-content: flex-end; }
+    }
+  </style>
+</head>
+<body>
+
+<!-- Password Gate -->
+<div id="passwordGate">
+  <div class="box">
+    <h2>🔐 Admin Access</h2>
+    <p>Enter the admin password to manage the voting app.</p>
+    <input type="password" id="pwdInput" placeholder="Password" onkeydown="if(event.key==='Enter')tryLogin()" />
+    <button onclick="tryLogin()">Unlock →</button>
+    <div class="error" id="pwdError"></div>
+  </div>
+</div>
+
+<div class="container" id="adminPanel" style="display:none">
+  <div class="header">
+    <div>
+      <h1>🏄 Cabo Voting — Admin</h1>
+      <h2 id="appStatus">Connecting…</h2>
+    </div>
+    <div class="header-links">
+      <a href="/">← Back to Voting</a>
+      <a href="/?view=results" target="_blank">View Results ↗</a>
+    </div>
+  </div>
+
+  <!-- Stats -->
+  <div class="stats">
+    <div class="stat-card"><div class="val" id="statVoters">—</div><div class="label">Voters</div></div>
+    <div class="stat-card"><div class="val" id="statOptions">—</div><div class="label">Options</div></div>
+    <div class="stat-card"><div class="val" id="statVotes">—</div><div class="label">Total Votes</div></div>
+    <div class="stat-card"><div class="val" id="statPending">—</div><div class="label">Pending</div></div>
+  </div>
+
+  <!-- Polls Toggle -->
+  <div class="polls-toggle">
+    <div>
+      <div class="label" id="pollsLabel">Polls: OPEN</div>
+      <div class="sub">Click to toggle open/closed state</div>
+    </div>
+    <button class="btn-toggle open" id="pollsBtn" onclick="togglePolls()">Close Polls</button>
+  </div>
+
+  <!-- Pending Options -->
+  <div class="section">
+    <div class="section-header">
+      <span class="section-title">⏳ Pending Approvals</span>
+      <span class="badge pending" id="pendingBadge">0</span>
+    </div>
+    <div class="option-list" id="pendingList"><div class="loading">Loading…</div></div>
+  </div>
+
+  <!-- All Options -->
+  <div class="section">
+    <div class="section-header">
+      <span class="section-title">📋 All Options</span>
+      <span class="badge" id="allBadge">0</span>
+    </div>
+    <div class="option-list" id="allList"><div class="loading">Loading…</div></div>
+  </div>
+</div>
+
+<div class="toast" id="toast"></div>
+
+<script>
+const API = '';
+const PWD_KEY = 'cabo_admin_pwd';
+const CORRECT_PWD = 'cabo2026';
+let allData = null;
+
+function toast(msg, type='') {
+  const t = document.getElementById('toast');
+  t.textContent = msg;
+  t.className = 'toast' + (type ? ' ' + type : '');
+  t.classList.add('show');
+  setTimeout(() => t.classList.remove('show'), 3000);
+}
+
+function tryLogin() {
+  const pwd = document.getElementById('pwdInput').value;
+  const err = document.getElementById('pwdError');
+  if (pwd === CORRECT_PWD) {
+    sessionStorage.setItem(PWD_KEY, pwd);
+    document.getElementById('passwordGate').classList.add('hidden');
+    document.getElementById('adminPanel').style.display = 'block';
+    loadData();
+  } else {
+    err.textContent = 'Incorrect password — try "cabo2026"';
+  }
+}
+
+async function loadData() {
+  try {
+    const [cats, opts] = await Promise.all([
+      fetch(API + '/api/categories').then(r => r.json()),
+      fetch(API + '/api/options?includeUnapproved=true').then(r => r.json()),
+    ]);
+    allData = { categories: cats, options: opts };
+    renderStats();
+    renderPending();
+    renderAll();
+    document.getElementById('appStatus').textContent = 'Connected';
+  } catch(e) {
+    document.getElementById('appStatus').textContent = 'Connection error — is the server running?';
+  }
+}
+
+function renderStats() {
+  const voters = new Set();
+  let totalVotes = 0;
+  let pending = 0;
+  allData.options.forEach(o => {
+    if (!o.approved) { pending++; return; }
+    o.votes.forEach(v => voters.add(v.name));
+    totalVotes += o.votes.length;
+  });
+  document.getElementById('statVoters').textContent = voters.size;
+  document.getElementById('statOptions').textContent = allData.options.length - pending;
+  document.getElementById('statVotes').textContent = totalVotes;
+  document.getElementById('statPending').textContent = pending;
+}
+
+function renderPending() {
+  const pending = allData.options.filter(o => !o.approved);
+  const list = document.getElementById('pendingList');
+  document.getElementById('pendingBadge').textContent = pending.length;
+  if (pending.length === 0) {
+    list.innerHTML = '<div style="text-align:center;padding:20px;color:var(--text-muted);font-size:0.8rem">No pending options ✓</div>';
+    return;
+  }
+  list.innerHTML = pending.map(o => `
+    <div class="option-row pending">
+      <span class="cat-tag">${o.categoryId}</span>
+      <div class="name">${o.name}</div>
+      <div class="meta">by ${o.addedBy || 'unknown'}</div>
+      <div class="btn-row">
+        <button class="btn btn-approve" onclick="approve('${o.id}')">✓ Approve</button>
+        <button class="btn btn-reject" onclick="reject('${o.id}')">✕ Reject</button>
+      </div>
+    </div>
+  `).join('');
+}
+
+function renderAll() {
+  const approved = allData.options.filter(o => o.approved);
+  document.getElementById('allBadge').textContent = approved.length;
+  document.getElementById('allList').innerHTML = approved.map(o => `
+    <div class="option-row">
+      <span class="cat-tag">${o.categoryId}</span>
+      <div class="name">${o.name}</div>
+      <div class="votes-badge">${o.votes.length} vote${o.votes.length !== 1 ? 's' : ''}</div>
+      <div class="meta">${o.addedBy !== 'system' ? 'by ' + o.addedBy : 'system'}</div>
+      <div class="btn-row">
+        <button class="btn btn-delete" onclick="deleteOption('${o.id}')" title="Delete option">🗑</button>
+      </div>
+    </div>
+  `).join('');
+}
+
+async function togglePolls() {
+  try {
+    // Get current state first
+    const res = await fetch(API + '/api/results');
+    const data = await res.json();
+    const newState = !data.pollsOpen;
+    await fetch(API + '/api/polls', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ open: newState })
+    });
+    updatePollsUI(newState);
+    toast(newState ? 'Polls are now OPEN' : 'Polls are now CLOSED', 'success');
+  } catch(e) {
+    toast('Failed to toggle polls', 'error');
+  }
+}
+
+async function loadPollsState() {
+  try {
+    const res = await fetch(API + '/api/results');
+    const data = await res.json();
+    updatePollsUI(data.pollsOpen);
+  } catch(e) {}
+}
+
+function updatePollsUI(open) {
+  document.getElementById('pollsLabel').textContent = 'Polls: ' + (open ? 'OPEN' : 'CLOSED');
+  const btn = document.getElementById('pollsBtn');
+  btn.textContent = open ? 'Close Polls' : 'Open Polls';
+  btn.className = 'btn-toggle ' + (open ? 'open' : 'closed');
+}
+
+async function approve(id) {
+  try {
+    await fetch(API + '/api/options/' + id + '/approve', { method: 'POST' });
+    toast('Option approved!', 'success');
+    await loadData();
+  } catch(e) { toast('Failed to approve', 'error'); }
+}
+
+async function reject(id) {
+  if (!confirm('Remove this option permanently?')) return;
+  try {
+    await fetch(API + '/api/options/' + id, { method: 'DELETE' });
+    toast('Option removed', 'success');
+    await loadData();
+  } catch(e) { toast('Failed to remove option', 'error'); }
+}
+
+async function deleteOption(id) {
+  if (!confirm('Delete this option permanently?')) return;
+  try {
+    await fetch(API + '/api/options/' + id, { method: 'DELETE' });
+    toast('Option deleted', 'success');
+    await loadData();
+  } catch(e) { toast('Failed to delete', 'error'); }
+}
+
+// Check session password on load
+if (sessionStorage.getItem(PWD_KEY) === CORRECT_PWD) {
+  document.getElementById('passwordGate').classList.add('hidden');
+  document.getElementById('adminPanel').style.display = 'block';
+  loadData();
+}
+loadPollsState();
+</script>
+</body>
+</html>
--- a/public/index.html
+++ b/public/index.html
@@ -400,6 +400,86 @@
      opacity: 0.7;
    }

+    /* ── Results Leaderboard ───────────────────────────────── */
+    .results-header {
+      text-align: center;
+      margin-bottom: 16px;
+    }
+    .results-header h2 { font-size: 1.1rem; color: var(--accent); margin-bottom: 4px; }
+    .results-header p { font-size: 0.75rem; color: var(--text-muted); }
+    .results-category {
+      margin-bottom: 20px;
+      background: var(--surface);
+      border: 1px solid var(--border);
+      border-radius: 12px;
+      padding: 12px 14px;
+    }
+    .results-category-header {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      margin-bottom: 10px;
+      font-size: 0.8rem;
+      font-weight: 700;
+      color: var(--text-muted);
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+    }
+    .results-row {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      padding: 7px 0;
+      border-bottom: 1px solid var(--border);
+    }
+    .results-row:last-child { border-bottom: none; }
+    .results-rank {
+      font-size: 0.85rem;
+      font-weight: 700;
+      width: 28px;
+      text-align: center;
+      flex-shrink: 0;
+    }
+    .results-rank.gold { color: #ffd700; }
+    .results-rank.silver { color: #c0c0c0; }
+    .results-rank.bronze { color: #cd7f32; }
+    .results-name {
+      flex: 1;
+      font-size: 0.82rem;
+      color: var(--text);
+      min-width: 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    .results-name.winner {
+      color: var(--accent);
+      font-weight: 700;
+    }
+    .results-votes {
+      font-size: 0.75rem;
+      color: var(--text-muted);
+      flex-shrink: 0;
+    }
+    .results-bar-bg {
+      flex: 2;
+      height: 4px;
+      background: var(--surface2);
+      border-radius: 2px;
+      overflow: hidden;
+    }
+    .results-bar-fill {
+      height: 100%;
+      border-radius: 2px;
+      transition: width 0.6s cubic-bezier(0.4,0,0.2,1);
+    }
+    .results-share {
+      text-align: center;
+      margin-top: 16px;
+      font-size: 0.72rem;
+      color: var(--text-muted);
+    }
+
    /* ── Toast ──────────────────────────────────────────────── */
    .toast {
      position: fixed;
@@ -548,6 +628,30 @@

    /* Touch highlight */
    .option-card { -webkit-tap-highlight-color: rgba(0,212,255,0.12); }
+
+    /* ── Connection overlay ─────────────────────────────────── */
+    #wsOverlay {
+      display: none;
+      position: fixed;
+      inset: 0;
+      background: rgba(11,13,20,0.92);
+      z-index: 900;
+      align-items: center;
+      justify-content: center;
+      flex-direction: column;
+      gap: 14px;
+    }
+    #wsOverlay.show { display: flex; }
+    #wsOverlay .spinner {
+      width: 40px; height: 40px;
+      border: 3px solid var(--border);
+      border-top-color: var(--accent);
+      border-radius: 50%;
+      animation: spin 0.8s linear infinite;
+    }
+    @keyframes spin { to { transform: rotate(360deg); } }
+    #wsOverlay p { color: var(--text-muted); font-size: 0.85rem; text-align: center; }
+    #wsOverlay .sub { font-size: 0.72rem; color: var(--text-muted); opacity: 0.6; margin-top: -8px; }
  </style>
 </head>
 <body>
@@ -611,6 +715,13 @@
  </div>
 </main>

+<!-- Connection lost overlay -->
+<div id="wsOverlay">
+  <div class="spinner"></div>
+  <p>Connection lost</p>
+  <div class="sub">Attempting to reconnect…</div>
+</div>
+
 <!-- Toast -->
 <div class="toast" id="toast"></div>

@@ -629,17 +740,32 @@

  // ── Init ───────────────────────────────────────────────────
  function init() {
+    // Check for ?view=results URL param — skip name modal, go to results
+    const params = new URLSearchParams(location.search);
+    const viewResults = params.get('view') === 'results';
+
    if (state.voterName) {
      applyVoterName(state.voterName);
    }
+
+    // If view=results, skip name modal and go to results tab
+    if (viewResults) {
+      activeTab = 'results';
+      document.getElementById('nameModal').classList.add('hidden');
+    }
+
    connectWS();
    renderTabs();
-    document.getElementById('voterNameInput').addEventListener('keydown', e => {
-      if (e.key === 'Enter') submitName();
-    });
-    document.getElementById('voterNameInput').focus();
+    render();

-    // Number keys 1-5 to switch tabs
+    if (!viewResults) {
+      document.getElementById('voterNameInput').addEventListener('keydown', e => {
+        if (e.key === 'Enter') submitName();
+      });
+      document.getElementById('voterNameInput').focus();
+    }
+
+    // Number keys 1-6 to switch tabs
    document.addEventListener('keydown', e => {
      if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') return;
      const num = parseInt(e.key);
@@ -650,7 +776,14 @@
  }

  // ── WebSocket ──────────────────────────────────────────────
+  const RECONNECT_BASE = 1000;   // 1s initial
+  const RECONNECT_MAX  = 30000;  // 30s cap
+  let reconnectDelay = RECONNECT_BASE;
+  let reconnectTimer = null;
+  let offlineVoteQueue = [];  // votes cast while disconnected
+
  function connectWS() {
+    if (ws) { ws.onclose = ws.onerror = null; ws.close(); }
    const protocol = location.protocol === 'https:' ? 'wss:' : 'ws:';
    const wsUrl = `${protocol}//${location.host}`;
    ws = new WebSocket(wsUrl);
@@ -659,6 +792,17 @@
      state.wsConnected = true;
      updateWsStatus('Connected');
      document.getElementById('wsDot').classList.remove('offline');
+      document.getElementById('wsOverlay').classList.remove('show');
+      reconnectDelay = RECONNECT_BASE; // reset backoff
+
+      // Replay queued votes
+      if (offlineVoteQueue.length > 0) {
+        const queue = [...offlineVoteQueue];
+        offlineVoteQueue = [];
+        queue.forEach(msg => wsSend(msg));
+      }
+
+      showToast('✓ Reconnected', 'success');
    };

    ws.onmessage = (event) => {
@@ -673,10 +817,7 @@
      } else if (msg.type === 'vote_update') {
        msg.results.forEach(r => {
          const opt = state.options.find(o => o.id === r.id);
-          if (opt) {
-            opt.votes = r.votes;
-            opt.voters = r.voters;
-          }
+          if (opt) { opt.votes = r.votes; opt.voters = r.voters; }
        });
        render();
      } else if (msg.type === 'option_added' || msg.type === 'option_approved') {
@@ -685,6 +826,10 @@
          renderTabs();
          render();
        }
+      } else if (msg.type === 'option_deleted') {
+        state.options = state.options.filter(o => o.id !== msg.id);
+        renderTabs();
+        render();
      } else if (msg.type === 'polls_status') {
        state.pollsOpen = msg.open;
        updatePollsBadge();
@@ -695,12 +840,25 @@
      state.wsConnected = false;
      updateWsStatus('Reconnecting…');
      document.getElementById('wsDot').classList.add('offline');
-      setTimeout(connectWS, 3000);
+      document.getElementById('wsOverlay').classList.add('show');
+      clearTimeout(reconnectTimer);
+      reconnectTimer = setTimeout(() => {
+        reconnectDelay = Math.min(reconnectDelay * 2, RECONNECT_MAX);
+        connectWS();
+      }, reconnectDelay);
    };
  }

  function wsSend(obj) {
-    if (ws && ws.readyState === WebSocket.OPEN) ws.send(JSON.stringify(obj));
+    if (ws && ws.readyState === WebSocket.OPEN) {
+      ws.send(JSON.stringify(obj));
+    } else {
+      // Queue vote if offline
+      if (obj.type === 'vote' && !offlineVoteQueue.find(m =>
+        m.type === 'vote' && m.optionId === obj.optionId && m.voterName === obj.voterName)) {
+        offlineVoteQueue.push(obj);
+      }
+    }
  }

  function updateWsStatus(text) {
@@ -749,7 +907,7 @@
           onkeydown="handleTabKey(event, '${cat.id}')">
        <span class="tab-emoji">${cat.emoji}</span>
        ${cat.name}
-        <span class="tab-count" id="tab-count-${cat.id}">${state.options.filter(o => o.categoryId === cat.id).length}</span>
+        <span class="tab-count" id="tab-count-${cat.id}">${cat.id === 'results' ? '' : state.options.filter(o => o.categoryId === cat.id).length}</span>
      </div>
    `).join('');
    bar.setAttribute('role', 'tablist');
@@ -782,7 +940,54 @@
  // ── Render options ────────────────────────────────────────
  function render() {
    const list = document.getElementById('optionsList');
-    const opts = state.options.filter(o => o.categoryId === activeTab);
+
+    // ── Results tab ──────────────────────────────────────────
+    if (activeTab === 'results') {
+      const votingCats = state.categories.filter(c => c.id !== 'results');
+      const totalVotes = state.options.reduce((sum, o) => sum + o.votes.length, 0);
+      const statusText = state.pollsOpen
+        ? `🏈 ${state.totalVoters} voter${state.totalVoters !== 1 ? 's' : ''} · ${totalVotes} total votes · Polls OPEN`
+        : `🏆 ${state.totalVoters} voter${state.totalVoters !== 1 ? 's' : ''} · ${totalVotes} total votes · Polls CLOSED`;
+
+      list.innerHTML = `
+        <div class="results-header">
+          <h2>🏆 Final Results</h2>
+          <p>${statusText}</p>
+        </div>
+        ${votingCats.map(cat => {
+          const catOpts = state.options.filter(o => o.categoryId === cat.id && o.approved);
+          const sorted = [...catOpts].sort((a, b) => b.votes.length - a.votes.length);
+          const maxVotes = sorted[0]?.votes.length || 1;
+          if (sorted.length === 0) return '';
+          return `
+          <div class="results-category">
+            <div class="results-category-header">${cat.emoji} ${cat.name}</div>
+            ${sorted.map((opt, i) => {
+              const pct = maxVotes > 0 ? (opt.votes.length / maxVotes * 100) : 0;
+              const rank = i + 1;
+              const medal = rank === 1 ? '🥇' : rank === 2 ? '🥈' : rank === 3 ? '🥉' : rank;
+              const medalClass = rank === 1 ? 'gold' : rank === 2 ? 'silver' : rank === 3 ? 'bronze' : '';
+              const winner = rank === 1 ? 'winner' : '';
+              const barColor = cat.id === 'hotel' ? 'var(--hotel)' : cat.id === 'golf' ? 'var(--golf)' : cat.id === 'nightlife' ? 'var(--nightlife)' : cat.id === 'excursion' ? 'var(--excursion)' : 'var(--itinerary)';
+              return `
+              <div class="results-row">
+                <div class="results-rank ${medalClass}">${medal}</div>
+                <div class="results-name ${winner}">${opt.name}</div>
+                <div class="results-votes">${opt.votes.length}</div>
+                <div class="results-bar-bg">
+                  <div class="results-bar-fill" style="width:${pct}%; background:${barColor}"></div>
+                </div>
+              </div>`;
+            }).join('')}
+          </div>`;
+        }).join('')}
+        <div class="results-share">Share this URL to show live results without voting</div>
+      `;
+      return;
+    }
+
+    // ── Regular voting tabs ─────────────────────────────────
+    const opts = state.options.filter(o => o.categoryId === activeTab && o.approved);

    document.getElementById('totalVotersCount').textContent =
      state.totalVoters ? `👥 ${state.totalVoters} voter${state.totalVoters !== 1 ? 's' : ''}` : '';
@@ -824,6 +1029,7 @@

  // ── Voting ────────────────────────────────────────────────
  function toggleVote(optionId) {
+    if (activeTab === 'results') return; // no voting on results tab
    if (!state.voterName) {
      document.getElementById('nameModal').classList.remove('hidden');
      document.getElementById('voterNameInput').focus();
--- a/server.js
+++ b/server.js
@@ -15,6 +15,12 @@ const DATA_FILE = path.join(DATA_DIR, 'votes.json');

 app.use(cors());
 app.use(express.json());
+
+// Admin panel
+app.get('/admin', (req, res) => {
+  res.sendFile(path.join(__dirname, 'public', 'admin.html'));
+});
+
 app.use(express.static(path.join(__dirname, 'public')));

 // ── Data helpers ──────────────────────────────────────────────
@@ -49,7 +55,8 @@ function buildSeedData() {
      { id: 'golf',      name: 'Golf',         emoji: '⛳' },
      { id: 'nightlife', name: 'Nightlife',    emoji: '🎧' },
      { id: 'excursion', name: 'Excursions',  emoji: '🚤' },
-      { id: 'itinerary', name: 'Full Itineraries', emoji: '🗺️' },
+      { id: 'itinerary', name: 'Itineraries', emoji: '🗺️' },
+      { id: 'results',   name: 'Results',     emoji: '🏆' },
    ],
    options: [
      // Hotels
@@ -188,6 +195,16 @@ app.post('/api/options/:id/approve', (req, res) => {
  res.json({ success: true });
 });

+// Delete an option
+app.delete('/api/options/:id', (req, res) => {
+  const idx = data.options.findIndex(o => o.id === req.params.id);
+  if (idx === -1) return res.status(404).json({ error: 'Not found' });
+  data.options.splice(idx, 1);
+  saveData(data);
+  broadcast({ type: 'option_deleted', id: req.params.id });
+  res.json({ success: true });
+});
+
 // Remove vote from an option
 app.delete('/api/vote/:optionId', (req, res) => {
  const { voterName } = req.body;