Marcel Raddatz
520dae5adf
- Store hero image as base64 data URI in text column (V023 migration) - Add file upload UI to RecipeForm with FileReader preview - Remove isChildFriendly from RecipeCreateRequest (no form field) - Fix 500 on save: effort values now lowercase, serves/cookTimeMin changed from primitive short to nullable Integer to survive omitted fields - Fix empty categories panel: removed stale tagType=category filter - Group category tags by type with German headings in recipe form - Split SuggestionResponse.SuggestionRecipe (no image) from SlotRecipe - Seed 11 HelloFresh recipes with ingredients, steps and tags (V101) - Add frontend e2e scaffold, specs and dev yml Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
765 lines
85 KiB
HTML
765 lines
85 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8"/>
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||
<title>E1 / D3 — Einstellungen & Vorräte · 5 Variationen</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"/>
|
||
<!--
|
||
spec:agent
|
||
document: E1 Settings Hub + D3 Staples — Design Variations
|
||
version: 1.0
|
||
journey: J8 Edit pantry staples
|
||
routes: /settings (E1 hub) → /household/staples?ctx=settings (D3)
|
||
screens: E1, D3
|
||
variations: V1 Section rows | V2 Card sections | V3 Accordion | V4 Settings sub-nav | V5 Dashboard tiles
|
||
last-updated: 2026-04
|
||
note: D3 = A3 (same StaplesManager component). settings context removes onboarding chrome.
|
||
note: StaplesManager renders categories as chip grids (StapleChip), not checkbox lists.
|
||
-->
|
||
<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-text: #8A6800;
|
||
--color-error: #DC4C3E;
|
||
--blue-tint: #E6F1FB;
|
||
--blue: #185FA5;
|
||
--blue-dark: #0C447C;
|
||
--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; --radius-full: 9999px;
|
||
--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);
|
||
}
|
||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||
body { font-family: var(--font-sans); background: var(--color-page); color: var(--color-text); font-size: 14px; line-height: 1.6; }
|
||
|
||
/* ── Doc layout ── */
|
||
.doc { max-width: 960px; margin: 0 auto; padding: 48px 40px 96px; }
|
||
.doc-header { display: flex; justify-content: space-between; align-items: flex-end; padding-bottom: 28px; border-bottom: 1px solid var(--color-border); margin-bottom: 48px; }
|
||
.doc-header h1 { font-family: var(--font-display); font-size: 26px; font-weight: 500; letter-spacing: -0.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; }
|
||
.intro { font-size: 14px; line-height: 1.75; color: var(--color-text); max-width: 640px; margin-bottom: 48px; }
|
||
.section-label { font-size: 10px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-text-muted); padding-bottom: 10px; border-bottom: 1px solid var(--color-border); margin-bottom: 36px; }
|
||
|
||
/* ── Variation sections ── */
|
||
.variation { margin-bottom: 72px; }
|
||
.var-header { display: flex; align-items: flex-start; gap: 20px; margin-bottom: 20px; }
|
||
.var-num { font-family: var(--font-display); font-size: 44px; font-weight: 300; color: var(--yellow-light); line-height: 1; flex-shrink: 0; width: 56px; letter-spacing: -0.03em; }
|
||
.var-meta { flex: 1; padding-top: 4px; }
|
||
.var-title { font-size: 18px; font-weight: 500; letter-spacing: -0.01em; margin-bottom: 4px; }
|
||
.var-desc { font-size: 13px; color: var(--color-text-muted); line-height: 1.5; max-width: 540px; }
|
||
.var-tag { font-size: 10px; font-weight: 500; letter-spacing: 0.07em; text-transform: uppercase; padding: 3px 8px; border-radius: var(--radius-sm); background: var(--color-subtle); color: var(--color-text-muted); white-space: nowrap; margin-top: 6px; display: inline-block; }
|
||
.var-tag.rec { background: var(--green-tint); color: var(--green-dark); }
|
||
|
||
/* ── Preview containers ── */
|
||
.preview-pair { display: flex; gap: 24px; align-items: flex-start; margin-bottom: 20px; }
|
||
.preview-d-wrap { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
|
||
.preview-m-wrap { flex-shrink: 0; display: flex; flex-direction: column; gap: 6px; }
|
||
.preview-label { font-size: 9px; font-weight: 500; letter-spacing: 0.09em; text-transform: uppercase; color: var(--color-text-muted); }
|
||
.preview-d-clip { height: 340px; overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-page); }
|
||
.preview-d-scale { transform: scale(0.5); transform-origin: top left; width: 200%; }
|
||
.preview-m-clip { width: 196px; height: 340px; overflow: hidden; border: 1.5px solid var(--color-border); border-radius: 24px; background: var(--color-page); }
|
||
.preview-m-scale { transform: scale(0.5); transform-origin: top left; width: 200%; }
|
||
|
||
/* ── Notes ── */
|
||
.var-notes { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 16px 20px; }
|
||
.var-notes-label { font-size: 9px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-muted); margin-bottom: 10px; }
|
||
.var-notes ul { list-style: none; display: flex; flex-direction: column; gap: 5px; }
|
||
.var-notes li { font-size: 12px; color: var(--color-text-muted); line-height: 1.5; display: flex; align-items: flex-start; gap: 8px; }
|
||
.var-notes li::before { content: '→'; color: var(--green); font-weight: 500; flex-shrink: 0; }
|
||
|
||
/* ── Agent section ── */
|
||
.agent-section { background: var(--color-text); color: #E8E8E2; padding: 40px 48px; margin-top: 64px; }
|
||
.agent-section h2 { font-size: 10px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: #6B6A63; margin-bottom: 4px; }
|
||
.agent-section > p { font-size: 13px; color: #9A9990; margin-bottom: 28px; line-height: 1.6; max-width: 640px; }
|
||
.spec-comment { font-family: var(--font-mono); font-size: 11px; color: #3A3A36; margin-bottom: 32px; line-height: 1.9; white-space: pre-wrap; }
|
||
.agent-table { width: 100%; border-collapse: collapse; font-family: var(--font-mono); font-size: 11px; margin-bottom: 40px; }
|
||
.agent-table thead tr { border-bottom: 1px solid #2A2A26; }
|
||
.agent-table th { text-align: left; padding: 8px 14px; font-size: 9px; font-weight: 500; letter-spacing: 0.09em; text-transform: uppercase; color: #5A5A55; font-family: var(--font-sans); }
|
||
.agent-table td { padding: 9px 14px; border-bottom: 1px solid #1E1E1A; vertical-align: top; line-height: 1.5; }
|
||
.agent-table tr:last-child td { border-bottom: none; }
|
||
.agent-table td:first-child { color: #7A7A72; white-space: nowrap; }
|
||
.agent-table td:nth-child(2) { color: #E8E8E2; font-weight: 500; }
|
||
.agent-table td:nth-child(3) { color: #5A5A55; }
|
||
.group-row td { padding-top: 20px; font-family: var(--font-sans); font-size: 9px; font-weight: 500; letter-spacing: 0.09em; text-transform: uppercase; color: #3A3A36; border-bottom: none; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="doc">
|
||
|
||
<div class="doc-header">
|
||
<div>
|
||
<h1>E1 / D3 — Einstellungen & Vorräte</h1>
|
||
<p>5 Design-Variationen · Desktop-first · Routes /settings + /household/staples · Journey J8</p>
|
||
</div>
|
||
<div class="doc-meta">
|
||
Version: 1.0<br>
|
||
Screens: E1, D3<br>
|
||
Journey: J8<br>
|
||
Actor: Planner<br>
|
||
Last updated: 2026-04
|
||
</div>
|
||
</div>
|
||
|
||
<p class="intro">Two pages, one journey. <strong style="font-weight:500">E1</strong> is the settings hub at <code style="font-family:var(--font-mono);font-size:12px;background:var(--color-subtle);padding:1px 5px;border-radius:3px;">/settings</code> — currently a placeholder. <strong style="font-weight:500">D3</strong> is the StaplesManager component at <code style="font-family:var(--font-mono);font-size:12px;background:var(--color-subtle);padding:1px 5px;border-radius:3px;">/household/staples</code>, rendered with <code style="font-family:var(--font-mono);font-size:12px;background:var(--color-subtle);padding:1px 5px;border-radius:3px;">context="settings"</code>. The component uses StapleChip — ingredient pills in flex-wrap grids per category, not a checklist. Five variations explore how the hub and staples editing relate: from navigating to a sub-page, to showing staples inline on the settings page itself. The recommended variation for v1 is <strong style="font-weight:500">V3 (Accordion)</strong> — one page, no navigation, staples always one tap away.</p>
|
||
|
||
<div class="section-label">Five design variations</div>
|
||
|
||
|
||
<!-- ══════════════════════════════════════
|
||
V1 — SECTION ROWS (LINKED HUB)
|
||
══════════════════════════════════════ -->
|
||
<div class="variation">
|
||
<div class="var-header">
|
||
<div class="var-num">V1</div>
|
||
<div class="var-meta">
|
||
<div class="var-title">Verknüpfte Abschnitte</div>
|
||
<div class="var-desc">Settings als Hub-Seite mit klickbaren Abschnitt-Zeilen. Jeder Bereich (Profil, Vorräte, Haushalt) ist eine Zeile mit Titel, Beschreibung, Stat und Pfeil. Tippen navigiert zur jeweiligen Unterseite. Klassisches iOS-Settings-Muster.</div>
|
||
<span class="var-tag">Maximal erweiterbar für künftige Settings</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="preview-pair">
|
||
<!-- Desktop: Hub view -->
|
||
<div class="preview-d-wrap">
|
||
<div class="preview-label">Desktop · 1200px — Hub-Ansicht</div>
|
||
<div class="preview-d-clip">
|
||
<div class="preview-d-scale">
|
||
<div style="display:flex;width:1200px;min-height:680px;background:var(--color-page);">
|
||
<!-- Sidebar -->
|
||
<aside style="width:224px;flex-shrink:0;background:var(--color-surface);border-right:1px solid var(--color-border);padding:0;display:flex;flex-direction:column;min-height:680px;">
|
||
<div style="padding:18px 16px 16px;border-bottom:1px solid var(--color-border);display:flex;align-items:center;gap:10px;"><div style="width:22px;height:22px;background:var(--green);border-radius:5px;flex-shrink:0;"></div><div><div style="font-family:var(--font-display);font-size:15px;font-weight:500;color:var(--color-text);">Mealprep</div><div style="font-size:10px;color:var(--color-text-muted);">Familie Raddatz</div></div></div>
|
||
<nav style="padding:16px 0;flex:1;"><div style="font-size:8px;font-weight:500;letter-spacing:0.1em;text-transform:uppercase;color:var(--color-text-muted);padding:0 16px 6px;">Plan</div><a style="display:flex;align-items:center;gap:8px;padding:7px 16px;font-size:13px;color:var(--color-text-muted);text-decoration:none;"><span style="width:16px;height:16px;background:var(--color-border);border-radius:3px;flex-shrink:0;display:inline-block;"></span>Planer</a><a style="display:flex;align-items:center;gap:8px;padding:7px 16px;font-size:13px;color:var(--color-text-muted);text-decoration:none;"><span style="width:16px;height:16px;background:var(--color-border);border-radius:3px;flex-shrink:0;display:inline-block;"></span>Rezepte</a><a style="display:flex;align-items:center;gap:8px;padding:7px 16px;font-size:13px;color:var(--color-text-muted);text-decoration:none;"><span style="width:16px;height:16px;background:var(--color-border);border-radius:3px;flex-shrink:0;display:inline-block;"></span>Einkauf</a><div style="font-size:8px;font-weight:500;letter-spacing:0.1em;text-transform:uppercase;color:var(--color-text-muted);padding:16px 16px 6px;">Haushalt</div><a style="display:flex;align-items:center;gap:8px;padding:7px 16px;font-size:13px;color:var(--color-text-muted);text-decoration:none;margin:0 8px;"><span style="width:16px;height:16px;background:var(--color-border);border-radius:3px;flex-shrink:0;display:inline-block;"></span>Mitglieder</a><a style="display:flex;align-items:center;gap:8px;padding:7px 16px;font-size:13px;background:var(--green-tint);color:var(--green-dark);font-weight:500;text-decoration:none;border-radius:var(--radius-md);margin:0 8px;"><span style="width:16px;height:16px;background:var(--green-light);border-radius:3px;flex-shrink:0;display:inline-block;"></span>Einstellungen</a></nav>
|
||
</aside>
|
||
<!-- Hub content -->
|
||
<main style="flex:1;padding:40px 56px;">
|
||
<h1 style="font-family:var(--font-display);font-size:28px;font-weight:500;letter-spacing:-0.02em;margin-bottom:32px;">Einstellungen</h1>
|
||
<div style="max-width:600px;display:flex;flex-direction:column;gap:8px;">
|
||
<!-- Vorräte row (highlighted as primary) -->
|
||
<a style="display:flex;align-items:center;gap:16px;padding:20px 20px;background:var(--color-surface);border:1px solid var(--color-border);border-left:3px solid var(--green-dark);border-radius:var(--radius-lg);text-decoration:none;cursor:pointer;box-shadow:var(--shadow-card);">
|
||
<div style="flex:1;">
|
||
<div style="font-size:15px;font-weight:500;color:var(--color-text);margin-bottom:3px;">Vorräte</div>
|
||
<div style="font-size:12px;color:var(--color-text-muted);">Zutaten die immer im Haushalt vorhanden sind — werden aus Einkaufslisten gefiltert</div>
|
||
</div>
|
||
<div style="text-align:right;flex-shrink:0;">
|
||
<div style="font-size:20px;font-weight:300;font-family:var(--font-display);color:var(--green-dark);letter-spacing:-0.02em;">14</div>
|
||
<div style="font-size:10px;color:var(--color-text-muted);">aktiv</div>
|
||
</div>
|
||
<div style="color:var(--color-text-muted);font-size:18px;">›</div>
|
||
</a>
|
||
<a style="display:flex;align-items:center;gap:16px;padding:20px 20px;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);text-decoration:none;cursor:pointer;">
|
||
<div style="flex:1;">
|
||
<div style="font-size:15px;font-weight:500;color:var(--color-text);margin-bottom:3px;">Profil</div>
|
||
<div style="font-size:12px;color:var(--color-text-muted);">Marcel Raddatz · marcel@email.com</div>
|
||
</div>
|
||
<div style="color:var(--color-text-muted);font-size:18px;">›</div>
|
||
</a>
|
||
<a style="display:flex;align-items:center;gap:16px;padding:20px 20px;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);text-decoration:none;cursor:pointer;">
|
||
<div style="flex:1;">
|
||
<div style="font-size:15px;font-weight:500;color:var(--color-text);margin-bottom:3px;">Haushalt</div>
|
||
<div style="font-size:12px;color:var(--color-text-muted);">Familie Raddatz · 3 Mitglieder</div>
|
||
</div>
|
||
<div style="color:var(--color-text-muted);font-size:18px;">›</div>
|
||
</a>
|
||
</div>
|
||
</main>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- Mobile -->
|
||
<div class="preview-m-wrap">
|
||
<div class="preview-label">Mobile · 390px</div>
|
||
<div class="preview-m-clip">
|
||
<div class="preview-m-scale">
|
||
<div style="width:390px;min-height:680px;background:var(--color-page);display:flex;flex-direction:column;">
|
||
<div style="padding:16px 20px 16px;border-bottom:1px solid var(--color-border);background:var(--color-surface);"><div style="font-family:var(--font-display);font-size:20px;font-weight:500;">Einstellungen</div></div>
|
||
<div style="flex:1;padding:16px 20px;display:flex;flex-direction:column;gap:8px;">
|
||
<a style="display:flex;align-items:center;gap:14px;padding:16px;background:var(--color-surface);border:1px solid var(--color-border);border-left:3px solid var(--green-dark);border-radius:var(--radius-lg);text-decoration:none;cursor:pointer;">
|
||
<div style="flex:1;"><div style="font-size:15px;font-weight:500;color:var(--color-text);">Vorräte</div><div style="font-size:12px;color:var(--color-text-muted);margin-top:2px;">14 aktiv · Einkaufsliste-Filter</div></div>
|
||
<div style="color:var(--color-text-muted);font-size:16px;">›</div>
|
||
</a>
|
||
<a style="display:flex;align-items:center;gap:14px;padding:16px;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);text-decoration:none;cursor:pointer;">
|
||
<div style="flex:1;"><div style="font-size:15px;font-weight:500;color:var(--color-text);">Profil</div><div style="font-size:12px;color:var(--color-text-muted);margin-top:2px;">Marcel Raddatz</div></div>
|
||
<div style="color:var(--color-text-muted);font-size:16px;">›</div>
|
||
</a>
|
||
<a style="display:flex;align-items:center;gap:14px;padding:16px;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);text-decoration:none;cursor:pointer;">
|
||
<div style="flex:1;"><div style="font-size:15px;font-weight:500;color:var(--color-text);">Haushalt</div><div style="font-size:12px;color:var(--color-text-muted);margin-top:2px;">Familie Raddatz · 3 Mitglieder</div></div>
|
||
<div style="color:var(--color-text-muted);font-size:16px;">›</div>
|
||
</a>
|
||
</div>
|
||
<nav style="background:var(--color-surface);border-top:1px solid var(--color-border);padding:8px 0 20px;display:flex;"><a style="flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;font-size:10px;color:var(--color-text-muted);text-decoration:none;padding:4px 0;"><span style="width:20px;height:20px;background:var(--color-border);border-radius:3px;display:inline-block;"></span>Planer</a><a style="flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;font-size:10px;color:var(--color-text-muted);text-decoration:none;padding:4px 0;"><span style="width:20px;height:20px;background:var(--color-border);border-radius:3px;display:inline-block;"></span>Rezepte</a><a style="flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;font-size:10px;color:var(--color-text-muted);text-decoration:none;padding:4px 0;"><span style="width:20px;height:20px;background:var(--color-border);border-radius:3px;display:inline-block;"></span>Einkauf</a><a style="flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;font-size:10px;color:var(--green-dark);font-weight:500;text-decoration:none;padding:4px 0;"><span style="width:20px;height:20px;background:var(--green-light);border-radius:3px;display:inline-block;"></span>Einstellungen</a></nav>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Second preview: staples sub-page (D3 in settings context) -->
|
||
<div style="margin-bottom:20px;">
|
||
<div class="preview-label" style="margin-bottom:6px;">Desktop · D3 Vorräte-Unterseite (nach Navigation)</div>
|
||
<div class="preview-d-clip">
|
||
<div class="preview-d-scale">
|
||
<div style="display:flex;width:1200px;min-height:680px;background:var(--color-page);">
|
||
<aside style="width:224px;flex-shrink:0;background:var(--color-surface);border-right:1px solid var(--color-border);padding:0;display:flex;flex-direction:column;min-height:680px;"><div style="padding:18px 16px 16px;border-bottom:1px solid var(--color-border);display:flex;align-items:center;gap:10px;"><div style="width:22px;height:22px;background:var(--green);border-radius:5px;flex-shrink:0;"></div><div><div style="font-family:var(--font-display);font-size:15px;font-weight:500;color:var(--color-text);">Mealprep</div><div style="font-size:10px;color:var(--color-text-muted);">Familie Raddatz</div></div></div><nav style="padding:16px 0;flex:1;"><div style="font-size:8px;font-weight:500;letter-spacing:0.1em;text-transform:uppercase;color:var(--color-text-muted);padding:0 16px 6px;">Plan</div><a style="display:flex;align-items:center;gap:8px;padding:7px 16px;font-size:13px;color:var(--color-text-muted);text-decoration:none;"><span style="width:16px;height:16px;background:var(--color-border);border-radius:3px;flex-shrink:0;display:inline-block;"></span>Planer</a><a style="display:flex;align-items:center;gap:8px;padding:7px 16px;font-size:13px;color:var(--color-text-muted);text-decoration:none;"><span style="width:16px;height:16px;background:var(--color-border);border-radius:3px;flex-shrink:0;display:inline-block;"></span>Rezepte</a><a style="display:flex;align-items:center;gap:8px;padding:7px 16px;font-size:13px;color:var(--color-text-muted);text-decoration:none;"><span style="width:16px;height:16px;background:var(--color-border);border-radius:3px;flex-shrink:0;display:inline-block;"></span>Einkauf</a><div style="font-size:8px;font-weight:500;letter-spacing:0.1em;text-transform:uppercase;color:var(--color-text-muted);padding:16px 16px 6px;">Haushalt</div><a style="display:flex;align-items:center;gap:8px;padding:7px 16px;font-size:13px;color:var(--color-text-muted);text-decoration:none;margin:0 8px;"><span style="width:16px;height:16px;background:var(--color-border);border-radius:3px;flex-shrink:0;display:inline-block;"></span>Mitglieder</a><a style="display:flex;align-items:center;gap:8px;padding:7px 16px;font-size:13px;background:var(--green-tint);color:var(--green-dark);font-weight:500;text-decoration:none;border-radius:var(--radius-md);margin:0 8px;"><span style="width:16px;height:16px;background:var(--green-light);border-radius:3px;flex-shrink:0;display:inline-block;"></span>Einstellungen</a></nav></aside>
|
||
<main style="flex:1;padding:40px 56px;overflow:hidden;">
|
||
<div style="display:flex;align-items:center;gap:10px;margin-bottom:6px;">
|
||
<a style="font-size:13px;color:var(--color-text-muted);text-decoration:none;">← Einstellungen</a>
|
||
</div>
|
||
<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:28px;">
|
||
<div><h1 style="font-family:var(--font-display);font-size:28px;font-weight:500;letter-spacing:-0.02em;">Vorräte</h1><div style="font-size:13px;color:var(--color-text-muted);margin-top:4px;">14 von 32 Zutaten als Vorrat markiert</div></div>
|
||
</div>
|
||
<!-- StaplesManager: category + chip grid -->
|
||
<div style="display:flex;flex-direction:column;gap:24px;">
|
||
<div>
|
||
<div style="font-size:10px;font-weight:500;letter-spacing:0.08em;text-transform:uppercase;color:var(--color-text-muted);margin-bottom:10px;">Gemüse</div>
|
||
<div style="display:flex;flex-wrap:wrap;gap:8px;">
|
||
<span style="padding:7px 14px;border-radius:var(--radius-full);font-size:13px;font-weight:500;background:var(--green-dark);color:#fff;cursor:pointer;">Karotten</span>
|
||
<span style="padding:7px 14px;border-radius:var(--radius-full);font-size:13px;font-weight:500;background:var(--green-dark);color:#fff;cursor:pointer;">Zwiebeln</span>
|
||
<span style="padding:7px 14px;border-radius:var(--radius-full);font-size:13px;font-weight:400;background:transparent;color:var(--color-text-muted);border:1px solid var(--color-border);cursor:pointer;">Lauch</span>
|
||
<span style="padding:7px 14px;border-radius:var(--radius-full);font-size:13px;font-weight:500;background:var(--green-dark);color:#fff;cursor:pointer;">Knoblauch</span>
|
||
<span style="padding:7px 14px;border-radius:var(--radius-full);font-size:13px;font-weight:400;background:transparent;color:var(--color-text-muted);border:1px solid var(--color-border);cursor:pointer;">Fenchel</span>
|
||
<span style="padding:7px 14px;border-radius:var(--radius-full);font-size:13px;font-weight:500;background:var(--green-dark);color:#fff;cursor:pointer;">Paprika</span>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<div style="font-size:10px;font-weight:500;letter-spacing:0.08em;text-transform:uppercase;color:var(--color-text-muted);margin-bottom:10px;">Getreide & Hülsenfrüchte</div>
|
||
<div style="display:flex;flex-wrap:wrap;gap:8px;">
|
||
<span style="padding:7px 14px;border-radius:var(--radius-full);font-size:13px;font-weight:500;background:var(--green-dark);color:#fff;cursor:pointer;">Pasta</span>
|
||
<span style="padding:7px 14px;border-radius:var(--radius-full);font-size:13px;font-weight:500;background:var(--green-dark);color:#fff;cursor:pointer;">Reis</span>
|
||
<span style="padding:7px 14px;border-radius:var(--radius-full);font-size:13px;font-weight:400;background:transparent;color:var(--color-text-muted);border:1px solid var(--color-border);cursor:pointer;">Couscous</span>
|
||
<span style="padding:7px 14px;border-radius:var(--radius-full);font-size:13px;font-weight:500;background:var(--green-dark);color:#fff;cursor:pointer;">Linsen</span>
|
||
<span style="padding:7px 14px;border-radius:var(--radius-full);font-size:13px;font-weight:400;background:transparent;color:var(--color-text-muted);border:1px solid var(--color-border);cursor:pointer;">Kichererbsen</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</main>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="var-notes">
|
||
<div class="var-notes-label">Design-Entscheidungen</div>
|
||
<ul>
|
||
<li>Vorräte-Zeile hat einen grünen linken Rand (border-left: 3px solid --green-dark) — signalisiert "primäre Aktion" ohne ihn visuell zu überfrachten.</li>
|
||
<li>Die aktive Zutat-Zahl ("14") wird als Display-Schrift-Zahl dargestellt — schafft eine Verbindung zum Wert-Versprechen der App (Varietät-Scores sind ebenfalls Zahlen).</li>
|
||
<li>D3 Unterseite im settings-Kontext: kein Onboarding-Sidebar, kein "Weiter"-Button — nur die Kategorie-Chip-Liste. "← Einstellungen" Breadcrumb für die Rücknavigation.</li>
|
||
<li>StapleChip: Ausgewählt = --green-dark Hintergrund + weißer Text. Nicht ausgewählt = transparenter Hintergrund + --color-border Rahmen + --color-text-muted Text. Kein separater Speicher-Button — Auto-Save auf Toggle.</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<!-- ══════════════════════════════════════
|
||
V2 — CARD SECTIONS
|
||
══════════════════════════════════════ -->
|
||
<div class="variation">
|
||
<div class="var-header">
|
||
<div class="var-num">V2</div>
|
||
<div class="var-meta">
|
||
<div class="var-title">Einstellungs-Kacheln</div>
|
||
<div class="var-desc">Jeder Einstellungsbereich als Kachel mit Titel, Beschreibung, Schlüsselstatistik und direktem Aktions-Button. Die Vorräte-Kachel zeigt "14 von 32 aktiv" und einen "Bearbeiten"-Button der direkt in den D3-Kontext führt.</div>
|
||
<span class="var-tag">Gute Übersicht auf großen Bildschirmen</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="preview-pair">
|
||
<div class="preview-d-wrap">
|
||
<div class="preview-label">Desktop · 1200px</div>
|
||
<div class="preview-d-clip">
|
||
<div class="preview-d-scale">
|
||
<div style="display:flex;width:1200px;min-height:680px;background:var(--color-page);">
|
||
<aside style="width:224px;flex-shrink:0;background:var(--color-surface);border-right:1px solid var(--color-border);padding:0;display:flex;flex-direction:column;min-height:680px;"><div style="padding:18px 16px 16px;border-bottom:1px solid var(--color-border);display:flex;align-items:center;gap:10px;"><div style="width:22px;height:22px;background:var(--green);border-radius:5px;flex-shrink:0;"></div><div><div style="font-family:var(--font-display);font-size:15px;font-weight:500;color:var(--color-text);">Mealprep</div><div style="font-size:10px;color:var(--color-text-muted);">Familie Raddatz</div></div></div><nav style="padding:16px 0;flex:1;"><div style="font-size:8px;font-weight:500;letter-spacing:0.1em;text-transform:uppercase;color:var(--color-text-muted);padding:0 16px 6px;">Plan</div><a style="display:flex;align-items:center;gap:8px;padding:7px 16px;font-size:13px;color:var(--color-text-muted);text-decoration:none;"><span style="width:16px;height:16px;background:var(--color-border);border-radius:3px;flex-shrink:0;display:inline-block;"></span>Planer</a><a style="display:flex;align-items:center;gap:8px;padding:7px 16px;font-size:13px;color:var(--color-text-muted);text-decoration:none;"><span style="width:16px;height:16px;background:var(--color-border);border-radius:3px;flex-shrink:0;display:inline-block;"></span>Rezepte</a><a style="display:flex;align-items:center;gap:8px;padding:7px 16px;font-size:13px;color:var(--color-text-muted);text-decoration:none;"><span style="width:16px;height:16px;background:var(--color-border);border-radius:3px;flex-shrink:0;display:inline-block;"></span>Einkauf</a><div style="font-size:8px;font-weight:500;letter-spacing:0.1em;text-transform:uppercase;color:var(--color-text-muted);padding:16px 16px 6px;">Haushalt</div><a style="display:flex;align-items:center;gap:8px;padding:7px 16px;font-size:13px;color:var(--color-text-muted);text-decoration:none;margin:0 8px;"><span style="width:16px;height:16px;background:var(--color-border);border-radius:3px;flex-shrink:0;display:inline-block;"></span>Mitglieder</a><a style="display:flex;align-items:center;gap:8px;padding:7px 16px;font-size:13px;background:var(--green-tint);color:var(--green-dark);font-weight:500;text-decoration:none;border-radius:var(--radius-md);margin:0 8px;"><span style="width:16px;height:16px;background:var(--green-light);border-radius:3px;flex-shrink:0;display:inline-block;"></span>Einstellungen</a></nav></aside>
|
||
<main style="flex:1;padding:40px 56px;">
|
||
<h1 style="font-family:var(--font-display);font-size:28px;font-weight:500;letter-spacing:-0.02em;margin-bottom:32px;">Einstellungen</h1>
|
||
<div style="display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:820px;">
|
||
<!-- Vorräte (primary, spans or just prominent) -->
|
||
<div style="background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-xl);padding:28px;display:flex;flex-direction:column;gap:12px;box-shadow:var(--shadow-card);">
|
||
<div style="display:flex;justify-content:space-between;align-items:flex-start;">
|
||
<div style="font-size:16px;font-weight:500;">Vorräte</div>
|
||
<div style="text-align:right;"><div style="font-family:var(--font-display);font-size:28px;font-weight:300;color:var(--green-dark);letter-spacing:-0.02em;line-height:1;">14</div><div style="font-size:10px;color:var(--color-text-muted);">von 32 aktiv</div></div>
|
||
</div>
|
||
<div style="font-size:13px;color:var(--color-text-muted);line-height:1.5;flex:1;">Zutaten, die immer im Haushalt vorhanden sind. Sie werden beim Generieren der Einkaufsliste automatisch herausgefiltert.</div>
|
||
<button style="align-self:flex-start;background:var(--green-dark);color:#fff;font-family:var(--font-sans);font-size:13px;font-weight:500;letter-spacing:0.04em;padding:9px 18px;border-radius:var(--radius-md);border:none;cursor:pointer;">Vorräte bearbeiten</button>
|
||
</div>
|
||
<!-- Haushalt -->
|
||
<div style="background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-xl);padding:28px;display:flex;flex-direction:column;gap:12px;box-shadow:var(--shadow-card);">
|
||
<div style="display:flex;justify-content:space-between;align-items:flex-start;">
|
||
<div style="font-size:16px;font-weight:500;">Haushalt</div>
|
||
<div style="text-align:right;"><div style="font-family:var(--font-display);font-size:28px;font-weight:300;color:var(--color-text-muted);letter-spacing:-0.02em;line-height:1;">3</div><div style="font-size:10px;color:var(--color-text-muted);">Mitglieder</div></div>
|
||
</div>
|
||
<div style="font-size:13px;color:var(--color-text-muted);line-height:1.5;flex:1;">Familie Raddatz. Haushaltsname und Mitgliederverwaltung.</div>
|
||
<button style="align-self:flex-start;background:var(--color-page);color:var(--color-text);font-family:var(--font-sans);font-size:13px;font-weight:500;letter-spacing:0.04em;padding:9px 18px;border-radius:var(--radius-md);border:1px solid var(--color-border);cursor:pointer;">Verwalten</button>
|
||
</div>
|
||
<!-- Profil -->
|
||
<div style="background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-xl);padding:28px;display:flex;flex-direction:column;gap:12px;box-shadow:var(--shadow-card);">
|
||
<div style="font-size:16px;font-weight:500;">Profil</div>
|
||
<div style="font-size:13px;color:var(--color-text-muted);flex:1;">Marcel Raddatz<br>marcel@email.com</div>
|
||
<button style="align-self:flex-start;background:var(--color-page);color:var(--color-text);font-family:var(--font-sans);font-size:13px;font-weight:500;letter-spacing:0.04em;padding:9px 18px;border-radius:var(--radius-md);border:1px solid var(--color-border);cursor:pointer;">Bearbeiten</button>
|
||
</div>
|
||
</div>
|
||
</main>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="preview-m-wrap">
|
||
<div class="preview-label">Mobile · 390px</div>
|
||
<div class="preview-m-clip">
|
||
<div class="preview-m-scale">
|
||
<div style="width:390px;min-height:680px;background:var(--color-page);display:flex;flex-direction:column;">
|
||
<div style="padding:16px 20px;border-bottom:1px solid var(--color-border);background:var(--color-surface);"><div style="font-family:var(--font-display);font-size:20px;font-weight:500;">Einstellungen</div></div>
|
||
<div style="flex:1;padding:16px 20px;display:flex;flex-direction:column;gap:12px;">
|
||
<div style="background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:20px;">
|
||
<div style="display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:10px;"><div style="font-size:15px;font-weight:500;">Vorräte</div><div><div style="font-family:var(--font-display);font-size:24px;font-weight:300;color:var(--green-dark);line-height:1;">14</div><div style="font-size:10px;color:var(--color-text-muted);">von 32</div></div></div>
|
||
<div style="font-size:12px;color:var(--color-text-muted);margin-bottom:14px;">Immer vorhandene Zutaten, automatisch aus Einkaufslisten gefiltert.</div>
|
||
<button style="width:100%;background:var(--green-dark);color:#fff;font-size:13px;font-weight:500;padding:10px;border-radius:var(--radius-md);border:none;">Vorräte bearbeiten</button>
|
||
</div>
|
||
<div style="background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:20px;">
|
||
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;"><div style="font-size:15px;font-weight:500;">Haushalt</div><div style="font-size:12px;color:var(--color-text-muted);">3 Mitglieder</div></div>
|
||
<div style="font-size:12px;color:var(--color-text-muted);margin-bottom:14px;">Familie Raddatz</div>
|
||
<button style="width:100%;background:var(--color-page);color:var(--color-text);font-size:13px;font-weight:500;padding:10px;border-radius:var(--radius-md);border:1px solid var(--color-border);">Verwalten</button>
|
||
</div>
|
||
<div style="background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:20px;">
|
||
<div style="font-size:15px;font-weight:500;margin-bottom:8px;">Profil</div>
|
||
<div style="font-size:12px;color:var(--color-text-muted);margin-bottom:14px;">Marcel Raddatz · marcel@email.com</div>
|
||
<button style="width:100%;background:var(--color-page);color:var(--color-text);font-size:13px;font-weight:500;padding:10px;border-radius:var(--radius-md);border:1px solid var(--color-border);">Bearbeiten</button>
|
||
</div>
|
||
</div>
|
||
<nav style="background:var(--color-surface);border-top:1px solid var(--color-border);padding:8px 0 20px;display:flex;"><a style="flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;font-size:10px;color:var(--color-text-muted);text-decoration:none;padding:4px 0;"><span style="width:20px;height:20px;background:var(--color-border);border-radius:3px;display:inline-block;"></span>Planer</a><a style="flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;font-size:10px;color:var(--color-text-muted);text-decoration:none;padding:4px 0;"><span style="width:20px;height:20px;background:var(--color-border);border-radius:3px;display:inline-block;"></span>Rezepte</a><a style="flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;font-size:10px;color:var(--color-text-muted);text-decoration:none;padding:4px 0;"><span style="width:20px;height:20px;background:var(--color-border);border-radius:3px;display:inline-block;"></span>Einkauf</a><a style="flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;font-size:10px;color:var(--green-dark);font-weight:500;text-decoration:none;padding:4px 0;"><span style="width:20px;height:20px;background:var(--green-light);border-radius:3px;display:inline-block;"></span>Einstellungen</a></nav>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="var-notes">
|
||
<div class="var-notes-label">Design-Entscheidungen</div>
|
||
<ul>
|
||
<li>Kacheln mit Display-Schrift-Zahlen (14, 3) als Schlüsselmetriken — konsistentes Designmuster mit der Varietätspunktzahl im Planer.</li>
|
||
<li>Der "Vorräte bearbeiten"-Button auf der Kachel führt direkt zur D3-Unterseite. Keine Zwischennavigation.</li>
|
||
<li>Nachteil gegenüber V3: erfordert einen Navigationswechsel für die häufigste Aufgabe (Vorräte bearbeiten). V3 macht das inline möglich.</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<!-- ══════════════════════════════════════
|
||
V3 — ACCORDION (INLINE STAPLES)
|
||
══════════════════════════════════════ -->
|
||
<div class="variation">
|
||
<div class="var-header">
|
||
<div class="var-num">V3</div>
|
||
<div class="var-meta">
|
||
<div class="var-title">Akkordeon mit inline Vorräten</div>
|
||
<div class="var-desc">Die Settings-Seite zeigt alle Bereiche als aufklappbare Abschnitte. Der Vorräte-Bereich ist beim Öffnen der Seite standardmäßig aufgeklappt und zeigt direkt die StapleChip-Kategorien. Kein Seitenwechsel nötig.</div>
|
||
<span class="var-tag rec">Empfohlen · v1</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="preview-pair">
|
||
<div class="preview-d-wrap">
|
||
<div class="preview-label">Desktop · 1200px — Vorräte aufgeklappt (Standard)</div>
|
||
<div class="preview-d-clip">
|
||
<div class="preview-d-scale">
|
||
<div style="display:flex;width:1200px;min-height:680px;background:var(--color-page);">
|
||
<aside style="width:224px;flex-shrink:0;background:var(--color-surface);border-right:1px solid var(--color-border);padding:0;display:flex;flex-direction:column;min-height:680px;"><div style="padding:18px 16px 16px;border-bottom:1px solid var(--color-border);display:flex;align-items:center;gap:10px;"><div style="width:22px;height:22px;background:var(--green);border-radius:5px;flex-shrink:0;"></div><div><div style="font-family:var(--font-display);font-size:15px;font-weight:500;color:var(--color-text);">Mealprep</div><div style="font-size:10px;color:var(--color-text-muted);">Familie Raddatz</div></div></div><nav style="padding:16px 0;flex:1;"><div style="font-size:8px;font-weight:500;letter-spacing:0.1em;text-transform:uppercase;color:var(--color-text-muted);padding:0 16px 6px;">Plan</div><a style="display:flex;align-items:center;gap:8px;padding:7px 16px;font-size:13px;color:var(--color-text-muted);text-decoration:none;"><span style="width:16px;height:16px;background:var(--color-border);border-radius:3px;flex-shrink:0;display:inline-block;"></span>Planer</a><a style="display:flex;align-items:center;gap:8px;padding:7px 16px;font-size:13px;color:var(--color-text-muted);text-decoration:none;"><span style="width:16px;height:16px;background:var(--color-border);border-radius:3px;flex-shrink:0;display:inline-block;"></span>Rezepte</a><a style="display:flex;align-items:center;gap:8px;padding:7px 16px;font-size:13px;color:var(--color-text-muted);text-decoration:none;"><span style="width:16px;height:16px;background:var(--color-border);border-radius:3px;flex-shrink:0;display:inline-block;"></span>Einkauf</a><div style="font-size:8px;font-weight:500;letter-spacing:0.1em;text-transform:uppercase;color:var(--color-text-muted);padding:16px 16px 6px;">Haushalt</div><a style="display:flex;align-items:center;gap:8px;padding:7px 16px;font-size:13px;color:var(--color-text-muted);text-decoration:none;margin:0 8px;"><span style="width:16px;height:16px;background:var(--color-border);border-radius:3px;flex-shrink:0;display:inline-block;"></span>Mitglieder</a><a style="display:flex;align-items:center;gap:8px;padding:7px 16px;font-size:13px;background:var(--green-tint);color:var(--green-dark);font-weight:500;text-decoration:none;border-radius:var(--radius-md);margin:0 8px;"><span style="width:16px;height:16px;background:var(--green-light);border-radius:3px;flex-shrink:0;display:inline-block;"></span>Einstellungen</a></nav></aside>
|
||
<main style="flex:1;padding:40px 56px;overflow:hidden;">
|
||
<h1 style="font-family:var(--font-display);font-size:28px;font-weight:500;letter-spacing:-0.02em;margin-bottom:28px;">Einstellungen</h1>
|
||
<div style="max-width:680px;display:flex;flex-direction:column;gap:4px;">
|
||
<!-- Vorräte — expanded (default) -->
|
||
<div style="border:1px solid var(--color-border);border-radius:var(--radius-lg);overflow:hidden;">
|
||
<button style="width:100%;display:flex;align-items:center;gap:12px;padding:16px 20px;background:var(--color-surface);border:none;cursor:pointer;text-align:left;">
|
||
<span style="font-size:15px;font-weight:500;flex:1;color:var(--color-text);">Vorräte</span>
|
||
<span style="font-size:12px;color:var(--color-text-muted);margin-right:8px;">14 aktiv</span>
|
||
<span style="font-size:14px;color:var(--color-text-muted);">▲</span>
|
||
</button>
|
||
<div style="padding:20px;border-top:1px solid var(--color-border);background:var(--color-page);">
|
||
<div style="font-size:13px;color:var(--color-text-muted);margin-bottom:16px;">Tippe eine Zutat an um sie als Vorrat zu markieren oder zu entfernen. Änderungen werden sofort gespeichert.</div>
|
||
<div style="margin-bottom:16px;">
|
||
<div style="font-size:10px;font-weight:500;letter-spacing:0.08em;text-transform:uppercase;color:var(--color-text-muted);margin-bottom:8px;">Gemüse</div>
|
||
<div style="display:flex;flex-wrap:wrap;gap:7px;">
|
||
<span style="padding:6px 13px;border-radius:var(--radius-full);font-size:13px;font-weight:500;background:var(--green-dark);color:#fff;cursor:pointer;">Karotten</span>
|
||
<span style="padding:6px 13px;border-radius:var(--radius-full);font-size:13px;font-weight:500;background:var(--green-dark);color:#fff;cursor:pointer;">Zwiebeln</span>
|
||
<span style="padding:6px 13px;border-radius:var(--radius-full);font-size:13px;font-weight:400;background:transparent;color:var(--color-text-muted);border:1px solid var(--color-border);cursor:pointer;">Lauch</span>
|
||
<span style="padding:6px 13px;border-radius:var(--radius-full);font-size:13px;font-weight:500;background:var(--green-dark);color:#fff;cursor:pointer;">Knoblauch</span>
|
||
<span style="padding:6px 13px;border-radius:var(--radius-full);font-size:13px;font-weight:400;background:transparent;color:var(--color-text-muted);border:1px solid var(--color-border);cursor:pointer;">Fenchel</span>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<div style="font-size:10px;font-weight:500;letter-spacing:0.08em;text-transform:uppercase;color:var(--color-text-muted);margin-bottom:8px;">Getreide</div>
|
||
<div style="display:flex;flex-wrap:wrap;gap:7px;">
|
||
<span style="padding:6px 13px;border-radius:var(--radius-full);font-size:13px;font-weight:500;background:var(--green-dark);color:#fff;cursor:pointer;">Pasta</span>
|
||
<span style="padding:6px 13px;border-radius:var(--radius-full);font-size:13px;font-weight:500;background:var(--green-dark);color:#fff;cursor:pointer;">Reis</span>
|
||
<span style="padding:6px 13px;border-radius:var(--radius-full);font-size:13px;font-weight:400;background:transparent;color:var(--color-text-muted);border:1px solid var(--color-border);cursor:pointer;">Couscous</span>
|
||
<span style="padding:6px 13px;border-radius:var(--radius-full);font-size:13px;font-weight:500;background:var(--green-dark);color:#fff;cursor:pointer;">Mehl</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- Profil — collapsed -->
|
||
<div style="border:1px solid var(--color-border);border-radius:var(--radius-lg);overflow:hidden;">
|
||
<button style="width:100%;display:flex;align-items:center;gap:12px;padding:16px 20px;background:var(--color-surface);border:none;cursor:pointer;text-align:left;">
|
||
<span style="font-size:15px;font-weight:500;flex:1;color:var(--color-text);">Profil</span>
|
||
<span style="font-size:12px;color:var(--color-text-muted);margin-right:8px;">Marcel Raddatz</span>
|
||
<span style="font-size:14px;color:var(--color-text-muted);">▼</span>
|
||
</button>
|
||
</div>
|
||
<!-- Haushalt — collapsed -->
|
||
<div style="border:1px solid var(--color-border);border-radius:var(--radius-lg);overflow:hidden;">
|
||
<button style="width:100%;display:flex;align-items:center;gap:12px;padding:16px 20px;background:var(--color-surface);border:none;cursor:pointer;text-align:left;">
|
||
<span style="font-size:15px;font-weight:500;flex:1;color:var(--color-text);">Haushalt</span>
|
||
<span style="font-size:12px;color:var(--color-text-muted);margin-right:8px;">3 Mitglieder</span>
|
||
<span style="font-size:14px;color:var(--color-text-muted);">▼</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</main>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="preview-m-wrap">
|
||
<div class="preview-label">Mobile · 390px</div>
|
||
<div class="preview-m-clip">
|
||
<div class="preview-m-scale">
|
||
<div style="width:390px;min-height:680px;background:var(--color-page);display:flex;flex-direction:column;">
|
||
<div style="padding:16px 20px;border-bottom:1px solid var(--color-border);background:var(--color-surface);"><div style="font-family:var(--font-display);font-size:20px;font-weight:500;">Einstellungen</div></div>
|
||
<div style="flex:1;padding:12px 20px;display:flex;flex-direction:column;gap:4px;">
|
||
<!-- Vorräte expanded -->
|
||
<div style="border:1px solid var(--color-border);border-radius:var(--radius-lg);overflow:hidden;">
|
||
<button style="width:100%;display:flex;align-items:center;padding:14px 16px;background:var(--color-surface);border:none;cursor:pointer;text-align:left;gap:10px;"><span style="font-size:14px;font-weight:500;flex:1;">Vorräte</span><span style="font-size:11px;color:var(--color-text-muted);">14 aktiv</span><span style="font-size:12px;color:var(--color-text-muted);">▲</span></button>
|
||
<div style="padding:14px 16px;border-top:1px solid var(--color-border);background:var(--color-page);">
|
||
<div style="font-size:10px;font-weight:500;letter-spacing:0.08em;text-transform:uppercase;color:var(--color-text-muted);margin-bottom:8px;">Gemüse</div>
|
||
<div style="display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px;">
|
||
<span style="padding:5px 11px;border-radius:var(--radius-full);font-size:12px;font-weight:500;background:var(--green-dark);color:#fff;">Karotten</span>
|
||
<span style="padding:5px 11px;border-radius:var(--radius-full);font-size:12px;font-weight:500;background:var(--green-dark);color:#fff;">Zwiebeln</span>
|
||
<span style="padding:5px 11px;border-radius:var(--radius-full);font-size:12px;font-weight:400;background:transparent;color:var(--color-text-muted);border:1px solid var(--color-border);">Lauch</span>
|
||
<span style="padding:5px 11px;border-radius:var(--radius-full);font-size:12px;font-weight:500;background:var(--green-dark);color:#fff;">Knoblauch</span>
|
||
</div>
|
||
<div style="font-size:10px;font-weight:500;letter-spacing:0.08em;text-transform:uppercase;color:var(--color-text-muted);margin-bottom:8px;">Getreide</div>
|
||
<div style="display:flex;flex-wrap:wrap;gap:6px;">
|
||
<span style="padding:5px 11px;border-radius:var(--radius-full);font-size:12px;font-weight:500;background:var(--green-dark);color:#fff;">Pasta</span>
|
||
<span style="padding:5px 11px;border-radius:var(--radius-full);font-size:12px;font-weight:500;background:var(--green-dark);color:#fff;">Reis</span>
|
||
<span style="padding:5px 11px;border-radius:var(--radius-full);font-size:12px;font-weight:400;background:transparent;color:var(--color-text-muted);border:1px solid var(--color-border);">Couscous</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div style="border:1px solid var(--color-border);border-radius:var(--radius-lg);overflow:hidden;"><button style="width:100%;display:flex;align-items:center;padding:14px 16px;background:var(--color-surface);border:none;cursor:pointer;text-align:left;gap:10px;"><span style="font-size:14px;font-weight:500;flex:1;">Profil</span><span style="font-size:11px;color:var(--color-text-muted);">Marcel R.</span><span style="font-size:12px;color:var(--color-text-muted);">▼</span></button></div>
|
||
<div style="border:1px solid var(--color-border);border-radius:var(--radius-lg);overflow:hidden;"><button style="width:100%;display:flex;align-items:center;padding:14px 16px;background:var(--color-surface);border:none;cursor:pointer;text-align:left;gap:10px;"><span style="font-size:14px;font-weight:500;flex:1;">Haushalt</span><span style="font-size:11px;color:var(--color-text-muted);">3 Mitglieder</span><span style="font-size:12px;color:var(--color-text-muted);">▼</span></button></div>
|
||
</div>
|
||
<nav style="background:var(--color-surface);border-top:1px solid var(--color-border);padding:8px 0 20px;display:flex;"><a style="flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;font-size:10px;color:var(--color-text-muted);text-decoration:none;padding:4px 0;"><span style="width:20px;height:20px;background:var(--color-border);border-radius:3px;display:inline-block;"></span>Planer</a><a style="flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;font-size:10px;color:var(--color-text-muted);text-decoration:none;padding:4px 0;"><span style="width:20px;height:20px;background:var(--color-border);border-radius:3px;display:inline-block;"></span>Rezepte</a><a style="flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;font-size:10px;color:var(--color-text-muted);text-decoration:none;padding:4px 0;"><span style="width:20px;height:20px;background:var(--color-border);border-radius:3px;display:inline-block;"></span>Einkauf</a><a style="flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;font-size:10px;color:var(--green-dark);font-weight:500;text-decoration:none;padding:4px 0;"><span style="width:20px;height:20px;background:var(--green-light);border-radius:3px;display:inline-block;"></span>Einstellungen</a></nav>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="var-notes">
|
||
<div class="var-notes-label">Design-Entscheidungen</div>
|
||
<ul>
|
||
<li>Vorräte-Abschnitt ist beim Öffnen der Seite standardmäßig aufgeklappt (per URL-Hash oder initial state) — der häufigste Grund für diesen Seitenaufruf ist das Bearbeiten von Vorräten.</li>
|
||
<li>Kein Seitenwechsel zu /household/staples nötig — die StaplesManager-Komponente rendert direkt im Akkordeon-Bereich. Routing-Vorteil: die /settings URL bleibt beim Bearbeiten erhalten.</li>
|
||
<li>Akkordeon-Trigger zeigt den aktuellen Wert im eingeklappten Zustand (z. B. "14 aktiv", "Marcel Raddatz") — der Nutzer kann den Status scannen ohne aufzuklappen.</li>
|
||
<li>Auf Mobile perfekt: kein separater "Zurück"-Button nötig. Ein langer Scroll kann mit einem "Nach oben"-Link oder sticky Akkordeon-Headern optimiert werden.</li>
|
||
<li>Implementierungshinweis: Der aufgeklappte Bereich enthält direkt die StaplesManager-Komponente (<code style="font-family:var(--font-mono);font-size:11px;background:var(--color-subtle);padding:1px 4px;border-radius:2px;"><StaplesManager categories={data.categories} context="settings" /></code>). Keine Seiten-Navigation erforderlich.</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<!-- ══════════════════════════════════════
|
||
V4 — SETTINGS SUB-NAV
|
||
══════════════════════════════════════ -->
|
||
<div class="variation">
|
||
<div class="var-header">
|
||
<div class="var-num">V4</div>
|
||
<div class="var-meta">
|
||
<div class="var-title">Einstellungs-Sub-Navigation</div>
|
||
<div class="var-desc">Auf Desktop: eine zweite Navigationsleiste links neben dem Inhalt (Profil · Vorräte · Haushalt). Der Vorräte-Abschnitt ist der Standard-Inhalt. Auf Mobile: flache Liste als Einstieg, dann Drill-down.</div>
|
||
<span class="var-tag">Skaliert gut bei vielen Settings-Bereichen</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="preview-pair">
|
||
<div class="preview-d-wrap">
|
||
<div class="preview-label">Desktop · 1200px — Vorräte als Standardansicht</div>
|
||
<div class="preview-d-clip">
|
||
<div class="preview-d-scale">
|
||
<div style="display:flex;width:1200px;min-height:680px;background:var(--color-page);">
|
||
<!-- Main sidebar -->
|
||
<aside style="width:224px;flex-shrink:0;background:var(--color-surface);border-right:1px solid var(--color-border);padding:0;display:flex;flex-direction:column;min-height:680px;"><div style="padding:18px 16px 16px;border-bottom:1px solid var(--color-border);display:flex;align-items:center;gap:10px;"><div style="width:22px;height:22px;background:var(--green);border-radius:5px;flex-shrink:0;"></div><div><div style="font-family:var(--font-display);font-size:15px;font-weight:500;color:var(--color-text);">Mealprep</div><div style="font-size:10px;color:var(--color-text-muted);">Familie Raddatz</div></div></div><nav style="padding:16px 0;flex:1;"><div style="font-size:8px;font-weight:500;letter-spacing:0.1em;text-transform:uppercase;color:var(--color-text-muted);padding:0 16px 6px;">Plan</div><a style="display:flex;align-items:center;gap:8px;padding:7px 16px;font-size:13px;color:var(--color-text-muted);text-decoration:none;"><span style="width:16px;height:16px;background:var(--color-border);border-radius:3px;flex-shrink:0;display:inline-block;"></span>Planer</a><a style="display:flex;align-items:center;gap:8px;padding:7px 16px;font-size:13px;color:var(--color-text-muted);text-decoration:none;"><span style="width:16px;height:16px;background:var(--color-border);border-radius:3px;flex-shrink:0;display:inline-block;"></span>Rezepte</a><a style="display:flex;align-items:center;gap:8px;padding:7px 16px;font-size:13px;color:var(--color-text-muted);text-decoration:none;"><span style="width:16px;height:16px;background:var(--color-border);border-radius:3px;flex-shrink:0;display:inline-block;"></span>Einkauf</a><div style="font-size:8px;font-weight:500;letter-spacing:0.1em;text-transform:uppercase;color:var(--color-text-muted);padding:16px 16px 6px;">Haushalt</div><a style="display:flex;align-items:center;gap:8px;padding:7px 16px;font-size:13px;color:var(--color-text-muted);text-decoration:none;margin:0 8px;"><span style="width:16px;height:16px;background:var(--color-border);border-radius:3px;flex-shrink:0;display:inline-block;"></span>Mitglieder</a><a style="display:flex;align-items:center;gap:8px;padding:7px 16px;font-size:13px;background:var(--green-tint);color:var(--green-dark);font-weight:500;text-decoration:none;border-radius:var(--radius-md);margin:0 8px;"><span style="width:16px;height:16px;background:var(--green-light);border-radius:3px;flex-shrink:0;display:inline-block;"></span>Einstellungen</a></nav></aside>
|
||
<!-- Settings sub-nav + content -->
|
||
<div style="flex:1;display:flex;">
|
||
<!-- Sub-nav -->
|
||
<div style="width:180px;flex-shrink:0;border-right:1px solid var(--color-border);background:var(--color-surface);padding:32px 0;">
|
||
<div style="font-size:8px;font-weight:500;letter-spacing:0.1em;text-transform:uppercase;color:var(--color-text-muted);padding:0 16px 12px;">Einstellungen</div>
|
||
<a style="display:block;padding:8px 16px;font-size:13px;background:var(--green-tint);color:var(--green-dark);font-weight:500;text-decoration:none;border-radius:var(--radius-md);margin:0 8px 2px;">Vorräte</a>
|
||
<a style="display:block;padding:8px 16px;font-size:13px;color:var(--color-text-muted);text-decoration:none;margin:0 8px 2px;">Profil</a>
|
||
<a style="display:block;padding:8px 16px;font-size:13px;color:var(--color-text-muted);text-decoration:none;margin:0 8px 2px;">Haushalt</a>
|
||
</div>
|
||
<!-- Content: Staples -->
|
||
<main style="flex:1;padding:32px 40px;overflow:hidden;">
|
||
<div style="display:flex;align-items:baseline;gap:12px;margin-bottom:24px;">
|
||
<h2 style="font-family:var(--font-display);font-size:22px;font-weight:500;letter-spacing:-0.02em;">Vorräte</h2>
|
||
<span style="font-size:13px;color:var(--color-text-muted);">14 von 32 aktiv</span>
|
||
</div>
|
||
<div style="font-size:13px;color:var(--color-text-muted);margin-bottom:20px;line-height:1.5;">Tippe eine Zutat an um den Vorrats-Status zu ändern. Automatisch gespeichert.</div>
|
||
<div style="margin-bottom:18px;">
|
||
<div style="font-size:10px;font-weight:500;letter-spacing:0.08em;text-transform:uppercase;color:var(--color-text-muted);margin-bottom:8px;">Gemüse</div>
|
||
<div style="display:flex;flex-wrap:wrap;gap:7px;">
|
||
<span style="padding:6px 13px;border-radius:var(--radius-full);font-size:13px;font-weight:500;background:var(--green-dark);color:#fff;cursor:pointer;">Karotten</span>
|
||
<span style="padding:6px 13px;border-radius:var(--radius-full);font-size:13px;font-weight:500;background:var(--green-dark);color:#fff;cursor:pointer;">Zwiebeln</span>
|
||
<span style="padding:6px 13px;border-radius:var(--radius-full);font-size:13px;font-weight:400;background:transparent;color:var(--color-text-muted);border:1px solid var(--color-border);cursor:pointer;">Lauch</span>
|
||
<span style="padding:6px 13px;border-radius:var(--radius-full);font-size:13px;font-weight:500;background:var(--green-dark);color:#fff;cursor:pointer;">Knoblauch</span>
|
||
<span style="padding:6px 13px;border-radius:var(--radius-full);font-size:13px;font-weight:400;background:transparent;color:var(--color-text-muted);border:1px solid var(--color-border);cursor:pointer;">Fenchel</span>
|
||
<span style="padding:6px 13px;border-radius:var(--radius-full);font-size:13px;font-weight:500;background:var(--green-dark);color:#fff;cursor:pointer;">Paprika</span>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<div style="font-size:10px;font-weight:500;letter-spacing:0.08em;text-transform:uppercase;color:var(--color-text-muted);margin-bottom:8px;">Getreide</div>
|
||
<div style="display:flex;flex-wrap:wrap;gap:7px;">
|
||
<span style="padding:6px 13px;border-radius:var(--radius-full);font-size:13px;font-weight:500;background:var(--green-dark);color:#fff;cursor:pointer;">Pasta</span>
|
||
<span style="padding:6px 13px;border-radius:var(--radius-full);font-size:13px;font-weight:500;background:var(--green-dark);color:#fff;cursor:pointer;">Reis</span>
|
||
<span style="padding:6px 13px;border-radius:var(--radius-full);font-size:13px;font-weight:400;background:transparent;color:var(--color-text-muted);border:1px solid var(--color-border);cursor:pointer;">Couscous</span>
|
||
<span style="padding:6px 13px;border-radius:var(--radius-full);font-size:13px;font-weight:500;background:var(--green-dark);color:#fff;cursor:pointer;">Mehl</span>
|
||
</div>
|
||
</div>
|
||
</main>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="preview-m-wrap">
|
||
<div class="preview-label">Mobile · 390px (Drill-down)</div>
|
||
<div class="preview-m-clip">
|
||
<div class="preview-m-scale">
|
||
<div style="width:390px;min-height:680px;background:var(--color-page);display:flex;flex-direction:column;">
|
||
<div style="padding:16px 20px 12px;display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--color-border);background:var(--color-surface);">
|
||
<div style="font-size:18px;color:var(--color-text-muted);">←</div>
|
||
<div style="font-family:var(--font-display);font-size:18px;font-weight:500;">Vorräte</div>
|
||
<div style="flex:1;text-align:right;font-size:12px;color:var(--color-text-muted);">14 aktiv</div>
|
||
</div>
|
||
<div style="flex:1;padding:16px 20px;">
|
||
<div style="font-size:10px;font-weight:500;letter-spacing:0.08em;text-transform:uppercase;color:var(--color-text-muted);margin-bottom:10px;">Gemüse</div>
|
||
<div style="display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px;">
|
||
<span style="padding:6px 12px;border-radius:var(--radius-full);font-size:12px;font-weight:500;background:var(--green-dark);color:#fff;">Karotten</span>
|
||
<span style="padding:6px 12px;border-radius:var(--radius-full);font-size:12px;font-weight:500;background:var(--green-dark);color:#fff;">Zwiebeln</span>
|
||
<span style="padding:6px 12px;border-radius:var(--radius-full);font-size:12px;font-weight:400;background:transparent;color:var(--color-text-muted);border:1px solid var(--color-border);">Lauch</span>
|
||
<span style="padding:6px 12px;border-radius:var(--radius-full);font-size:12px;font-weight:500;background:var(--green-dark);color:#fff;">Knoblauch</span>
|
||
</div>
|
||
<div style="font-size:10px;font-weight:500;letter-spacing:0.08em;text-transform:uppercase;color:var(--color-text-muted);margin-bottom:10px;">Getreide</div>
|
||
<div style="display:flex;flex-wrap:wrap;gap:6px;">
|
||
<span style="padding:6px 12px;border-radius:var(--radius-full);font-size:12px;font-weight:500;background:var(--green-dark);color:#fff;">Pasta</span>
|
||
<span style="padding:6px 12px;border-radius:var(--radius-full);font-size:12px;font-weight:500;background:var(--green-dark);color:#fff;">Reis</span>
|
||
<span style="padding:6px 12px;border-radius:var(--radius-full);font-size:12px;font-weight:400;background:transparent;color:var(--color-text-muted);border:1px solid var(--color-border);">Couscous</span>
|
||
<span style="padding:6px 12px;border-radius:var(--radius-full);font-size:12px;font-weight:500;background:var(--green-dark);color:#fff;">Mehl</span>
|
||
</div>
|
||
</div>
|
||
<nav style="background:var(--color-surface);border-top:1px solid var(--color-border);padding:8px 0 20px;display:flex;"><a style="flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;font-size:10px;color:var(--color-text-muted);text-decoration:none;padding:4px 0;"><span style="width:20px;height:20px;background:var(--color-border);border-radius:3px;display:inline-block;"></span>Planer</a><a style="flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;font-size:10px;color:var(--color-text-muted);text-decoration:none;padding:4px 0;"><span style="width:20px;height:20px;background:var(--color-border);border-radius:3px;display:inline-block;"></span>Rezepte</a><a style="flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;font-size:10px;color:var(--color-text-muted);text-decoration:none;padding:4px 0;"><span style="width:20px;height:20px;background:var(--color-border);border-radius:3px;display:inline-block;"></span>Einkauf</a><a style="flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;font-size:10px;color:var(--green-dark);font-weight:500;text-decoration:none;padding:4px 0;"><span style="width:20px;height:20px;background:var(--green-light);border-radius:3px;display:inline-block;"></span>Einstellungen</a></nav>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="var-notes">
|
||
<div class="var-notes-label">Design-Entscheidungen</div>
|
||
<ul>
|
||
<li>Dreifache Navigationsstruktur auf Desktop (App-Sidebar → Settings-Sub-Nav → Inhalt) ist für 3 Einstellungsbereiche Overkill. Skaliert erst ab 6+ Bereichen.</li>
|
||
<li>Vorrat als Default-Selektion in der Sub-Nav sinnvoll — direktester Einstieg für J8. Verhindert eine "leere Hub"-Seite.</li>
|
||
<li>Mobile-Drill-down: Sub-Nav-Liste → Unterseite. Entspricht dem Standard-Mobile-Pattern (z. B. iOS Systemeinstellungen). Klare Navigation, aber erfordert eine Zurück-Navigation.</li>
|
||
<li>Nicht empfohlen für v1: zu viel Struktur für zu wenig Inhalt. V3 (Akkordeon) ist einfacher und erreicht dasselbe Ergebnis ohne Sub-Navigation.</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<!-- ══════════════════════════════════════
|
||
V5 — DASHBOARD WITH SHORTCUT
|
||
══════════════════════════════════════ -->
|
||
<div class="variation">
|
||
<div class="var-header">
|
||
<div class="var-num">V5</div>
|
||
<div class="var-meta">
|
||
<div class="var-title">Schnellzugriff-Dashboard</div>
|
||
<div class="var-desc">Settings als kleines Dashboard: Haushalt-Zusammenfassung oben (Name + Mitgliederzahl), darunter ein prominenter "Vorräte bearbeiten" Einstieg mit aktuellem Zählstand und zuletzt bearbeiteten Chips als Vorschau. Alles auf einer Seite — kein Drill-down.</div>
|
||
<span class="var-tag">Informationsdicht · klarer Schwerpunkt</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="preview-pair">
|
||
<div class="preview-d-wrap">
|
||
<div class="preview-label">Desktop · 1200px</div>
|
||
<div class="preview-d-clip">
|
||
<div class="preview-d-scale">
|
||
<div style="display:flex;width:1200px;min-height:680px;background:var(--color-page);">
|
||
<aside style="width:224px;flex-shrink:0;background:var(--color-surface);border-right:1px solid var(--color-border);padding:0;display:flex;flex-direction:column;min-height:680px;"><div style="padding:18px 16px 16px;border-bottom:1px solid var(--color-border);display:flex;align-items:center;gap:10px;"><div style="width:22px;height:22px;background:var(--green);border-radius:5px;flex-shrink:0;"></div><div><div style="font-family:var(--font-display);font-size:15px;font-weight:500;color:var(--color-text);">Mealprep</div><div style="font-size:10px;color:var(--color-text-muted);">Familie Raddatz</div></div></div><nav style="padding:16px 0;flex:1;"><div style="font-size:8px;font-weight:500;letter-spacing:0.1em;text-transform:uppercase;color:var(--color-text-muted);padding:0 16px 6px;">Plan</div><a style="display:flex;align-items:center;gap:8px;padding:7px 16px;font-size:13px;color:var(--color-text-muted);text-decoration:none;"><span style="width:16px;height:16px;background:var(--color-border);border-radius:3px;flex-shrink:0;display:inline-block;"></span>Planer</a><a style="display:flex;align-items:center;gap:8px;padding:7px 16px;font-size:13px;color:var(--color-text-muted);text-decoration:none;"><span style="width:16px;height:16px;background:var(--color-border);border-radius:3px;flex-shrink:0;display:inline-block;"></span>Rezepte</a><a style="display:flex;align-items:center;gap:8px;padding:7px 16px;font-size:13px;color:var(--color-text-muted);text-decoration:none;"><span style="width:16px;height:16px;background:var(--color-border);border-radius:3px;flex-shrink:0;display:inline-block;"></span>Einkauf</a><div style="font-size:8px;font-weight:500;letter-spacing:0.1em;text-transform:uppercase;color:var(--color-text-muted);padding:16px 16px 6px;">Haushalt</div><a style="display:flex;align-items:center;gap:8px;padding:7px 16px;font-size:13px;color:var(--color-text-muted);text-decoration:none;margin:0 8px;"><span style="width:16px;height:16px;background:var(--color-border);border-radius:3px;flex-shrink:0;display:inline-block;"></span>Mitglieder</a><a style="display:flex;align-items:center;gap:8px;padding:7px 16px;font-size:13px;background:var(--green-tint);color:var(--green-dark);font-weight:500;text-decoration:none;border-radius:var(--radius-md);margin:0 8px;"><span style="width:16px;height:16px;background:var(--green-light);border-radius:3px;flex-shrink:0;display:inline-block;"></span>Einstellungen</a></nav></aside>
|
||
<main style="flex:1;padding:40px 56px;">
|
||
<!-- Profile strip -->
|
||
<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:32px;padding-bottom:24px;border-bottom:1px solid var(--color-border);">
|
||
<div style="display:flex;align-items:center;gap:14px;">
|
||
<div style="width:44px;height:44px;border-radius:50%;background:var(--green-tint);display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:600;color:var(--green-dark);">MR</div>
|
||
<div><div style="font-size:16px;font-weight:500;">Marcel Raddatz</div><div style="font-size:13px;color:var(--color-text-muted);">marcel@email.com · Planner</div></div>
|
||
</div>
|
||
<button style="font-family:var(--font-sans);font-size:12px;font-weight:500;padding:7px 14px;border-radius:var(--radius-md);background:var(--color-surface);border:1px solid var(--color-border);cursor:pointer;">Profil bearbeiten</button>
|
||
</div>
|
||
<!-- Main area: Staples primary + Household secondary -->
|
||
<div style="display:grid;grid-template-columns:2fr 1fr;gap:20px;max-width:820px;">
|
||
<!-- Staples primary block -->
|
||
<div style="background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-xl);padding:28px;box-shadow:var(--shadow-card);">
|
||
<div style="display:flex;align-items:baseline;gap:12px;margin-bottom:6px;">
|
||
<div style="font-size:16px;font-weight:500;">Vorräte</div>
|
||
<div style="font-family:var(--font-display);font-size:28px;font-weight:300;color:var(--green-dark);letter-spacing:-0.02em;line-height:1;">14</div>
|
||
<div style="font-size:12px;color:var(--color-text-muted);">von 32 aktiv</div>
|
||
</div>
|
||
<div style="font-size:13px;color:var(--color-text-muted);margin-bottom:18px;">Immer vorhandene Zutaten werden automatisch aus Einkaufslisten gefiltert.</div>
|
||
<!-- Chip preview -->
|
||
<div style="display:flex;flex-wrap:wrap;gap:6px;margin-bottom:18px;">
|
||
<span style="padding:5px 11px;border-radius:var(--radius-full);font-size:12px;font-weight:500;background:var(--green-dark);color:#fff;">Karotten</span>
|
||
<span style="padding:5px 11px;border-radius:var(--radius-full);font-size:12px;font-weight:500;background:var(--green-dark);color:#fff;">Pasta</span>
|
||
<span style="padding:5px 11px;border-radius:var(--radius-full);font-size:12px;font-weight:500;background:var(--green-dark);color:#fff;">Zwiebeln</span>
|
||
<span style="padding:5px 11px;border-radius:var(--radius-full);font-size:12px;font-weight:500;background:var(--green-dark);color:#fff;">Reis</span>
|
||
<span style="padding:5px 11px;border-radius:var(--radius-full);font-size:12px;color:var(--color-text-muted);border:1px solid var(--color-border);">+10 weitere</span>
|
||
</div>
|
||
<button style="background:var(--green-dark);color:#fff;font-family:var(--font-sans);font-size:13px;font-weight:500;letter-spacing:0.04em;padding:10px 20px;border-radius:var(--radius-md);border:none;cursor:pointer;">Alle Vorräte bearbeiten</button>
|
||
</div>
|
||
<!-- Household secondary -->
|
||
<div style="background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-xl);padding:24px;display:flex;flex-direction:column;gap:12px;">
|
||
<div style="font-size:15px;font-weight:500;">Haushalt</div>
|
||
<div style="font-family:var(--font-display);font-size:32px;font-weight:300;color:var(--color-text-muted);line-height:1;">3</div>
|
||
<div style="font-size:12px;color:var(--color-text-muted);">Mitglieder · Familie Raddatz</div>
|
||
<div style="flex:1;"></div>
|
||
<button style="font-family:var(--font-sans);font-size:12px;font-weight:500;padding:8px 14px;border-radius:var(--radius-md);background:var(--color-page);border:1px solid var(--color-border);cursor:pointer;">Verwalten</button>
|
||
</div>
|
||
</div>
|
||
</main>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="preview-m-wrap">
|
||
<div class="preview-label">Mobile · 390px</div>
|
||
<div class="preview-m-clip">
|
||
<div class="preview-m-scale">
|
||
<div style="width:390px;min-height:680px;background:var(--color-page);display:flex;flex-direction:column;">
|
||
<!-- Profile strip -->
|
||
<div style="padding:16px 20px;border-bottom:1px solid var(--color-border);background:var(--color-surface);display:flex;align-items:center;gap:12px;">
|
||
<div style="width:36px;height:36px;border-radius:50%;background:var(--green-tint);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;color:var(--green-dark);flex-shrink:0;">MR</div>
|
||
<div style="flex:1;"><div style="font-size:14px;font-weight:500;">Marcel Raddatz</div><div style="font-size:11px;color:var(--color-text-muted);">Planner · Familie Raddatz</div></div>
|
||
</div>
|
||
<div style="flex:1;padding:16px 20px;display:flex;flex-direction:column;gap:12px;">
|
||
<!-- Staples block -->
|
||
<div style="background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:18px;">
|
||
<div style="display:flex;align-items:baseline;gap:10px;margin-bottom:10px;"><div style="font-size:15px;font-weight:500;">Vorräte</div><div style="font-family:var(--font-display);font-size:24px;font-weight:300;color:var(--green-dark);line-height:1;">14</div><div style="font-size:11px;color:var(--color-text-muted);">von 32</div></div>
|
||
<div style="display:flex;flex-wrap:wrap;gap:5px;margin-bottom:14px;">
|
||
<span style="padding:4px 10px;border-radius:var(--radius-full);font-size:11px;font-weight:500;background:var(--green-dark);color:#fff;">Karotten</span>
|
||
<span style="padding:4px 10px;border-radius:var(--radius-full);font-size:11px;font-weight:500;background:var(--green-dark);color:#fff;">Pasta</span>
|
||
<span style="padding:4px 10px;border-radius:var(--radius-full);font-size:11px;font-weight:500;background:var(--green-dark);color:#fff;">Zwiebeln</span>
|
||
<span style="padding:4px 10px;border-radius:var(--radius-full);font-size:11px;color:var(--color-text-muted);border:1px solid var(--color-border);">+11</span>
|
||
</div>
|
||
<button style="width:100%;background:var(--green-dark);color:#fff;font-size:13px;font-weight:500;padding:10px;border-radius:var(--radius-md);border:none;">Vorräte bearbeiten</button>
|
||
</div>
|
||
<!-- Household -->
|
||
<div style="background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:18px;display:flex;align-items:center;justify-content:space-between;">
|
||
<div><div style="font-size:14px;font-weight:500;">Haushalt</div><div style="font-size:12px;color:var(--color-text-muted);">Familie Raddatz · 3 Mitglieder</div></div>
|
||
<button style="font-size:12px;font-weight:500;padding:7px 14px;border-radius:var(--radius-md);background:var(--color-page);border:1px solid var(--color-border);cursor:pointer;">→</button>
|
||
</div>
|
||
</div>
|
||
<nav style="background:var(--color-surface);border-top:1px solid var(--color-border);padding:8px 0 20px;display:flex;"><a style="flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;font-size:10px;color:var(--color-text-muted);text-decoration:none;padding:4px 0;"><span style="width:20px;height:20px;background:var(--color-border);border-radius:3px;display:inline-block;"></span>Planer</a><a style="flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;font-size:10px;color:var(--color-text-muted);text-decoration:none;padding:4px 0;"><span style="width:20px;height:20px;background:var(--color-border);border-radius:3px;display:inline-block;"></span>Rezepte</a><a style="flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;font-size:10px;color:var(--color-text-muted);text-decoration:none;padding:4px 0;"><span style="width:20px;height:20px;background:var(--color-border);border-radius:3px;display:inline-block;"></span>Einkauf</a><a style="flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;font-size:10px;color:var(--green-dark);font-weight:500;text-decoration:none;padding:4px 0;"><span style="width:20px;height:20px;background:var(--green-light);border-radius:3px;display:inline-block;"></span>Einstellungen</a></nav>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="var-notes">
|
||
<div class="var-notes-label">Design-Entscheidungen</div>
|
||
<ul>
|
||
<li>Chip-Vorschau auf der Hub-Seite (4 aktive Vorräte + "+10 weitere") gibt dem Nutzer sofort Kontext über den aktuellen Zustand — kein Klick nötig um zu verstehen, was konfiguriert ist.</li>
|
||
<li>Profil-Leiste oben als Identitätsanker: Name, E-Mail, Rolle. Schafft eine klare "Wer bin ich in diesem Haushalt"-Aussage ohne eigene Profil-Seite besuchen zu müssen.</li>
|
||
<li>2:1 Grid-Layout auf Desktop betont Vorräte als primäre Einstellung — genau das richtige Gewicht für J8.</li>
|
||
<li>Nachteil: Der "Alle Vorräte bearbeiten"-Button navigiert trotzdem zur D3-Unterseite (oder öffnet ein Modal). Keine wirklich inline-Bearbeitung wie bei V3. Funktioniert aber gut als Schnellzugriff-Übersicht.</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
</div><!-- /doc -->
|
||
|
||
|
||
<!-- ═══════════════════════════════════════════════════════
|
||
MACHINE-READABLE SPEC (LLM AGENT REGION)
|
||
════════════════════════════════════════════════════════ -->
|
||
<!--
|
||
spec:agent:start
|
||
document: E1 Settings + D3 Staples
|
||
version: 1.0
|
||
-->
|
||
<div class="agent-section">
|
||
<h2>Machine-readable spec — E1 Einstellungen / D3 Vorräte</h2>
|
||
<p>Authoritative implementation reference for /settings and /household/staples?ctx=settings. Use before building either page.</p>
|
||
|
||
<pre class="spec-comment">/* E1 Settings + D3 Staples — implementation rules
|
||
* 1. Recommended variation: V3 (Accordion). Vorräte section is open by default. No navigation to sub-page required.
|
||
* 2. D3 = A3: StaplesManager is the same component. context="settings" removes the onboarding sidebar and "Weiter" button.
|
||
* 3. StapleChip renders as a pill button, NOT a checkbox. Selected = --green-dark bg + white text. Unselected = transparent bg + --color-border border + --color-text-muted text.
|
||
* 4. Auto-save on toggle. No explicit save button. The component already implements debounced PATCH to /household/staples.
|
||
* 5. Category label: font-size 10px · font-weight 500 · letter-spacing 0.08em · text-transform uppercase · color --color-text-muted.
|
||
* 6. Staple count display ("14 von 32 aktiv"): derive from categories prop — count isStaple=true vs total ingredients.
|
||
* 7. Sidebar active item: "Einstellungen" (not "Vorräte" — there is no separate Vorräte sidebar item). Active style: --green-tint bg + --green-dark text.
|
||
* 8. Mobile bottom nav active tab: "Einstellungen". Same for both /settings and /household/staples routes.
|
||
* 9. Accordion trigger shows current stat in collapsed state: "14 aktiv" for Vorräte. Stat updates reactively as user toggles chips.
|
||
* 10. Changes to staples (J8) do NOT retroactively update an already-generated shopping list. If the current list should reflect changes, the planner must regenerate it via J5. Consider a note in the UI: "Gilt ab der nächsten Einkaufsliste."
|
||
* 11. Profile section: show name + email. Edit action navigates to /profile or opens an inline form. Not in scope for J8 — implement minimally.
|
||
*/</pre>
|
||
|
||
<table class="agent-table">
|
||
<thead>
|
||
<tr><th>Element</th><th>Value / Rule</th><th>Notes</th></tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr class="group-row"><td colspan="3">StapleChip</td></tr>
|
||
<tr><td>Shape</td><td>border-radius: --radius-full · padding: 6px 14px</td><td>font-size: 13px (desktop) · 12px (mobile)</td></tr>
|
||
<tr><td>Selected state</td><td>background: --green-dark · color: #fff · font-weight: 500</td><td>Toggle off: PATCH ingredient isStaple=false</td></tr>
|
||
<tr><td>Unselected state</td><td>background: transparent · border: 1px solid --color-border · color: --color-text-muted · font-weight: 400</td><td>Toggle on: PATCH ingredient isStaple=true</td></tr>
|
||
<tr><td>Debounce</td><td>300ms after last toggle before PATCH fires</td><td>Already implemented in StaplesManager. Do not add extra debounce layers.</td></tr>
|
||
<tr><td>Error state</td><td>Revert chip to previous state · show inline error message</td><td>StaplesManager already handles rollback on API error</td></tr>
|
||
<tr class="group-row"><td colspan="3">Category section</td></tr>
|
||
<tr><td>Label</td><td>10px · weight 500 · tracking 0.08em · uppercase · --color-text-muted</td><td>German category names from API</td></tr>
|
||
<tr><td>Chip grid</td><td>display: flex · flex-wrap: wrap · gap: 7px (desktop) · 6px (mobile)</td><td>No fixed column count — chips wrap naturally</td></tr>
|
||
<tr class="group-row"><td colspan="3">Settings page (E1) — V3 Accordion</td></tr>
|
||
<tr><td>Vorräte section</td><td>Open by default on page load</td><td>Use Svelte derived state or URL hash to control. Default open state.</td></tr>
|
||
<tr><td>Collapsed stat</td><td>Show "N aktiv" reactively next to chevron</td><td>Derive from stapleState in StaplesManager — count true values</td></tr>
|
||
<tr><td>Accordion trigger min-height</td><td>48px (desktop) · 44px (mobile)</td><td>WCAG: interactive controls must have 44px min touch target</td></tr>
|
||
<tr><td>Accordion chevron</td><td>▲ (open) / ▼ (closed) · color: --color-text-muted</td><td>Or use CSS transform on a single chevron SVG</td></tr>
|
||
<tr class="group-row"><td colspan="3">Responsive</td></tr>
|
||
<tr><td>Desktop (≥1024px)</td><td>224px app sidebar + content area (max-width ~680px centered)</td><td>Active sidebar: "Einstellungen" (Haushalt section)</td></tr>
|
||
<tr><td>Mobile (<768px)</td><td>No sidebar · bottom nav "Einstellungen" active · accordion stacks full-width</td><td>Chips wrap to multiple lines — no truncation</td></tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
<!--
|
||
spec:agent:end
|
||
-->
|
||
|
||
</body>
|
||
</html>
|