Overview

An animated HTML template for multi-specialty clinics, medical centres and group practices. Vitalis ships three home pages, a light and a dark theme, right-to-left support, and clinic logic that is worked out rather than typed in: whether each clinic is open, every doctor’s next open slot, a live Urgent Care wait, what a visit costs on each insurance plan, a four-step appointment that only offers free times, a lab panel that adds up the price, the fast and the results date, and a weekly timetable that marks who is in right now.

What’s included

• 3 home pages, each with its own scroll moment: a vitals monitor whose trace draws and figures count as it crosses the screen, a day-to-night band with a 24-hour dial, and life-stage cards that glide sideways
• The Pulse Line preloader: an ECG trace draws two calm beats and the logo’s plus lifts off the second
• Lens Focus reveals: photos and cards come into focus out of a soft blur, headings word by word, pulse rules draw on
• Light and dark mode on one switch in every header, remembered between visits and applied before the page paints
• Right-to-left from a language picker with flags in the top bar, through ready-made RTL stylesheets
• WebGL — Breathing Light behind the heroes, the page titles and the night bands, and the Heartline trace in the footer
• Live clinic hours on Chicago time for three locations in every top bar, menu and footer
• Next available slots for every doctor and department from their weekly hours and a booked diary that agrees on every page
• The four-step appointment with 14 days of open slots, a live cost summary, a reference and a calendar file
• The cost estimator on five insurance plans, in person or by video; every doctor’s fee with the plan price
• The Urgent Care wait from the hourly arrivals curve and the clinicians on the floor
• Doctor finder (search, department, language, days), the timetable, the lab test panel, the BMI and check-up tools, FAQ search
• Google map switcher, health journal, account pages with a password meter, coming soon, 404
• Fully responsive, W3C-valid, zero console errors

Getting Started

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

1. Open locally

Unzip the downloaded package and open vitalis/index.html in any modern browser (Chrome, Firefox, Edge, Safari). No build tools or server are required — the hours, the slots, the appointment, the estimator and the lab panel all work straight from the files.

2. Deploy to a server

Upload the contents of the vitalis/ folder to your hosting provider using an FTP client (such as FileZilla) or your hosting control panel. Once uploaded, navigate to your domain and the template will load immediately.

3. Customise

All custom styling lives in assets/css/style.css (with a numbered Table of CSS at the top) and assets/css/responsive.css. Colours and fonts are controlled by CSS variables — see Colors & Fonts. The clinic’s hours, doctors, fees, plans and tests sit in one object at the top of main.js — see Clinic Logic.

File Structure

Below is an overview of the key files and folders included in this template.

Folder Structure

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

vitalis/
├── *.html                              the 22 pages, all in the root (see File Structure)
├── sendmail.php                        the AJAX mail handler for the contact form
└── assets/
    ├── css/
    │   ├── style.css                   all custom styles, numbered Table of CSS (24 sections)
    │   ├── responsive.css              breakpoints 1399 / 1199 / 991 / 767 / 575
    │   ├── style.rtl.css               right-to-left twin of style.css
    │   ├── responsive.rtl.css          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
    │       └── swiper-bundle.min.css
    ├── js/
    │   ├── main.js                     all custom scripts, numbered JS INDEX (30 blocks)
    │   └── plugins/                    vendor scripts
    │       ├── bootstrap.bundle.min.js
    │       ├── gsap.min.js
    │       ├── jquery-3.7.1.min.js
    │       ├── ScrollTrigger.min.js
    │       └── swiper-bundle.min.js
    ├── webfonts/                       Font Awesome Free font files
    └── img/                            images, one folder per section
        ├── about/                       4 files
        ├── avatars/                     8 files
        ├── bg/                          5 files
        ├── blog/                        3 files
        ├── demo/                        3 files
        ├── departments/                 8 files
        ├── doctors/                     8 files
        ├── flags/                       6 files
        ├── hero/                        6 files
        ├── icons/                       19 files
        ├── lab/                         5 files
        ├── logo/                        4 files
        ├── patients/                    6 files
        └── wellness/                    8 files

To publish the site, upload the contents of vitalis/ to your web root. Photos keep their folder, file name and size when you replace them, so no page needs editing.

Colors & Fonts

The whole design is driven by CSS variables declared at the top of style.css. Change a token once and every section, button and card updates. Colours used with transparency have an -rgb twin (for example --vt-primary-rgb) — change both together.

Cobalt carries the buttons, the links, the accent words and the active states; lime the highlight fills (the secondary button, badges, the live dots and the logo’s plus) and is never used for text on white. Ink night is the headings, the night bands and the footer; tint and ice are the tonal controls and the alternate section ground. Alert is kept for Urgent Care and closed states, the green for open. The ground, heading, body, muted and line tokens are the semantic names the components use — the dark theme swaps those (see Light & Dark Mode).

Fonts

Two Google Fonts are loaded in the head of each page: Funnel Display (headings, figures, prices and times) and Lexend (body text, navigation, buttons and forms). Swap them by editing the Google Fonts link and the --vt-ff-heading / --vt-ff-body variables.

