# 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.