feat: Add zoom in/out controls for image preview

Browse Source

Features:
1. Zoom Controls
   - 🔍− button: zoom out (20% step)
   - 1:1 button: reset to 100%
   - 🔍+ button: zoom in (20% step)
   - Zoom level display: 100%, 120%, etc.

2. Zoom Range
   - Minimum: 20% (0.2x)
   - Maximum: 500% (5x)
   - Default: 100% (1x)

3. Auto-reset
   - Reset zoom to 100% when navigating photos
   - Reset when opening new image

4. Layout
   - Zoom buttons at top
   - Photo in scrollable container
   - Left/right arrows for navigation

Implementation:
- CSS transform: scale() for smooth zoom
- Remove max-width/max-height at high zoom
- Zoom level indicator updates dynamically

Files:
- src/page.html (zoomPhoto function, zoom UI)

...

This commit is contained in:

Warren

2026-05-17 05:37:49 +08:00

parent b5cf80e981

commit 09f0cb7ae9

2 changed files with 43 additions and 3 deletions

Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL

Download Patch File Download Diff File Expand all files Collapse all files

BIN

data/auth.sqlite

Binary file not shown.