MotorSignal-App/docs/stitch-designs/code/32_launch_curve_analysis.html

572 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" name="viewport"/>
<title>MOTORSIGNAL HUD - Launch Telemetry</title>
<!-- Material Symbols Outlined -->
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<!-- Fonts: Space Grotesk, JetBrains Mono, Inter -->
<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:ital,wght@0,400;0,500;0,600;0,700;1,600&amp;family=Space+Grotesk:wght@500;600;700&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"/>
<!-- Tailwind CSS -->
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<!-- Theme Configuration verbatim -->
<script id="tailwind-config">
tailwind.config = {
darkMode: "class",
theme: {
extend: {
"colors": {
"primary": "#c3f5ff",
"on-error": "#690005",
"tertiary-fixed-dim": "#d0bcff",
"on-secondary-container": "#cdd7ff",
"on-primary-fixed": "#001f24",
"on-error-container": "#ffdad6",
"surface": "#101419",
"on-secondary-fixed": "#00174b",
"primary-fixed-dim": "#00daf3",
"on-tertiary-fixed": "#23005c",
"on-surface": "#e0e2ea",
"tertiary-fixed": "#e9ddff",
"surface-container-highest": "#32353b",
"inverse-primary": "#006875",
"surface-container": "#1d2025",
"on-tertiary": "#3c0091",
"secondary-fixed-dim": "#b4c5ff",
"on-tertiary-container": "#6834d1",
"on-primary": "#00363d",
"tertiary-container": "#d9c8ff",
"on-background": "#e0e2ea",
"surface-container-high": "#272a30",
"surface-variant": "#32353b",
"secondary-fixed": "#dbe1ff",
"secondary": "#b4c5ff",
"primary-fixed": "#9cf0ff",
"inverse-surface": "#e0e2ea",
"outline": "#849396",
"on-primary-container": "#00626e",
"error-container": "#93000a",
"surface-tint": "#00daf3",
"background": "#101419",
"inverse-on-surface": "#2d3036",
"surface-container-low": "#181c21",
"on-tertiary-fixed-variant": "#5516be",
"on-surface-variant": "#bac9cc",
"on-primary-fixed-variant": "#004f58",
"surface-dim": "#101419",
"primary-container": "#00e5ff",
"outline-variant": "#3b494c",
"on-secondary-fixed-variant": "#003ea8",
"surface-container-lowest": "#0b0e13",
"surface-bright": "#36393f",
"error": "#ffb4ab",
"tertiary": "#f2e9ff",
"secondary-container": "#0053db",
"on-secondary": "#002a78"
},
"borderRadius": {
"DEFAULT": "0.25rem",
"lg": "0.5rem",
"xl": "0.75rem",
"full": "9999px"
},
"spacing": {
"space-xl": "2rem",
"space-lg": "1.5rem",
"gutter-lg": "1.5rem",
"space-md": "1rem",
"margin-lg": "2rem",
"margin": "1rem",
"space-xs": "0.25rem",
"space-sm": "0.5rem",
"gutter": "1rem"
},
"fontFamily": {
"display-hero": ["Space Grotesk"],
"label-data": ["JetBrains Mono"],
"headline-sm": ["Space Grotesk"],
"telemetry-metric-lg-mobile": ["JetBrains Mono"],
"telemetry-metric-md": ["JetBrains Mono"],
"telemetry-metric-lg": ["JetBrains Mono"],
"body-md": ["Inter"],
"label-caption": ["Inter"],
"headline-lg": ["Space Grotesk"],
"headline-md": ["Space Grotesk"],
"body-lg": ["Inter"],
"display-hero-mobile": ["Space Grotesk"]
},
"fontSize": {
"display-hero": ["56px", {"lineHeight": "60px", "letterSpacing": "-0.03em", "fontWeight": "700"}],
"label-data": ["12px", {"lineHeight": "16px", "letterSpacing": "0.08em", "fontWeight": "600"}],
"headline-sm": ["20px", {"lineHeight": "28px", "fontWeight": "600"}],
"telemetry-metric-lg-mobile": ["36px", {"lineHeight": "36px", "letterSpacing": "-0.03em", "fontWeight": "700"}],
"telemetry-metric-md": ["28px", {"lineHeight": "32px", "letterSpacing": "-0.02em", "fontWeight": "600"}],
"telemetry-metric-lg": ["48px", {"lineHeight": "48px", "letterSpacing": "-0.04em", "fontWeight": "700"}],
"body-md": ["14px", {"lineHeight": "20px", "fontWeight": "400"}],
"label-caption": ["11px", {"lineHeight": "14px", "letterSpacing": "0.05em", "fontWeight": "600"}],
"headline-lg": ["32px", {"lineHeight": "40px", "letterSpacing": "-0.02em", "fontWeight": "700"}],
"headline-md": ["24px", {"lineHeight": "32px", "letterSpacing": "-0.01em", "fontWeight": "600"}],
"body-lg": ["16px", {"lineHeight": "24px", "fontWeight": "500"}],
"display-hero-mobile": ["40px", {"lineHeight": "44px", "letterSpacing": "-0.02em", "fontWeight": "700"}]
}
}
}
}
</script>
<style>
.material-symbols-outlined {
font-family: 'Material Symbols Outlined';
font-weight: normal;
font-style: normal;
font-size: 20px;
line-height: 1;
display: inline-block;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
}
/* Hardware tactical styling */
body {
background-color: #070A0F;
color: #e0e2ea;
-webkit-font-smoothing: antialiased;
user-select: none;
touch-action: manipulation;
}
.neon-cyan-glow {
box-shadow: 0 0 16px rgba(0, 229, 255, 0.28);
}
.neon-gold-glow {
box-shadow: 0 0 12px rgba(245, 158, 11, 0.3);
}
.tactical-border {
border: 1px solid #1E293B;
}
.tactical-grid-bg {
background-size: 20px 20px;
background-image:
linear-gradient(to right, rgba(30, 41, 59, 0.2) 1px, transparent 1px),
linear-gradient(to bottom, rgba(30, 41, 59, 0.2) 1px, transparent 1px);
}
</style>
<style>
body {
min-height: max(884px, 100dvh);
}
</style>
</head>
<body class="min-h-screen bg-[#070A0F] text-on-surface antialiased flex flex-col justify-between pb-24">
<!-- ================= TOP APP BAR (Shared Component JSON Blueprint) ================= -->
<header class="fixed top-0 left-0 w-full z-50 flex justify-between items-center px-gutter h-14 bg-surface-container-lowest border-b border-outline-variant">
<div class="flex items-center space-x-2">
<button class="w-10 h-10 flex items-center justify-center rounded-lg text-primary-container hover:bg-surface-container active:scale-95 duration-100 ease-out" type="button">
<span class="material-symbols-outlined text-primary-container" data-icon="arrow_back">arrow_back</span>
</button>
<div class="flex items-center space-x-1.5">
<span class="text-headline-sm font-headline-sm font-bold tracking-wider text-primary-container">MOTORSIGNAL HUD</span>
<span class="inline-flex items-center px-1.5 py-0.5 rounded bg-surface-container-high border border-outline-variant font-label-data text-label-data text-primary-container">
<span class="w-1.5 h-1.5 rounded-full bg-primary-container animate-pulse mr-1"></span>
20Hz GNSS
</span>
</div>
</div>
<div class="flex items-center space-x-3 font-label-data text-label-data text-on-surface-variant">
<div class="flex items-center space-x-1 text-primary-container">
<span class="material-symbols-outlined text-base" data-icon="battery_charging_full" data-weight="fill" style="font-variation-settings: 'FILL' 1;">battery_charging_full</span>
<span>98%</span>
</div>
<span class="text-outline">08:42</span>
<button class="w-8 h-8 flex items-center justify-center rounded text-on-surface-variant hover:text-primary-container" type="button">
<span class="material-symbols-outlined" data-icon="sensors">sensors</span>
</button>
</div>
</header>
<!-- ================= MAIN CONTENT CANVA / COCKPIT TELEMETRY ================= -->
<main class="w-full max-w-md mx-auto pt-16 px-3 flex-1 flex flex-col space-y-3">
<!-- Run Title & Session Timestamp Header Banner -->
<section class="mt-2 bg-[#0D131F] rounded-xl tactical-border p-3.5 relative overflow-hidden">
<div class="absolute -right-6 -bottom-6 w-24 h-24 bg-primary-container/5 rounded-full blur-xl pointer-events-none"></div>
<div class="flex justify-between items-start">
<div>
<div class="flex items-center space-x-2">
<h1 class="text-headline-sm font-headline-sm font-bold tracking-tight text-white flex items-center gap-1.5">
<span>LAUNCH RUN #04 ANALYSIS</span>
</h1>
</div>
<p class="font-label-data text-label-data text-on-surface-variant mt-0.5 flex items-center gap-1">
<span class="material-symbols-outlined text-xs text-primary-container" data-icon="schedule">schedule</span>
<span>Today 08:42 AM • Weather Sys Sync</span>
</p>
</div>
<span class="px-2 py-1 rounded bg-[#070A0F] tactical-border text-primary font-label-data text-[10px] tracking-wider uppercase font-semibold">
SESSION #14
</span>
</div>
<!-- Validation & Trophy Badges Cluster -->
<div class="mt-3 flex flex-wrap gap-1.5 items-center">
<!-- Gold PR Trophy Badge -->
<div class="flex items-center space-x-1.5 px-2.5 py-1 rounded-lg bg-amber-500/15 border border-amber-400 text-amber-300 font-label-data text-label-caption font-bold neon-gold-glow">
<span class="text-sm">🏆</span>
<span>NEW ALL-TIME PR</span>
</div>
<!-- SAE Draggy Slope Verified Badge -->
<div class="flex items-center space-x-1 px-2.5 py-1 rounded-lg bg-emerald-500/15 border border-emerald-400/80 text-emerald-400 font-label-data text-label-caption font-semibold">
<span class="material-symbols-outlined text-xs" data-icon="check_circle">check_circle</span>
<span>SAE SLOPE: -0.2% VALID</span>
</div>
</div>
<!-- Vehicle & Launch Parameters Tag -->
<div class="mt-2 pt-2 border-t border-[#1E293B] flex items-center justify-between font-label-data text-[11px] text-on-surface-variant">
<span class="text-primary-fixed truncate">2024 Ducati Panigale V4 S • Launch Control Level 2</span>
<span class="text-outline shrink-0 ml-1">EBC 1 | DTC 2</span>
</div>
</section>
<!-- ================= TELEMETRY DUAL-AXIS CHART ================= -->
<section class="bg-[#0D131F] rounded-xl tactical-border p-3 relative overflow-hidden flex flex-col">
<!-- Card Top Bar: Title & Legend -->
<div class="flex items-center justify-between pb-2 border-b border-[#1E293B]">
<div class="flex items-center space-x-1.5">
<span class="material-symbols-outlined text-primary-container text-base" data-icon="show_chart">show_chart</span>
<span class="font-label-data text-label-data uppercase tracking-wider text-white">VELOCITY &amp; LONGITUDINAL G-FORCE TRACE</span>
</div>
<span class="font-label-data text-[10px] text-primary-container bg-primary-container/10 px-1.5 py-0.5 rounded border border-primary-container/30">
20Hz DUAL LOG
</span>
</div>
<!-- Legend & Axis Indicator -->
<div class="flex justify-between items-center py-1.5 font-label-data text-[11px]">
<div class="flex items-center space-x-3">
<span class="flex items-center space-x-1 text-primary-container font-semibold">
<span class="w-2.5 h-1 bg-primary-container rounded-sm inline-block shadow-[0_0_8px_#00e5ff]"></span>
<span>SPEED (MPH)</span>
</span>
<span class="flex items-center space-x-1 text-amber-400 font-semibold">
<span class="w-2.5 h-1 bg-amber-400 rounded-sm inline-block shadow-[0_0_8px_#f59e0b]"></span>
<span>ACCEL G-FORCE</span>
</span>
</div>
<span class="text-outline text-[10px]">PEAK: +1.18G</span>
</div>
<!-- Interactive SVG Chart Canvas Area -->
<div class="relative w-full h-52 bg-[#070A0F] tactical-border rounded-lg tactical-grid-bg overflow-hidden my-1">
<!-- Y-Axis Labels Left (MPH) -->
<div class="absolute left-1.5 top-1 bottom-6 flex flex-col justify-between font-label-data text-[9px] text-primary-container/80 pointer-events-none z-10 font-bold">
<span>140</span>
<span>100</span>
<span>60</span>
<span>20</span>
<span>0</span>
</div>
<!-- Y-Axis Labels Right (G-Force) -->
<div class="absolute right-1.5 top-1 bottom-6 flex flex-col justify-between font-label-data text-[9px] text-amber-400/90 pointer-events-none z-10 font-bold text-right">
<span>+1.4G</span>
<span>+1.0G</span>
<span>+0.6G</span>
<span>+0.2G</span>
<span>-0.2G</span>
</div>
<!-- SVG Trace Graph -->
<svg class="w-full h-full" preserveaspectratio="none" viewbox="0 0 380 208">
<defs>
<!-- Cyan gradient fill under Speed -->
<lineargradient id="speedGrad" x1="0%" x2="0%" y1="0%" y2="100%">
<stop offset="0%" stop-color="#00e5ff" stop-opacity="0.25"></stop>
<stop offset="100%" stop-color="#00e5ff" stop-opacity="0.0"></stop>
</lineargradient>
<!-- Amber gradient fill under G-force -->
<lineargradient id="gGrad" x1="0%" x2="0%" y1="0%" y2="100%">
<stop offset="0%" stop-color="#f59e0b" stop-opacity="0.2"></stop>
<stop offset="100%" stop-color="#f59e0b" stop-opacity="0.0"></stop>
</lineargradient>
</defs>
<!-- Horizontal Reference Gridlines -->
<line stroke="#1E293B" stroke-dasharray="3,3" stroke-width="0.8" x1="28" x2="352" y1="20" y2="20"></line>
<line stroke="#1E293B" stroke-dasharray="3,3" stroke-width="0.8" x1="28" x2="352" y1="60" y2="60"></line>
<line stroke="#1E293B" stroke-dasharray="3,3" stroke-width="0.8" x1="28" x2="352" y1="100" y2="100"></line>
<line stroke="#1E293B" stroke-dasharray="3,3" stroke-width="0.8" x1="28" x2="352" y1="140" y2="140"></line>
<line stroke="#1E293B" stroke-width="1" x1="28" x2="352" y1="180" y2="180"></line>
<!-- Longitudinal G-Force Area & Curve (Amber) -->
<!-- Launch peak spike at +1.18G, settling through shifts -->
<path d="M 30,175
C 36,45 44,28 52,32
C 65,38 78,85 92,90
C 100,95 106,120 114,80
C 126,86 148,110 170,115
C 178,122 184,136 194,104
C 210,112 245,130 268,134
C 278,140 286,152 296,126
C 315,132 342,145 352,148
L 352,180 L 30,180 Z" fill="url(#gGrad)"></path>
<path d="M 30,175
C 36,45 44,28 52,32
C 65,38 78,85 92,90
C 100,95 106,120 114,80
C 126,86 148,110 170,115
C 178,122 184,136 194,104
C 210,112 245,130 268,134
C 278,140 286,152 296,126
C 315,132 342,145 352,148" fill="none" stroke="#f59e0b" stroke-linecap="round" stroke-width="2.2"></path>
<!-- Speed Velocity Area & Curve (Cyan MPH) -->
<!-- Accelerating 0 to 135 MPH over 11.2s -->
<path d="M 30,180
C 45,168 70,140 102,110
C 135,82 175,64 215,48
C 260,34 310,22 352,16
L 352,180 Z" fill="url(#speedGrad)"></path>
<path d="M 30,180
C 45,168 70,140 102,110
C 135,82 175,64 215,48
C 260,34 310,22 352,16" fill="none" stroke="#00e5ff" stroke-linecap="round" stroke-width="2.5"></path>
<!-- Interactive Scrubber Cursor Line at T+3.28s (60 MPH transition) -->
<line stroke="#00e5ff" stroke-dasharray="2,2" stroke-width="1.5" x1="126" x2="126" y1="10" y2="182"></line>
<!-- Scrubber Intersect Dots -->
<circle cx="126" cy="95" fill="#00e5ff" r="4.5" stroke="#070A0F" stroke-width="1.5"></circle>
<circle cx="126" cy="98" fill="#f59e0b" r="4.5" stroke="#070A0F" stroke-width="1.5"></circle>
<!-- Gear Shift Vertical Markers -->
<line stroke="#3b494c" stroke-width="1" x1="108" x2="108" y1="168" y2="182"></line>
<line stroke="#3b494c" stroke-width="1" x1="188" x2="188" y1="168" y2="182"></line>
<line stroke="#3b494c" stroke-width="1" x1="290" x2="290" y1="168" y2="182"></line>
</svg>
<!-- Floating Scrubber Tooltip Overlay -->
<div class="absolute left-20 top-3 bg-[#0D131FE6] backdrop-blur-md px-2.5 py-1.5 rounded-lg border border-primary-container neon-cyan-glow z-20 pointer-events-none">
<div class="flex items-center space-x-1.5 font-label-data text-label-data font-bold text-white tracking-tight">
<span class="text-primary-container">T+3.28s</span>
<span class="text-outline">|</span>
<span class="text-primary">60.0 MPH</span>
<span class="text-outline">|</span>
<span class="text-amber-400">+0.82G</span>
<span class="text-outline">|</span>
<span class="px-1 bg-surface-container-high rounded text-[10px] text-white">G2</span>
</div>
</div>
<!-- Gear Shift Indicator Labels along Bottom Track -->
<div class="absolute left-7 right-7 bottom-0.5 flex justify-between font-label-data text-[10px] font-bold text-outline">
<span class="text-primary-container">1st (Launch)</span>
<span class="text-on-surface-variant">2nd Shift</span>
<span class="text-on-surface-variant">3rd Shift</span>
<span class="text-on-surface-variant">4th Gear</span>
</div>
</div>
<!-- Scrub Timeline Time Axis labels -->
<div class="flex justify-between items-center px-6 pt-1 font-label-data text-[10px] text-outline">
<span>0.0s</span>
<span>2.5s</span>
<span>5.0s</span>
<span>7.5s</span>
<span>10.0s</span>
<span>11.2s</span>
</div>
</section>
<!-- ================= MILESTONE SPLITS TABLE / DATA GRID ================= -->
<section class="bg-[#0D131F] rounded-xl tactical-border p-3 flex flex-col space-y-2.5">
<div class="flex justify-between items-center border-b border-[#1E293B] pb-2">
<div class="flex items-center space-x-1.5">
<span class="material-symbols-outlined text-primary-container text-base" data-icon="timer">timer</span>
<span class="font-label-data text-label-data uppercase tracking-wider text-white">MILESTONE ACCELERATION SPLITS</span>
</div>
<div class="flex items-center space-x-1 font-label-data text-[10px] text-emerald-400 bg-emerald-500/10 px-2 py-0.5 rounded border border-emerald-500/30">
<span class="material-symbols-outlined text-xs" data-icon="verified">verified</span>
<span>100% VALIDATED</span>
</div>
</div>
<!-- Splits Grid List -->
<div class="grid grid-cols-1 gap-1.5">
<!-- 0-30 MPH Split -->
<div class="flex items-center justify-between p-2.5 rounded-lg bg-[#070A0F] tactical-border">
<div class="flex items-center space-x-2.5">
<span class="w-1.5 h-6 bg-outline rounded-full"></span>
<div>
<span class="font-headline-sm text-sm font-bold text-white tracking-wider block">0 - 30 MPH</span>
<span class="font-label-data text-[10px] text-outline">60FT: 1.62s • PEAK: +1.18G</span>
</div>
</div>
<div class="text-right">
<span class="font-label-data text-telemetry-metric-md text-white font-bold leading-none">1.41<span class="text-xs text-outline font-normal ml-0.5">s</span></span>
<span class="block font-label-data text-[10px] text-on-surface-variant">-0.04s vs avg</span>
</div>
</div>
<!-- 0-60 MPH Split (Highlight / PR) -->
<div class="flex items-center justify-between p-2.5 rounded-lg bg-surface-container-high border-2 border-primary-container neon-cyan-glow relative overflow-hidden">
<div class="absolute -right-4 -top-4 w-16 h-16 bg-primary-container/10 rounded-full blur-md"></div>
<div class="flex items-center space-x-2.5">
<span class="w-1.5 h-8 bg-primary-container rounded-full"></span>
<div>
<div class="flex items-center space-x-1.5">
<span class="font-headline-sm text-base font-bold text-white tracking-wider">0 - 60 MPH</span>
<span class="px-1.5 py-0.5 rounded bg-amber-400/20 text-amber-300 font-label-data text-[10px] font-bold border border-amber-400/40">
★ NEW PR
</span>
</div>
<span class="font-label-data text-[11px] text-primary font-semibold">SAE CORR: 3.25s (-0.14s)</span>
</div>
</div>
<div class="text-right">
<span class="font-label-data text-telemetry-metric-lg-mobile text-primary-container font-extrabold leading-none">3.28<span class="text-sm font-normal ml-0.5 text-primary">s</span></span>
<span class="block font-label-data text-[10px] text-emerald-400 font-semibold">BEST SECTOR</span>
</div>
</div>
<!-- 0-100 MPH Split -->
<div class="flex items-center justify-between p-2.5 rounded-lg bg-[#070A0F] tactical-border">
<div class="flex items-center space-x-2.5">
<span class="w-1.5 h-6 bg-outline rounded-full"></span>
<div>
<span class="font-headline-sm text-sm font-bold text-white tracking-wider block">0 - 100 MPH</span>
<span class="font-label-data text-[10px] text-outline">SLOPE: -0.18% • 330FT: 4.88s</span>
</div>
</div>
<div class="text-right">
<span class="font-label-data text-telemetry-metric-md text-white font-bold leading-none">7.41<span class="text-xs text-outline font-normal ml-0.5">s</span></span>
<span class="block font-label-data text-[10px] text-on-surface-variant">+0.02s vs PR</span>
</div>
</div>
<!-- 1/8 Mile Split -->
<div class="flex items-center justify-between p-2.5 rounded-lg bg-[#070A0F] tactical-border">
<div class="flex items-center space-x-2.5">
<span class="w-1.5 h-6 bg-outline rounded-full"></span>
<div>
<span class="font-headline-sm text-sm font-bold text-white tracking-wider block">1/8 MILE (660 FT)</span>
<span class="font-label-data text-[10px] text-primary">TRAP VELOCITY: 104.8 MPH</span>
</div>
</div>
<div class="text-right">
<span class="font-label-data text-telemetry-metric-md text-white font-bold leading-none">7.12<span class="text-xs text-outline font-normal ml-0.5">s</span></span>
<span class="block font-label-data text-[10px] text-on-surface-variant">104.8 MPH</span>
</div>
</div>
<!-- 1/4 Mile Split -->
<div class="flex items-center justify-between p-2.5 rounded-lg bg-[#070A0F] border border-primary-container/40">
<div class="flex items-center space-x-2.5">
<span class="w-1.5 h-6 bg-amber-400 rounded-full"></span>
<div>
<div class="flex items-center space-x-1.5">
<span class="font-headline-sm text-sm font-bold text-white tracking-wider">1/4 MILE (1320 FT)</span>
<span class="px-1.5 py-0.2 rounded bg-primary-container/10 text-primary-container font-label-data text-[9px] border border-primary-container/30">
SUB-11S VERIFIED
</span>
</div>
<span class="font-label-data text-[10px] text-amber-300">TRAP VELOCITY: 131.4 MPH</span>
</div>
</div>
<div class="text-right">
<span class="font-label-data text-telemetry-metric-md text-primary-container font-bold leading-none">10.92<span class="text-xs text-outline font-normal ml-0.5">s</span></span>
<span class="block font-label-data text-[10px] text-amber-400 font-semibold">131.4 MPH</span>
</div>
</div>
</div>
<!-- NHRA Roll-Out Standard Bar Toggle -->
<div class="pt-1 flex items-center justify-between px-1">
<div class="flex items-center space-x-2">
<div class="w-4 h-4 rounded bg-primary-container/20 border border-primary-container flex items-center justify-center">
<span class="material-symbols-outlined text-xs text-primary-container" data-icon="check">check</span>
</div>
<span class="font-label-data text-[11px] text-on-surface-variant">Rollout 1ft: 0.28s applied (NHRA standard)</span>
</div>
<span class="font-label-data text-[10px] text-primary-container cursor-pointer hover:underline">Configure</span>
</div>
</section>
<!-- ================= ATMOSPHERIC & ENVIRONMENTAL CARD ================= -->
<section class="bg-[#0D131F] rounded-xl tactical-border p-3">
<div class="flex items-center justify-between border-b border-[#1E293B] pb-2 mb-2.5">
<div class="flex items-center space-x-1.5">
<span class="material-symbols-outlined text-primary-container text-base" data-icon="thermostat">thermostat</span>
<span class="font-label-data text-label-data uppercase tracking-wider text-white">ENVIRONMENTAL &amp; SURFACE GRIP</span>
</div>
<span class="font-label-data text-[10px] text-outline">AUTO STATION SYNC</span>
</div>
<div class="grid grid-cols-2 gap-2 font-label-data">
<!-- Weather Telemetry Column -->
<div class="p-2 rounded-lg bg-[#070A0F] tactical-border flex flex-col justify-between">
<div class="text-[10px] text-outline flex items-center justify-between">
<span>DENSITY ALTITUDE</span>
<span class="text-primary-container font-bold">+420 FT</span>
</div>
<div class="my-1.5 flex items-baseline space-x-1">
<span class="text-lg font-bold text-white">74°F</span>
<span class="text-[10px] text-outline">/ 29.92 inHg</span>
</div>
<div class="text-[10px] text-on-surface-variant flex justify-between border-t border-[#1E293B] pt-1">
<span>HUMIDITY: 42%</span>
<span class="text-primary">BARO: 98.8%</span>
</div>
</div>
<!-- Track Surface Telemetry Column -->
<div class="p-2 rounded-lg bg-[#070A0F] tactical-border flex flex-col justify-between">
<div class="text-[10px] text-outline flex items-center justify-between">
<span>TRACK SURFACE</span>
<span class="text-emerald-400 font-bold">OPTIMAL</span>
</div>
<div class="my-1.5 flex items-baseline space-x-1">
<span class="text-lg font-bold text-white">94%</span>
<span class="text-[10px] text-emerald-400">Grip Index</span>
</div>
<div class="text-[10px] text-on-surface-variant flex justify-between border-t border-[#1E293B] pt-1">
<span>TEMP: 88°F</span>
<span class="text-outline">DRY ASPHALT</span>
</div>
</div>
</div>
</section>
<!-- ================= BOTTOM ACTION BUTTONS (Tactile Cockpit Triggers) ================= -->
<div class="pt-1 pb-2 grid grid-cols-2 gap-2.5">
<!-- Secondary Cockpit Action: Compare Runs -->
<button class="h-12 min-h-[48px] px-3 rounded-xl bg-[#0D131F] tactical-border text-white font-label-data text-label-data font-semibold flex items-center justify-center space-x-2 hover:border-primary-container hover:bg-[#141C2E] active:scale-95 duration-100 ease-out" type="button">
<span class="material-symbols-outlined text-primary-container" data-icon="compare_arrows">compare_arrows</span>
<span>Compare Runs</span>
</button>
<!-- Primary Cockpit Action: Export 20Hz CSV -->
<button class="h-12 min-h-[48px] px-3 rounded-xl bg-primary-container text-[#070A0F] font-label-data text-label-data font-bold flex items-center justify-center space-x-2 neon-cyan-glow hover:bg-[#00B8CC] active:scale-95 duration-100 ease-out" type="button">
<span class="material-symbols-outlined text-[#070A0F] font-bold" data-icon="download">download</span>
<span>Export 20Hz CSV</span>
</button>
</div>
</main>
<!-- ================= BOTTOM NAVBAR (Shared Component JSON Blueprint) ================= -->
<!-- Semantic Mapping Active: Page is "LAUNCH RUN #04 ANALYSIS" -> maps to "Activity" -->
<nav class="fixed bottom-0 left-0 w-full z-50 flex justify-around items-center px-space-xs py-space-xs bg-surface-container-lowest border-t border-outline-variant">
<!-- Tab 1: Dash (Inactive) -->
<button class="flex flex-col items-center justify-center text-on-surface-variant px-2 py-1 min-h-[48px] hover:bg-surface-container-low hover:text-primary-fixed active:scale-95 duration-100 ease-out" type="button">
<span class="material-symbols-outlined" data-icon="speed">speed</span>
<span class="font-label-caption text-label-caption mt-0.5">Dash</span>
</button>
<!-- Tab 2: Map (Inactive) -->
<button class="flex flex-col items-center justify-center text-on-surface-variant px-2 py-1 min-h-[48px] hover:bg-surface-container-low hover:text-primary-fixed active:scale-95 duration-100 ease-out" type="button">
<span class="material-symbols-outlined" data-icon="navigation">navigation</span>
<span class="font-label-caption text-label-caption mt-0.5">Map</span>
</button>
<!-- Tab 3: Activity (ACTIVE STATE - Telemetry Analysis Screen) -->
<button class="flex flex-col items-center justify-center bg-surface-container-high text-primary-container rounded-lg px-2 py-1 min-h-[48px] active:scale-95 duration-100 ease-out" type="button">
<span class="material-symbols-outlined" data-icon="analytics" data-weight="fill" style="font-variation-settings: 'FILL' 1;">analytics</span>
<span class="font-label-caption text-label-caption mt-0.5 font-bold">Activity</span>
</button>
<!-- Tab 4: Garage (Inactive) -->
<button class="flex flex-col items-center justify-center text-on-surface-variant px-2 py-1 min-h-[48px] hover:bg-surface-container-low hover:text-primary-fixed active:scale-95 duration-100 ease-out" type="button">
<span class="material-symbols-outlined" data-icon="two_wheeler">two_wheeler</span>
<span class="font-label-caption text-label-caption mt-0.5">Garage</span>
</button>
<!-- Tab 5: Settings (Inactive) -->
<button class="flex flex-col items-center justify-center text-on-surface-variant px-2 py-1 min-h-[48px] hover:bg-surface-container-low hover:text-primary-fixed active:scale-95 duration-100 ease-out" type="button">
<span class="material-symbols-outlined" data-icon="settings">settings</span>
<span class="font-label-caption text-label-caption mt-0.5">Settings</span>
</button>
</nav>
<!-- Lightweight inline interaction script for scrubber feedback -->
<script>
document.addEventListener('DOMContentLoaded', () => {
// Tactical button feedback sound / haptic simulator
const buttons = document.querySelectorAll('button');
buttons.forEach(btn => {
btn.addEventListener('click', () => {
if (navigator.vibrate) {
navigator.vibrate(15);
}
});
});
});
</script>
</body></html>