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>
This commit is contained in:
Aaron D. Lee
@@ -1373,26 +1373,6 @@ def api_tools_strip_metadata():
|
|||||||
return jsonify({"success": False, "error": str(e)}), 400
|
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"])
|
@app.route("/api/tools/exif", methods=["POST"])
|
||||||
@login_required
|
@login_required
|
||||||
def api_tools_exif():
|
def api_tools_exif():
|
||||||
|
|||||||
@@ -16,6 +16,7 @@
|
|||||||
--overlay-dark: rgba(0, 0, 0, 0.3);
|
--overlay-dark: rgba(0, 0, 0, 0.3);
|
||||||
--overlay-light: rgba(255, 255, 255, 0.05);
|
--overlay-light: rgba(255, 255, 255, 0.05);
|
||||||
--day-highlight: #E3FF54; /* Bright yellow/green for day of week */
|
--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;
|
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 {
|
.card-link .card-header.text-center {
|
||||||
padding-top: 0.5rem !important;
|
padding-top: 0.5rem !important;
|
||||||
padding-bottom: 0.5rem !important;
|
padding-bottom: 0.5rem !important;
|
||||||
|
|||||||
@@ -3,98 +3,272 @@
|
|||||||
{% block title %}Tools - Stegasoo{% endblock %}
|
{% block title %}Tools - Stegasoo{% endblock %}
|
||||||
|
|
||||||
{% block content %}
|
{% 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="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>
|
|
||||||
|
|
||||||
<!-- Tool Tabs -->
|
|
||||||
<ul class="nav nav-pills mb-4" role="tablist">
|
|
||||||
<li class="nav-item" role="presentation">
|
|
||||||
<button class="nav-link active" data-bs-toggle="pill" data-bs-target="#capacity" type="button">
|
|
||||||
<i class="bi bi-rulers me-1"></i>Capacity
|
|
||||||
</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="tab-content">
|
|
||||||
|
|
||||||
<!-- Capacity Calculator -->
|
|
||||||
<div class="tab-pane fade show active" id="capacity" role="tabpanel">
|
|
||||||
<div class="card">
|
<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">
|
<div class="card-body">
|
||||||
<p class="text-muted mb-3">Check how much data can be hidden in an image.</p>
|
<!-- Tool Selector Tabs -->
|
||||||
|
<div class="btn-group tool-tabs w-100 mb-4" role="group">
|
||||||
<div class="mb-3">
|
<input type="radio" class="btn-check" name="tool_type" id="toolCapacity" value="capacity" checked>
|
||||||
<input type="file" class="form-control" id="capacityFile" accept="image/*">
|
<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>
|
</div>
|
||||||
|
|
||||||
<div id="capacityResult" class="d-none">
|
<!-- ============================================================ -->
|
||||||
<table class="table table-sm table-dark mb-0">
|
<!-- CAPACITY CALCULATOR -->
|
||||||
<tbody>
|
<!-- ============================================================ -->
|
||||||
<tr>
|
<div class="tool-section active" id="capacitySection">
|
||||||
<td class="text-muted">Image</td>
|
<p class="text-muted small mb-3">Check how much data can be hidden in an image</p>
|
||||||
<td id="capFilename" class="font-monospace"></td>
|
|
||||||
</tr>
|
<div class="tool-drop-zone" id="capacityZone">
|
||||||
<tr>
|
<input type="file" accept="image/*" id="capacityFile">
|
||||||
<td class="text-muted">Dimensions</td>
|
<div class="drop-label">
|
||||||
<td><span id="capDimensions"></span> (<span id="capMegapixels"></span> MP)</td>
|
<i class="bi bi-image drop-icon d-block mb-2"></i>
|
||||||
</tr>
|
<span class="text-muted">Drop image or click to browse</span>
|
||||||
<tr>
|
</div>
|
||||||
<td class="text-muted">LSB Capacity</td>
|
<div class="preview-container">
|
||||||
<td id="capLsb" class="text-success font-monospace"></td>
|
<img class="preview-thumb" id="capacityThumb">
|
||||||
</tr>
|
<div class="preview-info">
|
||||||
<tr>
|
<div class="preview-name" id="capacityName">image.jpg</div>
|
||||||
<td class="text-muted">DCT Capacity</td>
|
<div class="preview-meta" id="capacityMeta">-- × -- · -- MB</div>
|
||||||
<td id="capDct" class="font-monospace"></td>
|
</div>
|
||||||
</tr>
|
</div>
|
||||||
</tbody>
|
<button type="button" class="btn btn-sm btn-outline-secondary preview-clear d-none" id="capacityClear">
|
||||||
</table>
|
<i class="bi bi-x"></i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Results -->
|
||||||
|
<div class="result-panel p-3 mt-3 d-none" id="capacityResult">
|
||||||
|
<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>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- EXIF Editor -->
|
<!-- ============================================================ -->
|
||||||
<div class="tab-pane fade" id="exif" role="tabpanel">
|
<!-- EXIF EDITOR -->
|
||||||
<div class="card">
|
<!-- ============================================================ -->
|
||||||
<div class="card-body">
|
<div class="tool-section" id="exifSection">
|
||||||
<p class="text-muted mb-3">View, edit, or remove image metadata (EXIF, GPS, camera info).</p>
|
<p class="text-muted small mb-3">View, edit, or remove image metadata</p>
|
||||||
|
|
||||||
<div class="mb-3">
|
<div class="tool-drop-zone" id="exifZone">
|
||||||
<input type="file" class="form-control" id="exifFile" accept="image/*">
|
<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>
|
||||||
|
<div class="preview-container">
|
||||||
<div id="exifEditor" class="d-none">
|
<img class="preview-thumb" id="exifThumb">
|
||||||
<div class="row mb-3">
|
<div class="preview-info">
|
||||||
<!-- Thumbnail -->
|
<div class="preview-name" id="exifName">image.jpg</div>
|
||||||
<div class="col-auto">
|
<div class="preview-meta"><span id="exifFieldCount">0</span> metadata fields</div>
|
||||||
<img id="exifThumb" class="rounded" style="max-height: 120px; max-width: 120px; object-fit: cover;">
|
|
||||||
</div>
|
|
||||||
<!-- File info -->
|
|
||||||
<div class="col">
|
|
||||||
<h6 id="exifFilename" class="mb-1"></h6>
|
|
||||||
<small class="text-muted"><span id="exifFieldCount">0</span> metadata fields</small>
|
|
||||||
<div id="exifNotEditable" class="text-warning small d-none">
|
<div id="exifNotEditable" class="text-warning small d-none">
|
||||||
<i class="bi bi-exclamation-triangle me-1"></i>Non-JPEG: read-only
|
<i class="bi bi-exclamation-triangle me-1"></i>Non-JPEG: clear only
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</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 Fields Table -->
|
<!-- EXIF Data Editor -->
|
||||||
<div class="table-responsive" style="max-height: 300px; overflow-y: auto;">
|
<div id="exifEditor" class="d-none mt-3">
|
||||||
<table class="table table-sm table-dark table-hover mb-0">
|
<div class="table-responsive result-panel" style="max-height: 250px; overflow-y: auto;">
|
||||||
<thead class="sticky-top bg-dark">
|
<table class="table table-sm table-dark table-hover exif-table mb-0">
|
||||||
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th style="width: 35%">Field</th>
|
<th style="width: 35%">Field</th>
|
||||||
<th>Value</th>
|
<th>Value</th>
|
||||||
@@ -105,8 +279,8 @@
|
|||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="exifEmpty" class="text-muted text-center py-4 d-none">
|
<div id="exifEmpty" class="result-panel text-muted text-center py-4 d-none">
|
||||||
<i class="bi bi-inbox"></i> No metadata found
|
<i class="bi bi-inbox fs-4 d-block mb-2"></i>No metadata found
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Action Buttons -->
|
<!-- Action Buttons -->
|
||||||
@@ -119,51 +293,149 @@
|
|||||||
Discard
|
Discard
|
||||||
</button>
|
</button>
|
||||||
<button type="button" class="btn btn-primary" id="exifSave" disabled>
|
<button type="button" class="btn btn-primary" id="exifSave" disabled>
|
||||||
<i class="bi bi-download me-1"></i>Save Changes
|
<i class="bi bi-download me-1"></i>Save
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- ============================================================ -->
|
||||||
|
<!-- STRIP METADATA -->
|
||||||
|
<!-- ============================================================ -->
|
||||||
|
<div class="tool-section" id="stripSection">
|
||||||
|
<p class="text-muted small mb-3">Remove all EXIF data and get a clean image</p>
|
||||||
|
|
||||||
|
<div class="tool-drop-zone" id="stripZone">
|
||||||
|
<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>
|
||||||
|
<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>
|
||||||
|
|
||||||
<!-- Peek (Header Detection) -->
|
<!-- Format selector and action -->
|
||||||
<div class="tab-pane fade" id="peek" role="tabpanel">
|
<div id="stripOptions" class="d-none mt-3">
|
||||||
<div class="card">
|
<div class="d-flex align-items-center gap-3">
|
||||||
<div class="card-body">
|
<label class="form-label mb-0 small text-muted">Output:</label>
|
||||||
<p class="text-muted mb-3">Check if an image contains Stegasoo hidden data (without decrypting).</p>
|
<select class="form-select form-select-sm" id="stripFormat" style="width: auto;">
|
||||||
|
<option value="PNG" selected>PNG (lossless)</option>
|
||||||
<div class="mb-3">
|
<option value="JPEG">JPEG</option>
|
||||||
<input type="file" class="form-control" id="peekFile" accept="image/*">
|
</select>
|
||||||
</div>
|
<button type="button" class="btn btn-danger ms-auto" id="stripAction">
|
||||||
|
<i class="bi bi-eraser me-1"></i>Strip & Download
|
||||||
<div id="peekResult" class="d-none">
|
</button>
|
||||||
<div id="peekFound" class="alert alert-success d-none">
|
|
||||||
<i class="bi bi-check-circle me-2"></i>
|
|
||||||
<strong>Stegasoo data detected!</strong>
|
|
||||||
<br><span class="text-muted">Mode: <span id="peekMode" class="font-monospace"></span></span>
|
|
||||||
</div>
|
|
||||||
<div id="peekNotFound" class="alert alert-secondary d-none">
|
|
||||||
<i class="bi bi-x-circle me-2"></i>
|
|
||||||
No Stegasoo header detected in this image.
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
||||||
{% block scripts %}
|
{% block scripts %}
|
||||||
<script>
|
<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();
|
const formData = new FormData();
|
||||||
formData.append('image', file);
|
formData.append('image', file);
|
||||||
@@ -173,13 +445,14 @@ document.getElementById('capacityFile')?.addEventListener('change', async functi
|
|||||||
const data = await res.json();
|
const data = await res.json();
|
||||||
|
|
||||||
if (data.success) {
|
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
|
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');
|
document.getElementById('capacityResult').classList.remove('d-none');
|
||||||
}
|
}
|
||||||
} catch (err) {
|
} 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 exifOriginalData = {};
|
||||||
let exifCurrentData = {};
|
let exifCurrentData = {};
|
||||||
let exifEditable = false;
|
let exifEditable = false;
|
||||||
let exifCurrentFile = null;
|
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;
|
exifCurrentFile = file;
|
||||||
|
showPreview('exifZone', file, 'exifThumb', 'exifName', '', 'exifClear');
|
||||||
|
|
||||||
const formData = new FormData();
|
const formData = new FormData();
|
||||||
formData.append('image', file);
|
formData.append('image', file);
|
||||||
|
|
||||||
@@ -206,18 +487,10 @@ document.getElementById('exifFile')?.addEventListener('change', async function()
|
|||||||
const data = await res.json();
|
const data = await res.json();
|
||||||
|
|
||||||
if (data.success) {
|
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));
|
exifOriginalData = JSON.parse(JSON.stringify(data.exif));
|
||||||
exifCurrentData = JSON.parse(JSON.stringify(data.exif));
|
exifCurrentData = JSON.parse(JSON.stringify(data.exif));
|
||||||
exifEditable = data.editable;
|
exifEditable = data.editable;
|
||||||
|
|
||||||
// Update UI
|
|
||||||
document.getElementById('exifFilename').textContent = data.filename;
|
|
||||||
document.getElementById('exifFieldCount').textContent = data.field_count;
|
document.getElementById('exifFieldCount').textContent = data.field_count;
|
||||||
document.getElementById('exifNotEditable').classList.toggle('d-none', data.editable);
|
document.getElementById('exifNotEditable').classList.toggle('d-none', data.editable);
|
||||||
document.getElementById('exifEditor').classList.remove('d-none');
|
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() {
|
function renderExifTable() {
|
||||||
const tbody = document.getElementById('exifTable');
|
const tbody = document.getElementById('exifTable');
|
||||||
const empty = document.getElementById('exifEmpty');
|
const empty = document.getElementById('exifEmpty');
|
||||||
@@ -243,16 +525,11 @@ function renderExifTable() {
|
|||||||
|
|
||||||
empty.classList.add('d-none');
|
empty.classList.add('d-none');
|
||||||
tbody.innerHTML = entries.map(([key, value]) => {
|
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 editableFields = ['Make', 'Model', 'Software', 'Artist', 'Copyright', 'ImageDescription', 'DateTime', 'DateTimeOriginal', 'DateTimeDigitized', 'UserComment', 'LensMake', 'LensModel'];
|
||||||
const canEdit = exifEditable && editableFields.includes(key) && typeof value === 'string';
|
const canEdit = exifEditable && editableFields.includes(key) && typeof value === 'string';
|
||||||
|
|
||||||
@@ -261,7 +538,7 @@ function renderExifTable() {
|
|||||||
<td class="text-muted small">${key}</td>
|
<td class="text-muted small">${key}</td>
|
||||||
<td class="font-monospace small">
|
<td class="font-monospace small">
|
||||||
${canEdit
|
${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, '"')}" data-field="${key}">`
|
value="${String(value).replace(/"/g, '"')}" data-field="${key}">`
|
||||||
: `<span title="${String(displayVal)}">${displayVal}</span>`
|
: `<span title="${String(displayVal)}">${displayVal}</span>`
|
||||||
}
|
}
|
||||||
@@ -278,7 +555,6 @@ function renderExifTable() {
|
|||||||
`;
|
`;
|
||||||
}).join('');
|
}).join('');
|
||||||
|
|
||||||
// Add event listeners for edits
|
|
||||||
tbody.querySelectorAll('.exif-input').forEach(input => {
|
tbody.querySelectorAll('.exif-input').forEach(input => {
|
||||||
input.addEventListener('input', function() {
|
input.addEventListener('input', function() {
|
||||||
exifCurrentData[this.dataset.field] = this.value;
|
exifCurrentData[this.dataset.field] = this.value;
|
||||||
@@ -300,7 +576,6 @@ function updateSaveButton() {
|
|||||||
document.getElementById('exifSave').disabled = !changed;
|
document.getElementById('exifSave').disabled = !changed;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Clear All button
|
|
||||||
document.getElementById('exifClearAll')?.addEventListener('click', async function() {
|
document.getElementById('exifClearAll')?.addEventListener('click', async function() {
|
||||||
if (!exifCurrentFile) return;
|
if (!exifCurrentFile) return;
|
||||||
if (!confirm('Remove all metadata from this image?')) 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);
|
document.body.removeChild(a);
|
||||||
URL.revokeObjectURL(url);
|
URL.revokeObjectURL(url);
|
||||||
|
|
||||||
// Clear the current data to show empty state
|
|
||||||
exifCurrentData = {};
|
exifCurrentData = {};
|
||||||
exifOriginalData = {};
|
exifOriginalData = {};
|
||||||
renderExifTable();
|
renderExifTable();
|
||||||
} else {
|
} 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) {
|
} catch (err) {
|
||||||
console.error(err);
|
console.error(err);
|
||||||
@@ -352,29 +616,21 @@ document.getElementById('exifClearAll')?.addEventListener('click', async functio
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
// Discard button
|
|
||||||
document.getElementById('exifDiscard')?.addEventListener('click', function() {
|
document.getElementById('exifDiscard')?.addEventListener('click', function() {
|
||||||
exifCurrentData = JSON.parse(JSON.stringify(exifOriginalData));
|
exifCurrentData = JSON.parse(JSON.stringify(exifOriginalData));
|
||||||
renderExifTable();
|
renderExifTable();
|
||||||
updateSaveButton();
|
updateSaveButton();
|
||||||
});
|
});
|
||||||
|
|
||||||
// Save button
|
|
||||||
document.getElementById('exifSave')?.addEventListener('click', async function() {
|
document.getElementById('exifSave')?.addEventListener('click', async function() {
|
||||||
if (!exifCurrentFile || !exifEditable) return;
|
if (!exifCurrentFile || !exifEditable) return;
|
||||||
|
|
||||||
// Find what changed
|
|
||||||
const updates = {};
|
const updates = {};
|
||||||
for (const [key, val] of Object.entries(exifCurrentData)) {
|
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)) {
|
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;
|
if (Object.keys(updates).length === 0) return;
|
||||||
@@ -401,20 +657,10 @@ document.getElementById('exifSave')?.addEventListener('click', async function()
|
|||||||
document.body.removeChild(a);
|
document.body.removeChild(a);
|
||||||
URL.revokeObjectURL(url);
|
URL.revokeObjectURL(url);
|
||||||
|
|
||||||
// Update original to match current
|
|
||||||
exifOriginalData = JSON.parse(JSON.stringify(exifCurrentData));
|
exifOriginalData = JSON.parse(JSON.stringify(exifCurrentData));
|
||||||
updateSaveButton();
|
updateSaveButton();
|
||||||
} else {
|
} 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) {
|
} catch (err) {
|
||||||
console.error(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();
|
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 {
|
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 {
|
} else {
|
||||||
document.getElementById('peekFound').classList.add('d-none');
|
alert('Failed to strip metadata');
|
||||||
document.getElementById('peekNotFound').classList.remove('d-none');
|
|
||||||
}
|
}
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
console.error(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>
|
</script>
|
||||||
|
|||||||
Reference in New Issue
Block a user