feat: build all dashboard prototypes with shared app.css #2

Merged

forgejo_admin merged 1 commit from 1-feat-build-all-dashboard-prototypes-with into main

2026-03-15 16:34:19 +00:00

forgejo_admin commented

2026-03-15 16:15:36 +00:00

Owner

Summary

Replace stub HTML files with fully designed mobile-first prototypes using fake hardcoded data. All 6 pages now use the unified shared/app.css stylesheet. No JavaScript except Mermaid CDN on stories.html.

Changes

index.html -- rewrote playground landing page with nav-cards, status badges (LIVE/DEPLOYED), hero section, "How This Works" steps, all using app.css design tokens plus page-specific overrides for nav-card/steps/hero components
parent.html -- full US-10/US-11 parent dashboard: player profile card (MJ initials, position, height, school, grad), team info card, payment card with CURRENT badge and "Manage Subscription" button, 3 upcoming schedule items
coach.html -- full US-12 coach roster: team header (8 players, Coach KJ), search input, 6 player cards in 2-column grid with avatar initials, tryout numbers, position/height, school/grad, parent name + tap-to-call phone links, payment status badges (CURRENT/OVERDUE/PENDING)
admin.html -- full US-13/US-14 admin dashboard: 4 stat cards (54 active, 47 current, 4 overdue, 6 teams), payment health bar (87% green fill), 4 overdue family list-rows with danger border + tap-to-call, 6 team summary cards, quick actions row
visitor.html -- simple centered message linking to deployed site with nav bar
stories.html -- migrated from inline <style> block to shared/app.css link + minimal page-specific overrides; ALL content preserved (user stories, 5 mermaid diagrams, route map table, backend gaps table, data flow)
shared/app.css -- added to git tracking (was on disk but untracked)

Test Plan

Open each HTML file in a browser at 390px mobile width -- layouts should be single-column, readable, no horizontal scroll
Open at 640px+ -- stats row goes 4-column, player cards go 3-column, nav-grid goes 2-column
Tap phone numbers on mobile -- should open dialer (tel: links)
Click inter-page links (index nav-cards, back links) -- all navigation works
stories.html Mermaid diagrams render correctly (requires network for CDN)
No JavaScript console errors on any page except stories.html (Mermaid CDN)

Review Checklist

All 6 HTML files link to shared/app.css
No inline <style> blocks except minimal page-specific overrides where app.css lacks coverage
Phone numbers use <a href="tel:..."> for tap-to-call
All data is fake/hardcoded -- no JS, no API calls
Mobile-first layout (390px base, responsive breakpoints at 400px and 640px)
stories.html preserves all original content (user stories, mermaid diagrams, route map, backend gaps)
No unrelated changes

Closes #1
Project: westside-basketball

## Summary Replace stub HTML files with fully designed mobile-first prototypes using fake hardcoded data. All 6 pages now use the unified `shared/app.css` stylesheet. No JavaScript except Mermaid CDN on stories.html. ## Changes - `index.html` -- rewrote playground landing page with nav-cards, status badges (LIVE/DEPLOYED), hero section, "How This Works" steps, all using app.css design tokens plus page-specific overrides for nav-card/steps/hero components - `parent.html` -- full US-10/US-11 parent dashboard: player profile card (MJ initials, position, height, school, grad), team info card, payment card with CURRENT badge and "Manage Subscription" button, 3 upcoming schedule items - `coach.html` -- full US-12 coach roster: team header (8 players, Coach KJ), search input, 6 player cards in 2-column grid with avatar initials, tryout numbers, position/height, school/grad, parent name + tap-to-call phone links, payment status badges (CURRENT/OVERDUE/PENDING) - `admin.html` -- full US-13/US-14 admin dashboard: 4 stat cards (54 active, 47 current, 4 overdue, 6 teams), payment health bar (87% green fill), 4 overdue family list-rows with danger border + tap-to-call, 6 team summary cards, quick actions row - `visitor.html` -- simple centered message linking to deployed site with nav bar - `stories.html` -- migrated from inline `<style>` block to `shared/app.css` link + minimal page-specific overrides; ALL content preserved (user stories, 5 mermaid diagrams, route map table, backend gaps table, data flow) - `shared/app.css` -- added to git tracking (was on disk but untracked) ## Test Plan - Open each HTML file in a browser at 390px mobile width -- layouts should be single-column, readable, no horizontal scroll - Open at 640px+ -- stats row goes 4-column, player cards go 3-column, nav-grid goes 2-column - Tap phone numbers on mobile -- should open dialer (tel: links) - Click inter-page links (index nav-cards, back links) -- all navigation works - stories.html Mermaid diagrams render correctly (requires network for CDN) - No JavaScript console errors on any page except stories.html (Mermaid CDN) ## Review Checklist - [x] All 6 HTML files link to `shared/app.css` - [x] No inline `<style>` blocks except minimal page-specific overrides where app.css lacks coverage - [x] Phone numbers use `<a href="tel:...">` for tap-to-call - [x] All data is fake/hardcoded -- no JS, no API calls - [x] Mobile-first layout (390px base, responsive breakpoints at 400px and 640px) - [x] stories.html preserves all original content (user stories, mermaid diagrams, route map, backend gaps) - [x] No unrelated changes ## Related - Closes #1 - Project: westside-basketball

