Gym Template

Quick Start

1. Unzip the folder and open index.html in a browser, or upload the whole folder to any static host. There is no build step.
2. Every page (index.html, program.html, floor.html, coaches.html, membership.html, visit.html) loads the same assets/style.css and assets/script.js.
3. Edit the copy in the HTML, repaint the seven color tokens at the top of assets/style.css, and change the training model in the "YOUR PROGRAM" block at the top of assets/script.js.

script.min.js is a minified copy of script.js. Point the pages at it in production, or keep the readable file; they behave the same.

Using It With Your Own Design

• Color. The site runs on seven tokens in :root: --plate (the committed racing-green ground and display type), --plate-deep, --paper, --paper-dim, --ink, --bronze (buttons and the announcement bar) and --bronze-lt. Each has an -rgb twin for translucent uses. Measured contrast pairs are recorded in the comment above them; re-measure if you change them.
• Type. Spectral (a book serif with a real italic) carries body copy and, in the default palette, the headings; Archivo at its widest carries small-caps labels. Headings, lift words and the big figures read --font-display and --font-display-weight, so each palette below can bring its own display face. Change --font-serif, --font-display and --font-label and the Google Fonts link in each page head; drop the families you do not use from that link.
• The crest is drawn once per page as <symbol id="crest"> at the top of <body> and reused with <use href="#crest">. Edit its two textPath lines and the center letter, or replace it with your own mark.
• Headings are set upright. Italic (<em>) is kept for the one word in a heading that genuinely carries emphasis, as on "barbell" in the home hero; use it sparingly.
• Another kind of club. For a boxing club, climbing wall or rowing club, keep the structure, swap the photographs and copy, redraw the floor plan for your room, and either reskin the bar as your own calculator or delete it (see Program below).

Pages and Configuration

Home (index.html)

Hero (crest, headline, the coaching photograph with a slot for your own video, and the deck under it: the readout and the loaded bar side by side), then the program in one line with four figures, the four lifts set as display type, a full-bleed photograph of the floor, the history, the coaches, three prices and the Saturday induction.

The hero is the bar's first home. Everything inside data-rig shares one state, so dragging the bar, pressing a lift name or using the keyboard updates the readout, the plate list and the "See your twelve weeks" link ([data-program-link]), which opens the Program page on that lift and weight.

Adding a hero video

The hero is a video-ready slot:

Code snippet omitted: it ships with the download.

The photograph shows on its own, and the slot ships with data-video-src="", so no video is requested. To add one, save a muted MP4 in the folder and set data-video-src in index.html to its path, for example data-video-src="assets/video/hero.mp4". The script then attaches it over the photograph, muted and looping, and shows the Pause button. Under reduced motion it waits on the photograph until the visitor presses Play. The band is cropped short on laptop screens so the bar's deck stays in the first view, so keep the action in the middle of the frame.

Aim for 1280x720, 25fps, H.264, no audio, a seamless loop of 6 to 10 seconds and about 3MB or less, for example:

Code snippet omitted: it ships with the download.

Program (program.html)

The signature page. Everything inside data-rig reads one state: the chosen lift and a max for each of the four lifts. The bar ([data-bar]) is dragged, or focused and moved with the arrow keys (2.5 kg), Page Up/Down (10 kg), Home and End; there is also a number field and steppers. The four lift words choose the lift, and the twelve week cards are buttons that load that week's working weight onto the big bar.

At the top of script.js:

Code snippet omitted: it ships with the download.

If you change BLOCK or DEFAULT_MAX.squat, update the week cards and plates written into program.html and the hero bar in index.html, which is what a visitor without JavaScript reads. Maxes are remembered in localStorage under franklin-street-bar, so a weight set on the home page is still there on the Program page, and ?lift=deadlift&max=180 loads a lift and weight.

To remove the bar entirely, delete program.html and its links, and replace the home hero's hero__bar and hero__deck blocks with your own copy.

Floor (floor.html)

A full-bleed photograph of the room, the floor in four figures (two of which count up: <span data-count-to="1840">1,840</span>, change both the attribute and the text), the floor plan, the kit as a specification sheet and the opening hours.

The floor plan is an SVG of the room with eight platform buttons laid over it:

Code snippet omitted: it ships with the download.

Positions are percentages of the plan, which is drawn in a 1000 x 560 box. Each platform's facts live once, in the list under the plan (<li data-platform="3"> with a heading and a <dl>). Without JavaScript that list is what shows; with it, the list is hidden and pressing a platform copies its entry into the panel beside the plan. To redraw the plan for your room, edit the SVG shapes (windows, columns, racks, stairs) and move, add or remove the buttons and list items in pairs.

Coaches (coaches.html)

Name buttons ([data-coach="0"]) and cards ([data-coach-card="0"]) pair by index; with JavaScript the cards share one stage and the best lifts count up, without it they are listed in turn. The program review band links to the induction form.

Membership (membership.html)

