Overview

A dependable, hands-on HTML template for independent garages, car repair workshops, MOT centres and tyre centres. Mecanova ships three home pages, a light and a dark theme, right-to-left support, and garage logic that is worked out rather than typed in: every price follows the size of the car, the booking lists real start times with the bay that takes the job, the MOT page works out the due date and the earliest test that keeps it, the tyre finder prices every tyre that fits, and the breakdown line knows how long the van takes at this hour.

What’s included

• 3 home pages, each with its own scroll moment: Tyres For Every Season (a tyre rolls across, its tread changing summer, winter, all-season and printing on the road), How A Tyre Change Works (a jack lifts the car and the wheel comes off) and Dashboard Check (six warning lights go out one by one as each service passes)
• One car-size switch: city car, family car, large car or SUV & van — every labour price on every page follows it, remembered between visits
• Service menu with filters and search and a visit total, labour time and offer line that add up as you tick
• Five-step Book A Bay wizard: the car, the services, a day and a start time with the bay that can take the job, details, confirm
• MOT & inspection dates from the last test or a new car’s registration, saved for a reminder
• Tyre finder by width, profile and rim with season and tier filters, fitted prices for one, two or four tyres and the sidewall code explained
• 24h breakdown page with the van’s arrival time for this hour, a recovery estimate by distance and a request form
• The counter: filters, sort and search, product page, bag, coupon, free-delivery meter, VAT shown inside the price, checkout with an order number, wishlist
• Recent jobs with their bills, mechanics and profiles, service plans, FAQ with search, account pages, My Garage, coming soon, 404
• Light and dark mode, a flag language picker that turns any page right to left, WebGL tread marks and an alloy-wheel footer
• Wrench Turn preloader, Lift Raise reveals, a gauge needle that swings on card hover, Swiper sliders and Fancybox video popups
• Fully responsive, HTML5, Font Awesome Free and every plugin loaded locally

Getting Started

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

1. Open locally

Unzip the downloaded package and open mecanova/index.html in any modern browser (Chrome, Firefox, Edge, Safari). No build tools or server are required — the service menu, booking, MOT dates, tyre finder, breakdown estimate and shop all work straight from the files.

2. Deploy to a server

Upload the contents of the mecanova/ 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. Hours, prices, sizes, bays, tyres, the team and the shop live in one place — see Garage 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 mecanova/, the template. Every page sits in the template’s root; everything the pages load sits under assets/:

