wasted.audio/fdhview
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

better align clock and logo; made clock more dynamic

Browse Source
This commit is contained in:
dreamer committed 2026-10-13 19:25:14 +02:00
1 parent 7330e296e4
commit c82600632b
3 files changed
+24 -9
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

fdhview/html/info.html
+1 -1
View File
@@ -17,7 +17,7 @@
<aside class="sidebar"> <aside class="sidebar">
<div class="top"> <div class="top">
<div class="date" id="date"></div> <div class="date" id="date"></div>
<div class="logo"><img src="/static/Logo.svg" alt="Filmhuis Den Haag" style="width: 100%; height: auto; filter: invert(1);"></div> <div class="logo"><img src="/static/Logo.svg" alt="Filmhuis Den Haag"></div>
</div> </div>
<h2>Prijzen</h2> <h2>Prijzen</h2>
<div id="prijzen"></div> <div id="prijzen"></div>
fdhview/static/info.js
+2 -1
View File
@@ -51,7 +51,7 @@ function renderClock() {
const d = new Date(); const d = new Date();
const hh = String(d.getHours()).padStart(2, "0"); const hh = String(d.getHours()).padStart(2, "0");
const mm = String(d.getMinutes()).padStart(2, "0"); const mm = String(d.getMinutes()).padStart(2, "0");
document.getElementById("date").textContent = `${hh} ${mm}`; document.getElementById("date").innerHTML = `${hh}<span class="colon">:</span>${mm}`;
} }
async function refresh() { async function refresh() {
@@ -68,6 +68,7 @@ async function refresh() {
} }
renderClock(); renderClock();
setInterval(renderClock, 1_000); // every second: updates minutes + blinks the colon
refresh(); // initial paint refresh(); // initial paint
setInterval(refresh, POLL_MS); // poll every 5 minutes setInterval(refresh, POLL_MS); // poll every 5 minutes
setInterval(renderClock, 30_000); // keep the clock accurate setInterval(renderClock, 30_000); // keep the clock accurate
fdhview/static/style.css
+21 -7
View File
@@ -14,7 +14,7 @@ body {
color: var(--ink); color: var(--ink);
overflow: hidden; overflow: hidden;
} }
.screen { display: grid; grid-template-columns: 1fr 340px; height: 100vh; } .screen { display: grid; grid-template-columns: 1fr 420px; height: 100vh; }
/* ---------- left: film list ---------- */ /* ---------- left: film list ---------- */
.programme { padding: 28px 40px 40px 48px; display: flex; flex-direction: column; } .programme { padding: 28px 40px 40px 48px; display: flex; flex-direction: column; }
@@ -79,17 +79,31 @@ body {
.sidebar .top { .sidebar .top {
display: grid; display: grid;
grid-template-columns: auto 1fr; grid-template-columns: auto 1fr;
align-items: baseline; align-items: start;
gap: 20px; gap: 24px;
margin-bottom: 4px; margin-bottom: 4px;
} }
.sidebar .date { .sidebar .date {
font-size: 56px; font-weight: 600; font-size: 56px;
font-variant-numeric: tabular-nums; font-weight: 600;
line-height: 1; line-height: 1;
white-space: nowrap;
} }
.sidebar .logo { font-size: 13px; font-weight: 600; letter-spacing: 1px; text-align: right; line-height: 1.3; text-transform: uppercase; } .sidebar .date .colon {
animation: blink 1s steps(1) infinite;
}
@keyframes blink {
50% { opacity: 0; }
}
.sidebar .logo {
filter: invert(1);
display: flex;
justify-content: flex-end;
padding-top: 4px;
}
.sidebar .logo img {
height: 46px;
width: auto;
}
.sidebar h2 { margin-top: 56px; font-size: 20px; font-weight: 600; margin-bottom: 14px; } .sidebar h2 { margin-top: 56px; font-size: 20px; font-weight: 600; margin-bottom: 14px; }
.price-row { display: flex; justify-content: space-between; gap: 16px; margin-bottom: 9px; font-size: 17px; } .price-row { display: flex; justify-content: space-between; gap: 16px; margin-bottom: 9px; font-size: 17px; }
.price-row .price { white-space: nowrap; } .price-row .price { white-space: nowrap; }