ATLAS - Fitness Training Studio HTML Template

ATLAS is a website template for functional-training studios and small gyms — the kind that sells a timetable and a coach standing next to you, not a row of machines.

It is hand-written HTML, CSS and JavaScript. No build step, no npm install, no framework. You open the folder, edit the text, and upload it.

WHAT MAKES IT LOOK DIFFERENT

Hard geometry: zero rounded corners anywhere, a diagonal slice cutting every band, one yellow against black and grey. The hero is a muted video behind a headline, and a slim custom scrollbar rides on top of the page — it turns yellow when it passes over a black band, so it never disappears.

WHAT IT DOES, NOT JUST HOW IT LOOKS

A weekly timetable: seven day tabs, 25 classes. Click a class and its day, time and name go straight into the booking form, the page scrolls there and puts the cursor in the first field. Today selects itself — the tab for the current day opens with a "Today" badge. A live "next class" chip on the home page: "Next class in 1 h 20 min · Reformer", or "tomorrow at 07:00" when there is nothing left today. A pricing comparison table and a list of one-off items. A privacy notice set as a document, with its own spacing — an honest GDPR stub, not invented legal text.

FORMS THAT DO NOT PRETEND

The submit button carries disabled in the markup, so it stays off even if the script never runs. It switches on only when you put a URL in data-endpoint, the "thanks" message appears only after your server answers 2xx, and pressing Enter with no endpoint keeps what the visitor typed instead of reloading the page. A switched-off button also looks switched off.

SPEED, MEASURED ON THE ARCHIVE YOU DOWNLOAD

Not on a warm demo server: on the unpacked archive, throttled to a mid-range phone (390x844 viewport, 4x CPU slowdown, 1.6 Mbit/s, 150 ms latency), median of five cold runs.

Home — LCP 1.25 s, CLS 0.000, TBT 0 ms, 369 KB Schedule — LCP 1.13 s, CLS 0.000, TBT 0 ms, 227 KB Pricing — LCP 1.25 s, CLS 0.000, TBT 0 ms, 239 KB Studio — LCP 1.13 s, CLS 0.000, TBT 0 ms, 336 KB Contact — LCP 1.27 s, CLS 0.000, TBT 0 ms, 241 KB Privacy — LCP 1.00 s, CLS 0.000, TBT 0 ms, 182 KB

Google's "good" threshold is 2.5 s for LCP and 0.1 for CLS. The hero video is not in those figures: it starts downloading only after the page has loaded, so it never competes with the frame the browser measures.

Zero external domains. Three self-hosted typefaces, latin and latin-ext, the second loaded only on a page that actually uses a Central-European character.

Every page carries a single H1, a unique title and description, HealthClub JSON-LD, sitemap.xml and robots.txt. Real ARIA on the day tabs — roles, aria-selected, arrow-key movement — and prefers-reduced-motion honoured in both CSS and JavaScript.

ABOUT THE MEDIA

The fifteen photographs come from Unsplash under the Unsplash Licence; we did not generate them and did not shoot them, and each source URL is in CREDITS.txt. The hero video was generated with AI video tools by the author of this template and then edited by hand — no stock footage is used and no release is required. One thing worth knowing before you reuse the clip: around the tenth second the name TECHNOGYM is legible on a weight plate and on a machine. That is a live trademark of the equipment maker. Incidental appearances like this are normal in gym footage and are not a problem for showing the template, but whether to keep that frame in a commercial edit is your call.

Features

Six pages: home, schedule, pricing, studio, contact, privacy Weekly timetable, 25 classes, one click fills the booking form Today's tab opens by itself, with a "Today" badge Live "next class" chip on the home page Membership comparison table and one-off price list Hero video with two poster crops - wide for desktop, tall for phones Five large photographs in two widths; phones download the 800-pixel version Custom overlay scrollbar that recolours over dark bands Self-hosted Roboto, Roboto Condensed and Saira Condensed - no Google Fonts request Forms disabled until you give them an endpoint, and visibly so HealthClub JSON-LD, sitemap.xml, robots.txt Responsive from 320 px up, no dependencies

Requirements

None. Plain HTML, CSS and JavaScript - no framework, no build step, no package manager, no server-side code. Any static host works: a shared hosting folder, Netlify, Vercel, GitHub Pages, or an S3 bucket.

Tested in current Chrome, Safari, Firefox and Edge.

Instructions

1. Unzip the archive. 2. Open index.html in a browser - it works straight from disk, nothing to install. 3. Edit the text in the six pages. 4. Edit the timetable in TWO places: the rows in schedule.html and the SCHEDULE object in page.js. They are not generated from one another - the documentation says so and shows what to keep in step. 5. Put your URL in data-endpoint on the two forms. 6. Replace the photographs in img/ and the video in video/. 7. Upload the folder.

Full documentation is in documentation/index.html inside the archive.