motorsignal
/
MotorSignal-App
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
MotorSignal-App/docs/STITCH_DESIGN_SPECIFICATION.md

68 KiB
Raw Permalink Blame History

MotorSignal — Master Stitch Design Specification

Modern Bootstrap 5.3+ Responsive Architecture for Web & Mobile

Including Comprehensive UI Element Requirements for Every Page and Screen

Document Version: 1.1.0
Design System Target: Bootstrap 5.3+ (Dark Cockpit Theme / Neon Telemetry Accents)
Target Runtimes: MotorSignal Web Portal (website/) & MotorSignal Mobile App (lib/)
Design Engine Tool: Google Stitch / StitchMCP (create_design_system, generate_screen_from_text)

Executive Summary & Design System Foundations

This specification defines every single screen and page across the MotorSignal ecosystem (24 web routes and 32 mobile app screens) for automated design generation using Stitch into a modern, responsive Bootstrap 5.3+ design system.

MotorSignal is a high-performance motorcycle telemetry, ride analysis, road alert, and pack ride platform. The design aesthetic balances tactical dark cockpit utility (optimised for glove-friendly touch and sunlight readability) with clean, high-density telemetry data visualization.

Core Design Tokens (Bootstrap 5.3 SCSS / CSS Variables)

:root {
  /* Surface & Background Colors */
  --ms-bg-canvas: #070A0F;           /* Ultra-deep cockpit black */
  --ms-bg-card: #0D131F;             /* Deep tactical blue-grey */
  --ms-bg-card-hover: #141C2E;       /* Elevated surface hover */
  --ms-bg-glass: rgba(13, 19, 31, 0.75); /* Glassmorphism HUD panels */
  --ms-border: #1E293B;              /* Slate-800 subtle borders */
  --ms-border-active: #00E5FF;       /* Active focus / telemetry border */

  /* High-Contrast Telemetry Accents */
  --ms-cyan-accent: #00E5FF;         /* Primary brand / GPS / Telemetry */
  --ms-electric-blue: #2563EB;       /* Secondary actions / standard buttons */
  --ms-neon-purple: #8B5CF6;         /* Pro Tier / Club Badges */
  --ms-alert-red: #EF4444;           /* Police speed traps / G-force brake threshold */
  --ms-hazard-amber: #F59E0B;        /* Road hazards / Cautionary alerts */
  --ms-lean-green: #10B981;          /* Active recording / Lean angle balance */

  /* Typography */
  --ms-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --ms-font-telemetry: 'Orbitron', 'Rajdhani', monospace; /* Speeds, Angles, Timers */
  --ms-font-mono: 'JetBrains Mono', 'Fira Code', monospace;     /* Logs, Diagnostics */

  /* Spatial & Component Metrics */
  --ms-touch-target-min: 48px;       /* Glove-friendly minimum tap area */
  --ms-card-radius: 14px;            /* Modern rounded-3 styling */
  --ms-hud-blur: 16px;               /* Backdrop blur filter */
}

PART I: WEBSITE PAGES (24 Routes)

PAGE-WEB-01: Public Homepage

  • Route: GET /
  • Target Audience: Public visitors, motorcycle riders, track-day enthusiasts, clubs.
  • Bootstrap 5.3 Grid Structure:
    • Full-width hero container (container-fluid px-lg-5) with 2-column split on desktop (col-lg-7 hero copy, col-lg-5 interactive HUD phone mockup).
    • Floating Live Telemetry Strip (container my-5 with row g-3 row-cols-2 row-cols-md-4).
    • Interactive Lap & Lean Visualizer section (container py-5).
    • 3-Column Core Value Pillars (row g-4 row-cols-1 row-cols-md-3).
    • Testimonial Carousel & Community Social Proof (container py-5).
    • High-impact Conversion CTA Banner with download badges.
  • Required UI Elements & Controls:
    • Navigation Bar: Glowing cyan brand logo (MotorSignal), desktop links (Features, Group Rides, Clubs, Pricing, Support), Sign In button, and Download App pill button (btn btn-cyan rounded-pill).
    • Hero Title & Subtitle: Display-3 bold headline with cyan highlight span, subtitle explaining 20 Hz acquisition and lean angle physics.
    • Hero Actions: Primary Download Android APK button with download icon, secondary Explore Features outline button, Google Play & Apple TestFlight store badges.
    • Interactive 3D Phone HUD Mockup: Frameless mobile viewport rendering real-time SVG 48° lean gauge, 62 MPH digital readout, G-force friction circle, and Waze police trap banner.
    • Telemetry Metric Strip (4 Cards):
      • 20 Hz IMU Engine: Real-time Kalman acquisition vs 1 Hz standard phone GPS.
      • 0.05s Telemetry Cadence: Sub-second forensic event resolution.
      • 100% Offline Resilience: SQLite/Drift Schema 7 canyon recording.
      • 0.01g Lateral Precision: In-corner braking and acceleration friction limits.
    • Interactive Lean Angle Slider Widget: Range input slider (0^\circ to 55^\circ) updating a live banking motorcycle SVG graphic and displaying the 15° audio mute safety threshold.
    • 3 Value Pillar Cards:
      • Tactical Cockpit HUD (Minimal, Sport, Touring views).
      • Real-Time Waze Police & Camera Alerts (Strict TYPE: POLICE filter).
      • Live Group Ride Mesh Radar (Real-time pack formation and proximity alerts).
    • Testimonial Slider: Rider quotes with avatar image, rider handle, and motorcycle model badge (e.g. Ducati Panigale V4, BMW R1250GS).
    • Footer: Brand mission, platform links, legal terms, privacy, copyright notice, version pill.
  • Stitch Generation Prompt:

    "Design a modern Bootstrap 5.3 dark-mode landing page for MotorSignal, a motorcycle telemetry and road alert platform. Use a deep navy-black canvas (#070A0F) with electric cyan (#00E5FF) and neon amber accents. Top navigation has a glowing cyan logo, links for Features, Group Rides, Clubs, Pricing, and a 'Download App' pill button. The hero section features a dual column: on the left, an aggressive headline 'High-Fidelity Telemetry for Every Corner', subtext, and call-to-action buttons; on the right, a 3D isometric glassmorphism smartphone showcasing an active cockpit with a 48-degree lean angle gauge, 0-60 performance card, and Waze police trap warning banner. Below the hero, include a live telemetry metric strip showing 20 Hz IMU acquisition, 0.05s latency, 100% offline sync, and 0-60 precision. Include cards for 3 pillars: Tactical Cockpit HUD, Real-Time Police & Hazard Swarm, and Mesh Group Ride Radar."

PAGE-WEB-02: Features & Engineering Specifications

  • Route: GET /features
  • Target Audience: Riders demanding technical depth, engineers, track coaches.
  • Bootstrap 5.3 Grid Structure:
    • Header banner (py-5 text-center).
    • 4 Deep-Dive Alternating Feature Rows (row align-items-center g-5 my-5, alternating col-lg-6 technical diagram and col-lg-6 explanatory card).
    • Comparative Hardware & Sensor Matrix Table (table-responsive inside card card-dark).
  • Required UI Elements & Controls:
    • Header Section: Technical badge (AEROSPACE-GRADE SENSOR FUSION), Page title, technical whitepaper download link.
    • Section 1: 20 Hz Telemetry Engine: Dual-line canvas chart comparing 1 Hz GPS trajectory (stepped, inaccurate) vs 20 Hz MotorSignal Kalman trajectory (smooth, capturing mid-corner apex corrections).
    • Section 2: Lean Angle Gyroscopic Physics: Exploded technical schematic showing roll, pitch, and yaw vectors, 3-axis accelerometer and gyroscope integration, and lean estimation equations.
    • Section 3: Motorcycle Safety Lean-Angle Mute (Cornering Interlock): State diagram card showing audio warning suppression when lean > 15^\circ, and audio unmuting when bike returns upright (< 10^\circ) for 1.5 seconds.
    • Section 4: Dual Storage & Offline Synchronization: Architectural flow diagram showing SQLite/Drift Schema 7 local storage, SyncOutbox retry queue, Cloudflare R2 binary telemetry bundles, and Firestore metadata index.
    • Hardware & Sensor Comparison Table: Responsive data table with columns (Feature, Standard Phone Navigation, Dedicated Track Hardware, MotorSignal), comparing sample rates, offline reliability, police alert accuracy, and battery consumption.
    • Technical FAQ Accordion: 5 items answering questions about sensor calibration, mounting orientation, and GPS constellation locks.
  • Stitch Generation Prompt:

    "Create a high-tech engineering features page in Bootstrap 5.3 for a motorcycle telemetry system. Dark mode with card surfaces (#0D131F) and fine borders (#1E293B). Display technical architectural diagrams with glowing cyan and purple vector graphics. Section 1 shows an interactive telemetry frequency comparison: a choppy 1 Hz standard GPS curve versus a smooth, high-fidelity 20 Hz MotorSignal Kalman-filtered curve. Section 2 highlights the motorcycle lean-angle algorithm with an exploded diagram of a superbike banked at 52 degrees with roll and yaw vectors. Section 3 illustrates the Safety Lean-Angle Mute interlock blocking distraction during apex. Include a comparison matrix table with checkmarks for Drift Schema 7, Cloudflare R2 binary bundles, and Waze real-time police alerts."

