95 lines
3.8 KiB
HTML
95 lines
3.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Template Builder</title>
|
|
<link rel="stylesheet" href="./styles.css">
|
|
</head>
|
|
<body>
|
|
<header class="header">
|
|
<div class="header-left">
|
|
<span class="app-name">Template Builder</span>
|
|
<span id="filename-display" class="filename"></span>
|
|
</div>
|
|
<div class="toolbar">
|
|
<input type="file" id="file-input" accept=".pdf" hidden>
|
|
<button id="upload-btn" class="btn">Upload PDF</button>
|
|
<button id="draw-btn" class="btn" disabled>Draw Field</button>
|
|
<button id="save-btn" class="btn btn-primary" disabled>Save Template</button>
|
|
</div>
|
|
</header>
|
|
|
|
<div class="app">
|
|
<aside class="sidebar">
|
|
<div class="sidebar-header">
|
|
<span class="sidebar-title">Fields</span>
|
|
<span id="field-count" class="field-count">—</span>
|
|
</div>
|
|
<div id="field-list" class="field-list">
|
|
<p class="field-empty">Upload a PDF to begin.</p>
|
|
</div>
|
|
</aside>
|
|
|
|
<main class="viewer">
|
|
<div class="pagination">
|
|
<button id="prev-page" class="btn btn-icon" disabled>←</button>
|
|
<span id="page-info" class="page-info">—</span>
|
|
<button id="next-page" class="btn btn-icon" disabled>→</button>
|
|
</div>
|
|
<div class="canvas-container" id="canvas-container">
|
|
<div id="upload-prompt" class="upload-prompt">
|
|
<svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>
|
|
<p>Upload a PDF to get started</p>
|
|
</div>
|
|
<div class="canvases" id="canvases">
|
|
<canvas id="pdf-canvas"></canvas>
|
|
<canvas id="overlay-canvas"></canvas>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
|
|
<!-- Key assignment panel -->
|
|
<div id="key-panel" class="key-panel hidden">
|
|
<div class="key-panel-inner">
|
|
<div class="key-panel-meta">
|
|
<span class="kp-label">Field</span>
|
|
<span id="kp-field-name" class="kp-field-name"></span>
|
|
<span id="kp-type-badge" class="kp-badge"></span>
|
|
</div>
|
|
<div id="kp-name-row" class="kp-row hidden">
|
|
<label for="kp-field-id">Field Identifier</label>
|
|
<input type="text" id="kp-field-id" class="kp-input" placeholder="e.g. company_name" autocomplete="off">
|
|
</div>
|
|
<div class="kp-row">
|
|
<label for="kp-json-key">JSON Key Path</label>
|
|
<input type="text" id="kp-json-key" class="kp-input" placeholder="e.g. information.company.name" autocomplete="off">
|
|
</div>
|
|
<div class="kp-row">
|
|
<label for="kp-label">Label / Titel</label>
|
|
<input type="text" id="kp-label" class="kp-input" placeholder="z.B. Robustheit & Resilienz" autocomplete="off">
|
|
</div>
|
|
<div class="kp-row">
|
|
<label for="kp-antwort-format">Antwort-Zuordnung</label>
|
|
<select id="kp-antwort-format" class="kp-input kp-select">
|
|
<option value="einzelfrage">1 Feld = 1 Frage</option>
|
|
<option value="mehrfachfrage_ein_antwortfeld">1 Feld = mehrere Fragen / eine gemeinsame Antwort</option>
|
|
</select>
|
|
</div>
|
|
<div class="kp-row">
|
|
<label for="kp-fragen">Fragen (eine pro Zeile)</label>
|
|
<textarea id="kp-fragen" class="kp-input kp-textarea" placeholder="Frage 1 Frage 2 Frage 3"></textarea>
|
|
</div>
|
|
<div class="kp-actions">
|
|
<button id="kp-assign" class="btn btn-primary">Assign</button>
|
|
<button id="kp-cancel" class="btn">Cancel</button>
|
|
<button id="kp-remove" class="btn btn-danger" style="display:none">Remove</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script type="module" src="./frontend.ts"></script>
|
|
</body>
|
|
</html>
|