73 lines
3.2 KiB
HTML
73 lines
3.2 KiB
HTML
<!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 — 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">…</span>
|
||
<span class="k">page url</span><span id="href">…</span>
|
||
<span class="k">user agent</span><span id="ua">…</span>
|
||
<span class="k">screen</span><span id="screen">…</span>
|
||
</div>
|
||
<footer>boot HTTP server · 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>
|