PAGE-WEB-03: Membership & Pricing

  • Route: GET /pricing
  • Target Audience: Free tier riders looking to upgrade to Pro or Lifetime Founder.
  • Bootstrap 5.3 Grid Structure:
    • Header with Monthly / Annual Billing Toggle Switch (form-check form-switch d-inline-flex).
    • 3-Tier Pricing Card Deck (row row-cols-1 row-cols-md-3 g-4 mb-5).
    • Feature Comparison Breakdown Table (table table-dark table-hover align-middle).
    • Frequently Asked Questions Accordion (col-lg-8 mx-auto).
  • Required UI Elements & Controls:
    • Billing Switch: Centered toggle (Monthly vs Annual) with a pulsing badge (SAVE 33% ON ANNUAL).
    • Card 1: Free Rider Tier: Price ($0 / month), Feature checklist (10 recorded rides, Standard HUD cockpit, Offline OpenStreetMap base, Community hazard alerts), Action button (Get Started Free).
    • Card 2: Pro Rider Tier (Featured): Elevated glowing cyan border, MOST POPULAR floating badge, Price ($9.99/mo or $79/yr), Feature checklist (Unlimited rides, 20 Hz forensic telemetry export, Waze Police & HERE camera feeds, Draggy-style 0-60 launch mode, Live pack radar mesh, Cloud backup), Action button (Start 14-Day Free Trial).
    • Card 3: Founder Lifetime Tier: Gold and purple gradient header, ONE-TIME PAYMENT badge, Price ($199 Lifetime), Feature checklist (All Pro features forever, Club Founder & Officer toolkit, Physical engraved member patch, VIP Discord access), Action button (Claim Founder Access).
    • Full Comparison Matrix Table: 25 feature rows categorized by Telemetry, Road Alerts, Group Rides, and Cloud Storage with checkmarks and tooltips.
    • FAQ Accordion: 6 collapsible answers with clean plus/minus icons.
    • Guarantee Pill: 14-day money-back guarantee seal.
  • Stitch Generation Prompt:

    "Design a modern Bootstrap 5.3 pricing page for a motorcycle performance app. Dark palette (#070A0F) with three distinct pricing tier cards. The center card 'Pro Rider' ($9.99/mo or $79/yr) is elevated with a glowing cyan neon border, a 'Recommended' floating pill badge, and an electric cyan 'Start 14-Day Free Trial' button. Left card is 'Rider Basic' (Free) with subtle slate styling. Right card is 'Founder Lifetime' ($199 once) with a deep purple and gold gradient crest. Below the cards, place a comprehensive comparison matrix table with sticky column headers, comparing features like 20 Hz acquisition, Waze Police speed trap warnings, Lean Angle HUD, and Group Ride Radar. Finish with a clean dark-themed FAQ accordion."

PAGE-WEB-04: Download & Multi-Platform Hub

  • Route: GET /download
  • Target Audience: Riders downloading the Android APK directly or accessing Google Play / iOS TestFlight.
  • Bootstrap 5.3 Grid Structure:
    • Hero download section with dynamic device detection (col-lg-6 direct download action, col-lg-6 QR code transfer card).
    • Version Release Notes & Checksum Card (col-lg-8 mx-auto mt-5).
    • Step-by-step sideloading guide for Android APK (row row-cols-1 row-cols-md-3 g-4).
  • Required UI Elements & Controls:
    • Primary Action Card: Large direct download button (Download MotorSignal APK - 221 MB), version indicator (v1.0.2-stable), minimum OS requirements (Android 10+ / API 29).
    • Integrity Verification Card: SHA-256 checksum code block with a one-click Copy Checksum button.
    • Instant Phone Install QR Code: Dynamic QR code graphic with instruction text ("Scan with your phone's camera to install directly").
    • App Store Alternative Buttons: Google Play badge, Apple TestFlight waitlist request button.
    • Sideloading Instructions (3 Cards):
      • Step 1: Download APK file.
      • Step 2: Open Downloads & allow Install unknown apps in Android Settings.
      • Step 3: Launch MotorSignal & grant Location and Sensor permissions.
    • Changelog Accordion: Collapsible release notes highlighting new features (e.g. Waze Police speed traps, Draggy launch mode).
  • Stitch Generation Prompt:

    "Create a high-conversion download page in Bootstrap 5.3 for an Android motorcycle app. Dark background with glowing download buttons. Prominently display a large 'Download MotorSignal APK (v1.0.2)' primary action card featuring Android robot icon, file size pill (221 MB), SHA-256 hash box with one-click copy button, and a large QR code for instant phone installation. Include secondary buttons for Google Play and iOS TestFlight waitlist. Beneath, add 3 numbered icon cards showing installation steps: 1. Download APK, 2. Allow Unknown Sources, 3. Pair Bluetooth/GPS and Ride."

PAGE-WEB-05: Public Group Rides Discovery

  • Route: GET /group-rides
  • Target Audience: Riders looking for local pack rides, meetups, and weekend rallies.
  • Bootstrap 5.3 Grid Structure:
    • Search & Filter Toolbar (card card-dark p-3 mb-4 with inputs for City/Zip, Radius, Pace filter, Terrain).
    • 2-Column Split View: Interactive Web Map on left (col-lg-7), Scrollable Ride Cards List on right (col-lg-5).
  • Required UI Elements & Controls:
    • Search Bar & Filters: Search input with location pin icon, radius dropdown (10, 25, 50, 100 miles), pace selector pills (All, Cruiser Chill, Brisk Twisties, Track/Spirited), date range picker.
    • Host Ride CTA Button: Header action button (+ Create Pack Ride).
    • Interactive Map: Dark tactical tile map with numbered cluster pins, route polyline previews on card hover, and user location marker.
    • Ride Cards List: Scrollable list with ride card elements:
      • Route thumbnail map.
      • Ride Title, Date, and Departure Time badge.
      • Meeting location with distance from user ("12.4 miles away").
      • Pace badge with color code (Green = Chill, Yellow = Moderate, Red = Spirited).
      • Rider RSVP avatar stack with count (e.g. +18 riders).
      • Route metrics: Total mileage and estimated ride duration.
      • Action button: Join Pack (opens Join Modal) or View Briefing.
    • Join Ride Modal: Rider motorcycle confirmation, emergency contact check, agreement to pack safety rules, and Confirm RSVP button.
  • Stitch Generation Prompt:

    "Design a modern Bootstrap 5.3 split-screen group ride discovery page. The left 60% contains a full-height dark tactical map displaying glowing route lines and circular ride staging pins. The right 40% contains a scrollable feed of upcoming pack rides. Top search bar features inputs for location radius, pace filter pills (Casual, Moderate, Spirited), and date picker. Each ride card features a route thumbnail, departure time pill badge, distance, host club crest, attendee avatar stack (+14 riders), and a bright cyan 'Join Pack' button."

PAGE-WEB-06: Live Group Ride Telemetry Showcase

  • Route: GET /group-rides/showcase
  • Target Audience: Users testing or previewing real-time mesh pack radar technology.
  • Bootstrap 5.3 Grid Structure:
    • Full-viewport HUD canvas (vh-100 position-relative).
    • Floating Left HUD: Roster of live riders in pack with real-time speed, gap distance, and battery status.
    • Floating Right HUD: Lead bike telemetry stream (Lean angle, speed, brake G-force).
    • Floating Bottom HUD: Timeline scrubber and interactive simulation controls.
  • Required UI Elements & Controls:
    • Fullscreen Radar Canvas: Concentric radar range circles (100 ft, 500 ft, 0.5 mi) with directional compass rose and 6 moving motorcycle blips.
    • Pack Roster Card (Floating Left):
      • Road Captain Lead: Name, bike model, live speed (64 MPH), GPS status.
      • Pack riders: Staggered formation order, gap distance (+0.1 mi, +0.3 mi), telemetry sync quality pill.
      • Tail Gunner Sweep: Sweeper handle, rear hazard warning status.
    • Lead Telemetry Card (Floating Right):
      • Live 38° lean angle arc gauge.
      • Digital speed readout (64 MPH).
      • Lateral and braking G-force vector bubble.
    • Simulation Control Dock (Floating Bottom):
      • Play / Pause button.
      • Simulation speed multiplier pills (1x, 2x, 5x).
      • Interactive timeline scrubber bar.
      • Trigger Emergency Hazard Ping button simulating real-time pack alert broadcast.
  • Stitch Generation Prompt:

    "Design a futuristic, full-screen live pack telemetry showcase using Bootstrap 5.3 and dark glassmorphic HUD overlays. Center is a dark tactical map showing 6 motorcycle riders in formation on a mountain pass with directional arrows. Floating translucent card on the top left lists the pack roster with rider handles, gap distance (+0.2 mi), and live speeds. Floating top right card displays the Road Captain's active telemetry: an animated 38-degree lean gauge and 64 MPH speedometer. Bottom control dock has Play/Pause, speed multiplier (1x, 2x, 5x), and an emergency ping test button."

