From 34d34d31d11f65f5d4804a4638b91b7332733dfd Mon Sep 17 00:00:00 2001
From: Kartik Jain <koderkartik@gmail.com>
Date: Fri, 30 Jan 2026 17:40:11 +0530
Subject: [PATCH 1/6] Update dashboard-cohort1.html

---
 dashboard-euclideans.html | 389 ++++++++++++++++++++++++++++++++++++++
 1 file changed, 389 insertions(+)

diff --git a/dashboard-euclideans.html b/dashboard-euclideans.html
index 19fabcb2..ffe095a9 100644
--- a/dashboard-euclideans.html
+++ b/dashboard-euclideans.html
@@ -318,6 +318,7 @@ <h1>Vinternship Dashboard Euclideans</h1>
     <div class="tab" data-tab="cs">CS Progress</div>
     <div class="tab" data-tab="health">Health Points</div>
     <div class="tab" data-tab="tickets">Tickets</div>
+    <div class="tab" data-tab="me">My Dashboard</div>
   </div>
 
   <div class="top-bar-spacer"></div>
@@ -471,6 +472,102 @@ <h2 style="color:#1a237e;">Tickets</h2>
   </div>
 </div>
 
+<!-- My Dashboard Tab -->
+<div class="tab-content" id="tab-me">
+  
+  <div class="dashboard-inner">
+    <div class="dashboard-view" style="width:100%;">
+
+      <h2 style="color:#1a237e;margin-bottom:12px;">My Dashboard</h2>
+
+      <!-- EMAIL INPUT -->
+      <div style="margin-bottom:16px;">
+        <input
+          id="emailInput"
+          type="email"
+          placeholder="Enter your registered email"
+          style="
+            padding:10px 12px;
+            width:260px;
+            border-radius:8px;
+            border:1px solid #d1d5db;
+            margin-right:8px;
+          "
+        />
+        <button
+          onclick="setEmail()"
+          style="
+            padding:10px 14px;
+            border-radius:8px;
+            border:none;
+            background:#1a237e;
+            color:white;
+            font-weight:600;
+            cursor:pointer;
+          "
+        >
+          Load My Dashboard
+        </button>
+
+      </div>
+
+      <!-- RESULT CARDS -->
+      
+       <div class="status-row">
+       <div class="pill">Rank: <span id="my-rank">–</span></div>
+       <div class="pill">CS: <span id="my-cs">–</span>%</div>
+       <div class="pill">Vibe: <span id="my-vibe">–</span>%</div>
+       <div class="pill">HP: <span id="my-hp">–</span></div>
+       <div class="pill">Overall: <span id="my-overall">–</span>%</div>
+       </div>
+
+       <div id="my-next-deadline"
+        class="pill"
+        style="margin:16px 0; font-weight:700;">
+       </div>
+
+
+        <!-- VIBE DETAILS -->
+        <h3 style="margin-top:24px;color:#1a237e;">Vibe Milestones</h3>
+        <div id="my-vibe-section" style="display:flex;flex-wrap:wrap;gap:10px;"></div>
+
+        <!-- CS DETAILS -->
+         <h3 style="margin-top:24px;color:#1a237e;">Case Study Milestones</h3>
+         <div id="my-cs-section" style="display:flex;flex-wrap:wrap;gap:10px;"></div>
+         <button
+           id="view-my-cs"
+           style="
+              margin-top:12px;
+              padding:10px 14px;
+              border-radius:8px;
+              border:none;
+              background:#1a237e;
+              color:white;
+              font-weight:600;
+              cursor:pointer;
+            "
+          >
+             View my CS details →
+          </button>
+          
+        <!-- HP DAILY TREND -->
+         <h3 style="margin-top:24px;color:#1a237e;">HP Status</h3>
+         <div id="my-hp-status" class="pill" style="margin-bottom:12px;"></div>
+
+        <div id="my-hp-action"
+          style="
+            margin-top:10px;
+            padding:12px 16px;
+            border-radius:10px;
+            font-size:14px;
+            display:none;
+            ">
+        </div>
+    </div>
+  </div>
+</div>
+
+
 <script>
   // ========= CONFIG =========
   const API_URL = "https://script.google.com/macros/s/AKfycbyU2YIGp55fzmJvhLP_DdNUTUCd6DbMHQUeayuFCL6xioWm7R0YB2L0KRftupQzGYR9Xw/exec";
@@ -895,6 +992,291 @@ <h2 style="color:#1a237e;">Tickets</h2>
   });
 } // ✅ FUNCTION CLOSED
 
+const VIBE_MILESTONES = [
+  { label: "Vibe Phase 1", required: 25, deadline: "2026-01-22" },
+  { label: "Vibe Phase 2", required: 50, deadline: "2026-01-29" },
+  { label: "Vibe Phase 3", required: 75, deadline: "2026-02-05" },
+  { label: "Vibe Phase 4", required: 100, deadline: "2026-02-12" }
+];
+
+const CS_MILESTONES = [
+  { label: "CS Week 1", cumulative: 6,  deadline: "2026-02-12" },
+  { label: "CS Week 2", cumulative: 18, deadline: "2026-02-19" },
+  { label: "CS Week 3", cumulative: 30, deadline: "2026-02-26" },
+  { label: "CS Week 4", cumulative: 42, deadline: "2026-03-05" }
+];
+
+function setEmail() {
+  const email = document.getElementById("emailInput").value.trim();
+
+  if (!email) {
+    alert("Please enter your email");
+    return;
+  }
+
+  localStorage.setItem("userEmail", email);
+  renderMyDashboard();
+}
+
+function getMyData() {
+  const email = localStorage.getItem("userEmail");
+  if (!email || !apiData || !apiData.dashboard) return null;
+
+  return apiData.dashboard.find(
+    r => r.Email && r.Email.toLowerCase() === email.toLowerCase()
+  );
+}
+
+function renderMyDashboard() {
+  const me = getMyData();
+
+  if (!me) {
+    document.getElementById("my-rank").textContent = "Not found";
+    return;
+  }
+
+  document.getElementById("my-rank").textContent = me.Rank;
+  document.getElementById("my-cs").textContent = me["Case Study Progress"];
+  document.getElementById("my-vibe").textContent = me["Vibe Progress"];
+  document.getElementById("my-hp").textContent = me["Health Points"];
+  document.getElementById("my-overall").textContent = me["Overall Progress"];
+
+  console.log("Rendering vibe milestones");
+  renderMyVibe();
+  renderMyCS();
+  renderMyHPStatus();
+  renderNextDeadline();
+}
+
+function getMyVibeProgress() {
+  const email = localStorage.getItem("userEmail");
+  if (!email || !apiData || !apiData.dashboard) return 0;
+
+  const row = apiData.dashboard.find(
+    r => r.Email && r.Email.toLowerCase() === email.toLowerCase()
+  );
+
+  return row ? Number(row["Vibe Progress"]) : 0;
+}
+
+function computeVibeStatus() {
+  const current = getMyVibeProgress();
+  const now = new Date();
+
+  return VIBE_MILESTONES.map(m => ({
+    ...m,
+    current,
+    completed: current >= m.required,
+    isLate: now > new Date(m.deadline) && current < m.required
+  }));
+}
+
+function renderMyVibe() {
+  const container = document.getElementById("my-vibe-section");
+  const vibeData = computeVibeStatus();
+
+  container.innerHTML = vibeData.map(v => {
+    const shown = Math.min(v.current, v.required);
+
+    let status =
+      v.completed ? "✅ Completed"
+      : v.isLate ? "❌ Missed deadline"
+      : "⚠️ In progress";
+
+    return `
+      <div class="pill">
+        ${v.label} — ${shown}% / ${v.required}%
+        &nbsp;|&nbsp; ${status}
+        &nbsp;|&nbsp; Deadline: ${v.deadline}
+      </div>
+    `;
+  }).join("");
+}
+
+function getMyCSCount() {
+  const email = localStorage.getItem("userEmail");
+  if (!email || !apiData || !apiData.csProgress) return 0;
+
+  const row = apiData.csProgress.find(
+    r => r.Email && r.Email.toLowerCase() === email.toLowerCase()
+  );
+
+  if (!row) return 0;
+
+  return Object.keys(row)
+    .filter(k => k.startsWith("TS_CS"))
+    .filter(k => row[k] === "Yes").length;
+}
+
+function computeCSStatus() {
+  const submitted = getMyCSCount(); // total CS done by user
+  const now = new Date();
+
+  return CS_MILESTONES.map(m => {
+    const required = Number(m.cumulative); // 👈 THIS IS THE KEY
+    const shown = Math.min(submitted, required);
+
+    return {
+      label: m.label,
+      submitted: shown,
+      required,
+      completed: submitted >= required,
+      isLate: now > new Date(m.deadline) && submitted < required,
+      deadline: m.deadline
+    };
+  });
+}
+
+function renderMyCS() {
+  const container = document.getElementById("my-cs-section");
+  if (!container) return;
+
+  const csData = computeCSStatus();
+
+  container.innerHTML = csData.map(cs => {
+    let status =
+      cs.completed ? "✅ Completed"
+      : cs.isLate ? "❌ Missed deadline"
+      : "⚠️ In progress";
+
+    return `
+      <div class="pill">
+        ${cs.label} — ${cs.submitted} / ${cs.required} CS
+        &nbsp;|&nbsp; ${status}
+        &nbsp;|&nbsp; Deadline: ${cs.deadline}
+      </div>
+    `;
+  }).join("");
+}
+
+function renderMyHPStatus() {
+  const statusEl = document.getElementById("my-hp-status");
+  const actionEl = document.getElementById("my-hp-action");
+
+  if (!statusEl || !actionEl || !hpData) return;
+
+  const email = localStorage.getItem("userEmail");
+  if (!email) return;
+
+  const me = hpData.leaderboard.find(
+    r => r.email && r.email.toLowerCase() === email.toLowerCase()
+  );
+
+  if (!me) return;
+
+  const isSafe = me.status === "SAFE";
+
+  // STATUS PILL
+  statusEl.innerHTML = `
+    HP STATUS: <strong>${me.status}</strong>
+    (Current: ${me.currentHP.toFixed(2)} | Base: ${me.baseHP.toFixed(2)})
+  `;
+
+  statusEl.style.background = isSafe ? "#C8E6C9" : "#FFCDD2";
+  statusEl.style.color = isSafe ? "#1B5E20" : "#B71C1C";
+
+  // ACTION GUIDANCE
+  actionEl.style.display = "block";
+
+  const vibeStatus = computeVibeStatus();
+const csStatus = computeCSStatus();
+
+// find first pending / missed items
+const pendingVibe = vibeStatus.find(v => !v.completed);
+const pendingCS = csStatus.find(c => !c.completed);
+
+let messages = [];
+
+if (pendingVibe) {
+  if (pendingVibe.isLate) {
+    messages.push(`❌ Missed ${pendingVibe.label} deadline`);
+  } else {
+    messages.push(`⏳ ${pendingVibe.label} in progress`);
+  }
+}
+
+if (pendingCS) {
+  if (pendingCS.isLate) {
+    messages.push(`❌ ${pendingCS.label} missed`);
+  } else {
+    messages.push(`⏳ ${pendingCS.label} incomplete (${pendingCS.submitted}/${pendingCS.required})`);
+  }
+}
+
+if (isSafe) {
+  actionEl.style.background = "#E8F5E9";
+  actionEl.style.color = "#1B5E20";
+  actionEl.innerHTML = `
+    ✅ You are SAFE.<br>
+    ${messages.length ? messages.join("<br>") : "All milestones on track."}
+  `;
+} else {
+  actionEl.style.background = "#FDECEA";
+  actionEl.style.color = "#B71C1C";
+  actionEl.innerHTML = `
+    ⚠️ You are UNSAFE. Focus areas:<br>
+    ${messages.join("<br>")}
+    <br><strong>👉 Priority:</strong> Complete the earliest pending milestone.
+  `;
+ }
+}
+
+function renderNextDeadline() {
+  const el = document.getElementById("my-next-deadline");
+  if (!el) return;
+
+  const vibe = computeVibeStatus();
+  const cs = computeCSStatus();
+
+  const pending = [...vibe, ...cs]
+    .filter(m => !m.completed)
+    .sort((a, b) => new Date(a.deadline) - new Date(b.deadline));
+
+
+  if (!pending.length) {
+    el.textContent = "🎉 No upcoming deadlines. You’re all caught up!";
+    el.style.background = "#E8F5E9";
+    el.style.color = "#1B5E20";
+    return;
+  }
+
+  const next = pending[0];
+  const daysLeft = Math.ceil(
+    (new Date(next.deadline) - new Date()) / (1000 * 60 * 60 * 24)
+  );
+
+  el.textContent = `⏰ Next Deadline: ${next.label} — ${next.deadline} (${daysLeft} days left)`;
+
+  if (daysLeft <= 0) {
+    el.style.background = "#FFCDD2";
+    el.style.color = "#B71C1C";
+  } else if (daysLeft <= 3) {
+    el.style.background = "#FFF3CD";
+    el.style.color = "#856404";
+  } else {
+    el.style.background = "#E3F2FD";
+    el.style.color = "#0D47A1";
+  }
+}
+
+document.getElementById("view-my-cs")?.addEventListener("click", () => {
+  const email = localStorage.getItem("userEmail");
+  if (!email) return;
+
+  // switch to CS tab
+  activateTopTab("cs");
+
+  // wait for CS tab to render
+  setTimeout(() => {
+    const search = document.getElementById("cs-search");
+    if (!search) return;
+
+    search.value = email;
+    search.dispatchEvent(new Event("input", { bubbles: true }));
+    search.focus();
+  }, 300);
+});
+
   // ========= UI WIRING =========
   function activateTopTab(key) {
   document.querySelectorAll(".tab").forEach(t => t.classList.remove("active"));
@@ -905,6 +1287,13 @@ <h2 style="color:#1a237e;">Tickets</h2>
 
   if (key === "cs") renderCSProgress();
   if (key === "health" && !hpData) loadHealthPoints(); // 👈 ONLY LOAD ON DEMAND
+  if (key === "me") {
+  if (!hpData) {
+    loadHealthPoints().then(() => renderMyDashboard());
+   } else {
+     renderMyDashboard();
+    }
+  }
 }
 
   function activateInner(key) {

From 4c9e43ef7605877f318fbb0b0285da3e25675f9b Mon Sep 17 00:00:00 2001
From: Kartik Jain <koderkartik@gmail.com>
Date: Sat, 31 Jan 2026 17:55:28 +0530
Subject: [PATCH 2/6] Update dashboard-cohort1.html

---
 dashboard-euclideans.html | 43 ++++++++++++++++++++++++++++++++++++++-
 1 file changed, 42 insertions(+), 1 deletion(-)

diff --git a/dashboard-euclideans.html b/dashboard-euclideans.html
index ffe095a9..226496c4 100644
--- a/dashboard-euclideans.html
+++ b/dashboard-euclideans.html
@@ -549,7 +549,8 @@ <h3 style="margin-top:24px;color:#1a237e;">Case Study Milestones</h3>
           >
              View my CS details →
           </button>
-          
+
+        
         <!-- HP DAILY TREND -->
          <h3 style="margin-top:24px;color:#1a237e;">HP Status</h3>
          <div id="my-hp-status" class="pill" style="margin-bottom:12px;"></div>
@@ -999,6 +1000,10 @@ <h3 style="margin-top:24px;color:#1a237e;">HP Status</h3>
   { label: "Vibe Phase 4", required: 100, deadline: "2026-02-12" }
 ];
 
