feat: add player profile page prototype

forgejo_admin commented

2026-03-16 01:26:30 +00:00

Owner

Lineage

plan-pal-e-docs -> Phase F11 (Frontend Polish)
Playground prototype for future /players/:id route in westside-app.

Repo

forgejo_admin/westside-playground

User Story

As a parent/player
I want to see a full player profile page with all details, team info, payment status, and an edit form
So that I can view and update my player's information in one place

Context

The westside-playground repo contains static HTML prototypes for the westside-app SvelteKit frontend. The parent dashboard (parent.html) shows a summary view, but there is no detail/profile page prototype yet. This page will serve as the design spec for the production /players/:id route, showing the player view (most complex -- has edit form) with info cards for player info, team/coach, payment, and a stats placeholder.

File Targets

Files to create:

player-profile.html -- full player profile page with profile header, four info cards, edit form

Files to modify:

index.html -- add Player Profile link in Dashboard Prototypes section

Files NOT to touch:

shared/app.css -- page-specific styles go in the HTML file only

Acceptance Criteria

When I open player-profile.html, then I see a profile header with avatar, name, position/division badges, and team name
When I scroll down, then I see four info cards: Player Info, Team & Coach, Payment Status, Stats & Recruitment
When I tap "Edit Profile", then the edit form appears with pre-filled fields
When I tap "Cancel" in the edit form, then the form hides
When I view on 390px mobile viewport, then all content is readable and properly stacked
When I visit index.html, then I see a Player Profile link in Dashboard Prototypes

Test Expectations

Visual: open in browser at 390px width, verify dark theme and mobile layout
Interactive: verify edit toggle/cancel works
Navigation: verify bottom nav links and index.html link work
Run command: open player-profile.html in browser

Constraints

Plain HTML + CSS only, no JavaScript frameworks
Use existing CSS classes from shared/app.css (info-card, badge, btn, etc.)
Page-specific styles in <style> block in the HTML head only
Dark theme matching other playground pages
Mobile-first (390px target viewport)

Checklist

PR opened
No unrelated changes

project-westside-frontend -- westside-app frontend project

### Lineage `plan-pal-e-docs` -> Phase F11 (Frontend Polish) Playground prototype for future `/players/:id` route in westside-app. ### Repo `forgejo_admin/westside-playground` ### User Story As a parent/player I want to see a full player profile page with all details, team info, payment status, and an edit form So that I can view and update my player's information in one place ### Context The westside-playground repo contains static HTML prototypes for the westside-app SvelteKit frontend. The parent dashboard (`parent.html`) shows a summary view, but there is no detail/profile page prototype yet. This page will serve as the design spec for the production `/players/:id` route, showing the player view (most complex -- has edit form) with info cards for player info, team/coach, payment, and a stats placeholder. ### File Targets Files to create: - `player-profile.html` -- full player profile page with profile header, four info cards, edit form Files to modify: - `index.html` -- add Player Profile link in Dashboard Prototypes section Files NOT to touch: - `shared/app.css` -- page-specific styles go in the HTML file only ### Acceptance Criteria - [ ] When I open player-profile.html, then I see a profile header with avatar, name, position/division badges, and team name - [ ] When I scroll down, then I see four info cards: Player Info, Team & Coach, Payment Status, Stats & Recruitment - [ ] When I tap "Edit Profile", then the edit form appears with pre-filled fields - [ ] When I tap "Cancel" in the edit form, then the form hides - [ ] When I view on 390px mobile viewport, then all content is readable and properly stacked - [ ] When I visit index.html, then I see a Player Profile link in Dashboard Prototypes ### Test Expectations - [ ] Visual: open in browser at 390px width, verify dark theme and mobile layout - [ ] Interactive: verify edit toggle/cancel works - [ ] Navigation: verify bottom nav links and index.html link work - Run command: open `player-profile.html` in browser ### Constraints - Plain HTML + CSS only, no JavaScript frameworks - Use existing CSS classes from `shared/app.css` (info-card, badge, btn, etc.) - Page-specific styles in `<style>` block in the HTML head only - Dark theme matching other playground pages - Mobile-first (390px target viewport) ### Checklist - [ ] PR opened - [ ] No unrelated changes ### Related - `project-westside-frontend` -- westside-app frontend project