876 lines
47 KiB
HTML
876 lines
47 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8"/>
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||
<title>Enrich / Edit Document — 4 Concept Designs · Familienarchiv</title>
|
||
<link href="https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,400;0,700;1,300&family=Montserrat:wght@400;500;600;700;800;900&display=swap" rel="stylesheet"/>
|
||
<style>
|
||
/* ── Reset ── */
|
||
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
|
||
body{font-family:'Montserrat',system-ui,sans-serif;background:#ECEAE4;color:#1A1A1A;line-height:1.5;font-size:13px}
|
||
.doc{max-width:1300px;margin:0 auto;padding:48px 32px 120px}
|
||
|
||
/* ── Masthead ── */
|
||
.mh{padding-bottom:24px;border-bottom:3px solid #002850;margin-bottom:60px}
|
||
.mh h1{font-size:23px;font-weight:900;color:#002850;letter-spacing:-.4px}
|
||
.mh p{font-size:13px;color:#555;max-width:740px;line-height:1.75;margin-top:8px}
|
||
.mh .byline{font-size:9px;color:#999;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;margin-top:10px}
|
||
.tag-row{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap}
|
||
.tag{background:#002850;color:#A6DAD8;padding:2px 8px;border-radius:2px;font-size:8px;font-weight:700;letter-spacing:.8px;text-transform:uppercase}
|
||
.tag.amber{background:#7c4a00;color:#fde68a}
|
||
.tag.green{background:#1e5e34;color:#d1fae5}
|
||
.tag.gray{background:#4b5563;color:#e5e7eb}
|
||
|
||
/* ── Concept section ── */
|
||
.concept{margin-bottom:88px;padding-bottom:88px;border-bottom:2px dashed #C8C4BE}
|
||
.concept:last-of-type{border-bottom:none;margin-bottom:0;padding-bottom:0}
|
||
.concept-header{display:flex;align-items:flex-start;gap:24px;margin-bottom:36px}
|
||
.concept-num{font-size:72px;font-weight:900;color:#E0DDD6;line-height:1;flex-shrink:0;width:80px}
|
||
.concept-label{font-size:8.5px;font-weight:800;text-transform:uppercase;letter-spacing:1.2px;color:#A6DAD8;margin-bottom:5px}
|
||
.concept-title{font-family:'Merriweather',Georgia,serif;font-size:22px;font-weight:700;color:#002850;margin-bottom:8px}
|
||
.concept-desc{font-size:13px;color:#555;max-width:720px;line-height:1.75}
|
||
.concept-best{margin-top:10px;display:flex;align-items:center;gap:7px}
|
||
.best-label{background:#A6DAD8;color:#002850;padding:2px 7px;border-radius:2px;font-size:7.5px;font-weight:800;letter-spacing:.5px;text-transform:uppercase}
|
||
.best-text{font-size:11.5px;font-weight:600;color:#444}
|
||
.concept-tradeoff{margin-top:6px;font-size:11.5px;color:#888;font-style:italic;max-width:640px}
|
||
|
||
/* ── Browser chrome ── */
|
||
.screen{max-width:940px;margin:0 auto}
|
||
.chrome{background:#F5F4EE;border:1.5px solid #C4C0BA;border-radius:8px;overflow:hidden;box-shadow:0 4px 20px rgba(0,0,0,.1)}
|
||
.chrome-bar{height:20px;background:#E8E6E0;border-bottom:1px solid #C4C0BA;display:flex;align-items:center;padding:0 8px;gap:4px;flex-shrink:0}
|
||
.chrome-dot{width:6px;height:6px;border-radius:50%;background:#BDB8B1}
|
||
.chrome-url{flex:1;height:9px;background:#CCC8C2;border-radius:5px;margin-left:6px}
|
||
|
||
/* ── App nav ── */
|
||
.app-nav{height:30px;background:#002850;display:flex;align-items:center;padding:0 12px;gap:10px;flex-shrink:0}
|
||
.app-logo{font-family:'Merriweather',Georgia,serif;font-size:7px;font-weight:700;color:#fff;border-bottom:2px solid #A6DAD8;padding-bottom:1px}
|
||
.app-link{font-size:5.5px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:rgba(255,255,255,.45);white-space:nowrap}
|
||
.app-link.on{color:rgba(255,255,255,.9)}
|
||
.app-nav-r{margin-left:auto;display:flex;gap:6px;align-items:center}
|
||
.app-avatar{width:16px;height:16px;border-radius:50%;background:rgba(255,255,255,.12);display:flex;align-items:center;justify-content:center;font-size:5px;font-weight:800;color:rgba(255,255,255,.5)}
|
||
|
||
/* ── Enrich top bar ── */
|
||
.enrich-bar{height:36px;background:#F5F4EE;border-bottom:1px solid #E4E2D7;display:flex;align-items:center;padding:0 14px;gap:10px;flex-shrink:0}
|
||
.eb-back{font-size:6px;font-weight:800;text-transform:uppercase;letter-spacing:.8px;color:#888;display:flex;align-items:center;gap:4px;white-space:nowrap}
|
||
.eb-title{flex:1;text-align:center;font-family:'Merriweather',Georgia,serif;font-size:8px;font-weight:400;color:#002850;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 12px}
|
||
.eb-progress{font-size:6px;color:#AAA;white-space:nowrap;font-weight:600}
|
||
|
||
/* ── Split pane ── */
|
||
.app-body{display:flex;flex-direction:column;overflow:hidden}
|
||
.split{display:flex;overflow:hidden}
|
||
|
||
/* ── PDF panel ── */
|
||
.pdf-panel{background:#5E5C59;display:flex;flex-direction:column;overflow:hidden;border-right:1px solid #3A3836;flex:60}
|
||
.pdf-toolbar{height:26px;background:#3A3836;display:flex;align-items:center;padding:0 8px;gap:5px;flex-shrink:0}
|
||
.pdf-btn{width:14px;height:14px;border-radius:2px;background:rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;font-size:7px;color:rgba(255,255,255,.5)}
|
||
.pdf-btn.on{background:rgba(255,255,255,.18)}
|
||
.pdf-pg{font-size:6px;color:rgba(255,255,255,.4);margin:0 auto;font-weight:700;letter-spacing:.5px}
|
||
.pdf-view{flex:1;display:flex;justify-content:center;padding:16px;overflow-y:auto}
|
||
.pdf-paper{background:#FFFEF8;box-shadow:0 2px 10px rgba(0,0,0,.3);border-radius:1px;padding:14px 16px;display:flex;flex-direction:column;gap:0;width:190px;flex-shrink:0}
|
||
.pl{height:4px;background:#C4BDB0;border-radius:1px;opacity:.55;margin-bottom:3px}
|
||
.pl.h{height:5.5px;opacity:.75;margin-bottom:4px}
|
||
.pl.s{width:55%;opacity:.3}
|
||
.pl.m{width:80%}
|
||
.pl.sp{height:6px;background:transparent}
|
||
|
||
/* ── Form panel ── */
|
||
.form-panel{display:flex;flex-direction:column;overflow:hidden;background:#fff;flex:40}
|
||
.form-scroll{flex:1;overflow-y:auto;padding:14px 14px}
|
||
|
||
/* ── Form elements ── */
|
||
.f-card{background:#F9F8F5;border:1px solid #E4E2D7;border-radius:3px;padding:11px 12px;margin-bottom:10px}
|
||
.f-card-title{font-size:6px;font-weight:800;text-transform:uppercase;letter-spacing:1px;color:#B0ADA6;margin-bottom:9px}
|
||
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-bottom:7px}
|
||
.f-row.full{grid-template-columns:1fr}
|
||
.f-field{display:flex;flex-direction:column;gap:2px}
|
||
.f-label{font-size:6px;font-weight:700;color:#666}
|
||
.f-req{color:#C0392B}
|
||
.f-input{height:18px;border:1px solid #D4D0CA;border-radius:2px;background:#fff;font-size:7px;padding:0 6px;color:#333;display:flex;align-items:center}
|
||
.f-input.focus{border-color:#002850;box-shadow:0 0 0 2px rgba(0,40,80,.12)}
|
||
.f-input.filled{color:#002850;font-weight:600;background:#FAFBFF}
|
||
.f-input.suggested{border-color:#A6DAD8;background:#F0FAFA;color:#005858;font-weight:600}
|
||
.f-input.empty{color:#BBB;font-style:italic}
|
||
.f-input.tall{height:26px}
|
||
.f-textarea{height:36px;border:1px solid #D4D0CA;border-radius:2px;background:#fff;font-size:7px;padding:4px 6px;color:#555;resize:none;display:flex;align-items:flex-start;font-family:inherit}
|
||
.f-tags{display:flex;gap:3px;flex-wrap:wrap;min-height:18px;border:1px solid #D4D0CA;border-radius:2px;padding:2px 4px;background:#fff;align-items:center}
|
||
.f-chip{background:#002850;color:#A6DAD8;border-radius:2px;font-size:5.5px;font-weight:700;padding:1px 4px 1px 5px;display:flex;align-items:center;gap:2px}
|
||
.f-chip-rm{color:rgba(166,218,216,.5);font-weight:400}
|
||
.f-add{font-size:6px;color:#B0ADA6;cursor:pointer;padding:1px 0}
|
||
.f-helper{font-size:5.5px;color:#B0ADA6;margin-top:1px}
|
||
|
||
/* ── Action bar ── */
|
||
.action-bar{height:44px;background:#F5F4EE;border-top:1px solid #E4E2D7;display:flex;align-items:center;padding:0 12px;gap:6px;flex-shrink:0}
|
||
.btn-skip{font-size:6.5px;font-weight:700;color:#AAA;letter-spacing:.2px;cursor:pointer}
|
||
.btn-spacer{flex:1}
|
||
.btn-outline{height:22px;padding:0 10px;border:1px solid #C0BDB6;border-radius:2px;font-size:6px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;color:#777;display:flex;align-items:center;cursor:pointer}
|
||
.btn-primary{height:22px;padding:0 10px;border-radius:2px;font-size:6px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;background:#002850;color:#fff;display:flex;align-items:center;cursor:pointer;gap:4px}
|
||
.btn-primary.green{background:#1A7040}
|
||
.btn-primary.locked{background:#C8C4BE;color:#888}
|
||
|
||
/* ── Section stepper tabs (Concept A) ── */
|
||
.stepper{display:flex;border-bottom:1px solid #E4E2D7;background:#F0EEE9;flex-shrink:0}
|
||
.stepper-tab{flex:1;padding:7px 4px;text-align:center;font-size:6px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;color:#AAA;border-bottom:2px solid transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:3px}
|
||
.stepper-tab.done{color:#1A7040}
|
||
.stepper-tab.done .st-dot{background:#1A7040}
|
||
.stepper-tab.active{color:#002850;border-bottom-color:#002850}
|
||
.stepper-tab.active .st-dot{background:#002850}
|
||
.st-dot{width:5px;height:5px;border-radius:50%;background:#D4D0CA;flex-shrink:0}
|
||
.collapsed-section{border:1px solid #E4E2D7;border-radius:3px;overflow:hidden;margin-bottom:4px}
|
||
.collapsed-row{padding:7px 10px;background:#F9F8F5;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #E4E2D7}
|
||
.collapsed-row:last-child{border-bottom:none}
|
||
.collapsed-label{font-size:6px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;color:#B0ADA6}
|
||
.collapsed-summary{font-size:6px;color:#AAA}
|
||
.collapsed-summary.done{color:#1A7040;font-weight:700}
|
||
|
||
/* ── Progress bar (Concept B) ── */
|
||
.req-bar-wrap{background:#F0EEE9;border-bottom:1px solid #E4E2D7;padding:6px 14px;display:flex;align-items:center;gap:8px;flex-shrink:0}
|
||
.req-bar-label{font-size:5.5px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;color:#AAA;white-space:nowrap}
|
||
.req-bar-track{flex:1;height:3px;background:#E0DDD6;border-radius:2px}
|
||
.req-bar-fill{height:100%;background:#002850;border-radius:2px;width:75%}
|
||
.req-bar-count{font-size:6px;font-weight:800;color:#002850;white-space:nowrap}
|
||
|
||
/* ── Optional divider (Concept B) ── */
|
||
.opt-divider{display:flex;align-items:center;gap:8px;margin:12px 0}
|
||
.opt-line{flex:1;height:1px;background:#E4E2D7}
|
||
.opt-label{font-size:5.5px;font-weight:800;text-transform:uppercase;letter-spacing:.8px;color:#C8C4BE}
|
||
|
||
/* ── Keyboard hints (Concept C) ── */
|
||
.kbd{display:inline-flex;align-items:center;background:#E4E2D7;border:1px solid #C8C4BE;border-radius:2px;padding:0 4px;height:13px;font-size:5.5px;font-weight:700;color:#555;font-family:monospace}
|
||
|
||
/* ── Suggestion banner (Concept D) ── */
|
||
.ocr-banner{background:#EDF8F7;border:1px solid #A6DAD8;border-radius:3px;padding:7px 10px;margin-bottom:11px;display:flex;align-items:flex-start;gap:8px}
|
||
.ocr-icon{width:14px;height:14px;border-radius:50%;background:#A6DAD8;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:6.5px;color:#002850;font-weight:800}
|
||
.ocr-text{}
|
||
.ocr-title{font-size:6.5px;font-weight:800;color:#006B68;margin-bottom:2px}
|
||
.ocr-body{font-size:6px;color:#337;line-height:1.5}
|
||
.ocr-kbd{background:#D8F0EE;border:1px solid #A6DAD8;border-radius:2px;padding:0 3px;font-size:5.5px;font-weight:700;font-family:monospace;color:#006B68}
|
||
|
||
/* ── Completion ring (Concept D) ── */
|
||
.ring-wrap{display:flex;align-items:center;gap:5px;margin:0 6px}
|
||
.ring-count{font-size:6px;font-weight:700;color:#666}
|
||
|
||
/* ── Impl-ref table ── */
|
||
.impl-ref{margin-top:80px;padding-top:48px;border-top:3px solid #002850}
|
||
.impl-ref h2{font-size:17px;font-weight:900;color:#002850;margin-bottom:6px}
|
||
.impl-ref .subtitle{font-size:12px;color:#666;margin-bottom:24px;line-height:1.6;max-width:720px}
|
||
.impl-ref table{width:100%;border-collapse:collapse;font-size:11.5px}
|
||
.impl-ref thead th{text-align:left;padding:7px 12px;background:#002850;color:#A6DAD8;font-size:8.5px;font-weight:800;text-transform:uppercase;letter-spacing:.8px}
|
||
.impl-ref tbody td{padding:8px 12px;border-bottom:1px solid #E4E2D7;vertical-align:top;line-height:1.6;color:#333}
|
||
.impl-ref tbody tr:nth-child(even) td{background:#F5F4EE}
|
||
.impl-ref code{background:#E4E2D7;padding:1px 5px;border-radius:2px;font-family:monospace;font-size:10.5px;color:#1A1A1A}
|
||
.impl-ref .con{font-size:9px;font-weight:800;background:#002850;color:#A6DAD8;padding:1px 5px;border-radius:2px;letter-spacing:.3px}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="doc">
|
||
|
||
<!-- ══════════════════════════════════════════
|
||
MASTHEAD
|
||
══════════════════════════════════════════ -->
|
||
<div class="mh">
|
||
<h1>Enrich / Edit Document — 4 Concept Designs</h1>
|
||
<p>Four design directions for the unified document editing experience. The goal: make the enrich page the single entry point for both enrichment and editing, while reducing the friction of filling in metadata. Each concept attacks a different root cause of friction.</p>
|
||
<div class="byline">Leonie Voss · UI/UX · 2026-04-17 · Familienarchiv</div>
|
||
<div class="tag-row">
|
||
<span class="tag">enrich</span>
|
||
<span class="tag">edit-document</span>
|
||
<span class="tag amber">4 concepts</span>
|
||
<span class="tag green">friction reduction</span>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<!-- ══════════════════════════════════════════
|
||
CONCEPT A — Section Stepper
|
||
══════════════════════════════════════════ -->
|
||
<div class="concept">
|
||
<div class="concept-header">
|
||
<div class="concept-num">A</div>
|
||
<div>
|
||
<div class="concept-label">Concept A</div>
|
||
<div class="concept-title">Section Stepper</div>
|
||
<div class="concept-desc">The form is split into three sequential steps — <em>Wer & Wann</em>, <em>Beschreibung</em>, <em>Inhalt</em> — shown one at a time via tabs at the top of the form panel. Completed sections collapse to a single summary line with a green checkmark. The primary action becomes "Weiter →" until the final step, then "Speichern & Geprüft". Eliminates the wall-of-fields effect; the user always knows exactly what to do next.</div>
|
||
<div class="concept-best"><span class="best-label">Best for</span><span class="best-text">First-time enrichment; queued batch of documents</span></div>
|
||
<div class="concept-tradeoff">Trade-off: power users who tab through all fields quickly will find the extra "Next" click annoying. Mitigate with keyboard shortcut (⌘↵ = advance section).</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="screen">
|
||
<div class="chrome">
|
||
<div class="chrome-bar">
|
||
<div class="chrome-dot"></div><div class="chrome-dot"></div><div class="chrome-dot"></div>
|
||
<div class="chrome-url"></div>
|
||
</div>
|
||
<div class="app-body">
|
||
<div class="app-nav">
|
||
<span class="app-logo">Familienarchiv</span>
|
||
<span class="app-link">Dokumente</span>
|
||
<span class="app-link">Personen</span>
|
||
<span class="app-link on">Anreicherung</span>
|
||
<div class="app-nav-r"><div class="app-avatar">MR</div></div>
|
||
</div>
|
||
<div class="enrich-bar">
|
||
<div class="eb-back">← Zur Liste</div>
|
||
<div class="eb-title">Brief an Tante Hilde, Sommer 1952</div>
|
||
<div class="eb-progress">12 verbleibend</div>
|
||
</div>
|
||
<div class="split" style="height:470px">
|
||
|
||
<!-- PDF panel -->
|
||
<div class="pdf-panel">
|
||
<div class="pdf-toolbar">
|
||
<div class="pdf-btn on">⊕</div>
|
||
<div class="pdf-btn">⊖</div>
|
||
<div class="pdf-btn">↺</div>
|
||
<div class="pdf-pg">Seite 1 / 2</div>
|
||
<div class="pdf-btn">☷</div>
|
||
</div>
|
||
<div class="pdf-view">
|
||
<div class="pdf-paper">
|
||
<div class="pl h"></div>
|
||
<div class="pl s"></div>
|
||
<div class="pl sp"></div>
|
||
<div class="pl m"></div>
|
||
<div class="pl"></div>
|
||
<div class="pl"></div>
|
||
<div class="pl s"></div>
|
||
<div class="pl sp" style="height:4px"></div>
|
||
<div class="pl"></div>
|
||
<div class="pl m"></div>
|
||
<div class="pl"></div>
|
||
<div class="pl s"></div>
|
||
<div class="pl sp" style="height:4px"></div>
|
||
<div class="pl"></div>
|
||
<div class="pl m"></div>
|
||
<div class="pl"></div>
|
||
<div class="pl"></div>
|
||
<div class="pl s"></div>
|
||
<div class="pl sp" style="height:4px"></div>
|
||
<div class="pl m"></div>
|
||
<div class="pl"></div>
|
||
<div class="pl s"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Form panel -->
|
||
<div class="form-panel">
|
||
<!-- Section stepper -->
|
||
<div class="stepper">
|
||
<div class="stepper-tab done"><div class="st-dot"></div>Wer & Wann</div>
|
||
<div class="stepper-tab active"><div class="st-dot"></div>Beschreibung</div>
|
||
<div class="stepper-tab"><div class="st-dot"></div>Inhalt</div>
|
||
</div>
|
||
|
||
<div class="form-scroll" style="padding:12px 14px">
|
||
|
||
<!-- Completed section: collapsed summary -->
|
||
<div class="collapsed-section" style="margin-bottom:10px">
|
||
<div class="collapsed-row">
|
||
<span class="collapsed-label" style="color:#1A7040">✓ Wer & Wann</span>
|
||
<span class="collapsed-summary done">15.07.1952 · Karl Raddatz → Hilde Brandt</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Active section: Beschreibung -->
|
||
<div class="f-card" style="border-color:#002850;border-width:1.5px">
|
||
<div class="f-card-title" style="color:#002850">Beschreibung</div>
|
||
<div class="f-row full" style="margin-bottom:8px">
|
||
<div class="f-field">
|
||
<span class="f-label">Titel <span class="f-req">*</span></span>
|
||
<div class="f-input focus tall">Brief an Tante Hilde — München 1952</div>
|
||
</div>
|
||
</div>
|
||
<div class="f-row full" style="margin-bottom:8px">
|
||
<div class="f-field">
|
||
<span class="f-label">Schlagworte</span>
|
||
<div class="f-tags">
|
||
<div class="f-chip">Familie <span class="f-chip-rm">×</span></div>
|
||
<div class="f-chip">Krieg <span class="f-chip-rm">×</span></div>
|
||
<div class="f-add">+ Schlagwort hinzufügen</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="f-row full">
|
||
<div class="f-field">
|
||
<span class="f-label">Aufbewahrungsort</span>
|
||
<div class="f-input empty">z. B. Karton 3, Regal B</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Pending section: collapsed -->
|
||
<div class="collapsed-section">
|
||
<div class="collapsed-row">
|
||
<span class="collapsed-label">Inhalt</span>
|
||
<span class="collapsed-summary">Noch nicht ausgefüllt</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Action bar -->
|
||
<div class="action-bar">
|
||
<span class="btn-skip">Überspringen</span>
|
||
<div class="btn-spacer"></div>
|
||
<div class="btn-outline">Nur speichern</div>
|
||
<div class="btn-primary">Weiter → Inhalt</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div><!-- /concept A -->
|
||
|
||
|
||
<!-- ══════════════════════════════════════════
|
||
CONCEPT B — Flat & Airy
|
||
══════════════════════════════════════════ -->
|
||
<div class="concept">
|
||
<div class="concept-header">
|
||
<div class="concept-num">B</div>
|
||
<div>
|
||
<div class="concept-label">Concept B</div>
|
||
<div class="concept-title">Flat & Airy</div>
|
||
<div class="concept-desc">All card borders and section header chrome are removed. Fields flow in a single uninterrupted column with generous spacing. Required fields come first; a thin "Optional" divider separates them from supplementary fields. A 3 px progress bar at the top of the form panel shows how many required fields are filled. The page feels like a focused questionnaire, not a form.</div>
|
||
<div class="concept-best"><span class="best-label">Best for</span><span class="best-text">Frequent editors who find card groupings visually noisy</span></div>
|
||
<div class="concept-tradeoff">Trade-off: without section headers, new users may not understand the semantic grouping. Mitigate with subtle field-group spacing (20 px between groups, 10 px within).</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="screen">
|
||
<div class="chrome">
|
||
<div class="chrome-bar">
|
||
<div class="chrome-dot"></div><div class="chrome-dot"></div><div class="chrome-dot"></div>
|
||
<div class="chrome-url"></div>
|
||
</div>
|
||
<div class="app-body">
|
||
<div class="app-nav">
|
||
<span class="app-logo">Familienarchiv</span>
|
||
<span class="app-link">Dokumente</span>
|
||
<span class="app-link on">Anreicherung</span>
|
||
<div class="app-nav-r"><div class="app-avatar">MR</div></div>
|
||
</div>
|
||
<div class="enrich-bar">
|
||
<div class="eb-back">← Zur Liste</div>
|
||
<div class="eb-title">Brief an Tante Hilde, Sommer 1952</div>
|
||
<div class="eb-progress">12 verbleibend</div>
|
||
</div>
|
||
|
||
<!-- Required-fields progress bar (full-width, directly below top bar) -->
|
||
<div class="req-bar-wrap">
|
||
<span class="req-bar-label">Pflichtfelder</span>
|
||
<div class="req-bar-track"><div class="req-bar-fill" style="width:75%"></div></div>
|
||
<span class="req-bar-count">3 / 4</span>
|
||
</div>
|
||
|
||
<div class="split" style="height:434px">
|
||
|
||
<!-- PDF -->
|
||
<div class="pdf-panel">
|
||
<div class="pdf-toolbar">
|
||
<div class="pdf-btn on">⊕</div>
|
||
<div class="pdf-btn">⊖</div>
|
||
<div class="pdf-pg">Seite 1 / 2</div>
|
||
</div>
|
||
<div class="pdf-view">
|
||
<div class="pdf-paper">
|
||
<div class="pl h"></div>
|
||
<div class="pl s"></div>
|
||
<div class="pl sp"></div>
|
||
<div class="pl m"></div>
|
||
<div class="pl"></div>
|
||
<div class="pl s"></div>
|
||
<div class="pl sp" style="height:4px"></div>
|
||
<div class="pl"></div>
|
||
<div class="pl m"></div>
|
||
<div class="pl"></div>
|
||
<div class="pl s"></div>
|
||
<div class="pl sp" style="height:4px"></div>
|
||
<div class="pl"></div>
|
||
<div class="pl m"></div>
|
||
<div class="pl"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Form: flat, no card borders -->
|
||
<div class="form-panel" style="background:#FEFEFE">
|
||
<div class="form-scroll" style="padding:16px 16px">
|
||
|
||
<!-- Required fields block -->
|
||
<div style="margin-bottom:20px">
|
||
<div style="font-size:5.5px;font-weight:800;text-transform:uppercase;letter-spacing:1px;color:#A6DAD8;margin-bottom:9px">Pflichtfelder</div>
|
||
<!-- Titel -->
|
||
<div style="margin-bottom:9px">
|
||
<span class="f-label">Titel <span class="f-req">*</span></span>
|
||
<div class="f-input focus tall" style="margin-top:2px">Brief an Tante Hilde — München 1952</div>
|
||
</div>
|
||
<!-- Datum + Absender -->
|
||
<div style="display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-bottom:9px">
|
||
<div>
|
||
<span class="f-label">Datum <span class="f-req">*</span></span>
|
||
<div class="f-input filled" style="margin-top:2px">15.07.1952</div>
|
||
</div>
|
||
<div>
|
||
<span class="f-label">Absender <span class="f-req">*</span></span>
|
||
<div class="f-input filled" style="margin-top:2px">Raddatz, Karl</div>
|
||
</div>
|
||
</div>
|
||
<!-- Empfänger -->
|
||
<div>
|
||
<span class="f-label">Empfänger <span class="f-req">*</span></span>
|
||
<div class="f-tags" style="margin-top:2px">
|
||
<div class="f-chip">Hilde Brandt <span class="f-chip-rm">×</span></div>
|
||
<div class="f-add">+ Person</div>
|
||
</div>
|
||
<div class="f-helper" style="color:#C0392B">Pflichtfeld — mindestens 1 Empfänger</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Optional divider -->
|
||
<div class="opt-divider">
|
||
<div class="opt-line"></div>
|
||
<span class="opt-label">Optional</span>
|
||
<div class="opt-line"></div>
|
||
</div>
|
||
|
||
<!-- Optional fields block -->
|
||
<div style="margin-bottom:9px">
|
||
<span class="f-label">Schlagworte</span>
|
||
<div class="f-tags" style="margin-top:2px">
|
||
<div class="f-chip">Familie <span class="f-chip-rm">×</span></div>
|
||
<div class="f-chip">Krieg <span class="f-chip-rm">×</span></div>
|
||
<div class="f-add">+ Schlagwort</div>
|
||
</div>
|
||
</div>
|
||
<div style="display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-bottom:9px">
|
||
<div>
|
||
<span class="f-label">Ort</span>
|
||
<div class="f-input" style="margin-top:2px">München</div>
|
||
</div>
|
||
<div>
|
||
<span class="f-label">Aufbewahrungsort</span>
|
||
<div class="f-input empty" style="margin-top:2px">Karton, Regal …</div>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<span class="f-label">Kurzinhalt</span>
|
||
<div class="f-textarea" style="margin-top:2px"></div>
|
||
</div>
|
||
|
||
</div>
|
||
<div class="action-bar">
|
||
<span class="btn-skip">Überspringen</span>
|
||
<div class="btn-spacer"></div>
|
||
<div class="btn-outline">Speichern</div>
|
||
<div class="btn-primary locked">Speichern & Geprüft</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div><!-- /concept B -->
|
||
|
||
|
||
<!-- ══════════════════════════════════════════
|
||
CONCEPT C — PDF-First, Compact Rail
|
||
══════════════════════════════════════════ -->
|
||
<div class="concept">
|
||
<div class="concept-header">
|
||
<div class="concept-num">C</div>
|
||
<div>
|
||
<div class="concept-label">Concept C</div>
|
||
<div class="concept-title">PDF-First, Compact Rail</div>
|
||
<div class="concept-desc">The PDF gets 65% of the width. The form becomes a narrow right rail — no card containers, no padding waste, compact input heights (16 px vs 36 px standard). Tab moves between every field. Keyboard shortcuts (⌘↵ = save & next, → = skip) are shown as badges in the action bar. Tags use inline chips with a single "+" shortcut rather than a dropdown overlay. The document is always the primary focus; metadata is glanceable support.</div>
|
||
<div class="concept-best"><span class="best-label">Best for</span><span class="best-text">Power users processing 30+ documents per session</span></div>
|
||
<div class="concept-tradeoff">Trade-off: the rail is narrow (~280 px at 1280 px viewport). Long person names and tags may truncate. Design for max 20 chars per name; add tooltip on hover.</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="screen">
|
||
<div class="chrome">
|
||
<div class="chrome-bar">
|
||
<div class="chrome-dot"></div><div class="chrome-dot"></div><div class="chrome-dot"></div>
|
||
<div class="chrome-url"></div>
|
||
</div>
|
||
<div class="app-body">
|
||
<div class="app-nav">
|
||
<span class="app-logo">Familienarchiv</span>
|
||
<span class="app-link">Dokumente</span>
|
||
<span class="app-link on">Anreicherung</span>
|
||
<div class="app-nav-r"><div class="app-avatar">MR</div></div>
|
||
</div>
|
||
<div class="enrich-bar">
|
||
<div class="eb-back">← Zur Liste</div>
|
||
<div class="eb-title">Brief an Tante Hilde, Sommer 1952</div>
|
||
<div class="eb-progress">12 verbleibend</div>
|
||
</div>
|
||
<div class="split" style="height:470px">
|
||
|
||
<!-- PDF wider (65%) -->
|
||
<div class="pdf-panel" style="flex:65">
|
||
<div class="pdf-toolbar">
|
||
<div class="pdf-btn on">⊕</div>
|
||
<div class="pdf-btn">⊖</div>
|
||
<div class="pdf-btn">↺</div>
|
||
<div class="pdf-pg">Seite 1 / 2</div>
|
||
</div>
|
||
<div class="pdf-view" style="padding:20px">
|
||
<div class="pdf-paper" style="width:240px">
|
||
<div class="pl h"></div>
|
||
<div class="pl s"></div>
|
||
<div class="pl sp"></div>
|
||
<div class="pl m"></div>
|
||
<div class="pl"></div>
|
||
<div class="pl"></div>
|
||
<div class="pl s"></div>
|
||
<div class="pl sp" style="height:4px"></div>
|
||
<div class="pl"></div>
|
||
<div class="pl m"></div>
|
||
<div class="pl"></div>
|
||
<div class="pl s"></div>
|
||
<div class="pl sp" style="height:4px"></div>
|
||
<div class="pl"></div>
|
||
<div class="pl m"></div>
|
||
<div class="pl"></div>
|
||
<div class="pl"></div>
|
||
<div class="pl s"></div>
|
||
<div class="pl sp" style="height:4px"></div>
|
||
<div class="pl m"></div>
|
||
<div class="pl"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Compact form rail (35%) -->
|
||
<div class="form-panel" style="flex:35;background:#F9F8F5">
|
||
<div class="form-scroll" style="padding:10px 10px">
|
||
|
||
<!-- Inline section label -->
|
||
<div style="font-size:5.5px;font-weight:800;text-transform:uppercase;letter-spacing:1px;color:#B0ADA6;padding-bottom:5px;border-bottom:1px solid #E4E2D7;margin-bottom:7px">Wer & Wann</div>
|
||
|
||
<div style="display:grid;grid-template-columns:1fr 1fr;gap:5px;margin-bottom:5px">
|
||
<div class="f-field">
|
||
<span class="f-label" style="font-size:5.5px">Datum *</span>
|
||
<div class="f-input filled" style="height:15px;font-size:6.5px;margin-top:1px">15.07.1952</div>
|
||
</div>
|
||
<div class="f-field">
|
||
<span class="f-label" style="font-size:5.5px">Ort</span>
|
||
<div class="f-input" style="height:15px;font-size:6.5px;margin-top:1px">München</div>
|
||
</div>
|
||
</div>
|
||
<div style="margin-bottom:5px">
|
||
<span class="f-label" style="font-size:5.5px">Absender *</span>
|
||
<div class="f-input filled" style="height:15px;font-size:6.5px;margin-top:1px">Raddatz, Karl</div>
|
||
</div>
|
||
<div style="margin-bottom:9px">
|
||
<span class="f-label" style="font-size:5.5px">Empfänger</span>
|
||
<div class="f-tags" style="min-height:15px;padding:2px 3px;margin-top:1px">
|
||
<div class="f-chip" style="font-size:5px;padding:1px 3px">Hilde Brandt ×</div>
|
||
<div class="f-add" style="font-size:5.5px">+</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div style="font-size:5.5px;font-weight:800;text-transform:uppercase;letter-spacing:1px;color:#B0ADA6;padding-bottom:5px;border-bottom:1px solid #E4E2D7;margin-bottom:7px">Beschreibung</div>
|
||
|
||
<div style="margin-bottom:5px">
|
||
<span class="f-label" style="font-size:5.5px">Titel *</span>
|
||
<div class="f-input focus" style="height:15px;font-size:6.5px;margin-top:1px">Brief an Tante Hilde</div>
|
||
</div>
|
||
<div style="margin-bottom:5px">
|
||
<span class="f-label" style="font-size:5.5px">Schlagworte</span>
|
||
<div class="f-tags" style="min-height:15px;padding:2px 3px;margin-top:1px">
|
||
<div class="f-chip" style="font-size:5px;padding:1px 3px">Familie ×</div>
|
||
<div class="f-chip" style="font-size:5px;padding:1px 3px">Krieg ×</div>
|
||
<div class="f-add" style="font-size:5.5px">+</div>
|
||
</div>
|
||
</div>
|
||
<div style="margin-bottom:9px">
|
||
<span class="f-label" style="font-size:5.5px">Kurzinhalt</span>
|
||
<div class="f-textarea" style="height:28px;font-size:6px;margin-top:1px"></div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<!-- Action bar with keyboard hints -->
|
||
<div class="action-bar" style="height:38px;background:#EDEBE6;padding:0 8px;gap:4px">
|
||
<div style="display:flex;align-items:center;gap:3px">
|
||
<div class="kbd">⌘ ↵</div>
|
||
<span style="font-size:5.5px;color:#AAA">Sp. & weiter</span>
|
||
</div>
|
||
<div style="display:flex;align-items:center;gap:3px">
|
||
<div class="kbd">→</div>
|
||
<span style="font-size:5.5px;color:#AAA">Skip</span>
|
||
</div>
|
||
<div class="btn-spacer"></div>
|
||
<div class="btn-outline" style="height:19px;font-size:5.5px;padding:0 7px">Speichern</div>
|
||
<div class="btn-primary" style="height:19px;font-size:5.5px;padding:0 7px">Sp. & Geprüft</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div><!-- /concept C -->
|
||
|
||
|
||
<!-- ══════════════════════════════════════════
|
||
CONCEPT D — Smart Prefill
|
||
══════════════════════════════════════════ -->
|
||
<div class="concept">
|
||
<div class="concept-header">
|
||
<div class="concept-num">D</div>
|
||
<div>
|
||
<div class="concept-label">Concept D</div>
|
||
<div class="concept-title">Smart Prefill</div>
|
||
<div class="concept-desc">When the backend can supply OCR or import data for a field, it appears pre-filled with a mint/teal visual style: mint border, teal text, soft mint background. Pressing Tab accepts the suggestion and converts it to normal text; typing overrides it. A completion ring in the action bar fills from empty to full as required fields are confirmed. The primary button stays locked (gray) until all required fields are accepted or manually filled — then turns green. Turns enrichment from data-entry into a verification task.</div>
|
||
<div class="concept-best"><span class="best-label">Best for</span><span class="best-text">Documents imported from digitization services with OCR output</span></div>
|
||
<div class="concept-tradeoff">Trade-off: requires a backend OCR suggestion API. When no suggestions exist, the UX degrades gracefully to standard blank fields — the ring and lock still apply.</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="screen">
|
||
<div class="chrome">
|
||
<div class="chrome-bar">
|
||
<div class="chrome-dot"></div><div class="chrome-dot"></div><div class="chrome-dot"></div>
|
||
<div class="chrome-url"></div>
|
||
</div>
|
||
<div class="app-body">
|
||
<div class="app-nav">
|
||
<span class="app-logo">Familienarchiv</span>
|
||
<span class="app-link">Dokumente</span>
|
||
<span class="app-link on">Anreicherung</span>
|
||
<div class="app-nav-r"><div class="app-avatar">MR</div></div>
|
||
</div>
|
||
<div class="enrich-bar">
|
||
<div class="eb-back">← Zur Liste</div>
|
||
<div class="eb-title">Brief an Tante Hilde, Sommer 1952</div>
|
||
<div class="eb-progress">12 verbleibend</div>
|
||
</div>
|
||
<div class="split" style="height:470px">
|
||
|
||
<!-- PDF panel -->
|
||
<div class="pdf-panel">
|
||
<div class="pdf-toolbar">
|
||
<div class="pdf-btn on">⊕</div>
|
||
<div class="pdf-btn">⊖</div>
|
||
<div class="pdf-pg">Seite 1 / 2</div>
|
||
</div>
|
||
<div class="pdf-view">
|
||
<div class="pdf-paper">
|
||
<div class="pl h"></div>
|
||
<div class="pl s"></div>
|
||
<div class="pl sp"></div>
|
||
<div class="pl m"></div>
|
||
<div class="pl"></div>
|
||
<div class="pl"></div>
|
||
<div class="pl s"></div>
|
||
<div class="pl sp" style="height:4px"></div>
|
||
<div class="pl"></div>
|
||
<div class="pl m"></div>
|
||
<div class="pl"></div>
|
||
<div class="pl s"></div>
|
||
<div class="pl sp" style="height:4px"></div>
|
||
<div class="pl"></div>
|
||
<div class="pl m"></div>
|
||
<div class="pl"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Form panel with smart prefill -->
|
||
<div class="form-panel">
|
||
<div class="form-scroll">
|
||
<!-- OCR banner -->
|
||
<div class="ocr-banner">
|
||
<div class="ocr-icon">✓</div>
|
||
<div class="ocr-text">
|
||
<div class="ocr-title">OCR-Vorschläge erkannt</div>
|
||
<div class="ocr-body">4 Felder wurden vorausgefüllt. Drücke <kbd class="ocr-kbd">Tab</kbd> zum Übernehmen oder tippe zum Überschreiben.</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Wer & Wann card -->
|
||
<div class="f-card">
|
||
<div class="f-card-title">Wer & Wann</div>
|
||
<div class="f-row">
|
||
<div class="f-field">
|
||
<span class="f-label">Datum <span class="f-req">*</span></span>
|
||
<div class="f-input suggested" style="margin-top:2px">15.07.1952 ✓</div>
|
||
</div>
|
||
<div class="f-field">
|
||
<span class="f-label">Ort</span>
|
||
<div class="f-input" style="margin-top:2px">München</div>
|
||
</div>
|
||
</div>
|
||
<div class="f-row">
|
||
<div class="f-field">
|
||
<span class="f-label">Absender <span class="f-req">*</span></span>
|
||
<div class="f-input suggested" style="margin-top:2px">Raddatz, Karl ✓</div>
|
||
</div>
|
||
<div class="f-field">
|
||
<span class="f-label">Empfänger <span class="f-req">*</span></span>
|
||
<div class="f-tags" style="margin-top:2px">
|
||
<div class="f-chip" style="background:#A6DAD8;color:#002850">Hilde Brandt ×</div>
|
||
<div class="f-add">+</div>
|
||
</div>
|
||
<div class="f-helper" style="color:#006B68">✓ Aus OCR übernommen</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Beschreibung card -->
|
||
<div class="f-card">
|
||
<div class="f-card-title">Beschreibung</div>
|
||
<div class="f-row full" style="margin-bottom:7px">
|
||
<div class="f-field">
|
||
<span class="f-label">Titel <span class="f-req">*</span></span>
|
||
<div class="f-input focus tall" style="margin-top:2px">Brief an Tante Hilde</div>
|
||
</div>
|
||
</div>
|
||
<div class="f-row full">
|
||
<div class="f-field">
|
||
<span class="f-label">Schlagworte</span>
|
||
<div class="f-tags" style="margin-top:2px">
|
||
<div class="f-chip">Familie <span class="f-chip-rm">×</span></div>
|
||
<div class="f-add">+ Schlagwort</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Action bar with completion ring -->
|
||
<div class="action-bar">
|
||
<span class="btn-skip">Überspringen</span>
|
||
<!-- Completion ring -->
|
||
<div class="ring-wrap">
|
||
<svg width="20" height="20" viewBox="0 0 20 20">
|
||
<circle cx="10" cy="10" r="8" fill="none" stroke="#E4E2D7" stroke-width="2.5"/>
|
||
<circle cx="10" cy="10" r="8" fill="none" stroke="#002850" stroke-width="2.5"
|
||
stroke-dasharray="40 10" stroke-dashoffset="13" stroke-linecap="round"
|
||
transform="rotate(-90 10 10)"/>
|
||
</svg>
|
||
<span class="ring-count">4 / 5</span>
|
||
</div>
|
||
<div class="btn-spacer"></div>
|
||
<div class="btn-outline">Speichern</div>
|
||
<div class="btn-primary green">Speichern & Geprüft ✓</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div><!-- /concept D -->
|
||
|
||
|
||
<!-- ══════════════════════════════════════════
|
||
IMPLEMENTATION REFERENCE
|
||
══════════════════════════════════════════ -->
|
||
<div class="impl-ref">
|
||
<h2>Implementation Reference</h2>
|
||
<div class="subtitle">Exact Tailwind classes and pixel values for each new pattern. The shared enrich shell (split pane, top bar, action bar) is unchanged from the current implementation.</div>
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th>Element</th>
|
||
<th>Concepts</th>
|
||
<th>Tailwind / Code</th>
|
||
<th>Notes</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>Section stepper tab bar</td>
|
||
<td><span class="con">A</span></td>
|
||
<td><code>flex border-b border-line bg-surface</code></td>
|
||
<td>Each tab: <code>flex-1 py-2 text-center text-[10px] font-bold uppercase tracking-widest</code>. Active: <code>text-ink border-b-2 border-brand-navy</code>. Done: <code>text-green-700</code>.</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Completed section summary row</td>
|
||
<td><span class="con">A</span></td>
|
||
<td><code>flex items-center justify-between px-3 py-2.5 bg-surface border border-line rounded-sm text-xs</code></td>
|
||
<td>Label: <code>font-bold uppercase tracking-widest text-green-700</code>. Summary: <code>text-ink-2 truncate max-w-[180px]</code>. Clicking jumps to that section.</td>
|
||
</tr>
|
||
<tr>
|
||
<td>"Weiter →" primary button</td>
|
||
<td><span class="con">A</span></td>
|
||
<td><code>btn-primary</code> (existing class)</td>
|
||
<td>Label changes: "Weiter → Beschreibung" → "Weiter → Inhalt" → "Speichern & Geprüft". Driven by <code>currentSection</code> state.</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Required-fields progress bar</td>
|
||
<td><span class="con">B</span></td>
|
||
<td><code>h-0.5 rounded-full bg-brand-navy transition-all</code> inside <code>h-0.5 flex-1 rounded-full bg-line</code></td>
|
||
<td>Width: <code>style="width: {(filledRequired / totalRequired) * 100}%"</code>. Bar lives in its own strip between top bar and split pane.</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Optional divider</td>
|
||
<td><span class="con">B</span></td>
|
||
<td><code>flex items-center gap-2 my-5</code></td>
|
||
<td>Lines: <code>flex-1 border-t border-line</code>. Label: <code>text-[9px] font-bold uppercase tracking-widest text-ink-3</code>.</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Locked primary button</td>
|
||
<td><span class="con">B</span> <span class="con">D</span></td>
|
||
<td><code>opacity-40 cursor-not-allowed pointer-events-none</code> on existing <code>btn-primary</code></td>
|
||
<td>Or: distinct disabled class <code>bg-line text-ink-3</code>. Reactive: <code>const canReview = $derived(requiredFilled === requiredCount)</code>.</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Compact rail field height</td>
|
||
<td><span class="con">C</span></td>
|
||
<td><code>h-6 py-0 px-2 text-xs</code> on inputs</td>
|
||
<td>Real pixel height: 24 px. Standard is 36 px. Only use compact height inside the 35%-width rail to preserve minimum 44 px touch target via larger click zone around label + input.</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Keyboard shortcut badge</td>
|
||
<td><span class="con">C</span></td>
|
||
<td><code><kbd class="inline-flex items-center h-4 px-1 bg-surface border border-line rounded text-[10px] font-mono font-bold text-ink-2"></code></td>
|
||
<td>Use native <code><kbd></code> element for screen-reader semantics. Announce via <code>aria-label</code> on the button too.</td>
|
||
</tr>
|
||
<tr>
|
||
<td>OCR banner</td>
|
||
<td><span class="con">D</span></td>
|
||
<td><code>bg-mint/10 border border-brand-mint rounded-sm p-3 flex items-start gap-2 text-xs</code></td>
|
||
<td>Only rendered when <code>data.ocrSuggestions</code> is non-empty. Icon: <code>w-4 h-4 rounded-full bg-brand-mint flex items-center justify-center text-brand-navy font-bold text-[10px]</code>.</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Suggested / prefill field</td>
|
||
<td><span class="con">D</span></td>
|
||
<td><code>border-brand-mint bg-mint/10 text-teal-700 font-medium</code></td>
|
||
<td>Add <code>data-suggested="true"</code> attribute. On Tab: remove mint styles, set value. On input: clear suggestion immediately. Server populates <code>suggestedDateIso</code>, <code>suggestedSenderName</code> props (already exist on <code>WhoWhenSection</code>).</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Completion ring SVG</td>
|
||
<td><span class="con">D</span></td>
|
||
<td>SVG with two <code><circle></code> elements</td>
|
||
<td>Circumference at r=8: ≈50.3 px. Filled arc: <code>stroke-dasharray="{(filled/total)*50.3} {50.3}"</code>. Rotate −90° so arc starts at top. Color: <code>stroke="currentColor" text-brand-navy</code>.</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Unlocked "Geprüft" button</td>
|
||
<td><span class="con">D</span></td>
|
||
<td><code>bg-green-700 hover:bg-green-800 text-white</code></td>
|
||
<td>State: <code>const canReview = $derived(confirmedFields.size >= requiredFields.length)</code>. Animate transition: <code>transition-colors duration-200</code>.</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Action bar (shared)</td>
|
||
<td><span class="con">A B C D</span></td>
|
||
<td><code>flex items-center gap-3 border-t border-line bg-surface px-4 min-h-[44px]</code></td>
|
||
<td>Skip: ghost left (<code>text-ink-2 text-sm font-medium</code>). Save: outline right. Primary: filled rightmost. Min 44 px height per WCAG 2.2 touch target.</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
</div><!-- /doc -->
|
||
</body>
|
||
</html>
|