Add 1 files

index.html

@@ -102,7 +102,7 @@
                             <div class="bg-gray-100 rounded-lg p-3 flex items-center">
                                 <i class="fas fa-file-image text-indigo-500 text-xl mr-3"></i>
                                 <div>
-                                    <p id="fileName" class="text-sm font-medium text-gray-700 truncate max-w-xs"></p>
+                                    <p id="fileName" class="text-sm font-medium text-gray-7truncate max-w-xs"></p>
                                     <p id="fileSize" class="text-xs text-gray-500"></p>
                                 </div>
                             </div>
@@ -178,16 +178,16 @@
 
                             <div class="flex items-center">
                                 <input type="checkbox" id="transparentBg" class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded">
-                                <label for="transparentBg" class="ml-2 block text-sm text-gray-700">Transparent background</label>
+                                <label for="transparentBg" class="ml-2 block text-sm text-gray-7">Transparent background</label>
                             </div>
 
                             <div class="flex items-center">
                                 <input type="checkbox" id="optimizePaths" class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded" checked>
-                                <label for="optimizePaths" class="ml-2 block text-sm text-gray-700">Optimize paths</label>
+                                <label for="optimizePaths" class="ml-2 block text-sm text-gray-7">Optimize paths</label>
                             </div>
                         </div>
 
-                        <button id="convertBtn" class="w-full bg-indigo-600 hover:bg-indigo-7text-white py-2 px-4 rounded-md font-medium transition disabled:opacity-50 disabled:cursor-not-allowed" disabled>
+                        <button id="convertBtn" class="w-full bg-indigo-600 hover:bg-indigo-700 text-white py-2 px-4 rounded-md font-medium transition disabled:opacity-50 disabled:cursor-not-allowed" disabled>
                             <i class="fas fa-magic mr-2"></i> Convert to SVG
                         </button>
                     </div>
@@ -310,6 +310,7 @@
             let currentFile = null;
             let canvas = document.createElement('canvas');
             let ctx = canvas.getContext('2d');
+            let progressInterval;
 
             // Toggle settings panel
             settingsToggle.addEventListener('click', () => {
@@ -461,6 +462,11 @@
                 convertBtn.disabled = true;
                 emptyState.classList.remove('hidden');
                 resultContainer.classList.add('hidden');
+                
+                // Clear any existing progress interval
+                if (progressInterval) {
+                    clearInterval(progressInterval);
+                }
             }
 
             // Process image with vectorization
@@ -470,17 +476,28 @@
                 emptyState.classList.add('hidden');
                 resultContainer.classList.add('hidden');
 
-                // Simulate progress
+                // Reset progress bar
+                progressBar.style.width = '0%';
+
+                // Simulate progress with more controlled increments
                 let progress = 0;
-                const progressInterval = setInterval(() => {
-                    progress += Math.random() * 10;
-                    if (progress > 100) progress = 100; // Changed from 90 to 100
-                    progressBar.style.width = progress + '%';
+                progressInterval = setInterval(() => {
+                    // Calculate progress increment based on remaining distance to 100%
+                    const remaining = 100 - progress;
+                    const increment = Math.min(
+                        Math.max(1, Math.floor(remaining * 0.15)), // Minimum 1%, maximum 15% of remaining
+                        10 // Absolute maximum increment per step
+                    );
+                    
+                    progress += increment;
                     
-                    // Clear interval when we reach 100%
+                    // Ensure we don't go over 100%
                     if (progress >= 100) {
+                        progress = 100;
                         clearInterval(progressInterval);
                     }
+                    
+                    progressBar.style.width = progress + '%';
                 }, 200);
 
                 // Process image after a short delay to allow UI to update
@@ -526,11 +543,21 @@
                     });
 
                     potrace.process(() => {
+                        // Clear the progress interval if it's still running
+                        if (progressInterval) {
+                            clearInterval(progressInterval);
+                        }
+                        
+                        // Ensure progress bar shows 100%
+                        progressBar.style.width = '100%';
+                        
                         // Get SVG data
                         const svg = potrace.getSVG(1, settings.transparent ? 'none' : '#ffffff');
                         
-                        // Show result
-                        showResult(svg);
+                        // Show result after a small delay to allow progress bar to complete
+                        setTimeout(() => {
+                            showResult(svg);
+                        }, 100);
                     });
                 }, 500);
             }