Overview

A calm, modern HTML template for psychologists, counselors, therapists and group practices. Mindara ships three home page designs, a light and a dark mode, a right-to-left layout for every page, and a practice that actually works: every therapist’s real free hours, a five-step booking form, a six-question therapist matcher, a sliding-scale fee calculator, an out-of-network estimate, the PHQ-9 and GAD-7 questionnaires, groups that never go out of date and a bookshop.

What’s included

• 3 home page designs — a group practice, a psychologist’s own site and an online-therapy practice — each with a three-slide hero, its own scroll moment (Untangle, Mood Weather, Pebble Balance) and the Calm Breath WebGL light
• Light and dark mode with a header toggle the visitor’s browser remembers; a language picker in the top bar that turns any page right to left
• Live practice figures: open or closed now, the next free session with anyone, each therapist’s next opening, read from the visitor’s own clock
• Book A Session in five steps that never block: session, therapist, in person or by video, a real free time, details; a reference and an Add To Calendar file at the end. A time picked anywhere on the site opens the form already filled in
• Find Your Therapist: six questions, the three best-fitting therapists with the reasons and their next opening
• Pricing & Insurance: every fee, an insurance check, a sliding-scale calculator and an out-of-network reimbursement estimate
• Self-Check: the PHQ-9 and GAD-7 scored as you answer, with a crisis line that appears the moment it is needed
• Groups and workshops built from repeat rules, so the demo never shows a past date; seats left, kind filters, a countdown, a places form and .ics files
• A bookshop with cart, coupons, delivery, tax, checkout and wishlist, all remembered between pages
• About, therapists with filters, therapist profile with weekly hours, services and five service pages, journal, FAQ, contact with working PHP form, login, register, forgot password, coming soon, 404
• Fully responsive, wide-screen aware, W3C-valid, zero console errors; every animation switches off for visitors who prefer reduced motion

Getting Started

Thank you for choosing Mindara. Follow the steps below to get your site live.

1. Open locally

Unzip the package and open mindara/index.html in any modern browser (Chrome, Firefox, Edge, Safari). No build tools are needed. The forms need a PHP host (see Contact Form); everything else works straight from your computer.

2. Deploy to a server

Upload the contents of the mindara/ folder to your hosting with an FTP client (such as FileZilla) or your hosting control panel, then open your domain.

3. Customise

All custom styling lives in assets/css/style.css (a numbered Table of CSS at the top) and assets/css/responsive.css. Colours and fonts are CSS variables — see Colors & Fonts. Therapists, hours, fees, groups and books all live in one block of main.js — see Therapists, Hours & Booking.

File Structure

The key files and folders included in the template.

Folder Structure

The package unzips to two folders: Documentation/ (this guide) and mindara/, the template. Every page sits in the template’s root; everything the pages load sits under assets/:

mindara/
├── *.html                              the 32 pages, all in the root (see File Structure)
├── sendmail.php                        the AJAX mail handler for the forms
└── assets/
    ├── css/
    │   ├── style.css                   all custom styles, numbered Table of CSS
    │   ├── style.rtl.css               the right-to-left twin of style.css
    │   ├── responsive.css              breakpoints 1399 / 1199 / 991 / 767 / 575
    │   ├── responsive.rtl.css          the right-to-left twin of responsive.css
    │   ├── fontawesome-all.css         Font Awesome Free, loaded locally
    │   └── plugins/                    vendor stylesheets
    │       ├── bootstrap.min.css
    │       ├── bootstrap.rtl.min.css
    │       ├── jquery.fancybox.min.css
    │       └── swiper-bundle.min.css
    ├── js/
    │   ├── main.js                     all custom scripts, numbered JS INDEX (48 blocks)
    │   └── plugins/                    vendor scripts
    │       ├── bootstrap.bundle.min.js
    │       ├── gsap.min.js
    │       ├── jquery-3.7.1.min.js
    │       ├── jquery.fancybox.min.js
    │       ├── ScrollTrigger.min.js
    │       └── swiper-bundle.min.js
    ├── fonts/theme-icons/              the light / dark toggle's sun and moon (woff2, woff + css)
    ├── webfonts/                       Font Awesome Free font files
    └── img/                            images, one folder per section
        ├── avatars/                    7 images
        ├── bg/                         3 images
        ├── books/                      14 images
        ├── couples/                    5 images
        ├── demos/                      3 images
        ├── family/                     3 images
        ├── flags/                      6 images
        ├── groups/                     7 images
        ├── icons/                      16 images
        ├── life/                       1 image
        ├── logo/                       4 images
        ├── mono/                       2 images
        ├── portraits/                  4 images
        ├── shapes/                     2 images
        ├── team/                       11 images
        └── therapy/                    8 images

