can you move this block to the dual captions block header - Follow Up Deployment

index.html

@@ -79,8 +79,8 @@
         <div id="captionSection" class="hidden">
             <div class="bg-white rounded-lg shadow-md p-4 mb-8">
                 <div class="flex items-center justify-between mb-4">
-                    <h3 class="text-lg font-semibold text-gray-800">Dual Captions</h3>
                     <div class="flex items-center space-x-4">
+                        <h3 class="text-lg font-semibold text-gray-800">Dual Captions</h3>
                         <span id="originalLanguage" class="px-2 py-1 bg-gray-100 rounded text-sm"></span>
                         <select id="languageSelect" class="px-2 py-1 border border-gray-300 rounded text-sm">
                             <option value="en">English</option>
@@ -95,27 +95,37 @@
                             <option value="ar">Arabic</option>
                         </select>
                     </div>
+                    <div class="flex space-x-2">
+                        <button id="syncCaptionsBtn" class="p-2 rounded-full hover:bg-blue-100 text-blue-600" title="Toggle Sync">
+                            <i class="fas fa-sync-alt"></i>
+                        </button>
+                        <button id="highlightCurrentBtn" class="p-2 rounded-full hover:bg-green-100 text-gray-600" title="Toggle Highlight">
+                            <i class="fas fa-highlighter"></i>
+                        </button>
+                        <div class="flex items-center space-x-2">
+                            <span class="text-sm text-gray-500">Font Size:</span>
+                            <button id="fontSizeMinusBtn" class="p-1 rounded-full hover:bg-gray-200 text-gray-700" title="Decrease">
+                                <i class="fas fa-minus"></i>
+                            </button>
+                            <span id="fontSizeDisplay" class="text-sm w-6 text-center">14</span>
+                            <button id="fontSizePlusBtn" class="p-1 rounded-full hover:bg-gray-200 text-gray-700" title="Increase">
+                                <i class="fas fa-plus"></i>
+                            </button>
+                        </div>
+                    </div>
                 </div>
                 <div id="mergedCaptions" class="caption-container h-96 overflow-y-auto p-1 bg-gray-50 rounded border border-gray-200">
                     <!-- Merged captions will be inserted here -->
                 </div>
             </div>
 
-            <div class="bg-white rounded-lg shadow-md p-6">
-                <h3 class="text-lg font-semibold mb-4 text-gray-800">Caption Controls</h3>
-                <div class="flex flex-wrap gap-4">
-                    <button id="syncCaptionsBtn" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded">
-                        <i class="fas fa-sync-alt mr-2"></i> Sync with Video
-                    </button>
-                    <button id="highlightCurrentBtn" class="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded">
-                        <i class="fas fa-highlighter mr-2"></i> Highlight Current Line
-                    </button>
-                    <button id="fontSizePlusBtn" class="bg-gray-200 hover:bg-gray-300 text-gray-800 px-4 py-2 rounded">
-                        <i class="fas fa-text-height mr-2"></i> Increase Font Size
-                    </button>
-                    <button id="fontSizeMinusBtn" class="bg-gray-200 hover:bg-gray-300 text-gray-800 px-4 py-2 rounded">
-                        <i class="fas fa-text-height mr-2"></i> Decrease Font Size
-                    </button>
+        </div>
+
+        <div id="errorMessage" class="hidden bg-red-100 border-l-4 border-red-500 text-red-700 p-4 mb-8 rounded">
+            <div class="flex items-center">
+                <i class="fas fa-exclamation-circle mr-3"></i>
+                <div>
+                    <p id="errorText"></p>
                 </div>
             </div>
         </div>
@@ -140,15 +150,6 @@
                 </button>
             </div>
         </div>
-
-        <div id="errorMessage" class="hidden bg-red-100 border-l-4 border-red-500 text-red-700 p-4 mb-8 rounded">
-            <div class="flex items-center">
-                <i class="fas fa-exclamation-circle mr-3"></i>
-                <div>
-                    <p id="errorText"></p>
-                </div>
-            </div>
-        </div>
     </main>
 
     <footer class="bg-gray-800 text-white py-8">
@@ -193,9 +194,11 @@
             const highlightCurrentBtn = document.getElementById('highlightCurrentBtn');
             const fontSizePlusBtn = document.getElementById('fontSizePlusBtn');
             const fontSizeMinusBtn = document.getElementById('fontSizeMinusBtn');
+            const fontSizeDisplay = document.getElementById('fontSizeDisplay');
             
             let currentFontSize = 14;
             let highlightEnabled = false;
+            let syncEnabled = false;
             let player;
             let captions = [];
             let translatedCaptionData = {};
@@ -397,25 +400,27 @@
             
             // Toggle caption syncing with video
             function toggleSyncCaptions() {
-                // In a real implementation, this would:
-                // 1. Track video playback position
-                // 2. Highlight the current caption in both columns
-                // 3. Auto-scroll to keep current caption visible
+                syncEnabled = !syncEnabled;
+                syncCaptionsBtn.classList.toggle('text-blue-600', !syncEnabled);
+                syncCaptionsBtn.classList.toggle('text-white', syncEnabled);
+                syncCaptionsBtn.classList.toggle('bg-blue-600', syncEnabled);
                 
-                alert("Caption syncing would be implemented with YouTube Player API in a real application");
+                if (syncEnabled) {
+                    // In a real implementation, start syncing
+                    alert("Caption syncing would be implemented with YouTube Player API in a real application");
+                } else {
+                    // Stop syncing
+                }
             }
             
             // Toggle highlighting of current caption
             function toggleHighlightCurrent() {
                 highlightEnabled = !highlightEnabled;
+                highlightCurrentBtn.classList.toggle('text-gray-600', !highlightEnabled);
+                highlightCurrentBtn.classList.toggle('text-white', highlightEnabled);
+                highlightCurrentBtn.classList.toggle('bg-green-600', highlightEnabled);
                 
-                if (highlightEnabled) {
-                    highlightCurrentBtn.classList.add('bg-green-700');
-                    highlightCurrentBtn.classList.remove('bg-green-600');
-                } else {
-                    highlightCurrentBtn.classList.remove('bg-green-700');
-                    highlightCurrentBtn.classList.add('bg-green-600');
-                    
+                if (!highlightEnabled) {
                     // Remove all highlights
                     document.querySelectorAll('.highlight').forEach(el => {
                         el.classList.remove('highlight');
@@ -425,16 +430,16 @@
             
             // Increase font size for captions
             function increaseFontSize() {
-                currentFontSize += 1;
+                currentFontSize = Math.min(24, currentFontSize + 1);
+                fontSizeDisplay.textContent = currentFontSize;
                 updateCaptionFontSize();
             }
             
             // Decrease font size for captions
             function decreaseFontSize() {
-                if (currentFontSize > 12) {
-                    currentFontSize -= 1;
-                    updateCaptionFontSize();
-                }
+                currentFontSize = Math.max(12, currentFontSize - 1);
+                fontSizeDisplay.textContent = currentFontSize;
+                updateCaptionFontSize();
             }
             
             // Update font size for caption containers