rothman/daynivo-kiosk-os
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 3 Wiki Activity

Kiosk start, offline and setup pages in the InfoFlow display style
CI / test-bookworm (push) Failing after 2s
Details
CI / test-latest (push) Successful in 31s
Details

Browse Source 
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>
This commit is contained in:
rothmanandClaude Opus 5.5 committed 2026-11-04 23:13:03 +01:00
1 parent efc581e0ae
commit 19595aaf39
11 files changed
+169 -89
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

www/offline.html
+29 -34
View File
@@ -6,50 +6,45 @@
<link rel="stylesheet" href="kiosk.css">
</head>
<body>
<main class="stage" id="stage">
<img class="logo" src="logo.svg" alt="">
<div class="device" id="device"></div>
<h1>De informatie is tijdelijk niet beschikbaar</h1>
<p id="detail">Er is op dit moment geen verbinding met de server.</p>
<div class="clock" id="clock">--:--</div>
<div class="date" id="date"></div>
<div class="status"><span class="dot" aria-hidden="true"></span><span id="status">Automatisch opnieuw verbinden…</span></div>
</main>
<div class="screen" id="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>Geen verbinding</h1>
<p>De informatie is tijdelijk niet beschikbaar. Het scherm verbindt automatisch opnieuw.</p>
<p id="since" hidden></p>
<div class="link" id="link">Pagina: <span class="url" id="link-url"></span><br><span id="reason"></span></div>
</section>
</main>
<footer class="bottom">
<span id="admin"></span>
<span>VoxIP Kiosk</span>
</footer>
</div>
<script src="kiosk.js"></script>
<script>
const params = new URLSearchParams(location.search);
const fmtTime = new Intl.DateTimeFormat("nl-NL", { hour: "2-digit", minute: "2-digit" });
const fmtDate = new Intl.DateTimeFormat("nl-NL", { weekday: "long", day: "numeric", month: "long", year: "numeric" });
document.getElementById("device").textContent = params.get("name") || "";
const host = params.get("host");
const reason = params.get("reason");
if (host) {
document.getElementById("detail").textContent =
"Geen verbinding met " + host + (reason ? " (" + reason + ")" : "") + ".";
}
setText("reason", reason ? "Reden: " + reason : "");
const since = Number(params.get("since")) * 1000;
function tick() {
const now = new Date();
document.getElementById("clock").textContent = fmtTime.format(now);
const date = fmtDate.format(now);
document.getElementById("date").textContent = date.charAt(0).toUpperCase() + date.slice(1);
if (since) {
const minutes = Math.floor((now - since) / 60000);
document.getElementById("status").textContent = minutes >= 1
? "Offline sinds " + fmtTime.format(new Date(since)) + " — automatisch opnieuw verbinden…"
: "Automatisch opnieuw verbinden…";
}
if (since) {
const el = document.getElementById("since");
el.textContent = "Offline sinds " + fmtTime.format(new Date(since)) + ".";
el.hidden = false;
}
tick();
setInterval(tick, 1000);
// Shift the content slowly to avoid burn-in on screens that stay offline for long.
// Shift everything slowly to avoid burn-in on screens that stay offline for long.
let step = 0;
setInterval(() => {
step = (step + 1) % 8;
const dx = [0, 12, 24, 12, 0, -12, -24, -12][step];
const dy = [0, -8, 0, 8, 0, -8, 0, 8][step];
document.getElementById("stage").style.transform = "translate(" + dx + "px," + dy + "px)";
document.getElementById("screen").style.transform = "translate(" + dx + "px," + dy + "px)";
}, 60000);
</script>
</body>