Prices are plain text: the program and open gym, a program review, a day pass, one-to-one coaching and the free induction. The block-start picker ([data-picker]) lists the next six Saturdays; choosing one shows the induction date, the Monday week 1 starts, the two easier weeks and the test day (all read from BLOCK), a twelve-week calendar strip and what the block costs at MONTHLY in script.js. Change the price in the copy and MONTHLY together. Without JavaScript the picker shows a worked example.

Visit (visit.html)

• Induction form ([data-induction-form]) lists the next six Saturdays, validates name and email and shows a confirmation, but sends nothing. Replace the marked lines in initInduction() with a fetch() to Formspree, Netlify Forms or your CRM.
• Map ([data-map]) is MapLibre GL on OpenFreeMap tiles (no key). Change GYM, STATION and ROUTE at the top of initMap(), and keep the OpenStreetMap credit.

Palette

Token	Hex	Use
--plate	#1F4A38	Ground, display type on paper
--plate-deep	#133326	The deck under the bar, deeper bands, footer
--paper	#F2EDE3	Reading ground, the plates on the bar
--paper-dim	#CADCCF	Secondary text on green
--ink	#17181C	Body text on paper
--bronze	#86643A	Buttons, announcement bar, collars
--bronze-lt	#C9A774	Large labels on green only (4.42:1)

Palettes

Four color-and-type presets ship in assets/style.css. Racing green is the :root default; the other three are :root[data-palette="..."] blocks that restate every color token and swap the display face. Paper, ink and both bronzes are shared, and the photo scrims are drawn in ink, so no preset changes what sits on a photograph.

Palette	data-palette	Ground (--plate / --plate-deep / --paper-dim)	Display face	Paper on plate
Racing green	(none, the default)	#1F4A38 / #133326 / #CADCCF	Spectral 300	8.59:1
Charcoal	charcoal	#2D3237 / #1E2226 / #CBD0D5	Barlow Condensed 600	11.09:1
Oxblood	oxblood	#6B2131 / #481520 / #E6CDD1	Bodoni Moda 500	9.54:1
Petrol	petrol	#1C4A55 / #12323A / #C9DCE0	Alegreya Sans 500	8.33:1

To use one, set it on every page's root tag, for example <html lang="en-US" data-palette="oxblood">, and change the theme-color meta to its --plate. Or copy that block's values into :root and delete the other blocks. Either way, trim the Google Fonts link in each page head to the display face you keep. --bronze-lt stays a large-label color on every ground (4.29:1 on petrol, the lowest).

Accessibility and Fallbacks

• The bar is a focusable role="slider" with a spoken value; on touch a horizontal drag loads it and a vertical swipe scrolls.
• Lift words, week cards and floor-plan platforms are native buttons with aria-pressed; results are announced politely.
• The phone menu is a real button with aria-expanded; Escape or a click outside closes it and focus returns.
• With JavaScript off, every price, coach, platform and the program at its default are in the markup; controls that need the script stay hidden.
• If the GSAP CDN is blocked, reveals are skipped and the interactive parts still work.
• Under prefers-reduced-motion reveals and count-ups are off, the bar redraws without sliding, any video waits on its photograph and the page crossfade is disabled.

Dependencies

• GSAP 3.12+ and ScrollTrigger (demo pinned to 3.15.0 from jsDelivr)
• Lenis 1.1+ for optional smooth scrolling (demo pinned to 1.3.17); delete its script tag or add data-smooth="off" to <html> to turn it off
• MapLibre GL 4.x on visit.html only (demo pinned to 4.7.1)
• Google Fonts: Spectral and Archivo

Images and Credits

Bundled images are WebP derivatives in assets/img/, cropped, resized and lightly eased in saturation, listed with their sources in assets/img-manifest.json. Rebuild them with bun scripts/build-template-assets.ts strength-gym-template --force (in the GSAP Vault repo), or replace a file with your own at the same name and size.

• Pexels photographs under the Pexels license (https://www.pexels.com/license/), page URLs https://www.pexels.com/photo/<id>/:
  • floor-racks (Floor page head): 15679567
  • lift-deadlift: 19132573
  • visit-corner: 6999117
  • review-log: 39219660
  • deadlift-setup: 39219674
  • induction: 39219652
  • member-bench: 6922167
  • plate-rack: 6389853
• AI-generated images made for this template, of the fictional gym and its coaches; they do not show real people:
  • hero-coach (Home hero and thumbnail): the head coach cueing a back squat
  • floor-room (Home, the floor section): the empty room, eight platforms and racks
  • coach-1 to coach-4 (coach portraits)

No video is bundled; see "Adding a hero video".

Franklin Street Gymnasium, its address number, coaches, members, history, floor plan and prices are fictional. Franklin Street, Greenpoint Avenue, the Greenpoint Av G train station and the walking route on the map are real. Prices are in US dollars; the bar and the program load in kilos, as competition plates do.