Motorvia Documentation

Overview

An animated HTML template for car dealerships, showrooms and car marketplaces. Motorvia ships seven home pages, each written for one kind of visitor, a light and a dark theme, right-to-left support with a language picker, a WebGL light layer, and dealership logic that is worked out rather than typed in: stock counts from one inventory list, finance and lease payments, electric running costs and charging time, a budget planner, an instant valuation, a priced service menu, a trade-in calculator and showroom hours that follow the visitor’s clock.

What’s included

• 7 home pages by audience — Main Dealership, Electric, Prestige, Build & Price, Used Cars, Service Centre and Sell Your Car — each with its own scroll moment
• Two audience moods on the same template: volt green for the Electric home, champagne for the Prestige home, blaze orange everywhere else
• 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: a right-to-left language turns the page right to left
• The Road Light WebGL layer — headlight trails, studio paint reflections, volt field lines and drifting map contours — tinted by the theme colours
• Stock search with dependent make and model, live result counts, a compare drawer for up to three cars and a ten-row compare page
• Finance calculator, finance or lease side by side, budget planner, trade-in calculator and instant valuation with our offer range
• EV running cost and charging time, a version configurator that moves the payment, a priced service menu with ready-by time
• Test drive booking with slots from the showroom timetable, and open or closed status in the top bar, footer and showroom cards
• Inventory as grid, list and map; car details with the inspection sheet; showroom directory; seller dashboard; pricing plans
• A body-type rail on every page — seven fine-line silhouettes with live stock counts, docked under the hero or the page title
• Motorvia Icons: 90 fine-line interface icons drawn for the template, one stroke and one grid, as a local icon font
• A showroom configurator: pick a version and the photograph, the figures, the price and the monthly payment move with it
• Gauge Sweep preloader, skew-slide reveals, Swiper sliders and a video popup
• Fully responsive, W3C-valid, zero console errors

Getting Started

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

1. Open locally

Unzip the downloaded package and open motorvia/index.html in any modern browser (Chrome, Firefox, Edge, Safari). No build tools or server are required — the search, calculators, compare drawer and every filter work straight from the files.

2. Deploy to a server

Upload the contents of the motorvia/ 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 stock, the showroom hours and each calculator’s rules sit in one place — see Dealership 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 motorvia/, the template. Every page sits in the template’s root; everything the pages load sits under assets/:

motorvia/
├── *.html                              the 26 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 (network logos), loaded locally
    │   └── plugins/                    vendor stylesheets
    │       ├── bootstrap.min.css
    │       ├── bootstrap.rtl.min.css   Bootstrap for right-to-left pages
    │       └── swiper-bundle.min.css
    ├── js/
    │   ├── main.js                     all custom scripts, numbered JS INDEX (48 blocks)
    │   └── plugins/                    vendor scripts
    │       ├── bootstrap.bundle.min.js
    │       ├── jquery-3.7.1.min.js
    │       └── swiper-bundle.min.js
    ├── fonts/
    │   └── motorvia-icons/             the interface icon font (woff2, woff, css)
    ├── webfonts/                       Font Awesome Free font files (network logos)
    └── img/                            images, one folder per section
        ├── about/                       4 files
        ├── banner/                      3 files
        ├── bg/                          3 files
        ├── blog/                        6 files
        ├── brands/                      8 files
        ├── cars/                        27 files
        ├── dealers/                     4 files
        ├── flags/                       6 files
        ├── gallery/                     12 files
        ├── home/                        7 files
        ├── logo/                        4 files
        ├── press/                       6 files
        ├── social/                      7 files
        ├── team/                        4 files
        └── testimonial/                 5 files

To publish the site, upload the contents of motorvia/ 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). Change a token once and every section, button and card updates. Colours used with transparency have an -rgb twin (for example --mv-color-primary-rgb) — change both together.

Blaze orange carries the buttons, active states, figures and accent words; blaze deep is its partner for small text on light grounds. Graphite ink holds the hero overlays, the night bands, the top bar and the footer. The theme roles (--mv-ground, --mv-heading, --mv-color-paper, --mv-color-body, --mv-color-line) are the ones that change in dark mode.

Audience moods

A home can run on its own accent without touching the rest of the site: the class mv-mood-volt on the Electric home’s <body> and mv-mood-prestige on the Prestige home’s redefine the primary tokens for that page only. Remove the class to put a home back on blaze orange, or add it to any other page.

Fonts

