Car Park Management / Static HTML

Leia em português

A car park with both of its sides, built with plain HTML, vanilla JavaScript and Tailwind CSS v4: the site that sells monthly plans and the desk that runs the yard. Drivers see each site with its live vacancy count, the rate table and the plans. Operators check a vehicle in — with the nearest compatible bay suggested — and check it out with the fee worked out from the rate table: first period, additional periods, the free-if-under tolerance, the daily cap and the night surcharge, shown line by line rather than as a bare total. There is a bay map by sector and floor, monthly customers with due dates, and a till that balances by payment method at close. Occupancy is derived from the bays themselves, so the map and the dashboard can never disagree. Three sites, a hundred and twenty bays and a month of tickets ship as seed data, persisted to localStorage, so nothing needs a backend.

Live preview: https://template.dev.br/preview/parking-html/

Pages included

14 screens, covering the public site and the authenticated area:

• Home: search by site, site cards with live vacancy, monthly plans, how it works and testimonials
• Sites: address, opening hours, bays by type and current occupancy
• Site: photos, the rate table by period, a simplified bay map and a booking form
• Plans: monthly for car, motorcycle or a fixed bay, with a comparison and sign-up
• Contact: validated contact form
• Login and Register: standalone auth screens
• Dashboard: occupancy now, entries today, revenue, average stay, an occupancy-by-hour chart, vehicles inside and recent exits
• Yard: check-in with plate, type and suggested bay, and check-out with the fee worked out; the list of what is inside, searchable by plate
• Bay map: a grid by sector and floor, each bay showing free, taken, booked, monthly or blocked; click for detail and actions
• Monthly customers: CRUD with vehicle, plan, due date and status, plus this month’s charge
• Rates: table by vehicle type and time band, with tolerance, daily cap, ceiling and night surcharge, and a checkout simulator
• Till: the day by payment method, cash drops, close and history
• Settings: profile, site, sectors and bays, theme and language
• Not found: 404 page

Tech stack

• Static HTML pages — one file per screen, no framework
• Tailwind CSS v4 compiled by the Tailwind CLI into assets/css/tailwind.css
• Vanilla JavaScript in assets/js/, loaded as classic scripts — no bundler at runtime
• State kept in localStorage, mirroring the store shape of the other stacks
• Client-side i18n from assets/i18n/*.json (en, es, pt-BR)
• ApexCharts 3.49 from a CDN
• Web app manifest and service worker for the installable PWA

Requirements

• Node.js 18 or newer
• npm

Getting started

npm install
npm run build
npm run dev

npm run build compiles the stylesheet; npm run dev serves the folder. Any static file server works — the pages have no build-time templating. Demo credentials:

• operador@vagalivre.com / demo123

Any non-empty email and password logs in; the pair above is the account suggested on the login screen and the one the seed data belongs to.

Build for production

npm run build

Recompiles assets/css/tailwind.css. Deploy the folder as-is to any static host.

Project structure

.
├── *.html             one file per screen
└── assets/
    ├── css/           app.css (source) and tailwind.css (built)
    ├── i18n/          en.json, es.json, pt-BR.json
    └── js/            data.js, query.js, state.js, i18n.js, format.js, icons.js, layout.js, pk.js

Theming and customization

Tailwind CSS v4 is configured in CSS, not in a JavaScript config file. The stylesheet imports Tailwind, declares the dark variant and defines the design tokens inside @theme: the Outfit font family, extra breakpoints and the brand color ramp (--color-brand-25 through --color-brand-950). Semantic surface tokens use the --tx- prefix. Dark mode is a class on the root element, toggled at runtime and persisted. Rates, sectors and bays are data, so opening another site is a data change rather than a template change.

Internationalization

Three locales ship with the template: English, Spanish and Brazilian Portuguese. The browser language is detected on first load and the header switcher persists the choice. Plurals use the CLDR rules of the active language, so counts read correctly in all three. Dates, currency and durations are formatted per locale.

The same system in other stacks

The same system exists in five stacks, all sharing the screens and the visual identity, and all of them are free:

• React 19: https://github.com/danilo62x/parking-react
• Vue 3.5: https://github.com/danilo62x/parking-vue3
• Angular 19: https://github.com/danilo62x/parking-angular
• Laravel 11 + Blade: https://github.com/danilo62x/parking-laravel

The full catalog of free and paid templates is at https://template.dev.br

Support this project

This template is free and MIT licensed. If it saves you time, you can support the work with a donation at https://template.dev.br/doar?template=parking-html

License

MIT, copyright 2026 Danilo Quinelato.