Logo

The logo is the name Vitalis with both i-dots drawn as plus signs. It ships as ready-made PNG files in assets/img/logo/: logo.png (ink wordmark, for the light header), logo-light.png (white wordmark, for the dark theme, the footer and the overlay header), mark-512.png (the plus on a cobalt squircle) and favicon.png. The header shows the right one for the theme; to use your own logo, replace both wordmark files — the header sizes the logo by its height.

Light & Dark Mode

Every header (and the mobile menu) has a theme switch. The choice is saved in the browser under the key vt-theme and applied by a small script in the <head> before the page paints, so a dark visitor never sees a light flash. The switch sets data-theme="dark" on the <html> tag.

• Tokens — the dark values sit in one block, [data-theme="dark"] { … }, right after :root in style.css. Change a dark colour there.
• Start dark — to open the site dark for first-time visitors, add data-theme="dark" to the <html> tag of each page; the switch still works and is still remembered.
• WebGL — the Breathing Light and the Heartline read their colours from the theme, so they retune themselves when the switch is used.

Clinic Logic

The figures on the pages are worked out from one object at the top of main.js (block 01 Clinic Data) and a few rules, each in its own block. Edit the object and every card, slot, price and status follows. Times are always the clinic’s own (tz: 'America/Chicago'), whatever the visitor’s time zone; prices are in US dollars.

var CLINIC = {
  "tz": "America/Chicago",
  "locations": [
    { "id": "lakeview", "urgent": true,
      "hours": { "0": ["09:00", "15:00"], "1": ["07:00", "20:00"], … } }, … ],
  "doctors": [
    { "id": "helen-marsh", "dept": "cardiology", "fee": 240, "slot": 30, "loc": "lakeview",
      "hours": { "1": ["09:00", "17:00"], "3": ["09:00", "17:00"], … } }, … ],
  "plans": [ … ], "tests": [ … ],
  "arrivals": [ … ], "clinicians": [ … ], "minutesPerPatient": 14
};

Weekdays are numbered from 0 (Sunday) to 6 (Saturday); a day a location or doctor is not in is left out or set to null. A doctor’s slot is the length of one appointment in minutes.

Open now (block 06 Clinic Hours)

Every data-hours-status element reads its location’s week: “Open Now” until closing, “Closes In 25 Min” in the last hour, or “Closed” with the next opening. The hours tables mark today. Statuses refresh every 30 seconds.

Next available and the diary (blocks 09 Next Available and 20 Appointment)

A doctor’s slots run through their hours on each day in steps of their slot length. About 58% of them show as already taken, chosen by a fixed rule on the doctor, the date and the time, so the doctor cards, the profile, the timetable and the appointment form always agree. Slots in the past or starting within 30 minutes are closed. The next opening looks up to 21 days ahead; a department shows the earliest opening among its doctors.

The appointment (block 20 Appointment)

Four steps: the department, doctor and visit type; the day (the next 14 days, each with its count of open slots, or Full or Off) and a time grouped into morning, afternoon and evening; your details; and the review with the cancellation policy. A video visit is 20 minutes. Continue never blocks, so every step can be seen; Confirm checks everything and reopens the first step that still needs something. The confirmation carries a reference built from the date and time (VT-YYMMDD-HHMM) and a calendar file to download. A slot picked on a doctor’s page opens the form on step 2 with that slot chosen (kept for the tab under vt-pick).

What a visit costs (block 12 Cost Estimator)

The doctor’s fee, or 70% of it by video; then the plan pays its share after the copay (the patient pays at most the fee), and a self-pay patient gets the self-pay discount. The estimators on Home 01 and the pricing page, the fee table’s last column, the Home 02 video price and the appointment summary all use this one rule:

The Urgent Care wait (block 10 Urgent Care Wait)

The patients arriving this hour (arrivals, a quarter more at weekends) times the clinician minutes each one needs (minutesPerPatient), shared by the clinicians on the floor (clinicians), less the hour already worked through — rounded to five minutes, never under five. It refreshes every minute; from 15 minutes it reads Steady, from 30 Busier than usual.

Doctors and the timetable (blocks 19 Doctor Finder, 15 Doctors On Today, 22 Timetable)

The doctor finder combines the search box, the department, the language and the days a doctor is in (every day ticked must be one of theirs), with the count and an empty note. Home 02’s doctors read their hours for today: in now, in later today, or their next day in. The timetable marks today’s column and lights up a doctor in clinic right now; the department tabs and the clinic filter combine.

Lab panel and health tools (blocks 25 Lab Test Panel and 18 Health Tools)

Ticked tests build a panel: the total, the longest fast any test needs with the latest time to eat for a 7:30 AM visit, and the day the slowest result arrives, counting working days only (Sundays off). The BMI tool divides the weight in kilograms by the height in metres squared (inches and pounds convert first) and gives the healthy weight range (BMI 18.5 to 24.9) for that height. The next check-up is the last one plus the interval for the age group (Under 40: every 2 years; 40 to 64: every year; 65 and over: every year).

