From b11c66a35d7aa59d0e9864a33af3732b0e6e0f54 Mon Sep 17 00:00:00 2001
From: Souma-122s <simaroy.tech@gmail.com>
Date: Mon, 1 Jun 2026 00:49:14 +0530
Subject: [PATCH] feat: implement retro terminal Streak Card UI for Issue #51

---
 frontend/leaderboard.html | 27 +++++++++++++++
 frontend/styles/main.css  | 70 +++++++++++++++++++++++++++++++++++++++
 2 files changed, 97 insertions(+)

diff --git a/frontend/leaderboard.html b/frontend/leaderboard.html
index 09fd96b6..5a405a0e 100644
--- a/frontend/leaderboard.html
+++ b/frontend/leaderboard.html
@@ -42,6 +42,33 @@ <h1 class="page-title">Leaderboard</h1>
             >__AWAITING_UPLINK__</span
           >
         </div>
+
+<!-- Streak Card UI (Ready for Issue #7 Backend Data) -->
+<div class="streak-card">
+  <div class="streak-terminal-header">
+    <div class="terminal-dots">
+      <span class="dot dot-red"></span>
+      <span class="dot dot-yellow"></span>
+      <span class="dot dot-green"></span>
+    </div>
+    <span class="terminal-title">streak_status.sh</span>
+  </div>
+
+  <div class="streak-content">
+    <div class="streak-row">
+      <span class="terminal-prompt">$ current_streak:</span>
+      <span class="streak-value" id="user-streak-count">🔥 12 Days</span>
+    </div>
+
+    <div class="streak-row">
+      <span class="terminal-prompt">$ daily_grind:</span>
+      <span class="streak-badge badge-completed" id="user-grind-status">
+        [ STATUS: COMPLETED ]
+      </span>
+    </div>
+  </div>
+</div>
+        
         <div
           id="next-sync-indicator"
           style="
diff --git a/frontend/styles/main.css b/frontend/styles/main.css
index 8f933711..b814fbb6 100644
--- a/frontend/styles/main.css
+++ b/frontend/styles/main.css
@@ -970,6 +970,76 @@ body::after {
   text-shadow: 0 0 6px rgba(255, 176, 0, 0.3);
 }
 
+/* --- Streak Card Component Styles --- */
+.streak-card {
+  width: 100%;
+  max-width: 400px;
+  border: 1px solid #22c55e;
+  background-color: #0a0a0a;
+  padding: 1rem;
+  font-family: 'Courier New', Courier, monospace;
+  border-radius: 6px;
+  box-shadow: 0 4px 6px rgba(0, 255, 0, 0.1);
+  margin: 1rem auto 2rem auto; /* Centered with bottom margin */
+}
+
+.streak-terminal-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-bottom: 1px solid #14532d;
+  padding-bottom: 0.5rem;
+  margin-bottom: 1rem;
+}
+
+.terminal-dots {
+  display: flex;
+  gap: 6px;
+}
+
+.dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
+.dot-red { background-color: #ef4444; }
+.dot-yellow { background-color: #eab308; }
+.dot-green { background-color: #22c55e; }
+
+.terminal-title { color: #16a34a; font-size: 0.8rem; }
+
+.streak-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 0.75rem;
+}
+
+.terminal-prompt { color: #9ca3af; }
+.streak-value { color: #facc15; font-size: 1.25rem; font-weight: bold; }
+
+.streak-badge {
+  font-size: 0.75rem;
+  padding: 2px 6px;
+  border-radius: 4px;
+  font-weight: bold;
+  letter-spacing: 1px;
+}
+
+.badge-completed {
+  background-color: rgba(20, 83, 45, 0.5);
+  color: #4ade80;
+  border: 1px solid #22c55e;
+  animation: pulse 2s infinite;
+}
+
+.badge-pending {
+  background-color: rgba(127, 29, 29, 0.5);
+  color: #f87171;
+  border: 1px solid #ef4444;
+}
+
+@keyframes pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.7; }
+}
+
 .mobile-name {
   font-size: 1rem;
   font-weight: 600;