initial commit

2026-06-24 13:00:51 +02:00
commit 2d4c3864ef
11 changed files with 2555 additions and 0 deletions
@@ -0,0 +1,87 @@
+<!DOCTYPE html>
+<html lang="it">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Server Indicator</title>
+  <style>
+    *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
+    html, body {
+      width: 100%;
+      height: 100%;
+      overflow: hidden;
+      font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
+      background: transparent;
+      color: #fff;
+      user-select: none;
+    }
+
+    .widget {
+      width: 100%;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .server-indicator {
+      background: rgba(0,0,0,0.6);
+      backdrop-filter: blur(6px);
+      border: 1px solid rgba(255,255,255,0.1);
+      border-radius: calc(min(10px, 0.7vw));
+      padding: 0.5em 1.2em;
+      display: inline-flex;
+      align-items: center;
+      gap: 0.6em;
+      font-size: clamp(12px, 1.4vw, 20px);
+      font-weight: 600;
+      box-shadow: 0 4px 16px rgba(0,0,0,0.4);
+    }
+    .server-indicator .dot {
+      display: inline-block;
+      width: 0.6em;
+      height: 0.6em;
+      border-radius: 50%;
+      background: #facc15;
+      box-shadow: 0 0 10px rgba(250,204,21,0.6);
+      animation: pulse 1.5s ease-in-out infinite;
+    }
+    .server-indicator .player-label {
+      color: rgba(255,255,255,0.8);
+    }
+    .server-indicator .player-name {
+      color: #fff;
+      font-weight: 700;
+    }
+
+    @keyframes pulse {
+      0%, 100% { opacity: 1; transform: scale(1); }
+      50%      { opacity: 0.5; transform: scale(0.9); }
+    }
+    @keyframes fadeIn {
+      from { opacity: 0; }
+      to   { opacity: 1; }
+    }
+    .server-indicator { animation: fadeIn 0.5s ease-out; }
+  </style>
+</head>
+<body>
+  <div class="widget">
+    <div class="server-indicator" id="indicator">
+      <span class="dot"></span>
+      <span class="player-label">Serve:</span>
+      <span class="player-name" id="serverName">J. Sinner</span>
+    </div>
+  </div>
+
+  <script src="common.js"></script>
+  <script>
+    function updateServer(state) {
+      const name = state.server === 1 ? state.player1 : state.player2;
+      document.getElementById('serverName').textContent = name;
+    }
+
+    const unsub = onStateUpdate(updateServer);
+  </script>
+</body>
+</html>