+// ========= DAILY VIBE RULE =========
+const VIBE_START_DATE = new Date("2026-01-14"); // first day of vibe
+const DAILY_VIBE_REQUIRED = 3.33; // % per day
+
 const CS_MILESTONES = [
   { label: "CS Week 1", cumulative: 6,  deadline: "2026-02-12" },
   { label: "CS Week 2", cumulative: 18, deadline: "2026-02-19" },
@@ -1059,6 +1064,37 @@ <h3 style="margin-top:24px;color:#1a237e;">HP Status</h3>
   return row ? Number(row["Vibe Progress"]) : 0;
 }
 
+function getExpectedVibeProgressToday() {
+  const today = new Date();
+  const daysPassed = Math.floor(
+    (today - VIBE_START_DATE) / (1000 * 60 * 60 * 24)
+  );
+
+  if (daysPassed <= 0) return 0;
+
+  return Math.min(100, daysPassed * DAILY_VIBE_REQUIRED);
+}
+
+function getDailyVibeCheck() {
+  const actual = getMyVibeProgress();
+  const expected = getExpectedVibeProgressToday();
+
+  if (actual >= expected) {
+    return {
+      onTrack: true,
+      message: `📈 Daily Vibe: On track (${actual.toFixed(1)}% ≥ ${expected.toFixed(1)}%)`
+    };
+  }
+
+  const deficit = (expected - actual).toFixed(1);
+
+  return {
+    onTrack: false,
+    message: `⚠️ Daily Vibe lagging by ${deficit}% (Expected ${expected.toFixed(1)}%)`
+  };
+}
+
+
 function computeVibeStatus() {
   const current = getMyVibeProgress();
   const now = new Date();
@@ -1186,6 +1222,10 @@ <h3 style="margin-top:24px;color:#1a237e;">HP Status</h3>
 const pendingCS = csStatus.find(c => !c.completed);
 
 let messages = [];
+// DAILY VIBE CHECK
+const dailyVibe = getDailyVibeCheck();
+messages.push(dailyVibe.message);
+
 
 if (pendingVibe) {
   if (pendingVibe.isLate) {
@@ -1277,6 +1317,7 @@ <h3 style="margin-top:24px;color:#1a237e;">HP Status</h3>
   }, 300);
 });
 
