Recipe App Website Template

Quick Start

1. Unzip the folder and serve it, or open index.html directly:

Code snippet omitted: it ships with the download.

2. Load /index.html (or the folder with a trailing slash) so the relative assets/ paths resolve.
3. Open it on a phone, or narrow the browser below 600px, to see the app full screen.
4. Rename the app: the wordmark is .brand-name and .brand-mark on every page and in .ob-brand on the Welcome screen.

No build step. Each page is a plain HTML file with assets/style.css, GSAP, Flip and Draggable from a CDN, and assets/script.js.

Using It With Your Own Design

• Colour: the tokens at the top of assets/style.css. Light is :root; dark restates the same names under :root[data-theme="dark"] and the prefers-color-scheme block. --accent is the primary action, saved state and active tab; --herb means done or checked; --night is the fixed dark surface for the Tonight card, captions and toasts. The measured contrast pairs are in the first comment.
• Type: Petrona (recipe names, titles, cook steps) and Figtree (everything you operate) are self-hosted in assets/fonts/ with their licence. Swap --font-display and --font-ui and the @font-face rules.
• Shape: --radius sets cards and rows; buttons and chips are pills. --pad is the screen gutter, --tab-h the tab bar height.
• Desktop stage: --stage is the green ground. Remove .stage-notes, .stage-photo or .stage-contents from a page to drop that part of the presentation; the app still sits in its frame. Delete the stage wrapper markup entirely if you only ship to phones.

Screens and Configuration

Shared shell

Every app page has the same structure inside .stage: .stage-bar (brand and theme switch), .device > .device-screen holding .status-bar, main.app, .tabbar, the page's sheets and dialogs, the All screens sheet and .toasts, then .stage-notes, .stage-photo and .stage-contents. Below 600px only the app shows and the document scrolls; from 600px .app becomes the scroller inside the frame. Mark the current tab and contents link with aria-current="page".

Hooks

Recipes

Each .rcard in recipes.html carries data-recipe (image name), data-name (searchable name and ingredients, lower case), data-time (minutes), data-tags (quick, veg, pasta, curry, soup, fish, sweet) and data-order. Filter chips match a tag through data-filter. Add a chip and a tag to add a filter.

recipe.html is the detail layout. Each li[data-ing] holds data-m and data-u as quantity|unit for four servings (metric and US); counts use an empty unit, and data-one gives the singular name. Units are g, ml, tbsp, tsp, cups, cm, in, oz or a count. Ticked boxes are what you already have; the rest go to the add-to-list sheet with their data-aisle.

Cook mode

Steps are li[data-cook-step] in [data-cook-track]; the last one is the finished screen. A timer is a button with data-timer-start, data-min and data-label. The ingredients sheet marks the ones each step uses from STEP_USES near the top of initCook() in assets/script.js. The screen asks the browser to stay awake while open where the Wake Lock API is available.

Plan

Week 0 is the markup in plan.html; the other weeks and their date labels are the WEEKS object in initPlan(). The picker sheet lists every recipe as button[data-pick] with its name, time, kind and ingredients, and the plan builds its cards from those, so a new recipe needs one picker entry.

List

Aisles are section[data-aisle]. New items are filed by the keyword lists in KEYWORDS inside initList(); anything unmatched goes to Other. Items added from a recipe or the plan are stored on the device and appear with a New tag.

Front end only

Nothing is sent anywhere. Saved recipes, units, household size, diet, timer sound, theme and list additions are kept in localStorage (supper-state, supper-theme). Export, delete account and sign out show the app's messages only. Connect them, the plan and the list to your own API when you build it out.

Photographs

The sixteen dishes and the welcome photograph are Pexels photographs (Pexels licence), baked to WebP derivatives in assets/img/: a 4:5 card and a square for each dish, a portrait for each screen's desktop photograph, and the recipe hero. assets/img-manifest.json lists every source URL, crop and size. To replace one, drop in your own file under the same name at the same proportions, or edit the manifest and regenerate with the asset baking script that ships with GSAP Vault (bun scripts/build-template-assets.ts <slug>). Keep one lighting style across the set.

Sources: pexels.com/photo/ IDs 39641632 (salmon), 37180954 (rigatoni), 11829700 (spaghetti), 7865794 (tomato soup), 20004858 (green soup), 10345736 (butter chicken), 6358975 (lamb curry), 9809033 (prawn curry), 17593648 (katsu), 10506640 (halloumi), 4224305 (fried rice), 3648978 (shakshuka), 6978146 (rice bowl), 12077972 (cucumber), 36866901 (tacos), 17260332 (tart), 19461069 (welcome).

Palette

Accessibility

• Native buttons, links, checkboxes, radios and selects throughout; custom faces keep the real inputs underneath.
• Sheets and dialogs are modal: focus moves in, Tab is trapped, Escape and the scrim close them, focus returns to the opener, and the rest of the screen is inert.
• Every drag has a keyboard or button route: deck buttons, cook mode buttons and arrow keys, plan Move menu and arrow keys on the handle, a remove button on every list row.
• Timer changes and counts are announced through live regions; the timer done alert is role="alert".
• Reduced motion keeps every state and drops the slides, flips and springs. Without JavaScript the pages read as complete documents.

Dependencies

• GSAP 3.12+ with Flip and Draggable (demo built against 3.15.0), loaded from jsDelivr with defer.
• No other libraries. Fonts and images are bundled.

Teardown

Each page runs its own script on load and needs no teardown between pages (plain navigation with a CSS view transition where supported). The cook mode timers run on one interval for the life of the page. If you move the screens into a single-page framework, call each screen's initialiser on mount, clear the timer interval and kill the Draggable instances it created on unmount.