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
@@ -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">
|
||||
<h4 class="mb-4"><i class="bi bi-tools me-2"></i>Image Security Toolkit</h4>
|
||||
<div class="col-lg-8">
|
||||
<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">
|
||||
<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>
|
||||
<!-- ============================================================ -->
|
||||
<!-- CAPACITY CALCULATOR -->
|
||||
<!-- ============================================================ -->
|
||||
<div class="tool-section active" id="capacitySection">
|
||||
<p class="text-muted small mb-3">Check how much data can be hidden in an image</p>
|
||||
|
||||
<!-- 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-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 class="tool-drop-zone" id="capacityZone">
|
||||
<input type="file" accept="image/*" id="capacityFile">
|
||||
<div class="drop-label">
|
||||
<i class="bi bi-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="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">
|
||||
<table class="table table-sm table-dark mb-0">
|
||||
<tbody>
|
||||
<!-- 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>
|
||||
|
||||
<!-- ============================================================ -->
|
||||
<!-- 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>
|
||||
<td id="capFilename" class="font-monospace"></td>
|
||||
<th style="width: 35%">Field</th>
|
||||
<th>Value</th>
|
||||
<th style="width: 40px"></th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="text-muted">Dimensions</td>
|
||||
<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>
|
||||
</thead>
|
||||
<tbody id="exifTable"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- EXIF Editor -->
|
||||
<div class="tab-pane fade" id="exif" role="tabpanel">
|
||||
<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 id="exifEmpty" class="result-panel text-muted text-center py-4 d-none">
|
||||
<i class="bi bi-inbox fs-4 d-block mb-2"></i>No metadata found
|
||||
</div>
|
||||
|
||||
<div id="exifEditor" class="d-none">
|
||||
<div class="row mb-3">
|
||||
<!-- Thumbnail -->
|
||||
<div class="col-auto">
|
||||
<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">
|
||||
<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
|
||||
<!-- 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
|
||||
</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">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<p class="text-muted mb-3">Check if an image contains Stegasoo hidden data (without decrypting).</p>
|
||||
<!-- ============================================================ -->
|
||||
<!-- 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="mb-3">
|
||||
<input type="file" class="form-control" id="peekFile" accept="image/*">
|
||||
<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 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">
|
||||
<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>
|
||||
<!-- Format selector and action -->
|
||||
<div id="stripOptions" class="d-none mt-3">
|
||||
<div class="d-flex align-items-center gap-3">
|
||||
<label class="form-label mb-0 small text-muted">Output:</label>
|
||||
<select class="form-select form-select-sm" id="stripFormat" style="width: auto;">
|
||||
<option value="PNG" selected>PNG (lossless)</option>
|
||||
<option value="JPEG">JPEG</option>
|
||||
</select>
|
||||
<button type="button" class="btn btn-danger ms-auto" id="stripAction">
|
||||
<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() {
|
||||
const file = this.files[0];
|
||||
if (!file) return;
|
||||
// ============================================================================
|
||||
// TAB SWITCHING
|
||||
// ============================================================================
|
||||
|
||||
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('capDimensions').textContent = `${data.width} x ${data.height}`;
|
||||
document.getElementById('capMegapixels').textContent = data.megapixels;
|
||||
document.getElementById('capLsb').textContent = `${data.lsb.capacity_kb.toFixed(1)} KB`;
|
||||
document.getElementById('capacityMeta').textContent =
|
||||
`${data.width} × ${data.height} · ${formatBytes(file.size)}`;
|
||||
document.getElementById('capDimensions').textContent = `${data.width} × ${data.height}`;
|
||||
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`
|
||||
: 'N/A (scipy required)';
|
||||
? data.dct.capacity_kb.toFixed(1) + ' KB'
|
||||
: '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() {
|
||||
const file = this.files[0];
|
||||
if (!file) return;
|
||||
|
||||
setupDropZone('exifZone', 'exifFile', async (file) => {
|
||||
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 = value;
|
||||
if (typeof value === 'object') {
|
||||
displayVal = JSON.stringify(value);
|
||||
}
|
||||
if (typeof displayVal === 'string' && displayVal.length > 60) {
|
||||
displayVal = displayVal.substring(0, 57) + '...';
|
||||
let displayVal = typeof value === 'object' ? JSON.stringify(value) : value;
|
||||
if (typeof displayVal === 'string' && displayVal.length > 50) {
|
||||
displayVal = displayVal.substring(0, 47) + '...';
|
||||
}
|
||||
|
||||
// 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, '"')}" 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
|
||||
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})`);
|
||||
}
|
||||
alert('Failed to clear metadata');
|
||||
}
|
||||
} 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) {
|
||||
updates[key] = val;
|
||||
}
|
||||
if (exifOriginalData[key] !== val) updates[key] = val;
|
||||
}
|
||||
// Mark deleted fields
|
||||
for (const key of Object.keys(exifOriginalData)) {
|
||||
if (!(key in exifCurrentData)) {
|
||||
updates[key] = null;
|
||||
}
|
||||
if (!(key in exifCurrentData)) 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');
|
||||
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})`);
|
||||
}
|
||||
alert('Failed to save');
|
||||
}
|
||||
} 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() {
|
||||
const file = this.files[0];
|
||||
if (!file) return;
|
||||
// ============================================================================
|
||||
// STRIP METADATA
|
||||
// ============================================================================
|
||||
|
||||
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 data = await res.json();
|
||||
|
||||
document.getElementById('peekResult').classList.remove('d-none');
|
||||
|
||||
if (data.has_stegasoo) {
|
||||
document.getElementById('peekFound').classList.remove('d-none');
|
||||
document.getElementById('peekNotFound').classList.add('d-none');
|
||||
document.getElementById('peekMode').textContent = data.mode?.toUpperCase() || 'Unknown';
|
||||
const res = await fetch('/api/tools/exif/clear', { method: 'POST', body: formData });
|
||||
if (res.ok) {
|
||||
const blob = await res.blob();
|
||||
const url = URL.createObjectURL(blob);
|
||||
const a = document.createElement('a');
|
||||
a.href = url;
|
||||
a.download = res.headers.get('Content-Disposition')?.split('filename=')[1]?.replace(/"/g, '') || `clean.${format.toLowerCase()}`;
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
document.body.removeChild(a);
|
||||
URL.revokeObjectURL(url);
|
||||
} else {
|
||||
document.getElementById('peekFound').classList.add('d-none');
|
||||
document.getElementById('peekNotFound').classList.remove('d-none');
|
||||
alert('Failed to strip metadata');
|
||||
}
|
||||
} 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>
|
||||
|
||||
Reference in New Issue
Block a user