Overview

An animated HTML template for hospitals, clinics and health centers. Medora ships three home pages, a light and a dark theme, right-to-left support, and hospital logic that is worked out rather than typed in: which clinic is open by the visitor’s clock, the doctors on duty today and each doctor’s next free slot, four-step booking from real weekly schedules, a timetable, an insurance cost estimate, a childhood vaccination planner, a glasses prescription reader, health calculators and a medical shop with a bag, coupon, delivery and tax.

What’s included

• 3 home pages, each with its own scroll moment: the Floor Directory (General Hospital), the Childhood Conditions field (Pediatrics) and the Reading Lens (Eye Care)
• 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 in the top bar; Arabic and Hebrew turn any page right to left
• A WebGL layer — a soft iris aurora over the heroes and page titles, drifting clouds on the Pediatrics hero and falling petals in the footer — tinted by the theme colours
• Opening hours for three clinics with open or closed now, ward visiting hours, the doctors on duty today
• Doctor finder (name, department, day), doctor profiles with their week and free slots, the weekly timetable
• Four-step appointment booking with free slots worked out from each doctor’s schedule, a live summary and add-to-calendar
• Insurance cost estimate with deductible, coinsurance, copay and the out-of-pocket limit; health packages with a comparison table
• Childhood vaccination planner from a birthday, a glasses prescription reader, BMI, heart-rate zones and daily water calculators
• Medical shop: shelf tabs, price limit and sort, product page, bag, wishlist, coupon, free-delivery meter, tax, checkout
• Iris Window preloader, Pulse In reveals, Swiper sliders and Fancybox video and gallery popups
• Fully responsive, W3C-valid, zero console errors

Getting Started

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

1. Open locally

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

2. Deploy to a server

Upload the contents of the medora/ 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. Clinic hours, doctors and their schedules, insurance plans, the vaccine schedule and the shop each sit in one place — see Hospital 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 medora/, the template. Every page sits in the template’s root; everything the pages load sits under assets/:

