Overview

An animated HTML template for clinics, hospitals and dental practices. Curavia ships three home pages, a light and a dark theme, right-to-left support and a pharmacy, with medical logic that is worked out rather than typed in: which site is open on the clinic’s own clock, booking from each doctor’s weekly shifts with real free times, a weekly timetable, care plans by month or year, an insurance cost estimator, dental prices with and without the dental plan, the emergency department’s typical wait and a department finder.

What’s included

• 3 home pages, each with its own scroll moment: the Ward Walk (Multi-Specialty Clinic), the Gallery Drift (General Hospital) and the Floating Care renders (Dental Studio)
• Light and dark mode on one switch in every header and in the mobile menu, remembered between visits and applied before the page paints
• Right-to-left stylesheets and a flag language picker; Arabic and Hebrew turn any page right to left
• A WebGL layer — morning light through window blinds over the heroes and page titles, and the logo’s ring of dots in the footer — tinted by the theme colours
• Opening hours for six sites with open or closed now, a location switch with a Google map, the emergency department’s typical wait by hour
• Four-step appointment booking from each doctor’s shifts, the hero quick-booking dock, a live summary, a reference and add-to-calendar
• Doctor directory with department filters, doctor profiles with their week, the weekly timetable and the department finder
• Care plans monthly or yearly with a comparison table; the insurance cost estimator; dental prices with the dental plan
• New-patient registration in steps with age, BMI and insured-only fields; the patient account
• Pharmacy: categories, price range and sort, product page, cart, wishlist, coupon, free-delivery meter, tax, checkout
• Photo Flick preloader, Ruled Rise reveals, Swiper sliders and Fancybox video and gallery popups
• Fully responsive, W3C-valid, zero console errors

Getting Started

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

1. Open locally

Unzip the downloaded package and open curavia/index.html in any modern browser (Chrome, Firefox, Edge, Safari). No build tools or server are required — the opening hours, booking, timetable, estimators, pharmacy and every filter work straight from the files.

2. Deploy to a server

Upload the contents of the curavia/ 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. Site hours, departments, doctors and their shifts, insurance plans and the pharmacy each sit in one place — see Medical 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 curavia/, the template. Every page sits in the template’s root; everything the pages load sits under assets/:

