Upload 13 files

scripts.js

@@ -1,12 +1,19 @@
 const tabs = document.querySelectorAll('.tabs input[type="radio"]');
 const tabContents = document.querySelectorAll('.tab-content');
+const tabLabels = document.querySelectorAll('.tabs label'); // Assuming you have labels
 
 function showTab(tabIndex) {
   tabContents.forEach(content => {
     content.classList.remove('active');
   });
+  
+  tabLabels.forEach(label => {
+    label.classList.remove('active'); // Remove 'active' from all labels
+  });
+  
   tabs[tabIndex].checked = true;
   tabContents[tabIndex].classList.add('active');
+  tabLabels[tabIndex].classList.add('active'); // Add 'active' to the clicked label
 }
 
 tabs.forEach((tab, index) => {
@@ -16,4 +23,4 @@ tabs.forEach((tab, index) => {
 });
 
 // Show initial tab
-showTab(0);
+showTab(0);

styles.css

@@ -78,11 +78,11 @@ a:active {
 }
 
 .link:hover {
-  color: ##FFD21E;
+  color: #FFD21E;
 }
 
 .link:active {
-  color: ##FFD21E;
+  color: #FFD21E;
 }
 
 .button {
@@ -102,7 +102,7 @@ a:active {
 }
 
 .button:hover {
-  background-color: #090d14;
+  background-color: #080b12;
 }
 
 table {
@@ -110,6 +110,7 @@ table {
     border-collapse: collapse;
     margin: auto;
     font-weight: 200;
+    Overflow-x:scroll;
 }
 
 td, th {
@@ -121,6 +122,13 @@ td, th {
     font-weight: 200;
 }
 
+table.alternate tr:nth-child(odd) {
+    background-color: #111827;
+}
+ 
+table.alternate tr:nth-child(even) {
+    background-color: #131b2b;
+}
 
 p {
   font-size: 16px;
@@ -201,7 +209,7 @@ section::after {
 .notes {
   padding: 32px;
   border-radius: 5px;
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
     background-color: #0d131f;
   position: relative;
   overflow: hidden;
@@ -236,7 +244,7 @@ section::after {
 
 .tabs {
   display: flex;
-  justify-content: space-between;
+  justify-content: space-around;
   margin-bottom: 10px;
   background-color: #0d131f;
   border-radius: 5px;
@@ -258,6 +266,19 @@ section::after {
   transition-duration: 0.4s;
 }
 
+.tabs label:hover {
+    background-color: #080b12;
+    border-radius: 5px;
+}
+  
+/* Style for active tab */
+.tabs label.active {
+    background-color: #080b12; /* Active tab background color */
+    border-radius: 5px; 
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4); 
+}
+
+/*
 .tabs label:before{
   content: '';
   position: absolute;
@@ -267,24 +288,25 @@ section::after {
   left: 0;
   z-index: -3;
   margin: -10px;
-  background-color: #0d131f;
+  
   border-radius: 5px;
 }
 
 .tabs label:after{
-  background-color: #090d14;
+    
   border-radius: 5px;
 }
 
 .tabs label:hover {
-  background-color: #090d14;
+  background-color: #080b12;
   border-radius: 5px;
 }
 
-.tabs label:active {
-  background-color: #090d14;
+.tabs  {
+    background-color: #080b12;
   border-radius: 5px;
 }
+*/
 
 .tab-content {
   display: none;