DEV Community

hey atlas
hey atlas

Posted on • Originally published at aitoolsinsiderhq.com

I built a free one-file restaurant website template with a working table-reservation widget (no React, no DB)

#webdev #css #opensource #html

A while back I shipped a free one-file salon & barbershop site template here, and a few people asked which local-business vertical was next. Restaurants were the obvious one: most owners get quoted $1,500–$3,000 for a basic site, or get pushed onto a reservation platform that skims a fee off every single cover.

So I built the same idea for restaurants — one index.html, no build step, no framework, no database, no monthly fee — with a working table-reservation widget that drops each booking straight into the owner's WhatsApp.

The constraint: one file, zero dependencies

The whole site is a single index.html you can open by double-clicking it. No npm install, no bundler, no backend to deploy. A non-technical owner can edit their name, menu and hours in Notepad and drag the file onto GitHub Pages, Netlify or Vercel for free.

That constraint is the whole point. The moment a restaurant site needs a build pipeline and a $20/mo host, the owner stops touching it and it rots. One file they actually understand beats a "real" stack they never log into again.

The reservation widget (the only interesting part)

No backend, no Calendly embed. The guest picks party size → day → time → name, and the confirm button builds a WhatsApp deep link with the booking pre-written:

function buildReservation(r) {
  var msg = "Hi " + RESTAURANT.brand + ", I'd like to reserve a table for "
    + r.size + " guests on " + r.day + " at " + r.time + ". Name: " + r.name + ".";
  return RESTAURANT.hasWhatsApp
    ? "https://wa.me/" + RESTAURANT.phone + "?text=" + encodeURIComponent(msg)
    : "sms:" + RESTAURANT.phone + "?body=" + encodeURIComponent(msg);
}
Enter fullscreen mode Exit fullscreen mode

The owner gets a normal WhatsApp message they reply to like any other. No subscription, no per-cover fee, nothing to administer. The available time slots come from a tiny hours config ([open, close] in 24h, null = closed), so the widget never offers a slot when the place is shut.

SEO & AI-search, built in

It ships with proper <title>/meta tags and Restaurant JSON-LD structured data, so Google rich results — and AI search like ChatGPT/Perplexity — can actually parse the name, cuisine, hours and address instead of guessing.

Re-theme it for a cafe or pizzeria

Theming is three CSS variables. Swap them and change the hero image:

/* cafe / bakery */     --olive:#a9763f; --olive-deep:#7c5326; --forest:#2a211a;
/* pizzeria / trattoria */ --olive:#c0392b; --olive-deep:#96281b; --forest:#23201b;
Enter fullscreen mode Exit fullscreen mode

Take it

It's MIT — fork it, ship it for a client, strip the credit, whatever. If you run a restaurant (or build sites for ones) and want a fast, honest starting point instead of a $2k quote, the repo is here.

I'm slowly doing one of these per local-business vertical (salon and restaurant are live). If there's a vertical you'd want next — gym, dental clinic, café — say so in the comments.

Top comments (0)