stegasoo/frontends/web/templates/index.html

{% extends "base.html" %}

{% block title %}Stegasoo - Secure Steganography{% endblock %}

{% block content %}

<div class="row mb-4">
    <div class="col-12">
        <div class="d-flex align-items-end justify-content-center gap-4">
            <img src="{{ url_for('static', filename='logo.svg') }}" alt="Stegasoo" height="155">
            <div style="margin-bottom: 40px;">
                <h1 class="display-4 fw-bold mb-2">
                    Stegasoo
                    <span class="badge bg-success fs-6 ms-2">v3.2.0</span>
                </h1>
                <p class="lead text-muted mb-0">Hide encrypted data in plain sight.</p>
            </div>
        </div>
    </div>
</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</h5>
                    <p class="card-text text-muted">
                        Hide encrypted messages or files inside images
                    </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</h5>
                    <p class="card-text text-muted">
                        Extract and decrypt hidden data from stego 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</h5>
                    <p class="card-text text-muted">
                        Create passphrases, PINs, and RSA keys
                    </p>
                </div>
            </div>
        </a>
    </div>
</div>

<!-- Embedding Modes -->
<div class="card mb-4">
    <div class="card-header">
        <h5 class="mb-0"><i class="bi bi-cpu me-2"></i>Embedding Modes</h5>
    </div>
    <div class="card-body">
        <div class="row text-center">
            <div class="col-md-6 mb-3 mb-md-0">
                <div class="p-3 bg-dark rounded h-100">
                    <i class="bi bi-grid-3x3-gap text-primary fs-2 d-block mb-2"></i>
                    <strong>LSB Mode</strong>
                    <span class="badge bg-success ms-1">Default</span>
                    <div class="small text-muted mt-2">
                        Higher capacity (~375 KB/MP)<br>
                        Best for email &amp; file transfer
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="p-3 bg-dark rounded h-100">
                    <i class="bi bi-soundwave text-warning fs-2 d-block mb-2"></i>
                    <strong>DCT Mode</strong>
                    <span class="badge bg-warning text-dark ms-1">v3.0</span>
                    <div class="small text-muted mt-2">
                        Survives JPEG recompression<br>
                        Best for social media
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="card">
    <div class="card-header d-flex justify-content-between align-items-center">
        <h5 class="mb-0"><i class="bi bi-diagram-3 me-2"></i>How It Works</h5>
        <a href="/about" class="btn btn-sm btn-outline-secondary">Learn More</a>
    </div>
    <div class="card-body">
        <div class="row">
            <div class="col-md-6">
                <h6 class="text-primary"><i class="bi bi-key me-2"></i>You Provide</h6>
                <ul class="list-unstyled small">
                    <li class="mb-1">
                        <i class="bi bi-image text-info me-2"></i>
                        <strong>Reference Photo</strong> – shared secret image
                    </li>
                    <li class="mb-1">
                        <i class="bi bi-chat-quote text-info me-2"></i>
                        <strong>Passphrase</strong> – 4+ words
                        <span class="badge bg-success ms-1">v3.2.0</span>
                    </li>
                    <li class="mb-1">
                        <i class="bi bi-123 text-info me-2"></i>
                        <strong>PIN</strong> – 6-9 digits (and/or RSA key)
                    </li>
                </ul>
            </div>
            <div class="col-md-6">
                <h6 class="text-primary"><i class="bi bi-shield-check me-2"></i>We Provide</h6>
                <ul class="list-unstyled small">
                    <li class="mb-1">
                        <i class="bi bi-lock text-success me-2"></i>
                        AES-256-GCM encryption
                    </li>
                    <li class="mb-1">
                        <i class="bi bi-memory text-success me-2"></i>
                        Argon2id key derivation (256MB)
                    </li>
                    <li class="mb-1">
                        <i class="bi bi-shuffle text-success me-2"></i>
                        Pseudo-random embedding
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>
{% endblock %}