+
   // ========= UI WIRING =========
   function activateTopTab(key) {
   document.querySelectorAll(".tab").forEach(t => t.classList.remove("active"));

From 44c8ecfa3461efb88f1baee1e3b416e5ee8c1f36 Mon Sep 17 00:00:00 2001
From: Kartik Jain <koderkartik@gmail.com>
Date: Tue, 3 Mar 2026 23:09:29 +0530
Subject: [PATCH 3/6] Add vlog submission

---
 _vlogs/KartikJain_V_WIN25922.md | 10 ++++++++++
 1 file changed, 10 insertions(+)
 create mode 100644 _vlogs/KartikJain_V_WIN25922.md

diff --git a/_vlogs/KartikJain_V_WIN25922.md b/_vlogs/KartikJain_V_WIN25922.md
new file mode 100644
index 00000000..d51c3ad1
--- /dev/null
+++ b/_vlogs/KartikJain_V_WIN25922.md
@@ -0,0 +1,10 @@
+---
+title: "Building a React To-Do Application"
+author: Kartik Jain
+vinternship_id: WIN 25922
+youtube_url: "https://youtu.be/stU_Q3l6Lp8"
+---
+
+## Overview
+
+In this vlog, I explain how I built a fully functional To-Do application using React...
\ No newline at end of file

From b7306e626755e311ff77b2104416a531e131cca8 Mon Sep 17 00:00:00 2001
From: Kartik Jain <koderkartik@gmail.com>
Date: Tue, 3 Mar 2026 23:20:11 +0530
Subject: [PATCH 4/6] Delete dashboard-euclideans.html

---
 dashboard-euclideans.html | 1406 -------------------------------------
 1 file changed, 1406 deletions(-)
 delete mode 100644 dashboard-euclideans.html

diff --git a/dashboard-euclideans.html b/dashboard-euclideans.html
deleted file mode 100644
index 226496c4..00000000
--- a/dashboard-euclideans.html
+++ /dev/null
@@ -1,1406 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <!-- Google tag (gtag.js) -->
-<script async src="https://www.googletagmanager.com/gtag/js?id=G-87W6B0JP70"></script>
-<script>
-  window.dataLayer = window.dataLayer || [];
-  function gtag(){dataLayer.push(arguments);}
-  gtag('js', new Date());
-
-  gtag('config', 'G-87W6B0JP70');
-</script>
-<meta charset="UTF-8">
-<title>Vinternship Dashboard Euclideans</title>
-<meta name="viewport" content="width=device-width, initial-scale=1.0" />
-
-<style>
-  body {
-    margin: 0;
-    background: #f5f7fb;
-    font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
-    color: #1f2937;
-  }
-
-  /* Header */
-  .header {
-    background: linear-gradient(135deg, #1a237e, #3949ab);
-    color: white;
-    padding: 24px;
-    text-align: center;
-  }
-
-  /* Top Tabs */
-  .tabs {
-    display: flex;
-    justify-content: center;
-    gap: 12px;
-    margin: 20px;
-    flex-wrap: wrap;
-  }
-
-  .tab {
-    padding: 10px 18px;
-    background: #e8eaf6;
-    border-radius: 8px;
-    cursor: pointer;
-    font-weight: 600;
-    color: #1a237e;
-    user-select: none;
-  }
-
-  .tab.active {
-    background: #1a237e;
-    color: white;
-  }
-
-  /* Tab Content */
-  .tab-content {
-    display: none;
-    width: 95%;
-    max-width: 1400px;
-    margin: 0 auto 30px auto;
-    background: white;
-    border-radius: 12px;
-    box-shadow: 0 10px 30px rgba(0,0,0,0.12);
-    overflow: hidden;
-  }
-
-  .tab-content.active {
-    display: block;
-  }
-
-  /* Dashboard layout */
-  .dashboard-inner {
-    display: flex;
-    min-height: 80vh;
-  }
-
-  .dashboard-menu {
-    width: 260px;
-    background: #f3f4fb;
-    border-right: 1px solid #ddd;
-    padding: 12px;
-  }
-
-  .menu-item {
-    padding: 12px 14px;
-    margin-bottom: 8px;
-    cursor: pointer;
-    border-radius: 6px;
-    font-weight: 600;
-    color: #1a237e;
-    user-select: none;
-  }
-
-  .menu-item.active {
-    background: #1a237e;
-    color: white;
-  }
-
-  .dashboard-view {
-    flex: 1;
-    padding: 18px 18px 24px 18px;
-    overflow: auto;
-  }
-
-  /* Cards / Status */
-  .status-row {
-    display: flex;
-    gap: 12px;
-    align-items: center;
-    justify-content: space-between;
-    flex-wrap: wrap;
-    margin-bottom: 14px;
-  }
-
-  .pill {
-    display: inline-flex;
-    align-items: center;
-    gap: 8px;
-    padding: 8px 12px;
-    border-radius: 999px;
-    background: #eef2ff;
-    color: #1a237e;
-    font-weight: 600;
-    font-size: 13px;
-  }
-
-  .muted {
-    color: #6b7280;
-    font-size: 13px;
-    font-weight: 500;
-  }
-
-  .search {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-  }
-
-  .search input {
-    width: 320px;
-    max-width: 60vw;
-    padding: 10px 12px;
-    border-radius: 10px;
-    border: 1px solid #d1d5db;
-    outline: none;
-    font-size: 14px;
-  }
-
-  .search input:focus {
-    border-color: #1a237e;
-    box-shadow: 0 0 0 3px rgba(26,35,126,0.15);
-  }
-
-  /* Table */
-  .table-wrap {
-    width: 100%;
-    overflow: auto;
-    border: 1px solid #e5e7eb;
-    border-radius: 12px;
-  }
-
-  table {
-    width: 100%;
-    border-collapse: collapse;
-    min-width: 900px;
-  }
-
-  thead th {
-    position: sticky;
-    top: 0;
-    background: #00FF00;      /* Bright Green */
-    color: #D32F2F;           /* Deep Red */
-    font-weight: 800;
-    text-align: left;
-    padding: 12px;
-    border-bottom: 1px solid #e5e7eb;
-    cursor: pointer;
-    user-select: none;
-    white-space: nowrap;
-  }
-
-  thead th .sort-ind {
-    font-size: 12px;
-    margin-left: 6px;
-    opacity: 0.8;
-  }
-
-  tbody td {
-    padding: 10px 12px;
-    border-bottom: 1px solid #f0f2f5;
-    text-align: left;
-    vertical-align: middle;
-  }
-
-  tbody tr:hover {
-    filter: brightness(0.98);
-  }
-
-  .num {
-    text-align: center;
-    font-variant-numeric: tabular-nums;
-  }
-
-  .small {
-    font-size: 12px;
-    color: #6b7280;
-  }
-  .hp-inner-view {
-  display: none;
-}
-
-.hp-inner-view.active {
-  display: block;
-}
-
-
-  /* Percentile band row colors (pastels) */
-  .band-top { background: #C8E6C9; }     /* soft green */
-  .band-2   { background: #BBDEFB; }     /* soft blue  */
-  .band-3   { background: #FFF9C4; }     /* soft yellow*/
-  .band-4   { background: #FFE0B2; }     /* soft orange*/
-  .band-bot { background: #FFCDD2; }     /* soft red   */
-
-  /* Placeholder */
-  .placeholder {
-    padding: 60px;
-    text-align: center;
-    color: #555;
-  }
-
-  /* Tickets bars */
-  .ticket-bars {
-    display: flex;
-    align-items: flex-end;
-    justify-content: center;
-    gap: 28px;
-    height: 220px;
-    margin-top: 20px;
-  }
-
-  .bar {
-    width: 70px;
-    border-radius: 16px 16px 10px 10px;
-    display: flex;
-    align-items: flex-end;
-    justify-content: center;
-    padding-bottom: 10px;
-    font-weight: 800;
-    color: #1f2937;
-    box-shadow: 0 8px 18px rgba(0,0,0,0.10);
-  }
-
-  .gold   { height: 200px; background: #FFD54F; }
-  .silver { height: 150px; background: #CFD8DC; }
-  .bronze { height: 110px; background: #D7A86E; }
-
-  .soon {
-    margin-top: 18px;
-    font-weight: 700;
-    color: #6b7280;
-  }
-
-  .top-bar {
-  display: flex;
-  align-items: center;
-  gap: 16px;
-  padding: 16px 20px 0 20px;
-}
-
-/* Back button */
-.back-btn {
-  background: #e8eaf6;
-  color: #1a237e;
-  border: none;
-  padding: 10px 14px;
-  border-radius: 8px;
-  font-weight: 600;
-  cursor: pointer;
-  white-space: nowrap;
-}
-
-.back-btn:hover {
-  background: #dfe2fd;
-}
-
-/* Tabs stay centered */
-.tabs {
-  display: flex;
-  justify-content: center;
-  gap: 12px;
-  flex: 1;               /* THIS IS THE KEY */
-  flex-wrap: wrap;
-}
-
-/* Right spacer (keeps tabs centered) */
-.top-bar-spacer {
-  width: 80px;           /* same visual weight as back button */
-}
-
-</style>
-</head>
-
-<body>
-
-<div class="header">
-  <h1>Vinternship Dashboard Euclideans</h1>
-  <p>Live Performance & Progress Overview</p>
-</div>
-
-<!-- Top Tabs -->
-<div class="top-bar">
-  <button class="back-btn" onclick="history.back()">← Back</button>
-
-  <div class="tabs">
-    <div class="tab active" data-tab="leaderboard">Leaderboard</div>
-    <div class="tab" data-tab="cs">CS Progress</div>
-    <div class="tab" data-tab="health">Health Points</div>
-    <div class="tab" data-tab="tickets">Tickets</div>
-    <div class="tab" data-tab="me">My Dashboard</div>
-  </div>
-
-  <div class="top-bar-spacer"></div>
-</div>
-
-
-
-<!-- Leaderboard Tab -->
-<div class="tab-content active" id="tab-leaderboard">
-  <div class="dashboard-inner">
-    <div class="dashboard-menu">
-      <div class="menu-item active" data-inner="state">State-wise</div>
-      <div class="menu-item" data-inner="institute">Institute-wise</div>
-      <div class="menu-item" data-inner="cohort">Cohort-wise</div>
-    </div>
-
-    <div class="dashboard-view">
-      <div class="status-row">
-        <div class="pill" id="lb-pill">Loading…</div>
-        <div class="search">
-          <input id="lb-search" placeholder="Search…" />
-          <span class="muted" id="lb-meta"></span>
-        </div>
-      </div>
-
-      <div class="table-wrap">
-        <table id="lb-table">
-          <thead></thead>
-          <tbody></tbody>
-        </table>
-      </div>
-
-      <div class="small" style="margin-top:10px;">
-        Tip: Click any column header to sort.
-      </div>
-    </div>
-  </div>
-</div>
-
-<!-- CS Progress Tab -->
-<div class="tab-content" id="tab-cs">
-  <div class="dashboard-inner">
-    <div class="dashboard-view" style="width:100%;">
-
-      <div class="status-row">
-        <div class="pill">CS PROGRESS</div>
-
-        <div class="search">
-          <input id="cs-search" placeholder="Search by name or email…" />
-        </div>
-      </div>
-
-      <div style="margin-bottom:14px;">
-        <a href="https://forms.gle/9brRWW5kAbv2kaH98" target="_blank"
-           style="
-             display:inline-block;
-             padding:10px 16px;
-             background:#1a237e;
-             color:white;
-             border-radius:8px;
-             font-weight:600;
-             text-decoration:none;
-           ">
-          Submit your Case Studies here
-        </a>
-      </div>
-
-      <div class="table-wrap">
-        <table id="cs-table">
-          <thead></thead>
-          <tbody></tbody>
-        </table>
-      </div>
-
-    </div>
-  </div>
-</div>
-
-
-<!-- Health Points Tab -->
-<div class="tab-content" id="tab-health">
-  <div class="dashboard-inner">
-
-    <!-- LEFT MENU -->
-    <div class="dashboard-menu">
-      <div class="menu-item active" data-hp-inner="dashboard">HP Dashboard</div>
-      <div class="menu-item" data-hp-inner="individual">Individual HP</div>
-      <div class="menu-item" data-hp-inner="reasons">Add / Delete Reasons</div>
-      <div class="menu-item" data-hp-inner="attendance">Attendance</div>
-    </div>
-
-    <!-- RIGHT VIEW -->
-    <div class="dashboard-view" id="hp-view">
-
-      <!-- HP DASHBOARD (default) -->
-      <div class="hp-inner-view active" id="hp-dashboard-view">
-        <div class="status-row">
-          <div class="pill">Health Points Leaderboard</div>
-          <div class="search">
-            <input id="hp-search" placeholder="Search name or email…" />
-            <span class="muted" id="hp-meta"></span>
-          </div>
-        </div>
-
-        <div class="table-wrap">
-          <table id="hp-table">
-            <thead></thead>
-            <tbody></tbody>
-          </table>
-        </div>
-      </div>
-
-      <!-- INDIVIDUAL HP -->
-      <div class="hp-inner-view" id="hp-individual-view">
-        <iframe src="https://docs.google.com/spreadsheets/d/e/2PACX-1vQcZjQcLbb54CiTt9G2e_tWL93gPcwsdBCMOxUeKrXpIOSiM5z05oVkOVa6EuswyvVdpA_LFxxUIG9Q/pubhtml?gid=713252598&amp;single=true&amp;widget=true&amp;headers=false"
-          style="width:100%; height:80vh; border:none; border-radius:12px;">
-        </iframe>
-      </div>
-
-      <!-- ADD / DELETE REASONS -->
-      <div class="hp-inner-view" id="hp-reasons-view">
-       <iframe src="https://docs.google.com/spreadsheets/d/e/2PACX-1vQcZjQcLbb54CiTt9G2e_tWL93gPcwsdBCMOxUeKrXpIOSiM5z05oVkOVa6EuswyvVdpA_LFxxUIG9Q/pubhtml?gid=1449701238&amp;single=true&amp;widget=true&amp;headers=false"
-          style="width:100%; height:80vh; border:none; border-radius:12px;">
-        </iframe>
-      </div>
-    <!-- Attendance -->
-      <div class="hp-inner-view" id="hp-attendance-view">
-       <iframe src="https://docs.google.com/spreadsheets/d/e/2PACX-1vQqWa5RlbOQAwLlOj97MYBTZh8uBxRN1kR21k96LvrHyiiR7wcnvbI-BCh8nOixqQ3CBIziZcsj0dWP/pubhtml?gid=0&amp;single=true&amp;widget=true&amp;headers=false"
-          style="width:100%; height:80vh; border:none; border-radius:12px;">
-        </iframe>
-      </div>
-    </div>
-  </div>
-</div>
-
-
-<!-- Tickets Tab (placeholder with bars) -->
-<div class="tab-content" id="tab-tickets">
-  <div class="dashboard-inner">
-    <div class="dashboard-view" style="width:100%;">
-      <div class="placeholder">
-        <h2 style="color:#1a237e;">Tickets</h2>
-        <div class="ticket-bars">
-          <div class="bar gold">Gold</div>
-          <div class="bar silver">Silver</div>
-          <div class="bar bronze">Bronze</div>
-        </div>
-        <p class="soon">Will be added soon</p>
-      </div>
-    </div>
-  </div>
-</div>
-
-<!-- My Dashboard Tab -->
-<div class="tab-content" id="tab-me">
-  
-  <div class="dashboard-inner">
-    <div class="dashboard-view" style="width:100%;">
-
-      <h2 style="color:#1a237e;margin-bottom:12px;">My Dashboard</h2>
-
-      <!-- EMAIL INPUT -->
-      <div style="margin-bottom:16px;">
-        <input
-          id="emailInput"
-          type="email"
-          placeholder="Enter your registered email"
-          style="
-            padding:10px 12px;
-            width:260px;
-            border-radius:8px;
-            border:1px solid #d1d5db;
-            margin-right:8px;
-          "
-        />
-        <button
-          onclick="setEmail()"
-          style="
-            padding:10px 14px;
-            border-radius:8px;
-            border:none;
-            background:#1a237e;
-            color:white;
-            font-weight:600;
-            cursor:pointer;
-          "
-        >
-          Load My Dashboard
-        </button>
-
-      </div>
-
-      <!-- RESULT CARDS -->
-      
-       <div class="status-row">
-       <div class="pill">Rank: <span id="my-rank">–</span></div>
-       <div class="pill">CS: <span id="my-cs">–</span>%</div>
-       <div class="pill">Vibe: <span id="my-vibe">–</span>%</div>
-       <div class="pill">HP: <span id="my-hp">–</span></div>
-       <div class="pill">Overall: <span id="my-overall">–</span>%</div>
-       </div>
-
-       <div id="my-next-deadline"
-        class="pill"
-        style="margin:16px 0; font-weight:700;">
-       </div>
-
-
-        <!-- VIBE DETAILS -->
-        <h3 style="margin-top:24px;color:#1a237e;">Vibe Milestones</h3>
-        <div id="my-vibe-section" style="display:flex;flex-wrap:wrap;gap:10px;"></div>
-
-        <!-- CS DETAILS -->
-         <h3 style="margin-top:24px;color:#1a237e;">Case Study Milestones</h3>
-         <div id="my-cs-section" style="display:flex;flex-wrap:wrap;gap:10px;"></div>
-         <button
-           id="view-my-cs"
-           style="
-              margin-top:12px;
-              padding:10px 14px;
-              border-radius:8px;
-              border:none;
-              background:#1a237e;
-              color:white;
-              font-weight:600;
-              cursor:pointer;
-            "
-          >
-             View my CS details →
-          </button>
-
-        
-        <!-- HP DAILY TREND -->
-         <h3 style="margin-top:24px;color:#1a237e;">HP Status</h3>
-         <div id="my-hp-status" class="pill" style="margin-bottom:12px;"></div>
-
-        <div id="my-hp-action"
-          style="
-            margin-top:10px;
-            padding:12px 16px;
-            border-radius:10px;
-            font-size:14px;
-            display:none;
-            ">
-        </div>
-    </div>
-  </div>
-</div>
-
-
-<script>
-  // ========= CONFIG =========
-  const API_URL = "https://script.google.com/macros/s/AKfycbyU2YIGp55fzmJvhLP_DdNUTUCd6DbMHQUeayuFCL6xioWm7R0YB2L0KRftupQzGYR9Xw/exec";
-  const HP_API_URL = "https://script.google.com/macros/s/AKfycbwq_M-IDZlZUlDMJ7gXuhLhNq304qdCLs60plmJ90TtVtLtnZURKPxnrRVeS3kwLzZ2Hg/exec";
-  // We expect the API JSON to include these keys:
-  // {
-  //   state: [...],
-  //   institute: [...],
-  //   dashboard: [...]
-  // }
-  const DATA_KEYS = {
-    state: "state",
-    institute: "institute",
-    cohort: "dashboard" // cohort-wise uses Dashboard sheet
-  };
-
-  // Which column decides band coloring for each view
-  // state: Weighted Score column name
-  // institute: Weighted Score column name
-  // cohort: Rank / Overall Progress (choose one) -> we'll use Overall Progress if present else Rank
-  const BAND_METRIC = {
-    state: "Weighted Score",
-    institute: "Weighted Score",
-    cohort: "Overall Progress"
-  };
-
-  // ========= STATE =========
-  let apiData = null;
-
-  const sortState = {
-    // view => { key, dir }
-    state: { key: null, dir: "desc" },
-    institute: { key: null, dir: "desc" },
-    cohort: { key: null, dir: "asc" } // rank often asc
-  };
-
-  let currentInner = "state";
-  let currentRows = [];
-
-  // ========= HELPERS =========
-  function isNumberLike(v) {
-    if (v === null || v === undefined) return false;
-    const n = Number(v);
-    return !Number.isNaN(n) && v !== "";
-  }
-
-  function normalizeString(s) {
-    return (s ?? "").toString().toLowerCase();
-  }
-
-  function compare(a, b, dir) {
-    // numeric first if possible
-    const an = Number(a), bn = Number(b);
-    const aNum = !Number.isNaN(an) && a !== "" && a !== null && a !== undefined;
-    const bNum = !Number.isNaN(bn) && b !== "" && b !== null && b !== undefined;
-
-    let res = 0;
-    if (aNum && bNum) res = an - bn;
-    else res = normalizeString(a).localeCompare(normalizeString(b));
-
-    return dir === "asc" ? res : -res;
-  }
-
-  function computePercentileBands(rows, metricKey) {
-    // returns array of band class names in same order as rows
-    const values = rows.map(r => Number(r[metricKey]) || 0);
-    const sorted = [...values].sort((a,b) => b-a);
-    const n = sorted.length;
-
-    function percentile(v) {
-      const idx = sorted.findIndex(x => x <= v);
-      return idx === -1 ? 100 : (idx / n) * 100;
-    }
-
-    function bandClass(p) {
-      if (p <= 20) return "band-top";
-      if (p <= 40) return "band-2";
-      if (p <= 60) return "band-3";
-      if (p <= 80) return "band-4";
-      return "band-bot";
-    }
-
-    return values.map(v => bandClass(percentile(v)));
-  }
-
-  function renderTable(tableEl, rows, options) {
-    const thead = tableEl.querySelector("thead");
-    const tbody = tableEl.querySelector("tbody");
-    thead.innerHTML = "";
-    tbody.innerHTML = "";
-
-    if (!rows || rows.length === 0) {
-      thead.innerHTML = "<tr><th>No data</th></tr>";
-      tbody.innerHTML = "<tr><td class='small'>No rows returned from API.</td></tr>";
-      return;
-    }
-
-    const columns = options.columns ?? Object.keys(rows[0]);
-
-    // header row
-    const trh = document.createElement("tr");
-    columns.forEach(col => {
-      const th = document.createElement("th");
-      th.textContent = col;
-
-      const ind = document.createElement("span");
-      ind.className = "sort-ind";
-      ind.textContent = "";
-      th.appendChild(ind);
-
-      th.addEventListener("click", () => {
-        // toggle sort
-        const st = sortState[currentInner];
-        if (st.key === col) st.dir = (st.dir === "asc") ? "desc" : "asc";
-        else { st.key = col; st.dir = "asc"; }
-
-        // apply sorting + rerender
-        const sortedRows = [...currentRows].sort((a, b) => compare(a[col], b[col], st.dir));
-        currentRows = sortedRows;
-        renderLeaderboardView(currentInner); // rerender keeps band coloring in sync
-      });
-
-      trh.appendChild(th);
-    });
-    thead.appendChild(trh);
-
-    // band coloring
-    const metricKey = options.bandMetricKey;
-    const bandClasses = metricKey ? computePercentileBands(rows, metricKey) : rows.map(() => "");
-
-    // body rows
-    rows.forEach((r, i) => {
-      const tr = document.createElement("tr");
-      if (bandClasses[i]) tr.className = bandClasses[i];
-
-      columns.forEach(col => {
-        const td = document.createElement("td");
-        const val = r[col];
-
-        // numeric alignment
-        if (isNumberLike(val)) td.classList.add("num");
-
-        // format floats to 2 decimals (for progress/weighted etc.)
-        if (isNumberLike(val) && (col.toLowerCase().includes("progress") || col.toLowerCase().includes("weighted"))) {
-          td.textContent = Number(val).toFixed(2);
-        } else {
-          td.textContent = (val ?? "").toString();
-        }
-
-        tr.appendChild(td);
-      });
-
-      tbody.appendChild(tr);
-    });
-
-    // update sort indicators
-    const st = sortState[currentInner];
-    [...thead.querySelectorAll("th")].forEach(th => {
-      const col = th.childNodes[0]?.nodeValue?.trim() ?? th.textContent.trim();
-      const ind = th.querySelector(".sort-ind");
-      if (!ind) return;
-      if (st.key === col) ind.textContent = st.dir === "asc" ? "▲" : "▼";
-      else ind.textContent = "";
-    });
-  }
-
-  function applySearch(rows, query) {
-    if (!query) return rows;
-    const q = normalizeString(query);
-    return rows.filter(obj => JSON.stringify(obj).toLowerCase().includes(q));
-  }
-
-  // ========= LEADERBOARD RENDERING =========
-  function getDefaultBandMetric(inner, sampleRow) {
-    if (inner === "cohort") {
-      // Cohort-wise = Dashboard. Prefer Overall Progress; else Vibe Progress; else Rank
-      if (sampleRow && "Overall Progress" in sampleRow) return "Overall Progress";
-      if (sampleRow && "Vibe Progress" in sampleRow) return "Vibe Progress";
-      return "Rank";
-    }
-    return BAND_METRIC[inner];
-  }
-
-  function renderLeaderboardView(innerKey) {
-    currentInner = innerKey;
-
-    const pill = document.getElementById("lb-pill");
-    const meta = document.getElementById("lb-meta");
-    const search = document.getElementById("lb-search");
-    const table = document.getElementById("lb-table");
-
-    const dataKey = DATA_KEYS[innerKey];
-    let rows = (apiData && apiData[dataKey]) ? apiData[dataKey] : [];
-
-    // Apply search
-    rows = applySearch(rows, search.value);
-
-    // Determine columns and band metric
-    const sample = rows[0];
-
-    let columns;
-    if (innerKey === "state") {
-      columns = ["State / UT", "Student Count", "Average Vibe Progress", "In Top 50", "Weighted Score"];
-      // fallback if keys differ slightly
-      columns = columns.filter(c => sample && (c in sample));
-      if (columns.length === 0 && sample) columns = Object.keys(sample);
-    } else if (innerKey === "institute") {
-      columns = ["Institute Name", "Student Count", "Average Vibe Progress", "Not Yet Started", "In Top 50", "Weighted Score"];
-      columns = columns.filter(c => sample && (c in sample));
-      if (columns.length === 0 && sample) columns = Object.keys(sample);
-    } else {
-      // cohort-wise from Dashboard
-      columns = ["Rank", "Name", "Email", "Case Study Progress", "Vibe Progress", "Health Points" , "Overall Progress"];
-      columns = columns.filter(c => sample && (c in sample));
-      if (columns.length === 0 && sample) columns = Object.keys(sample);
-    }
-
-    // Default sort if none chosen yet
-    const st = sortState[innerKey];
-    if (!st.key) {
-      if (innerKey === "state" || innerKey === "institute") {
-        st.key = "Weighted Score";
-        st.dir = "desc";
-      } else {
-        st.key = "Rank";
-        st.dir = "asc";
-      }
-    }
-
-    // Sort rows
-    rows = [...rows].sort((a, b) => compare(a[st.key], b[st.key], st.dir));
-
-    // Keep global reference for re-render
-    currentRows = rows;
-
-    const bandMetric = getDefaultBandMetric(innerKey, sample);
-
-    pill.textContent = `${innerKey.toUpperCase()} VIEW`;
-    meta.textContent = `Rows: ${rows.length}${apiData?.lastUpdated ? " • Updated: " + new Date(apiData.lastUpdated).toLocaleString() : ""}`;
-
-    renderTable(table, rows, { columns, bandMetricKey: bandMetric });
-  }
-function renderCSProgress() {
-  const table = document.getElementById("cs-table");
-  if (!table || !apiData || !apiData.csProgress) return;
-
-  const thead = table.querySelector("thead");
-  const tbody = table.querySelector("tbody");
-  const searchInput = document.getElementById("cs-search");
-
-  /**
-   * IMPORTANT:
-   * Row 1 → mapping (ignore)
-   * Row 2 → header
-   * Data starts from Row 3
-   *
-   * sheetToJSON already converted rows,
-   * so we SKIP the FIRST OBJECT only.
-   */
-  const rawRows = apiData.csProgress.slice(1); // 🔴 skip mapping row
-
-  if (!rawRows.length) return;
-
-  const columns = Object.keys(rawRows[0]);
-
-  // ---------- RENDER HEADER ----------
-  thead.innerHTML = "";
-  const trh = document.createElement("tr");
-  columns.forEach(col => {
-    const th = document.createElement("th");
-    th.textContent = col;
-    trh.appendChild(th);
-  });
-  thead.appendChild(trh);
-
-  // ---------- RENDER BODY ----------
-  function draw(rows) {
-    tbody.innerHTML = "";
-
-    rows.forEach(r => {
-      const tr = document.createElement("tr");
-
-      columns.forEach(col => {
-        const td = document.createElement("td");
-        const val = r[col];
-
-        if (val === "Yes") {
-          td.textContent = "✓";
-          td.style.color = "#1B5E20";
-          td.style.fontWeight = "700";
-          td.style.textAlign = "center";
-        } else if (val === "" || val === null || val === undefined) {
-          td.textContent = "–";
-          td.style.color = "#9E9E9E";
-          td.style.textAlign = "center";
-        } else {
-          td.textContent = val;
-        }
-
-        tr.appendChild(td);
-      });
-
-      tbody.appendChild(tr);
-    });
-  }
-
-  // Initial render
-  draw(rawRows);
-
-  // ---------- SEARCH ----------
-  if (searchInput) {
-    searchInput.addEventListener("input", () => {
-      const q = searchInput.value.toLowerCase();
-      const filtered = rawRows.filter(r =>
-        (r.Name || "").toLowerCase().includes(q) ||
-        (r.Email || "").toLowerCase().includes(q)
-      );
-      draw(filtered);
-    });
-  }
-}
-
-  // ========= API =========
-  async function loadAPI() {
-    const pill = document.getElementById("lb-pill");
-    const meta = document.getElementById("lb-meta");
-    pill.textContent = "Loading data…";
-    meta.textContent = "";
-
-    try {
-      const res = await fetch(API_URL, { cache: "no-store" });
-      if (!res.ok) throw new Error(`API error: ${res.status}`);
-      apiData = await res.json();
-
-      // Basic validation
-      if (!apiData || typeof apiData !== "object") throw new Error("Invalid JSON");
-
-      // Render initial view
-      renderLeaderboardView("state");
-      pill.textContent = "STATE-WISE";
-    } catch (err) {
-      pill.textContent = "Failed to load";
-      meta.textContent = (err && err.message) ? err.message : "Unknown error";
-      console.error(err);
-    }
-  }
- // ========= HEALTH POINTS =========
-  let hpData = null;
-
-  async function loadHealthPoints() {
-    const meta = document.getElementById("hp-meta");
-    meta.textContent = "Loading…";
-
-    try {
-      const res = await fetch(HP_API_URL, { cache: "no-store" });
-      hpData = await res.json();
-      renderHealthPoints();
-    } catch (e) {
-      meta.textContent = "Failed to load";
-      console.error(e);
-    }
-  }
-
- function renderHealthPoints() {
-  if (!hpData || !hpData.leaderboard) return;
-
-  const rows = hpData.leaderboard;
-  const search = document.getElementById("hp-search");
-  const meta = document.getElementById("hp-meta");
-  const table = document.getElementById("hp-table");
-
-  let filtered = rows;
-  if (search.value) {
-    const q = search.value.toLowerCase();
-    filtered = rows.filter(r =>
-      r.name.toLowerCase().includes(q) ||
-      r.email.toLowerCase().includes(q)
-    );
-  }
-
-  meta.textContent = `Students: ${filtered.length}`;
-
-  const thead = table.querySelector("thead");
-  const tbody = table.querySelector("tbody");
-  thead.innerHTML = "";
-  tbody.innerHTML = "";
-
-  const columns = ["Rank", "Name", "Email", "Current HP", "Base HP", "HP Status"];
-
-  // ✅ HEADER
-  const trh = document.createElement("tr");
-  columns.forEach(c => {
-    const th = document.createElement("th");
-    th.textContent = c;
-    trh.appendChild(th);
-  });
-  thead.appendChild(trh);
-
-  // ✅ BODY
-  filtered.forEach(r => {
-    const tr = document.createElement("tr");
-   tr.innerHTML = `
-  <td class="num">${r.rank}</td>
-  <td>${r.name}</td>
-  <td>${r.email}</td>
-  <td class="num">${Number(r.currentHP).toFixed(2)}</td>
-  <td class="num">${Number(r.baseHP).toFixed(2)}</td>
-  <td>
-    <span style="
-      padding:4px 10px;
-      border-radius:999px;
-      font-weight:700;
-      font-size:12px;
-      color:${r.status === "SAFE" ? "#1B5E20" : "#B71C1C"};
-      background:${r.status === "SAFE" ? "#C8E6C9" : "#FFCDD2"};
-    ">
-      ${r.status}
-    </span>
-  </td>
-`;
- tbody.appendChild(tr);
-  });
-} // ✅ FUNCTION CLOSED
-
-const VIBE_MILESTONES = [
-  { label: "Vibe Phase 1", required: 25, deadline: "2026-01-22" },
-  { label: "Vibe Phase 2", required: 50, deadline: "2026-01-29" },
-  { label: "Vibe Phase 3", required: 75, deadline: "2026-02-05" },
-  { label: "Vibe Phase 4", required: 100, deadline: "2026-02-12" }
-];
-
-// ========= DAILY VIBE RULE =========
-const VIBE_START_DATE = new Date("2026-01-14"); // first day of vibe
-const DAILY_VIBE_REQUIRED = 3.33; // % per day
-
-const CS_MILESTONES = [
-  { label: "CS Week 1", cumulative: 6,  deadline: "2026-02-12" },
-  { label: "CS Week 2", cumulative: 18, deadline: "2026-02-19" },
-  { label: "CS Week 3", cumulative: 30, deadline: "2026-02-26" },
-  { label: "CS Week 4", cumulative: 42, deadline: "2026-03-05" }
-];
-
-function setEmail() {
-  const email = document.getElementById("emailInput").value.trim();
-
-  if (!email) {
-    alert("Please enter your email");
-    return;
-  }
-
-  localStorage.setItem("userEmail", email);
-  renderMyDashboard();
-}
-
-function getMyData() {
-  const email = localStorage.getItem("userEmail");
-  if (!email || !apiData || !apiData.dashboard) return null;
-
-  return apiData.dashboard.find(
-    r => r.Email && r.Email.toLowerCase() === email.toLowerCase()
-  );
-}
-
-function renderMyDashboard() {
-  const me = getMyData();
-
-  if (!me) {
-    document.getElementById("my-rank").textContent = "Not found";
-    return;
-  }
-
-  document.getElementById("my-rank").textContent = me.Rank;
-  document.getElementById("my-cs").textContent = me["Case Study Progress"];
-  document.getElementById("my-vibe").textContent = me["Vibe Progress"];
-  document.getElementById("my-hp").textContent = me["Health Points"];
-  document.getElementById("my-overall").textContent = me["Overall Progress"];
-
-  console.log("Rendering vibe milestones");
-  renderMyVibe();
-  renderMyCS();
-  renderMyHPStatus();
-  renderNextDeadline();
-}
-
-function getMyVibeProgress() {
-  const email = localStorage.getItem("userEmail");
-  if (!email || !apiData || !apiData.dashboard) return 0;
-
-  const row = apiData.dashboard.find(
-    r => r.Email && r.Email.toLowerCase() === email.toLowerCase()
-  );
-
-  return row ? Number(row["Vibe Progress"]) : 0;
-}
-
-function getExpectedVibeProgressToday() {
-  const today = new Date();
-  const daysPassed = Math.floor(
-    (today - VIBE_START_DATE) / (1000 * 60 * 60 * 24)
-  );
-
-  if (daysPassed <= 0) return 0;
-
-  return Math.min(100, daysPassed * DAILY_VIBE_REQUIRED);
-}
-
-function getDailyVibeCheck() {
-  const actual = getMyVibeProgress();
-  const expected = getExpectedVibeProgressToday();
-
-  if (actual >= expected) {
-    return {
-      onTrack: true,
-      message: `📈 Daily Vibe: On track (${actual.toFixed(1)}% ≥ ${expected.toFixed(1)}%)`
-    };
-  }
-
-  const deficit = (expected - actual).toFixed(1);
-
-  return {
-    onTrack: false,
-    message: `⚠️ Daily Vibe lagging by ${deficit}% (Expected ${expected.toFixed(1)}%)`
-  };
-}
-
-
-function computeVibeStatus() {
-  const current = getMyVibeProgress();
-  const now = new Date();
-
-  return VIBE_MILESTONES.map(m => ({
-    ...m,
-    current,
-    completed: current >= m.required,
-    isLate: now > new Date(m.deadline) && current < m.required
-  }));
-}
-
-function renderMyVibe() {
-  const container = document.getElementById("my-vibe-section");
-  const vibeData = computeVibeStatus();
-
-  container.innerHTML = vibeData.map(v => {
-    const shown = Math.min(v.current, v.required);
-
-    let status =
-      v.completed ? "✅ Completed"
-      : v.isLate ? "❌ Missed deadline"
-      : "⚠️ In progress";
-
-    return `
-      <div class="pill">
-        ${v.label} — ${shown}% / ${v.required}%
-        &nbsp;|&nbsp; ${status}
-        &nbsp;|&nbsp; Deadline: ${v.deadline}
-      </div>
-    `;
-  }).join("");
-}
-
-function getMyCSCount() {
-  const email = localStorage.getItem("userEmail");
-  if (!email || !apiData || !apiData.csProgress) return 0;
-
-  const row = apiData.csProgress.find(
-    r => r.Email && r.Email.toLowerCase() === email.toLowerCase()
-  );
-
-  if (!row) return 0;
-
-  return Object.keys(row)
-    .filter(k => k.startsWith("TS_CS"))
-    .filter(k => row[k] === "Yes").length;
-}
-
-function computeCSStatus() {
-  const submitted = getMyCSCount(); // total CS done by user
-  const now = new Date();
-
-  return CS_MILESTONES.map(m => {
-    const required = Number(m.cumulative); // 👈 THIS IS THE KEY
-    const shown = Math.min(submitted, required);
-
-    return {
-      label: m.label,
-      submitted: shown,
-      required,
-      completed: submitted >= required,
-      isLate: now > new Date(m.deadline) && submitted < required,
-      deadline: m.deadline
-    };
-  });
-}
-
-function renderMyCS() {
-  const container = document.getElementById("my-cs-section");
-  if (!container) return;
-
-  const csData = computeCSStatus();
-
-  container.innerHTML = csData.map(cs => {
-    let status =
-      cs.completed ? "✅ Completed"
-      : cs.isLate ? "❌ Missed deadline"
-      : "⚠️ In progress";
-
-    return `
-      <div class="pill">
-        ${cs.label} — ${cs.submitted} / ${cs.required} CS
-        &nbsp;|&nbsp; ${status}
-        &nbsp;|&nbsp; Deadline: ${cs.deadline}
-      </div>
-    `;
-  }).join("");
-}
-
-function renderMyHPStatus() {
-  const statusEl = document.getElementById("my-hp-status");
-  const actionEl = document.getElementById("my-hp-action");
-
-  if (!statusEl || !actionEl || !hpData) return;
-
-  const email = localStorage.getItem("userEmail");
-  if (!email) return;
-
-  const me = hpData.leaderboard.find(
-    r => r.email && r.email.toLowerCase() === email.toLowerCase()
-  );
-
-  if (!me) return;
-
-  const isSafe = me.status === "SAFE";
-
-  // STATUS PILL
-  statusEl.innerHTML = `
-    HP STATUS: <strong>${me.status}</strong>
-    (Current: ${me.currentHP.toFixed(2)} | Base: ${me.baseHP.toFixed(2)})
-  `;
-
-  statusEl.style.background = isSafe ? "#C8E6C9" : "#FFCDD2";
-  statusEl.style.color = isSafe ? "#1B5E20" : "#B71C1C";
-
-  // ACTION GUIDANCE
-  actionEl.style.display = "block";
-
-  const vibeStatus = computeVibeStatus();
-const csStatus = computeCSStatus();
-
-// find first pending / missed items
-const pendingVibe = vibeStatus.find(v => !v.completed);
-const pendingCS = csStatus.find(c => !c.completed);
-
-let messages = [];
-// DAILY VIBE CHECK
-const dailyVibe = getDailyVibeCheck();
-messages.push(dailyVibe.message);
-
-
-if (pendingVibe) {
-  if (pendingVibe.isLate) {
-    messages.push(`❌ Missed ${pendingVibe.label} deadline`);
-  } else {
-    messages.push(`⏳ ${pendingVibe.label} in progress`);
-  }
-}
-
-if (pendingCS) {
-  if (pendingCS.isLate) {
-    messages.push(`❌ ${pendingCS.label} missed`);
-  } else {
-    messages.push(`⏳ ${pendingCS.label} incomplete (${pendingCS.submitted}/${pendingCS.required})`);
-  }
-}
-
-if (isSafe) {
-  actionEl.style.background = "#E8F5E9";
-  actionEl.style.color = "#1B5E20";
-  actionEl.innerHTML = `
-    ✅ You are SAFE.<br>
-    ${messages.length ? messages.join("<br>") : "All milestones on track."}
-  `;
-} else {
-  actionEl.style.background = "#FDECEA";
-  actionEl.style.color = "#B71C1C";
-  actionEl.innerHTML = `
-    ⚠️ You are UNSAFE. Focus areas:<br>
-    ${messages.join("<br>")}
-    <br><strong>👉 Priority:</strong> Complete the earliest pending milestone.
-  `;
- }
-}
-
-function renderNextDeadline() {
-  const el = document.getElementById("my-next-deadline");
-  if (!el) return;
-
-  const vibe = computeVibeStatus();
-  const cs = computeCSStatus();
-
-  const pending = [...vibe, ...cs]
-    .filter(m => !m.completed)
-    .sort((a, b) => new Date(a.deadline) - new Date(b.deadline));
-
-
-  if (!pending.length) {
-    el.textContent = "🎉 No upcoming deadlines. You’re all caught up!";
-    el.style.background = "#E8F5E9";
-    el.style.color = "#1B5E20";
-    return;
-  }
-
-  const next = pending[0];
-  const daysLeft = Math.ceil(
-    (new Date(next.deadline) - new Date()) / (1000 * 60 * 60 * 24)
-  );
-
-  el.textContent = `⏰ Next Deadline: ${next.label} — ${next.deadline} (${daysLeft} days left)`;
-
-  if (daysLeft <= 0) {
-    el.style.background = "#FFCDD2";
-    el.style.color = "#B71C1C";
-  } else if (daysLeft <= 3) {
-    el.style.background = "#FFF3CD";
-    el.style.color = "#856404";
-  } else {
-    el.style.background = "#E3F2FD";
-    el.style.color = "#0D47A1";
-  }
-}
-
-document.getElementById("view-my-cs")?.addEventListener("click", () => {
-  const email = localStorage.getItem("userEmail");
-  if (!email) return;
-
-  // switch to CS tab
-  activateTopTab("cs");
-
-  // wait for CS tab to render
-  setTimeout(() => {
-    const search = document.getElementById("cs-search");
-    if (!search) return;
-
-    search.value = email;
-    search.dispatchEvent(new Event("input", { bubbles: true }));
-    search.focus();
-  }, 300);
-});
-
-
-  // ========= UI WIRING =========
-  function activateTopTab(key) {
-  document.querySelectorAll(".tab").forEach(t => t.classList.remove("active"));
-  document.querySelectorAll(".tab-content").forEach(c => c.classList.remove("active"));
-
-  document.querySelector(`.tab[data-tab="${key}"]`).classList.add("active");
-  document.getElementById(`tab-${key}`).classList.add("active");
-
-  if (key === "cs") renderCSProgress();
-  if (key === "health" && !hpData) loadHealthPoints(); // 👈 ONLY LOAD ON DEMAND
-  if (key === "me") {
-  if (!hpData) {
-    loadHealthPoints().then(() => renderMyDashboard());
-   } else {
-     renderMyDashboard();
-    }
-  }
-}
-
-  function activateInner(key) {
-    // left menu active state
-    document.querySelectorAll("#tab-leaderboard .menu-item").forEach(m => m.classList.remove("active"));
-    document.querySelector(`#tab-leaderboard .menu-item[data-inner="${key}"]`).classList.add("active");
-
-    // render view
-    renderLeaderboardView(key);
-  }
-// ========= HEALTH POINTS INNER TABS =========
-function activateHPInner(key) {
-  // menu active state
-  document.querySelectorAll('#tab-health .menu-item')
-    .forEach(m => m.classList.remove('active'));
-
-  document.querySelector(`#tab-health .menu-item[data-hp-inner="${key}"]`)
-    .classList.add('active');
-
-  // views
-  document.querySelectorAll('.hp-inner-view')
-    .forEach(v => v.classList.remove('active'));
-
-  if (key === 'dashboard') {
-    document.getElementById('hp-dashboard-view').classList.add('active');
-    if (!hpData) loadHealthPoints();
-  }
-
-  if (key === 'individual') {
-    document.getElementById('hp-individual-view').classList.add('active');
-  }
-
-  if (key === 'reasons') {
-    document.getElementById('hp-reasons-view').classList.add('active');
-  }
-
-   if (key === 'attendance') {
-    document.getElementById('hp-attendance-view').classList.add('active');
-  }
-}
-
-// left menu click binding
-document.querySelectorAll('#tab-health .menu-item').forEach(item => {
-  item.addEventListener('click', () => {
-    activateHPInner(item.dataset.hpInner);
-  });
-});
-
-  // Top tabs
-  document.querySelectorAll(".tab").forEach(tab => {
-    tab.addEventListener("click", () => activateTopTab(tab.dataset.tab));
-  });
-
-  // Left tabs (Leaderboard)
-  document.querySelectorAll("#tab-leaderboard .menu-item").forEach(item => {
-    item.addEventListener("click", () => activateInner(item.dataset.inner));
-  });
-
-  // Search
-  document.getElementById("lb-search").addEventListener("input", () => {
-    renderLeaderboardView(currentInner);
-  });
-
-  // Boot
-  loadAPI();
-</script>
-
-</body>
-</html> 

From 5e0c202f1cd35a5adcfca175030a3f210c94ac28 Mon Sep 17 00:00:00 2001
From: Kartik Jain <koderkartik@gmail.com>
Date: Wed, 1 Apr 2026 22:06:22 +0530
Subject: [PATCH 5/6] My dashboard

---
 dashboard-euclideans.html | 1562 +++++++++++++++++++++++++++++++++++++
 1 file changed, 1562 insertions(+)
 create mode 100644 dashboard-euclideans.html

diff --git a/dashboard-euclideans.html b/dashboard-euclideans.html
new file mode 100644
index 00000000..e6b3e87a
--- /dev/null
+++ b/dashboard-euclideans.html
@@ -0,0 +1,1562 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <!-- Google tag (gtag.js) -->
+<script async src="https://www.googletagmanager.com/gtag/js?id=G-87W6B0JP70"></script>
+<script>
+  window.dataLayer = window.dataLayer || [];
+  function gtag(){dataLayer.push(arguments);}
+  gtag('js', new Date());
+
+  gtag('config', 'G-87W6B0JP70');
+</script>
+<meta charset="UTF-8">
+<title>Vinternship Dashboard Euclideans</title>
+<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+
+<style>
+  body {
+    margin: 0;
+    background: #f5f7fb;
+    font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+    color: #1f2937;
+  }
+
+  /* Header */
+  .header {
+    background: linear-gradient(135deg, #1a237e, #3949ab);
+    color: white;
+    padding: 24px;
+    text-align: center;
+  }
+
+  /* Top Tabs */
+  .tabs {
+    display: flex;
+    justify-content: center;
+    gap: 12px;
+    margin: 20px;
+    flex-wrap: wrap;
+  }
+
+  .tab {
+    padding: 10px 18px;
+    background: #e8eaf6;
+    border-radius: 8px;
+    cursor: pointer;
+    font-weight: 600;
+    color: #1a237e;
+    user-select: none;
+  }
+
+  .tab.active {
+    background: #1a237e;
+    color: white;
+  }
+
+  /* Tab Content */
+  .tab-content {
+    display: none;
+    width: 95%;
+    max-width: 1400px;
+    margin: 0 auto 30px auto;
+    background: white;
+    border-radius: 12px;
+    box-shadow: 0 10px 30px rgba(0,0,0,0.12);
+    overflow: hidden;
+  }
+
+  .tab-content.active {
+    display: block;
+  }
+
+  /* Dashboard layout */
+  .dashboard-inner {
+    display: flex;
+    min-height: 80vh;
+  }
+
+  .dashboard-menu {
+    width: 260px;
+    background: #f3f4fb;
+    border-right: 1px solid #ddd;
+    padding: 12px;
+  }
+
+  .menu-item {
+    padding: 12px 14px;
+    margin-bottom: 8px;
+    cursor: pointer;
+    border-radius: 6px;
+    font-weight: 600;
+    color: #1a237e;
+    user-select: none;
+  }
+
+  .menu-item.active {
+    background: #1a237e;
+    color: white;
+  }
+
+  .dashboard-view {
+    flex: 1;
+    padding: 18px 18px 24px 18px;
+    overflow: auto;
+  }
+
+  /* Cards / Status */
+  .status-row {
+    display: flex;
+    gap: 12px;
+    align-items: center;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    margin-bottom: 14px;
+  }
+
+  .pill {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    padding: 8px 12px;
+    border-radius: 999px;
+    background: #eef2ff;
+    color: #1a237e;
+    font-weight: 600;
+    font-size: 13px;
+  }
+
+  .muted {
+    color: #6b7280;
+    font-size: 13px;
+    font-weight: 500;
+  }
+
+  .search {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+  }
+
+  .search input {
+    width: 320px;
+    max-width: 60vw;
+    padding: 10px 12px;
+    border-radius: 10px;
+    border: 1px solid #d1d5db;
+    outline: none;
+    font-size: 14px;
+  }
+
+  .search input:focus {
+    border-color: #1a237e;
+    box-shadow: 0 0 0 3px rgba(26,35,126,0.15);
+  }
+
+  /* Table */
+  .table-wrap {
+    width: 100%;
+    overflow: auto;
+    border: 1px solid #e5e7eb;
+    border-radius: 12px;
+  }
+
+  table {
+    width: 100%;
+    border-collapse: collapse;
+    min-width: 900px;
+  }
+
+  thead th {
+    position: sticky;
+    top: 0;
+    background: #00FF00;      /* Bright Green */
+    color: #D32F2F;           /* Deep Red */
+    font-weight: 800;
+    text-align: left;
+    padding: 12px;
+    border-bottom: 1px solid #e5e7eb;
+    cursor: pointer;
+    user-select: none;
+    white-space: nowrap;
+  }
+
+  thead th .sort-ind {
+    font-size: 12px;
+    margin-left: 6px;
+    opacity: 0.8;
+  }
+
+  tbody td {
+    padding: 10px 12px;
+    border-bottom: 1px solid #f0f2f5;
+    text-align: left;
+    vertical-align: middle;
+  }
+
+  tbody tr:hover {
+    filter: brightness(0.98);
+  }
+
+  .num {
+    text-align: center;
+    font-variant-numeric: tabular-nums;
+  }
+
+  .small {
+    font-size: 12px;
+    color: #6b7280;
+  }
+  .hp-inner-view {
+  display: none;
+}
+
+.hp-inner-view.active {
+  display: block;
+}
+
+
+  /* Percentile band row colors (pastels) */
+  .band-top { background: #C8E6C9; }     /* soft green */
+  .band-2   { background: #BBDEFB; }     /* soft blue  */
+  .band-3   { background: #FFF9C4; }     /* soft yellow*/
+  .band-4   { background: #FFE0B2; }     /* soft orange*/
+  .band-bot { background: #FFCDD2; }     /* soft red   */
+
+  /* Placeholder */
+  .placeholder {
+    padding: 60px;
+    text-align: center;
+    color: #555;
+  }
+
+  /* Tickets bars */
+  .ticket-bars {
+    display: flex;
+    align-items: flex-end;
+    justify-content: center;
+    gap: 28px;
+    height: 220px;
+    margin-top: 20px;
+  }
+
+  .bar {
+    width: 70px;
+    border-radius: 16px 16px 10px 10px;
+    display: flex;
+    align-items: flex-end;
+    justify-content: center;
+    padding-bottom: 10px;
+    font-weight: 800;
+    color: #1f2937;
+    box-shadow: 0 8px 18px rgba(0,0,0,0.10);
+  }
+
+  .gold   { height: 200px; background: #FFD54F; }
+  .silver { height: 150px; background: #CFD8DC; }
+  .bronze { height: 110px; background: #D7A86E; }
+
+  .soon {
+    margin-top: 18px;
+    font-weight: 700;
+    color: #6b7280;
+  }
+
+  .top-bar {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding: 16px 20px 0 20px;
+}
+
+/* Back button */
+.back-btn {
+  background: #e8eaf6;
+  color: #1a237e;
+  border: none;
+  padding: 10px 14px;
+  border-radius: 8px;
+  font-weight: 600;
+  cursor: pointer;
+  white-space: nowrap;
+}
+
+.back-btn:hover {
+  background: #dfe2fd;
+}
+
+/* Tabs stay centered */
+.tabs {
+  display: flex;
+  justify-content: center;
+  gap: 12px;
+  flex: 1;               /* THIS IS THE KEY */
+  flex-wrap: wrap;
+}
+
+/* Right spacer (keeps tabs centered) */
+.top-bar-spacer {
+  width: 80px;           /* same visual weight as back button */
+}
+
+/* Ticket chip shared base */
+.ticket-chip {
+  border-radius: 12px;
+  padding: 12px 28px;
+  font-weight: 700;
+  font-size: 15px;
+  text-align: center;
+  cursor: default;
+}
+
+/* Gold chip */
+.ticket-chip-gold {
+  background: linear-gradient(135deg, #fff9e6, #fff3cd);
+  border: 2.5px solid #e6ac00;
+  outline: 3px solid #FFD54F;
+  outline-offset: 3px;
+  color: #5a3e00;
+  box-shadow: 0 4px 14px rgba(230,172,0,0.35);
+}
+
+/* Silver chip */
+.ticket-chip-silver {
+  background: linear-gradient(135deg, #f9fafb, #eceff1);
+  border: 2.5px solid #78909c;
+  outline: 3px solid #B0BEC5;
+  outline-offset: 3px;
+  color: #263238;
+  box-shadow: 0 4px 14px rgba(120,144,156,0.3);
+}
+
+/* Ticket row */
+.ticket-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16px;
+  justify-content: center;
+  margin-bottom: 16px;
+}
+.ticket-row:last-child {
+  margin-bottom: 0;
+}
+
+</style>
+</head>
+
+<body>
+
+<div class="header">
+  <h1>Vinternship Dashboard Euclideans</h1>
+  <p>Live Performance & Progress Overview</p>
+</div>
+
+<!-- Top Tabs -->
+<div class="top-bar">
+  <button class="back-btn" onclick="history.back()">← Back</button>
+
+  <div class="tabs">
+    <div class="tab active" data-tab="leaderboard">Leaderboard</div>
+    <div class="tab" data-tab="cs">CS Progress</div>
+    <div class="tab" data-tab="health">Health Points</div>
+    <div class="tab" data-tab="me">My Dashboard</div>
+    <div class="tab" data-tab="tickets">Tickets</div>
+    <div class="tab" data-tab="endorsements">Endorsements</div>
+    
+  </div>
+
+  <div class="top-bar-spacer"></div>
+</div>
+
+
+
+<!-- Leaderboard Tab -->
+<div class="tab-content active" id="tab-leaderboard">
+  <div class="dashboard-inner">
+    <div class="dashboard-menu">
+      <div class="menu-item active" data-inner="state">State-wise</div>
+      <div class="menu-item" data-inner="institute">Institute-wise</div>
+      <div class="menu-item" data-inner="cohort">Cohort-wise</div>
+    </div>
+
+    <div class="dashboard-view">
+      <div class="status-row">
+        <div class="pill" id="lb-pill">Loading…</div>
+        <div class="search">
+          <input id="lb-search" placeholder="Search…" />
+          <span class="muted" id="lb-meta"></span>
+        </div>
+      </div>
+
+      <div class="table-wrap">
+        <table id="lb-table">
+          <thead></thead>
+          <tbody></tbody>
+        </table>
+      </div>
+
+      <div class="small" style="margin-top:10px;">
+        Tip: Click any column header to sort.
+      </div>
+    </div>
+  </div>
+</div>
+
+<!-- CS Progress Tab -->
+<div class="tab-content" id="tab-cs">
+  <div class="dashboard-inner">
+    <div class="dashboard-view" style="width:100%;">
+
+      <div class="status-row">
+        <div class="pill">CS PROGRESS</div>
+
+        <div class="search">
+          <input id="cs-search" placeholder="Search by name or email…" />
+        </div>
+      </div>
+
+      <div style="margin-bottom:14px;">
+        <a href="https://forms.gle/9brRWW5kAbv2kaH98" target="_blank"
+           style="
+             display:inline-block;
+             padding:10px 16px;
+             background:#1a237e;
+             color:white;
+             border-radius:8px;
+             font-weight:600;
+             text-decoration:none;
+           ">
+          Submit your Case Studies here
+        </a>
+      </div>
+
+      <div class="table-wrap">
+        <table id="cs-table">
+          <thead></thead>
+          <tbody></tbody>
+        </table>
+      </div>
+
+    </div>
+  </div>
+</div>
+
+
+<!-- Health Points Tab -->
+<div class="tab-content" id="tab-health">
+  <div class="dashboard-inner">
+
+    <!-- LEFT MENU -->
+    <div class="dashboard-menu">
+      <div class="menu-item active" data-hp-inner="dashboard">HP Dashboard</div>
+      <div class="menu-item" data-hp-inner="individual">Individual HP</div>
+      <div class="menu-item" data-hp-inner="reasons">Add / Delete Reasons</div>
+      <div class="menu-item" data-hp-inner="attendance">Attendance</div>
+    </div>
+
+    <!-- RIGHT VIEW -->
+    <div class="dashboard-view" id="hp-view">
+
+      <!-- HP DASHBOARD (default) -->
+      <div class="hp-inner-view active" id="hp-dashboard-view">
+        <div class="status-row">
+          <div class="pill">Health Points Leaderboard</div>
+          <div class="search">
+            <input id="hp-search" placeholder="Search name or email…" />
+            <span class="muted" id="hp-meta"></span>
+          </div>
+        </div>
+
+        <div class="table-wrap">
+          <table id="hp-table">
+            <thead></thead>
+            <tbody></tbody>
+          </table>
+        </div>
+      </div>
+
+      <!-- INDIVIDUAL HP -->
+      <div class="hp-inner-view" id="hp-individual-view">
+        <iframe src="https://docs.google.com/spreadsheets/d/e/2PACX-1vQcZjQcLbb54CiTt9G2e_tWL93gPcwsdBCMOxUeKrXpIOSiM5z05oVkOVa6EuswyvVdpA_LFxxUIG9Q/pubhtml?gid=713252598&amp;single=true&amp;widget=true&amp;headers=false"
+          style="width:100%; height:80vh; border:none; border-radius:12px;">
+        </iframe>
+      </div>
+
+      <!-- ADD / DELETE REASONS -->
+      <div class="hp-inner-view" id="hp-reasons-view">
+       <iframe src="https://docs.google.com/spreadsheets/d/e/2PACX-1vQcZjQcLbb54CiTt9G2e_tWL93gPcwsdBCMOxUeKrXpIOSiM5z05oVkOVa6EuswyvVdpA_LFxxUIG9Q/pubhtml?gid=1449701238&amp;single=true&amp;widget=true&amp;headers=false"
+          style="width:100%; height:80vh; border:none; border-radius:12px;">
+        </iframe>
+      </div>
+    <!-- Attendance -->
+      <div class="hp-inner-view" id="hp-attendance-view">
+       <iframe src="https://docs.google.com/spreadsheets/d/e/2PACX-1vQqWa5RlbOQAwLlOj97MYBTZh8uBxRN1kR21k96LvrHyiiR7wcnvbI-BCh8nOixqQ3CBIziZcsj0dWP/pubhtml?gid=0&amp;single=true&amp;widget=true&amp;headers=false"
+          style="width:100%; height:80vh; border:none; border-radius:12px;">
+        </iframe>
+      </div>
+    </div>
+  </div>
+</div>
+<!-- My Dashboard Tab -->
+<div class="tab-content" id="tab-me">
+
+  <div class="dashboard-inner">
+    <div class="dashboard-view" style="width:100%;">
+
+      <h2 style="color:#1a237e;margin-bottom:12px;">My Dashboard</h2>
+
+      <!-- EMAIL INPUT -->
+      <div style="margin-bottom:16px;">
+        <input
+          id="emailInput"
+          type="email"
+          placeholder="Enter your registered email"
+          style="
+            padding:10px 12px;
+            width:260px;
+            border-radius:8px;
+            border:1px solid #d1d5db;
+            margin-right:8px;
+          "
+        />
+        <button
+          onclick="setEmail()"
+          style="
+            padding:10px 14px;
+            border-radius:8px;
+            border:none;
+            background:#1a237e;
+            color:white;
+            font-weight:600;
+            cursor:pointer;
+          "
+        >
+          Load My Dashboard
+        </button>
+
+      </div>
+
+      <!-- RESULT CARDS -->
+
+       <div class="status-row">
+       <div class="pill">Rank: <span id="my-rank">–</span></div>
+       <div class="pill">CS: <span id="my-cs">–</span>%</div>
+       <div class="pill">Vibe: <span id="my-vibe">–</span>%</div>
+       <div class="pill">HP: <span id="my-hp">–</span></div>
+       <div class="pill">Overall: <span id="my-overall">–</span>%</div>
+       </div>
+
+       <div id="my-next-deadline"
+        class="pill"
+        style="margin:16px 0; font-weight:700;">
+       </div>
+
+
+        <!-- VIBE DETAILS -->
+        <h3 style="margin-top:24px;color:#1a237e;">Vibe Milestones</h3>
+        <div id="my-vibe-section" style="display:flex;flex-wrap:wrap;gap:10px;"></div>
+
+        <!-- CS DETAILS -->
+         <h3 style="margin-top:24px;color:#1a237e;">Case Study Milestones</h3>
+         <div id="my-cs-section" style="display:flex;flex-wrap:wrap;gap:10px;"></div>
+         <button
+           id="view-my-cs"
+           style="
+              margin-top:12px;
+              padding:10px 14px;
+              border-radius:8px;
+              border:none;
+              background:#1a237e;
+              color:white;
+              font-weight:600;
+              cursor:pointer;
+            "
+          >
+             View my CS details →
+          </button>
+
+
+        <!-- HP DAILY TREND -->
+         <h3 style="margin-top:24px;color:#1a237e;">HP Status</h3>
+         <div id="my-hp-status" class="pill" style="margin-bottom:12px;"></div>
+
+        <div id="my-hp-action"
+          style="
+            margin-top:10px;
+            padding:12px 16px;
+            border-radius:10px;
+            font-size:14px;
+            display:none;
+            ">
+        </div>
+    </div>
+  </div>
+</div>
+
+<!-- Tickets Tab -->
+<div class="tab-content" id="tab-tickets">
+  <div class="dashboard-inner">
+    <div class="dashboard-view" style="width:100%;">
+      <h2 style="color:#1a237e; margin-bottom:24px;">🎟️ Ticket Holders</h2>
+
+      <!-- Gold Ticket -->
+      <div style="
+        background: linear-gradient(135deg, #fffde7, #fff8e1);
+        border: 2px solid #FFD54F;
+        border-radius: 16px;
+        padding: 24px 28px;
+        margin-bottom: 28px;
+        box-shadow: 0 4px 16px rgba(255,213,79,0.25);
+      ">
+        <div style="display:flex; align-items:center; gap:10px; margin-bottom:16px;">
+          <span style="font-size:28px;">🥇</span>
+          <h3 style="margin:0; color:#b8860b; font-size:20px; letter-spacing:0.5px;">Gold Ticket Holders</h3>
+          <span style="
+            margin-left:auto;
+            background:#FFD54F;
+            color:#5a3e00;
+            font-weight:700;
+            padding:4px 12px;
+            border-radius:999px;
+            font-size:13px;
+          ">3 holders</span>
+        </div>
+        <div class="ticket-row">
+          <div class="ticket-chip ticket-chip-gold">🏅 Kartik Jain</div>
+          <div class="ticket-chip ticket-chip-gold">🏅 Komalpreet Kaur</div>
+          <div class="ticket-chip ticket-chip-gold">🏅 Mahi Sinha</div>
+        </div>
+      </div>
+
+      <!-- Silver Ticket -->
+      <div style="
+        background: linear-gradient(135deg, #f5f5f5, #eceff1);
+        border: 2px solid #B0BEC5;
+        border-radius: 16px;
+        padding: 24px 28px;
+        box-shadow: 0 4px 16px rgba(176,190,197,0.25);
+      ">
+        <div style="display:flex; align-items:center; gap:10px; margin-bottom:16px;">
+          <span style="font-size:28px;">🥈</span>
+          <h3 style="margin:0; color:#455a64; font-size:20px; letter-spacing:0.5px;">Silver Ticket Holders</h3>
+          <span style="
+            margin-left:auto;
+            background:#CFD8DC;
+            color:#263238;
+            font-weight:700;
+            padding:4px 12px;
+            border-radius:999px;
+            font-size:13px;
+          ">32 holders</span>
+        </div>
+        <!-- Row 1: 7 -->
+        <div class="ticket-row">
+          <div class="ticket-chip ticket-chip-silver">Aakash Tiwari</div>
+          <div class="ticket-chip ticket-chip-silver">Sahil Yadav</div>
+          <div class="ticket-chip ticket-chip-silver">Neel Dasai</div>
+          <div class="ticket-chip ticket-chip-silver">Shivam Singh</div>
+          <div class="ticket-chip ticket-chip-silver">D Hari Vallabha</div>
+          <div class="ticket-chip ticket-chip-silver">Gangadi Kondaswamy</div>
+          <div class="ticket-chip ticket-chip-silver">Lohith Burra</div>
+          
+        </div>
+        <!-- Row 2: 6 -->
+        <div class="ticket-row">
+          <div class="ticket-chip ticket-chip-silver">Vidhi Patel</div>
+          <div class="ticket-chip ticket-chip-silver">Pavan Malji</div>
+          <div class="ticket-chip ticket-chip-silver">Ayush Mishra</div>
+          <div class="ticket-chip ticket-chip-silver">Faqrudeen Faizan Z</div>
+          <div class="ticket-chip ticket-chip-silver">Aryan Dutta</div>
+          <div class="ticket-chip ticket-chip-silver">Harsh Priyadarshi</div>
+          
+        </div>
+        <!-- Row 3: 6 -->
+        <div class="ticket-row">
+          <div class="ticket-chip ticket-chip-silver">Shuchithaa Krishna Mohite</div>
+          <div class="ticket-chip ticket-chip-silver">Gows Maithine</div>
+          <div class="ticket-chip ticket-chip-silver">Shaik rehan ur Rahman</div>
+          <div class="ticket-chip ticket-chip-silver">Somnath Sengupta</div>
+          <div class="ticket-chip ticket-chip-silver">Ashish Kumar Gupta</div>
+          <div class="ticket-chip ticket-chip-silver">M. PrabhuDas</div>
+          
+        </div>
+        <!-- Row 4: 6 -->
+        <div class="ticket-row">
+          <div class="ticket-chip ticket-chip-silver">Tanu Mourya</div>
+          <div class="ticket-chip ticket-chip-silver">Sai Nirvignaa</div>
+          <div class="ticket-chip ticket-chip-silver">Rohit Singh</div>
+          <div class="ticket-chip ticket-chip-silver">Zoya Khan</div>
+          <div class="ticket-chip ticket-chip-silver">Sugandham Sudheer</div>
+          <div class="ticket-chip ticket-chip-silver">Saksham Sharma</div>
+          <div class="ticket-chip ticket-chip-silver">Abdul Yunus</div>
+        </div>
+        <!-- Row 5: 6 -->
+        <div class="ticket-row">
+          <div class="ticket-chip ticket-chip-silver">Vikas Sharma</div>
+          <div class="ticket-chip ticket-chip-silver">Sarikonda Sree Vaishnavi</div>
+          <div class="ticket-chip ticket-chip-silver">Patel Nency Dasharathbhai</div>
+          <div class="ticket-chip ticket-chip-silver">SUWETHA V</div>
+          <div class="ticket-chip ticket-chip-silver">Deepak Akuthota</div>
+          <div class="ticket-chip ticket-chip-silver">Suchismita Sahoo</div>
+          
+        </div>
+
+      </div>
+
+    </div>
+  </div>
+</div>
+
+<!-- Endorsements Tab -->
+<div class="tab-content" id="tab-endorsements">
+  <div class="dashboard-inner">
+    <div class="dashboard-view" style="width:100%; padding:0;">
+      <iframe src="Euclidean_Endorse.html"
+        title="Euclidean Endorsements"
+        style="width:100%; height:88vh; border:none; border-radius:12px;">
+      </iframe>
+    </div>
+  </div>
+</div>
+
+<script>
+  // ========= CONFIG =========
+  const API_URL = "https://script.google.com/macros/s/AKfycbyU2YIGp55fzmJvhLP_DdNUTUCd6DbMHQUeayuFCL6xioWm7R0YB2L0KRftupQzGYR9Xw/exec";
+  const HP_API_URL = "https://script.google.com/macros/s/AKfycbwq_M-IDZlZUlDMJ7gXuhLhNq304qdCLs60plmJ90TtVtLtnZURKPxnrRVeS3kwLzZ2Hg/exec";
+  // We expect the API JSON to include these keys:
+  // {
+  //   state: [...],
+  //   institute: [...],
+  //   dashboard: [...]
+  // }
+  const DATA_KEYS = {
+    state: "state",
+    institute: "institute",
+    cohort: "dashboard" // cohort-wise uses Dashboard sheet
+  };
+
+  // Which column decides band coloring for each view
+  // state: Weighted Score column name
+  // institute: Weighted Score column name
+  // cohort: Rank / Overall Progress (choose one) -> we'll use Overall Progress if present else Rank
+  const BAND_METRIC = {
+    state: "Weighted Score",
+    institute: "Weighted Score",
+    cohort: "Overall Progress"
+  };
+
+  // ========= STATE =========
+  let apiData = null;
+
+  const sortState = {
+    // view => { key, dir }
+    state: { key: null, dir: "desc" },
+    institute: { key: null, dir: "desc" },
+    cohort: { key: null, dir: "asc" } // rank often asc
+  };
+
+  let currentInner = "state";
+  let currentRows = [];
+
+  // ========= HELPERS =========
+  function isNumberLike(v) {
+    if (v === null || v === undefined) return false;
+    const n = Number(v);
+    return !Number.isNaN(n) && v !== "";
+  }
+
+  function normalizeString(s) {
+    return (s ?? "").toString().toLowerCase();
+  }
+
+  function compare(a, b, dir) {
+    // numeric first if possible
+    const an = Number(a), bn = Number(b);
+    const aNum = !Number.isNaN(an) && a !== "" && a !== null && a !== undefined;
+    const bNum = !Number.isNaN(bn) && b !== "" && b !== null && b !== undefined;
+
+    let res = 0;
+    if (aNum && bNum) res = an - bn;
+    else res = normalizeString(a).localeCompare(normalizeString(b));
+
+    return dir === "asc" ? res : -res;
+  }
+
+  function computePercentileBands(rows, metricKey) {
+    // returns array of band class names in same order as rows
+    const values = rows.map(r => Number(r[metricKey]) || 0);
+    const sorted = [...values].sort((a,b) => b-a);
+    const n = sorted.length;
+
+    function percentile(v) {
+      const idx = sorted.findIndex(x => x <= v);
+      return idx === -1 ? 100 : (idx / n) * 100;
+    }
+
+    function bandClass(p) {
+      if (p <= 20) return "band-top";
+      if (p <= 40) return "band-2";
+      if (p <= 60) return "band-3";
+      if (p <= 80) return "band-4";
+      return "band-bot";
+    }
+
+    return values.map(v => bandClass(percentile(v)));
+  }
+
+  function renderTable(tableEl, rows, options) {
+    const thead = tableEl.querySelector("thead");
+    const tbody = tableEl.querySelector("tbody");
+    thead.innerHTML = "";
+    tbody.innerHTML = "";
+
+    if (!rows || rows.length === 0) {
+      thead.innerHTML = "<tr><th>No data</th></tr>";
+      tbody.innerHTML = "<tr><td class='small'>No rows returned from API.</td></tr>";
+      return;
+    }
+
+    const columns = options.columns ?? Object.keys(rows[0]);
+
+    // header row
+    const trh = document.createElement("tr");
+    columns.forEach(col => {
+      const th = document.createElement("th");
+      th.textContent = col;
+
+      const ind = document.createElement("span");
+      ind.className = "sort-ind";
+      ind.textContent = "";
+      th.appendChild(ind);
+
+      th.addEventListener("click", () => {
+        // toggle sort
+        const st = sortState[currentInner];
+        if (st.key === col) st.dir = (st.dir === "asc") ? "desc" : "asc";
+        else { st.key = col; st.dir = "asc"; }
+
+        // apply sorting + rerender
+        const sortedRows = [...currentRows].sort((a, b) => compare(a[col], b[col], st.dir));
+        currentRows = sortedRows;
+        renderLeaderboardView(currentInner); // rerender keeps band coloring in sync
+      });
+
+      trh.appendChild(th);
+    });
+    thead.appendChild(trh);
+
+    // band coloring
+    const metricKey = options.bandMetricKey;
+    const bandClasses = metricKey ? computePercentileBands(rows, metricKey) : rows.map(() => "");
+
+    // body rows
+    rows.forEach((r, i) => {
+      const tr = document.createElement("tr");
+      if (bandClasses[i]) tr.className = bandClasses[i];
+
+      columns.forEach(col => {
+        const td = document.createElement("td");
+        const val = r[col];
+
+        // numeric alignment
+        if (isNumberLike(val)) td.classList.add("num");
+
+        // format floats to 2 decimals (for progress/weighted etc.)
+        if (isNumberLike(val) && (col.toLowerCase().includes("progress") || col.toLowerCase().includes("weighted"))) {
+          td.textContent = Number(val).toFixed(2);
+        } else {
+          td.textContent = (val ?? "").toString();
+        }
+
+        tr.appendChild(td);
+      });
+
+      tbody.appendChild(tr);
+    });
+
+    // update sort indicators
+    const st = sortState[currentInner];
+    [...thead.querySelectorAll("th")].forEach(th => {
+      const col = th.childNodes[0]?.nodeValue?.trim() ?? th.textContent.trim();
+      const ind = th.querySelector(".sort-ind");
+      if (!ind) return;
+      if (st.key === col) ind.textContent = st.dir === "asc" ? "▲" : "▼";
+      else ind.textContent = "";
+    });
+  }
+
+  function applySearch(rows, query) {
+    if (!query) return rows;
+    const q = normalizeString(query);
+    return rows.filter(obj => JSON.stringify(obj).toLowerCase().includes(q));
+  }
+
+  // ========= LEADERBOARD RENDERING =========
+  function getDefaultBandMetric(inner, sampleRow) {
+    if (inner === "cohort") {
+      // Cohort-wise = Dashboard. Prefer Overall Progress; else Vibe Progress; else Rank
+      if (sampleRow && "Overall Progress" in sampleRow) return "Overall Progress";
+      if (sampleRow && "Vibe Progress" in sampleRow) return "Vibe Progress";
+      return "Rank";
+    }
+    return BAND_METRIC[inner];
+  }
+
+  function renderLeaderboardView(innerKey) {
+    currentInner = innerKey;
+
+    const pill = document.getElementById("lb-pill");
+    const meta = document.getElementById("lb-meta");
+    const search = document.getElementById("lb-search");
+    const table = document.getElementById("lb-table");
+
+    const dataKey = DATA_KEYS[innerKey];
+    let rows = (apiData && apiData[dataKey]) ? apiData[dataKey] : [];
+
+    // Apply search
+    rows = applySearch(rows, search.value);
+
+    // Determine columns and band metric
+    const sample = rows[0];
+
+    let columns;
+    if (innerKey === "state") {
+      columns = ["State / UT", "Student Count", "Average Vibe Progress", "In Top 50", "Weighted Score"];
+      // fallback if keys differ slightly
+      columns = columns.filter(c => sample && (c in sample));
+      if (columns.length === 0 && sample) columns = Object.keys(sample);
+    } else if (innerKey === "institute") {
+      columns = ["Institute Name", "Student Count", "Average Vibe Progress", "Not Yet Started", "In Top 50", "Weighted Score"];
+      columns = columns.filter(c => sample && (c in sample));
+      if (columns.length === 0 && sample) columns = Object.keys(sample);
+    } else {
+      // cohort-wise from Dashboard
+      columns = ["Rank", "Name", "Email", "Case Study Progress", "Vibe Progress", "Health Points" , "Overall Progress"];
+      columns = columns.filter(c => sample && (c in sample));
+      if (columns.length === 0 && sample) columns = Object.keys(sample);
+    }
+
+    // Default sort if none chosen yet
+    const st = sortState[innerKey];
+    if (!st.key) {
+      if (innerKey === "state" || innerKey === "institute") {
+        st.key = "Weighted Score";
+        st.dir = "desc";
+      } else {
+        st.key = "Rank";
+        st.dir = "asc";
+      }
+    }
+
+    // Sort rows
+    rows = [...rows].sort((a, b) => compare(a[st.key], b[st.key], st.dir));
+
+    // Keep global reference for re-render
+    currentRows = rows;
+
+    const bandMetric = getDefaultBandMetric(innerKey, sample);
+
+    pill.textContent = `${innerKey.toUpperCase()} VIEW`;
+    meta.textContent = `Rows: ${rows.length}${apiData?.lastUpdated ? " • Updated: " + new Date(apiData.lastUpdated).toLocaleString() : ""}`;
+
+    renderTable(table, rows, { columns, bandMetricKey: bandMetric });
+  }
+function renderCSProgress() {
+  const table = document.getElementById("cs-table");
+  if (!table || !apiData || !apiData.csProgress) return;
+
+  const thead = table.querySelector("thead");
+  const tbody = table.querySelector("tbody");
+  const searchInput = document.getElementById("cs-search");
+
+  /**
+   * IMPORTANT:
+   * Row 1 → mapping (ignore)
+   * Row 2 → header
+   * Data starts from Row 3
+   *
+   * sheetToJSON already converted rows,
+   * so we SKIP the FIRST OBJECT only.
+   */
+  const rawRows = apiData.csProgress.slice(1); // 🔴 skip mapping row
+
+  if (!rawRows.length) return;
+
+  const columns = Object.keys(rawRows[0]);
+
+  // ---------- RENDER HEADER ----------
+  thead.innerHTML = "";
+  const trh = document.createElement("tr");
+  columns.forEach(col => {
+    const th = document.createElement("th");
+    th.textContent = col;
+    trh.appendChild(th);
+  });
+  thead.appendChild(trh);
+
+  // ---------- RENDER BODY ----------
+  function draw(rows) {
+    tbody.innerHTML = "";
+
+    rows.forEach(r => {
+      const tr = document.createElement("tr");
+
+      columns.forEach(col => {
+        const td = document.createElement("td");
+        const val = r[col];
+
+        if (val === "Yes") {
+          td.textContent = "✓";
+          td.style.color = "#1B5E20";
+          td.style.fontWeight = "700";
+          td.style.textAlign = "center";
+        } else if (val === "" || val === null || val === undefined) {
+          td.textContent = "–";
+          td.style.color = "#9E9E9E";
+          td.style.textAlign = "center";
+        } else {
+          td.textContent = val;
+        }
+
+        tr.appendChild(td);
+      });
+
+      tbody.appendChild(tr);
+    });
+  }
+
+  // Initial render
+  draw(rawRows);
+
+  // ---------- SEARCH ----------
+  if (searchInput) {
+    searchInput.addEventListener("input", () => {
+      const q = searchInput.value.toLowerCase();
+      const filtered = rawRows.filter(r =>
+        (r.Name || "").toLowerCase().includes(q) ||
+        (r.Email || "").toLowerCase().includes(q)
+      );
+      draw(filtered);
+    });
+  }
+}
+
+  // ========= API =========
+  async function loadAPI() {
+    const pill = document.getElementById("lb-pill");
+    const meta = document.getElementById("lb-meta");
+    pill.textContent = "Loading data…";
+    meta.textContent = "";
+
+    try {
+      const res = await fetch(API_URL, { cache: "no-store" });
+      if (!res.ok) throw new Error(`API error: ${res.status}`);
+      apiData = await res.json();
+
+      // Basic validation
+      if (!apiData || typeof apiData !== "object") throw new Error("Invalid JSON");
+
+      // Render initial view
+      renderLeaderboardView("state");
+      pill.textContent = "STATE-WISE";
+    } catch (err) {
+      pill.textContent = "Failed to load";
+      meta.textContent = (err && err.message) ? err.message : "Unknown error";
+      console.error(err);
+    }
+  }
+ // ========= HEALTH POINTS =========
+  let hpData = null;
+
+  async function loadHealthPoints() {
+    const meta = document.getElementById("hp-meta");
+    meta.textContent = "Loading…";
+
+    try {
+      const res = await fetch(HP_API_URL, { cache: "no-store" });
+      hpData = await res.json();
+      renderHealthPoints();
+    } catch (e) {
+      meta.textContent = "Failed to load";
+      console.error(e);
+    }
+  }
+
+ function renderHealthPoints() {
+  if (!hpData || !hpData.leaderboard) return;
+
+  const rows = hpData.leaderboard;
+  const search = document.getElementById("hp-search");
+  const meta = document.getElementById("hp-meta");
+  const table = document.getElementById("hp-table");
+
+  let filtered = rows;
+  if (search.value) {
+    const q = search.value.toLowerCase();
+    filtered = rows.filter(r =>
+      r.name.toLowerCase().includes(q) ||
+      r.email.toLowerCase().includes(q)
+    );
+  }
+
+  meta.textContent = `Students: ${filtered.length}`;
+
+  const thead = table.querySelector("thead");
+  const tbody = table.querySelector("tbody");
+  thead.innerHTML = "";
+  tbody.innerHTML = "";
+
+  const columns = ["Rank", "Name", "Email", "Current HP", "Base HP", "HP Status"];
+
+  // ✅ HEADER
+  const trh = document.createElement("tr");
+  columns.forEach(c => {
+    const th = document.createElement("th");
+    th.textContent = c;
+    trh.appendChild(th);
+  });
+  thead.appendChild(trh);
+
+  // ✅ BODY
+  filtered.forEach(r => {
+    const tr = document.createElement("tr");
+   tr.innerHTML = `
+  <td class="num">${r.rank}</td>
+  <td>${r.name}</td>
+  <td>${r.email}</td>
+  <td class="num">${Number(r.currentHP).toFixed(2)}</td>
+  <td class="num">${Number(r.baseHP).toFixed(2)}</td>
+  <td>
+    <span style="
+      padding:4px 10px;
+      border-radius:999px;
+      font-weight:700;
+      font-size:12px;
+      color:${r.status === "SAFE" ? "#1B5E20" : "#B71C1C"};
+      background:${r.status === "SAFE" ? "#C8E6C9" : "#FFCDD2"};
+    ">
+      ${r.status}
+    </span>
+  </td>
+`;
+ tbody.appendChild(tr);
+  });
+} // ✅ FUNCTION CLOSED
+
+  // ========= UI WIRING =========
+  function activateTopTab(key) {
+  document.querySelectorAll(".tab").forEach(t => t.classList.remove("active"));
+  document.querySelectorAll(".tab-content").forEach(c => c.classList.remove("active"));
+
+  document.querySelector(`.tab[data-tab="${key}"]`).classList.add("active");
+  document.getElementById(`tab-${key}`).classList.add("active");
+
+  if (key === "cs") renderCSProgress();
+  if (key === "health" && !hpData) loadHealthPoints(); // 👈 ONLY LOAD ON DEMAND
+}
+
+  function activateInner(key) {
+    // left menu active state
+    document.querySelectorAll("#tab-leaderboard .menu-item").forEach(m => m.classList.remove("active"));
+    document.querySelector(`#tab-leaderboard .menu-item[data-inner="${key}"]`).classList.add("active");
+
+    // render view
+    renderLeaderboardView(key);
+  }
+// ========= HEALTH POINTS INNER TABS =========
+function activateHPInner(key) {
+  // menu active state
+  document.querySelectorAll('#tab-health .menu-item')
+    .forEach(m => m.classList.remove('active'));
+
+  document.querySelector(`#tab-health .menu-item[data-hp-inner="${key}"]`)
+    .classList.add('active');
+
+  // views
+  document.querySelectorAll('.hp-inner-view')
+    .forEach(v => v.classList.remove('active'));
+
+  if (key === 'dashboard') {
+    document.getElementById('hp-dashboard-view').classList.add('active');
+    if (!hpData) loadHealthPoints();
+  }
+
+  if (key === 'individual') {
+    document.getElementById('hp-individual-view').classList.add('active');
+  }
+
+  if (key === 'reasons') {
+    document.getElementById('hp-reasons-view').classList.add('active');
+  }
+
+   if (key === 'attendance') {
+    document.getElementById('hp-attendance-view').classList.add('active');
+  }
+}
+
+// left menu click binding
+document.querySelectorAll('#tab-health .menu-item').forEach(item => {
+  item.addEventListener('click', () => {
+    activateHPInner(item.dataset.hpInner);
+  });
+});
+
+  // Top tabs
+  document.querySelectorAll(".tab").forEach(tab => {
+    tab.addEventListener("click", () => activateTopTab(tab.dataset.tab));
+  });
+
+  // Left tabs (Leaderboard)
+  document.querySelectorAll("#tab-leaderboard .menu-item").forEach(item => {
+    item.addEventListener("click", () => activateInner(item.dataset.inner));
+  });
+
+  // Search
+  document.getElementById("lb-search").addEventListener("input", () => {
+    renderLeaderboardView(currentInner);
+  });
+
+  // Boot
+  loadAPI();
+
+  const VIBE_MILESTONES = [
+  { label: "Vibe Phase 1", required: 25, deadline: "2026-01-22" },
+  { label: "Vibe Phase 2", required: 50, deadline: "2026-01-29" },
+  { label: "Vibe Phase 3", required: 75, deadline: "2026-02-05" },
+  { label: "Vibe Phase 4", required: 100, deadline: "2026-02-12" }
+];
+
+// ========= DAILY VIBE RULE =========
+const VIBE_START_DATE = new Date("2026-01-14"); // first day of vibe
+const DAILY_VIBE_REQUIRED = 3.33; 
+
+const CS_MILESTONES = [
+  { label: "CS Week 1", cumulative: 6,  deadline: "2026-02-12" },
+  { label: "CS Week 2", cumulative: 18, deadline: "2026-02-19" },
+  { label: "CS Week 3", cumulative: 30, deadline: "2026-02-26" },
+  { label: "CS Week 4", cumulative: 42, deadline: "2026-03-05" }
+];
+
+function setEmail() {
+  const email = document.getElementById("emailInput").value.trim();
+
+  if (!email) {
+    alert("Please enter your email");
+    return;
+  }
+
+  localStorage.setItem("userEmail", email);
+  renderMyDashboard();
+}
+
+function getMyData() {
+  const email = localStorage.getItem("userEmail");
+  if (!email || !apiData || !apiData.dashboard) return null;
+
+  return apiData.dashboard.find(
+    r => r.Email && r.Email.toLowerCase() === email.toLowerCase()
+  );
+}
+
+function renderMyDashboard() {
+  const me = getMyData();
+
+  if (!me) {
+    document.getElementById("my-rank").textContent = "Not found";
+    return;
+  }
+
+  document.getElementById("my-rank").textContent = me.Rank;
+  document.getElementById("my-cs").textContent = me["Case Study Progress"];
+  document.getElementById("my-vibe").textContent = me["Vibe Progress"];
+  document.getElementById("my-hp").textContent = me["Health Points"];
+  document.getElementById("my-overall").textContent = me["Overall Progress"];
+
+  console.log("Rendering vibe milestones");
+  renderMyVibe();
+  renderMyCS();
+  renderMyHPStatus();
+  renderNextDeadline();
+}
+
+function getMyVibeProgress() {
+  const email = localStorage.getItem("userEmail");
+  if (!email || !apiData || !apiData.dashboard) return 0;
+
+  const row = apiData.dashboard.find(
+    r => r.Email && r.Email.toLowerCase() === email.toLowerCase()
+  );
+
+  return row ? Number(row["Vibe Progress"]) : 0;
+}
+
+function getExpectedVibeProgressToday() {
+  const today = new Date();
+  const daysPassed = Math.floor(
+    (today - VIBE_START_DATE) / (1000 * 60 * 60 * 24)
+  );
+
+  if (daysPassed <= 0) return 0;
+
+  return Math.min(100, daysPassed * DAILY_VIBE_REQUIRED);
+}
+
+function getDailyVibeCheck() {
+  const actual = getMyVibeProgress();
+  const expected = getExpectedVibeProgressToday();
+
+  if (actual >= expected) {
+    return {
+      onTrack: true,
+      message: `📈 Daily Vibe: On track (${actual.toFixed(1)}% ≥ ${expected.toFixed(1)}%)`
+    };
+  }
+
+  const deficit = (expected - actual).toFixed(1);
+
+  return {
+    onTrack: false,
+    message: `⚠️ Daily Vibe lagging by ${deficit}% (Expected ${expected.toFixed(1)}%)`
+  };
+}
+
+
+function computeVibeStatus() {
+  const current = getMyVibeProgress();
+  const now = new Date();
+
+  return VIBE_MILESTONES.map(m => ({
+    ...m,
+    current,
+    completed: current >= m.required,
+    isLate: now > new Date(m.deadline) && current < m.required
+  }));
+}
+
+function renderMyVibe() {
+  const container = document.getElementById("my-vibe-section");
+  const vibeData = computeVibeStatus();
+
+  container.innerHTML = vibeData.map(v => {
+    const shown = Math.min(v.current, v.required);
+
+    let status =
+      v.completed ? "✅ Completed"
+      : v.isLate ? "❌ Missed deadline"
+      : "⚠️ In progress";
+
+    return `
+      <div class="pill">
+        ${v.label} — ${shown}% / ${v.required}%
+        &nbsp;|&nbsp; ${status}
+        &nbsp;|&nbsp; Deadline: ${v.deadline}
+      </div>
+    `;
+  }).join("");
+}
+
+function getMyCSCount() {
+  const email = localStorage.getItem("userEmail");
+  if (!email || !apiData || !apiData.csProgress) return 0;
+
+  const row = apiData.csProgress.find(
+    r => r.Email && r.Email.toLowerCase() === email.toLowerCase()
+  );
+
+  if (!row) return 0;
+
+  let count = 0;
+
+  Object.keys(row).forEach(key => {
+    if (
+      key.includes("_CS") &&
+      !key.toLowerCase().includes("progress")
+    ) {
+      const val = row[key];
+
+      if (val === "Yes" || val === "✓" || val === true) {
+        count++;
+      }
+    }
+  });
+
+  return count;
+}
+
+function computeCSStatus() {
+  const submitted = getMyCSCount(); 
+  const now = new Date();
+
+  return CS_MILESTONES.map(m => {
+    const required = Number(m.cumulative); 
+    const shown = Math.min(submitted, required);
+
+    return {
+      label: m.label,
+      submitted: shown,
+      required,
+      completed: submitted >= required,
+      isLate: now > new Date(m.deadline) && submitted < required,
+      deadline: m.deadline
+    };
+  });
+}
+
+function renderMyCS() {
+  const container = document.getElementById("my-cs-section");
+  if (!container) return;
+
+  const csData = computeCSStatus();
+
+  container.innerHTML = csData.map(cs => {
+    let status =
+      cs.completed ? "✅ Completed"
+      : cs.isLate ? "❌ Missed deadline"
+      : "⚠️ In progress";
+
+    return `
+      <div class="pill">
+        ${cs.label} — ${cs.submitted} / ${cs.required} CS
+        &nbsp;|&nbsp; ${status}
+        &nbsp;|&nbsp; Deadline: ${cs.deadline}
+      </div>
+    `;
+  }).join("");
+}
+
+function renderMyHPStatus() {
+  const statusEl = document.getElementById("my-hp-status");
+  const actionEl = document.getElementById("my-hp-action");
+
+  if (!statusEl || !actionEl || !hpData) return;
+
+  const email = localStorage.getItem("userEmail");
+  if (!email) return;
+
+  const me = hpData.leaderboard.find(
+    r => r.email && r.email.toLowerCase() === email.toLowerCase()
+  );
+
+  if (!me) return;
+
+  const isSafe = me.status === "SAFE";
+
+  // STATUS PILL
+  statusEl.innerHTML = `
+    HP STATUS: <strong>${me.status}</strong>
+    (Current: ${me.currentHP.toFixed(2)} | Base: ${me.baseHP.toFixed(2)})
+  `;
+
+  statusEl.style.background = isSafe ? "#C8E6C9" : "#FFCDD2";
+  statusEl.style.color = isSafe ? "#1B5E20" : "#B71C1C";
+
+  // ACTION GUIDANCE
+  actionEl.style.display = "block";
+
+  const vibeStatus = computeVibeStatus();
+const csStatus = computeCSStatus();
+
+// find first pending / missed items
+const pendingVibe = vibeStatus.find(v => !v.completed);
+const pendingCS = csStatus.find(c => !c.completed);
+
+let messages = [];
+// DAILY VIBE CHECK
+const dailyVibe = getDailyVibeCheck();
+messages.push(dailyVibe.message);
+
+
+if (pendingVibe) {
+  if (pendingVibe.isLate) {
+    messages.push(`❌ Missed ${pendingVibe.label} deadline`);
+  } else {
+    messages.push(`⏳ ${pendingVibe.label} in progress`);
+  }
+}
+
+if (pendingCS) {
+  if (pendingCS.isLate) {
+    messages.push(`❌ ${pendingCS.label} missed`);
+  } else {
+    messages.push(`⏳ ${pendingCS.label} incomplete (${pendingCS.submitted}/${pendingCS.required})`);
+  }
+}
+
+if (isSafe) {
+  actionEl.style.background = "#E8F5E9";
+  actionEl.style.color = "#1B5E20";
+  actionEl.innerHTML = `
+    ✅ You are SAFE.<br>
+    ${messages.length ? messages.join("<br>") : "All milestones on track."}
+  `;
+} else {
+  actionEl.style.background = "#FDECEA";
+  actionEl.style.color = "#B71C1C";
+  actionEl.innerHTML = `
+    ⚠️ You are UNSAFE. Focus areas:<br>
+    ${messages.join("<br>")}
+    <br><strong>👉 Priority:</strong> Complete the earliest pending milestone.
+  `;
+ }
+}
+
+function renderNextDeadline() {
+  const el = document.getElementById("my-next-deadline");
+  if (!el) return;
+
+  const vibe = computeVibeStatus();
+  const cs = computeCSStatus();
+
+  const pending = [...vibe, ...cs]
+    .filter(m => !m.completed)
+    .sort((a, b) => new Date(a.deadline) - new Date(b.deadline));
+
+
+  if (!pending.length) {
+    el.textContent = "No upcoming deadlines. You’re all caught up!";
+    el.style.background = "#E8F5E9";
+    el.style.color = "#1B5E20";
+    return;
+  }
+
+  const next = pending[0];
+  const daysLeft = Math.ceil(
+    (new Date(next.deadline) - new Date()) / (1000 * 60 * 60 * 24)
+  );
+
+  el.textContent = `⏰ Next Deadline: ${next.label} — ${next.deadline} (${daysLeft} days left)`;
+
+  if (daysLeft <= 0) {
+    el.style.background = "#FFCDD2";
+    el.style.color = "#B71C1C";
+  } else if (daysLeft <= 3) {
+    el.style.background = "#FFF3CD";
+    el.style.color = "#856404";
+  } else {
+    el.style.background = "#E3F2FD";
+    el.style.color = "#0D47A1";
+  }
+}
+
+document.getElementById("view-my-cs")?.addEventListener("click", () => {
+  const email = localStorage.getItem("userEmail");
+  if (!email) return;
+
+  // switch to CS tab
+  activateTopTab("cs");
+
+  // wait for CS tab to render
+  setTimeout(() => {
+    const search = document.getElementById("cs-search");
+    if (!search) return;
+
+    search.value = email;
+    search.dispatchEvent(new Event("input", { bubbles: true }));
+    search.focus();
+  }, 300);
+});
+
+</script>
+
+</body>
+</html> 

From 7f9203240a750280110d4545e768c59943baa7da Mon Sep 17 00:00:00 2001
From: Kartik Jain <koderkartik@gmail.com>
Date: Wed, 1 Apr 2026 22:14:40 +0530
Subject: [PATCH 6/6] Deleted old vlog file :wq#

---
 _vlogs/KartikJain_V_WIN25922.md | 10 ----------
 1 file changed, 10 deletions(-)
 delete mode 100644 _vlogs/KartikJain_V_WIN25922.md

diff --git a/_vlogs/KartikJain_V_WIN25922.md b/_vlogs/KartikJain_V_WIN25922.md
deleted file mode 100644
index d51c3ad1..00000000
--- a/_vlogs/KartikJain_V_WIN25922.md
+++ /dev/null
@@ -1,10 +0,0 @@
----
-title: "Building a React To-Do Application"
-author: Kartik Jain
-vinternship_id: WIN 25922
-youtube_url: "https://youtu.be/stU_Q3l6Lp8"
----
-
-## Overview
-
-In this vlog, I explain how I built a fully functional To-Do application using React...
\ No newline at end of file