Added debug, additional comments, encoded file thumbnail view.

frontends/web/templates/encode_result.html_20251228

@@ -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 %}