Update templates/index.html

templates/index.html

@@ -5,65 +5,71 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>AI Video Narrator</title>
     <style>
-        @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap');
+        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
         
         :root {
             --primary-color: #0d6efd;
             --secondary-color: #6c757d;
-            --background-color: #f8f9fa;
+            --background-color: #f4f7f9;
             --card-background: #ffffff;
             --heading-color: #212529;
-            --border-color: #dee2e6;
-            --shadow: 0 8px 30px rgba(0,0,0,0.08);
+            --border-color: #e9ecef;
+            --shadow: 0 10px 40px rgba(0,0,0,0.07);
         }
 
         *, *::before, *::after { box-sizing: border-box; }
         body {
-            font-family: 'Poppins', sans-serif; margin: 0; background-color: var(--background-color);
+            font-family: 'Inter', sans-serif; margin: 0; background-color: var(--background-color);
             display: flex; justify-content: center; align-items: flex-start; padding: 2rem; min-height: 100vh;
         }
         .container {
-            background-color: var(--card-background); padding: 2.5rem 3rem; border-radius: 20px;
+            background-color: var(--card-background); padding: 2.5rem 3rem; border-radius: 24px;
             border: 1px solid var(--border-color); box-shadow: var(--shadow); width: 100%; max-width: 700px;
         }
         header { text-align: center; margin-bottom: 2.5rem; }
         h1 { color: var(--heading-color); font-weight: 700; margin-bottom: 0.5rem; }
-        p.subtitle { color: var(--secondary-color); }
+        p.subtitle { color: var(--secondary-color); font-size: 1.1rem; }
         
         .tab-container { display: flex; border-bottom: 2px solid var(--border-color); margin-bottom: 1.5rem; }
         .tab {
             padding: 0.75rem 1.5rem; cursor: pointer; font-weight: 600; color: var(--secondary-color);
-            border-bottom: 3px solid transparent; transition: all 0.2s;
+            border-bottom: 3px solid transparent; transition: all 0.2s; position: relative;
         }
         .tab.active { color: var(--primary-color); border-bottom-color: var(--primary-color); }
         
         .form-content { display: none; }
-        .form-content.active { display: block; }
+        .form-content.active { display: block; animation: fadeIn 0.5s ease; }
+        @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
 
         .form-step { margin-bottom: 1.5rem; padding: 1.5rem; border: 1px solid var(--border-color); border-radius: 12px; }
         .form-step legend { font-size: 1.1rem; font-weight: 600; color: var(--primary-color); padding: 0 0.5rem; margin-left: 0.5rem; }
         
         input[type="url"], .file-upload-label { width: 100%; border: 2px dashed var(--border-color); padding: 2rem; border-radius: 8px; text-align: center; cursor: pointer; transition: background-color 0.2s, border-color 0.2s; }
-        input[type="url"] { padding: 0.75rem; text-align: left; cursor: text; }
-        .file-upload-label:hover, input[type="url"]:focus { background-color: #f1f3f5; border-color: var(--primary-color); }
+        input[type="url"] { padding: 0.75rem; text-align: left; cursor: text; font-size: 1rem; }
+        .file-upload-label:hover, input[type="url"]:focus { background-color: #f8f9fa; border-color: var(--primary-color); }
         input[type="file"] { display: none; }
-        #file-name { margin-top: 1rem; font-style: italic; color: var(--secondary-color); }
+        #file-name { margin-top: 1rem; font-style: italic; color: var(--secondary-color); font-size: 0.9rem; }
         
         .submit-btn {
-            width: 100%; background-image: linear-gradient(45deg, #0d6efd, #0dcaf0);
+            width: 100%; background: var(--primary-color);
             color: white; border: none; padding: 1rem; border-radius: 12px;
             font-size: 1.2rem; font-weight: 600; cursor: pointer; transition: all 0.3s ease;
-            box-shadow: 0 4px 15px rgba(13, 110, 253, 0.3); margin-top: 1rem;
+            box-shadow: 0 4px 15px rgba(13, 110, 253, 0.2); margin-top: 1rem;
         }
-        .submit-btn:hover { transform: translateY(-3px); box-shadow: 0 7px 20px rgba(13, 110, 253, 0.4); }
+        .submit-btn:hover { transform: translateY(-3px); box-shadow: 0 7px 20px rgba(13, 110, 253, 0.3); }
         
         .result-section, .flash-message, #loader { margin-top: 2.5rem; text-align: center; }
         h2 { border-bottom: 3px solid var(--primary-color); padding-bottom: 0.5rem; display: inline-block; margin-bottom: 1.5rem; }
-        video { width: 100%; border-radius: 12px; box-shadow: var(--shadow); }
+        video { width: 100%; border-radius: 12px; box-shadow: var(--shadow); aspect-ratio: 16 / 9; background-color: #000; }
         .script-box { background-color: #212529; color: #f8f9fa; padding: 1.5rem; border-radius: 8px; text-align: left; white-space: pre-wrap; word-wrap: break-word; font-family: "SF Mono", monospace; line-height: 1.7; margin-top: 1rem; max-height: 250px; overflow-y: auto; }
-        .flash-message { padding: 1rem; border-radius: 8px; background-color: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; font-weight: 600; }
+        .flash-message { padding: 1rem; border-radius: 8px; font-weight: 500; }
+        .flash-message.error { background-color: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }
+        .flash-message.success { background-color: #d1e7dd; color: #0f5132; border: 1px solid #badbcc; }
+        
         #loader { display: none; }
         #loader p { font-size: 1.2rem; font-weight: 600; color: var(--primary-color); }
+        .spinner { width: 50px; height: 50px; border: 5px solid #f3f3f3; border-top: 5px solid var(--primary-color); border-radius: 50%; animation: spin 1s linear infinite; margin: 0 auto 1rem; }
+        @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
     </style>
 </head>
 <body>
@@ -73,8 +79,12 @@
             <p class="subtitle">Dub your video by uploading a file or pasting a YouTube link.</p>
         </header>
 
-        {% with messages = get_flashed_messages() %}
-            {% if messages %}<div class="flash-message">{{ messages[0] }}</div>{% endif %}
+        {% with messages = get_flashed_messages(with_categories=true) %}
+            {% if messages %}
+                {% for category, message in messages %}
+                    <div class="flash-message {{ category }}">{{ message }}</div>
+                {% endfor %}
+            {% endif %}
         {% endwith %}
 
         <form id="dubbing-form" action="/process" method="POST" enctype="multipart/form-data">
@@ -109,7 +119,10 @@
             <button type="submit" class="submit-btn">Generate Dubbed Video</button>
         </form>
 
-        <div id="loader"><p>Processing your video... This may take a few minutes.</p></div>
+        <div id="loader">
+            <div class="spinner"></div>
+            <p>Processing your video... This may take a few minutes.</p>
+        </div>
 
         {% if result_video %}
         <div class="result-section">
@@ -136,8 +149,6 @@
                 contents.forEach(item => item.classList.remove('active'));
                 tab.classList.add('active');
                 document.getElementById(tab.dataset.tab).classList.add('active');
-                
-                // Clear the other input when switching tabs
                 if (tab.dataset.tab === 'upload') {
                     urlInput.value = '';
                 } else {