MotorSignal-App/docs/stitch-designs/code/01_activity_telemetry_log.html

326 lines
29 KiB
HTML

<!DOCTYPE html>
<html class="dark" lang="en"><head><meta charset="utf-8"/><meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover" name="viewport"/><meta content="mobile_tab" name="shell-type"/><title>MotorSignal Cockpit HUD</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"/><style>@layer base{html,body{width:100%;margin:0;padding:0;background-color:#101419;color:#e0e2ea;}body{overscroll-behavior:none;}.pb-safe{padding-bottom:env(safe-area-inset-bottom,0px);}.pt-safe{padding-top:env(safe-area-inset-top,0px);}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-primary": "#00363d", "tertiary-fixed-dim": "#d0bcff", "tertiary-container": "#d9c8ff", "on-primary-container": "#00626e", "surface-variant": "#32353b", "on-primary-fixed-variant": "#004f58", "surface-container-high": "#272a30", "outline-variant": "#3b494c", "surface-container": "#1d2025", "on-surface": "#e0e2ea", "background": "#101419", "primary-container": "#00e5ff", "inverse-surface": "#e0e2ea", "outline": "#849396", "on-secondary": "#002a78", "secondary-fixed-dim": "#b4c5ff", "on-tertiary": "#3c0091", "inverse-primary": "#006875", "surface-bright": "#36393f", "surface-container-low": "#181c21", "surface-container-highest": "#32353b", "inverse-on-surface": "#2d3036", "on-secondary-fixed": "#00174b", "primary": "#c3f5ff", "error-container": "#93000a", "surface-tint": "#00daf3", "on-tertiary-fixed-variant": "#5516be", "on-error-container": "#ffdad6", "primary-fixed-dim": "#00daf3", "tertiary-fixed": "#e9ddff", "on-primary-fixed": "#001f24", "on-error": "#690005", "surface-container-lowest": "#0b0e13", "secondary-container": "#0053db", "tertiary": "#f2e9ff", "surface-dim": "#101419", "on-surface-variant": "#bac9cc", "on-tertiary-container": "#6834d1", "primary-fixed": "#9cf0ff", "secondary-fixed": "#dbe1ff", "error": "#ffb4ab", "on-secondary-container": "#cdd7ff", "on-secondary-fixed-variant": "#003ea8", "surface": "#101419", "on-background": "#e0e2ea", "secondary": "#b4c5ff", "on-tertiary-fixed": "#23005c" }, "borderRadius": { "DEFAULT": "0.25rem", "lg": "0.5rem", "xl": "0.75rem", "full": "9999px" }, "spacing": { "margin-lg": "2rem", "space-xs": "0.25rem", "gutter-lg": "1.5rem", "space-xl": "2rem", "margin": "1rem", "space-sm": "0.5rem", "space-md": "1rem", "space-lg": "1.5rem", "gutter": "1rem" }, "fontFamily": { "headline-lg": ["Space Grotesk"], "body-lg": ["Inter"], "telemetry-metric-lg-mobile": ["JetBrains Mono"], "label-data": ["JetBrains Mono"], "display-hero": ["Space Grotesk"], "headline-sm": ["Space Grotesk"], "headline-md": ["Space Grotesk"], "label-caption": ["Inter"], "telemetry-metric-lg": ["JetBrains Mono"], "display-hero-mobile": ["Space Grotesk"], "telemetry-metric-md": ["JetBrains Mono"], "body-md": ["Inter"] }, "fontSize": { "headline-lg": ["32px", { "lineHeight": "40px", "letterSpacing": "-0.02em", "fontWeight": "700" }], "body-lg": ["16px", { "lineHeight": "24px", "fontWeight": "500" }], "telemetry-metric-lg-mobile": ["36px", { "lineHeight": "36px", "letterSpacing": "-0.03em", "fontWeight": "700" }], "label-data": ["12px", { "lineHeight": "16px", "letterSpacing": "0.08em", "fontWeight": "600" }], "display-hero": ["56px", { "lineHeight": "60px", "letterSpacing": "-0.03em", "fontWeight": "700" }], "headline-sm": ["20px", { "lineHeight": "28px", "fontWeight": "600" }], "headline-md": ["24px", { "lineHeight": "32px", "letterSpacing": "-0.01em", "fontWeight": "600" }], "label-caption": ["11px", { "lineHeight": "14px", "letterSpacing": "0.05em", "fontWeight": "600" }], "telemetry-metric-lg": ["48px", { "lineHeight": "48px", "letterSpacing": "-0.04em", "fontWeight": "700" }], "display-hero-mobile": ["40px", { "lineHeight": "44px", "letterSpacing": "-0.02em", "fontWeight": "700" }], "telemetry-metric-md": ["28px", { "lineHeight": "32px", "letterSpacing": "-0.02em", "fontWeight": "600" }], "body-md": ["14px", { "lineHeight": "20px", "fontWeight": "400" }] } } } }</script><style>
body {
min-height: max(884px, 100dvh);
}
</style>
</head><body class="bg-surface font-body-md text-on-surface antialiased flex flex-col min-h-screen selection:bg-primary-container selection:text-on-primary-container"><header class="fixed top-0 w-full z-50 pt-safe bg-surface-container-lowest/85 backdrop-blur-xl shadow-[0_4px_20px_rgba(0,0,0,0.5)]"><div class="h-16 px-space-md flex items-center justify-between gap-space-sm"><div class="flex items-center gap-space-sm"><img alt="MotorSignal Brand Logo" class="h-8 w-auto object-contain drop-shadow-[0_0_8px_rgba(0,229,255,0.4)]" src="https://lh3.googleusercontent.com/aida/AEtjO1Vf56Tkh6bJ86BCfT5GHz_yPumvEXYLWojlNHAFG-cN4VvH_nLvEbWQ4x7uhJPRaAyO8ozAAbLI_huEN134QOIYp8BdHuqoZCsMk9_ILaUxZqilVgamefO6d2sG1R8laIWSUswanVsK9lfvIgppQm_XxBQipzkDgPwIoXk7yh10QTlmZqDICryF-1MoWFfFjM2zZswr6ynuAgZAviROYnFBF2D4hxm6YREQxkZQJaBcG9oAg_dYVgTHxwg"/><div class="flex flex-col"><span class="font-headline-sm text-headline-sm uppercase tracking-wider text-primary-fixed">MotorSignal</span><span class="font-label-caption text-label-caption text-on-surface-variant uppercase tracking-widest leading-none">Telemetry Log</span></div></div><div class="flex items-center gap-space-sm"><div class="hidden sm:flex items-center gap-space-xs bg-surface-container-low px-space-sm py-1 rounded-full"><span class="w-2 h-2 rounded-full bg-primary-container animate-pulse shadow-[0_0_6px_#00e5ff]"></span><span class="font-label-data text-label-data text-primary-fixed">GPS 3D FIX</span></div><div class="flex items-center gap-1.5 bg-surface-container px-2 py-1 rounded-full"><span class="material-symbols-outlined text-[15px] text-primary-container">bolt</span><span class="font-label-data text-label-data text-on-surface">98%</span><span class="w-1 h-1 rounded-full bg-outline-variant"></span><span class="material-symbols-outlined text-[15px] text-primary-container">cell_tower</span></div><button aria-label="Rider Profile" class="min-w-[44px] min-h-[44px] flex items-center justify-center p-1 rounded-full focus:outline-none focus:ring-2 focus:ring-primary-container" type="button"><img alt="Profile" class="w-8 h-8 rounded-full object-cover ring-2 ring-primary-container/40" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBb6sR8Ta8-L1_TN1LuCBfSxtZxX9hKOFjd-RjllihDsnp6AG1GlMhL9bVlb-ibhIRT3HMw_caXK7BmwmvWKNBcuizyqswUQZNztavckRTN1Xa6qGML_0kv8qvV_hrXWWK1EjSjVFzhRyDzf6VdGnZvUpGsFFmSBcaGVrXmEWFYnIa-qHyeWxZlT_SJmPuQJPQKEWEo6vC6kdDzXNnhoB4tpRHjIjCstvTdooPc0KVN_x3BqqmqadNI"/></button></div></div></header><main class="flex-1 flex flex-col relative w-full pt-16 pb-20 bg-surface"><div class="flex flex-col w-full px-space-md py-space-md gap-space-md">
<!-- Top Segmented Switcher -->
<div class="w-full bg-surface-container-lowest p-1 rounded-xl flex items-center justify-between shadow-inner">
<button class="flex-1 min-h-[48px] flex items-center justify-center gap-space-xs rounded-lg bg-surface-container-high text-primary-container shadow-md transition-all" id="tab-rides" type="button">
<span class="material-symbols-outlined text-[18px]">route</span>
<span class="font-headline-sm text-label-data uppercase tracking-wider">Recorded Rides (48)</span>
</button>
<button class="flex-1 min-h-[48px] flex items-center justify-center gap-space-xs rounded-lg text-on-surface-variant hover:text-on-surface transition-all" id="tab-trophies" type="button">
<span class="material-symbols-outlined text-[18px]">military_tech</span>
<span class="font-headline-sm text-label-data uppercase tracking-wider">Records &amp; Trophies</span>
</button>
</div>
<!-- Summary KPI Strip -->
<div class="grid grid-cols-3 gap-space-sm w-full">
<!-- Metric 1 -->
<div class="bg-surface-container-low rounded-xl p-space-sm flex flex-col justify-between shadow-sm relative overflow-hidden group">
<div class="flex items-center justify-between text-on-surface-variant">
<span class="font-label-caption text-label-caption uppercase tracking-wider">Distance</span>
<span class="material-symbols-outlined text-[16px] text-primary-container">speed</span>
</div>
<div class="mt-2 flex flex-col">
<span class="font-telemetry-metric-md text-telemetry-metric-md text-on-surface leading-tight">4,820</span>
<span class="font-label-data text-label-data text-on-surface-variant">TOT MILES</span>
</div>
<div class="absolute -right-2 -bottom-2 w-10 h-10 bg-primary-container/5 rounded-full pointer-events-none"></div>
</div>
<!-- Metric 2 -->
<div class="bg-surface-container-low rounded-xl p-space-sm flex flex-col justify-between shadow-sm relative overflow-hidden group">
<div class="flex items-center justify-between text-on-surface-variant">
<span class="font-label-caption text-label-caption uppercase tracking-wider">Lean Max</span>
<span class="material-symbols-outlined text-[16px] text-primary-fixed-dim">screen_rotation_alt</span>
</div>
<div class="mt-2 flex flex-col">
<div class="flex items-baseline gap-0.5">
<span class="font-telemetry-metric-md text-telemetry-metric-md text-primary-fixed-dim leading-tight">52</span>
<span class="font-label-data text-label-data text-primary-fixed-dim font-bold">°</span>
</div>
<span class="font-label-data text-label-data text-on-surface-variant">PEAK ANGLE</span>
</div>
<div class="absolute -right-2 -bottom-2 w-10 h-10 bg-primary-fixed-dim/5 rounded-full pointer-events-none"></div>
</div>
<!-- Metric 3 -->
<div class="bg-surface-container-low rounded-xl p-space-sm flex flex-col justify-between shadow-sm relative overflow-hidden group">
<div class="flex items-center justify-between text-on-surface-variant">
<span class="font-label-caption text-label-caption uppercase tracking-wider">Milestones</span>
<span class="material-symbols-outlined text-[16px] text-tertiary-fixed-dim">workspace_premium</span>
</div>
<div class="mt-2 flex flex-col">
<span class="font-telemetry-metric-md text-telemetry-metric-md text-tertiary-fixed-dim leading-tight">18</span>
<span class="font-label-data text-label-data text-on-surface-variant">TROPHIES</span>
</div>
<div class="absolute -right-2 -bottom-2 w-10 h-10 bg-tertiary-fixed-dim/5 rounded-full pointer-events-none"></div>
</div>
</div>
<!-- Search & Tactical Filters Bar -->
<div class="w-full flex items-center gap-space-sm">
<div class="flex-1 bg-surface-container-low rounded-xl px-space-md py-space-xs flex items-center gap-space-sm shadow-inner focus-within:bg-surface-container transition-all">
<span class="material-symbols-outlined text-[20px] text-on-surface-variant">search</span>
<input class="w-full bg-transparent text-on-surface placeholder:text-on-surface-variant/60 font-body-md text-body-md focus:outline-none min-h-[44px]" placeholder="Filter bike, canyon, date..." type="text"/>
</div>
<button aria-label="Toggle Filter Sliders" class="min-w-[48px] min-h-[48px] flex items-center justify-center bg-surface-container-low hover:bg-surface-container rounded-xl text-primary-container transition-colors shadow-sm" type="button">
<span class="material-symbols-outlined text-[22px]">tune</span>
</button>
</div>
<!-- Quick Filter Pills -->
<div class="flex items-center gap-space-xs overflow-x-auto pb-1 no-scrollbar">
<button class="bg-primary-container text-on-primary-container px-space-md py-1.5 rounded-full font-label-data text-label-data uppercase tracking-wider shrink-0 shadow-sm font-bold">All Bikes</button>
<button class="bg-surface-container-low hover:bg-surface-container text-on-surface-variant px-space-md py-1.5 rounded-full font-label-data text-label-data uppercase tracking-wider shrink-0 transition-colors">Yamaha MT-09 SP</button>
<button class="bg-surface-container-low hover:bg-surface-container text-on-surface-variant px-space-md py-1.5 rounded-full font-label-data text-label-data uppercase tracking-wider shrink-0 transition-colors">Ducati Panigale V4</button>
<button class="bg-surface-container-low hover:bg-surface-container text-on-surface-variant px-space-md py-1.5 rounded-full font-label-data text-label-data uppercase tracking-wider shrink-0 transition-colors">&gt;45° Lean Only</button>
</div>
<!-- Feeds Header with Status -->
<div class="flex items-center justify-between pt-space-xs">
<div class="flex items-center gap-2">
<span class="font-headline-sm text-headline-sm text-on-surface uppercase tracking-tight">Recent Sessions</span>
<span class="px-2 py-0.5 rounded bg-surface-container-high font-label-data text-label-caption text-primary-fixed">LOGS SECURE</span>
</div>
<span class="font-label-caption text-label-caption text-on-surface-variant uppercase tracking-widest">AUTO-SYNC ON</span>
</div>
<!-- FEATURED RIDE CARD: Saturday Morning Canyon Carve -->
<div class="w-full bg-surface-container-low rounded-xl p-space-md flex flex-col gap-space-md shadow-md relative overflow-hidden">
<!-- Background subtle gradient sheen -->
<div class="absolute inset-0 bg-gradient-to-br from-primary-container/5 via-transparent to-secondary-container/5 pointer-events-none"></div>
<!-- Header Meta Row -->
<div class="flex items-start justify-between relative z-10">
<div class="flex flex-col gap-0.5">
<div class="flex items-center gap-2">
<span class="font-headline-sm text-headline-sm text-on-surface font-bold leading-tight">Saturday Morning Canyon Carve</span>
<span class="material-symbols-outlined text-[18px] text-primary-container">verified</span>
</div>
<div class="flex items-center gap-space-sm font-label-data text-label-caption text-on-surface-variant">
<span>Oct 14 • 8:42 AM</span>
<span class="w-1 h-1 rounded-full bg-outline-variant"></span>
<span class="text-primary-fixed">Yamaha MT-09 SP</span>
</div>
</div>
<!-- Green Cloud Synced Badge -->
<div class="flex items-center gap-1.5 bg-surface-container-lowest px-2.5 py-1 rounded-full shadow-sm shrink-0">
<span class="w-2 h-2 rounded-full bg-[#10b981] animate-pulse"></span>
<span class="font-label-data text-label-caption text-[#10b981] uppercase font-bold tracking-wider">Synced</span>
</div>
</div>
<!-- Dark Tactical Map Visualizer with Dynamic Route Heatmap -->
<div class="w-full h-48 rounded-lg bg-surface-container-lowest relative overflow-hidden shadow-inner group cursor-pointer" data-location="Angeles Crest Highway, California" style="">
<div class="absolute inset-0 bg-gradient-to-t from-surface-container-lowest via-transparent to-transparent z-10 pointer-events-none"></div>
<!-- Telemetry Overlay Ribbon -->
<div class="absolute top-2 left-2 z-20 flex items-center gap-1.5 bg-surface-container-lowest/80 backdrop-blur-md px-2 py-1 rounded">
<span class="material-symbols-outlined text-[14px] text-primary-container">near_me</span>
<span class="font-label-data text-label-caption text-on-surface font-semibold">ANG_CREST_SECTOR_4</span>
</div>
<div class="absolute top-2 right-2 z-20 flex items-center gap-1 bg-surface-container-lowest/80 backdrop-blur-md px-2 py-1 rounded font-label-data text-label-caption text-primary-fixed-dim">
<span class="w-1.5 h-1.5 rounded-full bg-primary-fixed-dim"></span>
<span>20Hz GPS-IMU</span>
</div>
<!-- Rendered SVG Route Map with Heatmap Gradient Effect -->
<svg class="w-full h-full p-4 relative z-10 filter drop-shadow-[0_0_12px_rgba(0,229,255,0.3)]" fill="none" viewbox="0 0 400 180" xmlns="http://www.w3.org/2000/svg">
<defs>
<lineargradient id="routeGradient" x1="0%" x2="100%" y1="50%" y2="50%">
<stop offset="0%" stop-color="#00e5ff"></stop>
<stop offset="35%" stop-color="#00e5ff"></stop>
<stop offset="52%" stop-color="#f59e0b"></stop>
<stop offset="68%" stop-color="#ff4444"></stop>
<stop offset="82%" stop-color="#f59e0b"></stop>
<stop offset="100%" stop-color="#00e5ff"></stop>
</lineargradient>
<filter height="140%" id="apexGlow" width="140%" x="-20%" y="-20%">
<fegaussianblur result="glow" stddeviation="3"></fegaussianblur>
<fecomposite in="SourceGraphic" in2="glow" operator="over"></fecomposite>
</filter>
</defs>
<!-- Waypoint Grid Matrix Backing -->
<pattern height="24" id="tacticalGrid" patternunits="userSpaceOnUse" width="24">
<circle cx="2" cy="2" fill="#32353b" r="0.8"></circle>
</pattern>
<rect fill="url(#tacticalGrid)" height="100%" opacity="0.6" width="100%"></rect>
<!-- Track Path Outer Soft Aura -->
<path d="M 20 140 C 70 140, 90 40, 150 45 C 190 48, 205 135, 250 135 C 290 135, 295 25, 335 30 C 365 35, 375 75, 385 75" opacity="0.12" stroke="#00e5ff" stroke-linecap="round" stroke-linejoin="round" stroke-width="8"></path>
<!-- Heatmap Track Path -->
<path d="M 20 140 C 70 140, 90 40, 150 45 C 190 48, 205 135, 250 135 C 290 135, 295 25, 335 30 C 365 35, 375 75, 385 75" stroke="url(#routeGradient)" stroke-linecap="round" stroke-linejoin="round" stroke-width="3.5"></path>
<!-- Start Marker -->
<circle cx="20" cy="140" fill="#00e5ff" r="4.5"></circle>
<circle cx="20" cy="140" r="8" stroke="#00e5ff" stroke-dasharray="2 2" stroke-width="1.5"></circle>
<!-- Critical Apex Peak Marker (49° Lean Hotspot) -->
<g filter="url(#apexGlow)">
<circle cx="315" cy="50" fill="#ff4444" r="5"></circle>
<circle cx="315" cy="50" opacity="0.8" r="10" stroke="#ff4444" stroke-width="1.5"></circle>
</g>
<!-- Dynamic Apex Callout Tag -->
<rect fill="#0b0e13" height="20" opacity="0.92" rx="4" width="56" x="290" y="68"></rect>
<text fill="#ffb4ab" font-family="'JetBrains Mono', monospace" font-size="10" font-weight="700" x="295" y="82">49° APEX</text>
</svg>
<!-- Bottom HUD mini ticker overlay -->
<div class="absolute bottom-2 left-3 right-3 z-20 flex items-center justify-between text-on-surface-variant font-label-data text-label-caption">
<span class="flex items-center gap-1">
<span class="w-2 h-2 rounded-full bg-primary-container"></span> Straight (65+ MPH)
</span>
<span class="flex items-center gap-1">
<span class="w-2 h-2 rounded-full bg-[#f59e0b]"></span> Transition (38°)
</span>
<span class="flex items-center gap-1">
<span class="w-2 h-2 rounded-full bg-[#ff4444]"></span> Max Apex (49°)
</span>
</div>
</div>
<!-- 4 Key Telemetry Chips Grid -->
<div class="grid grid-cols-2 sm:grid-cols-4 gap-space-sm relative z-10">
<!-- Chip 1: Distance -->
<div class="bg-surface-container p-2.5 rounded-lg flex flex-col justify-center">
<span class="font-label-caption text-label-caption text-on-surface-variant uppercase tracking-wider">Distance</span>
<div class="flex items-baseline gap-1 mt-0.5">
<span class="font-telemetry-metric-md text-telemetry-metric-md text-on-surface font-bold leading-tight">84.2</span>
<span class="font-label-data text-label-caption text-primary-fixed">MI</span>
</div>
</div>
<!-- Chip 2: Duration -->
<div class="bg-surface-container p-2.5 rounded-lg flex flex-col justify-center">
<span class="font-label-caption text-label-caption text-on-surface-variant uppercase tracking-wider">Duration</span>
<div class="flex items-baseline gap-1 mt-0.5">
<span class="font-telemetry-metric-md text-telemetry-metric-md text-on-surface font-bold leading-tight">1h 42m</span>
</div>
</div>
<!-- Chip 3: Max Lean -->
<div class="bg-surface-container p-2.5 rounded-lg flex flex-col justify-center relative overflow-hidden">
<div class="flex items-center justify-between">
<span class="font-label-caption text-label-caption text-on-surface-variant uppercase tracking-wider">Max Lean</span>
<span class="font-label-data text-[10px] text-error font-bold uppercase">Right</span>
</div>
<div class="flex items-baseline gap-1 mt-0.5">
<span class="font-telemetry-metric-md text-telemetry-metric-md text-primary-container font-bold leading-tight">49°</span>
<span class="material-symbols-outlined text-[14px] text-primary-container">turn_sharp_right</span>
</div>
</div>
<!-- Chip 4: Top Speed -->
<div class="bg-surface-container p-2.5 rounded-lg flex flex-col justify-center">
<span class="font-label-caption text-label-caption text-on-surface-variant uppercase tracking-wider">Top Speed</span>
<div class="flex items-baseline gap-1 mt-0.5">
<span class="font-telemetry-metric-md text-telemetry-metric-md text-on-surface font-bold leading-tight">88</span>
<span class="font-label-data text-label-caption text-on-surface-variant">MPH</span>
</div>
</div>
</div>
<!-- Forensic Actions Row -->
<div class="flex flex-col sm:flex-row items-stretch sm:items-center gap-space-xs pt-1 relative z-10">
<!-- Primary Forensic Replay Trigger -->
<button class="flex-1 min-h-[48px] bg-primary-container text-on-primary-container rounded-lg px-space-md py-2 flex items-center justify-center gap-2 font-label-data text-label-data font-bold uppercase tracking-wider shadow-[0_0_16px_rgba(0,229,255,0.35)] active:scale-[0.98] transition-transform" type="button">
<span class="material-symbols-outlined text-[20px]">slow_motion_video</span>
<span>Forensic Replay</span>
</button>
<!-- GPX Export Action -->
<button class="min-h-[48px] px-space-md bg-surface-container-high hover:bg-surface-bright text-on-surface rounded-lg flex items-center justify-center gap-2 font-label-data text-label-data font-semibold uppercase tracking-wider transition-colors" type="button">
<span class="material-symbols-outlined text-[18px] text-primary-fixed">file_download</span>
<span>Export GPX</span>
</button>
<!-- Telemetry CSV Action -->
<button class="min-h-[48px] px-space-md bg-surface-container-high hover:bg-surface-bright text-on-surface rounded-lg flex items-center justify-center gap-2 font-label-data text-label-data font-semibold uppercase tracking-wider transition-colors" type="button">
<span class="material-symbols-outlined text-[18px] text-tertiary-fixed-dim">query_stats</span>
<span>CSV (20Hz)</span>
</button>
</div>
</div>
<!-- SECONDARY RIDE CARD: Palomar Mountain Apex Run -->
<div class="w-full bg-surface-container-low rounded-xl p-space-md flex flex-col gap-space-md shadow-sm relative overflow-hidden transition-all hover:bg-surface-container">
<div class="flex items-start justify-between">
<div class="flex flex-col gap-0.5">
<div class="flex items-center gap-2">
<span class="font-headline-sm text-headline-sm text-on-surface font-bold leading-tight">Palomar Mountain Apex Run</span>
</div>
<div class="flex items-center gap-space-sm font-label-data text-label-caption text-on-surface-variant">
<span>Oct 08 • 9:15 AM</span>
<span class="w-1 h-1 rounded-full bg-outline-variant"></span>
<span class="text-secondary-fixed">Ducati Panigale V4</span>
</div>
</div>
<!-- Trophy Badge -->
<div class="flex items-center gap-1 bg-tertiary-container/20 text-tertiary-fixed px-2 py-0.5 rounded-full font-label-data text-label-caption font-semibold">
<span class="material-symbols-outlined text-[14px]">emoji_events</span>
<span>NEW PR</span>
</div>
</div>
<!-- Secondary Map Mini Graphic preview + Metric combo -->
<div class="grid grid-cols-1 sm:grid-cols-3 gap-space-sm items-center">
<!-- Mini Map Sector Visual -->
<div class="h-28 bg-surface-container-lowest rounded-lg p-2 relative flex items-center justify-center overflow-hidden">
<svg class="w-full h-full opacity-70" fill="none" viewbox="0 0 200 80">
<path d="M 10 70 C 40 70, 50 10, 90 20 C 130 30, 150 70, 190 20" stroke="#b4c5ff" stroke-dasharray="3 3" stroke-linecap="round" stroke-width="2.5"></path>
<circle cx="90" cy="20" fill="#00e5ff" r="4"></circle>
<circle cx="160" cy="50" fill="#ffb4ab" r="5"></circle>
</svg>
<span class="absolute bottom-1 right-2 font-label-data text-[10px] text-on-surface-variant uppercase">S2 TIGHT SWITCHBACKS</span>
</div>
<!-- Quick Metrics 2-column on mobile -->
<div class="col-span-2 grid grid-cols-2 gap-space-sm">
<div class="bg-surface-container p-2.5 rounded-lg flex flex-col justify-center">
<span class="font-label-caption text-label-caption text-on-surface-variant uppercase tracking-wider">Peak Lean Angle</span>
<div class="flex items-baseline gap-1 mt-0.5">
<span class="font-telemetry-metric-md text-telemetry-metric-md text-primary-fixed-dim font-bold">52°</span>
<span class="font-label-data text-label-caption text-primary-fixed-dim">LEFT</span>
</div>
</div>
<div class="bg-surface-container p-2.5 rounded-lg flex flex-col justify-center">
<span class="font-label-caption text-label-caption text-on-surface-variant uppercase tracking-wider">Track Top Speed</span>
<div class="flex items-baseline gap-1 mt-0.5">
<span class="font-telemetry-metric-md text-telemetry-metric-md text-on-surface font-bold">112</span>
<span class="font-label-data text-label-caption text-on-surface-variant">MPH</span>
</div>
</div>
</div>
</div>
<!-- Secondary Action Strip -->
<div class="flex items-center justify-between pt-1 font-label-data text-label-data">
<div class="flex items-center gap-2 text-on-surface-variant">
<span class="material-symbols-outlined text-[16px]">cloud_done</span>
<span class="text-label-caption uppercase tracking-wider">R2 Backed (54.4 MB)</span>
</div>
<button class="min-h-[44px] px-space-md py-1.5 rounded-lg bg-surface-container-high hover:bg-surface-bright text-primary-container flex items-center gap-1.5 transition-colors uppercase font-bold tracking-wider" type="button">
<span>Inspect Telemetry</span>
<span class="material-symbols-outlined text-[16px]">arrow_forward</span>
</button>
</div>
</div>
<!-- Micro telemetry diagnostic badge row -->
<div class="w-full flex items-center justify-center gap-space-md py-space-sm opacity-60">
<div class="flex items-center gap-1 font-label-data text-[11px] text-on-surface-variant">
<span class="material-symbols-outlined text-[14px] text-primary-container">memory</span>
<span>IMU CALIBRATION: ±0.04° OK</span>
</div>
<div class="w-1 h-1 rounded-full bg-outline-variant"></div>
<div class="flex items-center gap-1 font-label-data text-[11px] text-on-surface-variant">
<span class="material-symbols-outlined text-[14px] text-[#10b981]">sensors</span>
<span>OBD-II CAN LOGGING ACTIVE</span>
</div>
</div>
</div>
<!-- Interactive Tab & Replay Trigger Handlers -->
<script>
(function() {
const tabRides = document.getElementById('tab-rides');
const tabTrophies = document.getElementById('tab-trophies');
if (tabRides && tabTrophies) {
tabTrophies.addEventListener('click', () => {
tabTrophies.classList.add('bg-surface-container-high', 'text-primary-container', 'shadow-md');
tabTrophies.classList.remove('text-on-surface-variant');
tabRides.classList.remove('bg-surface-container-high', 'text-primary-container', 'shadow-md');
tabRides.classList.add('text-on-surface-variant');
});
tabRides.addEventListener('click', () => {
tabRides.classList.add('bg-surface-container-high', 'text-primary-container', 'shadow-md');
tabRides.classList.remove('text-on-surface-variant');
tabTrophies.classList.remove('bg-surface-container-high', 'text-primary-container', 'shadow-md');
tabTrophies.classList.add('text-on-surface-variant');
});
}
})();
</script></main><nav class="fixed bottom-0 w-full z-50 pb-safe bg-surface-container-lowest/90 backdrop-blur-xl shadow-[0_-4px_24px_rgba(0,0,0,0.6)]" data-active-classes="text-primary-container font-headline-sm [filter:drop-shadow(0_0_8px_rgba(0,229,255,0.5))]"><div class="grid grid-cols-6 items-center h-20 px-space-xs"><a class="flex flex-col items-center justify-center min-h-[48px] min-w-[48px] py-1 text-on-surface-variant hover:text-primary transition-all duration-200" data-path="cockpit-dash" href="#"><span class="material-symbols-outlined text-[24px]">speed</span><span class="font-label-caption text-label-caption uppercase mt-0.5 tracking-wider">Dash</span></a><a class="flex flex-col items-center justify-center min-h-[48px] min-w-[48px] py-1 text-on-surface-variant hover:text-primary transition-all duration-200" data-path="tactical-radar-map" href="#"><span class="material-symbols-outlined text-[24px]">radar</span><span class="font-label-caption text-label-caption uppercase mt-0.5 tracking-wider">Map</span></a><a aria-current="page" class="flex flex-col items-center justify-center min-h-[48px] min-w-[48px] py-1 transition-all duration-200 text-primary-container font-headline-sm [filter:drop-shadow(0_0_8px_rgba(0,229,255,0.5))]" data-path="telemetry-log" href="#"><span class="material-symbols-outlined text-[24px]">monitoring</span><span class="font-label-caption text-label-caption uppercase mt-0.5 tracking-wider">Activity</span></a><a class="flex flex-col items-center justify-center min-h-[48px] min-w-[48px] py-1 text-on-surface-variant hover:text-primary transition-all duration-200" data-path="bike-garage" href="#"><span class="material-symbols-outlined text-[24px]">two_wheeler</span><span class="font-label-caption text-label-caption uppercase mt-0.5 tracking-wider">Garage</span></a><a class="flex flex-col items-center justify-center min-h-[48px] min-w-[48px] py-1 text-on-surface-variant hover:text-primary transition-all duration-200" data-path="pack-comms" href="#"><span class="material-symbols-outlined text-[24px]">groups_3</span><span class="font-label-caption text-label-caption uppercase mt-0.5 tracking-wider">Social</span></a><a class="flex flex-col items-center justify-center min-h-[48px] min-w-[48px] py-1 text-on-surface-variant hover:text-primary transition-all duration-200" data-path="hud-settings" href="#"><span class="material-symbols-outlined text-[24px]">tune</span><span class="font-label-caption text-label-caption uppercase mt-0.5 tracking-wider">Settings</span></a></div></nav></body></html>