960 lines
72 KiB
HTML
960 lines
72 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8"/>
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||
<title>Side-by-Side Split — 5 Variations</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;}
|
||
|
||
.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);}
|
||
|
||
.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;}
|
||
|
||
.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);}
|
||
|
||
.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);}
|
||
|
||
.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{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;}
|
||
|
||
.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 Familienarchiv chrome ── */
|
||
.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);}
|
||
|
||
.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-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);}
|
||
.fa-topbar-btn.ghost{border-color:var(--color-border);color:var(--color-text-muted);font-weight:500;}
|
||
|
||
/* ── PDF area ── */
|
||
.pdf-area{background:#D4D0C8;flex:1;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;}
|
||
.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;}
|
||
|
||
.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;}
|
||
|
||
/* ── Transcript lines ── */
|
||
.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-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{display:flex;align-items:center;gap:3px;font-size:7px;color:var(--color-text-muted);}
|
||
.presence-dot{width:5px;height:5px;border-radius:50%;}
|
||
|
||
.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);}
|
||
.hl-orange{background:rgba(232,134,42,.1);border-left:2px solid var(--orange);}
|
||
|
||
.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;}
|
||
|
||
.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;}
|
||
|
||
.pdf-line-marker{position:absolute;left:0;width:3px;background:var(--turquoise);opacity:.6;}
|
||
|
||
.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);}
|
||
|
||
/* ── Minimap ── */
|
||
.minimap{width:32px;background:var(--sand);border-left:1px solid #e4e2d7;flex-shrink:0;position:relative;overflow:hidden;}
|
||
.minimap-bar{position:absolute;left:2px;right:2px;background:rgba(0,199,177,.2);border:1px solid var(--turquoise);border-radius:2px;}
|
||
.minimap-line{position:absolute;left:4px;right:4px;height:1px;background:var(--color-border);opacity:.4;}
|
||
.minimap-dot{position:absolute;width:4px;height:4px;border-radius:50%;left:50%;transform:translateX(-50%);}
|
||
|
||
/* ── Comment gutter ── */
|
||
.gutter{width:28px;background:var(--color-page);border-right:1px solid #e4e2d7;flex-shrink:0;display:flex;flex-direction:column;align-items:center;padding:8px 0;gap:3px;}
|
||
.gutter-icon{width:14px;height:14px;border-radius:50%;background:var(--sand);border:1px solid var(--color-border);display:flex;align-items:center;justify-content:center;font-size:6px;color:var(--color-text-muted);cursor:pointer;}
|
||
.gutter-icon.has-comments{background:var(--navy);border-color:var(--navy);color:#fff;}
|
||
|
||
/* ── Page navigator ── */
|
||
.page-nav{background:#fff;border-bottom:1px solid #e4e2d7;display:flex;align-items:center;justify-content:center;gap:6px;height:22px;flex-shrink:0;font-size:7px;color:var(--color-text-muted);}
|
||
.page-dot{width:6px;height:6px;border-radius:50%;background:var(--color-border);}
|
||
.page-dot.active{background:var(--navy);}
|
||
|
||
/* ── Paragraph blocks ── */
|
||
.para-block{margin-bottom:6px;border:1px solid var(--color-border);border-radius:4px;overflow:hidden;}
|
||
.para-block.active{border-color:var(--mint);box-shadow:0 0 0 1px var(--mint);}
|
||
.para-head{background:var(--sand);padding:2px 8px;display:flex;align-items:center;gap:4px;font-size:6px;font-weight:600;color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.06em;}
|
||
.para-body{padding:4px 8px;font-size:9px;line-height:1.6;color:var(--color-text);}
|
||
|
||
/* ── Scroll position sync connector ── */
|
||
.sync-connector{position:absolute;right:-8px;width:8px;pointer-events:none;}
|
||
.sync-dot{position:absolute;right:0;width:6px;height:6px;border-radius:50%;background:var(--turquoise);border:1px solid #fff;}
|
||
|
||
/* ── 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{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>Side-by-Side Split — 5 Variations</h1>
|
||
<p>Five layout variations of the side-by-side split transcription concept. All share the core idea: PDF scan on one side, editable transcript on the other, with collaborative presence. They differ in information architecture, scroll behavior, and how the connection between scan and text is communicated.</p>
|
||
</div>
|
||
<div class="doc-meta">
|
||
Familienarchiv<br/>
|
||
<span class="pill pill-b">Exploration — Round 2</span><br/>
|
||
2026-04-04 · @leonievoss
|
||
</div>
|
||
</div>
|
||
|
||
<div class="section">
|
||
<div class="section-title">Design space</div>
|
||
<p class="prose">All five variations place the PDF scan and transcript editor next to each other. The key design decisions that differentiate them are: <strong>(1)</strong> how scroll positions stay linked between the two panels, <strong>(2)</strong> where the toolbar and presence indicators live, <strong>(3)</strong> how paragraph boundaries are expressed, and <strong>(4)</strong> what happens with the existing bottom panel (metadata, discussion, history).</p>
|
||
</div>
|
||
|
||
<div class="jh jh-b">
|
||
<div class="jn">A</div>
|
||
<div><h2>Side-by-side split variations</h2><p>PDF left, transcript right. Draggable divider. Each variation explores a different approach to linking the scan with the text and organizing the editing UI.</p><div class="fl">Document detail → Transcribe mode · WRITE_ALL permission</div></div>
|
||
</div>
|
||
|
||
|
||
<!-- ═══════════════════════════════════════════════════════════════════════════
|
||
V1 — PLAIN SPLIT WITH SYNCHRONIZED SCROLL
|
||
═══════════════════════════════════════════════════════════════════════════ -->
|
||
<div class="scr" id="v1">
|
||
<div class="scr-head"><h3>V1 — Plain split, synchronized scroll</h3><span class="scr-id">V1</span></div>
|
||
<div class="scr-desc">The simplest version: a clean vertical split. Both panels scroll independently but are linked — scrolling the transcript moves the PDF to the corresponding region and vice versa. A thin turquoise position marker on the PDF's right edge shows what the transcript cursor maps to. The toolbar sits at the top of the transcript panel. Bottom panel stays below the whole split.</div>
|
||
<div class="scr-var"><strong>50/50 default split, resizable</strong> — toolbar in transcript header, bottom panel retained below both panels.</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 ghost">Annotieren</div>
|
||
</div>
|
||
|
||
<div class="split" style="height:360px;">
|
||
<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 style="font-size:6px;color:#8A8070;margin-top:6px;text-align:right;opacity:.7;">Dein Heinrich</div>
|
||
</div>
|
||
<!-- Scroll position indicator -->
|
||
<div class="pdf-line-marker" style="right:0;left:auto;top:68px;height:24px;"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="split-handle"></div>
|
||
|
||
<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" style="background:var(--blue);"></div> Du</div>
|
||
<div class="presence"><div class="presence-dot" style="background:var(--purple);"></div> Oma Inge</div>
|
||
<div class="presence"><div class="presence-dot" style="background:var(--green);"></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;">Oma Inge · Z. 3–4</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<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="agent">
|
||
<h4>V1 · Plain split, synchronized scroll</h4>
|
||
<pre>/* Simplest variant. Two panels, synced scroll, turquoise position marker on PDF edge.
|
||
* Scroll sync: transcript scroll position (normalized 0-1) maps to PDF scroll position.
|
||
* Bidirectional: scrolling PDF also moves the transcript highlight.
|
||
* Debounced sync (50ms) to avoid jitter. User can break sync by scrolling the "other" panel
|
||
* (a small "re-sync" button appears in the toolbar).
|
||
* Bottom panel survives as-is below the split — Transcription tab shows "editing inline" hint. */</pre>
|
||
<table class="at"><thead><tr><th>Element</th><th>Value</th><th>Notes</th></tr></thead><tbody>
|
||
<tr class="grp"><td colspan="3">Split layout</td></tr>
|
||
<tr><td>PDF panel</td><td>flex:1, min-width:300px</td><td>Existing PdfViewer, scroll-synced</td></tr>
|
||
<tr><td>Transcript panel</td><td>380px default, min:280px, max:60vw</td><td>Resizable via drag handle</td></tr>
|
||
<tr><td>Position marker</td><td>3px wide, turquoise, right edge of PDF</td><td>Height = (visible transcript lines / total) * PDF height</td></tr>
|
||
<tr><td>Scroll sync</td><td>Bidirectional, debounced 50ms</td><td>"Re-sync" button if user scrolls independently</td></tr>
|
||
<tr class="grp"><td colspan="3">Toolbar</td></tr>
|
||
<tr><td>Height</td><td>32px, bg:surface, border-bottom</td><td>Edit/Preview/History + presence right</td></tr>
|
||
<tr><td>Presence dots</td><td>5px circles, user-color, name beside</td><td>Max 4 visible, +N overflow</td></tr>
|
||
</tbody></table>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<!-- ═══════════════════════════════════════════════════════════════════════════
|
||
V2 — SPLIT WITH MINIMAP & COMMENT GUTTER
|
||
═══════════════════════════════════════════════════════════════════════════ -->
|
||
<div class="scr" id="v2">
|
||
<div class="scr-head"><h3>V2 — Split with minimap and comment gutter</h3><span class="scr-id">V2</span></div>
|
||
<div class="scr-desc">Builds on V1 with two additions: a minimap on the far right showing the full transcript at a glance (like VS Code), and a narrow comment gutter between line numbers and text where users can leave line-level comments. The minimap shows user cursors as colored dots and the current viewport as a translucent highlight. The gutter shows small speech-bubble icons on lines with comments.</div>
|
||
<div class="scr-var"><strong>Split + minimap (32px) + comment gutter (28px)</strong> — power-user variant with maximum contextual information.</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>
|
||
|
||
<div class="split" style="height:380px;">
|
||
<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 style="font-size:6px;color:#8A8070;margin-top:6px;text-align:right;opacity:.7;">Dein Heinrich</div>
|
||
</div>
|
||
<div class="pdf-line-marker" style="right:0;left:auto;top:68px;height:24px;"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="split-handle"></div>
|
||
|
||
<div class="split-right" style="width:400px;display:flex;flex-direction:row;">
|
||
<!-- Main editor column -->
|
||
<div style="flex:1;display:flex;flex-direction:column;overflow:hidden;">
|
||
<div class="trans-toolbar">
|
||
<div class="tool-btn active">Bearbeiten</div>
|
||
<div class="tool-btn">Vorschau</div>
|
||
<div class="tool-btn">[unleserlich]</div>
|
||
<div class="presence-group">
|
||
<div class="presence"><div class="presence-dot" style="background:var(--blue);"></div> Du</div>
|
||
<div class="presence"><div class="presence-dot" style="background:var(--purple);"></div> Oma Inge</div>
|
||
</div>
|
||
</div>
|
||
<div class="trans-panel" style="flex-direction:row;">
|
||
<!-- Gutter -->
|
||
<div class="gutter" style="padding-top:4px;">
|
||
<div style="height:12px;"></div><!-- line 1 spacer -->
|
||
<div style="height:12px;"></div><!-- line 2 -->
|
||
<div class="gutter-icon has-comments" title="2 Kommentare">2</div><!-- line 3 -->
|
||
<div style="height:12px;"></div><!-- line 4 -->
|
||
<div style="height:12px;"></div><!-- line 5 -->
|
||
<div style="height:12px;"></div><!-- line 6 -->
|
||
<div class="gutter-icon" title="Kommentar hinzufügen">+</div><!-- line 7 -->
|
||
<div style="height:12px;"></div>
|
||
<div style="height:12px;"></div>
|
||
<div style="height:12px;"></div>
|
||
<div style="height:12px;"></div>
|
||
</div>
|
||
<!-- Lines -->
|
||
<div style="flex:1;display:flex;flex-direction:column;gap:4px;padding:8px 8px 8px 0;">
|
||
<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>
|
||
<div class="status-bar">
|
||
<span class="status-saved">✓ Gespeichert</span>
|
||
<span>Z. 6, Sp. 34</span>
|
||
<span style="margin-left:auto;">2 Kommentare offen</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Minimap -->
|
||
<div class="minimap">
|
||
<!-- Viewport highlight -->
|
||
<div class="minimap-bar" style="top:30px;height:80px;"></div>
|
||
<!-- Text representation -->
|
||
<div class="minimap-line" style="top:12px;width:60%;"></div>
|
||
<div class="minimap-line" style="top:20px;width:0;"></div>
|
||
<div class="minimap-line" style="top:28px;width:85%;"></div>
|
||
<div class="minimap-line" style="top:36px;width:78%;"></div>
|
||
<div class="minimap-line" style="top:44px;width:70%;"></div>
|
||
<div class="minimap-line" style="top:52px;width:80%;"></div>
|
||
<div class="minimap-line" style="top:60px;width:55%;"></div>
|
||
<div class="minimap-line" style="top:68px;width:72%;"></div>
|
||
<div class="minimap-line" style="top:76px;width:0;"></div>
|
||
<div class="minimap-line" style="top:84px;width:82%;"></div>
|
||
<div class="minimap-line" style="top:92px;width:68%;"></div>
|
||
<!-- User cursors as dots -->
|
||
<div class="minimap-dot" style="top:50px;background:var(--blue);"></div>
|
||
<div class="minimap-dot" style="top:28px;background:var(--purple);"></div>
|
||
</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>V2 · Split with minimap & comment gutter</h4>
|
||
<pre>/* Power-user variant. Adds two elements to V1:
|
||
* 1. Minimap (32px, far right): compressed view of all transcript lines as 1px bars.
|
||
* Viewport highlight (turquoise tint rectangle). User cursor dots (colored, positioned by line).
|
||
* Click minimap to jump to that position.
|
||
* 2. Comment gutter (28px, between line numbers and text):
|
||
* Empty circles on uncommented lines (show on hover only).
|
||
* Filled navy circles with count on lines that have comments.
|
||
* Click to open a comment popover (reuses existing CommentThread component).
|
||
* Line-level comments are a new comment type: annotationId=null, lineNumber=N.
|
||
* Bottom panel: Transcription tab removed (now inline). Discussion tab shows document-level comments only. */</pre>
|
||
<table class="at"><thead><tr><th>Element</th><th>Value</th><th>Notes</th></tr></thead><tbody>
|
||
<tr class="grp"><td colspan="3">Minimap</td></tr>
|
||
<tr><td>Width</td><td>32px, bg:sand, border-left:line</td><td>Sticky, does not scroll with transcript</td></tr>
|
||
<tr><td>Viewport bar</td><td>turquoise 20% opacity, 1px border turquoise</td><td>Height proportional to viewport/total ratio</td></tr>
|
||
<tr><td>Line bars</td><td>1px height, left:4px right:4px, border opacity .4</td><td>Width proportional to line character count</td></tr>
|
||
<tr><td>Cursor dots</td><td>4px circles, user-color, centered horizontally</td><td>Positioned at user's line offset</td></tr>
|
||
<tr class="grp"><td colspan="3">Comment gutter</td></tr>
|
||
<tr><td>Width</td><td>28px, bg:page, border-right:line</td><td>Icons 14px circles, vertically aligned per line</td></tr>
|
||
<tr><td>Has comments</td><td>navy bg, white text, font-size:6px count</td><td>Click opens popover with CommentThread</td></tr>
|
||
<tr><td>Empty</td><td>sand bg, border:line, "+" icon</td><td>Visible on hover only to reduce noise</td></tr>
|
||
</tbody></table>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<!-- ═══════════════════════════════════════════════════════════════════════════
|
||
V3 — PARAGRAPH-AWARE SPLIT
|
||
═══════════════════════════════════════════════════════════════════════════ -->
|
||
<div class="scr" id="v3">
|
||
<div class="scr-head"><h3>V3 — Paragraph-aware split</h3><span class="scr-id">V3</span></div>
|
||
<div class="scr-desc">The transcript side is organized into named paragraph blocks instead of a flat line list. Each paragraph has a small header ("Anrede", "Hauptteil", "Schluss") and a body area. The currently active paragraph is highlighted with a mint border, and the PDF auto-scrolls to show the corresponding region. Users click a paragraph to focus it. This gives structure to the transcription and makes it easier to divide work ("I'll do paragraph 3, you do paragraph 4").</div>
|
||
<div class="scr-var"><strong>Paragraph blocks with named sections</strong> — structured editor, active paragraph highlighted, PDF region linked.</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="presence" style="margin-right:6px;"><div class="presence-dot" style="background:var(--blue);"></div> Du</div>
|
||
<div class="presence" style="margin-right:6px;"><div class="presence-dot" style="background:var(--purple);"></div> Oma Inge</div>
|
||
<div style="width:1px;height:16px;background:#e4e2d7;margin:0 4px;"></div>
|
||
<div class="fa-topbar-btn active">✎ Transkribieren</div>
|
||
</div>
|
||
|
||
<div class="split" style="height:380px;">
|
||
<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 style="font-size:6px;color:#8A8070;margin-top:6px;text-align:right;opacity:.7;">Dein Heinrich</div>
|
||
</div>
|
||
<!-- Active paragraph region highlight on PDF -->
|
||
<div style="position:absolute;left:15%;right:15%;top:80px;height:50px;border:1.5px dashed var(--turquoise);background:rgba(0,199,177,.05);border-radius:3px;"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="split-handle"></div>
|
||
|
||
<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">+ Abschnitt</div>
|
||
<div class="presence-group">
|
||
<span class="status-saved">✓ Gespeichert</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div style="flex:1;overflow-y:auto;padding:8px;display:flex;flex-direction:column;gap:6px;background:#fff;">
|
||
<!-- Paragraph 1: Greeting -->
|
||
<div class="para-block">
|
||
<div class="para-head">
|
||
<span>§ 1 — Anrede</span>
|
||
<span style="margin-left:auto;color:var(--green-dark);">✓</span>
|
||
</div>
|
||
<div class="para-body">Liebe Martha,</div>
|
||
</div>
|
||
|
||
<!-- Paragraph 2: Main body (active, being edited by Oma Inge) -->
|
||
<div class="para-block active">
|
||
<div class="para-head">
|
||
<span>§ 2 — Hauptteil</span>
|
||
<div class="presence" style="margin-left:auto;"><div class="presence-dot" style="background:var(--purple);width:4px;height:4px;"></div> <span style="font-size:5px;">Oma Inge</span></div>
|
||
</div>
|
||
<div class="para-body" style="border-left:2px solid var(--purple);padding-left:6px;background:rgba(83,74,183,.04);">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>
|
||
|
||
<!-- Paragraph 3: Family (being edited by current user) -->
|
||
<div class="para-block active" style="border-color:var(--blue);box-shadow:0 0 0 1px var(--blue);">
|
||
<div class="para-head">
|
||
<span>§ 3 — Familie</span>
|
||
<div class="presence" style="margin-left:auto;"><div class="presence-dot" style="background:var(--blue);width:4px;height:4px;"></div> <span style="font-size:5px;">Du</span></div>
|
||
</div>
|
||
<div class="para-body" style="border-left:2px solid var(--blue);padding-left:6px;background:rgba(45,125,210,.04);">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>
|
||
|
||
<!-- Paragraph 4: Closing -->
|
||
<div class="para-block">
|
||
<div class="para-head">
|
||
<span>§ 4 — Schluss</span>
|
||
<span style="margin-left:auto;color:var(--green-dark);">✓</span>
|
||
</div>
|
||
<div class="para-body">In ewiger Liebe,<br/>Dein Heinrich</div>
|
||
</div>
|
||
|
||
<!-- Empty state: add new paragraph -->
|
||
<div style="border:1px dashed var(--color-border);border-radius:4px;padding:6px;text-align:center;font-size:7px;color:var(--color-text-muted);cursor:pointer;">+ Neuen Abschnitt hinzufügen</div>
|
||
</div>
|
||
|
||
<div class="status-bar">
|
||
<span>4 Abschnitte</span>
|
||
<span>§ 3 aktiv</span>
|
||
<span style="margin-left:auto;">Oma Inge · § 2</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>V3 · Paragraph-aware split</h4>
|
||
<pre>/* Structured variant. Transcript is divided into named paragraph blocks.
|
||
* Each paragraph:
|
||
* - Header: section number + label (editable) + presence indicator + checkmark if reviewed.
|
||
* - Body: contenteditable div, full paragraph text.
|
||
* - Active paragraph: mint border + box-shadow glow. PDF auto-scrolls to corresponding region.
|
||
* PDF region highlight: dashed turquoise rectangle over the approximate area matching the active paragraph.
|
||
* (User can drag to adjust the PDF region mapping — stored as normalized Y coordinates.)
|
||
* "+ Abschnitt" button in toolbar creates a new paragraph block at the end.
|
||
* Paragraphs can be reordered via drag handle in the header.
|
||
* This variant makes task division explicit: "I'll do §2, you do §3."
|
||
* Trade-off: requires users to define paragraph boundaries upfront — less fluid than line-by-line. */</pre>
|
||
<table class="at"><thead><tr><th>Element</th><th>Value</th><th>Notes</th></tr></thead><tbody>
|
||
<tr class="grp"><td colspan="3">Paragraph blocks</td></tr>
|
||
<tr><td>Block container</td><td>border:1px line, radius:6px, overflow:hidden</td><td>Active: border-color:mint, box-shadow:0 0 0 1px mint</td></tr>
|
||
<tr><td>Header</td><td>bg:sand, py:3px px:8px, font:6px/600 uppercase</td><td>Section number + label + presence + status</td></tr>
|
||
<tr><td>Body</td><td>Tinos 16px/1.7, padding:6px 10px, contenteditable</td><td>User-color left border when being edited</td></tr>
|
||
<tr><td>PDF region</td><td>dashed turquoise border, rgba(.05) fill, absolute</td><td>Mapped via normalized Y coords per paragraph</td></tr>
|
||
<tr class="grp"><td colspan="3">Interactions</td></tr>
|
||
<tr><td>Add paragraph</td><td>Dashed border placeholder at bottom</td><td>Also via toolbar "+ Abschnitt" button</td></tr>
|
||
<tr><td>Reorder</td><td>Drag handle in paragraph header</td><td>Draggable within the paragraph list</td></tr>
|
||
<tr><td>Rename</td><td>Double-click section label to edit</td><td>Default labels: Anrede, Hauptteil, Schluss</td></tr>
|
||
</tbody></table>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<!-- ═══════════════════════════════════════════════════════════════════════════
|
||
V4 — SPLIT WITH INLINE DISCUSSION THREADS
|
||
═══════════════════════════════════════════════════════════════════════════ -->
|
||
<div class="scr" id="v4">
|
||
<div class="scr-head"><h3>V4 — Split with inline discussion threads</h3><span class="scr-id">V4</span></div>
|
||
<div class="scr-desc">Google Docs-style: the transcript is a plain text editor, but users can select a range of text and start a discussion thread on it. Threads appear as highlighted text with a small thread icon in the right margin. Clicking a thread opens a compact comment popover next to the highlighted text. This merges the "transcribe" and "discuss" workflows into one — family members can debate a difficult word ("Is this 'Breslau' or 'Braunau'?") right where it appears.</div>
|
||
<div class="scr-var"><strong>Split + inline text-anchored discussion threads</strong> — select text to start a thread, threads shown as highlights with margin icons.</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 class="split" style="height:380px;">
|
||
<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 style="font-size:6px;color:#8A8070;margin-top:6px;text-align:right;opacity:.7;">Dein Heinrich</div>
|
||
</div>
|
||
<div class="pdf-line-marker" style="right:0;left:auto;top:68px;height:24px;"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="split-handle"></div>
|
||
|
||
<div class="split-right" style="width:400px;">
|
||
<div class="trans-toolbar">
|
||
<div class="tool-btn active">Bearbeiten</div>
|
||
<div class="tool-btn">Vorschau</div>
|
||
<div class="tool-btn">[unleserlich]</div>
|
||
<div class="tool-btn" style="border:1px solid var(--orange);color:var(--orange);">💬 Diskutieren</div>
|
||
<div class="presence-group">
|
||
<div class="presence"><div class="presence-dot" style="background:var(--blue);"></div> Du</div>
|
||
<div class="presence"><div class="presence-dot" style="background:var(--purple);"></div> Oma Inge</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div style="flex:1;display:flex;overflow:hidden;">
|
||
<!-- Editor area -->
|
||
<div class="trans-panel" style="flex:1;position:relative;">
|
||
<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"><div class="trans-ln">3</div><div class="trans-text">ich schreibe Dir heute aus dem Lazarett</div></div>
|
||
<div class="trans-line"><div class="trans-ln">4</div><div class="trans-text">in <span style="background:rgba(232,134,42,.15);border-bottom:2px solid var(--orange);padding:0 1px;">Breslau</span>. 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"><span style="background:rgba(232,134,42,.15);border-bottom:2px solid var(--orange);padding:0 1px;">Wochen</span> 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>
|
||
|
||
<!-- Thread margin -->
|
||
<div style="width:28px;flex-shrink:0;background:var(--color-page);border-left:1px solid var(--color-subtle);position:relative;">
|
||
<!-- Thread icon for "Breslau" (line 4) -->
|
||
<div style="position:absolute;top:52px;left:50%;transform:translateX(-50%);width:16px;height:16px;border-radius:50%;background:var(--orange-tint);border:1px solid var(--orange);display:flex;align-items:center;justify-content:center;font-size:7px;cursor:pointer;" title="Ist das Breslau oder Braunau?">2</div>
|
||
<!-- Thread icon for "Wochen" (line 8) -->
|
||
<div style="position:absolute;top:108px;left:50%;transform:translateX(-50%);width:16px;height:16px;border-radius:50%;background:var(--orange-tint);border:1px solid var(--orange);display:flex;align-items:center;justify-content:center;font-size:7px;cursor:pointer;" title="Wochen oder Monate?">1</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Inline thread popover (expanded for "Breslau") -->
|
||
<div style="background:#fff;border-top:1px solid #e4e2d7;flex-shrink:0;">
|
||
<div style="padding:6px 10px;border-left:3px solid var(--orange);background:var(--orange-tint);">
|
||
<div style="font-size:7px;font-weight:600;color:var(--orange-dark);margin-bottom:3px;">Diskussion — “Breslau” (Z. 4)</div>
|
||
<div style="display:flex;gap:4px;align-items:flex-start;margin-bottom:4px;">
|
||
<div style="width:14px;height:14px;border-radius:50%;background:var(--purple);display:flex;align-items:center;justify-content:center;font-size:5px;font-weight:800;color:#fff;flex-shrink:0;">OI</div>
|
||
<div style="font-size:8px;color:var(--color-text);line-height:1.5;"><strong style="font-size:7px;">Oma Inge</strong><br/>Ich bin mir sicher, das ist “Breslau” — Heinrich war im Lazarett dort stationiert.</div>
|
||
</div>
|
||
<div style="display:flex;gap:4px;align-items:flex-start;">
|
||
<div style="width:14px;height:14px;border-radius:50%;background:var(--blue);display:flex;align-items:center;justify-content:center;font-size:5px;font-weight:800;color:#fff;flex-shrink:0;">DU</div>
|
||
<div style="font-size:8px;color:var(--color-text);line-height:1.5;"><strong style="font-size:7px;">Du</strong><br/>Stimmt, danke! Lass ich so.</div>
|
||
</div>
|
||
<div style="margin-top:4px;display:flex;gap:4px;">
|
||
<input style="flex:1;font-size:7px;padding:3px 6px;border:1px solid var(--color-border);border-radius:3px;background:var(--color-page);" placeholder="Antworten..."/>
|
||
<div style="font-size:7px;font-weight:600;color:var(--green-dark);padding:3px 6px;cursor:pointer;">✓ Lösen</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="status-bar">
|
||
<span class="status-saved">✓ Gespeichert</span>
|
||
<span>12 Zeilen</span>
|
||
<span style="margin-left:auto;">2 offene Diskussionen</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="bp-tabs">
|
||
<div class="bp-tab">Metadaten</div>
|
||
<div class="bp-tab">Diskussion <span class="bp-badge">5</span></div>
|
||
<div class="bp-tab">Verlauf</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="agent">
|
||
<h4>V4 · Split with inline discussion threads</h4>
|
||
<pre>/* Google Docs-style inline threads. Key additions:
|
||
* 1. Text-anchored threads: select a word/phrase → click "Diskutieren" → creates an orange-highlighted
|
||
* range with a numbered circle in the right margin.
|
||
* 2. Click the margin circle to open/close a discussion popover at the bottom of the transcript panel.
|
||
* 3. Thread popover: orange left border, user avatar + name + message, reply input, "Lösen" (resolve) button.
|
||
* 4. Resolved threads: highlight removed, margin icon turns to a checkmark, thread hidden by default.
|
||
* 5. Thread anchors survive text edits via character offset tracking (reanchor on edit).
|
||
* This merges transcription + discussion into one workflow — no need to switch to Discussion tab
|
||
* for transcription-specific questions like "Is this word X or Y?"
|
||
* Thread data model: new table transcription_threads (document_id, anchor_start, anchor_end, resolved). */</pre>
|
||
<table class="at"><thead><tr><th>Element</th><th>Value</th><th>Notes</th></tr></thead><tbody>
|
||
<tr class="grp"><td colspan="3">Thread highlights</td></tr>
|
||
<tr><td>Active highlight</td><td>bg:rgba(orange,.15), border-bottom:2px orange</td><td>Inline span wrapping the anchored text range</td></tr>
|
||
<tr><td>Margin icon</td><td>16px circle, orange-tint bg, orange border, count</td><td>Positioned absolute, aligned to the highlighted line</td></tr>
|
||
<tr><td>Resolved</td><td>highlight removed, icon → gray checkmark</td><td>Toggle "show resolved" in toolbar to review</td></tr>
|
||
<tr class="grp"><td colspan="3">Thread popover</td></tr>
|
||
<tr><td>Container</td><td>border-top:line, bg:white, border-left:3px orange</td><td>Docked to bottom of transcript panel</td></tr>
|
||
<tr><td>Message</td><td>14px avatar + 12px name bold + 13px body</td><td>Reuses existing CommentThread message pattern</td></tr>
|
||
<tr><td>Reply input</td><td>text input + "Lösen" resolve button</td><td>Green resolve button right-aligned</td></tr>
|
||
</tbody></table>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<!-- ═══════════════════════════════════════════════════════════════════════════
|
||
V5 — MULTI-PAGE SPLIT WITH PAGE NAVIGATOR
|
||
═══════════════════════════════════════════════════════════════════════════ -->
|
||
<div class="scr" id="v5">
|
||
<div class="scr-head"><h3>V5 — Multi-page split with page navigator</h3><span class="scr-id">V5</span></div>
|
||
<div class="scr-desc">Optimized for multi-page letters (the common case — many letters are 2-4 pages). The transcript panel has a page navigator strip at the top showing page thumbnails. Clicking a page loads that PDF page on the left and scrolls the transcript to the corresponding section. The transcript is divided by [Seitenwechsel] markers that create clear page boundaries. A progress indicator shows how many pages are fully transcribed.</div>
|
||
<div class="scr-var"><strong>Split + page navigator strip + per-page progress</strong> — designed for 2-8 page letters, page-level task tracking.</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>
|
||
<!-- Progress bar -->
|
||
<div style="display:flex;align-items:center;gap:4px;margin-right:8px;">
|
||
<span style="font-size:7px;color:var(--color-text-muted);">Fortschritt</span>
|
||
<div style="width:60px;height:4px;background:var(--color-border);border-radius:2px;overflow:hidden;">
|
||
<div style="width:62%;height:100%;background:var(--turquoise);border-radius:2px;"></div>
|
||
</div>
|
||
<span style="font-size:7px;color:var(--turquoise);font-weight:600;">2/3</span>
|
||
</div>
|
||
<div style="width:1px;height:16px;background:#e4e2d7;margin:0 4px;"></div>
|
||
<div class="presence" style="margin-right:4px;"><div class="presence-dot" style="background:var(--blue);"></div> Du</div>
|
||
<div class="presence" style="margin-right:4px;"><div class="presence-dot" style="background:var(--purple);"></div> Oma Inge</div>
|
||
<div style="width:1px;height:16px;background:#e4e2d7;margin:0 4px;"></div>
|
||
<div class="fa-topbar-btn active">✎ Transkribieren</div>
|
||
</div>
|
||
|
||
<div class="split" style="height:380px;">
|
||
<div class="split-left">
|
||
<!-- Page navigator on PDF side -->
|
||
<div class="page-nav">
|
||
<div class="page-dot" style="background:var(--green);"></div>
|
||
<span style="font-weight:600;color:var(--navy);">Seite 2 von 3</span>
|
||
<div class="page-dot active"></div>
|
||
<div class="page-dot"></div>
|
||
<div style="margin-left:8px;display:flex;gap:3px;">
|
||
<div style="font-size:8px;color:var(--color-text-muted);cursor:pointer;padding:0 3px;">←</div>
|
||
<div style="font-size:8px;color:var(--color-text-muted);cursor:pointer;padding:0 3px;">→</div>
|
||
</div>
|
||
</div>
|
||
<div class="pdf-area" style="flex:1;">
|
||
<div class="paper" style="width:55%;min-height:180px;">
|
||
<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 class="pl" 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>
|
||
<div class="pdf-line-marker" style="right:0;left:auto;top:50px;height:20px;"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="split-handle"></div>
|
||
|
||
<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">[unleserlich]</div>
|
||
<div class="presence-group">
|
||
<span class="status-saved">✓ Gespeichert</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="trans-panel">
|
||
<!-- Page 1 marker (greyed, already done) -->
|
||
<div style="display:flex;align-items:center;gap:6px;padding:4px 8px;margin-bottom:4px;background:var(--green-tint);border-radius:3px;">
|
||
<span style="font-size:7px;font-weight:600;color:var(--green-dark);">✓ Seite 1</span>
|
||
<span style="font-size:6px;color:var(--green-dark);margin-left:auto;">15 Zeilen · Oma Inge</span>
|
||
</div>
|
||
<div style="padding:2px 4px;font-size:8px;color:var(--color-text-muted);font-style:italic;margin-bottom:6px;">Liebe Martha, ich schreibe Dir heute aus dem Lazarett in Breslau...</div>
|
||
|
||
<!-- Page 2 divider (active) -->
|
||
<div style="display:flex;align-items:center;gap:6px;padding:4px 8px;margin:8px 0 4px;background:var(--blue-tint);border-radius:3px;border:1px solid var(--blue);border-style:solid;">
|
||
<span style="font-size:7px;font-weight:600;color:var(--blue-dark);">Seite 2</span>
|
||
<span style="font-size:6px;color:var(--blue-dark);margin-left:auto;">aktiv</span>
|
||
</div>
|
||
|
||
<div class="trans-line hl-purple"><div class="trans-ln">16</div><div class="trans-text">Die Versorgung hier ist gut, besser als</div></div>
|
||
<div class="trans-line hl-purple"><div class="trans-ln">17</div><div class="trans-text">an der Front. Wir bekommen täglich</div></div>
|
||
<div class="trans-line"><div class="trans-ln">18</div><div class="trans-text">Suppe und manchmal sogar Brot mit</div></div>
|
||
<div class="trans-line hl-blue"><div class="trans-ln">19</div><div class="trans-text">Butter. Der Kamerad im Bett neben mir<span class="trans-cursor"></span></div></div>
|
||
<div class="trans-line"><div class="trans-ln">20</div><div class="trans-text">kommt aus Leipzig und erzählt mir</div></div>
|
||
<div class="trans-line"><div class="trans-ln">21</div><div class="trans-text">von seiner Familie. Das gibt Trost.</div></div>
|
||
<div class="trans-line"><div class="trans-ln">22</div><div class="trans-text"> </div></div>
|
||
<div class="trans-line"><div class="trans-ln">23</div><div class="trans-text">Hoffentlich ist der kleine Fritz artig.</div></div>
|
||
<div class="trans-line"><div class="trans-ln">24</div><div class="trans-text" style="color:var(--color-text-muted);font-style:italic;">[unleserlich — 2-3 Zeilen]</div></div>
|
||
|
||
<!-- Page 3 divider (empty) -->
|
||
<div style="display:flex;align-items:center;gap:6px;padding:4px 8px;margin:8px 0 4px;background:var(--sand);border-radius:3px;border:1px dashed var(--color-border);">
|
||
<span style="font-size:7px;font-weight:600;color:var(--color-text-muted);">Seite 3</span>
|
||
<span style="font-size:6px;color:var(--color-text-muted);margin-left:auto;">noch leer</span>
|
||
</div>
|
||
<div style="padding:8px;font-size:8px;color:var(--color-text-muted);font-style:italic;text-align:center;">Klicke hier, um mit Seite 3 zu beginnen</div>
|
||
</div>
|
||
|
||
<div class="status-bar">
|
||
<span>Seite 2 von 3</span>
|
||
<span>24 Zeilen gesamt</span>
|
||
<span style="margin-left:auto;">Oma Inge · Z. 16–17</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>V5 · Multi-page split with page navigator</h4>
|
||
<pre>/* Optimized for multi-page letters (the common case).
|
||
* Page navigator: strip above PDF with page dots, arrow buttons, "Seite N von M" label.
|
||
* - Dot colors: green = fully transcribed, navy = active, gray = empty.
|
||
* - Click dot or arrow to switch PDF page and auto-scroll transcript.
|
||
* Transcript: continuous scroll with [Seitenwechsel] dividers.
|
||
* - Page 1 divider: green tint, checkmark, collapsed to summary line when not active.
|
||
* - Active page divider: blue tint, solid border.
|
||
* - Empty page divider: dashed border, sand bg, "click to start" hint.
|
||
* Progress bar in topbar: Fortschritt N/M, turquoise fill, visible at a glance.
|
||
* Line numbers are global (continuous across pages) so references stay stable.
|
||
* Per-page attribution: status bar shows who transcribed each page.
|
||
* Data model: transcription text uses "---[Seite N]---" markers to delimit pages. */</pre>
|
||
<table class="at"><thead><tr><th>Element</th><th>Value</th><th>Notes</th></tr></thead><tbody>
|
||
<tr class="grp"><td colspan="3">Page navigator</td></tr>
|
||
<tr><td>Strip</td><td>h:22px, bg:white, border-bottom:line, centered</td><td>Above PDF area</td></tr>
|
||
<tr><td>Page dots</td><td>6px circles: green(done), navy(active), gray(empty)</td><td>Click to switch page</td></tr>
|
||
<tr><td>Arrows</td><td>← → text buttons, 8px, muted</td><td>Keyboard: Ctrl+PgUp/PgDn</td></tr>
|
||
<tr class="grp"><td colspan="3">Page dividers in transcript</td></tr>
|
||
<tr><td>Done page</td><td>green-tint bg, checkmark, collapsed summary</td><td>Click to expand and re-edit</td></tr>
|
||
<tr><td>Active page</td><td>blue-tint bg, solid border, "aktiv" label</td><td>Lines below are editable</td></tr>
|
||
<tr><td>Empty page</td><td>sand bg, dashed border, CTA text</td><td>"Klicke hier, um zu beginnen"</td></tr>
|
||
<tr class="grp"><td colspan="3">Progress</td></tr>
|
||
<tr><td>Topbar bar</td><td>60px × 4px, border bg, turquoise fill</td><td>Fraction label: "2/3" in turquoise bold</td></tr>
|
||
</tbody></table>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<!-- ═══ LLM IMPLEMENTATION GUIDE ═══ -->
|
||
<div class="llm">
|
||
<h2>Implementation Guide — Side-by-Side Split Variations</h2>
|
||
|
||
<h3>1. Variation Comparison</h3>
|
||
<table>
|
||
<thead><tr><th>Var.</th><th>Key idea</th><th>Best for</th><th>Complexity</th></tr></thead>
|
||
<tbody>
|
||
<tr><td><strong>V1</strong></td><td>Plain split, synced scroll</td><td>Simplest start, works for all letter types</td><td>Low</td></tr>
|
||
<tr><td><strong>V2</strong></td><td>+ Minimap + comment gutter</td><td>Long letters, power users who want overview</td><td>Medium</td></tr>
|
||
<tr><td><strong>V3</strong></td><td>Paragraph blocks with named sections</td><td>Dividing work ("I'll do section 2")</td><td>Medium</td></tr>
|
||
<tr><td><strong>V4</strong></td><td>+ Inline discussion threads on text</td><td>Debating unclear words/passages collaboratively</td><td>High</td></tr>
|
||
<tr><td><strong>V5</strong></td><td>Multi-page navigator + per-page progress</td><td>Multi-page letters (2-8 pages), task tracking</td><td>Medium</td></tr>
|
||
</tbody>
|
||
</table>
|
||
|
||
<h3>2. Recommended Build Order</h3>
|
||
<ol>
|
||
<li><strong>V1</strong> as the foundation — split layout, scroll sync, toolbar, presence, auto-save. This is the MVP.</li>
|
||
<li><strong>V5</strong> page navigator next — multi-page letters are the common case and V1 alone doesn't address page boundaries well.</li>
|
||
<li><strong>V4</strong> inline threads — the highest-value UX innovation. Merges transcription and discussion workflows.</li>
|
||
<li><strong>V2</strong> minimap + gutter — nice-to-have for long documents, can be toggled on/off in user preferences.</li>
|
||
<li><strong>V3</strong> paragraph blocks — alternative to V1's line-by-line approach. Consider as an opt-in "structured mode" rather than a replacement.</li>
|
||
</ol>
|
||
<p>V1 + V5 together form the complete baseline experience. V4 is the most innovative addition.</p>
|
||
|
||
<h3>3. Composability</h3>
|
||
<p>These variations are <strong>not mutually exclusive</strong>. They can be layered:</p>
|
||
<ul>
|
||
<li>V1 (base split) + V5 (page nav) = most practical combination for real-world use</li>
|
||
<li>V1 + V5 + V4 (threads) = full-featured collaborative transcription</li>
|
||
<li>V1 + V2 (minimap) = power-user mode, togglable via toolbar</li>
|
||
<li>V3 (paragraph mode) is the only one that fundamentally changes the editor — it replaces V1's line-by-line model with block-level editing. Treat as an alternative mode, not an addition.</li>
|
||
</ul>
|
||
|
||
<h3>4. Shared Technical Foundation (all variations)</h3>
|
||
<ul>
|
||
<li><strong>Split container:</strong> New <code>TranscriptionSplitView.svelte</code> component wrapping PDF + editor with a draggable divider. Uses CSS <code>flex</code> with a resizable right panel.</li>
|
||
<li><strong>State management:</strong> <code>transcribeMode: boolean</code> on the document detail page. When active, replaces the PDF-only view with the split view. Bottom panel tabs remain visible.</li>
|
||
<li><strong>Scroll sync:</strong> <code>IntersectionObserver</code> on PDF pages + scroll listener on transcript. Normalized position (0-1) maps between both panels. Debounced 50ms.</li>
|
||
<li><strong>Auto-save:</strong> Debounced 2s <code>PATCH /api/documents/{id}</code> with <code>{ transcription: string }</code>. Save indicator in status bar.</li>
|
||
<li><strong>Presence:</strong> WebSocket at <code>/ws/transcription/{documentId}</code>. Broadcasts: <code>{ userId, displayName, color, cursorLine, status: "editing"|"viewing" }</code>.</li>
|
||
<li><strong>Y.js integration:</strong> CRDT for conflict-free concurrent editing. Y.Text document synced via WebSocket provider.</li>
|
||
</ul>
|
||
|
||
<h3>5. Mobile Strategy (all variations)</h3>
|
||
<p>On screens <768px, the split becomes a <strong>stacked layout</strong>:</p>
|
||
<ul>
|
||
<li>PDF as a 100px fixed-height strip at top with pinch-to-zoom</li>
|
||
<li>Tap PDF strip to expand to 50% viewport height (push transcript down)</li>
|
||
<li>Transcript fills remaining space</li>
|
||
<li>Toolbar collapses to icon-only (Edit/Preview icons, presence dots, save indicator)</li>
|
||
<li>Status bar becomes a single line: save state + active user count</li>
|
||
</ul>
|
||
|
||
<h3>6. Accessibility (all variations)</h3>
|
||
<ul>
|
||
<li>Split panels: <code>role="region"</code> with <code>aria-label="PDF Scan"</code> and <code>aria-label="Transkription"</code></li>
|
||
<li>Resize handle: <code>role="separator"</code> with <code>aria-orientation="vertical"</code>, keyboard-adjustable via arrow keys</li>
|
||
<li>Transcript lines: minimum 16px font (18px in accessibility preference)</li>
|
||
<li>All toolbar buttons: <code>aria-label</code> + keyboard shortcut in <code>title</code></li>
|
||
<li>Save status: <code>aria-live="polite"</code> region</li>
|
||
<li>Presence changes: <code>aria-live="polite"</code> announcements ("Oma Inge hat begonnen zu bearbeiten")</li>
|
||
<li>Focus order: toolbar → transcript editor → status bar. PDF panel is separately focusable for zoom/pan.</li>
|
||
</ul>
|
||
</div>
|
||
|
||
</div>
|
||
</body>
|
||
</html>
|