Back to Prompts
General Purpose Code Assistance

Build the Interval Timer Engine & UI

Create the core timer logic with phase management, countdown, controls, and a circular progress ring UI.

Prompt
Read plan.md. Build milestone: Timer Screen.

Build the interval timer in our trainer template:

Timer logic:
- Phases: IDLE → WARMUP → [RUN → WALK] × rounds → COOLDOWN → DONE
- Default: 20s run, 40s walk, 8 rounds, no warmup/cooldown
- Countdown ticks every second, auto-advances phases
- Pause/resume and stop controls

Timer UI:
- SVG circular progress ring (260px), ring color matches phase
- Glow shadow on ring during active workout
- Large monospace time display centered in ring
- Phase badge (colored pill showing RUN / WALK / WARM UP etc)
- Round counter: "Round 3 / 10" with dot progress bar
- "Up next" preview bar
- Start button (purple gradient) when idle
- Pause + stop buttons when active
- Celebration screen with emoji when workout completes
0 views 0 copies