Freeframe
Health & Fitness9 pages · 3 downloads · Free

Bloom

A calm, elegant website for a hair salon and day spa, with online booking and gift cards.

Stack
v1.0.5 changelog

About this template

Bloom is a complete site for Bloom Hair & Spa, a fictional independent salon. It ships with a filterable service menu, a team page with level-based pricing, a five-step booking wizard that works out real time slots from opening hours, staff rotas and treatment length, a gift card builder with a live preview, and a gallery with saved looks and a lightbox.

Features

  • Five-step booking wizard with time slots from opening hours, staff rotas and treatment length
  • Level-based pricing that updates the running total as you choose a stylist
  • Gift card builder with amount picker, three designs and a live preview
  • Service menu and team filters with live result counts
  • Gallery with saved looks (localStorage, validated) and a keyboard-friendly lightbox
  • Before/after comparison slider that works with keyboard and touch
  • Live "Open now" status and today's hours highlighted
  • Validated contact, booking and newsletter forms (demo only)
  • Illustrations, portraits and looks drawn in SVG — no photos to license
  • Accessible mobile menu, skip link, back-to-top button and scroll reveals

Pages included

Quick start

unzip bloom.zip && cd bloomopen index.html        # that's it # optional, after adding new Tailwind classes:npm install && npm run build
Read the Bloom documentation →

Changelog

  1. v1.0.5

    Fixed

    • The footer copyright year is now this year in the browser; it was fixed at 2026.
  2. v1.0.4

    Fixed

    • Saved looks and the remembered booking details now work when the browser blocks localStorage (in a sandboxed iframe, like the freeframe.dev demo, or with strict privacy settings): the state is kept in memory for the page view. Before, "Book another" didn't fill in the remembered details.
  3. v1.0.3

    Changed

    • The CSS build no longer reads the documentation and metadata files (*.md, *.json), so words in the guides can no longer add unused rules to assets/css/style.css. No visible change.
  4. v1.0.2

    Fixed

    • Booking: ?service= and ?stylist= only match the data's own ids. ?service=constructor or __proto__ stopped the script ("Cannot set properties of null") and ?stylist=constructor showed "Object" as the stylist; they are now ignored like any unknown value.
    • Contact: a " in ?topic= no longer throws (the topic is matched by comparing option values instead of building a selector).
    • Gift cards: the "£—" placeholder and the custom amount error ("Enter a whole amount from £25 to £500.") use the salon's currency setting instead of a hard-coded pound sign.
    • Booking: treatment and team names (and roles) are escaped before they are inserted into the summary and the stylist list.
  5. v1.0.1

    Added

    • Full documentation in DOCS.md.

    Fixed

    • "Best available team" bookings now check each person's working days, diary and treatment times; before, many offered times couldn't actually be staffed.
    • Prices are formatted with Intl.NumberFormat using the salon's currency and locale instead of a hardcoded "£".
  6. v1.0.0

    Added

    • Initial release: a nine-page site for Bloom Hair & Spa, a fictional salon and day spa: Home, Services & prices, Team, Book online, Gift cards, Gallery, About, Visit & contact and a 404 page.
    • Five-step booking wizard (treatments, stylist, date and time, details, review) with time slots worked out from opening hours, each team member's working days and the length of the chosen treatments. Hair and colour prices scale with the stylist's level, and the running total and duration update as you go. ?service= and ?stylist= preselect choices.
    • Gift card builder with preset or custom amounts (£25–£500), three designs, a live preview, a character counter and scheduled delivery. Demo checkout only: no payment is taken.
    • Service menu and team page filters with live counts, and a gallery with saved looks and a lightbox (arrow keys, Esc, focus returned to the look you opened).
    • Before/after comparison slider built on a native range input.
    • "Open now" status and today's row highlighted in opening hours tables.
    • Validated booking, contact and newsletter forms. Saved looks and remembered booking details are validated when read from localStorage.
    • Accessible mobile menu, skip link, back-to-top button, scroll reveals that respect reduced motion, unique titles, descriptions and social preview image on every page.
    • SVG illustrations for the hero, team portraits, gallery looks, before/after, salon and map.

More templates

Fade website template preview

Fade

Health & Fitness

A bold, vintage-modern barbershop website with live wait times, online booking, a product shop and gift cards.

HTML + TailwindNext.jsAstroWordPress

9 pages · 161 KB

Documentation