Add participants section to activity cards with styling

src/static/app.js

@@ -20,11 +20,26 @@ document.addEventListener("DOMContentLoaded", () => {
 
         const spotsLeft = details.max_participants - details.participants.length;
 
+        // Participants section
+        let participantsHTML = `
+          <div class="participants-section" style="margin-top: 1em;">
+            <strong style="color: #3949ab; font-size: 1.05em;">Participants:</strong>
+            ${
+              details.participants.length > 0
+                ? `<ul style="margin: 0.5em 0 0 1em; padding: 0;">
+                    ${details.participants.map(p => `<li style="list-style-type: disc; margin-bottom: 2px; color: #333;">${p}</li>`).join("")}
+                  </ul>`
+                : `<p style="margin: 0.5em 0 0 1em; color: #888; font-style: italic;">No participants yet.</p>`
+            }
+          </div>
+        `;
+
         activityCard.innerHTML = `
           <h4>${name}</h4>
           <p>${details.description}</p>
           <p><strong>Schedule:</strong> ${details.schedule}</p>
           <p><strong>Availability:</strong> ${spotsLeft} spots left</p>
+          ${participantsHTML}
         `;
 
         activitiesList.appendChild(activityCard);

src/static/styles.css

@@ -142,3 +142,34 @@ footer {
   padding: 20px;
   color: #666;
 }
+
+.participants-section {
+  background: #eef2fa;
+  border-radius: 4px;
+  padding: 10px 12px;
+  margin-top: 12px;
+}
+
+.participants-section strong {
+  display: block;
+  margin-bottom: 6px;
+  color: #3949ab;
+}
+
+.participants-section ul {
+  margin-left: 1em;
+  padding-left: 0;
+}
+
+.participants-section li {
+  color: #333;
+  margin-bottom: 2px;
+  list-style-type: disc;
+}
+
+.participants-section p {
+  color: #888;
+  margin-left: 1em;
+  font-style: italic;
+  margin-bottom: 0;
+}