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:
2026-08-23 18:05:37 -05:00
parent b781ee36a8
commit fe8a7b6e3e
11 changed files with 1504 additions and 0 deletions

View File

@@ -0,0 +1,50 @@
# Rippr Project Export
## Project Overview
Rippr is a minimalist activity tracker designed for cyclists and runners, featuring an immersive map-centric interface, real-time telemetry, and streamlined route planning.
## Design System: Modern Professional Dark
**ID:** {{DATA:DESIGN_SYSTEM:DESIGN_SYSTEM_3}}
### Theme Tokens
- **Color Mode:** Dark
- **Primary Color:** #1978e5 (Professional Blue)
- **Typography:** Inter
- **Roundness:** 8px (Round Eight)
### Core Components
- **TopAppBar:** Minimalist, often hidden for immersive map views.
- **BottomNavBar:** 4-icon layout (Map, History, Plan, Settings) with a signature active indicator dot.
- **Telemetry Cards:** Floating, semi-transparent modules (`bg-surface/60`) with `backdrop-blur-xl` and `white/10` borders.
---
## Screen Inventory
### 1. Map HUD (Active Navigation)
- **ID:** {{DATA:SCREEN:SCREEN_8}}
- **Description:** Fullscreen map interface with floating telemetry cards at the top showing Speed, Avg Speed, Distance, and Time. Units are integrated inline (e.g., "24.5 km/h").
- **Controls:** Detached Pause (Yellow) and Stop (Red) buttons positioned above the bottom navigation.
### 2. Plan Screen (Ready state)
- **ID:** {{DATA:SCREEN:SCREEN_7}}
- **Description:** Clean map interface identical to the HUD but without telemetry or ride controls. Features a subtle floating tooltip: "Tap to drop a pin".
### 3. Route Planning (Active Pins)
- **ID:** {{DATA:SCREEN:SCREEN_5}}
- **Description:** Secondary state of the Plan screen showing 5 dropped pins connected by a blue dotted line. A floating header displays total distance, estimated time, and pin count.
### 4. Rides History
- **ID:** {{DATA:SCREEN:SCREEN_6}}
- **Description:** List of previous routes displayed as cards over a blurred live map background. Each card shows a mini-map preview, date, distance, time, and average speed.
### 5. Settings / Profile
- **ID:** {{DATA:SCREEN:SCREEN_4}}
- **Description:** Structured list of user preferences, account details, and cloud sync options. Designed with clean hierarchy and professional dark mode styling.
---
## Technical Specifications
- **Framework:** HTML5 / CSS3 (Tailwind CSS)
- **Interactivity:** Vanilla JavaScript for map state and telemetry updates.
- **Visual Effects:** Backdrop filters for UI depth and high-contrast vector paths for route visualization.

View File

