Overview

A modern HTML template for pharmacies, drugstores and medical stores. Pharmora ships four home page designs, a light and a dark mode, right to left from a language picker, and a pharmacy that actually works: opening hours that know whether each store is open right now, prescriptions that check their Rx number and know when they will be ready, a shop with pack sizes and Subscribe & Save, and health tools that do the arithmetic.

What’s included

• 4 home page designs (Main Store, Pharmacy, Supplements & Wellness, Skincare & Beauty), each with a three-slide hero and its own scroll scene: the Free Delivery Basket, the Pill Organizer, Your Day Dosed and the AM To PM Routine
• Store hours in New York time for four pharmacies: open now, closing soon or when they next open, in the top bar, footer, store locator and booking forms
• Prescriptions: refill by Rx number (with a check digit), transfer from another pharmacy, send a new prescription; ready times inside the pharmacy’s hours
• Shop: 45 products with pack sizes and price per unit, Subscribe & Save, quick view, compare, wishlist, cart with coupons, free delivery and tax, checkout with delivery or store pickup, order tracking
• Health tools (BMI, blood pressure category, days of supply, vitamin D), pharmacist consultation booking with calendar files, the vaccine guide, Care Club savings
• Light and dark mode the visitor’s browser remembers; a flag language picker whose right-to-left languages turn any page right to left
• A capsule preloader, Tray Drop reveals, scroll scenes and the LED pharmacy cross in WebGL
• Fully responsive, wide-screen aware, W3C-valid, zero console errors; every animation switches off for visitors who prefer reduced motion

Getting Started

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

1. Open locally

Unzip the package and open pharmora/index.html in any modern browser (Chrome, Firefox, Edge, Safari). No build tools are needed. The contact form needs a PHP host (see Contact Form); everything else works straight from your computer.

2. Deploy to a server

Upload the contents of the pharmora/ folder to your hosting with an FTP client (such as FileZilla) or your hosting control panel, then open your domain.

3. Customise

All custom styling lives in assets/css/style.css (a numbered Table of CSS at the top) and assets/css/responsive.css. Colours and fonts are CSS variables — see Colors & Fonts. The pharmacies, their hours, the catalogue, the delivery and tax settings, the coupons and the Care Club plans live in one block at the top of main.js — see Stores & Prescriptions.

File Structure

The key files and folders included in the template.

Folder Structure

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

