Redesign Tools page UI and refine site-wide styling

- Consolidate Tools into single card with tab toggle (Capacity/EXIF/Strip)
- Remove non-functional Peek feature (requires keys due to PRNG scattering)
- Add lime green (#a3e635) tool tab styling
- Add light straw gold (#fee862) card header text site-wide
- Add subtle drop shadow to headers and warning text
- Match Tools page styling to Encode/Decode pages

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

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

frontends/web/app.py

@@ -1373,26 +1373,6 @@ def api_tools_strip_metadata():
         return jsonify({"success": False, "error": str(e)}), 400
 
 
-@app.route("/api/tools/peek", methods=["POST"])
-@login_required
-def api_tools_peek():
-    """Check if image contains Stegasoo header."""
-    from stegasoo.steganography import peek_image
-
-    image_file = request.files.get("image")
-    if not image_file:
-        return jsonify({"success": False, "error": "No image provided"}), 400
-
-    try:
-        image_data = image_file.read()
-        result = peek_image(image_data)
-        result["success"] = True
-        result["filename"] = image_file.filename
-        return jsonify(result)
-    except Exception as e:
-        return jsonify({"success": False, "error": str(e)}), 400
-
-
 @app.route("/api/tools/exif", methods=["POST"])
 @login_required
 def api_tools_exif():

frontends/web/static/style.css

@@ -16,6 +16,7 @@
     --overlay-dark: rgba(0, 0, 0, 0.3);
     --overlay-light: rgba(255, 255, 255, 0.05);
     --day-highlight: #E3FF54; /* Bright yellow/green for day of week */
+    --header-gold: #fee862; /* Halfway between light straw and 24k gold */
 }
 
 /* ----------------------------------------------------------------------------
@@ -140,6 +141,17 @@ body {
     border-bottom: none;
 }
 
+.card-header h5 {
+    color: var(--header-gold);
+    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.33);
+}
+
+/* Override small warning text to use header gold */
+.text-warning.small {
+    color: var(--header-gold) !important;
+    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.33);
+}
+
 .card-link .card-header.text-center {
     padding-top: 0.5rem !important;
     padding-bottom: 0.5rem !important;

frontends/web/templates/tools.html

@@ -3,156 +3,343 @@
 {% block title %}Tools - Stegasoo{% endblock %}
 
 {% block content %}
+<style>
+/* Tool drop zone - compact */
+.tool-drop-zone {
+    position: relative;
+    min-height: 120px;
+    border: 2px dashed rgba(255, 255, 255, 0.2);
+    border-radius: 8px;
+    background: rgba(0, 0, 0, 0.2);
+    transition: all 0.3s ease;
+    overflow: hidden;
+}
+
+.tool-drop-zone.drag-over {
+    border-color: #63b3ed;
+    background: rgba(99, 179, 237, 0.1);
+}
+
+.tool-drop-zone input[type="file"] {
+    position: absolute;
+    inset: 0;
+    opacity: 0;
+    cursor: pointer;
+    z-index: 10;
+}
+
+.tool-drop-zone .drop-label {
+    text-align: center;
+    padding: 25px 20px;
+}
+
+.tool-drop-zone .drop-icon {
+    font-size: 2rem;
+    color: rgba(255, 255, 255, 0.3);
+    transition: all 0.3s ease;
+}
+
+.tool-drop-zone.drag-over .drop-icon {
+    color: #63b3ed;
+    transform: scale(1.1);
+}
+
+/* Preview state */
+.tool-drop-zone.has-file .drop-label {
+    display: none;
+}
+
+.tool-drop-zone .preview-container {
+    display: none;
+    padding: 12px;
+}
+
+.tool-drop-zone.has-file .preview-container {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+}
+
+.tool-drop-zone .preview-thumb {
+    width: 70px;
+    height: 70px;
+    object-fit: cover;
+    border-radius: 6px;
+    border: 2px solid rgba(99, 179, 237, 0.5);
+}
+
+.tool-drop-zone .preview-info {
+    flex: 1;
+    min-width: 0;
+}
+
+.tool-drop-zone .preview-name {
+    font-weight: 600;
+    color: #63b3ed;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.tool-drop-zone .preview-meta {
+    font-size: 0.8rem;
+    color: rgba(255, 255, 255, 0.5);
+}
+
+.tool-drop-zone .preview-clear {
+    position: absolute;
+    top: 8px;
+    right: 8px;
+    z-index: 20;
+    opacity: 0.7;
+}
+
+.tool-drop-zone .preview-clear:hover {
+    opacity: 1;
+}
+
+/* Result panels */
+.result-panel {
+    background: rgba(0, 0, 0, 0.3);
+    border-radius: 8px;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+/* EXIF table styling */
+.exif-table {
+    font-size: 0.85rem;
+}
+
+.exif-table th {
+    background: rgba(0, 0, 0, 0.3);
+    position: sticky;
+    top: 0;
+}
+
+.exif-table td {
+    vertical-align: middle;
+}
+
+.exif-input {
+    background: rgba(0, 0, 0, 0.3) !important;
+    border: 1px solid rgba(99, 179, 237, 0.3) !important;
+    color: #63b3ed !important;
+    font-family: monospace;
+    font-size: 0.8rem;
+    padding: 4px 8px;
+}
+
+.exif-input:focus {
+    border-color: #63b3ed !important;
+    box-shadow: 0 0 10px rgba(99, 179, 237, 0.2) !important;
+}
+
+/* Processing state */
+.processing .tool-drop-zone {
+    pointer-events: none;
+    opacity: 0.6;
+}
+
+.processing .btn {
+    pointer-events: none;
+}
+
+/* Tool section visibility */
+.tool-section { display: none; }
+.tool-section.active { display: block; }
+
+/* Lime green tool tabs */
+.tool-tabs .btn-outline-primary {
+    color: #a3e635;
+    border-color: #a3e635;
+}
+
+.tool-tabs .btn-outline-primary:hover {
+    background-color: rgba(163, 230, 53, 0.15);
+    border-color: #a3e635;
+    color: #a3e635;
+}
+
+.tool-tabs .btn-check:checked + .btn-outline-primary {
+    background-color: #a3e635;
+    border-color: #a3e635;
+    color: #1a1a2e;
+}
+</style>
+
 <div class="row justify-content-center">
-    <div class="col-lg-10">
+    <div class="col-lg-8">
-        <h4 class="mb-4"><i class="bi bi-tools me-2"></i>Image Security Toolkit</h4>
+        <div class="card">
+            <div class="card-header">
+                <h5 class="mb-0"><i class="bi bi-tools me-2"></i>Image Security Toolkit</h5>
+            </div>
+            <div class="card-body">
+                <!-- Tool Selector Tabs -->
+                <div class="btn-group tool-tabs w-100 mb-4" role="group">
+                    <input type="radio" class="btn-check" name="tool_type" id="toolCapacity" value="capacity" checked>
+                    <label class="btn btn-outline-primary" for="toolCapacity">
+                        <i class="bi bi-rulers me-1"></i> Capacity
+                    </label>
+                    <input type="radio" class="btn-check" name="tool_type" id="toolExif" value="exif">
+                    <label class="btn btn-outline-primary" for="toolExif">
+                        <i class="bi bi-card-text me-1"></i> EXIF
+                    </label>
+                    <input type="radio" class="btn-check" name="tool_type" id="toolStrip" value="strip">
+                    <label class="btn btn-outline-primary" for="toolStrip">
+                        <i class="bi bi-eraser me-1"></i> Strip
+                    </label>
+                </div>
 
-        <!-- Tool Tabs -->
+                <!-- ============================================================ -->
-        <ul class="nav nav-pills mb-4" role="tablist">
+                <!-- CAPACITY CALCULATOR -->
-            <li class="nav-item" role="presentation">
+                <!-- ============================================================ -->
-                <button class="nav-link active" data-bs-toggle="pill" data-bs-target="#capacity" type="button">
+                <div class="tool-section active" id="capacitySection">
-                    <i class="bi bi-rulers me-1"></i>Capacity
+                    <p class="text-muted small mb-3">Check how much data can be hidden in an image</p>
-                </button>
-            </li>
-            <li class="nav-item" role="presentation">
-                <button class="nav-link" data-bs-toggle="pill" data-bs-target="#exif" type="button">
-                    <i class="bi bi-card-text me-1"></i>EXIF Editor
-                </button>
-            </li>
-            <li class="nav-item" role="presentation">
-                <button class="nav-link" data-bs-toggle="pill" data-bs-target="#peek" type="button">
-                    <i class="bi bi-search me-1"></i>Peek
-                </button>
-            </li>
-        </ul>
 
-        <!-- Tab Content -->
+                    <div class="tool-drop-zone" id="capacityZone">
-        <div class="tab-content">
+                        <input type="file" accept="image/*" id="capacityFile">
-
+                        <div class="drop-label">
-            <!-- Capacity Calculator -->
+                            <i class="bi bi-image drop-icon d-block mb-2"></i>
-            <div class="tab-pane fade show active" id="capacity" role="tabpanel">
+                            <span class="text-muted">Drop image or click to browse</span>
-                <div class="card">
-                    <div class="card-body">
-                        <p class="text-muted mb-3">Check how much data can be hidden in an image.</p>
-
-                        <div class="mb-3">
-                            <input type="file" class="form-control" id="capacityFile" accept="image/*">
                         </div>
+                        <div class="preview-container">
+                            <img class="preview-thumb" id="capacityThumb">
+                            <div class="preview-info">
+                                <div class="preview-name" id="capacityName">image.jpg</div>
+                                <div class="preview-meta" id="capacityMeta">-- × -- · -- MB</div>
+                            </div>
+                        </div>
+                        <button type="button" class="btn btn-sm btn-outline-secondary preview-clear d-none" id="capacityClear">
+                            <i class="bi bi-x"></i>
+                        </button>
+                    </div>
 
-                        <div id="capacityResult" class="d-none">
+                    <!-- Results -->
-                            <table class="table table-sm table-dark mb-0">
+                    <div class="result-panel p-3 mt-3 d-none" id="capacityResult">
-                                <tbody>
+                        <div class="row text-center">
+                            <div class="col-6 col-md-3 mb-3 mb-md-0">
+                                <div class="text-muted small">Dimensions</div>
+                                <div class="fw-bold" id="capDimensions">--</div>
+                            </div>
+                            <div class="col-6 col-md-3 mb-3 mb-md-0">
+                                <div class="text-muted small">Megapixels</div>
+                                <div class="fw-bold" id="capMegapixels">--</div>
+                            </div>
+                            <div class="col-6 col-md-3">
+                                <div class="text-muted small">LSB Capacity</div>
+                                <div class="fw-bold text-primary" id="capLsb">--</div>
+                            </div>
+                            <div class="col-6 col-md-3">
+                                <div class="text-muted small">DCT Capacity</div>
+                                <div class="fw-bold text-warning" id="capDct">--</div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- ============================================================ -->
+                <!-- EXIF EDITOR -->
+                <!-- ============================================================ -->
+                <div class="tool-section" id="exifSection">
+                    <p class="text-muted small mb-3">View, edit, or remove image metadata</p>
+
+                    <div class="tool-drop-zone" id="exifZone">
+                        <input type="file" accept="image/*" id="exifFile">
+                        <div class="drop-label">
+                            <i class="bi bi-card-image drop-icon d-block mb-2"></i>
+                            <span class="text-muted">Drop image or click to browse</span>
+                        </div>
+                        <div class="preview-container">
+                            <img class="preview-thumb" id="exifThumb">
+                            <div class="preview-info">
+                                <div class="preview-name" id="exifName">image.jpg</div>
+                                <div class="preview-meta"><span id="exifFieldCount">0</span> metadata fields</div>
+                                <div id="exifNotEditable" class="text-warning small d-none">
+                                    <i class="bi bi-exclamation-triangle me-1"></i>Non-JPEG: clear only
+                                </div>
+                            </div>
+                        </div>
+                        <button type="button" class="btn btn-sm btn-outline-secondary preview-clear d-none" id="exifClear">
+                            <i class="bi bi-x"></i>
+                        </button>
+                    </div>
+
+                    <!-- EXIF Data Editor -->
+                    <div id="exifEditor" class="d-none mt-3">
+                        <div class="table-responsive result-panel" style="max-height: 250px; overflow-y: auto;">
+                            <table class="table table-sm table-dark table-hover exif-table mb-0">
+                                <thead>
                                     <tr>
-                                        <td class="text-muted">Image</td>
+                                        <th style="width: 35%">Field</th>
-                                        <td id="capFilename" class="font-monospace"></td>
+                                        <th>Value</th>
+                                        <th style="width: 40px"></th>
                                     </tr>
-                                    <tr>
+                                </thead>
-                                        <td class="text-muted">Dimensions</td>
+                                <tbody id="exifTable"></tbody>
-                                        <td><span id="capDimensions"></span> (<span id="capMegapixels"></span> MP)</td>
-                                    </tr>
-                                    <tr>
-                                        <td class="text-muted">LSB Capacity</td>
-                                        <td id="capLsb" class="text-success font-monospace"></td>
-                                    </tr>
-                                    <tr>
-                                        <td class="text-muted">DCT Capacity</td>
-                                        <td id="capDct" class="font-monospace"></td>
-                                    </tr>
-                                </tbody>
                             </table>
                         </div>
-                    </div>
-                </div>
-            </div>
 
-            <!-- EXIF Editor -->
+                        <div id="exifEmpty" class="result-panel text-muted text-center py-4 d-none">
-            <div class="tab-pane fade" id="exif" role="tabpanel">
+                            <i class="bi bi-inbox fs-4 d-block mb-2"></i>No metadata found
-                <div class="card">
-                    <div class="card-body">
-                        <p class="text-muted mb-3">View, edit, or remove image metadata (EXIF, GPS, camera info).</p>
-
-                        <div class="mb-3">
-                            <input type="file" class="form-control" id="exifFile" accept="image/*">
                         </div>
 
-                        <div id="exifEditor" class="d-none">
+                        <!-- Action Buttons -->
-                            <div class="row mb-3">
+                        <div class="d-flex gap-2 mt-3 pt-3 border-top border-secondary">
-                                <!-- Thumbnail -->
+                            <button type="button" class="btn btn-outline-danger" id="exifClearAll">
-                                <div class="col-auto">
+                                <i class="bi bi-trash me-1"></i>Clear All
-                                    <img id="exifThumb" class="rounded" style="max-height: 120px; max-width: 120px; object-fit: cover;">
+                            </button>
-                                </div>
+                            <div class="ms-auto d-flex gap-2">
-                                <!-- File info -->
+                                <button type="button" class="btn btn-outline-secondary" id="exifDiscard">
-                                <div class="col">
+                                    Discard
-                                    <h6 id="exifFilename" class="mb-1"></h6>
+                                </button>
-                                    <small class="text-muted"><span id="exifFieldCount">0</span> metadata fields</small>
+                                <button type="button" class="btn btn-primary" id="exifSave" disabled>
-                                    <div id="exifNotEditable" class="text-warning small d-none">
+                                    <i class="bi bi-download me-1"></i>Save
-                                        <i class="bi bi-exclamation-triangle me-1"></i>Non-JPEG: read-only
-                                    </div>
-                                </div>
-                            </div>
-
-                            <!-- EXIF Fields Table -->
-                            <div class="table-responsive" style="max-height: 300px; overflow-y: auto;">
-                                <table class="table table-sm table-dark table-hover mb-0">
-                                    <thead class="sticky-top bg-dark">
-                                        <tr>
-                                            <th style="width: 35%">Field</th>
-                                            <th>Value</th>
-                                            <th style="width: 40px"></th>
-                                        </tr>
-                                    </thead>
-                                    <tbody id="exifTable"></tbody>
-                                </table>
-                            </div>
-
-                            <div id="exifEmpty" class="text-muted text-center py-4 d-none">
-                                <i class="bi bi-inbox"></i> No metadata found
-                            </div>
-
-                            <!-- Action Buttons -->
-                            <div class="d-flex gap-2 mt-3 pt-3 border-top border-secondary">
-                                <button type="button" class="btn btn-outline-danger" id="exifClearAll">
-                                    <i class="bi bi-trash me-1"></i>Clear All
                                 </button>
-                                <div class="ms-auto d-flex gap-2">
-                                    <button type="button" class="btn btn-outline-secondary" id="exifDiscard">
-                                        Discard
-                                    </button>
-                                    <button type="button" class="btn btn-primary" id="exifSave" disabled>
-                                        <i class="bi bi-download me-1"></i>Save Changes
-                                    </button>
-                                </div>
                             </div>
                         </div>
                     </div>
                 </div>
-            </div>
 
-            <!-- Peek (Header Detection) -->
+                <!-- ============================================================ -->
-            <div class="tab-pane fade" id="peek" role="tabpanel">
+                <!-- STRIP METADATA -->
-                <div class="card">
+                <!-- ============================================================ -->
-                    <div class="card-body">
+                <div class="tool-section" id="stripSection">
-                        <p class="text-muted mb-3">Check if an image contains Stegasoo hidden data (without decrypting).</p>
+                    <p class="text-muted small mb-3">Remove all EXIF data and get a clean image</p>
 
-                        <div class="mb-3">
+                    <div class="tool-drop-zone" id="stripZone">
-                            <input type="file" class="form-control" id="peekFile" accept="image/*">
+                        <input type="file" accept="image/*" id="stripFile">
+                        <div class="drop-label">
+                            <i class="bi bi-file-earmark-x drop-icon d-block mb-2"></i>
+                            <span class="text-muted">Drop image or click to browse</span>
                         </div>
+                        <div class="preview-container">
+                            <img class="preview-thumb" id="stripThumb">
+                            <div class="preview-info">
+                                <div class="preview-name" id="stripName">image.jpg</div>
+                                <div class="preview-meta" id="stripMeta">--</div>
+                            </div>
+                        </div>
+                        <button type="button" class="btn btn-sm btn-outline-secondary preview-clear d-none" id="stripClearBtn">
+                            <i class="bi bi-x"></i>
+                        </button>
+                    </div>
 
-                        <div id="peekResult" class="d-none">
+                    <!-- Format selector and action -->
-                            <div id="peekFound" class="alert alert-success d-none">
+                    <div id="stripOptions" class="d-none mt-3">
-                                <i class="bi bi-check-circle me-2"></i>
+                        <div class="d-flex align-items-center gap-3">
-                                <strong>Stegasoo data detected!</strong>
+                            <label class="form-label mb-0 small text-muted">Output:</label>
-                                <br><span class="text-muted">Mode: <span id="peekMode" class="font-monospace"></span></span>
+                            <select class="form-select form-select-sm" id="stripFormat" style="width: auto;">
-                            </div>
+                                <option value="PNG" selected>PNG (lossless)</option>
-                            <div id="peekNotFound" class="alert alert-secondary d-none">
+                                <option value="JPEG">JPEG</option>
-                                <i class="bi bi-x-circle me-2"></i>
+                            </select>
-                                No Stegasoo header detected in this image.
+                            <button type="button" class="btn btn-danger ms-auto" id="stripAction">
-                            </div>
+                                <i class="bi bi-eraser me-1"></i>Strip & Download
+                            </button>
                         </div>
                     </div>
                 </div>
-            </div>
 
+            </div>
         </div>
     </div>
 </div>
@@ -160,10 +347,95 @@
 
 {% block scripts %}
 <script>
-// Capacity Calculator
+// ============================================================================
-document.getElementById('capacityFile')?.addEventListener('change', async function() {
+// TAB SWITCHING
-    const file = this.files[0];
+// ============================================================================
-    if (!file) return;
+
+const toolRadios = document.querySelectorAll('input[name="tool_type"]');
+const toolSections = {
+    capacity: document.getElementById('capacitySection'),
+    exif: document.getElementById('exifSection'),
+    strip: document.getElementById('stripSection')
+};
+
+function switchTool() {
+    const selected = document.querySelector('input[name="tool_type"]:checked').value;
+    Object.entries(toolSections).forEach(([key, section]) => {
+        section.classList.toggle('active', key === selected);
+    });
+}
+
+toolRadios.forEach(radio => radio.addEventListener('change', switchTool));
+
+// ============================================================================
+// SHARED - Drop zone helpers
+// ============================================================================
+
+function setupDropZone(zoneId, fileInputId, onFile) {
+    const zone = document.getElementById(zoneId);
+    const input = document.getElementById(fileInputId);
+    if (!zone || !input) return;
+
+    zone.addEventListener('dragover', e => { e.preventDefault(); zone.classList.add('drag-over'); });
+    zone.addEventListener('dragleave', () => zone.classList.remove('drag-over'));
+    zone.addEventListener('drop', e => {
+        e.preventDefault();
+        zone.classList.remove('drag-over');
+        if (e.dataTransfer.files[0]) {
+            input.files = e.dataTransfer.files;
+            input.dispatchEvent(new Event('change'));
+        }
+    });
+
+    input.addEventListener('change', function() {
+        if (this.files[0]) onFile(this.files[0]);
+    });
+}
+
+function showPreview(zoneId, file, thumbId, nameId, metaText, clearBtnId) {
+    const zone = document.getElementById(zoneId);
+    const thumb = document.getElementById(thumbId);
+    const name = document.getElementById(nameId);
+    const clearBtn = document.getElementById(clearBtnId);
+
+    zone.classList.add('has-file');
+    name.textContent = file.name;
+
+    if (metaText) {
+        const metaEl = name.nextElementSibling;
+        if (metaEl) metaEl.textContent = metaText;
+    }
+
+    const reader = new FileReader();
+    reader.onload = e => thumb.src = e.target.result;
+    reader.readAsDataURL(file);
+
+    clearBtn?.classList.remove('d-none');
+}
+
+function clearDropZone(zoneId, fileInputId, clearBtnId, extraCleanup) {
+    const zone = document.getElementById(zoneId);
+    const input = document.getElementById(fileInputId);
+    const clearBtn = document.getElementById(clearBtnId);
+
+    zone?.classList.remove('has-file');
+    if (input) input.value = '';
+    clearBtn?.classList.add('d-none');
+    if (extraCleanup) extraCleanup();
+}
+
+function formatBytes(bytes) {
+    if (bytes < 1024) return bytes + ' B';
+    if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + ' KB';
+    return (bytes / (1024 * 1024)).toFixed(1) + ' MB';
+}
+
+// ============================================================================
+// CAPACITY CALCULATOR
+// ============================================================================
+
+setupDropZone('capacityZone', 'capacityFile', async (file) => {
+    showPreview('capacityZone', file, 'capacityThumb', 'capacityName', formatBytes(file.size), 'capacityClear');
 
     const formData = new FormData();
     formData.append('image', file);
@@ -173,13 +445,14 @@ document.getElementById('capacityFile')?.addEventListener('change', async functi
         const data = await res.json();
 
         if (data.success) {
-            document.getElementById('capFilename').textContent = data.filename;
+            document.getElementById('capacityMeta').textContent =
-            document.getElementById('capDimensions').textContent = `${data.width} x ${data.height}`;
+                `${data.width} × ${data.height} · ${formatBytes(file.size)}`;
-            document.getElementById('capMegapixels').textContent = data.megapixels;
+            document.getElementById('capDimensions').textContent = `${data.width} × ${data.height}`;
-            document.getElementById('capLsb').textContent = `${data.lsb.capacity_kb.toFixed(1)} KB`;
+            document.getElementById('capMegapixels').textContent = data.megapixels + ' MP';
+            document.getElementById('capLsb').textContent = data.lsb.capacity_kb.toFixed(1) + ' KB';
             document.getElementById('capDct').textContent = data.dct.available
-                ? `${data.dct.capacity_kb.toFixed(1)} KB`
+                ? data.dct.capacity_kb.toFixed(1) + ' KB'
-                : 'N/A (scipy required)';
+                : 'N/A';
             document.getElementById('capacityResult').classList.remove('d-none');
         }
     } catch (err) {
@@ -187,17 +460,25 @@ document.getElementById('capacityFile')?.addEventListener('change', async functi
     }
 });
 
-// EXIF Editor
+document.getElementById('capacityClear')?.addEventListener('click', () => {
+    clearDropZone('capacityZone', 'capacityFile', 'capacityClear', () => {
+        document.getElementById('capacityResult').classList.add('d-none');
+    });
+});
+
+// ============================================================================
+// EXIF EDITOR
+// ============================================================================
+
 let exifOriginalData = {};
 let exifCurrentData = {};
 let exifEditable = false;
 let exifCurrentFile = null;
 
-document.getElementById('exifFile')?.addEventListener('change', async function() {
+setupDropZone('exifZone', 'exifFile', async (file) => {
-    const file = this.files[0];
-    if (!file) return;
-
     exifCurrentFile = file;
+    showPreview('exifZone', file, 'exifThumb', 'exifName', '', 'exifClear');
+
     const formData = new FormData();
     formData.append('image', file);
 
@@ -206,18 +487,10 @@ document.getElementById('exifFile')?.addEventListener('change', async function()
         const data = await res.json();
 
         if (data.success) {
-            // Show thumbnail
-            const reader = new FileReader();
-            reader.onload = e => document.getElementById('exifThumb').src = e.target.result;
-            reader.readAsDataURL(file);
-
-            // Store data
             exifOriginalData = JSON.parse(JSON.stringify(data.exif));
             exifCurrentData = JSON.parse(JSON.stringify(data.exif));
             exifEditable = data.editable;
 
-            // Update UI
-            document.getElementById('exifFilename').textContent = data.filename;
             document.getElementById('exifFieldCount').textContent = data.field_count;
             document.getElementById('exifNotEditable').classList.toggle('d-none', data.editable);
             document.getElementById('exifEditor').classList.remove('d-none');
@@ -230,6 +503,15 @@ document.getElementById('exifFile')?.addEventListener('change', async function()
     }
 });
 
+document.getElementById('exifClear')?.addEventListener('click', () => {
+    clearDropZone('exifZone', 'exifFile', 'exifClear', () => {
+        document.getElementById('exifEditor').classList.add('d-none');
+        exifCurrentFile = null;
+        exifOriginalData = {};
+        exifCurrentData = {};
+    });
+});
+
 function renderExifTable() {
     const tbody = document.getElementById('exifTable');
     const empty = document.getElementById('exifEmpty');
@@ -243,16 +525,11 @@ function renderExifTable() {
 
     empty.classList.add('d-none');
     tbody.innerHTML = entries.map(([key, value]) => {
-        // Format value for display
+        let displayVal = typeof value === 'object' ? JSON.stringify(value) : value;
-        let displayVal = value;
+        if (typeof displayVal === 'string' && displayVal.length > 50) {
-        if (typeof value === 'object') {
+            displayVal = displayVal.substring(0, 47) + '...';
-            displayVal = JSON.stringify(value);
-        }
-        if (typeof displayVal === 'string' && displayVal.length > 60) {
-            displayVal = displayVal.substring(0, 57) + '...';
         }
 
-        // Check if field is editable (common string fields)
         const editableFields = ['Make', 'Model', 'Software', 'Artist', 'Copyright', 'ImageDescription', 'DateTime', 'DateTimeOriginal', 'DateTimeDigitized', 'UserComment', 'LensMake', 'LensModel'];
         const canEdit = exifEditable && editableFields.includes(key) && typeof value === 'string';
 
@@ -261,7 +538,7 @@ function renderExifTable() {
                 <td class="text-muted small">${key}</td>
                 <td class="font-monospace small">
                     ${canEdit
-                        ? `<input type="text" class="form-control form-control-sm bg-dark text-light border-secondary exif-input"
+                        ? `<input type="text" class="form-control form-control-sm exif-input"
                              value="${String(value).replace(/"/g, '&quot;')}" data-field="${key}">`
                         : `<span title="${String(displayVal)}">${displayVal}</span>`
                     }
@@ -278,7 +555,6 @@ function renderExifTable() {
         `;
     }).join('');
 
-    // Add event listeners for edits
     tbody.querySelectorAll('.exif-input').forEach(input => {
         input.addEventListener('input', function() {
             exifCurrentData[this.dataset.field] = this.value;
@@ -300,7 +576,6 @@ function updateSaveButton() {
     document.getElementById('exifSave').disabled = !changed;
 }
 
-// Clear All button
 document.getElementById('exifClearAll')?.addEventListener('click', async function() {
     if (!exifCurrentFile) return;
     if (!confirm('Remove all metadata from this image?')) return;
@@ -326,22 +601,11 @@ document.getElementById('exifClearAll')?.addEventListener('click', async functio
             document.body.removeChild(a);
             URL.revokeObjectURL(url);
 
-            // Clear the current data to show empty state
             exifCurrentData = {};
             exifOriginalData = {};
             renderExifTable();
         } else {
-            // Try to parse error
+            alert('Failed to clear metadata');
-            const contentType = res.headers.get('content-type');
-            if (contentType && contentType.includes('application/json')) {
-                const err = await res.json();
-                alert(err.error || 'Failed to clear metadata');
-            } else if (res.status === 401 || res.status === 302) {
-                alert('Session expired. Please log in again.');
-                window.location.href = '/login';
-            } else {
-                alert(`Failed to clear metadata (${res.status})`);
-            }
         }
     } catch (err) {
         console.error(err);
@@ -352,29 +616,21 @@ document.getElementById('exifClearAll')?.addEventListener('click', async functio
     }
 });
 
-// Discard button
 document.getElementById('exifDiscard')?.addEventListener('click', function() {
     exifCurrentData = JSON.parse(JSON.stringify(exifOriginalData));
     renderExifTable();
     updateSaveButton();
 });
 
-// Save button
 document.getElementById('exifSave')?.addEventListener('click', async function() {
     if (!exifCurrentFile || !exifEditable) return;
 
-    // Find what changed
     const updates = {};
     for (const [key, val] of Object.entries(exifCurrentData)) {
-        if (exifOriginalData[key] !== val) {
+        if (exifOriginalData[key] !== val) updates[key] = val;
-            updates[key] = val;
-        }
     }
-    // Mark deleted fields
     for (const key of Object.keys(exifOriginalData)) {
-        if (!(key in exifCurrentData)) {
+        if (!(key in exifCurrentData)) updates[key] = null;
-            updates[key] = null;
-        }
     }
 
     if (Object.keys(updates).length === 0) return;
@@ -401,20 +657,10 @@ document.getElementById('exifSave')?.addEventListener('click', async function()
             document.body.removeChild(a);
             URL.revokeObjectURL(url);
 
-            // Update original to match current
             exifOriginalData = JSON.parse(JSON.stringify(exifCurrentData));
             updateSaveButton();
         } else {
-            const contentType = res.headers.get('content-type');
+            alert('Failed to save');
-            if (contentType && contentType.includes('application/json')) {
-                const err = await res.json();
-                alert(err.error || 'Failed to save');
-            } else if (res.status === 401 || res.status === 302) {
-                alert('Session expired. Please log in again.');
-                window.location.href = '/login';
-            } else {
-                alert(`Failed to save (${res.status})`);
-            }
         }
     } catch (err) {
         console.error(err);
@@ -426,30 +672,59 @@ document.getElementById('exifSave')?.addEventListener('click', async function()
     }
 });
 
-// Peek (Header Detection)
+// ============================================================================
-document.getElementById('peekFile')?.addEventListener('change', async function() {
+// STRIP METADATA
-    const file = this.files[0];
+// ============================================================================
-    if (!file) return;
 
+let stripCurrentFile = null;
+
+setupDropZone('stripZone', 'stripFile', (file) => {
+    stripCurrentFile = file;
+    showPreview('stripZone', file, 'stripThumb', 'stripName', formatBytes(file.size), 'stripClearBtn');
+    document.getElementById('stripMeta').textContent = formatBytes(file.size);
+    document.getElementById('stripOptions').classList.remove('d-none');
+});
+
+document.getElementById('stripClearBtn')?.addEventListener('click', () => {
+    clearDropZone('stripZone', 'stripFile', 'stripClearBtn', () => {
+        document.getElementById('stripOptions').classList.add('d-none');
+        stripCurrentFile = null;
+    });
+});
+
+document.getElementById('stripAction')?.addEventListener('click', async function() {
+    if (!stripCurrentFile) return;
+
+    const format = document.getElementById('stripFormat').value;
     const formData = new FormData();
-    formData.append('image', file);
+    formData.append('image', stripCurrentFile);
+    formData.append('format', format);
+
+    const btn = this;
+    btn.disabled = true;
+    btn.innerHTML = '<span class="spinner-border spinner-border-sm me-1"></span>Processing...';
 
     try {
-        const res = await fetch('/api/tools/peek', { method: 'POST', body: formData });
+        const res = await fetch('/api/tools/exif/clear', { method: 'POST', body: formData });
-        const data = await res.json();
+        if (res.ok) {
-
+            const blob = await res.blob();
-        document.getElementById('peekResult').classList.remove('d-none');
+            const url = URL.createObjectURL(blob);
-
+            const a = document.createElement('a');
-        if (data.has_stegasoo) {
+            a.href = url;
-            document.getElementById('peekFound').classList.remove('d-none');
+            a.download = res.headers.get('Content-Disposition')?.split('filename=')[1]?.replace(/"/g, '') || `clean.${format.toLowerCase()}`;
-            document.getElementById('peekNotFound').classList.add('d-none');
+            document.body.appendChild(a);
-            document.getElementById('peekMode').textContent = data.mode?.toUpperCase() || 'Unknown';
+            a.click();
+            document.body.removeChild(a);
+            URL.revokeObjectURL(url);
         } else {
-            document.getElementById('peekFound').classList.add('d-none');
+            alert('Failed to strip metadata');
-            document.getElementById('peekNotFound').classList.remove('d-none');
         }
     } catch (err) {
         console.error(err);
+        alert('Failed to strip metadata: ' + err.message);
+    } finally {
+        btn.disabled = false;
+        btn.innerHTML = '<i class="bi bi-eraser me-1"></i>Strip & Download';
     }
 });
 </script>