alee/stegasoo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial verion.

Browse Source
This commit is contained in:
Aaron D. Lee
2025-12-27 03:14:32 -05:00
commit 1e77562ec0
18 changed files with 4046 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

180
templates/about.html Normal file
View File

@@ -0,0 +1,180 @@
{% extends "base.html" %}
{% block title %}About - Stegasoo{% endblock %}
{% block content %}
<div class="row justify-content-center">
<div class="col-lg-10">
<div class="card mb-4">
<div class="card-header">
<h5 class="mb-0"><i class="bi bi-info-circle me-2"></i>About Stegasoo</h5>
</div>
<div class="card-body">
<p>
Stegasoo is a hybrid steganography system that hides encrypted messages inside
ordinary images. It combines multiple security layers to create a system that is
both highly secure and practical to use.
</p>
<h6 class="mt-4 mb-3">System Status</h6>
<div class="row g-3">
<div class="col-md-6">
<div class="d-flex align-items-center p-3 rounded"
style="background: rgba(0,0,0,0.2);">
{% if has_argon2 %}
<i class="bi bi-check-circle-fill text-success fs-4 me-3"></i>
<div>
<strong>Argon2id Available</strong>
<div class="small text-muted">Memory-hard key derivation (256MB)</div>
</div>
{% else %}
<i class="bi bi-exclamation-triangle-fill text-warning fs-4 me-3"></i>
<div>
<strong>Using PBKDF2 Fallback</strong>
<div class="small text-muted">Install argon2-cffi for better security</div>
</div>
{% endif %}
</div>
</div>
<div class="col-md-6">
<div class="d-flex align-items-center p-3 rounded"
style="background: rgba(0,0,0,0.2);">
<i class="bi bi-shield-fill-check text-success fs-4 me-3"></i>
<div>
<strong>AES-256-GCM</strong>
<div class="small text-muted">Authenticated encryption enabled</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="card mb-4">
<div class="card-header">
<h5 class="mb-0"><i class="bi bi-shield-lock me-2"></i>Security Model</h5>
</div>
<div class="card-body">
<div class="table-responsive">
<table class="table table-dark">
<thead>
<tr>
<th>Component</th>
<th>Entropy</th>
<th>Purpose</th>
</tr>
</thead>
<tbody>
<tr>
<td><i class="bi bi-image text-info me-2"></i>Reference Photo</td>
<td>~80-256 bits</td>
<td>Something you have (plausible deniability)</td>
</tr>
<tr>
<td><i class="bi bi-chat-quote text-info me-2"></i>3-Word Phrase</td>
<td>~33 bits</td>
<td>Something you know (changes daily)</td>
</tr>
<tr>
<td><i class="bi bi-123 text-info me-2"></i>6-Digit PIN</td>
<td>~20 bits</td>
<td>Something you know (static)</td>
</tr>
<tr>
<td><i class="bi bi-calendar text-info me-2"></i>Date</td>
<td>N/A</td>
<td>Automatic key rotation</td>
</tr>
<tr class="table-active">
<td><strong>Combined</strong></td>
<td><strong>133+ bits</strong></td>
<td><strong>Beyond brute force</strong></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="card mb-4">
<div class="card-header">
<h5 class="mb-0"><i class="bi bi-cpu me-2"></i>Attack Resistance</h5>
</div>
<div class="card-body">
<div class="row g-4">
<div class="col-md-6">
<h6 class="text-danger"><i class="bi bi-x-circle me-2"></i>What Attackers Can't Do</h6>
<ul class="list-unstyled">
<li class="mb-2">
<i class="bi bi-shield-x text-muted me-2"></i>
Brute force the passphrase (2<sup>133</sup> combinations)
</li>
<li class="mb-2">
<i class="bi bi-shield-x text-muted me-2"></i>
Use rainbow tables (random salt per message)
</li>
<li class="mb-2">
<i class="bi bi-shield-x text-muted me-2"></i>
Detect hidden data (random pixel selection)
</li>
<li class="mb-2">
<i class="bi bi-shield-x text-muted me-2"></i>
Use GPU farms (Argon2 requires 256MB RAM per attempt)
</li>
</ul>
</div>
<div class="col-md-6">
<h6 class="text-warning"><i class="bi bi-exclamation-triangle me-2"></i>Real Threats</h6>
<ul class="list-unstyled">
<li class="mb-2">
<i class="bi bi-person-x text-muted me-2"></i>
Social engineering (someone tricks you)
</li>
<li class="mb-2">
<i class="bi bi-door-open text-muted me-2"></i>
Physical access to your devices
</li>
<li class="mb-2">
<i class="bi bi-bug text-muted me-2"></i>
Malware/keyloggers on your system
</li>
<li class="mb-2">
<i class="bi bi-camera-video text-muted me-2"></i>
Shoulder surfing while you type
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<h5 class="mb-0"><i class="bi bi-book me-2"></i>Best Practices</h5>
</div>
<div class="card-body">
<div class="row">
<div class="col-md-6">
<h6 class="text-success"><i class="bi bi-check-lg me-2"></i>Do</h6>
<ul>
<li>Memorize your phrases and PIN, never write them down</li>
<li>Use a reference photo that both parties already have</li>
<li>Use different carrier images for each message</li>
<li>Share stego images through normal channels (looks innocent)</li>
</ul>
</div>
<div class="col-md-6">
<h6 class="text-danger"><i class="bi bi-x-lg me-2"></i>Don't</h6>
<ul>
<li>Don't transmit the reference photo</li>
<li>Don't reuse the same carrier image</li>
<li>Don't store phrases or PIN digitally</li>
<li>Don't resize or recompress stego images</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
{% endblock %}

