Spaces:

Sebebeb
/

System

Sleeping

App Files Files Community

Sebebeb commited on Mar 8

Commit

0325642

verified ·

1 Parent(s): c8000c1

Upload 8 files

Browse files

Files changed (8) hide show

Dockerfile +17 -0
package.json +13 -0
public/admin/index.html +174 -0
public/admin/server.js +378 -0
public/admin/style.css +693 -0
public/index.html +14 -0
public/script.js +307 -0
server.js +378 -0

Dockerfile ADDED Viewed

	@@ -0,0 +1,17 @@

+FROM node:20-slim
+WORKDIR /app
+COPY package.json ./
+RUN npm install
+COPY . .
+# Generate self-signed cert for HTTPS
+RUN apt-get update && apt-get install -y openssl && \
+    openssl req -x509 -newkey rsa:2048 -keyout key.pem -out cert.pem -days 365 -nodes \
+    -subj "/C=US/ST=State/L=City/O=Org/CN=localhost"
+EXPOSE 7860
+CMD ["node", "server.js"]

package.json ADDED Viewed

	@@ -0,0 +1,13 @@

+{
+  "name": "notification-server",
+  "version": "1.0.0",
+  "description": "Notification push server with WebSocket and admin panel",
+  "main": "server.js",
+  "scripts": {
+    "start": "node server.js"
+  },
+  "dependencies": {
+    "ws": "^8.16.0",
+    "uuid": "^9.0.0"
+  }
+}

public/admin/index.html ADDED Viewed

	@@ -0,0 +1,174 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>DISPATCH // Admin</title>
+  <link rel="stylesheet" href="/admin/style.css" />
+</head>
+<body>
+  <div id="root">
+    <!-- Top Bar -->
+    <header id="topbar">
+      <div id="topbar-logo">DISPATCH</div>
+      <div id="topbar-status">
+        <span id="ws-indicator" class="indicator offline"></span>
+        <span id="ws-label">OFFLINE</span>
+      </div>
+    </header>
+    <!-- Tabs -->
+    <nav id="tabs">
+      <button class="tab-btn active" data-tab="notifications">NOTIFICATIONS</button>
+      <button class="tab-btn" data-tab="devices">DEVICES</button>
+    </nav>
+    <!-- ── NOTIFICATIONS TAB ── -->
+    <div id="tab-notifications" class="tab-panel active">
+      <div id="notif-layout">
+        <!-- LEFT: Create Notification Form -->
+        <aside id="create-panel">
+          <h2 class="panel-title">NEW NOTIFICATION</h2>
+          <div class="form-group">
+            <label for="f-name">Internal Name</label>
+            <input id="f-name" type="text" placeholder="e.g. promo-sept-24" />
+          </div>
+          <div class="form-group">
+            <label for="f-heading">Heading</label>
+            <input id="f-heading" type="text" placeholder="Notification heading" />
+          </div>
+          <div class="form-group">
+            <label for="f-body">Body</label>
+            <textarea id="f-body" rows="4" placeholder="Notification body text..."></textarea>
+          </div>
+          <div class="form-group">
+            <label for="f-hyperlink">Hyperlink</label>
+            <input id="f-hyperlink" type="url" placeholder="https://..." />
+          </div>
+          <div class="form-group">
+            <label for="f-sound">Sound</label>
+            <select id="f-sound">
+              <option value="">— No Sound —</option>
+            </select>
+          </div>
+          <div class="form-group">
+            <label>Upload Sound File</label>
+            <div id="sound-upload-area">
+              <input id="f-sound-file" type="file" accept="audio/*" hidden />
+              <button id="sound-upload-btn" class="btn-outline" type="button">
+                ▲ UPLOAD AUDIO
+              </button>
+              <span id="sound-file-name">No file chosen</span>
+            </div>
+            <input id="f-sound-name" type="text" placeholder="Sound name (required for upload)" style="margin-top:8px" />
+          </div>
+          <button id="create-notif-btn" class="btn-create">CREATE NOTIFICATION</button>
+        </aside>
+        <!-- MIDDLE: Notification List -->
+        <main id="notif-list-panel">
+          <h2 class="panel-title">ALL NOTIFICATIONS <span id="notif-count" class="badge">0</span></h2>
+          <div id="notif-list">
+            <div class="empty-state">No notifications yet.</div>
+          </div>
+        </main>
+        <!-- RIGHT: Schedule Panel -->
+        <section id="schedule-panel">
+          <div id="schedule-empty-state">
+            <div class="select-hint">
+              <div class="select-hint-icon">◎</div>
+              <p>Select a notification<br>to schedule or play it</p>
+            </div>
+          </div>
+          <div id="schedule-active" style="display:none">
+            <div id="selected-notif-info">
+              <div id="selected-notif-name"></div>
+            </div>
+            <button id="play-now-btn" title="Play Now">
+              <span>▶ PLAY NOW</span>
+            </button>
+            <div id="schedule-controls">
+              <div class="toggle-row">
+                <label class="toggle-label" for="now-toggle">NOW</label>
+                <label class="toggle-switch">
+                  <input type="checkbox" id="now-toggle" />
+                  <span class="toggle-track"><span class="toggle-thumb"></span></span>
+                </label>
+              </div>
+              <div id="datetime-pickers">
+                <div class="picker-group">
+                  <label>DATE</label>
+                  <input type="date" id="sched-date" />
+                </div>
+                <div class="picker-group">
+                  <label>TIME</label>
+                  <input type="time" id="sched-time" />
+                </div>
+              </div>
+              <button id="schedule-btn" class="btn-schedule">SCHEDULE</button>
+            </div>
+          </div>
+        </section>
+      </div>
+    </div>
+    <!-- ── DEVICES TAB ── -->
+    <div id="tab-devices" class="tab-panel">
+      <div id="devices-layout">
+        <!-- Device List -->
+        <aside id="device-list-panel">
+          <h2 class="panel-title">DEVICES <span id="device-count" class="badge">0</span></h2>
+          <div id="device-list">
+            <div class="empty-state">No devices connected yet.</div>
+          </div>
+        </aside>
+        <!-- Device Detail -->
+        <main id="device-detail-panel">
+          <div id="device-empty-state" class="select-hint">
+            <div class="select-hint-icon">◉</div>
+            <p>Select a device<br>to manage it</p>
+          </div>
+          <div id="device-detail" style="display:none">
+            <div id="device-header">
+              <div id="device-status-indicator" class="indicator"></div>
+              <div>
+                <div id="detail-device-name-display" class="device-detail-name"></div>
+                <div id="detail-device-uuid" class="device-detail-uuid"></div>
+              </div>
+              <div id="device-name-edit-area">
+                <input id="device-name-input" type="text" placeholder="Device name..." />
+                <button id="device-name-save" class="btn-sm">SAVE NAME</button>
+              </div>
+            </div>
+            <div id="device-sections">
+              <div class="device-section">
+                <h3>CACHED SOUNDS</h3>
+                <div id="detail-sounds" class="tag-list"></div>
+              </div>
+              <div class="device-section">
+                <h3>NOTIFICATIONS</h3>
+                <div id="detail-notifications" class="notif-table-wrap"></div>
+              </div>
+              <div class="device-section">
+                <h3>SCHEDULE</h3>
+                <div id="detail-schedule" class="schedule-table-wrap"></div>
+              </div>
+            </div>
+          </div>
+        </main>
+      </div>
+    </div>
+  </div><!-- /#root -->
+  <script src="/admin/script.js"></script>
+</body>
+</html>

public/admin/server.js ADDED Viewed

	@@ -0,0 +1,378 @@

