Spaces:

krishgokul92
/

timer

Sleeping

App Files Files Community

krishgokul92 commited on Oct 8, 2025

Commit

2dccdd6

verified ·

1 Parent(s): c5d4931

Update public/index.html

Browse files

Files changed (1) hide show

public/index.html +271 -84

public/index.html CHANGED Viewed

@@ -2,46 +2,129 @@
 <html lang="en">
 <head>
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <title>Timer Interface</title>
   <style>
-    /* Shared Styles for Admin and Client */
-    body { font-family: Arial, sans-serif; background: #121820; color: #e6edf3; }
-    .wrapper { margin: 0 auto; padding: 20px; max-width: 1200px; text-align: center; }
-    .btn { border: none; border-radius: 8px; padding: 10px 15px; font-size: 16px; cursor: pointer; }
-    .btn:hover { background: #333; }
-    .start-btn { background-color: #2261ff; }
-    .stop-btn { background-color: #f43f5e; }
-    .reset-btn { background-color: #0ea5e9; }
-    .blackout-btn { background-color: #000; color: #fff; }
-    .btn-group { display: flex; gap: 10px; margin-bottom: 20px; justify-content: center; }
-    .time-display { font-size: 100px; margin-bottom: 20px; }
-    /* Ensure proper centering and consistency */
-    .wrapper { display: flex; flex-direction: column; justify-content: center; align-items: center; }
-    /* Fullscreen blackout overlay */
     .blackout { position: fixed; inset: 0; background: #000; display: none; z-index: 999999; }
   </style>
 </head>
 <body>
-<div class="wrapper" id="app">
-  <!-- The Timer will dynamically show the Admin or Client UI based on role -->
-  <div id="admin" style="display: none;">
-    <h2>Admin Controls</h2>
-    <div class="btn-group">
-      <button class="btn start-btn" id="start">Start</button>
-      <button class="btn stop-btn" id="stop">Stop</button>
-      <button class="btn reset-btn" id="reset">Reset</button>
     </div>
-    <div class="btn-group">
-      <button class="btn blackout-btn" id="blackoutOn">Blackout ON</button>
-      <button class="btn blackout-btn" id="blackoutOff">Blackout OFF</button>
     </div>
   </div>
-  <div id="client" style="display: none;">
-    <h2>Client Timer</h2>
-    <div class="time-display" id="time">00:00</div>
   </div>
 </div>
@@ -49,71 +132,175 @@
 <script src="/socket.io/socket.io.js"></script>
 <script>
-  const params = new URLSearchParams(window.location.search);
-  const role = params.get('role') || 'client';  // Default to 'client'
-  const socket = io({ query: { role, room: 'default' } });
-  // Show either admin or client interface
   if (role === 'admin') {
-    document.getElementById('admin').style.display = 'block';
-    document.getElementById('client').style.display = 'none';
   } else {
-    document.getElementById('admin').style.display = 'none';
-    document.getElementById('client').style.display = 'block';
   }
-  // Admin controls
-  document.getElementById('start').onclick = () => socket.emit('admin:start', { delayMs: 3000, label: 'Start Timer' });
-  document.getElementById('stop').onclick = () => socket.emit('admin:stop');
-  document.getElementById('reset').onclick = () => socket.emit('admin:reset');
-  document.getElementById('blackoutOn').onclick = () => socket.emit('admin:blackout', { on: true });
-  document.getElementById('blackoutOff').onclick = () => socket.emit('admin:blackout', { on: false });
-  // Client timer
-  let startTime = 0;
-  let isRunning = false;
-  let interval;
-  socket.on('cmd', (cmd) => {
-    if (cmd.type === 'start') {
-      startTime = Date.now() + (cmd.startAt - Date.now());
-      isRunning = true;
-      startTimer();
-    }
-    if (cmd.type === 'stop') {
-      clearInterval(interval);
-      isRunning = false;
-    }
-    if (cmd.type === 'reset') {
-      startTime = 0;
-      isRunning = false;
-      clearInterval(interval);
-      updateTime();
-    }
-    if (cmd.type === 'blackout') {
-      if (cmd.on) {
-        document.body.style.background = 'black';
-      } else {
-        document.body.style.background = '#121820';
-      }
-    }
   });
-  function startTimer() {
-    interval = setInterval(() => {
-      if (isRunning) {
-        const elapsed = Date.now() - startTime;
-        const seconds = Math.floor(elapsed / 1000);
-        const milliseconds = Math.floor((elapsed % 1000) / 10);
-        document.getElementById('time').textContent = `${String(seconds).padStart(2, '0')}:${String(milliseconds).padStart(2, '0')}`;
-      }
-    }, 50); // Update every 50ms
   }
-  function updateTime() {
-    document.getElementById('time').textContent = '00:00';
   }
 </script>
 </body>
 </html>

 <html lang="en">
 <head>
   <meta charset="utf-8" />
+  <title>LAN Timer</title>
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <style>
+    :root { color-scheme: dark; }
+    /* Base */
+    body {
+      margin:0; background:#0b0f14; color:#e6edf3;
+      font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
+    }
+    a { color:#7fb3ff; text-decoration:none; }
+    .wrap { max-width: 1080px; margin: 40px auto; padding: 0 20px; }
+    .card {
+      background:#121820; border:1px solid #1f2933; border-radius:16px;
+      padding:20px; box-shadow:0 6px 24px rgba(0,0,0,.35);
+    }
+    h1 { margin:0 0 6px; font-weight:800; letter-spacing:.2px; font-size: clamp(28px, 3.5vw, 44px); }
+    p.sub { margin:0 0 20px; color:#8ea0b5; }
+    /* Controls / admin */
+    .row { display:flex; gap:12px; flex-wrap:wrap; align-items:center; margin-bottom:16px; }
+    label { display:flex; gap:8px; align-items:center; color:#9fb4cc; }
+    .input {
+      background:#0d141c; color:#e6edf3; border:1px solid #1f2933;
+      border-radius:12px; padding:10px 12px; min-width: 180px;
+    }
+    .btn {
+      border:0; border-radius:12px; padding:12px 18px; font-weight:700; cursor:pointer;
+      background:#1e2936; color:#fff; transition: transform .02s ease, background .2s ease
+    }
+    .btn:active { transform: translateY(1px); }
+    .btn.start { background:#2261ff; }
+    .btn.stop  { background:#f43f5e; }
+    .btn.reset { background:#0ea5e9; }
+    .btn.blackon  { background:#000; border:1px solid #2c3a4a; }
+    .btn.blackoff { background:#16a34a; }
+    .badge {
+      background:#10161f; border:1px solid #223041; padding:6px 10px; border-radius:999px;
+      color:#9fb4cc; display:inline-flex; gap:8px; align-items:center;
+    }
+    .grid { display:grid; grid-template-columns: repeat(3, 1fr); gap:12px; }
+    .stat { background:#0d141c; border:1px solid #1f2933; border-radius:12px; padding:14px; }
+    .stat b { font-size: 28px; }
+    /* Client timer */
+    .stage {
+      min-height: 70svh; display:grid; place-items:center;
+      background:#05080d; border:1px solid #121820; border-radius:16px;
+    }
+    .time {
+      font-size: clamp(120px, 20vw, 260px); font-weight: 900; letter-spacing: 1px; line-height: 1.0;
+      font-variant-numeric: tabular-nums;
+      -webkit-font-feature-settings: "tnum" 1; font-feature-settings: "tnum" 1;
+    }
+    .state {
+      position: fixed; top:12px; right:12px; background:#0d141c; border:1px solid #1f2933;
+      padding:6px 10px; border-radius:999px; color:#9fb4cc; font-size:13px;
+    }
+    .room {
+      position: fixed; top:12px; left:12px; background:#0d141c; border:1px solid #1f2933;
+      padding:6px 10px; border-radius:999px; color:#9fb4cc; font-size:13px;
+    }
+    .hint { margin-top:10px; color:#7f93a8; font-size:12px; text-align:center; }
     .blackout { position: fixed; inset: 0; background: #000; display: none; z-index: 999999; }
+    /* Role blocks */
+    .hidden { display:none; }
   </style>
 </head>
 <body>
+<!-- Header badges (client view) -->
+<div class="room hidden" id="roomBadge">room: default</div>
+<div class="state hidden" id="stateBadge">IDLE</div>
+<div class="wrap">
+  <!-- ADMIN VIEW -->
+  <div id="adminView" class="card hidden">
+    <h1>Timer Admin</h1>
+    <p class="sub">Controls all clients in the same room over WebSockets. Use a small start delay for tight sync.</p>
+    <div class="row">
+      <label>Start delay (ms)
+        <input id="delay" class="input" type="number" value="3000" min="1" step="1">
+      </label>
+      <label>Label
+        <input id="label" class="input" type="text" placeholder="e.g. Heat 1">
+      </label>
+      <button id="start" class="btn start">Start</button>
+      <button id="stop" class="btn stop">Stop</button>
+      <button id="reset" class="btn reset">Reset</button>
+      <span class="badge" id="stats">Clients: 0 • Admins: 1</span>
+    </div>
+    <div class="row">
+      <button id="blackOn"  class="btn blackon">Blackout ON</button>
+      <button id="blackOff" class="btn blackoff">Show Timer</button>
     </div>
+    <div class="grid">
+      <div class="stat">
+        <div>Room</div>
+        <b id="roomName">default</b>
+      </div>
+      <div class="stat">
+        <div>Server time (ms)</div>
+        <b id="serverNow">--</b>
+      </div>
+      <div class="stat">
+        <div>Hint</div>
+        <div>
+          Open <code>/?role=client</code> on each device.
+          Use <code>?room=yourcode</code> on both admin and clients to isolate groups.
+        </div>
+      </div>
     </div>
   </div>
+  <!-- CLIENT VIEW -->
+  <div id="clientView" class="hidden">
+    <div class="stage">
+      <div class="time" id="time">00:00</div>
+    </div>
+    <div class="hint">Keep this page visible for best accuracy. Screen is kept awake when possible.</div>
   </div>
 </div>
 <script src="/socket.io/socket.io.js"></script>
 <script>
+  // --- URL params ---
+  const qs = new URLSearchParams(location.search);
+  const role = (qs.get('role') || 'client').toLowerCase(); // 'admin' | 'client'
+  const room = qs.get('room') || 'default';
+  // --- Elements ---
+  const adminView = document.getElementById('adminView');
+  const clientView = document.getElementById('clientView');
+  const roomBadge = document.getElementById('roomBadge');
+  const stateBadge = document.getElementById('stateBadge');
+  const blackoutEl = document.getElementById('blackout');
+  const timeEl = document.getElementById('time');
+  // Show correct view
   if (role === 'admin') {
+    adminView.classList.remove('hidden');
   } else {
+    clientView.classList.remove('hidden');
+    roomBadge.classList.remove('hidden');
+    stateBadge.classList.remove('hidden');
   }
+  // --- Socket.IO connection (rooms + role passed as query) ---
+  const socket = io({ query: { role, room } });
+  // --- Wake lock (client) ---
+  let wakeLock;
+  async function keepAwake() {
+    try { if ('wakeLock' in navigator) wakeLock = await navigator.wakeLock.request('screen'); }
+    catch(_) {}
+  }
+  if (role === 'client') {
+    keepAwake();
+    document.addEventListener('visibilitychange', () => {
+      if (document.visibilityState === 'visible') keepAwake();
+    });
+  }
+  // --- Admin: stats + server clock via NTP-style sync ---
+  const roomNameEl = document.getElementById('roomName');
+  const statsEl = document.getElementById('stats');
+  const serverNowEl = document.getElementById('serverNow');
+  if (roomNameEl) roomNameEl.textContent = room;
+  function syncOnce() { socket.emit('sync:ping', { t0: Date.now() }); }
+  if (role === 'admin') {
+    setInterval(syncOnce, 1000);
+    syncOnce();
+  }
+  socket.on('sync:pong', ({ t0, t1, t2 }) => {
+    if (role !== 'admin') return;
+    const t3 = Date.now();
+    const offset = ((t1 - t0) + (t2 - t3)) / 2;
+    serverNowEl.textContent = String((Date.now() + offset)|0);
+  });
+  socket.on('stats', ({ numAdmins, numClients }) => {
+    if (statsEl) statsEl.textContent = `Clients: ${numClients} • Admins: ${numAdmins}`;
+  });
+  // --- Admin buttons ---
+  const delayEl = document.getElementById('delay');
+  const labelEl = document.getElementById('label');
+  const startBtn = document.getElementById('start');
+  const stopBtn  = document.getElementById('stop');
+  const resetBtn = document.getElementById('reset');
+  const blackOnBtn  = document.getElementById('blackOn');
+  const blackOffBtn = document.getElementById('blackOff');
+  if (startBtn) startBtn.onclick = () => {
+    socket.emit('admin:start', {
+      delayMs: Number(delayEl.value || 3000),
+      label: labelEl.value || ''
+    });
+  };
+  if (stopBtn)  stopBtn.onclick  = () => socket.emit('admin:stop');
+  if (resetBtn) resetBtn.onclick = () => socket.emit('admin:reset');
+  if (blackOnBtn)  blackOnBtn.onclick  = () => socket.emit('admin:blackout', { on: true });
+  if (blackOffBtn) blackOffBtn.onclick = () => socket.emit('admin:blackout', { on: false });
+  // --- Client clock sync (best-of samples) ---
+  const offsets = []; // {delay, offset}
+  function clientSyncOnce() { socket.emit('sync:ping', { t0: Date.now() }); }
+  if (role === 'client') {
+    for (let i=0;i<10;i++) setTimeout(clientSyncOnce, i*150);
+    setInterval(clientSyncOnce, 3000);
+  }
+  socket.on('sync:pong', ({ t0, t1, t2 }) => {
+    if (role !== 'client') return;
+    const t3 = Date.now();
+    const delay  = (t3 - t0) - (t2 - t1);
+    const offset = ((t1 - t0) + (t2 - t3)) / 2; // server - client
+    offsets.push({ delay, offset, ts: t3 });
+    if (offsets.length > 40) offsets.shift();
   });
+  function bestOffset() {
+    if (!offsets.length) return 0;
+    const best = [...offsets].sort((a,b)=>a.delay-b.delay).slice(0,7).map(x=>x.offset);
+    return Math.round(best.reduce((s,v)=>s+v,0)/best.length);
+  }
+  // --- Client timer state machine ---
+  const State = { IDLE:'IDLE', RUNNING:'RUNNING', STOPPED:'STOPPED' };
+  let state = State.IDLE;
+  let label = '';
+  let zeroPerfTs = null;  // when timer hits 00:00 (in performance.now() space)
+  let rafId = 0;
+  function setState(s){ state=s; if (stateBadge) stateBadge.textContent = s; }
+  function serverMsToLocalPerf(msServer) {
+    const off = bestOffset(); // server - client
+    const localNowWall = Date.now();
+    const localNowPerf = performance.now();
+    const whenLocalWall = msServer - off;
+    const delta = whenLocalWall - localNowWall;
+    return localNowPerf + delta;
+  }
+  // Fixed 5-char format "SS:CC"
+  function fmt(ms) {
+    if (ms < 0) ms = 0;
+    const totalCs = Math.floor(ms / 10);
+    const secs = Math.floor(totalCs / 100) % 100; // wrap at 100s
+    const cs   = totalCs % 100;
+    return `${String(secs).padStart(2,'0')}:${String(cs).padStart(2,'0')}`;
+  }
+  function renderElapsed(ms){ if (timeEl) timeEl.textContent = fmt(ms); }
+  function loop(){
+    const now = performance.now();
+    const ms = now - zeroPerfTs;
+    renderElapsed(ms);
+    rafId = requestAnimationFrame(loop);
+  }
+  function startAtServerTime(startAt){
+    zeroPerfTs = serverMsToLocalPerf(startAt);
+    setState(State.RUNNING);
+    cancelAnimationFrame(rafId);
+    rafId = requestAnimationFrame(loop);
   }
+  function stopPause(){
+    if (state !== State.RUNNING) return;
+    setState(State.STOPPED);
+    cancelAnimationFrame(rafId);
+  }
+  function resetAll(){
+    cancelAnimationFrame(rafId);
+    setState(State.IDLE);
+    renderElapsed(0);
+  }
+  // --- Command handling (both roles listen so admin preview works too) ---
+  socket.on('cmd', (msg) => {
+    if (!msg || !msg.type) return;
+    switch (msg.type) {
+      case 'start':  startAtServerTime(msg.startAt); break;
+      case 'stop':   stopPause(); break;
+      case 'reset':  resetAll();  break;
+      case 'blackout':
+        blackoutEl.style.display = msg.on ? 'block' : 'none';
+        document.documentElement.style.cursor = msg.on ? 'none' : 'auto';
+        break;
+    }
+  });
+  // Initial UI
+  if (role === 'client') {
+    document.getElementById('roomBadge').textContent = `room: ${room}`;
+    setState(State.IDLE);
+    renderElapsed(0);
   }
 </script>
 </body>
 </html>