Update templates/index.html

templates/index.html

@@ -143,7 +143,10 @@
             padding: 20px;
             margin-top: 70px;
         }
-
+        .disabled {
+            cursor: wait !important; /* Set cursor to wait */
+          }
+      
         /* Responsive design */
         @media (max-width: 768px) {
             .tab {
@@ -197,57 +200,67 @@
     </div>
 
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/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
+      // Disable the tab buttons and apply disabled class
       const buttons = document.querySelectorAll('.tab button');
-        buttons.forEach(button => {
+      buttons.forEach(button => {
         button.setAttribute('disabled', 'true');
-        });
+        button.classList.add('disabled'); // Add disabled class
+      });
+      
+      // 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
+      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");
+    };
+  
+    // 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);
-        }
+        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
+      // Re-enable tab buttons and remove disabled class
       const buttons = document.querySelectorAll('.tab button');
-        buttons.forEach(button => {
+      buttons.forEach(button => {
         button.removeAttribute('disabled');
-        });
-      }, 3000); // Adjust timing based on your upload duration
-    
-      // Function to open links in the same tab
-      function openLink(url) {
-        window.location.href = url; // Redirects to the specified URL in the same tab
+        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'));
+      buttons.forEach(button => button.classList.remove('active'));
+      
       // Add "active" class to the clicked button
       element.classList.add('active');
-      }
-    </script>
+    }
+  </script>  
 </body>
 
 </html>