Update templates/result.html

templates/result.html

@@ -1,132 +1,125 @@
-{% extends "base.html" %}
-
-{% block title %}Inference Result{% endblock %}
-
-{% block head_extra %}
-    <style>
-        .result-container {
-            text-align: center;
-            padding: 40px 20px;
-            background-color: var(--card-background);
-            border-radius: 12px;
-            box-shadow: 0 8px 20px var(--shadow);
-            margin-top: 40px;
-            margin-bottom: 40px;
-            animation: fadeInScale 0.8s ease-out forwards;
-        }
-
-        .result-container h2 {
-            color: var(--primary-color);
-            margin-bottom: 30px;
-            font-size: 2.5em;
-        }
-
-        .result-video-wrapper {
-            position: relative;
-            padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
-            height: 0;
-            overflow: hidden;
-            max-width: 100%;
-            background: #000; /* Fallback for no video */
-            border-radius: 10px;
-            margin: 0 auto 30px;
-            box-shadow: 0 4px 15px rgba(0,0,0,0.3);
-        }
-
-        .result-video-wrapper video {
-            position: absolute;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            border-radius: 10px;
-        }
-
-        .download-button {
-            background-color: var(--accent-color);
-            color: #fff;
-            padding: 12px 25px;
-            border: none;
-            border-radius: 5px;
-            font-size: 1.1em;
-            cursor: pointer;
-            transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
-            font-weight: 600;
-            text-decoration: none; /* For the anchor tag */
-            display: inline-block;
-            margin-top: 20px;
-        }
-
-        .download-button:hover {
-            background-color: var(--primary-color);
-            transform: translateY(-2px);
-            box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
-        }
-
-        .download-button:active {
-            transform: translateY(0);
-            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
-        }
-
-        /* Flash message styling (re-used from index.html) */
-        .flash-messages {
-            list-style: none;
-            padding: 0;
-            margin: 20px 0;
-            text-align: center;
-        }
-        .flash-messages li {
-            padding: 10px 20px;
-            margin-bottom: 10px;
-            border-radius: 8px;
-            font-weight: 600;
-            display: inline-block;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
-            animation: fadeInOut 0.5s ease forwards;
-        }
-        .flash-messages .error {
-            background-color: #dc3545;
-            color: #fff;
-        }
-        .flash-messages .success {
-            background-color: #28a745;
-            color: #fff;
-        }
-        .flash-messages .info {
-            background-color: #007bff;
-            color: #fff;
-        }
-
-        @media (max-width: 768px) {
-            .result-container {
-                padding: 30px 15px;
-            }
-            .result-container h2 {
-                font-size: 2em;
-            }
-        }
-    </style>
-{% endblock %}
-
-{% block content %}
-    <section class="result-container">
-        <h2>Your Lip-Synced Video is Ready!</h2>
-
-        <div class="result-video-wrapper">
-            <video controls autoplay loop muted>
-                {# This line is crucial. It now points to the new route that serves the file. #}
-                <source src="{{ url_for('serve_result_video', filename=video_filename) }}" type="video/mp4">
-                Your browser does not support the video tag.
-            </video>
-        </div>
-
-        {# Update download link to new route #}
-        <a href="{{ url_for('download_result', filename=video_filename) }}" class="download-button hover-grow" download>
-            Download Video
-        </a>
-
-        <a href="{{ url_for('index') }}" class="cta-button hover-grow" style="margin-left: 20px;">
-            Generate Another
-        </a>
-    </section>
+{% extends "base.html" %}
+
+{% block title %}Result | AI Avatar Creator{% endblock %}
+
+{% block head_extra %}
+<style>
+    .result-container {
+        max-width: 800px;
+        margin: 0 auto;
+        text-align: center;
+        padding-top: 20px;
+    }
+
+    .hero-title {
+        font-size: 2.5rem;
+        font-weight: 700;
+        letter-spacing: -1px;
+        margin-bottom: 30px;
+        color: var(--text-main);
+    }
+    
+    .hero-title span { color: var(--accent-blue); }
+
+    .video-card {
+        background: var(--card-bg);
+        border: 1px solid var(--card-border);
+        border-radius: 24px;
+        padding: 20px;
+        box-shadow: var(--shadow-card);
+        margin-bottom: 40px;
+    }
+
+    .video-wrapper {
+        position: relative;
+        padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
+        height: 0;
+        overflow: hidden;
+        background: #000;
+        border-radius: 16px;
+        box-shadow: 0 10px 30px rgba(0,0,0,0.1);
+    }
+
+    .video-wrapper video {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        border-radius: 16px;
+    }
+
+    .action-row {
+        display: flex;
+        justify-content: center;
+        gap: 16px;
+        flex-wrap: wrap;
+    }
+
+    .btn-primary {
+        background: var(--btn-dark);
+        color: var(--bg-window);
+        padding: 14px 28px;
+        border-radius: 30px;
+        font-weight: 600;
+        text-decoration: none;
+        display: inline-flex;
+        align-items: center;
+        gap: 10px;
+        transition: 0.2s;
+        box-shadow: 0 4px 15px rgba(0,0,0,0.1);
+    }
+    [data-theme="dark"] .btn-primary { color: #0f172a; }
+
+    .btn-primary:hover {
+        background: var(--btn-dark-hover);
+        transform: translateY(-2px);
+    }
+
+    .btn-secondary {
+        background: var(--card-bg);
+        color: var(--text-main);
+        border: 1px solid var(--card-border);
+        padding: 14px 28px;
+        border-radius: 30px;
+        font-weight: 600;
+        text-decoration: none;
+        display: inline-flex;
+        align-items: center;
+        gap: 10px;
+        transition: 0.2s;
+    }
+
+    .btn-secondary:hover {
+        background: var(--bg-body);
+        transform: translateY(-2px);
+    }
+</style>
+{% endblock %}
+
+{% block content %}
+    <div class="result-container">
+        <h1 class="hero-title">
+            Your Avatar is <span>Ready!</span> 🎉
+        </h1>
+
+        <div class="video-card">
+            <div class="video-wrapper">
+                <video controls autoplay loop>
+                    <source src="{{ url_for('serve_result_video', filename=video_filename) }}" type="video/mp4">
+                    Your browser does not support the video tag.
+                </video>
+            </div>
+        </div>
+
+        <div class="action-row">
+            <a href="{{ url_for('download_result', filename=video_filename) }}" class="btn-primary" download>
+                <i class="fas fa-download"></i> Download Video
+            </a>
+            
+            <a href="{{ url_for('index') }}" class="btn-secondary">
+                <i class="fas fa-redo"></i> Create Another
+            </a>
+        </div>
+    </div>
 {% endblock %}