From 3b21914e791220ae7b73218f26288b5fd25a23f2 Mon Sep 17 00:00:00 2001
From: rishab11250 <rishab.chandgothia.cg@gmail.com>
Date: Thu, 18 Jun 2026 10:45:50 +0530
Subject: [PATCH 1/4] feat: add loading skeleton, error states, and empty state
 to leaderboard UI
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Implement Issue #179: Loading Skeleton + Error States for Leaderboard.

- Add 8 skeleton shimmer rows (desktop) and 8 skeleton cards (mobile)
  that display on page load, naturally cleared by renderLeaderboard()
- Add error banner with [RETRY] button when all 4 data endpoints fail
  - Error re-fetches data on click, clears cached entries
- Add empty state message when API returns no data
- Add CSS shimmer animation, fade-in transition for data rows
- All states responsive — skeleton rows hidden on mobile,
  skeleton cards hidden on desktop

Resolves #179
---
 frontend/leaderboard.html | 156 +++++++++++++++++++++++++-
 frontend/styles/main.css  | 224 ++++++++++++++++++++++++++++++++------
 2 files changed, 343 insertions(+), 37 deletions(-)

diff --git a/frontend/leaderboard.html b/frontend/leaderboard.html
index 3c4345df..0cbf612f 100644
--- a/frontend/leaderboard.html
+++ b/frontend/leaderboard.html
@@ -223,10 +223,117 @@ <h1 class="page-title">Leaderboard</h1>
             </div>
           </div>
 
-          <div id="leaderboard-body"></div>
+          <div id="leaderboard-body">
+            <!-- Skeleton rows — shown on initial load, cleared by renderLeaderboard() -->
+            <div class="skeleton-row">
+              <div class="skeleton-cell"></div>
+              <div class="skeleton-cell"></div>
+              <div class="skeleton-cell"></div>
+              <div class="skeleton-cell"></div>
+              <div class="skeleton-cell"></div>
+              <div class="skeleton-cell"></div>
+              <div class="skeleton-cell"></div>
+              <div class="skeleton-cell"></div>
+            </div>
+            <div class="skeleton-row">
+              <div class="skeleton-cell"></div>
+              <div class="skeleton-cell"></div>
+              <div class="skeleton-cell"></div>
+              <div class="skeleton-cell"></div>
+              <div class="skeleton-cell"></div>
+              <div class="skeleton-cell"></div>
+              <div class="skeleton-cell"></div>
+              <div class="skeleton-cell"></div>
+            </div>
+            <div class="skeleton-row">
+              <div class="skeleton-cell"></div>
+              <div class="skeleton-cell"></div>
+              <div class="skeleton-cell"></div>
+              <div class="skeleton-cell"></div>
+              <div class="skeleton-cell"></div>
+              <div class="skeleton-cell"></div>
+              <div class="skeleton-cell"></div>
+              <div class="skeleton-cell"></div>
+            </div>
+            <div class="skeleton-row">
+              <div class="skeleton-cell"></div>
+              <div class="skeleton-cell"></div>
+              <div class="skeleton-cell"></div>
+              <div class="skeleton-cell"></div>
+              <div class="skeleton-cell"></div>
+              <div class="skeleton-cell"></div>
+              <div class="skeleton-cell"></div>
+              <div class="skeleton-cell"></div>
+            </div>
+            <div class="skeleton-row">
+              <div class="skeleton-cell"></div>
+              <div class="skeleton-cell"></div>
+              <div class="skeleton-cell"></div>
+              <div class="skeleton-cell"></div>
+              <div class="skeleton-cell"></div>
+              <div class="skeleton-cell"></div>
+              <div class="skeleton-cell"></div>
+              <div class="skeleton-cell"></div>
+            </div>
+            <div class="skeleton-row">
+              <div class="skeleton-cell"></div>
+              <div class="skeleton-cell"></div>
+              <div class="skeleton-cell"></div>
+              <div class="skeleton-cell"></div>
+              <div class="skeleton-cell"></div>
+              <div class="skeleton-cell"></div>
+              <div class="skeleton-cell"></div>
+              <div class="skeleton-cell"></div>
+            </div>
+            <div class="skeleton-row">
+              <div class="skeleton-cell"></div>
+              <div class="skeleton-cell"></div>
+              <div class="skeleton-cell"></div>
+              <div class="skeleton-cell"></div>
+              <div class="skeleton-cell"></div>
+              <div class="skeleton-cell"></div>
+              <div class="skeleton-cell"></div>
+              <div class="skeleton-cell"></div>
+            </div>
+            <div class="skeleton-row">
+              <div class="skeleton-cell"></div>
+              <div class="skeleton-cell"></div>
+              <div class="skeleton-cell"></div>
+              <div class="skeleton-cell"></div>
+              <div class="skeleton-cell"></div>
+              <div class="skeleton-cell"></div>
+              <div class="skeleton-cell"></div>
+              <div class="skeleton-cell"></div>
+            </div>
+          </div>
         </div>
 
