Prototype: gamification header (streak + level) #6

New issue

Open

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

forgejo_admin commented

2026-03-28 02:09:13 +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 current streak and level at the top of the screen
So that I feel motivated to maintain consistency

Context

Header bar with streak flame icon + count on left, level badge + title + XP progress bar on right. Level titles based on cumulative perfect days: Rookie (1), Regular (7), Committed (21), Warrior (50), Machine (100), Legend (200), Immortal (365). Progress bar shows XP toward next level.

File Targets

Files the agent should modify or create:

prototype/index.html -- header bar section
prototype/style.css -- header styles, progress bar
prototype/app.js -- level calculation logic, mock data

Files the agent should NOT touch:

(none — greenfield)

Acceptance Criteria

Streak flame icon with count displayed on left
Level badge with title on right
XP progress bar toward next level
Mock data shows realistic level/streak values

Test Expectations

Visual inspection — header renders correctly on mobile
Run command: open prototype/index.html in browser

Constraints

Emoji or inline SVG for flame icon
CSS-only progress bar
Orange (#f97316) for streak, purple (#a78bfa) for level

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 current streak and level at the top of the screen So that I feel motivated to maintain consistency ### Context Header bar with streak flame icon + count on left, level badge + title + XP progress bar on right. Level titles based on cumulative perfect days: Rookie (1), Regular (7), Committed (21), Warrior (50), Machine (100), Legend (200), Immortal (365). Progress bar shows XP toward next level. ### File Targets Files the agent should modify or create: - `prototype/index.html` -- header bar section - `prototype/style.css` -- header styles, progress bar - `prototype/app.js` -- level calculation logic, mock data Files the agent should NOT touch: - (none — greenfield) ### Acceptance Criteria - [ ] Streak flame icon with count displayed on left - [ ] Level badge with title on right - [ ] XP progress bar toward next level - [ ] Mock data shows realistic level/streak values ### Test Expectations - [ ] Visual inspection — header renders correctly on mobile - Run command: open `prototype/index.html` in browser ### Constraints - Emoji or inline SVG for flame icon - CSS-only progress bar - Orange (#f97316) for streak, purple (#a78bfa) for level ### Checklist - [ ] PR opened - [ ] Tests pass - [ ] No unrelated changes ### Related - `daily-100` -- project