Marcel Raddatz
c297403506
V1: Structured sections (toggles + segmented weight controls, low effort) V2: Context preset chips (Omnivor/Vegetarisch/Vegan) with live score preview — recommended V3: Rule cards with inline examples showing exact penalty impact Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
1139 lines
60 KiB
HTML
1139 lines
60 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="UTF-8"/>
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||
<title>Recipe App — E4 Variety Settings · 3 Mockups</title>
|
||
<link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300;9..144,400;9..144,500&family=DM+Sans:wght@300;400;500;600&family=DM+Mono:wght@400;500&display=swap" rel="stylesheet"/>
|
||
<style>
|
||
:root{
|
||
--color-page:#FAFAF7;--color-surface:#F5F4EE;--color-subtle:#EDECEA;
|
||
--color-border:#D8D7D0;--color-text-muted:#6B6A63;--color-text:#1C1C18;
|
||
--green-tint:#E8F5EA;--green-light:#AEDCB0;--green:#3D8C4A;--green-dark:#2E6E39;--green-deeper:#1E4A26;
|
||
--yellow-tint:#FDF6D8;--yellow-light:#F9E08A;--yellow:#F2C12E;--yellow-dark:#C49610;--yellow-text:#8A6800;
|
||
--blue-tint:#E6F1FB;--blue-light:#A4CFF4;--blue:#2D7DD2;--blue-dark:#185FA5;
|
||
--purple-tint:#EEEDFE;--purple-light:#CECBF6;--purple:#534AB7;--purple-dark:#3C3489;
|
||
--orange-tint:#FEF0E6;--orange:#E8862A;--orange-dark:#B46820;
|
||
--red-tint:#FDECEA;--red:#DC4C3E;--red-dark:#B03328;
|
||
--font-display:'Fraunces',Georgia,serif;--font-sans:'DM Sans',system-ui,sans-serif;--font-mono:'DM Mono',monospace;
|
||
--radius-sm:4px;--radius-md:6px;--radius-lg:10px;--radius-xl:16px;
|
||
--shadow-card:0 1px 3px rgba(28,28,24,.06),0 1px 2px rgba(28,28,24,.04);
|
||
--shadow-raised:0 4px 12px rgba(28,28,24,.08),0 2px 4px rgba(28,28,24,.04);
|
||
--shadow-overlay:0 8px 32px rgba(28,28,24,.12),0 2px 8px rgba(28,28,24,.06);
|
||
}
|
||
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
|
||
body{font-family:var(--font-sans);background:#DDDBD5;color:var(--color-text);font-size:14px;line-height:1.6;}
|
||
.doc{max-width:1200px;margin:0 auto;padding:48px 40px 120px;}
|
||
|
||
/* ── Doc header ── */
|
||
.doc-header{background:var(--color-page);border-radius:var(--radius-xl) var(--radius-xl) 0 0;padding:40px 40px 28px;margin:-48px -40px 48px;display:flex;justify-content:space-between;align-items:flex-end;border-bottom:1px solid var(--color-border);}
|
||
.doc-header h1{font-family:var(--font-display);font-size:26px;font-weight:500;letter-spacing:-.02em;margin-bottom:4px;}
|
||
.doc-header p{font-size:13px;color:var(--color-text-muted);}
|
||
.doc-meta{font-family:var(--font-mono);font-size:11px;color:var(--color-text-muted);text-align:right;line-height:1.9;}
|
||
.pill{display:inline-block;padding:2px 8px;border-radius:var(--radius-sm);font-size:10px;font-weight:500;letter-spacing:.05em;}
|
||
.pill-draft{background:var(--yellow-tint);color:var(--yellow-text);}
|
||
.pill-rec{background:var(--green-tint);color:var(--green-dark);}
|
||
|
||
/* ── Section ── */
|
||
.section{margin-bottom:72px;}
|
||
.section-label{font-size:10px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--color-text-muted);padding-bottom:10px;border-bottom:1px solid var(--color-border);margin-bottom:24px;}
|
||
.prose{font-size:13px;color:var(--color-text-muted);line-height:1.7;max-width:720px;margin-bottom:24px;}
|
||
|
||
/* ── Variation header ── */
|
||
.var-head{padding:20px 24px;border-radius:var(--radius-xl);margin-bottom:32px;display:flex;align-items:flex-start;gap:16px;}
|
||
.var-num{font-family:var(--font-display);font-size:48px;font-weight:300;line-height:1;opacity:.5;flex-shrink:0;}
|
||
.var-body{}
|
||
.var-id{font-size:10px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;margin-bottom:4px;}
|
||
.var-title{font-family:var(--font-display);font-size:20px;font-weight:500;letter-spacing:-.02em;margin-bottom:6px;}
|
||
.var-desc{font-size:13px;line-height:1.6;max-width:600px;}
|
||
.var-p{background:var(--purple-tint);border:1px solid var(--purple-light);}
|
||
.var-p .var-num,.var-p .var-id{color:var(--purple);}
|
||
.var-p .var-desc{color:var(--purple-dark);}
|
||
.var-g{background:var(--green-tint);border:1px solid var(--green-light);}
|
||
.var-g .var-num,.var-g .var-id{color:var(--green);}
|
||
.var-g .var-desc{color:var(--green-dark);}
|
||
.var-b{background:var(--blue-tint);border:1px solid var(--blue-light);}
|
||
.var-b .var-num,.var-b .var-id{color:var(--blue);}
|
||
.var-b .var-desc{color:var(--blue-dark);}
|
||
|
||
/* ── Device frames ── */
|
||
.previews{display:flex;gap:40px;flex-wrap:wrap;justify-content:center;align-items:flex-start;margin-bottom:28px;}
|
||
.prev-col{display:flex;flex-direction:column;align-items:center;gap:10px;}
|
||
.bp-lbl{font-family:var(--font-mono);font-size:10px;color:var(--color-text-muted);}
|
||
|
||
/* Phone */
|
||
.phone{width:320px;flex-shrink:0;background:var(--color-page);border-radius:36px;overflow:hidden;box-shadow:var(--shadow-overlay),0 0 0 1px rgba(0,0,0,.08);border:6px solid #1C1C18;}
|
||
.pst{padding:10px 20px 0;display:flex;justify-content:space-between;align-items:center;font-size:11px;background:var(--color-page);}
|
||
.pst b{font-weight:600;font-size:12px;}
|
||
.pst span{font-size:10px;}
|
||
.pb{overflow-y:auto;display:flex;flex-direction:column;}
|
||
|
||
/* Desktop */
|
||
.desk{width:100%;max-width:1040px;background:var(--color-page);border-radius:var(--radius-xl);overflow:hidden;box-shadow:var(--shadow-overlay),0 0 0 1px rgba(0,0,0,.06);display:flex;min-height:540px;}
|
||
|
||
/* ── Shared nav chrome ── */
|
||
/* Mobile top bar */
|
||
.mtb{padding:10px 16px;background:var(--color-page);border-bottom:1px solid var(--color-border);display:flex;align-items:center;gap:10px;}
|
||
.mtb-back{font-size:12px;color:var(--color-text-muted);display:flex;align-items:center;gap:4px;}
|
||
.mtb-t{font-family:var(--font-display);font-size:18px;font-weight:500;letter-spacing:-.02em;flex:1;}
|
||
/* Mobile bottom bar */
|
||
.mbt{border-top:1px solid var(--color-border);background:var(--color-surface);padding:8px 16px 28px;display:flex;justify-content:space-around;flex-shrink:0;}
|
||
.mt-i{display:flex;flex-direction:column;align-items:center;gap:2px;}
|
||
.mt-ic{width:20px;height:20px;border-radius:4px;background:var(--color-subtle);display:flex;align-items:center;justify-content:center;font-size:11px;}
|
||
.mt-i.a .mt-ic{background:var(--green-tint);}
|
||
.mt-l{font-size:9px;font-weight:500;color:var(--color-text-muted);}
|
||
.mt-i.a .mt-l{color:var(--green-dark);}
|
||
/* Desktop sidebar */
|
||
.dsb{width:224px;flex-shrink:0;background:var(--color-surface);border-right:1px solid var(--color-border);display:flex;flex-direction:column;}
|
||
.dsb-logo{padding:20px 16px 16px;border-bottom:1px solid var(--color-border);}
|
||
.dsb-lm{display:flex;align-items:center;gap:8px;margin-bottom:2px;}
|
||
.dsb-ic{width:24px;height:24px;border-radius:5px;background:var(--green);display:flex;align-items:center;justify-content:center;font-size:12px;}
|
||
.dsb-nm{font-family:var(--font-display);font-size:16px;font-weight:500;letter-spacing:-.02em;}
|
||
.dsb-sub{font-size:10px;color:var(--color-text-muted);padding-left:32px;}
|
||
.dsb-nav{padding:12px 10px;flex:1;}
|
||
.dsb-nl{font-size:8px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--color-text-muted);padding:0 8px;margin-bottom:4px;}
|
||
.dsb-ni{display:flex;align-items:center;gap:8px;padding:7px 8px;border-radius:var(--radius-md);font-size:13px;color:var(--color-text-muted);margin-bottom:2px;}
|
||
.dsb-ni.a{background:var(--green-tint);color:var(--green-dark);font-weight:500;}
|
||
.dsb-nc{font-size:13px;width:18px;text-align:center;}
|
||
/* Desktop main area */
|
||
.dm{flex:1;display:flex;flex-direction:column;min-width:0;}
|
||
.dtb{padding:14px 24px;border-bottom:1px solid var(--color-border);display:flex;justify-content:space-between;align-items:center;flex-shrink:0;}
|
||
.dtb-t{font-family:var(--font-display);font-size:18px;font-weight:500;letter-spacing:-.02em;}
|
||
.dtb-bc{font-size:12px;color:var(--color-text-muted);display:flex;align-items:center;gap:6px;margin-bottom:2px;}
|
||
.dtb-bc span{color:var(--color-border);}
|
||
.dmc{padding:24px;flex:1;overflow-y:auto;}
|
||
|
||
/* ── Shared UI components ── */
|
||
/* Toggle switch */
|
||
.tog{display:flex;align-items:center;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--color-subtle);}
|
||
.tog:last-child{border-bottom:none;}
|
||
.tog-l{display:flex;flex-direction:column;gap:2px;}
|
||
.tog-name{font-size:13px;font-weight:500;color:var(--color-text);}
|
||
.tog-hint{font-size:11px;color:var(--color-text-muted);line-height:1.4;}
|
||
.tog-sw{width:36px;height:20px;border-radius:10px;background:var(--green);flex-shrink:0;position:relative;}
|
||
.tog-sw::after{content:'';position:absolute;width:16px;height:16px;border-radius:50%;background:#fff;top:2px;right:2px;box-shadow:0 1px 3px rgba(0,0,0,.2);}
|
||
.tog-sw.off{background:var(--color-border);}
|
||
.tog-sw.off::after{right:auto;left:2px;}
|
||
|
||
/* Segmented control */
|
||
.seg{display:flex;border:1px solid var(--color-border);border-radius:var(--radius-md);overflow:hidden;background:var(--color-surface);}
|
||
.seg-o{flex:1;text-align:center;font-size:11px;font-weight:500;padding:6px 0;color:var(--color-text-muted);}
|
||
.seg-o.a{background:var(--color-page);color:var(--color-text);box-shadow:var(--shadow-card);}
|
||
.seg-o.a-g{background:var(--green-tint);color:var(--green-dark);}
|
||
.seg-o.a-r{background:var(--red-tint);color:var(--red-dark);}
|
||
.seg-o.a-y{background:var(--yellow-tint);color:var(--yellow-text);}
|
||
|
||
/* Section group */
|
||
.grp{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);overflow:hidden;margin-bottom:16px;}
|
||
.grp-hd{padding:10px 14px;border-bottom:1px solid var(--color-border);background:var(--color-subtle);}
|
||
.grp-hd-t{font-size:10px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--color-text-muted);}
|
||
.grp-hd-sub{font-size:11px;color:var(--color-text-muted);margin-top:1px;}
|
||
.grp-b{padding:0 14px;}
|
||
|
||
/* Weight row */
|
||
.wr{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--color-subtle);}
|
||
.wr:last-child{border-bottom:none;}
|
||
.wr-l{display:flex;flex-direction:column;gap:1px;min-width:0;}
|
||
.wr-name{font-size:12px;font-weight:500;color:var(--color-text);white-space:nowrap;}
|
||
.wr-sub{font-size:10px;color:var(--color-text-muted);}
|
||
.wr-ctrl{flex-shrink:0;}
|
||
|
||
/* Chip buttons */
|
||
.chips{display:flex;gap:8px;flex-wrap:wrap;}
|
||
.chip{padding:8px 16px;border-radius:var(--radius-lg);border:1.5px solid var(--color-border);background:var(--color-surface);font-size:13px;font-weight:500;color:var(--color-text-muted);cursor:default;}
|
||
.chip.sel{border-color:var(--green-light);background:var(--green-tint);color:var(--green-dark);}
|
||
.chip.big{padding:14px 20px;border-radius:var(--radius-xl);display:flex;flex-direction:column;gap:4px;flex:1;min-width:80px;}
|
||
.chip-em{font-size:20px;margin-bottom:2px;}
|
||
.chip-name{font-size:13px;font-weight:500;}
|
||
.chip-sub{font-size:10px;color:var(--color-text-muted);}
|
||
.chip.big.sel .chip-sub{color:var(--green-dark);}
|
||
|
||
/* Rule card (V3) */
|
||
.rc{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);overflow:hidden;margin-bottom:12px;}
|
||
.rc.off{opacity:.65;}
|
||
.rc-hd{padding:12px 14px;display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid var(--color-subtle);}
|
||
.rc-hd.no-body{border-bottom:none;}
|
||
.rc-hd-l{display:flex;align-items:center;gap:10px;}
|
||
.rc-em{font-size:18px;flex-shrink:0;}
|
||
.rc-name{font-size:13px;font-weight:500;color:var(--color-text);}
|
||
.rc-hint{font-size:10px;color:var(--color-text-muted);margin-top:1px;}
|
||
.rc-b{padding:10px 14px;}
|
||
.rc-example{font-family:var(--font-mono);font-size:10px;color:var(--color-text-muted);background:var(--color-subtle);border-radius:var(--radius-sm);padding:6px 8px;margin-bottom:8px;line-height:1.5;}
|
||
.rc-example .hit{color:var(--red-dark);}
|
||
.rc-example .ok{color:var(--green-dark);}
|
||
|
||
/* Score preview banner */
|
||
.score-preview{background:var(--color-text);color:#E8E8E2;border-radius:var(--radius-lg);padding:14px 16px;margin-bottom:16px;display:flex;align-items:center;justify-content:space-between;}
|
||
.score-preview-label{font-size:11px;color:#6B6A63;}
|
||
.score-preview-val{font-family:var(--font-display);font-size:28px;font-weight:300;letter-spacing:-.02em;color:#E8E8E2;}
|
||
.score-preview-sub{font-size:10px;color:#6B6A63;margin-top:2px;}
|
||
|
||
/* Summary pills */
|
||
.sum-pills{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px;}
|
||
.sum-pill{font-size:11px;font-weight:500;padding:4px 10px;border-radius:var(--radius-lg);display:flex;align-items:center;gap:4px;}
|
||
.sum-pill.on{background:var(--green-tint);color:var(--green-dark);}
|
||
.sum-pill.off{background:var(--color-subtle);color:var(--color-text-muted);}
|
||
.sum-pill.warn{background:var(--yellow-tint);color:var(--yellow-text);}
|
||
|
||
/* Accordion */
|
||
.acc{border:1px solid var(--color-border);border-radius:var(--radius-lg);overflow:hidden;margin-bottom:16px;}
|
||
.acc-hd{padding:12px 14px;display:flex;justify-content:space-between;align-items:center;background:var(--color-surface);cursor:default;}
|
||
.acc-hd-t{font-size:13px;font-weight:500;color:var(--color-text);}
|
||
.acc-hd-arr{font-size:11px;color:var(--color-text-muted);}
|
||
.acc-b{padding:14px;border-top:1px solid var(--color-border);background:var(--color-page);}
|
||
|
||
/* Reset link */
|
||
.reset-link{font-size:12px;color:var(--red-dark);text-align:center;padding:12px;display:block;}
|
||
|
||
/* Notes callout */
|
||
.notes{background:var(--purple-tint);border:1px solid var(--purple-light);border-radius:var(--radius-lg);padding:16px 20px;margin-top:20px;}
|
||
.notes-lbl{font-size:10px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--purple-dark);margin-bottom:8px;}
|
||
.notes ul{list-style:none;display:flex;flex-direction:column;gap:6px;}
|
||
.notes li{font-size:12px;color:var(--purple-dark);line-height:1.5;display:flex;align-items:flex-start;gap:8px;}
|
||
.notes li::before{content:'→';font-weight:500;flex-shrink:0;}
|
||
|
||
/* Divider */
|
||
.vdiv{margin:40px 0;border:none;border-top:1px solid var(--color-border);}
|
||
|
||
/* Scrollable hint */
|
||
.scroll-hint{font-family:var(--font-mono);font-size:10px;color:var(--color-text-muted);text-align:center;margin-bottom:8px;}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="doc">
|
||
|
||
<!-- ── Header ── -->
|
||
<div class="doc-header">
|
||
<div>
|
||
<h1>E4 — Vielfalt-Einstellungen</h1>
|
||
<p>Recipe App · 3 Mockup-Variationen · Atlas UI-Persona</p>
|
||
</div>
|
||
<div class="doc-meta">
|
||
<span class="pill pill-draft">Entwurf</span><br>
|
||
Erstellt: 2026-04<br>
|
||
Variationen: 3<br>
|
||
Journey: J9 · Screen E4
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<!-- ── Context ── -->
|
||
<div class="section">
|
||
<div class="section-label">Kontext</div>
|
||
<p class="prose">
|
||
E4 ist die neue Einstellungsseite für den Vielfalt-Algorithmus. Sie wird von E1 (Settings Hub) aus aufgerufen und ist nur für Planer zugänglich. Das Kernproblem: Die Standard-Konfiguration bestraft Protein-Wiederholungen, was für vegetarische Haushalte unfair ist — Tofu, Eier und Hülsenfrüchte wiederholen sich strukturell häufiger, weil die Auswahl geringer ist. Die drei Variationen zeigen unterschiedliche Ansätze zwischen "technisch präzise" und "kontext-geführt".
|
||
</p>
|
||
<p class="prose">
|
||
Alle Variationen zeigen sowohl die mobile Ansicht (320px) als auch die Desktop-Ansicht (Sidebar + Hauptbereich). Die Desktop-Ansicht nutzt den gleichen Sidebar-Layout wie E1 und E2.
|
||
</p>
|
||
</div>
|
||
|
||
|
||
<!-- ════════════════════════════════════════════
|
||
V1 — STRUKTURIERTE SEKTIONEN
|
||
═════════════════════════════════════════════ -->
|
||
<div class="section">
|
||
<div class="var-head var-p">
|
||
<div class="var-num">V1</div>
|
||
<div class="var-body">
|
||
<div class="var-id">Variation 1</div>
|
||
<div class="var-title">Strukturierte Sektionen</div>
|
||
<div class="var-desc">Klassisches Settings-Layout: zwei klare Sektionen (Typen-Toggles + Strafgewichte) mit beschrifteten Segmented-Controls. Kein Schnickschnack — der erfahrene Planer findet sofort alles. Geringer Entwicklungsaufwand, da alle Komponenten bereits im System vorhanden sind.</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="previews">
|
||
|
||
<!-- Mobile -->
|
||
<div class="prev-col">
|
||
<div class="bp-lbl">Mobile · 320px</div>
|
||
<div class="phone">
|
||
<div class="pst"><b>9:41</b><span>●●●</span></div>
|
||
<div class="pb">
|
||
<!-- Top bar with back -->
|
||
<div class="mtb">
|
||
<div class="mtb-back">← Einstellungen</div>
|
||
<div class="mtb-t">Vielfalt</div>
|
||
</div>
|
||
|
||
<div style="padding:16px;flex:1;overflow-y:auto;">
|
||
|
||
<!-- Section 1: Tag types -->
|
||
<div class="grp">
|
||
<div class="grp-hd">
|
||
<div class="grp-hd-t">Wiederholungs-Typen</div>
|
||
<div class="grp-hd-sub">Welche Tags lösen Warnungen aus?</div>
|
||
</div>
|
||
<div class="grp-b">
|
||
<div class="tog">
|
||
<div class="tog-l">
|
||
<div class="tog-name">Protein</div>
|
||
<div class="tog-hint">Tofu, Ei, Hülsenfrüchte …</div>
|
||
</div>
|
||
<div class="tog-sw off"></div>
|
||
</div>
|
||
<div class="tog">
|
||
<div class="tog-l">
|
||
<div class="tog-name">Küche</div>
|
||
<div class="tog-hint">Pasta, Asiatisch, Mexikanisch …</div>
|
||
</div>
|
||
<div class="tog-sw"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Section 2: Weights -->
|
||
<div class="grp">
|
||
<div class="grp-hd">
|
||
<div class="grp-hd-t">Strafgewichte</div>
|
||
<div class="grp-hd-sub">Wie stark wirkt sich jeder Verstoß aus?</div>
|
||
</div>
|
||
<div class="grp-b">
|
||
<div class="wr">
|
||
<div class="wr-l">
|
||
<div class="wr-name">Tag-Wiederholung</div>
|
||
<div class="wr-sub">Gleicher Typ an aufeinanderfolgenden Tagen</div>
|
||
</div>
|
||
<div class="wr-ctrl">
|
||
<div class="seg" style="width:120px">
|
||
<div class="seg-o">Niedrig</div>
|
||
<div class="seg-o a">Mittel</div>
|
||
<div class="seg-o">Hoch</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="wr">
|
||
<div class="wr-l">
|
||
<div class="wr-name">Zutaten-Überschneidung</div>
|
||
<div class="wr-sub">Gleiche Zutaten an aufeinanderfolgenden Tagen</div>
|
||
</div>
|
||
<div class="wr-ctrl">
|
||
<div class="seg" style="width:120px">
|
||
<div class="seg-o a-g">Niedrig</div>
|
||
<div class="seg-o">Mittel</div>
|
||
<div class="seg-o">Hoch</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="wr">
|
||
<div class="wr-l">
|
||
<div class="wr-name">Letzte Wochen</div>
|
||
<div class="wr-sub">Rezepte aus dem Kochverlauf</div>
|
||
</div>
|
||
<div class="wr-ctrl">
|
||
<div class="seg" style="width:120px">
|
||
<div class="seg-o">Niedrig</div>
|
||
<div class="seg-o a">Mittel</div>
|
||
<div class="seg-o">Hoch</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="wr">
|
||
<div class="wr-l">
|
||
<div class="wr-name">Doppelte Rezepte</div>
|
||
<div class="wr-sub">Gleiches Rezept mehrfach im Plan</div>
|
||
</div>
|
||
<div class="wr-ctrl">
|
||
<div class="seg" style="width:120px">
|
||
<div class="seg-o">Niedrig</div>
|
||
<div class="seg-o">Mittel</div>
|
||
<div class="seg-o a-r">Hoch</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="reset-link">Auf Standard zurücksetzen</div>
|
||
</div>
|
||
|
||
<!-- Bottom nav -->
|
||
<div class="mbt">
|
||
<div class="mt-i"><div class="mt-ic">📅</div><div class="mt-l">Plan</div></div>
|
||
<div class="mt-i"><div class="mt-ic">🛒</div><div class="mt-l">Einkauf</div></div>
|
||
<div class="mt-i"><div class="mt-ic">🍳</div><div class="mt-l">Rezepte</div></div>
|
||
<div class="mt-i a"><div class="mt-ic">⚙️</div><div class="mt-l">Einstellungen</div></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div><!-- /phone -->
|
||
|
||
<!-- Desktop -->
|
||
<div class="prev-col" style="flex:1;min-width:600px;">
|
||
<div class="bp-lbl">Desktop · 1040px</div>
|
||
<div class="desk">
|
||
<!-- Sidebar -->
|
||
<div class="dsb">
|
||
<div class="dsb-logo">
|
||
<div class="dsb-lm"><div class="dsb-ic">🥦</div><div class="dsb-nm">Mealprep</div></div>
|
||
<div class="dsb-sub">Familie Raddatz</div>
|
||
</div>
|
||
<div class="dsb-nav">
|
||
<div class="dsb-nl">Planung</div>
|
||
<div class="dsb-ni"><span class="dsb-nc">📅</span> Wochenplan</div>
|
||
<div class="dsb-ni"><span class="dsb-nc">🛒</span> Einkaufsliste</div>
|
||
<div class="dsb-ni"><span class="dsb-nc">🍳</span> Rezepte</div>
|
||
<div class="dsb-nl" style="margin-top:12px;">Haushalt</div>
|
||
<div class="dsb-ni a"><span class="dsb-nc">⚙️</span> Einstellungen</div>
|
||
</div>
|
||
</div>
|
||
<!-- Main -->
|
||
<div class="dm">
|
||
<div class="dtb">
|
||
<div>
|
||
<div class="dtb-bc">Einstellungen <span>›</span> Vielfalt-Einstellungen</div>
|
||
<div class="dtb-t">Vielfalt-Einstellungen</div>
|
||
</div>
|
||
</div>
|
||
<div class="dmc">
|
||
<div style="display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:720px;">
|
||
|
||
<!-- Col 1: Tag types -->
|
||
<div class="grp">
|
||
<div class="grp-hd">
|
||
<div class="grp-hd-t">Wiederholungs-Typen</div>
|
||
<div class="grp-hd-sub">Welche Tags lösen Warnungen aus?</div>
|
||
</div>
|
||
<div class="grp-b">
|
||
<div class="tog">
|
||
<div class="tog-l">
|
||
<div class="tog-name">Protein</div>
|
||
<div class="tog-hint">Tofu, Ei, Hülsenfrüchte, Fisch …</div>
|
||
</div>
|
||
<div class="tog-sw off"></div>
|
||
</div>
|
||
<div class="tog">
|
||
<div class="tog-l">
|
||
<div class="tog-name">Küche</div>
|
||
<div class="tog-hint">Pasta, Asiatisch, Mexikanisch …</div>
|
||
</div>
|
||
<div class="tog-sw"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Col 2: Explanation callout -->
|
||
<div style="background:var(--purple-tint);border:1px solid var(--purple-light);border-radius:var(--radius-lg);padding:14px 16px;">
|
||
<div style="font-size:10px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--purple-dark);margin-bottom:8px;">Tipp</div>
|
||
<div style="font-size:12px;color:var(--purple-dark);line-height:1.6;">Vegetarische Haushalte haben weniger Protein-Quellen zur Auswahl. <strong>Deaktiviere Protein</strong>, damit Tofu oder Eier an aufeinanderfolgenden Tagen die Vielfalt nicht reduzieren.</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<!-- Weights section -->
|
||
<div style="max-width:720px;margin-top:0;">
|
||
<div class="grp">
|
||
<div class="grp-hd">
|
||
<div class="grp-hd-t">Strafgewichte</div>
|
||
<div class="grp-hd-sub">Wie stark wirkt sich jeder Verstoß auf die Punktzahl aus?</div>
|
||
</div>
|
||
<div class="grp-b">
|
||
<div class="wr">
|
||
<div class="wr-l">
|
||
<div class="wr-name">Tag-Wiederholung</div>
|
||
<div class="wr-sub">Gleicher Typ (z.B. Küche) an aufeinanderfolgenden Tagen</div>
|
||
</div>
|
||
<div class="seg" style="width:180px">
|
||
<div class="seg-o">Niedrig</div>
|
||
<div class="seg-o a">Mittel</div>
|
||
<div class="seg-o">Hoch</div>
|
||
</div>
|
||
</div>
|
||
<div class="wr">
|
||
<div class="wr-l">
|
||
<div class="wr-name">Zutaten-Überschneidung</div>
|
||
<div class="wr-sub">Gleiche Zutaten an aufeinanderfolgenden Tagen</div>
|
||
</div>
|
||
<div class="seg" style="width:180px">
|
||
<div class="seg-o a-g">Niedrig</div>
|
||
<div class="seg-o">Mittel</div>
|
||
<div class="seg-o">Hoch</div>
|
||
</div>
|
||
</div>
|
||
<div class="wr">
|
||
<div class="wr-l">
|
||
<div class="wr-name">Letzte Wochen</div>
|
||
<div class="wr-sub">Rezepte aus den letzten 14 Tagen Kochverlauf</div>
|
||
</div>
|
||
<div class="seg" style="width:180px">
|
||
<div class="seg-o">Niedrig</div>
|
||
<div class="seg-o a">Mittel</div>
|
||
<div class="seg-o">Hoch</div>
|
||
</div>
|
||
</div>
|
||
<div class="wr">
|
||
<div class="wr-l">
|
||
<div class="wr-name">Doppelte Rezepte</div>
|
||
<div class="wr-sub">Gleiches Rezept mehrfach im Wochenplan</div>
|
||
</div>
|
||
<div class="seg" style="width:180px">
|
||
<div class="seg-o">Niedrig</div>
|
||
<div class="seg-o">Mittel</div>
|
||
<div class="seg-o a-r">Hoch</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="reset-link" style="text-align:left;padding:4px 0;">Auf Standard zurücksetzen</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div><!-- /desktop -->
|
||
|
||
</div><!-- /previews -->
|
||
|
||
<div class="notes">
|
||
<div class="notes-lbl">Design-Notizen V1</div>
|
||
<ul>
|
||
<li>Alle Komponenten (Toggle, Segmented Control, Grp-Block) sind bereits im Design-System vorhanden — minimaler Entwicklungsaufwand.</li>
|
||
<li>Desktop: 2-Spalten-Grid oben (Typen + Tipp-Karte) gibt dem Tipp-Text Raum ohne die Seite zu verlängern.</li>
|
||
<li>Protein-Toggle ist standardmäßig auf "Aus" gesetzt im Mockup — zeigt den empfohlenen Zustand für vegetarische Haushalte.</li>
|
||
<li>Schwachstelle: Keine direkte Verbindung zwischen den Einstellungen und der Score-Auswirkung sichtbar — der Planer muss selbst zurück zu C3 navigieren, um den Effekt zu sehen.</li>
|
||
<li>Auto-Save bei jeder Interaktion; kein Speichern-Button. "Auf Standard zurücksetzen" öffnet einen Bestätigungsdialog.</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<hr class="vdiv"/>
|
||
|
||
|
||
<!-- ════════════════════════════════════════════
|
||
V2 — KONTEXT-PRESET
|
||
═════════════════════════════════════════════ -->
|
||
<div class="section">
|
||
<div class="var-head var-g">
|
||
<div class="var-num">V2</div>
|
||
<div class="var-body">
|
||
<div class="var-id">Variation 2 · Empfohlen</div>
|
||
<div class="var-title">Kontext-Preset + Feineinstellungen</div>
|
||
<div class="var-desc">Der Planer wählt zuerst den Haushaltskontext (Omnivor / Vegetarisch / Vegan). Das setzt alle Einstellungen automatisch auf sinnvolle Werte — kein Nachdenken über Gewichte nötig. Für fortgeschrittene Anpassungen gibt es ein ausklappbares "Erweiterte Einstellungen"-Panel. Zeigt auch live, wie der Score des aktuellen Plans mit den neuen Einstellungen aussehen würde.</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="previews">
|
||
|
||
<!-- Mobile -->
|
||
<div class="prev-col">
|
||
<div class="bp-lbl">Mobile · 320px</div>
|
||
<div class="phone">
|
||
<div class="pst"><b>9:41</b><span>●●●</span></div>
|
||
<div class="pb">
|
||
<div class="mtb">
|
||
<div class="mtb-back">← Einstellungen</div>
|
||
<div class="mtb-t">Vielfalt</div>
|
||
</div>
|
||
|
||
<div style="padding:16px;flex:1;overflow-y:auto;">
|
||
|
||
<!-- Score preview -->
|
||
<div class="score-preview">
|
||
<div>
|
||
<div class="score-preview-label">Mit diesen Einstellungen</div>
|
||
<div class="score-preview-val">8.2</div>
|
||
<div class="score-preview-sub">vorher 5.8 / 10</div>
|
||
</div>
|
||
<div style="font-size:28px;">📈</div>
|
||
</div>
|
||
|
||
<!-- Context chips -->
|
||
<div style="font-size:11px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--color-text-muted);margin-bottom:10px;">Haushaltskontext</div>
|
||
<div class="chips" style="margin-bottom:16px;">
|
||
<div class="chip big">
|
||
<div class="chip-em">🥩</div>
|
||
<div class="chip-name">Omnivor</div>
|
||
<div class="chip-sub">Alle Tags aktiv</div>
|
||
</div>
|
||
<div class="chip big sel">
|
||
<div class="chip-em">🥦</div>
|
||
<div class="chip-name">Vegetarisch</div>
|
||
<div class="chip-sub">Protein deaktiviert</div>
|
||
</div>
|
||
<div class="chip big">
|
||
<div class="chip-em">🌱</div>
|
||
<div class="chip-name">Vegan</div>
|
||
<div class="chip-sub">Protein deaktiviert</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Summary pills -->
|
||
<div style="font-size:11px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--color-text-muted);margin-bottom:8px;">Aktive Einstellungen</div>
|
||
<div class="sum-pills">
|
||
<div class="sum-pill off">Protein: Aus</div>
|
||
<div class="sum-pill on">Küche: An</div>
|
||
<div class="sum-pill on">Zutaten: Mittel</div>
|
||
<div class="sum-pill on">Duplikate: Hoch</div>
|
||
</div>
|
||
|
||
<!-- Advanced accordion -->
|
||
<div class="acc">
|
||
<div class="acc-hd">
|
||
<div class="acc-hd-t">Erweiterte Einstellungen</div>
|
||
<div class="acc-hd-arr">▾</div>
|
||
</div>
|
||
<div class="acc-b">
|
||
<div class="wr">
|
||
<div class="wr-l">
|
||
<div class="wr-name">Küche</div>
|
||
<div class="wr-sub">Küchen-Wiederholungen</div>
|
||
</div>
|
||
<div class="seg" style="width:120px">
|
||
<div class="seg-o">Niedrig</div>
|
||
<div class="seg-o a">Mittel</div>
|
||
<div class="seg-o">Hoch</div>
|
||
</div>
|
||
</div>
|
||
<div class="wr">
|
||
<div class="wr-l">
|
||
<div class="wr-name">Zutaten</div>
|
||
<div class="wr-sub">Überschneidungen</div>
|
||
</div>
|
||
<div class="seg" style="width:120px">
|
||
<div class="seg-o a-g">Niedrig</div>
|
||
<div class="seg-o">Mittel</div>
|
||
<div class="seg-o">Hoch</div>
|
||
</div>
|
||
</div>
|
||
<div class="wr">
|
||
<div class="wr-l">
|
||
<div class="wr-name">Duplikate</div>
|
||
<div class="wr-sub">Gleiches Rezept im Plan</div>
|
||
</div>
|
||
<div class="seg" style="width:120px">
|
||
<div class="seg-o">Niedrig</div>
|
||
<div class="seg-o">Mittel</div>
|
||
<div class="seg-o a-r">Hoch</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="reset-link">Auf Standard zurücksetzen</div>
|
||
</div>
|
||
|
||
<div class="mbt">
|
||
<div class="mt-i"><div class="mt-ic">📅</div><div class="mt-l">Plan</div></div>
|
||
<div class="mt-i"><div class="mt-ic">🛒</div><div class="mt-l">Einkauf</div></div>
|
||
<div class="mt-i"><div class="mt-ic">🍳</div><div class="mt-l">Rezepte</div></div>
|
||
<div class="mt-i a"><div class="mt-ic">⚙️</div><div class="mt-l">Einstellungen</div></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div><!-- /phone -->
|
||
|
||
<!-- Desktop -->
|
||
<div class="prev-col" style="flex:1;min-width:600px;">
|
||
<div class="bp-lbl">Desktop · 1040px</div>
|
||
<div class="desk">
|
||
<div class="dsb">
|
||
<div class="dsb-logo">
|
||
<div class="dsb-lm"><div class="dsb-ic">🥦</div><div class="dsb-nm">Mealprep</div></div>
|
||
<div class="dsb-sub">Familie Raddatz</div>
|
||
</div>
|
||
<div class="dsb-nav">
|
||
<div class="dsb-nl">Planung</div>
|
||
<div class="dsb-ni"><span class="dsb-nc">📅</span> Wochenplan</div>
|
||
<div class="dsb-ni"><span class="dsb-nc">🛒</span> Einkaufsliste</div>
|
||
<div class="dsb-ni"><span class="dsb-nc">🍳</span> Rezepte</div>
|
||
<div class="dsb-nl" style="margin-top:12px;">Haushalt</div>
|
||
<div class="dsb-ni a"><span class="dsb-nc">⚙️</span> Einstellungen</div>
|
||
</div>
|
||
</div>
|
||
<div class="dm">
|
||
<div class="dtb">
|
||
<div>
|
||
<div class="dtb-bc">Einstellungen <span>›</span> Vielfalt-Einstellungen</div>
|
||
<div class="dtb-t">Vielfalt-Einstellungen</div>
|
||
</div>
|
||
</div>
|
||
<div class="dmc">
|
||
<div style="display:grid;grid-template-columns:1fr 340px;gap:20px;max-width:840px;">
|
||
|
||
<!-- Left: presets + accordion -->
|
||
<div>
|
||
<div style="font-size:11px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--color-text-muted);margin-bottom:10px;">Haushaltskontext</div>
|
||
<div class="chips" style="margin-bottom:20px;">
|
||
<div class="chip big">
|
||
<div class="chip-em">🥩</div>
|
||
<div class="chip-name">Omnivor</div>
|
||
<div class="chip-sub">Alle Tags aktiv</div>
|
||
</div>
|
||
<div class="chip big sel">
|
||
<div class="chip-em">🥦</div>
|
||
<div class="chip-name">Vegetarisch</div>
|
||
<div class="chip-sub">Protein deaktiviert</div>
|
||
</div>
|
||
<div class="chip big">
|
||
<div class="chip-em">🌱</div>
|
||
<div class="chip-name">Vegan</div>
|
||
<div class="chip-sub">Protein deaktiviert</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="acc">
|
||
<div class="acc-hd">
|
||
<div class="acc-hd-t">Erweiterte Einstellungen</div>
|
||
<div class="acc-hd-arr">▾</div>
|
||
</div>
|
||
<div class="acc-b">
|
||
<div class="wr">
|
||
<div class="wr-l">
|
||
<div class="wr-name">Küche-Wiederholungen</div>
|
||
<div class="wr-sub">Gleiche Küche an aufeinanderfolgenden Tagen</div>
|
||
</div>
|
||
<div class="seg" style="width:160px">
|
||
<div class="seg-o">Niedrig</div>
|
||
<div class="seg-o a">Mittel</div>
|
||
<div class="seg-o">Hoch</div>
|
||
</div>
|
||
</div>
|
||
<div class="wr">
|
||
<div class="wr-l">
|
||
<div class="wr-name">Zutaten-Überschneidung</div>
|
||
<div class="wr-sub">Gleiche Zutaten an aufeinanderfolgenden Tagen</div>
|
||
</div>
|
||
<div class="seg" style="width:160px">
|
||
<div class="seg-o a-g">Niedrig</div>
|
||
<div class="seg-o">Mittel</div>
|
||
<div class="seg-o">Hoch</div>
|
||
</div>
|
||
</div>
|
||
<div class="wr">
|
||
<div class="wr-l">
|
||
<div class="wr-name">Letzte Wochen</div>
|
||
<div class="wr-sub">Kochverlauf der letzten 14 Tage</div>
|
||
</div>
|
||
<div class="seg" style="width:160px">
|
||
<div class="seg-o">Niedrig</div>
|
||
<div class="seg-o a">Mittel</div>
|
||
<div class="seg-o">Hoch</div>
|
||
</div>
|
||
</div>
|
||
<div class="wr">
|
||
<div class="wr-l">
|
||
<div class="wr-name">Doppelte Rezepte</div>
|
||
<div class="wr-sub">Gleiches Rezept mehrfach im Plan</div>
|
||
</div>
|
||
<div class="seg" style="width:160px">
|
||
<div class="seg-o">Niedrig</div>
|
||
<div class="seg-o">Mittel</div>
|
||
<div class="seg-o a-r">Hoch</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="reset-link" style="text-align:left;padding:4px 0;">Auf Standard zurücksetzen</div>
|
||
</div>
|
||
|
||
<!-- Right: score preview + active summary -->
|
||
<div>
|
||
<div class="score-preview">
|
||
<div>
|
||
<div class="score-preview-label">Mit diesen Einstellungen</div>
|
||
<div class="score-preview-val">8.2 <span style="font-size:14px;opacity:.6;">/ 10</span></div>
|
||
<div class="score-preview-sub">vorher 5.8 — +2.4 Punkte</div>
|
||
</div>
|
||
<div style="font-size:32px;opacity:.8;">📈</div>
|
||
</div>
|
||
|
||
<div style="font-size:11px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--color-text-muted);margin-bottom:8px;">Aktive Regeln</div>
|
||
<div class="sum-pills" style="flex-direction:column;gap:6px;">
|
||
<div class="sum-pill off" style="justify-content:space-between;">
|
||
<span>Protein-Wiederholung</span>
|
||
<span>Deaktiviert</span>
|
||
</div>
|
||
<div class="sum-pill on" style="justify-content:space-between;">
|
||
<span>Küchen-Vielfalt</span>
|
||
<span>Mittel</span>
|
||
</div>
|
||
<div class="sum-pill on" style="justify-content:space-between;">
|
||
<span>Zutaten-Überschneidung</span>
|
||
<span>Niedrig</span>
|
||
</div>
|
||
<div class="sum-pill on" style="justify-content:space-between;">
|
||
<span>Letzte Wochen</span>
|
||
<span>Mittel</span>
|
||
</div>
|
||
<div class="sum-pill warn" style="justify-content:space-between;">
|
||
<span>Doppelte Rezepte</span>
|
||
<span>Hoch</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div><!-- /desktop -->
|
||
|
||
</div><!-- /previews -->
|
||
|
||
<div class="notes">
|
||
<div class="notes-lbl">Design-Notizen V2</div>
|
||
<ul>
|
||
<li>Der Score-Preview-Banner ist das stärkste Feature von V2: der Planer sieht sofort, welchen Effekt die Einstellungen auf seinen aktuellen Plan haben — ohne zu C3 navigieren zu müssen. Der Server berechnet die Simulation mit den noch nicht gespeicherten Einstellungen.</li>
|
||
<li>Die drei Kontext-Chips (Omnivor / Vegetarisch / Vegan) sind der primäre Interaktionspunkt. Die meisten Planer müssen keine "Erweiterten Einstellungen" anfassen.</li>
|
||
<li>Technische Umsetzung des Score-Previews: Endpoint-Simulation mit temporären Gewichten (nicht persistent), ähnlich wie die bestehende <code>/v1/week-plans/{id}/variety-score?simulate=true</code>-Logik.</li>
|
||
<li>Erweiterungsidee: Ein vierter Chip "Individuell" erscheint automatisch, sobald der Planer die erweiterten Einstellungen manuell verändert hat.</li>
|
||
<li>Schwachstelle: Der Score-Preview benötigt einen separaten Backend-Aufruf. Wenn kein aktueller Plan existiert, sollte ein sinnvoller Fallback angezeigt werden ("Kein Plan für diese Woche").</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<hr class="vdiv"/>
|
||
|
||
|
||
<!-- ════════════════════════════════════════════
|
||
V3 — REGELKARTEN
|
||
═════════════════════════════════════════════ -->
|
||
<div class="section">
|
||
<div class="var-head var-b">
|
||
<div class="var-num">V3</div>
|
||
<div class="var-body">
|
||
<div class="var-id">Variation 3</div>
|
||
<div class="var-title">Regelkarten mit Beispielen</div>
|
||
<div class="var-desc">Jede Bewertungsregel bekommt eine eigene Karte mit konkretem Beispiel, das zeigt, was genau bestraft wird. Der Planer versteht sofort, warum eine Regel relevant (oder irrelevant) ist. Deaktivierte Karten werden ausgegraut — der Planer sieht auf einen Blick, welche Regeln aktiv sind.</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="previews">
|
||
|
||
<!-- Mobile -->
|
||
<div class="prev-col">
|
||
<div class="bp-lbl">Mobile · 320px</div>
|
||
<div class="phone">
|
||
<div class="pst"><b>9:41</b><span>●●●</span></div>
|
||
<div class="pb">
|
||
<div class="mtb">
|
||
<div class="mtb-back">← Einstellungen</div>
|
||
<div class="mtb-t">Vielfalt</div>
|
||
</div>
|
||
|
||
<div style="padding:16px;flex:1;overflow-y:auto;">
|
||
|
||
<!-- Rule card: Protein (disabled) -->
|
||
<div class="rc off">
|
||
<div class="rc-hd no-body" style="border-bottom:none;">
|
||
<div class="rc-hd-l">
|
||
<div class="rc-em">🥚</div>
|
||
<div>
|
||
<div class="rc-name">Protein-Wiederholung</div>
|
||
<div class="rc-hint">Gleiche Protein-Quelle an aufeinanderfolgenden Tagen</div>
|
||
</div>
|
||
</div>
|
||
<div class="tog-sw off"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Rule card: Cuisine (enabled) -->
|
||
<div class="rc">
|
||
<div class="rc-hd">
|
||
<div class="rc-hd-l">
|
||
<div class="rc-em">🍝</div>
|
||
<div>
|
||
<div class="rc-name">Küchen-Vielfalt</div>
|
||
<div class="rc-hint">Gleiche Küche an aufeinanderfolgenden Tagen</div>
|
||
</div>
|
||
</div>
|
||
<div class="tog-sw"></div>
|
||
</div>
|
||
<div class="rc-b">
|
||
<div class="rc-example">Pasta Mo · <span class="hit">Pasta Di</span> → −1.5 Pkt</div>
|
||
<div class="seg">
|
||
<div class="seg-o">Niedrig</div>
|
||
<div class="seg-o a">Mittel</div>
|
||
<div class="seg-o">Hoch</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Rule card: Ingredients (enabled) -->
|
||
<div class="rc">
|
||
<div class="rc-hd">
|
||
<div class="rc-hd-l">
|
||
<div class="rc-em">🫑</div>
|
||
<div>
|
||
<div class="rc-name">Zutaten-Überschneidung</div>
|
||
<div class="rc-hint">Gleiche Zutat an aufeinanderfolgenden Tagen</div>
|
||
</div>
|
||
</div>
|
||
<div class="tog-sw"></div>
|
||
</div>
|
||
<div class="rc-b">
|
||
<div class="rc-example">Paprika Mo · <span class="hit">Paprika Di</span> → −0.3 Pkt</div>
|
||
<div class="seg">
|
||
<div class="seg-o a-g">Niedrig</div>
|
||
<div class="seg-o">Mittel</div>
|
||
<div class="seg-o">Hoch</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Rule card: Duplicates (enabled, high) -->
|
||
<div class="rc">
|
||
<div class="rc-hd">
|
||
<div class="rc-hd-l">
|
||
<div class="rc-em">📋</div>
|
||
<div>
|
||
<div class="rc-name">Doppelte Rezepte</div>
|
||
<div class="rc-hint">Gleiches Rezept mehrfach im Wochenplan</div>
|
||
</div>
|
||
</div>
|
||
<div class="tog-sw"></div>
|
||
</div>
|
||
<div class="rc-b">
|
||
<div class="rc-example">Pasta Bolognese 2× → <span class="hit">−2.0 Pkt</span></div>
|
||
<div class="seg">
|
||
<div class="seg-o">Niedrig</div>
|
||
<div class="seg-o">Mittel</div>
|
||
<div class="seg-o a-r">Hoch</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Rule card: Recent history (enabled) -->
|
||
<div class="rc">
|
||
<div class="rc-hd">
|
||
<div class="rc-hd-l">
|
||
<div class="rc-em">📅</div>
|
||
<div>
|
||
<div class="rc-name">Letzte Wochen</div>
|
||
<div class="rc-hint">Rezepte der letzten 14 Tage im Plan</div>
|
||
</div>
|
||
</div>
|
||
<div class="tog-sw"></div>
|
||
</div>
|
||
<div class="rc-b">
|
||
<div class="rc-example">Chili letzte Woche · <span class="hit">Chili diese Woche</span> → −1.0 Pkt</div>
|
||
<div class="seg">
|
||
<div class="seg-o">Niedrig</div>
|
||
<div class="seg-o a">Mittel</div>
|
||
<div class="seg-o">Hoch</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="reset-link">Auf Standard zurücksetzen</div>
|
||
</div>
|
||
|
||
<div class="mbt">
|
||
<div class="mt-i"><div class="mt-ic">📅</div><div class="mt-l">Plan</div></div>
|
||
<div class="mt-i"><div class="mt-ic">🛒</div><div class="mt-l">Einkauf</div></div>
|
||
<div class="mt-i"><div class="mt-ic">🍳</div><div class="mt-l">Rezepte</div></div>
|
||
<div class="mt-i a"><div class="mt-ic">⚙️</div><div class="mt-l">Einstellungen</div></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div><!-- /phone -->
|
||
|
||
<!-- Desktop -->
|
||
<div class="prev-col" style="flex:1;min-width:600px;">
|
||
<div class="bp-lbl">Desktop · 1040px</div>
|
||
<div class="desk">
|
||
<div class="dsb">
|
||
<div class="dsb-logo">
|
||
<div class="dsb-lm"><div class="dsb-ic">🥦</div><div class="dsb-nm">Mealprep</div></div>
|
||
<div class="dsb-sub">Familie Raddatz</div>
|
||
</div>
|
||
<div class="dsb-nav">
|
||
<div class="dsb-nl">Planung</div>
|
||
<div class="dsb-ni"><span class="dsb-nc">📅</span> Wochenplan</div>
|
||
<div class="dsb-ni"><span class="dsb-nc">🛒</span> Einkaufsliste</div>
|
||
<div class="dsb-ni"><span class="dsb-nc">🍳</span> Rezepte</div>
|
||
<div class="dsb-nl" style="margin-top:12px;">Haushalt</div>
|
||
<div class="dsb-ni a"><span class="dsb-nc">⚙️</span> Einstellungen</div>
|
||
</div>
|
||
</div>
|
||
<div class="dm">
|
||
<div class="dtb">
|
||
<div>
|
||
<div class="dtb-bc">Einstellungen <span>›</span> Vielfalt-Einstellungen</div>
|
||
<div class="dtb-t">Vielfalt-Einstellungen</div>
|
||
</div>
|
||
</div>
|
||
<div class="dmc">
|
||
<!-- 2-column rule card grid on desktop -->
|
||
<div style="display:grid;grid-template-columns:1fr 1fr;gap:12px;max-width:760px;">
|
||
|
||
<!-- Protein (disabled) -->
|
||
<div class="rc off">
|
||
<div class="rc-hd no-body">
|
||
<div class="rc-hd-l">
|
||
<div class="rc-em">🥚</div>
|
||
<div>
|
||
<div class="rc-name">Protein-Wiederholung</div>
|
||
<div class="rc-hint">Gleiche Protein-Quelle an aufeinanderfolgenden Tagen · <em>Deaktiviert</em></div>
|
||
</div>
|
||
</div>
|
||
<div class="tog-sw off" style="flex-shrink:0;"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Cuisine (enabled) -->
|
||
<div class="rc">
|
||
<div class="rc-hd">
|
||
<div class="rc-hd-l">
|
||
<div class="rc-em">🍝</div>
|
||
<div>
|
||
<div class="rc-name">Küchen-Vielfalt</div>
|
||
<div class="rc-hint">Gleiche Küche an aufeinanderfolgenden Tagen</div>
|
||
</div>
|
||
</div>
|
||
<div class="tog-sw" style="flex-shrink:0;"></div>
|
||
</div>
|
||
<div class="rc-b">
|
||
<div class="rc-example">Pasta Mo · <span class="hit">Pasta Di</span> → −1.5 Pkt</div>
|
||
<div class="seg"><div class="seg-o">Niedrig</div><div class="seg-o a">Mittel</div><div class="seg-o">Hoch</div></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Ingredients (enabled) -->
|
||
<div class="rc">
|
||
<div class="rc-hd">
|
||
<div class="rc-hd-l">
|
||
<div class="rc-em">🫑</div>
|
||
<div>
|
||
<div class="rc-name">Zutaten-Überschneidung</div>
|
||
<div class="rc-hint">Gleiche Zutat an aufeinanderfolgenden Tagen</div>
|
||
</div>
|
||
</div>
|
||
<div class="tog-sw" style="flex-shrink:0;"></div>
|
||
</div>
|
||
<div class="rc-b">
|
||
<div class="rc-example">Paprika Mo · <span class="hit">Paprika Di</span> → −0.3 Pkt</div>
|
||
<div class="seg"><div class="seg-o a-g">Niedrig</div><div class="seg-o">Mittel</div><div class="seg-o">Hoch</div></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Duplicates (enabled, high) -->
|
||
<div class="rc">
|
||
<div class="rc-hd">
|
||
<div class="rc-hd-l">
|
||
<div class="rc-em">📋</div>
|
||
<div>
|
||
<div class="rc-name">Doppelte Rezepte</div>
|
||
<div class="rc-hint">Gleiches Rezept mehrfach im Wochenplan</div>
|
||
</div>
|
||
</div>
|
||
<div class="tog-sw" style="flex-shrink:0;"></div>
|
||
</div>
|
||
<div class="rc-b">
|
||
<div class="rc-example">Pasta Bolognese 2× → <span class="hit">−2.0 Pkt</span></div>
|
||
<div class="seg"><div class="seg-o">Niedrig</div><div class="seg-o">Mittel</div><div class="seg-o a-r">Hoch</div></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Recent history (enabled) -->
|
||
<div class="rc">
|
||
<div class="rc-hd">
|
||
<div class="rc-hd-l">
|
||
<div class="rc-em">📅</div>
|
||
<div>
|
||
<div class="rc-name">Letzte Wochen</div>
|
||
<div class="rc-hint">Rezepte der letzten 14 Tage im aktuellen Plan</div>
|
||
</div>
|
||
</div>
|
||
<div class="tog-sw" style="flex-shrink:0;"></div>
|
||
</div>
|
||
<div class="rc-b">
|
||
<div class="rc-example">Chili letzte Woche · <span class="hit">Chili diese Woche</span> → −1.0 Pkt</div>
|
||
<div class="seg"><div class="seg-o">Niedrig</div><div class="seg-o a">Mittel</div><div class="seg-o">Hoch</div></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Empty 6th cell: reset -->
|
||
<div style="display:flex;align-items:flex-end;padding-bottom:4px;">
|
||
<div class="reset-link" style="text-align:left;padding:0;">Auf Standard zurücksetzen</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div><!-- /desktop -->
|
||
|
||
</div><!-- /previews -->
|
||
|
||
<div class="notes">
|
||
<div class="notes-lbl">Design-Notizen V3</div>
|
||
<ul>
|
||
<li>Das Mono-Code-Beispiel in jeder Karte ("Pasta Mo · Pasta Di → −1.5 Pkt") macht das Algorithmus-Verhalten greifbar — der Planer muss keine Doku lesen, um zu verstehen, was eine Regel tut.</li>
|
||
<li>Deaktivierte Karten werden auf 65% Opacity ausgegraut und zeigen kein Gewicht-Control — weniger visuelles Rauschen, klarer Status auf einen Blick.</li>
|
||
<li>Desktop 2-Spalten-Grid funktioniert gut bis 5 Regeln. Wenn künftig weitere Regel-Typen hinzukommen, bleibt die Struktur skalierbar ohne Layout-Änderung.</li>
|
||
<li>Schwachstelle: Kein Score-Preview (anders als V2). Die Auswirkungen werden erst klar, wenn der Planer zu C3 navigiert. Könnte mit einem Banner unter dem Grid ergänzt werden.</li>
|
||
<li>Schwachstelle für mobile: 5 Karten nacheinander ergeben eine sehr lange Seite. Erwägen, deaktivierte Karten ganz an das Ende zu schieben.</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<!-- ── Vergleich ── -->
|
||
<div class="section">
|
||
<div class="section-label">Variationsvergleich</div>
|
||
<table style="width:100%;border-collapse:collapse;font-size:13px;background:var(--color-surface);border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--color-border);">
|
||
<thead>
|
||
<tr style="background:var(--color-subtle);border-bottom:1px solid var(--color-border);">
|
||
<th style="text-align:left;padding:10px 16px;font-size:10px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--color-text-muted);">Kriterium</th>
|
||
<th style="text-align:left;padding:10px 16px;font-size:10px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--purple-dark);">V1 Sektionen</th>
|
||
<th style="text-align:left;padding:10px 16px;font-size:10px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--green-dark);">V2 Preset ★</th>
|
||
<th style="text-align:left;padding:10px 16px;font-size:10px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--blue-dark);">V3 Regelkarten</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr style="border-bottom:1px solid var(--color-subtle);">
|
||
<td style="padding:10px 16px;font-weight:500;">Lernkurve</td>
|
||
<td style="padding:10px 16px;color:var(--color-text-muted);">Mittel — vertraut für Settings-erfahrene</td>
|
||
<td style="padding:10px 16px;color:var(--color-text-muted);">Niedrig — drei Chips, alles erledigt</td>
|
||
<td style="padding:10px 16px;color:var(--color-text-muted);">Niedrig — jede Regel erklärt sich selbst</td>
|
||
</tr>
|
||
<tr style="border-bottom:1px solid var(--color-subtle);">
|
||
<td style="padding:10px 16px;font-weight:500;">Direkte Score-Auswirkung</td>
|
||
<td style="padding:10px 16px;color:var(--color-text-muted);">Nicht sichtbar</td>
|
||
<td style="padding:10px 16px;color:var(--green-dark);font-weight:500;">Live-Preview ✓</td>
|
||
<td style="padding:10px 16px;color:var(--color-text-muted);">Nicht sichtbar</td>
|
||
</tr>
|
||
<tr style="border-bottom:1px solid var(--color-subtle);">
|
||
<td style="padding:10px 16px;font-weight:500;">Entwicklungsaufwand</td>
|
||
<td style="padding:10px 16px;color:var(--green-dark);">Niedrig</td>
|
||
<td style="padding:10px 16px;color:var(--color-text-muted);">Mittel (+Simulation-Endpoint)</td>
|
||
<td style="padding:10px 16px;color:var(--color-text-muted);">Mittel</td>
|
||
</tr>
|
||
<tr style="border-bottom:1px solid var(--color-subtle);">
|
||
<td style="padding:10px 16px;font-weight:500;">Erklärungswert</td>
|
||
<td style="padding:10px 16px;color:var(--color-text-muted);">Gering (nur Label)</td>
|
||
<td style="padding:10px 16px;color:var(--color-text-muted);">Mittel (Kontext-Beschreibung)</td>
|
||
<td style="padding:10px 16px;color:var(--green-dark);font-weight:500;">Hoch (Beispiele) ✓</td>
|
||
</tr>
|
||
<tr style="border-bottom:1px solid var(--color-subtle);">
|
||
<td style="padding:10px 16px;font-weight:500;">Skalierbarkeit</td>
|
||
<td style="padding:10px 16px;color:var(--color-text-muted);">Gut — neue Zeile in Tabelle</td>
|
||
<td style="padding:10px 16px;color:var(--color-text-muted);">Mittel — neue Presets brauchen Überlegung</td>
|
||
<td style="padding:10px 16px;color:var(--green-dark);font-weight:500;">Gut — neue Karte im Grid ✓</td>
|
||
</tr>
|
||
<tr>
|
||
<td style="padding:10px 16px;font-weight:500;">Empfehlung</td>
|
||
<td style="padding:10px 16px;color:var(--color-text-muted);">Wenn schnelle Lieferung Prio</td>
|
||
<td style="padding:10px 16px;color:var(--green-dark);font-weight:500;">Empfohlen für v1 ★</td>
|
||
<td style="padding:10px 16px;color:var(--color-text-muted);">Gut als v2-Iteration auf V2</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
|
||
<div class="notes" style="margin-top:20px;background:var(--green-tint);border-color:var(--green-light);">
|
||
<div class="notes-lbl" style="color:var(--green-dark);">Empfehlung Atlas</div>
|
||
<ul>
|
||
<li style="color:var(--green-dark);">V2 (Kontext-Preset) ist die empfohlene Variation für v1. Der Live-Score-Preview schafft sofortiges Feedback — der Planer muss nicht raten, ob eine Einstellung den erhofften Effekt hat.</li>
|
||
<li style="color:var(--green-dark);">V2 + V3 lassen sich gut kombinieren: Presets für den Einstieg (V2 oben), Regelkarten als "Erweiterte Einstellungen" darunter (V3-Stil) statt des abstrakten Segmented-Controls.</li>
|
||
<li style="color:var(--green-dark);">V1 ist die richtige Wahl, wenn der Simulation-Endpoint nicht in diesem Sprint umgesetzt werden kann — er lässt sich später ohne Layout-Änderung ergänzen.</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
</div><!-- /doc -->
|
||
</body>
|
||
</html>
|