diff --git a/README.md b/README.md index f011d03..1eb4717 100644 --- a/README.md +++ b/README.md @@ -8,6 +8,8 @@ Mona here. I'm done preparing your exercise. Hope you enjoy! 💚 Remember, it's self-paced so feel free to take a break! ☕️ +Signed up Peach and Mario for classes + [![](https://img.shields.io/badge/Go%20to%20Exercise-%E2%86%92-1f883d?style=for-the-badge&logo=github&labelColor=197935)](https://github.com/sharwren/skills-getting-started-with-github-copilot/issues/1) --- diff --git a/src/activity-card-sample.html b/src/activity-card-sample.html new file mode 100644 index 0000000..5467b40 --- /dev/null +++ b/src/activity-card-sample.html @@ -0,0 +1,65 @@ + + + + + Activity Card — Participants Demo + + + +
+
+ +

Community Hike

+

Join us for an easy 5km trail walk through the local park. Bring water and good shoes.

+ +
+
+
Participants
+ +
+ +
    +
  • + +
    + Alice Lee + Organizer +
    +
    • + +
  • + +
    + Michael Jones + Member +
    +
    • + +
  • + +
    + Sofia Brown + Member +
    +
    • +
+
+
+ + +
+

Evening Coding Session

+

Casual coding night: bring your laptop and a problem you'd like to work on.

+ +
+
+
Participants
+ +
+ +
No one has signed up yet — be the first!
+
+
+
+ + diff --git a/src/app.py b/src/app.py index 4ebb1d9..80e7370 100644 --- a/src/app.py +++ b/src/app.py @@ -25,7 +25,7 @@ "description": "Learn strategies and compete in chess tournaments", "schedule": "Fridays, 3:30 PM - 5:00 PM", "max_participants": 12, - "participants": ["michael@mergington.edu", "daniel@mergington.edu"] + "participants": ["michael@mergington.edu", "daniel@mergington.edu", "peach@mergington.edu"] }, "Programming Class": { "description": "Learn programming fundamentals and build software projects", @@ -38,10 +38,51 @@ "schedule": "Mondays, Wednesdays, Fridays, 2:00 PM - 3:00 PM", "max_participants": 30, "participants": ["john@mergington.edu", "olivia@mergington.edu"] + }, + + # --- New Sports Activities --- + "Soccer Team": { + "description": "Competitive soccer team practices and matches", + "schedule": "Tuesdays and Thursdays, 4:00 PM - 6:00 PM", + "max_participants": 18, + "participants": ["liam@mergington.edu"] + }, + "Track and Field": { + "description": "Track workouts, field events, and seasonal meets", + "schedule": "Mondays, Wednesdays, Fridays, 3:00 PM - 4:30 PM", + "max_participants": 25, + "participants": ["ava@mergington.edu"] + }, + + # --- New Artistic Activities --- + "Drama Club": { + "description": "Theater rehearsals, acting workshops, and school productions", + "schedule": "Wednesdays, 4:00 PM - 6:00 PM", + "max_participants": 30, + "participants": ["rose@mergington.edu", "mario@mergington.edu"] + }, + "Photography Club": { + "description": "Learn photography techniques and work on creative projects", + "schedule": "Saturdays, 10:00 AM - 12:00 PM", + "max_participants": 15, + "participants": ["noah@mergington.edu"] + }, + + # --- New Intellectual Activities --- + "Robotics Club": { + "description": "Design, build, and program robots for competitions and demos", + "schedule": "Thursdays, 4:00 PM - 6:00 PM", + "max_participants": 12, + "participants": ["lucas@mergington.edu"] + }, + "Math Team": { + "description": "Prepare for math competitions and practice challenging problems", + "schedule": "Tuesdays, 5:00 PM - 6:30 PM", + "max_participants": 15, + "participants": ["oliver@mergington.edu"] } } - @app.get("/") def root(): return RedirectResponse(url="/static/index.html") @@ -62,6 +103,14 @@ def signup_for_activity(activity_name: str, email: str): # Get the specific activity activity = activities[activity_name] + # Validate student is not already signed up + if email in activity["participants"]: + raise HTTPException(status_code=400, detail="Student is already signed up") + + # Validate capacity + if len(activity["participants"]) >= activity["max_participants"]: + raise HTTPException(status_code=400, detail="Activity is full") + # Add student activity["participants"].append(email) return {"message": f"Signed up {email} for {activity_name}"} diff --git a/src/static/app.js b/src/static/app.js index dcc1e38..6e1330b 100644 --- a/src/static/app.js +++ b/src/static/app.js @@ -4,6 +4,7 @@ document.addEventListener("DOMContentLoaded", () => { const signupForm = document.getElementById("signup-form"); const messageDiv = document.getElementById("message"); + // nohup change because participant // Function to fetch activities from API async function fetchActivities() { try { diff --git a/src/static/styles.css b/src/static/styles.css index a533b32..d4e15a2 100644 --- a/src/static/styles.css +++ b/src/static/styles.css @@ -37,7 +37,11 @@ main { @media (min-width: 768px) { main { + /* switch to grid at wider sizes so grid-template-columns is valid */ + display: grid; grid-template-columns: 2fr 1fr; + gap: 30px; + align-items: start; } } @@ -142,3 +146,123 @@ footer { padding: 20px; color: #666; } + +/* Participants list inside activity cards */ +.activity-card .participants { + margin-top: 12px; + padding-top: 12px; + border-top: 1px dashed #eee; + display: block; +} + +.activity-card .participants-header { + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: 8px; +} + +.activity-card .participants-header h5 { + font-size: 14px; + color: #1a237e; + margin: 0; + font-weight: 700; +} + +.activity-card .participants-count { + font-size: 12px; + color: #1a237e; /* stronger contrast */ + background: #e8eaf6; /* slightly richer tint for contrast */ + padding: 4px 8px; + border-radius: 999px; + border: 1px solid rgba(26,35,126,0.08); +} + +/* Use a custom marker for more consistent cross-browser behavior */ +.activity-card .participants-list { + list-style: none; + padding-left: 0; + margin: 0; +} + +.activity-card .participants-list li { + display: flex; + align-items: center; + gap: 10px; + padding: 6px 8px; + border-radius: 6px; + transition: background-color 0.15s ease, transform 0.06s ease; + margin-bottom: 6px; +} + +/* custom circular marker */ +.activity-card .participants-list li::before { + content: ""; + width: 8px; + height: 8px; + border-radius: 50%; + background: #1a237e; /* brand color */ + flex: 0 0 8px; + margin-right: 6px; + opacity: 0.95; +} + +/* Small avatar / initials to the left of the name */ +.activity-card .participants-list .avatar { + width: 28px; + height: 28px; + border-radius: 50%; + background-color: #e8eaf6; + color: #1a237e; + display: inline-flex; + align-items: center; + justify-content: center; + font-weight: 700; + font-size: 13px; + flex: 0 0 28px; + border: 1px solid rgba(26,35,126,0.06); + box-shadow: 0 1px 2px rgba(0,0,0,0.03); +} + +/* Participant name and optional role/note */ +.activity-card .participants-list .participant-meta { + display: flex; + flex-direction: column; +} + +.activity-card .participants-list .participant-name { + font-weight: 600; + color: #222; + font-size: 14px; + line-height: 1; +} + +.activity-card .participants-list .participant-note { + font-size: 12px; + color: #6b7280; + margin-top: 2px; +} + +/* Hover for each participant row */ +.activity-card .participants-list li:hover { + background-color: #f4f6ff; + transform: translateY(-1px); +} + +/* If there are no participants, show a subtle empty state */ +.activity-card .participants-empty { + padding: 8px; + font-size: 13px; + color: #666; + background: #fbfbfb; + border-radius: 6px; + border: 1px dashed #f0f0f0; +} + +/* Ensure good spacing on small screens */ +@media (max-width: 480px) { + .activity-card .participants-list li { + gap: 8px; + padding: 8px; + } +}