-        <div class="mobile-cards" id="mobile-cards"></div>
+        <div class="mobile-cards" id="mobile-cards">
+          <!-- Skeleton mobile cards — shown on initial load, cleared by renderLeaderboard() -->
+          <div class="skeleton-card"></div>
+          <div class="skeleton-card"></div>
+          <div class="skeleton-card"></div>
+          <div class="skeleton-card"></div>
+          <div class="skeleton-card"></div>
+          <div class="skeleton-card"></div>
+          <div class="skeleton-card"></div>
+          <div class="skeleton-card"></div>
+        </div>
+
+        <!-- Error State -->
+        <div id="leaderboard-error" class="leaderboard-error">
+          <div class="leaderboard-error-content">
+            <div class="leaderboard-error-icon">[!]</div>
+            <div class="leaderboard-error-msg">
+              LEADERBOARD_DATA_UNAVAILABLE
+            </div>
+            <div class="leaderboard-error-desc">
+              Failed to fetch leaderboard data. The upstream API may be
+              rate-limited or unreachable. Please try again.
+            </div>
+            <button id="retry-btn" class="btn btn-error">[RETRY]</button>
+          </div>
+        </div>
 
         <div id="pagination-controls" class="pagination-controls">
           <button id="prev-page-btn" class="page-nav-btn">&lt; PREV</button>
@@ -252,6 +359,15 @@ <h1 class="page-title">Leaderboard</h1>
     </div>
 
     <script nonce="__NONCE__">
+      // ── Error State Helpers ──
+      function showError() {
+        document.getElementById("leaderboard-error").classList.add("active");
+      }
+
+      function hideError() {
+        document.getElementById("leaderboard-error").classList.remove("active");
+      }
+
       document.addEventListener("DOMContentLoaded", () => {
         document.querySelectorAll(".tab").forEach((tab) => {
           tab.addEventListener("click", () => {
@@ -261,6 +377,7 @@ <h1 class="page-title">Leaderboard</h1>
 
         setupSearchListeners();
         setupPaginationListeners();
+        // Skeleton rows are already in #leaderboard-body — shown until renderLeaderboard() clears them
         fetchLeaderboardData();
         // Poll every 2 minutes to detect new syncs
         // Page Visibility API — pause polling when tab is hidden
@@ -285,6 +402,18 @@ <h1 class="page-title">Leaderboard</h1>
         });
 
         startPolling();
+
+        // Retry button — re-fetches data
+        document
+          .getElementById("retry-btn")
+          .addEventListener("click", function () {
+            hideError();
+            leaderboardData["overall"] = null;
+            leaderboardData["monthly"] = null;
+            leaderboardData["weekly"] = null;
+            leaderboardData["daily"] = null;
+            fetchLeaderboardData();
+          });
       });
 
       window.leaderboardData = {};
@@ -308,14 +437,27 @@ <h1 class="page-title">Leaderboard</h1>
           ),
         );
 
+        let anySuccess = false;
         results.forEach((result, index) => {
           if (result.status === "fulfilled") {
             window.leaderboardData[endpoints[index]] = result.value;
+            anySuccess = true;
           } else {
             console.error("Failed to fetch", endpoints[index], result.reason);
           }
         });
 
