Lots of snazzy ui updates.

frontends/web/static/js/stegasoo.js

@@ -0,0 +1,741 @@
+/**
+ * Stegasoo Frontend JavaScript
+ * Shared functionality across encode, decode, and generate pages
+ */
+
+const Stegasoo = {
+    
+    // ========================================================================
+    // PASSWORD/PIN VISIBILITY TOGGLES
+    // ========================================================================
+    
+    initPasswordToggles() {
+        document.querySelectorAll('[data-toggle-password]').forEach(btn => {
+            btn.addEventListener('click', function() {
+                const targetId = this.dataset.togglePassword;
+                const input = document.getElementById(targetId);
+                const icon = this.querySelector('i');
+                
+                if (!input) return;
+                
+                if (input.type === 'password') {
+                    input.type = 'text';
+                    icon?.classList.replace('bi-eye', 'bi-eye-slash');
+                } else {
+                    input.type = 'password';
+                    icon?.classList.replace('bi-eye-slash', 'bi-eye');
+                }
+            });
+        });
+    },
+    
+    // ========================================================================
+    // RSA INPUT METHOD TOGGLE (File vs QR)
+    // ========================================================================
+    
+    initRsaMethodToggle() {
+        const fileRadio = document.getElementById('rsaMethodFile');
+        const qrRadio = document.getElementById('rsaMethodQr');
+        const fileSection = document.getElementById('rsaFileSection');
+        const qrSection = document.getElementById('rsaQrSection');
+        
+        if (!fileRadio || !qrRadio || !fileSection || !qrSection) return;
+        
+        const update = () => {
+            const isFile = fileRadio.checked;
+            fileSection.classList.toggle('d-none', !isFile);
+            qrSection.classList.toggle('d-none', isFile);
+        };
+        
+        fileRadio.addEventListener('change', update);
+        qrRadio.addEventListener('change', update);
+    },
+    
+    // ========================================================================
+    // DROP ZONES (Drag & Drop + Preview)
+    // ========================================================================
+    
+    initDropZones(options = {}) {
+        document.querySelectorAll('.drop-zone').forEach(zone => {
+            const input = zone.querySelector('input[type="file"]');
+            const label = zone.querySelector('.drop-zone-label');
+            const preview = zone.querySelector('.drop-zone-preview');
+            
+            if (!input) return;
+            
+            // Check if this is a special zone type
+            const isPayloadZone = zone.id === 'payloadDropZone';
+            const isCarrierZone = zone.id === 'carrierDropZone';
+            const isQrZone = zone.id === 'qrDropZone';
+            
+            // Drag events
+            ['dragenter', 'dragover'].forEach(evt => {
+                zone.addEventListener(evt, e => {
+                    e.preventDefault();
+                    zone.classList.add('drag-over');
+                });
+            });
+            
+            ['dragleave', 'drop'].forEach(evt => {
+                zone.addEventListener(evt, e => {
+                    e.preventDefault();
+                    zone.classList.remove('drag-over');
+                });
+            });
+            
+            // Drop handler
+            zone.addEventListener('drop', e => {
+                if (e.dataTransfer.files.length) {
+                    input.files = e.dataTransfer.files;
+                    input.dispatchEvent(new Event('change'));
+                }
+            });
+            
+            // Change handler for preview (skip payload and QR zones - they have special handling)
+            if (!isPayloadZone && !isQrZone) {
+                input.addEventListener('change', function() {
+                    if (this.files && this.files[0]) {
+                        Stegasoo.showImagePreview(this.files[0], preview, label, zone);
+                    }
+                });
+            }
+        });
+    },
+    
+    showImagePreview(file, previewEl, labelEl, zone = null) {
+        if (!file.type.startsWith('image/')) return;
+        
+        const isScanContainer = zone && zone.classList.contains('scan-container');
+        const isPixelContainer = zone && zone.classList.contains('pixel-container');
+        
+        const reader = new FileReader();
+        reader.onload = e => {
+            if (previewEl) {
+                previewEl.src = e.target.result;
+                previewEl.classList.remove('d-none');
+            }
+            // For scan/pixel containers, hide the label entirely (filename will appear in data panel)
+            if (labelEl) {
+                if (isScanContainer || isPixelContainer) {
+                    labelEl.classList.add('d-none');
+                } else {
+                    labelEl.innerHTML = '<i class="bi bi-check-circle text-success me-1"></i>' + file.name;
+                }
+            }
+            
+            // Trigger appropriate animation
+            if (isScanContainer) {
+                Stegasoo.triggerScanAnimation(zone, file);
+            } else if (isPixelContainer) {
+                Stegasoo.triggerPixelReveal(zone, file);
+            }
+        };
+        reader.readAsDataURL(file);
+    },
+    
+    // ========================================================================
+    // REFERENCE PHOTO SCAN ANIMATION
+    // ========================================================================
+    
+    triggerScanAnimation(container, file, duration = 700) {
+        // Reset any previous state
+        container.classList.remove('scan-complete');
+        container.classList.add('scanning');
+        
+        const preview = container.querySelector('.drop-zone-preview');
+        
+        // Create hash blocks for the "hashing" visual effect
+        const createHashBlocks = () => {
+            // Remove old hash blocks
+            const oldBlocks = container.querySelector('.hash-blocks');
+            if (oldBlocks) oldBlocks.remove();
+            
+            const hashContainer = document.createElement('div');
+            hashContainer.className = 'hash-blocks';
+            
+            // Size and position to match preview image exactly
+            const imgWidth = preview.offsetWidth;
+            const imgHeight = preview.offsetHeight;
+            const imgTop = preview.offsetTop;
+            const imgLeft = preview.offsetLeft;
+            
+            hashContainer.style.width = imgWidth + 'px';
+            hashContainer.style.height = imgHeight + 'px';
+            hashContainer.style.top = imgTop + 'px';
+            hashContainer.style.left = imgLeft + 'px';
+            
+            // Create grid of hash blocks (10x8 for better coverage)
+            const cols = 10;
+            const rows = 8;
+            
+            hashContainer.style.gridTemplateColumns = `repeat(${cols}, 1fr)`;
+            hashContainer.style.gridTemplateRows = `repeat(${rows}, 1fr)`;
+            
+            // Create blocks with staggered delays for wave disappearance
+            for (let row = 0; row < rows; row++) {
+                for (let col = 0; col < cols; col++) {
+                    const block = document.createElement('div');
+                    block.className = 'hash-block';
+                    // Diagonal wave pattern for disappearance
+                    const delay = (row + col) * 25 + Math.random() * 30;
+                    block.style.animationDelay = delay + 'ms';
+                    hashContainer.appendChild(block);
+                }
+            }
+            
+            container.appendChild(hashContainer);
+        };
+        
+        // Wait for image to be ready
+        if (preview.complete && preview.naturalWidth) {
+            createHashBlocks();
+        } else {
+            preview.onload = createHashBlocks;
+        }
+        
+        // After animation duration, switch to complete state
+        setTimeout(() => {
+            container.classList.remove('scanning');
+            container.classList.add('scan-complete');
+            
+            // Remove hash blocks container
+            const hashBlocks = container.querySelector('.hash-blocks');
+            if (hashBlocks) hashBlocks.remove();
+            
+            // Populate data panel if file provided
+            if (file) {
+                const nameEl = container.querySelector('#refFileName') || container.querySelector('.scan-data-filename span');
+                const sizeEl = container.querySelector('#refFileSize') || container.querySelector('.scan-data-value');
+                const hashEl = container.querySelector('#refHashPreview') || container.querySelector('.scan-hash-preview');
+                
+                if (nameEl) {
+                    nameEl.textContent = file.name;
+                }
+                
+                if (sizeEl) {
+                    const sizeKB = (file.size / 1024).toFixed(1);
+                    const sizeMB = (file.size / (1024 * 1024)).toFixed(2);
+                    sizeEl.textContent = file.size > 1024 * 1024 ? `${sizeMB} MB` : `${sizeKB} KB`;
+                }
+                
+                if (hashEl) {
+                    // Generate a deterministic fake hash preview from filename + size
+                    const fakeHash = Stegasoo.generateFakeHash(file.name + file.size);
+                    hashEl.textContent = `SHA256: ${fakeHash.substring(0, 8)}····${fakeHash.substring(56)}`;
+                }
+            }
+        }, duration);
+    },
+    
+    generateFakeHash(input) {
+        // Simple deterministic hash-like string for display purposes
+        let hash = '';
+        const chars = '0123456789abcdef';
+        let seed = 0;
+        for (let i = 0; i < input.length; i++) {
+            seed = ((seed << 5) - seed) + input.charCodeAt(i);
+            seed = seed & seed;
+        }
+        for (let i = 0; i < 64; i++) {
+            seed = (seed * 1103515245 + 12345) & 0x7fffffff;
+            hash += chars[seed % 16];
+        }
+        return hash;
+    },
+    
+    // ========================================================================
+    // CARRIER/STEGO PIXEL REVEAL ANIMATION
+    // ========================================================================
+    
+    triggerPixelReveal(container, file, duration = 700) {
+        // Reset any previous state
+        container.classList.remove('load-complete');
+        container.classList.add('loading');
+        
+        const preview = container.querySelector('.drop-zone-preview');
+        
+        // Create embed traces container sized to image
+        const createTraces = () => {
+            // Remove old elements
+            let tracesContainer = container.querySelector('.embed-traces');
+            if (tracesContainer) tracesContainer.remove();
+            let oldGrid = container.querySelector('.embed-grid');
+            if (oldGrid) oldGrid.remove();
+            
+            // Add grid overlay (covers whole panel like ref does)
+            const grid = document.createElement('div');
+            grid.className = 'embed-grid';
+            container.appendChild(grid);
+            
+            // Create traces container
+            tracesContainer = document.createElement('div');
+            tracesContainer.className = 'embed-traces';
+            container.appendChild(tracesContainer);
+            
+            // Size and position traces to match preview image exactly
+            const imgWidth = preview.offsetWidth;
+            const imgHeight = preview.offsetHeight;
+            const imgTop = preview.offsetTop;
+            const imgLeft = preview.offsetLeft;
+            
+            tracesContainer.style.width = imgWidth + 'px';
+            tracesContainer.style.height = imgHeight + 'px';
+            tracesContainer.style.top = imgTop + 'px';
+            tracesContainer.style.left = imgLeft + 'px';
+            
+            // Generate Tron-style circuit traces covering the image
+            Stegasoo.generateEmbedTraces(tracesContainer, imgWidth, imgHeight);
+        };
+        
+        // Wait for image to be ready
+        if (preview.complete && preview.naturalWidth) {
+            createTraces();
+        } else {
+            preview.onload = createTraces;
+        }
+        
+        setTimeout(() => {
+            container.classList.remove('loading');
+            container.classList.add('load-complete');
+            
+            // Remove traces and grid
+            const traces = container.querySelector('.embed-traces');
+            if (traces) traces.remove();
+            const grid = container.querySelector('.embed-grid');
+            if (grid) grid.remove();
+            
+            // Populate data panel
+            Stegasoo.populatePixelDataPanel(container, file, preview);
+        }, duration);
+    },
+    
+    generateEmbedTraces(container, width, height) {
+        // Color classes for variety
+        const colors = ['color-yellow', 'color-cyan', 'color-purple', 'color-blue'];
+        
+        // Generate 6-8 snake paths spread across the whole image
+        const numPaths = 6 + Math.floor(Math.random() * 3);
+        
+        for (let p = 0; p < numPaths; p++) {
+            // Each path gets a random color
+            const pathColor = colors[Math.floor(Math.random() * colors.length)];
+            
+            // Distribute starting points across the image
+            let x = (width * 0.1) + (Math.random() * width * 0.8);
+            let y = (height * 0.1) + (Math.random() * height * 0.8);
+            let delay = p * 40;
+            
+            // Each path has 3-5 segments for more coverage
+            const numSegments = 3 + Math.floor(Math.random() * 3);
+            let horizontal = Math.random() > 0.5;
+            
+            for (let s = 0; s < numSegments; s++) {
+                const trace = document.createElement('div');
+                trace.className = 'embed-trace ' + (horizontal ? 'h' : 'v') + ' ' + pathColor;
+                
+                const length = 30 + Math.random() * 60;
+                trace.style.left = x + 'px';
+                trace.style.top = y + 'px';
+                trace.style.animationDelay = delay + 'ms';
+                
+                if (horizontal) {
+                    trace.style.width = length + 'px';
+                } else {
+                    trace.style.height = length + 'px';
+                }
+                
+                container.appendChild(trace);
+                
+                // Move position for next segment
+                if (horizontal) {
+                    x += length;
+                } else {
+                    y += length;
+                }
+                
+                // Wrap around if out of bounds to keep traces in view
+                if (x > width - 20) x = 10 + Math.random() * 40;
+                if (y > height - 20) y = 10 + Math.random() * 40;
+                if (x < 10) x = width - 60 + Math.random() * 40;
+                if (y < 10) y = height - 60 + Math.random() * 40;
+                
+                // Alternate direction (90 degree turn)
+                horizontal = !horizontal;
+                delay += 30;
+            }
+        }
+    },
+    
+    populatePixelDataPanel(container, file, preview) {
+        const nameEl = container.querySelector('.pixel-data-filename span');
+        const sizeEl = container.querySelector('.pixel-data-value');
+        const dimsEl = container.querySelector('.pixel-dimensions');
+        
+        if (nameEl) {
+            nameEl.textContent = file.name;
+        }
+        
+        if (sizeEl) {
+            const sizeKB = (file.size / 1024).toFixed(1);
+            const sizeMB = (file.size / (1024 * 1024)).toFixed(2);
+            sizeEl.textContent = file.size > 1024 * 1024 ? `${sizeMB} MB` : `${sizeKB} KB`;
+        }
+        
+        if (dimsEl && preview) {
+            dimsEl.textContent = `${preview.naturalWidth} × ${preview.naturalHeight} px`;
+        }
+    },
+    
+    initReferenceScanAnimation() {
+        // Find all scan containers and wire up their inputs
+        document.querySelectorAll('.scan-container').forEach(container => {
+            const input = container.querySelector('input[type="file"]');
+            const preview = container.querySelector('.drop-zone-preview');
+            const label = container.querySelector('.drop-zone-label');
+            
+            if (!input) return;
+            
+            input.addEventListener('change', function() {
+                if (this.files && this.files[0]) {
+                    Stegasoo.showImagePreview(this.files[0], preview, label, container);
+                }
+            });
+        });
+    },
+    
+    // ========================================================================
+    // CLIPBOARD PASTE
+    // ========================================================================
+    
+    initClipboardPaste(imageInputSelectors) {
+        document.addEventListener('paste', function(e) {
+            const items = e.clipboardData?.items;
+            if (!items) return;
+            
+            for (let i = 0; i < items.length; i++) {
+                if (items[i].type.indexOf('image') !== -1) {
+                    const blob = items[i].getAsFile();
+                    
+                    // Find first empty input from the list
+                    let targetInput = null;
+                    for (const selector of imageInputSelectors) {
+                        const input = document.querySelector(selector);
+                        if (input && (!input.files || !input.files.length)) {
+                            targetInput = input;
+                            break;
+                        }
+                    }
+                    
+                    // Fallback to first input if all have files
+                    if (!targetInput) {
+                        targetInput = document.querySelector(imageInputSelectors[0]);
+                    }
+                    
+                    if (targetInput) {
+                        const container = new DataTransfer();
+                        container.items.add(blob);
+                        targetInput.files = container.files;
+                        targetInput.dispatchEvent(new Event('change'));
+                    }
+                    break;
+                }
+            }
+        });
+    },
+    
+    // ========================================================================
+    // QR CODE CROP ANIMATION WITH SECTION SCANNING
+    // ========================================================================
+    
+    initQrCropAnimation(inputId = 'rsaKeyQrInput') {
+        const input = document.getElementById(inputId);
+        const container = document.getElementById('qrCropContainer');
+        const original = document.getElementById('qrOriginal');
+        const cropped = document.getElementById('qrCropped');
+        const dropZone = document.getElementById('qrDropZone');
+        
+        if (!input || !container || !original || !cropped) return;
+        
+        input.addEventListener('change', function() {
+            if (!this.files || !this.files[0]) return;
+            
+            const file = this.files[0];
+            if (!file.type.startsWith('image/')) return;
+            
+            const label = dropZone?.querySelector('.drop-zone-label');
+            
+            // Reset animation state
+            container.classList.remove('scan-complete', 'scanning');
+            container.classList.add('d-none');
+            
+            // Remove old overlay if exists
+            const oldOverlay = container.querySelector('.qr-section-overlay');
+            if (oldOverlay) oldOverlay.remove();
+            
+            // Show loading state immediately
+            container.classList.remove('d-none');
+            container.classList.add('loading');
+            label?.classList.add('d-none');
+            
+            // Add loading indicator if not present
+            let loader = container.querySelector('.qr-loader');
+            if (!loader) {
+                loader = document.createElement('div');
+                loader.className = 'qr-loader';
+                loader.innerHTML = `
+                    <i class="bi bi-qr-code-scan"></i>
+                    <span>Detecting QR code...</span>
+                `;
+                container.appendChild(loader);
+            }
+            
+            // Fetch cropped version
+            const formData = new FormData();
+            formData.append('image', file);
+            
+            fetch('/qr/crop', {
+                method: 'POST',
+                body: formData
+            })
+            .then(response => {
+                if (!response.ok) throw new Error('No QR detected');
+                return response.blob();
+            })
+            .then(blob => {
+                // Hide loader, show cropped image
+                container.classList.remove('loading');
+                cropped.src = URL.createObjectURL(blob);
+                
+                return new Promise((resolve) => {
+                    cropped.onload = () => {
+                        // Start scanning animation
+                        container.classList.add('scanning');
+                        
+                        // Add scanner overlay - will be positioned via CSS to cover the image
+                        let overlay = container.querySelector('.qr-scanner-overlay');
+                        if (!overlay) {
+                            overlay = document.createElement('div');
+                            overlay.className = 'qr-scanner-overlay';
+                            
+                            ['tl', 'tr', 'bl', 'br'].forEach(pos => {
+                                const bracket = document.createElement('div');
+                                bracket.className = `qr-finder-bracket ${pos}`;
+                                overlay.appendChild(bracket);
+                            });
+                            
+                            // Add data panel inside overlay
+                            const dataPanel = document.createElement('div');
+                            dataPanel.className = 'qr-data-panel';
+                            dataPanel.innerHTML = `
+                                <div class="qr-data-row">
+                                    <span class="qr-status-badge">KEY LOADED</span>
+                                    <span class="qr-data-value">--</span>
+                                </div>
+                            `;
+                            overlay.appendChild(dataPanel);
+                            
+                            container.appendChild(overlay);
+                        }
+                        
+                        // Let CSS handle overlay positioning (inset with padding)
+                        resolve();
+                    };
+                });
+            })
+            .then(() => {
+                // Now verify key extraction
+                const keyFormData = new FormData();
+                keyFormData.append('qr_image', file);
+                
+                return fetch('/extract-key-from-qr', {
+                    method: 'POST',
+                    body: keyFormData
+                });
+            })
+            .then(response => response.json())
+            .then(data => {
+                // Extraction complete - stop animation
+                container.classList.remove('scanning');
+                container.classList.add('scan-complete');
+                
+                // Update data panel (inside overlay)
+                const overlay = container.querySelector('.qr-scanner-overlay');
+                const sizeEl = overlay?.querySelector('.qr-data-value');
+                
+                if (data.success && sizeEl) {
+                    const sizeKB = (file.size / 1024).toFixed(1);
+                    sizeEl.textContent = sizeKB + ' KB';
+                }
+            })
+            .catch(err => {
+                console.log('QR crop/extract error:', err);
+                container.classList.remove('loading', 'scanning');
+                container.classList.add('error');
+                
+                // Update loader to show error
+                const loader = container.querySelector('.qr-loader');
+                if (loader) {
+                    loader.innerHTML = `
+                        <i class="bi bi-exclamation-triangle-fill"></i>
+                        <span>No QR code detected</span>
+                    `;
+                }
+            });
+        });
+    },
+    
+    // ========================================================================
+    // COLLAPSE CHEVRON ANIMATION
+    // ========================================================================
+    
+    initCollapseChevrons() {
+        document.querySelectorAll('[data-chevron]').forEach(collapse => {
+            const chevronId = collapse.dataset.chevron;
+            const chevron = document.getElementById(chevronId);
+            
+            if (!chevron) return;
+            
+            collapse.addEventListener('show.bs.collapse', () => {
+                chevron.classList.add('bi-chevron-up');
+                chevron.classList.remove('bi-chevron-down');
+            });
+            
+            collapse.addEventListener('hide.bs.collapse', () => {
+                chevron.classList.remove('bi-chevron-up');
+                chevron.classList.add('bi-chevron-down');
+            });
+        });
+    },
+    
+    // ========================================================================
+    // FORM LOADING STATE
+    // ========================================================================
+    
+    initFormLoading(formId, buttonId, loadingText = 'Processing...') {
+        const form = document.getElementById(formId);
+        const btn = document.getElementById(buttonId);
+        
+        if (!form || !btn) return;
+        
+        form.addEventListener('submit', () => {
+            btn.disabled = true;
+            btn.innerHTML = `<span class="spinner-border spinner-border-sm me-2"></span>${loadingText}`;
+        });
+    },
+    
+    // ========================================================================
+    // COPY TO CLIPBOARD
+    // ========================================================================
+    
+    copyToClipboard(text, iconEl, textEl) {
+        navigator.clipboard.writeText(text).then(() => {
+            const origIcon = iconEl?.className;
+            const origText = textEl?.textContent;
+            
+            if (iconEl) iconEl.className = 'bi bi-check';
+            if (textEl) textEl.textContent = 'Copied!';
+            
+            setTimeout(() => {
+                if (iconEl) iconEl.className = origIcon;
+                if (textEl) textEl.textContent = origText;
+            }, 2000);
+        });
+    },
+    
+    // ========================================================================
+    // MODE CARD HIGHLIGHTING
+    // ========================================================================
+    
+    initModeCards(config) {
+        // config: { radioName: 'embed_mode', cards: { 'lsb': { id: 'lsbCard', borderClass: 'border-primary' }, ... } }
+        const radios = document.querySelectorAll(`input[name="${config.radioName}"]`);
+        
+        const update = () => {
+            radios.forEach(radio => {
+                const cardConfig = config.cards[radio.value];
+                if (!cardConfig) return;
+                
+                const card = document.getElementById(cardConfig.id);
+                if (!card) return;
+                
+                card.classList.toggle(cardConfig.borderClass, radio.checked);
+                card.classList.toggle('border-2', radio.checked);
+            });
+        };
+        
+        radios.forEach(radio => radio.addEventListener('change', update));
+        update(); // Initial state
+    },
+    
+    // ========================================================================
+    // PASSPHRASE FONT SIZE AUTO-ADJUST
+    // ========================================================================
+    
+    initPassphraseFontResize(inputId = 'passphraseInput') {
+        const input = document.getElementById(inputId);
+        if (!input) return;
+        
+        const steps = [
+            { maxChars: 30, size: 1.1 },
+            { maxChars: 45, size: 1.0 },
+            { maxChars: 60, size: 0.95 },
+            { maxChars: Infinity, size: 0.9 }
+        ];
+        
+        const adjust = () => {
+            const len = input.value.length;
+            for (const step of steps) {
+                if (len <= step.maxChars) {
+                    input.style.fontSize = step.size + 'rem';
+                    break;
+                }
+            }
+        };
+        
+        input.addEventListener('input', adjust);
+        adjust();
+    },
+    
+    // ========================================================================
+    // INITIALIZATION HELPERS
+    // ========================================================================
+    
+    initEncodePage() {
+        this.initPasswordToggles();
+        this.initRsaMethodToggle();
+        this.initDropZones();
+        this.initClipboardPaste(['input[name="carrier"]', 'input[name="reference_photo"]']);
+        this.initQrCropAnimation('rsaQrInput');
+        this.initCollapseChevrons();
+        this.initFormLoading('encodeForm', 'encodeBtn', 'Encoding...');
+        this.initPassphraseFontResize();
+    },
+    
+    initDecodePage() {
+        this.initPasswordToggles();
+        this.initRsaMethodToggle();
+        this.initDropZones();
+        this.initClipboardPaste(['input[name="stego_image"]', 'input[name="reference_photo"]']);
+        this.initQrCropAnimation('rsaKeyQrInput');
+        this.initCollapseChevrons();
+        this.initFormLoading('decodeForm', 'decodeBtn', 'Decoding...');
+        this.initPassphraseFontResize();
+    },
+    
+    initGeneratePage() {
+        this.initPasswordToggles();
+        // Generate page has mostly unique functionality
+    }
+};
+
+// Auto-init based on page
+document.addEventListener('DOMContentLoaded', () => {
+    // Detect page and initialize
+    if (document.getElementById('encodeForm')) {
+        Stegasoo.initEncodePage();
+    } else if (document.getElementById('decodeForm')) {
+        Stegasoo.initDecodePage();
+    } else if (document.querySelector('[data-page="generate"]')) {
+        Stegasoo.initGeneratePage();
+    }
+});