curavia/
├── *.html                              the 30 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   Bootstrap for right-to-left pages
    │       ├── jquery.fancybox.min.css
    │       └── swiper-bundle.min.css
    ├── js/
    │   ├── main.js                     all custom scripts, numbered JS INDEX (44 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/
    │   └── curavia-icons/              the interface and medical icon set (css, woff2)
    ├── webfonts/                       Font Awesome Free font files
    └── img/                            images, one folder per section
        ├── about/                       8 files
        ├── banner/                      19 files
        ├── blog/                        9 files
        ├── dental/                      4 files
        ├── departments/                 20 files
        ├── flags/                       6 files
        ├── gallery/                     6 files
        ├── hospital/                    2 files
        ├── lab/                         3 files
        ├── logo/                        5 files
        ├── programs/                    1 files
        ├── shop/                        18 files
        └── team/                        15 files

To publish the site, upload the contents of curavia/ 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 (section 1.1). Change a token once and every section, button and card updates. Colours used with transparency have an -rgb twin (for example --cv-color-primary-rgb) — change both together.

Periwinkle carries the buttons, the top bar, the accent words, the panels and the call-to-action band; ink the headings, the night bands and the footer; mist the offset blocks behind the photographs. Green marks only “open now” and free places. The three soft grounds sit behind the pharmacy’s product photographs. The variables keep their role names, so a new palette is a change of values only.

Fonts

Two Google Fonts are loaded in the head of each page: Roboto Flex (headings, navigation, buttons and labels) and Zilla Slab (body text). Swap them by editing the Google Fonts link and the --cv-ff-head / --cv-ff-body variables.

Logo

The logo is a ring of twelve graded periwinkle dots around a rounded plus, beside the name “Curavia”. It ships as ready-made PNG files in assets/img/logo/:

• logo.png — for light grounds: the header and the light panels
• logo-light.png — for dark grounds: the header in dark mode, the mobile menu and the footer
• mark.png / mark-512.png — the ring and plus alone (the preloader, the booking summary and the home-screen icon)
• favicon.png — the browser tab icon

To use your own logo, replace these files; the header sizes the logo by its width, so a file of another shape needs at most one value changed in section 3.2.

Light & Dark Mode

Every header and the mobile menu have a theme switch. The choice is saved in the browser under the key cv-theme and applied by a one-line 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, :root[data-theme="dark"] { … }, right after :root in style.css. Change a dark colour there.
• Bands that stay coloured — the periwinkle panels and the call-to-action band keep their colour in both themes; the night bands and the footer deepen with the page.
• Start dark — to open the site dark for everyone, add data-theme="dark" to the <html> tag of each page; the switch still works and is still remembered.

Medical Logic

Nothing on the pages goes out of date: the hours, free times and dates are worked out in the browser from one data block at the top of main.js — JS block 01 Clinic Data, var CLINIC. Times are read on the clinic’s clock (tz: "America/New_York"), so a visitor in another time zone sees the same open or closed line as one in the building. Prices are in US dollars.

Opening hours

CLINIC.sites holds each site’s hours by weekday (0 = Sunday, null = closed). Block 06 Opening Hours paints every open or closed line — the top bar, the location cards, the footer and the contact cards — with “until 20:00 today” or “opens tomorrow at 08:00”.

Doctors, shifts and free times

Each doctor in CLINIC.doctors has a department, a site and weekly shifts (weekday → start and end). Each department in CLINIC.depts sets its visit length. Block 10 Booking Engine cuts each shift into visits, leaves out the times already booked (a fixed pattern per doctor and date, so a reload never reshuffles them) and the ones that have passed today, and offers only the days with a free time. “Any available doctor” merges every doctor in the department. Block 11 Doctor Timetable lays the shifts out as the week’s timetable. Add a doctor to the list and every page follows.

Care plans

The plan cards carry their monthly price in data-plan-price; block 15 Plan Prices shows the yearly price as twelve months less CLINIC.yearlyOff (15%): Basic Package $16 a month or $163 a year; Advanced Package $32 a month or $326 a year; Premium Package $64 a month or $653 a year.

Insurance cost estimator

The plans sit in CLINIC.insurance and the procedures with their list prices in CLINIC.procedures. Block 16 Cost Estimators: an office visit costs the plan’s copay; anything else is paid from the part of the deductible not yet met, then the coinsurance share of the rest; the year’s total stops at the out-of-pocket maximum. Self-pay takes the list price less the self-pay discount.

On the Dental Home the price list switches between list prices and the Curavia Dental Plan, which covers each treatment by its tier: preventive 100%, basic 80%, major 50%, ortho 50%.

More tools

• Emergency wait (block 18 Emergency Wait) — CLINIC.erWait holds the typical wait in minutes for each hour of the day; the hospital home shows the wait now and the quietest hour in the next twelve. It is labelled typical, never live.
• Department finder (block 19 Department Finder) — a symptom or a part of the body is matched against each department’s keys and the best matches are listed first.
• Patient registration (block 28 Patient Registration) — age from the date of birth, BMI from height and weight with its band, insurance fields shown only for insured patients; Continue always moves on and only the final submit checks the form.
• Countdown (block 32 Launch Countdown) — the coming-soon page counts down to the day in its data-launch attribute (+45 = 45 days from today, or a real date such as 2027-03-01).

Booking, registration, checkout, the patient account and the sign-in forms confirm on screen — connect them to your scheduling, payment or patient system to take real bookings and orders.

Pharmacy

The products, categories and rules sit in var SHOP_DATA at the top of the shop blocks: delivery $4.90 (express $9.90), standard delivery free on orders from $50 after any discount, sales tax 6.25% on goods and delivery, and the coupons CURAVIA10 (10% off) and FREESHIP (free delivery). The cart and wishlist live in the visitor’s browser (localStorage), so they follow them from page to page; a first visit starts with a few demo items so the cart, checkout and wishlist have something to show — to start empty, set seed and seedWish to [].

WebGL Layer

Some sections carry a moving layer drawn by one small WebGL shader (JS block 22 WebGL Blind Light): soft slanted bands of window light drifting over the section, as one canvas placed inside it:

<canvas class="cv-gl" data-gl="blinds" data-mode="light" aria-hidden="true"></canvas>   light grounds (heroes, page titles)
<canvas class="cv-gl" data-gl="blinds" data-mode="dark" data-ring="1" aria-hidden="true"></canvas>   the footer, with the logo’s ring of dots

• Options — data-amount sets the strength (0–1), data-fade="left" keeps the light off the copy side, data-ring="1" adds the slowly breathing ring of dots.
• Colours — the layer is drawn in the theme’s own colours and repaints when the theme switches.
• Performance — a canvas only runs while its section is on screen and the tab is visible. 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 (Right To Left) & Languages

Curavia is RTL-ready: the layout with its paddings and margins, the sliders and the animations all mirror. Right to left comes from the stylesheets, not from separate pages: the flag language picker turns any page right to left when Arabic or Hebrew is chosen and remembers the choice (keys cv-lang and cv-dir). Nothing is translated — you bring your own copy. To make a page right to left for good:

1. Set The Direction

Add dir="rtl" to the page’s <html> tag (and set lang to your language):

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

2. Swap Three Stylesheets

Each of the three links carries its RTL file in a data-rtl attribute — that is what the language picker swaps. The scripts read the direction from the dir attribute: sliders and every move that must mirror follow it on their own.

JavaScript Guide

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

• 01–09 — Clinic Data, Preloader, Sticky Header, Offcanvas Menu, Scroll Reveals, Opening Hours, Hero Slider, Card Sliders, Video Modal. The data every page reads and the core: the Photo Flick preloader, the header, the Ruled Rise reveals, opening hours, sliders and the video popup.
• 10–19 — Booking Engine, Doctor Timetable, Ward Walk, Gallery Drift, Floating Care, Plan Prices, Cost Estimators, Locations, Emergency Wait, Department Finder. The medical logic: booking from each doctor’s shifts, the timetable, the three homes’ scroll moments, plan prices, the insurance and dental estimators, locations, the emergency wait and the department finder.
• 20–35 — Custom Select, Light And Dark Mode, WebGL Blind Light, Counters, Contact Form, FAQ Search, Tabs, Filter Tabs, Patient Registration, Account Forms, Journal Search, Article Tools, Launch Countdown, Media Lightbox, Back To Top, Anchor Scroll. Page utilities: selects, the theme switch and language picker, the WebGL layer, counters, forms, FAQ search, tabs, filters, patient registration, the account forms, journal search, the countdown and the lightbox.
• 36–44 — Shop Store, Shop Filters, Cart Totals, Mini Cart, Product Details, Cart Page, Checkout, Wishlist Page, Stepper. The pharmacy: cart and wishlist store, shop filters, totals, mini cart, product page, cart, checkout and wishlist pages.

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 and the scroll moments rest in place.

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 signature, the capsule and pearl renders 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, the comment form and the newsletter post to sendmail.php, a lightweight AJAX mail handler. The success or error message appears under the button without reloading the page. The booking, registration, checkout, account, login, register and forgot-password forms are demo forms: they confirm on screen and are ready to connect to your own systems. To activate the mail handler 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 — there the form shows a friendly “upload to a PHP-enabled host” notice instead.

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.3.3
• jQuery 3.7.1
• Swiper 11
• GSAP 3 + ScrollTrigger
• Fancybox 3.5
• Font Awesome Free
• Curavia icons
• RTLCSS
• Google Fonts: Roboto Flex, Zilla Slab

All plugin files and icon fonts are loaded locally. The only external requests are the Google Fonts stylesheet, the Google Maps embeds (locations, contact and the clinic tour) and the video popups.

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.