ui fix

static/script.js

@@ -477,22 +477,33 @@ async function uploadImageToFal(imageData, apiKey, imageIndex, totalImages, actu
 function updateUploadProgress(completed, total, message) {
     const progressFill = document.getElementById('uploadProgressFill');
     const progressText = document.getElementById('uploadProgressText');
+    const container = document.getElementById('uploadProgressContainer');
     
-    if (progressFill && progressText) {
+    if (progressFill && progressText && container) {
         const percentage = Math.round((completed / total) * 100);
         progressFill.style.width = `${percentage}%`;
         progressText.textContent = `${message} (${percentage}%)`;
         
-        // Add animation class
+        // Add animation class on completion
         if (percentage === 100) {
             progressFill.classList.add('complete');
+            
+            // Wait briefly to show completion state, then fade out
             setTimeout(() => {
-                const container = document.getElementById('uploadProgressContainer');
-                if (container) {
-                    container.style.opacity = '0';
-                    setTimeout(() => container.remove(), 500);
-                }
+                // Add transition for smooth fade
+                container.style.transition = 'opacity 0.5s ease';
+                container.style.opacity = '0';
+                
+                // Remove from DOM after fade completes
+                setTimeout(() => {
+                    if (container.parentNode) {
+                        container.parentNode.removeChild(container);
+                    }
+                }, 500);
             }, 1500);
+        } else {
+            // Ensure visible if not complete
+            container.style.opacity = '1';
         }
     }
 }

static/style.css

@@ -989,11 +989,12 @@ body {
 /* Global upload progress container (top-level) */
 .upload-progress-container {
   margin-top: 12px;
-  background: rgba(99,102,241,0.08);
-  border: 1px solid rgba(124,58,237,0.20);
+  background: rgba(55, 48, 163, 0.8); /* Deeper purple background for better contrast */
+  border: 1px solid rgba(124,58,237,0.6);
   border-radius: 10px;
   padding: 10px 12px;
   box-shadow: var(--shadow-soft);
+  color: white; /* Ensure text is white for readability */
 }
 
 .upload-progress-bar {
@@ -1020,7 +1021,8 @@ body {
 .upload-progress-text {
   margin-top: 8px;
   font-size: 0.85rem;
-  color: rgba(255,255,255,0.9);
+  color: white; /* Set to white explicitly */
+  font-weight: 600;
 }
 
 /* Individual image upload status (mini) */