Dates that never go stale (block 13 Counters And Dates)

Post dates and the launch countdown are not tied to a calendar date: data-when="-6" is six days ago and data-launch="+46" 46 days from today, so the demo always looks current. The newsletter, appointment, login, register and forgot-password forms confirm on screen — connect them to your own systems to take real bookings.

WebGL Layer

WebGL Layer (block 23) is one small runner and two fragment shaders, no library. It draws on a canvas laid inside a section:

<canvas class="vt-gl" data-gl="breath" data-mode="light" aria-hidden="true"></canvas>
<canvas class="vt-gl" data-gl="breath" data-mode="dark" data-amount="0.8" aria-hidden="true"></canvas>
<canvas class="vt-gl" data-gl="heartline" data-mode="dark" aria-hidden="true"></canvas>

• Breathing Light — two soft lights, cobalt and lime, that swell and settle at a resting breath. data-mode="light" makes it the section’s own ground (heroes, page titles, coming soon, 404); data-mode="dark" lays the lights over a night band, with data-amount from 0 to 1.
• Heartline — the clinic’s ECG trace sweeping across the footer at 60 beats a minute.
• Colour — the shaders read --vt-gl-a, --vt-gl-b and --vt-gl-c, so the light and dark themes (or one section) can retune them.
• Performance — rendered at a reduced size, paused off screen and in hidden tabs. Visitors who prefer reduced motion get one still frame; without WebGL the section’s own background shows.
• Remove one — delete the canvas; nothing else depends on it.

RTL & Languages

The top bar has a language picker with flags: English (en), Spanish (es), French (fr), German (de), Arabic (ar, right to left), Hebrew (he, right to left). The demo keeps its English copy — you bring your own translations. Picking a right-to-left language saves the direction under vt-dir (the language under vt-lang) and reloads; a small script in the <head> then sets dir="rtl" and swaps the three stylesheets for their right-to-left twins before the page paints. Each stylesheet link names its twin:

<link rel="stylesheet" href="assets/css/style.css" data-rtl="assets/css/style.rtl.css">

To make the site right to left for every visitor, add dir="rtl" to the <html> tag of each page (and set lang to your language), and point the three links at bootstrap.rtl.min.css, style.rtl.css and responsive.rtl.css:

<html lang="ar" class="no-js" dir="rtl">

The sliders, the age track and the reveals read the direction from the dir attribute, so they follow it on their own. Phone numbers, times and prices stay left to right inside right-to-left text.

JavaScript Guide

All custom behaviour lives in assets/js/main.js, wrapped in a jQuery IIFE and organised into 30 numbered blocks (see the JS INDEX comment at the top of the file):

• 01 — Clinic Data: one object, CLINIC, holding the locations and their hours, the departments, the doctors’ weeks and fees, the insurance plans, the visit types, the lab tests and the Urgent Care arrivals curve.
• 02–08 — The core every page shares: the Pulse Line preloader, the sticky header, the menu, the Lens Focus reveals, clinic hours, the hero sliders and the card rails.
• 09–20 — The clinic logic: next available slots, the Urgent Care wait, the Home 01 vitals monitor, the cost estimator, counters and dates, the Home 02 clock, doctors on today, the accordion, the Home 03 age track, the BMI and check-up tools, the doctor finder and the four-step appointment.
• 21–30 — Theme and language, the timetable, the WebGL layer, the contact and newsletter forms, the lab test panel, the map switcher, FAQ search, the account forms, the launch countdown and the video modal.

Each block is a self-contained doSomething() function that safely skips pages where its section is not present — you can delete any block you do not need. Every animation respects prefers-reduced-motion automatically: content appears in its final state.

Images

The download package ships with neutral placeholder images so you can see every layout at the correct dimensions. Replace them with your own photos using the same file names, or update the src attributes. Images are grouped inside assets/img/:

The logo files, the illustrated icons in icons/ and the language flags are included and ready to use. All demo photography shown on the live preview is for preview purposes only and is not included in the download.

Contact Form

The contact form (on the contact page and under each journal post) posts to sendmail.php, a lightweight AJAX mail handler. The success or error message appears under the button without reloading the page. To activate it on your server:

1. Set your email address

Open sendmail.php and replace the placeholder recipient at the top of the file with your own address:

$email = 'example@example.com';

2. Upload to a PHP host

The form needs a server with PHP mail() support (virtually every shared host). It will not send from your local computer or from a static-only host.

3. Optional: enable Google reCAPTCHA v3

Invisible reCAPTCHA v3 spam protection is already built into the handler. It stays dormant until the form submits a token — that is why no badge or checkbox appears out of the box. 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 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 verifies every submission with Google and rejects low-score (bot) requests.

Credits

This template is built using the following open-source libraries and resources.

• Bootstrap 5
• jQuery 3.7.1
• Swiper
• GSAP 3 + ScrollTrigger
• Font Awesome Free
• Google Fonts: Funnel Display, Lexend

All plugin files and icon fonts are loaded locally. The only external requests are the Google Fonts stylesheet, the Google Maps embeds and the video links.

Support

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