Appointment Booking Template

Quick Start

Upload the folder to any static host and open index.html. Keep the six HTML files beside assets/ so relative links keep working. There is no build step, framework or package to install.

While editing, serve the folder with any local static server (for example python3 -m http.server) and open http://localhost:8000/index.html. Opening the files straight from disk works too.

GSAP, its plugins and Lenis load from a CDN, and the map (Visit page only) from unpkg and OpenFreeMap. Images, fonts, styles and the script are bundled locally.

Using It With Your Own Design

1. Identity. Replace "Garnett & Sons", the three-bar SVG mark, the address, phone number and hours in the nav and footer of each page (they are repeated in every file so each page stands alone).
2. People and colours. Each person is a key (lewis, nathan, shay), a colour token and a tone rule in assets/style.css. Rename the keys and set each token to the colour of that person's portrait backdrop (see Palette).
3. Photographs. Replace the portraits and cut photos in assets/img/, keeping the names, or change the paths. The home hero takes any framed photo of each person at work; the portraits elsewhere (the three chairs, barbers wall, booking and profile) look best shot on seamless paper in each person's colour, so the photo meets its section without an edge. Rewrite captions and alt text from what your photographs show.
4. Services and prices. Edit the price bands in prices.html, the service options in book.html and the headline-price strip under the three chairs on the home page. Prices are plain text; nothing is calculated except the booking total and the build-a-visit tool, which read the data-price and data-mins on each option.
5. Booking. Connect the booking page to your own service before taking real bookings (see Booking).

Everything visual lives in assets/style.css; everything interactive lives in assets/script.js, organised as one function per feature that returns early when its markup is absent. Delete a section, or a whole page and its links, and the rest keeps working.

Pages and Configuration

A profile per person. Only one profile is built. Copy lewis-garnett.html for each person, change data-tone on <body> and on the sections that use their colour, and swap the photographs and copy. Then point that person's links (barbers wall, triptych, "other chairs" tiles) at the new file.

Tones. Any element with data-tone="cherry" (or green, lilac, ink, bone) takes that ground and the matching text colour; add the tone class to paint its background. <body data-tone> sets the nav colour for the first section.

Backdrop Pull

Each [data-layer] in the hero is one person: a <figure> with data-tone, data-name, data-chair, data-note and data-first, holding a framed photo in .hero__frame. The hero photos are ordinary framed photos of each person at work, so any staff shot works; nothing needs a matching backdrop. Each [data-tab] matches a layer by key. Dragging a tab down past a third of the travel unrolls that layer; less rolls it back. A tap, Enter or Space plays the full unroll. The caption and the hero's Book link update from the layer's attributes. To add a person, copy one layer and one tab.

Without JavaScript the first layer shows and the tabs are links to barbers.html#key.

Booking

The booking page is a front end only. It collects a person, a service and a time, shows the total and end time, and issues a reference on the last step, but nothing is sent anywhere and no diary is checked. To take real bookings:

• link the "Book" buttons straight to your booking platform (Fresha, Booksy, Square Appointments, Calendly), or
• submit the form to a handler such as Formspree, Netlify Forms or your own endpoint in confirmBooking() inside initBooking, and replace the demo reference with the one your service returns.

How the demo data works:

• People are the barber radio group (value is the key, data-tone-key the colour, data-label and data-meta the ticket text).
• Services are the service group with data-mins, data-price and data-who (the keys of people who offer it). Services a person does not offer are struck through when they are chosen.
• Times are the slot group, one fieldset per day, with data-day, data-time and data-taken (keys of people already booked then). Taken times are struck through for the chosen person, and a chosen time that is no longer free releases itself.
• Deep links: book.html?barber=nathan opens on step two in Nathan's colour; add &service=shave to tick the service. The home page, barbers page, profile and prices tool all link this way.

Without JavaScript all three lists and the phone number are visible, so the page still works as a "ring us" page.

Palette

