There's still malfunctions. Check the entire system, button and all functions and fix it successfully

index.html

@@ -225,40 +225,49 @@
     </div>
 
     <script>
-        // Initialize Vanta.js background
-        VANTA.GLOBE({
-            el: "#vanta-bg",
-            mouseControls: true,
-            touchControls: true,
-            gyroControls: false,
-            minHeight: 200.00,
-            minWidth: 200.00,
-            scale: 1.00,
-            scaleMobile: 1.00,
-            color: 0x6366f1,
-            backgroundColor: 0xffffff,
-            size: 0.8
-        });
-
-        // Initialize feather icons
+        // Initialize Vanta.js background with error handling
+        try {
+            VANTA.GLOBE({
+                el: "#vanta-bg",
+                mouseControls: true,
+                touchControls: true,
+                gyroControls: false,
+                minHeight: 200.00,
+                minWidth: 200.00,
+                scale: 1.00,
+                scaleMobile: 1.00,
+                color: 0x6366f1,
+                backgroundColor: 0xffffff,
+                size: 0.8
+            });
+        } catch (e) {
+            console.error('Vanta.js initialization failed:', e);
+            document.getElementById('vanta-bg').style.backgroundColor = '#6366f1';
+        }
+// Initialize feather icons
         feather.replace();
-
         // Tab switching functionality
         const youtubeTab = document.getElementById('youtube-tab');
         const tiktokTab = document.getElementById('tiktok-tab');
         
-        youtubeTab.addEventListener('click', () => {
+        function switchToYoutube() {
             youtubeTab.classList.add('active-tab', 'text-primary', 'dark:text-primary', 'border-primary');
             tiktokTab.classList.remove('active-tab', 'text-primary', 'dark:text-primary', 'border-primary');
             document.getElementById('video-url').placeholder = 'https://www.youtube.com/watch?v=...';
-        });
+        }
 