PAGE-WEB-07: Web Group Ride Organizer & Management

  • Route: GET /group-rides/manage
  • Target Audience: Group ride organizers, road captains, club leaders.
  • Bootstrap 5.3 Grid Structure:
    • Page header with 'Create New Ride' button (d-flex justify-content-between align-items-center mb-4).
    • Stats row (row g-3 mb-4: Total Rides Hosted, Active RSVPs, Safety Incident Rate 0.0%).
    • Tabbed interface (nav nav-pills mb-3: Upcoming, In-Progress, Completed, Drafts).
    • Data table / Card list of organized rides with action dropdowns (Edit, Roster, GPX Export, Cancel).
  • Required UI Elements & Controls:
    • Top KPI Metric Cards:
      • Hosted Rides: Total count with monthly trend.
      • Active RSVPs: Confirmed attendees across upcoming rides.
      • Pack Safety Score: 100% incident-free completion rate.
    • Filter Tabs: Upcoming (4), Live Now (1), Completed (28), Drafts (2).
    • Rides Table / Card List:
      • Columns: Date & Time, Ride Name, Start/Finish Points, Pace Badge, Capacity Meter (e.g. 24/30 riders), Live Status (Staging, En Route, Finished), and Action Menu.
      • Action Menu items: Edit Route, Manage Attendee Roster, Broadcast Pack Announcement, Export GPX Cue Sheet, Cancel Ride.
    • Create Ride Modal: Form fields for Title, Staging Address, Meeting Time, Kickstands Up (KSU) Time, Route upload (GPX) or route selector, Maximum Riders limit, Pace selection, Radio / Mesh Channel ID.
    • Attendee Management Drawer: List of attendees with check-in checkbox, bike model, emergency contact phone, and assigned pack role dropdown (Lead, Sweep, Mid-Pack).
  • Stitch Generation Prompt:

    "Design a comprehensive Bootstrap 5.3 organizer management dashboard for motorcycle group rides. Dark UI (#0D131F) with clean white and slate text. Top metrics display: 12 Upcoming Rides, 148 Confirmed Riders, 100% On-Time Starts. Below is a responsive table of scheduled pack rides featuring columns: Date & Time, Route Name, Meeting Point, Pace, Capacity Progress Bar (24/30), Status Badge (Staging, Live, Finished), and Quick Actions (View Roster, Edit Route, Broadcast Alert, Cancel). Include a prominent cyan 'Create Group Ride' button."