forgejo_admin added 1 commit

2026-03-15 16:15:36 +00:00

feat: build all dashboard prototypes with shared app.css 36805a904c

Replace stub HTML files with fully designed prototypes using fake
hardcoded data. All pages use shared/app.css for consistent styling.

- index.html: playground landing with nav-cards and status badges
- parent.html: US-10/US-11 parent dashboard (profile, team, payment, schedule)
- coach.html: US-12 coach roster with 6 player cards and tap-to-call contacts
- admin.html: US-13/US-14 admin dashboard (stats, payment health bar, overdue list, teams)
- visitor.html: simple info page linking to deployed site
- stories.html: migrated from inline styles to shared/app.css, all content preserved

Closes #1

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

forgejo_admin commented

2026-03-15 16:16:57 +00:00

Author

Owner

Self-Review

Read 100% of all 7 changed files (admin.html, coach.html, index.html, parent.html, stories.html, visitor.html, shared/app.css). Verified against issue #1 spec.

Checklist

All 6 HTML files link to shared/app.css
No inline <style> blocks except minimal page-specific overrides (index: hero/nav-card/steps, admin: stat-bar, stories: doc typography) -- all justified by app.css lacking those components
parent.html: profile card (MJ, #12, PG, 5'10", West Valley HS, '28), team card, payment card ($200/mo, CURRENT badge, Manage Subscription btn), 3 schedule items
coach.html: team header, search input, 6 player cards with correct data, tap-to-call tel: links, payment badges (4 CURRENT, 1 OVERDUE, 1 PENDING)
admin.html: 4 stat cards (correct colors), 87% payment health bar, 4 overdue list-rows with .overdue class, 6 team cards, quick actions row
visitor.html: nav + centered empty state with link to deployed site
stories.html: all original content preserved (5 mermaid diagrams, route map table, backend gaps table, 4 user stories, data flow section)
Logo path shared/logo.jpeg used consistently
Mobile-first responsive breakpoints intact (400px, 640px)
No JavaScript except Mermaid CDN on stories.html
All phone numbers use <a href="tel:+1..."> format

Findings

No blockers. No issues found. Implementation matches spec.

## Self-Review Read 100% of all 7 changed files (admin.html, coach.html, index.html, parent.html, stories.html, visitor.html, shared/app.css). Verified against issue #1 spec. ### Checklist - [x] All 6 HTML files link to `shared/app.css` - [x] No inline `<style>` blocks except minimal page-specific overrides (index: hero/nav-card/steps, admin: stat-bar, stories: doc typography) -- all justified by app.css lacking those components - [x] parent.html: profile card (MJ, #12, PG, 5'10", West Valley HS, '28), team card, payment card ($200/mo, CURRENT badge, Manage Subscription btn), 3 schedule items - [x] coach.html: team header, search input, 6 player cards with correct data, tap-to-call tel: links, payment badges (4 CURRENT, 1 OVERDUE, 1 PENDING) - [x] admin.html: 4 stat cards (correct colors), 87% payment health bar, 4 overdue list-rows with `.overdue` class, 6 team cards, quick actions row - [x] visitor.html: nav + centered empty state with link to deployed site - [x] stories.html: all original content preserved (5 mermaid diagrams, route map table, backend gaps table, 4 user stories, data flow section) - [x] Logo path `shared/logo.jpeg` used consistently - [x] Mobile-first responsive breakpoints intact (400px, 640px) - [x] No JavaScript except Mermaid CDN on stories.html - [x] All phone numbers use `<a href="tel:+1...">` format ### Findings No blockers. No issues found. Implementation matches spec.