Update templates/index.html

templates/index.html

@@ -30,23 +30,14 @@
         h1 { color: var(--heading-color); font-weight: 700; margin-bottom: 0.5rem; }
         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; position: relative;
-        }
-        .tab.active { color: var(--primary-color); border-bottom-color: var(--primary-color); }
-        
-        .form-content { display: none; }
-        .form-content.active { display: block; animation: fadeIn 0.5s ease; }
+        .form-content { 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; font-size: 1rem; }
-        .file-upload-label:hover, input[type="url"]:focus { background-color: #f8f9fa; border-color: var(--primary-color); }
+        .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; }
+        .file-upload-label:hover { 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); font-size: 0.9rem; }
         
@@ -76,7 +67,7 @@
     <div class="container">
         <header>
             <h1>AI Video Narrator</h1>
-            <p class="subtitle">Dub your video by uploading a file or pasting a YouTube link.</p>
+            <p class="subtitle">Upload your video to generate a dubbed version</p>
         </header>
 
         {% with messages = get_flashed_messages(with_categories=true) %}
@@ -88,12 +79,7 @@
         {% endwith %}
 
         <form id="dubbing-form" action="/process" method="POST" enctype="multipart/form-data">
-            <div class="tab-container">
-                <div class="tab active" data-tab="upload">Upload File</div>
-                <div class="tab" data-tab="youtube">From YouTube URL</div>
-            </div>
-
-            <div id="upload" class="form-content active">
+            <div class="form-content">
                 <label for="video" class="file-upload-label">
                     <span>Click to select a video file</span>
                     <div id="file-name">No file chosen</div>
@@ -101,10 +87,6 @@
                 <input type="file" id="video" name="video" accept="video/mp4,video/mov,video/webm">
             </div>
 
-            <div id="youtube" class="form-content">
-                <input type="url" name="youtube_url" placeholder="Paste YouTube video link here...">
-            </div>
-
             <fieldset class="form-step" style="padding-top: 0.5rem;">
                 <legend>Configure Voice</legend>
                 <div class="radio-group">
@@ -135,37 +117,19 @@
     </div>
 
     <script>
-        const tabs = document.querySelectorAll('.tab');
-        const contents = document.querySelectorAll('.form-content');
         const form = document.getElementById('dubbing-form');
         const loader = document.getElementById('loader');
         const videoInput = document.getElementById('video');
-        const urlInput = document.querySelector('input[name="youtube_url"]');
         const fileNameDisplay = document.getElementById('file-name');
 
-        tabs.forEach(tab => {
-            tab.addEventListener('click', () => {
-                tabs.forEach(item => item.classList.remove('active'));
-                contents.forEach(item => item.classList.remove('active'));
-                tab.classList.add('active');
-                document.getElementById(tab.dataset.tab).classList.add('active');
-                if (tab.dataset.tab === 'upload') {
-                    urlInput.value = '';
-                } else {
-                    videoInput.value = '';
-                    fileNameDisplay.textContent = 'No file chosen';
-                }
-            });
-        });
-
         videoInput.addEventListener('change', function() {
             fileNameDisplay.textContent = this.files.length > 0 ? this.files[0].name : 'No file chosen';
         });
 
         form.addEventListener('submit', function(event) {
-            if (!videoInput.value && !urlInput.value) {
+            if (!videoInput.value) {
                 event.preventDefault();
-                alert('Please either select a video file or enter a YouTube URL.');
+                alert('Please select a video file to upload.');
             } else {
                 form.style.display = 'none';
                 loader.style.display = 'block';