4d8575ce33
Admin System Settings page: - New /admin/settings route with channel key config - QR code export with tiled print sheet (4x5 on US Letter) - Server config display (HTTPS, port, auth, DCT/QR status) - Environment info (version, Python, platform, KDF) Navigation improvements: - Icon-only nav with floating labels on hover - Gold labels slide down below icons - Gradient pill background on hover Air-gap ready: - All vendor libs now local (Bootstrap CSS/JS, Icons, html5-qrcode) - QRious library for QR generation - No external CDN dependencies Other changes: - Moved About link from nav to footer - Channel QR export moved from about.html to admin/settings.html - Print sheet button for QR codes (tiled US Letter output) - Dev runner script (dev_run.sh) with r/q hotkeys - Fixed navbar dropdown z-index 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
4.5 KiB
4.5 KiB
Stegasoo v4.1.6 Planning
UI Tweaks
1. Revamp Tron Lines Animation (Carrier/Stego Image)
Current state:
- 6-8 snake paths, each with 3-5 segments (~24-40 total lines)
- 2px thick lines
- 30-60px length per segment
- Starting points spread across 80% of image area
- Colors: yellow, cyan, purple, blue with glow
Target improvements:
- Thinner lines (1px instead of 2px)
- More numerous (20-40 paths via 5x4 grid, ~60-200 segments total)
- Better distribution across entire image (grid-based seeding)
- Shorter segments (12-30px) for denser "circuit board" look
Files:
frontends/web/static/style.css(~881-979) -.embed-tracestylingfrontends/web/static/js/stegasoo.js(~333-390) -generateEmbedTraces()
Tools Page Expansion
Analysis Tools
- JPEG Compression Tester - Preview image at different quality levels (10-100%), show file size delta. Useful for understanding stego survivability.
- LSB Plane Viewer - Visualize least significant bit plane(s) of RGB channels. Classic stego analysis tool.
- Histogram Viewer - Color distribution graph per channel. Anomalies can indicate hidden data.
- Image Diff - Compare two images side-by-side with pixel difference highlighting. Great for original vs stego comparison.
- Noise Analysis - Chi-square or similar statistical analysis for detecting LSB embedding.
Transform Tools
- Rotate/Flip - 90°/180°/270° rotation, horizontal/vertical flip
- Resize - Scale with aspect ratio lock, common presets (50%, 25%, etc.)
- Crop - Basic rectangular crop with preview
- Format Convert - PNG ↔ JPEG ↔ WebP with quality slider
Existing Tools (already done)
- Capacity Calculator
- EXIF Viewer
- EXIF Strip
- Image Peek (header analysis)
Tools UI/UX Overhaul
Final Layout: Office-style Ribbon + Two-Panel
┌─────────────────────────────────────────────────────────────┐
│ 📏 📋 👁️ 📊 ┃ ✂️ 🔄 📐 🔀 Image Tools │ ← Icon toolbar
├────────────────────────────────────────┬────────────────────┤
│ [Format: PNG ▼] [Quality: 85] │ │
├────────────────────────────────────────┤ Capacity │
│ │ Calculator │
│ ┌────────────────────────────┐ │ ────────────── │
│ │ │ │ │
│ │ Drop image here │ │ Dimensions: │
│ │ or click │ │ 1920 × 1080 │
│ │ │ │ │
│ └────────────────────────────┘ │ LSB Capacity: │
│ │ 245 KB │
│ [image.jpg] │ │
│ │ ────────────── │
│ │ [Clear] [Export] │
└────────────────────────────────────────┴────────────────────┘
Options + dropzone/preview Results sidebar
- Top ribbon: Icon buttons grouped by category (Analyze | Transform)
- Left panel: Tool options + dropzone/preview (INPUT)
- Right panel: Tool name + results/metadata + actions (OUTPUT)
- Flow: Left → Right (input → output)
Implementation Tasks:
- Move inline CSS to style.css
- Build icon toolbar ribbon
- Build two-panel layout structure
- Migrate existing tools (Capacity, EXIF, Strip)
- Add new tools (Rotate, Compress, Convert)
- Loading spinner on all async operations
- Toast notifications instead of alerts
- Consistent color coding (green=analysis, amber=transform)
- Mobile: stack panels vertically