Refresh the Flutter snapshot: UI-01 through UI-09, plus a fresh installable APK
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:
@@ -0,0 +1,275 @@
|
||||
<!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 - Plan Route</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&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500;700&family=Sora:wght@600;700&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",
|
||||
"unit": "4px",
|
||||
"stack-sm": "8px",
|
||||
"stack-lg": "48px",
|
||||
"stack-md": "24px",
|
||||
"container-margin": "20px"
|
||||
},
|
||||
"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"],
|
||||
"label-caps": ["JetBrains Mono"]
|
||||
},
|
||||
"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" }],
|
||||
"label-caps": ["12px", { "lineHeight": "16px", "letterSpacing": "0.1em", "fontWeight": "500" }]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.map-grid-overlay {
|
||||
background-image:
|
||||
linear-gradient(to right, rgba(255,255,255,0.05) 1px, transparent 1px),
|
||||
linear-gradient(to bottom, rgba(255,255,255,0.05) 1px, transparent 1px);
|
||||
background-size: 40px 40px;
|
||||
}
|
||||
|
||||
.pulse-ring {
|
||||
animation: pulse-ring 2s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse-ring {
|
||||
0% {
|
||||
transform: scale(0.8);
|
||||
opacity: 0.8;
|
||||
box-shadow: 0 0 0 0 rgba(170, 199, 255, 0.5);
|
||||
}
|
||||
70% {
|
||||
transform: scale(1);
|
||||
opacity: 0;
|
||||
box-shadow: 0 0 0 20px rgba(170, 199, 255, 0);
|
||||
}
|
||||
100% {
|
||||
transform: scale(0.8);
|
||||
opacity: 0;
|
||||
box-shadow: 0 0 0 0 rgba(170, 199, 255, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.route-line {
|
||||
stroke-dasharray: 10, 10;
|
||||
animation: dash 20s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes dash {
|
||||
to {
|
||||
stroke-dashoffset: -1000;
|
||||
}
|
||||
}
|
||||
|
||||
.tooltip-float {
|
||||
animation: float 3s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes float {
|
||||
0% { transform: translateY(0px); }
|
||||
50% { transform: translateY(-8px); }
|
||||
100% { transform: translateY(0px); }
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
body {
|
||||
min-height: max(884px, 100dvh);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-background text-on-surface h-screen w-full overflow-hidden relative selection:bg-primary-container selection:text-on-primary-container antialiased flex flex-col">
|
||||
<!-- Fullscreen Map Canvas -->
|
||||
<main class="flex-grow relative h-full w-full z-0 overflow-hidden">
|
||||
<div class="absolute top-4 left-1/2 -translate-x-1/2 z-50 w-auto px-container-margin pointer-events-none mt-4">
|
||||
<div class="bg-surface/90 backdrop-blur-xl border border-outline-variant/30 rounded-full px-8 py-4 flex items-center gap-8 shadow-sm pointer-events-auto">
|
||||
<div class="flex flex-col items-center">
|
||||
<span class="text-on-surface-variant font-headline-md text-[10px] uppercase tracking-widest mb-1">Distance</span>
|
||||
<span class="font-headline-md text-primary-container">12.4<span class="text-sm ml-1">km</span></span>
|
||||
</div>
|
||||
<div class="w-px h-8 bg-outline-variant/30"></div>
|
||||
<div class="flex flex-col items-center">
|
||||
<span class="text-on-surface-variant font-headline-md text-[10px] uppercase tracking-widest mb-1">Est. Time</span>
|
||||
<span class="font-headline-md text-primary-container">45<span class="text-sm ml-1">m</span></span>
|
||||
</div>
|
||||
<div class="w-px h-8 bg-outline-variant/30"></div>
|
||||
<div class="flex flex-col items-center">
|
||||
<span class="text-on-surface-variant font-headline-md text-[10px] uppercase tracking-widest mb-1">Pins</span>
|
||||
<span class="font-headline-md text-primary-container">5</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Base Map Layer -->
|
||||
<div class="absolute inset-0 z-0 bg-surface-container">
|
||||
<img class="w-full h-full object-cover opacity-30 mix-blend-screen" data-alt="A digital map showing a top-down view of city streets and terrain." data-location="San Francisco, CA" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDtux0iJ6r19x5fCEWn0L1Ai3ziybnKhwYCd-8xyKm8ebAQHTJPdulojF6Pi_31mtsUlhqpI5ejusGg8Rk7y9c20eWK9sqj3uubky70kqSRiHsd37IJzOiRUTYdHCyOg2g7K5uADAg-39nR48gfWmfotW13eKGb1I9OMrc8MJBtj6lD9rtqapC2DG8kLoTz50c_QCt_AVShQyLrft6yW1SShV4mZXP2kwhf4AZsh3bvkzeCQzfIB43E"/>
|
||||
</div>
|
||||
<!-- Technical Grid Overlay -->
|
||||
<div class="absolute inset-0 map-grid-overlay z-10 pointer-events-none"></div>
|
||||
<!-- Planned Route Overlay (SVG) -->
|
||||
<svg class="absolute inset-0 w-full h-full z-20 pointer-events-none" preserveaspectratio="xMidYMid slice" viewbox="0 0 1000 1000">
|
||||
<path class="route-line opacity-80" d="M 400 400 L 450 420 L 500 380 L 550 430 L 600 400" fill="none" stroke="#4090fe" stroke-dasharray="10, 10" stroke-linecap="round" stroke-linejoin="round" stroke-width="4"></path>
|
||||
<circle cx="400" cy="400" fill="#4090fe" r="6" stroke="#131313" stroke-width="2"></circle>
|
||||
<circle cx="450" cy="420" fill="#4090fe" r="6" stroke="#131313" stroke-width="2"></circle>
|
||||
<circle cx="500" cy="380" fill="#4090fe" r="6" stroke="#131313" stroke-width="2"></circle>
|
||||
<circle cx="550" cy="430" fill="#4090fe" r="6" stroke="#131313" stroke-width="2"></circle>
|
||||
<circle cx="600" cy="400" fill="#4090fe" r="6" stroke="#131313" stroke-width="2"></circle>
|
||||
</svg>
|
||||
<!-- User Location Marker (Pulsing) -->
|
||||
<div class="absolute top-[70%] left-[30%] z-30 transform -translate-x-1/2 -translate-y-1/2 flex items-center justify-center pointer-events-none">
|
||||
<div class="absolute w-4 h-4 bg-primary-container rounded-full opacity-30"></div>
|
||||
<div class="absolute w-3 h-3 bg-primary-container rounded-full pulse-ring"></div>
|
||||
<div class="w-2 h-2 bg-primary-container rounded-full relative z-10 shadow-[0_0_10px_rgba(64,144,254,0.5)]"></div>
|
||||
<!-- Vision cone indicator -->
|
||||
<div class="absolute -top-12 left-1/2 -translate-x-1/2 w-0 h-0 border-l-[20px] border-l-transparent border-r-[20px] border-r-transparent border-t-[40px] border-t-primary-container/20 origin-bottom transform rotate-45"></div>
|
||||
</div>
|
||||
<!-- Interactive Map Canvas Layer (Invisible, captures clicks for dropping pins) -->
|
||||
<div class="absolute inset-0 z-40 cursor-crosshair" id="map-interaction-layer"></div>
|
||||
</main>
|
||||
<!-- Floating HUD Elements Layer -->
|
||||
<div class="absolute inset-0 z-50 pointer-events-none flex flex-col justify-end">
|
||||
<!-- Tooltip -->
|
||||
<div class="w-full flex justify-center mb-stack-md pointer-events-none px-container-margin">
|
||||
<button class="pointer-events-auto bg-primary-container text-on-primary-container font-headline-md text-label-caps px-12 py-4 rounded-xl shadow-md uppercase tracking-widest hover:brightness-110 active:scale-95 transition-all">Start Route</button>
|
||||
</div>
|
||||
<!-- Bottom Navigation Bar (Generated from JSON) -->
|
||||
<nav class="bg-surface border-t border-outline-variant/30 w-full pb-safe flex justify-around items-center h-20 px-container-margin pointer-events-auto shrink-0 relative shadow-[0_-4px_20px_rgba(0,0,0,0.2)]">
|
||||
<button class="flex flex-col items-center justify-center text-on-surface-variant hover:text-primary-container transition-colors duration-150">
|
||||
<span class="material-symbols-outlined mb-1" style="font-variation-settings: 'FILL' 0;">map</span>
|
||||
</button>
|
||||
<button class="flex flex-col items-center justify-center text-primary-container relative after:content-[''] after:absolute after:-bottom-1 after:w-1 after:h-1 after:bg-primary-container after:rounded-full hover:text-primary-container transition-colors 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-container transition-colors 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-container transition-colors duration-150">
|
||||
<span class="material-symbols-outlined mb-1" style="font-variation-settings: 'FILL' 0;">settings</span>
|
||||
</button>
|
||||
</nav>
|
||||
</div>
|
||||
<!-- Micro-interaction Script for Pin Dropping Simulation -->
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const mapLayer = document.getElementById('map-interaction-layer');
|
||||
const svgLayer = document.querySelector('svg');
|
||||
let pinCount = 0;
|
||||
|
||||
mapLayer.addEventListener('click', (e) => {
|
||||
const rect = mapLayer.getBoundingClientRect();
|
||||
const x = e.clientX - rect.left;
|
||||
const y = e.clientY - rect.top;
|
||||
|
||||
// Visual feedback of drop
|
||||
const ripple = document.createElement('div');
|
||||
ripple.className = 'absolute rounded-full border-2 border-primary-container bg-primary-container/20 pointer-events-none transform -translate-x-1/2 -translate-y-1/2';
|
||||
ripple.style.left = `${x}px`;
|
||||
ripple.style.top = `${y}px`;
|
||||
ripple.style.width = '0px';
|
||||
ripple.style.height = '0px';
|
||||
ripple.style.opacity = '1';
|
||||
ripple.style.transition = 'all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1)';
|
||||
|
||||
mapLayer.parentElement.appendChild(ripple);
|
||||
|
||||
// Trigger animation
|
||||
requestAnimationFrame(() => {
|
||||
ripple.style.width = '60px';
|
||||
ripple.style.height = '60px';
|
||||
ripple.style.opacity = '0';
|
||||
});
|
||||
|
||||
// Clean up ripple
|
||||
setTimeout(() => ripple.remove(), 500);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body></html>
|
||||
Reference in New Issue
Block a user