Two Google Fonts are loaded in the head of each page: Saira (headings, figures and buttons, set wide through its width axis: --mv-stretch 110% and --mv-stretch-wide 122%) and Rubik (body text, navigation and labels). Swap them by editing the Google Fonts link and the --mv-ff-display / --mv-ff-body variables.

Logo

The logo is a wheel mark beside the name “Motorvia”, with “VIA” in blaze orange. It ships as ready-made PNG files in assets/img/logo/:

• logo.png — for light grounds: the solid header and the mobile menu in light mode, the light footer
• logo-light.png — for dark grounds and photographs: the header over a hero, the footer, the preloader, dark mode
• mark-512.png — the wheel alone (the home-screen icon)
• 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.

Icons

Interface icons come from Motorvia Icons, a fine-line icon font drawn for the template on one 24-unit grid with one stroke weight (assets/fonts/motorvia-icons/, 90 glyphs). Use them as <i> tags and size or colour them with font-size and color:

<i class="mvi-speedometer"></i>   <i class="mvi-fuel"></i>   <i class="mvi-gearbox"></i>   <i class="mvi-key"></i>
<i class="mvi-body-suv"></i>      (the body-type silhouettes: body-sedan, body-coupe, body-hatchback, body-pickup, body-electric, body-hybrid)

Every name is listed in motorvia-icons.css. The network logos (Instagram, X, Facebook, YouTube, LinkedIn) use Font Awesome Free’s brand set: <i class="fab fa-instagram"></i>.

Wide screens

From 1600px the container widens to 1440px and the root size steps to 17px; from 1960px to 1560px and 18px, so the layout keeps its proportions on large monitors. The values sit at the end of responsive.css.

Light & Dark Mode

Every header and the mobile menu have a theme switch. The choice is saved in the browser under the key mv-theme and applied by a one-line script in the <head> before the page paints, so a dark visitor never sees a light flash; a first-time visitor whose system is set to dark starts dark. 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. Brand colours and the graphite bands stay as they are.
• Bands that stay dark — sections with the class mv-night, the hero overlays and the page titles are dark 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.

Headers & Footers

One header and one footer serve every page; a class on each picks its variant, and the homes use them to fit their audience:

The top bar above each header carries the showroom’s open or closed status, a notice, the phone number, the showroom finder, sign in and the language picker.

Body-type rail

Every page carries the body-type rail: the inner pages under the page title, the homes under the hero (Home 1 and Home 2 under their search card). Its counts are read from INVENTORY (block 13) and it slides with block 17. The page generator writes it in one place, so it is the same on every page; to drop it from a page, delete its <section class="mv-bodyrail">. Docked, it lifts onto the edge above it and the next section’s own ground runs up under it.

Dealership Logic

Every figure on screen is worked out in main.js from one list or one formula, so nothing drifts out of step. Prices are in US dollars.

The stock

JS block 01 Inventory Data holds var INVENTORY: 46 cars across 16 makes, each with make, model, condition, price, year, mileage, body, fuel and city. The search panel’s model list follows the make, the “cars match” counts, the body and brand counts and the budget planner all read it. Add a car to the list and every count moves with it. The compare drawer (block 07) holds up to three cars.

Showroom hours

One timetable, var HOURS in block 36 Showroom Hours (weekday 0 = Sunday, opening and closing hour, null = closed), drives every “Open Now · Closes 19:00” line on the site — top bar, footer and showroom cards — from the visitor’s own clock, and highlights today in the hours lists. The test drive form (block 38) builds its times from it: every half hour from opening, the last drive an hour before closing, past times dropped today.

Finance

Block 26 Finance Calculator amortises the price less the deposit: M = P × r(1+r)ⁿ ÷ ((1+r)ⁿ − 1), with r the APR ÷ 12. Price, deposit, term and rate may be sliders, radio groups or a data-price on the block (the configurator, block 27, rewrites it when a version is picked).

Finance or lease

Block 43 Finance Or Lease puts both side by side. Lease = (capitalised cost − residual) ÷ term + (capitalised cost + residual) × APR ÷ 2400, where the capitalised cost is the price less the deposit and the residual is the chosen share of the price. The cheaper monthly is marked.

Electric running costs and charging

Block 40 EV Running Costs: weekly cost = miles ÷ efficiency × energy price, for the electric car (mi/kWh, $/kWh) and the current car (mpg, $/gal); the saving is the gap, × 52 for a year and × 260 for five. Charging time from 10% to 80% = battery × 0.7 ÷ charger kW.

Budget planner

