Upload 15 files

scripts.js

@@ -24,3 +24,52 @@ tabs.forEach((tab, index) => {
 
 // Show initial tab
 showTab(0);
+
+//Dropdown lists
+document.getElementById('dropdown-models').addEventListener('change', function() {
+  var selectedOption = this.value;
+  var allContents = document.querySelectorAll('.content-models');
+  for (var i = 0; i < allContents.length; i++) {
+    if (allContents[i].id === selectedOption) {
+      allContents[i].classList.remove('hidden');
+    } else {
+      allContents[i].classList.add('hidden');
+    }
+  }
+});
+
+document.getElementById('dropdown-datasets').addEventListener('change', function() {
+  var selectedOption = this.value;
+  var allContents = document.querySelectorAll('.content-datasets');
+  for (var i = 0; i < allContents.length; i++) {
+    if (allContents[i].id === selectedOption) {
+      allContents[i].classList.remove('hidden');
+    } else {
+      allContents[i].classList.add('hidden');
+    }
+  }
+});
+
+document.getElementById('dropdown-spaces').addEventListener('change', function() {
+  var selectedOption = this.value;
+  var allContents = document.querySelectorAll('.content-spaces');
+  for (var i = 0; i < allContents.length; i++) {
+    if (allContents[i].id === selectedOption) {
+      allContents[i].classList.remove('hidden');
+    } else {
+      allContents[i].classList.add('hidden');
+    }
+  }
+});
+
+document.getElementById('dropdown-followers').addEventListener('change', function() {
+  var selectedOption = this.value;
+  var allContents = document.querySelectorAll('.content-followers');
+  for (var i = 0; i < allContents.length; i++) {
+    if (allContents[i].id === selectedOption) {
+      allContents[i].classList.remove('hidden');
+    } else {
+      allContents[i].classList.add('hidden');
+    }
+  }
+});

styles.css

@@ -39,8 +39,8 @@ h3 {
   font-size: 14px;
   color: #586073;
   font-weight: 200;
-  margin-bottom: 20px;
-  margin-top: 5px;
+  margin-bottom: 30px;
+  margin-top: 8px;
   text-align: left;
 }
 
@@ -51,6 +51,27 @@ h4 {
   text-align: left;
 }
 
+h5 {
+  font-size: 16px;
+  color: #FFFFFF;
+  font-weight: bold;
+  text-align: left;
+  margin-bottom: 5px;
+  margin-top: 15px;
+}
+
+.up {
+  font-size: smaller; /* Reduce font size for superscript */
+  color: #155415;
+  margin-right: 0px;
+}
+ 
+.down {
+  font-size: smaller; /* Reduce font size for superscript */
+  color: #444;
+  margin-right: 0px;
+}
+
 a:link {
   font-size: 16px;
   color: #FFFFFF;
@@ -70,7 +91,7 @@ a:active {
 }
 
 .link {
-  font-weight: 900;
+  font-weight: 200;
 }
 
 .small-link {
@@ -100,6 +121,7 @@ a:active {
   display: inline-block;
   font-size: 16px;
   transition-duration: 0.4s;
+  margin-right: 0px;
 }
 
 .button:hover {
@@ -117,17 +139,44 @@ table {
 td, th {
     border: 0px;
     height: 40px;
-    padding-left: 10px;
-    padding-right: 10px;
+    padding-left: 20px;
+    padding-right: 20px;
     text-align: left;
     font-weight: 200;
 }
 
-table.alternate tr:nth-child(odd) {
+.xcol {
+  border: 0px;
+  height: 40px;
+  padding-left: 20px;
+  padding-right: 0px;
+  text-align: left;
+  font-weight: 200; 
+}
+
+.gcol {
+  border: 0px;
+  height: 40px;
+  padding-left: 10px;
+  padding-right: 0px;
+  text-align: left;
+  font-weight: 200; 
+}
+
+.hfcol {
+  border: 0px;
+  height: 40px;
+  padding-left: 10px;
+  padding-right: 20px;
+  text-align: left;
+  font-weight: 200; 
+}
+
+table.alternate tr:nth-child(even) {
     background-color: #111827;
 }
  
-table.alternate tr:nth-child(even) {
+table.alternate tr:nth-child(odd) {
     background-color: #131b2b;
 }
 
@@ -274,6 +323,7 @@ section::after {
 /* Style for active tab */
 .tabs label.active {
     background-color: #080b12; /* Active tab background color */
+    color: #FFD21E;
     border-radius: 5px; 
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4); 
 }
@@ -314,4 +364,49 @@ section::after {
 
 .tab-content.active {
   display: block;
-}
+}
+
+
+
+/* Custom dropdown styles */
+.custom-dropdown {
+  /* Add your custom styles here */
+  padding: 4px 0px 4px 0px;
+  border: 4px solid #080b12;
+  border-radius: 5px;
+  background-color: #080b12;
+  cursor: pointer;
+  width: 150px;
+  color: #FFFFFF; /* Text color for the dropdown */
+  font-size: 16px;
+  font-weight: bold;
+  margin-bottom: 0px;
+  margin-top: 0px;
+  text-align: left;
+}
+
+.hidden {
+  display: none;
+}
+
+/* Style for the circle container */
+.circle {
+  width: 16px; /* Set the width of the circle */
+  height: 16px; /* Set the height of the circle */
+  border-radius: 50%; /* Make it a circle */
+  overflow: hidden; /* Hide overflowing parts */
+  display: inline-block; /* Display as inline-block */
+  margin-right: 7px; /* Optional: Add spacing between image and text */
+}
+
+/* Style for the image inside the circle */
+.circle img {
+  width: 100%; /* Make the image fill the circle */
+  height: auto; /* Maintain aspect ratio */
+}
+
+/* Style for the text */
+.text {
+  vertical-align: middle; /* Align text vertically */
+}
+