Import Stitch UI export: Rippr Minimalist Activity Tracker
Pulled via the Stitch MCP from project 8187200995279352789: the design system spec (neon-HUD dark theme -- Sora/Inter/JetBrains Mono, electric green primary, cyan secondary) plus HTML/screenshot for Map HUD, Plan Screen, Route Planning, and Rides History (all Dark Mode), and the project's own export summary.
Raw reference material only, not yet wired into the app. Flags a real discrepancy in README.md: the export summary describes a different ('Modern Professional Dark', blue) design system than the one actually attached to the project and used by every screen fetched -- treat design-system.md as current, export-summary.md as stale.
This commit is contained in:
275
docs/design/stitch-export/screens/route-planning-dark.html
Normal file
275
docs/design/stitch-export/screens/route-planning-dark.html
Normal file
@@ -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