MotorSignal-App/docs/stitch-designs/code/44_club_founder_overview.html

398 lines
36 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_dashboard" name="shell-type"/><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" rel="preconnect"/><link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect"/><link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&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: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":{"primary-fixed":"#9cf0ff","on-primary":"#00363d","surface-container":"#1d2025","inverse-surface":"#e0e2ea","background":"#101419","on-background":"#e0e2ea","on-secondary":"#002a78","on-secondary-fixed-variant":"#003ea8","secondary-container":"#0053db","surface":"#101419","error-container":"#93000a","surface-variant":"#32353b","surface-bright":"#36393f","on-surface-variant":"#bac9cc","on-tertiary":"#3c0091","surface-container-lowest":"#0b0e13","on-tertiary-container":"#6834d1","tertiary":"#f2e9ff","secondary-fixed-dim":"#b4c5ff","inverse-on-surface":"#2d3036","surface-container-low":"#181c21","on-tertiary-fixed-variant":"#5516be","error":"#ffb4ab","on-secondary-container":"#cdd7ff","on-primary-fixed-variant":"#004f58","inverse-primary":"#006875","on-secondary-fixed":"#00174b","surface-container-highest":"#32353b","surface-dim":"#101419","on-error":"#690005","on-tertiary-fixed":"#23005c","on-error-container":"#ffdad6","primary-container":"#00e5ff","on-surface":"#e0e2ea","tertiary-fixed":"#e9ddff","tertiary-fixed-dim":"#d0bcff","surface-tint":"#00daf3","primary":"#c3f5ff","tertiary-container":"#d9c8ff","surface-container-high":"#272a30","outline-variant":"#3b494c","on-primary-container":"#00626e","on-primary-fixed":"#001f24","outline":"#849396","primary-fixed-dim":"#00daf3","secondary":"#b4c5ff","secondary-fixed":"#dbe1ff"},"borderRadius":{"DEFAULT":"0.25rem","lg":"0.5rem","xl":"0.75rem","full":"9999px"},"spacing":{"space-xs":"0.25rem","gutter-lg":"1.5rem","gutter":"1rem","margin-lg":"2rem","margin":"1rem","space-sm":"0.5rem","space-lg":"1.5rem","space-md":"1rem","space-xl":"2rem"},"fontFamily":{"headline-md":["Space Grotesk"],"display-hero":["Space Grotesk"],"telemetry-metric-md":["JetBrains Mono"],"label-caption":["Inter"],"headline-sm":["Space Grotesk"],"display-hero-mobile":["Space Grotesk"],"headline-lg":["Space Grotesk"],"telemetry-metric-lg":["JetBrains Mono"],"body-md":["Inter"],"telemetry-metric-lg-mobile":["JetBrains Mono"],"label-data":["JetBrains Mono"],"body-lg":["Inter"]},"fontSize":{"headline-md":["24px",{"lineHeight":"32px","letterSpacing":"-0.01em","fontWeight":"600"}],"display-hero":["56px",{"lineHeight":"60px","letterSpacing":"-0.03em","fontWeight":"700"}],"telemetry-metric-md":["28px",{"lineHeight":"32px","letterSpacing":"-0.02em","fontWeight":"600"}],"label-caption":["11px",{"lineHeight":"14px","letterSpacing":"0.05em","fontWeight":"600"}],"headline-sm":["20px",{"lineHeight":"28px","fontWeight":"600"}],"display-hero-mobile":["40px",{"lineHeight":"44px","letterSpacing":"-0.02em","fontWeight":"700"}],"headline-lg":["32px",{"lineHeight":"40px","letterSpacing":"-0.02em","fontWeight":"700"}],"telemetry-metric-lg":["48px",{"lineHeight":"48px","letterSpacing":"-0.04em","fontWeight":"700"}],"body-md":["14px",{"lineHeight":"20px","fontWeight":"400"}],"telemetry-metric-lg-mobile":["36px",{"lineHeight":"36px","letterSpacing":"-0.03em","fontWeight":"700"}],"label-data":["12px",{"lineHeight":"16px","letterSpacing":"0.08em","fontWeight":"600"}],"body-lg":["16px",{"lineHeight":"24px","fontWeight":"500"}]}}}}</script></head><body class="bg-surface font-body-md text-on-surface antialiased selection:bg-primary-container selection:text-on-primary-container"><aside class="fixed left-0 top-0 h-full w-72 bg-surface-container-lowest z-50 flex flex-col justify-between shadow-[0_1px_8px_rgba(0,0,0,0.4)]"><div class="flex flex-col"><div class="h-20 px-space-lg flex items-center justify-between bg-surface-container-low"><div class="flex items-center gap-space-sm"><div class="w-2.5 h-2.5 rounded-full bg-primary-container animate-pulse"></div><div class="flex flex-col"><span class="font-label-data text-label-data text-primary uppercase">HQ NODE 01</span><span class="font-label-caption text-label-caption text-on-surface-variant uppercase">OFFICER ACCESS</span></div></div><div class="px-space-xs py-0.5 rounded bg-surface-container-high text-on-surface-variant font-label-data text-label-data">SYS.ON</div></div><div class="px-space-md pt-space-lg pb-space-sm"><span class="px-space-sm font-label-data text-label-data uppercase text-outline">Operational Modules</span></div><nav class="flex flex-col gap-space-xs px-space-md" data-active-classes="bg-primary-container text-on-primary-container font-headline-sm"><a aria-current="page" class="flex items-center justify-between min-h-[48px] px-space-md rounded-lg transition-all bg-primary-container text-on-primary-container font-headline-sm" data-path="overview" href="#"><div class="flex items-center gap-space-md"><span class="material-symbols-outlined text-outline">grid_view</span><span class="font-headline-sm text-headline-sm text-sm tracking-wide uppercase">Overview</span></div></a><a class="flex items-center justify-between min-h-[48px] px-space-md rounded-lg text-on-surface-variant hover:bg-surface-container-high hover:text-on-surface transition-all" data-path="branding" href="#"><div class="flex items-center gap-space-md"><span class="material-symbols-outlined text-outline">verified</span><span class="font-headline-sm text-headline-sm text-sm tracking-wide uppercase">Branding</span></div></a><a class="flex items-center justify-between min-h-[48px] px-space-md rounded-lg text-on-surface-variant hover:bg-surface-container-high hover:text-on-surface transition-all" data-path="applications" href="#"><div class="flex items-center gap-space-md"><span class="material-symbols-outlined text-outline">assignment_ind</span><span class="font-headline-sm text-headline-sm text-sm tracking-wide uppercase">Applications</span></div><span class="px-space-sm py-0.5 rounded-full bg-primary-container text-on-primary-container font-label-data text-label-data font-bold">4</span></a><a class="flex items-center justify-between min-h-[48px] px-space-md rounded-lg text-on-surface-variant hover:bg-surface-container-high hover:text-on-surface transition-all" data-path="roles-ranks" href="#"><div class="flex items-center gap-space-md"><span class="material-symbols-outlined text-outline">shield_person</span><span class="font-headline-sm text-headline-sm text-sm tracking-wide uppercase">Roles &amp; Ranks</span></div></a><a class="flex items-center justify-between min-h-[48px] px-space-md rounded-lg text-on-surface-variant hover:bg-surface-container-high hover:text-on-surface transition-all" data-path="scheduled-rides" href="#"><div class="flex items-center gap-space-md"><span class="material-symbols-outlined text-outline">route</span><span class="font-headline-sm text-headline-sm text-sm tracking-wide uppercase">Scheduled Rides</span></div></a><a class="flex items-center justify-between min-h-[48px] px-space-md rounded-lg text-on-surface-variant hover:bg-surface-container-high hover:text-on-surface transition-all" data-path="governance-settings" href="#"><div class="flex items-center gap-space-md"><span class="material-symbols-outlined text-outline">tune</span><span class="font-headline-sm text-headline-sm text-sm tracking-wide uppercase">Governance / Settings</span></div></a></nav></div><div class="p-space-md flex flex-col gap-space-md bg-surface-container-lowest"><div class="p-space-md rounded-xl bg-surface-container-low flex flex-col gap-space-xs"><div class="flex items-center justify-between"><span class="font-label-data text-label-data text-on-surface-variant uppercase">MESH LATENCY</span><span class="font-label-data text-label-data text-primary">14 MS</span></div><div class="flex items-center justify-between"><span class="font-label-data text-label-data text-on-surface-variant uppercase">TELEMETRY FEED</span><span class="font-label-data text-label-data text-primary">SYNCED</span></div></div><a class="flex items-center gap-space-md min-h-[48px] px-space-md rounded-lg text-on-surface-variant hover:bg-surface-container-high hover:text-on-surface transition-all" data-path="back-to-directory" href="#"><span class="material-symbols-outlined text-outline">arrow_back</span><span class="font-headline-sm text-headline-sm text-sm tracking-wide uppercase">Back to Directory</span></a></div></aside><div class="pl-72"><header class="fixed top-0 left-72 right-0 h-20 bg-surface/90 backdrop-blur-xl z-40 shadow-[0_1px_8px_rgba(0,0,0,0.5)] flex items-center justify-between px-gutter-lg"><div class="flex items-center gap-space-lg"><div class="flex items-center gap-space-md"><img alt="Brand logo. - Primary color: #00e5ff
- Font: spaceGrotesk
- Mode: dark
- Roundness: rounded-md
" class="h-8 w-auto object-contain" src="https://lh3.googleusercontent.com/aida/AEtjO1VyjwCl13wJcsQT-sMTi-VRmFxtZ-9XIra_-xqqK4kTFuOW8p1wBa1sxe4tYYuCb6dn_KEKD4eafHUh8YVgowbEvhZZs8cw7zL-NoUhnJvkrvVr2L3D6B7AbSXsYPHpoPD3cGefuUyVyNzO6s5TraxSTMpmQ31_ZNphdAPtB96fnxjTpL5y_m4qrKjJwN1LMV2eblQNfn-ubgQY5A0ier_SAIa3satIVrBXUeDO5Tg8mutucmfwYgVCrA"/><div class="flex flex-col"><span class="font-headline-sm text-headline-sm uppercase text-on-surface tracking-wider leading-none">PACIFIC COAST RIDERS // CHAPTER HQ</span><span class="font-label-caption text-label-caption uppercase text-primary mt-0.5">FOUNDER &amp; OFFICER COMMAND CONSOLE</span></div></div><div class="hidden xl:flex items-center gap-space-sm pl-space-md"><div class="flex items-center gap-space-xs px-space-md py-1.5 rounded-full bg-surface-container-high"><span class="w-2 h-2 rounded-full bg-primary-container"></span><span class="font-label-data text-label-data text-on-surface uppercase">42 Active Members</span></div><div class="flex items-center gap-space-xs px-space-md py-1.5 rounded-full bg-surface-container-high"><span class="w-2 h-2 rounded-full bg-primary"></span><span class="font-label-data text-label-data text-on-surface uppercase">Channel CH-04 MESH</span></div><div class="flex items-center gap-space-xs px-space-md py-1.5 rounded-full bg-surface-container-high"><span class="w-2 h-2 rounded-full bg-secondary"></span><span class="font-label-data text-label-data text-on-surface uppercase">3 Staged Rides</span></div></div></div><div class="flex items-center gap-space-lg"><div class="flex items-center gap-space-sm"><div class="flex items-center gap-space-xs px-space-sm py-1 rounded bg-surface-container-low"><span class="material-symbols-outlined text-sm text-primary">satellite_alt</span><span class="font-label-data text-label-data text-on-surface-variant uppercase">NET LOCK</span></div><div class="flex items-center gap-space-xs px-space-sm py-1 rounded bg-surface-container-low"><span class="material-symbols-outlined text-sm text-secondary">sensors</span><span class="font-label-data text-label-data text-on-surface-variant uppercase">BEACON ACTIVE</span></div></div><div class="flex items-center gap-space-md pl-space-md"><div class="flex flex-col items-end"><span class="font-headline-sm text-headline-sm text-xs uppercase text-on-surface">CALLSIGN: VIPER-1</span><span class="font-label-caption text-label-caption text-primary uppercase">ROAD CAPTAIN // FOUNDER</span></div><img alt="Profile" class="w-8 h-8 rounded-full object-cover" src="https://lh3.googleusercontent.com/aida/AEtjO1WVxZBfZMbTdHeRSt73fWRy6gjWk3_qTm8SSSfoWQnQsHYP2ngztRX-GwRDxracXqrxt42j0x_3rYX-Deu1wGtF7R_qj3ZMExn0d6mErdfGFPGmEtddnnmd0i_Ez6Mv8kj3AYzks1N9Gq4hr9VObylWxDqngSG4Yi5vS-Sj7j3tfyZc_6dknnGpnnb5vC4PQmhuUp58_MzZvopIwkRWq0S27smUu_5zRLguTCXTKrFUEw9TiLBSRA4aXu4"/></div></div></header><main class="relative w-full pt-20 bg-surface px-gutter-lg py-gutter-lg"><div class="flex flex-col w-full gap-gutter-lg pb-gutter-lg">
<!-- Top Executive Action Header Bar -->
<div class="flex flex-col lg:flex-row lg:items-center justify-between gap-space-md p-space-lg rounded-xl bg-surface-container-low shadow-xl">
<div class="flex flex-col gap-space-xs">
<div class="flex items-center gap-space-sm flex-wrap">
<span class="px-space-sm py-0.5 rounded font-label-data text-label-data bg-primary/10 text-primary-fixed uppercase tracking-widest">NORCAL SECTOR // CHAPTER 04</span>
<span class="flex items-center gap-1.5 px-space-sm py-0.5 rounded-full bg-surface-container-high text-on-surface font-label-caption text-label-caption">
<span class="w-1.5 h-1.5 rounded-full bg-primary-container animate-ping"></span>
@ApexMarcus (President)
</span>
<span class="font-label-data text-label-data text-outline">NODE_ID: SF-RIDERS-8802</span>
</div>
<h1 class="font-headline-lg text-headline-lg text-on-surface tracking-tight flex items-center gap-space-sm">
Executive Telemetry &amp; Pack Operations
</h1>
</div>
<!-- Quick Action Triggers -->
<div class="flex items-center gap-space-sm flex-wrap">
<button class="flex items-center gap-space-xs px-space-md py-3 rounded-lg bg-error-container text-on-error hover:bg-error transition-all cursor-pointer font-label-data text-label-data uppercase tracking-wider shadow-lg" id="alertBtn">
<span class="material-symbols-outlined text-lg">warning</span>
Stage Emergency Mesh Alert
</button>
<button class="flex items-center gap-space-xs px-space-md py-3 rounded-lg bg-surface-container-high text-on-surface hover:bg-surface-bright transition-all cursor-pointer font-label-data text-label-data uppercase tracking-wider">
<span class="material-symbols-outlined text-lg text-primary">download</span>
Export Telemetry Log
</button>
</div>
</div>
<!-- Realtime Alert Banner Drawer (Hidden by default, interactive) -->
<div class="hidden flex items-center justify-between p-space-md rounded-xl bg-error-container text-on-error-container shadow-2xl" id="alertDrawer">
<div class="flex items-center gap-space-md">
<span class="material-symbols-outlined text-headline-sm animate-pulse text-error">fmd_bad</span>
<div class="flex flex-col">
<span class="font-headline-sm text-headline-sm text-error uppercase">RADIO WARNING PROTOCOL READY</span>
<span class="font-body-md text-body-md text-on-surface">Initiate channel-wide safety haptic broadcast to all 42 linked units in NorCal sector?</span>
</div>
</div>
<div class="flex items-center gap-space-sm">
<button class="px-space-md py-2 rounded bg-surface-container-highest text-on-surface font-label-data text-label-data uppercase" id="cancelAlert">Dismiss</button>
<button class="px-space-md py-2 rounded bg-error text-on-error font-label-data text-label-data uppercase font-bold tracking-widest">Broadcast Now</button>
</div>
</div>
<!-- Row 1: Top Telemetry KPI Metric Cards (3-Column Grid) -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-gutter-lg">
<!-- KPI 1: Total Miles Logged -->
<div class="flex flex-col justify-between p-space-lg rounded-xl bg-surface-container-low shadow-lg relative overflow-hidden group hover:bg-surface-container transition-all">
<div class="flex items-center justify-between">
<div class="flex items-center gap-space-xs">
<span class="w-2 h-2 rounded-full bg-primary-container"></span>
<span class="font-label-data text-label-data text-on-surface-variant uppercase">TOTAL MILES LOGGED</span>
</div>
<span class="px-space-sm py-0.5 rounded bg-primary/10 text-primary font-label-caption text-label-caption uppercase tracking-wider">+14% vs last mo</span>
</div>
<div class="my-space-md flex items-baseline gap-space-sm">
<span class="font-telemetry-metric-lg text-telemetry-metric-lg text-on-surface">48,290</span>
<span class="font-label-data text-label-data text-outline">MILES</span>
</div>
<!-- Sparkline Graphic -->
<div class="flex items-end justify-between gap-space-xs h-12 pt-2">
<svg class="w-full h-full text-primary" fill="none" preserveaspectratio="none" viewbox="0 0 200 40">
<path d="M0,32 L25,28 L50,34 L75,18 L100,22 L125,12 L150,16 L175,6 L200,8" stroke="currentColor" stroke-linecap="round" stroke-width="2.5"></path>
<path d="M0,32 L25,28 L50,34 L75,18 L100,22 L125,12 L150,16 L175,6 L200,8 L200,40 L0,40 Z" fill="currentColor" fill-opacity="0.1"></path>
</svg>
</div>
<div class="pt-space-sm flex items-center justify-between text-outline">
<span class="font-label-caption text-label-caption uppercase">ACTIVE TELEMETRIC BIKES</span>
<span class="font-label-data text-label-data text-primary">42 / 42 PAIRED</span>
</div>
</div>
<!-- KPI 2: Avg Formation Cohesion -->
<div class="flex flex-col justify-between p-space-lg rounded-xl bg-surface-container-low shadow-lg relative overflow-hidden group hover:bg-surface-container transition-all">
<div class="flex items-center justify-between">
<div class="flex items-center gap-space-xs">
<span class="w-2 h-2 rounded-full bg-primary-fixed"></span>
<span class="font-label-data text-label-data text-on-surface-variant uppercase">FORMATION COHESION</span>
</div>
<span class="px-space-sm py-0.5 rounded bg-surface-container-high text-primary-fixed font-label-caption text-label-caption uppercase tracking-wider">DIAMOND STAGGER LOCK</span>
</div>
<div class="my-space-md flex items-baseline gap-space-sm">
<span class="font-telemetry-metric-lg text-telemetry-metric-lg text-on-surface">97.4</span>
<span class="font-label-data text-label-data text-outline">%</span>
</div>
<!-- Cohesion Progress Dial Bar -->
<div class="w-full flex flex-col gap-1.5">
<div class="w-full bg-surface-container-highest h-2 rounded-full overflow-hidden">
<div class="bg-primary-container h-full rounded-full" style="width: 97.4%;"></div>
</div>
<div class="flex justify-between items-center text-outline">
<span class="font-label-caption text-label-caption uppercase">CLUSTER SPACING TOLERANCE</span>
<span class="font-label-data text-label-data text-primary">±1.2 METERS</span>
</div>
</div>
<div class="pt-space-sm flex items-center justify-between text-outline">
<span class="font-label-caption text-label-caption uppercase">CALIBRATION RATING</span>
<span class="font-label-data text-label-data text-primary-container uppercase font-bold">EXCELLENT</span>
</div>
</div>
<!-- KPI 3: Pack Safety Index -->
<div class="flex flex-col justify-between p-space-lg rounded-xl bg-surface-container-low shadow-lg relative overflow-hidden group hover:bg-surface-container transition-all">
<div class="flex items-center justify-between">
<div class="flex items-center gap-space-xs">
<span class="w-2 h-2 rounded-full bg-secondary"></span>
<span class="font-label-data text-label-data text-on-surface-variant uppercase">PACK SAFETY INDEX</span>
</div>
<span class="px-space-sm py-0.5 rounded bg-surface-container-high text-secondary-fixed font-label-caption text-label-caption uppercase tracking-wider">ZERO INCIDENTS</span>
</div>
<div class="my-space-md flex items-baseline gap-space-sm">
<span class="font-telemetry-metric-lg text-telemetry-metric-lg text-on-surface">100</span>
<span class="font-label-data text-label-data text-outline">PTS</span>
</div>
<!-- G-force & Interlock Stat Ring Inline SVG -->
<div class="flex items-center justify-between gap-space-md py-1">
<div class="flex items-center gap-space-sm">
<svg class="w-8 h-8 text-secondary-fixed-dim" 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="4"></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="100, 100" stroke-linecap="round" stroke-width="4"></path>
</svg>
<div class="flex flex-col">
<span class="font-label-data text-label-data text-on-surface">18,400</span>
<span class="font-label-caption text-label-caption text-outline uppercase">APEX CURVES LOGGED</span>
</div>
</div>
<div class="text-right">
<span class="font-label-data text-label-data text-on-surface">0.00%</span>
<span class="block font-label-caption text-label-caption text-outline uppercase">ANOMALY DETECT</span>
</div>
</div>
<div class="pt-space-sm flex items-center justify-between text-outline">
<span class="font-label-caption text-label-caption uppercase">SYSTEM INTERLOCK STATUS</span>
<span class="font-label-data text-label-data text-secondary uppercase font-bold">ARMED // ACTIVE</span>
</div>
</div>
</div>
<!-- Row 2: Member Growth & Telemetric Lean Activity Chart (High Fidelity) -->
<div class="flex flex-col p-space-lg rounded-xl bg-surface-container-low shadow-xl">
<div class="flex flex-col md:flex-row md:items-center justify-between gap-space-md pb-space-lg">
<div class="flex flex-col">
<div class="flex items-center gap-space-sm">
<span class="font-headline-md text-headline-md text-on-surface">Pack Lean Dynamics &amp; Weekly Trajectory</span>
<span class="px-space-sm py-0.5 rounded bg-primary-container text-on-primary-container font-label-data text-label-data">CH-04 LIVE</span>
</div>
<span class="font-body-md text-body-md text-on-surface-variant">Combined sensor node telemetry across high-speed apex runs and pack mileage</span>
</div>
<!-- Timeframe Selector Tabs -->
<div class="flex items-center p-1 rounded-lg bg-surface-container-lowest gap-1">
<button class="px-space-md py-1.5 rounded font-label-data text-label-data text-on-primary-container bg-primary-container font-bold uppercase transition-all">7D</button>
<button class="px-space-md py-1.5 rounded font-label-data text-label-data text-on-surface-variant hover:text-on-surface hover:bg-surface-container-high uppercase transition-all">30D</button>
<button class="px-space-md py-1.5 rounded font-label-data text-label-data text-on-surface-variant hover:text-on-surface hover:bg-surface-container-high uppercase transition-all">90D</button>
<button class="px-space-md py-1.5 rounded font-label-data text-label-data text-on-surface-variant hover:text-on-surface hover:bg-surface-container-high uppercase transition-all">YTD</button>
</div>
</div>
<!-- Telemetry Chart Visual Area -->
<div class="relative w-full h-80 rounded-lg bg-surface-container-lowest p-space-md flex flex-col justify-between overflow-hidden">
<!-- Background Grid lines -->
<div class="absolute inset-0 flex flex-col justify-between p-space-lg pointer-events-none opacity-20">
<div class="w-full h-px bg-outline"></div>
<div class="w-full h-px bg-outline"></div>
<div class="w-full h-px bg-outline"></div>
<div class="w-full h-px bg-outline"></div>
</div>
<!-- Peak Metric Floater Badge -->
<div class="absolute top-6 right-8 flex items-center gap-space-md px-space-md py-2 rounded-lg bg-surface-container-high shadow-lg">
<div class="flex items-center gap-space-xs">
<span class="w-2.5 h-2.5 rounded-full bg-primary-container"></span>
<span class="font-label-caption text-label-caption text-on-surface-variant uppercase">PEAK LEAN ANGLE:</span>
<span class="font-label-data text-label-data text-primary font-bold">54.2° APEX (SAT)</span>
</div>
<span class="text-outline">|</span>
<div class="flex items-center gap-space-xs">
<span class="font-label-caption text-label-caption text-on-surface-variant uppercase">PEAK RUN:</span>
<span class="font-label-data text-label-data text-on-surface">14,280 MI</span>
</div>
</div>
<!-- Main Responsive Area Wave SVG Chart -->
<div class="relative w-full h-full flex items-end">
<svg class="w-full h-56" fill="none" preserveaspectratio="none" viewbox="0 0 700 200">
<defs>
<lineargradient id="cyanAreaGradient" x1="0" x2="0" y1="0" y2="1">
<stop offset="0%" stop-color="#00e5ff" stop-opacity="0.35"></stop>
<stop offset="100%" stop-color="#00e5ff" stop-opacity="0.0"></stop>
</lineargradient>
<lineargradient id="leanLineGrad" x1="0" x2="1" y1="0" y2="0">
<stop offset="0%" stop-color="#0053db"></stop>
<stop offset="50%" stop-color="#00e5ff"></stop>
<stop offset="100%" stop-color="#c3f5ff"></stop>
</lineargradient>
</defs>
<!-- Filled Area -->
<path d="M 0 150 Q 50 165 100 160 T 200 130 T 300 115 T 400 90 T 500 25 T 600 80 T 700 95 L 700 200 L 0 200 Z" fill="url(#cyanAreaGradient)"></path>
<!-- Primary Velocity Stroke -->
<path d="M 0 150 Q 50 165 100 160 T 200 130 T 300 115 T 400 90 T 500 25 T 600 80 T 700 95" stroke="url(#leanLineGrad)" stroke-linecap="round" stroke-width="3"></path>
<!-- Lean Angle Trend Dotted Reference Curve -->
<path d="M 0 170 C 120 160, 240 140, 360 120 C 480 60, 520 15, 700 110" stroke="#b4c5ff" stroke-dasharray="4 4" stroke-opacity="0.75" stroke-width="1.5"></path>
<!-- Peak Marker Pin on Saturday -->
<circle cx="500" cy="25" fill="#00e5ff" r="5"></circle>
<circle cx="500" cy="25" r="9" stroke="#00e5ff" stroke-opacity="0.5" stroke-width="1.5"></circle>
</svg>
</div>
<!-- X-Axis Labels with Distance & Lean Metrics -->
<div class="grid grid-cols-7 w-full pt-space-xs text-center border-t-0">
<div class="flex flex-col items-center">
<span class="font-label-data text-label-data text-on-surface">MON</span>
<span class="font-label-caption text-label-caption text-outline">3,420 mi</span>
</div>
<div class="flex flex-col items-center">
<span class="font-label-data text-label-data text-on-surface">TUE</span>
<span class="font-label-caption text-label-caption text-outline">2,100 mi</span>
</div>
<div class="flex flex-col items-center">
<span class="font-label-data text-label-data text-on-surface">WED</span>
<span class="font-label-caption text-label-caption text-outline">4,800 mi</span>
</div>
<div class="flex flex-col items-center">
<span class="font-label-data text-label-data text-on-surface">THU</span>
<span class="font-label-caption text-label-caption text-outline">5,600 mi</span>
</div>
<div class="flex flex-col items-center">
<span class="font-label-data text-label-data text-on-surface">FRI</span>
<span class="font-label-caption text-label-caption text-outline">8,900 mi</span>
</div>
<div class="flex flex-col items-center">
<span class="font-label-data text-label-data text-primary-container font-bold">SAT (PEAK)</span>
<span class="font-label-caption text-label-caption text-primary">14,280 mi</span>
</div>
<div class="flex flex-col items-center">
<span class="font-label-data text-label-data text-on-surface">SUN</span>
<span class="font-label-caption text-label-caption text-outline">9,190 mi</span>
</div>
</div>
</div>
</div>
<!-- Row 3: Two-Column Operational Layout (Staging Console + Audit Log) -->
<div class="grid grid-cols-1 lg:grid-cols-12 gap-gutter-lg">
<!-- Left Column: Quick Action Pack Staging Card (7 Columns) -->
<div class="lg:col-span-7 flex flex-col justify-between p-space-lg rounded-xl bg-surface-container-low shadow-xl">
<div class="flex flex-col gap-space-md">
<div class="flex items-center justify-between flex-wrap gap-space-xs">
<div class="flex items-center gap-space-sm">
<span class="p-2 rounded-lg bg-primary-container text-on-primary-container material-symbols-outlined text-lg">flag</span>
<div class="flex flex-col">
<span class="font-label-caption text-label-caption text-primary uppercase">UPCOMING STAGED RUN</span>
<h2 class="font-headline-md text-headline-md text-on-surface">Skyline Dawn Patrol</h2>
</div>
</div>
<span class="px-space-md py-1 rounded bg-surface-container-high text-on-surface font-label-data text-label-data uppercase tracking-wider">
PACE 4 // TECHNICAL
</span>
</div>
<!-- Ride Mission Brief Grid -->
<div class="grid grid-cols-2 sm:grid-cols-4 gap-space-sm p-space-md rounded-lg bg-surface-container-lowest">
<div class="flex flex-col">
<span class="font-label-caption text-label-caption text-outline uppercase">KICKSTANDS UP</span>
<span class="font-headline-sm text-headline-sm text-on-surface">07:30 AM</span>
<span class="font-label-caption text-label-caption text-primary">Saturday</span>
</div>
<div class="flex flex-col">
<span class="font-label-caption text-label-caption text-outline uppercase">TOTAL DISTANCE</span>
<span class="font-headline-sm text-headline-sm text-on-surface">64.2 MI</span>
<span class="font-label-caption text-label-caption text-on-surface-variant">Elev: +4,200ft</span>
</div>
<div class="flex flex-col">
<span class="font-label-caption text-label-caption text-outline uppercase">STAGED LEAD</span>
<span class="font-label-data text-label-data text-primary">@Dave_Lead</span>
<span class="font-label-caption text-label-caption text-outline">Channel CH-04</span>
</div>
<div class="flex flex-col">
<span class="font-label-caption text-label-caption text-outline uppercase">PACK SWEEP</span>
<span class="font-label-data text-label-data text-secondary">@Sarah_Sweep</span>
<span class="font-label-caption text-label-caption text-outline">Telemetry Beacon</span>
</div>
</div>
<!-- Rider Roster Visual Bar -->
<div class="flex flex-col gap-space-xs">
<div class="flex items-center justify-between">
<span class="font-label-data text-label-data text-on-surface-variant uppercase">CONFIRMED FORMATION SQUAD (18 RIDERS)</span>
<span class="font-label-data text-label-data text-primary font-bold">18 / 20 SLOTS</span>
</div>
<div class="flex items-center gap-space-xs overflow-x-auto py-1">
<img class="w-9 h-9 rounded-full object-cover shadow-sm ring-0" data-alt="High contrast helmet avatar of lead motorcycle rider in carbon fiber full-face gear under sharp cyan workshop lighting" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBB5O2JCwZ8G1wuwf_RdZrdHfx8QoFnGXIQTUhZ-1bXNOhq-zGSROX069qpVyXqWONRCTGBDFf8ES3Oi6C3ZRb3Jy7C5uoiAf2MYZbPvqFkwyOnOTU_2NkoIywRc2jVwZyQ1-Sv0dyOS8K-f6gw1zHr0ozZJ6gLoIslgJbzIh76Vbs68o5h91rEEXDXqlcKROoOL1lvk9YIUqIL9-ObuhlJjH3C84k_RT4QlZubu37l1Q7-RzvmHTLz"/>
<img class="w-9 h-9 rounded-full object-cover shadow-sm ring-0" data-alt="Close up rider portrait with neon visor reflection of dashboard instruments, tactical helmet setup" src="https://lh3.googleusercontent.com/aida-public/AB6AXuB2V-qQ-goKofij76un2Lo1-AJ4SGqZCv2fq3iPMq2Rda2g-7WwTfXrSJawgcNuxtnAQTBAx4Jl19wvxZ79ix4mMfFCS6qzEXhw31RrHvXItioK40c66WObQKULyWoGTLu2Xg-cNW1wKNKhmIeBx5Zbf46B8Yjg266CaNcsKwenajqF3PTdiuFgjek7bJ5fr1ug7X5tL4dNPnY-5TKSIJHGKWkeWaGkfKkDiT5mfhXo9uwUQ8mnxsx6"/>
<img class="w-9 h-9 rounded-full object-cover shadow-sm ring-0" data-alt="Motorcycle club member profile with dark background and subtle blue backlighting wearing ballistic vest" src="https://lh3.googleusercontent.com/aida-public/AB6AXuC33VW4OnhLxgzknhdMgOa8XGSQnfG7uvnGHdSzE2nSVfkTee6yTEUHVkQd7Aw02ZSDgaGEo5NStyA7o5vjdDbzUzB43e2mxHkO4XMTcLcrFlqNuMtPX62d3H7LdPD3sFR7cQCmJQknz_cpXlU9Bu_PFdCim_ALzyVVpcXprpmHf_FcjW1qnpZ9g1g4gLW24wLWuA28hnK0qViij37lWMCmPvpX7Gw3DYJtdrqhNqxlXitsdXqZQ0Nx"/>
<div class="w-9 h-9 rounded-full bg-surface-container-high flex items-center justify-center font-label-data text-label-data text-primary">+15</div>
<div class="ml-space-sm flex items-center gap-space-xs text-outline">
<span class="material-symbols-outlined text-sm text-primary">check_circle</span>
<span class="font-label-caption text-label-caption uppercase">All 18 Mesh Interlocked</span>
</div>
</div>
</div>
</div>
<!-- Action Button to Staging Console -->
<div class="pt-space-lg flex items-center justify-between gap-space-md">
<div class="flex items-center gap-space-xs text-outline font-label-caption text-label-caption">
<span class="material-symbols-outlined text-sm">satellite_alt</span>
GPS Waypoints locked into Garmin &amp; Cardo Mesh
</div>
<button class="flex items-center justify-center gap-space-sm px-space-lg py-3 rounded-lg bg-primary-container text-on-primary-container hover:bg-primary-fixed-dim transition-all cursor-pointer font-label-data text-label-data uppercase tracking-wider font-bold shadow-lg">
<span class="material-symbols-outlined text-base">dashboard_customize</span>
Launch Tactical Staging Console
</button>
</div>
</div>
<!-- Right Column: Recent Officer Audit Log Stream (5 Columns) -->
<div class="lg:col-span-5 flex flex-col p-space-lg rounded-xl bg-surface-container-low shadow-xl">
<div class="flex items-center justify-between pb-space-md border-b border-surface-container-highest">
<div class="flex items-center gap-space-xs">
<span class="material-symbols-outlined text-primary text-xl">history_toggle_off</span>
<h2 class="font-headline-sm text-headline-sm text-on-surface">Officer Audit Stream</h2>
</div>
<span class="px-space-xs py-0.5 rounded bg-surface-container-high text-outline font-label-caption text-label-caption uppercase">SYNC 20Hz</span>
</div>
<div class="flex flex-col gap-space-md pt-space-md">
<!-- Log Item 1 -->
<div class="flex items-start gap-space-md p-space-sm rounded-lg hover:bg-surface-container-high transition-all">
<div class="w-8 h-8 rounded-full bg-surface-container-high flex items-center justify-center text-primary shrink-0 mt-0.5">
<span class="material-symbols-outlined text-base">route</span>
</div>
<div class="flex flex-col w-full">
<div class="flex items-center justify-between">
<span class="font-label-data text-label-data text-on-surface">@Sarah_Sweep</span>
<span class="font-label-caption text-label-caption text-outline">10m ago</span>
</div>
<p class="font-body-md text-body-md text-on-surface-variant">Approved route GPX telemetry for <span class="text-primary font-medium">Mulholland Apex Run</span>.</p>
</div>
</div>
<!-- Log Item 2 -->
<div class="flex items-start gap-space-md p-space-sm rounded-lg hover:bg-surface-container-high transition-all">
<div class="w-8 h-8 rounded-full bg-surface-container-high flex items-center justify-center text-primary-container shrink-0 mt-0.5">
<span class="material-symbols-outlined text-base">military_tech</span>
</div>
<div class="flex flex-col w-full">
<div class="flex items-center justify-between">
<span class="font-label-data text-label-data text-on-surface">@Dave_Lead</span>
<span class="font-label-caption text-label-caption text-outline">42m ago</span>
</div>
<p class="font-body-md text-body-md text-on-surface-variant">Promoted <span class="text-primary">@KevBL</span> to <span class="text-on-surface font-semibold">Road Captain</span> designation.</p>
</div>
</div>
<!-- Log Item 3 -->
<div class="flex items-start gap-space-md p-space-sm rounded-lg hover:bg-surface-container-high transition-all">
<div class="w-8 h-8 rounded-full bg-surface-container-high flex items-center justify-center text-secondary shrink-0 mt-0.5">
<span class="material-symbols-outlined text-base">sensors</span>
</div>
<div class="flex flex-col w-full">
<div class="flex items-center justify-between">
<span class="font-label-data text-label-data text-secondary uppercase font-bold">Auto Interlock</span>
<span class="font-label-caption text-label-caption text-outline">2h ago</span>
</div>
<p class="font-body-md text-body-md text-on-surface-variant">Registered automated 20Hz crash interlock mesh test: <span class="px-space-xs py-0.5 rounded bg-surface-container-highest text-primary-container font-label-data text-label-data">PASS</span></p>
</div>
</div>
<!-- Log Item 4 -->
<div class="flex items-start gap-space-md p-space-sm rounded-lg hover:bg-surface-container-high transition-all">
<div class="w-8 h-8 rounded-full bg-surface-container-high flex items-center justify-center text-primary-fixed shrink-0 mt-0.5">
<span class="material-symbols-outlined text-base">cell_tower</span>
</div>
<div class="flex flex-col w-full">
<div class="flex items-center justify-between">
<span class="font-label-data text-label-data text-on-surface">@ApexMarcus</span>
<span class="font-label-caption text-label-caption text-outline">5h ago</span>
</div>
<p class="font-body-md text-body-md text-on-surface-variant">Updated RF Mesh dynamic frequency to <span class="text-primary font-bold">CH-04</span> for NorCal sector.</p>
</div>
</div>
</div>
<!-- Footer Telemetry Integrity status -->
<div class="mt-auto pt-space-md flex items-center justify-between text-outline">
<div class="flex items-center gap-space-xs">
<span class="w-2 h-2 rounded-full bg-primary"></span>
<span class="font-label-caption text-label-caption uppercase">Audit Hash: #04-884A-9X</span>
</div>
<a class="font-label-data text-label-data text-primary hover:underline uppercase" href="#">View Full Archive</a>
</div>
</div>
</div>
</div>
<script>
(function() {
const alertBtn = document.getElementById('alertBtn');
const alertDrawer = document.getElementById('alertDrawer');
const cancelAlert = document.getElementById('cancelAlert');
if (alertBtn && alertDrawer && cancelAlert) {
alertBtn.addEventListener('click', () => {
alertDrawer.classList.toggle('hidden');
});
cancelAlert.addEventListener('click', () => {
alertDrawer.classList.add('hidden');
});
}
})();
</script></main></div></body></html>