684 lines
54 KiB
HTML
684 lines
54 KiB
HTML
<!DOCTYPE html>
|
|
|
|
<html class="dark" lang="en"><head><meta charset="utf-8"/><meta content="width=device-width, initial-scale=1.0" name="viewport"/><meta content="web_standard" name="shell-type"/><title>MotorSignal Telemetry</title><link href="https://fonts.googleapis.com" rel="preconnect"/><link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect"/><link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@500;600;700&family=Space+Grotesk:wght@600;700&display=swap" rel="stylesheet"/><link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" rel="stylesheet"/><link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
|
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/><style>@layer base { html, body { margin: 0; padding: 0; } body { overscroll-behavior: none; } main > :first-child { margin-top: 0 !important; } main > :last-child { margin-bottom: 0 !important; } } ::-webkit-scrollbar { display: none; }</style><script src="https://cdn.tailwindcss.com"></script><script id="tailwind-config">tailwind.config = { darkMode: "class", theme: { extend: { "colors": { "on-tertiary": "#3c0091", "on-primary": "#00363d", "error-container": "#93000a", "on-secondary": "#002a78", "inverse-on-surface": "#2d3036", "on-error-container": "#ffdad6", "secondary-fixed": "#dbe1ff", "surface-container-low": "#181c21", "outline-variant": "#3b494c", "surface-variant": "#32353b", "background": "#101419", "on-surface-variant": "#bac9cc", "on-surface": "#e0e2ea", "on-background": "#e0e2ea", "on-primary-container": "#00626e", "on-secondary-container": "#cdd7ff", "primary-container": "#00e5ff", "primary": "#c3f5ff", "on-primary-fixed-variant": "#004f58", "on-primary-fixed": "#001f24", "tertiary": "#f2e9ff", "on-tertiary-fixed-variant": "#5516be", "surface-container-high": "#272a30", "surface-dim": "#101419", "primary-fixed": "#9cf0ff", "tertiary-fixed": "#e9ddff", "on-secondary-fixed": "#00174b", "error": "#ffb4ab", "on-secondary-fixed-variant": "#003ea8", "on-error": "#690005", "inverse-primary": "#006875", "inverse-surface": "#e0e2ea", "surface-container-highest": "#32353b", "secondary": "#b4c5ff", "surface": "#101419", "tertiary-container": "#d9c8ff", "surface-bright": "#36393f", "secondary-container": "#0053db", "on-tertiary-fixed": "#23005c", "surface-container": "#1d2025", "surface-container-lowest": "#0b0e13", "on-tertiary-container": "#6834d1", "secondary-fixed-dim": "#b4c5ff", "outline": "#849396", "surface-tint": "#00daf3", "primary-fixed-dim": "#00daf3", "tertiary-fixed-dim": "#d0bcff" }, "borderRadius": { "DEFAULT": "0.25rem", "lg": "0.5rem", "xl": "0.75rem", "full": "9999px" }, "spacing": { "margin": "1rem", "gutter-lg": "1.5rem", "space-md": "1rem", "space-xs": "0.25rem", "space-lg": "1.5rem", "space-xl": "2rem", "space-sm": "0.5rem", "margin-lg": "2rem", "gutter": "1rem" }, "fontFamily": { "body-md": ["Inter"], "display-hero": ["Space Grotesk"], "label-data": ["JetBrains Mono"], "telemetry-metric-lg-mobile": ["JetBrains Mono"], "headline-lg": ["Space Grotesk"], "telemetry-metric-lg": ["JetBrains Mono"], "label-caption": ["Inter"], "headline-sm": ["Space Grotesk"], "headline-md": ["Space Grotesk"], "body-lg": ["Inter"], "telemetry-metric-md": ["JetBrains Mono"], "display-hero-mobile": ["Space Grotesk"] }, "fontSize": { "body-md": ["14px", { "lineHeight": "20px", "fontWeight": "400" }], "display-hero": ["56px", { "lineHeight": "60px", "letterSpacing": "-0.03em", "fontWeight": "700" }], "label-data": ["12px", { "lineHeight": "16px", "letterSpacing": "0.08em", "fontWeight": "600" }], "telemetry-metric-lg-mobile": ["36px", { "lineHeight": "36px", "letterSpacing": "-0.03em", "fontWeight": "700" }], "headline-lg": ["32px", { "lineHeight": "40px", "letterSpacing": "-0.02em", "fontWeight": "700" }], "telemetry-metric-lg": ["48px", { "lineHeight": "48px", "letterSpacing": "-0.04em", "fontWeight": "700" }], "label-caption": ["11px", { "lineHeight": "14px", "letterSpacing": "0.05em", "fontWeight": "600" }], "headline-sm": ["20px", { "lineHeight": "28px", "fontWeight": "600" }], "headline-md": ["24px", { "lineHeight": "32px", "letterSpacing": "-0.01em", "fontWeight": "600" }], "body-lg": ["16px", { "lineHeight": "24px", "fontWeight": "500" }], "telemetry-metric-md": ["28px", { "lineHeight": "32px", "letterSpacing": "-0.02em", "fontWeight": "600" }], "display-hero-mobile": ["40px", { "lineHeight": "44px", "letterSpacing": "-0.02em", "fontWeight": "700" }] } } } };</script></head><body class="bg-surface text-on-surface font-body-md antialiased selection:bg-primary-container selection:text-on-primary"><header class="fixed top-0 left-0 right-0 z-50 bg-surface/90 backdrop-blur-xl shadow-[0_1px_8px_rgba(0,0,0,0.4)]"><div class="h-20 w-full px-gutter-lg flex items-center justify-between gap-space-md"><div class="flex items-center gap-space-lg"><a class="flex items-center gap-space-sm group" href="#"><img alt="Brand logo" class="h-8 w-auto object-contain" src="https://lh3.googleusercontent.com/aida/AEtjO1UTw8rBQQ-sNGfIk81zYX1u7rT7_IcgGT6GjJCfVJDKecDfGr1MrPEVgjII5_MK3wj6tO6Qw2ZfHhqwrKxHdNrJUGxFOlXalVgFnDtgpjoNDSFtltDk6syCaK_mTdC1xPJqngCTTc2T43fBqyYBnwQANHFTwwGJ646jmbPtJavdn15iGT6wqfLaoJpDew60SUt_hG1nouBFUYDMxOiNIIgnWfkgJ04aTmmTNXr6Ca7776OBqr3haTpFHQ"/><span class="font-headline-sm text-headline-sm uppercase tracking-wider text-primary group-hover:text-primary-container transition-colors">MotorSignal</span></a><nav class="hidden xl:flex items-center gap-space-md" data-active-classes="text-primary-container font-headline-sm"><a class="text-on-surface-variant font-label-data text-label-data uppercase tracking-wider hover:text-on-surface transition-colors px-space-xs py-space-xs" data-path="motorsignal-public-homepage" href="#">Home</a><a class="text-on-surface-variant font-label-data text-label-data uppercase tracking-wider hover:text-on-surface transition-colors px-space-xs py-space-xs" data-path="group-rides-discovery" href="#">Group Rides</a><a class="text-on-surface-variant font-label-data text-label-data uppercase tracking-wider hover:text-on-surface transition-colors px-space-xs py-space-xs" data-path="live-telemetry-showcase" href="#">Live Telemetry</a><a class="text-on-surface-variant font-label-data text-label-data uppercase tracking-wider hover:text-on-surface transition-colors px-space-xs py-space-xs" data-path="ride-organizer-hub" href="#">Ride Hub</a><a class="text-on-surface-variant font-label-data text-label-data uppercase tracking-wider hover:text-on-surface transition-colors px-space-xs py-space-xs" data-path="clubs-directory" href="#">Clubs</a><a class="text-on-surface-variant font-label-data text-label-data uppercase tracking-wider hover:text-on-surface transition-colors px-space-xs py-space-xs" data-path="founder-officer-hub" href="#">Officer Hub</a><a class="text-on-surface-variant font-label-data text-label-data uppercase tracking-wider hover:text-on-surface transition-colors px-space-xs py-space-xs" data-path="roles-ranks-builder" href="#">Ranks Builder</a><a class="text-on-surface-variant font-label-data text-label-data uppercase tracking-wider hover:text-on-surface transition-colors px-space-xs py-space-xs" data-path="operations-admin-console" href="#">Admin Console</a></nav></div><div class="flex items-center gap-space-md"><div class="hidden md:flex items-center gap-space-xs px-space-sm py-space-xs rounded-full bg-surface-container-low shadow-[0_0_12px_rgba(0,229,255,0.15)]"><span class="w-2 h-2 rounded-full bg-primary-container animate-pulse"></span><span class="font-label-data text-label-data text-primary uppercase">20Hz Kalman Online</span></div><a class="inline-flex items-center justify-center h-12 px-space-md rounded-lg bg-primary-container text-on-primary font-label-data text-label-data uppercase tracking-wider shadow-[0_0_16px_rgba(0,229,255,0.35)] hover:bg-primary hover:text-on-primary transition-all duration-200 active:scale-[0.98]" href="#">Download App</a><div class="flex items-center gap-space-xs pl-space-xs"><img alt="Profile" class="w-8 h-8 rounded-full object-cover ring-2 ring-surface-container-high" src="https://lh3.googleusercontent.com/aida/AEtjO1XyAAxLiegDwfGfDOfnmd9desjMVj3kxU_bPrvNgMXtcbq65IhKW7uieorRmFWWL7_4VvnpTq8N2pToWOm8TSGRSiftlbFyjQPawmL20y9w0BQJjvgVum3Q8IdqGLli9RZ-16Yv2wJ36FHEwrk4T1IQTob8mc_BjN7g9c3Ic_Xz0pzHgZVxjjahryKv77ULhtLXK5wYZadicArshGkykAEqRbTPZfDNZ-YNLSAN51PoR4wbt46K46HLSvs"/></div></div></div></header><main class="w-full pt-20 bg-surface min-h-[calc(100vh-80px)]"><div class="flex flex-col w-full">
|
|
<!-- Sub-Header Metric Stream & Emergency Broadcast Ticker -->
|
|
<div class="w-full bg-surface-container-lowest px-gutter-lg py-space-xs flex flex-wrap items-center justify-between gap-space-md shadow-md">
|
|
<div class="flex items-center gap-space-md overflow-x-auto min-w-0">
|
|
<div class="flex items-center gap-space-xs shrink-0">
|
|
<span class="w-2.5 h-2.5 rounded-full bg-primary-container shadow-[0_0_10px_rgba(0,229,255,0.7)] animate-pulse"></span>
|
|
<span class="font-label-data text-label-data text-primary-container tracking-wider uppercase">ALL SYSTEMS NOMINAL</span>
|
|
</div>
|
|
<span class="text-outline-variant font-label-data text-label-data">•</span>
|
|
<span class="font-label-data text-label-data text-on-surface-variant uppercase tracking-wider shrink-0">30-DAY UPTIME: <span class="text-on-surface font-semibold">99.982%</span></span>
|
|
<span class="text-outline-variant font-label-data text-label-data">•</span>
|
|
<span class="font-label-data text-label-data text-on-surface-variant uppercase tracking-wider shrink-0">GLOBAL P99: <span class="text-primary-container font-semibold">13.8ms</span></span>
|
|
<span class="text-outline-variant font-label-data text-label-data">•</span>
|
|
<span class="font-label-data text-label-data text-on-surface-variant uppercase tracking-wider shrink-0">CLUSTER: <span class="text-on-surface font-semibold">US-WEST (SV-CORE-01)</span></span>
|
|
<span class="text-outline-variant font-label-data text-label-data">•</span>
|
|
<span class="font-label-data text-label-data text-on-surface-variant uppercase tracking-wider shrink-0">RF MESH: <span class="text-on-surface font-semibold">48/48 RELAYS SYNCED</span></span>
|
|
</div>
|
|
<div class="flex items-center gap-space-sm shrink-0">
|
|
<span class="font-label-caption text-label-caption text-outline uppercase tracking-wider hidden xl:inline">KALMAN ENGINE V4.8.2</span>
|
|
<div class="h-4 w-px bg-surface-container-highest hidden xl:block"></div>
|
|
<span class="px-space-xs py-0.5 rounded font-label-data text-label-caption bg-surface-container-high text-primary uppercase">EPOCH: 1740441600</span>
|
|
</div>
|
|
</div>
|
|
<!-- Operational Command Header Section -->
|
|
<section class="w-full bg-surface-container-low px-gutter-lg py-space-lg shadow-xl relative overflow-hidden">
|
|
<div class="absolute -right-24 -top-24 w-96 h-96 rounded-full bg-primary-container/5 blur-3xl pointer-events-none"></div>
|
|
<div class="flex flex-col 2xl:flex-row 2xl:items-center justify-between gap-space-lg relative z-10">
|
|
<div class="flex flex-col gap-space-xs">
|
|
<div class="flex items-center gap-space-sm flex-wrap">
|
|
<span class="px-space-xs py-0.5 rounded font-label-data text-label-caption bg-primary-container/10 text-primary-container uppercase tracking-wider">DEFENSE HUD PROTOCOL</span>
|
|
<span class="px-space-xs py-0.5 rounded font-label-data text-label-caption bg-surface-container-highest text-on-surface-variant uppercase tracking-wider">CLEARANCE L4 COMMAND</span>
|
|
<span class="font-label-data text-label-caption text-outline">NODE: SJC-TELEMETRY-MESH-ALPHA</span>
|
|
</div>
|
|
<h1 class="font-headline-lg text-headline-lg tracking-tight uppercase text-on-surface flex items-center gap-space-sm">
|
|
Operations & Infrastructure Console
|
|
<span class="w-3 h-3 rounded-full bg-primary-container shadow-[0_0_12px_rgba(0,229,255,0.8)]"></span>
|
|
</h1>
|
|
<p class="font-body-md text-body-md text-on-surface-variant max-w-4xl">
|
|
High-density mission operations console coordinating 20Hz inertial measurement unit (IMU) telemetry streams, peer-to-peer 915MHz sub-gigahertz mesh relays, and safety hazard syndication for multi-rider formations.
|
|
</p>
|
|
</div>
|
|
<!-- Command Quick Actions -->
|
|
<div class="flex flex-wrap items-center gap-space-sm self-start 2xl:self-center">
|
|
<button class="h-12 px-space-md rounded-lg bg-surface-container-high text-on-surface font-label-data text-label-data uppercase tracking-wider shadow-sm hover:bg-surface-bright active:scale-95 transition-all flex items-center gap-space-xs" id="btn-probe">
|
|
<span class="material-symbols-outlined text-primary-container text-lg">radar</span>
|
|
Trigger Health Probe
|
|
</button>
|
|
<button class="h-12 px-space-md rounded-lg bg-surface-container-high text-on-surface font-label-data text-label-data uppercase tracking-wider shadow-sm hover:bg-surface-bright active:scale-95 transition-all flex items-center gap-space-xs" id="btn-export">
|
|
<span class="material-symbols-outlined text-on-surface-variant text-lg">download</span>
|
|
Export WAL Logs
|
|
</button>
|
|
<button class="h-12 px-space-md rounded-lg bg-surface-container-high text-on-surface font-label-data text-label-data uppercase tracking-wider shadow-sm hover:bg-surface-bright active:scale-95 transition-all flex items-center gap-space-xs" id="btn-runbook">
|
|
<span class="material-symbols-outlined text-secondary text-lg">menu_book</span>
|
|
Incident Runbook
|
|
</button>
|
|
<button class="h-12 px-space-md rounded-lg bg-error-container text-on-error font-label-data text-label-data uppercase tracking-wider shadow-[0_0_20px_rgba(239,68,68,0.35)] hover:opacity-90 active:scale-95 transition-all flex items-center gap-space-xs" id="btn-broadcast">
|
|
<span class="material-symbols-outlined text-on-error text-lg animate-pulse">campaign</span>
|
|
Emergency Mesh Broadcast
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- 8-Tab Operational Navigation Bar -->
|
|
<nav class="w-full bg-surface-container-lowest px-gutter-lg shadow-md sticky top-20 z-40 overflow-x-auto">
|
|
<div class="flex items-center min-w-max gap-space-xs py-space-xs">
|
|
<button class="tab-trigger flex items-center gap-space-xs px-space-md py-space-sm rounded-lg bg-primary-container/10 text-primary-container font-label-data text-label-data uppercase tracking-wider shadow-sm transition-all" data-tab="tab-overview">
|
|
<span class="material-symbols-outlined text-base">dashboard_customize</span>
|
|
1. System Overview & Dials
|
|
</button>
|
|
<button class="tab-trigger flex items-center gap-space-xs px-space-md py-space-sm rounded-lg text-on-surface-variant font-label-data text-label-data uppercase tracking-wider hover:text-on-surface hover:bg-surface-container transition-all" data-tab="tab-sensor">
|
|
<span class="material-symbols-outlined text-base">sensors</span>
|
|
2. Sensor Fusion & 20Hz Pipeline
|
|
</button>
|
|
<button class="tab-trigger flex items-center gap-space-xs px-space-md py-space-sm rounded-lg text-on-surface-variant font-label-data text-label-data uppercase tracking-wider hover:text-on-surface hover:bg-surface-container transition-all" data-tab="tab-mesh">
|
|
<span class="material-symbols-outlined text-base">hub</span>
|
|
3. Ad-Hoc Mesh & RF Network
|
|
</button>
|
|
<button class="tab-trigger flex items-center gap-space-xs px-space-md py-space-sm rounded-lg text-on-surface-variant font-label-data text-label-data uppercase tracking-wider hover:text-on-surface hover:bg-surface-container transition-all" data-tab="tab-waze">
|
|
<span class="material-symbols-outlined text-base">traffic</span>
|
|
4. Waze & Radar Ingestion
|
|
</button>
|
|
<button class="tab-trigger flex items-center gap-space-xs px-space-md py-space-sm rounded-lg text-on-surface-variant font-label-data text-label-data uppercase tracking-wider hover:text-on-surface hover:bg-surface-container transition-all" data-tab="tab-drift">
|
|
<span class="material-symbols-outlined text-base">database</span>
|
|
5. Drift Schema 7 & SQLite WAL
|
|
</button>
|
|
<button class="tab-trigger flex items-center gap-space-xs px-space-md py-space-sm rounded-lg text-on-surface-variant font-label-data text-label-data uppercase tracking-wider hover:text-on-surface hover:bg-surface-container transition-all" data-tab="tab-syndication">
|
|
<span class="material-symbols-outlined text-base">sync_alt</span>
|
|
6. Club Syndication & API Gateway
|
|
</button>
|
|
<button class="tab-trigger flex items-center gap-space-xs px-space-md py-space-sm rounded-lg text-on-surface-variant font-label-data text-label-data uppercase tracking-wider hover:text-on-surface hover:bg-surface-container transition-all" data-tab="tab-incidents">
|
|
<span class="material-symbols-outlined text-base text-error">warning</span>
|
|
7. Active Triage <span class="ml-1 px-1.5 py-0.5 rounded-full bg-error-container text-on-error font-label-caption text-label-caption font-bold">2 LOW</span>
|
|
</button>
|
|
<button class="tab-trigger flex items-center gap-space-xs px-space-md py-space-sm rounded-lg text-on-surface-variant font-label-data text-label-data uppercase tracking-wider hover:text-on-surface hover:bg-surface-container transition-all" data-tab="tab-audit">
|
|
<span class="material-symbols-outlined text-base">vpn_key</span>
|
|
8. Audit Logs & KMS Keys
|
|
</button>
|
|
</div>
|
|
</nav>
|
|
<!-- Main Viewport Canvas (Tab 1: System Overview) -->
|
|
<div class="w-full px-gutter-lg py-space-lg flex flex-col gap-space-lg">
|
|
<!-- 4 High-Density Mission KPI Cards -->
|
|
<div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-space-md">
|
|
<!-- KPI 1 -->
|
|
<div class="bg-surface-container p-space-md rounded-xl shadow-lg relative overflow-hidden group">
|
|
<div class="flex items-center justify-between pb-space-xs">
|
|
<span class="font-label-data text-label-data uppercase tracking-wider text-on-surface-variant">20Hz Stream Ingestion</span>
|
|
<span class="w-2 h-2 rounded-full bg-primary-container shadow-[0_0_8px_#00e5ff]"></span>
|
|
</div>
|
|
<div class="flex items-baseline gap-space-xs mt-space-xs">
|
|
<span class="font-telemetry-metric-lg text-telemetry-metric-lg text-on-surface">1.48<span class="text-primary-container">M</span></span>
|
|
<span class="font-label-data text-label-data text-on-surface-variant">evt/s</span>
|
|
</div>
|
|
<div class="mt-space-sm">
|
|
<div class="flex justify-between items-center font-label-caption text-label-caption text-on-surface-variant mb-1">
|
|
<span>CAPACITY LOAD (74%)</span>
|
|
<span class="text-primary">TARGET 2.0M</span>
|
|
</div>
|
|
<div class="w-full bg-surface-container-highest h-1.5 rounded-full overflow-hidden">
|
|
<div class="bg-primary-container h-full rounded-full shadow-[0_0_8px_#00e5ff]" style="width: 74%"></div>
|
|
</div>
|
|
</div>
|
|
<div class="mt-space-sm pt-space-xs flex items-center justify-between font-label-caption text-label-caption text-outline">
|
|
<span>BATCH TIMEOUT: 50ms</span>
|
|
<span class="text-primary-container">+3.8% vs last hr</span>
|
|
</div>
|
|
</div>
|
|
<!-- KPI 2 -->
|
|
<div class="bg-surface-container p-space-md rounded-xl shadow-lg relative overflow-hidden group">
|
|
<div class="flex items-center justify-between pb-space-xs">
|
|
<span class="font-label-data text-label-data uppercase tracking-wider text-on-surface-variant">Active Cockpit HUDs</span>
|
|
<span class="w-2 h-2 rounded-full bg-primary-container shadow-[0_0_8px_#00e5ff]"></span>
|
|
</div>
|
|
<div class="flex items-baseline gap-space-xs mt-space-xs">
|
|
<span class="font-telemetry-metric-lg text-telemetry-metric-lg text-on-surface">4,812</span>
|
|
<span class="font-label-data text-label-data text-on-surface-variant">riders</span>
|
|
</div>
|
|
<div class="mt-space-sm">
|
|
<div class="flex justify-between items-center font-label-caption text-label-caption text-on-surface-variant mb-1">
|
|
<span>PACKS SYNCHRONIZED</span>
|
|
<span class="text-secondary">416 FORMS</span>
|
|
</div>
|
|
<div class="w-full bg-surface-container-highest h-1.5 rounded-full overflow-hidden">
|
|
<div class="bg-secondary-container h-full rounded-full shadow-[0_0_8px_#0053db]" style="width: 86%"></div>
|
|
</div>
|
|
</div>
|
|
<div class="mt-space-sm pt-space-xs flex items-center justify-between font-label-caption text-label-caption text-outline">
|
|
<span>WS DROP RATE: <0.01%</span>
|
|
<span class="text-secondary">+124 riders live</span>
|
|
</div>
|
|
</div>
|
|
<!-- KPI 3 -->
|
|
<div class="bg-surface-container p-space-md rounded-xl shadow-lg relative overflow-hidden group">
|
|
<div class="flex items-center justify-between pb-space-xs">
|
|
<span class="font-label-data text-label-data uppercase tracking-wider text-on-surface-variant">RF Mesh Radio Packets</span>
|
|
<span class="w-2 h-2 rounded-full bg-primary-container shadow-[0_0_8px_#00e5ff]"></span>
|
|
</div>
|
|
<div class="flex items-baseline gap-space-xs mt-space-xs">
|
|
<span class="font-telemetry-metric-lg text-telemetry-metric-lg text-on-surface">384</span>
|
|
<span class="font-label-data text-label-data text-on-surface-variant">pkts/s</span>
|
|
</div>
|
|
<div class="mt-space-sm">
|
|
<div class="flex justify-between items-center font-label-caption text-label-caption text-on-surface-variant mb-1">
|
|
<span>PACKET DROP COEFFICIENT</span>
|
|
<span class="text-primary-container font-semibold">0.00%</span>
|
|
</div>
|
|
<div class="w-full bg-surface-container-highest h-1.5 rounded-full overflow-hidden">
|
|
<div class="bg-primary-container h-full rounded-full" style="width: 100%"></div>
|
|
</div>
|
|
</div>
|
|
<div class="mt-space-sm pt-space-xs flex items-center justify-between font-label-caption text-label-caption text-outline">
|
|
<span>FREQUENCY: 915.2-915.4MHz</span>
|
|
<span class="text-on-surface">48 RELAYS</span>
|
|
</div>
|
|
</div>
|
|
<!-- KPI 4 -->
|
|
<div class="bg-surface-container p-space-md rounded-xl shadow-lg relative overflow-hidden group">
|
|
<div class="flex items-center justify-between pb-space-xs">
|
|
<span class="font-label-data text-label-data uppercase tracking-wider text-on-surface-variant">Kalman Filter Compute</span>
|
|
<span class="w-2 h-2 rounded-full bg-primary-container shadow-[0_0_8px_#00e5ff]"></span>
|
|
</div>
|
|
<div class="flex items-baseline gap-space-xs mt-space-xs">
|
|
<span class="font-telemetry-metric-lg text-telemetry-metric-lg text-on-surface">0.82</span>
|
|
<span class="font-label-data text-label-data text-on-surface-variant">ms/roll</span>
|
|
</div>
|
|
<div class="mt-space-sm">
|
|
<div class="flex justify-between items-center font-label-caption text-label-caption text-on-surface-variant mb-1">
|
|
<span>IMU DRIFT CORRECTION</span>
|
|
<span class="text-primary font-semibold"><0.05° ERR</span>
|
|
</div>
|
|
<div class="w-full bg-surface-container-highest h-1.5 rounded-full overflow-hidden">
|
|
<div class="bg-primary-container h-full rounded-full" style="width: 25%"></div>
|
|
</div>
|
|
</div>
|
|
<div class="mt-space-sm pt-space-xs flex items-center justify-between font-label-caption text-label-caption text-outline">
|
|
<span>SIMD WASM ACCELERATED</span>
|
|
<span class="text-primary-container">STEADY STATE</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Telemetry Service Health Dials Section (Glowing Rings) -->
|
|
<div class="bg-surface-container-low p-space-lg rounded-xl shadow-xl flex flex-col gap-space-md">
|
|
<div class="flex flex-col sm:flex-row sm:items-center justify-between gap-space-sm">
|
|
<div>
|
|
<span class="font-label-data text-label-caption uppercase tracking-wider text-primary-container">CORE SUBSYSTEM TELEMETRY</span>
|
|
<h2 class="font-headline-md text-headline-md text-on-surface uppercase tracking-tight">Active Microservice Health Gauges</h2>
|
|
</div>
|
|
<div class="flex items-center gap-space-sm">
|
|
<span class="font-label-data text-label-data text-on-surface-variant">AUTOREFRESH: 1000ms</span>
|
|
<span class="w-2 h-2 rounded-full bg-primary-container animate-ping"></span>
|
|
</div>
|
|
</div>
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-space-md pt-space-xs">
|
|
<!-- Dial 1: Sensor Fusion Engine -->
|
|
<div class="bg-surface-container p-space-md rounded-xl shadow-md flex flex-col items-center text-center">
|
|
<div class="relative w-36 h-36 flex items-center justify-center my-space-xs">
|
|
<svg class="w-full h-full transform -rotate-90" viewbox="0 0 120 120">
|
|
<circle class="text-surface-container-highest" cx="60" cy="60" fill="none" r="50" stroke="currentColor" stroke-width="8"></circle>
|
|
<circle class="text-primary-container transition-all duration-1000" cx="60" cy="60" fill="none" r="50" stroke="currentColor" stroke-dasharray="314" stroke-dashoffset="1" stroke-linecap="round" stroke-width="8" style="filter: drop-shadow(0 0 6px #00e5ff);"></circle>
|
|
</svg>
|
|
<div class="absolute inset-0 flex flex-col items-center justify-center">
|
|
<span class="font-telemetry-metric-md text-telemetry-metric-md text-on-surface font-bold">99.99<span class="text-xs text-primary-container font-label-data">%</span></span>
|
|
<span class="font-label-caption text-label-caption text-on-surface-variant uppercase mt-1">SLA INDEX</span>
|
|
</div>
|
|
</div>
|
|
<span class="font-headline-sm text-headline-sm text-on-surface uppercase tracking-wide mt-space-xs">Sensor Fusion Core</span>
|
|
<span class="font-label-caption text-label-caption text-primary-container uppercase mt-0.5">20Hz IMU Vector Filter</span>
|
|
<div class="w-full bg-surface-container-lowest p-space-xs rounded mt-space-sm flex justify-between font-label-data text-label-caption text-on-surface-variant">
|
|
<span>MEM: 3.4GB / 8GB</span>
|
|
<span class="text-primary">THREADS: 32</span>
|
|
</div>
|
|
</div>
|
|
<!-- Dial 2: Cloudflare R2 Drift Storage -->
|
|
<div class="bg-surface-container p-space-md rounded-xl shadow-md flex flex-col items-center text-center">
|
|
<div class="relative w-36 h-36 flex items-center justify-center my-space-xs">
|
|
<svg class="w-full h-full transform -rotate-90" viewbox="0 0 120 120">
|
|
<circle class="text-surface-container-highest" cx="60" cy="60" fill="none" r="50" stroke="currentColor" stroke-width="8"></circle>
|
|
<circle class="text-primary transition-all duration-1000" cx="60" cy="60" fill="none" r="50" stroke="currentColor" stroke-dasharray="314" stroke-dashoffset="0" stroke-linecap="round" stroke-width="8" style="filter: drop-shadow(0 0 6px #c3f5ff);"></circle>
|
|
</svg>
|
|
<div class="absolute inset-0 flex flex-col items-center justify-center">
|
|
<span class="font-telemetry-metric-md text-telemetry-metric-md text-on-surface font-bold">100<span class="text-xs text-primary font-label-data">%</span></span>
|
|
<span class="font-label-caption text-label-caption text-on-surface-variant uppercase mt-1">INTEGRITY</span>
|
|
</div>
|
|
</div>
|
|
<span class="font-headline-sm text-headline-sm text-on-surface uppercase tracking-wide mt-space-xs">R2 Drift Storage</span>
|
|
<span class="font-label-caption text-label-caption text-primary uppercase mt-0.5">SQLite WAL Replication</span>
|
|
<div class="w-full bg-surface-container-lowest p-space-xs rounded mt-space-sm flex justify-between font-label-data text-label-caption text-on-surface-variant">
|
|
<span>SYNC LAG: 4ms</span>
|
|
<span class="text-on-surface">SHARDS: 12</span>
|
|
</div>
|
|
</div>
|
|
<!-- Dial 3: Waze Police Scraper Proxy -->
|
|
<div class="bg-surface-container p-space-md rounded-xl shadow-md flex flex-col items-center text-center">
|
|
<div class="relative w-36 h-36 flex items-center justify-center my-space-xs">
|
|
<svg class="w-full h-full transform -rotate-90" viewbox="0 0 120 120">
|
|
<circle class="text-surface-container-highest" cx="60" cy="60" fill="none" r="50" stroke="currentColor" stroke-width="8"></circle>
|
|
<circle class="text-tertiary-fixed-dim transition-all duration-1000" cx="60" cy="60" fill="none" r="50" stroke="currentColor" stroke-dasharray="314" stroke-dashoffset="18" stroke-linecap="round" stroke-width="8" style="filter: drop-shadow(0 0 6px rgba(208, 188, 255, 0.6));"></circle>
|
|
</svg>
|
|
<div class="absolute inset-0 flex flex-col items-center justify-center">
|
|
<span class="font-telemetry-metric-md text-telemetry-metric-md text-on-surface font-bold">98.4<span class="text-xs text-tertiary-fixed-dim font-label-data">%</span></span>
|
|
<span class="font-label-caption text-label-caption text-on-surface-variant uppercase mt-1">RATE LIMIT CAP</span>
|
|
</div>
|
|
</div>
|
|
<span class="font-headline-sm text-headline-sm text-on-surface uppercase tracking-wide mt-space-xs">Radar & Waze Proxy</span>
|
|
<span class="font-label-caption text-label-caption text-tertiary uppercase mt-0.5">En Route Hazard Pull</span>
|
|
<div class="w-full bg-surface-container-lowest p-space-xs rounded mt-space-sm flex justify-between font-label-data text-label-caption text-on-surface-variant">
|
|
<span>CACHED: 81.2%</span>
|
|
<span class="text-error">RATE CAUTION</span>
|
|
</div>
|
|
</div>
|
|
<!-- Dial 4: Intercom BLE Audio Bridge -->
|
|
<div class="bg-surface-container p-space-md rounded-xl shadow-md flex flex-col items-center text-center">
|
|
<div class="relative w-36 h-36 flex items-center justify-center my-space-xs">
|
|
<svg class="w-full h-full transform -rotate-90" viewbox="0 0 120 120">
|
|
<circle class="text-surface-container-highest" cx="60" cy="60" fill="none" r="50" stroke="currentColor" stroke-width="8"></circle>
|
|
<circle class="text-primary-container transition-all duration-1000" cx="60" cy="60" fill="none" r="50" stroke="currentColor" stroke-dasharray="314" stroke-dashoffset="7" stroke-linecap="round" stroke-width="8" style="filter: drop-shadow(0 0 6px #00e5ff);"></circle>
|
|
</svg>
|
|
<div class="absolute inset-0 flex flex-col items-center justify-center">
|
|
<span class="font-telemetry-metric-md text-telemetry-metric-md text-on-surface font-bold">99.2<span class="text-xs text-primary-container font-label-data">%</span></span>
|
|
<span class="font-label-caption text-label-caption text-on-surface-variant uppercase mt-1">AUDIO BUFFER</span>
|
|
</div>
|
|
</div>
|
|
<span class="font-headline-sm text-headline-sm text-on-surface uppercase tracking-wide mt-space-xs">Mesh BLE Audio Hub</span>
|
|
<span class="font-label-caption text-label-caption text-primary-container uppercase mt-0.5">Opus Fullband RTP</span>
|
|
<div class="w-full bg-surface-container-lowest p-space-xs rounded mt-space-sm flex justify-between font-label-data text-label-caption text-on-surface-variant">
|
|
<span>JITTER: 1.2ms</span>
|
|
<span class="text-primary">CHANNELS: 16</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Dual Column: Live Throughput Chart + Edge Topology Grid -->
|
|
<div class="grid grid-cols-1 xl:grid-cols-3 gap-space-lg">
|
|
<!-- Interactive Pipeline Chart (2 Cols on Desktop) -->
|
|
<div class="xl:col-span-2 bg-surface-container-low p-space-lg rounded-xl shadow-xl flex flex-col justify-between">
|
|
<div>
|
|
<div class="flex flex-col sm:flex-row sm:items-center justify-between pb-space-md gap-space-sm">
|
|
<div>
|
|
<span class="font-label-data text-label-caption text-primary-container uppercase tracking-wider">REAL-TIME INGESTION METRICS</span>
|
|
<h2 class="font-headline-md text-headline-md text-on-surface uppercase tracking-tight">Throughput (Msg/s) vs. Global Latency (24H)</h2>
|
|
</div>
|
|
<div class="flex items-center gap-space-md">
|
|
<div class="flex items-center gap-space-xs font-label-caption text-label-caption text-on-surface-variant">
|
|
<span class="w-3 h-1 bg-primary-container"></span>
|
|
<span>Throughput (M/s)</span>
|
|
</div>
|
|
<div class="flex items-center gap-space-xs font-label-caption text-label-caption text-on-surface-variant">
|
|
<span class="w-3 h-1 bg-secondary"></span>
|
|
<span>P99 Latency (ms)</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Dynamic SVG Vector Line Graph -->
|
|
<div class="w-full h-64 relative bg-surface-container-lowest rounded-lg p-space-md overflow-hidden flex flex-col justify-between shadow-inner">
|
|
<!-- Background Grid lines -->
|
|
<div class="absolute inset-0 flex flex-col justify-between py-6 px-8 pointer-events-none opacity-20">
|
|
<div class="w-full h-px bg-on-surface-variant"></div>
|
|
<div class="w-full h-px bg-on-surface-variant"></div>
|
|
<div class="w-full h-px bg-on-surface-variant"></div>
|
|
<div class="w-full h-px bg-on-surface-variant"></div>
|
|
</div>
|
|
<!-- Vector Paths -->
|
|
<svg class="absolute inset-0 w-full h-full p-4" preserveaspectratio="none" viewbox="0 0 1000 240">
|
|
<!-- Defs for Gradient Fill -->
|
|
<defs>
|
|
<lineargradient id="cyanGlow" x1="0" x2="0" y1="0" y2="1">
|
|
<stop offset="0%" stop-color="#00e5ff" stop-opacity="0.35"></stop>
|
|
<stop offset="100%" stop-color="#00e5ff" stop-opacity="0.0"></stop>
|
|
</lineargradient>
|
|
</defs>
|
|
<!-- Area Fill Under Ingestion Rate -->
|
|
<polygon fill="url(#cyanGlow)" points="20,220 20,160 100,140 180,150 260,110 340,90 420,130 500,80 580,70 660,110 740,65 820,50 900,85 980,45 980,220"></polygon>
|
|
<!-- Ingestion Line Path -->
|
|
<polyline fill="none" points="20,160 100,140 180,150 260,110 340,90 420,130 500,80 580,70 660,110 740,65 820,50 900,85 980,45" stroke="#00e5ff" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" style="filter: drop-shadow(0 0 8px #00e5ff);"></polyline>
|
|
<!-- P99 Latency Path (Dashed Secondary) -->
|
|
<polyline fill="none" points="20,195 100,190 180,185 260,180 340,175 420,190 500,170 580,165 660,180 740,160 820,155 900,168 980,150" stroke="#b4c5ff" stroke-dasharray="6,4" stroke-width="2"></polyline>
|
|
<!-- Interactive Point Indicators -->
|
|
<circle class="animate-pulse" cx="980" cy="45" fill="#00e5ff" r="5"></circle>
|
|
<circle cx="980" cy="150" fill="#b4c5ff" r="4"></circle>
|
|
</svg>
|
|
<!-- Chart Scale Labels -->
|
|
<div class="relative z-10 flex justify-between font-label-data text-label-caption text-outline">
|
|
<span>2.0M MSG/S (MAX)</span>
|
|
<span>1.5M AVG</span>
|
|
<span>CURRENT: 1.482M MSG/S</span>
|
|
</div>
|
|
<div class="relative z-10 flex justify-between font-label-data text-label-caption text-outline pt-space-xl">
|
|
<span>T-24H</span>
|
|
<span>T-18H</span>
|
|
<span>T-12H</span>
|
|
<span>T-6H</span>
|
|
<span>T-1H</span>
|
|
<span class="text-primary-container font-semibold">LIVE (T-0)</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Metric Footer Ribbon -->
|
|
<div class="grid grid-cols-2 md:grid-cols-4 gap-space-sm pt-space-md">
|
|
<div class="bg-surface-container p-space-xs px-space-sm rounded">
|
|
<span class="font-label-caption text-label-caption text-outline block">P50 LATENCY</span>
|
|
<span class="font-label-data text-headline-sm text-on-surface">3.8 ms</span>
|
|
</div>
|
|
<div class="bg-surface-container p-space-xs px-space-sm rounded">
|
|
<span class="font-label-caption text-label-caption text-outline block">P95 LATENCY</span>
|
|
<span class="font-label-data text-headline-sm text-on-surface">9.1 ms</span>
|
|
</div>
|
|
<div class="bg-surface-container p-space-xs px-space-sm rounded">
|
|
<span class="font-label-caption text-label-caption text-outline block">P99 LATENCY</span>
|
|
<span class="font-label-data text-headline-sm text-primary-container">13.8 ms</span>
|
|
</div>
|
|
<div class="bg-surface-container p-space-xs px-space-sm rounded">
|
|
<span class="font-label-caption text-label-caption text-outline block">OUTLIER MAX</span>
|
|
<span class="font-label-data text-headline-sm text-on-surface-variant">24.2 ms</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Edge Infrastructure Node Topology Grid -->
|
|
<div class="bg-surface-container-low p-space-lg rounded-xl shadow-xl flex flex-col justify-between">
|
|
<div>
|
|
<div class="flex items-center justify-between pb-space-sm">
|
|
<div>
|
|
<span class="font-label-data text-label-caption text-primary-container uppercase tracking-wider">GLOBAL MESH FABRIC</span>
|
|
<h2 class="font-headline-md text-headline-md text-on-surface uppercase tracking-tight">Relay Grid Topologies</h2>
|
|
</div>
|
|
<span class="px-space-xs py-0.5 rounded font-label-data text-label-caption bg-surface-container-highest text-primary">4 ZONES</span>
|
|
</div>
|
|
<p class="font-body-md text-body-md text-on-surface-variant pb-space-md">
|
|
Decentralized telemetry ingestion pods balancing Kalman IMU packets closest to active rider packs.
|
|
</p>
|
|
<div class="space-y-space-sm">
|
|
<!-- Region 1: US-West -->
|
|
<div class="bg-surface-container p-space-sm rounded-lg shadow-sm">
|
|
<div class="flex items-center justify-between font-label-data text-label-data">
|
|
<span class="text-on-surface font-semibold flex items-center gap-space-xs">
|
|
<span class="w-2 h-2 rounded-full bg-primary-container"></span>
|
|
US-WEST (Silicon Valley)
|
|
</span>
|
|
<span class="text-primary-container">74% Load</span>
|
|
</div>
|
|
<div class="w-full bg-surface-container-highest h-1 rounded-full mt-2 overflow-hidden">
|
|
<div class="bg-primary-container h-full" style="width: 74%"></div>
|
|
</div>
|
|
<div class="flex justify-between font-label-caption text-label-caption text-outline mt-1.5">
|
|
<span>16 Relays Online</span>
|
|
<span>Latency: 8.2ms</span>
|
|
</div>
|
|
</div>
|
|
<!-- Region 2: US-East -->
|
|
<div class="bg-surface-container p-space-sm rounded-lg shadow-sm">
|
|
<div class="flex items-center justify-between font-label-data text-label-data">
|
|
<span class="text-on-surface font-semibold flex items-center gap-space-xs">
|
|
<span class="w-2 h-2 rounded-full bg-primary-container"></span>
|
|
US-EAST (N. Virginia)
|
|
</span>
|
|
<span class="text-primary-container">58% Load</span>
|
|
</div>
|
|
<div class="w-full bg-surface-container-highest h-1 rounded-full mt-2 overflow-hidden">
|
|
<div class="bg-primary-container h-full" style="width: 58%"></div>
|
|
</div>
|
|
<div class="flex justify-between font-label-caption text-label-caption text-outline mt-1.5">
|
|
<span>12 Relays Online</span>
|
|
<span>Latency: 12.4ms</span>
|
|
</div>
|
|
</div>
|
|
<!-- Region 3: EU-Frankfurt -->
|
|
<div class="bg-surface-container p-space-sm rounded-lg shadow-sm">
|
|
<div class="flex items-center justify-between font-label-data text-label-data">
|
|
<span class="text-on-surface font-semibold flex items-center gap-space-xs">
|
|
<span class="w-2 h-2 rounded-full bg-primary-container"></span>
|
|
EU-CENTRAL (Frankfurt)
|
|
</span>
|
|
<span class="text-primary-container">42% Load</span>
|
|
</div>
|
|
<div class="w-full bg-surface-container-highest h-1 rounded-full mt-2 overflow-hidden">
|
|
<div class="bg-primary-container h-full" style="width: 42%"></div>
|
|
</div>
|
|
<div class="flex justify-between font-label-caption text-label-caption text-outline mt-1.5">
|
|
<span>12 Relays Online</span>
|
|
<span>Latency: 18.6ms</span>
|
|
</div>
|
|
</div>
|
|
<!-- Region 4: AP-Tokyo -->
|
|
<div class="bg-surface-container p-space-sm rounded-lg shadow-sm">
|
|
<div class="flex items-center justify-between font-label-data text-label-data">
|
|
<span class="text-on-surface font-semibold flex items-center gap-space-xs">
|
|
<span class="w-2 h-2 rounded-full bg-primary-container"></span>
|
|
AP-NORTHEAST (Tokyo)
|
|
</span>
|
|
<span class="text-primary-container">31% Load</span>
|
|
</div>
|
|
<div class="w-full bg-surface-container-highest h-1 rounded-full mt-2 overflow-hidden">
|
|
<div class="bg-primary-container h-full" style="width: 31%"></div>
|
|
</div>
|
|
<div class="flex justify-between font-label-caption text-label-caption text-outline mt-1.5">
|
|
<span>8 Relays Online</span>
|
|
<span>Latency: 22.1ms</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="bg-surface-container-lowest p-space-sm rounded-lg mt-space-md flex items-center justify-between font-label-data text-label-caption">
|
|
<div class="flex items-center gap-space-xs">
|
|
<span class="material-symbols-outlined text-primary-container text-base">cloud_sync</span>
|
|
<span class="text-on-surface">Cross-Region Mesh Quorum</span>
|
|
</div>
|
|
<span class="text-primary font-bold">SYMMETRIC</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Incident Triage & Live Alert Log Section -->
|
|
<div class="bg-surface-container-low p-space-lg rounded-xl shadow-xl flex flex-col gap-space-md">
|
|
<div class="flex flex-col sm:flex-row sm:items-center justify-between gap-space-sm">
|
|
<div>
|
|
<div class="flex items-center gap-space-xs">
|
|
<span class="w-2.5 h-2.5 rounded-full bg-error animate-ping"></span>
|
|
<span class="font-label-data text-label-caption uppercase tracking-wider text-error">INCIDENT TRIAGE & TELEMETRY LOG</span>
|
|
</div>
|
|
<h2 class="font-headline-md text-headline-md text-on-surface uppercase tracking-tight">Active Warning & Operational Events</h2>
|
|
</div>
|
|
<div class="flex items-center gap-space-sm">
|
|
<button class="px-space-sm py-1.5 rounded bg-surface-container text-on-surface font-label-data text-label-caption uppercase hover:bg-surface-bright transition-all">Filter: Warnings (2)</button>
|
|
<button class="px-space-sm py-1.5 rounded bg-surface-container text-on-surface font-label-data text-label-caption uppercase hover:bg-surface-bright transition-all">Cleared (184)</button>
|
|
</div>
|
|
</div>
|
|
<!-- Incident Cards / Table Rows -->
|
|
<div class="flex flex-col gap-space-sm">
|
|
<!-- Incident 1: Warning -->
|
|
<div class="bg-surface-container p-space-md rounded-xl shadow-md flex flex-col lg:flex-row lg:items-center justify-between gap-space-md">
|
|
<div class="flex items-start gap-space-md min-w-0">
|
|
<div class="p-space-xs bg-error-container/30 text-error rounded-lg shrink-0 mt-0.5">
|
|
<span class="material-symbols-outlined text-2xl">warning</span>
|
|
</div>
|
|
<div class="flex flex-col min-w-0">
|
|
<div class="flex items-center gap-space-sm flex-wrap">
|
|
<span class="px-space-xs py-0.5 rounded font-label-data text-label-caption bg-error-container text-on-error uppercase font-bold">WARNING: THRESHOLD NEAR 80%</span>
|
|
<span class="font-label-data text-label-caption text-outline">INC-8824</span>
|
|
<span class="font-label-caption text-label-caption text-on-surface-variant">T-14m ago</span>
|
|
</div>
|
|
<h3 class="font-headline-sm text-headline-sm text-on-surface uppercase mt-1 truncate">Elevation Gradient API rate threshold near 80% (Mapbox Elevation DEM)</h3>
|
|
<p class="font-body-md text-body-md text-on-surface-variant mt-0.5">
|
|
Steep grade roll-correction calculations triggered high external tile requests for Northern California Sierra Foothill runs.
|
|
</p>
|
|
<div class="flex items-center gap-space-md mt-space-xs font-label-data text-label-caption text-primary">
|
|
<span class="flex items-center gap-1"><span class="w-1.5 h-1.5 rounded-full bg-primary-container"></span> Mitigated via cached tile fallback cache (L2 Edge)</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center gap-space-xs shrink-0 self-end lg:self-center">
|
|
<button class="h-10 px-space-sm rounded bg-surface-container-high text-on-surface font-label-data text-label-caption uppercase hover:bg-surface-bright transition-all">Acknowledge</button>
|
|
<button class="h-10 px-space-sm rounded bg-surface-container-high text-on-surface font-label-data text-label-caption uppercase hover:bg-surface-bright transition-all">Silence 1h</button>
|
|
<button class="h-10 px-space-sm rounded bg-primary-container text-on-primary font-label-data text-label-caption uppercase font-bold hover:bg-primary transition-all">Escalate to SRE</button>
|
|
</div>
|
|
</div>
|
|
<!-- Incident 2: Notice -->
|
|
<div class="bg-surface-container p-space-md rounded-xl shadow-md flex flex-col lg:flex-row lg:items-center justify-between gap-space-md">
|
|
<div class="flex items-start gap-space-md min-w-0">
|
|
<div class="p-space-xs bg-surface-container-highest text-secondary rounded-lg shrink-0 mt-0.5">
|
|
<span class="material-symbols-outlined text-2xl">sensors_off</span>
|
|
</div>
|
|
<div class="flex flex-col min-w-0">
|
|
<div class="flex items-center gap-space-sm flex-wrap">
|
|
<span class="px-space-xs py-0.5 rounded font-label-data text-label-caption bg-surface-container-highest text-secondary uppercase font-semibold">NOTICE: AUTO-RESOLVED</span>
|
|
<span class="font-label-data text-label-caption text-outline">INC-8821</span>
|
|
<span class="font-label-caption text-label-caption text-on-surface-variant">T-42m ago</span>
|
|
</div>
|
|
<h3 class="font-headline-sm text-headline-sm text-on-surface uppercase mt-1 truncate">NorCal Mesh Gateway Node #12 shifted frequency 915.2 -> 915.4 MHz</h3>
|
|
<p class="font-body-md text-body-md text-on-surface-variant mt-0.5">
|
|
Frequency hopping triggered automatically to bypass 900MHz industrial RF telemetry interference near Port of Oakland. 0 packets dropped.
|
|
</p>
|
|
<div class="flex items-center gap-space-md mt-space-xs font-label-data text-label-caption text-on-surface-variant">
|
|
<span class="flex items-center gap-1"><span class="w-1.5 h-1.5 rounded-full bg-primary-container"></span> Swarm re-lock completed in 142ms</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center gap-space-xs shrink-0 self-end lg:self-center">
|
|
<button class="h-10 px-space-sm rounded bg-surface-container-high text-on-surface-variant font-label-data text-label-caption uppercase hover:bg-surface-bright transition-all">Archive Incident</button>
|
|
<button class="h-10 px-space-sm rounded bg-surface-container-high text-on-surface font-label-data text-label-caption uppercase hover:bg-surface-bright transition-all">Inspect RF Spectral Log</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Operational System Architecture Detail Grid -->
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-space-md">
|
|
<!-- Module 1: SQLite WAL Engine -->
|
|
<div class="bg-surface-container p-space-md rounded-xl shadow-lg flex flex-col justify-between">
|
|
<div class="flex flex-col gap-space-xs">
|
|
<div class="flex items-center justify-between">
|
|
<span class="font-label-data text-label-caption text-primary-container uppercase">DRIFT PERSISTENCE</span>
|
|
<span class="material-symbols-outlined text-on-surface-variant text-base">storage</span>
|
|
</div>
|
|
<h3 class="font-headline-sm text-headline-sm text-on-surface uppercase">Drift Schema 7 WAL Log</h3>
|
|
<p class="font-body-md text-body-md text-on-surface-variant">
|
|
Write-Ahead-Logging local cache synchronization with zero-lock multi-threading for continuous ride sessions.
|
|
</p>
|
|
</div>
|
|
<div class="pt-space-md flex flex-col gap-space-xs font-label-data text-label-caption text-on-surface-variant">
|
|
<div class="flex justify-between">
|
|
<span>UNCOMMITTED FRAMES:</span>
|
|
<span class="text-on-surface font-semibold">12 FRAMES</span>
|
|
</div>
|
|
<div class="flex justify-between">
|
|
<span>CHECKPOINT INTERVAL:</span>
|
|
<span class="text-primary font-semibold">1000 MS</span>
|
|
</div>
|
|
<div class="flex justify-between">
|
|
<span>SQLITE DRIFT VERSION:</span>
|
|
<span class="text-on-surface font-semibold">V7.4.2</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Module 2: BLE & RTP Audio Quorum -->
|
|
<div class="bg-surface-container p-space-md rounded-xl shadow-lg flex flex-col justify-between">
|
|
<div class="flex flex-col gap-space-xs">
|
|
<div class="flex items-center justify-between">
|
|
<span class="font-label-data text-label-caption text-primary-container uppercase">VOICE MESH GATEWAY</span>
|
|
<span class="material-symbols-outlined text-on-surface-variant text-base">headset_mic</span>
|
|
</div>
|
|
<h3 class="font-headline-sm text-headline-sm text-on-surface uppercase">Intercom BLE Quorum</h3>
|
|
<p class="font-body-md text-body-md text-on-surface-variant">
|
|
Adaptive low-latency voice codec with road noise reduction matrix tuned for 120km/h ambient wind buffeting.
|
|
</p>
|
|
</div>
|
|
<div class="pt-space-md flex flex-col gap-space-xs font-label-data text-label-caption text-on-surface-variant">
|
|
<div class="flex justify-between">
|
|
<span>ACTIVE AUDIO PODS:</span>
|
|
<span class="text-on-surface font-semibold">312 PACKS</span>
|
|
</div>
|
|
<div class="flex justify-between">
|
|
<span>NOISE SUPPRESSION:</span>
|
|
<span class="text-primary font-semibold">-32 dB WIND</span>
|
|
</div>
|
|
<div class="flex justify-between">
|
|
<span>CODEC PROFILE:</span>
|
|
<span class="text-on-surface font-semibold">OPUS 16K VOIP</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Module 3: Security & Cryptographic Keys -->
|
|
<div class="bg-surface-container p-space-md rounded-xl shadow-lg flex flex-col justify-between">
|
|
<div class="flex flex-col gap-space-xs">
|
|
<div class="flex items-center justify-between">
|
|
<span class="font-label-data text-label-caption text-primary-container uppercase">CRYPTOGRAPHIC FABRIC</span>
|
|
<span class="material-symbols-outlined text-on-surface-variant text-base">lock</span>
|
|
</div>
|
|
<h3 class="font-headline-sm text-headline-sm text-on-surface uppercase">P2P Mesh Session Keys</h3>
|
|
<p class="font-body-md text-body-md text-on-surface-variant">
|
|
Rotating curve25519 ephemeral pack keys ensuring anti-spoofing for formation speed and hazard alerts.
|
|
</p>
|
|
</div>
|
|
<div class="pt-space-md flex flex-col gap-space-xs font-label-data text-label-caption text-on-surface-variant">
|
|
<div class="flex justify-between">
|
|
<span>ROTATION INTERVAL:</span>
|
|
<span class="text-on-surface font-semibold">300 SEC</span>
|
|
</div>
|
|
<div class="flex justify-between">
|
|
<span>REVOKED NODES:</span>
|
|
<span class="text-primary font-semibold">0 IN 24H</span>
|
|
</div>
|
|
<div class="flex justify-between">
|
|
<span>AUTH SIGNATURE:</span>
|
|
<span class="text-on-surface font-semibold">ED25519 VERIFIED</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Visual Raw Telemetry Feed Preview Console -->
|
|
<div class="bg-surface-container-lowest p-space-md rounded-xl shadow-inner font-label-data text-label-caption text-on-surface-variant overflow-x-auto">
|
|
<div class="flex items-center justify-between pb-space-xs text-outline">
|
|
<span class="uppercase">LIVE INGESTION SOCKET REPLAY [SAMPLE: 20Hz VECTORS]</span>
|
|
<span class="text-primary-container font-mono">STREAMING // ID: SJC-09228</span>
|
|
</div>
|
|
<div class="font-mono space-y-1 text-on-surface">
|
|
<div>[1740441600.104] <span class="text-primary-container">RAW_IMU</span>: RID=0x4F92 ROLL=-18.42° PITCH=+2.10° YAW=214.9° KALMAN_CONV=0.78ms ACC_G=1.24G STATUS=IN_CORNER</div>
|
|
<div>[1740441600.154] <span class="text-primary-container">RAW_IMU</span>: RID=0x4F92 ROLL=-22.18° PITCH=+2.35° YAW=216.4° KALMAN_CONV=0.81ms ACC_G=1.31G STATUS=IN_CORNER</div>
|
|
<div>[1740441600.204] <span class="text-secondary">RF_MESH</span>: NODE=12 CH=915.4MHz HOP_COUNT=1 RSSI=-68dBm SNR=+14dB PKT_OK PACKET_ID=99104</div>
|
|
<div>[1740441600.254] <span class="text-tertiary-fixed-dim">HAZARD_INGEST</span>: SRC=WAZE_PROXY LAT=37.7749 LON=-122.4194 TYPE=DEBRIS CONFIDENCE=94% DISPATCHED=PACK_29</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Inline Interactive Logic for Tab Navigation and Buttons -->
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
// Tab switcher micro-interaction
|
|
const tabButtons = document.querySelectorAll('.tab-trigger');
|
|
tabButtons.forEach(btn => {
|
|
btn.addEventListener('click', () => {
|
|
tabButtons.forEach(b => {
|
|
b.classList.remove('bg-primary-container/10', 'text-primary-container');
|
|
b.classList.add('text-on-surface-variant');
|
|
});
|
|
btn.classList.add('bg-primary-container/10', 'text-primary-container');
|
|
btn.classList.remove('text-on-surface-variant');
|
|
});
|
|
});
|
|
|
|
// Probe Button Trigger micro-feedback
|
|
const btnProbe = document.getElementById('btn-probe');
|
|
if (btnProbe) {
|
|
btnProbe.addEventListener('click', () => {
|
|
btnProbe.innerHTML = '<span class="material-symbols-outlined text-primary-container text-lg animate-spin">autorenew</span> Probing...';
|
|
setTimeout(() => {
|
|
btnProbe.innerHTML = '<span class="material-symbols-outlined text-primary-container text-lg">check_circle</span> 48/48 Healthy';
|
|
setTimeout(() => {
|
|
btnProbe.innerHTML = '<span class="material-symbols-outlined text-primary-container text-lg">radar</span> Trigger Health Probe';
|
|
}, 2500);
|
|
}, 800);
|
|
});
|
|
}
|
|
|
|
// Emergency Broadcast Confirmation
|
|
const btnBroadcast = document.getElementById('btn-broadcast');
|
|
if (btnBroadcast) {
|
|
btnBroadcast.addEventListener('click', () => {
|
|
if (confirm('ACTIVATE EMERGENCY MESH BROADCAST OVERRIDE?\nThis will flash high-priority alert banners across all active cockpit HUDs.')) {
|
|
alert('Emergency mesh packets queued. Sub-GHz transmitter duty cycle elevated to 100%.');
|
|
}
|
|
});
|
|
}
|
|
});
|
|
</script>
|
|
</div></main><footer class="w-full bg-surface-container-lowest pt-space-xl pb-space-lg"><div class="w-full px-gutter-lg"><div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-space-lg pb-space-lg"><div class="lg:col-span-2 flex flex-col gap-space-sm"><div class="flex items-center gap-space-sm"><span class="font-headline-sm text-headline-sm uppercase tracking-wider text-primary">MotorSignal</span><span class="px-space-xs py-space-xs rounded font-label-caption text-label-caption bg-surface-container text-primary-container uppercase">Precision Cockpit HUD</span></div><p class="font-body-md text-body-md text-on-surface-variant max-w-md">Next-generation telemetry engine engineered for track day racers, aggressive sport riders, and synchronized pack navigation with real-time IMU lean angle computation.</p><div class="flex items-center gap-space-sm pt-space-xs"><span class="w-2.5 h-2.5 rounded-full bg-primary-container shadow-[0_0_8px_#00e5ff]"></span><span class="font-label-data text-label-data text-on-surface uppercase">Telemetry Core v4.8.2 Active</span></div></div><div class="flex flex-col gap-space-sm"><span class="font-label-data text-label-data text-primary uppercase tracking-wider">Community & Rides</span><ul class="flex flex-col gap-space-xs"><li class="font-body-md text-body-md text-on-surface-variant hover:text-on-surface transition-colors cursor-pointer">Group Rides Discovery</li><li class="font-body-md text-body-md text-on-surface-variant hover:text-on-surface transition-colors cursor-pointer">Live Telemetry Showcase</li><li class="font-body-md text-body-md text-on-surface-variant hover:text-on-surface transition-colors cursor-pointer">Ride Organizer Hub</li><li class="font-body-md text-body-md text-on-surface-variant hover:text-on-surface transition-colors cursor-pointer">Pack Formation Grid</li></ul></div><div class="flex flex-col gap-space-sm"><span class="font-label-data text-label-data text-primary uppercase tracking-wider">Clubs & Governance</span><ul class="flex flex-col gap-space-xs"><li class="font-body-md text-body-md text-on-surface-variant hover:text-on-surface transition-colors cursor-pointer">Motorcycle Clubs Directory</li><li class="font-body-md text-body-md text-on-surface-variant hover:text-on-surface transition-colors cursor-pointer">Founder & Officer Hub</li><li class="font-body-md text-body-md text-on-surface-variant hover:text-on-surface transition-colors cursor-pointer">Roles & Ranks Builder</li><li class="font-body-md text-body-md text-on-surface-variant hover:text-on-surface transition-colors cursor-pointer">Chapter Charter System</li></ul></div><div class="flex flex-col gap-space-sm"><span class="font-label-data text-label-data text-primary uppercase tracking-wider">Operations Core</span><ul class="flex flex-col gap-space-xs"><li class="font-body-md text-body-md text-on-surface-variant hover:text-on-surface transition-colors cursor-pointer">Operations & Admin Console</li><li class="font-body-md text-body-md text-on-surface-variant hover:text-on-surface transition-colors cursor-pointer">Mesh Node Protocol</li><li class="font-body-md text-body-md text-on-surface-variant hover:text-on-surface transition-colors cursor-pointer">Telemetry Calibration</li><li class="font-body-md text-body-md text-on-surface-variant hover:text-on-surface transition-colors cursor-pointer">Safety Disclaimers</li></ul></div></div><div class="pt-space-md flex flex-col md:flex-row items-center justify-between gap-space-sm"><span class="font-label-caption text-label-caption text-on-surface-variant uppercase">© 2025 MotorSignal Technologies Inc. Built for zero-cognitive lag.</span><div class="flex items-center gap-space-md"><span class="font-label-caption text-label-caption text-on-surface-variant uppercase">All nodes operational</span><span class="font-label-data text-label-data text-primary">99.98% Latency <14ms</span></div></div></div></footer></body></html> |