serversdown/terra-view
1
0
Fork 0
Code Issues 17 Pull Requests Actions Packages Projects Releases 5 Wiki Activity

docs: client portal design + milestone plan (M1 live view → M4 full auth) #61

Merged
serversdown merged 27 commits from feat/client-portal into dev 2026-06-11 23:21:53 -04:00
Conversation 0 Commits 27 Files Changed 14
+205 -107
4 changed files with 205 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit f760e81309 - Show all commits
templates/portal/access_required.html
+7 -8
View File
@@ -1,20 +1,19 @@
{% extends "portal/base.html" %} {% extends "portal/base.html" %}
{% block title %}Access{% endblock %} {% block title %}Access{% endblock %}
{% block content %} {% block content %}
<div class="max-w-md mx-auto mt-16 text-center"> <div class="max-w-md mx-auto mt-20 text-center reveal">
<div class="inline-flex items-center justify-center w-14 h-14 rounded-full bg-slate-800 border border-slate-700 mb-5"> <div class="panel inline-flex items-center justify-center w-16 h-16 rounded-2xl mb-6">
<svg class="w-7 h-7 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg class="w-7 h-7 text-[var(--text-dim)]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"></path> d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"></path>
</svg> </svg>
</div> </div>
{% if reason == "invalid" %} {% if reason == "invalid" %}
<h1 class="text-xl font-semibold mb-2">This link isn't valid</h1> <h1 class="text-2xl font-bold tracking-tight mb-2">This link isn't valid</h1>
<p class="text-gray-400 text-sm">The access link is expired or has been revoked. <p class="text-[var(--text-dim)] text-sm leading-relaxed">The access link is expired or has been revoked.<br>Please contact TMI for a new link.</p>
Please contact TMI for a new link.</p>
{% else %} {% else %}
<h1 class="text-xl font-semibold mb-2">Access link required</h1> <h1 class="text-2xl font-bold tracking-tight mb-2">Access link required</h1>
<p class="text-gray-400 text-sm">Open the monitoring link TMI sent you to view your locations.</p> <p class="text-[var(--text-dim)] text-sm leading-relaxed">Open the monitoring link TMI sent you to view your locations.</p>
{% endif %} {% endif %}
</div> </div>
{% endblock %} {% endblock %}
templates/portal/base.html
+83 -30
View File
@@ -5,6 +5,9 @@
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<title>{% block title %}Monitoring{% endblock %} · TMI</title> <title>{% block title %}Monitoring{% endblock %} · TMI</title>
<!-- apply saved theme before paint (no flash) -->
<script>(function(){var t=localStorage.getItem('portal-theme')||'dark';document.documentElement.setAttribute('data-theme',t);})();</script>
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500;600&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500;600&display=swap" rel="stylesheet">
@@ -25,16 +28,45 @@
<meta name="theme-color" content="#080b14"> <meta name="theme-color" content="#080b14">
<style> <style>
/* ---- dark (default) ---- */
:root { :root {
--bg: #080b14; --bg: #080b14;
--border: rgba(124, 146, 188, 0.14); --grid: rgba(124, 146, 188, 0.045);
--border-bright: rgba(168, 188, 224, 0.30); --aurora-1: rgba(20, 42, 102, 0.55);
--aurora-2: rgba(125, 35, 77, 0.18);
--text: #e7ecf6; --text: #e7ecf6;
--text-dim: #8c98b0; --text-dim: #8c98b0;
--border: rgba(124, 146, 188, 0.14);
--border-bright: rgba(168, 188, 224, 0.30);
--panel-a: rgba(24, 33, 54, 0.72);
--panel-b: rgba(12, 18, 31, 0.62);
--panel-inset: rgba(255, 255, 255, 0.05);
--panel-shadow: 0 22px 48px -28px rgba(0, 0, 0, 0.85);
--header-bg: rgba(8, 11, 20, 0.72);
--accent: #f48b1c; --accent: #f48b1c;
--accent-glow: rgba(244, 139, 28, 0.40); --accent-glow: rgba(244, 139, 28, 0.40);
--ok: #34d399; --warn: #fbbf24; --bad: #f87171; --lvl-ok: #34d399; --lvl-warn: #fbbf24; --lvl-bad: #f87171;
--m-lp: #60a5fa; --m-lmax: #f87171; --m-l1: #c084fc; --m-l10: #fbbf24;
} }
/* ---- light ---- */
html[data-theme="light"] {
--bg: #eef1f8;
--grid: rgba(20, 42, 102, 0.05);
--aurora-1: rgba(120, 150, 220, 0.22);
--aurora-2: rgba(244, 139, 28, 0.10);
--text: #16203a;
--text-dim: #5d6b86;
--border: rgba(20, 42, 102, 0.13);
--border-bright: rgba(20, 42, 102, 0.22);
--panel-a: rgba(255, 255, 255, 0.92);
--panel-b: rgba(248, 250, 254, 0.85);
--panel-inset: rgba(255, 255, 255, 0.6);
--panel-shadow: 0 18px 40px -28px rgba(40, 55, 95, 0.35);
--header-bg: rgba(244, 246, 251, 0.80);
--lvl-ok: #16a34a; --lvl-warn: #d97706; --lvl-bad: #dc2626;
--m-lp: #2563eb; --m-lmax: #dc2626; --m-l1: #9333ea; --m-l10: #d97706;
}
html, body { height: 100%; } html, body { height: 100%; }
body { body {
margin: 0; margin: 0;
@@ -42,28 +74,27 @@
font-family: "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif; font-family: "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif;
font-feature-settings: "ss01"; font-feature-settings: "ss01";
background-color: var(--bg); background-color: var(--bg);
/* atmosphere: a navy aurora up top + a faint instrument grid */
background-image: background-image:
radial-gradient(1100px 560px at 50% -12%, rgba(20, 42, 102, 0.55), transparent 68%), radial-gradient(1100px 560px at 50% -12%, var(--aurora-1), transparent 68%),
radial-gradient(700px 400px at 88% 8%, rgba(125, 35, 77, 0.18), transparent 70%), radial-gradient(700px 400px at 88% 8%, var(--aurora-2), transparent 70%),
linear-gradient(rgba(124, 146, 188, 0.045) 1px, transparent 1px), linear-gradient(var(--grid) 1px, transparent 1px),
linear-gradient(90deg, rgba(124, 146, 188, 0.045) 1px, transparent 1px); linear-gradient(90deg, var(--grid) 1px, transparent 1px);
background-size: auto, auto, 46px 46px, 46px 46px; background-size: auto, auto, 46px 46px, 46px 46px;
background-attachment: fixed; background-attachment: fixed;
transition: background-color .3s ease, color .3s ease;
} }
::selection { background: rgba(244, 139, 28, 0.30); } ::selection { background: rgba(244, 139, 28, 0.30); }
.font-mono, .reading { font-family: "IBM Plex Mono", ui-monospace, monospace; font-variant-numeric: tabular-nums; } .font-mono, .reading { font-family: "IBM Plex Mono", ui-monospace, monospace; font-variant-numeric: tabular-nums; }
/* Panel system — translucent, hairline-lit, with depth */
.panel { .panel {
position: relative; position: relative;
background: linear-gradient(180deg, rgba(24, 33, 54, 0.72), rgba(12, 18, 31, 0.62)); background: linear-gradient(180deg, var(--panel-a), var(--panel-b));
border: 1px solid var(--border); border: 1px solid var(--border);
border-radius: 16px; border-radius: 16px;
backdrop-filter: blur(8px); backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 22px 48px -28px rgba(0, 0, 0, 0.85); box-shadow: 0 1px 0 var(--panel-inset) inset, var(--panel-shadow);
} }
.panel::before { .panel::before {
content: ''; position: absolute; inset: 0 0 auto 0; height: 1px; content: ''; position: absolute; inset: 0 0 auto 0; height: 1px;
@@ -73,43 +104,46 @@
.panel-hover:hover { .panel-hover:hover {
transform: translateY(-3px); transform: translateY(-3px);
border-color: rgba(244, 139, 28, 0.55); border-color: rgba(244, 139, 28, 0.55);
box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.9), 0 0 0 1px var(--accent-glow); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.55), 0 0 0 1px var(--accent-glow);
} }
.hairline { border-top: 1px solid var(--border); } .hairline { border-top: 1px solid var(--border); }
/* Live indicator */ /* metric accent colors (flip per theme) */
.c-lp { color: var(--m-lp); } .c-lmax { color: var(--m-lmax); }
.c-l1 { color: var(--m-l1); } .c-l10 { color: var(--m-l10); }
.live-dot { width: 8px; height: 8px; border-radius: 999px; background: var(--accent); box-shadow: 0 0 0 0 var(--accent-glow); animation: pulse 2.2s infinite; } .live-dot { width: 8px; height: 8px; border-radius: 999px; background: var(--accent); box-shadow: 0 0 0 0 var(--accent-glow); animation: pulse 2.2s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 var(--accent-glow); } 70% { box-shadow: 0 0 0 9px rgba(244, 139, 28, 0); } 100% { box-shadow: 0 0 0 0 rgba(244, 139, 28, 0); } } @keyframes pulse { 0% { box-shadow: 0 0 0 0 var(--accent-glow); } 70% { box-shadow: 0 0 0 9px rgba(244, 139, 28, 0); } 100% { box-shadow: 0 0 0 0 rgba(244, 139, 28, 0); } }
/* Staggered load reveal */
@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } } @keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.reveal { opacity: 0; animation: rise .55s cubic-bezier(.2, .7, .2, 1) forwards; } .reveal { opacity: 0; animation: rise .55s cubic-bezier(.2, .7, .2, 1) forwards; }
/* Brand signal-bars mark */
.signal-bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 16px; } .signal-bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 16px; }
.signal-bars i { width: 3px; background: var(--accent); border-radius: 1px; animation: bars 1.4s ease-in-out infinite; } .signal-bars i { width: 3px; background: var(--accent); border-radius: 1px; animation: bars 1.4s ease-in-out infinite; }
.signal-bars i:nth-child(1) { height: 40%; animation-delay: 0s; } .signal-bars i:nth-child(1) { height: 40%; } .signal-bars i:nth-child(2) { height: 70%; animation-delay: .2s; }
.signal-bars i:nth-child(2) { height: 70%; animation-delay: .2s; } .signal-bars i:nth-child(3) { height: 100%; animation-delay: .4s; } .signal-bars i:nth-child(4) { height: 55%; animation-delay: .6s; }
.signal-bars i:nth-child(3) { height: 100%; animation-delay: .4s; }
.signal-bars i:nth-child(4) { height: 55%; animation-delay: .6s; }
@keyframes bars { 0%, 100% { transform: scaleY(.5); opacity: .7; } 50% { transform: scaleY(1); opacity: 1; } } @keyframes bars { 0%, 100% { transform: scaleY(.5); opacity: .7; } 50% { transform: scaleY(1); opacity: 1; } }
/* Dark Leaflet polish */ .theme-toggle { color: var(--text-dim); transition: color .2s ease, background .2s ease; }
.leaflet-container { background: #0a0f1c !important; } .theme-toggle:hover { color: var(--text); }
.leaflet-tooltip { background: rgba(14, 20, 34, 0.95); border: 1px solid var(--border-bright); color: var(--text); box-shadow: none; font-family: inherit; font-size: 12px; } html[data-theme="light"] .moon { display: none; }
html[data-theme="dark"] .sun, :root:not([data-theme="light"]) .sun { display: none; }
/* Leaflet polish (dark default; .leaflet-light tweaks tooltip for light) */
.leaflet-container { background: var(--bg) !important; }
.leaflet-tooltip { background: var(--panel-a); border: 1px solid var(--border-bright); color: var(--text); box-shadow: none; font-family: inherit; font-size: 12px; }
.leaflet-tooltip-top::before { border-top-color: var(--border-bright); } .leaflet-tooltip-top::before { border-top-color: var(--border-bright); }
.leaflet-control-attribution { background: rgba(8, 11, 20, 0.6) !important; color: #5a6478 !important; } .leaflet-control-attribution { background: rgba(0,0,0,0.25) !important; color: var(--text-dim) !important; }
.leaflet-control-attribution a { color: #7a8499 !important; } .leaflet-control-attribution a { color: var(--text-dim) !important; }
::-webkit-scrollbar { width: 9px; height: 9px; } ::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: rgba(124, 146, 188, 0.22); border-radius: 9px; } ::-webkit-scrollbar-thumb { background: rgba(124, 146, 188, 0.22); border-radius: 9px; }
</style> </style>
{% block head %}{% endblock %} {% block head %}{% endblock %}
</head> </head>
<body class="min-h-full antialiased"> <body class="min-h-full antialiased">
<header class="sticky top-0 z-30 border-b border-[var(--border)] bg-[rgba(8,11,20,0.72)] backdrop-blur-xl"> <header class="sticky top-0 z-30 border-b border-[var(--border)] bg-[var(--header-bg)] backdrop-blur-xl">
<div class="max-w-5xl mx-auto px-5 py-3.5 flex items-center justify-between"> <div class="max-w-5xl mx-auto px-5 py-3.5 flex items-center justify-between">
<a href="/portal" class="flex items-center gap-2.5 group"> <a href="/portal" class="flex items-center gap-2.5">
<span class="signal-bars"><i></i><i></i><i></i><i></i></span> <span class="signal-bars"><i></i><i></i><i></i><i></i></span>
<span class="font-semibold tracking-tight text-[15px]"> <span class="font-semibold tracking-tight text-[15px]">
TMI <span class="text-[var(--text-dim)] font-normal">Monitoring</span> TMI <span class="text-[var(--text-dim)] font-normal">Monitoring</span>
@@ -117,20 +151,39 @@
<span class="text-seismo-orange">{{ client.name }}</span>{% endif %} <span class="text-seismo-orange">{{ client.name }}</span>{% endif %}
</span> </span>
</a> </a>
<div class="flex items-center gap-1.5">
<button onclick="togglePortalTheme()" class="theme-toggle p-2 rounded-lg" title="Toggle light / dark" aria-label="Toggle theme">
<svg class="moon w-[18px] h-[18px]" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"/></svg>
<svg class="sun w-[18px] h-[18px]" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"/></svg>
</button>
{% if client %} {% if client %}
<a href="/portal/logout" class="text-[13px] text-[var(--text-dim)] hover:text-[var(--text)] transition-colors">Sign out</a> <a href="/portal/logout" class="text-[13px] text-[var(--text-dim)] hover:text-[var(--text)] transition-colors px-2">Sign out</a>
{% endif %} {% endif %}
</div> </div>
</div>
</header> </header>
<main class="max-w-5xl mx-auto px-5 py-8"> <main class="max-w-5xl mx-auto px-5 py-8">
{% block content %}{% endblock %} {% block content %}{% endblock %}
</main> </main>
<footer class="max-w-5xl mx-auto px-5 py-10 text-[11px] text-[var(--text-dim)]/70 flex items-center gap-2"> <footer class="max-w-5xl mx-auto px-5 py-10 text-[11px] text-[var(--text-dim)] flex items-center gap-2 opacity-70">
<span class="w-1 h-1 rounded-full bg-[var(--text-dim)]/50"></span> <span class="w-1 h-1 rounded-full bg-[var(--text-dim)]"></span>
Read-only monitoring view · data provided as-is for informational purposes Read-only monitoring view · data provided as-is for informational purposes
</footer> </footer>
<script>
// Theme toggle. Pages can listen for 'portal-theme' to re-skin canvases/maps.
function cssVar(n) { return getComputedStyle(document.documentElement).getPropertyValue(n).trim(); }
function togglePortalTheme() {
const cur = document.documentElement.getAttribute('data-theme') === 'light' ? 'light' : 'dark';
const next = cur === 'light' ? 'dark' : 'light';
document.documentElement.setAttribute('data-theme', next);
try { localStorage.setItem('portal-theme', next); } catch (e) {}
document.documentElement.setAttribute('content', next === 'light' ? '#eef1f8' : '#080b14');
document.dispatchEvent(new CustomEvent('portal-theme', { detail: next }));
}
</script>
{% block scripts %}{% endblock %} {% block scripts %}{% endblock %}
</body> </body>
</html> </html>
templates/portal/location.html
+93 -54
View File
@@ -4,61 +4,74 @@
<script src="https://cdn.jsdelivr.net/npm/chart.js@4"></script> <script src="https://cdn.jsdelivr.net/npm/chart.js@4"></script>
{% endblock %} {% endblock %}
{% block content %} {% block content %}
<a href="/portal" class="text-sm text-gray-400 hover:text-gray-200">&larr; All locations</a> <a href="/portal" class="reveal inline-flex items-center gap-1.5 text-sm text-[var(--text-dim)] hover:text-[var(--text)] transition-colors">
<h1 class="text-2xl font-semibold mt-1">{{ location.name }}</h1> <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/></svg>
<div class="flex items-center gap-2 text-sm mt-1 mb-6"> All locations
<span id="p-badge" class="hidden px-2 py-0.5 text-xs font-medium rounded-full"></span> </a>
<span id="p-fresh" class="text-gray-400"></span> <div class="reveal mt-3 flex flex-wrap items-end justify-between gap-3">
<h1 class="text-3xl font-bold tracking-tight">{{ location.name }}</h1>
<div class="flex items-center gap-2.5">
<span id="p-badge" class="hidden"></span>
<span id="p-fresh" class="text-[var(--text-dim)] font-mono text-xs"></span>
</div>
</div> </div>
{% if not has_device %} {% if not has_device %}
<div class="rounded-xl border border-slate-700 bg-slate-800/50 p-8 text-center text-gray-400"> <div class="panel reveal p-12 text-center text-[var(--text-dim)] mt-6">No device is currently assigned to this location.</div>
No device is currently assigned to this location.
</div>
{% else %} {% else %}
<div id="p-alarm-banner" class="hidden mb-4 px-4 py-3 rounded-lg bg-red-900/30 border border-red-700/50 text-red-200 text-sm flex items-center gap-2"> <div id="p-alarm-banner" class="hidden reveal mt-5 px-4 py-3 rounded-xl bg-[rgba(248,113,113,0.10)] border border-[rgba(248,113,113,0.38)] text-red-200 text-sm flex items-center gap-2.5">
<svg class="w-5 h-5 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg class="w-5 h-5 shrink-0 text-red-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M12 9v2m0 4h.01M5.07 19h13.86c1.54 0 2.5-1.67 1.73-3L13.73 4a2 2 0 00-3.46 0L3.34 16c-.77 1.33.19 3 1.73 3z"/> d="M12 9v2m0 4h.01M5.07 19h13.86c1.54 0 2.5-1.67 1.73-3L13.73 4a2 2 0 00-3.46 0L3.34 16c-.77 1.33.19 3 1.73 3z"/>
</svg> </svg>
<span id="p-alarm-text">Currently above threshold.</span> <span id="p-alarm-text" class="font-medium">Currently above threshold.</span>
</div> </div>
<div class="grid grid-cols-2 sm:grid-cols-5 gap-3 mb-6">
<div class="rounded-lg bg-slate-800/60 border border-slate-700 p-3"> <!-- Hero console: Leq primary + instrument strip -->
<div class="text-xs text-gray-400">Lp (Instant)</div> <div class="panel reveal mt-5 p-6 sm:p-7" style="animation-delay:60ms">
<div id="p-lp" class="text-2xl font-bold text-blue-400">--</div><div class="text-xs text-gray-500">dB</div> <div class="text-[10px] uppercase tracking-[0.22em] text-[var(--text-dim)] font-mono mb-1.5">Leq · average</div>
<div class="flex items-baseline gap-2.5">
<span id="p-leq" class="reading text-6xl sm:text-7xl leading-none font-semibold">--</span>
<span class="text-sm text-[var(--text-dim)] font-mono">dB</span>
</div> </div>
<div class="rounded-lg bg-slate-800/60 border border-slate-700 p-3">
<div class="text-xs text-gray-400">Leq (Average)</div> <div class="hairline mt-6 pt-5 grid grid-cols-2 sm:grid-cols-4 gap-5">
<div id="p-leq" class="text-2xl font-bold text-green-400">--</div><div class="text-xs text-gray-500">dB</div> <div>
<div class="text-[10px] uppercase tracking-[0.15em] text-[var(--text-dim)] font-mono">Lp · instant</div>
<div class="mt-1 flex items-baseline gap-1"><span id="p-lp" class="reading text-2xl font-semibold c-lp">--</span><span class="text-[10px] text-[var(--text-dim)] font-mono">dB</span></div>
</div> </div>
<div class="rounded-lg bg-slate-800/60 border border-slate-700 p-3"> <div>
<div class="text-xs text-gray-400">Lmax (Max)</div> <div class="text-[10px] uppercase tracking-[0.15em] text-[var(--text-dim)] font-mono">Lmax · peak</div>
<div id="p-lmax" class="text-2xl font-bold text-red-400">--</div><div class="text-xs text-gray-500">dB</div> <div class="mt-1 flex items-baseline gap-1"><span id="p-lmax" class="reading text-2xl font-semibold c-lmax">--</span><span class="text-[10px] text-[var(--text-dim)] font-mono">dB</span></div>
</div> </div>
<div class="rounded-lg bg-slate-800/60 border border-slate-700 p-3"> <div>
<div class="text-xs text-gray-400">L1</div> <div class="text-[10px] uppercase tracking-[0.15em] text-[var(--text-dim)] font-mono">L1</div>
<div id="p-ln1" class="text-2xl font-bold text-purple-400">--</div><div class="text-xs text-gray-500">dB</div> <div class="mt-1 flex items-baseline gap-1"><span id="p-ln1" class="reading text-2xl font-semibold c-l1">--</span><span class="text-[10px] text-[var(--text-dim)] font-mono">dB</span></div>
</div>
<div>
<div class="text-[10px] uppercase tracking-[0.15em] text-[var(--text-dim)] font-mono">L10</div>
<div class="mt-1 flex items-baseline gap-1"><span id="p-ln2" class="reading text-2xl font-semibold c-l10">--</span><span class="text-[10px] text-[var(--text-dim)] font-mono">dB</span></div>
</div> </div>
<div class="rounded-lg bg-slate-800/60 border border-slate-700 p-3">
<div class="text-xs text-gray-400">L10</div>
<div id="p-ln2" class="text-2xl font-bold text-orange-400">--</div><div class="text-xs text-gray-500">dB</div>
</div> </div>
</div> </div>
<div class="relative rounded-xl border border-slate-700 bg-slate-800/50 p-4" style="min-height: 360px;"> <!-- Live trace -->
<div class="panel reveal mt-5 overflow-hidden" style="animation-delay:120ms">
<div class="px-5 pt-4 text-[10px] uppercase tracking-[0.22em] text-[var(--text-dim)] font-mono">Live trace · last 2h</div>
<div class="relative px-3 pb-3 pt-2" style="min-height: 340px;">
<canvas id="p-chart"></canvas> <canvas id="p-chart"></canvas>
<div id="p-paused" class="hidden absolute inset-0 flex items-center justify-center bg-slate-900/70 rounded-xl"> <div id="p-paused" class="hidden absolute inset-0 flex items-center justify-center bg-[rgba(8,11,20,0.78)] rounded-xl backdrop-blur-sm">
<button onclick="resumeStream()" <button onclick="resumeStream()"
class="px-4 py-2 rounded-lg bg-seismo-orange/20 text-seismo-orange border border-seismo-orange/40 hover:bg-seismo-orange/30 text-sm font-medium"> class="px-4 py-2 rounded-lg bg-seismo-orange/15 text-seismo-orange border border-seismo-orange/40 hover:bg-seismo-orange/25 text-sm font-medium transition-colors">
&#9208; Live paused — click to resume &#9208; Live paused — tap to resume
</button> </button>
</div> </div>
</div> </div>
</div>
<!-- Alert history (read-only) --> <!-- Alert history -->
<div class="mt-6"> <div class="reveal mt-7" style="animation-delay:180ms">
<h2 class="text-sm font-medium text-gray-400 mb-2">Alert history</h2> <div class="text-[10px] uppercase tracking-[0.22em] text-[var(--text-dim)] font-mono mb-3">Alert history</div>
<div id="p-events" class="space-y-2"></div> <div id="p-events" class="space-y-2"></div>
</div> </div>
{% endif %} {% endif %}
@@ -72,40 +85,65 @@ const cd = { t: [], lp: [], leq: [], ln1: [], ln2: [] };
let chart; let chart;
const numOrNull = v => { const f = parseFloat(v); return isNaN(f) ? null : f; }; const numOrNull = v => { const f = parseFloat(v); return isNaN(f) ? null : f; };
function ds(label, color) { // Level color for the Leq hero (matches the overview bands).
return { label, data: [], borderColor: color, backgroundColor: color, const LEVEL_AMBER = 55, LEVEL_RED = 70;
borderWidth: 2, pointRadius: 0, tension: 0.3, spanGaps: true }; function leqColor(measuring, v) {
// CSS var refs so the hero color auto-flips with the theme.
if (!measuring || v == null || isNaN(v)) return 'var(--text)';
if (v >= LEVEL_RED) return 'var(--lvl-bad)';
if (v >= LEVEL_AMBER) return 'var(--lvl-warn)';
return 'var(--lvl-ok)';
}
function paintLeq(measuring, leqVal) {
const el = document.getElementById('p-leq');
if (el) el.style.color = leqColor(measuring, parseFloat(leqVal));
}
function ds(label) { return { label, data: [], borderWidth: 1.5, pointRadius: 0, tension: 0.35, spanGaps: true }; }
function skinChart() {
if (!chart) return;
const dim = cssVar('--text-dim');
const cols = [cssVar('--m-lp'), cssVar('--lvl-ok'), cssVar('--m-l1'), cssVar('--m-l10')];
chart.data.datasets.forEach((d, i) => { d.borderColor = cols[i]; d.backgroundColor = cols[i]; });
const grid = 'rgba(124,146,188,0.10)', gridX = 'rgba(124,146,188,0.05)', border = 'rgba(124,146,188,0.18)';
const y = chart.options.scales.y, x = chart.options.scales.x;
y.ticks.color = dim; y.title.color = dim; y.grid.color = grid; y.border.color = border;
x.ticks.color = dim; x.grid.color = gridX; x.border.color = border;
chart.options.plugins.legend.labels.color = cssVar('--text');
chart.update('none');
} }
function initChart() { function initChart() {
const ctx = document.getElementById('p-chart').getContext('2d'); const ctx = document.getElementById('p-chart').getContext('2d');
const mono = { family: 'IBM Plex Mono', size: 10 };
chart = new Chart(ctx, { chart = new Chart(ctx, {
type: 'line', type: 'line',
data: { labels: [], datasets: [ data: { labels: [], datasets: [ds('Lp'), ds('Leq'), ds('L1'), ds('L10')] },
ds('Lp', 'rgb(96,165,250)'), ds('Leq', 'rgb(74,222,128)'),
ds('L1', 'rgb(192,132,252)'), ds('L10', 'rgb(251,146,60)') ] },
options: { options: {
responsive: true, maintainAspectRatio: false, animation: false, responsive: true, maintainAspectRatio: false, animation: false,
interaction: { intersect: false, mode: 'index' }, interaction: { intersect: false, mode: 'index' },
scales: { scales: {
y: { min: 30, max: 130, title: { display: true, text: 'dB', color: '#94a3b8' }, y: { min: 30, max: 130, title: { display: true, text: 'dB', font: { family: 'IBM Plex Mono' } },
ticks: { color: '#94a3b8' }, grid: { color: 'rgba(148,163,184,0.12)' } }, ticks: { font: mono }, grid: {}, border: {} },
x: { ticks: { color: '#94a3b8', maxTicksLimit: 8 }, grid: { color: 'rgba(148,163,184,0.12)' } } x: { ticks: { font: mono, maxTicksLimit: 8 }, grid: {}, border: {} }
}, },
plugins: { legend: { labels: { color: '#cbd5e1' } } } plugins: { legend: { labels: { font: { family: 'Hanken Grotesk' }, usePointStyle: true, pointStyleWidth: 10, boxHeight: 7 } } }
} }
}); });
skinChart();
} }
document.addEventListener('portal-theme', skinChart);
function setCard(id, v) { document.getElementById(id).textContent = (v == null || v === '') ? '--' : v; } function setCard(id, v) { document.getElementById(id).textContent = (v == null || v === '') ? '--' : v; }
function setBadge(measuring, lastSeen) { function setBadge(measuring, lastSeen) {
const b = document.getElementById('p-badge'), f = document.getElementById('p-fresh'); const b = document.getElementById('p-badge'), f = document.getElementById('p-fresh');
if (measuring === null) { b.className = 'hidden px-2 py-0.5 text-xs font-medium rounded-full'; b.textContent = ''; } const base = 'inline-flex items-center gap-1.5 px-2.5 py-1 text-[11px] rounded-full border ';
else if (measuring) { b.className = 'px-2 py-0.5 text-xs font-medium rounded-full bg-green-900/40 text-green-300'; b.textContent = '● Live'; } if (measuring === null) { b.className = 'hidden'; b.textContent = ''; }
else { b.className = 'px-2 py-0.5 text-xs font-medium rounded-full bg-slate-700 text-gray-300'; b.textContent = '■ Stopped'; } else if (measuring) { b.className = base + 'border-[rgba(244,139,28,0.45)] text-seismo-orange'; b.innerHTML = '<span class="live-dot"></span> Live'; }
else { b.className = base + 'border-[var(--border)] text-[var(--text-dim)]'; b.textContent = 'Stopped'; }
f.innerHTML = fmtFreshness(lastSeen); f.innerHTML = fmtFreshness(lastSeen);
} }
function fmtFreshness(iso) { function fmtFreshness(iso) {
if (!iso) return '<span class="text-gray-500">no recent reading</span>'; if (!iso) return '<span class="text-[var(--text-dim)]">no recent reading</span>';
const t = new Date(iso.endsWith('Z') ? iso : iso + 'Z'); const t = new Date(iso.endsWith('Z') ? iso : iso + 'Z');
const s = Math.max(0, Math.round((Date.now() - t.getTime()) / 1000)); const s = Math.max(0, Math.round((Date.now() - t.getTime()) / 1000));
let ago, stale = false; let ago, stale = false;
@@ -113,7 +151,7 @@ function fmtFreshness(iso) {
else if (s < 60) ago = s + 's ago'; else if (s < 60) ago = s + 's ago';
else if (s < 3600) { ago = Math.round(s / 60) + 'm ago'; stale = s >= 300; } else if (s < 3600) { ago = Math.round(s / 60) + 'm ago'; stale = s >= 300; }
else { ago = Math.round(s / 3600) + 'h ago'; stale = true; } else { ago = Math.round(s / 3600) + 'h ago'; stale = true; }
const cls = stale ? 'text-amber-400' : 'text-gray-400'; const cls = stale ? 'text-amber-400' : 'text-[var(--text-dim)]';
return `as of ${t.toLocaleTimeString()} <span class="${cls}">(${ago}${stale ? ' · cached' : ''})</span>`; return `as of ${t.toLocaleTimeString()} <span class="${cls}">(${ago}${stale ? ' · cached' : ''})</span>`;
} }
@@ -131,6 +169,7 @@ async function prefill() {
setCard('p-ln1', d.ln1); setCard('p-ln2', d.ln2); setCard('p-ln1', d.ln1); setCard('p-ln2', d.ln2);
const measuring = d.measurement_state === 'Start' || d.measurement_state === 'Measure'; const measuring = d.measurement_state === 'Start' || d.measurement_state === 'Measure';
setBadge(measuring, d.last_seen); setBadge(measuring, d.last_seen);
paintLeq(measuring, d.leq);
} catch (e) { /* keep last values */ } } catch (e) { /* keep last values */ }
} }
async function backfill() { async function backfill() {
@@ -184,6 +223,7 @@ function openStream() {
setCard('p-ln1', d.ln1); setCard('p-ln2', d.ln2); setCard('p-ln1', d.ln1); setCard('p-ln2', d.ln2);
const measuring = d.measurement_state === 'Start' || d.measurement_state === 'Measure'; const measuring = d.measurement_state === 'Start' || d.measurement_state === 'Measure';
setBadge(measuring, d.timestamp || new Date().toISOString()); setBadge(measuring, d.timestamp || new Date().toISOString());
paintLeq(measuring, d.leq);
pushPoint(d); pushPoint(d);
}; };
ws.onclose = () => { ws = null; }; ws.onclose = () => { ws = null; };
@@ -231,7 +271,7 @@ async function loadEvents() {
j.active > 1 ? `${j.active} alerts currently active` : 'Currently above threshold.'; j.active > 1 ? `${j.active} alerts currently active` : 'Currently above threshold.';
} else banner.classList.add('hidden'); } else banner.classList.add('hidden');
const list = document.getElementById('p-events'); const list = document.getElementById('p-events');
if (!events.length) { list.innerHTML = '<div class="text-sm text-gray-500">No alerts have fired.</div>'; return; } if (!events.length) { list.innerHTML = '<div class="text-sm text-[var(--text-dim)]">No alerts have fired.</div>'; return; }
list.innerHTML = ''; list.innerHTML = '';
for (const e of events) { for (const e of events) {
const m = EV_METRIC[e.metric] || e.metric; const m = EV_METRIC[e.metric] || e.metric;
@@ -240,10 +280,9 @@ async function loadEvents() {
: `${fmtAlertTime(e.onset_at)} → ${fmtAlertTime(e.clear_at)}`; : `${fmtAlertTime(e.onset_at)} → ${fmtAlertTime(e.clear_at)}`;
const peak = (e.peak_value != null) ? ` · peak ${e.peak_value} dB` : ''; const peak = (e.peak_value != null) ? ` · peak ${e.peak_value} dB` : '';
const row = document.createElement('div'); const row = document.createElement('div');
row.className = 'px-3 py-2 rounded-lg border text-sm ' + row.className = 'panel px-3.5 py-2.5 text-sm ' + (active ? 'border-[rgba(248,113,113,0.4)]' : '');
(active ? 'border-red-700/60 bg-red-900/20 text-red-200' : 'border-slate-700 bg-slate-800/40 text-gray-300'); row.innerHTML = `<div class="${active ? 'text-red-300' : 'text-[var(--text)]'}">${e.rule_name || 'Alert'} <span class="text-xs text-[var(--text-dim)] font-mono">· ${m} ${e.threshold_db} dB</span></div>
row.innerHTML = `<div>${e.rule_name || 'Alert'} <span class="text-xs text-gray-400">· ${m} ${e.threshold_db} dB</span></div> <div class="text-xs text-[var(--text-dim)] font-mono mt-0.5">${when}${peak}</div>`;
<div class="text-xs text-gray-400">${when}${peak}</div>`;
list.appendChild(row); list.appendChild(row);
} }
} catch (e) { /* leave history as-is */ } } catch (e) { /* leave history as-is */ }
templates/portal/overview.html
+14 -7
View File
@@ -62,16 +62,23 @@
const LOCATIONS = {{ locations|tojson }}; const LOCATIONS = {{ locations|tojson }};
const liveState = {}; // loc.id -> {status, leq(num|null), leqStr} const liveState = {}; // loc.id -> {status, leq(num|null), leqStr}
const markersById = {}; // loc.id -> circleMarker (for live recolor) const markersById = {}; // loc.id -> circleMarker (for live recolor)
let tiles = null; // map tile layer (re-skinned on theme toggle)
// Dot/level color. Placeholder bands until per-location alert thresholds exist. // Dot/level color (computed hex; reads the theme CSS vars so it flips with theme).
const LEVEL_AMBER = 55, LEVEL_RED = 70; const LEVEL_AMBER = 55, LEVEL_RED = 70;
const COLOR_IDLE = '#5a6478';
function levelColor(st) { function levelColor(st) {
if (!st || st.status !== 'measuring' || st.leq == null) return COLOR_IDLE; if (!st || st.status !== 'measuring' || st.leq == null) return cssVar('--text-dim');
if (st.leq >= LEVEL_RED) return '#f87171'; if (st.leq >= LEVEL_RED) return cssVar('--lvl-bad');
if (st.leq >= LEVEL_AMBER) return '#fbbf24'; if (st.leq >= LEVEL_AMBER) return cssVar('--lvl-warn');
return '#34d399'; return cssVar('--lvl-ok');
} }
function tileUrl() {
return document.documentElement.getAttribute('data-theme') === 'light'
? 'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png'
: 'https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png';
}
// Re-skin map tiles + recolor everything when the theme flips.
document.addEventListener('portal-theme', () => { if (tiles) tiles.setUrl(tileUrl()); refreshAll(); });
function num(v) { const f = parseFloat(v); return isNaN(f) ? null : f; } function num(v) { const f = parseFloat(v); return isNaN(f) ? null : f; }
function fmtAgo(iso) { function fmtAgo(iso) {
@@ -163,7 +170,7 @@ if (withCoords.length) {
const mapEl = document.getElementById('loc-map'); const mapEl = document.getElementById('loc-map');
mapEl.classList.remove('hidden'); mapEl.classList.remove('hidden');
const map = L.map('loc-map', { scrollWheelZoom: false, attributionControl: true }); const map = L.map('loc-map', { scrollWheelZoom: false, attributionControl: true });
L.tileLayer('https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png', { tiles = L.tileLayer(tileUrl(), {
maxZoom: 19, subdomains: 'abcd', attribution: '© OpenStreetMap © CARTO' maxZoom: 19, subdomains: 'abcd', attribution: '© OpenStreetMap © CARTO'
}).addTo(map); }).addTo(map);
const pts = []; const pts = [];