AVAVA Cars is a complete front end for a multi-brand used-car marketplace or a dealer group: 60 hand-coded pages covering the whole journey — search, the car, the parts shop, the buyer's account and the dealer's back office. Built with plain HTML5, CSS3 and vanilla JavaScript: no jQuery, no Bootstrap, no npm, no build step. Open index.html and start editing.

Every filter, counter, calculator, cart and dashboard action really works in the browser, so what your client clicks in the demo is what your developers connect to the back end.

What's inside

4 home pages

• Two hero strategies — full photograph with a live card, or search-first
• Two colour seasons — winter lime and autumn larch — that follow the visitor from page to page

Listings — 10 layouts

• 6 listing styles: dark or light filter panel, sidebar filter rail, row cards, and a search box that reads plain sentences like "electric SUV under 150k"
• 4 map search layouts on live OpenStreetMap maps, including a full-height map view
• Working filters, quick picks, two sorts and pagination — every counter on the page reads the same number

Car detail — 5 layouts

• Photo gallery with full-screen viewer
• Published 200-point inspection report with the faults found
• Finance calculator, test-drive booking, similar cars, showroom map

Parts shop — 8 pages

• 3 catalogue layouts (one filters parts by the buyer's own car)
• 3 product pages with variants, gallery and fitting option
• Cart saved in the browser, checkout with validation, order confirmation

Buyer dashboard — 8 screens

• Profile
• Saved cars
• Bookings
• Orders
• My listings
• Sell my car (6-step wizard)
• Messages
• Settings

Dealer dashboard — 13 screens

• Dashboard
• Listings with bulk actions
• Add listing (5 steps)
• Enquiries
• Bookings
• Orders
• Analytics with CSV export
• Reviews
• Team & permissions
• Payouts
• Invoices
• Dealer profile
• Settings

Other pages

• About
• Service & aftercare
• Pricing with monthly/yearly plans
• Compare cars
• FAQ with search
• Contact with map
• Terms
• Blog list
• Blog post
• 404

Features

• EUR / USD currency switch — every price on every page repaints; the choice is remembered
• Two seasons, one variable — change the accent colour in one place in style.css
• Leaflet + OpenStreetMap maps — no API key, no billing account
• Native <dialog> modals for sign in, sign up and booking
• Data in JSON — cars, parts and dashboard rows live in JSON blocks inside the pages, ready to be replaced by your API
• Finance calculator and trade-in estimator
• Photo upload zones with drag and drop and preview, built on real <input type="file"> fields
• Logo preloader that fills with the accent colour as the page loads
• Fully responsive from 320px to 2560px, touch-friendly dropdowns
• Accessible — skip link, landmarks, labelled forms, visible keyboard focus, reduced-motion support
• Valid HTML and CSS (W3C), clean and commented code with a table of contents in every file
• Fast — WebP images, lazy loading, one shared stylesheet plus a small file per page, one script
• Print styles included

Package contents

• template/ — all 60 HTML pages with CSS, JavaScript, fonts, images and Leaflet
• documentation/ — step-by-step guide with screenshots: installation, file structure, colours, fonts, images, navigation, car and parts data, cart, currency, forms, maps, publishing and troubleshooting

Technical details

• HTML5, CSS3 (custom properties, grid, flexbox), vanilla JavaScript (ES5)
• Leaflet 1.9.4 (included)
• Google Fonts: Archivo, JetBrains Mono; BBH Bartle (included)
• Browsers: latest Chrome, Firefox, Safari, Edge; iOS Safari and Chrome for Android

Please note

• This is an HTML template. Forms, checkout and dashboards work in the browser but do not send data — connect them to your own back end or a form service (explained in the documentation).
• Car makes and models in the demo are used only to make the content realistic; they are trademarks of their owners. Dealer names and logos are fictional.
• Photographs are included and may be used in the project you build with this template.