483 lines
42 KiB
HTML
483 lines
42 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&family=JetBrains+Mono:wght@500;600;700&family=Space+Grotesk:wght@600;700&display=swap" rel="stylesheet"/>
|
|
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/><style>@layer base{html,body{margin:0;padding:0;}body{overscroll-behavior:none;}main>:first-child{margin-top:0!important;}main>:last-child{margin-bottom:0!important;}}::-webkit-scrollbar{display:none;}</style><script src="https://cdn.tailwindcss.com"></script><script id="tailwind-config">tailwind.config={darkMode:"class",theme:{extend:{"colors":{"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 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="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 & Ranks</span></div></a><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="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 & 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">
|
|
<!-- Dynamic Operational HUD Sub-Header / Logistics Controls Bar -->
|
|
<div class="flex flex-col gap-space-md mb-gutter-lg">
|
|
<!-- Top Row: Route Status & Master Ride Dispatcher -->
|
|
<div class="flex flex-col xl:flex-row xl:items-center justify-between gap-space-md bg-surface-container-low p-space-md rounded-xl shadow-md">
|
|
<div class="flex items-center gap-space-md flex-wrap">
|
|
<div class="flex items-center gap-space-xs px-space-md py-1.5 rounded-lg bg-surface-container-high">
|
|
<span class="w-2.5 h-2.5 rounded-full bg-primary-container animate-ping"></span>
|
|
<span class="font-label-data text-label-data text-primary uppercase">RADAR LOCK: ACTIVE REGION</span>
|
|
</div>
|
|
<div class="flex items-center gap-space-xs text-on-surface-variant">
|
|
<span class="font-label-caption text-label-caption uppercase tracking-wider text-outline">STAGING GRID</span>
|
|
<span class="font-label-data text-label-data text-on-surface uppercase">SECTOR-7 (SO-CAL CORRIDOR)</span>
|
|
</div>
|
|
<div class="hidden md:flex items-center gap-space-xs px-space-sm py-1 rounded bg-surface-container-lowest">
|
|
<span class="material-symbols-outlined text-xs text-primary-container">alt_route</span>
|
|
<span class="font-label-data text-label-data text-on-surface">3 RIDES STAGED THIS MONTH</span>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center gap-space-md flex-wrap">
|
|
<!-- Pace Filter Cockpit Switcher -->
|
|
<div class="flex items-center bg-surface-container-lowest p-1 rounded-lg">
|
|
<span class="material-symbols-outlined text-outline px-space-xs text-sm">speed</span>
|
|
<button class="px-space-sm py-1 rounded text-on-surface-variant font-label-data text-label-data hover:text-on-surface transition-all">ALL PACES</button>
|
|
<button class="px-space-sm py-1 rounded text-on-surface-variant font-label-data text-label-data hover:text-on-surface transition-all">P2 CRUISING</button>
|
|
<button class="px-space-sm py-1 rounded text-on-surface-variant font-label-data text-label-data hover:text-on-surface transition-all">P3 BRISK</button>
|
|
<button class="px-space-sm py-1 rounded bg-primary-container text-on-primary-container font-label-data text-label-data font-bold shadow-sm">P4 TECHNICAL</button>
|
|
</div>
|
|
<!-- Schedule Ride Action Button -->
|
|
<button class="flex items-center gap-space-sm px-space-lg py-2.5 rounded-lg bg-primary-container text-on-primary-container font-headline-sm text-headline-sm text-xs tracking-wider uppercase shadow-[0_0_16px_rgba(0,229,255,0.4)] hover:bg-primary-fixed-dim transition-all">
|
|
<span class="material-symbols-outlined text-base">calendar_add_on</span>
|
|
<span>Schedule New Club Ride +</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<!-- Second Row: Temporal Scrubber / View Mode & Month Controls -->
|
|
<div class="flex flex-col md:flex-row items-stretch md:items-center justify-between gap-space-md bg-surface-container-lowest p-space-md rounded-xl">
|
|
<!-- Month Navigator -->
|
|
<div class="flex items-center gap-space-md">
|
|
<div class="flex items-center bg-surface-container-high rounded-lg p-0.5">
|
|
<button class="p-2 rounded hover:bg-surface-container-highest text-on-surface transition-all flex items-center justify-center">
|
|
<span class="material-symbols-outlined text-sm">chevron_left</span>
|
|
</button>
|
|
<div class="px-space-md py-1 flex items-center gap-space-xs">
|
|
<span class="font-headline-md text-headline-md tracking-tight uppercase text-on-surface">OCTOBER 2024</span>
|
|
</div>
|
|
<button class="p-2 rounded hover:bg-surface-container-highest text-on-surface transition-all flex items-center justify-center">
|
|
<span class="material-symbols-outlined text-sm">chevron_right</span>
|
|
</button>
|
|
</div>
|
|
<button class="px-space-md py-1.5 rounded-lg bg-surface-container-high text-on-surface font-label-data text-label-data uppercase hover:bg-surface-container-highest transition-all">
|
|
TODAY
|
|
</button>
|
|
<span class="font-label-caption text-label-caption text-outline uppercase hidden lg:inline">COORDINATED GPS SYNC INTERVAL: 500MS</span>
|
|
</div>
|
|
<!-- View Switcher Tabs -->
|
|
<div class="flex items-center bg-surface-container-low p-1 rounded-lg self-start md:self-auto">
|
|
<button class="flex items-center gap-space-xs px-space-md py-1.5 rounded-md bg-surface-container-highest text-primary font-headline-sm text-headline-sm text-xs uppercase shadow-sm">
|
|
<span class="material-symbols-outlined text-xs">calendar_view_month</span>
|
|
<span>Month View</span>
|
|
</button>
|
|
<button class="flex items-center gap-space-xs px-space-md py-1.5 rounded-md text-on-surface-variant hover:text-on-surface font-headline-sm text-headline-sm text-xs uppercase transition-all">
|
|
<span class="material-symbols-outlined text-xs">calendar_view_week</span>
|
|
<span>Week View</span>
|
|
</button>
|
|
<button class="flex items-center gap-space-xs px-space-md py-1.5 rounded-md text-on-surface-variant hover:text-on-surface font-headline-sm text-headline-sm text-xs uppercase transition-all">
|
|
<span class="material-symbols-outlined text-xs">view_agenda</span>
|
|
<span>List Agenda</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Main Split 2-Column Calendar & Telemetry Chassis Grid -->
|
|
<div class="grid grid-cols-1 lg:grid-cols-12 gap-gutter-lg items-start">
|
|
<!-- Left Column: Interactive 7-Day Monthly Telemetry Grid (7 cols) -->
|
|
<div class="lg:col-span-7 flex flex-col gap-space-sm bg-surface-container-lowest p-space-md rounded-xl shadow-lg">
|
|
<div class="flex items-center justify-between px-space-sm pb-space-xs">
|
|
<div class="flex items-center gap-space-xs">
|
|
<span class="material-symbols-outlined text-primary text-sm">grid_guides</span>
|
|
<span class="font-headline-sm text-headline-sm text-xs uppercase text-on-surface tracking-wider">Flight Plan Matrix // Cal-Sector 10</span>
|
|
</div>
|
|
<div class="flex items-center gap-space-md font-label-caption text-label-caption uppercase text-outline">
|
|
<span class="flex items-center gap-1"><span class="w-2 h-2 rounded-full bg-surface-variant"></span> Completed</span>
|
|
<span class="flex items-center gap-1"><span class="w-2 h-2 rounded-full bg-primary-container"></span> Selected Target</span>
|
|
<span class="flex items-center gap-1"><span class="w-2 h-2 rounded-full bg-secondary"></span> Staged</span>
|
|
</div>
|
|
</div>
|
|
<!-- Calendar Header Days of Week -->
|
|
<div class="grid grid-cols-7 gap-1 text-center py-2 bg-surface-container-low rounded-lg">
|
|
<div class="font-label-data text-label-data text-outline uppercase">MON</div>
|
|
<div class="font-label-data text-label-data text-outline uppercase">TUE</div>
|
|
<div class="font-label-data text-label-data text-outline uppercase">WED</div>
|
|
<div class="font-label-data text-label-data text-outline uppercase">THU</div>
|
|
<div class="font-label-data text-label-data text-outline uppercase">FRI</div>
|
|
<div class="font-label-data text-label-data text-primary uppercase font-bold">SAT</div>
|
|
<div class="font-label-data text-label-data text-primary uppercase font-bold">SUN</div>
|
|
</div>
|
|
<!-- Calendar Grid Matrix (Oct 2024 starts on Tue Oct 1) -->
|
|
<div class="grid grid-cols-7 gap-1.5">
|
|
<!-- Prior Month Overflow (Sep 30) -->
|
|
<div class="min-h-[96px] p-1.5 rounded-lg bg-surface-container-low/40 opacity-40 flex flex-col justify-between">
|
|
<span class="font-label-data text-label-data text-outline">30</span>
|
|
</div>
|
|
<!-- Oct 01 to Oct 05 -->
|
|
<div class="min-h-[96px] p-1.5 rounded-lg bg-surface-container-low flex flex-col justify-between hover:bg-surface-container transition-all cursor-pointer">
|
|
<span class="font-label-data text-label-data text-on-surface-variant">01</span>
|
|
</div>
|
|
<div class="min-h-[96px] p-1.5 rounded-lg bg-surface-container-low flex flex-col justify-between hover:bg-surface-container transition-all cursor-pointer">
|
|
<span class="font-label-data text-label-data text-on-surface-variant">02</span>
|
|
</div>
|
|
<div class="min-h-[96px] p-1.5 rounded-lg bg-surface-container-low flex flex-col justify-between hover:bg-surface-container transition-all cursor-pointer">
|
|
<span class="font-label-data text-label-data text-on-surface-variant">03</span>
|
|
</div>
|
|
<div class="min-h-[96px] p-1.5 rounded-lg bg-surface-container-low flex flex-col justify-between hover:bg-surface-container transition-all cursor-pointer">
|
|
<span class="font-label-data text-label-data text-on-surface-variant">04</span>
|
|
</div>
|
|
<div class="min-h-[96px] p-1.5 rounded-lg bg-surface-container-low flex flex-col justify-between hover:bg-surface-container transition-all cursor-pointer">
|
|
<span class="font-label-data text-label-data text-primary">05</span>
|
|
</div>
|
|
<div class="min-h-[96px] p-1.5 rounded-lg bg-surface-container-low flex flex-col justify-between hover:bg-surface-container transition-all cursor-pointer">
|
|
<span class="font-label-data text-label-data text-primary">06</span>
|
|
</div>
|
|
<!-- Week 2: Oct 07 to Oct 13 (Oct 12 has event) -->
|
|
<div class="min-h-[96px] p-1.5 rounded-lg bg-surface-container-low flex flex-col justify-between hover:bg-surface-container transition-all cursor-pointer">
|
|
<span class="font-label-data text-label-data text-on-surface-variant">07</span>
|
|
</div>
|
|
<div class="min-h-[96px] p-1.5 rounded-lg bg-surface-container-low flex flex-col justify-between hover:bg-surface-container transition-all cursor-pointer">
|
|
<span class="font-label-data text-label-data text-on-surface-variant">08</span>
|
|
</div>
|
|
<div class="min-h-[96px] p-1.5 rounded-lg bg-surface-container-low flex flex-col justify-between hover:bg-surface-container transition-all cursor-pointer">
|
|
<span class="font-label-data text-label-data text-on-surface-variant">09</span>
|
|
</div>
|
|
<div class="min-h-[96px] p-1.5 rounded-lg bg-surface-container-low flex flex-col justify-between hover:bg-surface-container transition-all cursor-pointer">
|
|
<span class="font-label-data text-label-data text-on-surface-variant">10</span>
|
|
</div>
|
|
<div class="min-h-[96px] p-1.5 rounded-lg bg-surface-container-low flex flex-col justify-between hover:bg-surface-container transition-all cursor-pointer">
|
|
<span class="font-label-data text-label-data text-on-surface-variant">11</span>
|
|
</div>
|
|
<!-- Oct 12: Skyline Dawn Patrol (Completed) -->
|
|
<div class="min-h-[96px] p-1.5 rounded-lg bg-surface-container flex flex-col justify-between hover:bg-surface-container-high transition-all cursor-pointer">
|
|
<div class="flex items-center justify-between">
|
|
<span class="font-label-data text-label-data text-primary font-bold">12</span>
|
|
<span class="font-label-caption text-label-caption uppercase text-outline">ARCHIVED</span>
|
|
</div>
|
|
<div class="p-1 rounded bg-surface-variant/80 text-on-surface flex flex-col gap-0.5">
|
|
<span class="font-headline-sm text-headline-sm text-xs truncate leading-tight">Skyline Dawn Patrol</span>
|
|
<div class="flex items-center justify-between text-outline font-label-caption text-label-caption">
|
|
<span>07:30</span>
|
|
<span class="text-on-surface-variant">16 RIDERS</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="min-h-[96px] p-1.5 rounded-lg bg-surface-container-low flex flex-col justify-between hover:bg-surface-container transition-all cursor-pointer">
|
|
<span class="font-label-data text-label-data text-primary">13</span>
|
|
</div>
|
|
<!-- Week 3: Oct 14 to Oct 20 (Oct 19 has TARGET event) -->
|
|
<div class="min-h-[96px] p-1.5 rounded-lg bg-surface-container-low flex flex-col justify-between hover:bg-surface-container transition-all cursor-pointer">
|
|
<span class="font-label-data text-label-data text-on-surface-variant">14</span>
|
|
</div>
|
|
<div class="min-h-[96px] p-1.5 rounded-lg bg-surface-container-low flex flex-col justify-between hover:bg-surface-container transition-all cursor-pointer">
|
|
<span class="font-label-data text-label-data text-on-surface-variant">15</span>
|
|
</div>
|
|
<div class="min-h-[96px] p-1.5 rounded-lg bg-surface-container-low flex flex-col justify-between hover:bg-surface-container transition-all cursor-pointer">
|
|
<span class="font-label-data text-label-data text-on-surface-variant">16</span>
|
|
</div>
|
|
<div class="min-h-[96px] p-1.5 rounded-lg bg-surface-container-low flex flex-col justify-between hover:bg-surface-container transition-all cursor-pointer">
|
|
<span class="font-label-data text-label-data text-on-surface-variant">17</span>
|
|
</div>
|
|
<div class="min-h-[96px] p-1.5 rounded-lg bg-surface-container-low flex flex-col justify-between hover:bg-surface-container transition-all cursor-pointer">
|
|
<span class="font-label-data text-label-data text-on-surface-variant">18</span>
|
|
</div>
|
|
<!-- Oct 19: SELECTED TARGET EVENT -->
|
|
<div class="min-h-[96px] p-1.5 rounded-lg bg-surface-container-high shadow-[0_0_20px_rgba(0,229,255,0.35)] flex flex-col justify-between relative overflow-hidden">
|
|
<div class="absolute top-0 right-0 w-2 h-2 bg-primary-container"></div>
|
|
<div class="flex items-center justify-between">
|
|
<span class="font-label-data text-label-data text-primary-container font-bold">19</span>
|
|
<span class="px-1 py-0.5 rounded text-[9px] bg-primary-container text-on-primary-container font-label-data uppercase font-bold">ACTIVE</span>
|
|
</div>
|
|
<div class="p-1.5 rounded bg-surface-container-lowest text-on-surface flex flex-col gap-0.5">
|
|
<div class="flex items-center gap-1">
|
|
<span class="w-1.5 h-1.5 rounded-full bg-primary-container animate-pulse"></span>
|
|
<span class="font-headline-sm text-headline-sm text-xs text-primary truncate leading-tight">Mulholland Apex Run</span>
|
|
</div>
|
|
<div class="flex items-center justify-between font-label-caption text-label-caption mt-0.5">
|
|
<span class="text-primary-container font-semibold">STAGE 2 // P4</span>
|
|
<span class="text-on-surface-variant">18 RSVPs</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="min-h-[96px] p-1.5 rounded-lg bg-surface-container-low flex flex-col justify-between hover:bg-surface-container transition-all cursor-pointer">
|
|
<span class="font-label-data text-label-data text-primary">20</span>
|
|
</div>
|
|
<!-- Week 4: Oct 21 to Oct 27 (Oct 26 has P2 Sunset Glide) -->
|
|
<div class="min-h-[96px] p-1.5 rounded-lg bg-surface-container-low flex flex-col justify-between hover:bg-surface-container transition-all cursor-pointer">
|
|
<span class="font-label-data text-label-data text-on-surface-variant">21</span>
|
|
</div>
|
|
<div class="min-h-[96px] p-1.5 rounded-lg bg-surface-container-low flex flex-col justify-between hover:bg-surface-container transition-all cursor-pointer">
|
|
<span class="font-label-data text-label-data text-on-surface-variant">22</span>
|
|
</div>
|
|
<div class="min-h-[96px] p-1.5 rounded-lg bg-surface-container-low flex flex-col justify-between hover:bg-surface-container transition-all cursor-pointer">
|
|
<span class="font-label-data text-label-data text-on-surface-variant">23</span>
|
|
</div>
|
|
<div class="min-h-[96px] p-1.5 rounded-lg bg-surface-container-low flex flex-col justify-between hover:bg-surface-container transition-all cursor-pointer">
|
|
<span class="font-label-data text-label-data text-on-surface-variant">24</span>
|
|
</div>
|
|
<div class="min-h-[96px] p-1.5 rounded-lg bg-surface-container-low flex flex-col justify-between hover:bg-surface-container transition-all cursor-pointer">
|
|
<span class="font-label-data text-label-data text-on-surface-variant">25</span>
|
|
</div>
|
|
<!-- Oct 26: PCH Sunset Glide -->
|
|
<div class="min-h-[96px] p-1.5 rounded-lg bg-surface-container flex flex-col justify-between hover:bg-surface-container-high transition-all cursor-pointer">
|
|
<div class="flex items-center justify-between">
|
|
<span class="font-label-data text-label-data text-primary font-bold">26</span>
|
|
<span class="font-label-caption text-label-caption uppercase text-secondary">STAGED</span>
|
|
</div>
|
|
<div class="p-1 rounded bg-surface-container-high text-on-surface flex flex-col gap-0.5">
|
|
<span class="font-headline-sm text-headline-sm text-xs truncate leading-tight">PCH Sunset Glide</span>
|
|
<div class="flex items-center justify-between text-outline font-label-caption text-label-caption">
|
|
<span class="text-secondary font-semibold">PACE 2</span>
|
|
<span class="text-on-surface-variant">24 RSVPs</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="min-h-[96px] p-1.5 rounded-lg bg-surface-container-low flex flex-col justify-between hover:bg-surface-container transition-all cursor-pointer">
|
|
<span class="font-label-data text-label-data text-primary">27</span>
|
|
</div>
|
|
<!-- Week 5: Oct 28 to Nov 03 (Nov 02 has Sonora Pass High Elevation) -->
|
|
<div class="min-h-[96px] p-1.5 rounded-lg bg-surface-container-low flex flex-col justify-between hover:bg-surface-container transition-all cursor-pointer">
|
|
<span class="font-label-data text-label-data text-on-surface-variant">28</span>
|
|
</div>
|
|
<div class="min-h-[96px] p-1.5 rounded-lg bg-surface-container-low flex flex-col justify-between hover:bg-surface-container transition-all cursor-pointer">
|
|
<span class="font-label-data text-label-data text-on-surface-variant">29</span>
|
|
</div>
|
|
<div class="min-h-[96px] p-1.5 rounded-lg bg-surface-container-low flex flex-col justify-between hover:bg-surface-container transition-all cursor-pointer">
|
|
<span class="font-label-data text-label-data text-on-surface-variant">30</span>
|
|
</div>
|
|
<div class="min-h-[96px] p-1.5 rounded-lg bg-surface-container-low flex flex-col justify-between hover:bg-surface-container transition-all cursor-pointer">
|
|
<span class="font-label-data text-label-data text-on-surface-variant">31</span>
|
|
</div>
|
|
<!-- Nov 01 -->
|
|
<div class="min-h-[96px] p-1.5 rounded-lg bg-surface-container-low/50 flex flex-col justify-between hover:bg-surface-container transition-all cursor-pointer">
|
|
<span class="font-label-data text-label-data text-outline">NOV 01</span>
|
|
</div>
|
|
<!-- Nov 02: Sonora Pass -->
|
|
<div class="min-h-[96px] p-1.5 rounded-lg bg-surface-container flex flex-col justify-between hover:bg-surface-container-high transition-all cursor-pointer">
|
|
<div class="flex items-center justify-between">
|
|
<span class="font-label-data text-label-data text-primary font-bold">02</span>
|
|
<span class="font-label-caption text-label-caption uppercase text-secondary">STAGED</span>
|
|
</div>
|
|
<div class="p-1 rounded bg-surface-container-high text-on-surface flex flex-col gap-0.5">
|
|
<span class="font-headline-sm text-headline-sm text-xs truncate leading-tight">Sonora Pass Loop</span>
|
|
<div class="flex items-center justify-between text-outline font-label-caption text-label-caption">
|
|
<span class="text-secondary font-semibold">PACE 3</span>
|
|
<span class="text-on-surface-variant">12 RSVPs</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Nov 03 -->
|
|
<div class="min-h-[96px] p-1.5 rounded-lg bg-surface-container-low/50 flex flex-col justify-between hover:bg-surface-container transition-all cursor-pointer">
|
|
<span class="font-label-data text-label-data text-outline">03</span>
|
|
</div>
|
|
</div>
|
|
<!-- Quick Telemetry Status Footnote -->
|
|
<div class="flex items-center justify-between pt-space-sm px-space-xs text-outline font-label-data text-label-data">
|
|
<span>AUTO-REFRESH: 10 SECONDS</span>
|
|
<span class="text-primary-container">ALL TIME ZONES NORMALIZED TO PST (UTC-8)</span>
|
|
</div>
|
|
</div>
|
|
<!-- Right Column: Card Chassis Detailing the Selected Ride (5 cols) -->
|
|
<div class="lg:col-span-5 flex flex-col gap-space-md">
|
|
<!-- Primary Mission Briefing Chassis -->
|
|
<div class="bg-surface-container-low rounded-xl p-space-lg shadow-xl relative overflow-hidden">
|
|
<!-- Glow Backing Element -->
|
|
<div class="absolute -top-12 -right-12 w-48 h-48 bg-primary-container/10 rounded-full blur-3xl pointer-events-none"></div>
|
|
<!-- Top Header & Ride Title -->
|
|
<div class="flex flex-col gap-space-xs mb-space-md">
|
|
<div class="flex items-center justify-between">
|
|
<span class="font-label-data text-label-data text-primary-container uppercase tracking-widest flex items-center gap-1.5">
|
|
<span class="w-2 h-2 rounded-full bg-primary-container animate-pulse"></span>
|
|
TARGET MISSION DISPATCH
|
|
</span>
|
|
<div class="flex items-center gap-1 px-space-sm py-0.5 rounded bg-error-container/30 text-error font-label-data text-label-data">
|
|
<span class="material-symbols-outlined text-xs">warning</span>
|
|
<span>TECHNICAL GRADE</span>
|
|
</div>
|
|
</div>
|
|
<h2 class="font-headline-lg text-headline-lg text-on-surface uppercase tracking-tight">Mulholland Apex Run — Stage 2</h2>
|
|
<div class="flex items-center gap-space-md text-on-surface-variant font-body-md text-body-md">
|
|
<span class="flex items-center gap-1"><span class="material-symbols-outlined text-sm text-primary">event</span> Saturday, Oct 19, 2024</span>
|
|
<span class="flex items-center gap-1 text-primary-container font-semibold"><span class="material-symbols-outlined text-sm">schedule</span> KSU: 07:30 AM PST</span>
|
|
</div>
|
|
</div>
|
|
<!-- Staging GPS Coordinate Panel -->
|
|
<div class="p-space-md rounded-lg bg-surface-container-lowest flex items-center justify-between mb-space-md shadow-inner">
|
|
<div class="flex items-center gap-space-sm">
|
|
<div class="p-2 rounded bg-surface-container-high text-primary-container">
|
|
<span class="material-symbols-outlined text-base">pin_drop</span>
|
|
</div>
|
|
<div class="flex flex-col">
|
|
<span class="font-label-caption text-label-caption text-outline uppercase">STAGING COORDINATES</span>
|
|
<span class="font-label-data text-label-data text-on-surface">34.0953° N, 118.8241° W</span>
|
|
<span class="font-body-md text-body-md text-xs text-on-surface-variant">The Rock Store Outpost (Mulholland Hwy)</span>
|
|
</div>
|
|
</div>
|
|
<button class="px-space-md py-1.5 rounded bg-surface-container-high hover:bg-surface-container-highest text-primary font-label-data text-label-data uppercase transition-all">
|
|
NAV LOCK
|
|
</button>
|
|
</div>
|
|
<!-- Route Specs Bento Strip -->
|
|
<div class="grid grid-cols-3 gap-space-sm mb-space-lg">
|
|
<div class="p-space-sm rounded-lg bg-surface-container flex flex-col">
|
|
<span class="font-label-caption text-label-caption text-outline uppercase">DISTANCE</span>
|
|
<span class="font-telemetry-metric-md text-telemetry-metric-md text-on-surface">54.2</span>
|
|
<span class="font-label-data text-label-data text-on-surface-variant uppercase text-[10px]">STATUTE MILES</span>
|
|
</div>
|
|
<div class="p-space-sm rounded-lg bg-surface-container flex flex-col">
|
|
<span class="font-label-caption text-label-caption text-outline uppercase">CLIMB VERT</span>
|
|
<span class="font-telemetry-metric-md text-telemetry-metric-md text-primary">+4,200</span>
|
|
<span class="font-label-data text-label-data text-on-surface-variant uppercase text-[10px]">TOTAL FEET</span>
|
|
</div>
|
|
<div class="p-space-sm rounded-lg bg-surface-container flex flex-col">
|
|
<span class="font-label-caption text-label-caption text-outline uppercase">RATING</span>
|
|
<span class="font-telemetry-metric-md text-telemetry-metric-md text-error-container text-error">48°+</span>
|
|
<span class="font-label-data text-label-data text-on-surface-variant uppercase text-[10px]">PEAK LEAN ARC</span>
|
|
</div>
|
|
</div>
|
|
<!-- Officer Command Assignments -->
|
|
<div class="flex flex-col gap-space-sm mb-space-lg">
|
|
<div class="flex items-center justify-between">
|
|
<span class="font-label-data text-label-data text-outline uppercase">COMMAND ROSTER & SWEEP</span>
|
|
<span class="font-label-caption text-label-caption text-primary uppercase">MESH LOCKED</span>
|
|
</div>
|
|
<!-- Road Captain Lead -->
|
|
<div class="p-space-sm rounded-lg bg-surface-container flex items-center justify-between">
|
|
<div class="flex items-center gap-space-sm">
|
|
<div class="w-9 h-9 rounded-full bg-surface-container-high flex items-center justify-center font-headline-sm text-headline-sm text-xs text-primary">
|
|
DL
|
|
</div>
|
|
<div class="flex flex-col">
|
|
<div class="flex items-center gap-1.5">
|
|
<span class="font-headline-sm text-headline-sm text-xs text-on-surface">@Dave_Lead</span>
|
|
<span class="font-label-caption text-label-caption px-1 rounded bg-primary-container text-on-primary-container uppercase font-bold text-[9px]">LEAD</span>
|
|
</div>
|
|
<span class="font-label-data text-label-data text-xs text-on-surface-variant">Ducati Panigale V4 S</span>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center gap-1 text-primary text-xs font-label-data">
|
|
<span class="material-symbols-outlined text-sm">satellite_alt</span>
|
|
<span class="hidden sm:inline">VERIFIED NAV LOCK</span>
|
|
</div>
|
|
</div>
|
|
<!-- Tail Gunner Sweep -->
|
|
<div class="p-space-sm rounded-lg bg-surface-container flex items-center justify-between">
|
|
<div class="flex items-center gap-space-sm">
|
|
<div class="w-9 h-9 rounded-full bg-surface-container-high flex items-center justify-center font-headline-sm text-headline-sm text-xs text-secondary">
|
|
SS
|
|
</div>
|
|
<div class="flex flex-col">
|
|
<div class="flex items-center gap-1.5">
|
|
<span class="font-headline-sm text-headline-sm text-xs text-on-surface">@Sarah_Sweep</span>
|
|
<span class="font-label-caption text-label-caption px-1 rounded bg-secondary-container text-on-secondary-container uppercase font-bold text-[9px]">SWEEP</span>
|
|
</div>
|
|
<span class="font-label-data text-label-data text-xs text-on-surface-variant">KTM 890 Duke R</span>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center gap-1 text-secondary text-xs font-label-data">
|
|
<span class="material-symbols-outlined text-sm">medical_services</span>
|
|
<span class="hidden sm:inline">FIRST AID / TOOL KIT</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Mandatory Safety Telemetry Checklist -->
|
|
<div class="flex flex-col gap-space-xs mb-space-lg p-space-md rounded-lg bg-surface-container-lowest">
|
|
<span class="font-label-data text-label-data text-outline uppercase mb-1">MANDATORY PROTOCOL GATEWAY</span>
|
|
<label class="flex items-center gap-space-sm cursor-pointer">
|
|
<div class="w-5 h-5 rounded bg-primary-container text-on-primary-container flex items-center justify-center">
|
|
<span class="material-symbols-outlined text-sm font-bold">check</span>
|
|
</div>
|
|
<span class="font-body-md text-body-md text-xs text-on-surface">Full One-Piece or 2-Piece Zip Leather / Armored Textile</span>
|
|
</label>
|
|
<label class="flex items-center gap-space-sm cursor-pointer mt-1">
|
|
<div class="w-5 h-5 rounded bg-primary-container text-on-primary-container flex items-center justify-center">
|
|
<span class="material-symbols-outlined text-sm font-bold">check</span>
|
|
</div>
|
|
<span class="font-body-md text-body-md text-xs text-on-surface">20Hz Telemetry Sensor Paired & Calibrated</span>
|
|
</label>
|
|
<label class="flex items-center gap-space-sm cursor-pointer mt-1">
|
|
<div class="w-5 h-5 rounded bg-primary-container text-on-primary-container flex items-center justify-center">
|
|
<span class="material-symbols-outlined text-sm font-bold">check</span>
|
|
</div>
|
|
<span class="font-body-md text-body-md text-xs text-on-surface">RF Mesh Radio Tuned to Channel CH-04</span>
|
|
</label>
|
|
</div>
|
|
<!-- Confirmed Attendee Roster -->
|
|
<div class="flex flex-col gap-space-sm mb-space-lg">
|
|
<div class="flex items-center justify-between">
|
|
<span class="font-label-data text-label-data text-outline uppercase">CONFIRMED ROSTER (18 CONFIRMED / 2 WAITLIST)</span>
|
|
<span class="font-label-data text-label-data text-primary">CAP: 20</span>
|
|
</div>
|
|
<div class="flex flex-wrap gap-2">
|
|
<!-- Rider Chip 1 -->
|
|
<div class="flex items-center gap-space-xs px-space-sm py-1 rounded-full bg-surface-container-high">
|
|
<span class="w-2 h-2 rounded-full bg-primary-container"></span>
|
|
<span class="font-headline-sm text-headline-sm text-xs text-on-surface">@ApexMarcus</span>
|
|
<span class="font-label-caption text-label-caption text-outline">CHECKED IN</span>
|
|
</div>
|
|
<!-- Rider Chip 2 -->
|
|
<div class="flex items-center gap-space-xs px-space-sm py-1 rounded-full bg-surface-container-high">
|
|
<span class="w-2 h-2 rounded-full bg-primary-container"></span>
|
|
<span class="font-headline-sm text-headline-sm text-xs text-on-surface">@Dave_Lead</span>
|
|
<span class="font-label-caption text-label-caption text-outline">CHECKED IN</span>
|
|
</div>
|
|
<!-- Rider Chip 3 -->
|
|
<div class="flex items-center gap-space-xs px-space-sm py-1 rounded-full bg-surface-container-high">
|
|
<span class="w-2 h-2 rounded-full bg-primary-container"></span>
|
|
<span class="font-headline-sm text-headline-sm text-xs text-on-surface">@Sarah_Sweep</span>
|
|
<span class="font-label-caption text-label-caption text-outline">CHECKED IN</span>
|
|
</div>
|
|
<!-- Rider Chip 4 -->
|
|
<div class="flex items-center gap-space-xs px-space-sm py-1 rounded-full bg-surface-container-high">
|
|
<span class="w-2 h-2 rounded-full bg-primary-container"></span>
|
|
<span class="font-headline-sm text-headline-sm text-xs text-on-surface">@KevBL</span>
|
|
<span class="font-label-caption text-label-caption text-outline">CHECKED IN</span>
|
|
</div>
|
|
<!-- Rider Chip 5 -->
|
|
<div class="flex items-center gap-space-xs px-space-sm py-1 rounded-full bg-surface-container-high">
|
|
<span class="w-2 h-2 rounded-full bg-secondary"></span>
|
|
<span class="font-headline-sm text-headline-sm text-xs text-on-surface">@ElenaADV</span>
|
|
<span class="font-label-caption text-label-caption text-secondary">PENDING KSU</span>
|
|
</div>
|
|
<div class="flex items-center px-space-sm py-1 rounded-full bg-surface-container-lowest text-outline font-label-data text-label-data">
|
|
+13 OTHERS
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Master Action Controls -->
|
|
<div class="flex flex-col sm:flex-row gap-space-sm">
|
|
<button class="flex-1 min-h-[48px] px-space-md rounded-lg bg-surface-container-high hover:bg-surface-container-highest text-on-surface font-headline-sm text-headline-sm text-xs tracking-wider uppercase transition-all flex items-center justify-center gap-space-xs shadow-sm">
|
|
<span class="material-symbols-outlined text-sm text-primary">hub</span>
|
|
<span>Manage Staging Mesh</span>
|
|
</button>
|
|
<button class="flex-1 min-h-[48px] px-space-md rounded-lg bg-primary-container hover:bg-primary-fixed-dim text-on-primary-container font-headline-sm text-headline-sm text-xs tracking-wider uppercase transition-all flex items-center justify-center gap-space-xs font-bold shadow-[0_0_12px_rgba(0,229,255,0.3)]">
|
|
<span class="material-symbols-outlined text-sm">download</span>
|
|
<span>Export GPX & Cue Sheet</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<!-- Quick Map Staging Elevation Profile Card -->
|
|
<div class="bg-surface-container-lowest p-space-md rounded-xl shadow-md flex flex-col gap-space-sm">
|
|
<div class="flex items-center justify-between">
|
|
<span class="font-label-data text-label-data text-outline uppercase">TELEMETRY ELEVATION PROFILE</span>
|
|
<span class="font-label-data text-label-data text-primary">GRADE: 9.8% MAX</span>
|
|
</div>
|
|
<!-- Inline Elevation SVG Sparkline -->
|
|
<div class="h-20 w-full bg-surface-container-low rounded-lg p-2 flex items-end">
|
|
<svg class="w-full h-full text-primary-container" fill="none" preserveaspectratio="none" viewbox="0 0 300 60">
|
|
<defs>
|
|
<lineargradient id="elevationGrad" x1="0" x2="0" y1="0" y2="1">
|
|
<stop offset="0%" stop-color="#00e5ff" stop-opacity="0.35"></stop>
|
|
<stop offset="100%" stop-color="#00e5ff" stop-opacity="0.0"></stop>
|
|
</lineargradient>
|
|
</defs>
|
|
<path d="M0,50 Q40,45 70,30 T140,15 T210,38 T260,10 L300,42 L300,60 L0,60 Z" fill="url(#elevationGrad)"></path>
|
|
<path d="M0,50 Q40,45 70,30 T140,15 T210,38 T260,10 L300,42" stroke="currentColor" stroke-linecap="round" stroke-width="2"></path>
|
|
<circle class="animate-ping" cx="140" cy="15" fill="#00e5ff" r="3"></circle>
|
|
<circle cx="140" cy="15" fill="#00e5ff" r="3"></circle>
|
|
</svg>
|
|
</div>
|
|
<div class="flex items-center justify-between text-on-surface-variant font-label-caption text-label-caption">
|
|
<span>START: 420 FT (COAST)</span>
|
|
<span class="text-primary-container">SUMMIT: 4,620 FT (TOPANGA SADDLE)</span>
|
|
<span>END: 310 FT (MALIBU PIER)</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div></main></div></body></html> |