180
templates/base.html Normal file
View File

@@ -0,0 +1,180 @@
<!DOCTYPE html>
<html lang="en" data-bs-theme="dark">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{% block title %}Stegasoo{% endblock %}</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css" rel="stylesheet">
<style>
:root {
--gradient-start: #667eea;
--gradient-end: #764ba2;
}
body {
min-height: 100vh;
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
}
.navbar {
background: rgba(0, 0, 0, 0.3) !important;
backdrop-filter: blur(10px);
}
.card {
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
}
.card-header {
background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
border-bottom: none;
}
.btn-primary {
background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
border: none;
}
.btn-primary:hover {
background: linear-gradient(135deg, var(--gradient-end), var(--gradient-start));
transform: translateY(-2px);
box-shadow: 0 5px 20px rgba(102, 126, 234, 0.4);
}
.hero-icon {
font-size: 4rem;
background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.feature-card {
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.feature-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 40px rgba(102, 126, 234, 0.2);
}
.form-control, .form-select {
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
color: #fff;
}
.form-control:focus, .form-select:focus {
background: rgba(255, 255, 255, 0.1);
border-color: var(--gradient-start);
box-shadow: 0 0 0 0.25rem rgba(102, 126, 234, 0.25);
color: #fff;
}
.form-control::placeholder {
color: rgba(255, 255, 255, 0.5);
}
/* Fix dropdown options for dark theme */
.form-select option {
background: #1a1a2e;
color: #fff;
}
.phrase-display {
font-family: 'Courier New', monospace;
font-size: 1.1rem;
background: rgba(0, 0, 0, 0.3);
padding: 0.5rem 1rem;
border-radius: 0.5rem;
border-left: 4px solid var(--gradient-start);
}
.pin-display {
font-family: 'Courier New', monospace;
font-size: 2rem;
letter-spacing: 0.5rem;
background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.alert-message {
background: rgba(0, 0, 0, 0.3);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 0.5rem;
padding: 1.5rem;
white-space: pre-wrap;
font-family: 'Courier New', monospace;
}
footer {
background: rgba(0, 0, 0, 0.2);
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark">
<div class="container">
<a class="navbar-brand d-flex align-items-center" href="/">
<i class="bi bi-shield-lock-fill me-2"></i>
<span class="fw-bold">Stegasoo</span>
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link" href="/"><i class="bi bi-house me-1"></i> Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/generate"><i class="bi bi-key me-1"></i> Generate</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/encode"><i class="bi bi-lock me-1"></i> Encode</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/decode"><i class="bi bi-unlock me-1"></i> Decode</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/about"><i class="bi bi-info-circle me-1"></i> About</a>
</li>
</ul>
</div>
</div>
</nav>
<main class="container py-5">
{% with messages = get_flashed_messages(with_categories=true) %}
{% if messages %}
{% for category, message in messages %}
<div class="alert alert-{{ 'danger' if category == 'error' else 'success' }} alert-dismissible fade show" role="alert">
<i class="bi bi-{{ 'exclamation-triangle' if category == 'error' else 'check-circle' }} me-2"></i>
{{ message }}
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>
{% endfor %}
{% endif %}
{% endwith %}
{% block content %}{% endblock %}
</main>
<footer class="py-4 mt-5">
<div class="container text-center text-muted">
<small>
<i class="bi bi-shield-check me-1"></i>
Stegasoo v3.1 — Hybrid Photo + Day-Phrase + PIN Steganography
</small>
</div>
</footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
{% block scripts %}{% endblock %}
</body>
</html>

122
templates/decode.html Normal file
View File

@@ -0,0 +1,122 @@
{% extends "base.html" %}
{% block title %}Decode Message - Stegasoo{% endblock %}
{% block content %}
<div class="row justify-content-center">
<div class="col-lg-8">
<div class="card">
<div class="card-header">
<h5 class="mb-0"><i class="bi bi-unlock-fill me-2"></i>Decode Secret Message</h5>
</div>
<div class="card-body">
{% if decoded_message %}
<div class="alert alert-success">
<h6><i class="bi bi-check-circle me-2"></i>Message Decrypted Successfully!</h6>
</div>
<div class="mb-4">
<label class="form-label text-muted">Decoded Message:</label>
<div class="alert-message">{{ decoded_message }}</div>
</div>
<a href="/decode" class="btn btn-outline-light w-100">
<i class="bi bi-arrow-repeat me-2"></i>Decode Another Message
</a>
{% else %}
<form method="POST" enctype="multipart/form-data" id="decodeForm">
<div class="row">
<div class="col-md-6 mb-3">
<label class="form-label">
<i class="bi bi-image me-1"></i> Reference Photo
</label>
<input type="file" name="reference_photo" class="form-control"
accept="image/*" required>
<div class="form-text">
The same reference photo used for encoding
</div>
</div>
<div class="col-md-6 mb-3">
<label class="form-label">
<i class="bi bi-file-earmark-image me-1"></i> Stego Image
</label>
<input type="file" name="stego_image" class="form-control"
accept="image/*" required>
<div class="form-text">
The image containing the hidden message
</div>
</div>
</div>
<div class="row">
<div class="col-md-8 mb-3">
<label class="form-label">
<i class="bi bi-chat-quote me-1"></i> Day Phrase
</label>
<input type="text" name="day_phrase" class="form-control"
placeholder="e.g., correct horse battery" required>
<div class="form-text">
The phrase for the day the message was encoded
</div>
</div>
<div class="col-md-4 mb-3">
<label class="form-label">
<i class="bi bi-123 me-1"></i> PIN
</label>
<input type="password" name="pin" class="form-control"
placeholder="123456" maxlength="10">
<div class="form-text">
Your static 6-digit PIN
</div>
</div>
</div>
<button type="submit" class="btn btn-primary btn-lg w-100" id="decodeBtn">
<i class="bi bi-unlock me-2"></i>Decode Message
</button>
</form>
{% endif %}
</div>
</div>
<div class="card mt-4">
<div class="card-body">
<h6 class="text-muted mb-3"><i class="bi bi-question-circle me-2"></i>Troubleshooting</h6>
<ul class="list-unstyled text-muted small mb-0">
<li class="mb-2">
<i class="bi bi-dot"></i>
Make sure you're using the <strong>exact same reference photo</strong> file
</li>
<li class="mb-2">
<i class="bi bi-dot"></i>
Use the phrase for the <strong>day the message was encoded</strong>, not today
</li>
<li class="mb-2">
<i class="bi bi-dot"></i>
Ensure the stego image hasn't been <strong>resized or recompressed</strong>
</li>
<li class="mb-0">
<i class="bi bi-dot"></i>
Double-check your <strong>PIN</strong> is correct
</li>
</ul>
</div>
</div>
</div>
</div>
{% endblock %}
{% block scripts %}
<script>
document.getElementById('decodeForm')?.addEventListener('submit', function() {
const btn = document.getElementById('decodeBtn');
btn.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span>Decoding...';
btn.disabled = true;
});
</script>
{% endblock %}

130
templates/encode.html Normal file
View File

@@ -0,0 +1,130 @@
{% extends "base.html" %}
{% block title %}Encode Message - Stegasoo{% endblock %}
{% block content %}
<div class="row justify-content-center">
<div class="col-lg-8">
<div class="card">
<div class="card-header">
<h5 class="mb-0"><i class="bi bi-lock-fill me-2"></i>Encode Secret Message</h5>
</div>
<div class="card-body">
<form method="POST" enctype="multipart/form-data" id="encodeForm">
<div class="row">
<div class="col-md-6 mb-3">
<label class="form-label">
<i class="bi bi-image me-1"></i> Reference Photo
</label>
<input type="file" name="reference_photo" class="form-control"
accept="image/*" required>
<div class="form-text">
The secret photo both parties have (NOT transmitted)
</div>
</div>
<div class="col-md-6 mb-3">
<label class="form-label">
<i class="bi bi-file-image me-1"></i> Carrier Image
</label>
<input type="file" name="carrier" class="form-control"
accept="image/*" required>
<div class="form-text">
The image to hide your message in (e.g., a meme)
</div>
</div>
</div>
<div class="mb-3">
<label class="form-label">
<i class="bi bi-chat-left-text me-1"></i> Secret Message
</label>
<textarea name="message" class="form-control" rows="4"
placeholder="Enter your secret message here..." required></textarea>
</div>
<div class="row">
<div class="col-md-8 mb-3">
<label class="form-label">
<i class="bi bi-chat-quote me-1"></i> {{ day_of_week }}'s Phrase
</label>
<input type="text" name="day_phrase" class="form-control"
placeholder="e.g., correct horse battery" required>
<div class="form-text">
Your 3-word phrase for today (from your phrase card)
</div>
</div>
<div class="col-md-4 mb-3">
<label class="form-label">
<i class="bi bi-123 me-1"></i> PIN
</label>
<input type="password" name="pin" class="form-control"
placeholder="123456" maxlength="10">
<div class="form-text">
Your static 6-digit PIN
</div>
</div>
</div>
<button type="submit" class="btn btn-primary btn-lg w-100" id="encodeBtn">
<i class="bi bi-lock me-2"></i>Encode & Download
</button>
</form>
<hr class="my-4">
<div class="row text-center text-muted small">
<div class="col-4">
<i class="bi bi-shield-check fs-4 d-block mb-1 text-success"></i>
AES-256-GCM Encryption
</div>
<div class="col-4">
<i class="bi bi-shuffle fs-4 d-block mb-1 text-info"></i>
Random Pixel Embedding
</div>
<div class="col-4">
<i class="bi bi-eye-slash fs-4 d-block mb-1 text-warning"></i>
Undetectable by Analysis
</div>
</div>
<div class="alert alert-secondary mt-4 small">
<i class="bi bi-info-circle me-1"></i>
<strong>Limits:</strong>
Carrier image max ~4 megapixels (2000×2000).
Files max 5MB each.
Message max 50KB.
</div>
</div>
</div>
</div>
</div>
{% endblock %}
{% block scripts %}
<script>
document.getElementById('encodeForm').addEventListener('submit', function(e) {
const btn = document.getElementById('encodeBtn');
btn.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span>Encoding...';
btn.disabled = true;
// Argon2 key derivation can take a few seconds
// Reset button after encoding completes (file downloads don't navigate)
setTimeout(function() {
btn.innerHTML = '<i class="bi bi-check-circle me-2"></i>Done! Encode Another?';
btn.disabled = false;
btn.classList.remove('btn-primary');
btn.classList.add('btn-success');
// Reset to original state after a moment
setTimeout(function() {
btn.innerHTML = '<i class="bi bi-lock me-2"></i>Encode & Download';
btn.classList.remove('btn-success');
btn.classList.add('btn-primary');
}, 2000);
}, 4000); // 4 seconds for Argon2 + embedding
});
</script>
{% endblock %}

181
templates/generate.html Normal file
View File

@@ -0,0 +1,181 @@
{% extends "base.html" %}
{% block title %}Generate Phrase Card - Stegasoo{% endblock %}
{% block content %}
<div class="row justify-content-center">
<div class="col-lg-8">
<div class="card">
<div class="card-header">
<h5 class="mb-0"><i class="bi bi-key-fill me-2"></i>Generate Phrase Card + PIN</h5>
</div>
<div class="card-body">
{% if not generated %}
<p class="text-muted mb-4">
Generate your weekly phrase card and static PIN. Customize your security level:
</p>
<form method="POST">
<div class="row">
<div class="col-md-6 mb-3">
<label class="form-label">Words per phrase</label>
<select name="words_per_phrase" class="form-select" id="wordsSelect">
<option value="3" selected>3 words (~33 bits)</option>
<option value="4">4 words (~44 bits)</option>
<option value="5">5 words (~55 bits)</option>
<option value="6">6 words (~66 bits)</option>
<option value="7">7 words (~77 bits)</option>
<option value="8">8 words (~88 bits)</option>
<option value="9">9 words (~99 bits)</option>
<option value="10">10 words (~110 bits)</option>
<option value="11">11 words (~121 bits)</option>
<option value="12">12 words (~132 bits)</option>
</select>
<div class="form-text">More words = more security, harder to memorize</div>
</div>
<div class="col-md-6 mb-3">
<label class="form-label">PIN length</label>
<select name="pin_length" class="form-select" id="pinSelect">
<option value="6" selected>6 digits (~20 bits)</option>
<option value="7">7 digits (~23 bits)</option>
<option value="8">8 digits (~27 bits)</option>
</select>
<div class="form-text">Same PIN used every day</div>
</div>
</div>
<div class="alert alert-info mb-4">
<div class="d-flex justify-content-between align-items-center">
<span><i class="bi bi-calculator me-2"></i>Estimated phrase+PIN entropy:</span>
<strong id="entropyDisplay">~53 bits</strong>
</div>
<div class="progress mt-2" style="height: 8px;">
<div class="progress-bar bg-success" id="entropyBar" style="width: 40%"></div>
</div>
<small class="text-muted mt-1 d-block">
<span id="entropyDesc">Good for most use cases</span>
• Reference photo adds ~80-256 bits more
</small>
</div>
<button type="submit" class="btn btn-primary btn-lg w-100">
<i class="bi bi-shuffle me-2"></i>Generate New Credentials
</button>
</form>
{% else %}
<div class="alert alert-warning">
<i class="bi bi-exclamation-triangle me-2"></i>
<strong>Memorize this information, then close this page!</strong>
Do not save or screenshot. Refresh to generate new credentials.
</div>
<div class="text-center mb-4">
<h6 class="text-muted mb-2">YOUR STATIC PIN</h6>
<div class="pin-display">{{ pin }}</div>
<small class="text-muted">Use this {{ pin_length }}-digit PIN every day</small>
</div>
<hr class="my-4">
<h6 class="text-muted mb-3">DAILY PHRASES ({{ words_per_phrase }} words each)</h6>
<div class="table-responsive">
<table class="table table-dark table-hover">
<thead>
<tr>
<th style="width: 120px;">Day</th>
<th>Phrase</th>
</tr>
</thead>
<tbody>
{% for day in days %}
<tr>
<td>
<i class="bi bi-calendar-day me-2"></i>{{ day }}
</td>
<td>
<span class="phrase-display">{{ phrases[day] }}</span>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
<div class="alert alert-success mt-4">
<h6><i class="bi bi-shield-check me-2"></i>Security Summary</h6>
<div class="row text-center mt-3">
<div class="col-4">
<div class="fs-4 fw-bold">{{ phrase_entropy }}</div>
<small class="text-muted">bits/phrase</small>
</div>
<div class="col-4">
<div class="fs-4 fw-bold">{{ pin_entropy }}</div>
<small class="text-muted">bits/PIN</small>
</div>
<div class="col-4">
<div class="fs-4 fw-bold text-success">{{ total_entropy }}</div>
<small class="text-muted">bits total</small>
</div>
</div>
<small class="d-block mt-2 text-center text-muted">
+ reference photo (~80-256 bits) = <strong>{{ total_entropy + 80 }}+ bits combined</strong>
</small>
</div>
<div class="alert alert-info mt-4">
<h6><i class="bi bi-lightbulb me-2"></i>Memorization Tip</h6>
<p class="mb-1">
<strong>Total to memorize:</strong> {{ words_per_phrase * 7 }} words + {{ pin_length }} digits
</p>
<p class="mb-0 small">
Create a story for each day: "On Monday, the <em>[word1]</em> and <em>[word2]</em> went to see <em>[word3]</em>..."
</p>
</div>
<a href="/generate" class="btn btn-outline-light btn-lg w-100 mt-3">
<i class="bi bi-arrow-repeat me-2"></i>Generate New Credentials
</a>
{% endif %}
</div>
</div>
</div>
</div>
{% endblock %}
{% block scripts %}
{% if not generated %}
<script>
function updateEntropy() {
const words = parseInt(document.getElementById('wordsSelect').value);
const pinLen = parseInt(document.getElementById('pinSelect').value);
const phraseEntropy = words * 11;
const pinEntropy = Math.floor(pinLen * 3.32);
const total = phraseEntropy + pinEntropy;
document.getElementById('entropyDisplay').textContent = '~' + total + ' bits';
// Update progress bar (scale: 50 bits = 40%, 150 bits = 100%)
const pct = Math.min(100, Math.max(10, (total - 30) * 0.7));
document.getElementById('entropyBar').style.width = pct + '%';
// Update description
let desc;
if (total < 50) desc = 'Basic security';
else if (total < 70) desc = 'Good for most use cases';
else if (total < 100) desc = 'Strong security';
else if (total < 130) desc = 'Very strong security';
else desc = 'Extreme security (hard to memorize!)';
document.getElementById('entropyDesc').textContent = desc;
}
document.getElementById('wordsSelect').addEventListener('change', updateEntropy);
document.getElementById('pinSelect').addEventListener('change', updateEntropy);
</script>
{% endif %}
{% endblock %}

108
templates/index.html Normal file
View File

@@ -0,0 +1,108 @@
{% extends "base.html" %}
{% block title %}Stegasoo - Secure Steganography{% endblock %}
{% block content %}
<div class="text-center mb-5">
<i class="bi bi-shield-lock-fill hero-icon"></i>
<h1 class="display-4 fw-bold mt-3">Stegasoo</h1>
<p class="lead text-muted">Hide encrypted messages in plain sight 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-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 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 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 stego 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>
<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 %}