Prototype: stats cards component #5

New issue

Open

opened 2026-03-28 02:09:06 +00:00 by forgejo_admin · 0 comments

forgejo_admin commented

2026-03-28 02:09:06 +00:00

Type

Feature

Lineage

Standalone — scoped from Daily 100 design spec.

Repo

forgejo_admin/daily-100

User Story

As a user
I want to see my aggregate stats at a glance
So that I can track long-term progress

Context

2x2 stats grid showing four cards: Perfect Days (total cumulative), Current Streak (consecutive days with score > 0), Best Streak (longest ever), Completion Rate (percentage). Slate-800 cards with rounded corners, bold numbers, small labels underneath.

File Targets

Files the agent should modify or create:

prototype/index.html -- stats grid section
prototype/style.css -- stats card styles
prototype/app.js -- stats rendering with mock data

Files the agent should NOT touch:

(none — greenfield)

Acceptance Criteria

4 stat cards in 2x2 grid layout
Bold numbers with descriptive labels
Responsive layout on mobile
Mock data populated

Test Expectations

Visual inspection — cards render correctly in grid
Run command: open prototype/index.html in browser

Constraints

CSS Grid for 2x2 layout
Consistent card styling with rest of app

Checklist

PR opened
Tests pass
No unrelated changes

daily-100 -- project

### Type Feature ### Lineage Standalone — scoped from Daily 100 design spec. ### Repo `forgejo_admin/daily-100` ### User Story As a user I want to see my aggregate stats at a glance So that I can track long-term progress ### Context 2x2 stats grid showing four cards: Perfect Days (total cumulative), Current Streak (consecutive days with score > 0), Best Streak (longest ever), Completion Rate (percentage). Slate-800 cards with rounded corners, bold numbers, small labels underneath. ### File Targets Files the agent should modify or create: - `prototype/index.html` -- stats grid section - `prototype/style.css` -- stats card styles - `prototype/app.js` -- stats rendering with mock data Files the agent should NOT touch: - (none — greenfield) ### Acceptance Criteria - [ ] 4 stat cards in 2x2 grid layout - [ ] Bold numbers with descriptive labels - [ ] Responsive layout on mobile - [ ] Mock data populated ### Test Expectations - [ ] Visual inspection — cards render correctly in grid - Run command: open `prototype/index.html` in browser ### Constraints - CSS Grid for 2x2 layout - Consistent card styling with rest of app ### Checklist - [ ] PR opened - [ ] Tests pass - [ ] No unrelated changes ### Related - `daily-100` -- project