Files

uhryniuk 587f75eab4 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

2026-08-24 14:41:35 -05:00

2.3 KiB

Raw Permalink Blame History

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

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.

2.3 KiB Raw Permalink Blame History