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

style(portal): field-instrument redesign — shell + overview

Browse Source 
A refined dark "field instrument" aesthetic for the client-facing portal:
- Type: Hanken Grotesk UI + IBM Plex Mono for readings (dB values feel like real
  instrumentation). Tabular numerals.
- Atmosphere: deep navy-black base with a navy/burgundy aurora and a faint fixed
  instrument grid; sticky blurred header with an animated signal-bars mark.
- Panel system (.panel/.panel-hover): translucent, hairline-lit, depth + hover
  lift. Pulsing live dot; staggered load reveal.
- Overview: mono Leq hero on each tile (colored by level when live), pill badges
  with the pulsing dot, rollup pills, dark CARTO map tiles, level-colored dots.

All live-data JS hook IDs preserved (verified). No backend change.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
serversdown
2026-06-11 19:41:48 +00:00
parent fa7dc39e5e
commit 4839d14a22
2 changed files with 163 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files
templates/portal/base.html
+108 -16
View File
@@ -1,43 +1,135 @@
<!DOCTYPE html>
<html lang="en" class="h-full dark">
<html lang="en" class="h-full">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{% block title %}Monitoring{% endblock %} · TMI</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<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">
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
darkMode: 'class',
theme: { extend: { colors: { seismo: {
orange: '#f48b1c', navy: '#142a66', burgundy: '#7d234d'
} } } }
theme: { extend: {
colors: { seismo: { orange: '#f48b1c', navy: '#142a66', burgundy: '#7d234d' } },
fontFamily: {
sans: ['"Hanken Grotesk"', 'ui-sans-serif', 'system-ui', 'sans-serif'],
mono: ['"IBM Plex Mono"', 'ui-monospace', 'monospace'],
},
} }
}
</script>
<link rel="icon" type="image/png" sizes="32x32" href="/static/icons/favicon-32.png">
<meta name="theme-color" content="#142a66">
<meta name="theme-color" content="#080b14">
<style>
:root {
--bg: #080b14;
--border: rgba(124, 146, 188, 0.14);
--border-bright: rgba(168, 188, 224, 0.30);
--text: #e7ecf6;
--text-dim: #8c98b0;
--accent: #f48b1c;
--accent-glow: rgba(244, 139, 28, 0.40);
--ok: #34d399; --warn: #fbbf24; --bad: #f87171;
}
html, body { height: 100%; }
body {
margin: 0;
color: var(--text);
font-family: "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif;
font-feature-settings: "ss01";
background-color: var(--bg);
/* atmosphere: a navy aurora up top + a faint instrument grid */
background-image:
radial-gradient(1100px 560px at 50% -12%, rgba(20, 42, 102, 0.55), transparent 68%),
radial-gradient(700px 400px at 88% 8%, rgba(125, 35, 77, 0.18), transparent 70%),
linear-gradient(rgba(124, 146, 188, 0.045) 1px, transparent 1px),
linear-gradient(90deg, rgba(124, 146, 188, 0.045) 1px, transparent 1px);
background-size: auto, auto, 46px 46px, 46px 46px;
background-attachment: fixed;
}
::selection { background: rgba(244, 139, 28, 0.30); }
.font-mono, .reading { font-family: "IBM Plex Mono", ui-monospace, monospace; font-variant-numeric: tabular-nums; }
/* Panel system — translucent, hairline-lit, with depth */
.panel {
position: relative;
background: linear-gradient(180deg, rgba(24, 33, 54, 0.72), rgba(12, 18, 31, 0.62));
border: 1px solid var(--border);
border-radius: 16px;
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);
}
.panel::before {
content: ''; position: absolute; inset: 0 0 auto 0; height: 1px;
background: linear-gradient(90deg, transparent, var(--border-bright), transparent);
}
.panel-hover { transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease; }
.panel-hover:hover {
transform: translateY(-3px);
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);
}
.hairline { border-top: 1px solid var(--border); }
/* Live indicator */
.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); } }
/* Staggered load reveal */
@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; }
/* Brand signal-bars mark */
.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:nth-child(1) { height: 40%; animation-delay: 0s; }
.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; }
@keyframes bars { 0%, 100% { transform: scaleY(.5); opacity: .7; } 50% { transform: scaleY(1); opacity: 1; } }
/* Dark Leaflet polish */
.leaflet-container { background: #0a0f1c !important; }
.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; }
.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 a { color: #7a8499 !important; }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: rgba(124, 146, 188, 0.22); border-radius: 9px; }
</style>
{% block head %}{% endblock %}
</head>
<body class="h-full bg-slate-900 text-gray-100 antialiased">
<header class="border-b border-slate-700/70 bg-slate-800/60 backdrop-blur">
<div class="max-w-5xl mx-auto px-4 py-3 flex items-center justify-between">
<a href="/portal" class="flex items-center gap-2 font-semibold">
<span class="inline-block w-2.5 h-2.5 rounded-full bg-seismo-orange"></span>
TMI Monitoring{% if client %} <span class="text-gray-500 font-normal">·</span>
<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">
<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">
<span class="signal-bars"><i></i><i></i><i></i><i></i></span>
<span class="font-semibold tracking-tight text-[15px]">
TMI <span class="text-[var(--text-dim)] font-normal">Monitoring</span>
{% if client %}<span class="text-[var(--text-dim)] font-normal mx-0.5">/</span>
<span class="text-seismo-orange">{{ client.name }}</span>{% endif %}
</span>
</a>
{% if client %}
<a href="/portal/logout" class="text-sm text-gray-400 hover:text-gray-200">Sign out</a>
<a href="/portal/logout" class="text-[13px] text-[var(--text-dim)] hover:text-[var(--text)] transition-colors">Sign out</a>
{% endif %}
</div>
</header>
<main class="max-w-5xl mx-auto px-4 py-6">
<main class="max-w-5xl mx-auto px-5 py-8">
{% block content %}{% endblock %}
</main>
<footer class="max-w-5xl mx-auto px-4 py-8 text-xs text-gray-600">
Read-only monitoring view. Data is provided as-is for informational purposes.
<footer class="max-w-5xl mx-auto px-5 py-10 text-[11px] text-[var(--text-dim)]/70 flex items-center gap-2">
<span class="w-1 h-1 rounded-full bg-[var(--text-dim)]/50"></span>
Read-only monitoring view · data provided as-is for informational purposes
</footer>
{% block scripts %}{% endblock %}
</body>
templates/portal/overview.html
+54 -54
View File
@@ -4,49 +4,55 @@
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
{% endblock %}
{% block content %}
<h1 class="text-2xl font-semibold mb-1">Your monitoring locations</h1>
<p class="text-gray-400 text-sm mb-6">Live sound levels for your active locations. Read-only.</p>
<div class="reveal">
<div class="text-[11px] uppercase tracking-[0.2em] text-seismo-orange/80 font-mono mb-2">Live monitoring</div>
<h1 class="text-3xl font-bold tracking-tight">Your locations</h1>
<p class="text-[var(--text-dim)] text-sm mt-1">Real-time sound levels across your active monitoring sites.</p>
</div>
{% if locations %}
<!-- Status rollup (filled live from the per-location /live fetches) -->
<div id="rollup" class="hidden mb-5 flex flex-wrap items-center gap-2 text-sm">
<span class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-slate-800/60 border border-slate-700">
<span class="text-gray-400">Locations</span><b id="r-total" class="text-gray-100">&ndash;</b>
</span>
<span class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-slate-800/60 border border-slate-700">
<span class="w-2 h-2 rounded-full bg-green-500"></span><b id="r-live">&ndash;</b><span class="text-gray-400">live</span>
</span>
<span class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-slate-800/60 border border-slate-700">
<span class="w-2 h-2 rounded-full bg-slate-500"></span><b id="r-off">&ndash;</b><span class="text-gray-400">offline</span>
</span>
<span id="r-peak-wrap" class="hidden inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-slate-800/60 border border-slate-700">
<span class="text-gray-400">Loudest now</span><b id="r-peak" class="text-seismo-orange">&ndash;</b><span class="text-gray-400">dB Leq &middot;</span><span id="r-peak-loc" class="text-gray-300"></span>
</span>
<div id="rollup" class="hidden mt-6 mb-6 flex flex-wrap items-center gap-2.5">
<div class="panel px-4 py-2.5 flex items-center gap-2.5">
<span class="text-[var(--text-dim)] text-[10px] uppercase tracking-[0.15em]">Locations</span>
<b id="r-total" class="reading text-lg font-semibold">&ndash;</b>
</div>
<div class="panel px-4 py-2.5 flex items-center gap-2">
<span class="live-dot"></span><b id="r-live" class="reading text-lg font-semibold text-seismo-orange">&ndash;</b><span class="text-[var(--text-dim)] text-xs">live</span>
</div>
<div class="panel px-4 py-2.5 flex items-center gap-2">
<span class="w-2 h-2 rounded-full bg-[var(--text-dim)]/50"></span><b id="r-off" class="reading text-lg font-semibold">&ndash;</b><span class="text-[var(--text-dim)] text-xs">offline</span>
</div>
<div id="r-peak-wrap" class="hidden panel px-4 py-2.5 flex items-center gap-2">
<span class="text-[var(--text-dim)] text-[10px] uppercase tracking-[0.15em]">Loudest now</span>
<b id="r-peak" class="reading text-lg font-semibold text-seismo-orange">&ndash;</b><span class="text-[var(--text-dim)] text-xs">dB</span>
<span id="r-peak-loc" class="text-[var(--text-dim)] text-sm"></span>
</div>
</div>
<div id="loc-map" class="h-64 rounded-xl overflow-hidden mb-6 hidden border border-slate-700"></div>
<div id="loc-map" class="panel reveal hidden h-72 overflow-hidden mb-6" style="animation-delay:80ms"></div>
<div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-4">
{% for loc in locations %}
<a href="/portal/location/{{ loc.id }}" data-loc="{{ loc.id }}"
class="loc-tile block rounded-xl border border-slate-700 bg-slate-800/50 p-4 hover:border-seismo-orange transition-colors">
class="loc-tile panel panel-hover reveal block p-5" style="animation-delay: {{ (loop.index0 * 55) + 140 }}ms">
<div class="flex items-start justify-between gap-2">
<div class="font-semibold">{{ loc.name }}</div>
<span class="loc-badge hidden shrink-0 px-2 py-0.5 text-xs rounded-full"></span>
<div class="min-w-0">
<div class="font-semibold tracking-tight truncate">{{ loc.name }}</div>
<div class="text-xs text-[var(--text-dim)] mt-0.5 truncate">{{ loc.address or loc.project_name or '' }}</div>
</div>
<div class="text-xs text-gray-400 mt-0.5 truncate">{{ loc.address or loc.project_name or '' }}</div>
<div class="mt-3 flex items-baseline gap-1">
<span class="loc-leq text-3xl font-bold text-seismo-orange">--</span>
<span class="text-sm text-gray-400">dB Leq</span>
<span class="loc-badge hidden shrink-0"></span>
</div>
<div class="loc-fresh text-xs text-gray-500 mt-1">&nbsp;</div>
<div class="mt-5 flex items-baseline gap-1.5">
<span class="loc-leq reading text-[2.6rem] leading-none font-semibold">--</span>
<span class="text-xs text-[var(--text-dim)] font-mono tracking-wide">dB&nbsp;Leq</span>
</div>
<div class="loc-fresh text-[11px] text-[var(--text-dim)]/70 mt-2 font-mono">&nbsp;</div>
</a>
{% endfor %}
</div>
{% else %}
<div class="rounded-xl border border-slate-700 bg-slate-800/50 p-8 text-center text-gray-400">
No active monitoring locations yet.
</div>
<div class="panel reveal p-12 text-center text-[var(--text-dim)] mt-6">No active monitoring locations yet.</div>
{% endif %}
{% endblock %}
@@ -57,15 +63,14 @@ const LOCATIONS = {{ locations|tojson }};
const liveState = {}; // loc.id -> {status, leq(num|null), leqStr}
const markersById = {}; // loc.id -> circleMarker (for live recolor)
// Dot/level color. Bands are placeholders until per-location alert thresholds
// exist (M2 alerts will color by threshold breach instead).
// Dot/level color. Placeholder bands until per-location alert thresholds exist.
const LEVEL_AMBER = 55, LEVEL_RED = 70;
const COLOR_IDLE = '#64748b'; // slate-500 — not producing a live level
const COLOR_IDLE = '#5a6478';
function levelColor(st) {
if (!st || st.status !== 'measuring' || st.leq == null) return COLOR_IDLE;
if (st.leq >= LEVEL_RED) return '#ef4444'; // red-500
if (st.leq >= LEVEL_AMBER) return '#f59e0b'; // amber-500
return '#22c55e'; // green-500
if (st.leq >= LEVEL_RED) return '#f87171';
if (st.leq >= LEVEL_AMBER) return '#fbbf24';
return '#34d399';
}
function num(v) { const f = parseFloat(v); return isNaN(f) ? null : f; }
@@ -78,11 +83,13 @@ function fmtAgo(iso) {
return 'updated ' + Math.round(s / 3600) + 'h ago';
}
const BADGE_BASE = 'loc-badge inline-flex items-center gap-1.5 shrink-0 px-2.5 py-1 text-[11px] rounded-full border ';
function updateMarker(loc) {
const m = markersById[loc.id]; if (!m) return;
const st = liveState[loc.id];
m.setStyle({ fillColor: levelColor(st) });
let label = loc.name;
let label = `<b>${loc.name}</b>`;
if (st) {
if (st.status === 'measuring') label += ` &middot; ${st.leqStr} dB Leq`;
else if (st.status === 'stopped') label += ' &middot; stopped';
@@ -102,23 +109,18 @@ async function loadTile(loc) {
const d = j.data;
if (!d) {
liveState[loc.id] = { status: j.reason === 'no_device' ? 'nodevice' : 'offline', leq: null };
if (badge) {
badge.classList.remove('hidden');
badge.textContent = j.reason === 'no_device' ? 'No device' : 'Offline';
badge.className = 'loc-badge shrink-0 px-2 py-0.5 text-xs rounded-full bg-slate-700 text-gray-300';
}
if (leqEl) leqEl.textContent = '--';
if (badge) { badge.classList.remove('hidden'); badge.className = BADGE_BASE + 'border-[var(--border)] text-[var(--text-dim)]'; badge.textContent = j.reason === 'no_device' ? 'No device' : 'Offline'; }
if (leqEl) { leqEl.textContent = '--'; leqEl.style.color = 'var(--text-dim)'; }
if (fresh) fresh.innerHTML = '&nbsp;';
} else {
const measuring = d.measurement_state === 'Start' || d.measurement_state === 'Measure';
const leqStr = (d.leq == null || d.leq === '') ? '--' : d.leq;
liveState[loc.id] = { status: measuring ? 'measuring' : 'stopped', leq: num(d.leq), leqStr };
if (leqEl) leqEl.textContent = leqStr;
if (leqEl) { leqEl.textContent = leqStr; leqEl.style.color = measuring ? levelColor(liveState[loc.id]) : 'var(--text)'; }
if (badge) {
badge.classList.remove('hidden');
badge.textContent = measuring ? '● Live' : 'Stopped';
badge.className = 'loc-badge shrink-0 px-2 py-0.5 text-xs rounded-full ' +
(measuring ? 'bg-green-900/40 text-green-300' : 'bg-slate-700 text-gray-300');
if (measuring) { badge.className = BADGE_BASE + 'border-[rgba(244,139,28,0.45)] text-seismo-orange'; badge.innerHTML = '<span class="live-dot"></span> Live'; }
else { badge.className = BADGE_BASE + 'border-[var(--border)] text-[var(--text-dim)]'; badge.textContent = 'Stopped'; }
}
if (fresh) fresh.textContent = fmtAgo(d.last_seen);
}
@@ -155,30 +157,28 @@ async function refreshAll() {
refreshAll();
setInterval(refreshAll, 15000);
// Map of locations that have coordinates — dots recolor live via updateMarker().
// Map of locations with coordinates — dark tiles, dots recolor live.
const withCoords = LOCATIONS.filter(l => l.coordinates);
if (withCoords.length) {
const mapEl = document.getElementById('loc-map');
mapEl.classList.remove('hidden');
const map = L.map('loc-map', { scrollWheelZoom: false });
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
{ maxZoom: 19, attribution: '© OpenStreetMap' }).addTo(map);
const map = L.map('loc-map', { scrollWheelZoom: false, attributionControl: true });
L.tileLayer('https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png', {
maxZoom: 19, subdomains: 'abcd', attribution: '© OpenStreetMap © CARTO'
}).addTo(map);
const pts = [];
withCoords.forEach(l => {
const [la, lo] = (l.coordinates || '').split(',').map(Number);
if (!isNaN(la) && !isNaN(lo)) {
// Same dot style as the internal project map (circleMarker, not a pin),
// but recolored live by current level.
markersById[l.id] = L.circleMarker([la, lo], {
radius: 8, fillColor: levelColor(liveState[l.id]), color: '#fff',
weight: 2, opacity: 1, fillOpacity: 0.9,
radius: 7, fillColor: levelColor(liveState[l.id]), color: '#fff',
weight: 2, opacity: 0.9, fillOpacity: 0.95,
}).addTo(map).bindTooltip(l.name, { direction: 'top', offset: [0, -6] });
pts.push([la, lo]);
}
});
if (pts.length) map.fitBounds(pts, { padding: [30, 30], maxZoom: 15 });
if (pts.length) map.fitBounds(pts, { padding: [36, 36], maxZoom: 15 });
else mapEl.classList.add('hidden');
// Paint dots with whatever live data has already arrived.
LOCATIONS.forEach(updateMarker);
}
</script>