+const https = require('https');
+const fs = require('fs');
+const path = require('path');
+const { WebSocketServer, WebSocket } = require('ws');
+const { v4: uuidv4 } = require('uuid');
+// ─── TLS ──────────────────────────────────────────────────────────────────────
+const serverOptions = {
+  cert: fs.readFileSync('cert.pem'),
+  key: fs.readFileSync('key.pem'),
+};
+// ─── In-Memory State ──────────────────────────────────────────────────────────
+// sounds[id] = { id, name, data }          (data = base64 string)
+// notifications[id] = { id, name, heading, body, hyperlink, displayed, soundId }
+// devices[uuid] = { uuid, name, notifications: [...], lastConnection, pendingChanges: [...], schedule: [...] }
+const sounds = {};
+const notifications = {};
+const devices = {};
+// ─── Live Connection Maps ─────────────────────────────────────────────────────
+// deviceClients: uuid -> WebSocket   (Frontend 1 connections)
+// adminClients: Set<WebSocket>        (Frontend 2 connections)
+const deviceClients = {};
+const adminClients = new Set();
+// ─── MIME Types ───────────────────────────────────────────────────────────────
+const MIME = {
+  '.html': 'text/html',
+  '.js':   'application/javascript',
+  '.css':  'text/css',
+  '.json': 'application/json',
+  '.png':  'image/png',
+  '.ico':  'image/x-icon',
+};
+// ─── HTTP File Server ─────────────────────────────────────────────────────────
+const httpServer = https.createServer(serverOptions, (req, res) => {
+  let urlPath = req.url.split('?')[0];
+  if (urlPath === '/' || urlPath === '') urlPath = '/index.html';
+  if (urlPath === '/admin' || urlPath === '/admin/') urlPath = '/admin/index.html';
+  const filePath = path.join(__dirname, 'public', urlPath);
+  const ext = path.extname(filePath);
+  const mime = MIME[ext] || 'application/octet-stream';
+  fs.readFile(filePath, (err, data) => {
+    if (err) {
+      res.writeHead(404, { 'Content-Type': 'text/plain' });
+      res.end('Not found');
+      return;
+    }
+    res.writeHead(200, { 'Content-Type': mime });
+    res.end(data);
+  });
+});
+// ─── WebSocket Server ─────────────────────────────────────────────────────────
+const wss = new WebSocketServer({ server: httpServer });
+wss.on('connection', (ws, req) => {
+  const urlPath = req.url || '/';
+  const isAdmin = urlPath.startsWith('/admin-ws');
+  if (isAdmin) {
+    handleAdminConnection(ws);
+  } else {
+    handleDeviceConnection(ws);
+  }
+});
+// ─── Helpers ──────────────────────────────────────────────────────────────────
+function send(ws, msg) {
+  if (ws.readyState === WebSocket.OPEN) {
+    ws.send(JSON.stringify(msg));
+  }
+}
+function broadcastAdmin(msg) {
+  for (const ws of adminClients) {
+    send(ws, msg);
+  }
+}
+function broadcastDevice(uuid, msg) {
+  const ws = deviceClients[uuid];
+  if (ws) send(ws, msg);
+}
+function broadcastAllDevices(msg) {
+  for (const uuid of Object.keys(deviceClients)) {
+    broadcastDevice(uuid, msg);
+  }
+}
+function getFullState() {
+  return {
+    sounds: Object.values(sounds),
+    notifications: Object.values(notifications),
+    devices: Object.values(devices).map(devicePublic),
+  };
+}
+function devicePublic(d) {
+  return {
+    uuid: d.uuid,
+    name: d.name,
+    notifications: d.notifications,
+    lastConnection: d.lastConnection,
+    schedule: d.schedule || [],
+    pendingChanges: d.pendingChanges || [],
+    online: !!deviceClients[d.uuid],
+  };
+}
+// ─── Admin Connection Handler ─────────────────────────────────────────────────
+function handleAdminConnection(ws) {
+  adminClients.add(ws);
+  console.log(`[Admin] connected, total=${adminClients.size}`);
+  // Send full state immediately
+  send(ws, { type: 'full_state', ...getFullState() });
+  ws.on('message', (raw) => {
+    let msg;
+    try { msg = JSON.parse(raw); } catch { return; }
+    handleAdminMessage(ws, msg);
+  });
+  ws.on('close', () => {
+    adminClients.delete(ws);
+    console.log(`[Admin] disconnected, total=${adminClients.size}`);
+  });
+  ws.on('error', (e) => console.error('[Admin] WS error', e.message));
+}
+function handleAdminMessage(ws, msg) {
+  switch (msg.type) {
+    case 'create_sound': {
+      // msg: { name, data }
+      const id = uuidv4();
+      const sound = { id, name: msg.name, data: msg.data };
+      sounds[id] = sound;
+      broadcastAdmin({ type: 'sound_added', sound });
+      // Don't push sound data to all devices here — devices pull sounds on demand
+      break;
+    }
+    case 'create_notification': {
+      // msg: { name, heading, body, hyperlink, soundId }
+      const id = uuidv4();
+      const notif = {
+        id,
+        name: msg.name,
+        heading: msg.heading,
+        body: msg.body,
+        hyperlink: msg.hyperlink || '',
+        displayed: false,
+        soundId: msg.soundId || null,
+      };
+      notifications[id] = notif;
+      // Add to all devices
+      for (const uuid of Object.keys(devices)) {
+        if (!devices[uuid].notifications.find(n => n.id === id)) {
+          devices[uuid].notifications.push({ ...notif });
+        }
+      }
+      broadcastAdmin({ type: 'notification_added', notification: notif });
+      broadcastAdmin({ type: 'devices_updated', devices: Object.values(devices).map(devicePublic) });
+      // Push to all connected devices
+      broadcastAllDevices({ type: 'notification_added', notification: notif });
+      break;
+    }
+    case 'schedule_notification': {
+      // msg: { uuid, notificationId, scheduledAt }
+      const device = devices[msg.uuid];
+      if (!device) return;
+      device.schedule = device.schedule || [];
+      const existing = device.schedule.find(s => s.notificationId === msg.notificationId);
+      if (existing) {
+        existing.scheduledAt = msg.scheduledAt;
+      } else {
+        device.schedule.push({ notificationId: msg.notificationId, scheduledAt: msg.scheduledAt });
+      }
+      const scheduleMsg = { type: 'schedule_update', schedule: device.schedule };
+      if (deviceClients[msg.uuid]) {
+        broadcastDevice(msg.uuid, scheduleMsg);
+      } else {
+        device.pendingChanges = device.pendingChanges || [];
+        device.pendingChanges.push(scheduleMsg);
+      }
+      broadcastAdmin({ type: 'devices_updated', devices: Object.values(devices).map(devicePublic) });
+      break;
+    }
+    case 'play_now': {
+      // msg: { uuid, notificationId }
+      const playMsg = { type: 'play_now', notificationId: msg.notificationId };
+      if (deviceClients[msg.uuid]) {
+        broadcastDevice(msg.uuid, playMsg);
+      } else {
+        const device = devices[msg.uuid];
+        if (device) {
+          device.pendingChanges = device.pendingChanges || [];
+          device.pendingChanges.push(playMsg);
+        }
+      }
+      break;
+    }
+    case 'update_device_name': {
+      // msg: { uuid, name }
+      const device = devices[msg.uuid];
+      if (!device) return;
+      device.name = msg.name;
+      const nameMsg = { type: 'name_update', name: msg.name };
+      if (deviceClients[msg.uuid]) {
+        broadcastDevice(msg.uuid, nameMsg);
+      } else {
+        device.pendingChanges = device.pendingChanges || [];
+        device.pendingChanges.push(nameMsg);
+      }
+      broadcastAdmin({ type: 'devices_updated', devices: Object.values(devices).map(devicePublic) });
+      break;
+    }
+    case 'remove_schedule': {
+      // msg: { uuid, notificationId }
+      const device = devices[msg.uuid];
+      if (!device) return;
+      device.schedule = (device.schedule || []).filter(s => s.notificationId !== msg.notificationId);
+      const rmMsg = { type: 'schedule_update', schedule: device.schedule };
+      if (deviceClients[msg.uuid]) {
+        broadcastDevice(msg.uuid, rmMsg);
+      } else {
+        device.pendingChanges = device.pendingChanges || [];
+        device.pendingChanges.push(rmMsg);
+      }
+      broadcastAdmin({ type: 'devices_updated', devices: Object.values(devices).map(devicePublic) });
+      break;
+    }
+    case 'request_sound': {
+      // admin wants a specific sound by id
+      const sound = sounds[msg.id];
+      if (sound) send(ws, { type: 'sound_data', sound });
+      break;
+    }
+    default:
+      console.warn('[Admin] unknown message type:', msg.type);
+  }
+}
+// ─── Device Connection Handler ────────────────────────────────────────────────
+function handleDeviceConnection(ws) {
+  let deviceUUID = null;
+  console.log('[Device] new connection (uuid pending)');
+  ws.on('message', (raw) => {
+    let msg;
+    try { msg = JSON.parse(raw); } catch { return; }
+    if (msg.type === 'hello') {
+      // Device introduces itself with optional uuid
+      if (msg.uuid && devices[msg.uuid]) {
+        deviceUUID = msg.uuid;
+      } else {
+        // New device
+        deviceUUID = msg.uuid || uuidv4();
+        devices[deviceUUID] = {
+          uuid: deviceUUID,
+          name: `Device ${Object.keys(devices).length + 1}`,
+          notifications: Object.values(notifications).map(n => ({ ...n })),
+          lastConnection: null,
+          schedule: [],
+          pendingChanges: [],
+        };
+      }
+      deviceClients[deviceUUID] = ws;
+      const device = devices[deviceUUID];
+      device.lastConnection = null; // online
+      // Deliver any pending changes
+      if (device.pendingChanges && device.pendingChanges.length > 0) {
+        for (const change of device.pendingChanges) {
+          send(ws, change);
+        }
+        device.pendingChanges = [];
+      }
+      // Send device its full state
+      send(ws, {
+        type: 'device_init',
+        uuid: deviceUUID,
+        notifications: device.notifications,
+        schedule: device.schedule,
+        name: device.name,
+      });
+      // Tell admin about new/reconnected device
+      broadcastAdmin({ type: 'devices_updated', devices: Object.values(devices).map(devicePublic) });
+      console.log(`[Device] ${deviceUUID} connected (${device.name})`);
+      return;
+    }
+    if (!deviceUUID) return; // not initialized
+    handleDeviceMessage(ws, deviceUUID, msg);
+  });
+  ws.on('close', () => {
+    if (deviceUUID && devices[deviceUUID]) {
+      devices[deviceUUID].lastConnection = Date.now();
+      delete deviceClients[deviceUUID];
+      broadcastAdmin({ type: 'devices_updated', devices: Object.values(devices).map(devicePublic) });
+      console.log(`[Device] ${deviceUUID} disconnected`);
+    }
+  });
+  ws.on('error', (e) => console.error('[Device] WS error', e.message));
+}
+function handleDeviceMessage(ws, uuid, msg) {
+  const device = devices[uuid];
+  if (!device) return;
+  switch (msg.type) {
+    case 'mark_displayed': {
+      // msg: { notificationId }
+      const notif = device.notifications.find(n => n.id === msg.notificationId);
+      if (notif) notif.displayed = true;
+      // Also mark in master list
+      if (notifications[msg.notificationId]) {
+        notifications[msg.notificationId].displayed = true;
+      }
+      broadcastAdmin({ type: 'devices_updated', devices: Object.values(devices).map(devicePublic) });
+      break;
+    }
+    case 'request_sound': {
+      // Device needs sound data for a notification
+      const sound = sounds[msg.soundId];
+      if (sound) {
+        send(ws, { type: 'sound_data', sound });
+      }
+      break;
+    }
+    case 'sync_schedule': {
+      // Device reports its current schedule (for reconciliation)
+      device.schedule = msg.schedule || [];
+      broadcastAdmin({ type: 'devices_updated', devices: Object.values(devices).map(devicePublic) });
+      break;
+    }
+    case 'cached_sounds': {
+      // Device reports which sound IDs it has cached
+      device.cachedSounds = msg.soundIds || [];
+      broadcastAdmin({ type: 'devices_updated', devices: Object.values(devices).map(devicePublic) });
+      break;
+    }
+    default:
+      console.warn('[Device] unknown message type:', msg.type);
+  }
+}
+// ─── Start ────────────────────────────────────────────────────────────────────
+const PORT = process.env.PORT || 7860;
+httpServer.listen(PORT, () => {
+  console.log(`Server running on https://0.0.0.0:${PORT}`);
+});

