Stride
fitness dashboard
STRIDE is a seven-page personal fitness dashboard template for a fitness tracker, wearable companion or health app. The pages are Overview, Activity, Heart, Sleep, Workouts, Goals and Settings, linked by a hash router so every page has its own URL and title and back, forward and bookmarks work. Overview shows activity rings that draw themselves closed, four headline figures with sparklines and a change against the previous period, the week's steps against a goal line, last night's sleep, heart rate, a water tracker and recent workouts. Log workout opens a dialog with validation and a live calorie estimate; saving it moves the rings, the heart-rate zones, the weekly goals and the workout log together, with Undo. Activity switches between 7 and 30 days, Heart shows a 24-hour trace with the hours asleep shaded and a 30-day resting trend, and Sleep has a stage-by-stage hypnogram and the last 14 nights. The workout log sorts by any column, filters by type and deletes your own entries. Goals edits the targets every page measures against, and Settings holds name and weight (used for the calorie estimates), kilometres or miles, light, dark or system theme, and a reset. All history is sample data seeded in model.js with no backend, so you connect your own API there; what you log is kept in the browser's localStorage. Charts are hand-built SVG you can read with the arrow keys, each with a hidden table for screen readers. The layout stacks for tablet and phone, and reduced-motion settings are respected. No photos are included and the font (Manrope) loads from Google Fonts. Built with plain HTML, CSS and JavaScript with no dependencies, with Vite included for dev and build.
$30.75 — one-time price, free updates
Built with vanilla, css, svg.