Overview

An animated HTML template for hospitals, clinics and medical centres. Clinara ships four home pages by specialty — hospital, dental, eye care and pediatrics — a light and a dark theme, a language picker with right-to-left support, and clinic logic that is worked out rather than typed in: whether the clinic is open, which doctor is in now, free appointment slots, the waiting room this hour, what a visit costs with your insurance, when the next eye exam or vaccination is due, and a pharmacy shop with a bag, coupon and delivery.

What’s included

• 4 home pages, each with its own scroll moment: the Vitals Band (ring gauges that fill as you scroll), the Check-Up Chart (32 teeth that light quadrant by quadrant), the Focus Chart (an eye chart that sharpens line by line to 20/20) and the Growth Curve (a child’s height line through the healthy range)
• Now Serving preloader: the front desk’s number board rolls to 001 and its call light blinks
• Ripple reveals: cards in a row arrive from the middle card outward
• Light and dark mode on one switch in every header, remembered between visits and applied before the page paints
• A flag language picker with right-to-left stylesheets for Arabic and Hebrew
• Halftone Tide — a WebGL layer of fine dots that swell and thin on a slow tide over the heroes, title strips and footer
• Clinic clock: open now or the next opening in every header and footer, doctors on duty, today on the timetable
• Appointments: free slots worked out from each doctor’s week, a booking panel on the homes and doctor pages, a four-step booking page with a summary, Add To Calendar files
• Department finder, waiting room estimates by hour, care plans monthly or yearly and a visit cost estimator with insurance
• Eye Exam Due and Vaccination Planner helpers that date every visit from your input
• Pharmacy & optical shop: filters, sort and search, product page, bag, coupon, free-delivery meter, pickup, checkout
• Journal with list, grid and post pages, FAQ with topics and search, patient portal pages, coming soon, 404
• Fully responsive, W3C-valid, zero console errors

Getting Started

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

1. Open locally

Unzip the downloaded package and open clinara/index.html in any modern browser (Chrome, Firefox, Edge, Safari). No build tools or server are required — the clock, the timetable, booking, the estimator, the helpers and the shop all work straight from the files.

2. Deploy to a server

Upload the contents of the clinara/ 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, week, prices and shop rules sit in one object at the top of main.js (block 01 Clinic Data) — 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 clinara/, the template. Every page sits in the template’s root; everything the pages load sits under assets/:

clinara/
├── *.html                              the 26 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
    │   ├── 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 (39 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
    ├── webfonts/                       Font Awesome Free font files
    └── img/                            images, one folder per section
        ├── about/                       7 files
        ├── avatars/                     13 files
        ├── banner/                      12 files
        ├── bg/                          9 files
        ├── demo/                        4 files
        ├── flags/                       6 files
        ├── logo/                        4 files
        ├── services/                    25 files
        ├── shop/                        15 files
        ├── subheader/                   6 files
        └── team/                        9 files

To publish the site, upload the contents of clinara/ 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 --cl-color-coral-rgb) — change both together.

Coral carries the actions — buttons, the bar under every title, prices — with charcoal text on it for contrast; sky carries the title strips, the call band, the mark’s arms and the timetable; stone is the soft ground between white sections and night the footer and the dark bands. The text tokens (coral, sky and mint text) are the darker partners for small type on light grounds. Mint marks open and done states only.

Fonts

Two Google Fonts are loaded in the head of each page: Quicksand (headings, figures, buttons and the wordmark) and Open Sans (body text, labels and forms). Swap them by editing the Google Fonts link and the --cl-ff-heading / --cl-ff-body variables.

Logo

The logo is the Clinara plus — four rounded sky arms around a coral core with two orbit dots — beside the two-tone name. It ships as PNG files in assets/img/logo/:

• logo.png — the header logo on light grounds
• logo-light.png — the same lockup for dark grounds (the footer, coming soon, the dark theme)
• mark-512.png — the plus alone (the touch icon)
• favicon.png — the browser tab icon

The preloader and the 404 draw the plus in CSS from the same proportions, so a new logo only needs these 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 cl-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, [data-theme="dark"] { … }, right after :root in style.css. Change a dark colour there.
• Dark bands — the footer and the night sections carry is-dark, which sets their own text tokens, so they read the same in both themes.
• 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.

Clinic Logic

The figures on the pages are worked out from one object, CLINIC, at the top of main.js (block 01 Clinic Data): the clinic’s time zone and hours, its departments and doctors, each doctor’s week, the slot length, prices, insurance plans, the eye and vaccination rules and the shop’s rules. Edit them there and every card, slot, total and status follows. Prices are in US dollars.

Hours and the clinic clock (block 06)

The clinic keeps America/New_York time whatever the visitor’s clock says. CLINIC.hours holds each weekday (0 is Sunday) as an opening and a closing time, or null for closed:

Every header says “Open Now” with the closing time, “Closes In 25 Min” in the last hour, or “Closed” with the next opening; every footer and hours table marks today.

Doctors, their week and the timetable (blocks 22 and 28)

