# Tablet cafe register > **Build brief for a coding agent.** Rebuild this piece in the reader's stack. If they haven't said which stack, ask once, then default to semantic HTML + CSS + a little vanilla JS. Match the numbers below; don't "improve" them. ## What it is The counter screen of a small cafe ("Chautari Coffee, Jhamsikhel") on a landscape tablet. A barista taps big tiles to build an order, sees it on a ticket on the right, and takes payment without leaving the screen. Three columns: an espresso-brown category rail, a grid of item tiles, and the order ticket. The look is soft and warm: oat paper, espresso ink, 16px corners, one teal for money actions. Every number uses tabular figures so prices line up. The detail worth copying is the two-speed tile: a tap adds the default item at once, a hold (or the small round button) opens a sheet for size, milk and extra shot. ## Reference behaviour 1. First frame: Coffee is the selected category. Eight coffee tiles show in a 3-column grid. The ticket is "Order 0418 · Table 6 · Dine in" with four lines: Flat white (Regular · Oat · +1 shot) Rs 370, Masala chai ×2 Rs 360, Cardamom bun (Warmed) Rs 220, Cold brew Rs 290. Total is Rs 1,240. The big button reads "Charge Rs 1,240". The Flat white tile shows a teal badge "1". 2. Tap a category in the rail: it turns oat with espresso text. The grid title and the tiles change at once. The hint reads "6 items · tap to add, hold for options". 3. Tap a tile: the item is added with its default options (Coffee and Tea: "Regular · Whole", Bakery: "As is", Cold: "Regular"). If the same item with the same options is already on the ticket, its quantity goes up by one and that line flashes teal-soft. If not, a new line drops in at the bottom. The tile badge shows the total count of that item on the ticket. 4. Press and hold a tile for 480ms, or tap its round options button: the modifier sheet slides up from the bottom. The tap that ends a hold does not also add the item. 5. In the sheet, pick Size (Small −Rs 20, Regular, Large +Rs 40), Milk (Whole, Oat +Rs 40, Almond +Rs 50, None), Extra shot (No, +1 shot +Rs 50, +2 shots +Rs 100) and Quantity (1 to 4). Bakery items show only Serve (As is, Warmed) and Quantity. Tea shows Size and Milk. The Add button shows the live price, for example "Add Rs 370". Add puts the line on the ticket and closes the sheet. Cancel, the scrim, or Escape closes it without adding. 6. On a ticket line, + adds one. − removes one. When the quantity is 1, the − button becomes a bin icon and removes the line. Totals update on every change. 7. Prices include 13% VAT. The ticket shows Subtotal (total ÷ 1.13, rounded), "VAT 13% (included)" (total minus subtotal) and Total. With the first-frame order: Rs 1,097, Rs 143, Rs 1,240. 8. Clear empties the ticket. The empty ticket says "Nothing on the ticket. Tap a tile to start an order." The charge button reads "Charge" and is disabled. 9. Tap Charge: the ticket panel switches to the tender view. The rail and the menu dim to 45% and stop taking input. The view shows "Amount due Rs 1,240" in large type, three method tiles (Cash, Card, QR) with Cash selected, and a Back button. 10. Cash shows three quick amounts: Exact, the next Rs 500 note step, and the next Rs 1,000 step above that (for Rs 1,240: Exact, Rs 1,500, Rs 2,000). The middle one starts selected. "Change due" updates (Rs 260). The button reads "Take Rs 1,240 cash". 11. Card shows a reader hint and the button reads "Card approved". QR shows a 21×21 code drawn as SVG squares and the button reads "Payment received". 12. Take the payment: the panel shows the done view. A teal circle draws a tick, "Paid", "Rs 1,240 by cash", "Change Rs 260 · receipt printed". New order empties the ticket, moves to Order 0419, clears the note and gives input back to the menu. 13. Back in the tender view returns to the order view with the ticket unchanged. ## Structure ``` 1180 × 820, 24px top clearance (the Lounge draws the frame) ┌────────┬───────────────────────────────────────┬───────────────────────────┐ │Chautari│ Coffee 8 items · tap to add, hold… │ Order 0418 Clear │ 64 │JHAMSIK.│ ┌──────────┐┌──────────┐┌──────────┐ │ Table 6 · Dine in │ │────────│ │▀▀▀▀▀▀▀▀▀▀││▀▀▀▀▀▀▀▀▀▀││▀▀▀▀▀▀ (1)│ │───────────────────────────│ │[Coffee]│ │Espresso ││Americano ││Flat white│ │Flat white Rs 370 │ │ Tea │ │Double… ││Long… ││Velvet… │ │Regular·Oat [bin] 1 [+] │ │ Bakery │ │Rs 180 (o)││Rs 220 (o)││Rs 280 (o)│ │Masala chai Rs 360 │ │ Cold │ └──────────┘└──────────┘└──────────┘ │Regular·Whole [−] 2 [+] │ │ │ … 150px rows, 12px gaps │ … │ │ │ │ [pencil] note 56px │ │ │ │ Subtotal Rs 1,097│ │ Till 2 │ │ VAT 13% (incl.) Rs 143│ │ Anu R. │ │ Total Rs 1,240│ │ │ │ [ Charge Rs 1,240 ] 72 │ └────────┴───────────────────────────────────────┴───────────────────────────┘ 112 minmax(0,1fr) ≈ 620 384 gap 16, outer padding 0 16 16 ``` - `.app` is a grid: `112px minmax(0,1fr) 384px`, gap 16px, padding `0 16px 16px`, height 100% under a 24px body padding. - `