check all buttons in UI are wokring - Follow Up Deployment

index.html

@@ -147,7 +147,7 @@
                                     </div>
                                 </div>
                             </div>
-                            <div id="upload-preview" class="hidden">
+                            <div id="upload-preview-container" class="hidden">
                                 <div id="images-preview" class="hidden mb-4">
                                     <p class="text-sm font-medium mb-2"><span id="image-count">0</span> images selected</p>
                                     <div class="flex space-x-2 overflow-x-auto pb-2">
@@ -545,7 +545,20 @@
             document.querySelectorAll('.plan-select').forEach(btn => {
                 btn.addEventListener('click', function() {
                     const plan = this.getAttribute('data-plan');
-                    showToast(`${plan.charAt(0).toUpperCase() + plan.slice(1)} plan selected`);
+                    const planName = plan.charAt(0).toUpperCase() + plan.slice(1);
+                    
+                    // Update UI to show selected plan
+                    document.querySelectorAll('.plan-select').forEach(b => {
+                        b.classList.remove('bg-purple-500', 'text-white');
+                        b.classList.add('border-purple-500', 'text-purple-500', 'hover:bg-purple-50');
+                    });
+                    
+                    if (plan !== 'free') {
+                        this.classList.remove('border-purple-500', 'text-purple-500', 'hover:bg-purple-50');
+                        this.classList.add('bg-purple-500', 'text-white');
+                    }
+                    
+                    showToast(`${planName} plan selected`);
                 });
             });
 
@@ -783,7 +796,17 @@
             document.querySelectorAll('.download-btn').forEach(btn => {
                 btn.addEventListener('click', function() {
                     const id = this.getAttribute('data-id');
-                    alert(`Downloading image ${id}. In a real app, this would trigger a download.`);
+                    const imgSrc = document.getElementById(`result-${id}`).src;
+                    
+                    // Create a temporary anchor element to trigger download
+                    const a = document.createElement('a');
+                    a.href = imgSrc;
+                    a.download = `ai-clone-${id}.jpg`;
+                    document.body.appendChild(a);
+                    a.click();
+                    document.body.removeChild(a);
+                    
+                    showToast('Download started!');
                 });
             });
             
@@ -793,10 +816,14 @@
                 const voice = document.getElementById('voice-select').value;
                 
                 if (!prompt) {
-                    alert('Please describe the video you want to generate');
+                    showToast('Please describe the video you want to generate', 'error');
                     return;
                 }
                 
+                // Disable button during processing
+                generateVideoBtn.disabled = true;
+                generateVideoBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> Processing...';
+                
                 // Show processing
                 videoProgress.classList.remove('hidden');
                 
@@ -825,6 +852,12 @@
                             // Set video info
                             videoTitle.textContent = prompt.substring(0, 30) + (prompt.length > 30 ? '...' : '');
                             videoDuration.textContent = '1:45';
+                            
+                            // Re-enable button
+                            generateVideoBtn.disabled = false;
+                            generateVideoBtn.innerHTML = '<i class="fas fa-video mr-2"></i> Generate Video';
+                            
+                            showToast('Video generated successfully!');
                         }, 1000);
                     }
                 }, 300);
@@ -832,7 +865,20 @@
             
             // Download video button
             downloadVideoBtn.addEventListener('click', function() {
-                alert('Downloading video. In a real app, this would trigger a download.');
+                if (!generatedVideo.src) {
+                    showToast('No video available to download', 'error');
+                    return;
+                }
+                
+                // Create a temporary anchor element to trigger download
+                const a = document.createElement('a');
+                a.href = generatedVideo.src;
+                a.download = 'ai-video-clone.mp4';
+                document.body.appendChild(a);
+                a.click();
+                document.body.removeChild(a);
+                
+                showToast('Video download started!');
             });
             
             // Smooth scrolling for navigation links