mecanova/
├── *.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 (37 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/
    │   └── theme-icons/                the sun and moon of the theme switch
    ├── webfonts/                       Font Awesome Free font files
    └── img/                            images, one folder per section
        ├── about/                       1 files
        ├── banner/                      8 files
        ├── bg/                          5 files
        ├── blog/                        13 files
        ├── cutouts/                     3 files
        ├── faces/                       6 files
        ├── faq/                         1 files
        ├── flags/                       6 files
        ├── icons/                       32 files
        ├── logo/                        7 files
        ├── menu/                        3 files
        ├── services/                    21 files
        ├── shop/                        16 files
        └── team/                        9 files

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

Workshop blue fills the buttons, the top bar, the icons and the rule under every title; buttons carry ink text on blue and on yellow, which reads clearly on both. Blue Text is the deeper partner for small blue text on light grounds. Yellow is the offer and call bands; charcoal is the tyre-photo bands, the footer and the heroes; navy is Home 3’s bands. --mc-bg, --mc-surface, --mc-heading and --mc-text are the semantic names the components use — the dark theme swaps those (see Light & Dark Mode).

Fonts

Two Google Fonts are loaded in the head of each page: Noto Sans (the bold capital headings, figures and prices) and Heebo (body, navigation, buttons and labels). Swap them by editing the Google Fonts link and the --mc-ff-head / --mc-ff-body variables. Headings are written in Title Case and set in capitals by CSS, so removing text-transform gives you Title Case at once.

Logo

The logo is a spanner whose box end holds a nut, then “meca” in ink and “nova” in amber. It ships as ready-made PNG files in assets/img/logo/:

• logo.png — for light grounds: the headers in light mode
• logo-light.png — for dark grounds: the navy band, the footer, dark mode
• mark.png and favicon.png — the spanner and nut alone, and the browser tab icon
• pre-wrench.png, pre-nut.png, pre-word.png — the preloader’s three pieces

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. The preloader turns pre-wrench.png round the centre of its square and slides out pre-word.png.

Light & Dark Mode

Every header (and the mobile menu) has a theme switch. The choice is saved in the browser under the key mecanova-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 dark — sections with the class is-night (the tyre bands, the dashboard, the breakdown strip, the footer) are dark in both themes; is-navy makes one navy. The yellow and blue bands keep ink text with is-yellow and is-blue. A light card inside a dark band takes mc-on-light to keep its own ink.
• 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.

Garage Logic

The figures on every page come from one data block, JS block 09 Meca Data near the top of main.js (var MECA). Edit it once and the cards, prices, slots, dates and totals follow. Prices are in pounds and include VAT; times are minutes after midnight (480 = 8:00 am).

Prices by car size

Booking a bay

The wizard adds up the labour minutes of every ticked service, rounds them up to the slot step and lists each start time on an open day with the first bay free for every category the job needs. A seeded hash marks some bay times as taken so the demo looks lived-in — change the share in booking.share, or remove it in bayTaken() (block 10 Workshop Clock). Continue never blocks; Confirm checks the details and gives a reference made from the date, saved to My Garage.

The MOT dates

Tyre prices

Breakdown

How the shop totals

The car size, the menu’s picks, bookings, the MOT date, the tyres, the bag, the wishlist and the coupon are kept in the browser (localStorage), so they follow the visitor from page to page and fill My Garage. The first visit starts with a small demo bag and wishlist so every shop page has something to show; to start empty, set the two demo lists in doShop() (block 31 Shop) to []. Bookings, breakdown requests, checkout and the account forms confirm on screen — connect them to your own systems to take real bookings.

WebGL Layers

Two small WebGL shaders draw the moving layers: the tread — faint tyre prints (summer ribs, winter sipes, an all-season V) rolling along the foot of the heroes, the page-title banners and the dark bands — and the alloy — the footer’s five-spoke wheel spinning up and easing off, its spokes smeared by a radial motion blur while the yellow caliper stays still. Each is one canvas:

<canvas class="mc-gl" data-gl="tread" aria-hidden="true"></canvas>

• Colours — each layer reads three colours and an opacity from CSS variables on its canvas or section: --gl-1, --gl-2, --gl-3 and --gl-alpha. The theme switch repaints them.
• Performance — a layer 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)

Mecanova 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 language picker (a flag and a code) in the top bar and the mobile menu lists the languages that read left to right and right to left. Choosing Arabic stores the language and the direction (keys mecanova-lang and mecanova-dir) and reloads; 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. Nothing is translated — you bring your own right-to-left 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" class="no-js" dir="rtl">

2. Swap Three Stylesheets

The scripts read the direction from the dir attribute. The tyre roll, the jack lift and the dashboard keep their left-to-right drawing, like the road and the dials they show.

JavaScript Guide

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

• 01–08 — Preloader, Sticky Header, Offcanvas Menu, Scroll Reveals, Back To Top, Anchor Scroll, Light & Dark Mode, Direction, WebGL Layers. The core every page shares: the Wrench Turn preloader, the header, the Lift Raise reveals, the theme and direction switch and the WebGL layers.
• 09–10 — Meca Data, Workshop Clock. Meca Data holds every figure; Workshop Clock works out open now, today’s hours, the breakdown van’s arrival and the next free bay.
• 11–19 — Custom Select, Figures, Meters & Rings, Hero Sliders, Card Sliders, Accordion, Filter Tabs, Grid Search, MOT Reminder Sign-Up, Choice Cards. Shared components: selects, figures and meters, sliders, accordions, filters, search, forms.
• 20–25 — Car Size, Service Menu, Bay Booking, MOT Reminder, Tyre Finder, Breakdown Request. The garage logic: car size, the service menu, bay booking, the MOT dates, the tyre finder and the breakdown request.
• 26–28 — Tyre Roll, Jack Lift, Dashboard Lights. The three home pages’ scroll moments.
• 29–37 — Offer Code, Contact Form, Shop, Account Forms, My Garage, Article Tools, Demo Forms, Launch Countdown, FAQ Search. The offer code, contact form, shop, accounts, My Garage, articles, demo forms, the countdown and FAQ search.

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, the illustrated icons, the dashboard warning lights, the gauge dial 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 and the comment form post to sendmail.php, a lightweight AJAX mail handler. The success or error message appears under the button without reloading the page. The MOT reminder sign-up, appointment request, bay booking, breakdown request, checkout, 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
• RTLCSS
• Google Fonts: Noto Sans, Heebo
• Logo lettering: Exo 2

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