Update templates/index.html

templates/index.html

@@ -115,6 +115,12 @@
         .tab button:hover {
             background-color: #444;
         }
+ 
+        .tab button:active,
+        .tab button.active {
+            background-color: #444;
+        }
+      
     </style>
 </head>
 
@@ -123,7 +129,7 @@
         <h1>Visiting Card Data Extractor</h1>
 
         <div class="tab">
-            <button class="tablinks" onclick="openLink('https://webashalarforml-imagedataextractor2.hf.space/')">Image Extractor</button>
+            <button class="tablinks active" onclick="openLink('https://webashalarforml-imagedataextractor2.hf.space/')">Image Extractor</button>
             <button class="tablinks" onclick="openLink('https://webashalarforml-ResumeExtractor2.hf.space/')">Resume Parser Extractor</button>
         </div>
 
@@ -176,8 +182,14 @@
         }, 3000);
 
         // Function to open links in the same tab
-        function openLink(url) {
+        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>