@@ -0,0 +1,317 @@
<!DOCTYPE html>
<html class="dark" lang="en" style=""><head></head><body class="antialiased selection:bg-primary-container selection:text-on-primary-container flex flex-col h-screen relative text-on-surface bg-surface"><svg aria-hidden="true" class="inline-defs-container" style="position:absolute;width:0;height:0;overflow:hidden"></svg>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport"/>
<title>RIPPR - Record Activity</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&amp;family=JetBrains+Mono:wght@400;500;700&amp;family=Sora:wght@400;600;700&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;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": {
"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"
],
"display-telemetry": ["Inter"],
"label-caps": ["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"
}
],
"display-telemetry": ["64px", { "lineHeight": "64px", "letterSpacing": "-0.04em", "fontWeight": "700" }],
"label-caps": ["12px", { "lineHeight": "16px", "letterSpacing": "0.1em", "fontWeight": "500" }]
}
},
},
}
</script>
<style>
body { margin: 0; overflow: hidden; background-color: #131313; color: #e5e2e1; min-height: max(884px, 100dvh); }
.hud-panel { background: rgba(32, 31, 31, 0.8); backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, 0.1); }
.glass-btn { background: rgba(32, 31, 31, 0.9); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.1); }
</style>
<!-- Background Map Placeholder -->
<div class="absolute inset-0 z-0 bg-surface">
<div class="w-full h-full bg-cover bg-center opacity-40 mix-blend-luminosity" data-alt="A light mode stylized city map view for a fitness tracking application. Minimalist aesthetic with high contrast blue routes highlighting paths against light gray blocks representing buildings and terrain. The map appears like a clean interface overlay." 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>
<!-- Routes and Location Overlay -->
<svg class="absolute inset-0 w-full h-full pointer-events-none" preserveaspectratio="xMidYMid slice" viewbox="0 0 400 800">
<defs>
<lineargradient id="speedGradient" x1="10%" x2="50%" y1="90%" y2="50%">
<stop offset="0%" stop-color="#4090fe"></stop>
<stop offset="40%" stop-color="#aac7ff"></stop>
<stop offset="70%" stop-color="#ffb4ab"></stop>
<stop offset="100%" stop-color="#ffb4ab"></stop>
</lineargradient>
</defs>
<!-- Planned Route -->
<path d="M 200 400 C 250 250, 150 150, 300 50" fill="none" opacity="0.8" stroke="#8b919f" stroke-dasharray="10 10" stroke-linecap="round" stroke-linejoin="round" stroke-width="6"></path>
<!-- Completed Route -->
<path d="M 100 750 C 150 600, 100 500, 200 400" fill="none" stroke="url(#speedGradient)" stroke-linecap="round" stroke-linejoin="round" stroke-width="6"></path>
<!-- Pulsing Location Dot -->
<circle cx="200" cy="400" fill="#4090fe" r="8"></circle>
<circle cx="200" cy="400" fill="none" r="8" stroke="#4090fe" stroke-width="2">
<animate attributename="r" dur="1.5s" from="8" repeatcount="indefinite" to="24"></animate>
<animate attributename="opacity" dur="1.5s" from="1" repeatcount="indefinite" to="0"></animate>
</circle>
</svg>
</div>
<!-- TopAppBar JSON Component -->
<!-- Main Content Canvas (HUD Layout) -->
<main class="flex-1 relative z-10 flex flex-col pb-40 px-2 md:px-margin-desktop w-full max-w-7xl mx-auto md:ml-24 md:w-[calc(100%-6rem)] p-2">
<!-- Compact Telemetry Row -->
<div class="flex flex-row gap-1 w-full" id="telemetry-container">
<div class="metric-card flex-1 hud-panel p-2 rounded-lg flex flex-col items-center justify-center cursor-pointer transition-all duration-300 overflow-hidden min-w-0">
<span class="metric-title font-label-caps text-[9px] sm:text-[10px] text-on-surface-variant uppercase whitespace-nowrap truncate w-full text-center">Speed</span>
<div class="metric-value font-display-telemetry text-base text-primary mt-1 transition-all duration-300 whitespace-nowrap">24.5 km/h</div>
</div>
<div class="metric-card flex-1 hud-panel p-2 rounded-lg flex flex-col items-center justify-center cursor-pointer transition-all duration-300 overflow-hidden min-w-0">
<span class="metric-title font-label-caps text-[9px] sm:text-[10px] text-on-surface-variant uppercase whitespace-nowrap truncate w-full text-center">Avg Speed</span>
<div class="metric-value font-display-telemetry text-lg text-on-surface mt-1 transition-all duration-300">22.1</div>
</div>
<div class="metric-card flex-1 hud-panel p-2 rounded-lg flex flex-col items-center justify-center cursor-pointer transition-all duration-300 overflow-hidden min-w-0">
<span class="metric-title font-label-caps text-[9px] sm:text-[10px] text-on-surface-variant uppercase whitespace-nowrap truncate w-full text-center">Dist</span>
<div class="metric-value font-display-telemetry text-base text-secondary mt-1 transition-all duration-300 whitespace-nowrap">12.4 km</div>
</div>
<div class="metric-card flex-1 hud-panel p-2 rounded-lg flex flex-col items-center justify-center cursor-pointer transition-all duration-300 overflow-hidden min-w-0">
<span class="metric-title font-label-caps text-[9px] sm:text-[10px] text-on-surface-variant uppercase whitespace-nowrap truncate w-full text-center">Time</span>
<div class="metric-value font-display-telemetry text-lg text-on-surface mt-1 transition-all duration-300">45:12</div>
</div>
</div>
</main>
<!-- Full Width Recording Control Bar -->
<div class="fixed bottom-[80px] md:bottom-0 md:left-24 w-full md:w-[calc(100%-6rem)] z-40">
<div class="flex flex-row w-full h-16 shadow-[0_-4px_6px_-1px_rgba(0,0,0,0.5)]">
<button class="flex-1 bg-tertiary-container text-on-tertiary-container font-headline-md flex items-center justify-center transition-colors duration-300 border-r border-white/10"><span class="material-symbols-outlined text-[32px]" style='font-variation-settings: "FILL" 1;'>pause</span></button>
<button class="flex-1 bg-error-container text-on-error-container font-headline-md flex items-center justify-center transition-colors duration-300"><span class="material-symbols-outlined text-[32px]" style='font-variation-settings: "FILL" 1;'>stop</span></button>
</div>
</div>
<!-- BottomNavBar JSON Component -->
<nav class="bg-surface/80 backdrop-blur-xl fixed bottom-0 w-full z-50 pb-safe border-t border-white/10 md:hidden">
<div class="flex justify-around items-center h-20 px-margin-mobile font-label-caps text-label-caps font-display-telemetry"><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;'>map</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;'>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></div>
</nav>
<!-- Desktop Side Nav (Visible only on md+) -->
<aside class="hidden md:flex flex-col fixed left-0 top-16 bottom-0 w-24 bg-surface/80 backdrop-blur-xl border-r border-white/10 z-40 items-center py-8 gap-12">
<button class="flex flex-col items-center justify-center text-on-surface-variant hover:text-primary/80 transition-colors w-full py-4 font-label-caps text-label-caps">
<span class="material-symbols-outlined mb-2 text-2xl">map</span>
Map
</button>
<button class="flex flex-col items-center justify-center text-primary relative after:content-[''] after:absolute after:left-0 after:top-1/2 after:-translate-y-1/2 after:w-1 after:h-8 after:bg-primary after:rounded-r-full hover:text-primary/80 transition-colors w-full py-4 font-label-caps text-label-caps bg-white/5">
<span class="material-symbols-outlined mb-2 text-2xl" style="font-variation-settings: 'FILL' 1;">directions_bike</span>
Rides
</button>
<button class="flex flex-col items-center justify-center text-on-surface-variant hover:text-primary/80 transition-colors w-full py-4 font-label-caps text-label-caps">
<span class="material-symbols-outlined mb-2 text-2xl">route</span>
Plan
</button>
</aside>
<script>
document.addEventListener('DOMContentLoaded', () => {
// Recording Toggle Logic
const toggleBtn = document.getElementById('recordingToggle');
const toggleIcon = document.getElementById('toggleIcon');
const toggleText = document.getElementById('toggleText');
let isRecording = true;
toggleBtn?.addEventListener('click', () => {
isRecording = !isRecording;
if(isRecording) {
toggleBtn.classList.remove('bg-error-container', 'text-on-error-container');
toggleBtn.classList.add('bg-primary-container', 'text-on-primary-container');
toggleIcon.textContent = 'stop_circle';
toggleText.textContent = 'Stop Recording';
} else {
toggleBtn.classList.remove('bg-primary-container', 'text-on-primary-container');
toggleBtn.classList.add('bg-error-container', 'text-on-error-container');
toggleIcon.textContent = 'play_arrow';
toggleText.textContent = 'Start Recording';
}
});
// Telemetry Expansion Logic
const metrics = document.querySelectorAll('.metric-card');
metrics.forEach(metric => {
metric.addEventListener('click', () => {
const isExpanded = metric.classList.contains('flex-[2.5]');
// Reset all
metrics.forEach(m => {
m.classList.remove('flex-[2.5]', 'bg-surface-container-highest');
m.classList.add('flex-1');
m.querySelector('.metric-value').classList.remove('text-2xl', 'md:text-3xl');
m.querySelector('.metric-value').classList.add('text-lg');
});
// Expand if it wasn't already expanded
if (!isExpanded) {
metric.classList.remove('flex-1');
metric.classList.add('flex-[2.5]', 'bg-surface-container-highest');
metric.querySelector('.metric-value').classList.remove('text-lg');
metric.querySelector('.metric-value').classList.add('text-2xl', 'md:text-3xl');
}
});
});
});
</script>
</body></html>

Binary file not shown.

After

Width:  |  Height:  |  Size: 89 KiB

View File

@@ -0,0 +1,336 @@
<!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&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&amp;family=JetBrains+Mono:wght@400;500;700&amp;family=Sora:wght@600;700&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&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",
"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>

Binary file not shown.

After

Width:  |  Height:  |  Size: 138 KiB

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>

Binary file not shown.

After

Width:  |  Height:  |  Size: 78 KiB

View 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&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&amp;family=JetBrains+Mono:wght@400;500;700&amp;family=Sora:wght@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",
"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>

Binary file not shown.

After

Width:  |  Height:  |  Size: 83 KiB