Fitness App Website Template

Quick Start

1. Unzip the folder and serve it:

Code snippet omitted: it ships with the download.

2. Open /index.html (or the folder with a trailing slash) so the relative assets/ paths resolve. Opening the files straight from disk also works.
3. Open it on a phone on the same network, or use the browser's device toolbar, to see the full-screen app.

Using It With Your Own Design

• Colours are tokens at the top of assets/style.css, light in :root and dark in :root[data-theme="dark"]. Change --accent first; keep --on-accent dark unless your accent is dark enough to carry white text.
• Faces are two variables, --font-display and --font-body. Saira italic sets posters, titles and big figures; Golos Text runs the interface.
• Rename the app in the stage (.stage-brand), the page titles and the profile. Replace the photographs in assets/img/ with files of the same name and size, or edit the <img> tags.
• Every class on the UI elements page is the one the app uses, so restyling a component there restyles it everywhere.

Screens and Configuration

Desktop stage

Below 880px wide (or under 620px tall) the app is the page. Above that, .device becomes a 390px-wide phone frame with its own scroller, and its fixed chrome (tab bar, sheets, dialogs, toasts, rest dock) stays inside it. The stage beside it holds:

• .stage-rail: the brand, the numbered screen list and the theme switch (1180px and wider).
• .stage-copy: the large screen name (data-mark on .stage-word, sized from --chars), a one-line description and "Try this" hints. Between 880 and 1180px it also carries the screen list as pills.

To ship without the stage, add data-stage="off" to <html> on each page: desktop visitors then get a centred phone-width column and the stage markup is ignored. You can also delete the two stage- blocks from each page.

Session data

Sessions live in a JSON block, <script type="application/json" id="setbook-plans">, at the foot of train.html and session.html (keep the two the same). Each session has id, name, type, mins, img, alt, level, kit, blurb and ex, a list of exercises:

Code snippet omitted: it ships with the download.

ua and ub name the two logged columns (kilograms and reps, metres, calories, seconds, kilometres). a and b are this session's targets, shown in grey and logged when a set is ticked empty; prev is last time's figure; warm: true marks a warm-up set. rest is in seconds; 0 uses the default rest from settings. The Train grid is plain markup: copy an <li data-plan-card> and point data-open-plan and the href at the new id.

Logger

session.html?plan=<id> opens a session. The session is saved as you go and restored on reload; finishing writes a history entry that Today, the Progress calendar and History read. Volume counts kilograms × reps, and kilograms once per set for carries and pushes. A record is any working set heavier than the best prev figure for that exercise.

Units

Any element with data-kg="120" shows that weight in the chosen unit ("120 kg" or "265 lb"). Logger inputs, the chart, records and volume convert too. Units, weekly goal (data-stepper), default rest and reminders are set on profile.html.

Progress figures

The chart, records and weekly volume read the setbook-progress JSON block in progress.html: 52 weekly estimated maxima per lift, four record tiles per lift and eight weeks of volume in tonnes with a goal.

Hooks you can reuse

Front end only

There is no server. Sessions, history, settings, kudos, comments, chat and the welcome answers are saved in localStorage under keys starting setbook-; "Reset demo data" clears them. The coach replies are canned and chosen by keyword. Sign out shows where your own authentication goes. To make it real, replace the store helper in assets/script.js with calls to your backend and the chat reply with your messaging service.

Palette

Measured contrast pairs are listed in the comment at the top of the stylesheet. The theme follows the system until the visitor picks one; the choice is stored and applied before first paint by the small script in each page's <head>.

Photographs

Baked WebP derivatives in assets/img/, graded from Pexels originals (Pexels licence). Sources are listed in assets/img-manifest.json; rebuild with bun scripts/build-template-assets.ts fitness-app-template in the GSAP Vault repository, or replace the files directly at the same sizes (720 × 900 posters, 720 × 480 feed photos, 780 × 1200 welcome).

Accessibility

• Native buttons, links and inputs throughout, with a visible focus ring for keyboard use only.
• Segmented controls, chips and the week strip use aria-pressed with arrow keys. The chart is a focusable slider whose value text names the week and weight.
• Sheets and dialogs trap focus, close on Escape and return focus to their trigger; the rest of the page is made inert while they are open.
• Invalid entries are refused with a written message tied to the field, never colour alone. Toasts and the chat thread are live regions.
• Reduced motion keeps every interaction and shows final values without animating. Without JavaScript each screen still reads, links and stacks the welcome steps.

Dependencies

• GSAP 3.12+ (demo built against 3.15.0) from jsDelivr, used only for motion. Flip is loaded on train.html and crew.html for the filter and leaderboard reflow. Every control works if the CDN is blocked.
• Saira and Golos Text, self-hosted in assets/fonts/ (latin, the weights used). SIL Open Font License; see assets/fonts/OFL.txt.
• No other libraries and no build step. Page changes crossfade with a CSS view transition where the browser supports it, with the phone frame held still on desktop.

Teardown

Each page is standalone and runs its own features on load, so ordinary page loads need no teardown. The script reverts its GSAP context on beforeunload. If you mount a screen inside a single-page app instead, revert that context and clear the logger's clock and rest-timer intervals when the view unmounts.