Supper Club

Build Supper Club, a standalone recipe-scaling mini app in supper-club.html using only inline HTML, CSS and JavaScript. Make the functioning product, not a landing page. No packages, external images, APIs, account, storage or purchases. It runs inside an opaque iframe sandbox="allow-scripts". Send parent.postMessage({type:'pls-demo-ready'}, '*') once initialized. Include viewport meta and a restrictive inline-only CSP. Keep all data in memory; reload starts fresh.

VISUAL DIRECTION A sunny little neighborhood supper club: warm ivory #fff8e8, tomato red #ad321f, peach #f3b995, olive #345c40. Huge Georgia serif title, tiny uppercase sans section labels, readable system-sans controls. Desktop has recipe/menu column, large central illustrated plate, and a paper shopping list on the right; stack all three on phones. Create the plate with inline SVG using circles, curved shapes and herbs; no borrowed food photos. Include three recipe tabs, concise cooking instructions, and clearly labeled serving controls. Bright flat colors, generous blank space, thin dashed dividers, soft rounded illustration backgrounds. Default title 'A few friends. A very good dinner.' The selected recipe's dish name must stay visible. Use no animation.

EXACT RECIPES Lemon pasta, base servings 2, 20 minutes: Pasta 200 g; Lemon 1 whole; Olive oil 30 ml; Parmesan 50 g; Basil 10 g. Steps: Cook pasta until tender and reserve a little water. Toss warm pasta with olive oil and lemon juice. Add Parmesan, loosen with pasta water, finish with basil. Bean tacos, base servings 2, 15 minutes: Tortillas 6 whole; Cooked beans 300 g; Tomato 2 whole; Lime 1 whole; Yogurt 60 g. Steps: Warm beans and tortillas. Chop tomato and dress with lime juice. Fill tortillas with beans, tomato and yogurt. Sunday pancakes, base servings 4, 25 minutes: Flour 240 g; Milk 300 ml; Egg 2 whole; Baking powder 8 g; Butter 30 g. Steps: Whisk flour and baking powder. Mix in milk and eggs. Cook spoonfuls in a buttered skillet until set, turning once. Use the same ingredient order everywhere. These are illustrative meal ideas, not dietary or food-safety advice; label them 'Sample recipes. Adjust seasoning to taste.' No nutrition, allergen-free or health claims.

BEHAVIOR Start Lemon pasta at 2 people. Native Minus and Plus buttons and a visibly labeled integer People number input control serving count from 1 through 12. Give minus and plus accessible names 'Fewer people' and 'More people'. Plus/minus step the committed value and disable at limits. The number input commits on change; empty, fractional, nonfinite or out-of-range entries show a polite visible error and aria-invalid, retain previous quantities and checklist, and leave text editable; valid input clears error. On recipe selection retain the last valid people count, normalize input, clear all checks/errors and render its dish/ingredients/steps. Same recipe selection may reset checks. A committed serving change clears ingredient checks because quantities changed. No-op commit at the same value preserves checks. Quantities are base amount times people divided by base servings; show up to two decimal places without trailing zeros; whole items may have fractions, labeled singular/plural sensibly. Never round whole items up silently. Show 'Shopping list', checked count out of five, and each scaled amount beside a labeled native checkbox. Checking changes only that row's state; checked rows have strikethrough plus checkmark. Include Clear checks and Reset menu; reset selects Lemon pasta at 2 people and clears checks/errors.

EXPORT Maintain a labeled readonly Shopping list text textarea containing Supper Club, selected recipe, people count and all five amounts in order with [ ] or [x]. Copy list uses guarded navigator.clipboard.writeText then guarded document.execCommand('copy'); only show Copied after actual success. Restore focus to Copy after fallback. Select list explicitly focuses and selects textarea when copy is unavailable. No download from inside iframe; host supplies the build prompt download. Render dynamic strings using textContent/value, not interpolated user HTML.

ACCESSIBILITY AND CHECKS 44px touch controls, visible keyboard focus, at least 16px inputs, normal page flow at 320/375/768/1440px and 200% root text. No horizontal page overflow. Keep keyboard focus stable while recalculating. Announce explicit action outcomes politely. Controls must work without pointer gestures. Test pasta 2→6 gives 600g pasta, 3 lemons, 90ml oil, 150g Parmesan, 30g basil; pancakes at 1 gives 60g flour, 75ml milk, 0.5 egg, 2g baking powder, 7.5g butter. Test 1/12 limits, invalid empty/0/13/fraction input, recipe switch retaining people, checks clearing on quantity changes, export reflecting checks, reset, and safe copy failure. Deliver working HTML and honest verification notes.