c2c1598226
- Added rulesets manager to handle various data types and updates via HTTP and WebSocket. - Introduced layout store for managing kiosk layouts with caching and server synchronization. - Enhanced dashboard and data routes to support new layout and ruleset features. - Updated kiosk HTML and JavaScript to utilize new layout rendering and data binding. - Removed obsolete map route and integrated map functionality into the new tile renderer. - Improved Telegram commands to reflect changes in data structure and logging. - Refactored weather fetching intervals to prevent multiple instances. - Added SSE stream for real-time layout updates in the kiosk.
44 lines
2.1 KiB
HTML
44 lines
2.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="it">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>MEB Kiosk</title>
|
|
<style>
|
|
html,body { margin:0; padding:0; height:100%; background:#0b1220; color:#fff;
|
|
font-family:-apple-system,Segoe UI,sans-serif; overflow:hidden; }
|
|
#grid { position:relative; width:100vw; height:100vh; display:grid;
|
|
grid-template-columns: repeat(var(--cols, 12), 1fr);
|
|
grid-template-rows: repeat(var(--rows, 8), 1fr);
|
|
gap: var(--gap, 4px); padding: var(--gap, 4px); box-sizing:border-box; }
|
|
.tile { border-radius:10px; padding:14px; box-sizing:border-box; display:flex;
|
|
flex-direction:column; overflow:hidden; background:#111827;
|
|
transition: background .25s, color .25s; }
|
|
.tile .title { font-size:.85rem; opacity:.65; letter-spacing:.06em;
|
|
text-transform:uppercase; margin-bottom:6px; }
|
|
.tile .val { flex:1; display:flex; align-items:center; justify-content:center;
|
|
font-weight:800; font-variant-numeric: tabular-nums; line-height:1; }
|
|
.tile .val .unit { opacity:.55; font-size:.5em; margin-left:.3em; }
|
|
.tile .stale { opacity:.45; }
|
|
.tile.map .map-host { flex:1; border-radius:6px; overflow:hidden; }
|
|
.tile.map .overlays { display:flex; flex-wrap:wrap; gap:8px 14px; padding-top:6px;
|
|
font-size:.8rem; opacity:.85; }
|
|
.tile.gauge svg { width:100%; height:100%; max-height:100%; }
|
|
#statusChip { position:fixed; right:10px; bottom:10px; background:#111827cc;
|
|
padding:4px 8px; border-radius:999px; font-size:11px; opacity:.7; }
|
|
#statusChip.err { background:#dc2626cc; opacity:1; }
|
|
</style>
|
|
<link rel="stylesheet" href="https://api.mapbox.com/mapbox-gl-js/v3.6.0/mapbox-gl.css">
|
|
</head>
|
|
<body>
|
|
<div id="grid"></div>
|
|
<div id="statusChip">boot…</div>
|
|
|
|
<!-- Mapbox GL (caricato lazy solo se serve un tile di tipo "map") -->
|
|
|
|
<script src="data-binder.js" defer></script>
|
|
<script src="tile-renderer.js" defer></script>
|
|
<script src="layout-client.js" defer></script>
|
|
</body>
|
|
</html>
|