realestate-html — HTML Directory site Template

SHA-256: 8f3be882c5d5b26fce0ce9ea085ea2e88745256d99b6c1bb224f1e98b168fd89

2026-10-02T07:22:05.746Z

# Real Estate / HTML

[Leia em português](./README.pt-BR.md)

[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](./LICENSE) ![Free](https://img.shields.io/badge/price-free-brightgreen)

A real estate template as plain HTML, with no framework and no build step required to run it. It has a public property portal with search, filters, a property page and a favourites list, plus a broker area for managing listings, leads and visits. Behaviour is vanilla JavaScript modules in `assets/js/`, state is kept in `localStorage`, and the Tailwind CSS v4 build is already committed, so serving the folder is enough.

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

## Pages included

15 HTML files at the repository root:

- `index.html`: portal home with featured listings, search bar and neighbourhood highlights
- `imoveis.html`: listing search with filters for type, price, bedrooms, area and city, plus sorting
- `imovel.html`: property page with photo gallery, amenities, map area, agent card and contact form
- `favoritos.html`: saved properties, persisted in `localStorage`
- `sobre.html` and `contato.html`: institutional pages
- `login.html`, `registro.html`, `esqueci-senha.html`: authentication screens
- `app.html`: broker dashboard with listing, lead and visit counters plus charts
- `app-imoveis.html`: listing management with create, edit and status changes
- `app-leads.html`: lead pipeline with source, stage and follow-up
- `app-visitas.html`: visit schedule by day, with property and client
- `app-configuracoes.html`: profile, notifications, theme and language
- `not-found.html`: 404 page

## Tech stack

- HTML5 and vanilla JavaScript modules, no framework runtime
- Tailwind CSS v4, compiled with the Tailwind CLI (the output is committed)
- ApexCharts loaded from CDN on the broker dashboard
- `localStorage` persistence for listings, leads, visits, favourites and session
- Installable PWA: web manifest plus an offline-first service worker
- Client-side i18n reading JSON dictionaries from `assets/i18n/` (en, es, pt-BR)
- Curated Unsplash photography addressed by seed, so the same listing always shows the same photo
- Vite 6 as an optional dev server with hot reload

## Requirements

A modern browser is enough to open the pages. Node.js 18 or newer is only needed for the optional tooling (dev server and CSS rebuild).

## Getting started

```bash
npx serve .
# or: python -m http.server
```

Opening the `.html` files straight from disk mostly works, but the language switcher loads its JSON dictionaries with `fetch()` and the service worker needs HTTP, so a local server is the reliable option.

For development with hot reload:

```bash
npm install
npm run dev
```

Demo credentials (client-side only):

- `[email protected]` / `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

```bash
npm run build   # rebuilds the minified stylesheet
```

The compiled CSS is committed, so this step is only needed after changing styles or markup. To deploy, copy the folder to any static host.

## Project structure

```
assets/
├── css/               app.css (Tailwind entry) and the compiled tailwind.css
├── i18n/              en.json, es.json, pt-BR.json
└── js/
    ├── auth.js        mock session handling
    ├── data.js        seed listings, agents, leads and the image helpers
    ├── re.js          listing, lead and visit store on top of localStorage
    ├── layout.js      sidebar, header, theme and language switcher
    ├── query.js       small DOM helper used across pages
    ├── state.js       shared UI state
    ├── icons.js       inline SVG icon set
    └── pwa.js         service worker registration
*.html                 15 pages
sw.js, manifest.webmanifest, pwa-*.png
```

## Theming and customization

`assets/css/app.css` is the Tailwind v4 CSS-first entry point: it imports Tailwind, declares `@source` globs for the root HTML files and `assets/js`, defines the dark variant and holds the design tokens under `@theme`, including the brand color ramp and the `--tx-` surface tokens. The compiled `assets/css/tailwind.css` is committed, so a rebuild is only needed after editing styles or markup. Listing photos resolve through a seeded helper in `assets/js/data.js`, and a CSS fallback keeps captions readable when an image fails to load.

## Internationalization

Three locales live in `assets/i18n/`. `assets/js/i18n.js` fetches the JSON dictionary, translates every `[data-i18n]` node and stores the choice in `localStorage`. Prices and areas are formatted per locale. Because it uses `fetch()`, the pages need to be served over HTTP rather than opened from disk.

## The same system in other stacks

The same real estate system exists in five stacks, all sharing the screens and the visual identity. This static HTML build is the free one; the React, Vue 3, Angular and Laravel builds are paid, 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=realestate-html

## License

[MIT](./LICENSE), copyright 2026 Danilo Quinelato.