docs: freeze Phase 2 contract — UI-SPEC v2 (approved mockup A, stack engine, deltas) + DATA-MODEL P2 addendum (migrations, cursor pagination, media mirror) + frozen mockup reference
This commit is contained in:
AlexanderRozhenko
@@ -93,3 +93,15 @@ LIMIT :deck_size;
|
|||||||
- **Backup:** nightly `sqlite3 .backup` to `data/backup/` immediately after import (house rule; the DB is the app's only mutable state).
|
- **Backup:** nightly `sqlite3 .backup` to `data/backup/` immediately after import (house rule; the DB is the app's only mutable state).
|
||||||
- **Prune:** mirrored image files for rows `gone` >30 days; rows themselves are never auto-deleted in v1.
|
- **Prune:** mirrored image files for rows `gone` >30 days; rows themselves are never auto-deleted in v1.
|
||||||
- **VACUUM:** optional; the DB is KV-sized (a few thousand rows).
|
- **VACUUM:** optional; the DB is KV-sized (a few thousand rows).
|
||||||
|
|
||||||
|
## P2 additions — frozen 2026-11-10 (production build)
|
||||||
|
|
||||||
|
- **New columns** (guarded, idempotent migrations in `db.init_db`: `ALTER TABLE ... ADD COLUMN` when missing):
|
||||||
|
- `listings.year INTEGER` — parsed from title at import (`rubric.year_from_title`); NULL when absent.
|
||||||
|
- `listings.seller_type TEXT` — `'dealer'` | `'private'` | NULL. Filled ONLY from a real page signal (the hunt image backfill / a later enrichment pass); never inferred from titles.
|
||||||
|
- `listings.extras TEXT` — JSON array of rubric-matched extra labels (`MVI/cert, whitewalls, spokes, windshield, bags, ABS`); UI displays at most 3.
|
||||||
|
- **Importer:** fills the three new fields; all P1 behavior unchanged (gates, upsert, dedupe, gone-marking, idempotence, counts 640/560/80).
|
||||||
|
- **Deck feed + cursor pagination (production):** semantics unchanged (no swipe, or `maybe` older than 7 days; `active` only); order `score DESC, first_seen DESC, id DESC`. Cursor = opaque `"<score>|<first_seen>|<id>"` of the last returned row; next page = strictly-after in that tuple order (OR-chain on the three keys). `GET /api/deck?limit&cursor` → `{items, next_cursor, remaining}`. Cursor stays correct while swipes delete rows underneath it.
|
||||||
|
- **Badge:** `prefs['badge_seen_at']` (ISO). `new` = active rows with `first_seen` > COALESCE(badge_seen_at,'0'); `POST /api/badge/seen` stamps now.
|
||||||
|
- **Media mirror:** files at `data/img/{listing_id}.webp`; `GET /img/{id}` → file (200) → `img_url` (302) → 404 (UI placeholder). Downloads via `app/imgfetch.py` (polite: ~1 req/s, skip-existing, resumable). `img_url` enrichment happens upstream in the hunt state (`motorcycle-hunt-img.py`; atomic writes; rescans keep curated imgs) and lands via import.
|
||||||
|
- **Dedupe refinement (stretch, targeted):** for cross-province groups with >2 members, replace collapse-to-one with `min(ns,nb)` completeness pairing; surplus siblings stay active. Expected dup ≈ 77 (vs 80). Verify counts and report.
|
||||||
|
|||||||
@@ -56,7 +56,7 @@ The nightly import is triggered by its own Hermes cron job — `bike-tinder-impo
|
|||||||
|
|
||||||
- The importer pulls each new listing's card image once into `data/img/` (~100 KB avg; ≈64 MB the first day, then ~20–30 MB/month). Cards reference the local mirror; a missing file falls back to a 302 hotlink of the source CDN (verified token-free and size-rewritable).
|
- The importer pulls each new listing's card image once into `data/img/` (~100 KB avg; ≈64 MB the first day, then ~20–30 MB/month). Cards reference the local mirror; a missing file falls back to a 302 hotlink of the source CDN (verified token-free and size-rewritable).
|
||||||
- Why: ad removal eventually kills CDN URLs (unverifiable until it happens — the mirror makes it a non-issue), phone-side speed, and "gone" cards stay viewable.
|
- Why: ad removal eventually kills CDN URLs (unverifiable until it happens — the mirror makes it a non-issue), phone-side speed, and "gone" cards stay viewable.
|
||||||
- Bootstrap: today's state carries `img` on only ~3% of rows — the first import does a one-time headless re-sweep (8 pages/province via the vendored parser — 16 fetches, not 640 detail pages) to harvest card images. A placeholder renders for any listing still without a photo; it never holds up the deck. Mirrored files for rows gone >30 days are pruned.
|
- Bootstrap (frozen 2026-11-10, P2): image URLs are enriched into the hunt state by the hunt toolchain's `motorcycle-hunt-img.py` — one detail-page fetch per listing, polite pacing; rescans keep curated imgs — then the importer carries them into the DB. The app mirrors files via `app/imgfetch.py` → `data/img/{id}.webp`; `/img/{id}` serves the file, else 302 to the source CDN, else the UI placeholder. Backfill scope at freeze: all 620 Kijiji rows missing an image. A placeholder renders for any listing still without a photo; it never holds up the deck. Mirrored files for rows gone >30 days are pruned.
|
||||||
|
|
||||||
## Frontend
|
## Frontend
|
||||||
|
|
||||||
@@ -93,7 +93,7 @@ Single user; **no auth in v1** — the app is reached only through the stack's o
|
|||||||
## Repo layout (target)
|
## Repo layout (target)
|
||||||
|
|
||||||
```
|
```
|
||||||
app/ importer.py · api.py · static/{index.html,app.js,app.css,manifest.json,sw.js,icons}
|
app/ importer.py · api.py · imgfetch.py · static/{index.html (single-file app), manifest.json, sw.js, icons/}
|
||||||
deploy/ docker-compose.yml (app + Tailscale sidecar) · Dockerfile · podman-stack-bike-tinder.service
|
deploy/ docker-compose.yml (app + Tailscale sidecar) · Dockerfile · podman-stack-bike-tinder.service
|
||||||
reference/ copies of the hunt modules the app vendors from
|
reference/ copies of the hunt modules the app vendors from
|
||||||
data/ runtime state (gitignored)
|
data/ runtime state (gitignored)
|
||||||
|
|||||||
10
docs/PLAN.md
10
docs/PLAN.md
@@ -34,10 +34,12 @@ A single-source, single-user, tailnet-only Tinder-style PWA on the Rotarran: nig
|
|||||||
|
|
||||||
## Phase 2 — The swipe app (core)
|
## Phase 2 — The swipe app (core)
|
||||||
|
|
||||||
- 2–3 UI mock variants → Glenn picks one
|
**Status: in build (Torres, 2026-11-10) on `dev`.** Contract frozen: `UI-SPEC.md` v2 + `reference/mockup-001-fidelity.html` (Variant A "Pure", approved by Glenn; 5-deep live stack, no-lock commit, dossier sheet). Image backfill underway at freeze (hunt `motorcycle-hunt-img.py`, 620 listings) + app-side mirror (`app/imgfetch.py`).
|
||||||
- API (queue, swipe, edits, filters) + PWA frontend: card stack, drag physics, Like / Nope / Maybe, match moment
|
|
||||||
- Full list view with inline edit; basic filters
|
- [x] 2–3 UI mock variants → Glenn picked **Variant A "Pure"** (approved 2026-11-10 after two fix rounds)
|
||||||
- Proof: runs locally, exercised on Glenn's phone over the tailnet dev port
|
- [ ] API (deck cursor, swipe upsert/clear, list + filters, stats, media, import) + PWA frontend (faithful mockup port: stack engine, drag, Like / Nope / Maybe, dossier, empty/undo) — no match overlay (removed by Glenn's call)
|
||||||
|
- [ ] Full list view with inline edit; basic filters (decision + sort + search)
|
||||||
|
- [ ] Proof: runs locally on :9453; exercised on Glenn's phone over the tailnet
|
||||||
- **Exit criteria:** Glenn can swipe a real deck on his phone and edit results in the list.
|
- **Exit criteria:** Glenn can swipe a real deck on his phone and edit results in the list.
|
||||||
|
|
||||||
## Phase 3 — Personalization
|
## Phase 3 — Personalization
|
||||||
|
|||||||
136
docs/UI-SPEC.md
136
docs/UI-SPEC.md
@@ -1,46 +1,112 @@
|
|||||||
# UI-SPEC — Bike-Tinder
|
# 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.
|
**FROZEN v2 · 2026-11-10.** The post-mockup contract for the Phase 2 production build. Two normative artifacts, in tandem:
|
||||||
|
|
||||||
## Screens
|
- **`reference/mockup-001-fidelity.html`** — Variant A "Pure", chosen and iterated to approval by Glenn (2026-11-10). **Normative for FEEL.** The production frontend is a faithful port: keep its DOM, CSS, and motion code verbatim; replace data sources and add only the production deltas (§7).
|
||||||
|
- **This document** — normative for **metrics, behaviors, invariants**, and the production deltas.
|
||||||
|
|
||||||
### 1. Deck (default)
|
(Fidelity goal, Glenn's words: "as close to Tinder as possible." Photo-first, dark, big gestures — and decisively: **speed; nothing may make the user wait.**)
|
||||||
- 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)
|
## 1. Globals
|
||||||
- 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)
|
- Palette: `--bg:#0b0b0e; --card:#141419; --text:#fff; --mut:rgba(255,255,255,.62); --accent1:#ff7854; --accent2:#fd267d; --like:#46d369; --nope:#fd4d5c; --maybe:#ffb43a`
|
||||||
- Two segments: Liked ("matches") and Maybe. Same row style as List; opens the detail sheet. This is the actual shortlist for buying.
|
- Type: system stack (`-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif`).
|
||||||
|
- Frame: full-viewport flex column, `body{overflow:hidden}` — header 50px, stage flex:1, actions 86px, nav 68px.
|
||||||
|
- Desktop: `.app` max-width 520px, centered. Safe areas: header `padding-top:env(safe-area-inset-top)`; nav `padding-bottom:calc(6px + env(safe-area-inset-bottom))`; dossier actions keep their existing safe-area padding.
|
||||||
|
- **Z-order law (global):** cards 6–10 (local, inside the stage) < flight 12 < list/stub 50 < nav 60 < dback 69 < detail 70. Cards must NEVER paint above list/stub/nav — a regression here freezes every other screen.
|
||||||
|
|
||||||
### 4. Trends (Phase 3)
|
## 2. Deck screen (default)
|
||||||
- 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
|
### Card geometry
|
||||||
- Dark theme, near-black background, one accent gradient (flame → red/pink), white primary text, ~60% secondary.
|
- `.card{position:absolute;left:14px;right:14px;top:6px;bottom:34px;border-radius:18px;overflow:hidden;background:var(--card);box-shadow:0 0 0 1px rgba(255,255,255,.07),0 18px 40px rgba(0,0,0,.5);will-change:transform;touch-action:none}`
|
||||||
- Cards: ~16px radius, full-bleed photo, subtle shadow; stamps are 3px outline uppercase, rotated ∓12°.
|
- Photo full-bleed (`object-fit:cover`); bottom gradient 52% tall (transparent → rgba(0,0,0,.55) @55% → .88). Info block at bottom:14px: chips row → title (23px/800, clamp 2 lines) → price (20px/600) → sub (13px, var(--mut)).
|
||||||
- Type: system stack (SF on iPhone); title 22–24px bold; price 20px semibold.
|
- No photo → placeholder panel: 45° repeating stripes (#141419/#18181f), centered copy: "Photo pending — thumbnail backfill queued".
|
||||||
- Bottom tab bar: Deck · List · Matches · Trends (icons + labels), safe-area aware.
|
- ⓘ button: 32px circle, top-right of card (rgba(0,0,0,.45), 1px rgba(255,255,255,.25) border) → opens the dossier for that card.
|
||||||
|
- Chips: 11px/600, rgba(255,255,255,.14) bg, radius 999px. Production content: max 3 = seller chip ("Dealer" only when seller_type=dealer) + first 2 extras.
|
||||||
|
|
||||||
## PWA specifics
|
### Stack engine (5-deep live pile — normative)
|
||||||
- `display: standalone`; an install hint covers iOS "Add to Home Screen".
|
- Constants: `DEPTH=5, SC=.026, TY=16, DIM=.08`.
|
||||||
- Service worker: cache the app shell only; API always live (tailnet). No offline deck in v1.
|
- Depth transform: `translateY(TY*d) scale(1-SC*d)`, `filter:brightness(1-DIM*d)`, `z-index:10-d`, `pointer-events:auto` iff `d===0`.
|
||||||
- Icons 192/512 + maskable; theme color = dark.
|
- `.topcard` marks the d=0 card. **Invariant: exactly ONE `.topcard` in the DOM at any instant** — the flying card sheds it the moment it commits.
|
||||||
|
- Depth transitions: `.22s cubic-bezier(.2,.8,.3,1)` on transform/filter/opacity — this IS the cascade; it must be visible on every commit.
|
||||||
|
- New cards enter from two depths deeper (`translateY(TY*(d+2)) scale(1-SC*(d+2))`, opacity 0), then settle to their depth after one reflow.
|
||||||
|
- Every card is a live object with its own pointer listeners, and carries its **full face at all times** (chips/title/price/sub present on every card, no late text pop).
|
||||||
|
|
||||||
## Interaction invariants
|
### Drag (top card only)
|
||||||
- One-hand usable: all primary actions live in the bottom third of the screen.
|
- pointerdown on the top card → capture pointer, transition off. Move: `translate(dx,dy) rotate(clamp(±12°, dx/12))`.
|
||||||
- Animation lock during commit (no double-fire); undo stack ≥ 10 deep.
|
- Stamps (3px outline, 26px/800, letter-spacing 2px, radius 10px):
|
||||||
- Every card shows: photo, price, title, place.
|
- LIKE — green, top-left, rotate(-14°), opacity `clamp(0..1, dx/120)`
|
||||||
|
- NOPE — red, top-right, rotate(14°), opacity `clamp(0..1, -dx/120)`
|
||||||
|
- MAYBE — amber, centered, bottom:130px, opacity `dy<-20 ? clamp(0..1, -dy/130) : 0`
|
||||||
|
- Release: `dx > stage.clientWidth*0.35` → LIKE · `dx < -w*0.35` → NOPE · `dy < -140` → MAYBE · else spring back (`.3s cubic-bezier(.2,.8,.3,1)` + stamps cleared).
|
||||||
|
- Tap (≤6px movement, pointerup) on the top card → dossier.
|
||||||
|
|
||||||
## Acceptance (Phase 2)
|
### Commit — no lock (THE point)
|
||||||
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.
|
- `commit(dir)`: only the current top commits. Instantly removed from the pile's books; flies out; pile refills to 5 from the buffer; all remaining cards re-layer to their new depth.
|
||||||
|
- Flight: like `translate(620px,40px) rotate(26°)` · nope `translate(-620px,40px) rotate(-26°)` · maybe `translate(0,-780px)`. `transition:transform .3s ease-in, opacity .3s`; card opacity → .15; node removed ~420ms. Flying card: `.topcard` dropped, `z-index:12`, `pointer-events:none` immediately.
|
||||||
|
- **Input never locks.** The next card is grabbable the same instant — even with two or three cards still in flight. Proven: 3 commits at 70ms intervals, zero lockout. Nothing may reintroduce a busy/lock state.
|
||||||
|
- Buttons row (86px, gap 16px; all act on the current top): ↺ undo 42px (#1d1d24, #f5c451) · ✕ nope 58px (white bg, #fd5068) · ★ maybe 58px (#1d1d24, #2a2a33 border, --maybe) · ♥ like 62px (accent gradient, glow). Buttons trigger the same flight as gestures.
|
||||||
|
- Undo: pops history → the card is rebuilt and re-inserted on top (enters from `translateY(-46px) scale(1.02)`, opacity 0), pile trimmed back to DEPTH (excess returns to the buffer front). Clears the empty state.
|
||||||
|
|
||||||
|
### Empty state
|
||||||
|
Dashed panel, copy exactly: **"You're all caught up."** / "New bikes arrive nightly — next import 08:30." / "↺ brings the last card back." Undo restores the last card.
|
||||||
|
|
||||||
|
## 3. Dossier (fullscreen sheet) — one sheet, both doors
|
||||||
|
|
||||||
|
Opened from deck ⓘ (or tap) AND list row tap. iOS-sheet geometry: top gap 26px; `border-radius:18px 18px 0 0`; bg #0f0f13; slide-in `.3s cubic-bezier(.2,.8,.3,1)` from `translateY(103%)`. Backdrop: rgba(0,0,0,.38), z 69/70.
|
||||||
|
|
||||||
|
- Grabber: 26px strip, 42×5px bar (rgba(255,255,255,.3)). Close button: 36px circle, top:38px left:14px.
|
||||||
|
- Hero: 34% height (min 190px), photo (`object-fit:cover`); no photo → dimmed empty state.
|
||||||
|
- Body (scrollable, padding 14px 18px 20px): title (20px/800) → price (19px/700) + sub → chips → section "The machine" → spec table → section "Seller's notes" → "Open on Kijiji ↗" link (target=_blank).
|
||||||
|
- Spec table rows (9, in order): **Year · Odometer · Engine · Family · Category · Location · Seller · Source · First seen.** Missing values render "—" in dim style (#5a5a66, weight 500).
|
||||||
|
- Data mapping: Year=listings.year | Odometer=km formatted ("24,800 km") | Engine=cc found in title/desc ("1,250 cc") | Family=family | Category=from URL slug (`/v-<slug>/` → hyphens to spaces, title-case) | Location=`{location}, {NS|NB}` | Seller=`dealer|private` | Source="Kijiji" | First seen=relative ("Today", "N days ago") from first_seen.
|
||||||
|
- Seller's notes = desc quarantined as a quote block (13.5px, #b9b9c2); never merged into specs.
|
||||||
|
- Bottom actions: ✕ Nope / ★ Maybe / ♥ Like (48px, radius 14; like = gradient). From the deck they commit the current top (flight); from the list they set the decision.
|
||||||
|
- Pull-to-close: drag from grabber or hero; `dy > 110px` → close; else spring back (`.25s`).
|
||||||
|
|
||||||
|
## 4. List screen
|
||||||
|
|
||||||
|
- Header: "All bikes" (20px/800) + sub "{live} active · {new} new since your last visit" (new bold white when >0).
|
||||||
|
- Search input: compact, filters title (case-insensitive, server `q`).
|
||||||
|
- Filter chips row 1 (decision, single-select): All · Liked · Maybe · Noped · Undecided.
|
||||||
|
- Sort chips row 2 (single-select): Score · Price ↕ (second tap toggles ↑/↓) · Newest · km.
|
||||||
|
- Chip style as mockup: 12px, #1b1b21 bg, #26262e border; active = white bg / dark text / 600.
|
||||||
|
- Rows: thumb 56px radius 12 (or ◍ placeholder), title (14.5px/650, 1-line ellipsis), sub "{location}, {REGION}" (+ " · dealer|private" when known), price right (14px/700), decision buttons ♥ ★ ✕ (26px circles) — current decision lit in its color; tapping the lit button clears it (delete).
|
||||||
|
- Row tap → dossier (same sheet as §3). Scroll under nav (padding-bottom 68px). Empty: "No bikes match."
|
||||||
|
|
||||||
|
## 5. Matches screen (production: REAL)
|
||||||
|
|
||||||
|
- "Your shortlist": section "♥ Liked (n)", then "★ Maybe (n)". Same row component, edits included; row tap → dossier.
|
||||||
|
- Empty: "No likes yet — swipe right on the deck."
|
||||||
|
|
||||||
|
## 6. Trends
|
||||||
|
|
||||||
|
- Stub (Phase 3): "Trends — Phase 3" / "The deck learns your taste as you swipe."
|
||||||
|
|
||||||
|
## 7. Production deltas (the ONLY changes from the mockup)
|
||||||
|
|
||||||
|
1. **Data wiring.** Deck buffer from `GET /api/deck` (limit 40, opaque cursor); refill when buffer <5 and a cursor exists. List from `GET /api/list`. Dossier from the row/card payload. Header from `GET /api/stats`.
|
||||||
|
2. **Swipe persistence.** Commits fire `POST /api/swipe` optimistically — the UI never waits. Failures go to a retry queue (attempts at ~2s/5s/10s, then every 15s while the tab lives); toast "Couldn't save — retrying" on first failure. Undo fires `DELETE /api/swipe/{id}` through the same queue.
|
||||||
|
3. **Badge.** `POST /api/badge/seen` once per session when the deck first renders. Header shows "{live} live" always; "· {new} new" only when new>0.
|
||||||
|
4. **List filters + search** per §4 (mockup had placeholder chips only).
|
||||||
|
5. **Matches real (§5); Trends stays stub.**
|
||||||
|
6. **Images.** Every card/thumb references `/img/{id}` (server: cached file → 302 CDN → 404 → placeholder). The client never hotlinks directly.
|
||||||
|
7. **PWA.** `manifest.json` (name "Bike-Tinder", display standalone, theme/background #0b0b0e, icons 192/512 + maskable), `apple-touch-icon.png` (180px), iOS metas (`apple-mobile-web-app-capable`, `black-translucent`), `sw.js` (precache shell; API network-first; offline → serve shell + toast "Offline — retrying"). Register the SW in index.html. Serve index.html + sw.js with `Cache-Control: no-cache`.
|
||||||
|
8. **Safe areas + desktop centering** per §1.
|
||||||
|
|
||||||
|
## 8. Static files
|
||||||
|
|
||||||
|
`app/static/index.html` (single-file app, no build) · `manifest.json` · `sw.js` · `icons/` (192, 512, maskable, apple-touch-icon 180).
|
||||||
|
|
||||||
|
## 9. Acceptance (Phase 2)
|
||||||
|
|
||||||
|
Machine-checkable:
|
||||||
|
- Server runs on 127.0.0.1:9453; `/` serves the app; `/api/stats` live count = DB active count (560 at freeze).
|
||||||
|
- Deck page 1 starts at the top-scored row (Indian Scout family, score 91); ordering monotonic (score DESC, first_seen DESC, id DESC); page 2 zero overlap.
|
||||||
|
- Swipe like → appears in `/api/list?decision=like`; re-swipe edits; delete clears; server restart → decision persists.
|
||||||
|
- Undo from empty restores the last card.
|
||||||
|
- Fast-chain intact: commits faster than the flight animation, no lockout, exactly one `.topcard`.
|
||||||
|
- `/img/{id}`: 200 mirrored / 302 fallback / 404 → placeholder.
|
||||||
|
- Selfcheck: all P1 checks green + new API checks green.
|
||||||
|
|
||||||
|
Human (parent-run after build): Glenn swipes a real deck from his phone and edits results in the list — the Phase 2 exit criterion.
|
||||||
|
|||||||
429
reference/mockup-001-fidelity.html
Normal file
429
reference/mockup-001-fidelity.html
Normal file
@@ -0,0 +1,429 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
|
||||||
|
<meta name="robots" content="noindex">
|
||||||
|
<title>Bike-Tinder · Mockup A — Pure</title>
|
||||||
|
<style>
|
||||||
|
:root{
|
||||||
|
--bg:#0b0b0e; --card:#141419; --text:#fff; --mut:rgba(255,255,255,.62);
|
||||||
|
--accent1:#ff7854; --accent2:#fd267d; --like:#46d369; --nope:#fd4d5c; --maybe:#ffb43a;
|
||||||
|
}
|
||||||
|
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
|
||||||
|
html,body{height:100%}
|
||||||
|
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
|
||||||
|
background:var(--bg);color:var(--text);overflow:hidden;-webkit-font-smoothing:antialiased}
|
||||||
|
.app{position:relative;display:flex;flex-direction:column;height:100%}
|
||||||
|
/* header */
|
||||||
|
header{height:50px;display:flex;align-items:center;justify-content:space-between;padding:0 16px}
|
||||||
|
.brand{display:flex;align-items:center;gap:8px;font-weight:800;font-size:16px;letter-spacing:.2px}
|
||||||
|
.flame{width:18px;height:18px;border-radius:6px;background:linear-gradient(135deg,var(--accent1),var(--accent2))}
|
||||||
|
.pill{font-size:12px;color:var(--mut);background:#1b1b21;border:1px solid #26262e;border-radius:999px;padding:5px 10px}
|
||||||
|
.pill b{color:#fff}
|
||||||
|
/* stage + cards */
|
||||||
|
.stage{position:relative;flex:1;padding:6px 14px 2px;min-height:0}
|
||||||
|
.card{position:absolute;left:14px;right:14px;top:6px;bottom:34px;border-radius:18px;overflow:hidden;background:var(--card);
|
||||||
|
box-shadow:0 0 0 1px rgba(255,255,255,.07), 0 18px 40px rgba(0,0,0,.5);will-change:transform;touch-action:none}
|
||||||
|
.nophoto{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:repeating-linear-gradient(45deg,#141419 0 14px,#18181f 14px 28px);color:#55555f;font-size:13px;text-align:center;padding:24px;line-height:1.6}
|
||||||
|
.card .photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
|
||||||
|
.card .grad{position:absolute;left:0;right:0;bottom:0;height:52%;background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.55) 55%,rgba(0,0,0,.88) 100%)}
|
||||||
|
.card .info{position:absolute;left:16px;right:16px;bottom:14px;z-index:3}
|
||||||
|
.chips{display:flex;gap:6px;margin-bottom:8px;flex-wrap:wrap}
|
||||||
|
.chip{font-size:11px;font-weight:600;letter-spacing:.4px;padding:4px 9px;border-radius:999px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22)}
|
||||||
|
.title{font-size:23px;font-weight:800;line-height:1.15;text-shadow:0 1px 8px rgba(0,0,0,.5);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
|
||||||
|
.price{font-size:20px;font-weight:600;margin-top:2px}
|
||||||
|
.sub{font-size:13px;color:var(--mut);margin-top:3px}
|
||||||
|
.stamp{position:absolute;top:26px;z-index:4;font-weight:800;letter-spacing:2px;font-size:26px;padding:6px 12px;border:3px solid;border-radius:10px;opacity:0;pointer-events:none}
|
||||||
|
.stamp.like{left:20px;transform:rotate(-14deg);color:var(--like);border-color:var(--like);background:rgba(70,211,105,.08)}
|
||||||
|
.stamp.nope{right:20px;transform:rotate(14deg);color:var(--nope);border-color:var(--nope);background:rgba(253,77,92,.08)}
|
||||||
|
.stamp.maybe{left:50%;top:auto;bottom:130px;transform:translateX(-50%);color:var(--maybe);border-color:var(--maybe);background:rgba(255,180,58,.08)}
|
||||||
|
/* actions */
|
||||||
|
.actions{height:86px;display:flex;align-items:center;justify-content:center;gap:16px}
|
||||||
|
.act{border:0;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .12s}
|
||||||
|
.act:active{transform:scale(.92)}
|
||||||
|
.undo{width:42px;height:42px;background:#1d1d24;color:#f5c451;font-size:18px}
|
||||||
|
.x{width:58px;height:58px;background:#fff;color:#fd5068;font-size:26px;font-weight:700;box-shadow:0 6px 18px rgba(0,0,0,.4)}
|
||||||
|
.s{width:58px;height:58px;background:#1d1d24;color:var(--maybe);font-size:24px;border:1px solid #2a2a33}
|
||||||
|
.h{width:62px;height:62px;background:linear-gradient(135deg,var(--accent1),var(--accent2));color:#fff;font-size:26px;box-shadow:0 8px 22px rgba(253,38,125,.35)}
|
||||||
|
/* tabs */
|
||||||
|
nav{height:68px;display:flex;align-items:stretch;border-top:1px solid #1d1d24;background:#0d0d10;padding-bottom:6px;position:relative;z-index:60}
|
||||||
|
.tab{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:10px;letter-spacing:.3px;color:#6f6f7a;cursor:pointer}
|
||||||
|
.tab.on{color:#fff}
|
||||||
|
.tab svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
|
||||||
|
/* fullscreen detail dossier — iOS-style sheet: top gap + grabber, drag down to close */
|
||||||
|
.dback{position:absolute;inset:0;z-index:69;background:rgba(0,0,0,.38);opacity:0;pointer-events:none;transition:opacity .28s}
|
||||||
|
.dback.on{opacity:1}
|
||||||
|
.detail{position:absolute;top:26px;left:0;right:0;bottom:0;z-index:70;background:#0f0f13;border-radius:18px 18px 0 0;box-shadow:0 -14px 40px rgba(0,0,0,.45);transform:translateY(103%);transition:transform .3s cubic-bezier(.2,.8,.3,1);display:flex;flex-direction:column;overflow:hidden}
|
||||||
|
.detail.on{transform:translateY(0)}
|
||||||
|
.dgrab{flex:none;height:26px;display:flex;align-items:center;justify-content:center;background:#0f0f13;cursor:grab;touch-action:none}
|
||||||
|
.dgrab i{width:42px;height:5px;border-radius:3px;background:rgba(255,255,255,.3);display:block}
|
||||||
|
.dclose{position:absolute;top:38px;left:14px;width:36px;height:36px;border-radius:50%;background:rgba(0,0,0,.55);color:#fff;border:0;font-size:17px;z-index:5;cursor:pointer}
|
||||||
|
.dhero{position:relative;height:34%;min-height:190px;flex:none;background:#17171c;touch-action:none}
|
||||||
|
.dphoto{width:100%;height:100%;object-fit:cover;display:block}
|
||||||
|
.dphoto.ph{opacity:.25}
|
||||||
|
.dherograd{position:absolute;left:0;right:0;bottom:0;height:70px;background:linear-gradient(transparent,rgba(15,15,19,.95))}
|
||||||
|
.dbody{flex:1;overflow-y:auto;padding:14px 18px 20px}
|
||||||
|
.dtitle{font-size:20px;font-weight:800;line-height:1.2}
|
||||||
|
.drow{display:flex;align-items:baseline;gap:10px;margin-top:5px}
|
||||||
|
.dprice{font-size:19px;font-weight:700}
|
||||||
|
.dsub{font-size:12.5px;color:var(--mut)}
|
||||||
|
.dchips{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap}
|
||||||
|
.dsec{font-size:11px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:#7b7b88;margin:18px 0 8px}
|
||||||
|
.specs{border-top:1px solid #1f1f27}
|
||||||
|
.spec{display:flex;justify-content:space-between;gap:14px;padding:9px 2px;border-bottom:1px solid #1f1f27;font-size:13.5px}
|
||||||
|
.spec .k{color:#8f8f9c}
|
||||||
|
.spec .v{font-weight:600;text-align:right}
|
||||||
|
.spec .v.z{color:#5a5a66;font-weight:500}
|
||||||
|
.dnotes{font-size:13.5px;line-height:1.5;color:#b9b9c2}
|
||||||
|
.dopen{display:inline-block;margin-top:16px;color:#ff9a76;font-weight:600;font-size:14px;text-decoration:none}
|
||||||
|
.dacts{flex:none;display:flex;gap:10px;padding:12px 16px calc(14px + env(safe-area-inset-bottom, 0px));border-top:1px solid #1d1d24;background:#0d0d10}
|
||||||
|
.dact{flex:1;height:48px;border-radius:14px;border:1px solid #2a2a33;background:#16161b;color:#fff;font-size:14px;font-weight:700;cursor:pointer}
|
||||||
|
.dact:active{transform:scale(.97)}
|
||||||
|
.dact.no{color:#fd7b89}
|
||||||
|
.dact.mb{color:var(--maybe)}
|
||||||
|
.dact.lk{background:linear-gradient(135deg,var(--accent1),var(--accent2));border:0;box-shadow:0 8px 22px rgba(253,38,125,.3)}
|
||||||
|
.ibtn{position:absolute;top:14px;right:14px;width:32px;height:32px;border-radius:50%;background:rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.25);color:#fff;font-size:14px;z-index:4;cursor:pointer}
|
||||||
|
/* empty */
|
||||||
|
.empty{position:absolute;inset:6px 14px 2px;display:none;flex-direction:column;align-items:center;justify-content:center;gap:8px;border:1px dashed #2a2a33;border-radius:18px;color:var(--mut);text-align:center;padding:24px;font-size:13.5px}
|
||||||
|
.empty.on{display:flex}
|
||||||
|
.empty b{color:#fff;font-size:16px}
|
||||||
|
/* list screen */
|
||||||
|
.list{position:absolute;inset:0;display:none;flex-direction:column;background:var(--bg);z-index:50;padding-bottom:68px}
|
||||||
|
.list.on{display:flex}
|
||||||
|
.lhead{padding:14px 16px 8px}
|
||||||
|
.lhead h1{font-size:20px;font-weight:800}
|
||||||
|
.lhead .sub{margin-top:2px}
|
||||||
|
.filters{display:flex;gap:7px;padding:4px 16px 10px;overflow-x:auto}
|
||||||
|
.fchip{font-size:12px;padding:6px 11px;border-radius:999px;background:#1b1b21;border:1px solid #26262e;color:var(--mut);white-space:nowrap;cursor:pointer}
|
||||||
|
.fchip.on{background:#fff;color:#111;border-color:#fff;font-weight:600}
|
||||||
|
.lrows{flex:1;overflow-y:auto;padding:0 10px 12px}
|
||||||
|
.row{display:flex;gap:11px;align-items:center;padding:9px 8px;border-radius:14px}
|
||||||
|
.row + .row{border-top:1px solid #1a1a1f}
|
||||||
|
.thumb{width:56px;height:56px;border-radius:12px;object-fit:cover;background:#1a1a20;flex:none}
|
||||||
|
.thumb.ph{display:flex;align-items:center;justify-content:center;color:#4a4a55;font-size:20px}
|
||||||
|
.rmain{flex:1;min-width:0}
|
||||||
|
.rtitle{font-size:14.5px;font-weight:650;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
|
||||||
|
.rsub{font-size:12px;color:var(--mut);margin-top:2px}
|
||||||
|
.rright{display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex:none}
|
||||||
|
.rprice{font-size:14px;font-weight:700}
|
||||||
|
.rc{display:flex;gap:5px}
|
||||||
|
.rbtn{width:26px;height:26px;border-radius:50%;border:1px solid #2a2a33;background:#16161b;color:#8a8a95;font-size:12px;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
|
||||||
|
.rbtn.on.like{background:rgba(70,211,105,.15);border-color:var(--like);color:var(--like)}
|
||||||
|
.rbtn.on.maybe{background:rgba(255,180,58,.15);border-color:var(--maybe);color:var(--maybe)}
|
||||||
|
.rbtn.on.nope{background:rgba(253,77,92,.15);border-color:var(--nope);color:var(--nope)}
|
||||||
|
/* stub screens */
|
||||||
|
.stub{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:var(--bg);z-index:50;color:var(--mut);text-align:center;padding:40px;font-size:13.5px}
|
||||||
|
.stub.on{display:flex}
|
||||||
|
.stub b{color:#fff;font-size:17px}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="app">
|
||||||
|
<header>
|
||||||
|
<div class="brand"><span class="flame"></span>Bike-Tinder</div>
|
||||||
|
<div class="pill"><b>560</b> live · <b>3</b> new</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<div class="stage" id="stage">
|
||||||
|
<div class="empty" id="empty"><b>You're all caught up.</b>New bikes arrive nightly — next import 08:30.<br>↺ brings the last card back.</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="actions" id="actions">
|
||||||
|
<button class="act undo" id="btnUndo" title="Undo">↺</button>
|
||||||
|
<button class="act x" id="btnNope" title="Nope">✕</button>
|
||||||
|
<button class="act s" id="btnMaybe" title="Maybe">★</button>
|
||||||
|
<button class="act h" id="btnLike" title="Like">♥</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<nav>
|
||||||
|
<div class="tab on" data-tab="deck"><svg viewBox="0 0 24 24"><rect x="4" y="4" width="13" height="16" rx="2.5"/><path d="M8.5 2.5h9A2.5 2.5 0 0 1 20 5v12"/></svg>Deck</div>
|
||||||
|
<div class="tab" data-tab="list"><svg viewBox="0 0 24 24"><path d="M4 6h16M4 12h16M4 18h10"/></svg>List</div>
|
||||||
|
<div class="tab" data-tab="matches"><svg viewBox="0 0 24 24"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg>Matches</div>
|
||||||
|
<div class="tab" data-tab="trends"><svg viewBox="0 0 24 24"><path d="M5 20V10M12 20V4M19 20v-7"/></svg>Trends</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<div class="dback" id="dback"></div>
|
||||||
|
<div class="detail" id="detail">
|
||||||
|
<div class="dgrab" id="dgrab"><i></i></div>
|
||||||
|
<button class="dclose" id="dclose">⌄</button>
|
||||||
|
<div class="dhero"><img class="dphoto" id="dphoto" alt=""><div class="dherograd"></div></div>
|
||||||
|
<div class="dbody" id="dbody">
|
||||||
|
<div class="dtitle" id="dtitle"></div>
|
||||||
|
<div class="drow"><div class="dprice" id="dprice"></div><div class="dsub" id="dsub"></div></div>
|
||||||
|
<div class="dchips" id="dchips"></div>
|
||||||
|
<div class="dsec">The machine</div>
|
||||||
|
<div class="specs" id="dspecs"></div>
|
||||||
|
<div class="dsec">Seller's notes</div>
|
||||||
|
<div class="dnotes" id="dnotes"></div>
|
||||||
|
<a class="dopen" id="dopen" href="#" target="_blank" rel="noopener">Open on Kijiji ↗</a>
|
||||||
|
</div>
|
||||||
|
<div class="dacts">
|
||||||
|
<button class="dact no" id="dNo">✕ Nope</button>
|
||||||
|
<button class="dact mb" id="dMb">★ Maybe</button>
|
||||||
|
<button class="dact lk" id="dLk">♥ Like</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="list" id="listScreen">
|
||||||
|
<div class="lhead"><h1>All bikes</h1><div class="sub">560 active · <b style="color:#fff">3 new</b> since your last visit</div></div>
|
||||||
|
<div class="filters">
|
||||||
|
<div class="fchip on">Score</div><div class="fchip">Price ↕</div><div class="fchip">Newest</div><div class="fchip">km</div><div class="fchip">Filters ⚙</div>
|
||||||
|
</div>
|
||||||
|
<div class="lrows" id="lrows"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="stub" id="stubMatches"><b>Your shortlist lives here</b>Liked and Maybe bikes — once the build lands.</div>
|
||||||
|
<div class="stub" id="stubTrends"><b>Trends — Phase 3</b>The deck learns your taste as you swipe.</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
const CARDS=[
|
||||||
|
{title:"2025 Indian Scout Classic Limited",price:"$21,099",sub:"Moncton, NB · dealer",chips:["Dealer","Cruise control"],
|
||||||
|
year:"2025",km:"—",cc:"1,250 cc",family:"Indian Scout",style:"Street cruiser",loc:"Moncton, NB",seller:"Dealer",seen:"Today",
|
||||||
|
img:"https://media.kijiji.ca/api/v1/ca-prod-dealer-ads/images/b0/b01e9e9b-63d6-4cf6-bd58-ef7f70ef8df2?rule=kijijica-960-webp",
|
||||||
|
desc:"Welcome to Rallye Motoplex & Marine. Save $1,102 today with rates as low as 3.99%. Call today and ask about our in-store incentives.",
|
||||||
|
url:"https://www.kijiji.ca/v-street-cruisers-choppers/moncton/2025-indian-scout-classic-limited-tech-ghost-white-metallic/1729602020"},
|
||||||
|
{title:"2013 Kawasaki Vulcan 900 Classic",price:"$4,800",sub:"Fredericton, NB · dealer",chips:[],
|
||||||
|
year:"2013",km:"24,800 km",cc:"903 cc",family:"Vulcan 900",style:"Street cruiser",loc:"Fredericton, NB",seller:"Dealer",seen:"6 days ago",
|
||||||
|
img:"https://media.kijiji.ca/api/v1/ca-prod-dealer-ads/images/88/882c012d-8682-4616-882b-03bfc4c880eb?rule=kijijica-960-webp",
|
||||||
|
desc:"MULTI-POINT INSPECTED & RECONDITIONED. Financing + extended warranty options available. No freight or PDI on used bikes.",
|
||||||
|
url:"https://www.kijiji.ca/v-street-cruisers-choppers/fredericton/2013-kawasaki-vulcan-900-classic-used/1743203823"},
|
||||||
|
{title:"2026 Kawasaki Vulcan 900 Classic LT",price:"$11,949",sub:"Fredericton, NB · dealer",chips:["Demo"],
|
||||||
|
year:"2026",km:"—",cc:"903 cc",family:"Vulcan 900",style:"Street cruiser",loc:"Fredericton, NB",seller:"Dealer",seen:"Today",
|
||||||
|
img:"https://media.kijiji.ca/api/v1/ca-prod-dealer-ads/images/2e/2eb55a55-1648-4e1f-8ca0-ba3fcdeb78d7?rule=kijijica-960-webp",
|
||||||
|
desc:"Plus 1 free year Kawasaki Protection Plus (KPP). Limited time offer.",
|
||||||
|
url:"https://www.kijiji.ca/v-street-cruisers-choppers/fredericton/2026-kawasaki-vulcan-900-classic-lt-demo-save-800-00-plus-1/1736278655"},
|
||||||
|
{title:"2019 Honda Rebel 500",price:"$5,700",sub:"Yarmouth, NS · private",chips:["Windshield"],
|
||||||
|
year:"2019",km:"8,900 km",cc:"471 cc",family:"Rebel 500",style:"Street cruiser",loc:"Yarmouth, NS",seller:"Private",seen:"2 days ago",
|
||||||
|
img:"https://media.kijiji.ca/api/v1/ca-prod-fsbo-ads/images/a3/a3c41571-2a33-4102-843a-149a76d0c3b5?rule=kijijica-960-webp",
|
||||||
|
desc:"Great bike with a professionally painted tank. Comes with gel insert in seat, Kappa back rack, windshield and Givi back box. Light and nimble with a low seat.",
|
||||||
|
url:"https://www.kijiji.ca/v-street-cruisers-choppers/yarmouth/2019-honda-rebel-500/1745749820"},
|
||||||
|
{title:"2005 Yamaha Vstar 650 Custom Bobber",price:"$5,400",sub:"Bedford, NS · private",chips:["MVI"],
|
||||||
|
year:"2005",km:"46,500 km",cc:"649 cc",family:"V-Star 650",style:"Street cruiser",loc:"Bedford, NS",seller:"Private",seen:"12 days ago",
|
||||||
|
img:"https://media.kijiji.ca/api/v1/ca-prod-fsbo-ads/images/a3/a349dd47-f2cb-472b-a469-330bad7fa061?rule=kijijica-960-webp",
|
||||||
|
desc:"(Bike is ready to ride) Kept inside and in heated storage. MVI: inspection is good for another year. Horn, lights and gauges all work.",
|
||||||
|
url:"https://www.kijiji.ca/v-street-cruisers-choppers/bedford/2005-yamaha-vstar-650-custom-bobber/1745767295"},
|
||||||
|
{title:"2026 Indian Scout Bobber",price:"$17,199",sub:"Halifax, NS · dealer",chips:["Dealer","Bobber"],
|
||||||
|
year:"2026",km:"—",cc:"1,250 cc",family:"Indian Scout",style:"Street cruiser",loc:"Halifax, NS",seller:"Dealer",seen:"Today",img:null,
|
||||||
|
desc:"Maroon metallic finish. ABS, LED lighting, 1250 cc V-twin. The long-keep one — saddlebags and extended passenger seat planned.",
|
||||||
|
url:"https://www.kijiji.ca/"},
|
||||||
|
{title:"2024 Royal Enfield Super Meteor 650",price:"$5,993",sub:"Halifax, NS · dealer",chips:["Dealer","Warranty"],
|
||||||
|
year:"2024",km:"3,900 km",cc:"648 cc",family:"Super Meteor 650",style:"Street cruiser",loc:"Halifax, NS",seller:"Dealer",seen:"Today",img:null,
|
||||||
|
desc:"2024 Super Meteor in Celestial Red. Dealer maintained, one season ridden.",
|
||||||
|
url:"https://www.kijiji.ca/"},
|
||||||
|
{title:"2020 Honda 750 Shadow",price:"$2,250",sub:"Bedford, NS · private",chips:["Project"],
|
||||||
|
year:"2020",km:"38,000 km",cc:"745 cc",family:"Shadow 750",style:"Street cruiser",loc:"Bedford, NS",seller:"Private",seen:"3 weeks ago",img:null,
|
||||||
|
desc:"Reliable commuter Shadow. Honest bike, needs a carb clean and new rear tire.",
|
||||||
|
url:"https://www.kijiji.ca/"}
|
||||||
|
];
|
||||||
|
const ROWS=CARDS.map(c=>({...c,st:0}));
|
||||||
|
|
||||||
|
const $=id=>document.getElementById(id);
|
||||||
|
const stage=$('stage');
|
||||||
|
const DEPTH=5; // a 5-card live stack at all times
|
||||||
|
const SC=.026, TY=16, DIM=.08; // per-depth step: scale, y-offset, dimming
|
||||||
|
let pile=[]; // top-first [{i,d,el}] — every card its own swipable object
|
||||||
|
let nextIdx=0, hist=[];
|
||||||
|
let dragEl=null, sx=0, sy=0, dx=0, dy=0, moved=false;
|
||||||
|
|
||||||
|
function isTop(el){ return pile[0]&&pile[0].el===el; }
|
||||||
|
function setStamps(el,a,b,c){
|
||||||
|
el.querySelector('.stamp.like').style.opacity=a;
|
||||||
|
el.querySelector('.stamp.nope').style.opacity=b;
|
||||||
|
el.querySelector('.stamp.maybe').style.opacity=c;
|
||||||
|
}
|
||||||
|
function cardNode(item,i){
|
||||||
|
const el=document.createElement('div');
|
||||||
|
el.className='card';
|
||||||
|
el.innerHTML=`${item.img?`<img class="photo" src="${item.img}" alt="" draggable="false">`:`<div class="nophoto">Photo pending — thumbnail backfill queued</div>`}
|
||||||
|
<div class="grad"></div>
|
||||||
|
<div class="stamp like">LIKE</div>
|
||||||
|
<div class="stamp nope">NOPE</div>
|
||||||
|
<div class="stamp maybe">MAYBE</div>
|
||||||
|
<button class="ibtn">ⓘ</button>
|
||||||
|
<div class="info"><div class="chips">${(item.chips||[]).map(x=>`<span class="chip">${x}</span>`).join('')}</div><div class="title">${item.title}</div><div class="price">${item.price}</div><div class="sub">${item.sub}</div></div>`;
|
||||||
|
el.addEventListener('pointerdown',down);
|
||||||
|
el.addEventListener('pointermove',move);
|
||||||
|
el.addEventListener('pointerup',upH);
|
||||||
|
el.addEventListener('pointercancel',upH);
|
||||||
|
const ib=el.querySelector('.ibtn');
|
||||||
|
ib.addEventListener('pointerdown',e=>e.stopPropagation());
|
||||||
|
ib.addEventListener('click',e=>{ e.stopPropagation(); if(isTop(el)) openDetail(item,{type:'deck'}); });
|
||||||
|
return {i,d:item,el};
|
||||||
|
}
|
||||||
|
function layer(el,d,anim){
|
||||||
|
el.classList.toggle('topcard',d===0);
|
||||||
|
el.style.transition=anim?'transform .22s cubic-bezier(.2,.8,.3,1), filter .22s ease, opacity .22s ease':'none';
|
||||||
|
el.style.transform=`translateY(${TY*d}px) scale(${1-SC*d})`;
|
||||||
|
el.style.filter=`brightness(${1-DIM*d})`;
|
||||||
|
el.style.opacity='1';
|
||||||
|
el.style.zIndex=10-d;
|
||||||
|
el.style.pointerEvents=d===0?'auto':'none';
|
||||||
|
}
|
||||||
|
function relayer(){ pile.forEach((c,d)=>layer(c.el,d,true)); }
|
||||||
|
function fillPile(){
|
||||||
|
while(pile.length<DEPTH&&nextIdx<CARDS.length){
|
||||||
|
const entry=cardNode(CARDS[nextIdx],nextIdx), d=pile.length;
|
||||||
|
entry.el.style.transition='none';
|
||||||
|
entry.el.style.transform=`translateY(${TY*(d+2)}px) scale(${1-SC*(d+2)})`;
|
||||||
|
entry.el.style.opacity='0';
|
||||||
|
stage.appendChild(entry.el);
|
||||||
|
pile.push(entry); nextIdx++;
|
||||||
|
void entry.el.offsetWidth;
|
||||||
|
layer(entry.el,d,true);
|
||||||
|
}
|
||||||
|
relayer();
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --- list rows --- */
|
||||||
|
function renderList(){
|
||||||
|
$('lrows').innerHTML=ROWS.map((r,i)=>`
|
||||||
|
<div class="row">
|
||||||
|
${r.img?`<img class="thumb" src="${r.img}" alt="">`:`<div class="thumb ph">◍</div>`}
|
||||||
|
<div class="rmain"><div class="rtitle">${r.title}</div><div class="rsub">${r.sub}</div></div>
|
||||||
|
<div class="rright"><div class="rprice">${r.price}</div>
|
||||||
|
<div class="rc" data-i="${i}">
|
||||||
|
<button class="rbtn like" data-s="1">♥</button>
|
||||||
|
<button class="rbtn maybe" data-s="2">★</button>
|
||||||
|
<button class="rbtn nope" data-s="3">✕</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>`).join('');
|
||||||
|
}
|
||||||
|
$('lrows').addEventListener('click',e=>{
|
||||||
|
const b=e.target.closest('.rbtn');
|
||||||
|
if(!b){
|
||||||
|
const row=e.target.closest('.row'); if(!row) return;
|
||||||
|
const i=+row.querySelector('.rc').dataset.i;
|
||||||
|
openDetail(ROWS[i],{type:'row',i}); return;
|
||||||
|
}
|
||||||
|
const i=+b.closest('.rc').dataset.i, s=+b.dataset.s;
|
||||||
|
ROWS[i].st = (ROWS[i].st===s)?0:s;
|
||||||
|
const ctrl=b.closest('.rc');
|
||||||
|
ctrl.querySelectorAll('.rbtn').forEach(btn=>btn.classList.toggle('on',+btn.dataset.s===ROWS[i].st));
|
||||||
|
});
|
||||||
|
|
||||||
|
/* --- fullscreen dossier --- */
|
||||||
|
let dCtx=null;
|
||||||
|
function openDetail(data,ctx){
|
||||||
|
dCtx=ctx||null;
|
||||||
|
const ph=$('dphoto');
|
||||||
|
if(data.img){ ph.src=data.img; ph.classList.remove('ph'); } else { ph.removeAttribute('src'); ph.classList.add('ph'); }
|
||||||
|
$('dtitle').textContent=data.title; $('dprice').textContent=data.price; $('dsub').textContent=data.sub;
|
||||||
|
$('dchips').innerHTML=(data.chips||[]).map(x=>`<span class="chip">${x}</span>`).join('');
|
||||||
|
const rows=[["Year",data.year],["Odometer",data.km],["Engine",data.cc],["Family",data.family],["Category",data.style],["Location",data.loc],["Seller",data.seller],["Source","Kijiji"],["First seen",data.seen]];
|
||||||
|
$('dspecs').innerHTML=rows.map(r=>`<div class="spec"><span class="k">${r[0]}</span><span class="v${(!r[1]||r[1]==='—')?' z':''}">${r[1]||'—'}</span></div>`).join('');
|
||||||
|
$('dnotes').textContent=data.desc||'';
|
||||||
|
$('dopen').href=data.url||'#';
|
||||||
|
$('detail').classList.add('on'); $('dback').classList.add('on');
|
||||||
|
$('dbody').scrollTop=0;
|
||||||
|
}
|
||||||
|
function closeDetail(){ const d=$('detail'); d.style.transition=''; d.style.transform=''; d.classList.remove('on'); $('dback').classList.remove('on'); dCtx=null; }
|
||||||
|
$('dclose').onclick=closeDetail;
|
||||||
|
$('dclose').addEventListener('pointerdown',e=>e.stopPropagation());
|
||||||
|
/* pull-down-to-close (grabber bar + photo) */
|
||||||
|
let dDragY=null;
|
||||||
|
function dStart(e){ dDragY=e.clientY; $('detail').style.transition='none'; try{e.currentTarget.setPointerCapture(e.pointerId)}catch(_){} }
|
||||||
|
function dMoveH(e){ if(dDragY===null) return; const dy=Math.max(0,e.clientY-dDragY); $('detail').style.transform=`translateY(${dy}px)`; }
|
||||||
|
function dEndH(e){ if(dDragY===null) return; const dy=Math.max(0,e.clientY-dDragY); dDragY=null;
|
||||||
|
if(dy>110){ closeDetail(); }
|
||||||
|
else { const d=$('detail'); d.style.transition='transform .25s cubic-bezier(.2,.8,.3,1)'; d.style.transform=''; } }
|
||||||
|
[document.querySelector('.dgrab'),document.querySelector('.dhero')].forEach(el=>{ if(!el) return; el.addEventListener('pointerdown',dStart); el.addEventListener('pointermove',dMoveH); el.addEventListener('pointerup',dEndH); el.addEventListener('pointercancel',dEndH); });
|
||||||
|
function dAction(a){
|
||||||
|
const ctx=dCtx; closeDetail();
|
||||||
|
if(!ctx) return;
|
||||||
|
if(ctx.type==='deck'){
|
||||||
|
if(pile[0]) commit(pile[0].el, a==='like'?'like':(a==='nope'?'nope':'maybe'));
|
||||||
|
} else {
|
||||||
|
const i=ctx.i, s= a==='like'?1:(a==='maybe'?2:3);
|
||||||
|
ROWS[i].st=(ROWS[i].st===s)?0:s;
|
||||||
|
const ctrl=document.querySelector(`.rc[data-i="${i}"]`);
|
||||||
|
if(ctrl) ctrl.querySelectorAll('.rbtn').forEach(btn=>btn.classList.toggle('on',+btn.dataset.s===ROWS[i].st));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
$('dNo').onclick=()=>dAction('nope'); $('dMb').onclick=()=>dAction('maybe'); $('dLk').onclick=()=>dAction('like');
|
||||||
|
/* ⓘ buttons are wired per-card inside cardNode() */
|
||||||
|
|
||||||
|
/* --- swipe engine: commit + fly are per-card; nothing locks the deck --- */
|
||||||
|
function commit(el,dir){
|
||||||
|
if(!isTop(el)) return;
|
||||||
|
const t=pile.shift();
|
||||||
|
hist.push(t.i);
|
||||||
|
flyOut(el,dir);
|
||||||
|
fillPile(); relayer();
|
||||||
|
if(!pile.length) $('empty').classList.add('on');
|
||||||
|
}
|
||||||
|
function flyOut(el,dir){
|
||||||
|
const x= dir==='maybe'?0:(dir==='like'?620:-620);
|
||||||
|
const y= dir==='maybe'?-780:40;
|
||||||
|
const rot= dir==='maybe'?0:(dir==='like'?26:-26);
|
||||||
|
setStamps(el, dir==='like'?1:0, dir==='nope'?1:0, dir==='maybe'?1:0);
|
||||||
|
el.classList.remove('topcard');
|
||||||
|
el.style.zIndex=12; el.style.pointerEvents='none';
|
||||||
|
el.style.transition='transform .3s ease-in, opacity .3s';
|
||||||
|
el.style.transform=`translate(${x}px,${y}px) rotate(${rot}deg)`;
|
||||||
|
el.style.opacity=.15;
|
||||||
|
setTimeout(()=>{ el.remove(); },420);
|
||||||
|
}
|
||||||
|
function undo(){
|
||||||
|
if(!hist.length) return;
|
||||||
|
const i=hist.pop();
|
||||||
|
const entry=cardNode(CARDS[i],i);
|
||||||
|
entry.el.style.transition='none';
|
||||||
|
entry.el.style.transform='translateY(-46px) scale(1.02)';
|
||||||
|
entry.el.style.opacity='0';
|
||||||
|
stage.appendChild(entry.el);
|
||||||
|
pile.unshift(entry);
|
||||||
|
if(pile.length>DEPTH){ const drop=pile.pop(); drop.el.remove(); nextIdx=drop.i; }
|
||||||
|
void entry.el.offsetWidth;
|
||||||
|
relayer();
|
||||||
|
$('empty').classList.remove('on');
|
||||||
|
}
|
||||||
|
$('btnLike').onclick=()=>{ if(pile[0]) commit(pile[0].el,'like'); };
|
||||||
|
$('btnNope').onclick=()=>{ if(pile[0]) commit(pile[0].el,'nope'); };
|
||||||
|
$('btnMaybe').onclick=()=>{ if(pile[0]) commit(pile[0].el,'maybe'); };
|
||||||
|
$('btnUndo').onclick=undo;
|
||||||
|
|
||||||
|
/* --- drag: only the top card is grabbable; every other card stays live --- */
|
||||||
|
function down(e){
|
||||||
|
const el=e.currentTarget;
|
||||||
|
if(!isTop(el)) return;
|
||||||
|
dragEl=el; moved=false; sx=e.clientX; sy=e.clientY; dx=0; dy=0;
|
||||||
|
try{ el.setPointerCapture(e.pointerId) }catch(_){}
|
||||||
|
el.style.transition='none';
|
||||||
|
}
|
||||||
|
function move(e){
|
||||||
|
const el=e.currentTarget;
|
||||||
|
if(dragEl!==el) return;
|
||||||
|
dx=e.clientX-sx; dy=e.clientY-sy;
|
||||||
|
if(Math.abs(dx)>6||Math.abs(dy)>6) moved=true;
|
||||||
|
const rot=Math.max(-12,Math.min(12,dx/12));
|
||||||
|
el.style.transform=`translate(${dx}px,${dy}px) rotate(${rot}deg)`;
|
||||||
|
setStamps(el, Math.max(0,Math.min(1,dx/120)), Math.max(0,Math.min(1,-dx/120)), dy<-20?Math.max(0,Math.min(1,-dy/130)):0);
|
||||||
|
}
|
||||||
|
function upH(e){
|
||||||
|
const el=e.currentTarget;
|
||||||
|
if(dragEl!==el) return;
|
||||||
|
dragEl=null;
|
||||||
|
const w=stage.clientWidth||360;
|
||||||
|
el.style.transition='transform .3s cubic-bezier(.2,.8,.3,1)';
|
||||||
|
if(dx>w*0.35) commit(el,'like');
|
||||||
|
else if(dx<-w*0.35) commit(el,'nope');
|
||||||
|
else if(dy<-140) commit(el,'maybe');
|
||||||
|
else { el.style.transform=''; setStamps(el,0,0,0); if(!moved && e.type==='pointerup' && isTop(el)) openDetail(pile[0].d,{type:'deck'}); }
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --- tabs --- */
|
||||||
|
document.querySelectorAll('.tab').forEach(t=>t.onclick=()=>{
|
||||||
|
const name=t.dataset.tab;
|
||||||
|
document.querySelectorAll('.tab').forEach(x=>x.classList.toggle('on',x===t));
|
||||||
|
$('listScreen').classList.toggle('on',name==='list');
|
||||||
|
$('stubMatches').classList.toggle('on',name==='matches');
|
||||||
|
$('stubTrends').classList.toggle('on',name==='trends');
|
||||||
|
});
|
||||||
|
|
||||||
|
renderList(); fillPile();
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Reference in New Issue
Block a user