Update templates/index.html

templates/index.html

@@ -5,26 +5,29 @@
     <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;600;700&display=swap');
         
         :root {
             --primary-color: #0d6efd;
-            --primary-hover: #0b5ed7;
+            --secondary-color: #6c757d;
             --background-color: #f8f9fa;
             --card-background: #ffffff;
-            --text-color: #495057;
             --heading-color: #212529;
             --border-color: #dee2e6;
-            --shadow: 0 8px 30px rgba(0,0,0,0.08);
+            --shadow: 0 8px 30px rgba(0,0,0,0.1);
+        }
+
+        *, *::before, *::after {
+            box-sizing: border-box;
         }
 
         body {
-            font-family: 'Poppins', sans-serif;
+            font-family: 'Inter', sans-serif;
             margin: 0;
             background-color: var(--background-color);
             display: flex;
             justify-content: center;
-            align-items: center;
+            align-items: flex-start;
             padding: 2rem;
             min-height: 100vh;
         }
@@ -32,78 +35,104 @@
             background-color: var(--card-background);
             padding: 2.5rem 3rem;
             border-radius: 20px;
+            border: 1px solid var(--border-color);
             box-shadow: var(--shadow);
             width: 100%;
-            max-width: 650px;
+            max-width: 700px;
             transition: all 0.3s ease;
         }
+        header { text-align: center; margin-bottom: 2.5rem; }
         h1 {
-            text-align: center;
             color: var(--heading-color);
             font-weight: 700;
             margin-bottom: 0.5rem;
         }
