787 lines
59 KiB
HTML
787 lines
59 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8"/>
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||
<title>Inline Collaborative Transcription — 4 Mockups</title>
|
||
<link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300;9..144,400;9..144,500&family=DM+Sans:wght@300;400;500;600&family=DM+Mono:wght@400;500&display=swap" rel="stylesheet"/>
|
||
<style>
|
||
:root{--color-page:#FAFAF7;--color-surface:#F5F4EE;--color-subtle:#EDECEA;--color-border:#D8D7D0;--color-text-muted:#6B6A63;--color-text:#1C1C18;--navy:#012851;--mint:#A1DCD8;--sand:#F0EFE9;--turquoise:#00C7B1;--accent-bg:rgba(161,220,216,.12);--blue-tint:#E6F1FB;--blue:#2D7DD2;--blue-dark:#185FA5;--purple-tint:#EEEDFE;--purple:#534AB7;--purple-dark:#3C3489;--green-tint:#E8F5EA;--green:#3D8C4A;--green-dark:#2E6E39;--orange-tint:#FEF0E6;--orange:#E8862A;--orange-dark:#B46820;--yellow-tint:#FDF6D8;--yellow-text:#8A6800;--color-error:#DC4C3E;--font-display:'Fraunces',Georgia,serif;--font-sans:'DM Sans',system-ui,sans-serif;--font-mono:'DM Mono',monospace;--radius-sm:4px;--radius-md:6px;--radius-lg:10px;--radius-xl:16px;--shadow-card:0 1px 3px rgba(28,28,24,.06),0 1px 2px rgba(28,28,24,.04);--shadow-raised:0 4px 12px rgba(28,28,24,.08),0 2px 4px rgba(28,28,24,.04);--shadow-overlay:0 8px 32px rgba(28,28,24,.12),0 2px 8px rgba(28,28,24,.06);}
|
||
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
|
||
body{font-family:var(--font-sans);background:#E8E7E2;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{display:flex;justify-content:space-between;align-items:flex-end;padding-bottom:28px;border-bottom:1px solid var(--color-border);margin-bottom:48px;background:var(--color-page);margin:-48px -40px 48px;padding:48px 40px 28px;border-radius:var(--radius-xl) var(--radius-xl) 0 0;}
|
||
.doc-header h1{font-family:var(--font-display);font-size:28px;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-b{background:var(--blue-tint);color:var(--blue-dark);}
|
||
|
||
/* Sections */
|
||
.section{margin-bottom:64px;}
|
||
.section-title{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.65;max-width:720px;margin-bottom:20px;}
|
||
|
||
/* Journey headers */
|
||
.jh{padding:20px 24px;border-radius:var(--radius-xl);margin-bottom:40px;display:flex;align-items:center;gap:16px;}
|
||
.jh .jn{font-family:var(--font-display);font-size:48px;font-weight:300;line-height:1;opacity:.5;}
|
||
.jh h2{font-family:var(--font-display);font-size:22px;font-weight:500;letter-spacing:-.02em;margin-bottom:4px;}
|
||
.jh p{font-size:13px;line-height:1.5;}.jh .fl{font-family:var(--font-mono);font-size:11px;margin-top:6px;opacity:.7;}
|
||
.jh-b{background:var(--blue-tint);border:1px solid #A4CFF4;}.jh-b .jn{color:var(--blue);}.jh-b p,.jh-b .fl{color:var(--blue-dark);}
|
||
|
||
/* Screen block */
|
||
.scr{margin-bottom:56px;}
|
||
.scr-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;}
|
||
.scr-head h3{font-family:var(--font-display);font-size:20px;font-weight:500;letter-spacing:-.02em;}
|
||
.scr-id{font-family:var(--font-mono);font-size:11px;color:var(--color-text-muted);padding:2px 8px;border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-page);}
|
||
.scr-desc{font-size:12px;color:var(--color-text-muted);line-height:1.6;max-width:720px;margin-bottom:6px;}
|
||
.scr-var{font-size:11px;color:var(--color-text-muted);margin-bottom:20px;}.scr-var strong{color:var(--color-text);}
|
||
|
||
/* Preview container */
|
||
.previews{display:flex;gap:32px;flex-wrap:wrap;justify-content:center;align-items:flex-start;margin-bottom:20px;}
|
||
.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 frame */
|
||
.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,.07);display:flex;flex-direction:column;border:6px solid #1C1C18;}
|
||
.pst{padding:10px 20px 0;display:flex;justify-content:space-between;align-items:center;font-size:12px;background:var(--color-page);}.pst b{font-weight:600;}.pst span{font-size:10px;}
|
||
.pb{flex:1;overflow-y:auto;display:flex;flex-direction:column;}
|
||
|
||
/* Desktop frame */
|
||
.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;flex-direction:column;min-height:520px;}
|
||
|
||
/* Shared FA nav */
|
||
.fa-nav{height:32px;background:var(--navy);display:flex;align-items:center;padding:0 12px;gap:8px;flex-shrink:0;}
|
||
.fa-logo{font-size:7px;font-weight:900;color:#fff;letter-spacing:.8px;border-bottom:2px solid var(--mint);padding-bottom:1px;}
|
||
.fa-link{font-size:5.5px;color:rgba(255,255,255,.4);font-weight:700;text-transform:uppercase;}
|
||
.fa-nav-r{margin-left:auto;display:flex;gap:5px;align-items:center;}
|
||
.fa-av{width:16px;height:16px;background:rgba(255,255,255,.1);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:5px;font-weight:800;color:rgba(255,255,255,.5);}
|
||
|
||
/* Topbar inside frame */
|
||
.fa-topbar{background:#fff;border-bottom:1px solid #e4e2d7;display:flex;align-items:center;padding:0 12px;gap:6px;height:42px;flex-shrink:0;}
|
||
.fa-topbar .back{width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:9px;color:var(--color-text-muted);}
|
||
.fa-topbar .title{font-family:Georgia,serif;font-size:11px;color:var(--navy);flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
|
||
.fa-topbar .date{font-size:8px;color:var(--color-text-muted);}
|
||
.fa-chip{display:inline-flex;align-items:center;gap:2px;padding:1px 5px 1px 2px;background:var(--sand);border:1px solid #e4e2d7;border-radius:8px;white-space:nowrap;font-size:7px;color:var(--color-text);}
|
||
.fa-chip .av{width:12px;height:12px;border-radius:50%;background:var(--navy);display:flex;align-items:center;justify-content:center;font-size:5px;font-weight:800;color:var(--mint);}
|
||
.fa-topbar-btn{font-size:7px;font-weight:600;padding:3px 8px;border-radius:4px;border:1px solid var(--navy);color:var(--navy);background:transparent;display:flex;align-items:center;gap:3px;}
|
||
.fa-topbar-btn.active{background:var(--navy);color:#fff;border-color:var(--navy);}
|
||
|
||
/* PDF area */
|
||
.pdf-area{background:#D4D0C8;flex:1;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;}
|
||
.pdf-area.dark{background:#08121C;}
|
||
.paper{background:#FFFEF8;box-shadow:0 2px 8px rgba(0,0,0,.14);border-radius:1px;padding:9px 11px;display:flex;flex-direction:column;gap:2px;}
|
||
.pl{height:3px;background:#C4BDB0;border-radius:1px;opacity:.5;margin-bottom:2px;}
|
||
.ps{height:2px;background:#C4BDB0;border-radius:1px;opacity:.28;margin-bottom:1.5px;}
|
||
|
||
/* Bottom panel tabs */
|
||
.bp-tabs{background:#fff;border-top:1px solid #e4e2d7;display:flex;align-items:center;height:24px;padding:0 8px;flex-shrink:0;}
|
||
.bp-tab{font-size:7px;font-weight:500;padding:0 6px;color:var(--color-text-muted);height:100%;display:flex;align-items:center;border-bottom:2px solid transparent;}
|
||
.bp-tab.active{color:var(--navy);border-bottom-color:var(--navy);}
|
||
.bp-badge{margin-left:3px;background:var(--navy);color:#fff;border-radius:6px;padding:0 3px;font-size:5px;font-weight:700;}
|
||
|
||
/* Transcription panel */
|
||
.trans-panel{background:#fff;flex:1;overflow-y:auto;padding:8px 12px;display:flex;flex-direction:column;gap:4px;}
|
||
.trans-line{display:flex;gap:6px;align-items:flex-start;font-size:9px;line-height:1.6;padding:2px 4px;border-radius:3px;}
|
||
.trans-line:hover{background:var(--sand);}
|
||
.trans-ln{font-family:var(--font-mono);font-size:7px;color:var(--color-text-muted);width:16px;text-align:right;flex-shrink:0;padding-top:1px;}
|
||
.trans-text{flex:1;color:var(--color-text);}
|
||
.trans-text.editable{background:var(--color-page);border:1px solid var(--color-border);border-radius:3px;padding:1px 4px;cursor:text;}
|
||
.trans-cursor{display:inline-block;width:1px;height:10px;background:var(--blue);animation:blink 1s infinite;margin-left:1px;}
|
||
@keyframes blink{0%,50%{opacity:1}51%,100%{opacity:0}}
|
||
|
||
/* Presence indicators */
|
||
.presence{display:flex;align-items:center;gap:3px;font-size:7px;color:var(--color-text-muted);}
|
||
.presence-dot{width:5px;height:5px;border-radius:50%;}
|
||
.presence-dot.online{background:var(--green);}
|
||
.presence-dot.editing{background:var(--blue);}
|
||
|
||
/* Highlight colors for multi-user editing */
|
||
.hl-blue{background:rgba(45,125,210,.1);border-left:2px solid var(--blue);}
|
||
.hl-purple{background:rgba(83,74,183,.1);border-left:2px solid var(--purple);}
|
||
.hl-green{background:rgba(61,140,74,.1);border-left:2px solid var(--green);}
|
||
|
||
/* Split view */
|
||
.split{display:flex;flex:1;overflow:hidden;}
|
||
.split-left{flex:1;display:flex;flex-direction:column;overflow:hidden;position:relative;}
|
||
.split-right{display:flex;flex-direction:column;overflow:hidden;border-left:1px solid #e4e2d7;}
|
||
.split-handle{width:4px;background:var(--color-border);cursor:col-resize;flex-shrink:0;display:flex;align-items:center;justify-content:center;}
|
||
.split-handle::after{content:'';width:2px;height:20px;background:var(--color-text-muted);border-radius:1px;opacity:.3;}
|
||
|
||
/* Transcription toolbar */
|
||
.trans-toolbar{background:#fff;border-bottom:1px solid #e4e2d7;display:flex;align-items:center;padding:4px 8px;gap:6px;flex-shrink:0;}
|
||
.trans-toolbar .tool-btn{font-size:7px;font-weight:500;color:var(--color-text-muted);padding:2px 6px;border-radius:3px;border:1px solid transparent;cursor:pointer;}
|
||
.trans-toolbar .tool-btn:hover{background:var(--sand);border-color:var(--color-border);}
|
||
.trans-toolbar .tool-btn.active{background:var(--accent-bg);color:var(--navy);border-color:var(--mint);}
|
||
.trans-toolbar .presence-group{margin-left:auto;display:flex;gap:4px;align-items:center;}
|
||
|
||
/* Linked highlight on PDF */
|
||
.pdf-highlight{position:absolute;border:1.5px solid var(--turquoise);background:rgba(0,199,177,.08);border-radius:2px;}
|
||
.pdf-line-marker{position:absolute;left:0;width:3px;background:var(--turquoise);opacity:.6;}
|
||
|
||
/* Mobile transcription */
|
||
.mob-trans{flex:1;overflow-y:auto;padding:10px 16px;background:#fff;}
|
||
.mob-trans-line{font-size:11px;line-height:1.7;padding:3px 0;color:var(--color-text);border-bottom:1px solid var(--color-subtle);}
|
||
.mob-trans-ln{font-family:var(--font-mono);font-size:8px;color:var(--color-text-muted);margin-right:6px;}
|
||
|
||
/* Status bar */
|
||
.status-bar{background:var(--sand);border-top:1px solid #e4e2d7;height:18px;display:flex;align-items:center;padding:0 8px;font-size:7px;color:var(--color-text-muted);gap:8px;flex-shrink:0;}
|
||
.status-saved{color:var(--green-dark);}
|
||
|
||
/* Agent table */
|
||
.agent{background:var(--color-text);color:#E8E8E2;padding:24px;border-radius:var(--radius-lg);margin-top:20px;}
|
||
.agent h4{font-size:9px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:#5A5A55;margin-bottom:12px;}
|
||
.agent pre{font-family:var(--font-mono);font-size:10px;color:#444440;margin-bottom:16px;line-height:1.8;white-space:pre-wrap;}
|
||
.at{width:100%;border-collapse:collapse;font-family:var(--font-mono);font-size:10px;}
|
||
.at thead tr{border-bottom:1px solid #2A2A26;}.at th{text-align:left;padding:6px 10px;font-size:8px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:#5A5A55;font-family:var(--font-sans);}.at td{padding:5px 10px;border-bottom:1px solid #1E1E1A;vertical-align:top;line-height:1.5;}.at tr:last-child td{border-bottom:none;}.at td:first-child{color:#7A7A72;}.at td:nth-child(2){color:#E8E8E2;font-weight:500;}.at td:nth-child(3){color:#5A5A55;}.at .grp td{padding-top:14px;font-family:var(--font-sans);font-size:8px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:#3A3A36;}
|
||
|
||
/* LLM instruction box */
|
||
.llm{background:var(--color-page);border:2px solid var(--navy);border-radius:var(--radius-xl);padding:32px 40px;margin-top:64px;}
|
||
.llm h2{font-family:var(--font-display);font-size:22px;font-weight:500;letter-spacing:-.02em;margin-bottom:8px;color:var(--navy);}
|
||
.llm h3{font-size:14px;font-weight:600;margin:20px 0 8px;color:var(--color-text);}
|
||
.llm p,.llm li{font-size:13px;color:var(--color-text-muted);line-height:1.65;}
|
||
.llm ul,.llm ol{padding-left:20px;margin-bottom:12px;}
|
||
.llm li{margin-bottom:4px;}
|
||
.llm code{font-family:var(--font-mono);font-size:11px;background:var(--color-surface);padding:1px 5px;border-radius:3px;}
|
||
.llm table{width:100%;border-collapse:collapse;margin:12px 0;font-size:12px;}
|
||
.llm th,.llm td{text-align:left;padding:6px 10px;border-bottom:1px solid var(--color-border);}
|
||
.llm th{font-weight:500;color:var(--color-text);font-size:11px;text-transform:uppercase;letter-spacing:.05em;}
|
||
.llm td{color:var(--color-text-muted);}
|
||
|
||
@media(max-width:900px){.doc{padding:24px 16px 80px;}}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="doc">
|
||
|
||
<div class="doc-header">
|
||
<div>
|
||
<h1>Inline Collaborative Transcription</h1>
|
||
<p>Four layout concepts for side-by-side PDF scan viewing and collaborative transcription editing. Users can follow along the original handwritten letter while multiple family members contribute to and refine the transcript together.</p>
|
||
</div>
|
||
<div class="doc-meta">
|
||
Familienarchiv<br/>
|
||
<span class="pill pill-b">Exploration</span><br/>
|
||
2026-04-04 · @leonievoss
|
||
</div>
|
||
</div>
|
||
|
||
<div class="section">
|
||
<div class="section-title">Context</div>
|
||
<p class="prose">The scanned documents are images of handwritten letters — there is no text layer in the PDFs. Family members need to manually transcribe these letters, often collaboratively. The current transcription panel shows read-only text in the bottom panel. These mockups explore how to make transcription a first-class inline editing experience where the scan and transcript are always visible together, and multiple users can contribute simultaneously.</p>
|
||
<p class="prose">Key constraints: Senior users (60+) need large text and clear visual connection between scan and transcript. The existing annotation system (draw rectangle on PDF + comment thread) stays separate — transcription is a different workflow: line-by-line text entry that maps to the full document, not a specific region.</p>
|
||
</div>
|
||
|
||
<div class="jh jh-b">
|
||
<div class="jn">T</div>
|
||
<div><h2>Transcribe a letter</h2><p>Open a scanned letter, read the handwriting, type the transcript line by line while seeing the original. Other family members can join and edit the same transcript in real time.</p><div class="fl">Document detail → Transcribe mode · Any user with WRITE_ALL</div></div>
|
||
</div>
|
||
|
||
|
||
<!-- ═══ MOCKUP A — SIDE-BY-SIDE SPLIT ═══ -->
|
||
<div class="scr" id="a">
|
||
<div class="scr-head"><h3>A — Side-by-side split</h3><span class="scr-id">A</span></div>
|
||
<div class="scr-desc">The document detail page gains a vertical split: PDF scan on the left, transcription editor on the right. A draggable divider lets users adjust the ratio. The transcription editor shows line numbers and highlights which line maps to the user's scroll position in the PDF. Multiple users' cursors appear as colored carets.</div>
|
||
<div class="scr-var"><strong>Desktop split</strong> — PDF left (flex:1), transcript right (400px default, resizable). Mobile: bottom sheet.</div>
|
||
|
||
<div class="previews">
|
||
<div class="prev-col">
|
||
<div class="bp-lbl">Desktop · 1040px</div>
|
||
<div class="desk">
|
||
<div class="fa-nav">
|
||
<div class="fa-logo">FAMILIENARCHIV</div>
|
||
<div class="fa-link">Dokumente</div>
|
||
<div class="fa-link">Personen</div>
|
||
<div class="fa-nav-r"><div class="fa-av">MR</div></div>
|
||
</div>
|
||
<div class="fa-topbar">
|
||
<div class="back">←</div>
|
||
<div class="title">Brief von Heinrich an Martha, 14. Mai 1943</div>
|
||
<div style="flex:1"></div>
|
||
<div class="fa-chip"><div class="av">HR</div> Heinrich R.</div>
|
||
<div style="font-size:7px;color:var(--color-text-muted);margin:0 2px;">→</div>
|
||
<div class="fa-chip"><div class="av" style="background:#5A3080;color:#fff;">MR</div> Martha R.</div>
|
||
<div style="width:1px;height:16px;background:#e4e2d7;margin:0 6px;"></div>
|
||
<div class="fa-topbar-btn active">✎ Transkribieren</div>
|
||
<div class="fa-topbar-btn">Annotieren</div>
|
||
</div>
|
||
|
||
<div class="split" style="height:380px;">
|
||
<!-- PDF side -->
|
||
<div class="split-left">
|
||
<div class="pdf-area" style="flex:1;">
|
||
<div class="paper" style="width:55%;min-height:200px;">
|
||
<div style="font-size:7px;color:#8A8070;font-style:italic;margin-bottom:4px;opacity:.7;">Liebe Martha,</div>
|
||
<div class="pl" style="width:90%;"></div>
|
||
<div class="ps" style="width:85%;"></div>
|
||
<div class="ps" style="width:92%;"></div>
|
||
<div class="pl" style="width:78%;"></div>
|
||
<div class="ps" style="width:88%;"></div>
|
||
<div class="ps" style="width:70%;"></div>
|
||
<div class="pl" style="width:84%;"></div>
|
||
<div class="ps" style="width:90%;"></div>
|
||
<div class="ps" style="width:60%;"></div>
|
||
<div class="pl" style="width:75%;"></div>
|
||
<div class="ps" style="width:82%;"></div>
|
||
<div class="ps" style="width:45%;"></div>
|
||
<div style="font-size:6px;color:#8A8070;margin-top:6px;text-align:right;opacity:.7;">Dein Heinrich</div>
|
||
</div>
|
||
<!-- Line markers on PDF showing current transcript position -->
|
||
<div class="pdf-line-marker" style="top:90px;height:12px;"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Resize handle -->
|
||
<div class="split-handle"></div>
|
||
|
||
<!-- Transcript side -->
|
||
<div class="split-right" style="width:380px;">
|
||
<div class="trans-toolbar">
|
||
<div class="tool-btn active">Bearbeiten</div>
|
||
<div class="tool-btn">Vorschau</div>
|
||
<div class="tool-btn">Verlauf</div>
|
||
<div class="presence-group">
|
||
<div class="presence"><div class="presence-dot editing" style="background:var(--blue);"></div> Du</div>
|
||
<div class="presence"><div class="presence-dot editing" style="background:var(--purple);"></div> Oma Inge</div>
|
||
<div class="presence"><div class="presence-dot online"></div> Onkel Klaus</div>
|
||
</div>
|
||
</div>
|
||
<div class="trans-panel">
|
||
<div class="trans-line"><div class="trans-ln">1</div><div class="trans-text">Liebe Martha,</div></div>
|
||
<div class="trans-line"><div class="trans-ln">2</div><div class="trans-text"> </div></div>
|
||
<div class="trans-line hl-purple"><div class="trans-ln">3</div><div class="trans-text">ich schreibe Dir heute aus dem Lazarett</div></div>
|
||
<div class="trans-line hl-purple"><div class="trans-ln">4</div><div class="trans-text">in Breslau. Mach Dir keine Sorgen,</div></div>
|
||
<div class="trans-line"><div class="trans-ln">5</div><div class="trans-text">es geht mir den Umständen</div></div>
|
||
<div class="trans-line hl-blue"><div class="trans-ln">6</div><div class="trans-text">entsprechend gut. Der Arzt sagt<span class="trans-cursor"></span></div></div>
|
||
<div class="trans-line"><div class="trans-ln">7</div><div class="trans-text" style="color:var(--color-text-muted);font-style:italic;">[unleserlich]</div></div>
|
||
<div class="trans-line"><div class="trans-ln">8</div><div class="trans-text">Wochen noch dauern wird.</div></div>
|
||
<div class="trans-line"><div class="trans-ln">9</div><div class="trans-text"> </div></div>
|
||
<div class="trans-line"><div class="trans-ln">10</div><div class="trans-text">Die Kinder sollen wissen, dass ich</div></div>
|
||
<div class="trans-line"><div class="trans-ln">11</div><div class="trans-text">an sie denke. Sag dem kleinen Fritz,</div></div>
|
||
<div class="trans-line"><div class="trans-ln">12</div><div class="trans-text">er soll auf seine Mutter aufpassen.</div></div>
|
||
<div class="trans-line"><div class="trans-ln">13</div><div class="trans-text"> </div></div>
|
||
<div class="trans-line"><div class="trans-ln">14</div><div class="trans-text">In ewiger Liebe,</div></div>
|
||
<div class="trans-line"><div class="trans-ln">15</div><div class="trans-text">Dein Heinrich</div></div>
|
||
</div>
|
||
<div class="status-bar">
|
||
<span class="status-saved">✓ Gespeichert</span>
|
||
<span>15 Zeilen</span>
|
||
<span>Zeile 6, Spalte 34</span>
|
||
<span style="margin-left:auto;">Zuletzt: Oma Inge, vor 2 Min.</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Bottom panel tabs (collapsed) -->
|
||
<div class="bp-tabs">
|
||
<div class="bp-tab">Metadaten</div>
|
||
<div class="bp-tab active">Transkription</div>
|
||
<div class="bp-tab">Diskussion <span class="bp-badge">3</span></div>
|
||
<div class="bp-tab">Verlauf</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="previews" style="margin-top:20px;">
|
||
<div class="prev-col">
|
||
<div class="bp-lbl">Mobile · 320px</div>
|
||
<div class="phone">
|
||
<div class="pst"><b>14:23</b><span>●●● WiFi 🔋</span></div>
|
||
<div class="pb">
|
||
<!-- Compact topbar -->
|
||
<div style="background:#fff;border-bottom:1px solid #e4e2d7;padding:8px 12px;">
|
||
<div style="display:flex;align-items:center;gap:6px;margin-bottom:2px;">
|
||
<span style="font-size:11px;color:var(--color-text-muted);">←</span>
|
||
<span style="font-family:Georgia,serif;font-size:11px;color:var(--navy);flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">Brief von Heinrich, 14.05.1943</span>
|
||
<span style="font-size:8px;font-weight:600;padding:2px 6px;border-radius:3px;background:var(--navy);color:#fff;">Transkr.</span>
|
||
</div>
|
||
</div>
|
||
<!-- PDF thumbnail strip -->
|
||
<div style="background:#D4D0C8;height:100px;display:flex;align-items:center;justify-content:center;border-bottom:2px solid var(--mint);">
|
||
<div style="background:#FFFEF8;width:45%;padding:6px 8px;box-shadow:0 1px 4px rgba(0,0,0,.12);border-radius:1px;">
|
||
<div style="font-size:5px;color:#8A8070;font-style:italic;opacity:.7;">Liebe Martha,</div>
|
||
<div style="height:2px;background:#C4BDB0;opacity:.4;margin:2px 0;width:80%;"></div>
|
||
<div style="height:1.5px;background:#C4BDB0;opacity:.25;margin:1px 0;width:90%;"></div>
|
||
<div style="height:1.5px;background:#C4BDB0;opacity:.25;margin:1px 0;width:70%;"></div>
|
||
</div>
|
||
</div>
|
||
<!-- Transcription editor fullscreen -->
|
||
<div class="mob-trans" style="flex:1;">
|
||
<div style="display:flex;align-items:center;gap:4px;margin-bottom:8px;padding-bottom:4px;border-bottom:1px solid var(--color-subtle);">
|
||
<div class="presence"><div class="presence-dot editing" style="background:var(--blue);"></div></div>
|
||
<div class="presence"><div class="presence-dot editing" style="background:var(--purple);"></div></div>
|
||
<span style="font-size:8px;color:var(--color-text-muted);">2 aktiv</span>
|
||
<span style="font-size:8px;color:var(--green-dark);margin-left:auto;">✓ Gespeichert</span>
|
||
</div>
|
||
<div class="mob-trans-line"><span class="mob-trans-ln">1</span>Liebe Martha,</div>
|
||
<div class="mob-trans-line"><span class="mob-trans-ln">2</span> </div>
|
||
<div class="mob-trans-line" style="background:rgba(83,74,183,.06);"><span class="mob-trans-ln">3</span>ich schreibe Dir heute aus dem</div>
|
||
<div class="mob-trans-line" style="background:rgba(83,74,183,.06);"><span class="mob-trans-ln">4</span>Lazarett in Breslau. Mach Dir keine</div>
|
||
<div class="mob-trans-line"><span class="mob-trans-ln">5</span>Sorgen, es geht mir den</div>
|
||
<div class="mob-trans-line" style="background:rgba(45,125,210,.06);"><span class="mob-trans-ln">6</span>Umständen entsprechend gut.</div>
|
||
<div class="mob-trans-line"><span class="mob-trans-ln">7</span><span style="color:var(--color-text-muted);font-style:italic;">[unleserlich]</span></div>
|
||
<div class="mob-trans-line"><span class="mob-trans-ln">8</span>Wochen noch dauern wird.</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="agent">
|
||
<h4>A · Side-by-side split</h4>
|
||
<pre>/* Desktop: existing topbar + "Transkribieren" toggle button replaces bottom panel transcription tab.
|
||
* Activating transcription mode opens a vertical split: PDF left (flex:1) + transcript right (400px default).
|
||
* Draggable handle between panels (pointer-events on 4px strip, cursor:col-resize).
|
||
* Transcript toolbar: Edit/Preview/History tabs + presence dots (WebSocket: who is online + who is editing).
|
||
* Line numbers (mono 12px) + text (serif 16px, editable contenteditable divs or textarea rows).
|
||
* Colored left-border per active user (2px, distinct hue from a 6-color palette).
|
||
* "[unleserlich]" placeholder for illegible passages — italic, muted, bracketed.
|
||
* Status bar: save state (auto-save debounced 2s) + line count + cursor position + last editor.
|
||
* Mobile: PDF collapses to a fixed-height thumbnail strip (100px) at top, transcript fills remaining space.
|
||
* Tap thumbnail strip to expand PDF to 60% height (push transcript down). */</pre>
|
||
<table class="at"><thead><tr><th>Element</th><th>Value</th><th>Notes</th></tr></thead><tbody>
|
||
<tr class="grp"><td colspan="3">Desktop — split view</td></tr>
|
||
<tr><td>PDF panel</td><td>flex:1, min-width:300px, bg:#D4D0C8</td><td>Existing PdfViewer component, scroll synced with transcript</td></tr>
|
||
<tr><td>Transcript panel</td><td>400px default, min:280px, max:60vw, resizable</td><td>border-left:1px solid line, bg:surface</td></tr>
|
||
<tr><td>Resize handle</td><td>4px wide, cursor:col-resize, bg:line</td><td>Centered dot indicator (2px × 20px)</td></tr>
|
||
<tr><td>Toolbar</td><td>h:32px, bg:surface, border-bottom, flex row</td><td>Edit/Preview/History + presence group right-aligned</td></tr>
|
||
<tr><td>Line number</td><td>DM Mono 12px, muted, width:24px, text-align:right</td><td>Sticky on horizontal scroll if transcript is wide</td></tr>
|
||
<tr><td>Transcript text</td><td>Tinos 16px/1.6, color:ink, contenteditable</td><td>18px for senior mode preference</td></tr>
|
||
<tr><td>User highlight</td><td>border-left:2px solid [user-color], bg:rgba([user-color],.08)</td><td>6 distinct hues, assigned round-robin</td></tr>
|
||
<tr><td>Status bar</td><td>h:24px, bg:sand, border-top, mono 11px</td><td>Auto-save indicator + line info + last editor</td></tr>
|
||
<tr class="grp"><td colspan="3">Mobile</td></tr>
|
||
<tr><td>PDF strip</td><td>100px fixed height, bg:pdf-bg, border-bottom:2px mint</td><td>Tap to expand to 60vh. Pinch-zoom supported.</td></tr>
|
||
<tr><td>Transcript</td><td>flex:1, padding:12px 16px, serif 16px</td><td>Line numbers: mono 10px, inline before text</td></tr>
|
||
</tbody></table>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<!-- ═══ MOCKUP B — OVERLAY PANEL (SLIDE-OVER) ═══ -->
|
||
<div class="scr" id="b">
|
||
<div class="scr-head"><h3>B — Overlay slide-over panel</h3><span class="scr-id">B</span></div>
|
||
<div class="scr-desc">The PDF stays full-width. Clicking "Transkribieren" slides a semi-transparent panel from the right over the PDF. The panel has ~60% opacity background so the scan bleeds through underneath, keeping visual context. Users type the transcript line by line with the scan always partially visible behind.</div>
|
||
<div class="scr-var"><strong>Desktop overlay</strong> — 480px panel, 60% opacity surface bg, slides from right. Mobile: full bottom sheet.</div>
|
||
|
||
<div class="previews">
|
||
<div class="prev-col">
|
||
<div class="bp-lbl">Desktop · 1040px</div>
|
||
<div class="desk">
|
||
<div class="fa-nav">
|
||
<div class="fa-logo">FAMILIENARCHIV</div>
|
||
<div class="fa-link">Dokumente</div>
|
||
<div class="fa-link">Personen</div>
|
||
<div class="fa-nav-r"><div class="fa-av">MR</div></div>
|
||
</div>
|
||
<div class="fa-topbar">
|
||
<div class="back">←</div>
|
||
<div class="title">Brief von Heinrich an Martha, 14. Mai 1943</div>
|
||
<div style="flex:1"></div>
|
||
<div class="fa-topbar-btn active">✎ Transkribieren</div>
|
||
</div>
|
||
|
||
<div style="flex:1;position:relative;display:flex;height:390px;">
|
||
<!-- Full PDF background -->
|
||
<div class="pdf-area" style="flex:1;">
|
||
<div class="paper" style="width:50%;min-height:220px;">
|
||
<div style="font-size:7px;color:#8A8070;font-style:italic;margin-bottom:4px;opacity:.7;">Liebe Martha,</div>
|
||
<div class="pl" style="width:90%;"></div>
|
||
<div class="ps" style="width:85%;"></div>
|
||
<div class="ps" style="width:92%;"></div>
|
||
<div class="pl" style="width:78%;"></div>
|
||
<div class="ps" style="width:88%;"></div>
|
||
<div class="ps" style="width:70%;"></div>
|
||
<div class="pl" style="width:84%;"></div>
|
||
<div class="ps" style="width:90%;"></div>
|
||
<div class="ps" style="width:60%;"></div>
|
||
<div class="pl" style="width:75%;"></div>
|
||
<div class="ps" style="width:82%;"></div>
|
||
<div class="ps" style="width:45%;"></div>
|
||
<div style="font-size:6px;color:#8A8070;margin-top:6px;text-align:right;opacity:.7;">Dein Heinrich</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Slide-over panel -->
|
||
<div style="position:absolute;top:0;right:0;bottom:0;width:420px;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);border-left:2px solid var(--mint);display:flex;flex-direction:column;box-shadow:-4px 0 24px rgba(0,0,0,.08);">
|
||
<div class="trans-toolbar">
|
||
<div class="tool-btn active">Bearbeiten</div>
|
||
<div class="tool-btn">Vorschau</div>
|
||
<div class="presence-group">
|
||
<div class="presence"><div class="presence-dot editing" style="background:var(--blue);"></div> Du</div>
|
||
<div class="presence"><div class="presence-dot editing" style="background:var(--purple);"></div> Oma Inge</div>
|
||
</div>
|
||
<div style="font-size:8px;color:var(--color-text-muted);cursor:pointer;margin-left:4px;">✕</div>
|
||
</div>
|
||
<div class="trans-panel" style="background:transparent;">
|
||
<div class="trans-line"><div class="trans-ln">1</div><div class="trans-text">Liebe Martha,</div></div>
|
||
<div class="trans-line"><div class="trans-ln">2</div><div class="trans-text"> </div></div>
|
||
<div class="trans-line hl-purple"><div class="trans-ln">3</div><div class="trans-text">ich schreibe Dir heute aus dem Lazarett</div></div>
|
||
<div class="trans-line hl-purple"><div class="trans-ln">4</div><div class="trans-text">in Breslau. Mach Dir keine Sorgen,</div></div>
|
||
<div class="trans-line"><div class="trans-ln">5</div><div class="trans-text">es geht mir den Umständen</div></div>
|
||
<div class="trans-line hl-blue"><div class="trans-ln">6</div><div class="trans-text">entsprechend gut. Der Arzt sagt<span class="trans-cursor"></span></div></div>
|
||
<div class="trans-line"><div class="trans-ln">7</div><div class="trans-text" style="color:var(--color-text-muted);font-style:italic;">[unleserlich]</div></div>
|
||
<div class="trans-line"><div class="trans-ln">8</div><div class="trans-text">Wochen noch dauern wird.</div></div>
|
||
<div class="trans-line"><div class="trans-ln">9</div><div class="trans-text"> </div></div>
|
||
<div class="trans-line"><div class="trans-ln">10</div><div class="trans-text">Die Kinder sollen wissen, dass ich</div></div>
|
||
<div class="trans-line"><div class="trans-ln">11</div><div class="trans-text">an sie denke.</div></div>
|
||
</div>
|
||
<div class="status-bar" style="background:rgba(240,239,233,.85);">
|
||
<span class="status-saved">✓ Gespeichert</span>
|
||
<span>11 Zeilen</span>
|
||
<span style="margin-left:auto;">Oma Inge bearbeitet Z. 3-4</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="bp-tabs">
|
||
<div class="bp-tab">Metadaten</div>
|
||
<div class="bp-tab">Diskussion <span class="bp-badge">3</span></div>
|
||
<div class="bp-tab">Verlauf</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="agent">
|
||
<h4>B · Overlay slide-over panel</h4>
|
||
<pre>/* The PDF viewer stays full-width — no resize, no layout shift.
|
||
* "Transkribieren" button toggles a slide-over panel from the right (transform: translateX).
|
||
* Panel: position:absolute, top:0, right:0, bottom:0, width:480px.
|
||
* Background: rgba(255,255,255,.92) + backdrop-filter:blur(8px) — scan bleeds through slightly.
|
||
* Left border: 2px solid mint (brand accent) to clearly separate from PDF.
|
||
* Close button (×) in toolbar top-right to dismiss panel.
|
||
* Same transcript editor as Mockup A: line numbers + editable lines + presence.
|
||
* Pro: zero layout shift, PDF zoom/pan unaffected. Con: obscures right side of scan. */</pre>
|
||
<table class="at"><thead><tr><th>Element</th><th>Value</th><th>Notes</th></tr></thead><tbody>
|
||
<tr><td>Panel</td><td>480px, position:absolute right:0, z:20</td><td>backdrop-filter:blur(8px), rgba(255,255,255,.92)</td></tr>
|
||
<tr><td>Left accent</td><td>border-left:2px solid mint</td><td>Brand color boundary</td></tr>
|
||
<tr><td>Transition</td><td>transform 200ms ease-out</td><td>translateX(100%) → translateX(0)</td></tr>
|
||
<tr><td>Shadow</td><td>-4px 0 24px rgba(0,0,0,.1)</td><td>Depth cue separating from PDF</td></tr>
|
||
</tbody></table>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<!-- ═══ MOCKUP C — INTERLEAVED (PARAGRAPH-SYNC) ═══ -->
|
||
<div class="scr" id="c">
|
||
<div class="scr-head"><h3>C — Interleaved paragraph sync</h3><span class="scr-id">C</span></div>
|
||
<div class="scr-desc">A single scrollable column interleaves cropped scan regions with their transcription blocks. Each paragraph of the letter is shown as: scan excerpt (cropped from the PDF page) + editable transcript block below it. Scrolling moves through the letter naturally — read the scan, then read/edit the transcript, then the next scan section. Great for very long letters.</div>
|
||
<div class="scr-var"><strong>Single-column interleaved</strong> — scan crop + transcript block pairs. Works identically on mobile and desktop (just wider).</div>
|
||
|
||
<div class="previews">
|
||
<div class="prev-col">
|
||
<div class="bp-lbl">Desktop · 1040px</div>
|
||
<div class="desk" style="min-height:580px;">
|
||
<div class="fa-nav">
|
||
<div class="fa-logo">FAMILIENARCHIV</div>
|
||
<div class="fa-link">Dokumente</div>
|
||
<div class="fa-link">Personen</div>
|
||
<div class="fa-nav-r"><div class="fa-av">MR</div></div>
|
||
</div>
|
||
<div class="fa-topbar">
|
||
<div class="back">←</div>
|
||
<div class="title">Brief von Heinrich an Martha, 14. Mai 1943</div>
|
||
<div style="flex:1"></div>
|
||
<div class="presence-group" style="margin-right:8px;">
|
||
<div class="presence"><div class="presence-dot editing" style="background:var(--blue);"></div> Du</div>
|
||
<div class="presence"><div class="presence-dot editing" style="background:var(--purple);"></div> Oma Inge</div>
|
||
</div>
|
||
<div class="fa-topbar-btn active">✎ Transkribieren</div>
|
||
</div>
|
||
|
||
<div style="flex:1;overflow-y:auto;background:var(--sand);display:flex;justify-content:center;">
|
||
<div style="width:640px;padding:20px 0;">
|
||
|
||
<!-- Section 1: Greeting -->
|
||
<div style="margin-bottom:16px;">
|
||
<div style="background:#D4D0C8;border-radius:6px 6px 0 0;padding:12px 16px;display:flex;align-items:center;justify-content:center;min-height:50px;">
|
||
<div style="background:#FFFEF8;width:80%;padding:8px 10px;box-shadow:0 1px 4px rgba(0,0,0,.1);border-radius:1px;">
|
||
<div style="font-size:8px;color:#8A8070;font-style:italic;">Liebe Martha,</div>
|
||
</div>
|
||
</div>
|
||
<div style="background:#fff;border:1px solid #e4e2d7;border-top:none;border-radius:0 0 6px 6px;padding:10px 14px;">
|
||
<div style="display:flex;align-items:center;gap:4px;margin-bottom:6px;">
|
||
<span style="font-size:7px;font-weight:600;color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.08em;">Abschnitt 1 — Anrede</span>
|
||
<span style="font-size:7px;color:var(--green-dark);margin-left:auto;">✓</span>
|
||
</div>
|
||
<div style="font-family:Georgia,serif;font-size:10px;line-height:1.6;color:var(--color-text);">Liebe Martha,</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Section 2: Body paragraph 1 -->
|
||
<div style="margin-bottom:16px;">
|
||
<div style="background:#D4D0C8;border-radius:6px 6px 0 0;padding:12px 16px;display:flex;align-items:center;justify-content:center;min-height:70px;">
|
||
<div style="background:#FFFEF8;width:80%;padding:8px 10px;box-shadow:0 1px 4px rgba(0,0,0,.1);border-radius:1px;">
|
||
<div class="pl" style="width:90%;"></div>
|
||
<div class="ps" style="width:85%;"></div>
|
||
<div class="ps" style="width:92%;"></div>
|
||
<div class="pl" style="width:78%;"></div>
|
||
</div>
|
||
</div>
|
||
<div style="background:#fff;border:1px solid #e4e2d7;border-top:none;border-radius:0 0 6px 6px;padding:10px 14px;">
|
||
<div style="display:flex;align-items:center;gap:4px;margin-bottom:6px;">
|
||
<span style="font-size:7px;font-weight:600;color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.08em;">Abschnitt 2 — Hauptteil</span>
|
||
<div class="presence" style="margin-left:auto;"><div class="presence-dot editing" style="background:var(--purple);width:4px;height:4px;"></div> <span style="font-size:6px;">Oma Inge</span></div>
|
||
</div>
|
||
<div style="font-family:Georgia,serif;font-size:10px;line-height:1.6;color:var(--color-text);border-left:2px solid var(--purple);padding-left:8px;background:rgba(83,74,183,.04);border-radius:2px;padding:4px 8px;">ich schreibe Dir heute aus dem Lazarett in Breslau. Mach Dir keine Sorgen, es geht mir den Umständen entsprechend gut. Der Arzt sagt <span style="color:var(--color-text-muted);font-style:italic;">[unleserlich]</span> Wochen noch dauern wird.</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Section 3: Body paragraph 2 -->
|
||
<div style="margin-bottom:16px;">
|
||
<div style="background:#D4D0C8;border-radius:6px 6px 0 0;padding:12px 16px;display:flex;align-items:center;justify-content:center;min-height:60px;">
|
||
<div style="background:#FFFEF8;width:80%;padding:8px 10px;box-shadow:0 1px 4px rgba(0,0,0,.1);border-radius:1px;">
|
||
<div class="pl" style="width:84%;"></div>
|
||
<div class="ps" style="width:90%;"></div>
|
||
<div class="ps" style="width:60%;"></div>
|
||
</div>
|
||
</div>
|
||
<div style="background:#fff;border:1px solid #e4e2d7;border-top:none;border-radius:0 0 6px 6px;padding:10px 14px;">
|
||
<div style="display:flex;align-items:center;gap:4px;margin-bottom:6px;">
|
||
<span style="font-size:7px;font-weight:600;color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.08em;">Abschnitt 3</span>
|
||
<div class="presence" style="margin-left:auto;"><div class="presence-dot editing" style="background:var(--blue);width:4px;height:4px;"></div> <span style="font-size:6px;">Du</span></div>
|
||
</div>
|
||
<div style="font-family:Georgia,serif;font-size:10px;line-height:1.6;color:var(--color-text);border-left:2px solid var(--blue);padding-left:8px;background:rgba(45,125,210,.04);border-radius:2px;padding:4px 8px;">Die Kinder sollen wissen, dass ich an sie denke. Sag dem kleinen Fritz, er soll auf seine Mutter aufpassen.<span class="trans-cursor"></span></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Section 4: Closing -->
|
||
<div style="margin-bottom:16px;">
|
||
<div style="background:#D4D0C8;border-radius:6px 6px 0 0;padding:12px 16px;display:flex;align-items:center;justify-content:center;min-height:40px;">
|
||
<div style="background:#FFFEF8;width:80%;padding:8px 10px;box-shadow:0 1px 4px rgba(0,0,0,.1);border-radius:1px;">
|
||
<div style="font-size:6px;color:#8A8070;text-align:right;opacity:.7;">Dein Heinrich</div>
|
||
</div>
|
||
</div>
|
||
<div style="background:#fff;border:1px solid #e4e2d7;border-top:none;border-radius:0 0 6px 6px;padding:10px 14px;">
|
||
<div style="display:flex;align-items:center;gap:4px;margin-bottom:6px;">
|
||
<span style="font-size:7px;font-weight:600;color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.08em;">Abschnitt 4 — Schluss</span>
|
||
<span style="font-size:7px;color:var(--green-dark);margin-left:auto;">✓</span>
|
||
</div>
|
||
<div style="font-family:Georgia,serif;font-size:10px;line-height:1.6;color:var(--color-text);">In ewiger Liebe,<br/>Dein Heinrich</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
<div class="status-bar">
|
||
<span class="status-saved">✓ Gespeichert</span>
|
||
<span>4 Abschnitte</span>
|
||
<span style="margin-left:auto;">2 Bearbeiter aktiv</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="agent">
|
||
<h4>C · Interleaved paragraph sync</h4>
|
||
<pre>/* A fundamentally different layout: no split view. Instead, a single centered column (max-width:800px).
|
||
* Each "section" = a card with two halves:
|
||
* Top half: cropped region of the PDF scan (rendered via canvas crop or CSS clip-path from the full PDF).
|
||
* Bottom half: editable transcript text for that section.
|
||
* User defines section boundaries by drawing horizontal lines on the PDF (like the annotation tool but simpler).
|
||
* Sections are numbered and labeled (Anrede, Hauptteil, Schluss — or custom labels).
|
||
* Presence: per-section indicator showing who is editing that block.
|
||
* Pro: natural reading flow, works great on mobile without layout changes. Con: requires section-splitting UX. */</pre>
|
||
<table class="at"><thead><tr><th>Element</th><th>Value</th><th>Notes</th></tr></thead><tbody>
|
||
<tr><td>Column</td><td>max-width:800px, centered, bg:sand, padding:24px</td><td>Scrollable single column</td></tr>
|
||
<tr><td>Section card</td><td>border-radius:8px, overflow:hidden, mb:20px</td><td>Top: scan crop (pdf-bg). Bottom: surface + transcript.</td></tr>
|
||
<tr><td>Scan crop</td><td>min-height:80px, bg:pdf-bg, centered paper snippet</td><td>Canvas-based crop from PDF page at defined Y offsets</td></tr>
|
||
<tr><td>Transcript block</td><td>Tinos 16px/1.7, padding:12px 16px, contenteditable</td><td>Per-section editing. User color left-border when active.</td></tr>
|
||
<tr><td>Section label</td><td>Montserrat 11px/600, uppercase, tracking-wide, muted</td><td>"Abschnitt 1 — Anrede" etc.</td></tr>
|
||
</tbody></table>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<!-- ═══ MOCKUP D — ENHANCED BOTTOM PANEL ═══ -->
|
||
<div class="scr" id="d">
|
||
<div class="scr-head"><h3>D — Enhanced bottom panel with scroll sync</h3><span class="scr-id">D</span></div>
|
||
<div class="scr-desc">Keeps the existing bottom panel architecture but enhances the "Transkription" tab with inline editing, scroll synchronization to the PDF above, and collaborative presence. The most conservative approach — minimal layout changes from the current design. The panel simply becomes editable instead of read-only, and gains a toolbar + presence indicators.</div>
|
||
<div class="scr-var"><strong>Existing bottom panel, enhanced</strong> — drag-to-resize remains, adds edit mode + scroll sync + presence. Least disruptive to ship.</div>
|
||
|
||
<div class="previews">
|
||
<div class="prev-col">
|
||
<div class="bp-lbl">Desktop · 1040px</div>
|
||
<div class="desk" style="min-height:560px;">
|
||
<div class="fa-nav">
|
||
<div class="fa-logo">FAMILIENARCHIV</div>
|
||
<div class="fa-link">Dokumente</div>
|
||
<div class="fa-link">Personen</div>
|
||
<div class="fa-nav-r"><div class="fa-av">MR</div></div>
|
||
</div>
|
||
<div class="fa-topbar">
|
||
<div class="back">←</div>
|
||
<div class="title">Brief von Heinrich an Martha, 14. Mai 1943</div>
|
||
<div style="flex:1"></div>
|
||
<div class="fa-chip"><div class="av">HR</div> Heinrich R.</div>
|
||
<div style="font-size:7px;color:var(--color-text-muted);margin:0 2px;">→</div>
|
||
<div class="fa-chip"><div class="av" style="background:#5A3080;color:#fff;">MR</div> Martha R.</div>
|
||
<div style="width:1px;height:16px;background:#e4e2d7;margin:0 6px;"></div>
|
||
<div class="fa-topbar-btn">Annotieren</div>
|
||
<div class="fa-topbar-btn">↓ Herunterladen</div>
|
||
</div>
|
||
|
||
<!-- PDF viewer (upper part) -->
|
||
<div class="pdf-area" style="height:220px;">
|
||
<div class="paper" style="width:45%;min-height:140px;">
|
||
<div style="font-size:7px;color:#8A8070;font-style:italic;margin-bottom:4px;opacity:.7;">Liebe Martha,</div>
|
||
<div class="pl" style="width:90%;"></div>
|
||
<div class="ps" style="width:85%;"></div>
|
||
<div class="ps" style="width:92%;"></div>
|
||
<div class="pl" style="width:78%;"></div>
|
||
<div class="ps" style="width:88%;"></div>
|
||
<div class="ps" style="width:70%;"></div>
|
||
<div class="pl" style="width:84%;"></div>
|
||
<div class="ps" style="width:90%;"></div>
|
||
<div class="ps" style="width:60%;"></div>
|
||
<div style="font-size:6px;color:#8A8070;margin-top:6px;text-align:right;opacity:.7;">Dein Heinrich</div>
|
||
</div>
|
||
<!-- Scroll sync indicator — thin turquoise bar showing which part of PDF maps to current transcript scroll -->
|
||
<div style="position:absolute;right:0;top:40px;width:3px;height:40px;background:var(--turquoise);border-radius:1px;opacity:.7;"></div>
|
||
</div>
|
||
|
||
<!-- Drag handle -->
|
||
<div style="height:6px;background:#fff;border-top:1px solid #e4e2d7;display:flex;align-items:center;justify-content:center;cursor:ns-resize;flex-shrink:0;">
|
||
<div style="width:40px;height:3px;background:#e4e2d7;border-radius:2px;"></div>
|
||
</div>
|
||
|
||
<!-- Enhanced bottom panel — Transcription tab active -->
|
||
<div style="display:flex;flex-direction:column;flex-shrink:0;height:240px;border-top:1px solid #e4e2d7;">
|
||
<!-- Tab bar -->
|
||
<div class="bp-tabs" style="height:28px;">
|
||
<div class="bp-tab">Metadaten</div>
|
||
<div class="bp-tab active" style="position:relative;">
|
||
Transkription
|
||
<div style="position:absolute;top:2px;right:-2px;width:5px;height:5px;background:var(--turquoise);border-radius:50%;"></div>
|
||
</div>
|
||
<div class="bp-tab">Diskussion <span class="bp-badge">3</span></div>
|
||
<div class="bp-tab">Verlauf</div>
|
||
<div style="flex:1;"></div>
|
||
<!-- Presence in tab bar -->
|
||
<div class="presence" style="margin-right:4px;"><div class="presence-dot editing" style="background:var(--blue);"></div> Du</div>
|
||
<div class="presence" style="margin-right:4px;"><div class="presence-dot editing" style="background:var(--purple);"></div> Oma Inge</div>
|
||
</div>
|
||
|
||
<!-- Mini toolbar -->
|
||
<div style="background:#fff;border-bottom:1px solid var(--color-subtle);display:flex;align-items:center;padding:2px 8px;gap:4px;height:22px;flex-shrink:0;">
|
||
<div class="tool-btn" style="font-size:6px;padding:1px 4px;">Bearbeiten</div>
|
||
<div class="tool-btn" style="font-size:6px;padding:1px 4px;">Vorschau</div>
|
||
<div style="width:1px;height:10px;background:var(--color-border);margin:0 2px;"></div>
|
||
<div class="tool-btn" style="font-size:6px;padding:1px 4px;">[unleserlich]</div>
|
||
<div class="tool-btn" style="font-size:6px;padding:1px 4px;">[Seitenwechsel]</div>
|
||
<div style="flex:1;"></div>
|
||
<span style="font-size:6px;color:var(--green-dark);">✓ Gespeichert vor 5s</span>
|
||
</div>
|
||
|
||
<!-- Editable transcript content -->
|
||
<div class="trans-panel" style="flex:1;">
|
||
<div class="trans-line"><div class="trans-ln">1</div><div class="trans-text">Liebe Martha,</div></div>
|
||
<div class="trans-line"><div class="trans-ln">2</div><div class="trans-text"> </div></div>
|
||
<div class="trans-line hl-purple"><div class="trans-ln">3</div><div class="trans-text">ich schreibe Dir heute aus dem Lazarett</div></div>
|
||
<div class="trans-line hl-purple"><div class="trans-ln">4</div><div class="trans-text">in Breslau. Mach Dir keine Sorgen,</div></div>
|
||
<div class="trans-line"><div class="trans-ln">5</div><div class="trans-text">es geht mir den Umständen</div></div>
|
||
<div class="trans-line hl-blue"><div class="trans-ln">6</div><div class="trans-text">entsprechend gut. Der Arzt sagt<span class="trans-cursor"></span></div></div>
|
||
<div class="trans-line"><div class="trans-ln">7</div><div class="trans-text" style="color:var(--color-text-muted);font-style:italic;">[unleserlich]</div></div>
|
||
<div class="trans-line"><div class="trans-ln">8</div><div class="trans-text">Wochen noch dauern wird.</div></div>
|
||
<div class="trans-line"><div class="trans-ln">9</div><div class="trans-text"> </div></div>
|
||
<div class="trans-line"><div class="trans-ln">10</div><div class="trans-text">Die Kinder sollen wissen, dass ich</div></div>
|
||
</div>
|
||
|
||
<div class="status-bar">
|
||
<span>Zeile 6, Spalte 34</span>
|
||
<span>15 Zeilen</span>
|
||
<span style="margin-left:auto;">Oma Inge bearbeitet Z. 3-4</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="agent">
|
||
<h4>D · Enhanced bottom panel</h4>
|
||
<pre>/* Minimal change from current architecture. The existing DocumentBottomPanel + PanelTranscription stay.
|
||
* Changes:
|
||
* 1. PanelTranscription gains an "edit mode" toggle (currently read-only whitespace-pre-wrap text).
|
||
* 2. Edit mode: contenteditable line-by-line editor with line numbers (same as mockups A/B).
|
||
* 3. Scroll sync: scrolling the transcript highlights a position marker on the PDF's right edge.
|
||
* - Implemented via: transcript scroll offset → normalized position → turquoise bar on PDF.
|
||
* 4. Presence indicators shown in the tab bar (right side) and in the status bar.
|
||
* 5. Mini toolbar above transcript: Edit/Preview + quick-insert buttons ([unleserlich], [Seitenwechsel]).
|
||
* 6. Transcription tab gets a turquoise dot when someone is actively editing.
|
||
* Pro: ships fastest, reuses all existing panel infrastructure. Con: vertical space is limited. */</pre>
|
||
<table class="at"><thead><tr><th>Element</th><th>Value</th><th>Notes</th></tr></thead><tbody>
|
||
<tr><td>Panel min height</td><td>200px when transcription tab active in edit mode</td><td>Existing drag-to-resize + open/close stays</td></tr>
|
||
<tr><td>Mini toolbar</td><td>h:28px, bg:surface, border-bottom:subtle, flex row</td><td>Edit/Preview + [unleserlich] + [Seitenwechsel] quick-insert</td></tr>
|
||
<tr><td>Scroll sync bar</td><td>3px wide, turquoise, absolute right:0 on PDF area</td><td>Height proportional to visible transcript lines / total lines</td></tr>
|
||
<tr><td>Active tab dot</td><td>5px turquoise circle, absolute top-right of tab</td><td>Visible when ≥1 user is editing in real time</td></tr>
|
||
<tr><td>Quick-insert btns</td><td>[unleserlich] and [Seitenwechsel]</td><td>Insert at cursor. Rendered as italic muted inline markers.</td></tr>
|
||
</tbody></table>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<!-- ═══ LLM IMPLEMENTATION GUIDE ═══ -->
|
||
<div class="llm">
|
||
<h2>Implementation Guide — Inline Collaborative Transcription</h2>
|
||
|
||
<h3>1. Concept Summary</h3>
|
||
<p>Four approaches to the same user need: <strong>see the original scan and type/edit a transcript simultaneously, with multiple family members contributing</strong>. The documents are scanned handwritten letters (image-only PDFs, no text layer). The transcription must be editable inline — not in a separate "edit" page.</p>
|
||
|
||
<table>
|
||
<thead><tr><th>Mockup</th><th>Layout</th><th>Pros</th><th>Cons</th><th>Complexity</th></tr></thead>
|
||
<tbody>
|
||
<tr><td><strong>A</strong></td><td>Vertical split (PDF left, transcript right)</td><td>Both always visible, resizable, familiar pattern</td><td>PDF loses width on narrow screens</td><td>Medium</td></tr>
|
||
<tr><td><strong>B</strong></td><td>Slide-over panel on top of PDF</td><td>No layout shift, PDF stays full-width</td><td>Obscures right side of scan</td><td>Low</td></tr>
|
||
<tr><td><strong>C</strong></td><td>Interleaved scan crops + transcript blocks</td><td>Best reading flow, works on mobile natively</td><td>Requires section-splitting UX, complex PDF cropping</td><td>High</td></tr>
|
||
<tr><td><strong>D</strong></td><td>Enhanced existing bottom panel</td><td>Fastest to ship, no new layout needed</td><td>Vertical space squeeze, scan partially hidden</td><td>Low</td></tr>
|
||
</tbody>
|
||
</table>
|
||
|
||
<h3>2. Shared Components Across All Mockups</h3>
|
||
<ul>
|
||
<li><strong>Collaborative editing engine:</strong> Use Y.js (CRDT) or similar for real-time multi-user editing. Each user gets a distinct color from a 6-color palette.</li>
|
||
<li><strong>Presence indicators:</strong> Colored dots (5px circles) with user name. "Editing" = colored fill, "online" = green fill, "idle" = gray.</li>
|
||
<li><strong>Line-by-line editor:</strong> Transcript stored as an array of lines. Each line is a <code>contenteditable</code> div or a textarea row. Line numbers (mono font, right-aligned, muted).</li>
|
||
<li><strong>Auto-save:</strong> Debounced 2-second save via <code>PATCH /api/documents/{id}</code> with <code>transcription</code> field. Status indicator: "Gespeichert" (green) / "Speichert..." (muted) / "Nicht gespeichert" (error red).</li>
|
||
<li><strong>[unleserlich] markers:</strong> Inline placeholder for illegible text — rendered as <code>font-style:italic; color:ink-3;</code> in square brackets. Insertable via toolbar button or keyboard shortcut (<code>Ctrl+Shift+U</code>).</li>
|
||
<li><strong>[Seitenwechsel] markers:</strong> Page-break indicator — a horizontal rule with "Seite 2" label, inserted when the letter spans multiple pages.</li>
|
||
</ul>
|
||
|
||
<h3>3. Existing Code to Extend</h3>
|
||
<ul>
|
||
<li><code>PanelTranscription.svelte</code> — currently read-only. Needs edit mode toggle.</li>
|
||
<li><code>DocumentBottomPanel.svelte</code> — existing drag-to-resize panel with tabs. Mockup D enhances this directly.</li>
|
||
<li><code>DocumentViewer.svelte</code> — wraps PdfViewer. Mockups A/B need a split or overlay sibling.</li>
|
||
<li><code>+page.svelte</code> (document detail) — orchestrates all sub-components. New state: <code>transcribeMode</code> (boolean).</li>
|
||
<li><code>DocumentTopBar.svelte</code> — needs a "Transkribieren" toggle button (same pattern as existing annotate button).</li>
|
||
</ul>
|
||
|
||
<h3>4. Data Model Changes</h3>
|
||
<ul>
|
||
<li>The <code>Document.transcription</code> field (text) already exists. No schema change needed for basic single-user editing.</li>
|
||
<li>For collaborative editing: add a <code>transcription_versions</code> table (document_id, user_id, content, timestamp) for version history.</li>
|
||
<li>For real-time sync: WebSocket endpoint <code>/ws/transcription/{documentId}</code> broadcasting Y.js updates.</li>
|
||
</ul>
|
||
|
||
<h3>5. Recommendation</h3>
|
||
<p><strong>Start with Mockup D</strong> (enhanced bottom panel) as the MVP — it requires the least layout changes and builds on existing components. Once validated with users, upgrade to <strong>Mockup A</strong> (side-by-side split) for the full experience. Mockup C (interleaved) is the most innovative but requires significant PDF rendering work (canvas-based section cropping) and a section-splitting UX that adds complexity.</p>
|
||
|
||
<h3>6. Accessibility</h3>
|
||
<ul>
|
||
<li>Transcript editor must be keyboard-navigable: Tab moves between lines, Enter inserts a new line, Escape exits edit mode.</li>
|
||
<li>Screen reader: <code>aria-live="polite"</code> region for save status and presence changes.</li>
|
||
<li>Minimum font size: 16px for transcript text (18px in "senior mode" user preference).</li>
|
||
<li>All toolbar buttons must have <code>aria-label</code> attributes.</li>
|
||
<li>Focus management: entering transcribe mode should focus the first editable line.</li>
|
||
<li>Color is never the only cue for user presence — each user's name is always shown alongside their color dot.</li>
|
||
</ul>
|
||
</div>
|
||
|
||
</div>
|
||
</body>
|
||
</html>
|