Colors & Fonts

The whole design is driven by CSS variables at the top of style.css (section 1.1 Design Tokens). Change a token once and every section, button and card follows.

Each colour used with transparency has an -rgb companion (for example --md-color-primary-rgb: 79, 107, 76); change both together. --md-color-apricot-text is the deeper apricot used for small apricot text on light grounds, so it stays readable, and --md-on-primary is the text colour on sage buttons and active states. Night bands (client words, talks, the footer) use --md-color-night.

Fonts

Two Google Fonts are loaded in the head of each page: Petrona (headings, figures and the italic apricot accent words) and Lexend (body text, buttons, navigation and forms). Swap them by editing the Google Fonts link and the --md-ff-heading and --md-ff-body variables.

Wide screens

The content width grows with the screen: 1440px from 1600px wide and 1560px from 1960px, with a slightly larger base font, so a large display never looks like a scaled-down page.

Light & Dark Mode

The moon and sun button in the header switches the whole site between light and dark, easing every colour rather than snapping. The choice is stored in the visitor’s browser (localStorage, key md-theme) and applied by a one-line script in the <head> of every page, before anything is drawn, so a dark page never flashes light.

Dark mode is a second set of the same variables under [data-theme="dark"]:

To start every visitor in dark mode, add data-theme="dark" to the <html> tag of each page. To remove the toggle, delete the .md-theme-toggle button from the header.

Therapists, Hours & Booking

Everything the practice knows lives in JS block 09 Practice Data of assets/js/main.js. The pages carry the same values printed in, so they read correctly before the scripts run; the scripts then keep every time current for the visitor.

Office hours (HOURS)

• Monday — 8:00 AM – 8:00 PM
• Tuesday — 8:00 AM – 8:00 PM
• Wednesday — 8:00 AM – 8:00 PM
• Thursday — 8:00 AM – 8:00 PM
• Friday — 8:00 AM – 5:00 PM
• Saturday — 9:00 AM – 2:00 PM
• Sunday — Closed

The top bar’s “Open Now / Closed Now” line and the contact card read this list (index 0 is Sunday; null means closed).

Therapists (THERAPISTS)

The 7 therapists (Dr. Lea North, Clara Bennett, Dr. Daniel Brooks, Dr. Helen Carter, Mark Ellison, Dr. Amara Okoye, Ruth Feldman) each have their focus, languages, the sessions they offer, the formats they work in, the plans they are in network with and their weekly hours:

{ "id": "clara-bennett", "name": "Clara Bennett", "title": "Couples & Family Therapist", "cred": "LMFT",
  "concerns": ["relationships", "family", "anxiety"], "sessions": ["couples", "family", "individual", "online", "consult"],
  "formats": ["office", "video"], "langs": ["en", "es"], "insurers": ["aetna", "cigna", "oscar", "emblem"],
  "hours": [[1, "10:00", "19:00"], [3, "10:00", "19:00"]], "busy": 0.55 }

Free times come from each therapist’s hours on a 30-minute grid, at least 120 minutes from now and up to 21 days ahead. The demo fills part of each week with booked hours (busy, 0–1) so the lists look real; connect your own calendar by replacing the bookedOn() function with your booked times.

Sessions and fees (SESSION_TYPES)

• Individual Therapy — 50 minutes, $160
• Couples Therapy — 80 minutes, $220
• Family Therapy — 80 minutes, $220
• Group Therapy — 90 minutes, $60
• Online Therapy — 50 minutes, $145
• Free 15-Minute Consultation — 15 minutes, free

Book A Session

Five steps: the kind of session, the therapist (only those who offer it), in person or by video, a free time over the next two weeks, and the details. Continue always moves on; only the final button checks the form. The summary beside it follows every choice and says whether the therapist is in network with the visitor’s plan. A free time chosen on another page (Home 02’s slot chips, Home 03’s phone picker, the matcher, a therapist profile) is handed over in sessionStorage (key md-pick) and opens the form at the last step, filled in — nothing goes in the address bar.

