Kiosk start, offline and setup pages in the InfoFlow display style

Dark grey background, name top left, date and clock top right, a flat
panel with a blue top edge. The pages show the kiosk link (token masked)
and the management address; the clock code is shared in kiosk.js.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

www/start.html

@@ -6,18 +6,31 @@
   <link rel="stylesheet" href="kiosk.css">
 </head>
 <body>
-  <main class="stage">
-    <img class="logo" src="logo.svg" alt="">
-    <div class="device" id="device"></div>
-    <h1>Bezig met laden…</h1>
-    <p>De pagina wordt geopend zodra de verbinding gereed is.</p>
-    <div class="spinner" aria-hidden="true"></div>
-  </main>
+  <div class="screen">
+    <header class="top">
+      <div class="name" id="name"></div>
+      <div class="when">
+        <div class="date" id="date"></div>
+        <div class="clock" id="clock">--:--</div>
+      </div>
+    </header>
+    <main class="middle">
+      <section class="panel">
+        <h1>Laden…</h1>
+        <p>Het scherm wordt geopend zodra de verbinding klaar is.</p>
+        <div class="progress" aria-hidden="true"><span></span></div>
+        <div class="link" id="link">Pagina: <span class="url" id="link-url"></span></div>
+      </section>
+    </main>
+    <footer class="bottom">
+      <span id="admin"></span>
+      <span>VoxIP Kiosk</span>
+    </footer>
+  </div>
+  <script src="kiosk.js"></script>
   <script>
     // The kiosk agent normally navigates away from this page within seconds.
     // If the agent is not running, open the configured URL ourselves.
-    const params = new URLSearchParams(location.search);
-    document.getElementById("device").textContent = params.get("name") || "";
     const next = params.get("next") || "";
     if (next.startsWith("https://")) {
       setTimeout(() => location.replace(next), 45000);