frontends/web/static/style.css

@@ -26,6 +26,46 @@
     font-weight: 700 !important;
 }
 
+/* ----------------------------------------------------------------------------
+   Mode Selection Buttons (Compact)
+   ---------------------------------------------------------------------------- */
+.mode-btn {
+    background: var(--overlay-light);
+    border: 2px solid var(--border-light);
+    border-radius: 0.5rem;
+    padding: 0.75rem 1rem;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.mode-btn:hover {
+    background: rgba(255, 255, 255, 0.08);
+    border-color: rgba(255, 255, 255, 0.2);
+}
+
+.mode-btn.active {
+    border-color: var(--gradient-start);
+    background: rgba(102, 126, 234, 0.1);
+}
+
+.mode-btn .form-check-input {
+    margin-top: 0;
+    flex-shrink: 0;
+}
+
+.mode-info-icon {
+    cursor: help;
+    opacity: 0.6;
+    font-size: 0.85rem;
+}
+
+.mode-info-icon:hover {
+    opacity: 1;
+}
+
 /* ----------------------------------------------------------------------------
    Base Styles
    ---------------------------------------------------------------------------- */
@@ -407,3 +447,835 @@ footer {
     transform: translateY(-5px);
     box-shadow: 0 10px 40px rgba(102, 126, 234, 0.3);
 }
+
+/* ----------------------------------------------------------------------------
+   Reference Photo Scan Animation
+   ---------------------------------------------------------------------------- */
+.scan-container {
+    position: relative;
+    overflow: hidden;
+}
+
+.scan-container .drop-zone-preview {
+    position: relative;
+    z-index: 1;
+    margin-bottom: 45px;
+}
+
+.scan-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    pointer-events: none;
+    z-index: 2;
+    opacity: 0;
+    transition: opacity 0.3s ease;
+}
+
+.scan-container.scanning .scan-overlay {
+    opacity: 1;
+}
+
+/* Scan line that moves down */
+.scan-line {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 2px;
+    background: linear-gradient(90deg, 
+        transparent 0%, 
+        rgba(0, 255, 170, 0.4) 20%, 
+        rgba(0, 255, 170, 1) 50%, 
+        rgba(0, 255, 170, 0.4) 80%, 
+        transparent 100%
+    );
+    box-shadow: 0 0 10px rgba(0, 255, 170, 0.6), 0 0 20px rgba(0, 255, 170, 0.3);
+    opacity: 0;
+}
+
+.scan-container.scanning .scan-line {
+    opacity: 1;
+    animation: scanDown 0.7s ease-out forwards;
+}
+
+@keyframes scanDown {
+    0% { top: 0; opacity: 1; }
+    100% { top: 100%; opacity: 0; }
+}
+
+/* Grid overlay - subtle */
+.scan-grid {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-image: 
+        linear-gradient(rgba(0, 255, 170, 0.03) 1px, transparent 1px),
+        linear-gradient(90deg, rgba(0, 255, 170, 0.03) 1px, transparent 1px);
+    background-size: 8px 8px;
+    opacity: 0;
+}
+
+.scan-container.scanning .scan-grid {
+    opacity: 0.5;
+}
+
+/* Hash blocks container - masked to image, positioned over it */
+.hash-blocks {
+    position: absolute;
+    z-index: 3;
+    pointer-events: none;
+    overflow: hidden;
+    border-radius: 0.375rem;
+    display: grid;
+    gap: 2px;
+}
+
+.hash-block {
+    background: rgba(0, 255, 170, 0.6);
+    border-radius: 1px;
+    box-shadow: 0 0 4px rgba(0, 255, 170, 0.5);
+    opacity: 0;
+}
+
+/* Hash blocks fade in then out one by one */
+.scan-container.scanning .hash-block {
+    animation: hashBlockPulse 0.7s ease-in-out forwards;
+}
+
+@keyframes hashBlockPulse {
+    0% { 
+        opacity: 0;
+        transform: scale(0.8);
+    }
+    15% {
+        opacity: 0.7;
+        transform: scale(1);
+        background: rgba(0, 255, 170, 0.6);
+    }
+    40% {
+        opacity: 0.8;
+        background: rgba(0, 255, 170, 0.7);
+        box-shadow: 0 0 6px rgba(0, 255, 170, 0.6);
+    }
+    70% {
+        opacity: 0.6;
+        transform: scale(1);
+    }
+    100% { 
+        opacity: 0;
+        transform: scale(0.5);
+    }
+}
+
+/* Corner brackets - hidden during scan, shown after */
+.scan-corners {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    opacity: 0;
+    transition: opacity 0.3s ease;
+    pointer-events: none;
+}
+
+.scan-corner {
+    position: absolute;
+    width: 16px;
+    height: 16px;
+    border-color: rgba(0, 255, 170, 0.8);
+    border-style: solid;
+    border-width: 0;
+}
+
+.scan-corner.tl { top: 4px; left: 4px; border-top-width: 2px; border-left-width: 2px; }
+.scan-corner.tr { top: 4px; right: 4px; border-top-width: 2px; border-right-width: 2px; }
+.scan-corner.bl { bottom: 4px; left: 4px; border-bottom-width: 2px; border-left-width: 2px; }
+.scan-corner.br { bottom: 4px; right: 4px; border-bottom-width: 2px; border-right-width: 2px; }
+
+/* Scan complete state */
+.scan-container.scan-complete .scan-overlay {
+    opacity: 0;
+}
+
+.scan-container.scan-complete .scan-corners {
+    opacity: 1;
+}
+
+.scan-container.scan-complete .drop-zone-preview {
+    animation: scanPop 0.3s ease-out;
+}
+
+@keyframes scanPop {
+    0% { transform: scale(1); }
+    50% { transform: scale(1.02); }
+    100% { transform: scale(1); }
+}
+
+/* Data panel that appears after scan */
+.scan-data-panel {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    z-index: 3;
+    background: linear-gradient(to top, 
+        rgba(10, 15, 30, 0.98) 0%, 
+        rgba(12, 20, 40, 0.9) 50%, 
+        rgba(15, 25, 50, 0.6) 75%, 
+        transparent 100%);
+    padding: 35px 10px 8px 10px;
+    opacity: 0;
+    transform: translateY(4px);
+    transition: opacity 0.4s ease, transform 0.4s ease;
+    pointer-events: none;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+}
+
+.scan-container.scan-complete .scan-data-panel {
+    opacity: 1;
+    transform: translateY(0);
+}
+
+.scan-data-filename {
+    font-family: 'Courier New', monospace;
+    font-size: 0.7rem;
+    color: #fff;
+    text-align: center;
+    margin-bottom: 5px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.scan-data-filename i {
+    color: rgba(0, 255, 170, 1);
+    margin-right: 4px;
+}
+
+.scan-data-row {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-family: 'Courier New', monospace;
+    font-size: 0.6rem;
+    color: rgba(0, 255, 170, 0.9);
+    letter-spacing: 0.5px;
+    margin-bottom: 4px;
+}
+
+.scan-data-label {
+    color: rgba(255, 255, 255, 0.5);
+    text-transform: uppercase;
+    font-size: 0.55rem;
+}
+
+.scan-data-value {
+    color: rgba(0, 255, 170, 1);
+    font-weight: 600;
+}
+
+.scan-hash-preview {
+    font-family: 'Courier New', monospace;
+    font-size: 0.55rem;
+    color: rgba(0, 255, 170, 0.6);
+    letter-spacing: 0.5px;
+    text-align: center;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.scan-status-badge {
+    display: inline-flex;
+    align-items: center;
+    background: rgba(0, 255, 170, 0.15);
+    border: 1px solid rgba(0, 255, 170, 0.4);
+    border-radius: 3px;
+    padding: 2px 6px;
+    font-size: 0.5rem;
+    color: rgba(0, 255, 170, 1);
+    text-transform: uppercase;
+    letter-spacing: 0.3px;
+    line-height: 1;
+}
+
+/* ----------------------------------------------------------------------------
+   Carrier/Stego Embed Animation - Hidden data threads
+   ---------------------------------------------------------------------------- */
+.pixel-container {
+    position: relative;
+    overflow: hidden;
+}
+
+.pixel-container .drop-zone-preview {
+    position: relative;
+    z-index: 1;
+    margin-bottom: 45px;
+}
+
+/* Scan line effect - smooth single pass */
+.pixel-scan-line {
+    position: absolute;
+    left: 0;
+    right: 0;
+    height: 2px;
+    top: 0;
+    background: linear-gradient(90deg, 
+        transparent 0%, 
+        rgba(212, 225, 87, 0.4) 20%, 
+        rgba(212, 225, 87, 1) 50%, 
+        rgba(212, 225, 87, 0.4) 80%, 
+        transparent 100%
+    );
+    box-shadow: 0 0 10px rgba(212, 225, 87, 0.6), 0 0 20px rgba(212, 225, 87, 0.3);
+    opacity: 0;
+    z-index: 5;
+    pointer-events: none;
+}
+
+.pixel-container.loading .pixel-scan-line {
+    opacity: 1;
+    animation: embedScanDown 0.7s ease-out forwards;
+}
+
+@keyframes embedScanDown {
+    0% { top: 0; opacity: 1; }
+    100% { top: calc(100% - 45px); opacity: 0; }
+}
+
+/* Grid overlay - matches reference scan-grid exactly */
+.embed-grid {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 3;
+    pointer-events: none;
+    background-image: 
+        linear-gradient(rgba(0, 255, 170, 0.03) 1px, transparent 1px),
+        linear-gradient(90deg, rgba(0, 255, 170, 0.03) 1px, transparent 1px);
+    background-size: 8px 8px;
+    opacity: 0;
+}
+
+.pixel-container.loading .embed-grid {
+    opacity: 0.5;
+}
+
+/* Tron-style circuit traces container - masked to image */
+.embed-traces {
+    position: absolute;
+    z-index: 4;
+    pointer-events: none;
+    overflow: hidden;
+    border-radius: 0.375rem;
+}
+
+.embed-trace {
+    position: absolute;
+    border-radius: 1px;
+    opacity: 0;
+}
+
+/* Color variants - 60% opacity */
+.embed-trace.color-yellow {
+    background: rgba(212, 225, 87, 0.6);
+    box-shadow: 0 0 6px rgba(212, 225, 87, 0.5), 0 0 12px rgba(212, 225, 87, 0.3);
+}
+
+.embed-trace.color-cyan {
+    background: rgba(0, 255, 170, 0.6);
+    box-shadow: 0 0 6px rgba(0, 255, 170, 0.5), 0 0 12px rgba(0, 255, 170, 0.3);
+}
+
+.embed-trace.color-purple {
+    background: rgba(167, 139, 250, 0.6);
+    box-shadow: 0 0 6px rgba(167, 139, 250, 0.5), 0 0 12px rgba(167, 139, 250, 0.3);
+}
+
+.embed-trace.color-blue {
+    background: rgba(102, 126, 234, 0.6);
+    box-shadow: 0 0 6px rgba(102, 126, 234, 0.5), 0 0 12px rgba(102, 126, 234, 0.3);
+}
+
+/* Vertical segments shrink from top */
+.embed-trace.v {
+    width: 2px;
+    transform-origin: top center;
+}
+
+/* Horizontal segments shrink from left */
+.embed-trace.h {
+    height: 2px;
+    transform-origin: left center;
+}
+
+/* Animation - appear, glow, shrink away completely */
+.pixel-container.loading .embed-trace.h {
+    animation: traceHShrink 0.65s ease-in-out forwards;
+}
+
+.pixel-container.loading .embed-trace.v {
+    animation: traceVShrink 0.65s ease-in-out forwards;
+}
+
+@keyframes traceHShrink {
+    0% { 
+        transform: scaleX(0);
+        opacity: 0;
+    }
+    15% {
+        transform: scaleX(1);
+        opacity: 1;
+    }
+    40% { 
+        transform: scaleX(1);
+        opacity: 1;
+    }
+    100% { 
+        transform: scaleX(0);
+        opacity: 0;
+    }
+}
+
+@keyframes traceVShrink {
+    0% { 
+        transform: scaleY(0);
+        opacity: 0;
+    }
+    15% {
+        transform: scaleY(1);
+        opacity: 1;
+    }
+    40% { 
+        transform: scaleY(1);
+        opacity: 1;
+    }
+    100% { 
+        transform: scaleY(0);
+        opacity: 0;
+    }
+}
+
+/* Ensure traces are gone after animation */
+.pixel-container.load-complete .embed-traces {
+    display: none;
+}
+
+/* Corner brackets for pixel container - purple/blue theme */
+.pixel-corners {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    opacity: 0;
+    transition: opacity 0.3s ease;
+    pointer-events: none;
+}
+
+.pixel-corner {
+    position: absolute;
+    width: 16px;
+    height: 16px;
+    border-color: rgba(212, 225, 87, 0.8);
+    border-style: solid;
+    border-width: 0;
+}
+
+.pixel-corner.tl { top: 4px; left: 4px; border-top-width: 2px; border-left-width: 2px; }
+.pixel-corner.tr { top: 4px; right: 4px; border-top-width: 2px; border-right-width: 2px; }
+.pixel-corner.bl { bottom: 4px; left: 4px; border-bottom-width: 2px; border-left-width: 2px; }
+.pixel-corner.br { bottom: 4px; right: 4px; border-bottom-width: 2px; border-right-width: 2px; }
+
+.pixel-container.load-complete .pixel-corners {
+    opacity: 1;
+}
+
+/* Data panel for pixel container - purple/blue theme */
+.pixel-data-panel {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    z-index: 3;
+    background: linear-gradient(to top, 
+        rgba(10, 15, 30, 0.98) 0%, 
+        rgba(12, 20, 40, 0.9) 50%, 
+        rgba(15, 25, 50, 0.6) 75%, 
+        transparent 100%);
+    padding: 35px 10px 8px 10px;
+    opacity: 0;
+    transform: translateY(4px);
+    transition: opacity 0.4s ease, transform 0.4s ease;
+    pointer-events: none;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+}
+
+.pixel-container.load-complete .pixel-data-panel {
+    opacity: 1;
+    transform: translateY(0);
+}
+
+.pixel-data-filename {
+    font-family: 'Courier New', monospace;
+    font-size: 0.7rem;
+    color: #fff;
+    text-align: center;
+    margin-bottom: 5px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.pixel-data-filename i {
+    color: #d4e157;
+    margin-right: 4px;
+}
+
+.pixel-data-row {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-family: 'Courier New', monospace;
+    font-size: 0.6rem;
+    letter-spacing: 0.5px;
+    margin-bottom: 4px;
+}
+
+.pixel-data-value {
+    color: #d4e157;
+    font-weight: 600;
+}
+
+.pixel-status-badge {
+    display: inline-flex;
+    align-items: center;
+    background: rgba(212, 225, 87, 0.15);
+    border: 1px solid rgba(212, 225, 87, 0.4);
+    border-radius: 3px;
+    padding: 2px 6px;
+    font-size: 0.55rem;
+    color: #d4e157;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    line-height: 1;
+}
+
+.pixel-dimensions {
+    font-family: 'Courier New', monospace;
+    font-size: 0.55rem;
+    color: rgba(212, 225, 87, 0.7);
+    letter-spacing: 0.5px;
+    text-align: center;
+}
+
+/* ----------------------------------------------------------------------------
+   QR Code Section - Square Inner Panel Layout
+   ---------------------------------------------------------------------------- */
+#rsaQrSection {
+    display: flex;
+    justify-content: center;
+}
+
+#rsaQrSection .drop-zone {
+    width: 200px;
+    height: 200px;
+    aspect-ratio: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 1rem;
+    transition: all 0.3s ease;
+}
+
+/* Expand drop zone when showing scanned QR result */
+#rsaQrSection .drop-zone:has(.qr-scan-container:not(.d-none)) {
+    width: auto;
+    min-width: 200px;
+    max-width: 280px;
+    height: auto;
+    min-height: 200px;
+    aspect-ratio: auto;
+}
+
+#rsaQrSection .drop-zone-label {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+}
+
+/* ----------------------------------------------------------------------------
+   QR Code Section Scan Animation - Simplified: Loading → Scan → Complete
+   ---------------------------------------------------------------------------- */
+.qr-scan-container {
+    position: relative;
+    overflow: visible;
+    border-radius: 8px;
+    background: rgba(0, 0, 0, 0.3);
+    min-height: 160px;
+    min-width: 160px;
+    padding: 10px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.qr-scan-container img {
+    display: block;
+    margin: 0 auto;
+}
+
+/* Hide original image - we don't use it anymore */
+.qr-scan-container .qr-original {
+    display: none;
+}
+
+/* Cropped image - hidden until loaded, scales UP to fill container */
+.qr-scan-container .qr-cropped {
+    max-height: 180px;
+    max-width: 180px;
+    min-width: 140px;
+    min-height: 140px;
+    width: auto;
+    height: auto;
+    object-fit: contain;
+    display: none;
+    border-radius: 6px;
+}
+
+/* ===========================================
+   PHASE 1: Loading - spinner while cropping
+   =========================================== */
+.qr-loader {
+    display: none;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 12px;
+    color: rgba(0, 255, 170, 0.9);
+    padding: 30px 20px;
+    width: 100%;
+}
+
+.qr-loader i {
+    font-size: 2.5rem;
+    animation: qrLoaderPulse 1.5s ease-in-out infinite;
+}
+
+.qr-loader span {
+    font-family: 'Courier New', monospace;
+    font-size: 0.75rem;
+    letter-spacing: 0.5px;
+    opacity: 0.8;
+}
+
+@keyframes qrLoaderPulse {
+    0%, 100% { opacity: 0.5; transform: scale(0.95); }
+    50% { opacity: 1; transform: scale(1.05); }
+}
+
+.qr-scan-container.loading .qr-loader {
+    display: flex;
+}
+
+/* Error state */
+.qr-scan-container.error .qr-loader {
+    display: flex;
+    color: #fbbf24;
+}
+
+.qr-scan-container.error .qr-loader i {
+    animation: none;
+}
+
+/* ===========================================
+   PHASE 2: Scanning - cropped QR with brackets
+   =========================================== */
+.qr-scan-container.scanning .qr-cropped,
+.qr-scan-container.scan-complete .qr-cropped {
+    display: block;
+}
+
+/* Scanner overlay - covers the container, padded to match image area */
+.qr-scanner-overlay {
+    position: absolute;
+    inset: 10px;
+    pointer-events: none;
+    z-index: 5;
+    border-radius: 6px;
+    overflow: visible;
+}
+
+/* Four corner finder brackets */
+.qr-finder-bracket {
+    position: absolute;
+    width: 18px;
+    height: 18px;
+    border-color: rgba(0, 255, 170, 0.9);
+    border-style: solid;
+    border-width: 0;
+    opacity: 0;
+    transition: all 0.3s ease;
+}
+
+.qr-finder-bracket.tl { top: 0; left: 0; border-top-width: 3px; border-left-width: 3px; }
+.qr-finder-bracket.tr { top: 0; right: 0; border-top-width: 3px; border-right-width: 3px; }
+.qr-finder-bracket.bl { bottom: 0; left: 0; border-bottom-width: 3px; border-left-width: 3px; }
+.qr-finder-bracket.br { bottom: 0; right: 0; border-bottom-width: 3px; border-right-width: 3px; }
+
+/* Scanning state - brackets pulse */
+.qr-scan-container.scanning .qr-finder-bracket {
+    opacity: 1;
+    box-shadow: 0 0 8px rgba(0, 255, 170, 0.6);
+    animation: bracketPulse 1s ease-in-out infinite;
+}
+
+.qr-scan-container.scanning .qr-finder-bracket.tl { animation-delay: 0s; }
+.qr-scan-container.scanning .qr-finder-bracket.tr { animation-delay: 0.15s; }
+.qr-scan-container.scanning .qr-finder-bracket.br { animation-delay: 0.3s; }
+.qr-scan-container.scanning .qr-finder-bracket.bl { animation-delay: 0.45s; }
+
+@keyframes bracketPulse {
+    0%, 100% { opacity: 0.6; border-color: rgba(0, 255, 170, 0.6); box-shadow: 0 0 4px rgba(0, 255, 170, 0.4); }
+    50% { opacity: 1; border-color: rgba(0, 255, 170, 1); box-shadow: 0 0 12px rgba(0, 255, 170, 0.8); }
+}
+
+/* Scan line during scanning phase */
+.qr-scan-container.scanning .qr-scanner-overlay::before {
+    content: '';
+    position: absolute;
+    left: 2px;
+    right: 2px;
+    height: 2px;
+    top: 2px;
+    z-index: 6;
+    background: linear-gradient(90deg, 
+        transparent 0%, 
+        rgba(0, 255, 170, 0.5) 20%, 
+        rgba(0, 255, 170, 1) 50%, 
+        rgba(0, 255, 170, 0.5) 80%, 
+        transparent 100%
+    );
+    box-shadow: 0 0 8px rgba(0, 255, 170, 0.8);
+    animation: qrScanLine 1s ease-in-out infinite;
+}
+
+@keyframes qrScanLine {
+    0% { top: 2px; opacity: 0; }
+    10% { opacity: 1; }
+    90% { opacity: 1; }
+    100% { top: calc(100% - 2px); opacity: 0; }
+}
+
+/* Grid overlay during scanning */
+.qr-scan-container.scanning .qr-scanner-overlay::after {
+    content: '';
+    position: absolute;
+    top: 0; left: 0; right: 0; bottom: 0;
+    background-image: 
+        linear-gradient(rgba(0, 255, 170, 0.03) 1px, transparent 1px),
+        linear-gradient(90deg, rgba(0, 255, 170, 0.03) 1px, transparent 1px);
+    background-size: 6px 6px;
+    opacity: 0.5;
+    z-index: 4;
+}
+
+/* ===========================================
+   PHASE 3: Complete - brackets lock solid
+   =========================================== */
+.qr-scan-container.scan-complete .qr-finder-bracket {
+    opacity: 1;
+    border-color: rgba(0, 255, 170, 1);
+    box-shadow: 0 0 8px rgba(0, 255, 170, 0.6);
+    animation: none;
+}
+
+/* Data panel at bottom of overlay (relative to image) */
+.qr-scanner-overlay .qr-data-panel {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    z-index: 10;
+    background: linear-gradient(to top, 
+        rgba(10, 15, 30, 0.95) 0%, 
+        rgba(10, 15, 30, 0.6) 80%, 
+        transparent 100%);
+    padding: 4px 6px 3px 6px;
+    opacity: 0;
+    transition: opacity 0.3s ease;
+    border-radius: 0 0 6px 6px;
+}
+
+.qr-scan-container.scan-complete .qr-data-panel {
+    opacity: 1;
+}
+
+/* Hide the static data panel in HTML */
+.qr-scan-container > .qr-data-panel {
+    display: none;
+}
+
+/* Hide elements we don't use */
+.qr-scan-container .crop-badge {
+    display: none;
+}
+
+/* QR Data Panel text styles */
+.qr-data-filename {
+    font-family: 'Courier New', monospace;
+    font-size: 0.6rem;
+    color: #fff;
+    text-align: center;
+    margin-bottom: 2px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.qr-data-filename i {
+    color: rgba(0, 255, 170, 1);
+    margin-right: 3px;
+}
+
+.qr-data-row {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-family: 'Courier New', monospace;
+    font-size: 0.5rem;
+    white-space: nowrap;
+}
+
+.qr-status-badge {
+    display: inline-flex;
+    align-items: center;
+    background: rgba(0, 255, 170, 0.15);
+    border: 1px solid rgba(0, 255, 170, 0.4);
+    border-radius: 2px;
+    padding: 1px 4px;
+    font-size: 0.45rem;
+    color: rgba(0, 255, 170, 1);
+    text-transform: uppercase;
+    letter-spacing: 0.3px;
+}
+
+.qr-data-value {
+    color: rgba(0, 255, 170, 1);
+    font-weight: 600;
+    font-size: 0.5rem;
+}

frontends/web/templates/decode.html

@@ -59,7 +59,8 @@
 
 .qr-crop-container img {
     display: block;
-    max-height: 120px;
+    max-height: 180px;
+    max-width: 180px;
     width: auto;
     margin: 0 auto;
     transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
@@ -75,16 +76,19 @@
     left: 50%;
     transform: translate(-50%, -50%) scale(0.3);
     opacity: 0;
-    max-height: 100px;
+    max-height: 160px;
+    min-width: 140px;
+    min-height: 140px;
+    object-fit: contain;
 }
 
-.qr-crop-container.animating .qr-original {
+.qr-crop-container.scan-complete .qr-original {
     opacity: 0;
     transform: scale(1.1);
     filter: blur(4px);
 }
 
-.qr-crop-container.animating .qr-cropped {
+.qr-crop-container.scan-complete .qr-cropped {
     opacity: 1;
     transform: translate(-50%, -50%) scale(1);
 }
@@ -98,7 +102,7 @@
     transition: opacity 0.3s ease 0.4s;
 }
 
-.qr-crop-container.animating .crop-badge {
+.qr-crop-container.scan-complete .crop-badge {
     opacity: 1;
 }
 </style>
@@ -164,13 +168,37 @@
                             <label class="form-label">
                                 <i class="bi bi-image me-1"></i> Reference Photo
                             </label>
-                            <div class="drop-zone">
+                            <div class="drop-zone scan-container" id="refDropZone">
                                 <input type="file" name="reference_photo" accept="image/*" required>
                                 <div class="drop-zone-label">
                                     <i class="bi bi-cloud-arrow-up fs-3 d-block mb-2 text-muted"></i>
                                     <span class="text-muted">Drop image or click to browse</span>
                                 </div>
-                                <img class="drop-zone-preview d-none">
+                                <img class="drop-zone-preview d-none" id="refPreview">
+                                <!-- Scan overlay elements -->
+                                <div class="scan-overlay">
+                                    <div class="scan-grid"></div>
+                                    <div class="scan-line"></div>
+                                </div>
+                                <!-- Corner brackets (shown after scan) -->
+                                <div class="scan-corners">
+                                    <div class="scan-corner tl"></div>
+                                    <div class="scan-corner tr"></div>
+                                    <div class="scan-corner bl"></div>
+                                    <div class="scan-corner br"></div>
+                                </div>
+                                <!-- Data panel (shown after scan) -->
+                                <div class="scan-data-panel">
+                                    <div class="scan-data-filename">
+                                        <i class="bi bi-check-circle-fill"></i>
+                                        <span id="refFileName">image.jpg</span>
+                                    </div>
+                                    <div class="scan-data-row">
+                                        <span class="scan-status-badge">Hash Acquired</span>
+                                        <span class="scan-data-value" id="refFileSize">--</span>
+                                    </div>
+                                    <div class="scan-hash-preview" id="refHashPreview">SHA256: ················</div>
+                                </div>
                             </div>
                             <div class="form-text">
                                 The same reference photo used for encoding
@@ -181,13 +209,36 @@
                             <label class="form-label">
                                 <i class="bi bi-file-earmark-image me-1"></i> Stego Image
                             </label>
-                            <div class="drop-zone" id="stegoDropZone">
+                            <div class="drop-zone pixel-container" id="stegoDropZone">
                                 <input type="file" name="stego_image" accept="image/*" required>
                                 <div class="drop-zone-label">
                                     <i class="bi bi-cloud-arrow-up fs-3 d-block mb-2 text-muted"></i>
                                     <span class="text-muted">Drop image or click to browse</span>
                                 </div>
-                                <img class="drop-zone-preview d-none">
+                                <img class="drop-zone-preview d-none" id="stegoPreview">
+                                <!-- Pixel blocks overlay - populated by JS -->
+                                <div class="pixel-blocks"></div>
+                                <!-- Pixel scan line -->
+                                <div class="pixel-scan-line"></div>
+                                <!-- Corner brackets -->
+                                <div class="pixel-corners">
+                                    <div class="pixel-corner tl"></div>
+                                    <div class="pixel-corner tr"></div>
+                                    <div class="pixel-corner bl"></div>
+                                    <div class="pixel-corner br"></div>
+                                </div>
+                                <!-- Data panel -->
+                                <div class="pixel-data-panel">
+                                    <div class="pixel-data-filename">
+                                        <i class="bi bi-check-circle-fill"></i>
+                                        <span id="stegoFileName">image.png</span>
+                                    </div>
+                                    <div class="pixel-data-row">
+                                        <span class="pixel-status-badge">Stego Loaded</span>
+                                        <span class="pixel-data-value" id="stegoFileSize">--</span>
+                                    </div>
+                                    <div class="pixel-dimensions" id="stegoDims">-- × -- px</div>
+                                </div>
                             </div>
                             <div class="form-text">
                                 The image containing the hidden message/file
@@ -218,7 +269,7 @@
                             <label class="form-label"><i class="bi bi-123 me-1"></i> PIN</label>
                             <div class="input-group pin-input-container">
                                 <input type="password" name="pin" class="form-control" id="pinInput" placeholder="••••••" maxlength="9" style="max-width: 180px;">
-                                <button class="btn btn-outline-secondary" type="button" id="togglePin">
+                                <button class="btn btn-outline-secondary" type="button" data-toggle-password="pinInput">
                                     <i class="bi bi-eye"></i>
                                 </button>
                             </div>
@@ -257,10 +308,20 @@
                                         <span class="text-muted small">Drop QR image or click to browse</span>
                                     </div>
                                     <!-- Crop animation container -->
-                                    <div class="qr-crop-container d-none" id="qrCropContainer">
+                                    <div class="qr-scan-container qr-crop-container d-none" id="qrCropContainer">
                                         <img class="qr-original" id="qrOriginal" alt="Original">
                                         <img class="qr-cropped" id="qrCropped" alt="Cropped QR">
-                                        <span class="crop-badge badge bg-success"><i class="bi bi-crop me-1"></i>Detected</span>
+                                        <!-- Data panel -->
+                                        <div class="qr-data-panel">
+                                            <div class="qr-data-filename">
+                                                <i class="bi bi-check-circle-fill"></i>
+                                                <span>RSA Key loaded</span>
+                                            </div>
+                                            <div class="qr-data-row">
+                                                <span class="qr-status-badge">RSA Key</span>
+                                                <span class="qr-data-value">--</span>
+                                            </div>
+                                        </div>
                                     </div>
                                 </div>
                             </div>
@@ -268,7 +329,7 @@
                             <!-- Key Password (always visible) -->
                             <div class="input-group input-group-sm mt-2">
                                 <input type="password" name="rsa_password" class="form-control" id="rsaPasswordInput" placeholder="Key password (if encrypted)">
-                                <button class="btn btn-outline-secondary" type="button" id="toggleRsaPassword">
+                                <button class="btn btn-outline-secondary" type="button" data-toggle-password="rsaPasswordInput">
                                     <i class="bi bi-eye"></i>
                                 </button>
                             </div>
@@ -398,266 +459,55 @@
 {% endblock %}
 
 {% block scripts %}
+<script src="{{ url_for('static', filename='js/stegasoo.js') }}"></script>
 <script>
-// Form submit loading state
+// ============================================================================
+// DECODE PAGE - Initialize shared components
+// ============================================================================
+
+Stegasoo.initPasswordToggles();
+Stegasoo.initRsaMethodToggle();
+Stegasoo.initDropZones();
+Stegasoo.initClipboardPaste(['input[name="stego_image"]', 'input[name="reference_photo"]']);
+Stegasoo.initQrCropAnimation('rsaKeyQrInput');
+Stegasoo.initPassphraseFontResize();
+
+// ============================================================================
+// DECODE PAGE - Mode card highlighting
+// ============================================================================
+
+Stegasoo.initModeCards({
+    radioName: 'embed_mode',
+    cards: {
+        'auto': { id: 'autoModeCard', borderClass: 'border-success' },
+        'lsb': { id: 'lsbModeCardDec', borderClass: 'border-primary' },
+        'dct': { id: 'dctModeCardDec', borderClass: 'border-info' }
+    }
+});
+
+// ============================================================================
+// DECODE PAGE - Advanced options chevron
+// ============================================================================
+
+const advancedOptionsDec = document.getElementById('advancedOptionsDec');
+advancedOptionsDec?.addEventListener('show.bs.collapse', () => {
+    document.getElementById('advancedChevronDec')?.classList.replace('bi-chevron-down', 'bi-chevron-up');
+});
+advancedOptionsDec?.addEventListener('hide.bs.collapse', () => {
+    document.getElementById('advancedChevronDec')?.classList.replace('bi-chevron-up', 'bi-chevron-down');
+});
+
+// ============================================================================
+// DECODE PAGE - Form submission with mode-specific loading text
+// ============================================================================
+
 document.getElementById('decodeForm')?.addEventListener('submit', function() {
     const btn = document.getElementById('decodeBtn');
     const selectedMode = document.querySelector('input[name="embed_mode"]:checked')?.value || 'auto';
-    btn.innerHTML = `<span class="spinner-border spinner-border-sm me-2"></span>Decoding (${selectedMode.toUpperCase()})...`;
-    btn.disabled = true;
-});
-
-// PIN Toggle
-document.getElementById('togglePin')?.addEventListener('click', function() {
-    const input = document.getElementById('pinInput');
-    const icon = this.querySelector('i');
-    if (input.type === 'password') {
-        input.type = 'text';
-        icon.classList.replace('bi-eye', 'bi-eye-slash');
-    } else {
-        input.type = 'password';
-        icon.classList.replace('bi-eye-slash', 'bi-eye');
+    if (btn) {
+        btn.disabled = true;
+        btn.innerHTML = `<span class="spinner-border spinner-border-sm me-2"></span>Decoding (${selectedMode.toUpperCase()})...`;
     }
 });
-
-// RSA Password Toggle
-document.getElementById('toggleRsaPassword')?.addEventListener('click', function() {
-    const input = document.getElementById('rsaPasswordInput');
-    const icon = this.querySelector('i');
-    if (input.type === 'password') {
-        input.type = 'text';
-        icon.classList.replace('bi-eye', 'bi-eye-slash');
-    } else {
-        input.type = 'password';
-        icon.classList.replace('bi-eye-slash', 'bi-eye');
-    }
-});
-
-// RSA Input Method Toggle (File vs QR)
-const rsaMethodFile = document.getElementById('rsaMethodFile');
-const rsaMethodQr = document.getElementById('rsaMethodQr');
-const rsaFileSection = document.getElementById('rsaFileSection');
-const rsaQrSection = document.getElementById('rsaQrSection');
-
-function updateRsaInputMethod() {
-    if (!rsaMethodFile || !rsaFileSection || !rsaQrSection) return;
-    const isFile = rsaMethodFile.checked;
-    rsaFileSection.classList.toggle('d-none', !isFile);
-    rsaQrSection.classList.toggle('d-none', isFile);
-}
-
-rsaMethodFile?.addEventListener('change', updateRsaInputMethod);
-rsaMethodQr?.addEventListener('change', updateRsaInputMethod);
-
-// Mode card highlighting
-const autoModeCard = document.getElementById('autoModeCard');
-const lsbModeCardDec = document.getElementById('lsbModeCardDec');
-const dctModeCardDec = document.getElementById('dctModeCardDec');
-const modeAuto = document.getElementById('modeAuto');
-const modeLsbDec = document.getElementById('modeLsbDec');
-const modeDctDec = document.getElementById('modeDctDec');
-
-function updateModeCardHighlightDec() {
-    autoModeCard?.classList.toggle('border-success', modeAuto?.checked);
-    autoModeCard?.classList.toggle('border-2', modeAuto?.checked);
-    lsbModeCardDec?.classList.toggle('border-primary', modeLsbDec?.checked);
-    lsbModeCardDec?.classList.toggle('border-2', modeLsbDec?.checked);
-    dctModeCardDec?.classList.toggle('border-info', modeDctDec?.checked);
-    dctModeCardDec?.classList.toggle('border-2', modeDctDec?.checked);
-}
-
-modeAuto?.addEventListener('change', updateModeCardHighlightDec);
-modeLsbDec?.addEventListener('change', updateModeCardHighlightDec);
-modeDctDec?.addEventListener('change', updateModeCardHighlightDec);
-updateModeCardHighlightDec(); // Initial state
-
-// Advanced options chevron rotation
-document.getElementById('advancedOptionsDec')?.addEventListener('show.bs.collapse', function() {
-    document.getElementById('advancedChevronDec').classList.add('bi-chevron-up');
-    document.getElementById('advancedChevronDec').classList.remove('bi-chevron-down');
-});
-document.getElementById('advancedOptionsDec')?.addEventListener('hide.bs.collapse', function() {
-    document.getElementById('advancedChevronDec').classList.remove('bi-chevron-up');
-    document.getElementById('advancedChevronDec').classList.add('bi-chevron-down');
-});
-
-// Paste from Clipboard
-document.addEventListener('paste', function(e) {
-    if (!document.getElementById('decodeForm')) return;
-
-    const items = e.clipboardData.items;
-    for (let i = 0; i < items.length; i++) {
-        if (items[i].type.indexOf("image") !== -1) {
-            const blob = items[i].getAsFile();
-            
-            const stegoInput = document.querySelector('input[name="stego_image"]');
-            const refInput = document.querySelector('input[name="reference_photo"]');
-            
-            const targetInput = (!stegoInput.files.length) ? stegoInput : refInput;
-            
-            const container = new DataTransfer();
-            container.items.add(blob);
-            targetInput.files = container.files;
-            
-            targetInput.dispatchEvent(new Event('change'));
-            break;
-        }
-    }
-});
-
-// Drag & drop with preview
-document.querySelectorAll('.drop-zone').forEach(zone => {
-    const input = zone.querySelector('input[type="file"]');
-    const label = zone.querySelector('.drop-zone-label');
-    const preview = zone.querySelector('.drop-zone-preview');
-    
-    ['dragenter', 'dragover'].forEach(evt => {
-        zone.addEventListener(evt, e => {
-            e.preventDefault();
-            zone.classList.add('drag-over');
-        });
-    });
-    
-    ['dragleave', 'drop'].forEach(evt => {
-        zone.addEventListener(evt, e => {
-            e.preventDefault();
-            zone.classList.remove('drag-over');
-        });
-    });
-    
-    zone.addEventListener('drop', e => {
-        if (e.dataTransfer.files.length) {
-            input.files = e.dataTransfer.files;
-            const file = e.dataTransfer.files[0];
-            showPreview(file);
-        }
-    });
-    
-    input.addEventListener('change', function() {
-        if (this.files && this.files[0]) {
-            showPreview(this.files[0]);
-        }
-    });
-    
-    function showPreview(file) {
-        if (!file.type.startsWith('image/')) return;
-        
-        const reader = new FileReader();
-        reader.onload = e => {
-            if (preview) {
-                preview.src = e.target.result;
-                preview.classList.remove('d-none');
-            }
-            label.innerHTML = '<i class="bi bi-check-circle text-success me-1"></i>' + file.name;
-        };
-        reader.readAsDataURL(file);
-    }
-});
-
-// QR Code RSA Key scanning with crop animation
-const rsaKeyQrInput = document.getElementById('rsaKeyQrInput');
-const qrCropContainer = document.getElementById('qrCropContainer');
-const qrOriginal = document.getElementById('qrOriginal');
-const qrCropped = document.getElementById('qrCropped');
-
-if (rsaKeyQrInput) {
-    rsaKeyQrInput.addEventListener('change', function() {
-        if (this.files && this.files[0]) {
-            const file = this.files[0];
-            
-            if (!file.type.startsWith('image/')) return;
-            
-            // Reset animation state
-            qrCropContainer.classList.remove('animating');
-            qrCropContainer.classList.add('d-none');
-            
-            // Show original image first
-            const reader = new FileReader();
-            reader.onload = e => {
-                qrOriginal.src = e.target.result;
-                qrCropContainer.classList.remove('d-none');
-                
-                // Hide the label
-                document.querySelector('#qrDropZone .drop-zone-label').classList.add('d-none');
-                
-                // Now fetch cropped version and animate
-                const formData = new FormData();
-                formData.append('image', file);
-                
-                fetch('/qr/crop', {
-                    method: 'POST',
-                    body: formData
-                })
-                .then(response => {
-                    if (!response.ok) {
-                        throw new Error('No QR code detected');
-                    }
-                    return response.blob();
-                })
-                .then(blob => {
-                    // Load cropped image
-                    const croppedUrl = URL.createObjectURL(blob);
-                    qrCropped.src = croppedUrl;
-                    
-                    // Wait a moment to show original, then animate
-                    setTimeout(() => {
-                        qrCropContainer.classList.add('animating');
-                    }, 400);
-                    
-                    // Also verify key extraction works
-                    const keyFormData = new FormData();
-                    keyFormData.append('qr_image', file);
-                    
-                    return fetch('/extract-key-from-qr', {
-                        method: 'POST',
-                        body: keyFormData
-                    });
-                })
-                .then(response => response.json())
-                .then(data => {
-                    if (data.success) {
-                        document.querySelector('#qrDropZone .drop-zone-label').innerHTML = 
-                            '<i class="bi bi-check-circle text-success me-1"></i>RSA Key loaded';
-                        document.querySelector('#qrDropZone .drop-zone-label').classList.remove('d-none');
-                    }
-                })
-                .catch(err => {
-                    // Crop failed - just show original with error
-                    console.log('QR crop/extract error:', err);
-                    document.querySelector('#qrDropZone .drop-zone-label').innerHTML = 
-                        '<i class="bi bi-exclamation-triangle text-warning me-1"></i>No QR detected';
-                    document.querySelector('#qrDropZone .drop-zone-label').classList.remove('d-none');
-                });
-            };
-            reader.readAsDataURL(file);
-        }
-    });
-}
-
-// Auto-resize passphrase input font to fit long passphrases
-const passphraseInput = document.getElementById('passphraseInput');
-if (passphraseInput) {
-    // Stepped font sizes (characters -> rem)
-    const fontSizeSteps = [
-        { maxChars: 30, size: 1.1 },
-        { maxChars: 45, size: 1.0 },
-        { maxChars: 60, size: 0.95 },
-        { maxChars: Infinity, size: 0.9 }
-    ];
-    
-    function adjustPassphraseFontSize() {
-        const len = passphraseInput.value.length;
-        
-        for (const step of fontSizeSteps) {
-            if (len <= step.maxChars) {
-                passphraseInput.style.fontSize = step.size + 'rem';
-                break;
-            }
-        }
-    }
-    
-    passphraseInput.addEventListener('input', adjustPassphraseFontSize);
-    adjustPassphraseFontSize(); // Initial call in case of pre-filled value
-}
 </script>
 {% endblock %}

frontends/web/templates/encode.html

@@ -63,7 +63,8 @@
 
 .qr-crop-container img {
     display: block;
-    max-height: 120px;
+    max-height: 180px;
+    max-width: 180px;
     width: auto;
     margin: 0 auto;
     transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
@@ -79,16 +80,19 @@
     left: 50%;
     transform: translate(-50%, -50%) scale(0.3);
     opacity: 0;
-    max-height: 100px;
+    max-height: 160px;
+    min-width: 140px;
+    min-height: 140px;
+    object-fit: contain;
 }
 
-.qr-crop-container.animating .qr-original {
+.qr-crop-container.scan-complete .qr-original {
     opacity: 0;
     transform: scale(1.1);
     filter: blur(4px);
 }
 
-.qr-crop-container.animating .qr-cropped {
+.qr-crop-container.scan-complete .qr-cropped {
     opacity: 1;
     transform: translate(-50%, -50%) scale(1);
 }
@@ -102,7 +106,7 @@
     transition: opacity 0.3s ease 0.4s;
 }
 
-.qr-crop-container.animating .crop-badge {
+.qr-crop-container.scan-complete .crop-badge {
     opacity: 1;
 }
 </style>
@@ -117,78 +121,42 @@
                 <form method="POST" enctype="multipart/form-data" id="encodeForm">
                     <!-- Removed client_date hidden field -->
                     
-                    <!-- Embedding Mode Selection -->
-                    <div class="mb-4">
-                        <label class="form-label">
-                            <i class="bi bi-cpu me-1"></i> Embedding Mode
-                        </label>
-                        
-                        <div class="row g-2">
-                            <!-- LSB Mode Card -->
-                            <div class="col-md-6">
-                                <label class="card p-3 h-100 border-primary border-2 cursor-pointer" id="lsbModeCard" for="modeLsb" style="cursor: pointer;">
-                                    <input class="form-check-input position-absolute" type="radio" name="embed_mode" id="modeLsb" value="lsb" checked style="top: 1rem; right: 1rem;">
-                                    <div class="d-flex align-items-center mb-2">
-                                        <i class="bi bi-grid-3x3-gap text-primary fs-4 me-2"></i>
-                                        <strong>LSB Mode</strong>
-                                        <span class="badge bg-success ms-auto me-4">Default</span>
-                                    </div>
-                                    <ul class="small text-muted mb-0 ps-3">
-                                        <li>Full color PNG output</li>
-                                        <li>Higher capacity (~375 KB/MP)</li>
-                                        <li>Best for email & file transfer</li>
-                                    </ul>
-                                </label>
-                            </div>
-                            
-                            <!-- DCT Mode Card -->
-                            <div class="col-md-6">
-                                <label class="card p-3 h-100 {% if not has_dct %}opacity-50{% endif %} cursor-pointer" id="dctModeCard" for="modeDct" style="cursor: pointer;">
-                                    <input class="form-check-input position-absolute" type="radio" name="embed_mode" id="modeDct" value="dct" {% if not has_dct %}disabled{% endif %} style="top: 1rem; right: 1rem;">
-                                    <div class="d-flex align-items-center mb-2">
-                                        <i class="bi bi-soundwave text-warning fs-4 me-2"></i>
-                                        <strong>DCT Mode</strong>
-                                        {% if has_dct %}
-                                        <span class="badge bg-warning text-dark ms-auto me-4">Social Media</span>
-                                        {% else %}
-                                        <span class="badge bg-secondary ms-auto me-4">Unavailable</span>
-                                        {% endif %}
-                                    </div>
-                                    <ul class="small text-muted mb-0 ps-3">
-                                        <li>JPEG output, survives recompression</li>
-                                        <li>Lower capacity (~75 KB/MP)</li>
-                                        <li>Best for Instagram, WhatsApp, etc.</li>
-                                    </ul>
-                                    {% if not has_dct %}
-                                    <div class="alert alert-warning small mt-2 mb-0 py-1 px-2">
-                                        <i class="bi bi-exclamation-triangle me-1"></i>
-                                        Requires scipy: <code>pip install scipy</code>
-                                    </div>
-                                    {% endif %}
-                                </label>
-                            </div>
-                        </div>
-                        
-                        <!-- Mode hint -->
-                        <div class="form-text mt-2" id="modeHint">
-                            <i class="bi bi-lightbulb me-1"></i>
-                            <strong>LSB</strong> for private channels (email, cloud storage). 
-                            <strong>DCT</strong> for social media that recompresses images.
-                        </div>
-                    </div>
-                    
                     <div class="row">
                         <div class="col-md-6 mb-3">
                             <label class="form-label">
                                 <i class="bi bi-image me-1"></i> Reference Photo
                             </label>
-                            <div class="drop-zone" id="refDropZone">
+                            <div class="drop-zone scan-container" id="refDropZone">
                                 <input type="file" name="reference_photo" accept="image/*" required>
                                 <div class="drop-zone-label">
                                     <i class="bi bi-cloud-arrow-up fs-3 d-block mb-2 text-muted"></i>
                                     <span class="text-muted">Drop image or click to browse</span>
                                 </div>
                                 <img class="drop-zone-preview d-none" id="refPreview">
+                                <!-- Scan overlay elements -->
+                                <div class="scan-overlay">
+                                    <div class="scan-grid"></div>
+                                    <div class="scan-line"></div>
+                                </div>
+                                <!-- Corner brackets (shown after scan) -->
+                                <div class="scan-corners">
+                                    <div class="scan-corner tl"></div>
+                                    <div class="scan-corner tr"></div>
+                                    <div class="scan-corner bl"></div>
+                                    <div class="scan-corner br"></div>
+                                </div>
+                                <!-- Data panel (shown after scan) -->
+                                <div class="scan-data-panel">
+                                    <div class="scan-data-filename">
+                                        <i class="bi bi-check-circle-fill"></i>
+                                        <span id="refFileName">image.jpg</span>
+                                    </div>
+                                    <div class="scan-data-row">
+                                        <span class="scan-status-badge">Hash Acquired</span>
+                                        <span class="scan-data-value" id="refFileSize">--</span>
+                                    </div>
+                                    <div class="scan-hash-preview" id="refHashPreview">SHA256: ················</div>
+                                </div>
                             </div>
                             <div class="form-text">
                                 The secret photo both parties have (NOT transmitted)
@@ -199,13 +167,36 @@
                             <label class="form-label">
                                 <i class="bi bi-file-image me-1"></i> Carrier Image
                             </label>
-                            <div class="drop-zone" id="carrierDropZone">
+                            <div class="drop-zone pixel-container" id="carrierDropZone">
                                 <input type="file" name="carrier" accept="image/*" required id="carrierInput">
                                 <div class="drop-zone-label">
                                     <i class="bi bi-cloud-arrow-up fs-3 d-block mb-2 text-muted"></i>
                                     <span class="text-muted">Drop image or click to browse</span>
                                 </div>
                                 <img class="drop-zone-preview d-none" id="carrierPreview">
+                                <!-- Pixel blocks overlay - populated by JS -->
+                                <div class="pixel-blocks"></div>
+                                <!-- Pixel scan line -->
+                                <div class="pixel-scan-line"></div>
+                                <!-- Corner brackets -->
+                                <div class="pixel-corners">
+                                    <div class="pixel-corner tl"></div>
+                                    <div class="pixel-corner tr"></div>
+                                    <div class="pixel-corner bl"></div>
+                                    <div class="pixel-corner br"></div>
+                                </div>
+                                <!-- Data panel -->
+                                <div class="pixel-data-panel">
+                                    <div class="pixel-data-filename">
+                                        <i class="bi bi-check-circle-fill"></i>
+                                        <span id="carrierFileName">image.jpg</span>
+                                    </div>
+                                    <div class="pixel-data-row">
+                                        <span class="pixel-status-badge">Carrier Loaded</span>
+                                        <span class="pixel-data-value" id="carrierFileSize">--</span>
+                                    </div>
+                                    <div class="pixel-dimensions" id="carrierDims">-- × -- px</div>
+                                </div>
                             </div>
                             <div class="form-text">
                                 The image to hide your message in (e.g., a meme)
@@ -221,12 +212,40 @@
                                 <strong>Carrier:</strong> <span id="carrierDimensions">-</span>
                             </div>
                             <div class="col-auto">
-                                <span class="badge bg-primary me-1" id="lsbCapacityBadge">LSB: -</span>
-                                <span class="badge bg-warning text-dark" id="dctCapacityBadge">DCT: -</span>
+                                <span class="badge bg-warning text-dark me-1" id="dctCapacityBadge">DCT: -</span>
+                                <span class="badge bg-primary" id="lsbCapacityBadge">LSB: -</span>
                             </div>
                         </div>
                     </div>
                     
+                    <!-- Embedding Mode Selection -->
+                    <div class="mb-4">
+                        <label class="form-label">
+                            <i class="bi bi-cpu me-1"></i> Embedding Mode
+                        </label>
+                        
+                        <div class="d-flex gap-2">
+                            <!-- DCT Mode -->
+                            <label class="mode-btn flex-fill {% if not has_dct %}opacity-50{% endif %} {% if has_dct %}active{% endif %}" id="dctModeCard" for="modeDct">
+                                <input class="form-check-input" type="radio" name="embed_mode" id="modeDct" value="dct" {% if has_dct %}checked{% endif %} {% if not has_dct %}disabled{% endif %}>
+                                <i class="bi bi-soundwave text-warning ms-2"></i>
+                                <span class="ms-2"><strong>DCT</strong> <span class="text-muted">· Social Media</span></span>
+                                <i class="bi bi-info-circle text-muted mode-info-icon ms-2" data-bs-toggle="tooltip" data-bs-html="true" title="<b>DCT Mode</b><br>• JPEG output<br>• Survives recompression<br>• ~75 KB/MP capacity"></i>
+                                {% if not has_dct %}
+                                <span class="small text-warning ms-2"><i class="bi bi-exclamation-triangle me-1"></i>Requires scipy</span>
+                                {% endif %}
+                            </label>
+                            
+                            <!-- LSB Mode -->
+                            <label class="mode-btn flex-fill {% if not has_dct %}active{% endif %}" id="lsbModeCard" for="modeLsb">
+                                <input class="form-check-input" type="radio" name="embed_mode" id="modeLsb" value="lsb" {% if not has_dct %}checked{% endif %}>
+                                <i class="bi bi-grid-3x3-gap text-primary ms-2"></i>
+                                <span class="ms-2"><strong>LSB</strong> <span class="text-muted">· Email & Files</span></span>
+                                <i class="bi bi-info-circle text-muted mode-info-icon ms-2" data-bs-toggle="tooltip" data-bs-html="true" title="<b>LSB Mode</b><br>• Full color PNG output<br>• Higher capacity (~375 KB/MP)"></i>
+                            </label>
+                        </div>
+                    </div>
+                    
                     <!-- Payload Type Selector -->
                     <div class="mb-3">
                         <label class="form-label">
@@ -317,7 +336,7 @@
                           <label class="form-label"><i class="bi bi-123 me-1"></i> PIN</label>
                           <div class="input-group pin-input-container">
                             <input type="password" name="pin" class="form-control" id="pinInput" placeholder="••••••" maxlength="9" style="max-width: 180px;">
-                            <button class="btn btn-outline-secondary" type="button" id="togglePin">
+                            <button class="btn btn-outline-secondary" type="button" data-toggle-password="pinInput">
                               <i class="bi bi-eye"></i>
                             </button>
                           </div>
@@ -356,10 +375,20 @@
                                         <span class="text-muted small">Drop QR image or click to browse</span>
                                     </div>
                                     <!-- Crop animation container -->
-                                    <div class="qr-crop-container d-none" id="qrCropContainer">
+                                    <div class="qr-scan-container qr-crop-container d-none" id="qrCropContainer">
                                         <img class="qr-original" id="qrOriginal" alt="Original">
                                         <img class="qr-cropped" id="qrCropped" alt="Cropped QR">
-                                        <span class="crop-badge badge bg-success"><i class="bi bi-crop me-1"></i>Detected</span>
+                                        <!-- Data panel -->
+                                        <div class="qr-data-panel">
+                                            <div class="qr-data-filename">
+                                                <i class="bi bi-check-circle-fill"></i>
+                                                <span>RSA Key loaded</span>
+                                            </div>
+                                            <div class="qr-data-row">
+                                                <span class="qr-status-badge">RSA Key</span>
+                                                <span class="qr-data-value">--</span>
+                                            </div>
+                                        </div>
                                     </div>
                                 </div>
                             </div>
@@ -367,7 +396,7 @@
                             <!-- Key Password (always visible) -->
                             <div class="input-group input-group-sm mt-2">
                                 <input type="password" name="rsa_password" class="form-control" id="rsaPasswordInput" placeholder="Key password (if encrypted)">
-                                <button class="btn btn-outline-secondary" type="button" id="toggleRsaPassword">
+                                <button class="btn btn-outline-secondary" type="button" data-toggle-password="rsaPasswordInput">
                                     <i class="bi bi-eye"></i>
                                 </button>
                             </div>
@@ -375,7 +404,7 @@
                     </div>
                     
                     <!-- Advanced Options (DCT sub-options only) -->
-                    <div class="mb-4 d-none" id="advancedOptionsContainer">
+                    <div class="mb-4 {% if not has_dct %}d-none{% endif %}" id="advancedOptionsContainer">
                         <a class="btn btn-sm btn-outline-secondary w-100" data-bs-toggle="collapse" href="#advancedOptions" role="button" aria-expanded="false">
                             <i class="bi bi-gear me-1"></i> DCT Options
                             <i class="bi bi-chevron-down ms-1" id="advancedChevron"></i>
@@ -489,10 +518,23 @@
 {% endblock %}
 
 {% block scripts %}
+<script src="{{ url_for('static', filename='js/stegasoo.js') }}"></script>
 <script>
-// v3.2.0: Removed date detection - no longer needed!
+// ============================================================================
+// ENCODE PAGE - Initialize shared components
+// ============================================================================
+
+Stegasoo.initPasswordToggles();
+Stegasoo.initRsaMethodToggle();
+Stegasoo.initDropZones();
+Stegasoo.initClipboardPaste(['input[name="carrier"]', 'input[name="reference_photo"]']);
+Stegasoo.initQrCropAnimation('rsaQrInput');
+Stegasoo.initPassphraseFontResize();
+
+// ============================================================================
+// ENCODE PAGE - Payload type switching
+// ============================================================================
 
-// Payload type switching
 const payloadTextRadio = document.getElementById('payloadText');
 const payloadFileRadio = document.getElementById('payloadFile');
 const textSection = document.getElementById('textPayloadSection');
@@ -514,99 +556,73 @@ function updatePayloadSection() {
     }
 }
 
-payloadTextRadio.addEventListener('change', updatePayloadSection);
-payloadFileRadio.addEventListener('change', updatePayloadSection);
+payloadTextRadio?.addEventListener('change', updatePayloadSection);
+payloadFileRadio?.addEventListener('change', updatePayloadSection);
+
+// ============================================================================
+// ENCODE PAGE - Passphrase validation
+// ============================================================================
 
-// Passphrase validation and auto-resize font
 const passphraseInput = document.getElementById('passphraseInput');
 const passphraseWarning = document.getElementById('passphraseWarning');
 
-// Stepped font sizes (characters -> rem)
-const fontSizeSteps = [
-    { maxChars: 30, size: 1.1 },
-    { maxChars: 45, size: 1.0 },
-    { maxChars: 60, size: 0.95 },
-    { maxChars: Infinity, size: 0.9 }
-];
-
-function adjustPassphraseFontSize() {
-    if (!passphraseInput) return;
-    const len = passphraseInput.value.length;
+passphraseInput?.addEventListener('input', function() {
+    const words = this.value.trim().split(/\s+/).filter(w => w.length > 0);
+    const recommendedWords = {{ recommended_passphrase_words }};
     
-    for (const step of fontSizeSteps) {
-        if (len <= step.maxChars) {
-            passphraseInput.style.fontSize = step.size + 'rem';
-            break;
-        }
+    if (passphraseWarning) {
+        passphraseWarning.style.display = (words.length > 0 && words.length < recommendedWords) ? 'block' : 'none';
     }
-}
+});
 
-if (passphraseInput) {
-    passphraseInput.addEventListener('input', function() {
-        // Word count warning
-        const words = this.value.trim().split(/\s+/).filter(w => w.length > 0);
-        const recommendedWords = {{ recommended_passphrase_words }};
-        
-        if (words.length > 0 && words.length < recommendedWords) {
-            passphraseWarning.style.display = 'block';
-        } else {
-            passphraseWarning.style.display = 'none';
-        }
-        
-        // Auto-resize font
-        adjustPassphraseFontSize();
-    });
-    
-    // Initial font size adjustment
-    adjustPassphraseFontSize();
-}
+// ============================================================================
+// ENCODE PAGE - Payload file info
+// ============================================================================
 
-// Payload file info display
-payloadFileInput.addEventListener('change', function() {
+payloadFileInput?.addEventListener('change', function() {
     const fileInfo = document.getElementById('fileInfo');
     const fileInfoName = document.getElementById('fileInfoName');
     const fileInfoSize = document.getElementById('fileInfoSize');
     
     if (this.files && this.files[0]) {
         const file = this.files[0];
-        fileInfo.classList.remove('d-none');
-        fileInfoName.textContent = file.name;
+        fileInfo?.classList.remove('d-none');
+        if (fileInfoName) fileInfoName.textContent = file.name;
+        if (fileInfoSize) fileInfoSize.textContent = (file.size / 1024).toFixed(1) + ' KB';
         
-        const sizeKB = (file.size / 1024).toFixed(1);
-        fileInfoSize.textContent = sizeKB + ' KB';
-        
-        // Update drop zone label
         const label = document.getElementById('payloadDropLabel');
-        label.innerHTML = `<i class="bi bi-check-circle text-success me-1"></i>${file.name}`;
+        if (label) label.innerHTML = `<i class="bi bi-check-circle text-success me-1"></i>${file.name}`;
     } else {
-        fileInfo.classList.add('d-none');
+        fileInfo?.classList.add('d-none');
     }
 });
 
-// Character counter
-if (messageInput) {
-    messageInput.addEventListener('input', function() {
-        const count = this.value.length;
-        const max = 250000;
-        const percent = Math.round((count / max) * 100);
-        
-        document.getElementById('charCount').textContent = count.toLocaleString();
-        document.getElementById('charPercent').textContent = percent + '%';
-        
-        const warning = document.getElementById('charWarning');
-        if (percent >= 80) {
-            warning.classList.remove('d-none');
-        } else {
-            warning.classList.add('d-none');
-        }
-    });
-}
+// ============================================================================
+// ENCODE PAGE - Character counter
+// ============================================================================
+
+messageInput?.addEventListener('input', function() {
+    const count = this.value.length;
+    const max = 250000;
+    const percent = Math.round((count / max) * 100);
+    
+    const charCount = document.getElementById('charCount');
+    const charPercent = document.getElementById('charPercent');
+    const charWarning = document.getElementById('charWarning');
+    
+    if (charCount) charCount.textContent = count.toLocaleString();
+    if (charPercent) charPercent.textContent = percent + '%';
+    charWarning?.classList.toggle('d-none', percent < 80);
+});
+
+// ============================================================================
+// ENCODE PAGE - Carrier capacity
+// ============================================================================
 
-// Carrier capacity fetching
 const capacityPanel = document.getElementById('capacityPanel');
 const carrierInput = document.getElementById('carrierInput');
 
-carrierInput.addEventListener('change', function() {
+carrierInput?.addEventListener('change', function() {
     if (this.files && this.files[0]) {
         fetchCapacityComparison(this.files[0]);
     }
@@ -622,333 +638,114 @@ function fetchCapacityComparison(file) {
     })
     .then(response => response.json())
     .then(data => {
-        if (data.error) {
-            console.error('Capacity error:', data.error);
-            return;
-        }
+        if (data.error) return;
         
-        document.getElementById('carrierDimensions').textContent = 
-            `${data.width} × ${data.height} (${(data.width * data.height / 1000000).toFixed(1)} MP)`;
-        document.getElementById('lsbCapacityBadge').textContent = 
-            `LSB: ${data.lsb.capacity_kb} KB`;
-        document.getElementById('dctCapacityBadge').textContent = 
-            `DCT: ${data.dct.capacity_kb} KB`;
+        const dims = document.getElementById('carrierDimensions');
+        const lsbBadge = document.getElementById('lsbCapacityBadge');
+        const dctBadge = document.getElementById('dctCapacityBadge');
         
-        capacityPanel.classList.remove('d-none');
+        if (dims) dims.textContent = `${data.width} × ${data.height} (${(data.width * data.height / 1000000).toFixed(1)} MP)`;
+        if (lsbBadge) lsbBadge.textContent = `LSB: ${data.lsb.capacity_kb} KB`;
+        if (dctBadge) dctBadge.textContent = `DCT: ${data.dct.capacity_kb} KB`;
+        
+        capacityPanel?.classList.remove('d-none');
     })
     .catch(err => console.error('Capacity fetch failed:', err));
 }
 
 // ============================================================================
-// LSB/DCT Mode Switching
+// ENCODE PAGE - Mode switching (LSB/DCT)
 // ============================================================================
 
-const modeLsb = document.getElementById('modeLsb');
+// Initialize tooltips for mode info icons
+document.querySelectorAll('[data-bs-toggle="tooltip"]').forEach(el => {
+    new bootstrap.Tooltip(el);
+});
+
+// Mode button active state toggle
+const modeRadios = document.querySelectorAll('input[name="embed_mode"]');
+const modeBtns = { 'dct': document.getElementById('dctModeCard'), 'lsb': document.getElementById('lsbModeCard') };
+
+modeRadios.forEach(radio => {
+    radio.addEventListener('change', () => {
+        Object.values(modeBtns).forEach(btn => btn?.classList.remove('active'));
+        modeBtns[radio.value]?.classList.add('active');
+    });
+});
+
+// Show/hide DCT options
 const modeDct = document.getElementById('modeDct');
-const lsbModeCard = document.getElementById('lsbModeCard');
-const dctModeCard = document.getElementById('dctModeCard');
 const advancedOptionsContainer = document.getElementById('advancedOptionsContainer');
 
-// DCT Options elements
-const dctFormatPng = document.getElementById('dctFormatPng');
-const dctFormatJpeg = document.getElementById('dctFormatJpeg');
-const dctColorColor = document.getElementById('dctColorColor');
-const dctColorGrayscale = document.getElementById('dctColorGrayscale');
-const dctPngCard = document.getElementById('dctPngCard');
-const dctJpegCard = document.getElementById('dctJpegCard');
-const dctColorCard = document.getElementById('dctColorCard');
-const dctGrayscaleCard = document.getElementById('dctGrayscaleCard');
+document.querySelectorAll('input[name="embed_mode"]').forEach(radio => {
+    radio.addEventListener('change', () => {
+        advancedOptionsContainer?.classList.toggle('d-none', !modeDct?.checked);
+    });
+});
 
-function updateModeCardHighlight() {
-    lsbModeCard.classList.toggle('border-primary', modeLsb.checked);
-    lsbModeCard.classList.toggle('border-2', modeLsb.checked);
-    dctModeCard.classList.toggle('border-warning', modeDct.checked);
-    dctModeCard.classList.toggle('border-2', modeDct.checked);
-    
-    // Show/hide DCT options when DCT is selected
-    advancedOptionsContainer.classList.toggle('d-none', !modeDct.checked);
-}
-
-function updateDctFormatCardHighlight() {
-    if (dctPngCard && dctJpegCard) {
-        dctPngCard.classList.toggle('border-primary', dctFormatPng.checked);
-        dctPngCard.classList.toggle('border-2', dctFormatPng.checked);
-        dctJpegCard.classList.toggle('border-warning', dctFormatJpeg.checked);
-        dctJpegCard.classList.toggle('border-2', dctFormatJpeg.checked);
+// DCT format cards
+Stegasoo.initModeCards({
+    radioName: 'dct_output_format',
+    cards: {
+        'png': { id: 'dctPngCard', borderClass: 'border-primary' },
+        'jpeg': { id: 'dctJpegCard', borderClass: 'border-warning' }
     }
-}
+});
 
-function updateDctColorCardHighlight() {
-    if (dctColorCard && dctGrayscaleCard) {
-        dctColorCard.classList.toggle('border-success', dctColorColor.checked);
-        dctColorCard.classList.toggle('border-2', dctColorColor.checked);
-        dctGrayscaleCard.classList.toggle('border-secondary', dctColorGrayscale.checked);
-        dctGrayscaleCard.classList.toggle('border-2', dctColorGrayscale.checked);
+// DCT color cards
+Stegasoo.initModeCards({
+    radioName: 'dct_color_mode',
+    cards: {
+        'color': { id: 'dctColorCard', borderClass: 'border-success' },
+        'grayscale': { id: 'dctGrayscaleCard', borderClass: 'border-secondary' }
     }
-}
+});
 
-modeLsb.addEventListener('change', updateModeCardHighlight);
-modeDct.addEventListener('change', updateModeCardHighlight);
-dctFormatPng?.addEventListener('change', updateDctFormatCardHighlight);
-dctFormatJpeg?.addEventListener('change', updateDctFormatCardHighlight);
-dctColorColor?.addEventListener('change', updateDctColorCardHighlight);
-dctColorGrayscale?.addEventListener('change', updateDctColorCardHighlight);
-
-updateModeCardHighlight(); // Initial state
-updateDctFormatCardHighlight(); // Initial state
-updateDctColorCardHighlight(); // Initial state
-
-// Advanced options chevron rotation
+// Advanced options chevron
 const advancedOptionsEl = document.getElementById('advancedOptions');
-if (advancedOptionsEl) {
-    advancedOptionsEl.addEventListener('show.bs.collapse', function() {
-        document.getElementById('advancedChevron').classList.add('bi-chevron-up');
-        document.getElementById('advancedChevron').classList.remove('bi-chevron-down');
-    });
-    advancedOptionsEl.addEventListener('hide.bs.collapse', function() {
-        document.getElementById('advancedChevron').classList.remove('bi-chevron-up');
-        document.getElementById('advancedChevron').classList.add('bi-chevron-down');
-    });
-}
+advancedOptionsEl?.addEventListener('show.bs.collapse', () => {
+    document.getElementById('advancedChevron')?.classList.replace('bi-chevron-down', 'bi-chevron-up');
+});
+advancedOptionsEl?.addEventListener('hide.bs.collapse', () => {
+    document.getElementById('advancedChevron')?.classList.replace('bi-chevron-up', 'bi-chevron-down');
+});
 
 // ============================================================================
-// Drag & drop with preview for images
+// ENCODE PAGE - Duplicate file check
 // ============================================================================
 
-document.querySelectorAll('.drop-zone').forEach(zone => {
-    const input = zone.querySelector('input[type="file"]');
-    const label = zone.querySelector('.drop-zone-label');
-    const preview = zone.querySelector('.drop-zone-preview');
-    const isPayloadZone = zone.id === 'payloadDropZone';
-    const isCarrierZone = zone.id === 'carrierDropZone';
-    
-    ['dragenter', 'dragover'].forEach(evt => {
-        zone.addEventListener(evt, e => {
-            e.preventDefault();
-            zone.classList.add('drag-over');
-        });
-    });
-    
-    ['dragleave', 'drop'].forEach(evt => {
-        zone.addEventListener(evt, e => {
-            e.preventDefault();
-            zone.classList.remove('drag-over');
-        });
-    });
-    
-    zone.addEventListener('drop', e => {
-        if (e.dataTransfer.files.length) {
-            input.files = e.dataTransfer.files;
-            input.dispatchEvent(new Event('change'));
-            
-            if (!isPayloadZone) {
-                showPreview(e.dataTransfer.files[0]);
-            }
-            
-            // Trigger capacity check for carrier
-            if (isCarrierZone && e.dataTransfer.files[0]) {
-                fetchCapacityComparison(e.dataTransfer.files[0]);
-            }
-        }
-    });
-    
-    if (!isPayloadZone) {
-        input.addEventListener('change', function() {
-            if (this.files && this.files[0]) {
-                showPreview(this.files[0]);
-            }
-        });
-    }
-    
-    function showPreview(file) {
-        if (!file.type.startsWith('image/')) return;
-        
-        const reader = new FileReader();
-        reader.onload = e => {
-            if (preview) {
-                preview.src = e.target.result;
-                preview.classList.remove('d-none');
-            }
-            label.innerHTML = '<i class="bi bi-check-circle text-success me-1"></i>' + file.name;
-        };
-        reader.readAsDataURL(file);
-    }
-});
-
-// PIN Toggle Logic
-document.getElementById('togglePin').addEventListener('click', function() {
-    const input = document.getElementById('pinInput');
-    const icon = this.querySelector('i');
-    if (input.type === 'password') {
-        input.type = 'text';
-        icon.classList.replace('bi-eye', 'bi-eye-slash');
-    } else {
-        input.type = 'password';
-        icon.classList.replace('bi-eye-slash', 'bi-eye');
-    }
-});
-
-// RSA Password Toggle Logic
-document.getElementById('toggleRsaPassword')?.addEventListener('click', function() {
-    const input = document.getElementById('rsaPasswordInput');
-    const icon = this.querySelector('i');
-    if (input.type === 'password') {
-        input.type = 'text';
-        icon.classList.replace('bi-eye', 'bi-eye-slash');
-    } else {
-        input.type = 'password';
-        icon.classList.replace('bi-eye-slash', 'bi-eye');
-    }
-});
-
-// RSA Input Method Toggle (File vs QR)
-const rsaMethodFile = document.getElementById('rsaMethodFile');
-const rsaMethodQr = document.getElementById('rsaMethodQr');
-const rsaFileSection = document.getElementById('rsaFileSection');
-const rsaQrSection = document.getElementById('rsaQrSection');
-
-function updateRsaInputMethod() {
-    const isFile = rsaMethodFile.checked;
-    rsaFileSection.classList.toggle('d-none', !isFile);
-    rsaQrSection.classList.toggle('d-none', isFile);
-}
-
-rsaMethodFile?.addEventListener('change', updateRsaInputMethod);
-rsaMethodQr?.addEventListener('change', updateRsaInputMethod);
-
-// Prevent Same File Selection
 function checkDuplicateFiles() {
     const refInput = document.querySelector('input[name="reference_photo"]');
     const carInput = document.querySelector('input[name="carrier"]');
     
-    if (refInput.files[0] && carInput.files[0]) {
+    if (refInput?.files[0] && carInput?.files[0]) {
         if (refInput.files[0].name === carInput.files[0].name && 
             refInput.files[0].size === carInput.files[0].size) {
             alert("Security Warning: You cannot use the same image for both Reference and Carrier!");
             carInput.value = '';
-            document.getElementById('carrierPreview').classList.add('d-none');
-            document.querySelector('#carrierDropZone .drop-zone-label').innerHTML = 
-                '<i class="bi bi-cloud-arrow-up fs-3 d-block mb-2 text-muted"></i>' +
-                '<span class="text-muted">Drop image or click to browse</span>';
-            capacityPanel.classList.add('d-none');
-        }
-    }
-}
-document.querySelector('input[name="reference_photo"]').addEventListener('change', checkDuplicateFiles);
-document.querySelector('input[name="carrier"]').addEventListener('change', checkDuplicateFiles);
-
-// Paste from Clipboard
-document.addEventListener('paste', function(e) {
-    const items = e.clipboardData.items;
-    for (let i = 0; i < items.length; i++) {
-        if (items[i].type.indexOf("image") !== -1) {
-            const blob = items[i].getAsFile();
-            
-            const carrierInput = document.querySelector('input[name="carrier"]');
-            const refInput = document.querySelector('input[name="reference_photo"]');
-            
-            const targetInput = (!carrierInput.files.length) ? carrierInput : refInput;
-            
-            const container = new DataTransfer();
-            container.items.add(blob);
-            targetInput.files = container.files;
-            
-            targetInput.dispatchEvent(new Event('change'));
-            
-            // Trigger capacity check if pasted to carrier
-            if (targetInput === carrierInput) {
-                fetchCapacityComparison(blob);
+            document.getElementById('carrierPreview')?.classList.add('d-none');
+            const label = document.querySelector('#carrierDropZone .drop-zone-label');
+            if (label) {
+                label.innerHTML = '<i class="bi bi-cloud-arrow-up fs-3 d-block mb-2 text-muted"></i><span class="text-muted">Drop image or click to browse</span>';
             }
-            break;
+            capacityPanel?.classList.add('d-none');
         }
     }
-});
-
-// QR Code RSA Key scanning with crop animation
-const rsaQrInput = document.getElementById('rsaQrInput');
-const qrCropContainer = document.getElementById('qrCropContainer');
-const qrOriginal = document.getElementById('qrOriginal');
-const qrCropped = document.getElementById('qrCropped');
-
-if (rsaQrInput) {
-    rsaQrInput.addEventListener('change', function() {
-        if (this.files && this.files[0]) {
-            const file = this.files[0];
-            
-            if (!file.type.startsWith('image/')) return;
-            
-            // Reset animation state
-            qrCropContainer.classList.remove('animating');
-            qrCropContainer.classList.add('d-none');
-            
-            // Show original image first
-            const reader = new FileReader();
-            reader.onload = e => {
-                qrOriginal.src = e.target.result;
-                qrCropContainer.classList.remove('d-none');
-                
-                // Hide the label
-                document.querySelector('#qrDropZone .drop-zone-label').classList.add('d-none');
-                
-                // Now fetch cropped version and animate
-                const formData = new FormData();
-                formData.append('image', file);
-                
-                fetch('/qr/crop', {
-                    method: 'POST',
-                    body: formData
-                })
-                .then(response => {
-                    if (!response.ok) {
-                        throw new Error('No QR code detected');
-                    }
-                    return response.blob();
-                })
-                .then(blob => {
-                    // Load cropped image
-                    const croppedUrl = URL.createObjectURL(blob);
-                    qrCropped.src = croppedUrl;
-                    
-                    // Wait a moment to show original, then animate
-                    setTimeout(() => {
-                        qrCropContainer.classList.add('animating');
-                    }, 400);
-                    
-                    // Also verify key extraction works
-                    const keyFormData = new FormData();
-                    keyFormData.append('qr_image', file);
-                    
-                    return fetch('/extract-key-from-qr', {
-                        method: 'POST',
-                        body: keyFormData
-                    });
-                })
-                .then(response => response.json())
-                .then(data => {
-                    if (data.success) {
-                        document.querySelector('#qrDropZone .drop-zone-label').innerHTML = 
-                            '<i class="bi bi-check-circle text-success me-1"></i>RSA Key loaded';
-                        document.querySelector('#qrDropZone .drop-zone-label').classList.remove('d-none');
-                    }
-                })
-                .catch(err => {
-                    // Crop failed - just show original with error
-                    console.log('QR crop/extract error:', err);
-                    document.querySelector('#qrDropZone .drop-zone-label').innerHTML = 
-                        '<i class="bi bi-exclamation-triangle text-warning me-1"></i>No QR detected';
-                    document.querySelector('#qrDropZone .drop-zone-label').classList.remove('d-none');
-                });
-            };
-            reader.readAsDataURL(file);
-        }
-    });
 }
 
-// Form submission with loading state
-document.getElementById('encodeForm').addEventListener('submit', function() {
+document.querySelector('input[name="reference_photo"]')?.addEventListener('change', checkDuplicateFiles);
+document.querySelector('input[name="carrier"]')?.addEventListener('change', checkDuplicateFiles);
+
+// ============================================================================
+// ENCODE PAGE - Form submission
+// ============================================================================
+
+document.getElementById('encodeForm')?.addEventListener('submit', function() {
     const btn = document.getElementById('encodeBtn');
-    btn.disabled = true;
-    btn.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span>Encoding...';
+    if (btn) {
+        btn.disabled = true;
+        btn.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span>Encoding...';
+    }
 });
 </script>
 {% endblock %}

frontends/web/templates/generate.html

@@ -471,45 +471,46 @@
 {% endblock %}
 
 {% block scripts %}
+<script src="{{ url_for('static', filename='js/stegasoo.js') }}"></script>
 <script>
+// ============================================================================
+// GENERATE PAGE - Form Controls
+// ============================================================================
+
 // Words range slider
 const wordsRange = document.getElementById('wordsRange');
 const wordsValue = document.getElementById('wordsValue');
 
-if (wordsRange) {
-    wordsRange.addEventListener('input', function() {
-        const bits = this.value * 11;
-        wordsValue.textContent = `${this.value} words (~${bits} bits)`;
-    });
-}
+wordsRange?.addEventListener('input', function() {
+    const bits = this.value * 11;
+    wordsValue.textContent = `${this.value} words (~${bits} bits)`;
+});
 
-// Toggle PIN/RSA options
+// Toggle PIN/RSA options visibility
 const usePinCheck = document.getElementById('usePinCheck');
 const useRsaCheck = document.getElementById('useRsaCheck');
 const pinOptions = document.getElementById('pinOptions');
 const rsaOptions = document.getElementById('rsaOptions');
-
-if (usePinCheck) {
-    usePinCheck.addEventListener('change', function() {
-        pinOptions.classList.toggle('d-none', !this.checked);
-    });
-}
-
-if (useRsaCheck) {
-    useRsaCheck.addEventListener('change', function() {
-        rsaOptions.classList.toggle('d-none', !this.checked);
-    });
-}
-
-// RSA key size QR warning
-const rsaBitsSelect = document.getElementById('rsaBitsSelect');
 const rsaQrWarning = document.getElementById('rsaQrWarning');
+const rsaBitsSelect = document.getElementById('rsaBitsSelect');
 
-if (rsaBitsSelect && rsaQrWarning) {
-    rsaBitsSelect.addEventListener('change', function() {
-        rsaQrWarning.classList.toggle('d-none', parseInt(this.value) <= 3072);
-    });
-}
+usePinCheck?.addEventListener('change', function() {
+    pinOptions?.classList.toggle('d-none', !this.checked);
+});
+
+useRsaCheck?.addEventListener('change', function() {
+    rsaOptions?.classList.toggle('d-none', !this.checked);
+});
+
+// RSA key size QR warning (>3072 bits)
+rsaBitsSelect?.addEventListener('change', function() {
+    rsaQrWarning?.classList.toggle('d-none', parseInt(this.value) <= 3072);
+});
+
+{% if generated %}
+// ============================================================================
+// GENERATE PAGE - Credential Display
+// ============================================================================
 
 // PIN visibility toggle
 let pinHidden = false;
@@ -519,32 +520,19 @@ function togglePinVisibility() {
     const text = document.getElementById('pinToggleText');
     
     pinHidden = !pinHidden;
+    pinDigits?.classList.toggle('blurred', pinHidden);
     
-    if (pinHidden) {
-        pinDigits.classList.add('blurred');
-        icon.className = 'bi bi-eye';
-        text.textContent = 'Show';
-    } else {
-        pinDigits.classList.remove('blurred');
-        icon.className = 'bi bi-eye-slash';
-        text.textContent = 'Hide';
-    }
+    if (icon) icon.className = pinHidden ? 'bi bi-eye' : 'bi bi-eye-slash';
+    if (text) text.textContent = pinHidden ? 'Show' : 'Hide';
 }
 
 // Copy PIN
 function copyPin() {
-    const pin = '{{ pin|default("", true) }}';
-    const icon = document.getElementById('pinCopyIcon');
-    const text = document.getElementById('pinCopyText');
-    
-    navigator.clipboard.writeText(pin).then(() => {
-        icon.className = 'bi bi-check';
-        text.textContent = 'Copied!';
-        setTimeout(() => {
-            icon.className = 'bi bi-clipboard';
-            text.textContent = 'Copy';
-        }, 2000);
-    });
+    Stegasoo.copyToClipboard(
+        '{{ pin|default("", true) }}',
+        document.getElementById('pinCopyIcon'),
+        document.getElementById('pinCopyText')
+    );
 }
 
 // Passphrase visibility toggle
@@ -555,79 +543,108 @@ function togglePassphraseVisibility() {
     const text = document.getElementById('passphraseToggleText');
     
     passphraseHidden = !passphraseHidden;
+    display?.classList.toggle('blurred', passphraseHidden);
     
-    if (passphraseHidden) {
-        display.classList.add('blurred');
-        icon.className = 'bi bi-eye';
-        text.textContent = 'Show';
-    } else {
-        display.classList.remove('blurred');
-        icon.className = 'bi bi-eye-slash';
-        text.textContent = 'Hide';
-    }
+    if (icon) icon.className = passphraseHidden ? 'bi bi-eye' : 'bi bi-eye-slash';
+    if (text) text.textContent = passphraseHidden ? 'Show' : 'Hide';
 }
 
 // Copy passphrase
 function copyPassphrase() {
-    const passphrase = '{{ passphrase|default("", true) }}';
-    const icon = document.getElementById('passphraseCopyIcon');
-    const text = document.getElementById('passphraseCopyText');
-    
-    navigator.clipboard.writeText(passphrase).then(() => {
-        icon.className = 'bi bi-check';
-        text.textContent = 'Copied!';
-        setTimeout(() => {
-            icon.className = 'bi bi-clipboard';
-            text.textContent = 'Copy';
-        }, 2000);
-    });
+    Stegasoo.copyToClipboard(
+        '{{ passphrase|default("", true) }}',
+        document.getElementById('passphraseCopyIcon'),
+        document.getElementById('passphraseCopyText')
+    );
 }
 
-// Memory Aid Story Generation
+// ============================================================================
+// Memory Aid Story Generation - Templates by word count
+// ============================================================================
+
 const passphrase = '{{ passphrase|default("", true) }}';
 const passphraseWords = passphrase.split(' ').filter(w => w.length > 0);
 let currentStoryTemplate = 0;
 
-// Story templates - words are inserted in order
-const storyTemplates = [
-    // Adventure template
-    words => `Once upon a time, a brave explorer named ${highlight(words[0])} set out on a quest. Along the way, they discovered a mysterious ${highlight(words[1])} hidden in an ancient ${highlight(words[2])}${words[3] ? `. With the help of a magical ${highlight(words[3])}` : ''}${words[4] ? `, they unlocked the secrets of the ${highlight(words[4])}` : ''}${words[5] ? ` and found the legendary ${highlight(words[5])}` : ''}. And they all lived happily ever after.`,
-    
-    // Detective template
-    words => `Detective ${highlight(words[0])} was investigating a curious case involving a stolen ${highlight(words[1])}. The only clue was a ${highlight(words[2])} found at the scene${words[3] ? `. Suddenly, a witness mentioned seeing a suspicious ${highlight(words[3])}` : ''}${words[4] ? ` near the old ${highlight(words[4])}` : ''}${words[5] ? `. The case was solved when they discovered the ${highlight(words[5])} contained the answer` : ''}.`,
-    
-    // Science fiction template
-    words => `In the year 2150, Captain ${highlight(words[0])} commanded the starship ${highlight(words[1])}. Their mission: to explore the ${highlight(words[2])} sector of space${words[3] ? ` where ancient ${highlight(words[3])} technology was rumored to exist` : ''}${words[4] ? `. The crew discovered a portal to the ${highlight(words[4])} dimension` : ''}${words[5] ? `, containing the mythical ${highlight(words[5])}` : ''}.`,
-    
-    // Restaurant template
-    words => `Chef ${highlight(words[0])} opened a new restaurant called "The ${highlight(words[1])}." The signature dish featured ${highlight(words[2])} as the main ingredient${words[3] ? `, garnished with fresh ${highlight(words[3])}` : ''}${words[4] ? `. Customers loved the special ${highlight(words[4])} sauce` : ''}${words[5] ? ` served in a ${highlight(words[5])}-shaped bowl` : ''}.`,
-    
-    // Journey template
-    words => `The journey began at ${highlight(words[0])} Mountain, where travelers would gather their ${highlight(words[1])} supplies. The path led through the ${highlight(words[2])} valley${words[3] ? `, past the ancient ${highlight(words[3])} ruins` : ''}${words[4] ? `, until reaching the sacred ${highlight(words[4])} temple` : ''}${words[5] ? ` where the golden ${highlight(words[5])} awaited` : ''}.`,
-    
-    // Music template  
-    words => `${highlight(words[0])} was a talented musician who played the ${highlight(words[1])} in the city square. Their music sounded like ${highlight(words[2])}${words[3] ? ` mixed with ${highlight(words[3])}` : ''}${words[4] ? `. People said it reminded them of ${highlight(words[4])}` : ''}${words[5] ? ` during a beautiful ${highlight(words[5])} sunset` : ''}.`,
-    
-    // Inventor template
-    words => `Professor ${highlight(words[0])} invented a revolutionary device powered by ${highlight(words[1])} energy. It could transform ordinary ${highlight(words[2])}${words[3] ? ` into magnificent ${highlight(words[3])}` : ''}${words[4] ? `. The invention won the prestigious ${highlight(words[4])} Prize` : ''}${words[5] ? ` and was displayed at the ${highlight(words[5])} Museum` : ''}.`,
-    
-    // Garden template
-    words => `In the enchanted garden, ${highlight(words[0])} flowers bloomed beside a ${highlight(words[1])} fountain. The garden keeper planted ${highlight(words[2])} seeds${words[3] ? ` near the ${highlight(words[3])} hedge` : ''}${words[4] ? `, creating a path to the ${highlight(words[4])} arbor` : ''}${words[5] ? ` where butterflies gathered on ${highlight(words[5])} petals` : ''}.`
-];
+// Templates organized by word count (3-12 words supported)
+const storyTemplatesByLength = {
+    3: [
+        w => `The ${hl(w[0])} ${hl(w[1])} ${hl(w[2])}.`,
+        w => `${hl(w[0])} loves ${hl(w[1])} and ${hl(w[2])}.`,
+        w => `A ${hl(w[0])} found a ${hl(w[1])} near the ${hl(w[2])}.`,
+        w => `${hl(w[0])}, ${hl(w[1])}, ${hl(w[2])} — never forget.`,
+        w => `The ${hl(w[0])} hid the ${hl(w[1])} under the ${hl(w[2])}.`,
+    ],
+    4: [
+        w => `${hl(w[0])} and ${hl(w[1])} discovered a ${hl(w[2])} made of ${hl(w[3])}.`,
+        w => `The ${hl(w[0])} ${hl(w[1])} ate ${hl(w[2])} for ${hl(w[3])}.`,
+        w => `In the ${hl(w[0])}, a ${hl(w[1])} met a ${hl(w[2])} carrying ${hl(w[3])}.`,
+        w => `${hl(w[0])} said "${hl(w[1])}" while holding a ${hl(w[2])} ${hl(w[3])}.`,
+        w => `The secret: ${hl(w[0])}, ${hl(w[1])}, ${hl(w[2])}, ${hl(w[3])}.`,
+    ],
+    5: [
+        w => `${hl(w[0])} traveled to ${hl(w[1])} seeking the ${hl(w[2])} of ${hl(w[3])} and ${hl(w[4])}.`,
+        w => `The ${hl(w[0])} ${hl(w[1])} lived in a ${hl(w[2])} house with ${hl(w[3])} ${hl(w[4])}.`,
+        w => `"${hl(w[0])}!" shouted ${hl(w[1])} as the ${hl(w[2])} ${hl(w[3])} flew toward ${hl(w[4])}.`,
+        w => `Captain ${hl(w[0])} sailed the ${hl(w[1])} ${hl(w[2])} searching for ${hl(w[3])} ${hl(w[4])}.`,
+        w => `In ${hl(w[0])} kingdom, ${hl(w[1])} guards protected the ${hl(w[2])} ${hl(w[3])} ${hl(w[4])}.`,
+    ],
+    6: [
+        w => `${hl(w[0])} met ${hl(w[1])} at the ${hl(w[2])}. Together they found ${hl(w[3])}, ${hl(w[4])}, and ${hl(w[5])}.`,
+        w => `The ${hl(w[0])} ${hl(w[1])} wore a ${hl(w[2])} hat while eating ${hl(w[3])} ${hl(w[4])} ${hl(w[5])}.`,
+        w => `Detective ${hl(w[0])} found ${hl(w[1])} ${hl(w[2])} near the ${hl(w[3])} ${hl(w[4])} ${hl(w[5])}.`,
+        w => `In the ${hl(w[0])} ${hl(w[1])}, a ${hl(w[2])} ${hl(w[3])} sang about ${hl(w[4])} ${hl(w[5])}.`,
+        w => `Chef ${hl(w[0])} combined ${hl(w[1])}, ${hl(w[2])}, ${hl(w[3])}, ${hl(w[4])}, and ${hl(w[5])}.`,
+    ],
+    7: [
+        w => `${hl(w[0])} and ${hl(w[1])} walked through the ${hl(w[2])} ${hl(w[3])} to find the ${hl(w[4])} ${hl(w[5])} ${hl(w[6])}.`,
+        w => `The ${hl(w[0])} professor studied ${hl(w[1])} ${hl(w[2])} while drinking ${hl(w[3])} ${hl(w[4])} with ${hl(w[5])} ${hl(w[6])}.`,
+        w => `"${hl(w[0])} ${hl(w[1])}!" yelled ${hl(w[2])} as ${hl(w[3])} ${hl(w[4])} attacked the ${hl(w[5])} ${hl(w[6])}.`,
+        w => `In ${hl(w[0])}, King ${hl(w[1])} decreed that ${hl(w[2])} ${hl(w[3])} must honor ${hl(w[4])} ${hl(w[5])} ${hl(w[6])}.`,
+    ],
+    8: [
+        w => `${hl(w[0])} ${hl(w[1])} and ${hl(w[2])} ${hl(w[3])} met at the ${hl(w[4])} ${hl(w[5])} to discuss ${hl(w[6])} ${hl(w[7])}.`,
+        w => `The ${hl(w[0])} ${hl(w[1])} ${hl(w[2])} traveled from ${hl(w[3])} to ${hl(w[4])} carrying ${hl(w[5])} ${hl(w[6])} ${hl(w[7])}.`,
+        w => `${hl(w[0])} discovered that ${hl(w[1])} ${hl(w[2])} plus ${hl(w[3])} ${hl(w[4])} equals ${hl(w[5])} ${hl(w[6])} ${hl(w[7])}.`,
+    ],
+    9: [
+        w => `${hl(w[0])} ${hl(w[1])} ${hl(w[2])} watched as ${hl(w[3])} ${hl(w[4])} ${hl(w[5])} danced with ${hl(w[6])} ${hl(w[7])} ${hl(w[8])}.`,
+        w => `In the ${hl(w[0])} ${hl(w[1])} ${hl(w[2])}, three friends — ${hl(w[3])}, ${hl(w[4])}, ${hl(w[5])} — found ${hl(w[6])} ${hl(w[7])} ${hl(w[8])}.`,
+        w => `The recipe: ${hl(w[0])}, ${hl(w[1])}, ${hl(w[2])}, ${hl(w[3])}, ${hl(w[4])}, ${hl(w[5])}, ${hl(w[6])}, ${hl(w[7])}, ${hl(w[8])}.`,
+    ],
+    10: [
+        w => `${hl(w[0])} ${hl(w[1])} told ${hl(w[2])} ${hl(w[3])} about the ${hl(w[4])} ${hl(w[5])} ${hl(w[6])} hidden in ${hl(w[7])} ${hl(w[8])} ${hl(w[9])}.`,
+        w => `The ${hl(w[0])} ${hl(w[1])} ${hl(w[2])} ${hl(w[3])} ${hl(w[4])} lived beside ${hl(w[5])} ${hl(w[6])} ${hl(w[7])} ${hl(w[8])} ${hl(w[9])}.`,
+    ],
+    11: [
+        w => `${hl(w[0])} ${hl(w[1])} ${hl(w[2])} and ${hl(w[3])} ${hl(w[4])} ${hl(w[5])} discovered ${hl(w[6])} ${hl(w[7])} ${hl(w[8])} ${hl(w[9])} ${hl(w[10])}.`,
+        w => `In ${hl(w[0])} ${hl(w[1])}, the ${hl(w[2])} ${hl(w[3])} ${hl(w[4])} sang of ${hl(w[5])} ${hl(w[6])} ${hl(w[7])} ${hl(w[8])} ${hl(w[9])} ${hl(w[10])}.`,
+    ],
+    12: [
+        w => `${hl(w[0])} ${hl(w[1])} ${hl(w[2])} met ${hl(w[3])} ${hl(w[4])} ${hl(w[5])} at the ${hl(w[6])} ${hl(w[7])} ${hl(w[8])} ${hl(w[9])} ${hl(w[10])} ${hl(w[11])}.`,
+        w => `The twelve treasures: ${hl(w[0])}, ${hl(w[1])}, ${hl(w[2])}, ${hl(w[3])}, ${hl(w[4])}, ${hl(w[5])}, ${hl(w[6])}, ${hl(w[7])}, ${hl(w[8])}, ${hl(w[9])}, ${hl(w[10])}, ${hl(w[11])}.`,
+    ],
+};
 
-function highlight(word) {
+function hl(word) {
     return `<span class="passphrase-word">${word}</span>`;
 }
 
-function generateStory(templateIndex = null) {
-    if (passphraseWords.length === 0) return '';
+function generateStory(idx = null) {
+    const count = passphraseWords.length;
+    if (count === 0) return '';
     
-    if (templateIndex === null) {
-        templateIndex = currentStoryTemplate;
+    // Clamp to supported range (3-12)
+    const templateKey = Math.max(3, Math.min(12, count));
+    const templates = storyTemplatesByLength[templateKey];
+    
+    if (!templates || templates.length === 0) {
+        // Fallback: just list the words
+        return passphraseWords.map(w => hl(w)).join(' &mdash; ');
     }
     
-    const template = storyTemplates[templateIndex % storyTemplates.length];
-    return template(passphraseWords);
+    const templateIdx = (idx ?? currentStoryTemplate) % templates.length;
+    return templates[templateIdx](passphraseWords);
 }
 
 function toggleMemoryAid() {
@@ -635,24 +652,22 @@ function toggleMemoryAid() {
     const icon = document.getElementById('memoryAidIcon');
     const text = document.getElementById('memoryAidText');
     
-    if (container.classList.contains('d-none')) {
-        // Show memory aid
-        container.classList.remove('d-none');
-        icon.className = 'bi bi-lightbulb-fill';
-        text.textContent = 'Hide Aid';
-        
-        // Generate initial story
+    const isHidden = container?.classList.contains('d-none');
+    container?.classList.toggle('d-none', !isHidden);
+    
+    if (icon) icon.className = isHidden ? 'bi bi-lightbulb-fill' : 'bi bi-lightbulb';
+    if (text) text.textContent = isHidden ? 'Hide Aid' : 'Memory Aid';
+    
+    if (isHidden) {
         document.getElementById('memoryStory').innerHTML = generateStory();
-    } else {
-        // Hide memory aid
-        container.classList.add('d-none');
-        icon.className = 'bi bi-lightbulb';
-        text.textContent = 'Memory Aid';
     }
 }
 
 function regenerateStory() {
-    currentStoryTemplate = (currentStoryTemplate + 1) % storyTemplates.length;
+    const count = passphraseWords.length;
+    const templateKey = Math.max(3, Math.min(12, count));
+    const templates = storyTemplatesByLength[templateKey] || [];
+    currentStoryTemplate = (currentStoryTemplate + 1) % Math.max(1, templates.length);
     document.getElementById('memoryStory').innerHTML = generateStory(currentStoryTemplate);
 }
 
@@ -662,46 +677,29 @@ function printQrCode() {
     if (!qrImg) return;
     
     const printWindow = window.open('', '_blank');
-    printWindow.document.write(`
-        <!DOCTYPE html>
-        <html>
-        <head>
-            <title>Stegasoo RSA Key QR Code</title>
-            <style>
-                body { 
-                    display: flex; 
-                    flex-direction: column;
-                    align-items: center; 
-                    justify-content: center; 
-                    min-height: 100vh;
-                    margin: 0;
-                    font-family: sans-serif;
-                }
-                img { max-width: 400px; }
-                .warning {
-                    margin-top: 20px;
-                    padding: 10px;
-                    border: 2px solid #ff9800;
-                    background: #fff3e0;
-                    max-width: 400px;
-                    text-align: center;
-                    font-size: 12px;
-                }
-            </style>
-        </head>
-        <body>
-            <h2>Stegasoo RSA Private Key</h2>
-            <img src="${qrImg.src}" alt="RSA Key QR Code">
-            <div class="warning">
-                <strong>⚠️ SECURITY WARNING</strong><br>
-                This QR code contains your unencrypted RSA private key.<br>
-                Store securely and destroy after use.
-            </div>
-            <script>window.onload = function() { window.print(); }<\/script>
-        </body>
-        </html>
-    `);
+    printWindow.document.write(`<!DOCTYPE html>
+<html>
+<head>
+    <title>Stegasoo RSA Key QR Code</title>
+    <style>
+        body { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; margin: 0; font-family: sans-serif; }
+        img { max-width: 400px; }
+        .warning { margin-top: 20px; padding: 10px; border: 2px solid #ff9800; background: #fff3e0; max-width: 400px; text-align: center; font-size: 12px; }
+    </style>
+</head>
+<body>
+    <h2>Stegasoo RSA Private Key</h2>
+    <img src="${qrImg.src}" alt="RSA Key QR Code">
+    <div class="warning">
+        <strong>⚠️ SECURITY WARNING</strong><br>
+        This QR code contains your unencrypted RSA private key.<br>
+        Store securely and destroy after use.
+    </div>
+    <script>window.onload = function() { window.print(); }<\/script>
+</body>
+</html>`);
     printWindow.document.close();
 }
+{% endif %}
 </script>
 {% endblock %}