feat: build all dashboard prototypes with shared app.css

forgejo_admin commented

2026-03-15 16:11:38 +00:00

Owner

Lineage

plan-pal-e-docs -> westside-playground prototyping (standalone)

Repo

forgejo_admin/westside-playground

User Story

As Lucas
I want fully designed HTML prototypes for all role dashboards (parent, coach, admin) plus a unified landing page
So that I can review the look on my phone, screenshot approved designs, and hand them to dev agents to port to SvelteKit

Context

The westside-playground repo has stub HTML files for parent.html, coach.html, admin.html, and visitor.html. The index.html and stories.html have inline styles instead of using the shared app.css. All pages need to be built out with fake hardcoded data using the unified shared/app.css stylesheet so they render consistently and can be reviewed on mobile.

File Targets

Files to modify or create:

index.html -- rewrite to use shared/app.css classes, add page-specific styles inline only where app.css has no coverage
parent.html -- full US-10/US-11 parent dashboard prototype
coach.html -- full US-12 coach team dashboard prototype
admin.html -- full US-13/US-14 admin overview prototype
visitor.html -- simple info page noting deployed status
stories.html -- migrate from inline styles to shared/app.css

Files NOT to touch:

shared/app.css -- already written, use as-is
shared/logo.jpeg -- asset, no change
shared/style.css -- legacy, leave in place

Acceptance Criteria

All 6 HTML files link to shared/app.css as their stylesheet
No inline <style> blocks except minimal page-specific overrides where app.css lacks coverage
parent.html shows player profile, team info, payment card, and schedule with fake data
coach.html shows team header, search, and 6 player cards with parent contact (tap-to-call)
admin.html shows stat cards, payment health bar, overdue families list, teams, quick actions
stories.html preserves all existing content (user stories, mermaid diagrams, route map, backend gaps) but uses app.css
All pages render well at 390px mobile width
Phone numbers use <a href="tel:..."> for tap-to-call

Test Expectations

Visual: open each file in browser, verify layout at mobile and desktop widths
Links: all inter-page navigation works (index links to all pages, back links work)
No JavaScript except Mermaid CDN on stories.html

Constraints

Use only classes defined in shared/app.css
Logo path: shared/logo.jpeg
All data is FAKE/hardcoded
No npm, no frameworks, no build steps
Mobile-first design

Checklist

PR opened
No unrelated changes

westside-basketball -- project this affects

### Lineage `plan-pal-e-docs` -> westside-playground prototyping (standalone) ### Repo `forgejo_admin/westside-playground` ### User Story As Lucas I want fully designed HTML prototypes for all role dashboards (parent, coach, admin) plus a unified landing page So that I can review the look on my phone, screenshot approved designs, and hand them to dev agents to port to SvelteKit ### Context The westside-playground repo has stub HTML files for parent.html, coach.html, admin.html, and visitor.html. The index.html and stories.html have inline styles instead of using the shared app.css. All pages need to be built out with fake hardcoded data using the unified `shared/app.css` stylesheet so they render consistently and can be reviewed on mobile. ### File Targets Files to modify or create: - `index.html` -- rewrite to use shared/app.css classes, add page-specific styles inline only where app.css has no coverage - `parent.html` -- full US-10/US-11 parent dashboard prototype - `coach.html` -- full US-12 coach team dashboard prototype - `admin.html` -- full US-13/US-14 admin overview prototype - `visitor.html` -- simple info page noting deployed status - `stories.html` -- migrate from inline styles to shared/app.css Files NOT to touch: - `shared/app.css` -- already written, use as-is - `shared/logo.jpeg` -- asset, no change - `shared/style.css` -- legacy, leave in place ### Acceptance Criteria - [ ] All 6 HTML files link to `shared/app.css` as their stylesheet - [ ] No inline `<style>` blocks except minimal page-specific overrides where app.css lacks coverage - [ ] parent.html shows player profile, team info, payment card, and schedule with fake data - [ ] coach.html shows team header, search, and 6 player cards with parent contact (tap-to-call) - [ ] admin.html shows stat cards, payment health bar, overdue families list, teams, quick actions - [ ] stories.html preserves all existing content (user stories, mermaid diagrams, route map, backend gaps) but uses app.css - [ ] All pages render well at 390px mobile width - [ ] Phone numbers use `<a href="tel:...">` for tap-to-call ### Test Expectations - [ ] Visual: open each file in browser, verify layout at mobile and desktop widths - [ ] Links: all inter-page navigation works (index links to all pages, back links work) - [ ] No JavaScript except Mermaid CDN on stories.html ### Constraints - Use only classes defined in `shared/app.css` - Logo path: `shared/logo.jpeg` - All data is FAKE/hardcoded - No npm, no frameworks, no build steps - Mobile-first design ### Checklist - [ ] PR opened - [ ] No unrelated changes ### Related - `westside-basketball` -- project this affects