Matcher, Fees & Self-Check

Find Your Therapist

The session, format and language must fit; the concern ranks the matches (a therapist’s first focus scores highest), then being in network with the chosen plan, then free hours in the part of the week the visitor prefers. The same matcher drives the three questions on Home 03.

Sliding scale (POVERTY, SLIDING)

The calculator compares the household’s income with the federal poverty guideline for its size (2025: $15,650 for one person, $5,500 for each extra person) and charges a share of the fee: up to 150% of the guideline: 30% of the fee; 151–200% of the guideline: 45% of the fee; 201–300% of the guideline: 60% of the fee; 301–400% of the guideline: 80% of the fee; above 400%: the full fee. Update POVERTY each year when the guidelines change.

Out-of-network estimate

The plan pays its share of its allowed amount once the deductible is met: plan pays = (allowed − deductible left) × (1 − coinsurance). The visitor pays the rest of the fee.

Online plans (ONLINE_PLANS)

One video session is $145; the four-session plan is $520 a month ($130 a session); the sliding scale starts from $44.

Self-Check (SCREENERS)

• PHQ-9 (low mood, 0–27) — Minimal up to 4, Mild up to 9, Moderate up to 14, Moderately Severe up to 19, Severe up to 27
• GAD-7 (anxiety, 0–21) — Minimal up to 4, Mild up to 9, Moderate up to 14, Severe up to 21

The bands are the published ones. Any answer above zero on PHQ-9 item 9 shows the crisis box at once with 988 and 911 (United States); change those numbers in self-check.html and in the footer for your country. The questionnaires are a screening, not a diagnosis, and the page says so.

Groups & Workshops

A group is a rule, not a date, so its next date is always worked out from today (EVENTS):

{ "id": "anxiety-group", "rule": "weekly", "day": 2, "start": "18:30", "mins": 90,     // every Tuesday
  "capacity": 12, "booked": 9 }                                                       // places left = capacity - booked
{ "id": "grief-circle", "rule": "monthly", "nth": 1, "day": 4, "start": "19:00" }       // the 1st Thursday of every month
{ "id": "couples-workshop", "rule": "once", "in": 10, "start": "10:00" }               // ten days from today (the demo)
{ "id": "my-workshop", "rule": "once", "date": "2027-03-14", "start": "10:00" }        // a real date

The demo’s one-off workshops use in so the preview never shows a past date; give your own a real date. The workshops page keeps its grid in date order, counts down to the next group and filters by kind (EVENT_CATS); every Add To Calendar button builds an .ics file in the browser.

Bookshop

• Books live in PRODUCTS (name, author, category, price, was-price, image, rating)
• The cart and the wishlist are kept in the browser’s local storage (keys md-cart, md-wish), so they follow the visitor from page to page
• Delivery is free from $50, otherwise $4.90 standard or $9.90 express; tax is 8.875% (SHOP)
• Demo coupons: CALM10 (10% off) and FREESHIP (free delivery) — edit or add them in COUPONS

Animation & WebGL

• Preloader — the Breathing Window: the mark’s ring breathes in and out under “Breathe In / And Out”, then a round window opens from the mark onto the page; it plays once per visit (sessionStorage, key md-breathed)
• Reveals — add md-return to a photo or card and it rises out of a muted, washed-out state into full colour; md-rise lifts a heading and draws the wave under its italic word; md-fade fades copy up; data-delay="0.2" staggers any of them
• Calm Breath WebGL — <canvas class="md-gl" data-gl="breath"> inside a section draws a soft light that brightens and dims at six breaths a minute; data-gl="leaf" draws the logo’s leaf in drifting light (the footer). Colours come from --gl-1, --gl-2, --gl-3 and --gl-alpha, so the light follows the theme. It pauses off screen and draws one still frame for reduced motion
• Scroll moments — Untangle (Home 01: a knotted line relaxes through the four steps), Mood Weather (Home 02: the outcomes band clears from overcast to a warm morning; its skies are the --sky-* tokens) and Pebble Balance (Home 03: a cairn builds as the four steps pass). They follow the scroll without pinning the page

Visitors who prefer reduced motion get every page in its finished state, with no animation.

