From 52cca0e2f96dfdfb12e5bc3c3536242208ea685e Mon Sep 17 00:00:00 2001
From: FlashL3opard <69573060+Flashl3opard@users.noreply.github.com>
Date: Mon, 13 Apr 2026 23:47:24 +0530
Subject: [PATCH] fix: prevent stored XSS in tag cloud via inline onclick
 handler

---
 public/index.html | 492 ++++++++++++++++++++++++++--------------------
 1 file changed, 275 insertions(+), 217 deletions(-)
diff --git a/public/index.html b/public/index.html
index 2ab457f..85d2334 100644
--- a/public/index.html
+++ b/public/index.html
@@ -1,9 +1,10 @@
-<!DOCTYPE html>
+﻿<!DOCTYPE html>
 <html lang="en">
+
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Alpha One Labs – Discover Activities</title>
+  <title>Alpha One Labs ΓÇô Discover Activities</title>
   <link rel="icon" type="image/png" href="/images/logo.png" />
   <script src="https://cdn.tailwindcss.com"></script>
   <script>
@@ -18,172 +19,225 @@
     };
   </script>
   <style>
-    .hidden { display: none !important; }
-    .gradient-hero { background: linear-gradient(135deg, #4F46E5 0%, #7C3AED 50%, #2563EB 100%); }
-    .card-hover { transition: transform .2s, box-shadow .2s; }
-    .card-hover:hover { transform: translateY(-4px); box-shadow: 0 12px 30px rgba(0,0,0,.12); }
-    .badge { display: inline-block; padding: 2px 10px; border-radius: 9999px; font-size: .75rem; font-weight: 600; }
-    .tag-pill { cursor: pointer; transition: background .15s; }
-    .tag-pill.active { background: #4F46E5; color: #fff; }
+    .hidden {
+      display: none !important;
+    }
+
+    .gradient-hero {
+      background: linear-gradient(135deg, #4F46E5 0%, #7C3AED 50%, #2563EB 100%);
+    }
+
+    .card-hover {
+      transition: transform .2s, box-shadow .2s;
+    }
+
+    .card-hover:hover {
+      transform: translateY(-4px);
+      box-shadow: 0 12px 30px rgba(0, 0, 0, .12);
+    }
+
+    .badge {
+      display: inline-block;
+      padding: 2px 10px;
+      border-radius: 9999px;
+      font-size: .75rem;
+      font-weight: 600;
+    }
+
+    .tag-pill {
+      cursor: pointer;
+      transition: background .15s;
+    }
+
+    .tag-pill.active {
+      background: #4F46E5;
+      color: #fff;
+    }
+
+    .sr-only {
+      position: absolute;
+      width: 1px;
+      height: 1px;
+      padding: 0;
+      margin: -1px;
+      overflow: hidden;
+      clip: rect(0, 0, 0, 0);
+      white-space: nowrap;
+      border-width: 0;
+    }
   </style>
 </head>
+
 <body class="bg-slate-50 text-slate-800 font-sans">
 
-<!-- ── Navbar ─────────────────────────────────────────────────────────── -->
-<nav class="bg-white shadow-sm sticky top-0 z-50">
-  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between h-16">
-    <a href="/" class="flex items-center gap-2">
-      <img src="/images/logo.png" alt="Alpha One Labs" class="h-8 w-auto" />
-      <span class="font-bold text-xl text-slate-800">Alpha One Labs</span>
-    </a>
-    <div class="hidden md:flex items-center gap-6 text-sm font-medium text-slate-600">
-      <a href="/" class="text-brand hover:text-brand-dark">Activities</a>
-      <a href="/dashboard.html" class="hover:text-brand">Dashboard</a>
-      <a href="/teach.html" class="hover:text-brand">Host</a>
-    </div>
-    <div id="nav-auth" class="flex items-center gap-3"></div>
-  </div>
-</nav>
-
-<!-- ── Hero ───────────────────────────────────────────────────────────── -->
-<header class="gradient-hero text-white py-20 px-4">
-  <div class="max-w-4xl mx-auto text-center">
-    <p class="text-indigo-200 text-sm font-semibold tracking-widest uppercase mb-3">🔒 Fully Encrypted · Privacy-First</p>
-    <h1 class="text-4xl sm:text-5xl font-extrabold leading-tight mb-4">
-      Learn Together.<br/>Grow Together.
-    </h1>
-    <p class="text-indigo-100 text-lg max-w-2xl mx-auto mb-8">
-      Discover courses, meetups, workshops, and study groups — all on a platform where every piece of user data is encrypted at rest.
-    </p>
-    <div class="flex flex-col sm:flex-row gap-4 justify-center">
-      <a href="/login.html?tab=register" class="bg-white text-brand font-bold px-8 py-3 rounded-xl shadow hover:bg-indigo-50 transition">Join Free</a>
-      <a href="#activities" class="border border-white/50 text-white font-semibold px-8 py-3 rounded-xl hover:bg-white/10 transition">Browse Activities</a>
-    </div>
-  </div>
-</header>
-
-<!-- ── Stats bar ──────────────────────────────────────────────────────── -->
-<div class="bg-white border-b border-slate-100">
-  <div class="max-w-7xl mx-auto px-4 py-6 grid grid-cols-3 divide-x divide-slate-100">
-    <div class="text-center px-4">
-      <p class="text-3xl font-extrabold text-brand" id="stat-activities">—</p>
-      <p class="text-slate-500 text-sm mt-1">Activities</p>
+  <!-- ΓöÇΓöÇ Navbar ΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇ -->
+  <nav class="bg-white shadow-sm sticky top-0 z-50">
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between h-16">
+      <a href="/" class="flex items-center gap-2">
+        <img src="/images/logo.png" alt="Alpha One Labs" class="h-8 w-auto" />
+        <span class="font-bold text-xl text-slate-800">Alpha One Labs</span>
+      </a>
+      <div class="hidden md:flex items-center gap-6 text-sm font-medium text-slate-600">
+        <a href="/" class="text-brand hover:text-brand-dark">Activities</a>
+        <a href="/dashboard.html" class="hover:text-brand">Dashboard</a>
+        <a href="/teach.html" class="hover:text-brand">Host</a>
+      </div>
+      <div id="nav-auth" class="flex items-center gap-3"></div>
     </div>
-    <div class="text-center px-4">
-      <p class="text-3xl font-extrabold text-purple-600" id="stat-members">—</p>
-      <p class="text-slate-500 text-sm mt-1">Participants</p>
+  </nav>
+
+  <!-- ΓöÇΓöÇ Hero ΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇ -->
+  <header class="gradient-hero text-white py-20 px-4">
+    <div class="max-w-4xl mx-auto text-center">
+      <p class="text-indigo-200 text-sm font-semibold tracking-widest uppercase mb-3">≡ƒöÆ Fully Encrypted ┬╖
+        Privacy-First
+      </p>
+      <h1 class="text-4xl sm:text-5xl font-extrabold leading-tight mb-4">
+        Learn Together.<br />Grow Together.
+      </h1>
+      <p class="text-indigo-100 text-lg max-w-2xl mx-auto mb-8">
+        Discover courses, meetups, workshops, and study groups ΓÇö all on a platform where every piece of user data is
+        encrypted at rest.
+      </p>
+      <div class="flex flex-col sm:flex-row gap-4 justify-center">
+        <a href="/login.html?tab=register"
+          class="bg-white text-brand font-bold px-8 py-3 rounded-xl shadow hover:bg-indigo-50 transition">Join Free</a>
+        <a href="#activities"
+          class="border border-white/50 text-white font-semibold px-8 py-3 rounded-xl hover:bg-white/10 transition">Browse
+          Activities</a>
+      </div>
     </div>
-    <div class="text-center px-4">
-      <p class="text-3xl font-extrabold text-emerald-600">🔒</p>
-      <p class="text-slate-500 text-sm mt-1">Encrypted at Rest</p>
+  </header>
+
+  <!-- ΓöÇΓöÇ Stats bar ΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇ -->
+  <div class="bg-white border-b border-slate-100">
+    <div class="max-w-7xl mx-auto px-4 py-6 grid grid-cols-3 divide-x divide-slate-100">
+      <div class="text-center px-4">
+        <p class="text-3xl font-extrabold text-brand" id="stat-activities">ΓÇö</p>
+        <p class="text-slate-500 text-sm mt-1">Activities</p>
+      </div>
+      <div class="text-center px-4">
+        <p class="text-3xl font-extrabold text-purple-600" id="stat-members">ΓÇö</p>
+        <p class="text-slate-500 text-sm mt-1">Participants</p>
+      </div>
+      <div class="text-center px-4">
+        <p class="text-3xl font-extrabold text-emerald-600">≡ƒöÆ</p>
+        <p class="text-slate-500 text-sm mt-1">Encrypted at Rest</p>
+      </div>
     </div>
   </div>
-</div>
-
-<!-- ── Activity Browser ───────────────────────────────────────────────── -->
-<main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12" id="activities">
-
-  <!-- Search + Filters -->
-  <div class="flex flex-col sm:flex-row gap-3 mb-4">
-    <input id="search" type="text" placeholder="🔍  Search activities…"
-      class="flex-1 px-4 py-2.5 rounded-xl border border-slate-200 bg-white shadow-sm focus:outline-none focus:ring-2 focus:ring-brand/40 text-sm" />
-    <select id="filter-type"
-      class="px-4 py-2.5 rounded-xl border border-slate-200 bg-white shadow-sm text-sm focus:outline-none focus:ring-2 focus:ring-brand/40">
-      <option value="">All Types</option>
-      <option value="course">📚 Course</option>
-      <option value="meetup">🤝 Meetup</option>
-      <option value="workshop">🔧 Workshop</option>
-      <option value="seminar">🎤 Seminar</option>
-      <option value="other">✨ Other</option>
-    </select>
-    <select id="filter-format"
-      class="px-4 py-2.5 rounded-xl border border-slate-200 bg-white shadow-sm text-sm focus:outline-none focus:ring-2 focus:ring-brand/40">
-      <option value="">All Formats</option>
-      <option value="live">🎥 Live</option>
-      <option value="self_paced">⏱ Self-paced</option>
-      <option value="hybrid">🔀 Hybrid</option>
-    </select>
-  </div>
 
-  <!-- Tag cloud -->
-  <div id="tag-cloud" class="flex flex-wrap gap-2 mb-8"></div>
+  <!-- ΓöÇΓöÇ Activity Browser ΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇ -->
+  <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12" id="activities">
 
-  <!-- Activity grid -->
-  <div id="activity-grid" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
-    <div class="bg-white rounded-2xl shadow-sm p-6 animate-pulse h-52"></div>
-    <div class="bg-white rounded-2xl shadow-sm p-6 animate-pulse h-52"></div>
-    <div class="bg-white rounded-2xl shadow-sm p-6 animate-pulse h-52"></div>
-  </div>
+    <!-- Search + Filters -->
+    <div class="flex flex-col sm:flex-row gap-3 mb-4">
+      <label for="search" class="sr-only">Search activities</label>
+      <input id="search" type="text" placeholder="≡ƒöì  Search activitiesΓÇª"
+        class="flex-1 px-4 py-2.5 rounded-xl border border-slate-200 bg-white shadow-sm focus:outline-none focus:ring-2 focus:ring-brand/40 text-sm" />
+      <label for="filter-type" class="sr-only">Filter by type</label>
+      <select id="filter-type"
+        class="px-4 py-2.5 rounded-xl border border-slate-200 bg-white shadow-sm text-sm focus:outline-none focus:ring-2 focus:ring-brand/40">
+        <option value="">All Types</option>
+        <option value="course">≡ƒôÜ Course</option>
+        <option value="meetup">≡ƒñ¥ Meetup</option>
+        <option value="workshop">≡ƒöº Workshop</option>
+        <option value="seminar">≡ƒÄñ Seminar</option>
+        <option value="other">Γ£¿ Other</option>
+      </select>
+      <label for="filter-format" class="sr-only">Filter by format</label>
+      <select id="filter-format"
+        class="px-4 py-2.5 rounded-xl border border-slate-200 bg-white shadow-sm text-sm focus:outline-none focus:ring-2 focus:ring-brand/40">
+        <option value="">All Formats</option>
+        <option value="live">≡ƒÄÑ Live</option>
+        <option value="self_paced">ΓÅ▒ Self-paced</option>
+        <option value="hybrid">≡ƒöÇ Hybrid</option>
+      </select>
+    </div>
 
-  <p id="no-results" class="hidden text-center text-slate-400 py-16 text-lg">No activities found matching your filters.</p>
-</main>
+    <!-- Tag cloud -->
+    <div id="tag-cloud" class="flex flex-wrap gap-2 mb-8"></div>
 
-<!-- ── Features strip ─────────────────────────────────────────────────── -->
-<section class="bg-white py-16 border-t border-slate-100">
-  <div class="max-w-5xl mx-auto px-4 text-center mb-10">
-    <h2 class="text-2xl font-bold text-slate-800">Why Alpha One Labs?</h2>
-  </div>
-  <div class="max-w-5xl mx-auto px-4 grid grid-cols-1 md:grid-cols-3 gap-8">
-    <div class="text-center p-6">
-      <div class="text-4xl mb-4">🔐</div>
-      <h3 class="font-bold text-slate-700 mb-2">Zero Plaintext PII</h3>
-      <p class="text-slate-500 text-sm">Every user field — name, email, username, role — is encrypted. HMAC blind indexes enable fast lookups without ever storing plaintext.</p>
+    <!-- Activity grid -->
+    <div id="activity-grid" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
+      <div class="bg-white rounded-2xl shadow-sm p-6 animate-pulse h-52"></div>
+      <div class="bg-white rounded-2xl shadow-sm p-6 animate-pulse h-52"></div>
+      <div class="bg-white rounded-2xl shadow-sm p-6 animate-pulse h-52"></div>
     </div>
-    <div class="text-center p-6">
-      <div class="text-4xl mb-4">⚡</div>
-      <h3 class="font-bold text-slate-700 mb-2">Edge-Native</h3>
-      <p class="text-slate-500 text-sm">Runs on Cloudflare Python Workers + D1 — globally distributed, fast, and serverless.</p>
+
+    <p id="no-results" class="hidden text-center text-slate-400 py-16 text-lg">No activities found matching your
+      filters.</p>
+  </main>
+
+  <!-- ΓöÇΓöÇ Features strip ΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇ -->
+  <section class="bg-white py-16 border-t border-slate-100">
+    <div class="max-w-5xl mx-auto px-4 text-center mb-10">
+      <h2 class="text-2xl font-bold text-slate-800">Why Alpha One Labs?</h2>
     </div>
-    <div class="text-center p-6">
-      <div class="text-4xl mb-4">🗓️</div>
-      <h3 class="font-bold text-slate-700 mb-2">Flexible Activities</h3>
-      <p class="text-slate-500 text-sm">Courses, meetups, workshops — with optional scheduled sessions, attendance tracking, and flexible tags.</p>
+    <div class="max-w-5xl mx-auto px-4 grid grid-cols-1 md:grid-cols-3 gap-8">
+      <div class="text-center p-6">
+        <div class="text-4xl mb-4">≡ƒöÉ</div>
+        <h3 class="font-bold text-slate-700 mb-2">Zero Plaintext PII</h3>
+        <p class="text-slate-500 text-sm">Every user field ΓÇö name, email, username, role ΓÇö is encrypted. HMAC blind
+          indexes enable fast lookups without ever storing plaintext.</p>
+      </div>
+      <div class="text-center p-6">
+        <div class="text-4xl mb-4">ΓÜí</div>
+        <h3 class="font-bold text-slate-700 mb-2">Edge-Native</h3>
+        <p class="text-slate-500 text-sm">Runs on Cloudflare Python Workers + D1 ΓÇö globally distributed, fast, and
+          serverless.</p>
+      </div>
+      <div class="text-center p-6">
+        <div class="text-4xl mb-4">≡ƒùô∩╕Å</div>
+        <h3 class="font-bold text-slate-700 mb-2">Flexible Activities</h3>
+        <p class="text-slate-500 text-sm">Courses, meetups, workshops ΓÇö with optional scheduled sessions, attendance
+          tracking, and flexible tags.</p>
+      </div>
     </div>
-  </div>
-</section>
-
-<!-- ── Footer ─────────────────────────────────────────────────────────── -->
-<footer class="bg-slate-800 text-slate-400 py-8 text-center text-sm">
-  <p>© 2024–2026 Alpha One Labs · Cloudflare Python Workers + D1 · All user data encrypted at rest</p>
-</footer>
-
-<script>
-  const API = '';
-
-  // ── Auth nav
-  function updateNav() {
-    const token = localStorage.getItem('edu_token');
-    const user  = JSON.parse(localStorage.getItem('edu_user') || 'null');
-    const nav   = document.getElementById('nav-auth');
-    if (token && user) {
-      nav.innerHTML = `
-        <span class="text-slate-600 text-sm hidden sm:block">👋 ${esc(user.username)}</span>
+  </section>
+
+  <!-- ΓöÇΓöÇ Footer ΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇ -->
+  <footer class="bg-slate-800 text-slate-400 py-8 text-center text-sm">
+    <p>┬⌐ 2024ΓÇô2026 Alpha One Labs ┬╖ Cloudflare Python Workers + D1 ┬╖ All user data encrypted at rest</p>
+  </footer>
+
+  <script>
+    const API = '';
+
+    // ΓöÇΓöÇ Auth nav
+    function updateNav() {
+      const token = localStorage.getItem('edu_token');
+      const user = JSON.parse(localStorage.getItem('edu_user') || 'null');
+      const nav = document.getElementById('nav-auth');
+      if (token && user) {
+        nav.innerHTML = `
+        <span class="text-slate-600 text-sm hidden sm:block">≡ƒæï ${esc(user.username)}</span>
         <a href="/dashboard.html" class="bg-brand text-white text-sm font-semibold px-4 py-1.5 rounded-lg hover:bg-brand-dark transition">Dashboard</a>
         <button onclick="logout()" class="text-slate-400 text-sm hover:text-red-500 transition">Logout</button>`;
-    } else {
-      nav.innerHTML = `
+      } else {
+        nav.innerHTML = `
         <a href="/login.html" class="text-slate-600 text-sm font-medium hover:text-brand">Login</a>
         <a href="/login.html?tab=register" class="bg-brand text-white text-sm font-semibold px-4 py-1.5 rounded-lg hover:bg-brand-dark transition">Register</a>`;
+      }
     }
-  }
-  function logout() { localStorage.removeItem('edu_token'); localStorage.removeItem('edu_user'); updateNav(); }
-  function esc(s) { return String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;'); }
-
-  // ── Colours
-  const typeIcon  = { course:'📚', meetup:'🤝', workshop:'🔧', seminar:'🎤', other:'✨' };
-  const typeColor = { course:'bg-indigo-100 text-indigo-700', meetup:'bg-pink-100 text-pink-700', workshop:'bg-orange-100 text-orange-700', seminar:'bg-teal-100 text-teal-700', other:'bg-slate-100 text-slate-600' };
-  const fmtColor  = { live:'bg-red-100 text-red-700', self_paced:'bg-emerald-100 text-emerald-700', hybrid:'bg-purple-100 text-purple-700' };
-  const fmtLabel  = { live:'Live', self_paced:'Self-paced', hybrid:'Hybrid' };
-  const schedLabel = { one_time:'One-time', multi_session:'Multi-session', recurring:'Recurring', ongoing:'Ongoing' };
-
-  function actCard(a) {
-    const tc = typeColor[a.type] || 'bg-slate-100 text-slate-600';
-    const fc = fmtColor[a.format]  || 'bg-slate-100 text-slate-600';
-    const ic = typeIcon[a.type] || '✨';
-    const desc = a.description.length > 110 ? a.description.slice(0, 110) + '…' : a.description;
-    const tags = (a.tags || []).slice(0, 3).map(t =>
-      `<span class="badge bg-slate-100 text-slate-500">${esc(t)}</span>`).join('');
-    return `
+    function logout() { localStorage.removeItem('edu_token'); localStorage.removeItem('edu_user'); updateNav(); }
+    function esc(s) { return String(s).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;').replace(/'/g, '&#39;'); }
+
+    // ΓöÇΓöÇ Colours
+    const typeIcon = { course: '≡ƒôÜ', meetup: '≡ƒñ¥', workshop: '≡ƒöº', seminar: '≡ƒÄñ', other: 'Γ£¿' };
+    const typeColor = { course: 'bg-indigo-100 text-indigo-700', meetup: 'bg-pink-100 text-pink-700', workshop: 'bg-orange-100 text-orange-700', seminar: 'bg-teal-100 text-teal-700', other: 'bg-slate-100 text-slate-600' };
+    const fmtColor = { live: 'bg-red-100 text-red-700', self_paced: 'bg-emerald-100 text-emerald-700', hybrid: 'bg-purple-100 text-purple-700' };
+    const fmtLabel = { live: 'Live', self_paced: 'Self-paced', hybrid: 'Hybrid' };
+    const schedLabel = { one_time: 'One-time', multi_session: 'Multi-session', recurring: 'Recurring', ongoing: 'Ongoing' };
+
+    function actCard(a) {
+      const tc = typeColor[a.type] || 'bg-slate-100 text-slate-600';
+      const fc = fmtColor[a.format] || 'bg-slate-100 text-slate-600';
+      const ic = typeIcon[a.type] || 'Γ£¿';
+      const desc = a.description.length > 110 ? a.description.slice(0, 110) + 'ΓÇª' : a.description;
+      const tags = (a.tags || []).slice(0, 3).map(t =>
+        `<span class="badge bg-slate-100 text-slate-500">${esc(t)}</span>`).join('');
+      return `
       <article class="bg-white rounded-2xl shadow-sm border border-slate-100 p-6 card-hover flex flex-col gap-3">
         <div class="flex items-start justify-between gap-2">
           <h3 class="font-bold text-slate-800 text-base leading-snug">${ic} ${esc(a.title)}</h3>
@@ -195,85 +249,89 @@ <h3 class="font-bold text-slate-800 text-base leading-snug">${ic} ${esc(a.title)
           <div class="flex gap-2 flex-wrap">
             <span class="badge ${fc}">${fmtLabel[a.format] || a.format}</span>
             <span>${schedLabel[a.schedule_type] || a.schedule_type}</span>
-            <span>👥 ${a.participant_count}</span>
-            ${a.session_count ? `<span>🗓 ${a.session_count} sessions</span>` : ''}
+            <span>≡ƒæÑ ${a.participant_count}</span>
+            ${a.session_count ? `<span>≡ƒùô ${a.session_count} sessions</span>` : ''}
           </div>
-          <a href="/course.html?id=${esc(a.id)}" class="text-brand font-semibold hover:underline">View →</a>
+          <a href="/course.html?id=${esc(a.id)}" class="text-brand font-semibold hover:underline">View ΓåÆ</a>
         </div>
         <p class="text-xs text-slate-400">by <span class="font-medium text-slate-500">${esc(a.host_name)}</span></p>
       </article>`;
-  }
-
-  let allActivities = [];
-  let activeTag     = null;
-
-  function renderGrid() {
-    const q    = document.getElementById('search').value.toLowerCase();
-    const type = document.getElementById('filter-type').value;
-    const fmt  = document.getElementById('filter-format').value;
-
-    const filtered = allActivities.filter(a => {
-      if (type && a.type !== type) return false;
-      if (fmt  && a.format !== fmt) return false;
-      if (activeTag && !(a.tags || []).includes(activeTag)) return false;
-      if (q && !a.title.toLowerCase().includes(q) && !a.description.toLowerCase().includes(q)) return false;
-      return true;
-    });
-
-    const grid = document.getElementById('activity-grid');
-    const none = document.getElementById('no-results');
-    if (!filtered.length) { grid.innerHTML = ''; none.classList.remove('hidden'); }
-    else { none.classList.add('hidden'); grid.innerHTML = filtered.map(actCard).join(''); }
-  }
-
-  function buildTagCloud(activities) {
-    const freq = {};
-    activities.forEach(a => (a.tags || []).forEach(t => freq[t] = (freq[t] || 0) + 1));
-    const sorted = Object.entries(freq).sort((a,b) => b[1]-a[1]);
-    const cloud = document.getElementById('tag-cloud');
-    cloud.innerHTML = sorted.map(([name, cnt]) => `
-      <button onclick="toggleTag('${esc(name)}')" id="tag-${esc(name)}"
-        class="tag-pill badge bg-slate-100 text-slate-600 hover:bg-indigo-50 hover:text-brand">
-        ${esc(name)} <span class="opacity-60">${cnt}</span>
-      </button>`).join('');
-  }
-
-  function toggleTag(name) {
-    if (activeTag === name) {
-      activeTag = null;
-      document.querySelectorAll('.tag-pill').forEach(el => el.classList.remove('active'));
-    } else {
-      activeTag = name;
-      document.querySelectorAll('.tag-pill').forEach(el => el.classList.remove('active'));
-      const el = document.getElementById(`tag-${name}`);
-      if (el) el.classList.add('active');
     }
-    renderGrid();
-  }
 
-  async function loadActivities() {
-    try {
-      const res  = await fetch(`${API}/api/activities`);
-      const data = await res.json();
-      allActivities = data.activities || [];
+    let allActivities = [];
+    let activeTag = null;
 
-      document.getElementById('stat-activities').textContent = allActivities.length;
-      document.getElementById('stat-members').textContent =
-        allActivities.reduce((s, a) => s + (a.participant_count || 0), 0);
+    function renderGrid() {
+      const q = document.getElementById('search').value.toLowerCase();
+      const type = document.getElementById('filter-type').value;
+      const fmt = document.getElementById('filter-format').value;
 
-      buildTagCloud(allActivities);
+      const filtered = allActivities.filter(a => {
+        if (type && a.type !== type) return false;
+        if (fmt && a.format !== fmt) return false;
+        if (activeTag && !(a.tags || []).includes(activeTag)) return false;
+        if (q && !a.title.toLowerCase().includes(q) && !a.description.toLowerCase().includes(q)) return false;
+        return true;
+      });
+
+      const grid = document.getElementById('activity-grid');
+      const none = document.getElementById('no-results');
+      if (!filtered.length) { grid.innerHTML = ''; none.classList.remove('hidden'); }
+      else { none.classList.add('hidden'); grid.innerHTML = filtered.map(actCard).join(''); }
+    }
+
+    function buildTagCloud(activities) {
+      const freq = {};
+      activities.forEach(a => (a.tags || []).forEach(t => freq[t] = (freq[t] || 0) + 1));
+      const sorted = Object.entries(freq).sort((a, b) => b[1] - a[1]);
+      const cloud = document.getElementById('tag-cloud');
+      cloud.innerHTML = sorted.map(([name, cnt]) => `
+        <button data-tag="${esc(name)}" id="tag-${esc(name)}"
+          class="tag-pill badge bg-slate-100 text-slate-600 hover:bg-indigo-50 hover:text-brand">
+          ${esc(name)} <span class="opacity-60">${cnt}</span>
+        </button>`).join('');
+      document.querySelectorAll('#tag-cloud [data-tag]').forEach(btn => {
+        btn.addEventListener('click', () => toggleTag(btn.dataset.tag));
+      });
+    }
+
+    function toggleTag(name) {
+      if (activeTag === name) {
+        activeTag = null;
+        document.querySelectorAll('.tag-pill').forEach(el => el.classList.remove('active'));
+      } else {
+        activeTag = name;
+        document.querySelectorAll('.tag-pill').forEach(el => el.classList.remove('active'));
+        const el = document.getElementById(`tag-${name}`);
+        if (el) el.classList.add('active');
+      }
       renderGrid();
-    } catch (e) {
-      document.getElementById('activity-grid').innerHTML =
-        `<p class="col-span-3 text-center text-red-400 py-16">Failed to load activities.<br>Seed sample data via <code>POST /api/seed</code>.</p>`;
     }
-  }
 
-  ['search','filter-type','filter-format'].forEach(id =>
-    document.getElementById(id).addEventListener(id === 'search' ? 'input' : 'change', renderGrid));
+    async function loadActivities() {
+      try {
+        const res = await fetch(`${API}/api/activities`);
+        const data = await res.json();
+        allActivities = data.activities || [];
+
+        document.getElementById('stat-activities').textContent = allActivities.length;
+        document.getElementById('stat-members').textContent =
+          allActivities.reduce((s, a) => s + (a.participant_count || 0), 0);
 
-  updateNav();
-  loadActivities();
-</script>
+        buildTagCloud(allActivities);
+        renderGrid();
+      } catch (e) {
+        document.getElementById('activity-grid').innerHTML =
+          `<p class="col-span-3 text-center text-red-400 py-16">Failed to load activities.<br>Seed sample data via <code>POST /api/seed</code>.</p>`;
+      }
+    }
+
+    ['search', 'filter-type', 'filter-format'].forEach(id =>
+      document.getElementById(id).addEventListener(id === 'search' ? 'input' : 'change', renderGrid));
+
+    updateNav();
+    loadActivities();
+  </script>
 </body>
-</html>
+
+</html>
\ No newline at end of file