-        p.subtitle {
-            text-align: center;
-            color: #6c757d;
-            margin-bottom: 2.5rem;
-        }
-        form { display: flex; flex-direction: column; gap: 1.5rem; }
-        .form-group {
+        p.subtitle { color: var(--secondary-color); }
+        
+        .form-step {
+            margin-bottom: 1.5rem;
+            padding: 1.5rem;
             border: 1px solid var(--border-color);
-            padding: 1.25rem;
             border-radius: 12px;
         }
-        .form-group legend {
+        .form-step legend {
+            font-size: 1.1rem;
             font-weight: 600;
             color: var(--primary-color);
             padding: 0 0.5rem;
-            margin-left: 1rem;
+            margin-left: 0.5rem;
         }
-        input[type="file"] {
+        
+        .file-upload-label {
+            display: block;
             border: 2px dashed var(--border-color);
             padding: 2rem;
             border-radius: 8px;
             text-align: center;
             cursor: pointer;
-            transition: background-color 0.2s;
+            transition: background-color 0.2s, border-color 0.2s;
+        }
+        .file-upload-label:hover {
+            background-color: #f1f3f5;
+            border-color: var(--primary-color);
+        }
+        input[type="file"] { display: none; }
+        #file-name {
+            margin-top: 1rem;
+            font-style: italic;
+            color: var(--secondary-color);
+        }
+        
+        .radio-group, .checkbox-group {
+            display: flex;
+            gap: 1.5rem;
+            justify-content: center;
+            padding-top: 0.5rem;
         }
-        input[type="file"]:hover { background-color: #f1f3f5; }
         .radio-group label, .checkbox-group label {
             display: inline-flex;
             align-items: center;
-            margin-right: 1.5rem;
             cursor: pointer;
         }
-        input[type="radio"], input[type="checkbox"] { margin-right: 0.5rem; }
+        
         .submit-btn {
+            width: 100%;
             background-image: linear-gradient(45deg, #0d6efd, #0dcaf0);
-            color: white; border: none; padding: 1rem 1.5rem; border-radius: 12px;
-            font-size: 1.1rem; font-weight: 600; cursor: pointer; transition: all 0.3s ease; text-align: center;
+            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);
         }
-        .submit-btn:hover { transform: translateY(-3px); box-shadow: 0 7px 20px rgba(13, 110, 253, 0.4); }
-        .result-section { margin-top: 2.5rem; border-top: 1px solid var(--border-color); padding-top: 2.5rem; }
+        .submit-btn:hover {
+            transform: translateY(-3px);
+            box-shadow: 0 7px 20px rgba(13, 110, 253, 0.4);
+        }
+        
+        .result-section { margin-top: 2.5rem; border-top: 2px solid var(--border-color); padding-top: 2.5rem; }
         h2 { color: var(--heading-color); 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); }
         .script-box {
-            background-color: #212529; color: #f8f9fa; border: 1px solid #343a40; padding: 1.5rem; border-radius: 8px;
-            white-space: pre-wrap; word-wrap: break-word; font-family: "SF Mono", "Fira Code", monospace;
-            line-height: 1.7; margin-top: 1rem; max-height: 200px; overflow-y: auto;
+            background-color: #212529; color: #f8f9fa; border: 1px solid #343a40; padding: 1.5rem;
+            border-radius: 8px; white-space: pre-wrap; word-wrap: break-word; font-family: "SF Mono", "Fira Code", monospace;
+            line-height: 1.7; margin-top: 1rem; max-height: 250px; overflow-y: auto;
         }
+        
         .flash-message {
             padding: 1rem; margin-bottom: 1.5rem; border-radius: 8px;
             background-color: #f8d7da; color: #721c24; border: 1px solid #f5c6cb;
             text-align: center; font-weight: 600;
         }
+        
         #loader { text-align: center; display: none; padding: 2rem; }
         #loader p { font-size: 1.2rem; font-weight: 600; color: var(--primary-color); }
     </style>
 </head>
 <body>
     <div class="container">
-        <h1>AI Video Narrator</h1>
-        <p class="subtitle">Upload a video, choose a voice, and let AI create a new, expressive narration.</p>
+        <header>
+            <h1>AI Video Narrator</h1>
+            <p class="subtitle">Upload a video, choose a voice, and let AI create a new, expressive narration.</p>
+        </header>
 
         {% with messages = get_flashed_messages() %}
             {% if messages %}
@@ -114,12 +143,16 @@
         {% endwith %}
 
         <form id="dubbing-form" action="/process" method="POST" enctype="multipart/form-data">
-            <fieldset class="form-group">
+            <fieldset class="form-step">
                 <legend>1. Upload Video</legend>
+                <label for="video" class="file-upload-label">
+                    <span>Click to select a video file</span>
+                    <div id="file-name">No file chosen</div>
+                </label>
                 <input type="file" id="video" name="video" accept="video/mp4,video/mov,video/webm" required>
             </fieldset>
 
-            <fieldset class="form-group">
+            <fieldset class="form-step">
                 <legend>2. Configure Voice</legend>
                 <div class="radio-group">
                     <label><input type="radio" name="voice_choice" value="Male (Charon)" checked> Male Voice</label>
@@ -148,15 +181,30 @@
             <div class="script-box">{{ script }}</div>
         </div>
         {% endif %}
-
     </div>
 
     <script>
-        document.getElementById('dubbing-form').addEventListener('submit', function() {
-            const videoFile = document.getElementById('video').value;
-            if (videoFile) {
-                document.getElementById('dubbing-form').style.display = 'none';
-                document.getElementById('loader').style.display = 'block';
+        const form = document.getElementById('dubbing-form');
+        const loader = document.getElementById('loader');
+        const videoInput = document.getElementById('video');
+        const fileNameDisplay = document.getElementById('file-name');
+
+        videoInput.addEventListener('change', function() {
+            if (this.files && this.files.length > 0) {
+                fileNameDisplay.textContent = this.files[0].name;
+            } else {
+                fileNameDisplay.textContent = 'No file chosen';
+            }
+        });
+
+        form.addEventListener('submit', function(event) {
+            if (!videoInput.value) {
+                // Prevent form submission if no file is selected
+                event.preventDefault();
+                alert('Please select a video file before submitting.');
+            } else {
+                form.style.display = 'none';
+                loader.style.display = 'block';
             }
         });
     </script>