CLINIC.schedule lists each doctor’s sessions as [weekday, start, end, room, clinic], for example [1, "13:00", "17:00", "Room 204", "Heart Clinic"]. Doctor cards read it to say “On Duty Until 5 PM” or “Next In Tue, 9 AM”; the timetable is built from it and marks today and the clinics running now.

Appointments (blocks 27 and 38)

Each session is cut into 20-minute slots (CLINIC.slot). A share of them is taken (CLINIC.bookRate = 0.34) by a stable pattern per doctor and date, so a demo day always looks the same and moves on with the calendar; today’s slots less than 30 minutes away are gone. The booking panels offer the treatments a department’s doctors run, then the doctors, their next eight open days and the free times; the appointment page walks through department, doctor, day and slot and details. Continue always moves on; Confirm checks every step, opens the first one that is missing something, and confirms with a reference and an Add To Calendar file.

Department finder and the waiting room (blocks 23 and 24)

CLINIC.finder maps what is wrong to a department and how soon to come:

The answer names the department’s doctor who is in now, or whose session comes first. CLINIC.wait holds each department’s average wait in minutes for every opening hour (09:00, 10:00, 11:00, 12:00, 13:00, 14:00, 15:00, 16:00); while the clinic is open the list shows this hour, shortest first, and when it is closed, the first hour of the next opening.

Plans and the cost estimator (block 29)

A plan’s yearly price is ten months (two free): Standard at $49 a month is $490 a year, a saving of $98. The estimator takes a visit and an insurance plan:

Eye Exam Due and the Vaccination Planner (blocks 31 and 33)

The last exam date and the age give the next eye exam (CLINIC.eyeInterval):

A birth date dates every routine childhood visit (CLINIC.vaccines, by age in months); past visits are Done, the first one ahead is Next with its days left:

The shop (blocks 34 and 37)

One bag serves the whole site, kept in the browser under cl-bag-v1: the header count, every Add To Bag, the product page, the cart and checkout read the same list. Delivery is $6.90 and free from $60 after the discount; pickup at the pharmacy is always free. The coupon CARE10 takes 10% off. A first visit starts with a small demo bag so the cart and checkout pages have something to show.

Checkout, booking and the account forms confirm on screen — connect them to your payment, booking or patient system to take real orders and appointments.

WebGL Halftone

Halftone Tide (block 11) is one small WebGL shader and no library: a grid of fine dots that swell and thin on a slow tide of noise, gathered on the far side from the copy (and mirrored on right-to-left pages). It draws on a canvas laid over a section:

<canvas class="cl-gl" data-gl="tide" data-tone="photo" aria-hidden="true"></canvas>

• Tones — data-tone="photo" lays white dots over the hero photographs; "sky" over the inner pages’ title strips; "night" keeps sky dots to the footer’s corner; "light" tints a light ground (the 404).
• Colour — the dots take the coral and sky tokens, re-read when the theme changes.
• Performance — it 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.

Languages & RTL

Every header has a flag language picker (English, Spanish, Chinese, French, Arabic, Hebrew). The choice is saved under cl-lang; Arabic and Hebrew turn the page right to left, saved under cl-dir. Right to left comes from the stylesheets, not from separate pages: the one-line script in <head> 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 every visitor:

1. Set The Direction

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

2. Swap Three Stylesheets

The scripts read the direction from the dir attribute: sliders, the halftone 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 39 numbered blocks (see the JS INDEX comment at the top of the file):

• 01–05 — Clinic Data, Preloader, Sticky Header, Offcanvas Menu, Scroll Reveals. The clinic’s data (hours, doctors and their week, prices, shop rules) and the core every page shares: the Now Serving preloader, the docked header, the menu and the reveals.
• 06–21 — Clinic Clock, Hero Slider, Card Sliders, Custom Select, Light And Dark Mode, WebGL Layer, Counters, Contact Form, FAQ Search, Tabs, Filter Tabs, Account Forms, Launch Countdown, Media Lightbox, Back To Top, Anchor Scroll. The clinic clock and the shared parts: hero and card sliders, custom selects, light and dark mode with the language picker, the WebGL layer, counters, forms, tabs, filters and the countdown.
• 22–39 — Doctor Duty, Department Finder, Waiting Room, Vitals Band, Post Dates, Appointment Engine, Timetable, Plans And Cost Estimator, Check-Up Chart, Eye Exam Due, Focus Chart, Vaccination Planner, Bag Store, Growth Curve, Shop Filters, Cart And Checkout, Appointment Booking, Demo Forms. The clinic logic: doctors on duty, the department finder, the waiting room, the four scroll moments, the appointment engine and booking, the timetable, plans and the cost estimator, the eye exam and vaccination helpers, the shop, cart and checkout.

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 finished.

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 and the 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 posts to sendmail.php, a lightweight AJAX mail handler. The success or error message appears under the button without reloading the page. The booking, newsletter, comment, checkout, login, register, forgot-password and coming-soon forms are demo forms: they check their fields, 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
• RTLCSS
• Google Fonts: Quicksand, Open Sans

All plugin files and icon fonts are loaded locally. The only external requests are the Google Fonts stylesheet and the Google Maps embed on the contact page.

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.