Hugging Face's logo

Spaces:
krishgokul92
/
stopwatch
Sleeping

App Files Community
stopwatch
File size: 2,892 Bytes
f520256
 
 
 
 
9785ec4
f520256
9c26f8d
 
 
5c92afd
 
 
 
 
 
bb9a9f9
9785ec4
bb9a9f9
 
 
 
9c26f8d
f520256
 
 
5c92afd
 
 
 
 
9785ec4
bb9a9f9
 
f520256
bb9a9f9
 
 
 
9785ec4
ffb0b38
bb9a9f9
 
 
 
 
f520256
9c26f8d
 
 
 
5c92afd
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
f520256
9c26f8d
f520256
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
 
<!doctype html>
<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>