Languages & RTL (Right To Left)

The flag picker in the top bar lists languages that read left to right and right to left. Choosing a right-to-left language turns the whole site right to left and remembers it (keys md-lang and md-dir); the one-line script in <head> then sets dir="rtl" and swaps the three stylesheets for the files named in their data-rtl attribute before the page paints. Nothing is translated — you bring your own copy. To make a page right to left for good:

1. Set the direction

<html lang="ar" dir="rtl">

2. Swap three stylesheets

JavaScript Guide

All custom behaviour lives in assets/js/main.js, inside one jQuery wrapper, in 48 numbered blocks (see the JS INDEX at the top of the file):

• 01–08 — Preloader, sticky header, offcanvas menu, scroll reveals, counters, back to top, anchor scroll, light and dark mode
• 09–16 — Practice data and engines, live figures, custom select, stepper, hero sliders, Calm Breath WebGL, card rails, breath guide
• 17–24 — Video-call clock, slot picks, insurance check, match teaser, GAD-2, Untangle, Mood Weather, Pebble Balance
• 25–29 — Event engine, app-style booking, FAQ search, tabs, filter tabs
• 30–37 — Shop store, shop filters, cart totals, mini cart, product details, cart page, checkout, wishlist page
• 38–48 — Contact form, journal search, article tools, account forms, launch countdown, booking form, matcher, fee calculators, self-check, therapist pages, workshop list

Each block is a self-contained doSomething() function that skips pages where its section is not present, so you can delete any block you do not need. The coming-soon countdown reads the data-launch attribute of .soon-count: it ships as data-launch="+45" (45 days from today); set a real date such as data-launch="2027-01-11".

Images

The download ships with neutral placeholder images so you can see every layout at the correct size. Replace them with your own photos using the same file names. Images are grouped by section in assets/img/.

The logo files, the illustrated icons, the flags and the wave shapes are included and ready to use. The demo photography on the live preview is for preview only and is not included in the download.

Contact Form

The contact form, the blog comment form, the account forms, the workshop places form, the coming-soon form and the footer newsletter post to sendmail.php, a lightweight AJAX mail handler; the success or error message appears under the form without reloading the page. To activate it:

1. Set your email address

Open sendmail.php and replace the placeholder recipient at the top of the file:

$email = 'hello@yourdomain.com';

2. Upload to a PHP host

The form needs a server with PHP mail() support (nearly every shared host). Opened from your computer or a static-only host, the form shows a short “upload to a PHP-enabled host” notice instead.

3. Optional: Google reCAPTCHA v3

Invisible reCAPTCHA v3 spam protection is built into the handler and stays dormant until the form sends a token. To switch it on:

• Create v3 keys (a site key and a secret key) for your domain in the Google reCAPTCHA admin console
• In sendmail.php, replace YOUR_RECAPTCHA_V3_SECRET_KEY with your secret key
• In contact.html, add a hidden token field inside the form and load the reCAPTCHA script with your site key just before </body>:

<!-- inside the contact form -->
<input type="hidden" name="g-recaptcha-response" id="g-recaptcha-response">

<!-- before the closing </body> tag -->
<script src="https://www.google.com/recaptcha/api.js?render=YOUR_SITE_KEY"></script>
<script>
  grecaptcha.ready(function () {
    grecaptcha.execute('YOUR_SITE_KEY', { action: 'contact' }).then(function (token) {
      document.getElementById('g-recaptcha-response').value = token;
    });
  });
</script>

Once the token field is present, sendmail.php checks every submission with Google and rejects low-score (bot) requests.

Credits

Mindara is built with these open-source libraries and resources.

• Bootstrap 5.3
• jQuery 3.7.1
• Swiper 11
• GSAP 3 + ScrollTrigger
• Fancybox 3
• Font Awesome Free
• Google Fonts: Petrona, Lexend
• RTLCSS

All plugin files and icon fonts are loaded locally. The only outside requests are the Google Fonts stylesheet, the Google Maps embed on the contact page, and YouTube when a visitor opens a talk. The PHQ-9 and GAD-7 are free to use and reproduce. Poverty guidelines: U.S. Department of Health and Human Services, 2025.

Support

If you have any questions or need help with the template, please reach out through the marketplace where you purchased it: open the item there and send us your question from its support page. We aim to respond within 24–48 hours.