Overview

A bright, modern HTML template for dentists and dental clinics. Dentora knows how a clinic actually runs — each dentist’s own week and lunch break, how long every treatment takes, which times are really free, what insurance pays toward each class of treatment — and turns that into booking forms, estimators and calculators that work straight from the files.

What’s included

• 3 homepage designs: the clinic (a slider hero with a framed inset card and the five-step Visit Stack), cosmetic (fanning photo prints, the whitening Shade Estimator, before / after) and family (photo tiles, the next free checkup and the two-minute Brush Clock)
• Appointment booking in four steps on each dentist’s real calendar: only the dentists who do the treatment, only the start times the visit fits, a reference and Add To Calendar
• Short booking forms on the homes, the treatment and dentist pages that hand their choice to the booking page
• Insurance estimator (deductible, the plan’s share by class, the yearly maximum) and a payment plan with interest-free and APR terms
• Membership plans with a calculator that compares a year of care with and without them
• Comparing Prices: treatment at home and abroad with flights, hotel nights and transfers counted in
• Live opening hours everywhere (Open Now, Closes In, Closed) in New York time, today’s row highlighted
• Dental shop with filters and sort, product page, cart with coupon, delivery and sales tax, and checkout
• Light and dark mode, and a flag language picker that turns any page right to left
• A tooth-filling preloader, leaf-corner reveals, soft WebGL light and a glossy WebGL tooth in the footer
• Fully responsive, W3C-valid, zero console errors, and every animation respects reduced motion

Getting Started

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

1. Open locally

Unzip the downloaded package and open dentora/index.html in any modern browser (Chrome, Firefox, Edge, Safari). No build tools or server are required — every booking form, estimator and filter works straight from the files.

2. Set your clinic

Open assets/js/main.js and edit the CLINIC object in block 01: opening hours, your dentists’ weeks, treatments and prices, insurance plans and the shop. See Clinic Settings.

3. Deploy to a server

Upload the contents of the dentora/ 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.

4. 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 CSS variables — see Colors & Fonts.

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 dentora/, the template. Every page sits in the template’s root; everything the pages load sits under assets/:

dentora/
├── *.html                              the 26 pages (see File Structure)
├── sendmail.php                        the AJAX mail handler for the forms
└── assets/
    ├── video/                          daily-care.mp4
    ├── 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 (38 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/dt-icons/                 the dental line-icon font
    ├── webfonts/                       Font Awesome Free font files
    └── img/                            images, one folder per section
        ├── about/                 5 images
        ├── avatars/               9 images
        ├── banner/                5 images
        ├── blog/                  9 images
        ├── cosmetic/              21 images
        ├── family/                4 images
        ├── flags/                 10 images
        ├── hero/                  6 images
        ├── logo/                  4 images
        ├── mega/                  3 images
        ├── pricing/               5 images
        ├── services/              25 images
        ├── shop/                  17 images
        ├── team/                  8 images
        └── travel/                6 images

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

Clinic Settings

Every opening-hours line, free appointment time, price, estimate and shop total reads one object at the top of assets/js/main.js (block 01 Clinic Data). Edit it once:

var CLINIC = {
  name: 'Dentora Dental Clinic',
  tz: 'America/New_York',      // Open Now and free times follow it
  hours: {                     // 0 = Sunday, null = closed
    '0': null, '1': ['08:00', '20:00'], ... '6': ['09:00', '18:00']
  },
  services: [                  // cls = the insurance class
    { id: 'checkup', name: 'Checkup & Cleaning', price: 115,
      unit: 'visit', mins: 45, cls: 'preventive' }, ...
  ],
  dentists: [
    { id: 'julia', name: 'Dr. Julia Stenford',
      days: { '1': ['08:00', '16:00'], ... },
      lunch: ['12:30', '13:15'],
      services: ['checkup', 'fillings', ...] }, ...
  ],
  plans: [                     // share by class, deductible, maximums
    { id: 'standard', name: 'Standard PPO',
      pct: { preventive: 100, basic: 80, major: 50, ortho: 50, cosmetic: 0 },
      deductible: 50, annual_max: 1500, ortho_max: 1500 }, ...
  ],
  apr: [[6, 0], [12, 0], [18, 9.9], [24, 12.9]],   // months, APR
  membership: [ ... ], memberDiscount: 15,
  destinations: [ ... ], tripTreatments: [ ... ],  // Comparing Prices
  shades: [ 'B1', 'A1', ... ], shadeHex: [ ... ],  // lightest first
  whitening: [ ... ],
  products: [ { id: 'p01', name: 'Oral Pro 600 Sonic Brush', price: 89 }, ... ]
};

The demo’s dentists

• Dr. Julia Stenford — Mon 08:00–16:00, Tue 08:00–16:00, Wed 08:00–16:00, Sat 09:00–14:00 · Teeth Cleaning, Fillings, Kids Teeth Care, Emergency Cases, Whitening, Deep Cleaning, Extractions
• Dr. John Cambel — Tue 10:00–19:00, Thu 10:00–19:00, Fri 08:00–16:00 · Implantology, Extractions, Root Canal, Crowns, Dentures, Emergency Cases, Teeth Cleaning
• Dr. Helena Zerman — Mon 09:00–17:30, Wed 09:00–17:30, Thu 09:00–17:30 · Orthodontia, Teeth Braces, Teeth Cleaning, Kids Teeth Care
• Dr. Marco Williams — Tue 11:00–20:00, Thu 11:00–20:00, Fri 11:00–20:00, Sat 09:00–18:00 · Whitening, Veneers, Crowns, Fillings, Teeth Cleaning

• A new dentist — add them to dentists with an id, then add an <option value="id"> to the dentist selects (home booking forms, appointment page) and a team card.
• A new treatment — add it to services (its cls is the insurance class: preventive, basic, major, ortho or cosmetic), list its id under the dentists who do it, and add its option to the treatment selects.
• Prices on the pages (the price lists, cards and rows) are plain text in the HTML; change them there too when you change services.
• Your address and phone appear in the top bar, the footer and the contact sections; search the pages for Wall Street and 555-0147.

Clinic Logic

Nothing that depends on the date is typed in: free times, the next free checkup, opening status and post dates are worked out each time the page opens, so the demo never goes stale.

• Free times — a dentist’s start times sit on a 15-minute grid inside their day; the visit must fit before the lunch break or the end of the day, and times already past in the clinic’s time zone are left out. The demo marks about a third of each day as booked, the same for a given dentist and date, so the calendar looks lived-in. To show your real availability, replace freeSlots() in the core with a call to your booking system.
• Booking — the short forms and the treatment, dentist and shade pages hand their choice to appointment.html in the browser tab (no URL parameters). The request goes to sendmail.php with a reference such as DT-1020-0915, and Add To Calendar downloads an .ics file (block 31 Appointment Booking).
• Insurance — the plan pays its share of the treatment’s class after the deductible (never charged on preventive care), up to what is left of the yearly maximum; orthodontics has its own lifetime maximum, cosmetic work is never covered (block 32 Coverage And Payment Plan).
• Payment plan — terms at 0% divide the amount evenly; terms with an APR are amortised (monthly payment = amount × r / (1 − (1 + r)⁻ⁿ), r = APR / 1200).
• Membership — without the plan each person pays two checkups and the yearly x-rays; with it the fee covers them, one emergency exam is included and treatment is memberDiscount% off.
• Comparing Prices — price × teeth, plus the flight, the hotel for the treatment’s nights (one more night for every three extra teeth) and the transfers, against the price at home.
• Shade Estimator — whitening moves a smile up the 16-tab guide by as many tabs as the method reaches and never past B1.
• Shop — coupon SMILE10 takes 10% off; delivery is $5 and free from $60; New York sales tax is 8.875% (block 30 Shop Pages).

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 --dt-primary-rgb) — change both together.

