Added debug, additional comments, encoded file thumbnail view.
This commit is contained in:
Aaron D. Lee
@@ -133,7 +133,6 @@
|
||||
<label class="form-label">
|
||||
<i class="bi bi-file-earmark-lock me-1"></i> RSA Key
|
||||
</label>
|
||||
{% if has_qrcode_read %}
|
||||
<ul class="nav nav-tabs nav-tabs-sm mb-2" role="tablist">
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link active py-1 px-2 small" data-bs-toggle="tab" data-bs-target="#rsaFileTabDec" type="button">
|
||||
@@ -155,9 +154,6 @@
|
||||
<div class="form-text small">PNG, JPG, or other image of QR code</div>
|
||||
</div>
|
||||
</div>
|
||||
{% else %}
|
||||
<input type="file" name="rsa_key" class="form-control" id="rsaKeyInput" accept=".pem,.key">
|
||||
{% endif %}
|
||||
<div class="form-text">
|
||||
If RSA key was used during encoding (file or QR image)
|
||||
</div>
|
||||
|
||||
@@ -142,7 +142,6 @@
|
||||
<label class="form-label">
|
||||
<i class="bi bi-file-earmark-lock me-1"></i> RSA Key
|
||||
</label>
|
||||
{% if has_qrcode_read %}
|
||||
<ul class="nav nav-tabs nav-tabs-sm mb-2" role="tablist">
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link active py-1 px-2 small" data-bs-toggle="tab" data-bs-target="#rsaFileTab" type="button">
|
||||
@@ -158,18 +157,13 @@
|
||||
<div class="tab-content">
|
||||
<div class="tab-pane fade show active" id="rsaFileTab" role="tabpanel">
|
||||
<input type="file" name="rsa_key" class="form-control form-control-sm" id="rsaKeyInput" accept=".pem,.key,application/x-pem-file">
|
||||
<div class="form-text small">Shared .pem format key file.</div>
|
||||
</div>
|
||||
<div class="tab-pane fade" id="rsaQrTab" role="tabpanel">
|
||||
<input type="file" name="rsa_key_qr" class="form-control form-control-sm" id="rsaKeyQrInput" accept="image/*">
|
||||
<div class="form-text small">PNG, JPG, or other image of QR code</div>
|
||||
</div>
|
||||
</div>
|
||||
{% else %}
|
||||
<input type="file" name="rsa_key" class="form-control" id="rsaKeyInput" accept=".pem,.key">
|
||||
{% endif %}
|
||||
<div class="form-text">
|
||||
Your shared .pem key file or QR code image (if configured)
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -11,7 +11,21 @@
|
||||
</div>
|
||||
<div class="card-body text-center">
|
||||
<div class="my-4">
|
||||
{% if thumbnail_url %}
|
||||
<!-- Thumbnail of the actual encoded image -->
|
||||
<div class="encoded-image-thumbnail">
|
||||
<img src="{{ thumbnail_url }}"
|
||||
alt="Encoded image thumbnail"
|
||||
class="img-thumbnail rounded"
|
||||
style="max-width: 250px; max-height: 250px; object-fit: contain;">
|
||||
<div class="mt-2 small text-muted">
|
||||
<i class="bi bi-image me-1"></i>Encoded Image Preview
|
||||
</div>
|
||||
</div>
|
||||
{% else %}
|
||||
<!-- Fallback to icon if thumbnail not available -->
|
||||
<i class="bi bi-file-earmark-image text-success" style="font-size: 4rem;"></i>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<p class="lead mb-4">Your secret has been hidden in the image.</p>
|
||||
@@ -92,4 +106,4 @@ document.getElementById('downloadBtn').addEventListener('click', function() {
|
||||
}, 2000);
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
{% endblock %}
|
||||
95
frontends/web/templates/encode_result.html_20251228
Normal file
95
frontends/web/templates/encode_result.html_20251228
Normal file
@@ -0,0 +1,95 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}Encode Success - Stegasoo{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header bg-success text-white">
|
||||
<h5 class="mb-0"><i class="bi bi-check-circle me-2"></i>Encoding Successful!</h5>
|
||||
</div>
|
||||
<div class="card-body text-center">
|
||||
<div class="my-4">
|
||||
<i class="bi bi-file-earmark-image text-success" style="font-size: 4rem;"></i>
|
||||
</div>
|
||||
|
||||
<p class="lead mb-4">Your secret has been hidden in the image.</p>
|
||||
|
||||
<div class="mb-3">
|
||||
<code class="fs-5">{{ filename }}</code>
|
||||
</div>
|
||||
|
||||
<div class="d-grid gap-2">
|
||||
<a href="{{ url_for('encode_download', file_id=file_id) }}"
|
||||
class="btn btn-primary btn-lg" id="downloadBtn">
|
||||
<i class="bi bi-download me-2"></i>Download Image
|
||||
</a>
|
||||
|
||||
<button type="button" class="btn btn-outline-primary" id="shareBtn" style="display: none;">
|
||||
<i class="bi bi-share me-2"></i>Share
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<hr class="my-4">
|
||||
|
||||
<div class="alert alert-warning small text-start">
|
||||
<i class="bi bi-exclamation-triangle me-1"></i>
|
||||
<strong>Important:</strong>
|
||||
<ul class="mb-0 mt-2">
|
||||
<li>This file expires in <strong>5 minutes</strong></li>
|
||||
<li>Do <strong>not</strong> resize or recompress the image</li>
|
||||
<li>PNG format preserves your hidden data</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<a href="{{ url_for('encode_page') }}" class="btn btn-outline-secondary">
|
||||
<i class="bi bi-arrow-repeat me-2"></i>Encode Another Message
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block scripts %}
|
||||
<script>
|
||||
// Web Share API support
|
||||
const shareBtn = document.getElementById('shareBtn');
|
||||
const fileUrl = "{{ url_for('encode_file_route', file_id=file_id, _external=True) }}";
|
||||
const fileName = "{{ filename }}";
|
||||
|
||||
if (navigator.share && navigator.canShare) {
|
||||
// Check if we can share files
|
||||
fetch(fileUrl)
|
||||
.then(response => response.blob())
|
||||
.then(blob => {
|
||||
const file = new File([blob], fileName, { type: 'image/png' });
|
||||
if (navigator.canShare({ files: [file] })) {
|
||||
shareBtn.style.display = 'block';
|
||||
shareBtn.addEventListener('click', async () => {
|
||||
try {
|
||||
await navigator.share({
|
||||
files: [file],
|
||||
title: 'Stegasoo Image',
|
||||
});
|
||||
} catch (err) {
|
||||
if (err.name !== 'AbortError') {
|
||||
console.error('Share failed:', err);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
})
|
||||
.catch(err => console.log('Could not load file for sharing'));
|
||||
}
|
||||
|
||||
// Auto-cleanup after download
|
||||
document.getElementById('downloadBtn').addEventListener('click', function() {
|
||||
// Give time for download to start, then cleanup
|
||||
setTimeout(() => {
|
||||
fetch("{{ url_for('encode_cleanup', file_id=file_id) }}", { method: 'POST' });
|
||||
}, 2000);
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
@@ -8,57 +8,57 @@
|
||||
<h1 class="display-4 fw-bold">Stegasoo</h1>
|
||||
<p class="lead text-muted">Create hidden encrypted messages in images and photos using advanced steganography.</p>
|
||||
</div>
|
||||
<div class="row g-4 mb-5">
|
||||
|
||||
<div class="row g-4 mb-5">
|
||||
<!-- Encode Card -->
|
||||
<div class="col-md-4">
|
||||
<div class="card h-100 feature-card">
|
||||
<div class="card-header text-center py-3">
|
||||
<i class="bi bi-lock-fill fs-1"></i>
|
||||
<a href="/encode" class="text-decoration-none card-link">
|
||||
<div class="card h-100 feature-card">
|
||||
<div class="card-header text-center py-3">
|
||||
<i class="bi bi-lock-fill fs-1 embossed-icon"></i>
|
||||
</div>
|
||||
<div class="card-body text-center">
|
||||
<h5 class="card-title">Encode Message</h5>
|
||||
<p class="card-text text-muted">
|
||||
Hide your secret message inside an innocent-looking image using your daily phrase + PIN.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body text-center">
|
||||
<h5 class="card-title">Encode Message</h5>
|
||||
<p class="card-text text-muted">
|
||||
Hide your secret message inside an innocent-looking image using your daily phrase + PIN.
|
||||
</p>
|
||||
<a href="/encode" class="btn btn-primary">
|
||||
<i class="bi bi-upload me-1"></i> Encode
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Decode Card -->
|
||||
<div class="col-md-4">
|
||||
<div class="card h-100 feature-card">
|
||||
<div class="card-header text-center py-3">
|
||||
<i class="bi bi-unlock-fill fs-1"></i>
|
||||
<a href="/decode" class="text-decoration-none card-link">
|
||||
<div class="card h-100 feature-card">
|
||||
<div class="card-header text-center py-3">
|
||||
<i class="bi bi-unlock-fill fs-1 embossed-icon"></i>
|
||||
</div>
|
||||
<div class="card-body text-center">
|
||||
<h5 class="card-title">Decode Message</h5>
|
||||
<p class="card-text text-muted">
|
||||
Extract and decrypt hidden messages from Stegasoo-encoded images using your credentials.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body text-center">
|
||||
<h5 class="card-title">Decode Message</h5>
|
||||
<p class="card-text text-muted">
|
||||
Extract and decrypt hidden messages from Stegasoo-encoded images using your credentials.
|
||||
</p>
|
||||
<a href="/decode" class="btn btn-primary">
|
||||
<i class="bi bi-download me-1"></i> Decode
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Generate Card -->
|
||||
<div class="col-md-4">
|
||||
<div class="card h-100 feature-card">
|
||||
<div class="card-header text-center py-3">
|
||||
<i class="bi bi-key-fill fs-1"></i>
|
||||
<a href="/generate" class="text-decoration-none card-link">
|
||||
<div class="card h-100 feature-card">
|
||||
<div class="card-header text-center py-3">
|
||||
<i class="bi bi-key-fill fs-1 embossed-icon"></i>
|
||||
</div>
|
||||
<div class="card-body text-center">
|
||||
<h5 class="card-title">Generate Keys</h5>
|
||||
<p class="card-text text-muted">
|
||||
Create your weekly phrase card and PIN. Memorize 21 words + 6 digits for maximum security.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body text-center">
|
||||
<h5 class="card-title">Generate Keys</h5>
|
||||
<p class="card-text text-muted">
|
||||
Create your weekly phrase card and PIN. Memorize 21 words + 6 digits for maximum security.
|
||||
</p>
|
||||
<a href="/generate" class="btn btn-primary">
|
||||
<i class="bi bi-plus-circle me-1"></i> Generate
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -105,4 +105,4 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
{% endblock %}
|
||||
108
frontends/web/templates/index.html_20251228
Normal file
108
frontends/web/templates/index.html_20251228
Normal file
@@ -0,0 +1,108 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}Stegasoo - Secure Steganography{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="text-center mb-5">
|
||||
<img src="{{ url_for('static', filename='logo.svg') }}" alt="Stegasoo" height="120" class="mb-3">
|
||||
<h1 class="display-4 fw-bold">Stegasoo</h1>
|
||||
<p class="lead text-muted">Create hidden encrypted messages in images and photos using advanced steganography.</p>
|
||||
</div>
|
||||
<div class="row g-4 mb-5">
|
||||
|
||||
<div class="col-md-4">
|
||||
<div class="card h-100 feature-card">
|
||||
<div class="card-header text-center py-3">
|
||||
<i class="bi bi-lock-fill fs-1"></i>
|
||||
</div>
|
||||
<div class="card-body text-center">
|
||||
<h5 class="card-title">Encode Message</h5>
|
||||
<p class="card-text text-muted">
|
||||
Hide your secret message inside an innocent-looking image using your daily phrase + PIN.
|
||||
</p>
|
||||
<a href="/encode" class="btn btn-primary">
|
||||
<i class="bi bi-upload me-1"></i> Encode
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-4">
|
||||
<div class="card h-100 feature-card">
|
||||
<div class="card-header text-center py-3">
|
||||
<i class="bi bi-unlock-fill fs-1"></i>
|
||||
</div>
|
||||
<div class="card-body text-center">
|
||||
<h5 class="card-title">Decode Message</h5>
|
||||
<p class="card-text text-muted">
|
||||
Extract and decrypt hidden messages from Stegasoo-encoded images using your credentials.
|
||||
</p>
|
||||
<a href="/decode" class="btn btn-primary">
|
||||
<i class="bi bi-download me-1"></i> Decode
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-4">
|
||||
<div class="card h-100 feature-card">
|
||||
<div class="card-header text-center py-3">
|
||||
<i class="bi bi-key-fill fs-1"></i>
|
||||
</div>
|
||||
<div class="card-body text-center">
|
||||
<h5 class="card-title">Generate Keys</h5>
|
||||
<p class="card-text text-muted">
|
||||
Create your weekly phrase card and PIN. Memorize 21 words + 6 digits for maximum security.
|
||||
</p>
|
||||
<a href="/generate" class="btn btn-primary">
|
||||
<i class="bi bi-plus-circle me-1"></i> Generate
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="mb-0"><i class="bi bi-diagram-3 me-2"></i>How It Works</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<h6 class="text-primary"><i class="bi bi-1-circle me-2"></i>Key Components</h6>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2">
|
||||
<i class="bi bi-image text-info me-2"></i>
|
||||
<strong>Reference Photo</strong> — Any photo you and recipient both have
|
||||
</li>
|
||||
<li class="mb-2">
|
||||
<i class="bi bi-chat-quote text-info me-2"></i>
|
||||
<strong>Day Phrase</strong> — 3 words, different each day of the week
|
||||
</li>
|
||||
<li class="mb-2">
|
||||
<i class="bi bi-123 text-info me-2"></i>
|
||||
<strong>Static PIN</strong> — 6 digits, same every day
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<h6 class="text-primary"><i class="bi bi-2-circle me-2"></i>Security Features</h6>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2">
|
||||
<i class="bi bi-shield-check text-success me-2"></i>
|
||||
Argon2id memory-hard key derivation (256MB)
|
||||
</li>
|
||||
<li class="mb-2">
|
||||
<i class="bi bi-shuffle text-success me-2"></i>
|
||||
Pseudo-random pixel selection (defeats steganalysis)
|
||||
</li>
|
||||
<li class="mb-2">
|
||||
<i class="bi bi-lock text-success me-2"></i>
|
||||
AES-256-GCM authenticated encryption
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user