+        // If ALL endpoints failed, show error state instead of blank page
+        if (!anySuccess) {
+          document.getElementById("leaderboard-body").innerHTML = "";
+          document.getElementById("mobile-cards").innerHTML = "";
+          document.getElementById("leaderboard-stats").innerHTML = "";
+          hideError(); // reset in case retry was clicked
+          showError();
+          return;
+        }
+        hideError();
+
         try {
           // Fetch directly from github to avoid needing a server redeploy for new data
           const syncRes = await fetch(
@@ -379,6 +521,16 @@ <h1 class="page-title">Leaderboard</h1>
 
         const originalData = window.leaderboardData[activeDatasetType];
 
+        // Empty state — data exists but is empty array
+        if (originalData.length === 0) {
+          document.getElementById("leaderboard-body").innerHTML =
+            '<div class="leaderboard-empty">[SYS]: NO_LEADERBOARD_DATA_YET</div>';
+          document.getElementById("mobile-cards").innerHTML =
+            '<div class="leaderboard-empty">[SYS]: NO_LEADERBOARD_DATA_YET</div>';
+          document.getElementById("leaderboard-stats").innerHTML = "";
+          return;
+        }
+
         const filteredData = originalData.filter((user) => {
           if (!currentSearchTerm) return true;
 
diff --git a/frontend/styles/main.css b/frontend/styles/main.css
index b3a46993..39a076da 100644
--- a/frontend/styles/main.css
+++ b/frontend/styles/main.css
@@ -1,5 +1,5 @@
 /* ============================================
-   CodePVG Leaderboard — Terminal / CRT Theme
+   CodePVG Leaderboard ??? Terminal / CRT Theme
    ============================================ */
 
 @import url("https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600;700&family=Space+Mono:wght@400;700&display=swap");
@@ -24,7 +24,7 @@
   --border-bright: rgba(0, 255, 65, 0.25);
 }
 
-/* ── Reset ── */
+/* ?????? Reset ?????? */
 * {
   margin: 0;
   padding: 0;
@@ -45,7 +45,7 @@ body {
   font-size: 14px;
 }
 
-/* ── CRT Screen Glow & Scanlines ── */
+/* ?????? CRT Screen Glow & Scanlines ?????? */
 body::before {
   content: "";
   position: fixed;
@@ -61,7 +61,7 @@ body::before {
   animation: crtScan 10s linear infinite;
 }
 
-/* ── CRT Scanline Overlay ── */
+/* ?????? CRT Scanline Overlay ?????? */
 body::after {
   content: "";
   position: fixed;
@@ -82,7 +82,7 @@ body.crt-scrolling {
   filter: blur(0.5px) contrast(1.1) brightness(1.2);
 }
 
-/* ── Animations ── */
+/* ?????? Animations ?????? */
 @keyframes blink {
   0%,
   100% {
@@ -179,7 +179,7 @@ body.crt-scrolling {
   }
 }
 
-/* ── Utility ── */
+/* ?????? Utility ?????? */
 .container {
   max-width: 1100px;
   margin: 0 auto;
@@ -223,7 +223,7 @@ body.crt-scrolling {
   display: none;
 }
 
-/* ── Terminal Window ── */
+/* ?????? Terminal Window ?????? */
 .terminal-window {
   background: var(--bg-surface);
   border: 1px solid var(--border-bright);
@@ -291,7 +291,7 @@ body.crt-scrolling {
   padding: 1.5rem;
 }
 
-/* ── Navigation ── */
+/* ?????? Navigation ?????? */
 .navbar {
   background: var(--bg);
   padding: 0;
@@ -396,7 +396,7 @@ body.crt-scrolling {
   display: block;
 }
 
-/* ── Hero Section ── */
+/* ?????? Hero Section ?????? */
 .hero {
   min-height: 100vh;
   width: 100%;
@@ -583,7 +583,7 @@ body.crt-scrolling {
   margin: 0;
 }
 
-/* ── Page Content ── */
+/* ?????? Page Content ?????? */
 .page {
   min-height: 100vh;
   background: transparent;
@@ -616,7 +616,7 @@ body.crt-scrolling {
   margin-left: 4px;
 }
 
-/* ── Registration Forms ── */
+/* ?????? Registration Forms ?????? */
 .form-container {
   max-width: 580px;
   margin: 0 auto;
@@ -690,7 +690,7 @@ body.crt-scrolling {
   content: "// ";
 }
 
-/* ── Interactive Bash Form Inputs ── */
+/* ?????? Interactive Bash Form Inputs ?????? */
 .form-input-bash-wrapper {
   display: flex;
   align-items: center;
@@ -735,7 +735,7 @@ body.crt-scrolling {
   margin-left: 2px;
 }
 
-/* ── Execution Log Container ── */
+/* ?????? Execution Log Container ?????? */
 .execution-log-container {
   background: #000;
   border: 1px solid var(--border-bright);
@@ -772,7 +772,7 @@ body.crt-scrolling {
   text-shadow: 0 0 8px rgba(255, 51, 51, 0.4);
 }
 
-/* ── Tabs ── */
+/* ?????? Tabs ?????? */
 .tabs {
   display: flex;
   justify-content: center;
@@ -1005,7 +1005,7 @@ body.crt-scrolling {
   text-shadow: 0 0 8px rgba(255, 255, 255, 0.25);
 }
 
-/* ── Mobile Cards ── */
+/* ?????? Mobile Cards ?????? */
 .mobile-cards {
   display: none;
 }
@@ -1110,7 +1110,7 @@ body.crt-scrolling {
   margin-top: 2px;
 }
 
-/* ── Forms ── */
+/* ?????? Forms ?????? */
 .form-container {
   display: flex;
   align-items: center;
@@ -1171,7 +1171,7 @@ body.crt-scrolling {
     0 0 15px rgba(0, 255, 65, 0.1);
 }
 
-/* ── Interactive Bash Form Inputs ── */
+/* ?????? Interactive Bash Form Inputs ?????? */
 .form-input-bash-wrapper {
   display: flex;
   align-items: center;
@@ -1233,7 +1233,7 @@ body.crt-scrolling {
   color: var(--text-muted);
 }
 
-/* ── Success Message ── */
+/* ?????? Success Message ?????? */
 .success-container {
   text-align: center;
 }
@@ -1257,7 +1257,7 @@ body.crt-scrolling {
   color: var(--text-dim);
 }
 
-/* ── Content Sections ── */
+/* ?????? Content Sections ?????? */
 .content-section {
   background: var(--bg-surface);
   border: 1px solid var(--border);
@@ -1342,7 +1342,7 @@ body.crt-scrolling {
 }
 
 .feature-list li::before {
-  content: "→ ";
+  content: "??? ";
   color: var(--text-muted);
 }
 
@@ -1384,7 +1384,7 @@ body.crt-scrolling {
   border-color: rgba(191, 127, 255, 0.25);
 }
 
-/* ── Scroll Indicator ── */
+/* ?????? Scroll Indicator ?????? */
 .scroll-indicator {
   position: absolute;
   bottom: 2rem;
@@ -1412,7 +1412,7 @@ body.crt-scrolling {
   animation: blink 1.5s ease-in-out infinite;
 }
 
-/* ── Contact Section ── */
+/* ?????? Contact Section ?????? */
 .contact-card {
   text-align: center;
   padding: 1.5rem 1.25rem;
@@ -1511,7 +1511,7 @@ body.crt-scrolling {
   font-size: 0.82rem;
 }
 
-/* ── Mobile Responsiveness ── */
+/* ?????? Mobile Responsiveness ?????? */
 @media (max-width: 940px) {
   .hero-title {
     font-size: 2.2rem;
@@ -1678,7 +1678,7 @@ body.crt-scrolling {
   }
 }
 
-/* ── Scrollbar ── */
+/* ?????? Scrollbar ?????? */
 html,
 body {
   scrollbar-width: thin;
@@ -1701,7 +1701,7 @@ body::-webkit-scrollbar-thumb {
   border-radius: 2px;
 }
 
-/* ── Footer ── */
+/* ?????? Footer ?????? */
 .footer {
   width: 100%;
   padding: 40px 20px 16px;
@@ -1888,7 +1888,7 @@ body::-webkit-scrollbar-thumb {
   }
 }
 
-/* ── Boot Sequence Overlay ── */
+/* ?????? Boot Sequence Overlay ?????? */
 .boot-overlay {
   position: fixed;
   inset: 0;
@@ -1934,7 +1934,7 @@ body::-webkit-scrollbar-thumb {
   text-shadow: 0 0 5px rgba(0, 255, 65, 0.4);
 }
 
-/* ── Mock Shell & Live Feed ── */
+/* ?????? Mock Shell & Live Feed ?????? */
 .mock-shell {
   margin-top: 1.5rem;
   text-align: left;
@@ -1970,7 +1970,7 @@ body::-webkit-scrollbar-thumb {
   opacity: 0;
 }
 
-/* ── Live Feed ── */
+/* ?????? Live Feed ?????? */
 .live-feed {
   margin-top: 3rem;
   background: rgba(0, 0, 0, 0.4);
@@ -2024,7 +2024,7 @@ body::-webkit-scrollbar-thumb {
   }
 }
 
-/* ── Glitch Effects ── */
+/* ?????? Glitch Effects ?????? */
 @keyframes glitch-anim-text {
   0% {
     text-shadow:
@@ -2143,7 +2143,7 @@ body::-webkit-scrollbar-thumb {
   }
 }
 
-/* ── Tooltip ── */
+/* ?????? Tooltip ?????? */
 .score-header {
   display: flex;
   align-items: center;
@@ -2311,7 +2311,7 @@ body::-webkit-scrollbar-thumb {
   }
 }
 
-/* ── Search Bar ── */
+/* ?????? Search Bar ?????? */
 .search-container {
   display: flex;
   justify-content: center;
@@ -2436,7 +2436,7 @@ body::-webkit-scrollbar-thumb {
   font-size: 0.85rem;
 }
 
-/* ── Terminal Cyberpunk Pagination ── */
+/* ?????? Terminal Cyberpunk Pagination ?????? */
 .page {
   display: flex;
   flex-direction: column;
@@ -2553,7 +2553,7 @@ body::-webkit-scrollbar-thumb {
   display: none;
 }
 
-/* ── Leaderboard Rank Change ── */
+/* ?????? Leaderboard Rank Change ?????? */
 .rank-change {
   display: inline-block;
   font-size: 0.65rem;
@@ -2640,7 +2640,7 @@ body::-webkit-scrollbar-thumb {
   }
 }
 
-/* ── Sync Changes Button & Card ── */
+/* ?????? Sync Changes Button & Card ?????? */
 .changes-btn {
   background: transparent;
   color: var(--cyan);
@@ -2810,7 +2810,7 @@ body::-webkit-scrollbar-thumb {
 }
 
 .changes-content-line::before {
-  content: "➔";
+  content: "???";
   color: var(--cyan);
   font-size: 0.7rem;
   margin-top: 2px;
@@ -3201,3 +3201,157 @@ input[type="checkbox"].compare-checkbox:checked::after {
     height: 300px;
   }
 }
+
+
+
+/* -- Skeleton Loading States -- */
+
+/* Fade-in for rendered leaderboard rows (smooth skeleton?data transition) */
+#leaderboard-body > .leaderboard-row {
+  animation: fadeIn 0.25s ease-out;
+}
+
+.skeleton-row {
+  display: grid;
+  grid-template-columns: 55px 1fr 170px 65px 65px 65px 85px 85px;
+  padding: 0.7rem 1.25rem;
+  border-bottom: 1px solid var(--border);
+  align-items: center;
+  gap: 8px;
+}
+
+.skeleton-cell {
+  height: 14px;
+  background: linear-gradient(
+    90deg,
+    var(--bg-raised) 25%,
+    var(--green-muted) 50%,
+    var(--bg-raised) 75%
+  );
+  background-size: 200% 100%;
+  animation: skeleton-shimmer 1.5s ease-in-out infinite;
+  border-radius: 2px;
+}
+
+.skeleton-cell:nth-child(2) {
+  width: 160px;
+}
+
+.skeleton-cell:nth-child(3) {
+  width: 130px;
+}
+
+.skeleton-cell:nth-child(4),
+.skeleton-cell:nth-child(5),
+.skeleton-cell:nth-child(6) {
+  width: 35px;
+}
+
+.skeleton-cell:nth-child(7) {
+  width: 45px;
+}
+
+.skeleton-cell:nth-child(8) {
+  width: 55px;
+}
+
+.skeleton-row .skeleton-cell:first-child {
+  width: 40px;
+}
+
+@keyframes skeleton-shimmer {
+  0% {
+    background-position: 200% 0;
+  }
+
+  100% {
+    background-position: -200% 0;
+  }
+}
+
+/* Mobile Skeleton */
+.skeleton-card {
+  height: 82px;
+  background: linear-gradient(
+    90deg,
+    var(--bg-surface) 25%,
+    var(--green-muted) 50%,
+    var(--bg-surface) 75%
+  );
+  background-size: 200% 100%;
+  animation: skeleton-shimmer 1.5s ease-in-out infinite;
+  border-radius: 4px;
+  margin-bottom: 0.6rem;
+  border: 1px solid var(--border);
+  border-left: 3px solid var(--green-dim);
+}
+
+/* -- Leaderboard Error State -- */
+.leaderboard-error {
+  display: none;
+  background: var(--bg-surface);
+  border: 1px solid rgba(255, 51, 51, 0.3);
+  border-radius: 6px;
+  padding: 2.5rem 1.5rem;
+  text-align: center;
+  margin-top: 1rem;
+  box-shadow:
+    0 0 20px rgba(255, 51, 51, 0.05),
+    inset 0 0 40px rgba(255, 51, 51, 0.02);
+}
+
+.leaderboard-error.active {
+  display: block;
+}
+
+.leaderboard-error-icon {
+  font-family: "Space Mono", monospace;
+  font-size: 2.5rem;
+  color: var(--red);
+  margin-bottom: 0.75rem;
+  text-shadow: 0 0 20px rgba(255, 51, 51, 0.4);
+}
+
+.leaderboard-error-msg {
+  font-family: "Space Mono", monospace;
+  font-size: 1.1rem;
+  font-weight: 700;
+  color: var(--red);
+  margin-bottom: 0.5rem;
+  letter-spacing: 1px;
+}
+
+.leaderboard-error-desc {
+  font-size: 0.82rem;
+  color: var(--text-dim);
+  margin-bottom: 1.5rem;
+  line-height: 1.6;
+  max-width: 400px;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+/* -- Leaderboard Empty State -- */
+.leaderboard-empty {
+  text-align: center;
+  padding: 3rem 1rem;
+  color: var(--text-muted);
+  font-family: "Fira Code", monospace;
+  font-size: 0.9rem;
+}
+
+@media (max-width: 940px) {
+  .skeleton-row {
+    display: none;
+  }
+
+  .skeleton-card {
+    display: block;
+  }
+}
+
+@media (min-width: 941px) {
+  .skeleton-card {
+    display: none;
+  }
+}

From c6381d36e5259861d12aff56d32255b073c37d3b Mon Sep 17 00:00:00 2001
From: rishab11250 <rishab.chandgothia.cg@gmail.com>
Date: Thu, 18 Jun 2026 11:19:02 +0530
Subject: [PATCH 2/4] style: run prettier on frontend/styles/main.css

---
 frontend/styles/main.css | 2 --
 1 file changed, 2 deletions(-)

diff --git a/frontend/styles/main.css b/frontend/styles/main.css
index 39a076da..02d1541e 100644
--- a/frontend/styles/main.css
+++ b/frontend/styles/main.css
@@ -3202,8 +3202,6 @@ input[type="checkbox"].compare-checkbox:checked::after {
   }
 }
 
-
-
 /* -- Skeleton Loading States -- */
 
 /* Fade-in for rendered leaderboard rows (smooth skeleton?data transition) */

From 0e5793cff84e55a9a0e702a4a4a6b42a659ff4f7 Mon Sep 17 00:00:00 2001
From: rishab11250 <rishab.chandgothia.cg@gmail.com>
Date: Thu, 18 Jun 2026 13:52:20 +0530
Subject: [PATCH 3/4] fix: replace corrupted non-ASCII chars with ASCII
 equivalents in CSS comments
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

All 33 section header comments in main.css had Unicode box-drawing
characters (U+2500, U+2014, U+2192, U+2794) that got corrupted during
an earlier encoding conversion, rendering as '??????' in GitHub's diff.

- ─ (U+2500) → --
- — (U+2014) → ---
- → (U+2192) → ->
- ➔ (U+2794) → >

Rebuilt the file from the clean upstream base to avoid any lingering
encoding corruption. All CSS content values using arrows were converted
to their ASCII equivalents.

Fixes review feedback on PR #208.
---
 frontend/styles/main.css | 70 ++++++++++++++++++++--------------------
 1 file changed, 35 insertions(+), 35 deletions(-)

diff --git a/frontend/styles/main.css b/frontend/styles/main.css
index 02d1541e..cc6604b3 100644
--- a/frontend/styles/main.css
+++ b/frontend/styles/main.css
@@ -1,5 +1,5 @@
 /* ============================================
-   CodePVG Leaderboard ??? Terminal / CRT Theme
+   CodePVG Leaderboard --- Terminal / CRT Theme
    ============================================ */
 
 @import url("https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600;700&family=Space+Mono:wght@400;700&display=swap");
@@ -24,7 +24,7 @@
   --border-bright: rgba(0, 255, 65, 0.25);
 }
 
-/* ?????? Reset ?????? */
+/* -- Reset -- */
 * {
   margin: 0;
   padding: 0;
@@ -45,7 +45,7 @@ body {
   font-size: 14px;
 }
 
-/* ?????? CRT Screen Glow & Scanlines ?????? */
+/* -- CRT Screen Glow & Scanlines -- */
 body::before {
   content: "";
   position: fixed;
@@ -61,7 +61,7 @@ body::before {
   animation: crtScan 10s linear infinite;
 }
 
-/* ?????? CRT Scanline Overlay ?????? */
+/* -- CRT Scanline Overlay -- */
 body::after {
   content: "";
   position: fixed;
@@ -82,7 +82,7 @@ body.crt-scrolling {
   filter: blur(0.5px) contrast(1.1) brightness(1.2);
 }
 
-/* ?????? Animations ?????? */
+/* -- Animations -- */
 @keyframes blink {
   0%,
   100% {
@@ -179,7 +179,7 @@ body.crt-scrolling {
   }
 }
 
-/* ?????? Utility ?????? */
+/* -- Utility -- */
 .container {
   max-width: 1100px;
   margin: 0 auto;
@@ -223,7 +223,7 @@ body.crt-scrolling {
   display: none;
 }
 
-/* ?????? Terminal Window ?????? */
+/* -- Terminal Window -- */
 .terminal-window {
   background: var(--bg-surface);
   border: 1px solid var(--border-bright);
@@ -291,7 +291,7 @@ body.crt-scrolling {
   padding: 1.5rem;
 }
 
-/* ?????? Navigation ?????? */
+/* -- Navigation -- */
 .navbar {
   background: var(--bg);
   padding: 0;
@@ -396,7 +396,7 @@ body.crt-scrolling {
   display: block;
 }
 
-/* ?????? Hero Section ?????? */
+/* -- Hero Section -- */
 .hero {
   min-height: 100vh;
   width: 100%;
@@ -583,7 +583,7 @@ body.crt-scrolling {
   margin: 0;
 }
 
-/* ?????? Page Content ?????? */
+/* -- Page Content -- */
 .page {
   min-height: 100vh;
   background: transparent;
@@ -616,7 +616,7 @@ body.crt-scrolling {
   margin-left: 4px;
 }
 
-/* ?????? Registration Forms ?????? */
+/* -- Registration Forms -- */
 .form-container {
   max-width: 580px;
   margin: 0 auto;
@@ -690,7 +690,7 @@ body.crt-scrolling {
   content: "// ";
 }
 
-/* ?????? Interactive Bash Form Inputs ?????? */
+/* -- Interactive Bash Form Inputs -- */
 .form-input-bash-wrapper {
   display: flex;
   align-items: center;
@@ -735,7 +735,7 @@ body.crt-scrolling {
   margin-left: 2px;
 }
 
-/* ?????? Execution Log Container ?????? */
+/* -- Execution Log Container -- */
 .execution-log-container {
   background: #000;
   border: 1px solid var(--border-bright);
@@ -772,7 +772,7 @@ body.crt-scrolling {
   text-shadow: 0 0 8px rgba(255, 51, 51, 0.4);
 }
 
-/* ?????? Tabs ?????? */
+/* -- Tabs -- */
 .tabs {
   display: flex;
   justify-content: center;
@@ -1005,7 +1005,7 @@ body.crt-scrolling {
   text-shadow: 0 0 8px rgba(255, 255, 255, 0.25);
 }
 
-/* ?????? Mobile Cards ?????? */
+/* -- Mobile Cards -- */
 .mobile-cards {
   display: none;
 }
@@ -1110,7 +1110,7 @@ body.crt-scrolling {
   margin-top: 2px;
 }
 
-/* ?????? Forms ?????? */
+/* -- Forms -- */
 .form-container {
   display: flex;
   align-items: center;
@@ -1171,7 +1171,7 @@ body.crt-scrolling {
     0 0 15px rgba(0, 255, 65, 0.1);
 }
 
-/* ?????? Interactive Bash Form Inputs ?????? */
+/* -- Interactive Bash Form Inputs -- */
 .form-input-bash-wrapper {
   display: flex;
   align-items: center;
@@ -1233,7 +1233,7 @@ body.crt-scrolling {
   color: var(--text-muted);
 }
 
-/* ?????? Success Message ?????? */
+/* -- Success Message -- */
 .success-container {
   text-align: center;
 }
@@ -1257,7 +1257,7 @@ body.crt-scrolling {
   color: var(--text-dim);
 }
 
-/* ?????? Content Sections ?????? */
+/* -- Content Sections -- */
 .content-section {
   background: var(--bg-surface);
   border: 1px solid var(--border);
@@ -1342,7 +1342,7 @@ body.crt-scrolling {
 }
 
 .feature-list li::before {
-  content: "??? ";
+  content: "-> ";
   color: var(--text-muted);
 }
 
@@ -1384,7 +1384,7 @@ body.crt-scrolling {
   border-color: rgba(191, 127, 255, 0.25);
 }
 
-/* ?????? Scroll Indicator ?????? */
+/* -- Scroll Indicator -- */
 .scroll-indicator {
   position: absolute;
   bottom: 2rem;
@@ -1412,7 +1412,7 @@ body.crt-scrolling {
   animation: blink 1.5s ease-in-out infinite;
 }
 
-/* ?????? Contact Section ?????? */
+/* -- Contact Section -- */
 .contact-card {
   text-align: center;
   padding: 1.5rem 1.25rem;
@@ -1511,7 +1511,7 @@ body.crt-scrolling {
   font-size: 0.82rem;
 }
 
-/* ?????? Mobile Responsiveness ?????? */
+/* -- Mobile Responsiveness -- */
 @media (max-width: 940px) {
   .hero-title {
     font-size: 2.2rem;
@@ -1678,7 +1678,7 @@ body.crt-scrolling {
   }
 }
 
-/* ?????? Scrollbar ?????? */
+/* -- Scrollbar -- */
 html,
 body {
   scrollbar-width: thin;
@@ -1701,7 +1701,7 @@ body::-webkit-scrollbar-thumb {
   border-radius: 2px;
 }
 
-/* ?????? Footer ?????? */
+/* -- Footer -- */
 .footer {
   width: 100%;
   padding: 40px 20px 16px;
@@ -1888,7 +1888,7 @@ body::-webkit-scrollbar-thumb {
   }
 }
 
-/* ?????? Boot Sequence Overlay ?????? */
+/* -- Boot Sequence Overlay -- */
 .boot-overlay {
   position: fixed;
   inset: 0;
@@ -1934,7 +1934,7 @@ body::-webkit-scrollbar-thumb {
   text-shadow: 0 0 5px rgba(0, 255, 65, 0.4);
 }
 
-/* ?????? Mock Shell & Live Feed ?????? */
+/* -- Mock Shell & Live Feed -- */
 .mock-shell {
   margin-top: 1.5rem;
   text-align: left;
@@ -1970,7 +1970,7 @@ body::-webkit-scrollbar-thumb {
   opacity: 0;
 }
 
-/* ?????? Live Feed ?????? */
+/* -- Live Feed -- */
 .live-feed {
   margin-top: 3rem;
   background: rgba(0, 0, 0, 0.4);
@@ -2024,7 +2024,7 @@ body::-webkit-scrollbar-thumb {
   }
 }
 
-/* ?????? Glitch Effects ?????? */
+/* -- Glitch Effects -- */
 @keyframes glitch-anim-text {
   0% {
     text-shadow:
@@ -2143,7 +2143,7 @@ body::-webkit-scrollbar-thumb {
   }
 }
 
-/* ?????? Tooltip ?????? */
+/* -- Tooltip -- */
 .score-header {
   display: flex;
   align-items: center;
@@ -2311,7 +2311,7 @@ body::-webkit-scrollbar-thumb {
   }
 }
 
-/* ?????? Search Bar ?????? */
+/* -- Search Bar -- */
 .search-container {
   display: flex;
   justify-content: center;
@@ -2436,7 +2436,7 @@ body::-webkit-scrollbar-thumb {
   font-size: 0.85rem;
 }
 
-/* ?????? Terminal Cyberpunk Pagination ?????? */
+/* -- Terminal Cyberpunk Pagination -- */
 .page {
   display: flex;
   flex-direction: column;
@@ -2553,7 +2553,7 @@ body::-webkit-scrollbar-thumb {
   display: none;
 }
 
-/* ?????? Leaderboard Rank Change ?????? */
+/* -- Leaderboard Rank Change -- */
 .rank-change {
   display: inline-block;
   font-size: 0.65rem;
@@ -2640,7 +2640,7 @@ body::-webkit-scrollbar-thumb {
   }
 }
 
-/* ?????? Sync Changes Button & Card ?????? */
+/* -- Sync Changes Button & Card -- */
 .changes-btn {
   background: transparent;
   color: var(--cyan);
@@ -2810,7 +2810,7 @@ body::-webkit-scrollbar-thumb {
 }
 
 .changes-content-line::before {
-  content: "???";
+  content: ">";
   color: var(--cyan);
   font-size: 0.7rem;
   margin-top: 2px;

From f7468cbb6b8063a1bbd4b165805d8e2beb437780 Mon Sep 17 00:00:00 2001
From: Rishab <rishab.chandgothia.cg@gmail.com>
Date: Fri, 19 Jun 2026 00:07:20 +0530
Subject: [PATCH 4/4] Update leaderboard.html

---
 frontend/leaderboard.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/leaderboard.html b/frontend/leaderboard.html
index 0cbf612f..c48d2dca 100644
--- a/frontend/leaderboard.html
+++ b/frontend/leaderboard.html
@@ -331,7 +331,7 @@ <h1 class="page-title">Leaderboard</h1>
               Failed to fetch leaderboard data. The upstream API may be
               rate-limited or unreachable. Please try again.
             </div>
-            <button id="retry-btn" class="btn btn-error">[RETRY]</button>
+            <button id="retry-btn" class="btn btn-error">RETRY</button>
           </div>
         </div>