style(portal): field-instrument redesign — shell + overview
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:
+109
-17
@@ -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>
|
||||
<span class="text-seismo-orange">{{ client.name }}</span>{% endif %}
|
||||
<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>
|
||||
|
||||
Reference in New Issue
Block a user