Spaces:
Sleeping
Sleeping
| <html> | |
| <head> | |
| <meta charset='utf-8'/> | |
| <title>Stopwatch Client</title> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"/> | |
| <link rel='stylesheet' href='/style.css'/> | |
| <style> | |
| /* Fullscreen, center, extra-large clock */ | |
| html, body { height: 100%; } | |
| body { margin: 0; background: #0f1115; } | |
| .container { | |
| height: 100%; | |
| width: 100%; | |
| max-width: none; | |
| display: grid; | |
| place-items: center; | |
| background: radial-gradient(80% 80% at 50% 30%, #12151c 0%, #0f1115 70%); | |
| border-radius: 0; | |
| border: none; | |
| padding: 0; | |
| box-shadow: none; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .time { | |
| /* Huge responsive type for a stage screen */ | |
| font-size: clamp(72px, 22vw, 320px); | |
| line-height: 1; | |
| letter-spacing: 0.02em; | |
| text-shadow: 0 0 20px rgba(0,0,0,.35); | |
| font-variant-numeric: tabular-nums; | |
| } | |
| /* Kiosk controls bar */ | |
| .controls { | |
| position: fixed; | |
| bottom: 16px; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| display: flex; | |
| gap: 10px; | |
| background: rgba(24,27,34,0.7); | |
| border: 1px solid #2f3746; | |
| border-radius: 999px; | |
| padding: 6px 10px; | |
| backdrop-filter: blur(6px); | |
| } | |
| .controls button { | |
| font-size: .95rem; | |
| padding: 8px 14px; | |
| border-radius: 999px; | |
| } | |
| .hint { | |
| position: fixed; | |
| top: 10px; | |
| right: 12px; | |
| color: #a9b4c2; | |
| font-size: .85rem; | |
| opacity: .9; | |
| user-select: none; | |
| } | |
| /* Blackout overlay */ | |
| #blackOverlay { | |
| position: fixed; | |
| inset: 0; | |
| background: #000; | |
| opacity: 0; | |
| pointer-events: none; | |
| transition: opacity 0.4s ease; | |
| } | |
| #blackOverlay.active { | |
| opacity: 1; | |
| pointer-events: all; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class='container'> | |
| <div id='display' class='time'>00.00</div> | |
| <div id="blackOverlay"></div> | |
| <div class="hint">Double-click or press <b>F</b> for fullscreen</div> | |
| <div class="controls"> | |
| <button id="fsBtn" class="primary">Fullscreen</button> | |
| <button id="hideBtn">Hide Controls</button> | |
| </div> | |
| </div> | |
| <script src='/socket.io/socket.io.js'></script> | |
| <script type='module' src='/client.js'></script> | |
| </body> | |
| </html> | |