PAGE-WEB-08: Motorcycle Clubs Directory

  • Route: GET /clubs
  • Target Audience: Riders seeking riding clubs, brand chapters (Ducati, Harley, BMW, Yamaha), and enthusiast groups.
  • Bootstrap 5.3 Grid Structure:
    • Featured Club Hero Carousel / Masthead (container mb-5).
    • Search & Category Filter Bar (d-flex flex-wrap gap-2 mb-4).
    • 3-Column Club Card Grid (row row-cols-1 row-cols-md-3 g-4).
  • Required UI Elements & Controls:
    • Directory Header: Search input with magnifying glass, Location filter dropdown, Riding Discipline pill filters (All, Sportbike / Canyons, Adventure / Dual Sport, Cruiser / Touring, Track Enthusiasts).
    • Club Cards Grid (3 Columns):
      • Club Crest / Patch Emblem (circular bordered badge).
      • Club Name and Chapter Location (e.g. Pacific Coast Riders — Bay Area Chapter).
      • Membership Badge (Open to Public, Application Required, Invite Only).
      • Member Count Pill (48 Members).
      • Riding Style Tags (e.g. #Twisties, #Ducati, #WeekendTrips).
      • Club Bio / Mission Statement excerpt.
      • Action Button: View Club & Apply or Explore Chapter.
    • Register Your Club Banner: Bottom banner with CTA button (Register a New Club / Chapter).
  • Stitch Generation Prompt:

    "Create a stylish motorcycle club directory page in Bootstrap 5.3 dark mode. Top hero features a dark leather and carbon fiber texture banner with the text 'Find Your Pack'. Below is a search bar with tags for Riding Style (Cruiser, ADV, Track, Sportbike) and Region. Grid displays club profile cards: each card has a circular club crest/logo, club name, chapter city, active member counter badge, short bio, tags, and a 'View Club / Apply' button with a subtle hover glow."

PAGE-WEB-09: Club Founder & Officer Hub

  • Route: GET /clubs/manage
  • Target Audience: Club presidents, vice presidents, and road captains.
  • Bootstrap 5.3 Grid Structure:
    • Club selector dropdown for officers managing multiple chapters.
    • Multi-card overview (col-lg-4 pending applications, col-lg-4 upcoming rides, col-lg-4 club treasury/dues).
    • Recent club activity log stream.
  • Required UI Elements & Controls:
    • Top Navigation Bar: Club switcher dropdown, Officer Rank badge (President), Quick Create Ride button.
    • Officer KPI Cards:
      • Pending Applications: Count pill with Review Now shortcut.
      • Upcoming Club Rides: Count with next ride countdown ("Saturday 9:00 AM").
      • Active Roster: Total verified members with active rider percentage.
    • Attention Required Banner: Highlighted warning cards for unassigned Road Captain roles or unsigned club safety waivers.
    • Recent Club Activity Feed: Timestamped stream of member join requests, ride completions, and rank promotions.
  • Stitch Generation Prompt:

    "Design a Bootstrap 5.3 executive hub for motorcycle club officers. Dark tactical dashboard with gold and cyan accenting. Prominently display the club crest and chapter title at the top with a club switcher dropdown. Three large summary cards display: Pending Membership Applications (4 waiting), Upcoming Club Rides (2 this week), and Active Roster (38 members). Below is an attention-required alert banner for unsigned safety waivers and an activity feed showing member rank promotions and recent ride completions."

PAGE-WEB-10 to PAGE-WEB-15: Club Management Suite

  • Routes:
    • PAGE-WEB-10: GET /clubs/[clubId]/manage — Club Founder Overview Dashboard
    • PAGE-WEB-11: GET /clubs/[clubId]/manage/profile — Club Identity & Branding Editor
    • PAGE-WEB-12: GET /clubs/[clubId]/manage/applications — Member Applications & Onboarding
    • PAGE-WEB-13: GET /clubs/[clubId]/manage/ranks-roles — Hierarchy & Roles Builder
    • PAGE-WEB-14: GET /clubs/[clubId]/manage/rides — Club Rides Schedule & Attendance
    • PAGE-WEB-15: GET /clubs/[clubId]/manage/settings — Club Privacy & Governance Settings
  • Bootstrap 5.3 Grid Structure:
    • Shared Sidebar Layout (col-lg-3 sticky navigation sidebar with club masthead, col-lg-9 dynamic content panel).
  • Required UI Elements & Controls Across Suite:
    • Sticky Sidebar: Club crest, Club Name, Chapter, Vertical Nav Pills (Overview, Profile Branding, Applications [badge], Ranks & Roles, Club Rides, Governance Settings).
    • Profile Branding (WEB-11): Crest logo uploader, Cover banner image uploader, Club Name text input, Tagline input, Markdown Bio editor, Social links (Instagram, Discord, Website), Primary Riding Location input, Save Changes button.
    • Applications Queue (WEB-12): List of applicant cards showing applicant name, motorcycle model, riding experience, answers to custom club screening questions, one-click Accept Member (green) and Decline (red) buttons.
    • Ranks & Roles Builder (WEB-13): Visual hierarchy tree (President \rightarrow Vice President \rightarrow Road Captain \rightarrow Tail Gunner \rightarrow Full Member \rightarrow Prospect). Permission toggles for each rank: Schedule Official Rides, Broadcast Emergency Alerts, Approve Applications, Manage Treasury. Member assignment dropdown.
    • Club Rides (WEB-14): Monthly calendar view, ride staging checklist, assigned Road Captain and Sweeper badges, attendee sign-in log, GPX route attachment.
    • Governance Settings (WEB-15): Privacy toggle (Public Directory, Unlisted, Strictly Private), Invite Code generator with copy button, Membership Dues configuration, Transfer Ownership form, and Disband Club red danger zone card.
  • Stitch Generation Prompt:

    "Design a comprehensive Club Management Suite in Bootstrap 5.3 featuring a two-column layout. The left sidebar contains the club crest, chapter name, and vertical nav pills: Overview, Profile Branding, Applications (badge: 3), Ranks & Roles, Scheduled Rides, and Governance Settings. The main content panel shows the 'Ranks & Roles Builder': a structured hierarchy table with officer badges (President, Road Captain, Tail Gunner, Active Member), permission toggles, and member assignments. Use dark tactical slate (#0D131F) surfaces with cyan and purple status indicators."

PAGE-WEB-16: Support Desk & Customer Portal

  • Route: GET /support
  • Target Audience: Riders needing technical help, reporting bugs, or querying documentation.
  • Bootstrap 5.3 Grid Structure:
    • Search Header with prominent search input for knowledge base (col-lg-6 mx-auto py-5).
    • 3 Category Cards (row g-4 mb-5: Hardware & GPS Setup, Road Alerts & Waze, Account & Pro Billing).
    • Submit Support Ticket Form Card (col-lg-8 mx-auto).
  • Required UI Elements & Controls:
    • Knowledge Search Bar: Large input with search icon, live suggestion dropdown.
    • System Status Indicator: Pulsing green badge ("All MotorSignal Services Operational: Operations API, R2 Sync, Waze Alert Feeds").
    • 3 Quick Topic Cards:
      • Sensor Calibration & Mounting Orientation.
      • Waze Police Alerts & HERE Safety Cameras Setup.
      • Pro Subscription & Telemetry Cloud Sync.
    • Ticket Submission Form Card:
      • Reporter Name & Email (auto-filled if authenticated).
      • Category selector dropdown (Telemetry / GPS, Road Alerts, Billing, Bug Report, Feature Idea).
      • Severity radio pills (Low, Medium, High, Critical / App Crash).
      • Subject input and detailed markdown description textarea.
      • File upload drag-and-drop zone for logs or screenshots.
      • Submit Support Ticket button.
  • Stitch Generation Prompt:

    "Design a clean, reassuring customer support desk in Bootstrap 5.3 dark mode. Top section features a large centered search bar 'Search tutorials, GPS troubleshooting, and FAQs' above a green status badge 'All MotorSignal Systems Operational'. Three category cards provide instant links to Sensor Calibration, Road Alerts Guide, and Cloud Sync. Below is an elevated card for submitting a ticket with fields for Subject, Category, Severity (Low, Medium, Critical), and File Attachment drag-and-drop area."

PAGE-WEB-17 & PAGE-WEB-18: Legal, Compliance & Privacy

  • Routes: GET /privacy & GET /terms
  • Target Audience: General public, legal counsel, regulatory authorities.
  • Bootstrap 5.3 Grid Structure:
    • 2-Column Documentation Layout: Left sticky table of contents (col-lg-3), Right reading container (col-lg-9 formatted typography).
  • Required UI Elements & Controls:
    • Table of Contents: Sticky left list group with smooth-scrolling anchors to each document section.
    • Last Updated Badge: Pill showing document version and effective date.
    • Jurisdictional Compliance Callouts:
      • United States: Road alert legality and FCC conformity callout.
      • France: Compliance with "Zones de Danger" (suppressing fixed camera coordinates into safety zone corridors).
      • Germany & Switzerland: Automatic road alert deactivation notice per § 23 Abs. 1c StVO and Art. 57b SVG.
    • Telemetry Anonymization Card: Plain-language explanation of how 20 Hz IMU data is scrubbed of rider identity before aggregated research modeling.
    • Data Rights Request Form: Download My Data button and Request Full Account Deletion button.
  • Stitch Generation Prompt:

    "Create a polished, highly legible legal document page in Bootstrap 5.3. Dark slate background with high-contrast text. Left column features a sticky table of contents with smooth-scrolling links. Right column displays the Privacy Policy with highlighted callout banners (alerts) detailing 20 Hz Telemetry Anonymization, SQLite local storage encryption, and Cloudflare R2 privacy standards."

PAGE-WEB-19 to PAGE-WEB-22: Authentication & Onboarding

  • Routes:
    • PAGE-WEB-19: GET /login — Rider Sign-In
    • PAGE-WEB-20: GET /register — Rider Account Registration
    • PAGE-WEB-21: GET /forgot-password — Password Reset Request
    • PAGE-WEB-22: GET /verify-email — Email Verification Challenge
  • Bootstrap 5.3 Grid Structure:
    • Centered Auth Box (col-md-6 col-lg-5 col-xl-4 mx-auto my-5).
  • Required UI Elements & Controls Across Flow:
    • Brand Header: Glowing cyan MotorSignal logo, tagline.
    • Login (WEB-19): Email floating label input, Password floating input with eye icon toggle, Remember Me checkbox, Forgot Password? link, Sign In button, Google Sign-In button, Apple Sign-In button, Create Account link.
    • Register (WEB-20): Full Name, Email, Password with live strength meter, Motorcycle Make & Model selection dropdown, Riding Style radio pills, Terms acceptance checkbox, Create Rider Account button.
    • Forgot Password (WEB-21): Email input, Send Password Reset Link button, Back to Sign In button.
    • Verify Email (WEB-22): 6-box segmented numeric OTP input with auto-advance, Resend code countdown timer (Resend in 45s), Verify & Continue button.
  • Stitch Generation Prompt:

    "Design a sleek, modern Bootstrap 5.3 authentication screen for MotorSignal. Deep black canvas with a glowing cyan brand logo at the top. The card has a subtle glassmorphic border with floating form inputs for Email and Password, a 'Remember this device' toggle, and an electric cyan 'Sign In' button. Include a divider 'Or continue with' and full-width buttons for Google and Apple sign-in. Bottom links for 'Forgot password?' and 'Create an account'."

PAGE-WEB-23: Rider Cloud Portal (My Account & Rides)

  • Route: GET /account
  • Target Audience: Authenticated riders reviewing their synced cloud data and bike garage.
  • Bootstrap 5.3 Grid Structure:
    • Top Profile Masthead: Rider avatar, total lifetime miles, max recorded lean angle, member tier badge.
    • Tabbed Content: Synced Cloud Rides, Virtual Garage, Subscription & Billing, Privacy & Export.
    • Responsive Ride Cards list with map thumbnails and download buttons (GPX, CSV).
  • Required UI Elements & Controls:
    • Rider Masthead: Profile avatar with edit badge, Rider handle (@ApexHunter), Membership pill (PRO RIDER), lifetime stat counters (4,820 Total Miles, 52° Peak Lean, 14 Group Rides).
    • Tab 1: Cloud Rides: Search and date filter bar. Card list of rides showing interactive elevation/speed thumbnail, motorcycle badge, distance, duration, top speed, and Download GPX / Download CSV buttons.
    • Tab 2: Virtual Garage: Bike stable cards displaying motorcycle photo, odometer, active bike badge, and + Add Motorcycle modal button.
    • Tab 3: Subscription & Billing: Current plan card, renewal date, payment method card, Upgrade to Lifetime Founder button, Cancel Subscription button.
    • Tab 4: Security & Export: Change password form, 2-Factor Authentication toggle, Export All Telemetry (ZIP) button, Delete Account danger zone.
  • Stitch Generation Prompt:

    "Design a modern Bootstrap 5.3 Rider Cloud Portal. Dark cockpit theme. Top masthead displays the rider's helmet avatar, handle '@ApexHunter', Pro Rider badge, and quick stats: 4,820 Miles, 51-degree Max Lean, 14 Group Rides. Below is a tabbed panel: 'My Cloud Rides' shows cards of recorded rides with elevation and speed profiles, date, duration, and GPX download buttons; 'My Garage' displays bike cards with odometer and maintenance alerts; 'Subscription' shows active Pro plan with card details."

PAGE-WEB-24: Operations & Admin Console (8-Tab Command Suite)

  • Route: GET /admin
  • Target Audience: Internal staff, system operators, site reliability engineers.
  • Bootstrap 5.3 Grid Structure:
    • Full-width Operations Shell with persistent top bar (System status, active operators, server ping) and sticky left sidebar (8 tabs).
    • Main display container (col-lg-10 p-4).
  • Required UI Elements & Controls by Tab:
    • Top Navigation Bar: Host IP badge (89.31.239.10), Server Status (Production OK), Ping latency (18ms), Logged-in Operator handle, Sign Out button.
    • Sidebar: 8 Nav Pills with status indicator dots: Overview, Infrastructure, Users, Incidents, Audit Trail, Support, Website CMS, Ops Controls.
    • Tab 1: Overview:
      • Operations API Card: Healthy/Degraded badge, last successful upload timestamp, 24h upload error counter.
      • Operations Database Card: Connected badge, 18ms latency, Drift Schema 7 verified.
      • Operations Access Card: Healthy badge, permission enforcement verified, 24h auth failures.
      • Audit Logging Card: Write status, 24h failed writes count.
      • Security & Access Events Card: 1h/24h/7d filter pills, event table (Time, Event, IP, Outcome).
      • Active Incidents Card: Triage table (Case, Incident, Severity [Critical/High], Assigned Operator, Age).
      • Website Activity Card: Active riders counter, 24h sign-ins, new accounts.
    • Tab 2: Infrastructure:
      • Live Dials for CPU Utilization (14%), RAM (3.2 / 8 GB), Disk Space (42% used).
      • Systemd Service Status Table: motorsignal-website (active, running), motorsignal-api (active, running), caddy (active, running) with Restart action buttons.
      • Speedtest Module: Toggle between Client to MotorSignal Server and MotorSignal Server to External Upstream with real-time ping, download, and upload Mbps gauges.
      • Live Log Viewer: Collapsible black console box running live journalctl output with auto-scroll.
    • Tab 3: User Management: Search bar by email or user ID, role filter dropdown, user table (ID, Email, Registered Date, Status, Role, Pro Entitlement), action menu (Suspend Account, Grant Pro, Reset Password).
    • Tab 4: Incidents & Alerts: Incident triage queue, severity badges (Critical red, High amber), Assign to Me button, Incident detail modal with resolution notes and postmortem log.
    • Tab 5: Audit Trail: Searchable administrative actions log table, timestamp, operator email, action name, before/after JSON diff viewer.
    • Tab 6: Support Tickets: Inbound ticket queue, filter by status (Open, Pending, Resolved), ticket response composer with auto-filled staff email, close ticket button.
    • Tab 7: Website CMS: Document selector (Terms, Privacy, Features, Announcements), Markdown code editor, split live preview, Save Draft button, Publish Live button, Revision history rollback.
    • Tab 8: Ops Controls: Capability allowlist checkboxes, dry-run deployment simulator, maintenance mode toggle.
  • Stitch Generation Prompt:

    "Design an enterprise Operations Command Console in Bootstrap 5.3 dark mode (#070A0F) for MotorSignal staff. Left dark sidebar contains glowing status indicators and nav links for: Overview, Infrastructure, Users, Incidents (badge: 2), Audit Trail, Support, CMS, and Ops Controls. The Overview view displays high-density telemetry cards: 'Operations API' (Healthy, 0 backlog), 'Database' (18ms latency, Drift Schema 7), 'Security Events' (Access denials graph), and an 'Active Incidents' table with priority badges (Critical in red, High in amber). Top bar features live host metrics (CPU 14%, RAM 38%, 89.31.239.10) and user avatar."

PART II: MOBILE APP SCREENS (32 Screens)

SCREEN-MOB-01: Dashboard — Minimal Cockpit HUD

  • Screen ID / Route: DASH-01 (/ Minimal Mode)
  • Target Context: Track days, night rides, extreme sunlight glare where only critical speed and alerts matter.
  • Bootstrap Mobile Grid / Layout:
    • Full-height dark canvas (vh-100 bg-black text-center d-flex flex-column justify-content-between p-3).
  • Required UI Elements & Controls:
    • Top Status Bar: Cockpit layout selector button, GPS status pill (GPS 2D FIX), Ambient temperature (79° F), Standby indicator (● STANDBY).
    • Giant Digital Speed Readout: 96pt digital speed number (0), unit label (MPH or KM/H), monospace high-contrast styling.
    • Trip Distance & Time: Minimal trip odometer pill (0.00 MI) and elapsed session timer (00:00:00).
    • Primary Action Button: Large full-width Start Session pill button (btn btn-primary btn-lg py-3).
    • Bottom Navigation Bar: 6-icon touch dock: Dash (active), Map, Activity, Garage, Social, Settings.
  • Stitch Generation Prompt:

    "Design an ultra-clean, high-contrast mobile dashboard HUD in Bootstrap 5.3 mobile portrait mode (375x812). Pitch-black background (#000000). Center features an immense 96pt digital speedometer '0 MPH' in crisp white monospace font with subtle cyan glow. Top status row displays minimal pill indicators: 'GPS 2D FIX', '79 F', and a green 'STANDBY' dot. Bottom row has trip odometer '0.00 MI' and a prominent dark blue 'Start Session' action button."

SCREEN-MOB-02: Dashboard — Sport Cockpit HUD

  • Screen ID / Route: DASH-02 (/ Sport Mode)
  • Target Context: Canyon carving, twisties, track sessions where lean angle and lateral G-forces are paramount.
  • Bootstrap Mobile Grid / Layout:
    • Multi-gauge grid (container-fluid px-2 py-3).
  • Required UI Elements & Controls:
    • Top Bar: Cockpit layout switcher icon, audio mode toggle (Tactical Tone vs Voice), GPS fix badge (GPS 2D FIX), Ambient temp, Recording state pill.
    • Speedometer: Central large speed counter (0 MPH).
    • G-Force Radar Friction Circle (Left Gauge): Concentric circles representing 0.5G and 1.0G limits, live moving blue G-force dot, Acceleration and Braking G readouts below.
    • Motorcycle Lean Angle Gauge (Right Gauge): Animated motorcycle silhouette banking dynamically, numerical degrees readout (3° RIGHT), peak memory markers (MAX L 0°, MAX R 0°).
    • Trip Statistics Card: 3 columns: Trip (0.00 MI), Top Speed (0 MPH), Avg Speed (0.0 MPH).
    • Start Session Action Button: Large rounded button (▶ Start Session).
    • Performance Launch Shortcut Card: Lightning bolt icon, title (PERFORMANCE LAUNCH), subtitle (0–60 MPH • 0–100 MPH), READY > status badge.
    • Persistent Bottom Navigation Bar: Dash, Map, Activity, Garage, Social, Settings.
  • Stitch Generation Prompt:

    "Design an aggressive, sporty motorcycle cockpit screen in Bootstrap 5.3 mobile layout. Deep black canvas with glowing electric cyan accents. Top displays speed '0 MPH'. Center section features two round telemetry gauges side-by-side: on the left, a G-Force radar friction circle with a glowing blue dot at center; on the right, an animated motorcycle icon banked at 3 degrees right with '3 DEG RIGHT' in blue and peak memory markers 'MAX L 0 / MAX R 0'. Below is a trip stats card, followed by a dark card with a lightning bolt icon: 'PERFORMANCE LAUNCH (0-60 MPH / 0-100 MPH) READY'. Bottom features a massive rounded 'Start Session' button and 6-icon bottom nav bar (Dash, Map, Activity, Garage, Social, Settings)."

SCREEN-MOB-03: Dashboard — Touring Cockpit HUD

  • Screen ID / Route: DASH-03 (/ Touring Mode)
  • Target Context: Long-distance highway tours, cross-country ADV rallies.
  • Bootstrap Mobile Grid / Layout:
    • High-density information cluster (container-fluid p-3).
  • Required UI Elements & Controls:
    • Top Cluster: Digital Speed (68 MPH), Digital Compass heading (NW 315°), Current Altitude (3,420 FT).
    • Road Alert Ticker Strip: Live alert banner ("Waze: Police trap reported 2.4 mi ahead on US-101").
    • Touring Cards Grid (4 Tiles):
      • Trip A Odometer: Distance and duration.
      • Fuel / Range Estimator: Estimated miles remaining.
      • Sunset & ETA: Time to next waypoint and sunset countdown.
      • Weather Tile: Current precipitation chance and wind speed.
    • Start Session / Recording Controller.
  • Stitch Generation Prompt:

    "Design a touring-focused motorcycle dashboard screen in Bootstrap 5.3 mobile view. Dark background with organized navigation tiles. Top shows speed '68 MPH' alongside a digital compass heading 'NW 315' and elevation '3,420 FT'. Below is a horizontal strip showing the nearest Waze police alert 'Police reported 2.4 mi ahead on US-101'. Bottom section contains large odometer cards: 'Trip A: 142.6 MI', 'Fuel Range: 84 MI', 'Ride Time: 2h 15m', and an emergency weather alert pill."

SCREEN-MOB-04: Active Ride Recording HUD

  • Screen ID / Route: DASH-04 (State: Recording)
  • Target Context: Rider is actively moving; screen requires locked layout, anti-glare, and clear recording indicator.
  • Bootstrap Mobile Grid / Layout:
    • Pulsing red/green recording badge (badge bg-danger-subtle text-danger border border-danger).
  • Required UI Elements & Controls:
    • Live Recording Header: Pulsing red dot with text (REC 20Hz - 01:24:18).
    • Real-Time Speed & Lean: Large speed readout updating smoothly, dynamic lean angle indicator.
    • Kickstand Safety Warning Indicator: Flashes yellow if kickstand sensor triggers while moving.
    • Slide-to-Stop Controller: Horizontal slide gesture track preventing accidental pocket taps to end ride.
    • Quick Hazard Drop Button: Glove-friendly button to mark a road hazard or police trap for the pack.
  • Stitch Generation Prompt:

    "Design an active recording state motorcycle HUD screen in Bootstrap 5.3 mobile view. A prominent pulsing red pill at top says 'REC 20Hz - 00:42:15'. Speed displays '74 MPH'. The lean angle gauge shows dynamic bank angle '38 DEG LEFT' with yellow peak indicators. Lateral G-meter shows 0.85G. At the bottom, a slide-to-stop control prevents accidental pocket touches, along with a secondary 'Mark Waypoint / Hazard' glove-friendly button."

SCREEN-MOB-05 & SCREEN-MOB-06: Tactical Map & Layer Switcher

  • Screen ID / Route: MAP-01 (/map) & MAP-02 (Layer Drawer)
  • Target Context: Offline GPS navigation, trail riding, satellite terrain inspection.
  • Bootstrap Mobile Grid / Layout:
    • Full-screen interactive dark map canvas with floating control overlays.
  • Required UI Elements & Controls:
    • Top Floating Search Card: Address autocomplete input, destination search, recent places chips.
    • Right Vertical HUD Controls:
      • Compass Orient button (Toggle between North-up and Heading-up).
      • Map Layers button (opens Layer Drawer).
      • Re-Center on Rider GPS location button.
      • Zoom In (+) and Zoom Out (-) buttons.
    • Bottom Layer Switcher Drawer (MAP-02):
      • Tactical Vector: High-contrast dark vector map with highlighted twisty routes.
      • Satellite 4K: Esri World Imagery high-resolution raster tiles.
      • Elevation 3D: OpenTopoMap contour lines and mountain shading.
      • Toggles for Police Traps Overlay, Group Ride Pack Blips, and Offline Cached Only.
  • Stitch Generation Prompt:

    "Design a tactical motorcycle GPS map screen in Bootstrap 5.3 mobile portrait. The screen is filled with a high-contrast dark vector map with highlighted twisty mountain roads in cyan. Floating top search card allows destination entry. Floating right vertical pill dock has glowing icon buttons for Compass Orient, Re-center Rider, and Map Layers. An open bottom sheet drawer reveals 3 selectable map styles with thumbnail previews: 'Tactical Dark' (selected with cyan border), 'Satellite 4K', and '3D Topo Elevation'."

SCREEN-MOB-07: Road Alert & Police Radar Overlay

  • Screen ID / Route: ALERT-01 (/map or Dashboard Alert State)
  • Target Context: Approaching mobile police speed trap, hidden camera, or hazard.
  • Bootstrap Mobile Grid / Layout:
    • High-urgency alert banner pinned below top bar (card border-danger bg-danger-subtle text-white p-3).
  • Required UI Elements & Controls:
    • Urgent Alert Banner: High-contrast red/amber card pinned across top third of screen.
    • Alert Icon: Flashing police badge icon (or camera icon).
    • Alert Description: Subtype-aware message ("Hidden police speed trap reported on 2nd Ave").
    • Distance Countdown Meter: Real-time distance update ("350 meters ahead").
    • Reliability & Thumbs Up Counter: e.g. 14 Confirmations (Waze).
    • Glove-Friendly Actions: Large Mute Audio Tone button and Dismiss Alert button.
  • Stitch Generation Prompt:

    "Design an urgent road alert overlay on a motorcycle dashboard in Bootstrap 5.3 mobile view. Across the top third is an intense, high-visibility dark red banner with a flashing red police badge icon. Bold text reads: 'POLICE TRAP AHEAD - 350 METERS' with subtext 'Hidden radar reported on Skyline Blvd (18 confirmations)'. A large right-aligned button allows 1-tap glove dismissal 'Mute Tone'. The rest of the dashboard dims slightly to highlight the warning."

SCREEN-MOB-08 & SCREEN-MOB-09: Performance Launch Mode & Run Analysis

  • Screen ID / Route: PERF-01 (/launch) & PERF-02 (/launch/history)
  • Target Context: Closed-course 0-60 MPH, 0-100 MPH, and 1/4 mile acceleration timing.
  • Bootstrap Mobile Grid / Layout:
    • Draggy-style staging interface.
  • Required UI Elements & Controls:
    • Pre-Launch Staging Indicators:
      • GPS Accuracy Pill: Must be < \pm 2.0 ft (GPS FIX: ±1.2 FT OK).
      • Slope Validation Pill: Must be within legal \pm 1.0\% grade (SLOPE: -0.3% VALID).
      • Staging Status: STOPPED - ACCELERATE TO TRIGGER LAUNCH.
    • Split Timing Tiles:
      • 0–60 MPH: Current run time, personal record badge.
      • 0–100 MPH: Current run time.
      • 1/4 Mile: Elapsed time and trap speed (e.g. 10.84s @ 132 MPH).
      • 60–130 MPH: Rolling acceleration timer.
    • Run Telemetry Analysis (PERF-02):
      • High-density chart showing Speed vs Time curve.
      • Secondary overlay showing Longitudinal Acceleration G-Force trace.
      • Density Altitude (DA) readout based on barometric pressure and temperature.
  • Stitch Generation Prompt:

    "Design a Draggy-style performance launch mode screen in Bootstrap 5.3 mobile portrait. Pitch dark background. Top pill indicates 'GPS FIX: +/- 1.4 FT | SLOPE: -0.2% VALID'. Center features a large green glowing status 'READY TO LAUNCH - ACCELERATE TO TRIGGER'. Below are 3 high-contrast timing tiles: '0-60 MPH: 3.28s' with a gold trophy icon, '0-100 MPH: 7.41s', and '1/4 MILE: 10.92s @ 131 MPH'. A toggle button switches to the telemetry graph showing acceleration G-force curve."

SCREEN-MOB-10 & SCREEN-MOB-11: Activity History & Personal Records

  • Screen ID / Route: ACT-01 (/activity?tab=rides) & ACT-02 (/activity?tab=records)
  • Target Context: Reviewing past motorcycle rides and personal best records.
  • Bootstrap Mobile Grid / Layout:
    • Top Segmented Pill Selector (nav nav-pills nav-fill bg-dark p-1 rounded-pill mb-3: 'Rides' vs 'Records').
  • Required UI Elements & Controls:
    • Segmented Tab Switcher: Rides (48) vs Personal Records.
    • Rides Feed (ACT-01):
      • Ride card with dark route thumbnail image.
      • Title ("Saturday Morning Canyon Carve"), Date, and Start Time.
      • Motorcycle used badge ("Yamaha MT-09").
      • Key metrics chips: Distance (84.2 MI), Duration (1h 42m), Max Lean (49°), Top Speed (88 MPH).
      • Cloud Sync Badge (Green checkmark = Synced to R2/Firestore; Blue clock = Queued in local outbox).
    • Personal Records View (ACT-02):
      • Trophy cards for: Best 0-60 MPH, Maximum Left Lean (54^\circ), Maximum Right Lean (53^\circ), Highest Elevation Peak, Longest Single Ride Distance.
  • Stitch Generation Prompt:

    "Design an activity history screen in Bootstrap 5.3 mobile view. Top has a rounded pill tab switcher with 'Rides (48)' and 'Records (Trophies)'. The active 'Rides' view lists cards: each card has a dark route preview thumbnail on the left, date 'Saturday Morning Blast', motorcycle badge 'Yamaha MT-09', and stats pills: '84.2 MI', '1h 42m', 'Max Lean: 49 deg', and a green cloud sync checkmark. Tapping switches to the Records view with gold and bronze trophy cards for All-Time Top Speed and Maximum Lean Angle."

SCREEN-MOB-12 & SCREEN-MOB-13: Forensic Ride Detail & Interactive Replay

  • Screen ID / Route: HIST-01 (/history/:id) & REPLAY-01 (/replay/:id)
  • Target Context: Deep post-ride cornering analysis, telemetry playback, forensic export.
  • Bootstrap Mobile Grid / Layout:
    • Split view: Map on top half (h-50), Telemetry playback controls on bottom half (h-50).
  • Required UI Elements & Controls:
    • Interactive Route Heatmap: Route line color-coded by lean angle or speed (Cyan = upright, Yellow = moderate lean, Red = severe apex > 45^\circ).
    • Interactive Telemetry Scrubber Bar: Draggable playback slider moving synchronized dot along the map route.
    • Synchronous Telemetry Readout: Displays exact speed, lean angle, G-force, and elevation at the scrubber point.
    • Corner-by-Corner Breakdown Table: Lists each numbered corner with entry speed, apex lean angle, and exit speed.
    • Export Action Buttons: Export GPX, Export CSV (20 Hz), Export Forensic JSON.
  • Stitch Generation Prompt:

    "Design a post-ride forensic telemetry analysis screen in Bootstrap 5.3 mobile view. Top half displays an interactive map of the completed mountain pass with the route color-coded by lean angle (yellow for straight, cyan for 30 deg, red for 50 deg apex). Bottom half features a scrubbing playhead with Play/Pause buttons and live telemetry readout at that exact scrub point: '48 MPH | 46 DEG RIGHT LEAN | 0.82 LATERAL G'. Action bar at bottom has buttons: 'Export GPX' and 'Share to Social'."

SCREEN-MOB-14 to SCREEN-MOB-16: Virtual Garage & Maintenance

  • Screen ID / Route: GAR-01 (/garage), GAR-02 (/garage/add), GAR-03 (/garage/:id)
  • Target Context: Tracking motorcycle stable, tire wear, oil changes, chain service.
  • Bootstrap Mobile Grid / Layout:
    • Motorcycle card stack with maintenance alert badges.
  • Required UI Elements & Controls:
    • Garage Hub (GAR-01): Motorcycle cards showing bike photo, Make/Model, current odometer, active bike toggle badge, + Add Bike button.
    • Add Motorcycle (GAR-02): Year, Make, Model text inputs, VIN scanner button, Tire size selector, Initial odometer, Photo upload button, Save Motorcycle button.
    • Bike Detail & Service (GAR-03):
      • Full bike specs card.
      • Maintenance alert pills: Engine Oil (Due in 380 mi), Chain Service (OK), Brake Fluid (Good).
      • Service log history with + Log New Service button.
  • Stitch Generation Prompt:

    "Design a virtual garage screen in Bootstrap 5.3 mobile portrait. Top displays a photo card of a 2024 BMW S1000RR with a green 'ACTIVE BIKE' badge and odometer '6,420 MI'. Below are health monitor cards: 'Chain Maintenance: OK', 'Engine Oil: Due in 380 MI' (amber alert), and 'Tires: Pirelli Diablo Supercorsa (Front 2.3 bar, Rear 2.5 bar)'. Floating action button at bottom right allows 'Add New Motorcycle' or 'Log Service'."

SCREEN-MOB-17 & SCREEN-MOB-18: Route Planner & Curvy Road Generator

  • Screen ID / Route: ROUT-01 (/routes/planner) & ROUT-02 (/routes/:id)
  • Target Context: Planning scenic twisty routes avoiding highways.
  • Bootstrap Mobile Grid / Layout:
    • Interactive map with bottom route configuration drawer.
  • Required UI Elements & Controls:
    • Waypoint Inputs: Start location, Waypoints (+ button), Destination address.
    • Curviness / Twistiness Slider: 3 settings (Standard, Scenic Curvy, Extreme Mountain Passes).
    • Elevation Gain Profile: Line chart showing climbs and descents.
    • Route Summary Card: Total distance (mi), estimated duration, curve count (e.g. 142 Corners).
    • Action Buttons: Save Route, Export to Pack Ride, Start Turn-by-Turn Navigation.
  • Stitch Generation Prompt:

    "Design a motorcycle route planner in Bootstrap 5.3 mobile view. Map background with waypoint pins (A, B, C). Bottom overlay card features start and destination inputs, a 'Curviness Priority' slider set to 'Maximum Twisties', and an elevation cross-section graph showing mountain climbs. A bright cyan button says 'Calculate Curvy Route (64 Mi, 142 Curves)'."

SCREEN-MOB-19 to SCREEN-MOB-21: Social Feed, Profile & Friends

  • Screen ID / Route: SOC-01 (/social), SOC-02 (/social/profile), SOC-03 (/social/friends)
  • Target Context: Sharing rides, viewing community feed, tracking friends on rides.
  • Bootstrap Mobile Grid / Layout:
    • Card feed layout with social interaction buttons.
  • Required UI Elements & Controls:
    • Social Feed (SOC-01): Feed cards displaying friend's ride title, route map snapshot, scenic photo, stats strip (Distance, Duration, Max Lean), Fist Bump (Like) counter button, Comment button.
    • Rider Profile (SOC-02): Rider avatar, handle, bio, trophy case (Badges earned), motorcycle stable showcase, follower/following counts, Follow / Message button.
    • Friends List (SOC-03): Search riders input, pending friend requests list, active friends list with mutual ride count and Invite to Pack Ride action.
  • Stitch Generation Prompt:

    "Design a community social feed screen in Bootstrap 5.3 mobile view for motorcycle enthusiasts. Feed consists of dark cards showing friends' ride summaries: card header has rider avatar and handle 'Marcus @DucatiApex', route title 'Sunday Mulholland Run', an embedded dark map preview showing the route, stats strip (54 mi, 1h 12m, 52 deg max lean), a photo of the bike at the lookout, and interaction buttons for 'Give Fist Bump (34)' and 'Download GPX'."

SCREEN-MOB-22 to SCREEN-MOB-24: Motorcycle Clubs Suite

  • Screen ID / Route: CLUB-01 (/social/clubs), CLUB-02 (/social/clubs/create), CLUB-03 (/social/clubs/:id)
  • Target Context: Club memberships, official club wall, member ranks.
  • Bootstrap Mobile Grid / Layout:
    • Club discovery feed and club home screen.
  • Required UI Elements & Controls:
    • Clubs Hub (CLUB-01): Search bar, riding discipline pills, club cards with crest and member counts, + Create Club button.
    • Create Club (CLUB-02): Club Name input, Patch/Crest logo upload, Chapter location, Privacy rules (Public / Application Only), Membership questions, Submit button.
    • Club Detail (CLUB-03):
      • Club crest header, member count, privacy badge.
      • Tab 1: Club Wall (pinned ride announcements, discussions).
      • Tab 2: Roster (member list with rank badges: President, Road Captain, Tail Gunner, Member).
      • Tab 3: Official Club Rides.
  • Stitch Generation Prompt:

    "Design a motorcycle club home screen in Bootstrap 5.3 mobile view. Top header features a bold club emblem 'Pacific Coast Riders MC' over a carbon fiber background. Horizontal pills show Member Count (42), Chapter (Bay Area), and Privacy (Application Only). Below are two tabs: 'Club Wall' with pinned announcements for the Saturday morning ride, and 'Roster' displaying members with rank badges (Road Captain, Tail Gunner, Veteran)."

SCREEN-MOB-25 to SCREEN-MOB-28: Group Rides & Live Pack Radar

  • Screen ID / Route: GRP-01 (/group-rides), GRP-02 (/group-rides/create), GRP-03 (/group-rides/:id), GRP-04 (/group-rides/:id/live)
  • Target Context: Staging, joining, and riding inside an active motorcycle pack with live mesh radar.
  • Bootstrap Mobile Grid / Layout:
    • Full-screen tactical radar mode.
  • Required UI Elements & Controls:
    • Group Rides Hub (GRP-01): Active pack rides list, Enter Join Code box, Host Pack Ride button.
    • Create Group Ride (GRP-02): Title, Staging point, Departure time, Route selector, Pace rules, Maximum rider limit.
    • Ride Briefing (GRP-03): Staging checklist, attendee roster, weather forecast, route overview map, Check In button.
    • Live Pack Radar (GRP-04):
      • Concentric proximity radar circles (100 ft, 500 ft, 0.5 mi).
      • Moving rider dots with custom role markers (Star = Road Captain Lead, Shield = Tail Gunner Sweep, Circle = Pack member).
      • Pack Health Banner (PACK: 6 RIDERS CONNECTED | FORMATION STABLE).
      • Large glove-friendly EMERGENCY HAZARD PING broadcast button.
  • Stitch Generation Prompt:

    "Design an intense, tactical Live Pack Radar screen in Bootstrap 5.3 mobile view for motorcycle group rides. The screen is a dark radar grid with concentric distance circles (100m, 500m, 1km). Moving rider blips represent the pack: the lead bike has a cyan star 'Lead - Dave', the sweep bike has an amber shield 'Sweep - Sarah', and 4 rider blips form a staggered formation. Top displays 'PACK STATUS: 6 RIDERS CONNECTED | FORMATION STABLE'. Bottom has a red 'EMERGENCY HAZARD PING' glove-friendly button."

SCREEN-MOB-29: MotorSignal Pro Paywall & Entitlements

  • Screen ID / Route: PRO-01 (/pro or Settings Pro Card)
  • Target Context: Upgrading from Free to Pro membership.
  • Bootstrap Mobile Grid / Layout:
    • Full-screen upgrade modal with glowing neon purple/cyan styling.
  • Required UI Elements & Controls:
    • Hero Value Header: Glowing purple crest, headline ("Unlock Full Forensic Telemetry").
    • Feature Checklist: 5 value bullet points with glowing cyan checkmarks (20 Hz Forensic Logging, Waze Police & Radar Traps, 3D Lean Angle Replay, Live Pack Mesh Radar, Draggy Launch Mode).
    • Plan Selection Cards:
      • Annual Plan: $79.99 / year with Save 33% - Best Value badge.
      • Monthly Plan: $9.99 / month.
    • Primary Action Button: Large glowing Start 14-Day Free Trial button.
    • Footer Actions: Restore Purchase link, Terms of Service, Privacy links.
  • Stitch Generation Prompt:

    "Design a high-conversion mobile paywall screen for MotorSignal Pro in Bootstrap 5.3 mobile view. Dark background with glowing purple and cyan energy accents. Header reads 'Unlock Full Forensic Telemetry'. Bulleted benefits list includes: 20 Hz Sub-Second Logging, Live Waze Police Traps, 3D Lean Angle Replay, Unlimited Group Ride Mesh, and Draggy Launch Mode. Two selectable subscription cards: 'Annual - $79.99/yr ($6.67/mo - Best Value)' and 'Monthly - $9.99/mo'. Prominent glowing 'Unlock MotorSignal Pro' button at bottom."

SCREEN-MOB-30 to SCREEN-MOB-32: Settings, Diagnostics & Sensor Streams

  • Screen ID / Route:
    • SET-01: SETTINGS (/settings)
    • SET-02: ACCOUNT (/settings/account)
    • DIAG-01: DIAGNOSTICS (/settings/diagnostics)
  • Target Context: System configuration, Waze API key setup, raw IMU sensor stream diagnostics.
  • Bootstrap Mobile Grid / Layout:
    • Grouped settings list (list-group list-group-flush bg-transparent).
  • Required UI Elements & Controls:
    • Settings (SET-01):
      • Units toggle (MPH / Feet vs KM/H / Meters).
      • Audio Mode selector (Voice Alerts vs Tactical Tones).
      • Waze Police Alerts Card: Toggle switch, OpenWebNinja API key text input, Test Connection button, live status badge (Connected in green).
      • Lean Angle Audio Interlock Toggle: Mute Audio when cornering > 15° switch.
    • Account (SET-02): Email, Password update, Cloud backup sync toggle, Sign Out button.
    • Hardware Diagnostics (DIAG-01):
      • Real-time 20 Hz Accelerometer stream box (X, Y, Z in m/s²).
      • Real-time 20 Hz Gyroscope stream box (Roll, Pitch, Yaw in rad/s).
      • GPS Status: Latitude, Longitude, Altitude, Horizontal Accuracy (meters), Constellation Satellites in view (e.g. 16 Sats).
      • Local Drift Database: Row counts for Telemetry, Rides, and Outbox Queue.
  • Stitch Generation Prompt:

    "Design a technical settings and diagnostics screen in Bootstrap 5.3 mobile view. Section 1 is 'Road Alerts & Providers' featuring a Waze Police Alerts card with an active toggle switch, OpenWebNinja API key input field, and a 'Test Connection' button showing a green 'Connected' badge. Below is a toggle for 'Lean Angle Audio Mute (Mutes alerts when cornering > 15 deg)'. Section 2 is 'Hardware Diagnostics' showing a live sensor stream box with fast-updating numbers for 20 Hz Accelerometer, Gyroscope Roll Rate, and GPS Satellite Count (14 Sats, Fix 3D)."

Master Screen Index & Stitch Cross-Reference

Code Platform Route / Identifier Screen Title Primary Stitch Component Pattern
WEB-01 Web GET / Public Homepage & Hero Full-width Hero, 3D Device Mockup, Telemetry Strip
WEB-02 Web GET /features Features & Technical Specs Telemetry Trace Charts, Kalman Filter Diagram
WEB-03 Web GET /pricing Membership & Plans 3-Tier Pricing Cards, Comparison Matrix Table
WEB-04 Web GET /download App Download Hub Direct APK Card, QR Code Generator, Play Badges
WEB-05 Web GET /group-rides Group Rides Discovery Split-screen Interactive Map & Ride Card Feed
WEB-06 Web GET /group-rides/showcase Telemetry Showcase Full-viewport HUD Canvas, Simulation Scrubber
WEB-07 Web GET /group-rides/manage Ride Organizer Hub Responsive Management Table, Attendee Modal
WEB-08 Web GET /clubs Motorcycle Clubs Directory Club Cards Grid, Riding Discipline Tag Filters
WEB-09 Web GET /clubs/manage Club Founder Hub Officer Command Cards, Attention Alert Banners
WEB-10 Web GET /clubs/[id]/manage Club Founder Overview Member Growth Charts, Staged Rides Roster
WEB-11 Web GET /clubs/[id]/manage/profile Club Branding Editor Crest/Cover Upload, Social Links, Club Bio
WEB-12 Web GET /clubs/[id]/manage/applications Applications Queue Applicant Questionnaires, One-click Accept/Deny
WEB-13 Web GET /clubs/[id]/manage/ranks-roles Hierarchy Builder Hierarchy Tree, Permission Toggle Switches
WEB-14 Web GET /clubs/[id]/manage/rides Scheduled Rides Calendar Club Ride Attendance Logs, Lead Assignments
WEB-15 Web GET /clubs/[id]/manage/settings Club Governance Settings Privacy Toggles, Join Codes, Disband Action
WEB-16 Web GET /support Help Desk & Support Knowledge Base Search, Ticket Submission Form
WEB-17 Web GET /privacy Privacy & Anonymization Sticky Table of Contents, Telemetry Callouts
WEB-18 Web GET /terms Terms of Service Legal Indemnity, Safety Disclaimer Layout
WEB-19 Web GET /login Rider Sign-In Centered Glassmorphism Auth Card, Social Sign-In
WEB-20 Web GET /register Rider Registration Multi-step Onboarding Form, Bike Model Input
WEB-21 Web GET /forgot-password Password Recovery Minimal Reset Card, Back to Sign-In Link
WEB-22 Web GET /verify-email Email Verification 6-Digit Code Input Challenge, Resend Timer
WEB-23 Web GET /account Rider Cloud Portal Synced Rides Grid, Virtual Garage, GDPR Export
WEB-24 Web GET /admin Operations Console (8 Tabs) Enterprise Top/Sidebar Shell, Dials, Incidents
MOB-01 Mobile DASH-01 (/ Minimal) Minimal Cockpit HUD Pitch-black, Giant Monospace Speed, Top Pills
MOB-02 Mobile DASH-02 (/ Sport) Sport Cockpit HUD G-Force Circle, Lean Angle Arc, 0-60 Shortcut
MOB-03 Mobile DASH-03 (/ Touring) Touring Cockpit HUD Compass, Elevation, Trip Odometer, Weather Tile
MOB-04 Mobile DASH-04 (Recording) Active Recording HUD 20 Hz Pulsing REC Pill, Slide-to-Stop Slider
MOB-05 Mobile MAP-01 (/map) Tactical Map Screen Dark Vector Map, Autocomplete, Floating Pills
MOB-06 Mobile MAP-02 (Drawer) Tactical Layer Overrides Offcanvas Bottom Sheet with Satellite/3D Topo
MOB-07 Mobile ALERT-01 (Alert) Road Alert / Police Trap Flashing Red Alert Card, Mute Tone Button
MOB-08 Mobile PERF-01 (/launch) Draggy Launch Timer Christmas Tree Staging, Slope Valid Pill, Tiles
MOB-09 Mobile PERF-02 (Analysis) Launch Curve Analysis Acceleration vs Time Curve, Longitudinal G Trace
MOB-10 Mobile ACT-01 (/activity?rides) Rides History List Route Map Thumbnails, Lean/Speed Stats, Sync Icon
MOB-11 Mobile ACT-02 (/activity?records) Personal Records Trophy Best 0-60, Max Lean Left/Right, Peak Altitude
MOB-12 Mobile HIST-01 (/history/:id) Forensic Ride Inspection Route Map Heatmap, Telemetry Strip, GPX Export
MOB-13 Mobile REPLAY-01 (/replay/:id) Interactive Ride Replay Scrubbing Timeline, Synchronous HUD Gauges
MOB-14 Mobile GAR-01 (/garage) Virtual Garage Hub Motorcycle Cards Carousel, Service Status Alert
MOB-15 Mobile GAR-02 (/garage/add) Add Motorcycle Screen Form Inputs, VIN Scanner, Tire Specifications
MOB-16 Mobile GAR-03 (/garage/:id) Bike Profile & Service Odometer, Oil/Chain Due Cards, Connected Sensors
MOB-17 Mobile ROUT-01 (/routes/planner) Curvy Route Generator Waypoints, Curviness Slider, Elevation Profile
MOB-18 Mobile ROUT-02 (/routes/:id) Route Detail & Navigation Route Statistics, Cue Sheet, Turn-by-Turn Launch
MOB-19 Mobile SOC-01 (/social) Social Feed & Kudos Friend Ride Cards, Map Previews, Fist Bumps
MOB-20 Mobile SOC-02 (/social/profile) Rider Public Profile Avatar, Trophy Cabinet, Stable of Bikes, Stats
MOB-21 Mobile SOC-03 (/social/friends) Friends & Pack Network Friend Search, Mutual Ride Stats, Invite Links
MOB-22 Mobile CLUB-01 (/social/clubs) Clubs Discovery Hub Club Cards, Riding Style Filters, Regional Pins
MOB-23 Mobile CLUB-02 (/clubs/create) Create Club Wizard Patch Upload, Mission Statement, Privacy Toggles
MOB-24 Mobile CLUB-03 (/clubs/:id) Club Detail & Roster Club Wall, Announcements, Officer Badges
MOB-25 Mobile GRP-01 (/group-rides) Group Rides Hub Join via Code, Upcoming Pack Rides Filter
MOB-26 Mobile GRP-02 (/group-rides/new) Create Group Ride Staging Location, Route Attachment, Pace Rule
MOB-27 Mobile GRP-03 (/group-rides/:id) Ride Briefing & Staging Attendee List, Weather Forecast, Safety Rules
MOB-28 Mobile GRP-04 (Live Radar) Live Pack Mesh Radar Concentric Radar Rings, Lead/Sweep Blips, Ping
MOB-29 Mobile PRO-01 (/pro) MotorSignal Pro Paywall Comparison Matrix, Monthly/Annual Cards, Restore
MOB-30 Mobile SET-01 (/settings) Settings & Road Alerts Waze Provider Card, API Key Input, Test Button
MOB-31 Mobile SET-02 (/settings/account) Account & Security Profile Credentials, Cloud Sync, GDPR Delete
MOB-32 Mobile DIAG-01 (/diagnostics) Sensor Stream Diagnostics 20 Hz IMU Stream, GPS Accuracy, Drift DB Dump

Instructions for Stitch Implementation

When generating screens in Stitch:

  1. Initialize Project / Design System:
    • Run create_design_system_from_design_md using the tokens defined in the Core Design Tokens section above.
    • Set device type to DESKTOP for WEB-01 through WEB-24 and MOBILE for MOB-01 through MOB-32.
  2. Batch Screen Generation:
    • Pass the exact prompt under each screen entry into Stitch's generate_screen_from_text.
    • Ensure all responsive breakpoints adhere to standard Bootstrap 5.3 (col-12 col-md-6 col-lg-4 conventions).
  3. Consistency Verification:
    • Verify all telemetry gauges utilize monospace numbers (font-monospace or font-telemetry).
    • Verify all touch targets for mobile screens (MOB-01 through MOB-32) maintain at least 48px height and width for motorcycle glove usability.