Update templates/index.html

templates/index.html

@@ -146,6 +146,10 @@
             margin-top: 70px;
         }
 
+        .disabled {
+            cursor: wait !important; /* Set cursor to wait */
+        }
+
         /* Responsive design */
         @media (max-width: 768px) {
             .tab {
@@ -205,64 +209,66 @@
     </div>
 
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
-    <script>
-        // Loader functionality
-        document.getElementById('fileUploadForm').onsubmit = function() {
-          document.getElementById('loader').style.display = 'block';
+     <script>
+      // Loader functionality
+      document.getElementById('fileUploadForm').onsubmit = function() {
+        document.getElementById('loader').style.display = 'block';
         
-          // Disable the tab buttons
-          const buttons = document.querySelectorAll('.tab button');
-          buttons.forEach(button => {
-            button.setAttribute('disabled', 'true');
-          });
-          
-          // Change cursor to wait
-          document.body.style.cursor = 'wait';
-          
-          // Show processing message
-          const processingMessage = document.createElement('p');
-          processingMessage.id = 'processing-message';
-          processingMessage.textContent = 'Processing, please wait...';
-          processingMessage.style.color = '#e68a00'; // 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
-          const buttons = document.querySelectorAll('.tab button');
-          buttons.forEach(button => {
-            button.removeAttribute('disabled');
-          });
-          
-          // Reset cursor to default
-          document.body.style.cursor = 'auto';
-        }, 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
+        // 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
+        });
         
-          // Remove "active" class from all buttons
-          const buttons = document.querySelectorAll('.tab button');
-          buttons.forEach(button => button.classList.remove('active'));
+        // Change cursor to wait
+        document.body.style.cursor = 'wait';
+        
+        // Show processing message
+        const processingMessage = document.createElement('p');
+        processingMessage.id = 'processing-message';
+        processingMessage.textContent = 'Processing, please wait...';
+        processingMessage.style.color = '#e68a00'; // 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);
+        }
         
-          // Add "active" class to the clicked button
-          element.classList.add('active');
+        // 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
         }
-      </script>    
+        
+        // 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
+        });
+        
+        // Reset cursor to default
+        document.body.style.cursor = 'auto';
+      }, 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');
+      }
+    </script>       
   </body>
 </html>