Add files via upload

ASAservers.html

@@ -6,26 +6,35 @@
     <title>ObliStudios · ASA Servers — Live Status</title>
     <meta name="description" content="Live status for ObliStudios' ARK: Survival Ascended servers." />
     <meta name="theme-color" content="#10e39a" />
+    <meta property="og:title" content="ObliStudios · ASA Servers — Live Status" />
+    <meta property="og:description" content="Real‑time online status, map, players, and ping for every ObliStudios ASA server." />
+    <meta property="og:type" content="website" />
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&family=Cinzel:wght@600;700&display=swap" rel="stylesheet">
 
     <style>
-      body::before {
+        :root {
-          content: "";
+            --bg: #0a0b10;
-          position: fixed;
+            --panel: #111421;
-          inset: 0;
+            --panel-2: #0d1020;
-          background: linear-gradient( rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.5) 30%, rgba(0,0,0,0.3) 60%, rgba(0,0,0,0.6) 100% );
+            --text: #e8eef6;
-          z-index: -1;
+            --muted: #9aa6b2;
+            --line: rgba(255,255,255,.08);
+            --accent: #10e39a;
+            --accent2: #0dc07f;
+            --warn: #f59e0b;
+            --bad: #ff3b3b;
+            --radius: 14px;
+            --shadow: 0 12px 28px rgba(0,0,0,.35);
         }
