From 99bf15c859f4cd087b9b377dcff5afbdbaa507fe Mon Sep 17 00:00:00 2001 From: Johannes Date: Thu, 12 Mar 2026 18:53:40 +0100 Subject: [PATCH] Add 18 new recipes and update index + lemon pasta --- .gitignore | 3 +- public/index.html | 659 ++++++++++++++++++- recipes/baked-oatmeal.json | 34 + recipes/banana-oat-cookies.json | 26 + recipes/beef-bourguignon-housewife-flex.json | 37 ++ recipes/bubble-and-squeak.json | 29 + recipes/chocolate-lava-cake.json | 31 + recipes/classic-banana-bread.json | 33 + recipes/classic-beef-veggie-chili.json | 36 + recipes/classic-freezer-lasagna.json | 40 ++ recipes/classic-roast-chicken.json | 31 + recipes/crispy-veggie-fritters.json | 31 + recipes/egg-muffins.json | 30 + recipes/homemade-fruit-leather.json | 25 + recipes/homemade-granola.json | 31 + recipes/overnight-oats.json | 29 + recipes/pea-and-ham-soup.json | 34 + recipes/sample-lemon-pasta.json | 14 +- recipes/slow-cooked-bolognese.json | 38 ++ recipes/victoria-sponge.json | 34 + recipes/victorian-lemon-curd.json | 27 + recipes/victorian-seed-cake.json | 33 + 22 files changed, 1244 insertions(+), 41 deletions(-) create mode 100644 recipes/baked-oatmeal.json create mode 100644 recipes/banana-oat-cookies.json create mode 100644 recipes/beef-bourguignon-housewife-flex.json create mode 100644 recipes/bubble-and-squeak.json create mode 100644 recipes/chocolate-lava-cake.json create mode 100644 recipes/classic-banana-bread.json create mode 100644 recipes/classic-beef-veggie-chili.json create mode 100644 recipes/classic-freezer-lasagna.json create mode 100644 recipes/classic-roast-chicken.json create mode 100644 recipes/crispy-veggie-fritters.json create mode 100644 recipes/egg-muffins.json create mode 100644 recipes/homemade-fruit-leather.json create mode 100644 recipes/homemade-granola.json create mode 100644 recipes/overnight-oats.json create mode 100644 recipes/pea-and-ham-soup.json create mode 100644 recipes/slow-cooked-bolognese.json create mode 100644 recipes/victoria-sponge.json create mode 100644 recipes/victorian-lemon-curd.json create mode 100644 recipes/victorian-seed-cake.json diff --git a/.gitignore b/.gitignore index 40b878d..bb4f973 100644 --- a/.gitignore +++ b/.gitignore @@ -1 +1,2 @@ -node_modules/ \ No newline at end of file +node_modules/ +.claude/ \ No newline at end of file diff --git a/public/index.html b/public/index.html index f71aef7..e6c5df2 100644 --- a/public/index.html +++ b/public/index.html @@ -397,6 +397,88 @@ gap: 1rem; } + /* Step-by-step instruction input */ + .steps-container { + display: flex; + flex-direction: column; + gap: 0.75rem; + } + + .step-input-row { + display: flex; + gap: 0.75rem; + align-items: flex-start; + animation: fadeInUp 0.3s ease-out; + } + + .step-number { + width: 32px; + height: 32px; + background: var(--terracotta); + color: white; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + font-family: 'Playfair Display', serif; + font-weight: 600; + font-size: 0.85rem; + flex-shrink: 0; + margin-top: 0.75rem; + } + + .step-input-row textarea { + flex: 1; + min-height: 60px; + resize: vertical; + } + + .step-remove-btn { + width: 32px; + height: 32px; + background: transparent; + border: 1.5px solid rgba(107, 101, 96, 0.2); + border-radius: 50%; + cursor: pointer; + font-size: 1.25rem; + color: var(--warm-gray); + transition: all 0.2s; + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + margin-top: 0.75rem; + } + + .step-remove-btn:hover { + background: var(--terracotta); + border-color: var(--terracotta); + color: white; + } + + .add-step-btn { + display: flex; + align-items: center; + justify-content: center; + gap: 0.5rem; + padding: 0.75rem 1.5rem; + background: transparent; + border: 2px dashed rgba(107, 101, 96, 0.25); + border-radius: 0.75rem; + cursor: pointer; + font-family: 'Source Sans 3', sans-serif; + font-size: 0.9rem; + color: var(--warm-gray); + transition: all 0.2s; + margin-top: 0.5rem; + } + + .add-step-btn:hover { + border-color: var(--olive); + color: var(--olive); + background: rgba(92, 107, 74, 0.05); + } + .form-actions { display: flex; gap: 1rem; @@ -406,6 +488,120 @@ border-top: 1px solid rgba(107, 101, 96, 0.1); } + /* Tag checkboxes */ + .tags-input { + display: flex; + flex-wrap: wrap; + gap: 0.5rem; + } + + .tag-checkbox { + cursor: pointer; + } + + .tag-checkbox input { + display: none; + } + + .tag-pill { + display: inline-block; + padding: 0.5rem 1rem; + border: 1.5px solid rgba(107, 101, 96, 0.25); + border-radius: 50px; + font-size: 0.85rem; + color: var(--warm-gray); + transition: all 0.2s; + background: var(--warm-white); + } + + .tag-checkbox input:checked + .tag-pill { + background: var(--olive); + border-color: var(--olive); + color: white; + } + + .tag-checkbox:hover .tag-pill { + border-color: var(--olive); + } + + /* Recipe card tags */ + .recipe-tags { + display: flex; + flex-wrap: wrap; + gap: 0.4rem; + margin-bottom: 0.5rem; + } + + .recipe-tag { + font-size: 0.65rem; + text-transform: uppercase; + letter-spacing: 0.15em; + color: var(--olive); + font-weight: 600; + background: rgba(92, 107, 74, 0.1); + padding: 0.25rem 0.6rem; + border-radius: 50px; + } + + /* Filter bar */ + .filter-bar { + display: flex; + align-items: center; + gap: 1rem; + margin-bottom: 2rem; + flex-wrap: wrap; + } + + .filter-label { + font-size: 0.85rem; + color: var(--warm-gray); + font-weight: 500; + } + + .filter-tags { + display: flex; + gap: 0.5rem; + flex-wrap: wrap; + } + + .filter-tag { + padding: 0.5rem 1.25rem; + border: 1.5px solid rgba(107, 101, 96, 0.2); + border-radius: 50px; + font-size: 0.85rem; + color: var(--warm-gray); + background: transparent; + cursor: pointer; + transition: all 0.2s; + font-family: 'Source Sans 3', sans-serif; + } + + .filter-tag:hover { + border-color: var(--olive); + color: var(--olive); + } + + .filter-tag.active { + background: var(--olive); + border-color: var(--olive); + color: white; + } + + .filter-clear { + font-size: 0.85rem; + color: var(--warm-gray); + background: none; + border: none; + cursor: pointer; + text-decoration: underline; + font-family: 'Source Sans 3', sans-serif; + padding: 0.5rem; + } + + .filter-clear:hover { + color: var(--terracotta); + } + /* View Modal */ .view-modal .modal { max-width: 700px; @@ -417,13 +613,22 @@ position: relative; } - .view-category { - font-size: 0.75rem; + .view-tags { + display: flex; + flex-wrap: wrap; + gap: 0.4rem; + margin-bottom: 0.75rem; + } + + .view-tag { + font-size: 0.7rem; text-transform: uppercase; - letter-spacing: 0.2em; + letter-spacing: 0.15em; color: var(--olive); font-weight: 600; - margin-bottom: 0.75rem; + background: rgba(92, 107, 74, 0.12); + padding: 0.3rem 0.75rem; + border-radius: 50px; } .view-title { @@ -447,6 +652,8 @@ gap: 2rem; padding: 1.5rem 2.5rem; border-bottom: 1px dashed rgba(107, 101, 96, 0.15); + flex-wrap: wrap; + align-items: center; } .meta-item { @@ -468,6 +675,60 @@ margin-top: 0.25rem; } + /* Serving Scaler */ + .serving-scaler { + display: flex; + align-items: center; + gap: 0.75rem; + background: var(--paper); + padding: 0.5rem 1rem; + border-radius: 50px; + margin-left: auto; + } + + .serving-scaler label { + font-size: 0.75rem; + text-transform: uppercase; + letter-spacing: 0.1em; + color: var(--warm-gray); + margin: 0; + } + + .scaler-btn { + width: 32px; + height: 32px; + border: none; + background: var(--warm-white); + border-radius: 50%; + cursor: pointer; + font-size: 1.25rem; + color: var(--charcoal); + transition: all 0.2s; + display: flex; + align-items: center; + justify-content: center; + font-weight: 300; + } + + .scaler-btn:hover { + background: var(--terracotta); + color: white; + } + + .scaler-value { + font-family: 'Playfair Display', serif; + font-size: 1.25rem; + font-weight: 600; + color: var(--charcoal); + min-width: 2rem; + text-align: center; + } + + .scaled-amount { + color: var(--terracotta); + font-weight: 600; + } + .view-section { padding: 2rem 2.5rem; } @@ -595,6 +856,14 @@ + +
@@ -618,16 +887,25 @@
- - + +
+ + + + +
@@ -657,8 +935,13 @@
- - + +
+ +
+
@@ -675,7 +958,7 @@