a482bf5b09
Replace the hello-world shell with the elevated design system, bilingual screens, recipe/extras data, and the interactive Mein Teller view. Co-authored-by: Cursor <cursoragent@cursor.com>
666 lines
55 KiB
HTML
666 lines
55 KiB
HTML
<title>Pocket Pascal — Konzeptdokument</title>
|
||
<style>
|
||
:root{
|
||
--bg:#fbfbfa; --surface:#ffffff; --ink:#14150f; --ink-soft:#5f6055; --ink-faint:#8b8c80;
|
||
--line:#e4e4de; --line-soft:#efefe9;
|
||
--green:#2F5233; --green-soft:#e3ece4;
|
||
--sage:#4A6FA5; --sage-soft:#e7edf5;
|
||
--coral:#B33D22; --coral-soft:#f9e7e1;
|
||
--leaf:#6B7A22; --leaf-soft:#eff2df;
|
||
--gold:#8A6A1A; --gold-soft:#fdf1d9;
|
||
--plum:#6B4C9A; --plum-soft:#efe9f5;
|
||
}
|
||
@media (prefers-color-scheme: dark){
|
||
:root{
|
||
--bg:#16170f; --surface:#1e1f18; --ink:#f2f1e6; --ink-soft:#b6b6a8; --ink-faint:#84857a;
|
||
--line:#33342b; --line-soft:#27281f;
|
||
--green:#8FB583; --green-soft:#242e23;
|
||
--sage:#93B3D8; --sage-soft:#1f2836;
|
||
--coral:#E58B67; --coral-soft:#331f18;
|
||
--leaf:#B5C963; --leaf-soft:#262b17;
|
||
--gold:#D7B565; --gold-soft:#302713;
|
||
--plum:#B197DA; --plum-soft:#26203a;
|
||
}
|
||
}
|
||
:root[data-theme="dark"]{
|
||
--bg:#16170f; --surface:#1e1f18; --ink:#f2f1e6; --ink-soft:#b6b6a8; --ink-faint:#84857a;
|
||
--line:#33342b; --line-soft:#27281f;
|
||
--green:#8FB583; --green-soft:#242e23; --sage:#93B3D8; --sage-soft:#1f2836;
|
||
--coral:#E58B67; --coral-soft:#331f18; --leaf:#B5C963; --leaf-soft:#262b17;
|
||
--gold:#D7B565; --gold-soft:#302713; --plum:#B197DA; --plum-soft:#26203a;
|
||
}
|
||
:root[data-theme="light"]{
|
||
--bg:#fbfbfa; --surface:#ffffff; --ink:#14150f; --ink-soft:#5f6055; --ink-faint:#8b8c80;
|
||
--line:#e4e4de; --line-soft:#efefe9;
|
||
--green:#2F5233; --green-soft:#e3ece4; --sage:#4A6FA5; --sage-soft:#e7edf5;
|
||
--coral:#B33D22; --coral-soft:#f9e7e1; --leaf:#6B7A22; --leaf-soft:#eff2df;
|
||
--gold:#8A6A1A; --gold-soft:#fdf1d9; --plum:#6B4C9A; --plum-soft:#efe9f5;
|
||
}
|
||
|
||
*{ box-sizing:border-box; }
|
||
body{
|
||
background:var(--bg); color:var(--ink); margin:0;
|
||
font-family: ui-sans-serif, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
|
||
font-size:16px; line-height:1.6;
|
||
padding:40px 20px 80px;
|
||
}
|
||
body:not([data-lang="en"]) .en{ display:none; }
|
||
body[data-lang="en"] .de{ display:none; }
|
||
|
||
.display{ font-family:"Futura","Century Gothic","Avenir Next","Avenir",ui-sans-serif,sans-serif; font-weight:800; letter-spacing:0.01em; text-wrap:balance; }
|
||
|
||
.wrap{ max-width:760px; margin:0 auto; display:flex; flex-direction:column; gap:0; }
|
||
|
||
.langbar{
|
||
position:sticky; top:12px; z-index:20; align-self:flex-end;
|
||
display:flex; gap:2px; background:var(--surface); border:1px solid var(--line);
|
||
border-radius:999px; padding:3px; box-shadow:0 2px 10px rgba(0,0,0,0.07);
|
||
}
|
||
.langbar button{
|
||
border:none; background:transparent; padding:6px 15px; border-radius:999px; cursor:pointer;
|
||
font-size:0.74rem; font-weight:800; letter-spacing:0.08em; color:var(--ink-soft);
|
||
font-family:inherit;
|
||
}
|
||
.langbar button:focus-visible{ outline:2px solid var(--sage); outline-offset:2px; }
|
||
body:not([data-lang="en"]) .langbar button.de,
|
||
body[data-lang="en"] .langbar button.en{ background:var(--green); color:var(--bg); }
|
||
|
||
header.doc{ display:flex; flex-direction:column; gap:10px; padding-bottom:26px; border-bottom:2px solid var(--ink); margin-bottom:34px; }
|
||
.kicker{ text-transform:uppercase; letter-spacing:0.16em; font-size:0.68rem; font-weight:800; color:var(--coral); }
|
||
header.doc h1{ font-size:clamp(2rem,5vw,2.7rem); margin:0; text-transform:uppercase; line-height:1.05; }
|
||
.meta{ display:flex; flex-wrap:wrap; gap:8px 18px; font-size:0.74rem; color:var(--ink-soft); margin-top:4px; }
|
||
.meta b{ color:var(--ink); font-weight:700; }
|
||
|
||
section{ margin-bottom:38px; }
|
||
h2{ font-family:"Futura","Century Gothic","Avenir Next",ui-sans-serif,sans-serif; font-size:1.05rem; text-transform:uppercase; letter-spacing:0.07em; font-weight:800; margin:0 0 4px; display:flex; align-items:baseline; gap:10px; }
|
||
h2 .idx{ font-size:0.72rem; color:var(--ink-faint); font-weight:700; letter-spacing:0.05em; }
|
||
.lede{ color:var(--ink-soft); font-size:0.92rem; margin:0 0 18px; padding-bottom:14px; border-bottom:1px solid var(--line); }
|
||
h3{ font-size:0.88rem; font-weight:800; margin:22px 0 6px; letter-spacing:0.01em; }
|
||
p{ margin:0 0 12px; }
|
||
ul{ margin:0 0 12px; padding-left:20px; }
|
||
li{ margin-bottom:5px; }
|
||
li::marker{ color:var(--ink-faint); }
|
||
strong{ font-weight:700; }
|
||
|
||
.callout{ background:var(--surface); border:1px solid var(--line); border-left:3px solid var(--coral); border-radius:0 8px 8px 0; padding:14px 16px; margin:0 0 16px; font-size:0.9rem; }
|
||
.callout.ok{ border-left-color:var(--green); }
|
||
.callout.info{ border-left-color:var(--sage); }
|
||
.callout b{ display:block; font-size:0.7rem; text-transform:uppercase; letter-spacing:0.08em; margin-bottom:4px; color:var(--coral); }
|
||
.callout.ok b{ color:var(--green); }
|
||
.callout.info b{ color:var(--sage); }
|
||
|
||
pre{ background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:14px 16px; overflow-x:auto; margin:0 0 16px; }
|
||
code{ font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size:0.8rem; line-height:1.55; }
|
||
p code, li code, td code{ background:var(--line-soft); padding:1px 5px; border-radius:4px; font-size:0.82em; }
|
||
|
||
.modules{ display:flex; flex-direction:column; gap:10px; }
|
||
.mod{ background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:14px 16px; display:flex; flex-direction:column; gap:5px; }
|
||
.mod-top{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
|
||
.mod-name{ font-weight:800; font-size:0.92rem; flex:1; min-width:160px; }
|
||
.mod p{ margin:0; font-size:0.85rem; color:var(--ink-soft); }
|
||
.badge{ font-size:0.62rem; font-weight:800; text-transform:uppercase; letter-spacing:0.08em; padding:3px 9px; border-radius:999px; flex:none; }
|
||
.badge.p1{ background:var(--green-soft); color:var(--green); }
|
||
.badge.p2{ background:var(--gold-soft); color:var(--gold); }
|
||
.badge.p3{ background:var(--plum-soft); color:var(--plum); }
|
||
.badge.done{ background:var(--sage-soft); color:var(--sage); }
|
||
|
||
.tablewrap{ overflow-x:auto; border:1px solid var(--line); border-radius:8px; margin-bottom:16px; }
|
||
table{ width:100%; border-collapse:collapse; font-size:0.84rem; font-variant-numeric:tabular-nums; }
|
||
th{ text-align:left; background:var(--surface); font-size:0.66rem; text-transform:uppercase; letter-spacing:0.07em; color:var(--ink-soft); padding:9px 12px; border-bottom:1px solid var(--line); white-space:nowrap; }
|
||
td{ padding:9px 12px; border-bottom:1px solid var(--line-soft); vertical-align:top; }
|
||
tbody tr:last-child td{ border-bottom:none; }
|
||
|
||
.qlist{ counter-reset:q; list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:9px; }
|
||
.qlist li{ counter-increment:q; background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:12px 14px 12px 44px; position:relative; font-size:0.88rem; margin:0; }
|
||
.qlist li::before{ content:"Q" counter(q); position:absolute; left:13px; top:12px; font-size:0.66rem; font-weight:800; color:var(--coral); letter-spacing:0.04em; }
|
||
.qlist .who{ display:block; font-size:0.7rem; color:var(--ink-faint); margin-top:3px; }
|
||
|
||
footer.doc{ border-top:1px solid var(--line); padding-top:18px; font-size:0.74rem; color:var(--ink-faint); }
|
||
|
||
.loop{ margin:16px 0 14px; }
|
||
.loop-row{ display:flex; align-items:stretch; flex-wrap:wrap; gap:0; }
|
||
.loop-node{
|
||
flex:1 1 130px; background:var(--surface); border:1px solid var(--line); border-radius:10px;
|
||
padding:12px 13px; font-size:0.8rem; font-weight:700; text-align:center; line-height:1.3;
|
||
display:flex; align-items:center; justify-content:center; min-height:56px;
|
||
}
|
||
.loop-node .sub{ display:block; font-weight:400; font-size:0.72rem; color:var(--ink-soft); margin-top:3px; }
|
||
.loop-arrow{ flex:0 0 auto; display:flex; align-items:center; justify-content:center; padding:0 8px; font-size:1.15rem; color:var(--ink-faint); }
|
||
@media (max-width:620px){ .loop-arrow{ width:100%; padding:4px 0; transform:rotate(90deg); } }
|
||
.loop-back{
|
||
display:flex; align-items:center; gap:10px; margin-top:2px; padding:10px 14px;
|
||
border:1px dashed var(--coral); border-radius:10px; background:var(--coral-soft);
|
||
font-size:0.8rem; color:var(--ink);
|
||
}
|
||
.loop-back .icon{ font-size:1.2rem; color:var(--coral); flex:none; }
|
||
.loop-base{
|
||
display:flex; align-items:center; gap:10px; margin-top:10px; padding:10px 14px;
|
||
border:1px solid var(--line); border-radius:10px; background:var(--sage-soft);
|
||
font-size:0.8rem; color:var(--ink);
|
||
}
|
||
.loop-base .icon{ font-size:1.2rem; color:var(--sage); flex:none; }
|
||
</style>
|
||
|
||
<div class="wrap">
|
||
|
||
<div class="langbar">
|
||
<button class="de" onclick="document.body.setAttribute('data-lang','de')">DE</button>
|
||
<button class="en" onclick="document.body.setAttribute('data-lang','en')">EN</button>
|
||
</div>
|
||
|
||
<header class="doc">
|
||
<span class="kicker"><span class="de">Arbeitsdokument · intern</span><span class="en">Working document · internal</span></span>
|
||
<h1 class="display">Pocket Pascal</h1>
|
||
<p style="margin:0; color:var(--ink-soft); font-size:1rem;">
|
||
<span class="de">Ein Ernährungs-Coach für die Hosentasche. Verhindert schlechte Entscheidungen im Moment — statt Gewohnheiten zu überwachen.</span>
|
||
<span class="en">A nutrition coach for your pocket. Prevents poor decisions in the moment — instead of monitoring habits.</span>
|
||
</p>
|
||
<div class="meta">
|
||
<span><b><span class="de">Stand</span><span class="en">Version</span></b> 2026-08-03</span>
|
||
<span><b><span class="de">Autoren</span><span class="en">Authors</span></b> Steffi + Claude</span>
|
||
<span><b>Status</b> <span class="de">Entwurf, Phase 1 offen</span><span class="en">Draft, Phase 1 open</span></span>
|
||
<span><b><span class="de">Sprachen</span><span class="en">Languages</span></b> DE (primär) / EN</span>
|
||
</div>
|
||
</header>
|
||
|
||
<!-- 1 VISION -->
|
||
<section>
|
||
<h2><span class="idx">01</span><span class="de">Vision</span><span class="en">Vision</span></h2>
|
||
<p class="lede">
|
||
<span class="de">Was die App ist — und vor allem, was sie nicht ist.</span>
|
||
<span class="en">What the app is — and more importantly, what it is not.</span>
|
||
</p>
|
||
|
||
<p>
|
||
<span class="de">Pocket Pascal ist eine Entscheidungshilfe für den Moment: „Es ist 16 Uhr, ich habe Hunger, was jetzt?" Die App beantwortet das in wenigen Taps, gestützt auf Pascals Ernährungsbaukasten und den vorhandenen Vorrat.</span>
|
||
<span class="en">Pocket Pascal is a decision aid for the moment: "It's 4pm, I'm hungry, what now?" The app answers that in a few taps, based on Pascal's building-block system and what's actually in the kitchen.</span>
|
||
</p>
|
||
<p>
|
||
<span class="de">Das Erfolgskriterium ist ungewöhnlich: Die App soll sich <strong>überflüssig machen</strong>. Wenn die Daumenregeln verinnerlicht sind, wird sie seltener gebraucht. Das ist gewollt, kein Fehler.</span>
|
||
<span class="en">The success criterion is unusual: the app should <strong>make itself obsolete</strong>. Once the rules of thumb are internalised, it gets used less. That's intended, not a flaw.</span>
|
||
</p>
|
||
|
||
<h3><span class="de">Nicht-Ziele</span><span class="en">Non-goals</span></h3>
|
||
<ul>
|
||
<li><span class="de"><strong>Kein Tracker.</strong> Kein Kalorienzählen, keine Streaks, keine Schuldgefühl-Mechanik. Protokolliert wird im Coaching-Tool (Nutrilize), nicht hier.</span><span class="en"><strong>Not a tracker.</strong> No calorie counting, no streaks, no guilt mechanics. Logging happens in the coaching tool (Nutrilize), not here.</span></li>
|
||
<li><span class="de"><strong>Kein Chat-first-Interface.</strong> Buttons und klare UI schlagen offene Konversation. Ausnahme: tiefe Manager-Module (Kühlschrank, Wochenplanung) in Phase 3.</span><span class="en"><strong>Not chat-first.</strong> Buttons and clear UI beat open-ended conversation. Exception: deeper manager modules (fridge, weekly planning) in Phase 3.</span></li>
|
||
<li><span class="de"><strong>Kein Ersatz für den Coach.</strong> Die App ist Nachschlagewerk und Anwendungshilfe für Pascals Vorgaben, keine eigene Ernährungsberatung.</span><span class="en"><strong>Not a replacement for the coach.</strong> The app applies Pascal's guidance; it does not give its own nutritional advice.</span></li>
|
||
<li><span class="de"><strong>Keine Vollständigkeit.</strong> Lieber 40 gute Rezepte als 4.000 mittelmäßige. Der Datensatz bleibt kuratiert.</span><span class="en"><strong>Not exhaustive.</strong> Better 40 good recipes than 4,000 mediocre ones. The dataset stays curated.</span></li>
|
||
</ul>
|
||
|
||
<div class="callout">
|
||
<b><span class="de">Kernspannung</span><span class="en">Core tension</span></b>
|
||
<span class="de">Flexibilität gegen Struktur. Zu starr → wird umgangen. Zu offen → gibt keine Antwort und wird nicht geöffnet. Jede Funktion muss sich an dieser Achse messen lassen.</span>
|
||
<span class="en">Flexibility versus structure. Too rigid → gets circumvented. Too open → gives no answer and doesn't get opened. Every feature has to be measured against this axis.</span>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 2 NUTZER -->
|
||
<section>
|
||
<h2><span class="idx">02</span><span class="de">Nutzer & Bedürfnisse</span><span class="en">Users & needs</span></h2>
|
||
<p class="lede">
|
||
<span class="de">Zwei Personen, zwei sehr unterschiedliche Einstiegspunkte in dieselbe Logik.</span>
|
||
<span class="en">Two people, two very different entry points into the same logic.</span>
|
||
</p>
|
||
|
||
<div class="tablewrap">
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th><span class="de">Nutzer</span><span class="en">User</span></th>
|
||
<th><span class="de">Hauptbedürfnis</span><span class="en">Primary need</span></th>
|
||
<th><span class="de">Bedient durch</span><span class="en">Served by</span></th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td><strong>Steffi</strong></td>
|
||
<td><span class="de">Repertoire erweitern. Weiß bei manchen Zutaten nicht, was sie damit anfangen soll (z. B. Proteinpulver). Will Neues ausprobieren und eine mentale Rezeptbibliothek aufbauen.</span><span class="en">Broaden her repertoire. Doesn't know what to do with certain ingredients (e.g. protein powder). Wants to try new things and build a mental recipe library.</span></td>
|
||
<td><span class="de">Rezeptbibliothek, Vorschlagsmaschine</span><span class="en">Recipe library, suggestion engine</span></td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>David</strong></td>
|
||
<td><span class="de">Einkaufen mit richtiger Kategorie-Balance. Braucht (a) ein Gefühl für Lebensmittelkategorien im Laden und (b) Ideen für das, was schon zu Hause ist.</span><span class="en">Shopping with the right category balance. Needs (a) an intuitive sense for food categories while shopping and (b) ideas for what's already at home.</span></td>
|
||
<td><span class="de">Einkaufshilfe, Knowledge Base, Kühlschrank</span><span class="en">Shopping aid, knowledge base, fridge</span></td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
<p>
|
||
<span class="de">Beide Bedürfnisse laufen auf dieselbe Datenschicht hinaus: Lebensmittel mit Kategorie, Rezepte als Kombinationen daraus. Der Unterschied liegt nur in der Richtung der Abfrage — „was koche ich aus X?" gegen „was muss ich für die Woche kaufen?".</span>
|
||
<span class="en">Both needs resolve to the same data layer: foods with a category, recipes as combinations of them. The only difference is the direction of the query — "what do I cook from X?" versus "what do I need to buy for the week?".</span>
|
||
</p>
|
||
</section>
|
||
|
||
<!-- 3 PLATE LOGIC -->
|
||
<section>
|
||
<h2><span class="idx">03</span><span class="de">Plate Logic — das Regelwerk</span><span class="en">Plate logic — the rule set</span></h2>
|
||
<p class="lede">
|
||
<span class="de">Der inhaltliche Kern. Stammt aus Pascals Ernährungsbaukasten und Einkaufsguide.</span>
|
||
<span class="en">The substantive core. Sourced from Pascal's building-block system and shopping guide.</span>
|
||
</p>
|
||
|
||
<h3><span class="de">Baukasten-Reihenfolge</span><span class="en">Building-block sequence</span></h3>
|
||
<ul>
|
||
<li><span class="de"><strong>1. Protein</strong> — 30 g pro Mahlzeit, 150 g am Tag</span><span class="en"><strong>1. Protein</strong> — 30 g per meal, 150 g per day</span></li>
|
||
<li><span class="de"><strong>2. Obst oder Gemüse</strong> — eine Portion (Obst 100 g, Gemüse 200 g)</span><span class="en"><strong>2. Fruit or vegetables</strong> — one portion (fruit 100 g, veg 200 g)</span></li>
|
||
<li><span class="de"><strong>3. Fett</strong> — 15 g Kerne/Nüsse, ¼ Avocado oder 1 EL Öl</span><span class="en"><strong>3. Fat</strong> — 15 g seeds/nuts, ¼ avocado or 1 tbsp oil</span></li>
|
||
<li><span class="de"><strong>4. Kohlenhydrate</strong> — 75 g trocken, 250 g Kartoffeln oder 50 g Haferflocken</span><span class="en"><strong>4. Carbohydrates</strong> — 75 g dry, 250 g potatoes or 50 g oats</span></li>
|
||
</ul>
|
||
|
||
<h3><span class="de">Tellerverteilung</span><span class="en">Plate distribution</span></h3>
|
||
<ul>
|
||
<li><span class="de"><strong>Ganze Mahlzeit</strong> — ⅓ Protein, ⅓ Gemüse/Obst, ⅓ Fett + Kohlenhydrate</span><span class="en"><strong>Full meal</strong> — ⅓ protein, ⅓ veg/fruit, ⅓ fat + carbs</span></li>
|
||
<li><span class="de"><strong>Halbe Mahlzeit (Snack)</strong> — Protein + Gemüse/Obst, ohne Kohlenhydrate</span><span class="en"><strong>Half meal (snack)</strong> — protein + veg/fruit, no carbs</span></li>
|
||
</ul>
|
||
|
||
<h3><span class="de">Tagesstruktur</span><span class="en">Day structure</span></h3>
|
||
<p>
|
||
<span class="de">4 Mahlzeiten, ca. alle 3–4 Std. Morgens Protein + Obst · mittags ganzer Teller · nachmittags Proteinsnack + Obst/Gemüse · abends ganzer Teller. 2 L Wasser täglich.</span>
|
||
<span class="en">4 meals, roughly every 3–4 hours. Morning protein + fruit · midday full plate · afternoon protein snack + fruit/veg · evening full plate. 2 L water daily.</span>
|
||
</p>
|
||
<p>
|
||
<span class="de">Diese Struktur ist zugleich die <strong>Vorschlagslogik</strong>: Aus der Uhrzeit folgt der Mahlzeitentyp, aus dem Typ folgt die Zusammensetzung. Kein Rätselraten nötig.</span>
|
||
<span class="en">This structure doubles as the <strong>suggestion logic</strong>: time of day determines the meal type, meal type determines the composition. No guesswork needed.</span>
|
||
</p>
|
||
|
||
<h3><span class="de">Einkaufsregel</span><span class="en">Shopping rule</span></h3>
|
||
<p>
|
||
<span class="de">Pro Einkauf mindestens 5 Proteinquellen, 5 Obst-/Gemüsesorten, 4 Fettquellen, 4 Kohlenhydratquellen. Bedarf = Tage bis zum nächsten Einkauf × Mahlzeiten pro Tag. Diese Formel ist direkt rechenbar und wird zur Einkaufshilfe.</span>
|
||
<span class="en">Per shopping trip: at least 5 protein sources, 5 fruit/veg varieties, 4 fat sources, 4 carb sources. Demand = days until next trip × meals per day. This formula is directly computable and becomes the shopping aid.</span>
|
||
</p>
|
||
|
||
<h3><span class="de">Daumenregeln (Etikett-Check)</span><span class="en">Rules of thumb (label check)</span></h3>
|
||
<ul>
|
||
<li><span class="de"><strong>Protein</strong> — mindestens 15–20 g pro 100 g, wenig Zucker & Fett, kurze Zutatenliste</span><span class="en"><strong>Protein</strong> — at least 15–20 g per 100 g, low sugar & fat, short ingredient list</span></li>
|
||
<li><span class="de"><strong>Kohlenhydrate</strong> — Vollkorn als erste Zutat; Faustregel 10:1 (pro 10 g KH mind. 1 g Ballaststoffe)</span><span class="en"><strong>Carbs</strong> — whole grain as first ingredient; 10:1 rule (at least 1 g fibre per 10 g carbs)</span></li>
|
||
<li><span class="de"><strong>Fett</strong> — native/kaltgepresste Öle, ungesalzene Nüsse, Zutatenliste = nur die Zutat</span><span class="en"><strong>Fat</strong> — native/cold-pressed oils, unsalted nuts, ingredient list = just the ingredient</span></li>
|
||
<li><span class="de"><strong>Zucker</strong> — Tagesbudget = kcal × 10 % ÷ 4,1. Versteckt hinter „-ose", „…zucker", „…sirup"</span><span class="en"><strong>Sugar</strong> — daily budget = kcal × 10% ÷ 4.1. Hidden behind "-ose", "…sugar", "…syrup"</span></li>
|
||
</ul>
|
||
</section>
|
||
|
||
<!-- 4 MODULE -->
|
||
<section>
|
||
<h2><span class="idx">04</span><span class="de">Module</span><span class="en">Modules</span></h2>
|
||
<p class="lede">
|
||
<span class="de">Sieben Bausteine, nach Phase sortiert. Jeder für sich nutzbar.</span>
|
||
<span class="en">Seven building blocks, sorted by phase. Each usable on its own.</span>
|
||
</p>
|
||
|
||
<div class="modules">
|
||
<div class="mod">
|
||
<div class="mod-top">
|
||
<span class="mod-name"><span class="de">Knowledge Base</span><span class="en">Knowledge base</span></span>
|
||
<span class="badge done"><span class="de">Steht</span><span class="en">Built</span></span>
|
||
<span class="badge p1">Phase 1</span>
|
||
</div>
|
||
<p><span class="de">Teller-Regel und Vorratskammer als Nachschlagewerk: Kategorien aufklappbar, Suche, Punkte-Markierung (empfehlenswert / bewusst genießen), Daumenregeln pro Kategorie. Das Fundament, auf das alle anderen Module zugreifen. Muss auf das strukturierte Datenmodell umgestellt werden.</span><span class="en">Plate rule and pantry as a reference: collapsible categories, search, dot markers (recommended / enjoy mindfully), rules of thumb per category. The foundation all other modules read from. Needs migrating to the structured data model.</span></p>
|
||
</div>
|
||
|
||
<div class="mod">
|
||
<div class="mod-top">
|
||
<span class="mod-name"><span class="de">Rezeptbibliothek</span><span class="en">Recipe library</span></span>
|
||
<span class="badge p1">Phase 1</span>
|
||
</div>
|
||
<p><span class="de">Kuratierte Sammlung von Mahlzeiten als Kombinationen aus Baukasten-Zutaten. Jedes Rezept kennt seine Zutaten-IDs, den Mahlzeitentyp und die Tageszeit. Startbestand: die 13 Beispielmahlzeiten aus der Ernährungscheckliste, danach schrittweise erweitert. Ohne diese Schicht kann die Vorschlagsmaschine nur die Tellerverteilung wiederholen.</span><span class="en">A curated collection of meals as combinations of building-block ingredients. Each recipe knows its ingredient IDs, meal type and time of day. Seed: the 13 example meals from the nutrition checklist, expanded gradually. Without this layer the suggestion engine can only repeat the plate ratio.</span></p>
|
||
</div>
|
||
|
||
<div class="mod">
|
||
<div class="mod-top">
|
||
<span class="mod-name"><span class="de">Vorschlagsmaschine</span><span class="en">Suggestion engine</span></span>
|
||
<span class="badge p1">Phase 1</span>
|
||
</div>
|
||
<p><span class="de">„Was esse ich jetzt?" Ein Tap. Uhrzeit bestimmt den Vorschlag (halbe oder ganze Mahlzeit), manuelle Umschaltung bleibt möglich. Zieht passende Rezepte aus der Bibliothek. Rein regelbasiert, keine KI nötig. Später filterbar nach Kühlschrankinhalt.</span><span class="en">"What do I eat now?" One tap. Time of day drives the suggestion (half or full meal), with manual override. Pulls matching recipes from the library. Purely rule-based, no AI needed. Later filterable by fridge contents.</span></p>
|
||
</div>
|
||
|
||
<div class="mod">
|
||
<div class="mod-top">
|
||
<span class="mod-name"><span class="de">Teller-Builder</span><span class="en">Plate builder</span></span>
|
||
<span class="badge done"><span class="de">Steht</span><span class="en">Built</span></span>
|
||
<span class="badge p1">Phase 1</span>
|
||
</div>
|
||
<p><span class="de">Pro Kategorie (Protein, Fett, Kohlenhydrat, Obst/Gemüse) beliebig viele Lebensmittel als Chips antippen — die App bewertet die Kombination gegen die Baukasten-Regeln und die Pick/Caution-Markierungen: guter Teller, guter Snack, oder was fehlt. Kein Backend nötig, reine Client-Logik auf dem bestehenden Datenmodell. Übersetzt die Vorratskammer direkt in gefühltes Wissen — trifft die Vision „App macht sich überflüssig" am direktesten.</span><span class="en">Tap any number of foods per category (protein, fat, carb, veg/fruit) as chips — the app evaluates the combination against the building-block rules and the pick/caution tags: good plate, good snack, or what's missing. No backend needed, pure client-side logic on the existing data model. Translates the pantry straight into felt intuition — hits the "app makes itself obsolete" vision most directly.</span></p>
|
||
</div>
|
||
|
||
<div class="mod">
|
||
<div class="mod-top">
|
||
<span class="mod-name"><span class="de">Teller-Builder — Analyse-Layer</span><span class="en">Plate builder — analysis layer</span></span>
|
||
<span class="badge p2">Phase 2</span>
|
||
</div>
|
||
<p><span class="de">Baut auf dem Teller-Builder auf, sobald Mengen dazukommen. Vier Parameter: <strong>Kalorien</strong> (Summe aus Mengen × Nährwert), <strong>Makros</strong> (Protein/Fett/KH gegen Baukasten-Zielwerte), <strong>Vielfalt</strong> (abgedeckte Vitamine/Mineralien je Teller, später auch über die Woche), <strong>Zucker</strong> (Tagesbudget-Regel aus dem Zucker-Guide). Mengen bekommen einen Vorschlagswert aus den Baukasten-Standardmengen (30 g Protein, 15 g Fett, 75 g KH, 100 g Obst/200 g Gemüse), editierbar. Ausgewählte Kombination als Favorit speichern — landet direkt in der Rezeptbibliothek, keine zweite Datenstruktur nötig. Voraussetzung: alle Lebensmittel auf eine einheitliche Basis (pro 100 g) normalisieren — aktuell sind Snacks pro Portion, der Rest pro 100 g angegeben.</span><span class="en">Builds on the plate builder once quantities are added. Four parameters: <strong>calories</strong> (sum of quantity × nutrition value), <strong>macros</strong> (protein/fat/carbs against building-block targets), <strong>variety</strong> (vitamins/minerals covered per plate, later across the week too), <strong>sugar</strong> (daily-budget rule from the sugar guide). Quantities get a suggested value from the building-block defaults (30 g protein, 15 g fat, 75 g carbs, 100 g fruit/200 g veg), editable. Save a combination as a favourite — it lands straight in the recipe library, no second data structure needed. Prerequisite: normalise all foods onto one basis (per 100 g) — currently snacks are per serving, everything else per 100 g.</span></p>
|
||
</div>
|
||
|
||
<div class="mod">
|
||
<div class="mod-top">
|
||
<span class="mod-name">Settings</span>
|
||
<span class="badge p1">Phase 1</span>
|
||
</div>
|
||
<p><span class="de">Sprachumschaltung DE/EN, gespeichert. Später: Mahlzeiten pro Tag, Einkaufsrhythmus, Kalorienrichtwert für das Zuckerbudget.</span><span class="en">Language switch DE/EN, persisted. Later: meals per day, shopping rhythm, calorie reference for the sugar budget.</span></p>
|
||
</div>
|
||
|
||
<div class="mod">
|
||
<div class="mod-top">
|
||
<span class="mod-name"><span class="de">Einkaufshilfe</span><span class="en">Shopping aid</span></span>
|
||
<span class="badge p2">Phase 2</span>
|
||
</div>
|
||
<p><span class="de">Rechnet aus Einkaufsrhythmus und Mahlzeitenzahl den Bedarf je Kategorie und schlägt eine ausgewogene Liste vor. Abhakbar im Laden. Bedient primär David.</span><span class="en">Calculates per-category demand from shopping rhythm and meal count, then proposes a balanced list. Checkable in the shop. Primarily serves David.</span></p>
|
||
</div>
|
||
|
||
<div class="mod">
|
||
<div class="mod-top">
|
||
<span class="mod-name"><span class="de">Virtueller Kühlschrank</span><span class="en">Virtual fridge</span></span>
|
||
<span class="badge p2">Phase 2</span>
|
||
</div>
|
||
<p><span class="de">Erfasst, was da ist; bucht Zutaten ab, wenn gekocht wurde. Ermöglicht „was kann ich jetzt kochen?" und hilft, angebrochene Packungen über mehrere Tage aufzubrauchen (z. B. eine Dose Bohnen). Braucht Persistenz — technisch die erste echte Hürde. Später: speist die Chip-Auswahl im Teller-Builder direkt aus dem Bestand statt aus der ganzen Vorratskammer — dieselbe Bewertungslogik, andere Datenquelle.</span><span class="en">Records what's available; deducts ingredients once a meal is cooked. Enables "what can I make right now?" and helps use up opened items across several days (e.g. a can of beans). Requires persistence — the first real technical hurdle. Later: feeds the plate builder's chip choices straight from stock instead of the whole pantry — same scoring logic, different data source.</span></p>
|
||
</div>
|
||
|
||
<div class="mod">
|
||
<div class="mod-top">
|
||
<span class="mod-name"><span class="de">Wunschliste</span><span class="en">Wishlist</span></span>
|
||
<span class="badge p2">Phase 2</span>
|
||
</div>
|
||
<p><span class="de">Merkliste für Dinge, die in die Vorratskammer sollen, aber gerade fehlen — Bindeglied zwischen Kühlschrank und Einkaufsliste. Ohne eigene Logik: Einträge landen automatisch auf der nächsten Einkaufsliste.</span><span class="en">A running list of things that should be in the pantry but currently aren't — the link between the fridge and the shopping list. No logic of its own: entries land on the next shopping list automatically.</span></p>
|
||
</div>
|
||
|
||
<div class="mod">
|
||
<div class="mod-top">
|
||
<span class="mod-name"><span class="de">Konversationelle Manager</span><span class="en">Conversational managers</span></span>
|
||
<span class="badge p3">Phase 3</span>
|
||
</div>
|
||
<p><span class="de">Kühlschrank-Manager und Wochenplaner mit natürlicher Sprache („hab noch Spinat und Feta, was geht?"). Die einzige Stelle, an der Chat sinnvoll ist — weil die Eingabe zu vielfältig für Buttons wird. Braucht Backend.</span><span class="en">Fridge manager and weekly planner with natural language ("got spinach and feta left, what works?"). The only place chat makes sense — because input becomes too varied for buttons. Requires a backend.</span></p>
|
||
</div>
|
||
</div>
|
||
|
||
<h3><span class="de">Zusammenspiel der Module — der Kreislauf</span><span class="en">How the modules interlock — the loop</span></h3>
|
||
<p>
|
||
<span class="de">Aus dem FigJam-Board: Die Module sind kein loses Set, sie bilden einen geschlossenen Kreislauf. Jeder Schritt füttert den nächsten, der letzte Schritt füttert wieder den ersten.</span>
|
||
<span class="en">From the FigJam board: the modules aren't a loose set — they form a closed loop. Each step feeds the next, and the last step feeds back into the first.</span>
|
||
</p>
|
||
|
||
<div class="loop">
|
||
<div class="loop-row">
|
||
<div class="loop-node"><span class="de">Kühlschrank<span class="sub">kennt Bestand</span></span><span class="en">Fridge<span class="sub">knows stock</span></span></div>
|
||
<div class="loop-arrow">→</div>
|
||
<div class="loop-node"><span class="de">Einkaufsliste</span><span class="en">Shopping list</span></div>
|
||
<div class="loop-arrow">→</div>
|
||
<div class="loop-node"><span class="de">Wochenplan<span class="sub">mit Einkaufsliste verknüpft</span></span><span class="en">Meal plan<span class="sub">linked to shopping list</span></span></div>
|
||
<div class="loop-arrow">→</div>
|
||
<div class="loop-node"><span class="de">Rezeptvorschläge</span><span class="en">Recipe suggestions</span></div>
|
||
<div class="loop-arrow">→</div>
|
||
<div class="loop-node"><span class="de">„Hab Hunger, was jetzt?"</span><span class="en">"Hungry now, what's next?"</span></div>
|
||
</div>
|
||
<div class="loop-back">
|
||
<span class="icon">↺</span>
|
||
<span><span class="de">Die Antwort verbraucht Zutaten aus dem Bestand — und schreibt zurück in den Kühlschrank. Der Kreis schließt sich.</span><span class="en">The answer consumes ingredients from stock — and writes back into the fridge. The loop closes.</span></span>
|
||
</div>
|
||
<div class="loop-base">
|
||
<span class="icon">◆</span>
|
||
<span><span class="de">Die Knowledge Base (Teller-Regel, Vorratskammer, Daumenregeln) liegt unter jedem einzelnen Schritt — jedes Modul liest daraus, statt eigene Regeln mitzubringen.</span><span class="en">The knowledge base (plate rule, pantry, rules of thumb) underlies every single step — each module reads from it instead of carrying its own rules.</span></span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="callout info">
|
||
<b><span class="de">Konsequenz für die Roadmap</span><span class="en">Consequence for the roadmap</span></b>
|
||
<span class="de">Kühlschrank (Phase 2) ist der Dreh- und Angelpunkt des Kreislaufs, nicht nur ein Feature unter anderen. Einkaufshilfe und Vorschlagsmaschine bekommen ihren vollen Wert erst, wenn er steht. Phase 1 liefert die Module isoliert nutzbar vor — der Kreislauf selbst ist Phase 2.</span>
|
||
<span class="en">The fridge (Phase 2) is the pivot of the loop, not just one feature among others. The shopping aid and suggestion engine only reach their full value once it exists. Phase 1 ships the modules usable in isolation — the loop itself is Phase 2.</span>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 5 ARCHITEKTUR -->
|
||
<section>
|
||
<h2><span class="idx">05</span><span class="de">Architektur</span><span class="en">Architecture</span></h2>
|
||
<p class="lede">
|
||
<span class="de">Entscheidungen, die jetzt getroffen werden müssen, weil sie später teuer sind.</span>
|
||
<span class="en">Decisions that must be made now because they get expensive later.</span>
|
||
</p>
|
||
|
||
<h3><span class="de">Datenmodell: strukturiert statt Anzeige-Strings</span><span class="en">Data model: structured, not display strings</span></h3>
|
||
<p>
|
||
<span class="de">Der aktuelle Prototyp speichert fertige Anzeigetexte. Das blockiert sowohl Zweisprachigkeit als auch jede Rechenfunktion. Neue Form:</span>
|
||
<span class="en">The current prototype stores ready-made display text. That blocks both bilingualism and any computation. New shape:</span>
|
||
</p>
|
||
<pre><code>// Lebensmittel / food item
|
||
{ id: 'chicken_breast',
|
||
cat: 'protein',
|
||
name: { de: 'Hühnerbrust', en: 'Chicken breast' },
|
||
kcal: 111,
|
||
protein: 24,
|
||
tag: 'pick' } // 'pick' | 'caution' | null
|
||
|
||
// Rezept / recipe
|
||
{ id: 'eggs_cottage_cucumber',
|
||
name: { de: '3 Eier + Hüttenkäse + Gurke', en: '3 eggs + cottage cheese + cucumber' },
|
||
type: 'full', // 'full' | 'half'
|
||
times: ['midday','evening'],
|
||
uses: ['egg','cottage_cheese','cucumber','lentil_waffle'] }</code></pre>
|
||
<p>
|
||
<span class="de">Damit wird alles möglich: Übersetzen (<code>name[lang]</code>), Rechnen (Einkaufsmengen), Filtern (welches Rezept passt zum Vorrat), Verknüpfen (Rezept ↔ Zutat ↔ Kategorie).</span>
|
||
<span class="en">This unlocks everything: translation (<code>name[lang]</code>), computation (shopping quantities), filtering (which recipe fits the stock), linking (recipe ↔ ingredient ↔ category).</span>
|
||
</p>
|
||
|
||
<div class="callout ok">
|
||
<b><span class="de">Jetzt umstellen</span><span class="en">Migrate now</span></b>
|
||
<span class="de">Der Datensatz umfasst aktuell rund 70 Einträge. Bei 300 wird der Umbau zur Tagesaufgabe. Der Refactor gehört an den Anfang von Phase 1, nicht ans Ende.</span>
|
||
<span class="en">The dataset currently holds around 70 entries. At 300 the migration becomes a full day's work. The refactor belongs at the start of Phase 1, not the end.</span>
|
||
</div>
|
||
|
||
<h3><span class="de">Portabilität</span><span class="en">Portability</span></h3>
|
||
<p>
|
||
<span class="de">Ziel ist der spätere Umzug auf echtes Hosting. Damit das kein Neubau wird, gilt ab sofort: <strong>Daten, Logik und Darstellung strikt getrennt</strong>. Die Datenschicht bleibt reines JavaScript ohne DOM-Bezug — sie lässt sich unverändert in ein Repo übernehmen. Keine Abhängigkeit von Artifact-spezifischen APIs im Kern.</span>
|
||
<span class="en">The goal is an eventual move to real hosting. To keep that from becoming a rebuild, from now on: <strong>strictly separate data, logic and presentation</strong>. The data layer stays plain JavaScript with no DOM references — it can move into a repo untouched. No dependency on Artifact-specific APIs in the core.</span>
|
||
</p>
|
||
|
||
<div class="tablewrap">
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th><span class="de">Fähigkeit</span><span class="en">Capability</span></th>
|
||
<th>Artifact</th>
|
||
<th><span class="de">Eigenes Hosting</span><span class="en">Own hosting</span></th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr><td><span class="de">Nachschlagen, Rechnen, Vorschläge</span><span class="en">Reference, computation, suggestions</span></td><td>✓</td><td>✓</td></tr>
|
||
<tr><td><span class="de">Home-Bildschirm-Icon</span><span class="en">Home screen icon</span></td><td><span class="de">über Safari „Teilen"</span><span class="en">via Safari "Share"</span></td><td>✓</td></tr>
|
||
<tr><td><span class="de">Zustand speichern (Kühlschrank, Sprache)</span><span class="en">Persisted state (fridge, language)</span></td><td><span class="de">ungeprüft</span><span class="en">unverified</span></td><td>✓</td></tr>
|
||
<tr><td><span class="de">Offline-Nutzung</span><span class="en">Offline use</span></td><td>—</td><td>✓</td></tr>
|
||
<tr><td><span class="de">Konversationelle Module</span><span class="en">Conversational modules</span></td><td>—</td><td>✓</td></tr>
|
||
<tr><td><span class="de">Sync zwischen zwei Nutzern</span><span class="en">Sync between two users</span></td><td>—</td><td>✓</td></tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
<h3><span class="de">Zweisprachigkeit</span><span class="en">Bilingualism</span></h3>
|
||
<p>
|
||
<span class="de">DE ist die primäre Arbeitssprache, EN die allgemeine Vorlage. Umsetzung nicht mehr über doppelte HTML-Blöcke wie bisher, sondern über ein <code>t()</code>-Lookup gegen das Datenmodell — sonst wächst jede Seite doppelt. UI-Texte kommen in ein eigenes Wörterbuch.</span>
|
||
<span class="en">DE is the primary working language, EN the general template. No longer implemented via duplicated HTML blocks, but through a <code>t()</code> lookup against the data model — otherwise every page doubles in size. UI strings move into their own dictionary.</span>
|
||
</p>
|
||
</section>
|
||
|
||
<!-- 6 ROADMAP -->
|
||
<section>
|
||
<h2><span class="idx">06</span>Roadmap</h2>
|
||
<p class="lede">
|
||
<span class="de">Phase 1 muss allein stehen können. Erst wenn sie im Alltag benutzt wird, kommt Phase 2.</span>
|
||
<span class="en">Phase 1 has to stand on its own. Phase 2 only follows once Phase 1 is actually used day to day.</span>
|
||
</p>
|
||
|
||
<h3><span class="de">Phase 1 — Fundament</span><span class="en">Phase 1 — foundation</span></h3>
|
||
<ul>
|
||
<li><span class="de">Datenmodell-Refactor: Anzeige-Strings → strukturierte Records mit IDs und <code>de</code>/<code>en</code></span><span class="en">Data model refactor: display strings → structured records with IDs and <code>de</code>/<code>en</code></span></li>
|
||
<li><span class="de">Settings-Seite mit Sprachumschaltung; <code>localStorage</code> im Artifact prüfen</span><span class="en">Settings page with language switch; verify <code>localStorage</code> inside the Artifact</span></li>
|
||
<li><span class="de">Knowledge Base auf das neue Modell umstellen (Teller-Regel + Vorratskammer + Daumenregeln)</span><span class="en">Migrate the knowledge base to the new model (plate rule + pantry + rules of thumb)</span></li>
|
||
<li><span class="de">Rezeptbibliothek aufbauen, Start mit den 13 Beispielmahlzeiten</span><span class="en">Build the recipe library, starting from the 13 example meals</span></li>
|
||
<li><span class="de">Vorschlagsmaschine: „Was esse ich jetzt?" nach Uhrzeit und Mahlzeitentyp</span><span class="en">Suggestion engine: "What do I eat now?" by time of day and meal type</span></li>
|
||
<li><span class="de">Teller-Builder: Lebensmittel pro Kategorie wählen, Kombination bewerten lassen</span><span class="en">Plate builder: pick foods per category, get the combination evaluated</span></li>
|
||
</ul>
|
||
|
||
<h3><span class="de">Phase 2 — Zustand & Einkauf</span><span class="en">Phase 2 — state & shopping</span></h3>
|
||
<ul>
|
||
<li><span class="de">Umzug auf eigenes Hosting, echtes PWA-Manifest, Offline-Fähigkeit</span><span class="en">Move to own hosting, real PWA manifest, offline capability</span></li>
|
||
<li><span class="de">Einkaufshilfe mit Kategorie-Rechner und abhakbarer Liste</span><span class="en">Shopping aid with category calculator and checkable list</span></li>
|
||
<li><span class="de">Virtueller Kühlschrank mit Abbuchung nach dem Kochen</span><span class="en">Virtual fridge with deduction after cooking</span></li>
|
||
<li><span class="de">Wunschliste als Bindeglied zwischen Kühlschrank und Einkaufsliste</span><span class="en">Wishlist as the link between fridge and shopping list</span></li>
|
||
<li><span class="de">Vorschläge nach Vorrat filtern</span><span class="en">Filter suggestions by available stock</span></li>
|
||
<li><span class="de">Datenmodell auf Basis „pro 100 g" normalisieren, Mengen in den Teller-Builder</span><span class="en">Normalise the data model to a "per 100 g" basis, add quantities to the plate builder</span></li>
|
||
<li><span class="de">Teller-Builder-Analyse: Kalorien, Makros, Vielfalt, Zucker; Favoriten speichern → Rezeptbibliothek</span><span class="en">Plate builder analysis: calories, macros, variety, sugar; save favourites → recipe library</span></li>
|
||
<li><span class="de">UI-Politur: von funktionalem Prototyp zu hochwertig wirkender App — mit dir als UX-Designerin</span><span class="en">UI polish: from functional prototype to an app that feels high-quality — with you leading as UX designer</span></li>
|
||
</ul>
|
||
|
||
<h3><span class="de">Phase 3 — Agentische Module</span><span class="en">Phase 3 — agentic modules</span></h3>
|
||
<ul>
|
||
<li><span class="de">Kühlschrank-Manager und Wochenplaner mit natürlicher Sprache</span><span class="en">Fridge manager and weekly planner with natural language</span></li>
|
||
<li><span class="de">Rezeptvorschläge, die über den kuratierten Bestand hinausgehen</span><span class="en">Recipe suggestions beyond the curated set</span></li>
|
||
<li><span class="de">Mehrbenutzer-Betrieb mit geteiltem Haushalt</span><span class="en">Multi-user operation with a shared household</span></li>
|
||
</ul>
|
||
</section>
|
||
|
||
<!-- 7 OFFENE FRAGEN -->
|
||
<section>
|
||
<h2><span class="idx">07</span><span class="de">Offene Fragen</span><span class="en">Open questions</span></h2>
|
||
<p class="lede">
|
||
<span class="de">Zu klären, bevor die jeweilige Phase startet.</span>
|
||
<span class="en">To be resolved before the respective phase starts.</span>
|
||
</p>
|
||
|
||
<ol class="qlist">
|
||
<li>
|
||
<span class="de">Speichert <code>localStorage</code> im Artifact-iframe zuverlässig? Im normalen Browser bestätigt (Sprache übersteht Reload), im claude.ai-iframe selbst noch nicht getestet. App zeigt in den Settings ehrlich an, ob's geklappt hat.</span>
|
||
<span class="en">Does <code>localStorage</code> persist reliably inside the Artifact iframe? Confirmed in a normal browser (language survives reload), not yet verified inside the claude.ai iframe itself. The app's settings screen honestly reports whether it worked.</span>
|
||
<span class="who"><span class="de">Steffi · auf dem iPhone prüfen</span><span class="en">Steffi · verify on iPhone</span></span>
|
||
</li>
|
||
<li>
|
||
<span class="de">Woher kommen neue Rezepte? Von Claude vorgeschlagen und von dir freigegeben, oder sammelst du selbst? Empfehlung: Claude schlägt vor, du kuratierst — sonst wächst die Bibliothek nicht.</span>
|
||
<span class="en">Where do new recipes come from? Proposed by Claude and approved by you, or collected yourself? Recommendation: Claude proposes, you curate — otherwise the library won't grow.</span>
|
||
<span class="who">Steffi</span>
|
||
</li>
|
||
<li>
|
||
<span class="de">Wie viele Rezepte braucht ein sinnvoller Start? Vorschlag: 30–40, verteilt über die vier Tageszeiten.</span>
|
||
<span class="en">How many recipes make a viable start? Proposal: 30–40, spread across the four times of day.</span>
|
||
<span class="who">Steffi</span>
|
||
</li>
|
||
<li>
|
||
<span class="de">Bekommt David eine eigene Instanz oder eine geteilte? Betrifft die Datenhaltung ab Phase 2.</span>
|
||
<span class="en">Does David get his own instance or a shared one? Affects data handling from Phase 2 onwards.</span>
|
||
<span class="who">Steffi</span>
|
||
</li>
|
||
<li>
|
||
<span class="de">Wohin beim Hosting — GitHub Pages, Vercel, eigene Domain? Entscheidet über Aufwand und Sync-Möglichkeiten.</span>
|
||
<span class="en">Where to host — GitHub Pages, Vercel, own domain? Determines effort and sync options.</span>
|
||
<span class="who"><span class="de">Steffi · vor Phase 2</span><span class="en">Steffi · before Phase 2</span></span>
|
||
</li>
|
||
<li>
|
||
<span class="de">Genügen gerundete Nährwerte? Die App ist keine medizinische Anwendung; PCOS und Prädiabetes gehören ins Coaching, nicht in eine App-Logik.</span>
|
||
<span class="en">Are rounded nutritional values sufficient? The app is not a medical tool; PCOS and prediabetes belong in the coaching, not in app logic.</span>
|
||
<span class="who">Steffi</span>
|
||
</li>
|
||
<li>
|
||
<span class="de">Lohnt sich eine Food-Database-API statt manueller Pflege? Open Food Facts (kostenlos, kein Key, gut für verpackte Produkte/Barcodes) vs. USDA FoodData Central (kostenlos, Key nötig, sehr genau für Grundzutaten, aber Englisch/US-zentriert) vs. Edamam (bester Rezept-Nährwert-Abgleich, aber Freemium mit Kontingent). Widerspricht evtl. dem Nicht-Ziel „kuratiert statt vollständig" — Integration würde eher die Vorratskammer ergänzen (Nährwerte nachschlagen), nicht ersetzen.</span>
|
||
<span class="en">Does a food-database API pay off over manual upkeep? Open Food Facts (free, no key, good for packaged products/barcodes) vs. USDA FoodData Central (free, needs a key, very accurate for base ingredients, but English/US-centric) vs. Edamam (best recipe-nutrition matching, but freemium with quota). May cut against the non-goal "curated, not exhaustive" — integration would more likely supplement the pantry (nutrition lookup) than replace it.</span>
|
||
<span class="who"><span class="de">Steffi · vor Phase 2</span><span class="en">Steffi · before Phase 2</span></span>
|
||
</li>
|
||
<li>
|
||
<span class="de">Wer treibt das UI-Redesign und wann im Prozess? Du bist UX-Designerin — heißt vermutlich: du lieferst Richtung/Mockups, Claude setzt um. Zeitpunkt: jetzt parallel zu Phase 1, oder erst wenn Funktionsumfang steht?</span>
|
||
<span class="en">Who drives the UI redesign and at what point in the process? You're the UX designer — likely means: you supply direction/mockups, Claude implements. Timing: now, in parallel with Phase 1, or only once the feature set is settled?</span>
|
||
<span class="who">Steffi</span>
|
||
</li>
|
||
<li>
|
||
<span class="de">Teller-Builder: Was genau macht eine Kombination „gut"? Vorschlag: alle 4 Kategorien besetzt = vollständig; enthält „pick"-Markierung = Bonus; enthält „caution" = Hinweis statt Fehler (nichts ist verboten). Genaue Bewertungsstufen und Formulierung sind UX-Entscheidung.</span>
|
||
<span class="en">Plate builder: what exactly makes a combination "good"? Proposal: all 4 categories filled = complete; contains a "pick" tag = bonus; contains a "caution" tag = a note, not an error (nothing is forbidden). Exact scoring tiers and wording are a UX call.</span>
|
||
<span class="who">Steffi</span>
|
||
</li>
|
||
<li>
|
||
<span class="de">Wie werden Mengen eingegeben — Stepper, Slider oder Zahlenfeld pro Chip? Vorschlag: Baukasten-Standardmenge vorausgefüllt, direkt editierbar. UX-Entscheidung.</span>
|
||
<span class="en">How are quantities entered — stepper, slider, or number field per chip? Proposal: pre-filled with the building-block default, directly editable. A UX call.</span>
|
||
<span class="who">Steffi</span>
|
||
</li>
|
||
<li>
|
||
<span class="de">Vielfalt über die Woche messen — braucht Verlauf gespeicherter Teller, nicht nur den aktuellen. Erst sinnvoll, sobald Favoriten/Historie existieren (Phase 2).</span>
|
||
<span class="en">Measuring variety across the week needs a history of saved plates, not just the current one. Only makes sense once favourites/history exist (Phase 2).</span>
|
||
<span class="who"><span class="de">Steffi · vor Umsetzung</span><span class="en">Steffi · before implementation</span></span>
|
||
</li>
|
||
<li>
|
||
<span class="de">Magic Button „Was esse ich jetzt?" — Konzept noch nicht ausgearbeitet. Braucht: Eingaben (Zeit, evtl. Kühlschrankinhalt, evtl. Stimmung/Zeitdruck), Ausgabelogik (ein Vorschlag vs. 3 Optionen), Verhalten bei „passt nicht" (neu würfeln? Filter?). Gehört zur Vorschlagsmaschine (Modul, Abschnitt 4), aber die Interaktion selbst ist UX-Arbeit.</span>
|
||
<span class="en">Magic Button "What can I eat now?" — concept not yet worked out. Needs: inputs (time, maybe fridge contents, maybe mood/time pressure), output logic (one suggestion vs. 3 options), behaviour on "doesn't fit" (reroll? filter?). Belongs to the suggestion engine (module, section 4), but the interaction itself is UX work.</span>
|
||
<span class="who"><span class="de">Steffi + Claude gemeinsam</span><span class="en">Steffi + Claude together</span></span>
|
||
</li>
|
||
</ol>
|
||
|
||
<div class="callout">
|
||
<b><span class="de">Rechtlicher Hinweis</span><span class="en">Legal note</span></b>
|
||
<span class="de">Zucker-Guide und Einkaufsguide tragen den Vermerk „Weitergabe ohne Genehmigung ist nicht gestattet". Die App baut inhaltlich auf diesem Material auf. Für den privaten Gebrauch unproblematisch — vor jeder Weitergabe, Veröffentlichung oder Nutzung durch David mit Pascal klären. Gleiches gilt für den Namen „Pocket Pascal".</span>
|
||
<span class="en">The sugar guide and shopping guide carry the notice "distribution without permission is not permitted". The app builds on this material. Unproblematic for private use — clear it with Pascal before any sharing, publication, or use by David. The same applies to the name "Pocket Pascal".</span>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 8 ENTSCHEIDUNGSLOG -->
|
||
<section>
|
||
<h2><span class="idx">08</span><span class="de">Entscheidungslog</span><span class="en">Decision log</span></h2>
|
||
<p class="lede">
|
||
<span class="de">Getroffene Festlegungen, damit sie nicht neu verhandelt werden.</span>
|
||
<span class="en">Settled decisions, so they don't get re-litigated.</span>
|
||
</p>
|
||
|
||
<div class="tablewrap">
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th><span class="de">Datum</span><span class="en">Date</span></th>
|
||
<th><span class="de">Entscheidung</span><span class="en">Decision</span></th>
|
||
<th><span class="de">Begründung</span><span class="en">Rationale</span></th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>2026-08-03</td>
|
||
<td><span class="de">Alle Artefakte zweisprachig, DE primär</span><span class="en">All artefacts bilingual, DE primary</span></td>
|
||
<td><span class="de">DE zum eigenen Anpassen, EN als allgemeine Vorlage</span><span class="en">DE for personal editing, EN as the general template</span></td>
|
||
</tr>
|
||
<tr>
|
||
<td>2026-08-03</td>
|
||
<td><span class="de">Buttons statt Chat als Standard</span><span class="en">Buttons over chat by default</span></td>
|
||
<td><span class="de">Offene Konversation kostet im Hunger-Moment zu viel Zeit</span><span class="en">Open conversation costs too much time in a moment of hunger</span></td>
|
||
</tr>
|
||
<tr>
|
||
<td>2026-08-03</td>
|
||
<td><span class="de">Später eigenes Hosting, portable Architektur ab jetzt</span><span class="en">Own hosting later, portable architecture from now</span></td>
|
||
<td><span class="de">Kühlschrank und AI-Module sind im Artifact nicht umsetzbar</span><span class="en">Fridge and AI modules aren't feasible inside an Artifact</span></td>
|
||
</tr>
|
||
<tr>
|
||
<td>2026-08-03</td>
|
||
<td><span class="de">Datenmodell strukturiert statt Anzeige-Strings</span><span class="en">Structured data model instead of display strings</span></td>
|
||
<td><span class="de">Voraussetzung für Übersetzung, Rechnen und Filtern</span><span class="en">Prerequisite for translation, computation and filtering</span></td>
|
||
</tr>
|
||
<tr>
|
||
<td>2026-08-03</td>
|
||
<td><span class="de">App nur hell, Dokumente hell/dunkel</span><span class="en">App light only, documents light/dark</span></td>
|
||
<td><span class="de">Küchennutzung bei Tageslicht, Druckvorlagen brauchen Weiß</span><span class="en">Kitchen use in daylight, print masters need white</span></td>
|
||
</tr>
|
||
<tr>
|
||
<td>2026-08-03</td>
|
||
<td><span class="de">Phase 1 = Knowledge Base + Rezeptbibliothek + Vorschlag</span><span class="en">Phase 1 = knowledge base + recipe library + suggestion</span></td>
|
||
<td><span class="de">Bedient Steffis Kernbedürfnis, ohne Persistenz auszukommen</span><span class="en">Serves Steffi's core need without requiring persistence</span></td>
|
||
</tr>
|
||
<tr>
|
||
<td>2026-08-03</td>
|
||
<td><span class="de">Testen/Aktualisieren: Artifact-Link direkt auf dem iPhone öffnen, kein Neu-Hinzufügen zum Home-Bildschirm nötig</span><span class="en">Testing/updating: open the Artifact link directly on the iPhone, no need to re-add to the home screen</span></td>
|
||
<td><span class="de">Ohne Service Worker cacht iOS nichts offline — jeder Aufruf lädt die zuletzt veröffentlichte Version live nach; das Home-Bildschirm-Icon zeigt also automatisch den neuesten Stand</span><span class="en">Without a service worker, iOS caches nothing offline — every open fetches the latest published version live, so the home-screen icon automatically shows the newest state</span></td>
|
||
</tr>
|
||
<tr>
|
||
<td>2026-08-03</td>
|
||
<td><span class="de">Web/PWA statt native iOS-App (kein Swift/Cursor)</span><span class="en">Web/PWA instead of a native iOS app (no Swift/Cursor)</span></td>
|
||
<td><span class="de">Nur 2 Nutzer (Steffi + David); bestehendes Datenmodell/Logik direkt weiterverwendbar statt Neustart der Codebasis; kein App-Store-Aufwand nötig</span><span class="en">Only 2 users (Steffi + David); existing data model/logic carries over directly instead of a codebase restart; no App Store overhead needed</span></td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</section>
|
||
|
||
<footer class="doc">
|
||
<span class="de">Pocket Pascal · Arbeitsdokument, Stand 2026-08-03 · Inhaltliche Grundlage: Ernährungsbaukasten, Einkaufsguide und Zucker-Guide von Pascal Wirth</span>
|
||
<span class="en">Pocket Pascal · working document, as of 2026-08-03 · Content basis: building-block system, shopping guide and sugar guide by Pascal Wirth</span>
|
||
</footer>
|
||
|
||
</div>
|