uhryniuk
587f75eab4
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
336 lines
15 KiB
HTML
336 lines
15 KiB
HTML
<!DOCTYPE html>
|
|
|
|
<html lang="en"><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"/>
|
|
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&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"],
|
|
"display-telemetry-mobile": ["JetBrains Mono"],
|
|
"display-telemetry": ["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" }],
|
|
"display-telemetry-mobile": ["48px", { "lineHeight": "48px", "fontWeight": "700" }],
|
|
"display-telemetry": ["64px", { "lineHeight": "64px", "letterSpacing": "-0.04em", "fontWeight": "700" }]
|
|
}
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
<style>
|
|
.map-grid-overlay {
|
|
background-image:
|
|
linear-gradient(to right, rgba(255,255,255,0.03) 1px, transparent 1px),
|
|
linear-gradient(to bottom, rgba(255,255,255,0.03) 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.7);
|
|
}
|
|
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 dark">
|
|
<!-- Fullscreen Map Canvas -->
|
|
<main class="flex-grow relative h-full w-full z-0 overflow-hidden">
|
|
<!-- Base Map Layer -->
|
|
<div class="absolute inset-0 z-0 bg-surface-container-lowest">
|
|
<img class="w-full h-full object-cover opacity-60 mix-blend-screen invert" data-alt="A dark mode digital map showing a top-down view of city streets and terrain. The map is rendered in dark grey and black tones with subtle lighter outlines for roads." data-location="San Francisco, CA" src="https://lh3.googleusercontent.com/aida-public/AB6AXuA-oqjvzL6bUKZVJD2vvMu-0LPsY-GmGnGrfOmA0Pv5d3jBrTEuOXQ2lhZUXb9SvIGOnr2Wz64OSx0LGVbxce3zkTseW9Q62p9djWl96s-LaFizAtCBJ7okbDdDDBZVyS8RutWkvabaIwEi_lE9yq26OZuanhZ7NS6Ny4AZx69Sah-DvoE1nzwD2AEEpWJXbfX_KRFa3iGbCUa02sKaAUWzoirpWg5yU6Gk6u2OWNRefC6YtASxYmBq"/>
|
|
</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 connecting dropped pins - Primary Blue -->
|
|
<path class="route-line opacity-80" d="M 300 700 Q 400 650 450 500 T 700 300" fill="none" stroke="#aac7ff" stroke-linecap="round" stroke-linejoin="round" stroke-width="6"></path>
|
|
<!-- Waypoint 1 (Dropped Pin) -->
|
|
<circle cx="450" cy="500" fill="#aac7ff" r="6" stroke="#131313" stroke-width="2"></circle>
|
|
<!-- Waypoint 2 (Destination) -->
|
|
<circle cx="700" cy="300" fill="#131313" r="8" stroke="#aac7ff" stroke-width="3"></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 rounded-full opacity-30"></div>
|
|
<div class="absolute w-3 h-3 bg-primary rounded-full pulse-ring"></div>
|
|
<div class="w-2 h-2 bg-primary rounded-full relative z-10 shadow-[0_0_10px_rgba(170,199,255,0.8)]"></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/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">
|
|
<div class="tooltip-float bg-surface-container-high/90 backdrop-blur-xl border border-outline-variant/30 rounded-full px-6 py-3 flex items-center gap-2 shadow-sm">
|
|
<span class="material-symbols-outlined text-primary text-xl" style="font-variation-settings: 'FILL' 1;">location_on</span>
|
|
<span class="font-label-caps text-label-caps text-on-surface">Tap to drop a pin</span>
|
|
</div>
|
|
</div>
|
|
<!-- Bottom Navigation Bar -->
|
|
<nav class="bg-surface-container/90 backdrop-blur-xl border-t border-outline-variant/20 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.5)]">
|
|
<!-- Map (Inactive) -->
|
|
<button class="flex flex-col items-center justify-center text-on-surface-variant hover:text-primary transition-colors duration-200 w-16 h-full gap-1 group">
|
|
<span class="material-symbols-outlined text-2xl group-active:scale-95 transition-transform duration-150">map</span>
|
|
<span class="font-label-caps text-[10px] uppercase tracking-widest">Map</span>
|
|
</button>
|
|
<!-- Rides (Inactive) -->
|
|
<button class="flex flex-col items-center justify-center text-on-surface-variant hover:text-primary transition-colors duration-200 w-16 h-full gap-1 group">
|
|
<span class="material-symbols-outlined text-2xl group-active:scale-95 transition-transform duration-150">directions_bike</span>
|
|
<span class="font-label-caps text-[10px] uppercase tracking-widest">Rides</span>
|
|
</button>
|
|
<!-- Plan (Active) -->
|
|
<button class="flex flex-col items-center justify-center text-primary relative after:content-[''] after:absolute after:bottom-2 after:w-1 after:h-1 after:bg-primary after:rounded-full hover:text-primary transition-colors duration-200 w-16 h-full gap-1 group">
|
|
<span class="material-symbols-outlined text-2xl group-active:scale-95 transition-transform duration-150" style="font-variation-settings: 'FILL' 1;">route</span>
|
|
<span class="font-label-caps text-[10px] uppercase tracking-widest text-primary">Plan</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 bg-primary/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> |