-        tiktokTab.addEventListener('click', () => {
+        function switchToTiktok() {
             tiktokTab.classList.add('active-tab', 'text-primary', 'dark:text-primary', 'border-primary');
             youtubeTab.classList.remove('active-tab', 'text-primary', 'dark:text-primary', 'border-primary');
             document.getElementById('video-url').placeholder = 'https://www.tiktok.com/@username/video/...';
-        });
-        // Transcript generation
+        }
+
+        youtubeTab.addEventListener('click', switchToYoutube);
+        tiktokTab.addEventListener('click', switchToTiktok);
+
+        // Set initial active tab
+        switchToYoutube();
+// Transcript generation
         document.getElementById('generate-btn').addEventListener('click', async () => {
             const url = document.getElementById('video-url').value.trim();
             const urlPatterns = {
@@ -275,20 +284,27 @@
                 alert('Please enter a valid YouTube or TikTok URL');
                 return;
             }
-
             try {
                 // Show loading state
                 document.getElementById('empty-state').classList.add('hidden');
                 document.getElementById('status-container').classList.remove('hidden');
                 document.getElementById('results-container').classList.add('hidden');
                 document.getElementById('generate-btn').disabled = true;
+                document.getElementById('generate-btn').innerHTML = '<i data-feather="loader" class="animate-spin w-5 h-5"></i> Processing...';
+                feather.replace();
+
+                // Simulate API call with timeout
+                const timeoutPromise = new Promise((_, reject) => 
+                    setTimeout(() => reject(new Error('Request timeout')), 10000)
+                );
 
-                // Mock API call - replace with actual API endpoint
-                const [videoInfo, transcriptData] = await Promise.all([
+                const apiPromise = Promise.all([
                     fetchVideoInfo(url),
                     fetchTranscript(url)
                 ]);
 
+                const [videoInfo, transcriptData] = await Promise.race([apiPromise, timeoutPromise]);
+
                 // Update UI
                 document.getElementById('status-container').classList.add('hidden');
                 document.getElementById('results-container').classList.remove('hidden');
@@ -308,11 +324,18 @@
                 document.getElementById('status-container').classList.add('hidden');
                 document.getElementById('results-container').classList.add('hidden');
                 document.getElementById('empty-state').classList.remove('hidden');
-                alert('Error processing video. Please try again.');
+                
+                const errorMessage = error.message.includes('timeout') 
+                    ? 'The request timed out. Please check your connection and try again.'
+                    : 'Error processing video. Please try again.';
+                
+                alert(errorMessage);
             } finally {
                 document.getElementById('generate-btn').disabled = false;
+                document.getElementById('generate-btn').innerHTML = '<i data-feather="play" class="w-5 h-5"></i> Generate Transcript';
+                feather.replace();
             }
-        });
+});
 
         // Helper functions
         async function fetchVideoInfo(url) {
@@ -353,23 +376,40 @@
         function countWords(text) {
             return text.split(/\s+/).filter(word => word.length > 0).length;
         }
-// Copy functionality
-        document.getElementById('copy-btn').addEventListener('click', () => {
+        // Copy functionality with fallback
+        document.getElementById('copy-btn').addEventListener('click', async () => {
             const transcriptText = document.getElementById('transcript-content').textContent;
-            navigator.clipboard.writeText(transcriptText).then(() => {
-                const copyBtn = document.getElementById('copy-btn');
+            const copyBtn = document.getElementById('copy-btn');
+            
+            try {
+                if (navigator.clipboard) {
+                    await navigator.clipboard.writeText(transcriptText);
+                } else {
+                    // Fallback for older browsers
+                    const textArea = document.createElement('textarea');
+                    textArea.value = transcriptText;
+                    document.body.appendChild(textArea);
+                    textArea.select();
+                    document.execCommand('copy');
+                    document.body.removeChild(textArea);
+                }
+                
                 const originalText = copyBtn.innerHTML;
                 copyBtn.innerHTML = '<i data-feather="check" class="w-4 h-4"></i> Copied!';
+                copyBtn.classList.add('bg-green-500', 'hover:bg-green-600');
                 feather.replace();
                 
                 setTimeout(() => {
                     copyBtn.innerHTML = originalText;
+                    copyBtn.classList.remove('bg-green-500', 'hover:bg-green-600');
                     feather.replace();
                 }, 2000);
-            });
+            } catch (err) {
+                console.error('Failed to copy:', err);
+                alert('Failed to copy transcript. Please try again or copy manually.');
+            }
         });
-
-        // Download functionality
+// Download functionality
         document.getElementById('download-btn').addEventListener('click', () => {
             const transcriptText = document.getElementById('transcript-content').textContent;
             const blob = new Blob([transcriptText], { type: 'text/plain' });
@@ -382,41 +422,66 @@
             document.body.removeChild(a);
             URL.revokeObjectURL(url);
         });
-        // Dark mode detection and toggle
-        if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
-            document.documentElement.classList.add('dark');
-        }
-        
-        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')) {
-                icon.setAttribute('data-feather', 'sun');
-            } else {
-                icon.setAttribute('data-feather', 'moon');
+        // Dark mode detection and toggle with local storage
+        function initDarkMode() {
+            const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+            const storedMode = localStorage.getItem('darkMode');
+            
+            if (storedMode === 'dark' || (storedMode === null && prefersDark)) {
+                document.documentElement.classList.add('dark');
             }
-            feather.replace();
-        });
-        // Error handling for API calls
+            
+            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 transition-all';
+            darkModeToggle.setAttribute('aria-label', 'Toggle dark mode');
+            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', () => {
+                const isDark = document.documentElement.classList.toggle('dark');
+                localStorage.setItem('darkMode', isDark ? 'dark' : 'light');
+                
+                const icon = darkModeToggle.querySelector('i');
+                icon.setAttribute('data-feather', isDark ? 'sun' : 'moon');
+                feather.replace();
+            });
+        }
+
+        // Initialize dark mode after DOM is loaded
+        document.addEventListener('DOMContentLoaded', initDarkMode);
+        // Global error handling
         window.addEventListener('error', function(e) {
-            console.error('Script error:', e.message, 'in', e.filename, 'line', e.lineno);
-            document.getElementById('status-container').classList.add('hidden');
+            console.error('Error:', e.message, 'in', e.filename, 'line', e.lineno);
+            
+            // Hide any loading states
+            document.getElementById('status-container')?.classList.add('hidden');
+            document.getElementById('generate-btn').disabled = false;
+            document.getElementById('generate-btn').innerHTML = '<i data-feather="play" class="w-5 h-5"></i> Generate Transcript';
+            
+            // Show error message
             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.className = 'fixed top-4 left-1/2 transform -translate-x-1/2 bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded z-50 flex items-center gap-2';
             errorDiv.innerHTML = `
-                <strong class="font-bold">Error!</strong>
-                <span class="block sm:inline">Something went wrong. Please refresh the page and try again.</span>
+                <i data-feather="alert-triangle" class="w-5 h-5"></i>
+                <span>Something went wrong. Please try again.</span>
             `;
-            document.querySelector('.container').prepend(errorDiv);
+            document.body.appendChild(errorDiv);
+            feather.replace();
+            
+            setTimeout(() => {
+                errorDiv.classList.add('opacity-0', 'transition-opacity', 'duration-300');
+                setTimeout(() => errorDiv.remove(), 300);
+            }, 5000);
         });
 
-        feather.replace();
+        // Initialize with loading states
+        document.addEventListener('DOMContentLoaded', () => {
+            feather.replace();
+            document.getElementById('empty-state').classList.remove('hidden');
+        });
+feather.replace();
     </script>
 </body>
 </html>