Adiciona seção de participantes e estilos correspondentes nas atividades

Author: 2code4coffee

src/static/app.js

@@ -19,12 +19,22 @@ document.addEventListener("DOMContentLoaded", () => {
         activityCard.className = "activity-card";
 
         const spotsLeft = details.max_participants - details.participants.length;
+        
+        const participantsList = details.participants.length > 0
+          ? `<div class="participants-section">
+              <h5>Participantes:</h5>
+              <ul>
+                ${details.participants.map(email => `<li>${email}</li>`).join('')}
+              </ul>
+            </div>`
+          : '<p class="no-participants">Nenhum participante inscrito ainda</p>';
 
         activityCard.innerHTML = `
           <h4>${name}</h4>
           <p>${details.description}</p>
           <p><strong>Schedule:</strong> ${details.schedule}</p>
           <p><strong>Availability:</strong> ${spotsLeft} spots left</p>
+          ${participantsList}
         `;
 
         activitiesList.appendChild(activityCard);
@@ -62,6 +72,7 @@ document.addEventListener("DOMContentLoaded", () => {
         messageDiv.textContent = result.message;
         messageDiv.className = "success";
         signupForm.reset();
+        fetchActivities(); // Atualizar a lista de atividades
       } else {
         messageDiv.textContent = result.detail || "An error occurred";
         messageDiv.className = "error";

src/static/styles.css

@@ -142,3 +142,33 @@ footer {
   padding: 20px;
   color: #666;
 }
+
+.participants-section {
+  margin-top: 15px;
+  padding-top: 15px;
+  border-top: 1px solid #ddd;
+}
+
+.participants-section h5 {
+  color: #1a237e;
+  margin-bottom: 8px;
+  font-size: 0.95em;
+}
+
+.participants-section ul {
+  list-style-position: inside;
+  padding-left: 10px;
+}
+
+.participants-section li {
+  color: #555;
+  font-size: 0.9em;
+  margin-bottom: 4px;
+}
+
+.no-participants {
+  color: #666;
+  font-style: italic;
+  font-size: 0.9em;
+  margin-top: 15px;
+}