548 lines
32 KiB
HTML
548 lines
32 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 - Rider Profile @ApexMarcus</title>
|
|
<link href="https://fonts.googleapis.com" rel="preconnect"/>
|
|
<link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect"/>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&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"/>
|
|
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
|
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
|
<script id="tailwind-config">
|
|
tailwind.config = {
|
|
darkMode: "class",
|
|
theme: {
|
|
extend: {
|
|
"colors": {
|
|
"tertiary-fixed": "#e9ddff",
|
|
"surface-container-low": "#181c21",
|
|
"on-primary-container": "#00626e",
|
|
"on-secondary-fixed": "#00174b",
|
|
"surface-container": "#1d2025",
|
|
"secondary-container": "#0053db",
|
|
"tertiary-fixed-dim": "#d0bcff",
|
|
"on-secondary-container": "#cdd7ff",
|
|
"inverse-on-surface": "#2d3036",
|
|
"on-secondary-fixed-variant": "#003ea8",
|
|
"on-secondary": "#002a78",
|
|
"secondary-fixed-dim": "#b4c5ff",
|
|
"on-primary-fixed": "#001f24",
|
|
"primary-container": "#00e5ff",
|
|
"error": "#ffb4ab",
|
|
"outline-variant": "#3b494c",
|
|
"surface": "#101419",
|
|
"primary-fixed": "#9cf0ff",
|
|
"surface-variant": "#32353b",
|
|
"surface-bright": "#36393f",
|
|
"on-tertiary-container": "#6834d1",
|
|
"on-error-container": "#ffdad6",
|
|
"secondary": "#b4c5ff",
|
|
"on-tertiary-fixed": "#23005c",
|
|
"tertiary-container": "#d9c8ff",
|
|
"outline": "#849396",
|
|
"on-error": "#690005",
|
|
"tertiary": "#f2e9ff",
|
|
"primary": "#c3f5ff",
|
|
"on-tertiary": "#3c0091",
|
|
"inverse-surface": "#e0e2ea",
|
|
"surface-tint": "#00daf3",
|
|
"on-surface-variant": "#bac9cc",
|
|
"surface-container-high": "#272a30",
|
|
"on-surface": "#e0e2ea",
|
|
"on-primary": "#00363d",
|
|
"background": "#101419",
|
|
"secondary-fixed": "#dbe1ff",
|
|
"primary-fixed-dim": "#00daf3",
|
|
"on-primary-fixed-variant": "#004f58",
|
|
"surface-container-lowest": "#0b0e13",
|
|
"surface-container-highest": "#32353b",
|
|
"on-tertiary-fixed-variant": "#5516be",
|
|
"inverse-primary": "#006875",
|
|
"surface-dim": "#101419",
|
|
"on-background": "#e0e2ea",
|
|
"error-container": "#93000a"
|
|
},
|
|
"borderRadius": {
|
|
"DEFAULT": "0.25rem",
|
|
"lg": "0.5rem",
|
|
"xl": "0.75rem",
|
|
"full": "9999px"
|
|
},
|
|
"spacing": {
|
|
"margin": "1rem",
|
|
"space-xl": "2rem",
|
|
"space-lg": "1.5rem",
|
|
"margin-lg": "2rem",
|
|
"space-sm": "0.5rem",
|
|
"space-md": "1rem",
|
|
"space-xs": "0.25rem",
|
|
"gutter": "1rem",
|
|
"gutter-lg": "1.5rem"
|
|
},
|
|
"fontFamily": {
|
|
"telemetry-metric-md": ["JetBrains Mono"],
|
|
"label-caption": ["Inter"],
|
|
"headline-md": ["Space Grotesk"],
|
|
"body-lg": ["Inter"],
|
|
"label-data": ["JetBrains Mono"],
|
|
"headline-sm": ["Space Grotesk"],
|
|
"headline-lg": ["Space Grotesk"],
|
|
"body-md": ["Inter"],
|
|
"display-hero-mobile": ["Space Grotesk"],
|
|
"telemetry-metric-lg": ["JetBrains Mono"],
|
|
"telemetry-metric-lg-mobile": ["JetBrains Mono"],
|
|
"display-hero": ["Space Grotesk"]
|
|
},
|
|
"fontSize": {
|
|
"telemetry-metric-md": ["28px", { "lineHeight": "32px", "letterSpacing": "-0.02em", "fontWeight": "600" }],
|
|
"label-caption": ["11px", { "lineHeight": "14px", "letterSpacing": "0.05em", "fontWeight": "600" }],
|
|
"headline-md": ["24px", { "lineHeight": "32px", "letterSpacing": "-0.01em", "fontWeight": "600" }],
|
|
"body-lg": ["16px", { "lineHeight": "24px", "fontWeight": "500" }],
|
|
"label-data": ["12px", { "lineHeight": "16px", "letterSpacing": "0.08em", "fontWeight": "600" }],
|
|
"headline-sm": ["20px", { "lineHeight": "28px", "fontWeight": "600" }],
|
|
"headline-lg": ["32px", { "lineHeight": "40px", "letterSpacing": "-0.02em", "fontWeight": "700" }],
|
|
"body-md": ["14px", { "lineHeight": "20px", "fontWeight": "400" }],
|
|
"display-hero-mobile": ["40px", { "lineHeight": "44px", "letterSpacing": "-0.02em", "fontWeight": "700" }],
|
|
"telemetry-metric-lg": ["48px", { "lineHeight": "48px", "letterSpacing": "-0.04em", "fontWeight": "700" }],
|
|
"telemetry-metric-lg-mobile": ["36px", { "lineHeight": "36px", "letterSpacing": "-0.03em", "fontWeight": "700" }],
|
|
"display-hero": ["56px", { "lineHeight": "60px", "letterSpacing": "-0.03em", "fontWeight": "700" }]
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style>
|
|
.material-symbols-outlined {
|
|
font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 24;
|
|
}
|
|
.cyan-glow {
|
|
box-shadow: 0 0 16px rgba(0, 229, 255, 0.35);
|
|
}
|
|
.cyan-border-glow {
|
|
box-shadow: inset 0 0 10px rgba(0, 229, 255, 0.2), 0 0 12px rgba(0, 229, 255, 0.25);
|
|
}
|
|
.hud-clip-tactical {
|
|
clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
|
|
}
|
|
/* Hide scrollbar for tactical horizontal swipe */
|
|
.no-scrollbar::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
.no-scrollbar {
|
|
-ms-overflow-style: none;
|
|
scrollbar-width: none;
|
|
}
|
|
</style>
|
|
<style>
|
|
body {
|
|
min-height: max(884px, 100dvh);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-surface-container-lowest text-on-surface antialiased min-h-screen pb-24 selection:bg-primary-container selection:text-on-primary-fixed">
|
|
<!-- TOP APP BAR (Shared Component Anchor) -->
|
|
<header class="fixed top-0 left-0 w-full z-50 flex justify-between items-center px-gutter h-14 bg-surface-container-lowest dark:bg-surface-container-lowest border-b border-outline-variant dark:border-outline-variant">
|
|
<div class="flex items-center gap-2">
|
|
<span class="material-symbols-outlined text-primary-container animate-pulse text-[20px]" data-icon="sensors">sensors</span>
|
|
<span class="text-headline-sm font-headline-sm font-bold tracking-wider text-primary-container dark:text-primary-container uppercase">MOTORSIGNAL HUD</span>
|
|
</div>
|
|
<!-- Top Telemetry Status Stream -->
|
|
<div class="flex items-center space-x-3 text-label-caption font-label-caption text-on-surface-variant">
|
|
<span class="flex items-center gap-1 font-label-data text-primary-fixed">
|
|
<span class="w-1.5 h-1.5 rounded-full bg-primary-container inline-block"></span>
|
|
20Hz GNSS
|
|
</span>
|
|
<span class="hidden sm:inline-flex items-center gap-1">
|
|
<span class="material-symbols-outlined text-[16px]" data-icon="battery_charging_full">battery_charging_full</span>
|
|
98%
|
|
</span>
|
|
<button aria-label="Alerts" class="flex items-center justify-center w-8 h-8 rounded text-on-surface-variant hover:text-primary-container active:scale-95 transition-transform">
|
|
<span class="material-symbols-outlined text-[20px]" data-icon="warning">warning</span>
|
|
</button>
|
|
</div>
|
|
</header>
|
|
<!-- MAIN VIEWPORT -->
|
|
<main class="w-full max-w-md mx-auto pt-14 px-0">
|
|
<!-- CANYON PASS BANNER & TACTICAL PROFILE HEADER -->
|
|
<section class="relative w-full">
|
|
<!-- High-altitude scenic pass header image -->
|
|
<div class="relative w-full h-44 bg-surface-container-low overflow-hidden">
|
|
<img alt="Canyon Pass Route" class="w-full h-full object-cover filter brightness-[0.65] contrast-[1.25]" data-alt="Cinematic high-angle view of a twisting mountain canyon motorcycle pass at blue dusk with neon light trails. The dark asphalt weaves aggressively through rugged cliffs under deep carbon-blue skies with dramatic electric cyan atmospheric road signs and subtle fog textures. A mood of high-velocity precision motorsport and tactical isolation." src="https://lh3.googleusercontent.com/aida-public/AB6AXuDg6uqYe1INH3jVlK3NO9UOVUtIJwc88799nDRWkLCT7tO4-hHAm1TwT-F9sbHEbo0csUpOha_ccrf7y-JTHVY9McIdFDRnXVZqQBZZ5_LQjEztyElPepN3QsK7K1WOBTKwtuIxmRvEqNfRaUvz8jYENkfgJUMN4phKiwaVgd8yXwcCprBXPWDHNITmlz0m9_UvfM-ImgLcOGesAarWLFf-0azWgELYeDvI2o5NRy3p_6-GswX0MRZeDAlmvUDkAUZn0qc92FlVacU"/>
|
|
<div class="absolute inset-0 bg-gradient-to-b from-surface-container-lowest/20 via-surface-container-lowest/60 to-surface-container-lowest"></div>
|
|
<div class="absolute top-3 right-3 flex items-center gap-1.5 px-2.5 py-1 bg-surface-container-lowest/80 backdrop-blur-md rounded border border-outline-variant">
|
|
<span class="material-symbols-outlined text-[14px] text-primary-container" data-icon="route">route</span>
|
|
<span class="text-label-caption font-label-caption text-on-surface tracking-wider">CA-35 NORTH PASS</span>
|
|
</div>
|
|
</div>
|
|
<!-- AVATAR & IDENTITY CLUSTER -->
|
|
<div class="px-gutter -mt-16 relative z-10 flex flex-col items-start">
|
|
<div class="flex items-end justify-between w-full">
|
|
<!-- Cyber HUD Avatar with Telemetry Ring -->
|
|
<div class="relative group">
|
|
<div class="w-24 h-24 rounded-full p-[3px] bg-gradient-to-tr from-primary-container via-outline-variant to-primary-container/20 cyan-glow">
|
|
<div class="w-full h-full rounded-full overflow-hidden bg-surface-container-low border border-outline-variant relative">
|
|
<img alt="@ApexMarcus Helmet Avatar" class="w-full h-full object-cover" data-alt="High-performance carbon-fiber motorcycle helmet with active holographic heads-up display illuminated on the tinted visor. Sharp studio lighting reveals deep woven carbon texture, sleek aerodynamic spoilers, and vivid glowing electric cyan telemetry gauges and rev curves projected directly onto the visor glass against a void-black background." src="https://lh3.googleusercontent.com/aida-public/AB6AXuBZU8IAWnMbn4ILpg5r9RfA2Oh6_jTOhB4ZptitIIJDgIqeYl7CGKxJTU-umTRA3UegfMrrWakhn7q7Q5qZMIpIYGp5_YIzh6FPB0h_p8EJXPtlfo9Tw_YNXSmow5U2ocs93JhBWNDkeRF5XbUjIHExLn3h7FHUwLtInRBm5v_ih0HF6XCJJKOkbwMMVR0uurXJPlQjPD_oEQaWc4UkVWRiCLmj1XqdOFbISPZgDnn73vIJtaQSIKwGBngCdOCuzOq84U8eKByZN8M"/>
|
|
</div>
|
|
</div>
|
|
<!-- Live Status Beacon -->
|
|
<div class="absolute bottom-1 right-1 w-5 h-5 rounded-full bg-surface-container-lowest flex items-center justify-center p-0.5">
|
|
<span class="w-3.5 h-3.5 rounded-full bg-primary-container animate-pulse flex items-center justify-center">
|
|
<span class="w-1.5 h-1.5 rounded-full bg-surface-container-lowest"></span>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<!-- Quick Action Buttons Row (Glove Friendly, 48px+ Touch Bounds) -->
|
|
<div class="flex items-center gap-2 mb-1">
|
|
<button class="h-12 px-5 bg-primary-container text-on-primary-fixed font-telemetry-metric-md text-body-md rounded font-bold tracking-wide flex items-center justify-center gap-1.5 cyan-glow active:scale-95 duration-100 ease-out transition-all">
|
|
<span class="material-symbols-outlined text-[20px]" data-icon="person_add">person_add</span>
|
|
<span>FOLLOW</span>
|
|
</button>
|
|
<button class="h-12 w-12 bg-surface-container border border-outline-variant text-on-surface hover:text-primary-container hover:border-primary-container flex items-center justify-center rounded active:scale-95 duration-100 ease-out">
|
|
<span class="material-symbols-outlined text-[20px]" data-icon="chat_bubble">chat_bubble</span>
|
|
</button>
|
|
<button class="h-12 w-12 bg-surface-container border border-outline-variant text-on-surface hover:text-primary-container hover:border-primary-container flex items-center justify-center rounded active:scale-95 duration-100 ease-out">
|
|
<span class="material-symbols-outlined text-[20px]" data-icon="share">share</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<!-- Rider Names & Badges -->
|
|
<div class="mt-3 w-full">
|
|
<div class="flex items-center gap-2 flex-wrap">
|
|
<h1 class="text-headline-md font-headline-md font-bold text-on-surface flex items-center gap-1.5">
|
|
@ApexMarcus
|
|
<span class="material-symbols-outlined text-primary-container text-[20px]" data-icon="verified" data-weight="fill">verified</span>
|
|
</h1>
|
|
<span class="px-2 py-0.5 text-label-caption font-label-data bg-primary-container/15 text-primary-container border border-primary-container/40 rounded-full font-bold uppercase tracking-wider">
|
|
PRO RIDER
|
|
</span>
|
|
</div>
|
|
<!-- Club & Rank Tag -->
|
|
<div class="flex items-center gap-1.5 mt-1.5 text-on-surface-variant font-body-md text-body-md">
|
|
<span class="material-symbols-outlined text-secondary text-[18px]" data-icon="shield">shield</span>
|
|
<span class="font-medium text-on-surface">Pacific Coast Riders MC</span>
|
|
<span class="text-outline-variant">•</span>
|
|
<span class="text-secondary font-label-data text-label-data">ROAD CAPTAIN</span>
|
|
</div>
|
|
<!-- Bio -->
|
|
<p class="mt-2.5 text-body-md font-body-md text-on-surface-variant leading-relaxed">
|
|
Track coach & canyon carver. 🏁 Panigale V4 S & MT-09 SP. Dedicated to clean apexes, zero-drift telemetry, and group pack synchronization.
|
|
</p>
|
|
<!-- Social Metrics Strip -->
|
|
<div class="grid grid-cols-3 gap-2 mt-4 pt-3 border-t border-outline-variant/60">
|
|
<div class="bg-surface-container-low p-2.5 rounded border border-outline-variant">
|
|
<p class="font-telemetry-metric-md text-headline-sm text-on-surface font-bold">1,420</p>
|
|
<p class="text-label-caption font-label-caption text-on-surface-variant uppercase tracking-wider">Followers</p>
|
|
</div>
|
|
<div class="bg-surface-container-low p-2.5 rounded border border-outline-variant">
|
|
<p class="font-telemetry-metric-md text-headline-sm text-on-surface font-bold">312</p>
|
|
<p class="text-label-caption font-label-caption text-on-surface-variant uppercase tracking-wider">Following</p>
|
|
</div>
|
|
<div class="bg-surface-container-low p-2.5 rounded border border-outline-variant">
|
|
<p class="font-telemetry-metric-md text-headline-sm text-on-surface font-bold">48</p>
|
|
<p class="text-label-caption font-label-caption text-on-surface-variant uppercase tracking-wider">Shared Rides</p>
|
|
</div>
|
|
</div>
|
|
<!-- Highlighted Telemetry Benchmark Banner -->
|
|
<div class="mt-3 p-3 bg-surface-container border border-primary-container/30 rounded-lg flex items-center justify-between cyan-border-glow">
|
|
<div class="flex items-center gap-2.5">
|
|
<div class="w-8 h-8 rounded bg-primary-container/10 border border-primary-container/30 flex items-center justify-center text-primary-container">
|
|
<span class="material-symbols-outlined text-[18px]" data-icon="screen_rotation_alt">screen_rotation_alt</span>
|
|
</div>
|
|
<div>
|
|
<span class="text-label-caption font-label-caption text-on-surface-variant uppercase tracking-wider block">Verified Max Lean</span>
|
|
<span class="font-telemetry-metric-md text-headline-sm text-primary-container font-bold">54.2°</span>
|
|
</div>
|
|
</div>
|
|
<div class="h-8 w-px bg-outline-variant"></div>
|
|
<div class="flex items-center gap-2.5">
|
|
<div class="w-8 h-8 rounded bg-surface-container-high border border-outline-variant flex items-center justify-center text-secondary">
|
|
<span class="material-symbols-outlined text-[18px]" data-icon="hub">hub</span>
|
|
</div>
|
|
<div>
|
|
<span class="text-label-caption font-label-caption text-on-surface-variant uppercase tracking-wider block">Cohesion Score</span>
|
|
<span class="font-telemetry-metric-md text-headline-sm text-secondary font-bold">99.4%</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- CONTENT SECTIONS -->
|
|
<div class="px-gutter space-y-6 mt-6">
|
|
<!-- SECTION 1: MOTORCYCLE STABLE -->
|
|
<section>
|
|
<div class="flex items-center justify-between mb-3">
|
|
<div class="flex items-center gap-2">
|
|
<span class="material-symbols-outlined text-primary-container text-[20px]" data-icon="two_wheeler">two_wheeler</span>
|
|
<h2 class="text-headline-sm font-headline-sm font-bold uppercase tracking-wider text-on-surface">Motorcycle Stable</h2>
|
|
</div>
|
|
<span class="text-label-caption font-label-data px-2 py-0.5 rounded bg-surface-container-high border border-outline-variant text-primary-fixed">2 Units Active</span>
|
|
</div>
|
|
<div class="space-y-3">
|
|
<!-- Bike Card 1 (Panigale) -->
|
|
<div class="bg-surface-container-low border border-outline-variant rounded-xl p-3.5 relative overflow-hidden transition-all hover:border-primary-container/50">
|
|
<div class="flex justify-between items-start">
|
|
<div>
|
|
<div class="flex items-center gap-2">
|
|
<h3 class="font-headline-sm text-body-lg font-bold text-on-surface">2024 Ducati Panigale V4 S</h3>
|
|
<span class="w-2 h-2 rounded-full bg-primary-container"></span>
|
|
</div>
|
|
<p class="text-label-data font-label-data text-on-surface-variant text-[11px] mt-0.5">Desmosedici Stradale SP2 • 1,103 cc</p>
|
|
</div>
|
|
<span class="px-2 py-1 rounded text-label-caption font-label-caption bg-surface-container-highest text-primary-container font-semibold uppercase">Primary Track</span>
|
|
</div>
|
|
<!-- Specs Grid -->
|
|
<div class="grid grid-cols-3 gap-2 mt-3.5 pt-3 border-t border-outline-variant/60 font-label-data">
|
|
<div>
|
|
<span class="text-label-caption text-on-surface-variant block uppercase">Odometer</span>
|
|
<span class="text-body-md font-bold text-on-surface">6,420 MI</span>
|
|
</div>
|
|
<div>
|
|
<span class="text-label-caption text-on-surface-variant block uppercase">Telemetry</span>
|
|
<span class="text-body-md font-bold text-primary-container">CAN 50Hz</span>
|
|
</div>
|
|
<div>
|
|
<span class="text-label-caption text-on-surface-variant block uppercase">Fitted Tires</span>
|
|
<span class="text-body-md font-bold text-on-surface">SC3 Slick</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Bike Card 2 (Yamaha MT-09) -->
|
|
<div class="bg-surface-container-low border border-outline-variant rounded-xl p-3.5 relative overflow-hidden transition-all hover:border-outline">
|
|
<div class="flex justify-between items-start">
|
|
<div>
|
|
<div class="flex items-center gap-2">
|
|
<h3 class="font-headline-sm text-body-lg font-bold text-on-surface">2023 Yamaha MT-09 SP</h3>
|
|
<span class="w-2 h-2 rounded-full bg-outline"></span>
|
|
</div>
|
|
<p class="text-label-data font-label-data text-on-surface-variant text-[11px] mt-0.5">CP3 Crossplane inline-triple • 890 cc</p>
|
|
</div>
|
|
<span class="px-2 py-1 rounded text-label-caption font-label-caption bg-surface-container-highest text-on-surface-variant uppercase font-semibold">Wet & Scrambler</span>
|
|
</div>
|
|
<div class="grid grid-cols-3 gap-2 mt-3.5 pt-3 border-t border-outline-variant/60 font-label-data">
|
|
<div>
|
|
<span class="text-label-caption text-on-surface-variant block uppercase">Odometer</span>
|
|
<span class="text-body-md font-bold text-on-surface">8,110 MI</span>
|
|
</div>
|
|
<div>
|
|
<span class="text-label-caption text-on-surface-variant block uppercase">Telemetry</span>
|
|
<span class="text-body-md font-bold text-on-surface">OBD-II OK</span>
|
|
</div>
|
|
<div>
|
|
<span class="text-label-caption text-on-surface-variant block uppercase">Fitted Tires</span>
|
|
<span class="text-body-md font-bold text-on-surface">Road 6 GT</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- SECTION 2: TROPHY SHOWCASE (Telemetry Badges) -->
|
|
<section>
|
|
<div class="flex items-center justify-between mb-3">
|
|
<div class="flex items-center gap-2">
|
|
<span class="material-symbols-outlined text-primary-container text-[20px]" data-icon="military_tech">military_tech</span>
|
|
<h2 class="text-headline-sm font-headline-sm font-bold uppercase tracking-wider text-on-surface">Trophy Showcase</h2>
|
|
</div>
|
|
<span class="text-label-caption font-label-data text-on-surface-variant">IMU Verified</span>
|
|
</div>
|
|
<!-- Horizontal scrollable tactile badges -->
|
|
<div class="flex space-x-3 overflow-x-auto no-scrollbar py-1">
|
|
<!-- Badge 1: Apex King -->
|
|
<div class="min-w-[170px] bg-surface-container p-3 rounded-xl border border-primary-container/40 flex-shrink-0 relative overflow-hidden">
|
|
<div class="absolute -right-2 -bottom-2 opacity-10 text-primary-container">
|
|
<span class="material-symbols-outlined text-[64px]" data-icon="speed">speed</span>
|
|
</div>
|
|
<div class="w-8 h-8 rounded bg-primary-container/20 border border-primary-container/50 flex items-center justify-center text-primary-container mb-2">
|
|
<span class="material-symbols-outlined text-[18px]" data-icon="bolt">bolt</span>
|
|
</div>
|
|
<p class="font-headline-sm text-body-md font-bold text-primary-container">Apex King</p>
|
|
<p class="font-telemetry-metric-md text-headline-sm text-on-surface font-bold">54.2° Lean</p>
|
|
<p class="text-label-caption font-label-caption text-on-surface-variant mt-1">Turn 7 • Kalman Filtered</p>
|
|
</div>
|
|
<!-- Badge 2: Sub-3.5s -->
|
|
<div class="min-w-[170px] bg-surface-container p-3 rounded-xl border border-outline-variant flex-shrink-0 relative overflow-hidden">
|
|
<div class="w-8 h-8 rounded bg-surface-container-high border border-outline-variant flex items-center justify-center text-secondary mb-2">
|
|
<span class="material-symbols-outlined text-[18px]" data-icon="timer">timer</span>
|
|
</div>
|
|
<p class="font-headline-sm text-body-md font-bold text-on-surface">Sub-3.5s</p>
|
|
<p class="font-telemetry-metric-md text-headline-sm text-on-surface font-bold">3.28s 0-60</p>
|
|
<p class="text-label-caption font-label-caption text-on-surface-variant mt-1">SAE J1318 Validated</p>
|
|
</div>
|
|
<!-- Badge 3: Iron Saddle -->
|
|
<div class="min-w-[170px] bg-surface-container p-3 rounded-xl border border-outline-variant flex-shrink-0 relative overflow-hidden">
|
|
<div class="w-8 h-8 rounded bg-surface-container-high border border-outline-variant flex items-center justify-center text-on-surface-variant mb-2">
|
|
<span class="material-symbols-outlined text-[18px]" data-icon="distance">distance</span>
|
|
</div>
|
|
<p class="font-headline-sm text-body-md font-bold text-on-surface">Iron Saddle</p>
|
|
<p class="font-telemetry-metric-md text-headline-sm text-on-surface font-bold">12,480 MI</p>
|
|
<p class="text-label-caption font-label-caption text-on-surface-variant mt-1">High Mileage Certified</p>
|
|
</div>
|
|
<!-- Badge 4: Pack Lead -->
|
|
<div class="min-w-[170px] bg-surface-container p-3 rounded-xl border border-outline-variant flex-shrink-0 relative overflow-hidden">
|
|
<div class="w-8 h-8 rounded bg-surface-container-high border border-outline-variant flex items-center justify-center text-primary-fixed mb-2">
|
|
<span class="material-symbols-outlined text-[18px]" data-icon="groups">groups</span>
|
|
</div>
|
|
<p class="font-headline-sm text-body-md font-bold text-on-surface">Pack Lead</p>
|
|
<p class="font-telemetry-metric-md text-headline-sm text-on-surface font-bold">24 Rides</p>
|
|
<p class="text-label-caption font-label-caption text-on-surface-variant mt-1">Sanctioned Group Escort</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- SECTION 3: RECENT ACTIVITY FEED -->
|
|
<section class="space-y-3">
|
|
<div class="flex items-center justify-between">
|
|
<div class="flex items-center gap-2">
|
|
<span class="material-symbols-outlined text-primary-container text-[20px]" data-icon="analytics">analytics</span>
|
|
<h2 class="text-headline-sm font-headline-sm font-bold uppercase tracking-wider text-on-surface">Recorded Missions</h2>
|
|
</div>
|
|
<button class="text-label-caption font-label-data text-primary-container hover:underline">ALL LOGS</button>
|
|
</div>
|
|
<!-- Activity Card 1: Skyline to Santa Cruz -->
|
|
<article class="bg-surface-container-low border border-outline-variant rounded-xl p-4 space-y-3">
|
|
<div class="flex items-start justify-between">
|
|
<div>
|
|
<div class="flex items-center gap-2">
|
|
<span class="px-2 py-0.5 rounded text-[10px] font-label-data bg-primary-container/20 text-primary-container font-semibold">YESTERDAY</span>
|
|
<span class="text-label-caption font-label-caption text-on-surface-variant">14:15 PST</span>
|
|
</div>
|
|
<h3 class="font-headline-sm text-body-lg font-bold text-on-surface mt-1">Skyline to Santa Cruz Coastal Arc</h3>
|
|
<p class="text-label-caption font-label-caption text-on-surface-variant">Panigale V4 S • Dry Track conditions</p>
|
|
</div>
|
|
<button class="w-10 h-10 rounded bg-surface-container flex items-center justify-center border border-outline-variant text-on-surface hover:text-primary-container active:scale-95">
|
|
<span class="material-symbols-outlined text-[18px]" data-icon="file_download">file_download</span>
|
|
</button>
|
|
</div>
|
|
<!-- Micro Sparkline / Telemetry Arc Preview -->
|
|
<div class="w-full bg-surface-container-lowest p-2.5 rounded-lg border border-outline-variant">
|
|
<div class="flex justify-between items-center text-label-caption font-label-data text-on-surface-variant mb-1">
|
|
<span>ELEVATION & LEAN TRACE</span>
|
|
<span class="text-primary-container">MAX 51.4°</span>
|
|
</div>
|
|
<!-- Tactical SVG Sparkline -->
|
|
<svg class="w-full h-10 stroke-primary-container fill-none" viewbox="0 0 300 40">
|
|
<path d="M0,35 Q30,20 60,30 T120,10 T180,28 T240,5 T300,22" stroke-linecap="round" stroke-width="2.5"></path>
|
|
<path d="M0,35 Q30,20 60,30 T120,10 T180,28 T240,5 T300,22 L300,40 L0,40 Z" fill="rgba(0, 229, 255, 0.08)"></path>
|
|
</svg>
|
|
</div>
|
|
<!-- Quick Metrics Bar -->
|
|
<div class="grid grid-cols-4 gap-2 text-center py-1 bg-surface-container rounded font-label-data">
|
|
<div>
|
|
<span class="text-[10px] text-on-surface-variant uppercase block">Dist</span>
|
|
<span class="text-body-md font-bold text-on-surface">64.2 MI</span>
|
|
</div>
|
|
<div>
|
|
<span class="text-[10px] text-on-surface-variant uppercase block">Duration</span>
|
|
<span class="text-body-md font-bold text-on-surface">1h 24m</span>
|
|
</div>
|
|
<div>
|
|
<span class="text-[10px] text-on-surface-variant uppercase block">Max Lean</span>
|
|
<span class="text-body-md font-bold text-primary-container">51.4°</span>
|
|
</div>
|
|
<div>
|
|
<span class="text-[10px] text-on-surface-variant uppercase block">Pace</span>
|
|
<span class="text-body-md font-bold text-secondary">Pace 3</span>
|
|
</div>
|
|
</div>
|
|
<!-- Social Reactions & GPX Export -->
|
|
<div class="flex items-center justify-between pt-2 border-t border-outline-variant/60 text-label-caption font-label-data text-on-surface-variant">
|
|
<div class="flex items-center gap-3">
|
|
<button class="flex items-center gap-1 hover:text-on-surface">
|
|
<span>👊</span>
|
|
<span class="font-bold text-on-surface">42 Bumps</span>
|
|
</button>
|
|
<button class="flex items-center gap-1 hover:text-on-surface">
|
|
<span class="material-symbols-outlined text-[14px]" data-icon="forum">forum</span>
|
|
<span>12 Comments</span>
|
|
</button>
|
|
</div>
|
|
<span class="text-label-caption px-2 py-0.5 bg-surface-container rounded border border-outline-variant text-primary-fixed uppercase tracking-wider">GPX READY</span>
|
|
</div>
|
|
</article>
|
|
<!-- Activity Card 2: Saratoga Gap Sprint -->
|
|
<article class="bg-surface-container-low border border-outline-variant rounded-xl p-4 space-y-3">
|
|
<div class="flex items-start justify-between">
|
|
<div>
|
|
<div class="flex items-center gap-2">
|
|
<span class="px-2 py-0.5 rounded text-[10px] font-label-data bg-surface-container-highest text-on-surface font-semibold">3 DAYS AGO</span>
|
|
<span class="px-2 py-0.5 rounded text-[10px] font-label-data bg-error-container/40 text-error font-semibold">NEW RECORD</span>
|
|
</div>
|
|
<h3 class="font-headline-sm text-body-lg font-bold text-on-surface mt-1">Saratoga Gap Apex Sprint</h3>
|
|
<p class="text-label-caption font-label-caption text-on-surface-variant">Panigale V4 S • Solo Telemetry Mode</p>
|
|
</div>
|
|
<button class="w-10 h-10 rounded bg-surface-container flex items-center justify-center border border-outline-variant text-on-surface hover:text-primary-container active:scale-95">
|
|
<span class="material-symbols-outlined text-[18px]" data-icon="file_download">file_download</span>
|
|
</button>
|
|
</div>
|
|
<!-- Quick Metrics Bar -->
|
|
<div class="grid grid-cols-4 gap-2 text-center py-1 bg-surface-container rounded font-label-data">
|
|
<div>
|
|
<span class="text-[10px] text-on-surface-variant uppercase block">Dist</span>
|
|
<span class="text-body-md font-bold text-on-surface">28.5 MI</span>
|
|
</div>
|
|
<div>
|
|
<span class="text-[10px] text-on-surface-variant uppercase block">Duration</span>
|
|
<span class="text-body-md font-bold text-on-surface">42m</span>
|
|
</div>
|
|
<div>
|
|
<span class="text-[10px] text-on-surface-variant uppercase block">Max Lean</span>
|
|
<span class="text-body-md font-bold text-primary-container">54.2°</span>
|
|
</div>
|
|
<div>
|
|
<span class="text-[10px] text-on-surface-variant uppercase block">Avg Speed</span>
|
|
<span class="text-body-md font-bold text-on-surface">48 MPH</span>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center justify-between pt-2 border-t border-outline-variant/60 text-label-caption font-label-data text-on-surface-variant">
|
|
<div class="flex items-center gap-3">
|
|
<button class="flex items-center gap-1 hover:text-on-surface">
|
|
<span>👊</span>
|
|
<span class="font-bold text-on-surface">89 Bumps</span>
|
|
</button>
|
|
<button class="flex items-center gap-1 hover:text-on-surface">
|
|
<span class="material-symbols-outlined text-[14px]" data-icon="forum">forum</span>
|
|
<span>27 Comments</span>
|
|
</button>
|
|
</div>
|
|
<span class="text-label-caption px-2 py-0.5 bg-surface-container rounded border border-outline-variant text-primary-fixed uppercase tracking-wider">GPX READY</span>
|
|
</div>
|
|
</article>
|
|
</section>
|
|
</div>
|
|
</main>
|
|
<!-- FIXED BOTTOM NAVIGATION BAR (Shared Component Anchor) -->
|
|
<!-- Contextual Active: Rider Profile / Social ecosystem selected -->
|
|
<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 dark:bg-surface-container-lowest border-t border-outline-variant dark:border-outline-variant">
|
|
<!-- Dash -->
|
|
<a class="flex flex-col items-center justify-center text-on-surface-variant dark:text-on-surface-variant px-2 py-1 min-h-[48px] hover:bg-surface-container-low dark:hover:bg-surface-container-low hover:text-primary-fixed dark:hover:text-primary-fixed active:scale-95 duration-100 ease-out" href="#">
|
|
<span class="material-symbols-outlined text-[24px]" data-icon="speed">speed</span>
|
|
<span class="text-label-caption font-label-caption mt-0.5">Dash</span>
|
|
</a>
|
|
<!-- Map -->
|
|
<a class="flex flex-col items-center justify-center text-on-surface-variant dark:text-on-surface-variant px-2 py-1 min-h-[48px] hover:bg-surface-container-low dark:hover:bg-surface-container-low hover:text-primary-fixed dark:hover:text-primary-fixed active:scale-95 duration-100 ease-out" href="#">
|
|
<span class="material-symbols-outlined text-[24px]" data-icon="navigation">navigation</span>
|
|
<span class="text-label-caption font-label-caption mt-0.5">Map</span>
|
|
</a>
|
|
<!-- Activity -->
|
|
<a class="flex flex-col items-center justify-center text-on-surface-variant dark:text-on-surface-variant px-2 py-1 min-h-[48px] hover:bg-surface-container-low dark:hover:bg-surface-container-low hover:text-primary-fixed dark:hover:text-primary-fixed active:scale-95 duration-100 ease-out" href="#">
|
|
<span class="material-symbols-outlined text-[24px]" data-icon="analytics">analytics</span>
|
|
<span class="text-label-caption font-label-caption mt-0.5">Activity</span>
|
|
</a>
|
|
<!-- Garage -->
|
|
<a class="flex flex-col items-center justify-center text-on-surface-variant dark:text-on-surface-variant px-2 py-1 min-h-[48px] hover:bg-surface-container-low dark:hover:bg-surface-container-low hover:text-primary-fixed dark:hover:text-primary-fixed active:scale-95 duration-100 ease-out" href="#">
|
|
<span class="material-symbols-outlined text-[24px]" data-icon="two_wheeler">two_wheeler</span>
|
|
<span class="text-label-caption font-label-caption mt-0.5">Garage</span>
|
|
</a>
|
|
<!-- Social (ACTIVE STATE ON PROFILE) -->
|
|
<a class="flex flex-col items-center justify-center bg-surface-container-high dark:bg-surface-container-high text-primary-container dark:text-primary-container rounded-lg px-2 py-1 min-h-[48px] active:scale-95 duration-100 ease-out cyan-border-glow" href="#">
|
|
<span class="material-symbols-outlined text-[24px]" data-icon="group" data-weight="fill">group</span>
|
|
<span class="text-label-caption font-label-caption font-bold mt-0.5">Social</span>
|
|
</a>
|
|
<!-- Settings -->
|
|
<a class="flex flex-col items-center justify-center text-on-surface-variant dark:text-on-surface-variant px-2 py-1 min-h-[48px] hover:bg-surface-container-low dark:hover:bg-surface-container-low hover:text-primary-fixed dark:hover:text-primary-fixed active:scale-95 duration-100 ease-out" href="#">
|
|
<span class="material-symbols-outlined text-[24px]" data-icon="settings">settings</span>
|
|
<span class="text-label-caption font-label-caption mt-0.5">Settings</span>
|
|
</a>
|
|
</nav>
|
|
</body></html> |