pharmora/
├── *.html                              the 35 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
    │       ├── jquery.fancybox.min.css
    │       └── swiper-bundle.min.css
    ├── js/
    │   ├── main.js                     all custom scripts, numbered JS INDEX (48 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/ph-icons/                 the Pharmora icon font (woff2, woff, ttf + ph-icons.css)
    ├── webfonts/                       Font Awesome Free font files
    └── img/                            images, one folder per section
        ├── about/                      6 images
        ├── banner/                     22 images
        ├── blog/                       5 images
        ├── categories/                 7 images
        ├── decor/                      6 images
        ├── flags/                      7 images
        ├── logo/                       5 images
        ├── products/                   51 images
        ├── services/                   8 images
        └── team/                       10 images

Colors & Fonts

The whole design is driven by CSS variables at the top of style.css (section 1.1 Design Tokens). Change a token once and every section, button and card follows.

Each colour used with transparency has an -rgb companion (for example --ph-primary-rgb: 16, 35, 94); change both together. --ph-accent-text is the deeper amber used for small amber text on light grounds, so it stays readable, and amber buttons carry navy text (--ph-on-accent) for the same reason.

Fonts

Two Google Fonts are loaded in the head of each page: Geologica (headings, navigation, prices and figures) and Inter (body text, buttons and forms). Swap them by editing the Google Fonts link and the --ph-ff-heading and --ph-ff-body variables.

Wide screens

The content width grows with the screen from 1600px and again from 1960px, so a large display never looks like a scaled-down page.

Light & Dark Mode

The moon and sun button in the header (and in the menu panel on phones) switches the whole site between light and dark. The choice is stored in the visitor’s browser (localStorage, key ph-theme) and applied by a one-line script in the <head> of every page, before anything is drawn, so a dark page never flashes white.

Dark mode is a second set of the same variables under html[data-theme="dark"]:

To start every visitor in dark mode, add data-theme="dark" to the <html> tag of each page. To remove the switch, delete the .ph-theme-toggle buttons.

Stores & Prescriptions

Everything the pharmacy knows lives in JS block 01 Store Data of assets/js/main.js (var STORE = { ... }). The pages carry the same values printed in, so they read correctly before the scripts run; the scripts then keep every status and date current for the visitor.

The pharmacies (STORE.stores)

• East Village — 128 Second Avenue, Mon–Fri 8 AM–10 PM, Sat 9 AM–8 PM, Sun 10 AM–6 PM
• Chelsea — 301 Eighth Avenue, Mon–Fri 8 AM–9 PM, Sat 8 AM–9 PM, Sun 10 AM–5 PM
• Upper West Side — 2290 Broadway, open 24 hours, every day
• Brooklyn Heights — 88 Montague Street, Mon–Fri 9 AM–8 PM, Sat 9 AM–6 PM, Sun closed

Hours are 24-hour times per weekday ("0" is Sunday); a missing day is closed, and always: true marks a store that never closes. The first store is the flagship the top bar and footer show. Every status is worked out in the time zone STORE.tz (America/New_York) whatever the visitor’s own clock says; change it to your city’s zone.

{ "id": "east-village", "name": "East Village", "street": "128 Second Avenue",
  "hours": { "0": ["10:00", "18:00"], "1": ["08:00", "22:00"], ... "6": ["09:00", "20:00"] } }

Rx numbers and ready times

An Rx number is RX- and seven digits; the last digit is the sum of the first six, mod 10 (RX-1048272: 1+0+4+8+2+7 = 22, so 2), which catches a mistyped number before it is sent. A refill is ready two hours after it is requested inside the store’s opening hours, or two hours after the next opening. The demo matches each valid number to one of four sample prescriptions; connect the forms to your pharmacy system to answer with the real one.

Days of supply, slots and reminders

• Days of supply = tablets in the box ÷ (tablets per dose × doses a day); the refill-by date is five days before the last dose, and Add A Reminder downloads an .ics file for that morning
• Consultation and pickup times come from the chosen store’s hours: the next three open days, a slot every data-len minutes (20 by default) from an hour after opening to an hour before closing; the demo marks some as taken
• Same-day delivery for orders before 2 PM (New York time, Monday to Saturday); order tracking reads the stage from the order number’s time

Shop & Subscribe

• Products live in STORE.products: name, department, form, unit, strength, brand, rating and packs (each with a label, a count and a price, and an optional was price). Price per unit is the pack price ÷ its count. The product cards in the pages use the same id (data-add-cart="vitamin-d3-drops"), so keep the two together when you add a product
• Prescription medicines (rx: true) are never sold to the cart: their page offers a refill or a transfer instead
• Subscribe & Save (STORE.shop.subscribe): every 1 month 15% off, every 2 months 10% off, every 3 months 5% off; the product page shows the cadence price and the next three delivery dates, and the cart keeps subscription lines at the discount
• Delivery is free from $49, otherwise $4.99 standard or $9.99 express; store pickup is free; tax is 8% on goods and delivery (STORE.shop)
• Demo coupons: PHARMORA10 (10% Off Your Order), FREESHIP (Free Delivery) — edit or add them in STORE.coupons
• The cart, the wishlist and the compare list are kept in the browser’s local storage, so they follow the visitor from page to page; the demo starts with three items in each

Health Tools & Care Club

• BMI — kg ÷ m² (imperial: 703 × lb ÷ in²) in the WHO adult bands
• Blood pressure — the ACC / AHA 2017 categories from the higher of the two readings’ categories, a crisis above 180 / 120
• Vitamin D — 1 mcg = 40 IU, against the adult upper limit of 4,000 IU

Care Club plans (STORE.plans)

• Basic — $0.00 a month, 5% off every order, no free deliveries
• Plus — $4.99 a month, 10% off every order, 4 free deliveries a month
• Premium — $9.99 a month, 15% off every order, free delivery on everything
• Family — $14.99 a month, 15% off every order, free delivery on everything

The savings calculator works out a year on each plan: the discount on twelve months’ spend, plus the deliveries it makes free at the standard $4.99, less twelve months’ fees (one membership a person, except Family, for two to five people), and marks the plan that keeps the most.

Animation & WebGL

• Preloader — a two-tone capsule drops, turns and twists open, the cross blooms and the screen parts as the capsule’s two halves; it plays once per visit
• Reveals — add ph-drop to a card or photo and it drops into place as it scrolls into view (the Tray Drop); ph-fade fades copy up (is-left or is-right change the direction, data-delay="0.2" staggers); headings with ph-words arrive word by word and draw the amber rule beneath
• LED pharmacy cross — <canvas class="ph-gl" data-gl="cross"> draws a dot-matrix pharmacy cross whose lights run soft patterns and brighten under the pointer, in the footer, on coming soon and on the 404 page. It pauses off screen and draws one still frame for reduced motion
• Scroll scenes — the Free Delivery Basket (Home 01), the Pill Organizer (Home 02), Your Day Dosed (Home 03) and the AM To PM Routine (Home 04) follow the scroll without pinning the page

Visitors who prefer reduced motion get every page in its finished state, with no animation.

RTL (Right To Left)

Pharmora is RTL-ready, and right to left comes from the stylesheets, not from separate pages: choose Arabic or Hebrew in the flag language picker (top bar, header or menu panel) and the page turns right to left and remembers the choice (key ph-dir); the one-line script in <head> then sets dir="rtl" and swaps the three stylesheets for the files named in their data-rtl attribute before the page paints. The picker changes direction only — 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, inside one jQuery wrapper, in 48 numbered blocks (see the JS INDEX at the top of the file):

• 01–08 — Store data, preloader, sticky header, panels and drawers, scroll reveals, store hours, hero slider, card sliders
• 09–14 — Shop store, cart totals, cart drawer, product search, quick view, countdowns
• 15–19 — Light and dark mode with the language picker, the LED pharmacy cross (WebGL), back to top, tabs, decor depth
• 20–29 — Rx number check, Free Delivery Basket, newsletter, Pill Organizer, days of supply, consultation and pickup slots, Your Day Dosed, Subscribe & Save, AM To PM Routine, video modal
• 30–37 — Shop filters, product page, cart page, checkout, wishlist and compare, order tracking, my account, step forms
• 38–48 — Prescriptions, consultation booking, FAQ, vaccine guide, health tools, store locator, Care Club savings, counters, journal, contact form, account forms

Each block is a self-contained doSomething() function that skips pages where its section is not present, so you can delete any block you do not need. Countdowns read a data-countdown attribute: the demo uses relative dates (data-countdown="+6" is six days from today, so the preview never runs out); set a real date such as data-countdown="2027-01-11".

Images

The download ships with neutral placeholder images so you can see every layout at the correct size. Replace them with your own photos using the same file names. Images are grouped by section in assets/img/.

The logo files, the capsule and tablet cut-outs, the flags and the icon fonts are included and ready to use. The demo photography on the live preview is for preview only and is not included in the download.

Contact Form

The contact form, the blog comment form, the coming-soon form and the newsletter post to sendmail.php, a lightweight AJAX mail handler; the success or error message appears under the form without reloading the page. To activate it:

1. Set your email address

Open sendmail.php and replace the placeholder recipient at the top of the file:

$email = 'hello@yourdomain.com';

2. Upload to a PHP host

The form needs a server with PHP mail() support (nearly every shared host). Opened from your computer or a static-only host, the form shows a short “upload to a PHP-enabled host” notice instead.

3. Optional: Google reCAPTCHA v3

Invisible reCAPTCHA v3 spam protection is built into the handler and stays dormant until the form sends a token. 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 contact 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 checks every submission with Google and rejects low-score (bot) requests.

Credits

Pharmora is built with these open-source libraries and resources.

• Bootstrap 5.3
• jQuery 3.7.1
• Swiper 11
• GSAP 3 + ScrollTrigger
• Fancybox 3
• Font Awesome Free
• Google Fonts: Geologica, Inter
• RTLCSS
• Flag icons (MIT)

All plugin files and icon fonts are loaded locally. The only outside requests are the Google Fonts stylesheet, the Google Maps embeds, and YouTube when a visitor opens a video.

Support

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