Update templates/index.html

templates/index.html

@@ -146,6 +146,7 @@
         }
         .disabled {
             cursor: not-allowed !important; /* Set cursor to not-allowed */
+            opacity: 0.6;
         }
       
         /* Responsive design */
@@ -204,56 +205,72 @@
     <script>
         // Loader functionality
         document.getElementById('fileUploadForm').onsubmit = function() {
-          document.getElementById('loader').style.display = 'block';
-          
-          // Disable the tab buttons and apply disabled class
-          const buttons = document.querySelectorAll('.tab button');
-          buttons.forEach(button => {
-            button.setAttribute('disabled', 'true');
-            button.classList.add('disabled'); // Add disabled class
-          });
-          
-          // Show processing message
-          const processingMessage = document.createElement('p');
-          processingMessage.id = 'processing-message';
-          processingMessage.textContent = 'Processing, please wait...';
-          processingMessage.style.color = '#e68a10'; // Style as needed
-          document.querySelector('.file-upload-section').appendChild(processingMessage);
+            document.getElementById('loader').style.display = 'block';
+    
+            // Disable the tab buttons and apply disabled class
+            const buttons = document.querySelectorAll('.tab button');
+            buttons.forEach(button => {
+                button.setAttribute('disabled', 'true');
+                button.classList.add('disabled'); // Add disabled class
+            });
+    
+            // Disable the "Choose file" input and "Upload your Images" button
+            const fileInput = document.querySelector('input[type="file"]');
+            const uploadButton = document.querySelector('input[type="submit"]');
+            fileInput.setAttribute('disabled', 'true');
+            uploadButton.setAttribute('disabled', 'true');
+            fileInput.classList.add('disabled');
+            uploadButton.classList.add('disabled');
+    
+            // Show processing message
+            const processingMessage = document.createElement('p');
+            processingMessage.id = 'processing-message';
+            processingMessage.textContent = 'Processing, please wait...';
+            processingMessage.style.color = '#e68a10'; // Style as needed
+            document.querySelector('.file-upload-section').appendChild(processingMessage);
         };
-      
+    
         // Flash message auto-hide
         setTimeout(function () {
-          let flashMessage = document.getElementById("flash-message");
-          if (flashMessage) {
-            flashMessage.style.transition = "opacity 1s ease";
-            flashMessage.style.opacity = 0;
-            setTimeout(() => flashMessage.remove(), 1000);
-          }
-          
-          // After processing is complete (You can adjust this based on your logic)
-          const processingMessage = document.getElementById('processing-message');
-          if (processingMessage) {
-            processingMessage.remove(); // Remove the processing message
-          }
-          
-          // Re-enable tab buttons and remove disabled class
-          const buttons = document.querySelectorAll('.tab button');
-          buttons.forEach(button => {
-            button.removeAttribute('disabled');
-            button.classList.remove('disabled'); // Remove disabled class
-          });
+            let flashMessage = document.getElementById("flash-message");
+            if (flashMessage) {
+                flashMessage.style.transition = "opacity 1s ease";
+                flashMessage.style.opacity = 0;
+                setTimeout(() => flashMessage.remove(), 1000);
+            }
+    
+            // After processing is complete (You can adjust this based on your logic)
+            const processingMessage = document.getElementById('processing-message');
+            if (processingMessage) {
+                processingMessage.remove(); // Remove the processing message
+            }
+    
+            // Re-enable tab buttons and remove disabled class
+            const buttons = document.querySelectorAll('.tab button');
+            buttons.forEach(button => {
+                button.removeAttribute('disabled');
+                button.classList.remove('disabled'); // Remove disabled class
+            });
+    
+            // Re-enable the file input and submit button
+            const fileInput = document.querySelector('input[type="file"]');
+            const uploadButton = document.querySelector('input[type="submit"]');
+            fileInput.removeAttribute('disabled');
+            uploadButton.removeAttribute('disabled');
+            fileInput.classList.remove('disabled');
+            uploadButton.classList.remove('disabled');
         }, 3000); // Adjust timing based on your upload duration
-      
+    
         // Function to open links in the same tab
         function openLink(url, element) {
-          window.location.href = url; // Redirects to the specified URL in the same tab
-          
-          // Remove "active" class from all buttons
-          const buttons = document.querySelectorAll('.tab button');
-          buttons.forEach(button => button.classList.remove('active'));
-          
-          // Add "active" class to the clicked button
-          element.classList.add('active');
+            window.location.href = url; // Redirects to the specified URL in the same tab
+    
+            // Remove "active" class from all buttons
+            const buttons = document.querySelectorAll('.tab button');
+            buttons.forEach(button => button.classList.remove('active'));
+    
+            // Add "active" class to the clicked button
+            element.classList.add('active');
         }
     </script>
 </body>