# Mockup

Click-through drawings of the customer app and the admin panel
(decision 0009). Linked static HTML, no build step. Open `index.html` in a
browser; it works offline. The owner deploys the same files to Cloudflare.

Shop name, address, phone, hours and the customer name "Alex" are placeholders.

## Files

- `index.html`: every screen, grouped customer app and admin panel.
- `style.css`: the only stylesheet. Dark and gold palette, type scale
  (14, 16, 20, 28px; light, never italic; nothing on a photo under 14px),
  `.phone` frame (390 x 844, customer app), `.desktop` frame (admin panel).
- `states.js`: the state switch. Nothing else runs on most screens.
- `booking.css`, `booking.js`: only the booking, cancel and reschedule screens
  (WB-8). The script carries the answers between steps in the URL and lets a
  day be picked; the product does not use it.
- `wb9.css`: rules for the appointments, invoices and notifications screens,
  including their extra states (`?state=progress`, `allread` and so on).
  `img/invoice-sample.pdf` stands in for an uploaded invoice.
- `admin.css`, `admin.js`: the admin sign-in, Today, Appointments, appointment,
  new appointment and complete-a-job screens (WB-10). `data-a="<state> ..."`
  shows a part only in those states; the script also moves a Today job to
  its next status in place.
- `wb11.css`: the admin Settings, Customers and Export screens (WB-11); they reuse
  `admin.css` and `admin.js`. `img/export-*-sample.csv` stand in for the
  downloaded files.
- `img/tile-*.svg`: the 6 service tile pictures.
- One `.html` per screen.

## How screens link

Plain relative links, `href="home.html"`. Customer screens sit in `.phone` and
use the bottom navigation (Home, My vehicles, My appointments, Invoices,
Notifications). Admin screens sit in `.desktop` and use the left navigation
(Today, Appointments, Customers, Settings, Export). On the start page
(signed out) a tile links to `signin.html?service=<key>`; sign-in carries
`?service=` on and hands it to `book.html?service=<key>`, so the service is
chosen first. On the signed-in home a tile links to `book.html?service=<key>`
directly. WB-7 screens add `wb7.css` and `wb7.js` (state parts, sample values,
`?service=` carried); `style.css` is unchanged.
`start.html?src=church` stands in for the flier link `/go/church`; the
deployed site needs a redirect for the path form.

## How to add a screen

1. Copy a screen of the same app (`home.html` for customer, `admin-today.html`
   for admin). Keep the `<head>`, the top bar, the States bar and the
   `<aside class="notes">`.
2. Replace the content. Use words from the product (vehicle, appointment).
3. Fill the notes: what the screen is, each state, which controls belong to
   this task, each `?` with what it waits on.
4. Add a row to `index.html`. If it replaces a placeholder, keep the file name
   and delete the placeholder text.
5. Check every link resolves.

## States convention

Every screen lists its states in its notes: normal, empty, loading, failure
(and a named limit where one exists). The States bar above the screen switches
them with `?state=<name>`. Without it the screen shows normal. In the HTML an
element with `data-s="loading failure"` shows only in those states; an element
without `data-s` always shows. A state that cannot happen on a screen is
listed in its notes as "None: <why>".

## Pictures

The 6 tile pictures are gradient SVG placeholders drawn for this mockup (no
third-party source, no licence issue). Real or licensed photos replace them
before launch (`wiki/product/spec.md`, "Home screen and design"). Each is under 1KB.