Block 44 Budget Planner turns a monthly payment into a price ceiling: deposit + M × (1 − (1+r)⁻ⁿ) ÷ r, rounded down to $10, then counts the cars in INVENTORY at or under it. A hidden field carries the figure to the listing page.

Instant valuation and trade-in

Block 29 Instant Valuation values a car from the make’s average new price (rolled back from the stock), less 14% a year, adjusted by $0.09 for every kilometre over or under 16,000 a year and by the condition picked. The private range is ±6%; our offer sits 8% under it. Model years count from 2024, the newest year in the stock — change 2024 in the block when your stock moves on. Block 48 Trade-In shows the next car’s monthly with and without the trade-in at 6.9% APR (var APR).

Service menu

Block 46 Service Booking adds up the ticked jobs and their workshop time, and works out the ready-by time from the drop-off slot, rolling to the next open day when the work runs past closing. Prices and times sit on each job’s checkbox (data-price, data-mins) in homepage-6.html:

Test drives, viewings, service bookings, offers, the steps form and the account forms confirm on screen — connect them to your dealer management system to take real bookings.

WebGL Road Light

Some sections carry a moving light drawn by one small WebGL shader (JS block 37 Road Light), in four modes, each a single canvas placed first inside its section:

<canvas class="mv-gl" data-gl="trails" aria-hidden="true"></canvas>   headlight and tail-light trails over a road photograph
<canvas class="mv-gl" data-gl="paint" aria-hidden="true"></canvas>    studio light gliding over bodywork
<canvas class="mv-gl" data-gl="volt" aria-hidden="true"></canvas>     current running along field lines (Electric home)
<canvas class="mv-gl" data-gl="contour" aria-hidden="true"></canvas>  a road map’s contour lines under a light section

• Strength — data-gl-gain="0.7" dims or lifts a canvas (1 = as designed).
• Colours — the light is drawn in the theme’s own colours and the page’s audience mood, and repaints when the theme switches.
• Performance — a canvas only runs while its section is on screen and the tab is visible. The pointer pulls the light a little. 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 & Languages

Motorvia 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 in the top bar and the footer lists English, Spanish, French, German, Arabic and Hebrew; picking a right-to-left language turns the page right to left and remembers it (keys mv-lang and mv-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="ar" 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.

Adding A Language

Copy one <li> in the picker’s menu, set its data-lang-item code and data-dir (ltr or rtl) and its label, and add the language’s flag as an SVG in assets/img/flags/. Do the same in the footer’s picker.

JavaScript Guide

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

• 01–09 — Inventory Data, Preloader, Top Bar Notice, Sticky Header, Offcanvas Menu, Search Panel, Compare Drawer, Scroll Reveals, Parallax. The core every page shares: the stock list behind every count, the Gauge Sweep preloader, the header, the compare drawer and the reveals.
• 10–25 — Hero Slider, Dealership Hero Slider, Editorial Slider, Type & Brand Counts, Grid Filters, Car Rail, Home Menu Slider, Body Shape Slider, Sponsored Model Slider, Gallery Wall, Brand Tabs, Design Tabs, Video Modal, Counters, Gauges, Countdown. Sliders, tabs, filters, the video popup, counters, gauges and the countdown.
• 26–33 — Finance Calculator, Configurator, Testimonial Slider, Instant Valuation, Listing Tools, Detail Gallery, Steps Form, Contact Form. Dealership logic: the finance calculator, the configurator, the instant valuation, listing sort and filters, the steps form and the contact form.
• 34–39 — Back To Top, Theme & Direction, Showroom Hours, Road Light, Test Drive Slots, Scrubbed Counters. Back to top, the theme and direction switches with the language picker, showroom hours, the WebGL Road Light, test drive slots and the scrubbed counters.
• 40–48 — EV Running Costs, Hero Zoom-Out, Build Hero Slider, Finance Or Lease, Budget Planner, Inspection Passes, Service Booking, Sell Hero Slider, Trade-In. The audience homes: electric running costs, the prestige zoom-out, finance or lease, the budget planner, the inspection passes, service booking and the trade-in.

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, the press logos and the flags are included and ready to use. The marque badges in img/brands/ belong to the car makers and ship as placeholders: add badges you have the right to use, as transparent PNGs at the same size. 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 test drive, viewing, service, offer, add-listing, 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
• Font Awesome Free (network logos)
• RTLCSS
• Google Fonts: Saira, Rubik
• Flag icons

All plugin files and icon fonts are loaded locally. The only external requests are the Google Fonts stylesheet, the Google Maps embeds (contact, listing map and the service centre home) and the video popup.

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.