The three person colours were sampled from the portrait backdrops (the median of a clean corner across each person's photos). If you change a colour, sample your own backdrop in any image editor and set the token and its --*-rgb triple to that value, then check text contrast: each tone rule names its text colour and a dim alpha (--dim-a) measured for that ground. Light colours such as lilac take ink text; deep ones take bone.

Display type is Saira at its widest (125%) black italic, in capitals; body and labels are Golos Text 400 and 500. Both are self-hosted in assets/fonts/ (see Fonts under Images and Credits). To swap them, replace the @font-face rules at the top of assets/style.css and the two font preloads in each page's <head>, then set --font-display / --font-body.

Map and Routes

The Visit map is MapLibre GL on OpenFreeMap's Positron style (OpenStreetMap data, no API key, commercial use allowed). Set SHOP, STOPS and ROUTES in initRoutes to your own coordinates as [lng, lat]. Get real walking routes from a public OSRM router, for example https://routing.openstreetmap.de/routed-foot/route/v1/foot/<lng,lat>;<lng,lat>?overview=full&geometries=geojson, and keep the minutes and metres in the copy in step with the result. Keep the OpenStreetMap attribution. MapLibre's script and stylesheet are not in the page: loadMapLibre in assets/script.js adds them when the map comes within a screen of the viewport, so the page paints without them; change MAPLIBRE_JS and MAPLIBRE_CSS there to use another version or a self-hosted copy. Until the live map has drawn, and permanently without WebGL or the CDN, the map area shows assets/img/map-static.webp, a still of the same map with the route and pin, plus a link to the location on openstreetmap.org. After moving the pin, replace the still with a screenshot of your own live map (it carries the same OpenStreetMap and OpenMapTiles credit).

Opening hours live in the hours lists on the home and visit pages and in the OPEN table at the top of the script, which drives the "today" marker and the open-now line.

Accessibility and Fallbacks

• Real links everywhere, a skip link, visible focus, one h1 per page and labelled controls.
• The hero tabs are buttons with aria-pressed and work with Enter and Space; cut-wall chips are buttons with aria-pressed; the booking flow is native radio groups, moves focus to each step and announces it in a polite live region.
• The turn-the-head viewer is a radio group as well as a drag; the cut roll has arrow buttons and responds to the arrow keys.
• Reduced motion keeps every feature: the pull swaps instantly, the filter and steps change without movement, the cut roll becomes a native scroller and Lenis is not started.
• Without JavaScript or with the GSAP CDN blocked, every page is readable: the first person shows in the hero, the booking page lists everything with the phone number and the profile shows all three head angles.

Dependencies

The demo is pinned to GSAP 3.15.0 with ScrollTrigger, Flip (home and book), Draggable and InertiaPlugin (profile), and Lenis 1.3.17 for optional smooth scrolling. Compatibility floor: GSAP 3.12+, with core and plugins on matching versions. The Visit page also loads MapLibre GL 4.7.1, on demand as the map nears the viewport. Smooth scrolling is off with ?smooth=off in the URL or data-smooth="off" on <html>.

Images and Credits

The download contains art-directed WebP derivatives in assets/img/. assets/img-manifest.json lists every file with its source, size and quality; replace a source (a local file in assets/img-src/ or a URL) and regenerate with the asset script, or simply drop in your own WebP files with the same names.

Responsive sizes. Every photograph wider than 900px also ships as -400 and -800 files, plus -1200 from masters of 1500px or more (manifest entries with variantOf). The pages serve them with srcset and a sizes value measured from each slot's rendered width (cover-cropped slots use the scaled image width), so phones download the small files, and the scripted swaps (the shop mosaic and the booking stage) carry the srcset across. If you replace a photo, replace its variants too, or delete the srcset attribute from that <img>. map-static-800.webp is the phone version of the map still. The first-screen photo on each page loads eagerly with fetchpriority="high"; everything below the fold is loading="lazy".

The portraits of the three barbers, Roy Garnett, all the finished cuts on coloured backdrops (cut-*, head-*), the shopfront (shopfront-v2), the shop photographs (shop-*, hero-shop-lewis) and shay-work are AI-generated images of people and places that do not exist, made for this template. Replace them with photographs of your real team and premises before launch; never present generated portraits as real staff or real clients.

map-static.webp is a screenshot of the live map: map data © OpenStreetMap contributors (ODbL), tiles © OpenMapTiles via OpenFreeMap.

The remaining photographs are licensed through Pexels, which permits use in website templates. They show unrelated people, not Garnett & Sons' staff or clients.

Fonts

Both families are self-hosted in assets/fonts/ as the latin woff2 files Google Fonts serves, declared by the @font-face rules at the top of assets/style.css, so the pages make no font requests to another site: Saira (display, the 125% wide black italic) and Golos Text (body and labels; a variable font, one file for 400 and 500). Both are preloaded in each page's <head>.

Licence: SIL Open Font License 1.1, full text and copyright lines in assets/fonts/OFL.txt (Golos Text: Copyright 2019 The Golos Text Project Authors; Saira: Copyright 2020 The Saira Project Authors). Keep that file with the fonts. To use Google Fonts instead, delete the @font-face rules and the two font preloads and add the Google Fonts <link> to the <head>.