public/admin/style.css ADDED Viewed

	@@ -0,0 +1,693 @@

+/* ─── DISPATCH Admin UI ─────────────────────────────────────────────────────── */
+@import url('https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=Syne:wght@400;600;800&display=swap');
+:root {
+  --bg:          #0d0d0f;
+  --surface:     #141416;
+  --surface2:    #1c1c20;
+  --surface3:    #242428;
+  --border:      #2a2a30;
+  --border2:     #3a3a42;
+  --text:        #e8e8ec;
+  --text-dim:    #8888a0;
+  --text-dimmer: #55556a;
+  --accent:      #f5a623;
+  --accent-dim:  #a87010;
+  --red:         #e03030;
+  --red-dark:    #8a1010;
+  --green:       #22c55e;
+  --mono:        'Space Mono', monospace;
+  --sans:        'Syne', sans-serif;
+  --radius:      4px;
+  --radius-lg:   8px;
+}
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+html, body, #root {
+  height: 100%;
+  background: var(--bg);
+  color: var(--text);
+  font-family: var(--mono);
+  font-size: 13px;
+  line-height: 1.5;
+}
+/* ─── Top Bar ───────────────────────────────────────────────────────────────── */
+#topbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 24px;
+  height: 52px;
+  background: var(--surface);
+  border-bottom: 1px solid var(--border);
+  position: sticky;
+  top: 0;
+  z-index: 100;
+}
+#topbar-logo {
+  font-family: var(--sans);
+  font-weight: 800;
+  font-size: 20px;
+  letter-spacing: 0.15em;
+  color: var(--accent);
+}
+#topbar-status {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 11px;
+  letter-spacing: 0.12em;
+  color: var(--text-dim);
+}
+/* ─── Status Indicator ──────────────────────────────────────────────────────── */
+.indicator {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: #555;
+  display: inline-block;
+  flex-shrink: 0;
+  transition: background 0.3s;
+}
+.indicator.online  { background: var(--green); box-shadow: 0 0 6px var(--green); }
+.indicator.offline { background: var(--red);   box-shadow: 0 0 6px var(--red); }
+/* ─── Tabs ──────────────────────────────────────────────────────────────────── */
+#tabs {
+  display: flex;
+  border-bottom: 1px solid var(--border);
+  background: var(--surface);
+}
+.tab-btn {
+  padding: 12px 28px;
+  background: none;
+  border: none;
+  border-bottom: 2px solid transparent;
+  color: var(--text-dim);
+  font-family: var(--mono);
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.14em;
+  cursor: pointer;
+  transition: color 0.2s, border-color 0.2s;
+}
+.tab-btn:hover { color: var(--text); }
+.tab-btn.active {
+  color: var(--accent);
+  border-bottom-color: var(--accent);
+}
+/* ─── Tab Panels ────────────────────────────────────────────────────────────── */
+.tab-panel { display: none; height: calc(100vh - 52px - 43px); overflow: hidden; }
+.tab-panel.active { display: flex; flex-direction: column; }
+/* ─── Notifications Tab Layout ──────────────────────────────────────────────── */
+#notif-layout {
+  display: grid;
+  grid-template-columns: 300px 1fr 340px;
+  height: 100%;
+  overflow: hidden;
+}
+/* ─── Panel Titles ──────────────────────────────────────────────────────────── */
+.panel-title {
+  font-family: var(--sans);
+  font-weight: 800;
+  font-size: 12px;
+  letter-spacing: 0.18em;
+  color: var(--text-dim);
+  padding: 16px 20px 12px;
+  border-bottom: 1px solid var(--border);
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.badge {
+  background: var(--surface3);
+  color: var(--accent);
+  padding: 1px 7px;
+  border-radius: 99px;
+  font-size: 10px;
+  font-weight: 700;
+}
+/* ─── Left Panel: Create Form ───────────────────────────────────────────────── */
+#create-panel {
+  border-right: 1px solid var(--border);
+  display: flex;
+  flex-direction: column;
+  overflow-y: auto;
+  background: var(--surface);
+}
+.form-group {
+  padding: 10px 20px;
+  border-bottom: 1px solid var(--border);
+}
+.form-group label {
+  display: block;
+  font-size: 10px;
+  letter-spacing: 0.14em;
+  color: var(--text-dim);
+  margin-bottom: 6px;
+  font-weight: 700;
+}
+.form-group input,
+.form-group textarea,
+.form-group select {
+  width: 100%;
+  background: var(--surface2);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  color: var(--text);
+  font-family: var(--mono);
+  font-size: 12px;
+  padding: 8px 10px;
+  outline: none;
+  transition: border-color 0.2s;
+  resize: none;
+}
+.form-group input:focus,
+.form-group textarea:focus,
+.form-group select:focus {
+  border-color: var(--accent);
+}
+.form-group select option { background: var(--surface2); }
+#sound-upload-area {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+.btn-outline {
+  background: none;
+  border: 1px solid var(--border2);
+  color: var(--text-dim);
+  font-family: var(--mono);
+  font-size: 10px;
+  letter-spacing: 0.1em;
+  padding: 7px 12px;
+  border-radius: var(--radius);
+  cursor: pointer;
+  transition: border-color 0.2s, color 0.2s;
+  white-space: nowrap;
+}
+.btn-outline:hover { border-color: var(--accent); color: var(--accent); }
+#sound-file-name {
+  font-size: 11px;
+  color: var(--text-dimmer);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.btn-create {
+  margin: 16px 20px;
+  padding: 14px;
+  background: #1a4a1a;
+  border: 1px solid #2d7a2d;
+  border-radius: var(--radius-lg);
+  color: var(--green);
+  font-family: var(--mono);
+  font-size: 13px;
+  font-weight: 700;
+  letter-spacing: 0.12em;
+  cursor: pointer;
+  transition: background 0.2s, box-shadow 0.2s;
+}
+.btn-create:hover {
+  background: #1f6a1f;
+  box-shadow: 0 0 20px rgba(34, 197, 94, 0.2);
+}
+.btn-create:active { transform: scale(0.98); }
+/* ─── Middle Panel: Notification List ──────────────────────────────────────── */
+#notif-list-panel {
+  border-right: 1px solid var(--border);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+#notif-list {
+  flex: 1;
+  overflow-y: auto;
+}
+.notif-item {
+  padding: 14px 20px;
+  border-bottom: 1px solid var(--border);
+  cursor: pointer;
+  transition: background 0.15s;
+  position: relative;
+}
+.notif-item:hover { background: var(--surface2); }
+.notif-item.selected { background: var(--surface2); border-left: 3px solid var(--accent); }
+.notif-item-name {
+  font-size: 11px;
+  color: var(--text-dimmer);
+  letter-spacing: 0.1em;
+  margin-bottom: 3px;
+}
+.notif-item-heading {
+  font-family: var(--sans);
+  font-weight: 600;
+  font-size: 14px;
+  color: var(--text);
+  margin-bottom: 3px;
+}
+.notif-item-body {
+  font-size: 11px;
+  color: var(--text-dim);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.notif-item-sound {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  margin-top: 6px;
+  font-size: 10px;
+  color: var(--accent-dim);
+  background: rgba(245,166,35,0.08);
+  padding: 2px 7px;
+  border-radius: 3px;
+}
+.empty-state {
+  padding: 40px 20px;
+  text-align: center;
+  color: var(--text-dimmer);
+  font-size: 12px;
+  letter-spacing: 0.08em;
+}
+/* ─── Right Panel: Schedule ─────────────────────────────────────────────────── */
+#schedule-panel {
+  display: flex;
+  flex-direction: column;
+  background: var(--surface);
+  overflow-y: auto;
+}
+.select-hint {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  gap: 12px;
+  color: var(--text-dimmer);
+  text-align: center;
+  line-height: 1.7;
+  font-size: 12px;
+  letter-spacing: 0.06em;
+}
+.select-hint-icon {
+  font-size: 36px;
+  color: var(--border2);
+}
+#schedule-active { padding: 0; display: flex; flex-direction: column; }
+#selected-notif-info {
+  padding: 16px 20px 12px;
+  border-bottom: 1px solid var(--border);
+}
+#selected-notif-name {
+  font-family: var(--sans);
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--text);
+}
+/* ── Big Red Button ── */
+#play-now-btn {
+  margin: 28px 24px 20px;
+  width: calc(100% - 48px);
+  padding: 26px;
+  background: radial-gradient(circle at 40% 35%, #e84040, #8a0000);
+  border: 2px solid #c02020;
+  border-radius: 12px;
+  color: #fff;
+  font-family: var(--sans);
+  font-size: 22px;
+  font-weight: 800;
+  letter-spacing: 0.12em;
+  cursor: pointer;
+  box-shadow:
+    0 0 0 4px rgba(200,0,0,0.15),
+    0 8px 32px rgba(200,0,0,0.35),
+    inset 0 2px 0 rgba(255,255,255,0.12),
+    inset 0 -3px 0 rgba(0,0,0,0.3);
+  position: relative;
+  transition: box-shadow 0.1s, transform 0.1s;
+  text-shadow: 0 1px 3px rgba(0,0,0,0.5);
+}
+#play-now-btn:hover {
+  box-shadow:
+    0 0 0 6px rgba(200,0,0,0.2),
+    0 10px 40px rgba(200,0,0,0.5),
+    inset 0 2px 0 rgba(255,255,255,0.15),
+    inset 0 -3px 0 rgba(0,0,0,0.35);
+  transform: translateY(-1px);
+}
+#play-now-btn:active {
+  transform: translateY(2px);
+  box-shadow:
+    0 0 0 4px rgba(200,0,0,0.12),
+    0 4px 16px rgba(200,0,0,0.3),
+    inset 0 3px 6px rgba(0,0,0,0.4);
+}
+/* ── Schedule Controls ── */
+#schedule-controls {
+  padding: 0 20px 20px;
+}
+.toggle-row {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 14px 0 12px;
+  border-top: 1px solid var(--border);
+}
+.toggle-label {
+  font-size: 11px;
+  letter-spacing: 0.14em;
+  color: var(--text-dim);
+  font-weight: 700;
+}
+/* Toggle Switch */
+.toggle-switch { position: relative; display: inline-block; cursor: pointer; }
+.toggle-switch input { display: none; }
+.toggle-track {
+  display: block;
+  width: 42px;
+  height: 22px;
+  background: var(--surface3);
+  border: 1px solid var(--border2);
+  border-radius: 11px;
+  position: relative;
+  transition: background 0.2s, border-color 0.2s;
+}
+.toggle-thumb {
+  position: absolute;
+  top: 3px;
+  left: 3px;
+  width: 14px;
+  height: 14px;
+  background: var(--text-dimmer);
+  border-radius: 50%;
+  transition: transform 0.25s, background 0.2s;
+}
+.toggle-switch input:checked ~ .toggle-track { background: rgba(245,166,35,0.25); border-color: var(--accent); }
+.toggle-switch input:checked ~ .toggle-track .toggle-thumb { transform: translateX(20px); background: var(--accent); }
+#datetime-pickers {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 10px;
+  margin: 6px 0 14px;
+}
+.picker-group label {
+  display: block;
+  font-size: 10px;
+  letter-spacing: 0.14em;
+  color: var(--text-dim);
+  margin-bottom: 5px;
+  font-weight: 700;
+}
+.picker-group input[type="date"],
+.picker-group input[type="time"] {
+  width: 100%;
+  background: var(--surface2);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  color: var(--text);
+  font-family: var(--mono);
+  font-size: 12px;
+  padding: 8px 8px;
+  outline: none;
+  transition: border-color 0.2s;
+  color-scheme: dark;
+}
+.picker-group input:focus { border-color: var(--accent); }
+.btn-schedule {
+  width: 100%;
+  padding: 12px;
+  background: rgba(245,166,35,0.12);
+  border: 1px solid var(--accent-dim);
+  border-radius: var(--radius-lg);
+  color: var(--accent);
+  font-family: var(--mono);
+  font-size: 12px;
+  font-weight: 700;
+  letter-spacing: 0.12em;
+  cursor: pointer;
+  transition: background 0.2s, box-shadow 0.2s;
+}
+.btn-schedule:hover {
+  background: rgba(245,166,35,0.2);
+  box-shadow: 0 0 16px rgba(245,166,35,0.15);
+}
+/* ─── Devices Tab Layout ─────────────────────────────────────────────────────── */
+#devices-layout {
+  display: grid;
+  grid-template-columns: 280px 1fr;
+  height: 100%;
+  overflow: hidden;
+}
+#device-list-panel {
+  border-right: 1px solid var(--border);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  background: var(--surface);
+}
+#device-list {
+  flex: 1;
+  overflow-y: auto;
+}
+.device-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 14px 20px;
+  border-bottom: 1px solid var(--border);
+  cursor: pointer;
+  transition: background 0.15s;
+}
+.device-item:hover { background: var(--surface2); }
+.device-item.selected { background: var(--surface2); border-left: 3px solid var(--accent); }
+.device-item-info { flex: 1; min-width: 0; }
+.device-item-name {
+  font-family: var(--sans);
+  font-size: 14px;
+  font-weight: 600;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.device-item-uuid {
+  font-size: 10px;
+  color: var(--text-dimmer);
+  letter-spacing: 0.06em;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.device-item-last {
+  font-size: 10px;
+  color: var(--text-dimmer);
+  margin-top: 2px;
+}
+/* ─── Device Detail ──────────────────────────────────────────────────────────── */
+#device-detail-panel {
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+}
+#device-empty-state { flex: 1; }
+#device-detail { padding: 0; }
+#device-header {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  padding: 20px 24px;
+  border-bottom: 1px solid var(--border);
+  background: var(--surface);
+  position: sticky;
+  top: 0;
+  z-index: 10;
+  flex-wrap: wrap;
+}
+.device-detail-name {
+  font-family: var(--sans);
+  font-weight: 800;
+  font-size: 20px;
+}
+.device-detail-uuid {
+  font-size: 10px;
+  color: var(--text-dimmer);
+  letter-spacing: 0.08em;
+  margin-top: 2px;
+}
+#device-name-edit-area {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-left: auto;
+}
+#device-name-input {
+  background: var(--surface2);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  color: var(--text);
+  font-family: var(--mono);
+  font-size: 12px;
+  padding: 6px 10px;
+  outline: none;
+  width: 180px;
+  transition: border-color 0.2s;
+}
+#device-name-input:focus { border-color: var(--accent); }
+.btn-sm {
+  background: none;
+  border: 1px solid var(--border2);
+  border-radius: var(--radius);
+  color: var(--text-dim);
+  font-family: var(--mono);
+  font-size: 10px;
+  letter-spacing: 0.1em;
+  padding: 6px 12px;
+  cursor: pointer;
+  transition: border-color 0.2s, color 0.2s;
+}
+.btn-sm:hover { border-color: var(--accent); color: var(--accent); }
+#device-sections { padding: 16px 24px; display: flex; flex-direction: column; gap: 24px; }
+.device-section h3 {
+  font-size: 10px;
+  letter-spacing: 0.18em;
+  color: var(--text-dimmer);
+  font-weight: 700;
+  margin-bottom: 10px;
+  padding-bottom: 8px;
+  border-bottom: 1px solid var(--border);
+}
+/* Tag List (cached sounds) */
+.tag-list { display: flex; flex-wrap: wrap; gap: 6px; }
+.tag {
+  background: var(--surface3);
+  border: 1px solid var(--border2);
+  color: var(--text-dim);
+  font-size: 11px;
+  padding: 3px 10px;
+  border-radius: 99px;
+  display: flex;
+  align-items: center;
+  gap: 5px;
+}
+.tag-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
+/* Tables */
+.data-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 12px;
+}
+.data-table th {
+  text-align: left;
+  font-size: 10px;
+  letter-spacing: 0.12em;
+  color: var(--text-dimmer);
+  font-weight: 700;
+  padding: 6px 10px;
+  border-bottom: 1px solid var(--border);
+}
+.data-table td {
+  padding: 9px 10px;
+  border-bottom: 1px solid var(--border);
+  color: var(--text-dim);
+  vertical-align: top;
+}
+.data-table tr:last-child td { border-bottom: none; }
+.data-table td:first-child { color: var(--text); }
+.action-btn {
+  background: none;
+  border: 1px solid var(--border2);
+  color: var(--text-dimmer);
+  font-family: var(--mono);
+  font-size: 10px;
+  padding: 3px 8px;
+  border-radius: var(--radius);
+  cursor: pointer;
+  transition: border-color 0.2s, color 0.2s;
+}
+.action-btn:hover { border-color: var(--red); color: var(--red); }
+.action-btn.edit:hover { border-color: var(--accent); color: var(--accent); }
+/* ─── Scrollbar ──────────────────────────────────────────────────────────────── */
+::-webkit-scrollbar { width: 6px; height: 6px; }
+::-webkit-scrollbar-track { background: transparent; }
+::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 3px; }
+::-webkit-scrollbar-thumb:hover { background: var(--text-dimmer); }
+/* ─── Toast ──────────────────────────────────────────────────────────────────── */
+#toast {
+  position: fixed;
+  bottom: 24px;
+  left: 50%;
+  transform: translateX(-50%) translateY(80px);
+  background: var(--surface3);
+  border: 1px solid var(--border2);
+  color: var(--text);
+  font-family: var(--mono);
+  font-size: 12px;
+  padding: 10px 20px;
+  border-radius: var(--radius-lg);
+  box-shadow: 0 4px 20px rgba(0,0,0,0.5);
+  transition: transform 0.3s;
+  z-index: 9999;
+  letter-spacing: 0.06em;
+}
+#toast.show { transform: translateX(-50%) translateY(0); }
+#toast.success { border-color: var(--green); color: var(--green); }
+#toast.error   { border-color: var(--red);   color: var(--red); }