Navy fills buttons, headings and the footer; sky carries accents, the title bars and the light; mint and pale blue are the soft section grounds. The line icons take one of three tones (coral, leaf, sky) through the tone-coral, tone-leaf and tone-sky classes. The diagonal “leaf” corner is a token too: --dt-r-leaf and its -md / -sm sizes.

Fonts

Two Google Fonts are loaded in the head of each page: Gabarito (headings, buttons and figures) and Onest (body text and labels). Swap them by editing the Google Fonts link and the --dt-ff-heading / --dt-ff-body variables.

Light & Dark Mode

The moon switch in the header flips data-theme on the <html> tag between light and dark. The choice is remembered in the browser (dt-theme) and applied before the page paints. Every colour role has a dark value in the :root[data-theme="dark"] block of style.css, so a new section built from the tokens works in both modes.

RTL (Right To Left)

Every page is RTL-ready: right to left comes from the stylesheets, not from separate pages. The language picker (a flag and a code) lists the languages that read left to right and right to left. Choosing Arabic or Hebrew stores the language and the direction (dt-lang and dt-dir in local storage) and reloads; 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. The layout, sliders and animations all mirror; times, prices and phone numbers keep their own reading order. 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, wrapped in a jQuery IIFE and organised into 38 numbered blocks (see the JS INDEX comment at the top of the file):

• 01–08 — Clinic Data, Preloader, Sticky Header, Offcanvas Menu, Scroll Reveals, Opening Hours, Light And Dark Mode, WebGL Layer. The clinic’s data and the core every page shares.
• 09–18 — Sliders, Custom Select, Counters, Back To Top, Anchor Scroll, Contact Form, Media Lightbox, FAQ Search, Tabs, Filter Tabs. Interface helpers.
• 19–27 — Quick Booking, Visit Stack, Polaroid Fan, Shade Estimator, Before And After, Face Bubbles, Brush Clock, Next Free Time, Post Dates. Homepage sections, the scroll moments and the live clinic tiles.
• 28–30 — Bag Store, Shop Filters, Shop Pages. The shop: one bag for the drawer, the cart and checkout.
• 31–38 — Appointment Booking, Coverage And Payment Plan, Membership Calculator, Treatment Trip Compare, Account Forms, Journal Search, Article Tools, Launch Countdown. Page-specific blocks: booking, estimators and account pages.

Each block is a self-contained doSomething() function that 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 by section inside assets/img/:

The logo files, the flags and the dental icon font 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

Every form in Dentora — contact, the appointment request, the booking cards, comments, checkout, the account forms and the opening reminder — 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 — 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 the page that carries the form, 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 automatically 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.12 + ScrollTrigger
• Fancybox 3.5.7
• Font Awesome Free 6
• RTLCSS
• Google Fonts: Gabarito, Onest

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

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.