dilly/samplez
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refresh the Flutter snapshot: UI-01 through UI-09, plus a fresh installable APK

Browse Source 
Full UI redesign pass complete: persistent tab shell with an always-visible
background map, Modern Professional Dark theme, monochrome dark map tiles,
offline skeleton map, a shared GlassPanel/FloatingPill component kit,
customizable HUD telemetry widgets, and the Map HUD / Plan & Route Planning /
Rides History screen rebuilds. 374 tests passing, up from 316.

The APK is a fresh release build (debug-signed, no release signing config
exists yet).

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_012Xki7YAcc2TiN2PRZJ2tXr
This commit is contained in:
uhryniuk
2026-08-24 14:41:35 -05:00
parent 4c634354bd
commit 587f75eab4
42 changed files with 4401 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files

307
rippr-flutter-src/docs/design/stitch-export/screens/rides-history-dark.html Normal file
View File

@@ -0,0 +1,307 @@
<!DOCTYPE html>
<html class="dark" lang="en" style=""><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>RIPPR - Rides</title>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&amp;family=JetBrains+Mono:wght@400;500;700&amp;family=Sora:wght@400;600;700&amp;display=swap" rel="stylesheet"/>
<script id="tailwind-config">
tailwind.config = {
darkMode: "class",
theme: {
extend: {
"colors": {
"secondary-fixed-dim": "#aec7f6",
"primary-fixed": "#d6e3ff",
"tertiary-fixed-dim": "#ffb68c",
"inverse-surface": "#e5e2e1",
"on-surface-muted": "#9ca3af",
"error": "#ffb4ab",
"inverse-primary": "#005db8",
"on-primary-fixed-variant": "#00458d",
"secondary": "#aec7f6",
"primary-fixed-dim": "#aac7ff",
"surface-container": "#201f1f",
"primary": "#aac7ff",
"tertiary-container": "#e3711f",
"surface-variant": "#353534",
"on-background": "#e5e2e1",
"on-secondary-fixed-variant": "#2e476f",
"primary-container": "#4090fe",
"outline-variant": "#414753",
"background": "#131313",
"surface": "#131313",
"on-tertiary": "#532200",
"on-tertiary-fixed": "#321200",
"on-surface": "#e5e2e1",
"surface-container-low": "#1c1b1b",
"on-primary-container": "#002958",
"secondary-fixed": "#d6e3ff",
"accent-error": "#ffb4ab",
"on-primary-fixed": "#001b3e",
"surface-container-lowest": "#0e0e0e",
"surface-tint": "#aac7ff",
"error-container": "#93000a",
"secondary-container": "#2e476f",
"surface-main": "#0a0a0c",
"tertiary-fixed": "#ffdbc9",
"surface-container-high": "#2a2a2a",
"on-primary": "#002f64",
"on-surface-bright": "#ffffff",
"on-tertiary-container": "#481d00",
"on-error": "#690005",
"surface-card": "#16161a",
"surface-container-highest": "#353534",
"surface-bright": "#393939",
"on-secondary-container": "#9db6e4",
"on-tertiary-fixed-variant": "#763400",
"on-error-container": "#ffdad6",
"on-secondary-fixed": "#001b3d",
"tertiary": "#ffb68c",
"outline": "#8b919f",
"surface-dim": "#131313",
"on-secondary": "#143057",
"inverse-on-surface": "#313030",
"on-surface-variant": "#c1c6d5"
},
"borderRadius": {
"DEFAULT": "0.25rem",
"lg": "0.5rem",
"xl": "0.75rem",
"full": "9999px"
},
"spacing": {
"margin-mobile": "16px",
"gutter": "24px",
"margin-desktop": "32px",
"base": "4px",
"max-width": "1280px"
},
"fontFamily": {
"headline-md": [
"Inter"
],
"label-sm": [
"Inter"
],
"body-lg": [
"Inter"
],
"body-md": [
"Inter"
],
"headline-sm": [
"Inter"
],
"headline-lg": [
"Inter"
],
"headline-lg-mobile": [
"Inter"
],
"label-md": [
"Inter"
]
},
"fontSize": {
"headline-md": [
"24px",
{
"lineHeight": "32px",
"fontWeight": "600"
}
],
"label-sm": [
"11px",
{
"lineHeight": "16px",
"letterSpacing": "0.5px",
"fontWeight": "500"
}
],
"body-lg": [
"16px",
{
"lineHeight": "24px",
"fontWeight": "400"
}
],
"body-md": [
"14px",
{
"lineHeight": "20px",
"fontWeight": "400"
}
],
"headline-sm": [
"20px",
{
"lineHeight": "28px",
"fontWeight": "600"
}
],
"headline-lg": [
"32px",
{
"lineHeight": "40px",
"letterSpacing": "-0.02em",
"fontWeight": "700"
}
],
"headline-lg-mobile": [
"28px",
{
"lineHeight": "36px",
"letterSpacing": "-0.01em",
"fontWeight": "700"
}
],
"label-md": [
"12px",
{
"lineHeight": "16px",
"letterSpacing": "0.5px",
"fontWeight": "500"
}
]
}
},
},
}
</script>
<style type="text/tailwindcss">
@layer utilities {
.glass-panel {
@apply bg-surface/80 backdrop-blur-[20px] border border-outline-variant;
}
}
</style>
</head>
<body class="bg-background text-on-surface min-h-screen pb-[100px]"><div class="fixed inset-0 z-0 bg-surface"><div class="w-full h-full bg-cover bg-center opacity-30 backdrop-blur-md backdrop-blur-xl" data-alt="A light mode stylized city map view for a fitness tracking application." data-location="Tokyo" style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuDr5_s-KgoDdw3V0jHBFYtHVB3aikGStl0j7TM7kPJnauzs3U1eRnVMaMh4ywSZTMLAo_LxEZnu9rTzBPq-EGev_TiD3t0VY9osDcW0xKKUZxL2rx7TPn0qh2lor7H-TT1FWRur2eVHGsIsu-YT3ht-zwG1VrgIArB7Dxx5IgNThsHCroZ6oFbBB_Uo1Y8rIjPn8NPkxuUVxmKjpNze6RAmNCuYj9V3ivWdnkUNS_Z6ybPWERqbvRA4");'></div><svg class="absolute inset-0 w-full h-full pointer-events-none" preserveaspectratio="xMidYMid slice" viewbox="0 0 400 800"><path d="M 200 400 C 250 250, 150 150, 300 50" fill="none" opacity="0.3" stroke="#aac7ff" stroke-dasharray="10 10" stroke-linecap="round" stroke-linejoin="round" stroke-width="4"></path></svg></div>
<!-- TopAppBar -->
<!-- Main Content -->
<main class="px-margin-mobile max-w-4xl mx-auto flex flex-col gap-6 pt-2 relative z-10">
<!-- Search & Filter -->
<div class="flex gap-gutter items-center p-2 rounded-lg border border-outline-variant bg-surface-container-lowest shadow-sm">
<div class="flex-1 relative">
<span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-on-surface-variant">search</span>
<input class="w-full bg-surface-container-lowest border-b border-outline-variant focus:border-primary text-on-surface pl-10 pr-4 py-2 font-body-md text-body-md outline-none transition-colors placeholder:text-on-surface-variant/70" placeholder="Search rides..." type="text"/>
</div>
<button class="w-10 h-10 flex items-center justify-center rounded hover:bg-surface-container-highest transition-colors text-primary border border-outline-variant shadow-sm bg-surface-container-lowest">
<span class="material-symbols-outlined">tune</span>
</button>
</div>
<!-- Summary Stats -->
<div class="grid grid-cols-2 md:grid-cols-4 gap-gutter mb-2 z-10">
<div class="p-4 rounded-lg flex flex-col gap-1 bg-surface-container-lowest border border-outline-variant shadow-sm"><span class="font-label-sm text-label-sm tracking-wider text-on-surface-variant uppercase">Total Dist</span><span class="font-headline-md text-headline-md text-primary">482<span class="text-label-sm tracking-wider ml-1 text-on-surface-variant">KM</span></span></div>
<div class="p-4 rounded-lg flex flex-col gap-1 bg-surface-container-lowest border border-outline-variant shadow-sm"><span class="font-label-sm text-label-sm tracking-wider text-on-surface-variant uppercase">Total Dist</span><span class="font-headline-md text-headline-md text-primary">482<span class="text-label-sm tracking-wider ml-1 text-on-surface-variant">KM</span></span></div>
<div class="p-4 rounded-lg flex flex-col gap-1 bg-surface-container-lowest border border-outline-variant shadow-sm"><span class="font-label-sm text-label-sm tracking-wider text-on-surface-variant uppercase">Total Dist</span><span class="font-headline-md text-headline-md text-primary">482<span class="text-label-sm tracking-wider ml-1 text-on-surface-variant">KM</span></span></div>
<div class="p-4 rounded-lg flex flex-col gap-1 bg-surface-container-lowest border border-outline-variant shadow-sm"><span class="font-label-sm text-label-sm tracking-wider text-on-surface-variant uppercase">Total Dist</span><span class="font-headline-md text-headline-md text-primary">482<span class="text-label-sm tracking-wider ml-1 text-on-surface-variant">KM</span></span></div>
</div>
<!-- Rides List -->
<div class="flex flex-col gap-gutter">
<!-- Ride Item 1 -->
<div class="rounded-lg flex flex-col md:flex-row overflow-hidden group cursor-pointer hover:border-primary/50 transition-colors bg-surface-container-lowest border border-outline-variant shadow-sm">
<div class="h-32 md:h-auto md:w-48 bg-surface-container-highest relative">
<img class="w-full h-full object-cover opacity-90 group-hover:opacity-100 transition-opacity" data-alt="A dark mode minimalist map view showing a neon green GPS route line traversing through city blocks. High contrast, technical aesthetic, muted dark charcoal background." data-location="San Francisco" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAx1uDTgkMgXUBwI-JLBmH1_3Mw1sk91ovk-19wP19I5wktrsuJ9nM757sCThvGGNFlWi88pEzXj9cB_wlHAhQoTdkoXYp1csaGHd6e_iulV84cPEhZNlj6_M-EWzoEdv7CT-q9BJLlkOBPq9D5IaX6mQk1nqZQDfeR0k535iIYJ2rXJFCyAAgCEF0gKEYyumLsUopkQMD2ig13W01XANoAJPCP--li-S1iln0VfzpqY-vmyHLZsO9H"/>
<div class="absolute inset-0 bg-gradient-to-t from-surface/80 to-transparent md:hidden"></div>
</div>
<div class="p-4 flex flex-col justify-between flex-1 gap-4">
<div>
<h3 class="font-headline-sm text-headline-sm text-on-surface mb-1">Morning Circuit</h3>
<p class="font-body-md text-body-md text-on-surface-variant">Oct 24, 06:30 AM</p>
</div>
<div class="flex gap-6">
<div class="flex flex-col">
<span class="font-label-sm text-label-sm tracking-wider text-on-surface-variant mb-1 uppercase">DISTANCE</span>
<span class="font-headline-sm text-headline-sm text-primary">42.5 KM</span>
</div>
<div class="flex flex-col">
<span class="font-label-sm text-label-sm tracking-wider text-on-surface-variant mb-1 uppercase">TIME</span>
<span class="font-headline-sm text-headline-sm text-primary">1:45:22</span>
</div>
<div class="flex flex-col">
<span class="font-label-sm text-label-sm tracking-wider text-on-surface-variant mb-1 uppercase">AVG SPD</span>
<span class="font-headline-sm text-headline-sm text-primary">24.2 KPH</span>
</div>
</div>
</div>
</div>
<!-- Ride Item 2 -->
<div class="rounded-lg flex flex-col md:flex-row overflow-hidden group cursor-pointer hover:border-primary/50 transition-colors bg-surface-container-lowest border border-outline-variant shadow-sm">
<div class="h-32 md:h-auto md:w-48 bg-surface-container-highest relative">
<img class="w-full h-full object-cover opacity-90 group-hover:opacity-100 transition-opacity" data-alt="A dark mode minimalist map view showing a neon green GPS route line winding through a mountainous region. High contrast, technical aesthetic, deep black background." data-location="Marin Headlands" src="https://lh3.googleusercontent.com/aida-public/AB6AXuA8dTKlnX4_8dnTgJ0UQpocYH5zvSgIxrAirD88D7z-dcBw6SziTL2p8niEuvn-Q-z1M3AwecI2VoHbFXE70wCOQEymO_yZatnGuP5BkKz-orUNu3Lpmy3ZnXrxYVUOF77CdUnY6WWo098sJre88SDaK82aid7U4mo6vcV5DtxUqQ-H9D0N6RvTzWc0gmev36tcOCKDZqlUsRiHMarZOD6QHiPfL7HzGu_KN1gdDF1n-7G0vLs6CzmA"/>
<div class="absolute inset-0 bg-gradient-to-t from-surface/80 to-transparent md:hidden"></div>
</div>
<div class="p-4 flex flex-col justify-between flex-1 gap-4">
<div>
<h3 class="font-headline-sm text-headline-sm text-on-surface mb-1">Hill Repeats</h3>
<p class="font-body-md text-body-md text-on-surface-variant">Oct 22, 17:15 PM</p>
</div>
<div class="flex gap-6">
<div class="flex flex-col">
<span class="font-label-sm text-label-sm tracking-wider text-on-surface-variant mb-1 uppercase">DISTANCE</span>
<span class="font-headline-sm text-headline-sm text-primary">28.1 KM</span>
</div>
<div class="flex flex-col">
<span class="font-label-sm text-label-sm tracking-wider text-on-surface-variant mb-1 uppercase">TIME</span>
<span class="font-headline-sm text-headline-sm text-primary">1:12:05</span>
</div>
<div class="flex flex-col">
<span class="font-label-sm text-label-sm tracking-wider text-on-surface-variant mb-1 uppercase">AVG SPD</span>
<span class="font-headline-sm text-headline-sm text-primary">23.4 KPH</span>
</div>
</div>
</div>
</div>
<!-- Ride Item 3 -->
<div class="rounded-lg flex flex-col md:flex-row overflow-hidden group cursor-pointer hover:border-primary/50 transition-colors opacity-75 bg-surface-container-lowest border border-outline-variant shadow-sm">
<div class="h-32 md:h-auto md:w-48 bg-surface-container-highest relative">
<img class="w-full h-full object-cover opacity-90 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" data-alt="A dark mode minimalist map view showing a neon green GPS route line along a coastal highway. High contrast, technical aesthetic, muted dark charcoal background." data-location="Highway 1" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAr-gumM8Tc0ayTzCw3s39Z1j0cydRKq7oGECkbJNXERMpAQaP4xrvoVkTVHzGe7mG83pDzxMMZGy9SpTk19uSKlnM5Vjoz3zurdx6AbWLUisqVcuB6CjXS4wt_hJlUK4TfOICbZdPN2UzCkVYUHClJ1jwfeRwA0SFVxWC2gfneSIXny-aaJMfddGQCFtCB7Xjh6hoFigOGUZB-2yjvcHcgwh_u3hZXLDETlfCtPZmyedY1zuZJ9Lft"/>
<div class="absolute inset-0 bg-gradient-to-t from-surface/80 to-transparent md:hidden"></div>
</div>
<div class="p-4 flex flex-col justify-between flex-1 gap-4">
<div>
<h3 class="font-headline-sm text-headline-sm text-on-surface mb-1">Coastal Cruise</h3>
<p class="font-body-md text-body-md text-on-surface-variant">Oct 18, 08:00 AM</p>
</div>
<div class="flex gap-6">
<div class="flex flex-col">
<span class="font-label-sm text-label-sm tracking-wider text-on-surface-variant mb-1 uppercase">DISTANCE</span>
<span class="font-headline-sm text-headline-sm text-primary">85.4 KM</span>
</div>
<div class="flex flex-col">
<span class="font-label-sm text-label-sm tracking-wider text-on-surface-variant mb-1 uppercase">TIME</span>
<span class="font-headline-sm text-headline-sm text-primary">3:24:10</span>
</div>
<div class="flex flex-col">
<span class="font-label-sm text-label-sm tracking-wider text-on-surface-variant mb-1 uppercase">AVG SPD</span>
<span class="font-headline-sm text-headline-sm text-primary">25.1 KPH</span>
</div>
</div>
</div>
</div>
</div>
</main>
<!-- BottomNavBar -->
<nav class="fixed bottom-0 w-full z-50 pb-safe bg-surface-container-lowest/80 backdrop-blur-xl border-t border-outline-variant flex justify-around items-center h-20 px-margin-mobile md:hidden"><button class="flex flex-col items-center justify-center text-on-surface-variant hover:text-primary/80 transition-transform duration-150"><span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 0;">map</span></button><button class="flex flex-col items-center justify-center text-primary relative after:content-[''] after:absolute after:-bottom-1 after:w-1 after:h-1 after:bg-primary after:rounded-full hover:text-primary/80 transition-transform duration-150 scale-95"><span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">book</span></button><button class="flex flex-col items-center justify-center text-on-surface-variant hover:text-primary/80 transition-transform duration-150"><span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 0;">route</span></button><button class="flex flex-col items-center justify-center text-on-surface-variant hover:text-primary/80 transition-transform duration-150"><span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 0;">settings</span></button></nav>
<!-- Desktop Side Nav Overlay (Hidden on Mobile, replaces Bottom Nav visually in a real app, keeping it simple here) -->
<nav class="hidden md:flex fixed left-0 top-16 bottom-0 w-24 bg-surface-container-lowest/80 backdrop-blur-md border-r border-outline-variant flex-col items-center py-6 gap-6 z-40">
<button class="w-12 h-12 flex items-center justify-center rounded hover:bg-surface-container-highest text-on-surface-variant transition-colors group relative">
<span class="material-symbols-outlined">map</span>
<span class="absolute left-14 bg-surface-container px-2 py-1 rounded font-label-sm text-label-sm tracking-wider text-on-surface opacity-0 group-hover:opacity-100 pointer-events-none transition-opacity">Map</span>
</button>
<button class="w-12 h-12 flex items-center justify-center rounded bg-primary-container/50 text-primary transition-colors group relative border border-primary/20"><span class="material-symbols-outlined" style='font-variation-settings: "FILL" 1;'>book</span><span class="absolute left-14 bg-surface-container px-2 py-1 rounded font-label-sm text-label-sm tracking-wider text-on-surface opacity-0 group-hover:opacity-100 pointer-events-none transition-opacity">Journal</span></button>
<button class="w-12 h-12 flex items-center justify-center rounded hover:bg-surface-container-highest text-on-surface-variant transition-colors group relative">
<span class="material-symbols-outlined">route</span>
<span class="absolute left-14 bg-surface-container px-2 py-1 rounded font-label-sm text-label-sm tracking-wider text-on-surface opacity-0 group-hover:opacity-100 pointer-events-none transition-opacity">Plan</span>
</button>
</nav>
<style>
@media (min-width: 768px) {
body { padding-left: 96px; pb: 0; }
}
</style>
</body></html>