Update index.html

Signed-off-by: Blake Arnold <[email protected]>

Author: blake437

index.html

@@ -3,17 +3,31 @@
     <style>
       /* Add basic styles for tabs */
       .tab {
-        display: flex;
-        cursor: pointer;
-        padding: 10px;
-        background-color: #f1f1f1;
-        border: 1px solid #ccc;
-        margin-right: 5px;
-      }
+  background: #f7f7f7;
+  border: 1px solid #bbb;
+  border-bottom: none;
+  border-radius: 8px 8px 0 0;
+  padding: 8px 28px;
+  margin-right: 4px;
+  font-family: sans-serif;
+  font-size: 15px;
+  box-shadow: 0 2px 4px 0 rgba(0,0,0,0.04);
+  cursor: pointer;
+  position: relative;
+  top: 1px;
+  transition: background 0.2s;
+}
 
-      .tab:hover {
-        background-color: #ddd;
-      }
+.tab.active {
+  background: #fff;
+  font-weight: bold;
+  border-color: #888 #888 #fff #888;
+  z-index: 1;
+}
+
+.tab:not(.active):hover {
+  background: #ececec;
+}
 
       .tab-content {
         display: none;
@@ -133,12 +147,19 @@
     }
   }
 
-  // Tab logic (unchanged)
+  // Tab logic
   function showTabContent(tabId) {
-    document.querySelectorAll('.tab-content').forEach(
-      c => c.classList.remove('active'));
-    document.getElementById(tabId).classList.add('active');
+  document.querySelectorAll('.tab-content').forEach(
+    c => c.classList.remove('active'));
+  document.getElementById(tabId).classList.add('active');
+  // Add this to update tab styling
+  document.querySelectorAll('#tabs .tab').forEach(tab => tab.classList.remove('active'));
+  if (tabId === 'tab1') {
+    document.querySelectorAll('#tabs .tab')[0].classList.add('active');
+  } else {
+    document.querySelectorAll('#tabs .tab')[1].classList.add('active');
   }
+}
 </script>
 </html>
 