Book Preview

Dev Log
book-preview · v0.1
Music Cards
Scan to open on mobile
book-preview / dev-log v0.1 · LOCAL
Project
Name
Book Preview App
Tech
Vanilla HTML/CSS/JS · Single file
Local path
/Users/briji/vibe-coding/pet-projects/book preview/
Server
npx serve -p 3333
Deployment
Status
✓ Live — Jun 9, 2026
URL
book-preview-1j6.pages.dev
Platform
Cloudflare Pages · Free tier
Total files
335 / 20,000 limit ✓
Music Cards
81 files (80 pages + cover)
Room Sale
61 files (60 pages + cover)
Tree Stories
57 files (56 pages + cover)
index.html
1 file · self-contained
Changelog
Jun 8, 2026 — Day 2
Gallery, navigation polish, QR + sharing
  • Gallery view — vertical scroll, Chatbooks-style with Back/Front cover strip
  • First page intentionally blank + Back Cover page in all books
  • Preview button → opens flip viewer; close returns to gallery
  • Share button → copies ?book=id URL to clipboard
  • QR code overlay — scan to open on mobile
  • URL routing (?book=mc/rs/ts) — direct links work, browser back/forward
  • Page numbers in flip viewer — PAGE 01 style, top corners
  • Gallery page numbers (1, 2, 3…) below each spread row
  • Byline in gallery header — dimensions (5 × 5"), binding, page count
  • Aspect ratio fixed — 2:1 spread for square 5×5" pages
  • Arrow keys fixed — window listener + preventDefault, no stuck focus
  • Page curl drag — drag from edge zones, snap back or complete
  • Backward animation reversed — new right page arrives from left
  • Nav arrows repositioned to book edges (relative to book container)
  • Z zoom fixed — fills canvas without overlapping nav arrows
Jun 7, 2026 — Day 1
Initial build — flip viewer from scratch
  • 3D page flip animation — CSS perspective + rotateY, preserve-3d
  • Flip card technique — front/back faces, backface-visibility hidden
  • Silent midpoint DOM swap — seamless image transition at 325ms
  • Cover single-page view + fade transition to/from spreads
  • Two-page spread layout with spine divider and inner shadows
  • Scrubber with draggable "Page X–Y" green bubble gripper
  • Home screen with 3 books, thumbnail cards, hover lift effect
  • Swipe gesture support on book pages
  • Books: Music Cards (80p), Room Sale (60p), Tree Stories (56p)
Backlog
Markdown → page flow
Drag & drop .md files, auto-layout into book pages with images, headings, body text
feature
Different dimensions preview
4×4", 8×8", 8×10", A4, Letter — switchable format presets with correct aspect ratios
feature
Page editor
Reorder pages via drag & drop, add text overlays, crop images, rearrange spreads
feature
Print-quality export
High-res PDF export for print ordering, bleed marks, CMYK-safe output
feature
Multiple book tabs
Open several books simultaneously, switch without returning to home screen
ux
Password-protected books
Private share links with optional PIN, client-side encryption
security
Analytics / view tracking
Page view counts, time-on-page, most viewed spreads via Cloudflare Analytics
analytics
Z — zoom
Cover