Local Service Demo Starter
A small, reusable one-page website for local service businesses. It uses plain HTML, CSS, JavaScript, and JSON; there is no package manager, build step, or framework.
Run locally
The page loads data/business.json with fetch, so open it through a local web server rather than directly as a file:// URL.
From this directory, run:
python3 -m http.server 8000
Then visit http://localhost:8000.
Make it yours
- Edit the business details, navigation, hero, services, about copy, and contact details in
data/business.json. - Add a logo under
assets/logo/and setlogoandlogoAltin the JSON. Leavelogoempty to use the business name as a text mark. - Replace
hero.imagewith an image path inassets/images/(or a hosted image URL), and updatehero.imageAlt. - Change the four
--brand-*values at the top ofcss/theme.cssto update the palette.
The sample business and hero photo are demo content. Replace both before publishing. The sample photo is remotely hosted; use a local image if the demo needs to work without an internet connection.
Data contract
data/business.json is the content contract between the business-generation workflow and this template.
Templates may change their layout, styling, sections, and components, but should continue to accept the same JSON structure.
Optional fields may be empty. The template should render gracefully when optional content such as logos, testimonials, opening hours, or images is unavailable.
Do not add business facts to the template itself. Business-specific content belongs in data/business.json.
Files
index.htmlcontains the page structure.css/base.csscontains resets, shared type, and layout foundations.css/components.csscontains the page sections and responsive styles.css/theme.csscontains the replaceable brand variables.js/main.jsloads the JSON and fills the page content.data/business.jsoncontains the sample business content.assets/images/,assets/icons/, andassets/logo/are for replaceable media.
Demo workflow
This starter is designed for fast prospect demos.
- Clone the repository.
- Replace the sample business data in
data/business.json. - Add the prospect's logo and hero image.
- Update the brand colours in
css/theme.css. - Run the site locally.
- Check mobile layout, links, contact details, and placeholders.
- Run Davidson CI and Lighthouse.
- Deploy to a temporary public URL.
- Verify the live URL before sending it to the prospect.
Demo rules
- Do not invent reviews, certifications, services, locations, or claims.
- Replace all sample content before publishing.
- Keep structural changes minimal unless the business genuinely needs them.
Goal
A real business should be able to go from "yes, show me" to a personalised live demo in under 45 minutes.