stegasoo/frontends/web/templates/encode_result.html

{% 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">
                    {% 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>
                
                <div class="mb-3">
                    <code class="fs-5">{{ filename }}</code>
                </div>
                
                <!-- Mode and format badges -->
                <div class="mb-4">
                    {% if embed_mode == 'dct' %}
                        <span class="badge bg-info fs-6">
                            <i class="bi bi-soundwave me-1"></i>DCT Mode
                        </span>
                        
                        <!-- Color mode badge (v3.0.1) -->
                        {% if color_mode == 'color' %}
                        <span class="badge bg-success fs-6 ms-1">
                            <i class="bi bi-palette-fill me-1"></i>Color
                        </span>
                        {% else %}
                        <span class="badge bg-secondary fs-6 ms-1">
                            <i class="bi bi-circle-half me-1"></i>Grayscale
                        </span>
                        {% endif %}
                        
                        <!-- Output format badge -->
                        {% if output_format == 'jpeg' %}
                        <span class="badge bg-warning text-dark fs-6 ms-1">
                            <i class="bi bi-file-earmark-richtext me-1"></i>JPEG
                        </span>
                        <div class="small text-muted mt-2">
                            {% if color_mode == 'color' %}
                            Color JPEG, frequency domain embedding (Q=95)
                            {% else %}
                            Grayscale JPEG, frequency domain embedding (Q=95)
                            {% endif %}
                        </div>
                        {% else %}
                        <span class="badge bg-primary fs-6 ms-1">
                            <i class="bi bi-file-earmark-image me-1"></i>PNG
                        </span>
                        <div class="small text-muted mt-2">
                            {% if color_mode == 'color' %}
                            Color PNG, frequency domain embedding (lossless)
                            {% else %}
                            Grayscale PNG, frequency domain embedding (lossless)
                            {% endif %}
                        </div>
                        {% endif %}
                        
                    {% else %}
                        <span class="badge bg-primary fs-6">
                            <i class="bi bi-grid-3x3-gap me-1"></i>LSB Mode
                        </span>
                        <span class="badge bg-success fs-6 ms-1">
                            <i class="bi bi-palette-fill me-1"></i>Full Color
                        </span>
                        <span class="badge bg-primary fs-6 ms-1">
                            <i class="bi bi-file-earmark-image me-1"></i>PNG
                        </span>
                        <div class="small text-muted mt-2">Full color PNG, spatial LSB embedding</div>
                    {% endif %}
                </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>
                        {% if embed_mode == 'dct' and output_format == 'jpeg' %}
                        <li>JPEG format is lossy - avoid re-saving or editing</li>
                        {% else %}
                        <li>PNG format preserves your hidden data</li>
                        {% endif %}
                        {% if embed_mode == 'dct' %}
                        <li>Recipient needs <strong>DCT mode</strong> or <strong>Auto</strong> detection to decode</li>
                        {% if color_mode == 'color' %}
                        <li>Color preserved - extraction works on both color and grayscale</li>
                        {% endif %}
                        {% endif %}
                    </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 }}";
const mimeType = "{{ 'image/jpeg' if embed_mode == 'dct' and output_format == 'jpeg' else 'image/png' }}";

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: mimeType });
            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 %}