Files
stegasoo/frontends/web/templates/index.html
2025-12-28 22:23:20 -05:00

117 lines
4.8 KiB
HTML

{% 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">
<!-- Encode Card -->
<div class="col-md-4">
<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 and enrypt secret data in an image like a photo or meme.
</p>
</div>
</div>
</a>
</div>
<!-- Decode Card -->
<div class="col-md-4">
<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 data from Stegasoo-encoded images
</p>
</div>
</div>
</a>
</div>
<!-- Generate Card -->
<div class="col-md-4">
<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 weekly phrase card with PIN and/or RSA key.
</p>
</div>
</div>
</a>
</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 to 12 words, one each day of the week
</li>
<li class="mb-2">
<i class="bi bi-key text-info me-2"></i>
<strong>RSA Key</strong> — 2048, 3072, or 4096 bit, password protected PEM or printable QR code.
</li>
<li class="mb-2">
<i class="bi bi-123 text-info me-2"></i>
<strong>Static PIN</strong> — 6-9 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>
Perfect for async communication and encoding/decoding on air-gapped devices.
</li>
<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 %}