v4.1.5: Accordion UI, webcam QR scanning, Pi image fix

Encode/Decode UI:
- New accordion layout with 3 steps (encode) / 2 steps (decode)
- Gold step numbers with checkmarks on completion
- Dynamic right-aligned summaries as fields are filled
- Subtle gradient highlight on active accordion step

Webcam QR Scanning:
- Camera button for RSA key QR codes on encode/decode pages
- Camera button for channel key scanning
- 3-2-1 countdown capture for dense QR codes
- Proper scanner stop/restart on retry
- Backend decompression for STEGASOO-Z: compressed keys

RSA Key Print:
- Removed identifying text from QR print output
- Now prints plain QR code for discretion

Pi Image Script:
- Fixed 16GB resize to detect expand vs shrink
- Fresh images now properly EXPAND to 16GB
- Already-expanded images properly SHRINK to 16GB

UI Polish:
- Removed PIN helper text for compactness
- Fixed QR drop zone centering
- Fixed decode page element IDs for JS

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Aaron D. Lee
2026-01-06 21:31:11 -05:00
parent c65d9e6682
commit eb16eb1db2
12 changed files with 1780 additions and 1178 deletions

View File

@@ -95,6 +95,47 @@ src/stegasoo/dct_steganography.py
---
---
## Browser Webcam QR Scanning
Add webcam-based QR code scanning for all key input fields.
### Use Cases
- Import channel key via QR scan on account page
- Scan QR codes instead of typing long keys
### Implementation
**1. Add JS QR scanning library**
- Use `jsQR` or `html5-qrcode` (client-side, no server needed)
- Include via CDN in base template
**2. Add camera button to channel key inputs**
- Account page: "Add Key" field
- Encode/decode pages: channel key selector (if manual input)
**3. Camera modal component**
- Request camera permission
- Live video preview
- Auto-detect QR and populate input field
- Close modal on successful scan
### Files to Modify
```
frontends/web/templates/base.html - Add QR library CDN
frontends/web/templates/account.html - Camera button + modal
frontends/web/static/js/stegasoo.js - QR scan methods
```
### Testing Checklist
- [ ] Camera permission prompt works
- [ ] QR detected and input populated
- [ ] Works on mobile browsers
- [ ] Graceful fallback if no camera
---
## Other 4.1.5 Ideas (if time)
- [ ] Role-based permissions: admin / mod / user