Web page · HTML, CSS and JavaScript

Chair Booker

A phone-first page for a small barbershop. It tests whether customers will pay a €5 deposit to hold a slot, without a payment provider or an email service.

Desktop: the booking code, and the email preview in the Outbox marked Not sent.

User: A customer who wants a haircut later today and would rather not queue.
Risky assumption: Customers will pay a €5 deposit to hold a slot.
Stack: One HTML page with plain CSS and JavaScript, checked by a Playwright script.
Status: Runs in any browser. Checked at 390 and 1280 pixels wide.

Kimi built the page and its check script from a fixed brief; Claude Code wrote the brief, ran the checks and sent the fixes.

What it does

Pick a barber and a free slot. Slots earlier than the shop’s clock show as Past, booked ones as Taken.
Enter a name and phone number. Mistakes show beside the field and keep you on the step.
Pay the deposit with a test outcome: approve, decline or a network timeout. Decline and timeout both say why and offer Retry.
See the booking code. The confirmation email appears in an Outbox marked Not sent and the slot turns Taken.
Reload the page and the booking is still there. Reset demo data restores the morning.

What is real and what is simulated

Deposit payment	Simulated: three test outcomes under a “Test payment, no charge” banner
Confirmation email	Simulated: a preview in an Outbox marked Not sent
Bookings	Saved in this browser only
Barbers, slots and prices	Invented, with one barber fully booked

How we checked it

Ten fixed criteria. One Playwright script books a slot, fails and retries the payment, reloads, resets, then measures overflow at 390 pixels and tap targets in every state.
A separate reviewer ran a keyboard-only booking and measured contrast on the rendered page: body text 13.3:1, muted text 7.2:1. It passed all ten criteria.
It also caught a credibility problem: late in the day the page still offered 10:00 as bookable. A demo clock now marks earlier slots Past, in words as well as colour.

Screens

Morning slots marked Past once the demo clock passes them.

A short phone number is caught beside the field.

A declined test card: no charge, and a Retry.

Booked, with the code to show at the door.

What happens next

Bookings live in one browser, so two customers could take the same chair. A shared booking store and a real payment provider with refunds come first in an MVP. No user feedback has been collected; the next test is five regulars trying to book tomorrow’s slot.