Enhance page selection UI with radio buttons and dynamic styling for improved user interaction

Author: pyoneerC

templates/index.html

@@ -136,11 +136,34 @@ <h1 class="text-3xl font-bold text-gray-800 mb-6 text-center">Mercadix</h1>
             <input type="text" id="item" name="item" required placeholder="Raqueta de tenis"
                    class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" />
         </div>
+        
         <div>
-            <label for="number_of_pages" class="block text-gray-700 font-medium mb-1">Cantidad de páginas a escanear:</label>
-            <input type="number" id="number_of_pages" name="number_of_pages" required min="1" max="3" value="1"
-                   class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" />
+            <label class="block text-gray-700 font-medium mb-2">Cantidad de páginas a escanear:</label>
+            <div class="flex justify-between gap-2">
+                <label for="page-option-1" class="flex-1 flex items-center justify-center gap-2 px-3 py-2 bg-blue-600 text-white font-medium rounded-md cursor-pointer hover:bg-blue-700 transition duration-200">
+                    <input type="radio" id="page-option-1" name="number_of_pages" value="1" checked class="hidden" />
+                    <span class="flex items-center justify-center w-5 h-5 border-2 border-white rounded-full">
+                        <span class="w-3 h-3 bg-white rounded-full"></span>
+                    </span>
+                    1
+                </label>
+                <label for="page-option-2" class="flex-1 flex items-center justify-center gap-2 px-3 py-2 bg-blue-100 text-blue-800 font-medium rounded-md cursor-pointer hover:bg-blue-200 transition duration-200">
+                    <input type="radio" id="page-option-2" name="number_of_pages" value="2" class="hidden" />
+                    <span class="flex items-center justify-center w-5 h-5 border-2 border-blue-800 rounded-full">
+                        <span class="w-0 h-0 bg-blue-800 rounded-full transition-all duration-200"></span>
+                    </span>
+                    2
+                </label>
+                <label for="page-option-3" class="flex-1 flex items-center justify-center gap-2 px-3 py-2 bg-blue-100 text-blue-800 font-medium rounded-md cursor-pointer hover:bg-blue-200 transition duration-200">
+                    <input type="radio" id="page-option-3" name="number_of_pages" value="3" class="hidden" />
+                    <span class="flex items-center justify-center w-5 h-5 border-2 border-blue-800 rounded-full">
+                        <span class="w-0 h-0 bg-blue-800 rounded-full transition-all duration-200"></span>
+                    </span>
+                    3
+                </label>
+            </div>
         </div>
+        
         <button type="submit" id="submit-button"
                 class="w-full bg-blue-600 text-white font-semibold py-2 rounded-md hover:bg-blue-700 transition duration-200">
             Generar Histograma
@@ -206,6 +229,33 @@ <h1 class="text-3xl font-bold text-gray-800 mb-6 text-center">Mercadix</h1>
             toggleAr.classList.remove('active');
             countryInput.value = 'br';
         });
+        
+        // Page options toggle functionality
+        const pageOptions = document.querySelectorAll('input[name="number_of_pages"]');
+        pageOptions.forEach(option => {
+            option.addEventListener('change', function() {
+                // Reset all options to inactive state
+                document.querySelectorAll('label[for^="page-option-"]').forEach(label => {
+                    label.classList.remove('bg-blue-600', 'text-white');
+                    label.classList.add('bg-blue-100', 'text-blue-800');
+                    
+                    // Reset the circle indicator
+                    const circle = label.querySelector('span > span');
+                    circle.classList.remove('w-3', 'h-3');
+                    circle.classList.add('w-0', 'h-0');
+                });
+                
+                // Set active state for the selected option
+                const selectedLabel = document.querySelector(`label[for="page-option-${this.value}"]`);
+                selectedLabel.classList.remove('bg-blue-100', 'text-blue-800');
+                selectedLabel.classList.add('bg-blue-600', 'text-white');
+                
+                // Update the circle indicator
+                const circle = selectedLabel.querySelector('span > span');
+                circle.classList.remove('w-0', 'h-0');
+                circle.classList.add('w-3', 'h-3');
+            });
+        });
     });
 </script>