MotorSignal-App/docs/stitch-designs/code/22_live_telemetry_showcase....

719 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&amp;family=JetBrains+Mono:wght@500;600;700&amp;family=Space+Grotesk:wght@600;700&amp;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&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;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 aria-current="page" class="uppercase tracking-wider transition-colors px-space-xs py-space-xs text-primary-container font-headline-sm" 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">
<!-- TOP TELEMETRY PROTOCOL TICKER & METRIC STRIP -->
<section class="w-full bg-surface-container-lowest px-gutter-lg py-space-md shadow-md">
<div class="max-w-[1720px] mx-auto flex flex-col xl:flex-row xl:items-center justify-between gap-space-md">
<div class="flex items-center gap-space-md">
<div class="flex items-center gap-space-xs px-space-sm py-space-xs rounded bg-surface-container-high">
<span class="w-2.5 h-2.5 rounded-full bg-primary-container animate-ping"></span>
<span class="font-label-data text-label-data text-primary uppercase">MESH LINK ONLINE</span>
</div>
<div class="flex flex-col">
<span class="font-headline-sm text-headline-sm text-primary uppercase tracking-tight">Global Cockpit Telemetry Stream</span>
<span class="font-label-data text-label-data text-on-surface-variant uppercase tracking-wider">Real-Time 20 Hz IMU + Dual-Band GNSS Sensor Broadcast</span>
</div>
</div>
<div class="grid grid-cols-2 md:grid-cols-4 gap-space-sm xl:gap-space-md">
<div class="bg-surface-container px-space-md py-space-xs rounded-lg flex flex-col justify-center shadow-sm">
<span class="font-label-caption text-label-caption text-on-surface-variant uppercase tracking-wider">Active Cockpit Feeds</span>
<div class="flex items-baseline gap-space-xs">
<span class="font-telemetry-metric-md text-telemetry-metric-md text-primary" id="active-feeds-val">142</span>
<span class="font-label-caption text-label-caption text-primary-container">NODES</span>
</div>
</div>
<div class="bg-surface-container px-space-md py-space-xs rounded-lg flex flex-col justify-center shadow-sm">
<span class="font-label-caption text-label-caption text-on-surface-variant uppercase tracking-wider">Aggregate Velocity</span>
<div class="flex items-baseline gap-space-xs">
<span class="font-telemetry-metric-md text-telemetry-metric-md text-on-surface">4,892</span>
<span class="font-label-caption text-label-caption text-outline">MPH COMBINED</span>
</div>
</div>
<div class="bg-surface-container px-space-md py-space-xs rounded-lg flex flex-col justify-center shadow-sm">
<span class="font-label-caption text-label-caption text-on-surface-variant uppercase tracking-wider">Highest Instant Lean</span>
<div class="flex items-baseline gap-space-xs">
<span class="font-telemetry-metric-md text-telemetry-metric-md text-primary-container" id="instant-lean-val">54.2</span>
<span class="font-label-caption text-label-caption text-primary-fixed">DEG R</span>
</div>
</div>
<div class="bg-surface-container px-space-md py-space-xs rounded-lg flex flex-col justify-center shadow-sm">
<span class="font-label-caption text-label-caption text-on-surface-variant uppercase tracking-wider">Mesh Sub-Hop Latency</span>
<div class="flex items-baseline gap-space-xs">
<span class="font-telemetry-metric-md text-telemetry-metric-md text-primary">0.02</span>
<span class="font-label-caption text-label-caption text-primary-container">SEC KALMAN</span>
</div>
</div>
</div>
</div>
</section>
<!-- MASTER COCKPIT DUAL CLUSTER (LIVE TELEMETRY SHOWCASE) -->
<section class="w-full px-gutter-lg py-space-lg">
<div class="max-w-[1720px] mx-auto flex flex-col gap-space-lg">
<!-- SESSION HERO HEADER & CALLOUT -->
<div class="flex flex-col lg:flex-row lg:items-center justify-between gap-space-md bg-surface-container-low p-space-md rounded-xl shadow-md">
<div class="flex items-center gap-space-md">
<div class="w-12 h-12 rounded-lg bg-surface-container-high flex items-center justify-center text-primary-container shadow-sm">
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">speed</span>
</div>
<div class="flex flex-col">
<div class="flex items-center gap-space-xs">
<span class="px-space-xs py-0.5 rounded text-[10px] font-label-data bg-primary-container/20 text-primary-container uppercase font-semibold">Live Track Feed</span>
<span class="font-label-data text-label-data text-outline">SESSION #CA-904-PAC</span>
</div>
<h1 class="font-headline-lg text-headline-lg text-on-surface tracking-tight">Pacific Coast Riders — Skyline Descent (Squad 04)</h1>
</div>
</div>
<div class="flex flex-wrap items-center gap-space-sm">
<div class="flex items-center gap-space-xs px-space-sm py-space-xs rounded-lg bg-surface-container">
<span class="material-symbols-outlined text-primary text-sm">cloud_sync</span>
<span class="font-label-data text-label-data text-on-surface">GPS RTK FIX: 18 SVs</span>
</div>
<div class="flex items-center gap-space-xs px-space-sm py-space-xs rounded-lg bg-surface-container">
<span class="material-symbols-outlined text-primary-container text-sm">sensors</span>
<span class="font-label-data text-label-data text-on-surface">IMU 6-DOF @ 20Hz</span>
</div>
<button class="h-10 px-space-md rounded-lg bg-primary-container text-on-primary font-label-data text-label-data uppercase tracking-wider font-bold shadow-md hover:bg-primary transition-all" id="toggle-sim-btn">
Live Streaming (Active)
</button>
</div>
</div>
<!-- MASTER SPLIT TELEMETRY COCKPIT -->
<div class="grid grid-cols-1 xl:grid-cols-12 gap-space-lg">
<!-- LEFT COLUMN: INSTRUMENT COCKPIT & VEHICLE TELEMETRY (7 COLS) -->
<div class="xl:col-span-7 flex flex-col gap-space-md">
<!-- TOP GAUGES ROW: SPEEDOMETER & GYRO LEAN ROLL ARC -->
<div class="grid grid-cols-1 lg:grid-cols-2 gap-space-md">
<!-- SPEEDOMETER & G-FORCE HUD -->
<div class="bg-surface-container-low rounded-xl p-space-md shadow-md flex flex-col justify-between relative overflow-hidden">
<div class="flex items-center justify-between pb-space-sm">
<span class="font-label-data text-label-data text-on-surface-variant uppercase tracking-wider flex items-center gap-1">
<span class="w-2 h-2 rounded-full bg-primary-container"></span> Ground Velocity &amp; Lat/Lon G
</span>
<span class="font-label-caption text-label-caption text-primary bg-surface-container-high px-space-xs py-0.5 rounded">CAN-BUS ID: 0x1A4</span>
</div>
<!-- Speed Metric Hero -->
<div class="flex items-baseline justify-center py-space-sm my-space-xs">
<span class="font-telemetry-metric-lg text-telemetry-metric-lg text-on-surface tracking-tighter" id="speed-display">68</span>
<span class="font-headline-sm text-headline-sm text-primary-container ml-space-xs uppercase">MPH</span>
</div>
<!-- G-Force Friction Circle Visualizer -->
<div class="bg-surface-container rounded-lg p-space-sm flex items-center justify-between gap-space-md">
<div class="relative w-28 h-28 flex items-center justify-center bg-surface-container-lowest rounded-full">
<!-- G friction target SVG -->
<svg class="w-full h-full p-1" viewbox="0 0 100 100">
<circle class="text-surface-container-highest" cx="50" cy="50" fill="none" r="45" stroke="currentColor" stroke-dasharray="3 3" stroke-width="1.5"></circle>
<circle class="text-surface-container-high" cx="50" cy="50" fill="none" r="30" stroke="currentColor" stroke-width="1"></circle>
<circle class="text-surface-container-high" cx="50" cy="50" fill="none" r="15" stroke="currentColor" stroke-width="1"></circle>
<line class="text-surface-container-high" stroke="currentColor" stroke-width="1" x1="50" x2="50" y1="5" y2="95"></line>
<line class="text-surface-container-high" stroke="currentColor" stroke-width="1" x1="5" x2="95" y1="50" y2="50"></line>
<!-- G-dot marker -->
<circle class="text-primary-container transition-all duration-150 shadow-sm" cx="72" cy="38" fill="currentColor" id="g-dot" r="4.5"></circle>
</svg>
</div>
<div class="flex flex-col gap-space-xs flex-1">
<div class="flex items-center justify-between">
<span class="font-label-caption text-label-caption text-on-surface-variant uppercase">Lateral G</span>
<span class="font-label-data text-label-data text-primary font-bold" id="lat-g-val">+0.72 G (R)</span>
</div>
<div class="w-full bg-surface-container-high h-1.5 rounded-full overflow-hidden">
<div class="bg-primary-container h-full w-[72%]"></div>
</div>
<div class="flex items-center justify-between pt-1">
<span class="font-label-caption text-label-caption text-on-surface-variant uppercase">Longitudinal G</span>
<span class="font-label-data text-label-data text-on-surface font-bold" id="lon-g-val">-0.41 G (Trail)</span>
</div>
<div class="w-full bg-surface-container-high h-1.5 rounded-full overflow-hidden">
<div class="bg-secondary h-full w-[41%]"></div>
</div>
</div>
</div>
</div>
<!-- GYROSCOPIC LEAN ROLL ANGLE GAUGE -->
<div class="bg-surface-container-low rounded-xl p-space-md shadow-md flex flex-col justify-between">
<div class="flex items-center justify-between pb-space-xs">
<span class="font-label-data text-label-data text-on-surface-variant uppercase tracking-wider flex items-center gap-1">
<span class="w-2 h-2 rounded-full bg-secondary-container"></span> 6-Axis Gyro Lean Arc
</span>
<span class="font-label-caption text-label-caption px-space-xs py-0.5 rounded bg-error-container text-on-error-container uppercase font-semibold">APEX ACTIVE</span>
</div>
<!-- Semi-circular Lean Gauge SVG -->
<div class="relative w-full h-36 flex items-center justify-center">
<svg class="w-full h-full" viewbox="0 0 240 120">
<!-- Gauge Track -->
<path class="text-surface-container-high" d="M 20 110 A 100 100 0 0 1 220 110" fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="12"></path>
<!-- Safe Band (-30 to +30) -->
<path class="text-outline-variant" d="M 60 48 A 100 100 0 0 1 180 48" fill="none" stroke="currentColor" stroke-width="4"></path>
<!-- Active Lean Indicator Arc -->
<path class="text-primary-container" d="M 120 10 A 100 100 0 0 1 205 85" fill="none" id="lean-arc" stroke="currentColor" stroke-linecap="round" stroke-width="12"></path>
<!-- Apex Needle / Tick Vector -->
<line class="text-primary" id="lean-needle" stroke="currentColor" stroke-linecap="round" stroke-width="3" x1="120" x2="190" y1="110" y2="40"></line>
<!-- Baseline Center Indicator -->
<circle class="text-on-surface" cx="120" cy="110" fill="currentColor" r="6"></circle>
</svg>
<div class="absolute bottom-1 flex flex-col items-center">
<div class="flex items-baseline">
<span class="font-telemetry-metric-lg text-telemetry-metric-lg text-primary tracking-tighter" id="lean-degree">49°</span>
<span class="font-headline-sm text-headline-sm text-primary-container ml-1">R</span>
</div>
<span class="font-label-caption text-label-caption text-outline uppercase tracking-wider">Roll Attitude</span>
</div>
</div>
<!-- Safety Mute Status Pill -->
<div class="bg-surface-container rounded-lg px-space-sm py-space-xs flex items-center justify-between">
<div class="flex items-center gap-space-xs">
<span class="material-symbols-outlined text-sm text-primary-container">notifications_paused</span>
<span class="font-label-caption text-label-caption text-on-surface">Safety Lean Mute Active (&gt;15°)</span>
</div>
<span class="font-label-data text-label-data text-primary-fixed">HUD AUDIO SUPPRESSED</span>
</div>
</div>
</div>
<!-- LOWER REAL-TIME CAN-BUS SENSOR MATRIX (4 CARDS) -->
<div class="grid grid-cols-2 md:grid-cols-4 gap-space-sm">
<!-- Engine RPM -->
<div class="bg-surface-container-low rounded-xl p-space-sm shadow-sm flex flex-col justify-between">
<div class="flex items-center justify-between">
<span class="font-label-caption text-label-caption text-on-surface-variant uppercase">Engine Speed</span>
<span class="material-symbols-outlined text-xs text-primary">rotate_right</span>
</div>
<div class="my-space-xs">
<span class="font-telemetry-metric-md text-telemetry-metric-md text-on-surface" id="rpm-val">11,400</span>
<span class="font-label-caption text-label-caption text-on-surface-variant block">RPM / REV LIMIT 14.2K</span>
</div>
<div class="w-full bg-surface-container-high h-1.5 rounded-full overflow-hidden">
<div class="bg-primary-container h-full w-[80%] transition-all" id="rpm-bar"></div>
</div>
</div>
<!-- Throttle Percentage -->
<div class="bg-surface-container-low rounded-xl p-space-sm shadow-sm flex flex-col justify-between">
<div class="flex items-center justify-between">
<span class="font-label-caption text-label-caption text-on-surface-variant uppercase">Ride-By-Wire</span>
<span class="material-symbols-outlined text-xs text-primary">speed</span>
</div>
<div class="my-space-xs">
<span class="font-telemetry-metric-md text-telemetry-metric-md text-primary" id="tps-val">84%</span>
<span class="font-label-caption text-label-caption text-on-surface-variant block">THROTTLE POSITION</span>
</div>
<div class="w-full bg-surface-container-high h-1.5 rounded-full overflow-hidden">
<div class="bg-primary-container h-full w-[84%]"></div>
</div>
</div>
<!-- Front Brake Hydraulic Pressure -->
<div class="bg-surface-container-low rounded-xl p-space-sm shadow-sm flex flex-col justify-between">
<div class="flex items-center justify-between">
<span class="font-label-caption text-label-caption text-on-surface-variant uppercase">Brembo Master</span>
<span class="material-symbols-outlined text-xs text-outline">radio_button_checked</span>
</div>
<div class="my-space-xs">
<span class="font-telemetry-metric-md text-telemetry-metric-md text-on-surface" id="brake-val">0.0</span>
<span class="font-label-caption text-label-caption text-on-surface-variant block">BAR (FRONT CALIPER)</span>
</div>
<div class="w-full bg-surface-container-high h-1.5 rounded-full overflow-hidden">
<div class="bg-outline-variant h-full w-[2%]"></div>
</div>
</div>
<!-- Estimated Tire Traction Grip Mu -->
<div class="bg-surface-container-low rounded-xl p-space-sm shadow-sm flex flex-col justify-between">
<div class="flex items-center justify-between">
<span class="font-label-caption text-label-caption text-on-surface-variant uppercase">Pirelli SC3 Coeff</span>
<span class="material-symbols-outlined text-xs text-primary-container">lens_blur</span>
</div>
<div class="my-space-xs">
<span class="font-telemetry-metric-md text-telemetry-metric-md text-primary-container">μ 0.94</span>
<span class="font-label-caption text-label-caption text-on-surface-variant block">EST. DRY FRICTION</span>
</div>
<div class="w-full bg-surface-container-high h-1.5 rounded-full overflow-hidden">
<div class="bg-primary-container h-full w-[94%]"></div>
</div>
</div>
</div>
<!-- SQUAD CALLSIGN PROXIMITY GRID -->
<div class="bg-surface-container-low rounded-xl p-space-md shadow-md">
<div class="flex items-center justify-between mb-space-sm">
<span class="font-label-data text-label-data text-on-surface uppercase tracking-wider flex items-center gap-space-xs">
<span class="material-symbols-outlined text-sm text-primary">groups</span>
Live Formation Telemetry Gap Matrix (Squad 04)
</span>
<span class="font-label-caption text-label-caption text-primary">4 RIDERS TRACKED</span>
</div>
<div class="grid grid-cols-1 md:grid-cols-4 gap-space-sm">
<!-- Rider 1 (Lead / P1) -->
<div class="bg-surface-container p-space-sm rounded-lg flex flex-col gap-1 shadow-sm">
<div class="flex items-center justify-between">
<span class="font-headline-sm text-sm text-on-surface">ApexPredator</span>
<span class="font-label-caption text-[10px] px-1.5 py-0.5 rounded bg-primary-container text-on-primary font-bold">LEAD</span>
</div>
<div class="flex items-baseline justify-between pt-1">
<span class="font-label-data text-label-data text-primary">118 MPH</span>
<span class="font-label-data text-label-data text-outline">REF 0.00s</span>
</div>
<span class="font-label-caption text-[10px] text-on-surface-variant">Ducati Panigale V4R • 51.4° Lean</span>
</div>
<!-- Rider 2 (Focused Cockpit) -->
<div class="bg-surface-container-high p-space-sm rounded-lg flex flex-col gap-1 shadow-sm">
<div class="flex items-center justify-between">
<span class="font-headline-sm text-sm text-primary-container">GhostRider_SF</span>
<span class="font-label-caption text-[10px] px-1.5 py-0.5 rounded bg-surface-variant text-on-surface font-semibold">THIS HUD</span>
</div>
<div class="flex items-baseline justify-between pt-1">
<span class="font-label-data text-label-data text-on-surface">68 MPH</span>
<span class="font-label-data text-label-data text-primary">+0.38s Gap</span>
</div>
<span class="font-label-caption text-[10px] text-on-surface-variant">Yamaha YZF-R1M • 49.0° Lean</span>
</div>
<!-- Rider 3 -->
<div class="bg-surface-container p-space-sm rounded-lg flex flex-col gap-1 shadow-sm">
<div class="flex items-center justify-between">
<span class="font-headline-sm text-sm text-on-surface">KneeDragger99</span>
<span class="font-label-caption text-[10px] text-on-surface-variant">P3</span>
</div>
<div class="flex items-baseline justify-between pt-1">
<span class="font-label-data text-label-data text-on-surface">67 MPH</span>
<span class="font-label-data text-label-data text-outline">+1.12s Gap</span>
</div>
<span class="font-label-caption text-[10px] text-on-surface-variant">BMW S1000RR • 47.8° Lean</span>
</div>
<!-- Rider 4 (Sweeper) -->
<div class="bg-surface-container p-space-sm rounded-lg flex flex-col gap-1 shadow-sm">
<div class="flex items-center justify-between">
<span class="font-headline-sm text-sm text-on-surface">VectorSweep</span>
<span class="font-label-caption text-[10px] px-1.5 py-0.5 rounded bg-secondary-container text-on-secondary font-bold">SWEEP</span>
</div>
<div class="flex items-baseline justify-between pt-1">
<span class="font-label-data text-label-data text-on-surface">64 MPH</span>
<span class="font-label-data text-label-data text-outline">+2.45s Gap</span>
</div>
<span class="font-label-caption text-[10px] text-on-surface-variant">KTM 1290 Super Duke • 44.1° Lean</span>
</div>
</div>
</div>
</div>
<!-- RIGHT COLUMN: 3D APEX FORENSICS & ELEVATION TRACE (5 COLS) -->
<div class="xl:col-span-5 flex flex-col gap-space-md">
<!-- APEX FORENSICS VISUALIZER CONTAINER -->
<div class="bg-surface-container-low rounded-xl p-space-md shadow-md flex flex-col gap-space-md">
<div class="flex items-center justify-between">
<div class="flex flex-col">
<span class="font-label-data text-label-data text-on-surface-variant uppercase tracking-wider">Sector Telemetry Analysis</span>
<span class="font-headline-sm text-headline-sm text-on-surface">Turn 7: Saratoga Hairpin</span>
</div>
<div class="flex items-center gap-space-xs">
<span class="font-label-caption text-label-caption px-space-xs py-0.5 rounded bg-primary-container/20 text-primary-container uppercase font-bold">20Hz IMU Fused</span>
<button class="w-8 h-8 rounded bg-surface-container flex items-center justify-center text-on-surface hover:text-primary transition-colors">
<span class="material-symbols-outlined text-sm">fullscreen</span>
</button>
</div>
</div>
<!-- APEX COMPARISON SVG CANVAS (20Hz Kalman vs 1Hz GPS) -->
<div class="bg-surface-container-lowest rounded-lg p-space-sm relative overflow-hidden flex flex-col items-center">
<div class="w-full flex items-center justify-between px-space-xs pb-space-xs">
<div class="flex items-center gap-space-xs">
<span class="w-3 h-1 bg-primary-container rounded"></span>
<span class="font-label-caption text-label-caption text-primary">MotorSignal 20 Hz Fused Trace</span>
</div>
<div class="flex items-center gap-space-xs">
<span class="w-3 h-1 bg-outline rounded border-dashed"></span>
<span class="font-label-caption text-label-caption text-on-surface-variant">Standard 1 Hz GPS Error Drift</span>
</div>
</div>
<!-- Apex Hairpin Vector Plot SVG -->
<svg class="w-full h-56" viewbox="0 0 460 220">
<!-- Background Gridlines -->
<defs>
<pattern height="20" id="grid" patternunits="userSpaceOnUse" width="20">
<path class="text-surface-container/40" d="M 20 0 L 0 0 0 20" fill="none" stroke="currentColor" stroke-width="0.5"></path>
</pattern>
</defs>
<rect fill="url(#grid)" height="100%" width="100%"></rect>
<!-- Roadway Boundaries -->
<path class="text-surface-container-high" d="M 20 40 C 180 30, 240 70, 260 140 C 275 190, 360 195, 440 180" fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="28"></path>
<path class="text-surface-container-lowest" d="M 20 40 C 180 30, 240 70, 260 140 C 275 190, 360 195, 440 180" fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="24"></path>
<!-- 1 Hz Raw Coarse GPS Trace (Laggy/Drifting) -->
<polyline class="text-outline" fill="none" points="20,40 100,38 180,48 230,85 270,165 340,192 440,180" stroke="currentColor" stroke-dasharray="4 4" stroke-width="2"></polyline>
<circle class="text-outline" cx="100" cy="38" fill="currentColor" r="3"></circle>
<circle class="text-outline" cx="180" cy="48" fill="currentColor" r="3"></circle>
<circle class="text-outline" cx="230" cy="85" fill="currentColor" r="3"></circle>
<circle class="text-outline" cx="270" cy="165" fill="currentColor" r="3"></circle>
<circle class="text-outline" cx="340" cy="192" fill="currentColor" r="3"></circle>
<!-- 20 Hz Kalman Smoothed Path with Lean Gradient -->
<!-- Entry Segment: 62 MPH Cyan -->
<path class="text-primary-container" d="M 20 40 C 120 34, 180 44, 215 75" fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="4"></path>
<!-- Apex Tight Arc: 44 MPH @ 49° Lean (High Energy Crimson/Magenta Accent) -->
<path class="text-error" d="M 215 75 C 248 105, 262 145, 275 168" fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="5"></path>
<!-- Exit Acceleration Arc: 58 MPH (Bright Cyan) -->
<path class="text-primary" d="M 275 168 C 295 190, 350 190, 440 180" fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="4"></path>
<!-- Live Position Indicator Marker -->
<circle class="text-primary-container animate-pulse" cx="260" cy="140" fill="currentColor" r="7"></circle>
<circle class="text-on-primary" cx="260" cy="140" fill="currentColor" r="3"></circle>
<!-- Apex Flag Anchor -->
<line class="text-on-surface-variant" stroke="currentColor" stroke-dasharray="2 2" stroke-width="1" x1="260" x2="260" y1="140" y2="80"></line>
<rect class="text-surface-container-high" fill="currentColor" height="20" rx="3" width="80" x="220" y="60"></rect>
<text fill="#c3f5ff" font-family="JetBrains Mono" font-size="10" font-weight="700" text-anchor="middle" x="260" y="74">APEX CLIPPING</text>
</svg>
</div>
<!-- APEX CRITICAL SEGMENT SLICES -->
<div class="grid grid-cols-3 gap-space-xs text-center">
<div class="bg-surface-container p-space-xs rounded-lg">
<span class="font-label-caption text-label-caption text-on-surface-variant block uppercase">T7 Entry</span>
<span class="font-telemetry-metric-md text-sm text-primary-container font-bold">62 MPH</span>
<span class="font-label-caption text-[10px] text-outline block">Trail -0.85G</span>
</div>
<div class="bg-surface-container-high p-space-xs rounded-lg">
<span class="font-label-caption text-label-caption text-error block uppercase font-semibold">T7 Apex</span>
<span class="font-telemetry-metric-md text-sm text-on-surface font-bold">44 MPH</span>
<span class="font-label-caption text-[10px] text-primary-container block font-bold">49° Roll R</span>
</div>
<div class="bg-surface-container p-space-xs rounded-lg">
<span class="font-label-caption text-label-caption text-on-surface-variant block uppercase">T7 Exit</span>
<span class="font-telemetry-metric-md text-sm text-primary font-bold">58 MPH</span>
<span class="font-label-caption text-[10px] text-outline block">84% Throttle</span>
</div>
</div>
<!-- ELEVATION & SLIP ANGLE CONTOUR TRACE -->
<div class="bg-surface-container rounded-lg p-space-sm">
<div class="flex items-center justify-between mb-space-xs">
<span class="font-label-caption text-label-caption text-on-surface uppercase">Elevation Delta &amp; Grade Profile</span>
<span class="font-label-data text-label-data text-primary">-8.4% GRADE (DESCENT)</span>
</div>
<!-- Mini SVG Elevation Sparkline -->
<svg class="w-full h-16" viewbox="0 0 380 60">
<defs>
<lineargradient id="elevGrad" x1="0" x2="0" y1="0" y2="1">
<stop offset="0%" stop-color="#00e5ff" stop-opacity="0.3"></stop>
<stop offset="100%" stop-color="#00e5ff" stop-opacity="0.0"></stop>
</lineargradient>
</defs>
<path d="M 0 10 Q 90 15, 170 32 T 320 50 L 380 54 L 380 60 L 0 60 Z" fill="url(#elevGrad)"></path>
<path class="text-primary-container" d="M 0 10 Q 90 15, 170 32 T 320 50 L 380 54" fill="none" stroke="currentColor" stroke-width="2"></path>
<circle class="text-primary" cx="240" cy="42" fill="currentColor" r="4"></circle>
</svg>
<div class="flex items-center justify-between text-[11px] font-label-data text-on-surface-variant pt-1">
<span>Start: 2,420 FT</span>
<span>Current: 1,840 FT</span>
<span>Delta: -580 FT</span>
</div>
</div>
</div>
<!-- RIDER BIO & HARDWARE PROFILE CARD -->
<div class="bg-surface-container-low rounded-xl p-space-md shadow-md flex items-center justify-between">
<div class="flex items-center gap-space-md">
<img class="w-14 h-14 rounded-full object-cover shadow-sm" data-alt="Close up cinematic portrait of a professional motorcycle track racer wearing a high-tech matte carbon helmet with a tinted cyan iridium visor reflecting telemetry HUD dials at night" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCjutzefh1OowT0Pk2A5FeWWPPi3u5RO85CwJ_e9JQufs_g2DwCHR8Wu1MX7Wep-i8lI-RIxAyJyz4OqUUms_ZpHVNby1A_U4muu7J0Cx82h69wqSzT6GO6lWbqMXfcbmzs_5Z1iBCrUYI2X5NVJxKoDqwjLalxQDt3iHFb861eR_-vtg5k68BR2-KWB3OEb2Cg3nddhmVYWNUEeOJoDl9dIlxQOkGL7cO9C-2SNjNWrqxZ84dtVhsv"/>
<div class="flex flex-col">
<div class="flex items-center gap-space-xs">
<span class="font-headline-sm text-sm text-on-surface">Alex Mercer (GhostRider_SF)</span>
<span class="material-symbols-outlined text-xs text-primary-container" style="font-variation-settings: 'FILL' 1;">verified</span>
</div>
<span class="font-body-md text-xs text-on-surface-variant">2024 Yamaha YZF-R1M • Öhlins Electronic Suspension</span>
<span class="font-label-caption text-[10px] text-outline pt-0.5">Firmware: MS-Link OS v4.8 • Bosch 6-Axis IMU Calibration OK</span>
</div>
</div>
<div class="hidden sm:flex flex-col items-end">
<span class="font-label-caption text-label-caption text-primary">SESSION DIST</span>
<span class="font-telemetry-metric-md text-base text-on-surface font-bold">34.8 MI</span>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- TELEMETRY LEADERBOARD & COMMUNITY BENCHMARKS SECTION -->
<section class="w-full bg-surface-container-lowest px-gutter-lg py-space-xl">
<div class="max-w-[1720px] mx-auto flex flex-col gap-space-lg">
<div class="flex flex-col md:flex-row md:items-end justify-between gap-space-sm">
<div>
<span class="font-label-data text-label-data text-primary uppercase tracking-wider">Hall of Apex Precision</span>
<h2 class="font-headline-lg text-headline-lg text-on-surface">Telemetry Leaderboards &amp; Certified Records</h2>
</div>
<div class="flex items-center gap-space-xs bg-surface-container p-1 rounded-lg">
<button class="px-space-sm py-1 rounded font-label-data text-label-data bg-primary-container text-on-primary font-bold">This Week</button>
<button class="px-space-sm py-1 rounded font-label-data text-label-data text-on-surface-variant hover:text-on-surface">All-Time Circuit</button>
<button class="px-space-sm py-1 rounded font-label-data text-label-data text-on-surface-variant hover:text-on-surface">Draggy Certified</button>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-space-md">
<!-- RECORD CARD 1: MAXIMUM LEAN ANGLE -->
<div class="bg-surface-container-low rounded-xl p-space-md shadow-md flex flex-col justify-between">
<div class="flex items-center justify-between">
<span class="font-label-data text-label-data text-on-surface-variant uppercase">Peak Lean Recorded</span>
<span class="px-space-xs py-0.5 rounded bg-primary-container/20 text-primary-container font-label-caption text-xs font-bold">RECORD #1</span>
</div>
<div class="py-space-md flex items-center justify-between">
<div>
<div class="flex items-baseline">
<span class="font-telemetry-metric-lg text-telemetry-metric-lg text-primary tracking-tight">53.6°</span>
<span class="font-headline-sm text-headline-sm text-primary-container ml-1">R</span>
</div>
<span class="font-body-md text-xs text-on-surface-variant">Taro Takahashi • Yamaha YZF-R1M</span>
<span class="font-label-caption text-[11px] text-outline block pt-1">Laguna Seca • Turn 2 Andretti Hairpin</span>
</div>
<img class="w-20 h-20 rounded-lg object-cover shadow-sm" data-alt="Aggressive sportbike racer scraping knee and elbow puck at 55 degrees lean on asphalt racetrack with tire smoke and bright cyan lighting details" src="https://lh3.googleusercontent.com/aida-public/AB6AXuD87qHYm0cgx1KtVgInPRp8TSjVesGCv9WluJC1qPyNrI208xEkVKwKGOhtrVLh8EUYTYm-YgMK8yv3d_-rmkEI1r0ahEjoS3G8wXbHY9O0RjhV3mZP0fDyFvv3MzIfBKpUU4CCoLxqPJ2LaRN1ug1VWUgzHfdogJpDT90kGVEDBtcsam11wQgU9gFLCYOxGk8NOjckQSbNMcL5dee4iE9h-Bqo_QOgUU49ltZRCupAZOl7N5KuzbZR"/>
</div>
<div class="bg-surface-container p-space-xs rounded-lg flex items-center justify-between">
<span class="font-label-caption text-label-caption text-on-surface-variant">IMU Verified Drift Error</span>
<span class="font-label-data text-label-data text-primary">±0.12° Precision</span>
</div>
</div>
<!-- RECORD CARD 2: CLEANEST APEX TRAJECTORY SCORE -->
<div class="bg-surface-container-low rounded-xl p-space-md shadow-md flex flex-col justify-between">
<div class="flex items-center justify-between">
<span class="font-label-data text-label-data text-on-surface-variant uppercase">Cleanest Apex Trajectory</span>
<span class="px-space-xs py-0.5 rounded bg-secondary-container text-on-secondary font-label-caption text-xs font-bold">99.8% SCORE</span>
</div>
<div class="py-space-md flex items-center justify-between">
<div>
<div class="flex items-baseline">
<span class="font-telemetry-metric-lg text-telemetry-metric-lg text-on-surface tracking-tight">99.8</span>
<span class="font-headline-sm text-headline-sm text-secondary ml-1">/100</span>
</div>
<span class="font-body-md text-xs text-on-surface-variant">Elena “Apex” Rostova • Aprilia RSV4 Factory</span>
<span class="font-label-caption text-[11px] text-outline block pt-1">Sonoma Raceway • Turn 3A/3B Complex</span>
</div>
<div class="w-20 h-20 rounded-lg bg-surface-container flex items-center justify-center">
<svg class="w-14 h-14" viewbox="0 0 36 36">
<path class="text-surface-container-highest" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" fill="none" stroke="currentColor" stroke-width="3"></path>
<path class="text-primary-container" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" fill="none" stroke="currentColor" stroke-dasharray="99.8, 100" stroke-width="3"></path>
<text fill="#e0e2ea" font-family="JetBrains Mono" font-size="9" font-weight="700" text-anchor="middle" x="18" y="21">99.8</text>
</svg>
</div>
</div>
<div class="bg-surface-container p-space-xs rounded-lg flex items-center justify-between">
<span class="font-label-caption text-label-caption text-on-surface-variant">Clipping Point Deviation</span>
<span class="font-label-data text-label-data text-primary">&lt; 3.2 cm Geometric Center</span>
</div>
</div>
<!-- RECORD CARD 3: DRAGGY SLOPE ACCELERATION LEADERBOARD -->
<div class="bg-surface-container-low rounded-xl p-space-md shadow-md flex flex-col justify-between">
<div class="flex items-center justify-between">
<span class="font-label-data text-label-data text-on-surface-variant uppercase">Draggy Slope Certified</span>
<span class="px-space-xs py-0.5 rounded bg-surface-variant text-on-surface font-label-caption text-xs font-bold">SLOPE &lt; 1.0%</span>
</div>
<div class="py-space-md flex items-center justify-between">
<div>
<div class="flex items-baseline">
<span class="font-telemetry-metric-lg text-telemetry-metric-lg text-primary tracking-tight">2.41s</span>
<span class="font-headline-sm text-headline-sm text-on-surface ml-1">0-60</span>
</div>
<span class="font-body-md text-xs text-on-surface-variant">Marcus Thorne • BMW M1000RR</span>
<span class="font-label-caption text-[11px] text-outline block pt-1">60-130 MPH in 3.88s • Certified Slope -0.2%</span>
</div>
<img class="w-20 h-20 rounded-lg object-cover shadow-sm" data-alt="High tech telemetry GPS drag timer device mounted to a superbike titanium triple tree cockpit display with digital speed times" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBSMpoetf8ef4Kr82S_R3kgtkSSN4dt4YhBHSqVpyN2Qt8H8JdqJK-NImQjjWXRZgM0Vl7Wdqd86fhlOmfkWI9JVYBx03mFoTy9K8ywG3L-fmH-kVCue2Rf-AHF_cIqMfp1n4jhu7NR0cWAKnzwEDyTg17lRDDQZ-D9Y5L8QM4HXpASTzomuzJKFhLC1cxQOhx31cfnikkGNajiqwwwyO-8OaZ5AJSr4ggcjxebBfvBemtOARzcsXhp"/>
</div>
<div class="bg-surface-container p-space-xs rounded-lg flex items-center justify-between">
<span class="font-label-caption text-label-caption text-on-surface-variant">Cryptographic Drift Signature</span>
<span class="font-label-data text-label-data text-primary">SHA256 CERTIFIED</span>
</div>
</div>
</div>
</div>
</section>
<!-- EXPORT & DEVELOPER TELEMETRY ENGINE SECTION -->
<section class="w-full px-gutter-lg py-space-xl">
<div class="max-w-[1720px] mx-auto bg-surface-container-low rounded-2xl p-space-lg shadow-xl relative overflow-hidden">
<!-- Gradient Scrim for subtle tactical glow -->
<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="grid grid-cols-1 lg:grid-cols-12 gap-space-lg items-center relative z-10">
<!-- Left: Documentation & Engine Specs -->
<div class="lg:col-span-8 flex flex-col gap-space-md">
<div class="flex items-center gap-space-xs">
<span class="w-2.5 h-2.5 rounded bg-primary-container"></span>
<span class="font-label-data text-label-data text-primary uppercase tracking-wider">High-Density Telemetry Protocol v4.8</span>
</div>
<h2 class="font-headline-lg text-headline-lg text-on-surface tracking-tight">Extract Raw 20 Hz IMU Telemetry, Trajectories &amp; Friction Dynamics</h2>
<p class="font-body-lg text-body-lg text-on-surface-variant max-w-2xl">
Ingest microsecond-stamped roll-angles, longitudinal slip values, engine CAN frames, and dual-antenna GNSS RTK coordinates directly into your computational analysis pipeline or race engineering software.
</p>
<!-- Format Chips -->
<div class="flex flex-wrap items-center gap-space-sm pt-space-xs">
<div class="flex items-center gap-space-xs px-space-sm py-space-xs rounded-lg bg-surface-container">
<span class="material-symbols-outlined text-sm text-primary">description</span>
<span class="font-label-data text-label-data text-on-surface">CSV (Comma-Separated)</span>
</div>
<div class="flex items-center gap-space-xs px-space-sm py-space-xs rounded-lg bg-surface-container">
<span class="material-symbols-outlined text-sm text-primary">data_object</span>
<span class="font-label-data text-label-data text-on-surface">GeoJSON / JSON-L</span>
</div>
<div class="flex items-center gap-space-xs px-space-sm py-space-xs rounded-lg bg-surface-container">
<span class="material-symbols-outlined text-sm text-primary">database</span>
<span class="font-label-data text-label-data text-on-surface">SQLite WAL Archive</span>
</div>
<div class="flex items-center gap-space-xs px-space-sm py-space-xs rounded-lg bg-surface-container">
<span class="material-symbols-outlined text-sm text-primary">terminal</span>
<span class="font-label-data text-label-data text-on-surface">gRPC / WebSocket Stream</span>
</div>
</div>
</div>
<!-- Right: Actions & Code Payload Snippet -->
<div class="lg:col-span-4 flex flex-col gap-space-md">
<div class="bg-surface-container-lowest p-space-md rounded-xl shadow-inner font-label-data text-xs text-on-surface-variant">
<div class="flex items-center justify-between pb-space-xs">
<span class="text-primary font-bold">sample_telemetry.json</span>
<span class="text-outline">20 Hz Payload</span>
</div>
<pre class="overflow-x-auto text-[11px] leading-relaxed text-on-surface"><code>{
"timestamp_ns": 1729482910400000,
"node_id": "APEX-SF-904",
"imu_roll_deg": 49.02,
"imu_pitch_deg": -2.14,
"lat_g": 0.724,
"lon_g": -0.412,
"gps_speed_mph": 68.14,
"engine_rpm": 11400,
"throttle_pct": 84.0
}</code></pre>
</div>
<div class="flex flex-col sm:flex-row gap-space-sm">
<button class="flex-1 h-12 rounded-lg bg-primary-container text-on-primary font-label-data text-label-data uppercase tracking-wider font-bold shadow-md hover:bg-primary transition-all flex items-center justify-center gap-space-xs" id="download-telemetry-btn">
<span class="material-symbols-outlined text-base">download</span>
<span>Export Session (CSV)</span>
</button>
<button class="h-12 px-space-md rounded-lg bg-surface-container hover:bg-surface-container-high text-on-surface font-label-data text-label-data uppercase tracking-wider transition-all flex items-center justify-center gap-space-xs" id="api-docs-modal-btn">
<span class="material-symbols-outlined text-base">code</span>
<span>API Reference</span>
</button>
</div>
</div>
</div>
</div>
</section>
<!-- MODAL: DEVELOPER API DOCUMENTATION & SCHEMA DIALOG -->
<div class="fixed inset-0 z-50 bg-surface/90 backdrop-blur-md hidden items-center justify-center p-space-md" id="api-modal">
<div class="bg-surface-container-low max-w-2xl w-full rounded-2xl p-space-lg shadow-2xl flex flex-col gap-space-md max-h-[921px] overflow-y-auto">
<div class="flex items-center justify-between">
<div class="flex items-center gap-space-xs">
<span class="material-symbols-outlined text-primary-container">webhook</span>
<span class="font-headline-sm text-headline-sm text-on-surface">MotorSignal High-Frequency WebSocket API</span>
</div>
<button class="w-8 h-8 rounded-lg bg-surface-container flex items-center justify-center text-on-surface hover:text-primary transition-colors" id="close-modal-btn">
<span class="material-symbols-outlined text-sm">close</span>
</button>
</div>
<p class="font-body-md text-body-md text-on-surface-variant">
Connect to live vehicle telemetry clusters with authenticated WebSockets at 20 frames per second. Includes Kalman filtered lean estimation and sub-second pack gap calculations.
</p>
<div class="bg-surface-container-lowest p-space-sm rounded-lg font-label-data text-xs">
<span class="text-outline uppercase text-[10px] block">WebSocket Endpoint</span>
<span class="text-primary select-all">wss://telemetry.motorsignal.io/v1/sessions/CA-904-PAC/live</span>
</div>
<div class="flex flex-col gap-space-xs">
<span class="font-label-data text-label-data text-on-surface uppercase">Authorization Header</span>
<div class="bg-surface-container p-space-xs rounded font-label-data text-xs text-on-surface-variant">
<code>Authorization: Bearer ms_live_8f0a21c8e390bd71</code>
</div>
</div>
<div class="flex justify-end gap-space-sm pt-space-xs">
<button class="h-10 px-space-md rounded-lg bg-surface-container hover:bg-surface-container-high text-on-surface font-label-data text-label-data uppercase" id="close-modal-action-btn">
Dismiss
</button>
<button class="h-10 px-space-md rounded-lg bg-primary-container text-on-primary font-label-data text-label-data uppercase font-bold hover:bg-primary">
Copy Integration Specs
</button>
</div>
</div>
</div>
</div>
<!-- INLINE CLIENT SCRIPT FOR LIVE SENSOR TICKING & MODAL INTERACTION -->
<script>
(function() {
let streamingActive = true;
let baseSpeed = 68;
let baseLean = 49;
let baseRpm = 11400;
const speedEl = document.getElementById('speed-display');
const leanEl = document.getElementById('lean-degree');
const rpmEl = document.getElementById('rpm-val');
const rpmBar = document.getElementById('rpm-bar');
const latGEl = document.getElementById('lat-g-val');
const gDotEl = document.getElementById('g-dot');
const leanNeedle = document.getElementById('lean-needle');
const leanArc = document.getElementById('lean-arc');
const toggleBtn = document.getElementById('toggle-sim-btn');
const downloadBtn = document.getElementById('download-telemetry-btn');
// Modal elements
const modal = document.getElementById('api-modal');
const openModalBtn = document.getElementById('api-docs-modal-btn');
const closeModalBtn = document.getElementById('close-modal-btn');
const closeModalActionBtn = document.getElementById('close-modal-action-btn');
// Simulated 20Hz sensor jitter update loop
setInterval(() => {
if (!streamingActive) return;
// Small realistic high-frequency IMU micro-fluctuations
const speedJitter = (Math.random() * 1.6 - 0.8);
const curSpeed = Math.round(baseSpeed + speedJitter);
if (speedEl) speedEl.textContent = curSpeed;
const leanJitter = (Math.random() * 0.6 - 0.3);
const curLean = (baseLean + leanJitter).toFixed(1);
if (leanEl) leanEl.textContent = curLean + '°';
const rpmJitter = Math.round(Math.random() * 140 - 70);
const curRpm = (baseRpm + rpmJitter).toLocaleString();
if (rpmEl) rpmEl.textContent = curRpm;
// Friction dot slight oscillation
if (gDotEl) {
const cx = 72 + (Math.random() * 3 - 1.5);
const cy = 38 + (Math.random() * 3 - 1.5);
gDotEl.setAttribute('cx', cx.toFixed(1));
gDotEl.setAttribute('cy', cy.toFixed(1));
}
}, 150);
// Toggle Streaming Button
if (toggleBtn) {
toggleBtn.addEventListener('click', () => {
streamingActive = !streamingActive;
if (streamingActive) {
toggleBtn.textContent = 'Live Streaming (Active)';
toggleBtn.classList.remove('bg-surface-variant', 'text-on-surface');
toggleBtn.classList.add('bg-primary-container', 'text-on-primary');
} else {
toggleBtn.textContent = 'Stream Paused';
toggleBtn.classList.remove('bg-primary-container', 'text-on-primary');
toggleBtn.classList.add('bg-surface-variant', 'text-on-surface');
}
});
}
// Export CSV Download Trigger Feedback
if (downloadBtn) {
downloadBtn.addEventListener('click', () => {
const originalText = downloadBtn.innerHTML;
downloadBtn.innerHTML = '<span class="material-symbols-outlined text-base animate-spin">refresh</span> Generating 20Hz WAL...';
setTimeout(() => {
downloadBtn.innerHTML = '<span class="material-symbols-outlined text-base">check</span> Export Ready (14.2 MB)';
setTimeout(() => {
downloadBtn.innerHTML = originalText;
}, 2400);
}, 900);
});
}
// Modal Show / Hide
const toggleModal = (show) => {
if (modal) {
if (show) {
modal.classList.remove('hidden');
modal.classList.add('flex');
} else {
modal.classList.add('hidden');
modal.classList.remove('flex');
}
}
};
if (openModalBtn) openModalBtn.addEventListener('click', () => toggleModal(true));
if (closeModalBtn) closeModalBtn.addEventListener('click', () => toggleModal(false));
if (closeModalActionBtn) closeModalActionBtn.addEventListener('click', () => toggleModal(false));
if (modal) {
modal.addEventListener('click', (e) => {
if (e.target === modal) toggleModal(false);
});
}
})();
</script></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 &amp; 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 &amp; 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 &amp; Officer Hub</li><li class="font-body-md text-body-md text-on-surface-variant hover:text-on-surface transition-colors cursor-pointer">Roles &amp; 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 &amp; 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 &lt;14ms</span></div></div></div></footer></body></html>