initial commit

2026-08-01 12:07:22 +02:00
commit 40260afeeb
8 changed files with 562 additions and 0 deletions
@@ -0,0 +1,76 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Signal Light Control</title>
+  <link rel="stylesheet" href="/static/app.css">
+</head>
+<body>
+  <main class="shell">
+    <header class="header">
+      <div>
+        <p class="eyebrow">Raspberry Pi Control Panel</p>
+        <h1>Signal Light Controller</h1>
+        <p class="subtitle">REST API: <code>{{api_base_url}}</code></p>
+      </div>
+      <div id="connectionBadge" class="badge badge--checking">Checking…</div>
+    </header>
+
+    <section class="panel" aria-labelledby="light-heading">
+      <div class="section-title">
+        <div>
+          <h2 id="light-heading">Light color</h2>
+          <p>Only one color can be active at a time.</p>
+        </div>
+        <strong id="activeColorText">Off</strong>
+      </div>
+
+      <div class="traffic-light" aria-label="Current signal-light state">
+        <button class="lamp lamp--green" data-color="green" aria-label="Activate green light">
+          <span></span><b>Green</b>
+        </button>
+        <button class="lamp lamp--yellow" data-color="yellow" aria-label="Activate yellow light">
+          <span></span><b>Yellow</b>
+        </button>
+        <button class="lamp lamp--red" data-color="red" aria-label="Activate red light">
+          <span></span><b>Red</b>
+        </button>
+      </div>
+    </section>
+
+    <section class="controls-grid">
+      <article class="panel control-card">
+        <div>
+          <p class="eyebrow">Independent output</p>
+          <h2>Alert buzzer</h2>
+          <p>The buzzer blinks independently of the selected light.</p>
+        </div>
+        <button id="alertToggle" class="toggle" type="button" role="switch" aria-checked="false">
+          <span class="toggle__track"><span class="toggle__thumb"></span></span>
+          <span id="alertToggleLabel">Off</span>
+        </button>
+      </article>
+
+      <article class="panel control-card">
+        <div>
+          <p class="eyebrow">Automatic sequence</p>
+          <h2>Demo mode</h2>
+          <p>Cycles green → yellow → red → yellow.</p>
+        </div>
+        <button id="demoToggle" class="toggle" type="button" role="switch" aria-checked="false">
+          <span class="toggle__track"><span class="toggle__thumb"></span></span>
+          <span id="demoToggleLabel">Off</span>
+        </button>
+      </article>
+    </section>
+
+    <section class="panel footer-actions">
+      <button id="allOffButton" class="danger-button" type="button">Turn everything off</button>
+      <p id="message" class="message" role="status" aria-live="polite">Ready.</p>
+    </section>
+  </main>
+
+  <script src="/static/app.js" defer></script>
+</body>
+</html>