public/index.html ADDED Viewed

	@@ -0,0 +1,14 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <style>
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+    html, body { background: #fff; width: 100%; height: 100%; }
+  </style>
+</head>
+<body>
+  <script src="/script.js"></script>
+</body>
+</html>

public/script.js ADDED Viewed

	@@ -0,0 +1,307 @@

+// ─── Frontend 1: Device Client ────────────────────────────────────────────────
+// Responsibilities:
+//  - Negotiate UUID with server
+//  - Keep notifications + schedule in localStorage
+//  - Cache sounds in localStorage
+//  - Request notification permission and show notifications
+//  - Schedule notifications to fire at the right time
+const LS = {
+  get: (k) => { try { return JSON.parse(localStorage.getItem(k)); } catch { return null; } },
+  set: (k, v) => { try { localStorage.setItem(k, JSON.stringify(v)); } catch {} },
+};
+const STORAGE_UUID          = 'device_uuid';
+const STORAGE_NOTIFICATIONS = 'device_notifications';
+const STORAGE_SCHEDULE      = 'device_schedule';
+const STORAGE_SOUNDS        = 'device_sounds';       // { [soundId]: base64 }
+const STORAGE_NAME          = 'device_name';
+let ws = null;
+let reconnectTimer = null;
+let scheduledTimers = {};  // notifId -> timeoutId
+let cachedSounds = LS.get(STORAGE_SOUNDS) || {};
+// ─── Notification Permission ──────────────────────────────────────────────────
+if ('Notification' in window && Notification.permission === 'default') {
+  Notification.requestPermission();
+}
+// ─── WebSocket Connection ─────────────────────────────────────────────────────
+function connect() {
+  const proto = location.protocol === 'https:' ? 'wss' : 'wss';
+  ws = new WebSocket(`${proto}://${location.host}/device-ws`);
+  ws.addEventListener('open', () => {
+    console.log('[WS] connected');
+    clearTimeout(reconnectTimer);
+    const uuid = LS.get(STORAGE_UUID);
+    // Introduce ourselves
+    send({ type: 'hello', uuid });
+    // Report cached sounds
+    send({ type: 'cached_sounds', soundIds: Object.keys(cachedSounds) });
+  });
+  ws.addEventListener('message', (e) => {
+    let msg;
+    try { msg = JSON.parse(e.data); } catch { return; }
+    handleMessage(msg);
+  });
+  ws.addEventListener('close', () => {
+    console.log('[WS] closed, reconnecting in 3s...');
+    reconnectTimer = setTimeout(connect, 3000);
+  });
+  ws.addEventListener('error', () => {
+    ws.close();
+  });
+}
+function send(msg) {
+  if (ws && ws.readyState === WebSocket.OPEN) {
+    ws.send(JSON.stringify(msg));
+  }
+}
+// ─── Message Handler ──────────────────────────────────────────────────────────
+function handleMessage(msg) {
+  switch (msg.type) {
+    case 'device_init': {
+      // Server assigns/confirms UUID and sends all notifications + schedule
+      LS.set(STORAGE_UUID, msg.uuid);
+      LS.set(STORAGE_NAME, msg.name);
+      mergeNotifications(msg.notifications || []);
+      LS.set(STORAGE_SCHEDULE, msg.schedule || []);
+      ensureSounds();
+      rescheduleAll();
+      break;
+    }
+    case 'notification_added': {
+      const notifs = LS.get(STORAGE_NOTIFICATIONS) || [];
+      if (!notifs.find(n => n.id === msg.notification.id)) {
+        notifs.push(msg.notification);
+        LS.set(STORAGE_NOTIFICATIONS, notifs);
+        ensureSoundForNotif(msg.notification);
+      }
+      break;
+    }
+    case 'schedule_update': {
+      LS.set(STORAGE_SCHEDULE, msg.schedule || []);
+      rescheduleAll();
+      break;
+    }
+    case 'play_now': {
+      const notifs = LS.get(STORAGE_NOTIFICATIONS) || [];
+      const notif = notifs.find(n => n.id === msg.notificationId);
+      if (notif) fireNotification(notif);
+      break;
+    }
+    case 'name_update': {
+      LS.set(STORAGE_NAME, msg.name);
+      break;
+    }
+    case 'sound_data': {
+      // Server sent us a sound we requested
+      const sound = msg.sound;
+      cachedSounds[sound.id] = { data: sound.data, name: sound.name };
+      LS.set(STORAGE_SOUNDS, cachedSounds);
+      send({ type: 'cached_sounds', soundIds: Object.keys(cachedSounds) });
+      break;
+    }
+    default:
+      break;
+  }
+}
+// ─── Merge Notifications ──────────────────────────────────────────────────────
+function mergeNotifications(incoming) {
+  const local = LS.get(STORAGE_NOTIFICATIONS) || [];
+  const localMap = {};
+  for (const n of local) localMap[n.id] = n;
+  for (const n of incoming) {
+    if (!localMap[n.id]) {
+      localMap[n.id] = n;
+    } else {
+      // preserve local displayed status if already true
+      if (localMap[n.id].displayed) n.displayed = true;
+      localMap[n.id] = { ...localMap[n.id], ...n };
+    }
+  }
+  LS.set(STORAGE_NOTIFICATIONS, Object.values(localMap));
+}
+// ─── Sound Fetching ────────────────────────────���──────────────────────────────
+function ensureSounds() {
+  const notifs = LS.get(STORAGE_NOTIFICATIONS) || [];
+  for (const n of notifs) ensureSoundForNotif(n);
+}
+function ensureSoundForNotif(notif) {
+  if (notif.soundId && !cachedSounds[notif.soundId]) {
+    send({ type: 'request_sound', soundId: notif.soundId });
+  }
+}
+// ─── Scheduling ───────────────────────────────────────────────────────────────
+function rescheduleAll() {
+  // Clear all existing timers
+  for (const id of Object.keys(scheduledTimers)) {
+    clearTimeout(scheduledTimers[id]);
+  }
+  scheduledTimers = {};
+  const schedule = LS.get(STORAGE_SCHEDULE) || [];
+  const notifs   = LS.get(STORAGE_NOTIFICATIONS) || [];
+  const now      = Date.now();
+  for (const entry of schedule) {
+    const notif = notifs.find(n => n.id === entry.notificationId);
+    if (!notif) continue;
+    const delay = entry.scheduledAt - now;
+    if (delay <= 0) {
+      // Missed — fire immediately if not displayed
+      if (!notif.displayed) {
+        fireNotification(notif);
+      }
+    } else {
+      scheduledTimers[notif.id] = setTimeout(() => {
+        const freshNotifs = LS.get(STORAGE_NOTIFICATIONS) || [];
+        const fresh = freshNotifs.find(n => n.id === notif.id);
+        if (fresh && !fresh.displayed) fireNotification(fresh);
+      }, delay);
+    }
+  }
+}
+// ─── Fire a Notification ──────────────────────────────────────────────────────
+function fireNotification(notif) {
+  // Play sound
+  if (notif.soundId && cachedSounds[notif.soundId]) {
+    playBase64Audio(cachedSounds[notif.soundId].data);
+  }
+  // Show browser notification
+  if ('Notification' in window && Notification.permission === 'granted') {
+    const n = new Notification(notif.heading || notif.name, {
+      body: notif.body,
+      requireInteraction: true,
+    });
+    if (notif.hyperlink) {
+      n.addEventListener('click', () => {
+        window.open(notif.hyperlink, '_blank');
+        n.close();
+      });
+    }
+  } else {
+    // Fallback: in-page notification banner
+    showInPageBanner(notif);
+  }
+  // Mark displayed
+  markDisplayed(notif.id);
+}
+function showInPageBanner(notif) {
+  const banner = document.createElement('div');
+  Object.assign(banner.style, {
+    position: 'fixed',
+    bottom: '20px',
+    right: '20px',
+    background: '#222',
+    color: '#fff',
+    padding: '16px 24px',
+    borderRadius: '8px',
+    boxShadow: '0 4px 20px rgba(0,0,0,0.4)',
+    zIndex: '99999',
+    cursor: notif.hyperlink ? 'pointer' : 'default',
+    maxWidth: '320px',
+    fontFamily: 'sans-serif',
+  });
+  banner.innerHTML = `<strong>${escapeHtml(notif.heading)}</strong><br>${escapeHtml(notif.body)}`;
+  if (notif.hyperlink) {
+    banner.addEventListener('click', () => window.open(notif.hyperlink, '_blank'));
+  }
+  document.body.appendChild(banner);
+  setTimeout(() => banner.remove(), 10000);
+}
+function escapeHtml(str) {
+  return String(str || '').replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
+}
+function markDisplayed(notifId) {
+  const notifs = LS.get(STORAGE_NOTIFICATIONS) || [];
+  const notif = notifs.find(n => n.id === notifId);
+  if (notif) {
+    notif.displayed = true;
+    LS.set(STORAGE_NOTIFICATIONS, notifs);
+  }
+  send({ type: 'mark_displayed', notificationId: notifId });
+}
+// ─── Audio Playback ───────────────────────────────────────────────────────────
+function playBase64Audio(base64Data) {
+  try {
+    // Try direct audio element
+    const audio = new Audio(`data:audio/mpeg;base64,${base64Data}`);
+    audio.play().catch(() => {
+      // Fallback: decode with AudioContext
+      playWithAudioContext(base64Data);
+    });
+  } catch {
+    playWithAudioContext(base64Data);
+  }
+}
+function playWithAudioContext(base64Data) {
+  try {
+    const ctx = new (window.AudioContext || window.webkitAudioContext)();
+    const binary = atob(base64Data);
+    const bytes = new Uint8Array(binary.length);
+    for (let i = 0; i < binary.length; i++) bytes[i] = binary.charCodeAt(i);
+    ctx.decodeAudioData(bytes.buffer, (buf) => {
+      const src = ctx.createBufferSource();
+      src.buffer = buf;
+      src.connect(ctx.destination);
+      src.start(0);
+    });
+  } catch (e) {
+    console.warn('[Audio] playback failed:', e);
+  }
+}
+// ─── localStorage change listener ─────────────────────────────────────────────
+window.addEventListener('storage', (e) => {
+  if (e.key === STORAGE_SCHEDULE || e.key === STORAGE_NOTIFICATIONS) {
+    rescheduleAll();
+  }
+});
+// ─── Check missed notifications on load ──────────────────────────────────────
+function checkMissedOnLoad() {
+  const schedule = LS.get(STORAGE_SCHEDULE) || [];
+  const notifs   = LS.get(STORAGE_NOTIFICATIONS) || [];
+  const now      = Date.now();
+  for (const entry of schedule) {
+    if (entry.scheduledAt <= now) {
+      const notif = notifs.find(n => n.id === entry.notificationId);
+      if (notif && !notif.displayed) fireNotification(notif);
+    }
+  }
+}
+// ─── Boot ─────────────────────────────────────────────────────────────────────
+checkMissedOnLoad();
+rescheduleAll();
+connect();

server.js ADDED Viewed

	@@ -0,0 +1,378 @@

+const https = require('https');
+const fs = require('fs');
+const path = require('path');
+const { WebSocketServer, WebSocket } = require('ws');
+const { v4: uuidv4 } = require('uuid');
+// ─── TLS ──────────────────────────────────────────────────────────────────────
+const serverOptions = {
+  cert: fs.readFileSync('cert.pem'),
+  key: fs.readFileSync('key.pem'),
+};
+// ─── In-Memory State ──────────────────────────────────────────────────────────
+// sounds[id] = { id, name, data }          (data = base64 string)
+// notifications[id] = { id, name, heading, body, hyperlink, displayed, soundId }
+// devices[uuid] = { uuid, name, notifications: [...], lastConnection, pendingChanges: [...], schedule: [...] }
+const sounds = {};
+const notifications = {};
+const devices = {};
+// ─── Live Connection Maps ─────────────────────────────────────────────────────
+// deviceClients: uuid -> WebSocket   (Frontend 1 connections)
+// adminClients: Set<WebSocket>        (Frontend 2 connections)
+const deviceClients = {};
+const adminClients = new Set();
+// ─── MIME Types ───────────────────────────────────────────────────────────────
+const MIME = {
+  '.html': 'text/html',
+  '.js':   'application/javascript',
+  '.css':  'text/css',
+  '.json': 'application/json',
+  '.png':  'image/png',
+  '.ico':  'image/x-icon',
+};
+// ─── HTTP File Server ─────────────────────────────────────────────────────────
+const httpServer = https.createServer(serverOptions, (req, res) => {
+  let urlPath = req.url.split('?')[0];
+  if (urlPath === '/' || urlPath === '') urlPath = '/index.html';
+  if (urlPath === '/admin' || urlPath === '/admin/') urlPath = '/admin/index.html';
+  const filePath = path.join(__dirname, 'public', urlPath);
+  const ext = path.extname(filePath);
+  const mime = MIME[ext] || 'application/octet-stream';
+  fs.readFile(filePath, (err, data) => {
+    if (err) {
+      res.writeHead(404, { 'Content-Type': 'text/plain' });
+      res.end('Not found');
+      return;
+    }
+    res.writeHead(200, { 'Content-Type': mime });
+    res.end(data);
+  });
+});
+// ─── WebSocket Server ─────────────────────────────────────────────────────────
+const wss = new WebSocketServer({ server: httpServer });
+wss.on('connection', (ws, req) => {
+  const urlPath = req.url || '/';
+  const isAdmin = urlPath.startsWith('/admin-ws');
+  if (isAdmin) {
+    handleAdminConnection(ws);
+  } else {
+    handleDeviceConnection(ws);
+  }
+});
+// ─── Helpers ──────────────────────────────────────────────────────────────────
+function send(ws, msg) {
+  if (ws.readyState === WebSocket.OPEN) {
+    ws.send(JSON.stringify(msg));
+  }
+}
+function broadcastAdmin(msg) {
+  for (const ws of adminClients) {
+    send(ws, msg);
+  }
+}
+function broadcastDevice(uuid, msg) {
+  const ws = deviceClients[uuid];
+  if (ws) send(ws, msg);
+}
+function broadcastAllDevices(msg) {
+  for (const uuid of Object.keys(deviceClients)) {
+    broadcastDevice(uuid, msg);
+  }
+}
+function getFullState() {
+  return {
+    sounds: Object.values(sounds),
+    notifications: Object.values(notifications),
+    devices: Object.values(devices).map(devicePublic),
+  };
+}
+function devicePublic(d) {
+  return {
+    uuid: d.uuid,
+    name: d.name,
+    notifications: d.notifications,
+    lastConnection: d.lastConnection,
+    schedule: d.schedule || [],
+    pendingChanges: d.pendingChanges || [],
+    online: !!deviceClients[d.uuid],
+  };
+}
+// ─── Admin Connection Handler ─────────────────────────────────────────────────
+function handleAdminConnection(ws) {
+  adminClients.add(ws);
+  console.log(`[Admin] connected, total=${adminClients.size}`);
+  // Send full state immediately
+  send(ws, { type: 'full_state', ...getFullState() });
+  ws.on('message', (raw) => {
+    let msg;
+    try { msg = JSON.parse(raw); } catch { return; }
+    handleAdminMessage(ws, msg);
+  });
+  ws.on('close', () => {
+    adminClients.delete(ws);
+    console.log(`[Admin] disconnected, total=${adminClients.size}`);
+  });
+  ws.on('error', (e) => console.error('[Admin] WS error', e.message));
+}
+function handleAdminMessage(ws, msg) {
+  switch (msg.type) {
+    case 'create_sound': {
+      // msg: { name, data }
+      const id = uuidv4();
+      const sound = { id, name: msg.name, data: msg.data };
+      sounds[id] = sound;
+      broadcastAdmin({ type: 'sound_added', sound });
+      // Don't push sound data to all devices here — devices pull sounds on demand
+      break;
+    }
+    case 'create_notification': {
+      // msg: { name, heading, body, hyperlink, soundId }
+      const id = uuidv4();
+      const notif = {
+        id,
+        name: msg.name,
+        heading: msg.heading,
+        body: msg.body,
+        hyperlink: msg.hyperlink || '',
+        displayed: false,
+        soundId: msg.soundId || null,
+      };
+      notifications[id] = notif;
+      // Add to all devices
+      for (const uuid of Object.keys(devices)) {
+        if (!devices[uuid].notifications.find(n => n.id === id)) {
+          devices[uuid].notifications.push({ ...notif });
+        }
+      }
+      broadcastAdmin({ type: 'notification_added', notification: notif });
+      broadcastAdmin({ type: 'devices_updated', devices: Object.values(devices).map(devicePublic) });
+      // Push to all connected devices
+      broadcastAllDevices({ type: 'notification_added', notification: notif });
+      break;
+    }
+    case 'schedule_notification': {
+      // msg: { uuid, notificationId, scheduledAt }
+      const device = devices[msg.uuid];
+      if (!device) return;
+      device.schedule = device.schedule || [];
+      const existing = device.schedule.find(s => s.notificationId === msg.notificationId);
+      if (existing) {
+        existing.scheduledAt = msg.scheduledAt;
+      } else {
+        device.schedule.push({ notificationId: msg.notificationId, scheduledAt: msg.scheduledAt });
+      }
+      const scheduleMsg = { type: 'schedule_update', schedule: device.schedule };
+      if (deviceClients[msg.uuid]) {
+        broadcastDevice(msg.uuid, scheduleMsg);
+      } else {
+        device.pendingChanges = device.pendingChanges || [];
+        device.pendingChanges.push(scheduleMsg);
+      }
+      broadcastAdmin({ type: 'devices_updated', devices: Object.values(devices).map(devicePublic) });
+      break;
+    }
+    case 'play_now': {
+      // msg: { uuid, notificationId }
+      const playMsg = { type: 'play_now', notificationId: msg.notificationId };
+      if (deviceClients[msg.uuid]) {
+        broadcastDevice(msg.uuid, playMsg);
+      } else {
+        const device = devices[msg.uuid];
+        if (device) {
+          device.pendingChanges = device.pendingChanges || [];
+          device.pendingChanges.push(playMsg);
+        }
+      }
+      break;
+    }
+    case 'update_device_name': {
+      // msg: { uuid, name }
+      const device = devices[msg.uuid];
+      if (!device) return;
+      device.name = msg.name;
+      const nameMsg = { type: 'name_update', name: msg.name };
+      if (deviceClients[msg.uuid]) {
+        broadcastDevice(msg.uuid, nameMsg);
+      } else {
+        device.pendingChanges = device.pendingChanges || [];
+        device.pendingChanges.push(nameMsg);
+      }
+      broadcastAdmin({ type: 'devices_updated', devices: Object.values(devices).map(devicePublic) });
+      break;
+    }
+    case 'remove_schedule': {
+      // msg: { uuid, notificationId }
+      const device = devices[msg.uuid];
+      if (!device) return;
+      device.schedule = (device.schedule || []).filter(s => s.notificationId !== msg.notificationId);
+      const rmMsg = { type: 'schedule_update', schedule: device.schedule };
+      if (deviceClients[msg.uuid]) {
+        broadcastDevice(msg.uuid, rmMsg);
+      } else {
+        device.pendingChanges = device.pendingChanges || [];
+        device.pendingChanges.push(rmMsg);
+      }
+      broadcastAdmin({ type: 'devices_updated', devices: Object.values(devices).map(devicePublic) });
+      break;
+    }
+    case 'request_sound': {
+      // admin wants a specific sound by id
+      const sound = sounds[msg.id];
+      if (sound) send(ws, { type: 'sound_data', sound });
+      break;
+    }
+    default:
+      console.warn('[Admin] unknown message type:', msg.type);
+  }
+}
+// ─── Device Connection Handler ────────────────────────────────────────────────
+function handleDeviceConnection(ws) {
+  let deviceUUID = null;
+  console.log('[Device] new connection (uuid pending)');
+  ws.on('message', (raw) => {
+    let msg;
+    try { msg = JSON.parse(raw); } catch { return; }
+    if (msg.type === 'hello') {
+      // Device introduces itself with optional uuid
+      if (msg.uuid && devices[msg.uuid]) {
+        deviceUUID = msg.uuid;
+      } else {
+        // New device
+        deviceUUID = msg.uuid || uuidv4();
+        devices[deviceUUID] = {
+          uuid: deviceUUID,
+          name: `Device ${Object.keys(devices).length + 1}`,
+          notifications: Object.values(notifications).map(n => ({ ...n })),
+          lastConnection: null,
+          schedule: [],
+          pendingChanges: [],
+        };
+      }
+      deviceClients[deviceUUID] = ws;
+      const device = devices[deviceUUID];
+      device.lastConnection = null; // online
+      // Deliver any pending changes
+      if (device.pendingChanges && device.pendingChanges.length > 0) {
+        for (const change of device.pendingChanges) {
+          send(ws, change);
+        }
+        device.pendingChanges = [];
+      }
+      // Send device its full state
+      send(ws, {
+        type: 'device_init',
+        uuid: deviceUUID,
+        notifications: device.notifications,
+        schedule: device.schedule,
+        name: device.name,
+      });
+      // Tell admin about new/reconnected device
+      broadcastAdmin({ type: 'devices_updated', devices: Object.values(devices).map(devicePublic) });
+      console.log(`[Device] ${deviceUUID} connected (${device.name})`);
+      return;
+    }
+    if (!deviceUUID) return; // not initialized
+    handleDeviceMessage(ws, deviceUUID, msg);
+  });
+  ws.on('close', () => {
+    if (deviceUUID && devices[deviceUUID]) {
+      devices[deviceUUID].lastConnection = Date.now();
+      delete deviceClients[deviceUUID];
+      broadcastAdmin({ type: 'devices_updated', devices: Object.values(devices).map(devicePublic) });
+      console.log(`[Device] ${deviceUUID} disconnected`);
+    }
+  });
+  ws.on('error', (e) => console.error('[Device] WS error', e.message));
+}
+function handleDeviceMessage(ws, uuid, msg) {
+  const device = devices[uuid];
+  if (!device) return;
+  switch (msg.type) {
+    case 'mark_displayed': {
+      // msg: { notificationId }
+      const notif = device.notifications.find(n => n.id === msg.notificationId);
+      if (notif) notif.displayed = true;
+      // Also mark in master list
+      if (notifications[msg.notificationId]) {
+        notifications[msg.notificationId].displayed = true;
+      }
+      broadcastAdmin({ type: 'devices_updated', devices: Object.values(devices).map(devicePublic) });
+      break;
+    }
+    case 'request_sound': {
+      // Device needs sound data for a notification
+      const sound = sounds[msg.soundId];
+      if (sound) {
+        send(ws, { type: 'sound_data', sound });
+      }
+      break;
+    }
+    case 'sync_schedule': {
+      // Device reports its current schedule (for reconciliation)
+      device.schedule = msg.schedule || [];
+      broadcastAdmin({ type: 'devices_updated', devices: Object.values(devices).map(devicePublic) });
+      break;
+    }
+    case 'cached_sounds': {
+      // Device reports which sound IDs it has cached
+      device.cachedSounds = msg.soundIds || [];
+      broadcastAdmin({ type: 'devices_updated', devices: Object.values(devices).map(devicePublic) });
+      break;
+    }
+    default:
+      console.warn('[Device] unknown message type:', msg.type);
+  }
+}
+// ─── Start ────────────────────────────────────────────────────────────────────
+const PORT = process.env.PORT || 7860;
+httpServer.listen(PORT, () => {
+  console.log(`Server running on https://0.0.0.0:${PORT}`);
+});