Spaces:
Sleeping
Sleeping
| <html> | |
| <head> | |
| <meta charset='utf-8'/> | |
| <title>Stopwatch Admin</title> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"/> | |
| <link rel='stylesheet' href='/style.css'/> | |
| <style> | |
| .footer { margin-top: 14px; text-align: center; } | |
| .footer a { text-decoration: none; padding: 6px 10px; border: 1px solid #2f3746; border-radius: 8px; } | |
| .panel { margin-top: 18px; } | |
| table { width: 100%; border-collapse: collapse; font-size: .92rem; } | |
| th, td { padding: 8px 6px; border-bottom: 1px solid #2f3746; text-align: left; } | |
| th { color: #a9b4c2; font-weight: 600; } | |
| .muted { color: #a9b4c2; } | |
| .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; } | |
| .controls { flex-wrap: wrap; } | |
| .row { display: flex; gap: 10px; justify-content: center; align-items: center; margin-top: 10px; flex-wrap: wrap; } | |
| .row label { color: #a9b4c2; font-size: .92rem; } | |
| input[type="color"] { | |
| width: 42px; height: 34px; padding: 0; border: 1px solid #2f3746; border-radius: 8px; background: #232a36; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class='container'> | |
| <div class="header" style="display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;"> | |
| <h2 style="margin:0">Stopwatch Admin</h2> | |
| <div class="muted">Clients: <span id="clientCount">0</span></div> | |
| </div> | |
| <!-- Display uses SS.hh format (set by shared.js) --> | |
| <div id='display' class='time'>00.00</div> | |
| <div class='controls'> | |
| <div class="row"> | |
| <button id='start' class='primary'>Start</button> | |
| <button id='stop'>Stop</button> | |
| <button id='reset' class='danger'>Reset</button> | |
| <button id='blackout' style="background:#111; color:#fff; border:1px solid #333;">Blackout</button> | |
| <button id='wake' style="background:#004400; color:#fff; border:1px solid #333;">Wake</button> | |
| </div> | |
| <div class="row"> | |
| <label for="colorPicker">Clock color</label> | |
| <input id="colorPicker" type="color" value="#E8EEF8" /> | |
| </div> | |
| </div> | |
| <div class="footer"> | |
| <a href="/client" target="_blank" rel="noopener">Open Client View</a> | |
| </div> | |
| <div class="panel"> | |
| <h3 style="margin:14px 0 8px;">Connected Clients</h3> | |
| <div class="muted" style="margin-bottom:6px;">Auto-updates every few seconds</div> | |
| <table> | |
| <thead> | |
| <tr> | |
| <th>ID</th> | |
| <th>IP</th> | |
| <th>Latency</th> | |
| <th>URL</th> | |
| <th>User Agent</th> | |
| <th>Since</th> | |
| </tr> | |
| </thead> | |
| <tbody id="clientsTable"> | |
| <tr><td colspan="6" class="muted">No clients connected yet.</td></tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| <script src='/socket.io/socket.io.js'></script> | |
| <script type='module' src='/admin.js'></script> | |
| </body> | |
| </html> | |