From b27e90128240201e2db97773c42b03bb414a65a1 Mon Sep 17 00:00:00 2001
From: Vijay Janapa Reddi <vj@eecs.harvard.edu>
Date: Mon, 2 Dec 2024 20:58:28 -0500
Subject: [PATCH] Cleanup html/script/css code

---
 index.html | 150 +++++++++++++++++++++++++----------------------------
 1 file changed, 71 insertions(+), 79 deletions(-)

diff --git a/index.html b/index.html
index dda5906..828ca08 100644
--- a/index.html
+++ b/index.html
@@ -38,34 +38,49 @@
          min-width: 300px;
          padding: 10px; /* Add some spacing around the logo */
          }
-   /* Style for sort button */
-   .sortable {
-      cursor: pointer;
-      position: relative;
-      display: inline-block;
-      padding-right: 20px; /* Space for arrow */
-   }
-   .sortable::after {
-      content: "▼";
-      position: absolute;
-      right: 5px;
-      top: 50%;
-      transform: translateY(-50%);
-      font-size: 12px;
-      transition: transform 0.3s ease;
-   }
-   .sortable:checked::after {
-      transform: translateY(-50%) rotate(180deg);
-   }
-   /* Hide the input */
-   .sortable-input {
-      display: none;
-   }
-   /* Style for highlighting sorted column */
-   th.sorted {
-      background-color: var(--primary-color);
-      color: white;
-   }
+         /* Style for sort button */
+         .sortable {
+         cursor: pointer;
+         position: relative;
+         display: inline-block;
+         padding-right: 20px; /* Space for arrow */
+         }
+         .sortable::after {
+         content: "▼";
+         position: absolute;
+         right: 5px;
+         top: 50%;
+         transform: translateY(-50%);
+         font-size: 12px;
+         transition: transform 0.3s ease;
+         }
+         .sortable:checked::after {
+         transform: translateY(-50%) rotate(180deg);
+         }
+         /* Hide the input */
+         .sortable-input {
+         display: none;
+         }
+         /* Style for highlighting sorted column */
+         th.sorted {
+         background-color: var(--primary-color);
+         color: white;
+         }
+         th {
+         position: relative;
+         cursor: pointer;
+         }
+         .arrow {
+         margin-left: 8px;
+         font-size: 12px;
+         color: gray;
+         }
+         th.sorted-asc .arrow {
+         color: black;
+         }
+         th.sorted-desc .arrow {
+         color: black;
+         }
          /* Leaderboard container with enhanced styles and shadow */
          .leaderboard-container {
          max-width: 1200px; /* Limit container width */
@@ -291,43 +306,24 @@
          }
       </style>
    </head>
