Adding Plymouth

2026-06-17 14:28:27 +00:00
parent 55aa517976
commit 3ef34745c9
11 changed files with 188 additions and 18 deletions
@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<!--
+  Kiosk test page — served by the lab boot HTTP server (nginx) at /kiosk/, NOT
+  baked into the OCI artifact image (that stays FROM-scratch: UKI + rootfs only).
+  The diskless kiosk (weston + Chromium) loads this instead of an internet site,
+  so a boot is validated end-to-end without external connectivity: DNS resolves
+  boot.fleet.lab via dnsmasq, HTTP fetches from the serving host, and Chromium
+  renders it. Fully self-contained (no external fonts/CDN) so it works offline.
+-->
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>Fleet Kiosk — Boot OK</title>
+<style>
+  :root { --fg: #00ffd0; --dim: #4a8c84; --bg: #040a0d; --accent: #ff2e88; }
+  * { box-sizing: border-box; }
+  html, body { height: 100%; margin: 0; }
+  body {
+    background: radial-gradient(circle at 50% 30%, #0a1620 0%, var(--bg) 70%);
+    color: var(--fg);
+    font-family: "DejaVu Sans Mono", ui-monospace, monospace;
+    display: flex; flex-direction: column;
+    align-items: center; justify-content: center;
+    text-align: center; gap: 1.2rem; padding: 2rem;
+    overflow: hidden;
+  }
+  h1 { font-size: clamp(2rem, 7vw, 5rem); margin: 0; letter-spacing: .15em;
+       text-shadow: 0 0 18px var(--fg); }
+  .ok { color: var(--accent); text-shadow: 0 0 18px var(--accent); }
+  .sub { color: var(--dim); font-size: clamp(.9rem, 2.2vw, 1.3rem);
+         letter-spacing: .1em; }
+  .grid { display: grid; grid-template-columns: auto auto; gap: .35rem 1.2rem;
+          margin-top: 1rem; font-size: clamp(.8rem, 1.8vw, 1.1rem);
+          text-align: left; }
+  .grid .k { color: var(--dim); }
+  .clock { font-size: clamp(1.4rem, 4vw, 2.4rem); text-shadow: 0 0 12px var(--fg); }
+  .bar { width: min(60vw, 520px); height: 3px; background: var(--dim); opacity:.4;
+         border-radius: 2px; }
+  footer { position: fixed; bottom: 1rem; color: var(--dim); font-size: .8rem;
+           letter-spacing: .1em; }
+</style>
+</head>
+<body>
+  <h1><span class="ok">▣</span> FLEET KIOSK ONLINE</h1>
+  <div class="sub">diskless boot validated &mdash; weston + chromium rendering local HTTP</div>
+  <div class="bar"></div>
+  <div class="clock" id="clock">--:--:--</div>
+  <div class="grid">
+    <span class="k">served from</span><span id="origin">&hellip;</span>
+    <span class="k">page url</span><span id="href">&hellip;</span>
+    <span class="k">user agent</span><span id="ua">&hellip;</span>
+    <span class="k">screen</span><span id="screen">&hellip;</span>
+  </div>
+  <footer>boot HTTP server &middot; replace this page or point kiosk_url elsewhere</footer>
+<script>
+  // Live clock proves JS executes; the origin/href confirm where it was fetched.
+  function pad(n){ return String(n).padStart(2,'0'); }
+  function tick(){
+    var d = new Date();
+    document.getElementById('clock').textContent =
+      pad(d.getHours())+':'+pad(d.getMinutes())+':'+pad(d.getSeconds());
+  }
+  setInterval(tick, 1000); tick();
+  document.getElementById('origin').textContent = location.host || '(file)';
+  document.getElementById('href').textContent = location.href;
+  document.getElementById('ua').textContent = navigator.userAgent;
+  document.getElementById('screen').textContent =
+    window.innerWidth + '×' + window.innerHeight;
+</script>
+</body>
+</html>