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>
1065 lines
71 KiB
HTML
1065 lines
71 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Planner Hauptbereich — 5 Ideen für den leeren Raum</title>
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<link href="https://fonts.googleapis.com/css2?family=Fraunces:wght@300;400&family=DM+Sans:wght@400;500;600&family=DM+Mono&display=swap" rel="stylesheet">
|
||
<style>
|
||
:root {
|
||
--color-page: #fafaf7;
|
||
--color-surface: #f5f4ee;
|
||
--color-subtle: #edecea;
|
||
--color-border: #d8d7d0;
|
||
--color-text: #1c1c18;
|
||
--color-text-muted:#6b6a63;
|
||
--green-tint: #e8f5ea;
|
||
--green-light: #aedcb0;
|
||
--green: #3d8c4a;
|
||
--green-dark: #2e6e39;
|
||
--yellow-tint: #fdf6d8;
|
||
--yellow-light:#f9e08a;
|
||
--yellow: #f2c12e;
|
||
--yellow-text: #8a6800;
|
||
--blue-tint: #e6f1fb;
|
||
--blue-dark: #185fa5;
|
||
--purple-tint: #eeedfe;
|
||
--purple: #534ab7;
|
||
--orange-tint: #fef0e6;
|
||
--orange: #e8862a;
|
||
--orange-dark: #b46820;
|
||
--color-error: #dc4c3e;
|
||
--radius-xs: 2px;
|
||
--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);
|
||
--font-display: 'Fraunces', Georgia, serif;
|
||
--font-sans: 'DM Sans', system-ui, sans-serif;
|
||
--font-mono: 'DM Mono', monospace;
|
||
}
|
||
|
||
*{box-sizing:border-box;margin:0;padding:0;}
|
||
body{
|
||
font-family:var(--font-sans);
|
||
background:#e0dfda;
|
||
color:var(--color-text);
|
||
padding:40px 24px 80px;
|
||
line-height:1.4;
|
||
}
|
||
|
||
/* ── Spec chrome ─────────────────────────────── */
|
||
.page-eyebrow{font-family:var(--font-sans);font-size:11px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--color-text-muted);margin-bottom:6px;}
|
||
.page-title{font-family:var(--font-display);font-size:36px;font-weight:300;color:var(--color-text);margin-bottom:8px;}
|
||
.page-sub{font-family:var(--font-sans);font-size:14px;color:var(--color-text-muted);max-width:680px;line-height:1.6;margin-bottom:48px;}
|
||
|
||
.card{background:var(--color-page);border-radius:var(--radius-xl);border:1px solid var(--color-border);overflow:hidden;margin-bottom:64px;box-shadow:var(--shadow-raised);}
|
||
.card-header{display:flex;align-items:baseline;gap:12px;padding:18px 24px 14px;border-bottom:1px solid var(--color-border);background:var(--color-surface);}
|
||
.card-num{font-family:var(--font-mono);font-size:11px;background:var(--color-subtle);color:var(--color-text-muted);padding:2px 7px;border-radius:var(--radius-sm);flex-shrink:0;}
|
||
.card-name{font-family:var(--font-display);font-size:20px;font-weight:300;}
|
||
.card-desc{font-family:var(--font-sans);font-size:12px;color:var(--color-text-muted);margin-left:auto;}
|
||
.card-body{padding:24px;}
|
||
|
||
.note{font-family:var(--font-sans);font-size:12px;color:var(--color-text-muted);border-left:3px solid var(--color-border);padding:10px 14px;margin:0 24px 24px;line-height:1.6;}
|
||
.note strong{color:var(--color-text);font-weight:500;}
|
||
|
||
/* ── Shared desktop frame ────────────────────── */
|
||
.frame{
|
||
display:flex;flex-direction:column;
|
||
background:var(--color-page);
|
||
border:1px solid var(--color-border);
|
||
border-radius:var(--radius-lg);
|
||
overflow:hidden;
|
||
}
|
||
.topbar{
|
||
display:flex;align-items:center;gap:8px;
|
||
padding:11px 18px;
|
||
border-bottom:1px solid var(--color-border);
|
||
background:var(--color-page);
|
||
flex-shrink:0;
|
||
}
|
||
.t-h1{font-family:var(--font-display);font-size:17px;font-weight:300;}
|
||
.t-range{font-family:var(--font-sans);font-size:11px;color:var(--color-text-muted);}
|
||
.t-arrow{width:28px;height:28px;display:flex;align-items:center;justify-content:center;border:1px solid var(--color-border);border-radius:var(--radius-md);font-size:13px;color:var(--color-text-muted);}
|
||
.t-btn{height:28px;padding:0 10px;border:1px solid var(--color-border);border-radius:var(--radius-md);font-family:var(--font-sans);font-size:11px;font-weight:500;letter-spacing:.04em;color:var(--color-text);background:var(--color-page);white-space:nowrap;}
|
||
.t-btn-primary{background:var(--green-dark);color:white;border-color:transparent;}
|
||
.t-ml{margin-left:auto;}
|
||
|
||
.body{display:flex;flex:1;overflow:hidden;}
|
||
|
||
/* ── Sidebar ─────────────────────────────────── */
|
||
.sidebar{
|
||
width:188px;flex-shrink:0;
|
||
border-right:1px solid var(--color-border);
|
||
background:var(--color-surface);
|
||
padding:14px;
|
||
display:flex;flex-direction:column;gap:14px;
|
||
overflow-y:auto;
|
||
}
|
||
.s-label{font-family:var(--font-sans);font-size:10px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--color-text-muted);margin-bottom:6px;}
|
||
.score-card{background:var(--yellow-tint);border:1px solid var(--yellow-light);border-radius:var(--radius-md);padding:10px;}
|
||
.score-big{font-family:var(--font-display);font-size:28px;font-weight:300;line-height:1;}
|
||
.score-denom{font-family:var(--font-sans);font-size:11px;color:var(--color-text-muted);}
|
||
.pbar{height:4px;border-radius:9999px;background:var(--yellow-light);overflow:hidden;margin-top:6px;}
|
||
.pbar-fill{height:100%;border-radius:9999px;background:var(--yellow);}
|
||
.pbar-fill-green{background:var(--green);}
|
||
.pbar-track{background:var(--color-border);}
|
||
.sub-row{display:flex;align-items:center;gap:6px;margin-top:7px;}
|
||
.sub-lbl{font-family:var(--font-sans);font-size:10px;color:var(--color-text-muted);width:72px;flex-shrink:0;}
|
||
.sub-bar{flex:1;height:3px;border-radius:9999px;background:var(--color-border);overflow:hidden;}
|
||
.sub-fill{height:100%;border-radius:9999px;}
|
||
.sub-val{font-family:var(--font-mono);font-size:9px;color:var(--color-text-muted);width:18px;text-align:right;}
|
||
.warn{font-family:var(--font-sans);font-size:10px;color:var(--yellow-text);margin-top:5px;line-height:1.4;}
|
||
.s-link{font-family:var(--font-sans);font-size:10px;font-weight:500;color:var(--yellow-text);margin-top:7px;display:block;}
|
||
.day-progress{display:flex;gap:2px;margin-top:6px;}
|
||
.dp-seg{flex:1;height:4px;border-radius:9999px;}
|
||
|
||
/* ── Right panel ─────────────────────────────── */
|
||
.rp{width:232px;flex-shrink:0;border-left:1px solid var(--color-border);background:var(--color-page);padding:14px;display:flex;flex-direction:column;overflow-y:auto;}
|
||
.rp-label{font-family:var(--font-sans);font-size:10px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--color-text-muted);margin-bottom:8px;}
|
||
.rp-name{font-family:var(--font-display);font-size:16px;font-weight:300;line-height:1.35;}
|
||
.rp-meta{font-family:var(--font-sans);font-size:11px;color:var(--color-text-muted);margin-top:3px;}
|
||
.rp-btn{display:block;width:100%;padding:7px;border-radius:var(--radius-md);border:1px solid var(--color-border);background:var(--color-page);font-family:var(--font-sans);font-size:11px;font-weight:500;letter-spacing:.04em;text-align:center;color:var(--color-text);margin-top:5px;}
|
||
.rp-btn-p{background:var(--green-dark);color:white;border-color:transparent;}
|
||
.rp-btn-danger{color:var(--color-error);border-color:var(--color-error);}
|
||
.divider{height:1px;background:var(--color-border);margin:10px 0;}
|
||
|
||
/* ── Main scrollable area ────────────────────── */
|
||
.main{flex:1;overflow-y:auto;padding:14px;}
|
||
|
||
/* ── Calendar grid ───────────────────────────── */
|
||
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;}
|
||
.col-head{text-align:center;margin-bottom:5px;}
|
||
.day-abbr{font-family:var(--font-sans);font-size:9px;text-transform:uppercase;letter-spacing:.06em;color:var(--color-text-muted);}
|
||
.day-badge{width:20px;height:20px;border-radius:9999px;display:flex;align-items:center;justify-content:center;font-family:var(--font-sans);font-size:10px;font-weight:500;margin:0 auto 5px;color:var(--color-text);}
|
||
.db-today{background:var(--yellow);color:white;}
|
||
.db-sel{background:var(--green-tint);color:var(--green-dark);}
|
||
.tile{border-radius:var(--radius-md);border:1px solid var(--color-border);background:var(--color-surface);padding:7px;cursor:pointer;box-shadow:var(--shadow-card);}
|
||
.tile-today{border:2px solid var(--yellow);background:var(--yellow-tint);}
|
||
.tile-sel{border:2px solid var(--green);background:var(--green-tint);}
|
||
.tile-empty{border-style:dashed;background:transparent;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--color-text-muted);gap:2px;}
|
||
.t-recipe{font-family:var(--font-display);font-size:11px;font-weight:300;color:var(--color-text);line-height:1.3;}
|
||
.t-meta{font-family:var(--font-sans);font-size:9px;color:var(--color-text-muted);margin-top:2px;}
|
||
.t-badge{display:inline-flex;align-items:center;padding:1px 4px;border-radius:var(--radius-xs);font-family:var(--font-sans);font-size:8px;font-weight:500;margin-top:3px;}
|
||
.b-easy{background:var(--green-tint);color:var(--green-dark);}
|
||
.b-med{background:var(--yellow-tint);color:var(--yellow-text);}
|
||
.b-hard{background:var(--orange-tint);color:var(--orange-dark);}
|
||
.b-protein{background:var(--purple-tint);color:var(--purple);}
|
||
|
||
/* ── Section header ──────────────────────────── */
|
||
.section{margin-top:16px;}
|
||
.section-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid var(--color-border);}
|
||
.section-title{font-family:var(--font-sans);font-size:10px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--color-text-muted);}
|
||
.section-link{font-family:var(--font-sans);font-size:10px;font-weight:500;color:var(--yellow-text);}
|
||
|
||
/* ── A: Sub-score cards ──────────────────────── */
|
||
.score-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:14px;}
|
||
.score-card-item{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:10px;}
|
||
.sci-val{font-family:var(--font-display);font-size:22px;font-weight:300;line-height:1;}
|
||
.sci-denom{font-family:var(--font-sans);font-size:10px;color:var(--color-text-muted);}
|
||
.sci-label{font-family:var(--font-sans);font-size:10px;color:var(--color-text-muted);margin-top:2px;}
|
||
|
||
/* ── A: Protein grid ─────────────────────────── */
|
||
.protein-grid{display:grid;grid-template-columns:80px repeat(7,1fr);gap:4px;align-items:center;}
|
||
.pg-row-label{font-family:var(--font-sans);font-size:10px;color:var(--color-text-muted);text-align:right;padding-right:8px;}
|
||
.pg-cell{height:28px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;font-family:var(--font-sans);font-size:9px;font-weight:500;}
|
||
.pg-fill{background:var(--green-tint);color:var(--green-dark);}
|
||
.pg-fill-warn{background:var(--yellow-tint);color:var(--yellow-text);outline:2px solid var(--yellow);}
|
||
.pg-empty{background:var(--color-subtle);color:transparent;}
|
||
.pg-header{font-family:var(--font-sans);font-size:9px;text-transform:uppercase;letter-spacing:.05em;color:var(--color-text-muted);text-align:center;}
|
||
|
||
/* ── A: Effort bar ───────────────────────────── */
|
||
.effort-bar{display:flex;border-radius:var(--radius-sm);overflow:hidden;height:22px;gap:2px;}
|
||
.eb-seg{display:flex;align-items:center;justify-content:center;font-family:var(--font-sans);font-size:9px;font-weight:500;color:white;}
|
||
|
||
/* ── A: Warning cards ────────────────────────── */
|
||
.warn-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;}
|
||
.warn-card{background:var(--yellow-tint);border:1px solid var(--yellow-light);border-radius:var(--radius-md);padding:9px;}
|
||
.warn-card-title{font-family:var(--font-sans);font-size:11px;font-weight:500;color:var(--color-text);}
|
||
.warn-card-sub{font-family:var(--font-sans);font-size:10px;color:var(--yellow-text);margin-top:3px;}
|
||
.warn-card-link{font-family:var(--font-sans);font-size:10px;font-weight:500;color:var(--green-dark);margin-top:6px;display:block;}
|
||
|
||
/* ── B: Week row ─────────────────────────────── */
|
||
.week-row{margin-bottom:14px;}
|
||
.week-row-label{display:flex;align-items:center;gap:8px;margin-bottom:6px;}
|
||
.wrl-kw{font-family:var(--font-mono);font-size:10px;color:var(--color-text-muted);background:var(--color-subtle);padding:2px 6px;border-radius:var(--radius-sm);}
|
||
.wrl-range{font-family:var(--font-sans);font-size:11px;color:var(--color-text-muted);}
|
||
.wrl-score{font-family:var(--font-mono);font-size:10px;padding:2px 6px;border-radius:var(--radius-sm);}
|
||
.wrl-score-good{background:var(--green-tint);color:var(--green-dark);}
|
||
.wrl-score-mid{background:var(--yellow-tint);color:var(--yellow-text);}
|
||
.wrl-score-empty{background:var(--color-subtle);color:var(--color-text-muted);}
|
||
.wrl-cur{font-family:var(--font-sans);font-size:10px;font-weight:500;color:var(--green-dark);background:var(--green-tint);padding:2px 7px;border-radius:var(--radius-full);}
|
||
|
||
/* ── C: Suggestion cards ─────────────────────── */
|
||
.sug-section{margin-top:4px;margin-bottom:12px;}
|
||
.sug-day-label{font-family:var(--font-sans);font-size:10px;font-weight:500;color:var(--color-text);margin-bottom:6px;display:flex;align-items:center;gap:6px;}
|
||
.sug-empty-badge{font-family:var(--font-sans);font-size:9px;background:var(--color-subtle);color:var(--color-text-muted);padding:1px 5px;border-radius:var(--radius-full);}
|
||
.sug-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;}
|
||
.sug-card{border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface);padding:9px;cursor:pointer;position:relative;}
|
||
.sug-card:hover{border-color:var(--green-light);box-shadow:var(--shadow-raised);}
|
||
.sug-name{font-family:var(--font-display);font-size:12px;font-weight:300;line-height:1.35;color:var(--color-text);}
|
||
.sug-meta{font-family:var(--font-sans);font-size:10px;color:var(--color-text-muted);margin-top:3px;}
|
||
.sug-delta{font-family:var(--font-mono);font-size:9px;font-weight:500;padding:2px 5px;border-radius:var(--radius-xs);margin-top:6px;display:inline-block;}
|
||
.delta-pos{background:var(--green-tint);color:var(--green-dark);}
|
||
.delta-neg{background:#fde8e8;color:var(--color-error);}
|
||
.delta-neu{background:var(--yellow-tint);color:var(--yellow-text);}
|
||
|
||
/* ── D: Shopping list ────────────────────────── */
|
||
.shop-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
|
||
.shop-group{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:10px;}
|
||
.shop-group-title{font-family:var(--font-sans);font-size:10px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--color-text-muted);margin-bottom:8px;padding-bottom:6px;border-bottom:1px solid var(--color-border);}
|
||
.shop-item{display:flex;align-items:flex-start;gap:7px;padding:4px 0;border-bottom:1px solid var(--color-subtle);}
|
||
.shop-item:last-child{border-bottom:none;}
|
||
.shop-check{width:13px;height:13px;border:1.5px solid var(--color-border);border-radius:var(--radius-xs);flex-shrink:0;margin-top:1px;}
|
||
.shop-name{font-family:var(--font-sans);font-size:12px;color:var(--color-text);}
|
||
.shop-source{font-family:var(--font-sans);font-size:10px;color:var(--color-text-muted);margin-top:1px;}
|
||
.shop-item-done .shop-name{color:var(--color-text-muted);text-decoration:line-through;}
|
||
.shop-check-done{background:var(--green);border-color:var(--green);}
|
||
|
||
/* ── E: Expanded day ─────────────────────────── */
|
||
.expand-area{
|
||
margin-top:10px;
|
||
border:2px solid var(--green);
|
||
border-radius:var(--radius-lg);
|
||
background:var(--green-tint);
|
||
padding:14px;
|
||
display:flex;gap:16px;
|
||
}
|
||
.ea-left{flex:1;}
|
||
.ea-name{font-family:var(--font-display);font-size:20px;font-weight:300;line-height:1.3;}
|
||
.ea-meta{font-family:var(--font-sans);font-size:12px;color:var(--color-text-muted);margin-top:4px;}
|
||
.ea-ingredients{display:flex;flex-wrap:wrap;gap:4px;margin-top:10px;}
|
||
.ing-tag{font-family:var(--font-sans);font-size:10px;background:white;border:1px solid var(--color-border);border-radius:var(--radius-full);padding:2px 8px;color:var(--color-text);}
|
||
.ing-tag-staple{background:var(--color-subtle);color:var(--color-text-muted);border-color:var(--color-subtle);}
|
||
.ea-right{display:flex;flex-direction:column;gap:5px;width:120px;flex-shrink:0;}
|
||
.ea-btn{padding:7px;border-radius:var(--radius-md);border:1px solid var(--color-border);background:white;font-family:var(--font-sans);font-size:11px;font-weight:500;text-align:center;cursor:pointer;letter-spacing:.04em;}
|
||
.ea-btn-p{background:var(--green-dark);color:white;border-color:transparent;}
|
||
.ea-btn-danger{color:var(--color-error);border-color:var(--color-error);background:transparent;}
|
||
.ea-arrow{
|
||
position:absolute;
|
||
width:12px;height:12px;
|
||
background:var(--green-tint);
|
||
border-left:2px solid var(--green);
|
||
border-top:2px solid var(--green);
|
||
transform:rotate(45deg);
|
||
top:-7px;left:50%;margin-left:-6px;
|
||
}
|
||
.expand-wrapper{position:relative;}
|
||
|
||
/* ── E: Below-grid continuation ─────────────── */
|
||
.agenda{margin-top:14px;display:flex;flex-direction:column;gap:5px;}
|
||
.agenda-item{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:var(--radius-md);background:var(--color-surface);border:1px solid var(--color-border);}
|
||
.ai-day{font-family:var(--font-sans);font-size:10px;color:var(--color-text-muted);width:52px;flex-shrink:0;}
|
||
.ai-name{font-family:var(--font-display);font-size:13px;font-weight:300;flex:1;}
|
||
.ai-meta{font-family:var(--font-sans);font-size:10px;color:var(--color-text-muted);}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<p class="page-eyebrow">Mealplan · Wochenplaner · Hauptbereich</p>
|
||
<h1 class="page-title">Was kommt unter das Kalender-Grid?</h1>
|
||
<p class="page-sub">
|
||
Das 7-Spalten-Grid nimmt ~150 px ein. Die Main-Area ist die volle Viewport-Höhe.
|
||
Fünf Konzepte, was den Raum darunter sinnvoll füllt — je mit dem gleichen Sidebar (Score oben) und rechtem Panel.
|
||
</p>
|
||
|
||
|
||
<!-- ═══════════════════════════════════════════════════════════════ -->
|
||
<!-- A — INLINE VARIETY DASHBOARD -->
|
||
<!-- ═══════════════════════════════════════════════════════════════ -->
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<span class="card-num">A</span>
|
||
<span class="card-name">Variety-Dashboard direkt im Planer</span>
|
||
<span class="card-desc">Kein separater /planner/variety Tab mehr nötig</span>
|
||
</div>
|
||
|
||
<div class="card-body">
|
||
<div class="frame" style="height:660px;">
|
||
<div class="topbar">
|
||
<span class="t-h1">Wochenplaner</span>
|
||
<span class="t-range">7.–13. Apr</span>
|
||
<div class="t-arrow">‹</div><div class="t-arrow">›</div>
|
||
<button class="t-btn">Heute</button>
|
||
<button class="t-btn t-btn-primary t-ml">+ Gericht hinzufügen</button>
|
||
</div>
|
||
|
||
<div class="body">
|
||
<!-- Sidebar -->
|
||
<div class="sidebar">
|
||
<div class="score-card">
|
||
<div class="s-label">Score</div>
|
||
<div style="display:flex;align-items:baseline;gap:4px;">
|
||
<span class="score-big">7.8</span><span class="score-denom">/10</span>
|
||
</div>
|
||
<div class="pbar"><div class="pbar-fill" style="width:78%;"></div></div>
|
||
<div class="sub-row"><span class="sub-lbl">Protein</span><div class="sub-bar"><div class="sub-fill" style="width:80%;background:var(--green);"></div></div><span class="sub-val">8.0</span></div>
|
||
<div class="sub-row"><span class="sub-lbl">Zutaten</span><div class="sub-bar"><div class="sub-fill" style="width:72%;background:var(--yellow);"></div></div><span class="sub-val">7.2</span></div>
|
||
<div class="sub-row"><span class="sub-lbl">Aufwand</span><div class="sub-bar"><div class="sub-fill" style="width:82%;background:var(--green);"></div></div><span class="sub-val">8.2</span></div>
|
||
</div>
|
||
<div>
|
||
<div class="s-label">Warnungen</div>
|
||
<div class="warn">⚠ Hähnchen an 3 Tagen</div>
|
||
<div class="warn">⚠ Tomaten an Di, Do</div>
|
||
</div>
|
||
<div>
|
||
<div class="s-label">Geplant</div>
|
||
<div style="display:flex;align-items:baseline;gap:3px;"><span style="font-family:var(--font-display);font-size:20px;font-weight:300;">5</span><span style="font-family:var(--font-sans);font-size:10px;color:var(--color-text-muted);">/ 7 Tage</span></div>
|
||
<div class="day-progress">
|
||
<div class="dp-seg" style="background:var(--green);"></div>
|
||
<div class="dp-seg" style="background:var(--green);"></div>
|
||
<div class="dp-seg" style="background:var(--green);"></div>
|
||
<div class="dp-seg" style="background:var(--green);"></div>
|
||
<div class="dp-seg" style="background:var(--green);"></div>
|
||
<div class="dp-seg" style="background:var(--color-border);"></div>
|
||
<div class="dp-seg" style="background:var(--color-border);"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- MAIN -->
|
||
<div class="main">
|
||
<!-- Calendar -->
|
||
<div class="cal-grid">
|
||
<div><div class="col-head"><div class="day-abbr">Mo</div><div class="day-badge">7</div></div><div class="tile" style="height:100px;"><p class="t-recipe">Hähnchen-Curry</p><p class="t-meta">35 Min</p><span class="t-badge b-med">mittel</span><br><span class="t-badge b-protein" style="margin-top:2px;">Hähnchen</span></div></div>
|
||
<div><div class="col-head"><div class="day-abbr">Di</div><div class="day-badge db-today">8</div></div><div class="tile tile-today" style="height:100px;"><p class="t-recipe">Pasta Bolognese</p><p class="t-meta">45 Min</p><span class="t-badge b-med">mittel</span><br><span class="t-badge b-protein" style="margin-top:2px;">Rind</span></div></div>
|
||
<div><div class="col-head"><div class="day-abbr">Mi</div><div class="day-badge db-sel">9</div></div><div class="tile tile-sel" style="height:100px;"><p class="t-recipe">Gemüse-Stir-fry</p><p class="t-meta">20 Min</p><span class="t-badge b-easy">einfach</span><br><span class="t-badge b-protein" style="margin-top:2px;">Tofu</span></div></div>
|
||
<div><div class="col-head"><div class="day-abbr">Do</div><div class="day-badge">10</div></div><div class="tile" style="height:100px;"><p class="t-recipe">Lachs mit Kartoffeln</p><p class="t-meta">30 Min</p><span class="t-badge b-easy">einfach</span><br><span class="t-badge b-protein" style="margin-top:2px;">Fisch</span></div></div>
|
||
<div><div class="col-head"><div class="day-abbr">Fr</div><div class="day-badge">11</div></div><div class="tile" style="height:100px;"><p class="t-recipe">Pizza Margherita</p><p class="t-meta">50 Min</p><span class="t-badge b-hard">aufwändig</span><br><span class="t-badge b-protein" style="margin-top:2px;">vegetarisch</span></div></div>
|
||
<div><div class="col-head"><div class="day-abbr">Sa</div><div class="day-badge">12</div></div><div class="tile tile-empty" style="height:100px;"><span style="font-size:18px;">+</span><span style="font-family:var(--font-sans);font-size:9px;">wählen</span></div></div>
|
||
<div><div class="col-head"><div class="day-abbr">So</div><div class="day-badge">13</div></div><div class="tile tile-empty" style="height:100px;"><span style="font-size:18px;">+</span><span style="font-family:var(--font-sans);font-size:9px;">wählen</span></div></div>
|
||
</div>
|
||
|
||
<!-- ▼▼▼ THE NEW BELOW-FOLD CONTENT ▼▼▼ -->
|
||
|
||
<div class="section">
|
||
<div class="section-hd">
|
||
<span class="section-title">Wochenanalyse</span>
|
||
<a class="section-link">Detailansicht →</a>
|
||
</div>
|
||
|
||
<!-- Sub-score cards -->
|
||
<div class="score-cards">
|
||
<div class="score-card-item">
|
||
<div style="display:flex;align-items:baseline;gap:3px;"><span class="sci-val" style="color:var(--green-dark);">8.0</span><span class="sci-denom">/10</span></div>
|
||
<div class="sci-label">Protein-Vielfalt</div>
|
||
<div class="pbar pbar-track" style="margin-top:6px;"><div class="pbar-fill pbar-fill-green" style="width:80%;"></div></div>
|
||
</div>
|
||
<div class="score-card-item">
|
||
<div style="display:flex;align-items:baseline;gap:3px;"><span class="sci-val" style="color:var(--yellow-text);">7.2</span><span class="sci-denom">/10</span></div>
|
||
<div class="sci-label">Zutaten-Überlappung</div>
|
||
<div class="pbar pbar-track" style="margin-top:6px;"><div class="pbar-fill" style="width:72%;"></div></div>
|
||
</div>
|
||
<div class="score-card-item">
|
||
<div style="display:flex;align-items:baseline;gap:3px;"><span class="sci-val" style="color:var(--green-dark);">8.2</span><span class="sci-denom">/10</span></div>
|
||
<div class="sci-label">Aufwands-Balance</div>
|
||
<div class="pbar pbar-track" style="margin-top:6px;"><div class="pbar-fill pbar-fill-green" style="width:82%;"></div></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Protein grid -->
|
||
<div style="display:grid;grid-template-columns:80px repeat(7,1fr);gap:4px;margin-top:12px;align-items:center;">
|
||
<!-- Header row -->
|
||
<div></div>
|
||
<div class="pg-header">Mo</div><div class="pg-header">Di</div><div class="pg-header">Mi</div><div class="pg-header">Do</div><div class="pg-header">Fr</div><div class="pg-header">Sa</div><div class="pg-header">So</div>
|
||
<!-- Hähnchen row (appears 3x → warn) -->
|
||
<div class="pg-row-label">Hähnchen</div>
|
||
<div class="pg-cell pg-fill-warn">HÄH</div>
|
||
<div class="pg-cell pg-empty">—</div>
|
||
<div class="pg-cell pg-empty">—</div>
|
||
<div class="pg-cell pg-fill-warn">HÄH</div>
|
||
<div class="pg-cell pg-empty">—</div>
|
||
<div class="pg-cell pg-empty">—</div>
|
||
<div class="pg-cell pg-empty">—</div>
|
||
<!-- Rind -->
|
||
<div class="pg-row-label">Rind</div>
|
||
<div class="pg-cell pg-empty">—</div>
|
||
<div class="pg-cell pg-fill">RIND</div>
|
||
<div class="pg-cell pg-empty">—</div>
|
||
<div class="pg-cell pg-empty">—</div>
|
||
<div class="pg-cell pg-empty">—</div>
|
||
<div class="pg-cell pg-empty">—</div>
|
||
<div class="pg-cell pg-empty">—</div>
|
||
<!-- Tofu -->
|
||
<div class="pg-row-label">Tofu / veg.</div>
|
||
<div class="pg-cell pg-empty">—</div>
|
||
<div class="pg-cell pg-empty">—</div>
|
||
<div class="pg-cell pg-fill">TOFU</div>
|
||
<div class="pg-cell pg-empty">—</div>
|
||
<div class="pg-cell pg-fill">VEG</div>
|
||
<div class="pg-cell pg-empty">—</div>
|
||
<div class="pg-cell pg-empty">—</div>
|
||
<!-- Fisch -->
|
||
<div class="pg-row-label">Fisch</div>
|
||
<div class="pg-cell pg-empty">—</div>
|
||
<div class="pg-cell pg-empty">—</div>
|
||
<div class="pg-cell pg-empty">—</div>
|
||
<div class="pg-cell pg-fill">FISCH</div>
|
||
<div class="pg-cell pg-empty">—</div>
|
||
<div class="pg-cell pg-empty">—</div>
|
||
<div class="pg-cell pg-empty">—</div>
|
||
</div>
|
||
|
||
<!-- Effort bar + Warnings side by side -->
|
||
<div style="display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px;">
|
||
<div>
|
||
<div style="font-family:var(--font-sans);font-size:10px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--color-text-muted);margin-bottom:6px;">Aufwandsverteilung</div>
|
||
<div class="effort-bar">
|
||
<div class="eb-seg" style="flex:3;background:var(--green);">3 × einfach</div>
|
||
<div class="eb-seg" style="flex:2;background:var(--yellow);">2 × mittel</div>
|
||
<div class="eb-seg" style="flex:1;background:var(--orange);">1</div>
|
||
</div>
|
||
<div style="display:flex;gap:10px;margin-top:5px;">
|
||
<span style="font-family:var(--font-sans);font-size:9px;color:var(--color-text-muted);">● einfach</span>
|
||
<span style="font-family:var(--font-sans);font-size:9px;color:var(--color-text-muted);">● mittel</span>
|
||
<span style="font-family:var(--font-sans);font-size:9px;color:var(--color-text-muted);">● aufwändig</span>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<div style="font-family:var(--font-sans);font-size:10px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--color-text-muted);margin-bottom:6px;">Hinweise</div>
|
||
<div class="warn-cards" style="grid-template-columns:1fr 1fr;gap:6px;">
|
||
<div class="warn-card">
|
||
<div class="warn-card-title">⚠ Hähnchen</div>
|
||
<div class="warn-card-sub">an Mo + Do geplant</div>
|
||
<a class="warn-card-link">Tag tauschen →</a>
|
||
</div>
|
||
<div class="warn-card">
|
||
<div class="warn-card-title">⚠ Tomaten</div>
|
||
<div class="warn-card-sub">Di + Do wiederholt</div>
|
||
<a class="warn-card-link">Tag tauschen →</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Right panel -->
|
||
<div class="rp">
|
||
<div class="rp-label">Mittwoch, 9. Apr</div>
|
||
<div class="rp-name">Gemüse-Stir-fry</div>
|
||
<div class="rp-meta">20 Min · einfach</div>
|
||
<div class="divider"></div>
|
||
<button class="rp-btn rp-btn-p">Koch-Modus</button>
|
||
<button class="rp-btn">Rezept ansehen</button>
|
||
<button class="rp-btn">Gericht tauschen</button>
|
||
<button class="rp-btn rp-btn-danger">Entfernen</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="note">
|
||
<strong>Was passiert:</strong> Die /planner/variety Seite existiert weiter als Deep-Link, aber ihre Kerninfos (Sub-Scores,
|
||
Protein-Grid, Aufwands-Balken, Warnungen) sind direkt im Planer sichtbar — kein Tab-Wechsel nötig.
|
||
Alle Daten kommen aus dem bereits geladenen <code>varietyScore</code> Objekt. Der „Detailansicht →" Link führt zur vollen Analyse-Seite.
|
||
<br><br>
|
||
<strong>Gelber Ring im Protein-Grid</strong> = Protein wiederholt sich an mehreren Tagen (kommt von <code>tagRepeats</code>).
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<!-- ═══════════════════════════════════════════════════════════════ -->
|
||
<!-- B — MULTI-WEEK VIEW -->
|
||
<!-- ═══════════════════════════════════════════════════════════════ -->
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<span class="card-num">B</span>
|
||
<span class="card-name">Mehre Wochen gleichzeitig</span>
|
||
<span class="card-desc">Aktuelle + Folgewochen im selben Grid</span>
|
||
</div>
|
||
|
||
<div class="card-body">
|
||
<div class="frame" style="height:660px;">
|
||
<div class="topbar">
|
||
<span class="t-h1">Wochenplaner</span>
|
||
<div class="t-arrow">‹</div>
|
||
<span class="t-range">Apr 2026</span>
|
||
<div class="t-arrow">›</div>
|
||
<button class="t-btn">Heute</button>
|
||
<button class="t-btn t-btn-primary t-ml">+ Gericht hinzufügen</button>
|
||
</div>
|
||
|
||
<div class="body">
|
||
<!-- Sidebar -->
|
||
<div class="sidebar">
|
||
<div class="score-card">
|
||
<div class="s-label">KW 15 · Score</div>
|
||
<div style="display:flex;align-items:baseline;gap:4px;"><span class="score-big">7.8</span><span class="score-denom">/10</span></div>
|
||
<div class="pbar"><div class="pbar-fill" style="width:78%;"></div></div>
|
||
<div class="sub-row"><span class="sub-lbl">Protein</span><div class="sub-bar"><div class="sub-fill" style="width:80%;background:var(--green);"></div></div><span class="sub-val">8.0</span></div>
|
||
<div class="sub-row"><span class="sub-lbl">Zutaten</span><div class="sub-bar"><div class="sub-fill" style="width:72%;background:var(--yellow);"></div></div><span class="sub-val">7.2</span></div>
|
||
<div class="sub-row"><span class="sub-lbl">Aufwand</span><div class="sub-bar"><div class="sub-fill" style="width:82%;background:var(--green);"></div></div><span class="sub-val">8.2</span></div>
|
||
<a class="s-link">Variety-Analyse →</a>
|
||
</div>
|
||
<div>
|
||
<div class="s-label">Andere Wochen</div>
|
||
<div style="display:flex;flex-direction:column;gap:5px;">
|
||
<div style="display:flex;align-items:center;justify-content:space-between;padding:5px 7px;border-radius:var(--radius-md);background:var(--green-tint);border:1px solid var(--green-light);">
|
||
<span style="font-family:var(--font-mono);font-size:10px;color:var(--green-dark);">KW 15</span>
|
||
<span style="font-family:var(--font-sans);font-size:9px;color:var(--green-dark);">5/7 ● 7.8</span>
|
||
</div>
|
||
<div style="display:flex;align-items:center;justify-content:space-between;padding:5px 7px;border-radius:var(--radius-md);background:var(--color-surface);border:1px solid var(--color-border);">
|
||
<span style="font-family:var(--font-mono);font-size:10px;color:var(--color-text-muted);">KW 16</span>
|
||
<span style="font-family:var(--font-sans);font-size:9px;color:var(--color-text-muted);">2/7 ● 6.1</span>
|
||
</div>
|
||
<div style="display:flex;align-items:center;justify-content:space-between;padding:5px 7px;border-radius:var(--radius-md);background:var(--color-surface);border:1px solid var(--color-border);">
|
||
<span style="font-family:var(--font-mono);font-size:10px;color:var(--color-text-muted);">KW 17</span>
|
||
<span style="font-family:var(--font-sans);font-size:9px;color:var(--color-text-muted);">leer</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- MAIN: multi-week -->
|
||
<div class="main">
|
||
<!-- Column headers (sticky, shared across all weeks) -->
|
||
<div class="cal-grid" style="margin-bottom:4px;">
|
||
<div><div class="day-abbr" style="text-align:center;">Mo</div></div>
|
||
<div><div class="day-abbr" style="text-align:center;">Di</div></div>
|
||
<div><div class="day-abbr" style="text-align:center;">Mi</div></div>
|
||
<div><div class="day-abbr" style="text-align:center;">Do</div></div>
|
||
<div><div class="day-abbr" style="text-align:center;">Fr</div></div>
|
||
<div><div class="day-abbr" style="text-align:center;">Sa</div></div>
|
||
<div><div class="day-abbr" style="text-align:center;">So</div></div>
|
||
</div>
|
||
|
||
<!-- KW 15 (current) -->
|
||
<div class="week-row">
|
||
<div class="week-row-label">
|
||
<span class="wrl-kw">KW 15</span>
|
||
<span class="wrl-range">7.–13. Apr</span>
|
||
<span class="wrl-cur">Aktuell</span>
|
||
<span class="wrl-score wrl-score-good" style="margin-left:auto;">7.8 / 10</span>
|
||
</div>
|
||
<div class="cal-grid">
|
||
<div><div class="day-badge">7</div><div class="tile" style="height:88px;"><p class="t-recipe">Hähnchen-Curry</p><p class="t-meta">35 Min · mittel</p><span class="t-badge b-protein">Hähnchen</span></div></div>
|
||
<div><div class="day-badge db-today">8</div><div class="tile tile-today" style="height:88px;"><p class="t-recipe">Pasta Bolognese</p><p class="t-meta">45 Min · mittel</p><span class="t-badge b-protein">Rind</span></div></div>
|
||
<div><div class="day-badge db-sel">9</div><div class="tile tile-sel" style="height:88px;"><p class="t-recipe">Gemüse-Stir-fry</p><p class="t-meta">20 Min · einfach</p><span class="t-badge b-protein">Tofu</span></div></div>
|
||
<div><div class="day-badge">10</div><div class="tile" style="height:88px;"><p class="t-recipe">Lachs mit Kartoffeln</p><p class="t-meta">30 Min · einfach</p><span class="t-badge b-protein">Fisch</span></div></div>
|
||
<div><div class="day-badge">11</div><div class="tile" style="height:88px;"><p class="t-recipe">Pizza Margherita</p><p class="t-meta">50 Min · aufwändig</p><span class="t-badge b-protein">veg.</span></div></div>
|
||
<div><div class="day-badge">12</div><div class="tile tile-empty" style="height:88px;"><span style="font-size:16px;">+</span><span style="font-family:var(--font-sans);font-size:9px;">wählen</span></div></div>
|
||
<div><div class="day-badge">13</div><div class="tile tile-empty" style="height:88px;"><span style="font-size:16px;">+</span><span style="font-family:var(--font-sans);font-size:9px;">wählen</span></div></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- KW 16 (next week) -->
|
||
<div class="week-row">
|
||
<div class="week-row-label">
|
||
<span class="wrl-kw">KW 16</span>
|
||
<span class="wrl-range">14.–20. Apr</span>
|
||
<span class="wrl-score wrl-score-mid" style="margin-left:auto;">6.1 / 10</span>
|
||
</div>
|
||
<div class="cal-grid">
|
||
<div><div class="day-badge" style="color:var(--color-text-muted);font-size:9px;">14</div><div class="tile" style="height:88px;"><p class="t-recipe">Hähnchen-Pfanne</p><p class="t-meta">25 Min · einfach</p><span class="t-badge b-protein">Hähnchen</span></div></div>
|
||
<div><div class="day-badge" style="color:var(--color-text-muted);font-size:9px;">15</div><div class="tile tile-empty" style="height:88px;"><span style="font-size:16px;">+</span><span style="font-family:var(--font-sans);font-size:9px;">wählen</span></div></div>
|
||
<div><div class="day-badge" style="color:var(--color-text-muted);font-size:9px;">16</div><div class="tile" style="height:88px;"><p class="t-recipe">Linsensuppe</p><p class="t-meta">40 Min · einfach</p><span class="t-badge b-protein">veg.</span></div></div>
|
||
<div><div class="day-badge" style="color:var(--color-text-muted);font-size:9px;">17</div><div class="tile tile-empty" style="height:88px;"><span style="font-size:16px;">+</span><span style="font-family:var(--font-sans);font-size:9px;">wählen</span></div></div>
|
||
<div><div class="day-badge" style="color:var(--color-text-muted);font-size:9px;">18</div><div class="tile tile-empty" style="height:88px;"><span style="font-size:16px;">+</span><span style="font-family:var(--font-sans);font-size:9px;">wählen</span></div></div>
|
||
<div><div class="day-badge" style="color:var(--color-text-muted);font-size:9px;">19</div><div class="tile tile-empty" style="height:88px;"><span style="font-size:16px;">+</span><span style="font-family:var(--font-sans);font-size:9px;">wählen</span></div></div>
|
||
<div><div class="day-badge" style="color:var(--color-text-muted);font-size:9px;">20</div><div class="tile tile-empty" style="height:88px;"><span style="font-size:16px;">+</span><span style="font-family:var(--font-sans);font-size:9px;">wählen</span></div></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- KW 17 (two weeks ahead — lighter) -->
|
||
<div class="week-row" style="opacity:.6;">
|
||
<div class="week-row-label">
|
||
<span class="wrl-kw">KW 17</span>
|
||
<span class="wrl-range">21.–27. Apr</span>
|
||
<span class="wrl-score wrl-score-empty" style="margin-left:auto;">leer</span>
|
||
</div>
|
||
<div class="cal-grid">
|
||
<div><div class="day-badge" style="color:var(--color-text-muted);font-size:9px;">21</div><div class="tile tile-empty" style="height:88px;"><span style="font-size:16px;">+</span><span style="font-family:var(--font-sans);font-size:9px;">wählen</span></div></div>
|
||
<div><div class="day-badge" style="color:var(--color-text-muted);font-size:9px;">22</div><div class="tile tile-empty" style="height:88px;"></div></div>
|
||
<div><div class="day-badge" style="color:var(--color-text-muted);font-size:9px;">23</div><div class="tile tile-empty" style="height:88px;"></div></div>
|
||
<div><div class="day-badge" style="color:var(--color-text-muted);font-size:9px;">24</div><div class="tile tile-empty" style="height:88px;"></div></div>
|
||
<div><div class="day-badge" style="color:var(--color-text-muted);font-size:9px;">25</div><div class="tile tile-empty" style="height:88px;"></div></div>
|
||
<div><div class="day-badge" style="color:var(--color-text-muted);font-size:9px;">26</div><div class="tile tile-empty" style="height:88px;"></div></div>
|
||
<div><div class="day-badge" style="color:var(--color-text-muted);font-size:9px;">27</div><div class="tile tile-empty" style="height:88px;"></div></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Right panel -->
|
||
<div class="rp">
|
||
<div class="rp-label">Mittwoch, 9. Apr · KW 15</div>
|
||
<div class="rp-name">Gemüse-Stir-fry</div>
|
||
<div class="rp-meta">20 Min · einfach</div>
|
||
<div class="divider"></div>
|
||
<button class="rp-btn rp-btn-p">Koch-Modus</button>
|
||
<button class="rp-btn">Rezept ansehen</button>
|
||
<button class="rp-btn">Gericht tauschen</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="note">
|
||
<strong>Was passiert:</strong> Die Main-Area zeigt 3 aufeinanderfolgende Wochen. Die Spaltenköpfe (Mo–So) sind geteilt.
|
||
Jede Woche hat ein Label mit KW-Nummer, Datumsbereich und Score. KW 17 ist gedimmt — noch kein Plan, aber klickbar.
|
||
Die Sidebar zeigt den Score der aktuell fokussierten Woche + eine kompakte Wochenliste.
|
||
<br><br>
|
||
<strong>Was neu gebaut werden muss:</strong> API-Abruf für Folgewochen (gleicher Endpoint, andere <code>weekStart</code> Parameter).
|
||
Zwei zusätzliche Abrufe beim Laden der Seite. Score für Folgewochen wird mit kleinerem Datensatz berechnet.
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<!-- ═══════════════════════════════════════════════════════════════ -->
|
||
<!-- C — SUGGESTIONS FOR UNPLANNED DAYS -->
|
||
<!-- ═══════════════════════════════════════════════════════════════ -->
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<span class="card-num">C</span>
|
||
<span class="card-name">Empfehlungen unter dem Grid</span>
|
||
<span class="card-desc">Ungeplante Tage werden direkt mit Vorschlägen befüllt</span>
|
||
</div>
|
||
|
||
<div class="card-body">
|
||
<div class="frame" style="height:620px;">
|
||
<div class="topbar">
|
||
<span class="t-h1">Wochenplaner</span>
|
||
<span class="t-range">7.–13. Apr</span>
|
||
<div class="t-arrow">‹</div><div class="t-arrow">›</div>
|
||
<button class="t-btn">Heute</button>
|
||
<button class="t-btn t-btn-primary t-ml">+ Gericht hinzufügen</button>
|
||
</div>
|
||
|
||
<div class="body">
|
||
<!-- Sidebar (same) -->
|
||
<div class="sidebar">
|
||
<div class="score-card">
|
||
<div class="s-label">Score</div>
|
||
<div style="display:flex;align-items:baseline;gap:4px;"><span class="score-big">7.8</span><span class="score-denom">/10</span></div>
|
||
<div class="pbar"><div class="pbar-fill" style="width:78%;"></div></div>
|
||
<div class="sub-row"><span class="sub-lbl">Protein</span><div class="sub-bar"><div class="sub-fill" style="width:80%;background:var(--green);"></div></div><span class="sub-val">8.0</span></div>
|
||
<div class="sub-row"><span class="sub-lbl">Zutaten</span><div class="sub-bar"><div class="sub-fill" style="width:72%;background:var(--yellow);"></div></div><span class="sub-val">7.2</span></div>
|
||
<div class="sub-row"><span class="sub-lbl">Aufwand</span><div class="sub-bar"><div class="sub-fill" style="width:82%;background:var(--green);"></div></div><span class="sub-val">8.2</span></div>
|
||
</div>
|
||
<div>
|
||
<div class="s-label">Geplant</div>
|
||
<div style="display:flex;align-items:baseline;gap:3px;"><span style="font-family:var(--font-display);font-size:20px;font-weight:300;">5</span><span style="font-family:var(--font-sans);font-size:10px;color:var(--color-text-muted);">/ 7 Tage</span></div>
|
||
<div class="day-progress">
|
||
<div class="dp-seg" style="background:var(--green);"></div><div class="dp-seg" style="background:var(--green);"></div><div class="dp-seg" style="background:var(--green);"></div><div class="dp-seg" style="background:var(--green);"></div><div class="dp-seg" style="background:var(--green);"></div><div class="dp-seg" style="background:var(--color-border);"></div><div class="dp-seg" style="background:var(--color-border);"></div>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<div class="s-label">Warnungen</div>
|
||
<div class="warn">⚠ Hähnchen an 3 Tagen</div>
|
||
<div class="warn">⚠ Tomaten an Di, Do</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- MAIN -->
|
||
<div class="main">
|
||
<!-- Calendar -->
|
||
<div class="cal-grid">
|
||
<div><div class="col-head"><div class="day-abbr">Mo</div><div class="day-badge">7</div></div><div class="tile" style="height:90px;"><p class="t-recipe">Hähnchen-Curry</p><p class="t-meta">35 Min · mittel</p></div></div>
|
||
<div><div class="col-head"><div class="day-abbr">Di</div><div class="day-badge db-today">8</div></div><div class="tile tile-today" style="height:90px;"><p class="t-recipe">Pasta Bolognese</p><p class="t-meta">45 Min · mittel</p></div></div>
|
||
<div><div class="col-head"><div class="day-abbr">Mi</div><div class="day-badge db-sel">9</div></div><div class="tile tile-sel" style="height:90px;"><p class="t-recipe">Gemüse-Stir-fry</p><p class="t-meta">20 Min · einfach</p></div></div>
|
||
<div><div class="col-head"><div class="day-abbr">Do</div><div class="day-badge">10</div></div><div class="tile" style="height:90px;"><p class="t-recipe">Lachs mit Kartoffeln</p><p class="t-meta">30 Min · einfach</p></div></div>
|
||
<div><div class="col-head"><div class="day-abbr">Fr</div><div class="day-badge">11</div></div><div class="tile" style="height:90px;"><p class="t-recipe">Pizza Margherita</p><p class="t-meta">50 Min · aufwändig</p></div></div>
|
||
<div><div class="col-head"><div class="day-abbr">Sa</div><div class="day-badge">12</div></div><div class="tile tile-empty" style="height:90px;"><span style="font-size:16px;">+</span></div></div>
|
||
<div><div class="col-head"><div class="day-abbr">So</div><div class="day-badge">13</div></div><div class="tile tile-empty" style="height:90px;"><span style="font-size:16px;">+</span></div></div>
|
||
</div>
|
||
|
||
<!-- ▼▼▼ THE NEW BELOW-FOLD CONTENT ▼▼▼ -->
|
||
<div class="section">
|
||
<div class="section-hd">
|
||
<span class="section-title">Empfehlungen für ungeplante Tage</span>
|
||
<a class="section-link">Alle Rezepte →</a>
|
||
</div>
|
||
|
||
<!-- Samstag -->
|
||
<div class="sug-section">
|
||
<div class="sug-day-label">
|
||
Samstag, 12. Apr
|
||
<span class="sug-empty-badge">kein Gericht</span>
|
||
</div>
|
||
<div class="sug-cards">
|
||
<div class="sug-card">
|
||
<div class="sug-name">Ramen mit Ei</div>
|
||
<div class="sug-meta">40 Min · mittel</div>
|
||
<span class="sug-delta delta-pos">+0.9 Score</span>
|
||
</div>
|
||
<div class="sug-card">
|
||
<div class="sug-name">Shakshuka</div>
|
||
<div class="sug-meta">25 Min · einfach</div>
|
||
<span class="sug-delta delta-pos">+0.7 Score</span>
|
||
</div>
|
||
<div class="sug-card">
|
||
<div class="sug-name">Rindfleisch-Tacos</div>
|
||
<div class="sug-meta">30 Min · einfach</div>
|
||
<span class="sug-delta delta-pos">+0.5 Score</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Sonntag -->
|
||
<div class="sug-section">
|
||
<div class="sug-day-label">
|
||
Sonntag, 13. Apr
|
||
<span class="sug-empty-badge">kein Gericht</span>
|
||
</div>
|
||
<div class="sug-cards">
|
||
<div class="sug-card">
|
||
<div class="sug-name">Pho Bo</div>
|
||
<div class="sug-meta">60 Min · aufwändig</div>
|
||
<span class="sug-delta delta-pos">+1.1 Score</span>
|
||
</div>
|
||
<div class="sug-card">
|
||
<div class="sug-name">Lachstartar auf Avocado</div>
|
||
<div class="sug-meta">15 Min · einfach</div>
|
||
<span class="sug-delta delta-pos">+0.8 Score</span>
|
||
</div>
|
||
<div class="sug-card">
|
||
<div class="sug-name">Hähnchen-Wrap</div>
|
||
<div class="sug-meta">20 Min · einfach</div>
|
||
<span class="sug-delta delta-neg">−0.2 Score</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Freitext-Hinweis (wenn alles geplant) -->
|
||
<div style="margin-top:8px;padding:10px;border-radius:var(--radius-md);background:var(--green-tint);border:1px solid var(--green-light);font-family:var(--font-sans);font-size:11px;color:var(--green-dark);display:none;">
|
||
Alle Tage sind geplant. Gute Woche! Score: 7.8/10
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Right panel: day detail -->
|
||
<div class="rp">
|
||
<div class="rp-label">Mittwoch, 9. Apr</div>
|
||
<div class="rp-name">Gemüse-Stir-fry</div>
|
||
<div class="rp-meta">20 Min · einfach</div>
|
||
<div class="divider"></div>
|
||
<button class="rp-btn rp-btn-p">Koch-Modus</button>
|
||
<button class="rp-btn">Rezept ansehen</button>
|
||
<button class="rp-btn">Gericht tauschen</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="note">
|
||
<strong>Was passiert:</strong> Für jede Lücke in der Woche werden 3 Rezept-Vorschläge inline gezeigt — sortiert nach Score-Delta.
|
||
Klick auf eine Karte → setzt das Rezept direkt (kein Picker-Sheet nötig). Score-Delta (grün/rot) kommt bereits
|
||
aus der <code>SuggestionResponse</code> API, die der Planer schon abruft.
|
||
<br><br>
|
||
<strong>Vorteil:</strong> Wenn alle 7 Tage geplant sind, verschwindet diese Sektion und wird durch eine
|
||
Bestätigungsmeldung ersetzt. Die Hauptfunktion des Planers (leere Tage füllen) passiert ohne Panel-Wechsel.
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<!-- ═══════════════════════════════════════════════════════════════ -->
|
||
<!-- D — SHOPPING LIST PREVIEW -->
|
||
<!-- ═══════════════════════════════════════════════════════════════ -->
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<span class="card-num">D</span>
|
||
<span class="card-name">Einkaufsliste unter dem Grid</span>
|
||
<span class="card-desc">Was diese Woche eingekauft werden muss</span>
|
||
</div>
|
||
|
||
<div class="card-body">
|
||
<div class="frame" style="height:620px;">
|
||
<div class="topbar">
|
||
<span class="t-h1">Wochenplaner</span>
|
||
<span class="t-range">7.–13. Apr</span>
|
||
<div class="t-arrow">‹</div><div class="t-arrow">›</div>
|
||
<button class="t-btn">Heute</button>
|
||
<button class="t-btn t-btn-primary t-ml">+ Gericht hinzufügen</button>
|
||
</div>
|
||
|
||
<div class="body">
|
||
<div class="sidebar">
|
||
<div class="score-card">
|
||
<div class="s-label">Score</div>
|
||
<div style="display:flex;align-items:baseline;gap:4px;"><span class="score-big">7.8</span><span class="score-denom">/10</span></div>
|
||
<div class="pbar"><div class="pbar-fill" style="width:78%;"></div></div>
|
||
<div class="sub-row"><span class="sub-lbl">Protein</span><div class="sub-bar"><div class="sub-fill" style="width:80%;background:var(--green);"></div></div><span class="sub-val">8.0</span></div>
|
||
<div class="sub-row"><span class="sub-lbl">Zutaten</span><div class="sub-bar"><div class="sub-fill" style="width:72%;background:var(--yellow);"></div></div><span class="sub-val">7.2</span></div>
|
||
</div>
|
||
<div>
|
||
<div class="s-label">Einkauf</div>
|
||
<div style="display:flex;align-items:baseline;gap:3px;margin-bottom:4px;"><span style="font-family:var(--font-display);font-size:20px;font-weight:300;">18</span><span style="font-family:var(--font-sans);font-size:10px;color:var(--color-text-muted);">Zutaten</span></div>
|
||
<div style="font-family:var(--font-sans);font-size:10px;color:var(--color-text-muted);">davon 3 bereits abgehakt</div>
|
||
<div class="pbar pbar-track" style="margin-top:5px;"><div class="pbar-fill pbar-fill-green" style="width:17%;"></div></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="main">
|
||
<!-- Calendar (compact) -->
|
||
<div class="cal-grid">
|
||
<div><div class="col-head"><div class="day-abbr">Mo</div><div class="day-badge">7</div></div><div class="tile" style="height:72px;"><p class="t-recipe">Hähnchen-Curry</p><p class="t-meta">35 Min</p></div></div>
|
||
<div><div class="col-head"><div class="day-abbr">Di</div><div class="day-badge db-today">8</div></div><div class="tile tile-today" style="height:72px;"><p class="t-recipe">Pasta Bolognese</p><p class="t-meta">45 Min</p></div></div>
|
||
<div><div class="col-head"><div class="day-abbr">Mi</div><div class="day-badge db-sel">9</div></div><div class="tile tile-sel" style="height:72px;"><p class="t-recipe">Gemüse-Stir-fry</p><p class="t-meta">20 Min</p></div></div>
|
||
<div><div class="col-head"><div class="day-abbr">Do</div><div class="day-badge">10</div></div><div class="tile" style="height:72px;"><p class="t-recipe">Lachs mit Kartoffeln</p><p class="t-meta">30 Min</p></div></div>
|
||
<div><div class="col-head"><div class="day-abbr">Fr</div><div class="day-badge">11</div></div><div class="tile" style="height:72px;"><p class="t-recipe">Pizza Margherita</p><p class="t-meta">50 Min</p></div></div>
|
||
<div><div class="col-head"><div class="day-abbr">Sa</div><div class="day-badge">12</div></div><div class="tile tile-empty" style="height:72px;"><span style="font-size:14px;">+</span></div></div>
|
||
<div><div class="col-head"><div class="day-abbr">So</div><div class="day-badge">13</div></div><div class="tile tile-empty" style="height:72px;"><span style="font-size:14px;">+</span></div></div>
|
||
</div>
|
||
|
||
<!-- ▼▼▼ SHOPPING LIST ▼▼▼ -->
|
||
<div class="section">
|
||
<div class="section-hd">
|
||
<span class="section-title">Einkaufsliste diese Woche</span>
|
||
<div style="display:flex;align-items:center;gap:8px;">
|
||
<span style="font-family:var(--font-sans);font-size:10px;color:var(--color-text-muted);">Grundzutaten ausblenden</span>
|
||
<a class="section-link">Exportieren →</a>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="shop-cols">
|
||
<!-- Fleisch & Fisch -->
|
||
<div class="shop-group">
|
||
<div class="shop-group-title">Fleisch & Fisch</div>
|
||
<div class="shop-item shop-item-done">
|
||
<div class="shop-check shop-check-done"></div>
|
||
<div><div class="shop-name">Hähnchenbrust</div><div class="shop-source">Mo — Hähnchen-Curry</div></div>
|
||
</div>
|
||
<div class="shop-item">
|
||
<div class="shop-check"></div>
|
||
<div><div class="shop-name">Rinderhack 400 g</div><div class="shop-source">Di — Pasta Bolognese</div></div>
|
||
</div>
|
||
<div class="shop-item">
|
||
<div class="shop-check"></div>
|
||
<div><div class="shop-name">Lachsfilet 2×</div><div class="shop-source">Do — Lachs mit Kartoffeln</div></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Gemüse -->
|
||
<div class="shop-group">
|
||
<div class="shop-group-title">Gemüse</div>
|
||
<div class="shop-item">
|
||
<div class="shop-check"></div>
|
||
<div><div class="shop-name">Paprika (rot + gelb)</div><div class="shop-source">Mi — Gemüse-Stir-fry</div></div>
|
||
</div>
|
||
<div class="shop-item">
|
||
<div class="shop-check"></div>
|
||
<div><div class="shop-name">Tomaten, gehackt 2×</div><div class="shop-source">Di, Do</div></div>
|
||
</div>
|
||
<div class="shop-item shop-item-done">
|
||
<div class="shop-check shop-check-done"></div>
|
||
<div><div class="shop-name">Zwiebeln</div><div class="shop-source">Mo, Di, Mi</div></div>
|
||
</div>
|
||
<div class="shop-item">
|
||
<div class="shop-check"></div>
|
||
<div><div class="shop-name">Kartoffeln 600 g</div><div class="shop-source">Do — Lachs mit Kartoffeln</div></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Grundzutaten -->
|
||
<div class="shop-group">
|
||
<div class="shop-group-title">Grundzutaten</div>
|
||
<div class="shop-item shop-item-done">
|
||
<div class="shop-check shop-check-done"></div>
|
||
<div><div class="shop-name">Olivenöl</div><div class="shop-source">Alle Gerichte</div></div>
|
||
</div>
|
||
<div class="shop-item">
|
||
<div class="shop-check"></div>
|
||
<div><div class="shop-name">Pasta 500 g</div><div class="shop-source">Di — Pasta Bolognese</div></div>
|
||
</div>
|
||
<div class="shop-item">
|
||
<div class="shop-check"></div>
|
||
<div><div class="shop-name">Kokosmilch 400 ml</div><div class="shop-source">Mo — Hähnchen-Curry</div></div>
|
||
</div>
|
||
<div class="shop-item">
|
||
<div class="shop-check"></div>
|
||
<div><div class="shop-name">Pizzateig (fertig)</div><div class="shop-source">Fr — Pizza Margherita</div></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="rp">
|
||
<div class="rp-label">Mittwoch, 9. Apr</div>
|
||
<div class="rp-name">Gemüse-Stir-fry</div>
|
||
<div class="rp-meta">20 Min · einfach</div>
|
||
<div class="divider"></div>
|
||
<button class="rp-btn rp-btn-p">Koch-Modus</button>
|
||
<button class="rp-btn">Rezept ansehen</button>
|
||
<button class="rp-btn">Gericht tauschen</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="note">
|
||
<strong>Was passiert:</strong> Alle geplanten Rezepte der Woche werden zusammengeführt und ihre Zutaten in Kategorien gruppiert.
|
||
Checkboxes ermöglichen das Abhaken beim Einkaufen. Mehrfach benötigte Zutaten (z.B. Tomaten Di+Do) werden gebündelt.
|
||
<br><br>
|
||
<strong>Was neu gebaut werden muss:</strong> Backend-Endpoint zur Zutatenaggregation (oder Frontend-Zusammenführung aus den
|
||
bereits geladenen Rezeptdaten). Checkboxen-State wäre nur clientseitig (kein Speichern nötig). Grundzutat-Flag
|
||
ist bereits im Datenmodell vorhanden (<code>RecipeIngredient.staple</code>), damit man diese ein-/ausblenden kann.
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<!-- ═══════════════════════════════════════════════════════════════ -->
|
||
<!-- E — DAY EXPANSION (CLICK-TO-EXPAND ROW) -->
|
||
<!-- ═══════════════════════════════════════════════════════════════ -->
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<span class="card-num">E</span>
|
||
<span class="card-name">Klick-Expansion direkt im Grid</span>
|
||
<span class="card-desc">Kachel aufklappen statt rechtes Panel öffnen</span>
|
||
</div>
|
||
|
||
<div class="card-body">
|
||
<div class="frame" style="height:660px;">
|
||
<div class="topbar">
|
||
<span class="t-h1">Wochenplaner</span>
|
||
<span class="t-range">7.–13. Apr</span>
|
||
<div class="t-arrow">‹</div><div class="t-arrow">›</div>
|
||
<button class="t-btn">Heute</button>
|
||
<button class="t-btn t-btn-primary t-ml">+ Gericht hinzufügen</button>
|
||
</div>
|
||
|
||
<div class="body">
|
||
<div class="sidebar">
|
||
<div class="score-card">
|
||
<div class="s-label">Score</div>
|
||
<div style="display:flex;align-items:baseline;gap:4px;"><span class="score-big">7.8</span><span class="score-denom">/10</span></div>
|
||
<div class="pbar"><div class="pbar-fill" style="width:78%;"></div></div>
|
||
<div class="sub-row"><span class="sub-lbl">Protein</span><div class="sub-bar"><div class="sub-fill" style="width:80%;background:var(--green);"></div></div><span class="sub-val">8.0</span></div>
|
||
<div class="sub-row"><span class="sub-lbl">Zutaten</span><div class="sub-bar"><div class="sub-fill" style="width:72%;background:var(--yellow);"></div></div><span class="sub-val">7.2</span></div>
|
||
<div class="sub-row"><span class="sub-lbl">Aufwand</span><div class="sub-bar"><div class="sub-fill" style="width:82%;background:var(--green);"></div></div><span class="sub-val">8.2</span></div>
|
||
</div>
|
||
<div>
|
||
<div class="s-label">Warnungen</div>
|
||
<div class="warn">⚠ Hähnchen an 3 Tagen</div>
|
||
<div class="warn">⚠ Tomaten an Di, Do</div>
|
||
<a class="s-link">Variety-Analyse →</a>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- MAIN -->
|
||
<div class="main">
|
||
<!-- Calendar -->
|
||
<div class="cal-grid">
|
||
<div><div class="col-head"><div class="day-abbr">Mo</div><div class="day-badge">7</div></div><div class="tile" style="height:90px;"><p class="t-recipe">Hähnchen-Curry</p><p class="t-meta">35 Min · mittel</p></div></div>
|
||
<div><div class="col-head"><div class="day-abbr">Di</div><div class="day-badge db-today">8</div></div><div class="tile tile-today" style="height:90px;"><p class="t-recipe">Pasta Bolognese</p><p class="t-meta">45 Min · mittel</p></div></div>
|
||
|
||
<!-- Mi: SELECTED — tile has active indicator -->
|
||
<div style="position:relative;">
|
||
<div class="col-head"><div class="day-abbr" style="color:var(--green-dark);">Mi</div><div class="day-badge db-sel">9</div></div>
|
||
<div class="tile tile-sel" style="height:90px;position:relative;">
|
||
<p class="t-recipe">Gemüse-Stir-fry</p>
|
||
<p class="t-meta">20 Min · einfach</p>
|
||
<div style="position:absolute;bottom:6px;left:50%;transform:translateX(-50%);font-size:8px;color:var(--green-dark);">▼</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div><div class="col-head"><div class="day-abbr">Do</div><div class="day-badge">10</div></div><div class="tile" style="height:90px;"><p class="t-recipe">Lachs mit Kartoffeln</p><p class="t-meta">30 Min · einfach</p></div></div>
|
||
<div><div class="col-head"><div class="day-abbr">Fr</div><div class="day-badge">11</div></div><div class="tile" style="height:90px;"><p class="t-recipe">Pizza Margherita</p><p class="t-meta">50 Min · aufwändig</p></div></div>
|
||
<div><div class="col-head"><div class="day-abbr">Sa</div><div class="day-badge">12</div></div><div class="tile tile-empty" style="height:90px;"><span style="font-size:16px;">+</span></div></div>
|
||
<div><div class="col-head"><div class="day-abbr">So</div><div class="day-badge">13</div></div><div class="tile tile-empty" style="height:90px;"><span style="font-size:16px;">+</span></div></div>
|
||
</div>
|
||
|
||
<!-- ▼▼▼ EXPANDED DETAIL (below grid, aligned to selected tile column) ▼▼▼ -->
|
||
<div class="expand-wrapper" style="position:relative;margin-top:2px;">
|
||
<!-- Arrow pointing up to Mi tile -->
|
||
<div style="position:absolute;width:100%;display:grid;grid-template-columns:repeat(7,1fr);gap:6px;top:-8px;pointer-events:none;">
|
||
<div></div><div></div>
|
||
<div style="display:flex;justify-content:center;">
|
||
<div style="width:12px;height:12px;background:var(--green-tint);border-left:2px solid var(--green);border-top:2px solid var(--green);transform:rotate(45deg);"></div>
|
||
</div>
|
||
<div></div><div></div><div></div><div></div>
|
||
</div>
|
||
|
||
<div class="expand-area">
|
||
<div class="ea-left">
|
||
<div style="font-family:var(--font-sans);font-size:10px;font-weight:500;letter-spacing:.07em;text-transform:uppercase;color:var(--green-dark);margin-bottom:4px;">Mittwoch, 9. Apr · Abendessen</div>
|
||
<div class="ea-name">Gemüse-Stir-fry</div>
|
||
<div class="ea-meta">20 Min · einfach · 4 Portionen</div>
|
||
<!-- Ingredient tags -->
|
||
<div class="ea-ingredients">
|
||
<span class="ing-tag">Tofu</span>
|
||
<span class="ing-tag">Paprika</span>
|
||
<span class="ing-tag">Brokkoli</span>
|
||
<span class="ing-tag">Karotten</span>
|
||
<span class="ing-tag">Ingwer</span>
|
||
<span class="ing-tag-staple">Sesamöl</span>
|
||
<span class="ing-tag-staple">Sojasauce</span>
|
||
<span class="ing-tag-staple">Knoblauch</span>
|
||
</div>
|
||
<!-- Score context -->
|
||
<div style="margin-top:10px;display:flex;gap:8px;">
|
||
<span class="t-badge b-easy" style="font-size:10px;padding:3px 7px;">einfach</span>
|
||
<span class="t-badge b-protein" style="font-size:10px;padding:3px 7px;">Protein: Tofu</span>
|
||
<span style="font-family:var(--font-sans);font-size:10px;color:var(--green-dark);background:var(--green-tint);padding:3px 7px;border-radius:var(--radius-xs);">Score ▲ +0.4</span>
|
||
</div>
|
||
</div>
|
||
<div class="ea-right">
|
||
<button class="ea-btn ea-btn-p">Koch-Modus</button>
|
||
<button class="ea-btn">Rezept ansehen</button>
|
||
<button class="ea-btn">Gericht tauschen</button>
|
||
<button class="ea-btn ea-btn-danger">Entfernen</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Rest of week as agenda list (below expansion) -->
|
||
<div class="section">
|
||
<div class="section-hd">
|
||
<span class="section-title">Restliche Woche</span>
|
||
</div>
|
||
<div class="agenda">
|
||
<div class="agenda-item">
|
||
<span class="ai-day">Do 10.4</span>
|
||
<span class="ai-name">Lachs mit Kartoffeln</span>
|
||
<span class="ai-meta">30 Min · einfach</span>
|
||
</div>
|
||
<div class="agenda-item">
|
||
<span class="ai-day">Fr 11.4</span>
|
||
<span class="ai-name">Pizza Margherita</span>
|
||
<span class="ai-meta">50 Min · aufwändig</span>
|
||
</div>
|
||
<div class="agenda-item" style="border-style:dashed;background:transparent;">
|
||
<span class="ai-day" style="color:var(--color-text-muted);">Sa 12.4</span>
|
||
<span class="ai-name" style="font-family:var(--font-sans);font-size:12px;color:var(--color-text-muted);">Noch kein Gericht</span>
|
||
<span style="font-family:var(--font-sans);font-size:10px;color:var(--green-dark);font-weight:500;">+ Hinzufügen</span>
|
||
</div>
|
||
<div class="agenda-item" style="border-style:dashed;background:transparent;">
|
||
<span class="ai-day" style="color:var(--color-text-muted);">So 13.4</span>
|
||
<span class="ai-name" style="font-family:var(--font-sans);font-size:12px;color:var(--color-text-muted);">Noch kein Gericht</span>
|
||
<span style="font-family:var(--font-sans);font-size:10px;color:var(--green-dark);font-weight:500;">+ Hinzufügen</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Right panel: now idle (detail is in main) -->
|
||
<div class="rp">
|
||
<div style="flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:8px;">
|
||
<div style="font-family:var(--font-sans);font-size:12px;color:var(--color-text-muted);">Detail-Bereich ist jetzt im Hauptbereich</div>
|
||
<div style="font-family:var(--font-sans);font-size:10px;color:var(--color-text-muted);max-width:160px;line-height:1.5;">Das rechte Panel könnte für den Rezept-Picker reserviert bleiben</div>
|
||
</div>
|
||
<div class="divider"></div>
|
||
<div style="font-family:var(--font-sans);font-size:10px;color:var(--color-text-muted);">Klicke einen leeren Tag um hier den Picker zu öffnen</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="note">
|
||
<strong>Was passiert:</strong> Klick auf eine Kachel öffnet einen Expansion-Bereich <em>direkt unter dem Grid</em>
|
||
(volle Breite, mit Pfeil-Indikator zur aktiven Kachel). Gezeigt werden: Rezeptname groß, Metadaten, Zutaten als Tags
|
||
(normale vs. Grundzutaten farblich unterschieden), Score-Auswirkung und alle Aktionen.
|
||
Darunter folgt die restliche Woche als kompakte Agenda-Liste — ungeplante Tage als gestrichelte Zeilen mit „+ Hinzufügen".
|
||
<br><br>
|
||
<strong>Konsequenz für rechtes Panel:</strong> Das Day-Detail zieht in die Main-Area um. Das rechte Panel bleibt
|
||
als reiner Rezept-Picker reserviert — es wäre nur offen wenn man aktiv ein Gericht auswählt.
|
||
Das eliminiert den Idle-Zustand „Kein Tag ausgewählt" komplett.
|
||
</div>
|
||
</div>
|
||
|
||
</body>
|
||
</html>
|