UI-SPEC — Bike-Tinder

Fidelity goal (Glenn's words): "as close to Tinder as possible." Photo-first, dark, big gestures. Everything below is the v1 spec; 2–3 visual mock variants get built at Phase 2 start and Glenn picks one before wiring proceeds.

Screens

1. Deck (default)

Full-height card stack: the top card is draggable; the next card peeks, scaled (~95%) behind it.
Scope (decided 2026-11-10): every active bike appears in the deck eventually — ranking reorders, never hides.
Card anatomy: photo fills the card; bottom gradient overlay carries: year + make + model (title), price (large), sub-line: km · place · first seen. Small chips row when signals exist (e.g. "MVI", "whitewalls", "bags") — only derived from real listing data, never invented.
Stamps: during drag, "LIKE" (green) / "NOPE" (red) / "MAYBE" (amber) stamps fade in over the card proportional to horizontal drag; rotation up to ±12° follows the finger.
Commit: release past ~35% width (or a flick with velocity) → the card flies off; otherwise it springs back.
Buttons (bottom, thumb zone): ↺ undo · ✕ nope · ★ maybe · ♥ like — 56px circles; the like button carries the accent gradient.
Match moment: committing a Like plays a brief "It's a match!" overlay (bike thumbnail + flame accent, ~1.2s), then advances. No sound in v1 (a muteable chime could come later).
Tap (not drag) on the card = detail sheet: full photo, all fields, description snippet (if crawled), "Open listing" link (source URL), and the three action buttons.
Empty state: "You're all caught up — new bikes arrive nightly" (with the next import time). A fallback image is shown for listings without a photo — no card is ever blank.

2. List (all bikes)

The full catalog. Each row: thumbnail, title, price, km, place, and a 4-state control: ♥ / ★ / ✕ / — (no call yet). Tapping sets or edits the call — edits are first-class (Glenn asked for exactly this).
Filters (persisted): price min/max, km max, year min, text search; clear-all chip. Sort: score | price ↑↓ | newest | km.
Context line: "n new since your last visit".

3. Matches (liked)

Two segments: Liked ("matches") and Maybe. Same row style as List; opens the detail sheet. This is the actual shortlist for buying.

4. Trends (Phase 3)

Swipe stats (counts, like rate), learned lean summary ("you lean: V-twins · <$6k · low-km · NS"), retrain status, and the current top model weights rendered as plain language.

Visual language

Dark theme, near-black background, one accent gradient (flame → red/pink), white primary text, ~60% secondary.
Cards: ~16px radius, full-bleed photo, subtle shadow; stamps are 3px outline uppercase, rotated ∓12°.
Type: system stack (SF on iPhone); title 22–24px bold; price 20px semibold.
Bottom tab bar: Deck · List · Matches · Trends (icons + labels), safe-area aware.

PWA specifics

display: standalone; an install hint covers iOS "Add to Home Screen".
Service worker: cache the app shell only; API always live (tailnet). No offline deck in v1.
Icons 192/512 + maskable; theme color = dark.

Interaction invariants

One-hand usable: all primary actions live in the bottom third of the screen.
Animation lock during commit (no double-fire); undo stack ≥ 10 deep.
Every card shows: photo, price, title, place.

Acceptance (Phase 2)

Glenn can open the PWA from his iPhone home screen, swipe a real deck one-handed, and fix any mis-swipe in the List view — without touching a desktop.

3.5 KiB Raw Blame History Unescape Escape