docs(specs): add C3 variety page rework mockups and V1 implementation spec
Three mockup variations (c3-variety-rework.html) for /planner/variety page, plus detailed implementation spec for the chosen V1 "Erweiterte Karten" approach: recipe names + swap links inside warning cards, minimal layout changes. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
790
specs/frontend/c3-variety-rework.html
Normal file
790
specs/frontend/c3-variety-rework.html
Normal file
@@ -0,0 +1,790 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8"/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||||
<title>Recipe App — C3 Abwechslungs-Analyse · 3 Mockup-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"/>
|
||||
<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;
|
||||
--yellow-tint:#FDF6D8;--yellow-light:#F9E08A;--yellow:#F2C12E;--yellow-dark:#C49610;--yellow-text:#8A6800;
|
||||
--blue-tint:#E6F1FB;--blue-light:#A4CFF4;--blue:#2D7DD2;--blue-dark:#185FA5;
|
||||
--purple-tint:#EEEDFE;--purple-light:#CECBF6;--purple:#534AB7;--purple-dark:#3C3489;
|
||||
--orange-tint:#FEF0E6;--orange:#E8862A;
|
||||
--red-tint:#FDECEA;--red:#DC4C3E;--red-dark:#B03328;
|
||||
--font-display:'Fraunces',Georgia,serif;--font-sans:'DM Sans',system-ui,sans-serif;--font-mono:'DM Mono',monospace;
|
||||
--radius-sm:4px;--radius-md:6px;--radius-lg:10px;--radius-xl:16px;
|
||||
--shadow-overlay:0 8px 32px rgba(28,28,24,.12),0 2px 8px rgba(28,28,24,.06);
|
||||
--shadow-card:0 1px 3px rgba(28,28,24,.06),0 1px 2px rgba(28,28,24,.04);
|
||||
}
|
||||
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
|
||||
body{font-family:var(--font-sans);background:#DDDBD5;color:var(--color-text);font-size:14px;line-height:1.6;}
|
||||
.doc{max-width:1200px;margin:0 auto;padding:48px 40px 120px;}
|
||||
|
||||
/* Header */
|
||||
.doc-header{background:var(--color-page);border-radius:var(--radius-xl) var(--radius-xl) 0 0;padding:40px 40px 28px;margin:-48px -40px 48px;display:flex;justify-content:space-between;align-items:flex-end;border-bottom:1px solid var(--color-border);}
|
||||
.doc-header h1{font-family:var(--font-display);font-size:26px;font-weight:500;letter-spacing:-.02em;margin-bottom:4px;}
|
||||
.doc-header p{font-size:13px;color:var(--color-text-muted);}
|
||||
.doc-meta{font-family:var(--font-mono);font-size:11px;color:var(--color-text-muted);text-align:right;line-height:1.9;}
|
||||
.pill{display:inline-block;padding:2px 8px;border-radius:var(--radius-sm);font-size:10px;font-weight:500;letter-spacing:.05em;}
|
||||
.pill-draft{background:var(--yellow-tint);color:var(--yellow-text);}
|
||||
.pill-rec{background:var(--green-tint);color:var(--green-dark);}
|
||||
|
||||
/* Section */
|
||||
.section{margin-bottom:80px;}
|
||||
.section-label{font-size:10px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--color-text-muted);padding-bottom:10px;border-bottom:1px solid var(--color-border);margin-bottom:24px;}
|
||||
.prose{font-size:13px;color:var(--color-text-muted);line-height:1.7;max-width:720px;margin-bottom:24px;}
|
||||
|
||||
/* Variation header */
|
||||
.var-head{padding:20px 24px;border-radius:var(--radius-xl);margin-bottom:32px;display:flex;align-items:flex-start;gap:16px;}
|
||||
.var-num{font-family:var(--font-display);font-size:48px;font-weight:300;line-height:1;opacity:.5;flex-shrink:0;}
|
||||
.var-id{font-size:10px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;margin-bottom:4px;}
|
||||
.var-title{font-family:var(--font-display);font-size:20px;font-weight:500;letter-spacing:-.02em;margin-bottom:6px;}
|
||||
.var-desc{font-size:13px;line-height:1.6;max-width:600px;}
|
||||
.var-y{background:var(--yellow-tint);border:1px solid var(--yellow-light);}
|
||||
.var-y .var-num,.var-y .var-id{color:var(--yellow-dark);}
|
||||
.var-y .var-desc{color:var(--yellow-text);}
|
||||
.var-g{background:var(--green-tint);border:1px solid var(--green-light);}
|
||||
.var-g .var-num,.var-g .var-id{color:var(--green);}
|
||||
.var-g .var-desc{color:var(--green-dark);}
|
||||
.var-p{background:var(--purple-tint);border:1px solid var(--purple-light);}
|
||||
.var-p .var-num,.var-p .var-id{color:var(--purple);}
|
||||
.var-p .var-desc{color:var(--purple-dark);}
|
||||
|
||||
/* Device frames */
|
||||
.previews{display:flex;gap:40px;flex-wrap:wrap;justify-content:center;align-items:flex-start;margin-bottom:28px;}
|
||||
.prev-col{display:flex;flex-direction:column;align-items:center;gap:10px;}
|
||||
.bp-lbl{font-family:var(--font-mono);font-size:10px;color:var(--color-text-muted);}
|
||||
.phone{width:320px;flex-shrink:0;background:var(--color-page);border-radius:36px;overflow:hidden;box-shadow:var(--shadow-overlay),0 0 0 1px rgba(0,0,0,.08);border:6px solid #1C1C18;}
|
||||
.pst{padding:10px 20px 0;display:flex;justify-content:space-between;align-items:center;font-size:11px;background:var(--color-page);}
|
||||
.pst b{font-weight:600;font-size:12px;}
|
||||
.desk{width:100%;max-width:1040px;background:var(--color-page);border-radius:var(--radius-xl);overflow:hidden;box-shadow:var(--shadow-overlay),0 0 0 1px rgba(0,0,0,.06);display:flex;min-height:500px;}
|
||||
|
||||
/* Nav chrome */
|
||||
.mtb{padding:10px 16px;background:var(--color-page);border-bottom:1px solid var(--color-border);display:flex;align-items:center;gap:10px;}
|
||||
.mtb-back{font-size:20px;color:var(--color-text-muted);line-height:1;}
|
||||
.mtb-t{font-family:var(--font-display);font-size:18px;font-weight:300;letter-spacing:-.02em;flex:1;}
|
||||
.mbt{border-top:1px solid var(--color-border);background:var(--color-surface);padding:8px 16px 28px;display:flex;justify-content:space-around;flex-shrink:0;}
|
||||
.mt-i{display:flex;flex-direction:column;align-items:center;gap:2px;}
|
||||
.mt-ic{width:20px;height:20px;border-radius:4px;background:var(--color-subtle);font-size:11px;display:flex;align-items:center;justify-content:center;}
|
||||
.mt-i.a .mt-ic{background:var(--yellow-tint);}
|
||||
.mt-l{font-size:9px;font-weight:500;color:var(--color-text-muted);}
|
||||
.mt-i.a .mt-l{color:var(--yellow-text);}
|
||||
/* Desktop sidebar */
|
||||
.dsb{width:224px;flex-shrink:0;background:var(--color-surface);border-right:1px solid var(--color-border);display:flex;flex-direction:column;}
|
||||
.dsb-logo{padding:20px 16px 16px;border-bottom:1px solid var(--color-border);}
|
||||
.dsb-lm{display:flex;align-items:center;gap:8px;margin-bottom:2px;}
|
||||
.dsb-ic{width:24px;height:24px;border-radius:5px;background:var(--green);font-size:12px;display:flex;align-items:center;justify-content:center;}
|
||||
.dsb-nm{font-family:var(--font-display);font-size:16px;font-weight:500;letter-spacing:-.02em;}
|
||||
.dsb-sub{font-size:10px;color:var(--color-text-muted);padding-left:32px;}
|
||||
.dsb-nav{padding:12px 10px;flex:1;}
|
||||
.dsb-nl{font-size:8px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--color-text-muted);padding:0 8px;margin-bottom:4px;}
|
||||
.dsb-ni{display:flex;align-items:center;gap:8px;padding:7px 8px;border-radius:var(--radius-md);font-size:13px;color:var(--color-text-muted);margin-bottom:2px;}
|
||||
.dsb-ni.a{background:var(--yellow-tint);color:var(--yellow-text);font-weight:500;}
|
||||
.dsb-nc{font-size:13px;width:18px;text-align:center;}
|
||||
.dm{flex:1;display:flex;flex-direction:column;min-width:0;}
|
||||
.dtb{padding:14px 24px;border-bottom:1px solid var(--color-border);display:flex;align-items:center;gap:8px;flex-shrink:0;}
|
||||
.dtb-bc{font-size:12px;color:var(--color-text-muted);}
|
||||
.dtb-t{font-family:var(--font-display);font-size:18px;font-weight:300;letter-spacing:-.02em;}
|
||||
.dmc{padding:24px;flex:1;overflow-y:auto;}
|
||||
|
||||
/* Shared components */
|
||||
.score-num{font-family:var(--font-display);font-weight:300;letter-spacing:-.02em;line-height:1;}
|
||||
.prog{height:6px;border-radius:3px;background:var(--color-border);overflow:hidden;margin-top:8px;}
|
||||
.prog-fill{height:100%;border-radius:3px;background:var(--yellow);}
|
||||
|
||||
/* Warning card styles */
|
||||
.wcard{border-radius:var(--radius-lg);border:1px solid var(--yellow-light);background:var(--yellow-tint);overflow:hidden;margin-bottom:8px;}
|
||||
.wcard:last-child{margin-bottom:0;}
|
||||
.wcard-hd{padding:10px 14px;border-bottom:1px solid var(--yellow-light);}
|
||||
.wcard-hd-t{font-size:13px;font-weight:500;color:var(--yellow-text);}
|
||||
.wcard-row{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:9px 14px;border-bottom:1px solid rgba(249,224,138,.4);}
|
||||
.wcard-row:last-child{border-bottom:none;}
|
||||
.wcard-left{display:flex;align-items:baseline;gap:8px;min-width:0;}
|
||||
.wcard-day{font-size:11px;font-weight:600;color:var(--yellow-text);width:20px;flex-shrink:0;}
|
||||
.wcard-recipe{font-size:13px;color:var(--color-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
|
||||
.wcard-swap{font-size:12px;font-weight:500;color:var(--yellow-text);white-space:nowrap;flex-shrink:0;}
|
||||
.wcard-swap:hover{text-decoration:underline;}
|
||||
|
||||
/* Score breakdown rows */
|
||||
.sb-row{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 0;border-bottom:1px solid var(--color-subtle);}
|
||||
.sb-row:last-child{border-bottom:none;}
|
||||
.sb-label{font-size:12px;color:var(--color-text-muted);}
|
||||
.sb-val{font-family:var(--font-mono);font-size:12px;font-weight:500;}
|
||||
|
||||
/* Collapsible details */
|
||||
.det summary{font-size:10px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--color-text-muted);cursor:default;list-style:none;display:flex;align-items:center;justify-content:space-between;}
|
||||
.det summary::after{content:'▾';font-size:11px;}
|
||||
.det[open] summary::after{content:'▴';}
|
||||
.det-body{padding-top:8px;}
|
||||
|
||||
/* Notes block */
|
||||
.notes{border-radius:var(--radius-lg);padding:16px 20px;margin-top:20px;}
|
||||
.notes-lbl{font-size:10px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;margin-bottom:8px;}
|
||||
.notes ul{list-style:none;display:flex;flex-direction:column;gap:5px;}
|
||||
.notes li{font-size:12px;line-height:1.5;display:flex;align-items:flex-start;gap:8px;}
|
||||
.notes li::before{content:'→';font-weight:500;flex-shrink:0;}
|
||||
.notes-y{background:var(--yellow-tint);border:1px solid var(--yellow-light);}
|
||||
.notes-y .notes-lbl,.notes-y li::before{color:var(--yellow-text);}
|
||||
.notes-y li{color:var(--yellow-text);}
|
||||
.notes-g{background:var(--green-tint);border:1px solid var(--green-light);}
|
||||
.notes-g .notes-lbl,.notes-g li::before{color:var(--green-dark);}
|
||||
.notes-g li{color:var(--green-dark);}
|
||||
.notes-p{background:var(--purple-tint);border:1px solid var(--purple-light);}
|
||||
.notes-p .notes-lbl,.notes-p li::before{color:var(--purple-dark);}
|
||||
.notes-p li{color:var(--purple-dark);}
|
||||
|
||||
.divider{border:none;border-top:1px solid var(--color-border);margin:48px 0;}
|
||||
|
||||
/* Comparison table */
|
||||
.ct{width:100%;border-collapse:collapse;font-size:13px;background:var(--color-surface);border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--color-border);}
|
||||
.ct thead tr{background:var(--color-subtle);border-bottom:1px solid var(--color-border);}
|
||||
.ct th{text-align:left;padding:10px 16px;font-size:10px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--color-text-muted);}
|
||||
.ct td{padding:10px 16px;border-bottom:1px solid var(--color-subtle);font-size:12px;vertical-align:top;}
|
||||
.ct tr:last-child td{border-bottom:none;}
|
||||
.ct td:first-child{font-weight:500;font-size:11px;color:var(--color-text-muted);white-space:nowrap;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="doc">
|
||||
|
||||
<!-- Header -->
|
||||
<div class="doc-header">
|
||||
<div>
|
||||
<h1>C3 — Abwechslungs-Analyse · Rework</h1>
|
||||
<p>Recipe App · 3 Mockup-Variationen · Aktuell: technische Tages-Codes, keine Rezeptnamen, kein direkter Tausch</p>
|
||||
</div>
|
||||
<div class="doc-meta">
|
||||
<span class="pill pill-draft">Entwurf</span><br>
|
||||
Erstellt: 2026-04<br>
|
||||
Variationen: 3<br>
|
||||
Screen: C3
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Context -->
|
||||
<div class="section">
|
||||
<div class="section-label">Problem</div>
|
||||
<p class="prose">Die aktuelle Seite zeigt Warnungen wie <strong style="font-family:var(--font-mono);font-size:12px;">"MON, WED — erwäge einen Tausch"</strong>. Der Planer muss selbst nachschlagen, welches Gericht an Montag und Mittwoch geplant ist, und dann manuell zum Planer navigieren um zu tauschen. Zwei Probleme:</p>
|
||||
<p class="prose"><strong>1. Keine Rezeptnamen</strong> — Tag-Codes statt echter Gerichte. <strong>2. Kein direkter Tausch</strong> — der Planer muss die Seite verlassen, zurück zum Planer, das richtige Gericht suchen und dann tauschen.</p>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- ═══════════════════════════════════════
|
||||
V1 — ERWEITERTE KARTEN
|
||||
════════════════════════════════════════ -->
|
||||
<div class="section">
|
||||
<div class="var-head var-y">
|
||||
<div class="var-num">V1</div>
|
||||
<div>
|
||||
<div class="var-id">Variation 1</div>
|
||||
<div class="var-title">Erweiterte Karten</div>
|
||||
<div class="var-desc">Minimale Änderung: bestehende gelbe Karten bleiben, aber der Text wird durch strukturierte Zeilen ersetzt — eine pro betroffenem Gericht, mit Wochentag, Rezeptname und "Tauschen →" Link. Score-Bereich und Layout bleiben unverändert.</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="previews">
|
||||
|
||||
<!-- Mobile V1 -->
|
||||
<div class="prev-col">
|
||||
<div class="bp-lbl">Mobile · 320px</div>
|
||||
<div class="phone">
|
||||
<div class="pst"><b>9:41</b><span>●●●</span></div>
|
||||
<!-- topbar -->
|
||||
<div class="mtb">
|
||||
<div class="mtb-back">‹</div>
|
||||
<div class="mtb-t">Abwechslungs-Analyse</div>
|
||||
</div>
|
||||
<div style="flex:1;overflow-y:auto;padding:20px 16px 16px;">
|
||||
|
||||
<!-- Score hero -->
|
||||
<div style="margin-bottom:24px;">
|
||||
<div style="display:flex;align-items:baseline;gap:8px;">
|
||||
<span class="score-num" style="font-size:56px;color:var(--color-text);">5.8</span>
|
||||
<span style="font-size:16px;color:var(--color-text-muted);">/ 10</span>
|
||||
<span style="font-size:14px;font-weight:500;color:var(--yellow-text);margin-left:4px;">Verbesserbar</span>
|
||||
</div>
|
||||
<div class="prog" style="width:120px;"><div class="prog-fill" style="width:58%;"></div></div>
|
||||
</div>
|
||||
|
||||
<!-- Sub-scores -->
|
||||
<div style="margin-bottom:24px;">
|
||||
<div style="font-size:10px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--color-text-muted);margin-bottom:10px;">Bewertung im Detail</div>
|
||||
<div class="sb-row"><span class="sb-label">Quellen-Vielfalt</span><span class="sb-val" style="color:var(--red-dark);">4 / 10</span></div>
|
||||
<div class="sb-row"><span class="sb-label">Zutaten-Überschneidung</span><span class="sb-val" style="color:var(--yellow-text);">7 / 10</span></div>
|
||||
<div class="sb-row"><span class="sb-label">Aufwandsbalance</span><span class="sb-val" style="color:var(--green-dark);">8 / 10</span></div>
|
||||
</div>
|
||||
|
||||
<!-- Warnings — V1 style: same card structure, but rows inside -->
|
||||
<div style="font-size:10px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--color-text-muted);margin-bottom:10px;">Hinweise</div>
|
||||
|
||||
<div class="wcard">
|
||||
<div class="wcard-hd"><div class="wcard-hd-t">Tofu mehrfach diese Woche</div></div>
|
||||
<div class="wcard-row">
|
||||
<div class="wcard-left"><span class="wcard-day">Mo</span><span class="wcard-recipe">Tofu-Gemüse-Pfanne</span></div>
|
||||
<span class="wcard-swap">Tauschen →</span>
|
||||
</div>
|
||||
<div class="wcard-row">
|
||||
<div class="wcard-left"><span class="wcard-day">Mi</span><span class="wcard-recipe">Tofu-Curry mit Reis</span></div>
|
||||
<span class="wcard-swap">Tauschen →</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="wcard">
|
||||
<div class="wcard-hd"><div class="wcard-hd-t">Paprika in mehreren Gerichten</div></div>
|
||||
<div class="wcard-row">
|
||||
<div class="wcard-left"><span class="wcard-day">Di</span><span class="wcard-recipe">Paprika-Linsen-Eintopf</span></div>
|
||||
<span class="wcard-swap">Tauschen →</span>
|
||||
</div>
|
||||
<div class="wcard-row">
|
||||
<div class="wcard-left"><span class="wcard-day">Mi</span><span class="wcard-recipe">Tofu-Curry mit Reis</span></div>
|
||||
<span class="wcard-swap">Tauschen →</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="mbt">
|
||||
<div class="mt-i"><div class="mt-ic">📅</div><div class="mt-l">Plan</div></div>
|
||||
<div class="mt-i"><div class="mt-ic">🛒</div><div class="mt-l">Einkauf</div></div>
|
||||
<div class="mt-i"><div class="mt-ic">🍳</div><div class="mt-l">Rezepte</div></div>
|
||||
<div class="mt-i a"><div class="mt-ic">📊</div><div class="mt-l">Analyse</div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Desktop V1 -->
|
||||
<div class="prev-col" style="flex:1;min-width:580px;">
|
||||
<div class="bp-lbl">Desktop · 1040px</div>
|
||||
<div class="desk">
|
||||
<div class="dsb">
|
||||
<div class="dsb-logo"><div class="dsb-lm"><div class="dsb-ic">🥦</div><div class="dsb-nm">Mealprep</div></div><div class="dsb-sub">Familie Raddatz</div></div>
|
||||
<div class="dsb-nav">
|
||||
<div class="dsb-nl">Planung</div>
|
||||
<div class="dsb-ni a"><span class="dsb-nc">📅</span> Wochenplan</div>
|
||||
<div class="dsb-ni"><span class="dsb-nc">🛒</span> Einkaufsliste</div>
|
||||
<div class="dsb-ni"><span class="dsb-nc">🍳</span> Rezepte</div>
|
||||
<div class="dsb-nl" style="margin-top:12px;">Haushalt</div>
|
||||
<div class="dsb-ni"><span class="dsb-nc">⚙️</span> Einstellungen</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dm">
|
||||
<div class="dtb">
|
||||
<span class="dtb-bc">Planer /</span>
|
||||
<span class="dtb-t">Abwechslungs-Analyse</span>
|
||||
</div>
|
||||
<div class="dmc">
|
||||
<!-- 2-col: left score + breakdown, right warnings -->
|
||||
<div style="display:flex;gap:32px;">
|
||||
<!-- Left -->
|
||||
<div style="flex:1;">
|
||||
<div style="display:flex;align-items:baseline;gap:8px;margin-bottom:12px;">
|
||||
<span class="score-num" style="font-size:72px;color:var(--color-text);">5.8</span>
|
||||
<span style="font-size:18px;color:var(--color-text-muted);">/ 10</span>
|
||||
<span style="font-size:14px;font-weight:500;color:var(--yellow-text);margin-left:4px;">Verbesserbar</span>
|
||||
</div>
|
||||
<div class="prog" style="width:200px;"><div class="prog-fill" style="width:58%;"></div></div>
|
||||
<div style="margin-top:20px;">
|
||||
<div style="font-size:10px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--color-text-muted);margin-bottom:10px;">Bewertung im Detail</div>
|
||||
<div class="sb-row"><span class="sb-label">Quellen-Vielfalt</span><span class="sb-val" style="color:var(--red-dark);">4 / 10</span></div>
|
||||
<div class="sb-row"><span class="sb-label">Zutaten-Überschneidung</span><span class="sb-val" style="color:var(--yellow-text);">7 / 10</span></div>
|
||||
<div class="sb-row"><span class="sb-label">Aufwandsbalance</span><span class="sb-val" style="color:var(--green-dark);">8 / 10</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Right: warnings -->
|
||||
<div style="width:340px;flex-shrink:0;">
|
||||
<div style="font-size:10px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--color-text-muted);margin-bottom:10px;">Hinweise</div>
|
||||
<div class="wcard">
|
||||
<div class="wcard-hd"><div class="wcard-hd-t">Tofu mehrfach diese Woche</div></div>
|
||||
<div class="wcard-row">
|
||||
<div class="wcard-left"><span class="wcard-day">Mo</span><span class="wcard-recipe">Tofu-Gemüse-Pfanne</span></div>
|
||||
<span class="wcard-swap">Tauschen →</span>
|
||||
</div>
|
||||
<div class="wcard-row">
|
||||
<div class="wcard-left"><span class="wcard-day">Mi</span><span class="wcard-recipe">Tofu-Curry mit Reis</span></div>
|
||||
<span class="wcard-swap">Tauschen →</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="wcard">
|
||||
<div class="wcard-hd"><div class="wcard-hd-t">Paprika in mehreren Gerichten</div></div>
|
||||
<div class="wcard-row">
|
||||
<div class="wcard-left"><span class="wcard-day">Di</span><span class="wcard-recipe">Paprika-Linsen-Eintopf</span></div>
|
||||
<span class="wcard-swap">Tauschen →</span>
|
||||
</div>
|
||||
<div class="wcard-row">
|
||||
<div class="wcard-left"><span class="wcard-day">Mi</span><span class="wcard-recipe">Tofu-Curry mit Reis</span></div>
|
||||
<span class="wcard-swap">Tauschen →</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="notes notes-y">
|
||||
<div class="notes-lbl">Design-Notizen V1</div>
|
||||
<ul>
|
||||
<li>Geringster Umbauaufwand — nur VarietyWarningCards.svelte ändert sich, keine Layout-Umstrukturierung.</li>
|
||||
<li>Behält die bekannte Score-Hierarchie bei: Zahl oben, dann Detail, dann Hinweise.</li>
|
||||
<li>Schwachstelle: Hinweise sind trotzdem am Ende der Seite versteckt — auf kurzen Telefon-Bildschirmen muss gescrollt werden, bevor der Planer die Tausch-Links sieht.</li>
|
||||
<li>Die Sub-Scores bleiben immer sichtbar, auch wenn der Planer nur die Tausch-Aktionen braucht.</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr class="divider"/>
|
||||
|
||||
|
||||
<!-- ═══════════════════════════════════════
|
||||
V2 — AKTIONS-LISTE (EMPFOHLEN)
|
||||
════════════════════════════════════════ -->
|
||||
<div class="section">
|
||||
<div class="var-head var-g">
|
||||
<div class="var-num">V2</div>
|
||||
<div>
|
||||
<div class="var-id">Variation 2 · Empfohlen</div>
|
||||
<div class="var-title">Aktions-Liste</div>
|
||||
<div class="var-desc">Hinweise rücken nach oben — direkt unter dem Score. Der Planer sieht sofort, was zu tun ist. Sub-Scores wandern in ein ausklappbares "Bewertung im Detail" (native <details>, kein JS). Kompakterer Score-Hero gibt Hinweisen mehr Raum.</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="previews">
|
||||
|
||||
<!-- Mobile V2 -->
|
||||
<div class="prev-col">
|
||||
<div class="bp-lbl">Mobile · 320px</div>
|
||||
<div class="phone">
|
||||
<div class="pst"><b>9:41</b><span>●●●</span></div>
|
||||
<div class="mtb">
|
||||
<div class="mtb-back">‹</div>
|
||||
<div class="mtb-t">Abwechslungs-Analyse</div>
|
||||
</div>
|
||||
<div style="flex:1;overflow-y:auto;padding:16px;">
|
||||
|
||||
<!-- Compact score strip -->
|
||||
<div style="display:flex;align-items:center;gap:12px;padding:14px 16px;background:var(--color-surface);border-radius:var(--radius-lg);border:1px solid var(--color-border);margin-bottom:16px;">
|
||||
<div>
|
||||
<span class="score-num" style="font-size:40px;color:var(--color-text);">5.8</span>
|
||||
<span style="font-size:13px;color:var(--color-text-muted);margin-left:4px;">/ 10</span>
|
||||
</div>
|
||||
<div style="flex:1;">
|
||||
<div style="font-size:12px;font-weight:500;color:var(--yellow-text);margin-bottom:4px;">Verbesserbar</div>
|
||||
<div class="prog"><div class="prog-fill" style="width:58%;"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Warnings — primary content -->
|
||||
<div style="font-size:10px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--color-text-muted);margin-bottom:8px;">2 Hinweise</div>
|
||||
|
||||
<div class="wcard">
|
||||
<div class="wcard-hd"><div class="wcard-hd-t">Tofu mehrfach diese Woche</div></div>
|
||||
<div class="wcard-row">
|
||||
<div class="wcard-left"><span class="wcard-day">Mo</span><span class="wcard-recipe">Tofu-Gemüse-Pfanne</span></div>
|
||||
<span class="wcard-swap">Tauschen →</span>
|
||||
</div>
|
||||
<div class="wcard-row">
|
||||
<div class="wcard-left"><span class="wcard-day">Mi</span><span class="wcard-recipe">Tofu-Curry mit Reis</span></div>
|
||||
<span class="wcard-swap">Tauschen →</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="wcard" style="margin-bottom:16px;">
|
||||
<div class="wcard-hd"><div class="wcard-hd-t">Paprika in mehreren Gerichten</div></div>
|
||||
<div class="wcard-row">
|
||||
<div class="wcard-left"><span class="wcard-day">Di</span><span class="wcard-recipe">Paprika-Linsen-Eintopf</span></div>
|
||||
<span class="wcard-swap">Tauschen →</span>
|
||||
</div>
|
||||
<div class="wcard-row">
|
||||
<div class="wcard-left"><span class="wcard-day">Mi</span><span class="wcard-recipe">Tofu-Curry mit Reis</span></div>
|
||||
<span class="wcard-swap">Tauschen →</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Sub-scores — collapsed -->
|
||||
<details class="det" style="border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:10px 14px;background:var(--color-surface);">
|
||||
<summary>Bewertung im Detail</summary>
|
||||
<div class="det-body">
|
||||
<div class="sb-row"><span class="sb-label">Quellen-Vielfalt</span><span class="sb-val" style="color:var(--red-dark);">4 / 10</span></div>
|
||||
<div class="sb-row"><span class="sb-label">Zutaten-Überschneidung</span><span class="sb-val" style="color:var(--yellow-text);">7 / 10</span></div>
|
||||
<div class="sb-row"><span class="sb-label">Aufwandsbalance</span><span class="sb-val" style="color:var(--green-dark);">8 / 10</span></div>
|
||||
</div>
|
||||
</details>
|
||||
|
||||
</div>
|
||||
<div class="mbt">
|
||||
<div class="mt-i"><div class="mt-ic">📅</div><div class="mt-l">Plan</div></div>
|
||||
<div class="mt-i"><div class="mt-ic">🛒</div><div class="mt-l">Einkauf</div></div>
|
||||
<div class="mt-i"><div class="mt-ic">🍳</div><div class="mt-l">Rezepte</div></div>
|
||||
<div class="mt-i a"><div class="mt-ic">📊</div><div class="mt-l">Analyse</div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Desktop V2 -->
|
||||
<div class="prev-col" style="flex:1;min-width:580px;">
|
||||
<div class="bp-lbl">Desktop · 1040px</div>
|
||||
<div class="desk">
|
||||
<div class="dsb">
|
||||
<div class="dsb-logo"><div class="dsb-lm"><div class="dsb-ic">🥦</div><div class="dsb-nm">Mealprep</div></div><div class="dsb-sub">Familie Raddatz</div></div>
|
||||
<div class="dsb-nav">
|
||||
<div class="dsb-nl">Planung</div>
|
||||
<div class="dsb-ni a"><span class="dsb-nc">📅</span> Wochenplan</div>
|
||||
<div class="dsb-ni"><span class="dsb-nc">🛒</span> Einkaufsliste</div>
|
||||
<div class="dsb-ni"><span class="dsb-nc">🍳</span> Rezepte</div>
|
||||
<div class="dsb-nl" style="margin-top:12px;">Haushalt</div>
|
||||
<div class="dsb-ni"><span class="dsb-nc">⚙️</span> Einstellungen</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dm">
|
||||
<div class="dtb">
|
||||
<span class="dtb-bc">Planer /</span>
|
||||
<span class="dtb-t">Abwechslungs-Analyse</span>
|
||||
</div>
|
||||
<div class="dmc">
|
||||
<!-- Top: compact score strip + effort -->
|
||||
<div style="display:flex;gap:16px;align-items:center;padding:16px;background:var(--color-surface);border-radius:var(--radius-lg);border:1px solid var(--color-border);margin-bottom:24px;">
|
||||
<div>
|
||||
<span class="score-num" style="font-size:52px;color:var(--color-text);">5.8</span>
|
||||
<span style="font-size:14px;color:var(--color-text-muted);margin-left:6px;">/ 10</span>
|
||||
</div>
|
||||
<div style="flex:1;">
|
||||
<div style="font-size:13px;font-weight:500;color:var(--yellow-text);margin-bottom:4px;">Verbesserbar — 2 Hinweise</div>
|
||||
<div class="prog"><div class="prog-fill" style="width:58%;"></div></div>
|
||||
</div>
|
||||
<!-- Sub-scores inline on desktop -->
|
||||
<div style="border-left:1px solid var(--color-border);padding-left:16px;display:flex;gap:16px;">
|
||||
<div style="text-align:center;">
|
||||
<div style="font-family:var(--font-display);font-size:20px;font-weight:300;color:var(--red-dark);">4</div>
|
||||
<div style="font-size:10px;color:var(--color-text-muted);">Quellen</div>
|
||||
</div>
|
||||
<div style="text-align:center;">
|
||||
<div style="font-family:var(--font-display);font-size:20px;font-weight:300;color:var(--yellow-text);">7</div>
|
||||
<div style="font-size:10px;color:var(--color-text-muted);">Zutaten</div>
|
||||
</div>
|
||||
<div style="text-align:center;">
|
||||
<div style="font-family:var(--font-display);font-size:20px;font-weight:300;color:var(--green-dark);">8</div>
|
||||
<div style="font-size:10px;color:var(--color-text-muted);">Aufwand</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Warnings full-width -->
|
||||
<div style="font-size:10px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--color-text-muted);margin-bottom:10px;">Hinweise</div>
|
||||
<div style="display:grid;grid-template-columns:1fr 1fr;gap:12px;">
|
||||
<div class="wcard">
|
||||
<div class="wcard-hd"><div class="wcard-hd-t">Tofu mehrfach diese Woche</div></div>
|
||||
<div class="wcard-row">
|
||||
<div class="wcard-left"><span class="wcard-day">Mo</span><span class="wcard-recipe">Tofu-Gemüse-Pfanne</span></div>
|
||||
<span class="wcard-swap">Tauschen →</span>
|
||||
</div>
|
||||
<div class="wcard-row">
|
||||
<div class="wcard-left"><span class="wcard-day">Mi</span><span class="wcard-recipe">Tofu-Curry mit Reis</span></div>
|
||||
<span class="wcard-swap">Tauschen →</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="wcard">
|
||||
<div class="wcard-hd"><div class="wcard-hd-t">Paprika in mehreren Gerichten</div></div>
|
||||
<div class="wcard-row">
|
||||
<div class="wcard-left"><span class="wcard-day">Di</span><span class="wcard-recipe">Paprika-Linsen-Eintopf</span></div>
|
||||
<span class="wcard-swap">Tauschen →</span>
|
||||
</div>
|
||||
<div class="wcard-row">
|
||||
<div class="wcard-left"><span class="wcard-day">Mi</span><span class="wcard-recipe">Tofu-Curry mit Reis</span></div>
|
||||
<span class="wcard-swap">Tauschen →</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="notes notes-g">
|
||||
<div class="notes-lbl">Design-Notizen V2</div>
|
||||
<ul>
|
||||
<li>Hinweise erscheinen direkt unter dem Score — kein Scrollen nötig auf typischen Telefon-Bildschirmen.</li>
|
||||
<li>Kompakter Score-Strip auf Mobile spart ~80px gegenüber dem aktuellen großen Hero — mehr Raum für die eigentlichen Tausch-Aktionen.</li>
|
||||
<li>Desktop: Sub-Scores werden als kompakte Zahlen-Spalte in die Score-Leiste integriert — kein separater Abschnitt mehr nötig.</li>
|
||||
<li>Native <details> auf Mobile braucht kein JavaScript; funktioniert auch ohne hydration.</li>
|
||||
<li>"2 Hinweise" im Score-Strip auf Desktop gibt dem Planer sofort Kontext, ohne zu scrollen.</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr class="divider"/>
|
||||
|
||||
|
||||
<!-- ═══════════════════════════════════════
|
||||
V3 — HINWEISE ZUERST
|
||||
════════════════════════════════════════ -->
|
||||
<div class="section">
|
||||
<div class="var-head var-p">
|
||||
<div class="var-num">V3</div>
|
||||
<div>
|
||||
<div class="var-id">Variation 3</div>
|
||||
<div class="var-title">Hinweise zuerst</div>
|
||||
<div class="var-desc">Invertiertes Layout: die Seite öffnet mit den konkreten Problem-Karten — groß und klar. Score und Breakdown erscheinen darunter als unterstützende Information. Jede Warnung ist eine eigenständige "Aufgaben-Karte" mit prominentem Tausch-Button statt Link.</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="previews">
|
||||
|
||||
<!-- Mobile V3 -->
|
||||
<div class="prev-col">
|
||||
<div class="bp-lbl">Mobile · 320px</div>
|
||||
<div class="phone">
|
||||
<div class="pst"><b>9:41</b><span>●●●</span></div>
|
||||
<div class="mtb">
|
||||
<div class="mtb-back">‹</div>
|
||||
<div class="mtb-t">Abwechslungs-Analyse</div>
|
||||
</div>
|
||||
<div style="flex:1;overflow-y:auto;padding:16px;">
|
||||
|
||||
<!-- Problem cards — full width, prominent -->
|
||||
<div style="font-size:10px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--color-text-muted);margin-bottom:10px;">Was zu tun ist</div>
|
||||
|
||||
<!-- Problem card 1 -->
|
||||
<div style="border:1px solid var(--yellow-light);border-radius:var(--radius-xl);overflow:hidden;margin-bottom:10px;background:var(--yellow-tint);">
|
||||
<div style="padding:12px 14px;border-bottom:1px solid var(--yellow-light);">
|
||||
<div style="font-size:10px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--yellow-text);margin-bottom:2px;">Quellen-Wiederholung</div>
|
||||
<div style="font-size:14px;font-weight:500;color:var(--color-text);">Tofu an 2 Tagen</div>
|
||||
</div>
|
||||
<!-- Row 1 -->
|
||||
<div style="display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 14px;border-bottom:1px solid rgba(249,224,138,.5);">
|
||||
<div style="display:flex;flex-direction:column;gap:1px;">
|
||||
<div style="font-size:10px;font-weight:600;color:var(--yellow-text);">Montag</div>
|
||||
<div style="font-size:13px;font-weight:500;color:var(--color-text);">Tofu-Gemüse-Pfanne</div>
|
||||
</div>
|
||||
<a href="#" style="font-size:12px;font-weight:600;padding:6px 12px;background:var(--yellow-text);color:#fff;border-radius:var(--radius-md);white-space:nowrap;text-decoration:none;">Tauschen</a>
|
||||
</div>
|
||||
<!-- Row 2 -->
|
||||
<div style="display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 14px;">
|
||||
<div style="display:flex;flex-direction:column;gap:1px;">
|
||||
<div style="font-size:10px;font-weight:600;color:var(--yellow-text);">Mittwoch</div>
|
||||
<div style="font-size:13px;font-weight:500;color:var(--color-text);">Tofu-Curry mit Reis</div>
|
||||
</div>
|
||||
<a href="#" style="font-size:12px;font-weight:600;padding:6px 12px;background:var(--yellow-text);color:#fff;border-radius:var(--radius-md);white-space:nowrap;text-decoration:none;">Tauschen</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Problem card 2 -->
|
||||
<div style="border:1px solid var(--yellow-light);border-radius:var(--radius-xl);overflow:hidden;margin-bottom:16px;background:var(--yellow-tint);">
|
||||
<div style="padding:12px 14px;border-bottom:1px solid var(--yellow-light);">
|
||||
<div style="font-size:10px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--yellow-text);margin-bottom:2px;">Zutaten-Überschneidung</div>
|
||||
<div style="font-size:14px;font-weight:500;color:var(--color-text);">Paprika an 2 aufeinanderfolgenden Tagen</div>
|
||||
</div>
|
||||
<div style="display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 14px;border-bottom:1px solid rgba(249,224,138,.5);">
|
||||
<div style="display:flex;flex-direction:column;gap:1px;">
|
||||
<div style="font-size:10px;font-weight:600;color:var(--yellow-text);">Dienstag</div>
|
||||
<div style="font-size:13px;font-weight:500;color:var(--color-text);">Paprika-Linsen-Eintopf</div>
|
||||
</div>
|
||||
<a href="#" style="font-size:12px;font-weight:600;padding:6px 12px;background:var(--yellow-text);color:#fff;border-radius:var(--radius-md);white-space:nowrap;text-decoration:none;">Tauschen</a>
|
||||
</div>
|
||||
<div style="display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 14px;">
|
||||
<div style="display:flex;flex-direction:column;gap:1px;">
|
||||
<div style="font-size:10px;font-weight:600;color:var(--yellow-text);">Mittwoch</div>
|
||||
<div style="font-size:13px;font-weight:500;color:var(--color-text);">Tofu-Curry mit Reis</div>
|
||||
</div>
|
||||
<a href="#" style="font-size:12px;font-weight:600;padding:6px 12px;background:var(--yellow-text);color:#fff;border-radius:var(--radius-md);white-space:nowrap;text-decoration:none;">Tauschen</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Score — secondary, at bottom -->
|
||||
<div style="background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:14px 16px;">
|
||||
<div style="font-size:10px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--color-text-muted);margin-bottom:8px;">Gesamt-Score</div>
|
||||
<div style="display:flex;align-items:baseline;gap:8px;margin-bottom:8px;">
|
||||
<span class="score-num" style="font-size:36px;color:var(--color-text);">5.8</span>
|
||||
<span style="font-size:13px;color:var(--color-text-muted);">/ 10 · Verbesserbar</span>
|
||||
</div>
|
||||
<div class="prog"><div class="prog-fill" style="width:58%;"></div></div>
|
||||
<div class="det" style="margin-top:10px;">
|
||||
<details>
|
||||
<summary style="font-size:11px;color:var(--color-text-muted);cursor:default;">Aufschlüsselung anzeigen</summary>
|
||||
<div style="padding-top:8px;">
|
||||
<div class="sb-row"><span class="sb-label">Quellen-Vielfalt</span><span class="sb-val" style="color:var(--red-dark);">4 / 10</span></div>
|
||||
<div class="sb-row"><span class="sb-label">Zutaten-Überschneidung</span><span class="sb-val" style="color:var(--yellow-text);">7 / 10</span></div>
|
||||
<div class="sb-row"><span class="sb-label">Aufwandsbalance</span><span class="sb-val" style="color:var(--green-dark);">8 / 10</span></div>
|
||||
</div>
|
||||
</details>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="mbt">
|
||||
<div class="mt-i"><div class="mt-ic">📅</div><div class="mt-l">Plan</div></div>
|
||||
<div class="mt-i"><div class="mt-ic">🛒</div><div class="mt-l">Einkauf</div></div>
|
||||
<div class="mt-i"><div class="mt-ic">🍳</div><div class="mt-l">Rezepte</div></div>
|
||||
<div class="mt-i a"><div class="mt-ic">📊</div><div class="mt-l">Analyse</div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Desktop V3 -->
|
||||
<div class="prev-col" style="flex:1;min-width:580px;">
|
||||
<div class="bp-lbl">Desktop · 1040px</div>
|
||||
<div class="desk">
|
||||
<div class="dsb">
|
||||
<div class="dsb-logo"><div class="dsb-lm"><div class="dsb-ic">🥦</div><div class="dsb-nm">Mealprep</div></div><div class="dsb-sub">Familie Raddatz</div></div>
|
||||
<div class="dsb-nav">
|
||||
<div class="dsb-nl">Planung</div>
|
||||
<div class="dsb-ni a"><span class="dsb-nc">📅</span> Wochenplan</div>
|
||||
<div class="dsb-ni"><span class="dsb-nc">🛒</span> Einkaufsliste</div>
|
||||
<div class="dsb-ni"><span class="dsb-nc">🍳</span> Rezepte</div>
|
||||
<div class="dsb-nl" style="margin-top:12px;">Haushalt</div>
|
||||
<div class="dsb-ni"><span class="dsb-nc">⚙️</span> Einstellungen</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dm">
|
||||
<div class="dtb">
|
||||
<span class="dtb-bc">Planer /</span>
|
||||
<span class="dtb-t">Abwechslungs-Analyse</span>
|
||||
</div>
|
||||
<div class="dmc">
|
||||
<div style="display:grid;grid-template-columns:1fr 240px;gap:24px;">
|
||||
<!-- Left: problem cards -->
|
||||
<div>
|
||||
<div style="font-size:10px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--color-text-muted);margin-bottom:10px;">Was zu tun ist</div>
|
||||
|
||||
<div style="border:1px solid var(--yellow-light);border-radius:var(--radius-xl);overflow:hidden;margin-bottom:10px;background:var(--yellow-tint);">
|
||||
<div style="padding:10px 16px;border-bottom:1px solid var(--yellow-light);">
|
||||
<div style="font-size:10px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--yellow-text);margin-bottom:1px;">Quellen-Wiederholung</div>
|
||||
<div style="font-size:14px;font-weight:500;color:var(--color-text);">Tofu an 2 Tagen</div>
|
||||
</div>
|
||||
<div style="display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 16px;border-bottom:1px solid rgba(249,224,138,.5);">
|
||||
<div style="display:flex;align-items:baseline;gap:10px;">
|
||||
<span style="font-size:11px;font-weight:600;color:var(--yellow-text);width:60px;">Montag</span>
|
||||
<span style="font-size:13px;font-weight:500;color:var(--color-text);">Tofu-Gemüse-Pfanne</span>
|
||||
</div>
|
||||
<a href="#" style="font-size:12px;font-weight:600;padding:6px 14px;background:var(--yellow-text);color:#fff;border-radius:var(--radius-md);white-space:nowrap;text-decoration:none;">Tauschen</a>
|
||||
</div>
|
||||
<div style="display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 16px;">
|
||||
<div style="display:flex;align-items:baseline;gap:10px;">
|
||||
<span style="font-size:11px;font-weight:600;color:var(--yellow-text);width:60px;">Mittwoch</span>
|
||||
<span style="font-size:13px;font-weight:500;color:var(--color-text);">Tofu-Curry mit Reis</span>
|
||||
</div>
|
||||
<a href="#" style="font-size:12px;font-weight:600;padding:6px 14px;background:var(--yellow-text);color:#fff;border-radius:var(--radius-md);white-space:nowrap;text-decoration:none;">Tauschen</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="border:1px solid var(--yellow-light);border-radius:var(--radius-xl);overflow:hidden;background:var(--yellow-tint);">
|
||||
<div style="padding:10px 16px;border-bottom:1px solid var(--yellow-light);">
|
||||
<div style="font-size:10px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--yellow-text);margin-bottom:1px;">Zutaten-Überschneidung</div>
|
||||
<div style="font-size:14px;font-weight:500;color:var(--color-text);">Paprika an 2 aufeinanderfolgenden Tagen</div>
|
||||
</div>
|
||||
<div style="display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 16px;border-bottom:1px solid rgba(249,224,138,.5);">
|
||||
<div style="display:flex;align-items:baseline;gap:10px;">
|
||||
<span style="font-size:11px;font-weight:600;color:var(--yellow-text);width:60px;">Dienstag</span>
|
||||
<span style="font-size:13px;font-weight:500;color:var(--color-text);">Paprika-Linsen-Eintopf</span>
|
||||
</div>
|
||||
<a href="#" style="font-size:12px;font-weight:600;padding:6px 14px;background:var(--yellow-text);color:#fff;border-radius:var(--radius-md);white-space:nowrap;text-decoration:none;">Tauschen</a>
|
||||
</div>
|
||||
<div style="display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 16px;">
|
||||
<div style="display:flex;align-items:baseline;gap:10px;">
|
||||
<span style="font-size:11px;font-weight:600;color:var(--yellow-text);width:60px;">Mittwoch</span>
|
||||
<span style="font-size:13px;font-weight:500;color:var(--color-text);">Tofu-Curry mit Reis</span>
|
||||
</div>
|
||||
<a href="#" style="font-size:12px;font-weight:600;padding:6px 14px;background:var(--yellow-text);color:#fff;border-radius:var(--radius-md);white-space:nowrap;text-decoration:none;">Tauschen</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Right: score panel -->
|
||||
<div>
|
||||
<div style="background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:16px;margin-bottom:12px;">
|
||||
<div style="font-size:10px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--color-text-muted);margin-bottom:8px;">Score</div>
|
||||
<div style="display:flex;align-items:baseline;gap:6px;margin-bottom:8px;">
|
||||
<span class="score-num" style="font-size:40px;color:var(--color-text);">5.8</span>
|
||||
<span style="font-size:13px;color:var(--color-text-muted);">/ 10</span>
|
||||
</div>
|
||||
<div style="font-size:12px;font-weight:500;color:var(--yellow-text);margin-bottom:6px;">Verbesserbar</div>
|
||||
<div class="prog"><div class="prog-fill" style="width:58%;"></div></div>
|
||||
</div>
|
||||
<div style="background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:16px;">
|
||||
<div style="font-size:10px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--color-text-muted);margin-bottom:10px;">Aufschlüsselung</div>
|
||||
<div class="sb-row"><span class="sb-label">Quellen</span><span class="sb-val" style="color:var(--red-dark);">4 / 10</span></div>
|
||||
<div class="sb-row"><span class="sb-label">Zutaten</span><span class="sb-val" style="color:var(--yellow-text);">7 / 10</span></div>
|
||||
<div class="sb-row"><span class="sb-label">Aufwand</span><span class="sb-val" style="color:var(--green-dark);">8 / 10</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="notes notes-p">
|
||||
<div class="notes-lbl">Design-Notizen V3</div>
|
||||
<ul>
|
||||
<li>Klarer Fokus: Das erste, was der Planer sieht, ist "Was zu tun ist" — keine Score-Hierarchie die von der Aktion ablenkt.</li>
|
||||
<li>Prominente "Tauschen"-Buttons (gefüllt, dunkelgelb) statt Links — erhöht die Tipp-Fläche auf Mobile und macht die Aktion offensichtlicher.</li>
|
||||
<li>Voller Wochentag ("Montag" statt "Mo") — lesbarer, besonders auf Desktop.</li>
|
||||
<li>Schwachstelle: Wenn es keine Hinweise gibt (Score ≥ 9), wirkt die Seite leer — der Score müsste dann nach oben rücken. Erfordert einen separaten Empty-State.</li>
|
||||
<li>Höherer Umbauaufwand gegenüber V1 und V2 — die Page-Struktur ändert sich grundlegend.</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr class="divider"/>
|
||||
|
||||
<!-- Comparison -->
|
||||
<div class="section">
|
||||
<div class="section-label">Vergleich</div>
|
||||
<table class="ct">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Kriterium</th>
|
||||
<th style="color:var(--yellow-text);">V1 Erweiterte Karten</th>
|
||||
<th style="color:var(--green-dark);">V2 Aktions-Liste ★</th>
|
||||
<th style="color:var(--purple-dark);">V3 Hinweise zuerst</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Rezeptnamen sichtbar</td>
|
||||
<td>✓ Ja</td>
|
||||
<td>✓ Ja</td>
|
||||
<td>✓ Ja, prominent</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Direkter Tausch</td>
|
||||
<td>Link</td>
|
||||
<td>Link</td>
|
||||
<td>Button (größere Tap-Fläche)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Hinweise sichtbar ohne Scrollen</td>
|
||||
<td>Nein (Score + Breakdown zuerst)</td>
|
||||
<td>Ja (direkt unter kompaktem Score)</td>
|
||||
<td>Ja (ganz oben)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Umbauaufwand</td>
|
||||
<td>Niedrig</td>
|
||||
<td>Mittel</td>
|
||||
<td>Hoch</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Layout-Änderung</td>
|
||||
<td>Keine</td>
|
||||
<td>Score kompakter, Details kollabierbar</td>
|
||||
<td>Grundlegende Umstrukturierung</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Empfehlung</td>
|
||||
<td>Wenn schnelle Lieferung Prio</td>
|
||||
<td><strong>Empfohlen ★</strong></td>
|
||||
<td>Wenn Aktions-Fokus Prio</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user