-      h1, h2, .lead {
+
-          text-shadow: 0 2px 4px rgba(0,0,0,0.6);
+        * {
+            box-sizing: border-box
         }
-    :root{
+
-      --bg:#0a0b10; --panel:#111421; --text:#e8eef6; --muted:#9aa6b2;
+        html, body {
-      --line:rgba(255,255,255,.08); --accent:#10e39a; --accent2:#0dc07f;
+            height: 100%
-      --radius:14px; --shadow:0 12px 28px rgba(0,0,0,.35);
         }
-    *{ box-sizing:border-box }
+
-    html,body{ height:100% }
         body {
             margin: 0;
             font: 16px/1.6 Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
@@ -33,46 +42,296 @@
             background: url('img/BestWCoast.png') no-repeat center center fixed;
             background-size: cover;
         }
-
+            /* Soft vignette */
-    a{ color:inherit; text-decoration:none }
+            body::before {
-    .container{ max-width:1100px; margin:0 auto; padding:0 20px }
+                content: "";
-    header{
+                position: fixed;
-      position:sticky; top:0; z-index:10;
+                inset: 0;
-      backdrop-filter:saturate(180%) blur(8px);
+                background: linear-gradient( rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.55) 30%, rgba(0,0,0,0.38) 60%, rgba(0,0,0,0.62) 100% );
-      background:rgba(10,11,16,.6); border-bottom:1px solid var(--line);
+                z-index: -1;
             }
-    .nav{ height:68px; display:flex; align-items:center; justify-content:space-between }
+
-    .brand{ display:flex; gap:.65rem; align-items:center }
+        a {
-    .brand svg{ width:30px; height:30px; filter: drop-shadow(0 0 10px rgba(16,227,154,.4)) }
+            color: inherit;
-    .wordmark{ font-weight:800; letter-spacing:.2px }
+            text-decoration: none
-    .wordmark em{ color:var(--accent); font-style:normal }
+        }
-    .links{ display:flex; gap:18px; color:var(--muted); font-weight:600 }
+
-    .links a:hover{ color:var(--text) }
+        .container {
+            max-width: 1100px;
+            margin: 0 auto;
+            padding: 0 20px
+        }
+
+        /* Header (harmonized with other pages) */
+        header {
+            position: sticky;
+            top: 0;
+            z-index: 50;
+            backdrop-filter: saturate(180%) blur(8px);
+            background: rgba(10,11,16,.6);
+            border-bottom: 1px solid var(--line);
+        }
+
+        .nav {
+            height: 68px;
+            display: flex;
+            align-items: center;
+            justify-content: space-between
+        }
+
+        .brand {
+            display: flex;
+            gap: .65rem;
+            align-items: center
+        }
+
+            .brand svg {
+                width: 30px;
+                height: 30px;
+                filter: drop-shadow(0 0 10px rgba(16,227,154,.4))
+            }
+
+        .wordmark {
+            font-weight: 800;
+            letter-spacing: .2px
+        }
+
+            .wordmark em {
+                color: var(--accent);
+                font-style: normal
+            }
+
+        .links {
+            display: flex;
+            gap: 18px;
+            color: var(--muted);
+            font-weight: 600
+        }
+
+            .links a:hover {
+                color: var(--text)
+            }
+
+        /* Hero */
+        h1, h2 {
+            font-family: Cinzel, Inter, serif
+        }
+
         .hero {
-          padding: 64px 0 32px;
+            padding: 64px 0 24px;
-      }
+        }
-    h1,h2{ font-family: Cinzel, Inter, serif }
+
-    h1{ margin:.35rem 0 .4rem; line-height:1.15; font-size: clamp(2rem, 1rem + 3vw, 3rem) }
+        h1 {
-    .lead{ color:var(--muted); max-width:70ch }
+            margin: .35rem 0 .4rem;
-      .notice {
+            line-height: 1.15;
-          font-size: 0.9rem;
+            font-size: clamp(2rem, 1rem + 3vw, 3rem)
-          color: #cfd7e0;
+        }
+
+        .lead {
+            color: var(--muted);
+            max-width: 70ch
+        }
+
+        .notice {
+            font-size: .9rem;
+            color: #cfd7e0
+        }
+
+        /* Controls bar */
+        .controls {
+            display: flex;
+            gap: 10px;
+            align-items: center;
+            flex-wrap: wrap;
+            padding: 12px;
+            margin: 8px 0 18px;
+            background: rgba(17,20,33,.75);
+            border: 1px solid rgba(255,255,255,.08);
+            border-radius: 12px;
+            backdrop-filter: blur(6px);
+        }
+
+            .controls input, .controls select, .controls button {
+                background: #0a0c12;
+                color: var(--text);
+                border: 1px solid rgba(255,255,255,.08);
+                border-radius: 10px;
+                padding: .55rem .7rem;
+                font-weight: 600;
+            }
+
+                .controls button.primary {
+                    background: linear-gradient(135deg,var(--accent),var(--accent2));
+                    color: #00140d;
+                    border: none;
+                    box-shadow: 0 8px 22px rgba(16,227,154,.25);
+                }
+
+            .controls .meta {
+                color: var(--muted);
+                font-size: .95rem;
+                margin-left: auto;
+                display: flex;
+                gap: 12px;
+                align-items: center
+            }
+
+        /* Grid & cards */
+        .grid {
+            display: grid;
+            gap: 18px
+        }
+
+        @media (min-width:760px) {
+            .grid {
+                grid-template-columns: 1fr 1fr
+            }
         }
 
-    /* Cards */
-    .grid{ display:grid; gap:18px }
-    @media (min-width:760px){ .grid{ grid-template-columns: 1fr 1fr } }
         .server-card {
             background: rgba(17, 20, 33, 0.85);
             border: 1px solid rgba(255,255,255,0.12);
+            border-radius: var(--radius);
             backdrop-filter: blur(6px);
+            padding: 14px 16px;
+            box-shadow: var(--shadow);
+        }
+
+        .server-head {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            gap: 12px;
+        }
+
+        .pill {
+            display: inline-flex;
+            align-items: center;
+            gap: .4rem;
+            padding: .25rem .6rem;
+            border-radius: 999px;
+            font-weight: 800;
+            font-size: .8rem
+        }
+
+        .up {
+            background: #0dc07f22;
+            border: 1px solid #0dc07f66;
+            color: #b6f0dc
+        }
+
+        .down {
+            background: #ff3b3b22;
+            border: 1px solid #ff3b3b66;
+            color: #ffc9c9
+        }
+
+        .muted {
+            color: var(--muted)
+        }
+
+        .ephemeral {
+            font-size: .9rem;
+            color: var(--muted)
+        }
+
+        .row {
+            display: flex;
+            gap: 12px;
+            align-items: center;
+            flex-wrap: wrap
+        }
+
+        .copy {
+            cursor: pointer;
+            border: 1px solid var(--line);
+            border-radius: 10px;
+            padding: .35rem .55rem;
+            font-weight: 700
+        }
+
+        .kvs {
+            display: grid;
+            grid-template-columns: repeat(3,1fr);
+            gap: 8px 14px;
+            margin-top: .5rem
+        }
+
+        .kv strong {
+            display: block;
+            font-size: .9rem;
+            color: var(--muted)
+        }
+
+        .kv span {
+            font-weight: 800
+        }
+
+        /* Player capacity bar */
+        .bar {
+            height: 8px;
+            border-radius: 999px;
+            background: #0a0c12;
+            border: 1px solid rgba(255,255,255,.08);
+            overflow: hidden
+        }
+
+            .bar > i {
+                display: block;
+                height: 100%;
+                background: linear-gradient(90deg,var(--accent),var(--accent2));
+                width: 0%
+            }
+
+        /* Ping chip */
+        .ping {
+            display: inline-flex;
+            align-items: center;
+            gap: .35rem;
+            font-weight: 800
+        }
+
+        .dot {
+            width: 10px;
+            height: 10px;
+            border-radius: 50%
+        }
+
+        /* Skeletons */
+        .skeleton {
+            position: relative;
+            overflow: hidden;
+            border-radius: var(--radius);
+            background: rgba(255,255,255,.06);
+            height: 110px;
+            border: 1px solid rgba(255,255,255,.08)
+        }
+
+            .skeleton::after {
+                content: "";
+                position: absolute;
+                inset: 0;
+                background: linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent);
+                transform: translateX(-100%);
+                animation: shimmer 1.4s infinite;
+            }
+
+        @keyframes shimmer {
+            100% {
+                transform: translateX(100%)
+            }
+        }
+
+        /* Footer */
+        .footer {
+            padding: 40px 0 64px;
+            color: var(--muted);
+            border-top: 1px solid var(--line)
+        }
+
+        [hidden] {
+            display: none !important
         }
-    .muted{ color:var(--muted) }
-    .pill{ display:inline-block; padding:.2rem .55rem; border-radius:999px; font-weight:800; font-size:.8rem }
-    .up{ background:#0dc07f22; border:1px solid #0dc07f66; color:#b6f0dc }
-    .down{ background:#ff3b3b22; border:1px solid #ff3b3b66; color:#ffc9c9 }
-    .copy{ cursor:pointer; border:1px solid var(--line); border-radius:10px; padding:.35rem .55rem; font-weight:700 }
-    .footer{ padding:40px 0 64px; color:var(--muted); border-top:1px solid var(--line) }
     </style>
 </head>
 <body>
@@ -80,17 +339,21 @@
         <div class="container nav" aria-label="Main">
             <a class="brand" href="/index.html" aria-label="Home">
                 <svg viewBox="0 0 64 64" aria-hidden="true" role="img">
-          <defs><linearGradient id="g" x1="0" y1="0" x2="0" y2="1">
+                    <defs>
-            <stop offset="0%" stop-color="#10e39a"/><stop offset="100%" stop-color="#0dc07f"/>
+                        <linearGradient id="g" x1="0" y1="0" x2="0" y2="1">
-          </linearGradient></defs>
+                            <stop offset="0%" stop-color="#10e39a" />
-          <path fill="url(#g)" d="M32 6c11 0 20 8 20 20s-9 22-20 22S12 38 12 26 21 6 32 6Z"/>
+                            <stop offset="100%" stop-color="#0dc07f" />
-          <ellipse cx="24" cy="28" rx="7" ry="5" fill="#06090f"/><ellipse cx="40" cy="28" rx="7" ry="5" fill="#06090f"/>
+                        </linearGradient>
+                    </defs>
+                    <path fill="url(#g)" d="M32 6c11 0 20 8 20 20s-9 22-20 22S12 38 12 26 21 6 32 6Z" />
+                    <ellipse cx="24" cy="28" rx="7" ry="5" fill="#06090f" />
+                    <ellipse cx="40" cy="28" rx="7" ry="5" fill="#06090f" />
                 </svg>
                 <div class="wordmark">Obli<strong><em>Studios</em></strong></div>
             </a>
             <nav class="links" aria-label="Primary">
-        <a href="https://www.oblistudios.com">Home</a>
                
+                <a aria-current="page" href="https://www.oblistudios.com">Home</a>
             </nav>
         </div>
     </header>
@@ -99,19 +362,48 @@
         <div class="container">
             <h1>ARK: Survival Ascended — Live Server Status</h1>
             <p class="lead">Real‑time online status, map, players, and ping for every ObliStudios ASA server.</p>
-      <div class="notice">
+            <div class="notice">This is unofficial and not affiliated with Studio Wildcard.</div>
-          this is unofficial and not affiliated with Studio Wildcard
-      </div>
         </div>
     </section>
 
-  <main class="container" style="padding:22px 20px 42px">
+    <!-- Controls -->
-    <h2>Cluster Status</h2>
+    <div class="container">
-    <div id="servers" class="grid"></div>
+        <div class="controls" role="region" aria-label="Filters and actions">
+            <input id="q" type="search" placeholder="Search by name or map…" aria-label="Search" />
+            <select id="filter" aria-label="Filter by status">
+                <option value="all">All</option>
+                <option value="online">Online</option>
+                <option value="offline">Offline</option>
+            </select>
+            <select id="sort" aria-label="Sort">
+                <option value="status">Sort: Status</option>
+                <option value="name">Sort: Name A→Z</option>
+                <option value="players">Sort: Players</option>
+                <option value="ping">Sort: Ping</option>
+            </select>
+            <button id="refreshBtn" class="primary" type="button" aria-label="Refresh now">Refresh</button>
+            <div class="meta">
+                <span id="summary" aria-live="polite">—</span>
+                <span id="nextRefresh" class="muted">Next update: —</span>
+            </div>
+        </div>
+    </div>
+
+    <main class="container" style="padding:8px 0 42px">
+        <h2 style="margin:0 0 10px">Cluster Status</h2>
+        <div id="servers" class="grid" aria-live="polite">
+            <!-- Skeletons while first load -->
+            <div class="skeleton"></div><div class="skeleton"></div><div class="skeleton"></div><div class="skeleton"></div>
+            <div class="skeleton"></div><div class="skeleton"></div><div class="skeleton"></div><div class="skeleton"></div>
+        </div>
 
         <div class="notice" style="margin-top:22px">
-        the servers are running on a best-effort basis, 24/7. occasional downtime may occur for maintenance, updates, or unexpected issues. please refer to our <a href="https://discord.gg/Dvkr3cK25U">discord</a> for planned maintenance windows and updates.
+            The servers are running on a best‑effort basis, 24/7. Occasional downtime may occur for maintenance, updates, or unexpected issues.
+            Visit our <h1><a href="https://discord.gg/Dvkr3cK25U">Discord</a></h1> for planned maintenance windows and updates.
         </div>
+
+        <!-- Toast / a11y region for copy feedback -->
+        <div id="toast" class="ephemeral" aria-live="polite" style="margin-top:10px"></div>
     </main>
 
     <footer class="footer">
@@ -124,13 +416,12 @@
         // Year stamp
         document.getElementById('y').textContent = new Date().getFullYear();
 
+        // === CONFIG (same API + servers as your current page) ===
         const API = 'https://status.oblistudios.com/status';
-
-
         const SERVERS = [
             { name: 'The Island (PvP)', host: '10.1.10.64', port: 27015 },
             { name: 'The Center (PvP)', host: '10.1.10.64', port: 27016 },
-      { name: 'Scorched Earth (PvP)',host: '10.1.10.64', port: 27017 },
+            { name: 'Scorched Earth (PvP)', host: '10.1.10.64', port: 27017 },
             { name: 'Aberration (PvP)', host: '10.1.10.64', port: 27018 },
             { name: 'Extinction (PvP)', host: '10.1.10.64', port: 27019 },
             { name: 'Ragnarok (PvP)', host: '10.1.10.64', port: 27020 },
@@ -139,51 +430,181 @@
             { name: 'Server 9', host: '10.1.10.64', port: 27023 }
         ];
 
-    // === RENDER ===
+        // === STATE ===
+        let state = []; // { s, data, fetchedAt }
+        let lastRefresh = 0;
+        let nextTick = 30; // seconds
         const $list = document.getElementById('servers');
+        const $toast = document.getElementById('toast');
+        const $summary = document.getElementById('summary');
+        const $next = document.getElementById('nextRefresh');
 
-    function cardTemplate(s, data){
+        // === HELPERS ===
-      const online = data && data.online;
+        function timeAgo(ts) {
+            if (!ts) return '—';
+            const s = Math.max(0, Math.floor((Date.now() - ts) / 1000));
+            if (s < 5) return 'just now';
+            const units = [['d', 86400], ['h', 3600], ['m', 60], ['s', 1]];
+            for (const [u, v] of units) if (s >= v) return `${Math.floor(s / v)}${u} ago`;
+            return '—';
+        }
+        function pct(a, b) { return (!a || !b) ? 0 : Math.max(0, Math.min(100, Math.round((a / b) * 100))); }
+        function pingDot(p) {
+            let c = '#b6f0dc'; // default
+            if (typeof p === 'number') {
+                if (p <= 60) c = '#20df9b';
+                else if (p <= 120) c = '#f3c969';
+                else c = '#ff6d6d';
+            }
+            return `<span class="dot" style="background:${c}"></span>`;
+        }
+        function clip(txt, msg = 'Copied') {
+            navigator.clipboard.writeText(txt).then(() => {
+                $toast.textContent = `${msg}: ${txt}`;
+                setTimeout(() => { $toast.textContent = ''; }, 1800);
+            }).catch(() => {
+                $toast.textContent = 'Copy failed';
+                setTimeout(() => { $toast.textContent = ''; }, 1800);
+            });
+        }
+
+        // === TEMPLATES ===
+        function cardTemplate(s, data, ts) {
+            const online = !!(data && data.online);
             const pill = online
                 ? '<span class="pill up">Online</span>'
                 : '<span class="pill down">Offline</span>';
 
-      const details = online ? `
+            const map = data?.map || '—';
-        <div><strong>Map:</strong> ${data.map || '—'}</div>
+            const players = Number.isFinite(data?.players) ? data.players : 0;
-        <div><strong>Players:</strong> ${data.players}/${data.maxPlayers ?? '—'}</div>
+            const maxPlayers = Number.isFinite(data?.maxPlayers) ? data.maxPlayers : null;
-        <div><strong>Ping:</strong> ${data.ping ?? '—'} ms</div>
+            const ping = Number.isFinite(data?.ping) ? data.ping : null;
-      ` : `<div class="muted">${(data && data.error) ? data.error : 'No response from query port'}</div>`;
+            const endpoint = `${s.host}:${s.port}`;
 
-      const endpoint = \`\${s.host}:\${s.port}\`;
+            const playerBar = Number.isFinite(maxPlayers) ? `
-      return \`
+            <div class="bar" aria-hidden="true"><i style="width:${pct(players, maxPlayers)}%"></i></div>
-        <article class="server-card" role="region" aria-label="\${s.name} status">
+            <span class="muted" style="font-size:.9rem">${pct(players, maxPlayers)}% capacity</span>
-          <h3 style="margin:.2rem 0 .6rem">\${s.name} \${pill}</h3>
+          ` : '';
-          <div class="muted" style="margin-bottom:.5rem">
+
-            <strong>Query:</strong> <code>\${endpoint}</code>
+            const details = online ? `
-            <button class="copy" onclick="navigator.clipboard.writeText('\${endpoint}')">Copy</button>
+            <div class="kvs">
+              <div class="kv"><strong>Map</strong><span>${map}</span></div>
+              <div class="kv"><strong>Players</strong><span>${players}${maxPlayers ? `/${maxPlayers}` : ''}</span></div>
+              <div class="kv"><strong>Ping</strong><span class="ping">${pingDot(ping)}${ping ?? '—'} ms</span></div>
+            </div>
+            ${playerBar}
+          ` : `<div class="muted" style="margin-top:.3rem">${(data && data.error) ? data.error : 'No response from query port'}</div>`;
+
+            return `
+            <article class="server-card" role="region" aria-label="${s.name} status">
+              <div class="server-head">
+                <h3 style="margin:.1rem 0 .2rem">${s.name}</h3>
+                ${pill}
+              </div>
+
+              <div class="row muted" style="margin-bottom:.4rem">
+                <strong>Query:</strong> <code>${endpoint}</code>
+                <button class="copy" onclick="clip('${endpoint}','Copied endpoint')">Copy</button>
+              </div>
+
+              ${details}
+
+              <div class="muted" style="margin-top:.6rem;font-size:.9rem">
+                Updated <span>${timeAgo(ts)}</span>
               </div>
-          \${details}
-          <div class="muted" style="margin-top:.6rem;font-size:.9rem">Updated <span data-ts>just now</span></div>
             </article>
-      \`;
+          `;
         }
 
-    async function refresh(){
+        function render() {
+            const q = document.getElementById('q').value.trim().toLowerCase();
+            const filter = document.getElementById('filter').value;
+            const sort = document.getElementById('sort').value;
+
+            let rows = state.slice();
+
+            // Filter
+            rows = rows.filter(({ s, data }) => {
+                const hay = `${s.name} ${data?.map || ''}`.toLowerCase();
+                const matchesQ = !q || hay.includes(q);
+                const online = !!data?.online;
+                const matchesF = filter === 'all' || (filter === 'online' ? online : !online);
+                return matchesQ && matchesF;
+            });
+
+            // Sort
+            const by = {
+                status: (a, b) => Number(b.data?.online || 0) - Number(a.data?.online || 0) || a.s.name.localeCompare(b.s.name),
+                name: (a, b) => a.s.name.localeCompare(b.s.name),
+                players: (a, b) => (b.data?.players || 0) - (a.data?.players || 0),
+                ping: (a, b) => (a.data?.ping ?? 1e9) - (b.data?.ping ?? 1e9),
+            }[sort] || ((a, b) => 0);
+            rows.sort(by);
+
+            // Render
+            $list.innerHTML = rows.map(r => cardTemplate(r.s, r.data, r.fetchedAt)).join('');
+
+            // Summary / meta
+            const total = state.length;
+            const onlineCount = state.filter(r => r.data?.online).length;
+            $summary.textContent = `Online ${onlineCount} / ${total} · Last update ${timeAgo(lastRefresh)}`;
+        }
+
+        // === DATA FETCH ===
+        function fetchWithTimeout(url, ms = 7000) {
+            const ctl = new AbortController();
+            const id = setTimeout(() => ctl.abort(), ms);
+            return fetch(url, { cache: 'no-store', signal: ctl.signal }).finally(() => clearTimeout(id));
+        }
+
+        async function refresh() {
+            lastRefresh = Date.now();
+            nextTick = 30;
+
             const results = await Promise.all(SERVERS.map(async s => {
-        try{
+                const url = `${API}?ip=${encodeURIComponent(s.host)}&port=${encodeURIComponent(s.port)}`;
-          const url = \`\${API}?ip=\${encodeURIComponent(s.host)}&port=\${encodeURIComponent(s.port)}\`;
+                try {
-          const r = await fetch(url, { cache: 'no-store' });
+                    const r = await fetchWithTimeout(url, 7000);
                     const data = await r.json();
-          return { s, data };
+                    return { s, data, fetchedAt: Date.now() };
-        }catch(e){
+                } catch (e) {
-          return { s, data: { online:false, error:String(e) } };
+                    return { s, data: { online: false, error: String(e) }, fetchedAt: Date.now() };
                 }
             }));
-      $list.innerHTML = results.map(({s, data}) => cardTemplate(s, data)).join('');
+
+            state = results;
+            // Persist last successful for offline first‑paint
+            try { localStorage.setItem('asa:last', JSON.stringify({ t: Date.now(), results })); } catch { }
+            render();
         }
 
+        // Load cached (if present) for instant first paint
+        (function bootFromCache() {
+            try {
+                const cached = JSON.parse(localStorage.getItem('asa:last') || 'null');
+                if (cached && Array.isArray(cached.results)) {
+                    state = cached.results;
+                    lastRefresh = cached.t || Date.now();
+                    render();
+                }
+            } catch { }
+        })();
+
+        // Polling and countdown
+        setInterval(() => {
+            if (nextTick > 0) nextTick--;
+            $next.textContent = `Next update: ${nextTick}s`;
+            if (nextTick === 0) refresh();
+        }, 1000);
+
+        // Wire controls
+        document.getElementById('q').addEventListener('input', render);
+        document.getElementById('filter').addEventListener('change', render);
+        document.getElementById('sort').addEventListener('change', render);
+        document.getElementById('refreshBtn').addEventListener('click', refresh);
+
+        // First live refresh
         refresh();
-    setInterval(refresh, 30000); // poll every 30s
     </script>
 </body>
 </html>