medora/
├── *.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   Bootstrap for right-to-left pages
    │       ├── jquery.fancybox.min.css
    │       └── swiper-bundle.min.css
    ├── js/
    │   ├── main.js                     all custom scripts, numbered JS INDEX (41 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/
    │   └── medora-icons/               the medical icon set (css, woff, woff2)
    ├── webfonts/                       Font Awesome Free font files
    └── img/                            images, one folder per section
        ├── about/                       10 files
        ├── bands/                       3 files
        ├── blog/                        14 files
        ├── departments/                 2 files
        ├── doctors/                     8 files
        ├── eye/                         8 files
        ├── faces/                       4 files
        ├── flags/                       7 files
        ├── hero/                        5 files
        ├── kids/                        7 files
        ├── logo/                        4 files
        ├── panels/                      3 files
        ├── previews/                    3 files
        └── shop/                        19 files

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

Coral carries the buttons, the active menu item, the accent words and the emergency number; iris the photo bands, the page titles and the colour panels; slate the top bar, the night bands and the footer. Mint, amber and sky mark the open status, the care types and the icons. 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: Montserrat (headings, navigation, buttons and labels) and Nunito (body text and figures). Swap them by editing the Google Fonts link and the --md-ff-head / --md-ff-body variables.

Logo

The logo is a four-petal cross — two coral and two iris petals around a mint core — beside the name “Medora” and the tagline “Medical Center”. It ships as ready-made PNG files in assets/img/logo/:

• logo.png — for light grounds: the header, the light panels
• logo-light.png — for dark grounds: the header in dark mode, the mobile menu and the footer
• mark-512.png — the petal cross alone (the home-screen icon and the faint watermarks on the booking cards)
• favicon.png — the browser tab icon

To use your own logo, replace these files; the header sizes the logo by its height, so a wider or narrower file needs no CSS change.

Light & Dark Mode

Every header and the mobile menu have a theme switch. The choice is saved in the browser under the key md-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.
• Bands that stay coloured — the iris photo bands (md-band), the slate night bands (is-night) and the footer keep their colour in both themes.
• Start dark — to open the site dark for everyone, change data-theme="light" to data-theme="dark" on the <html> tag of each page; the switch still works and is still remembered.
• Maps — the Google Maps embeds are tinted to match the dark theme.

Hospital Logic

Nothing on the pages goes out of date: the hours, slots and dates are worked out in the browser from one data block at the top of main.js — JS block 01 Medora Data, var MEDORA. Times are read on the hospital’s clock (tz: "America/Los_Angeles"), 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

MEDORA.clinics holds each clinic’s hours by weekday (0 = Sunday, null = closed). Block 06 Opening Hours paints every open or closed line — the top bar, the strips, the footer and the contact cards — with “until 7 PM today” or “opens tomorrow at 8 AM”. MEDORA.visiting holds the ward visiting hours.

Doctors and free slots

Each doctor in MEDORA.doctors has a department, a visit fee, a slot length and a weekly schedule: weekday → sessions of start, end and room. From it, block 10 Doctors Live shows the doctors on duty today and each card’s next free slot; block 12 Appointment Booking offers only the days and times the chosen doctor works (times already past today are left out); block 18 Doctor Finder filters by name, department and day; block 19 Doctors’ Timetable lays the sessions out as the week’s timetable. Add a doctor to the list and to the cards, and every one of them follows.

Journal posts, comments and orders carry their date as a distance from today — data-when="-4" is four days ago, data-when="+14" fourteen days from today, or a fixed date such as 2027-03-01 — and block 10 repaints the text from it.

Insurance cost estimate

The plans sit in MEDORA.plans (deductible, coinsurance %, specialist copay, out-of-pocket limit) and the services with their list prices in MEDORA.costs. Block 38 Insurance Cost Estimate: a specialist visit on a plan with a copay costs the copay; anything else pays the part of the deductible not yet met first, then the coinsurance on the rest, capped at the out-of-pocket limit; self-pay is 30% off the list price.

Patient tools

• Vaccination planner (block 15 Vaccination Planner) — MEDORA.vaccines lists 13 vaccines with their dose ages in months; from a birthday the planner dates every dose: before today “Should Be Done”, the next 60 days “Due Soon”, the rest upcoming.
• Prescription reader (block 17 Prescription Reader) — SPH, CYL, AXIS and ADD for each eye explained in plain words, and the numbers on a frame’s temple (lens width, bridge, temple length) turned into a frame size.
• Health calculators (block 40 Health Calculators) — BMI with the healthy range for the height, heart-rate zones by the Karvonen method with a maximum of 208 − 0.7 × age, and daily water: 33 ml per kg, 350 ml for every 30 minutes of exercise, half a litre more on a hot day.

The shop

The rules sit in var CART (block 36 Cart & Checkout): delivery $6.50, free on shop orders from $75 (health packages need none), sales tax 7.25% after any discount, and the coupons HEALTH10 (10% off) and WELCOME5 (5% off). The bag lives in the visitor’s browser (localStorage), so it follows them from page to page; the first visit starts with a small demo bag so the cart and checkout have something to show — to start empty, set BAG_DEMO in block 34 to [].

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

WebGL Layer

Some sections carry a moving layer drawn by one small WebGL shader (JS block 22 WebGL Layer), in three scenes, each a single canvas placed inside its section:

<canvas class="md-gl" data-gl="aurora" aria-hidden="true"></canvas>   soft iris light over a hero or a page title
<canvas class="md-gl" data-gl="clouds" aria-hidden="true"></canvas>   drifting clouds on the Pediatrics hero
<canvas class="md-gl" data-gl="petals" aria-hidden="true"></canvas>   falling petals in the footer

• 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

Medora 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 in the top bar turns any page right to left when Arabic or Hebrew is chosen and remembers the choice (key md-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="en" dir="rtl" class="no-js" data-theme="light">

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 41 numbered blocks (see the JS INDEX comment at the top of the file):

• 01–09 — Medora 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 Iris Window preloader, the header, the Pulse In reveals, opening hours, sliders and the video popup.
• 10–19 — Doctors Live, Quick Booking, Appointment Booking, Floor Directory, Childhood Conditions, Vaccination Planner, Reading Lens, Prescription Reader, Doctor Finder, Doctors' Timetable. The hospital logic: doctors on duty and their next free slot, booking, the three homes’ scroll moments, the vaccination planner, the prescription reader, the doctor finder and the timetable.
• 20–33 — Custom Select, Light And Dark Mode, WebGL Layer, Counters, Contact Form, FAQ Search, Tabs, Filter Tabs, Account Forms, Journal Search, Launch Countdown, Media Lightbox, Back To Top, Anchor Scroll. Page utilities: selects, the theme and direction switch, the WebGL layer, counters, forms, tabs, filters and search.
• 34–41 — Shopping Bag, Shop, Cart & Checkout, Demo Forms, Insurance Cost Estimate, Health Packages, Health Calculators, Wishlist, Portal And Small Forms. The shop and the patient tools: bag, shop, cart and checkout, the cost estimate, packages and the health calculators.

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 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, checkout, portal, 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
• Medora medical icons
• RTLCSS
• Google Fonts: Montserrat, Nunito

All plugin files and icon fonts are loaded locally. The only external requests are the Google Fonts stylesheet, the Google Maps embeds (contact, patients and visitors) 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.