Stillpoint Massage

Start here

Stillpoint Massage is a Bootstrap 5 landing page for an independent massage practice. It combines a clear treatment menu, first-visit questions, an illustrative therapist introduction, appointment information, return-visit links, and a reviewable email inquiry form.

Extract the ZIP and open index.html. Keep all assets beside it. No build tools or backend are required. A local web server can help test clipboard behavior.

stillpoint-massage/
  index.html
  README.html
  LICENSES.txt
  assets/css/style.css
  assets/js/main.js
  assets/vendor/bootstrap.min.css
  assets/vendor/bootstrap.bundle.min.js
  assets/images/treatment-room.webp
  assets/images/therapist.webp
  assets/images/favicon.svg

Business & trust content

Edit the plain-text logo, page title, description, introduction, contact details, and footer in index.html. The demonstration city is San Luis Obispo, California. Replace 999-999-9999, hello@stillpointmassage.example, and “Address to be announced.” Sample inquiry hours are Mon–Fri 9am–6pm, Sat 9am–4pm, and Sunday closed, Pacific time.

Keep details consistent in the pinned information bar, Visit section, footer, policies, and JavaScript. Link your genuine phone number using tel: after replacing the placeholder.

Alex Morgan is a fictional profile with an illustrative portrait. Replace the name, approach, image, and profile notice with actual therapist information. Add only verified qualifications, registrations, and relevant experience. Replace the studio image with real practice photography when available.

No testimonials or star ratings are included because genuine reviews were not supplied. If adding reviews, use permissioned, authentic quotations with accurate attribution or link to your real review profile. Update the trust FAQ accordingly; do not fabricate proof or outcomes.

Treatments & choosing a session

Four sample appointment options are included: Relaxation massage, 60 minutes/$95 and 90 minutes/$135; Focused massage, 45 minutes/$75 and 60 minutes/$100. These are editable demonstration durations and USD prices. Confirm what appointment time includes and avoid implying all time is hands-on treatment.

Each .menu-item uses a data-category of relax or focus. Matching filter buttons use data-filter; the two choice links use data-select-filter. Keep the “all” filter and update the hidden item count after menu changes. Arrow keys, Home, and End select categories.

Each treatment inquiry link has a data-service value that must exactly match a form option, including duration. The script preserves other entries, preselects the treatment, and invalidates a previously prepared draft. “Help me choose” supports visitors who are unsure without making suitability recommendations.

First visits, policies & returning clients

Edit the first-visit section and FAQs to match the actual practice’s arrangements for clothing, changing, draping, pressure, and privacy. The current copy suggests questions and conversations; it is not a statement of verified treatment protocols.

No cancellation notice period, fee, deposit, package, or membership has been invented. Before launch, supply the real terms in the appointment-information section and cancellation FAQ. Explain how to contact the practice for changes. Align policy wording with any external booking provider.

“Request another session” sets the request-type field to Returning client. The appointment-change link sets it to Change an existing appointment. Both preserve other entries and invalidate any existing draft. The request type appears in the email draft. These actions do not modify a real appointment.

The therapist inquiry link uses data-practitioner to append the therapist name to the message without replacing existing text. Update it when changing the profile name.

Connect online booking & reminders

At the top of assets/js/main.js, settings.bookingUrl is blank. The hero action currently links to the inquiry form. To connect your provider, enter its real HTTPS booking URL. The script changes elements with data-booking-link to “Book online,” opening that URL in a new tab. Add this attribute to other booking CTAs if desired. Invalid or non-HTTPS URLs leave the inquiry fallback intact.

Availability, appointment management, confirmation, cancellation handling, payments, and reminder delivery remain the provider’s responsibility. This static page does not implement those services. Configure and test reminders in your provider account before advertising them.

After connecting, revise the booking FAQ, reminders text, and policies to describe the actual service. Keep an email inquiry path for questions. Review the external provider’s privacy and cancellation behavior and test the link on desktop and mobile.

Email drafts & validation

Set the actual recipient, businessName, and timezone in assets/js/main.js. The sample .example recipient will not reach a real practice. The timezone is America/Los_Angeles; update visible Pacific-time references too if changing it.

Name, email, treatment, date, and time are required. Phone and message are optional. Past dates are rejected based on the business timezone. Times are preferences, not live availability, and are not checked against opening hours.

“Prepare my email” builds a visible draft. “Open email app” hands it to the visitor’s mail app, where they choose whether to send. “Copy draft” copies it when permitted, or selects it for manual copying. Editing any field or changing a selected treatment/request invalidates the old draft. Reset clears the form and draft.

No entries are submitted automatically, stored in browser storage, or used to confirm an appointment. Avoid sensitive medical information in this demonstration form. If adding a secure intake system, document its real behavior and update the privacy text.

Colors, images & typography

Edit CSS variables in assets/css/style.css. Stillpoint-specific layout rules appear after the shared control styles.

Headings use Georgia; body text uses Arial/Helvetica with system fallbacks. General copy is 18px desktop/17px mobile, hero copy 20px/18px, treatment descriptions and FAQs 16px, form labels 15px, inputs at least 16px, notes around 13px, and footer links 14px. Keep these readable proportions when editing.

The two local WebP images are illustrative. Replace them and their alt text. The room image is landscape; the therapist image is portrait. Adjust crops with object-position, preserving object-fit:cover to avoid stretching.

Navigation, FAQs & accessibility

The phone/address/hours bar and main navigation share one sticky header. ResizeObserver measures only .pinned-rows, excluding the expanded mobile menu, into --header-height. This controls section offsets and the menu’s available height. Keep the wrappers intact.

The mobile menu closes on link selection or Escape and scrolls on short screens. Section destinations receive focus without a container outline. Buttons, links, filters, and inputs retain visible keyboard focus. Preserve the skip link, labels, image descriptions, and reduced-motion support.

Eight FAQs use Bootstrap Collapse, initially closed and single-open. Keep unique answer IDs and matching target/ARIA attributes. Privacy and Terms of Use open Bootstrap Modals with Escape, focus trapping, focus return, and scrollable content. Keep dialog close controls and titles.

Troubleshooting & launch checklist

• Replace demo contacts, photos, therapist information, sample prices/durations, and appointment terms.
• Set the real email recipient and timezone. Prepare and manually send a test inquiry.
• If using online booking, set the actual HTTPS URL, configure reminders with that provider, and update explanatory copy and policies.
• Test treatment filtering, preselection, request type, therapist links, past-date rejection, draft invalidation, copying, Reset, FAQs, and dialogs.
• Review desktop, tablet, 390px and 320px screens, plus short-screen menus and pinned-header offsets.
• If edits appear missing, verify the exact file and URL. CSS and JS start at ?v=1.0; increment affected asset versions and distribute matching HTML. Cached HTML may also need refreshing.
• If text looks small, check 100% browser zoom, viewport metadata, and that custom CSS follows Bootstrap.
• If email handoff fails, configure a default email app or copy the draft. Clipboard fallback selects text for manual copying.
• Keep asset paths and filename capitalization intact. Keep the local Bootstrap bundle before main.js.
• Remove demonstration disclosures only after replacing and verifying their content.

Dependencies & notices

Bootstrap 5.3.3 and bundled Popper 2.11.8 are included locally under the MIT license. See LICENSES.txt. Fonts are system references, not distributed files. Photos are illustrative assets and do not verify staff or premises. The favicon is SVG artwork. Check rights for all replacement assets.