-
-   <style>
-      th {
-         position: relative;
-         cursor: pointer;
-      }
-      .arrow {
-         margin-left: 8px;
-         font-size: 12px;
-         color: gray;
-      }
-      th.sorted-asc .arrow {
-         color: black;
-      }
-      th.sorted-desc .arrow {
-         color: black;
-      }
-   </style>
-   
    <script>
       document.addEventListener("DOMContentLoaded", () => {
          const table = document.querySelector(".leaderboard-container table");
          const headers = table.querySelectorAll("thead th");
          const tbody = table.querySelector("tbody");
-   
+      
          const defaultSortColumnIndex = 5; // Index of the "Test Accuracy" column
-   
+      
          headers.forEach((header, index) => {
             // Create arrow span once for each header
             const arrow = document.createElement("span");
             arrow.classList.add("arrow");
             header.appendChild(arrow);
-   
+      
             header.addEventListener("click", () => {
                const isAscending = header.classList.toggle("sorted-asc");
                header.classList.toggle("sorted-desc", !isAscending);
-   
+      
                // Update arrow directions for all headers
                headers.forEach((h, i) => {
                   const hArrow = h.querySelector(".arrow");
@@ -338,41 +334,41 @@
                      hArrow.textContent = isAscending ? "▲" : "▼"; // Set arrow direction
                   }
                });
-   
+      
                const rows = Array.from(tbody.querySelectorAll("tr"));
                const compare = (rowA, rowB) => {
                   const cellA = rowA.children[index].textContent.trim();
                   const cellB = rowB.children[index].textContent.trim();
-   
+      
                   const valueA = parseCellValue(cellA);
                   const valueB = parseCellValue(cellB);
-   
+      
                   if (valueA < valueB) return isAscending ? -1 : 1;
                   if (valueA > valueB) return isAscending ? 1 : -1;
                   return 0;
                };
-   
+      
                rows.sort(compare);
                rows.forEach(row => tbody.appendChild(row)); // Re-append sorted rows
             });
          });
-   
+      
          // Helper function to parse cell values
          const parseCellValue = (value) => {
             // Handle percentages
             if (value.includes('%')) {
                return parseFloat(value.replace(/[^\d.-]/g, ''));
             }
-   
+      
             // Handle numbers with commas
             if (value.includes(',')) {
                return parseFloat(value.replace(/,/g, ''));
             }
-   
+      
             // Default to text if not numeric
             return isNaN(value) ? value.toLowerCase() : parseFloat(value);
          };
-   
+      
          // Trigger default sorting by "Test Accuracy" in descending order
          const defaultSortHeader = headers[defaultSortColumnIndex];
          defaultSortHeader.classList.add("sorted-desc"); // Add descending class
@@ -380,24 +376,20 @@
          const compare = (rowA, rowB) => {
             const cellA = rowA.children[defaultSortColumnIndex].textContent.trim();
             const cellB = rowB.children[defaultSortColumnIndex].textContent.trim();
-   
+      
             const valueA = parseCellValue(cellA);
             const valueB = parseCellValue(cellB);
-   
+      
             if (valueA < valueB) return 1; // Reverse logic for descending
             if (valueA > valueB) return -1;
             return 0;
          };
-   
+      
          rows.sort(compare);
          rows.forEach(row => tbody.appendChild(row)); // Re-append sorted rows
          defaultSortHeader.querySelector(".arrow").textContent = "▼"; // Set descending arrow
       });
    </script>
-   
-
-
-
    <body>
       <header>
          <div class="container">
@@ -475,17 +467,17 @@ <h2></h2>
          <h2 class="fade-in">Leaderboard</h2>
          <div class="leaderboard-wrapper fade-in">
             <div class="leaderboard-container">
-                <table width="80%" style="margin: 0 auto; border:0px solid;text-align:center">
-                    <thead>
-                        <tr>
-                            <th>Model Name</th>
-                            <th>Input Size</th>
-                            <th>RAM (KiB)</th>
-                            <th>Flash (KiB)</th>
-                            <th>MACs (MM)</th>
-                            <th>Test Accuracy</th>
-                        </tr>
-                    </thead>
+               <table width="80%" style="margin: 0 auto; border:0px solid;text-align:center">
+                  <thead>
+                     <tr>
+                        <th>Model Name</th>
+                        <th>Input Size</th>
+                        <th>RAM (KiB)</th>
+                        <th>Flash (KiB)</th>
+                        <th>MACs (MM)</th>
+                        <th>Test Accuracy</th>
+                     </tr>
+                  </thead>
                   <tbody>
                      <tr>
                         <td align="center"><a href="https://github.com/mit-han-lab/mcunet/blob/master/mcunet/model_zoo.py">mcunet-320kb-1mb_vww</a></td>
@@ -580,8 +572,8 @@ <h3>🙋‍♂️ Contribute</h3>
                      <a href="mailto:AndreaMattia.Garavagno@santannapisa.it">Share your results with us</a> 
                      and contribute to the leaderboard, or you can issue a PR at 
                      <a href="https://github.com/your-repository-link">this link</a>!
-                   </p>
-                               </div>
+                  </p>
+               </div>
                <div class="feature-item fade-in">
                   <h3>🏆 Challenge</h3>
                   <p>Stay tuned for an upcoming competition in conjunciton with the <a href="https://www.edgeaifoundation.org/">Edge AI Foundation</a>!</p>