Are you finished? Check for errors and malfunctions

index.html

@@ -300,9 +300,16 @@
                                 <p class="text-red-500">Error: Could not fetch transcript. Please try again.</p>
                             `;
                         });
-document.getElementById('transcript-content').innerHTML = sampleTranscript;
-            }, 2000);
-        });
+                    document.getElementById('transcript-content').innerHTML = fullTranscript;
+                    document.getElementById('word-count').textContent = fullTranscript.split(/\s+/).length;
+                })
+                .catch(error => {
+                    console.error('Error fetching video info:', error);
+                    document.getElementById('status-container').classList.add('hidden');
+                    document.getElementById('empty-state').classList.remove('hidden');
+                    alert('Error processing video. Please try again.');
+                });
+});
 
         // Copy functionality
         document.getElementById('copy-btn').addEventListener('click', () => {
@@ -333,14 +340,18 @@ document.getElementById('transcript-content').innerHTML = sampleTranscript;
             document.body.removeChild(a);
             URL.revokeObjectURL(url);
         });
-
-        // Dark mode toggle (for demo purposes)
-        const darkModeToggle = document.createElement('button');
-        darkModeToggle.className = 'fixed top-4 right-4 bg-gray-200 dark:bg-gray-700 p-2 rounded-full';
-        darkModeToggle.innerHTML = '<i data-feather="moon" class="w-5 h-5"></i>';
-        document.body.appendChild(darkModeToggle);
+        // Dark mode detection and toggle
+        if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+            document.documentElement.classList.add('dark');
+        }
         
-        darkModeToggle.addEventListener('click', () => {
+        const darkModeToggle = document.createElement('button');
+        darkModeToggle.className = 'fixed top-4 right-4 bg-gray-200 dark:bg-gray-700 p-2 rounded-full z-50';
+        darkModeToggle.innerHTML = document.documentElement.classList.contains('dark') 
+            ? '<i data-feather="sun" class="w-5 h-5"></i>' 
+            : '<i data-feather="moon" class="w-5 h-5"></i>';
+        document.body.insertBefore(darkModeToggle, document.body.firstChild);
+darkModeToggle.addEventListener('click', () => {
             document.documentElement.classList.toggle('dark');
             const icon = darkModeToggle.querySelector('i');
             if (document.documentElement.classList.contains('dark')) {
@@ -350,6 +361,19 @@ document.getElementById('transcript-content').innerHTML = sampleTranscript;
             }
             feather.replace();
         });
+        // Error handling for API calls
+        window.addEventListener('error', function(e) {
+            console.error('Script error:', e.message, 'in', e.filename, 'line', e.lineno);
+            document.getElementById('status-container').classList.add('hidden');
+            const errorDiv = document.createElement('div');
+            errorDiv.className = 'bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative mb-4';
+            errorDiv.innerHTML = `
+                <strong class="font-bold">Error!</strong>
+                <span class="block sm:inline">Something went wrong. Please refresh the page and try again.</span>
+            `;
+            document.querySelector('.container').prepend(errorDiv);
+        });
+
         feather.replace();
     </script>
 </body>