135 lines
8.2 KiB
HTML
135 lines
8.2 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Master - PDF Unterschrift System</title>
|
||
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.min.js"></script>
|
||
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf-lib/1.17.1/pdf-lib.min.js"></script>
|
||
<link rel="stylesheet" href="../css/master.css">
|
||
<script src="../js/i18n.js"></script>
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
<div class="language-switcher">
|
||
<button id="langSwitch" class="lang-button" onclick="toggleLanguage()">
|
||
<span id="langDisplay">DE</span>
|
||
</button>
|
||
</div>
|
||
<div class="header">
|
||
<h1 data-i18n="master.title">📄 Master Station</h1>
|
||
<p data-i18n="master.subtitle">PDF hochladen und Unterschrift empfangen</p>
|
||
</div>
|
||
|
||
<div class="content">
|
||
<div class="connection-status" id="connectionStatus" style="display: none;">
|
||
<span class="status-indicator disconnected" id="statusIndicator"></span>
|
||
<span id="connectionText" data-i18n="master.waitingForStation">Warte auf Signatur-Station...</span>
|
||
</div>
|
||
|
||
<div class="upload-section" id="uploadSection">
|
||
<h2 data-i18n="master.selectPdf">PDF Dokument auswählen</h2>
|
||
<p style="margin: 20px 0; color: #666;" data-i18n="master.selectPdfDesc">Wähle eine PDF-Datei aus, die unterschrieben werden soll</p>
|
||
<input type="file" id="pdfInput" accept=".pdf" disabled>
|
||
<button class="upload-button" id="pdfSelectButton" onclick="document.getElementById('pdfInput').click()" disabled data-i18n="master.selectPdfButton">
|
||
PDF auswählen
|
||
</button>
|
||
<p id="pdfSelectHint" style="margin-top: 15px; color: #856404; font-style: italic; display: block;" data-i18n="master.waitForConnection">
|
||
⚠️ Bitte warten Sie, bis die Signatur-Station verbunden ist.
|
||
</p>
|
||
</div>
|
||
|
||
<div id="statusSection" style="display: none;">
|
||
|
||
<div class="status waiting" id="statusMessage" data-i18n="master.waitingForSignature">
|
||
Warte auf Unterschrift von der Signatur-Station...
|
||
</div>
|
||
|
||
<div class="text-input-section" id="textInputSection" style="display: none;">
|
||
<label for="textInput" style="display: block; margin-bottom: 10px; font-weight: 500; color: #667eea;" data-i18n="master.textOverlayLabel">
|
||
📝 Text für Unterschrifts-Overlay (wird oben links angezeigt):
|
||
</label>
|
||
<input type="text" id="textInput"
|
||
style="width: 100%; padding: 12px; border: 2px solid #667eea; border-radius: 8px; font-size: 1em;">
|
||
</div>
|
||
|
||
<!-- Page Navigation -->
|
||
<div class="page-navigation" id="pageNavigation" style="display: none;">
|
||
<button class="nav-button" id="prevPageBtn" onclick="changePage(-1)" data-i18n="master.prevPage">◀ Zurück</button>
|
||
<span id="pageInfo" data-i18n="master.pageInfo">Seite 1 von 1</span>
|
||
<button class="nav-button" id="nextPageBtn" onclick="changePage(1)" data-i18n="master.nextPage">Weiter ▶</button>
|
||
<div class="page-jump">
|
||
<input type="number" id="jumpToPageInput" min="1" max="1" data-i18n-placeholder="master.pagePlaceholder" placeholder="Seite" style="width: 60px; padding: 5px; border: 1px solid #667eea; border-radius: 4px; text-align: center;">
|
||
<button class="nav-button" id="jumpToPageBtn" onclick="jumpToPage()" data-i18n="master.jumpToPage">Springe zu Seite</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="signature-placeholder" id="signaturePlaceholder" style="display: none;">
|
||
<div class="placeholder-content" id="placeholderContent">
|
||
<span class="placeholder-icon">✍️</span>
|
||
<span class="placeholder-text" data-i18n="master.signaturePlaceholder">Empfangene Unterschrift wird hier angezeigt</span>
|
||
</div>
|
||
<img id="placeholderSignatureImage" src="" alt="Unterschrift" style="display: none;">
|
||
</div>
|
||
|
||
<div class="pdf-preview" id="pdfPreview">
|
||
<div id="pdfCanvasContainer">
|
||
<canvas id="pdfCanvas"></canvas>
|
||
</div>
|
||
<div class="signature-overlay" id="signatureOverlay">
|
||
<div class="handle" onclick="removeSignatureOverlay()" title="Unterschrift entfernen">×</div>
|
||
<div class="text-overlay-content" id="textOverlayContent" style="display: none;"></div>
|
||
<div class="signature-image-container">
|
||
<img id="signatureImage" src="" alt="Unterschrift">
|
||
</div>
|
||
<div class="resize-handle" id="resizeHandle"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="signature-controls" id="signatureControls">
|
||
<p><strong data-i18n="master.positionSignature">📝 Unterschrift positionieren:</strong> <span data-i18n="master.positionSignatureDesc">Ziehe die Unterschrift an die gewünschte Position im PDF. Nutze den Griff rechts unten zum Skalieren.</span></p>
|
||
|
||
<div class="page-selector" id="pageSelector" style="display: none; margin: 15px 0; padding: 15px; background: #f0f2ff; border-radius: 8px;">
|
||
<p style="margin-bottom: 10px;"><strong data-i18n="master.whichPages">Auf welchen Seiten platzieren?</strong></p>
|
||
<div style="display: flex; gap: 10px; flex-wrap: wrap;">
|
||
<label style="cursor: pointer;">
|
||
<input type="checkbox" id="currentPageOnly" checked onchange="updatePageSelection()">
|
||
<span data-i18n="master.currentPageOnly">Nur aktuelle Seite</span> (<span id="currentPageNum">1</span>)
|
||
</label>
|
||
<label style="cursor: pointer;">
|
||
<input type="checkbox" id="allPages" onchange="updatePageSelection()">
|
||
<span data-i18n="master.allPages">Alle Seiten</span>
|
||
</label>
|
||
</div>
|
||
</div>
|
||
|
||
<div style="display: flex; gap: 15px; margin-top: 15px;">
|
||
<button class="upload-button" onclick="removeSignatureOverlay()" style="flex: 1; background: #dc3545;" data-i18n="master.removeSignature">
|
||
🗑️ Unterschrift entfernen
|
||
</button>
|
||
<button class="upload-button" id="placeSignatureButton" style="flex: 2; background: linear-gradient(135deg, #28a745 0%, #20c997 100%);" data-i18n="master.placeSignature">
|
||
✓ Unterschrift & Text platzieren & PDF erstellen
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div style="text-align: center;">
|
||
<div style="display: flex; gap: 15px; justify-content: center; flex-wrap: wrap;">
|
||
<button class="download-button" id="downloadButton" disabled data-i18n="master.downloadPdf">
|
||
⬇ Unterschriebene PDF herunterladen
|
||
</button>
|
||
<button class="discard-button" id="discardButton" data-i18n="master.discard">
|
||
🗑️ Verwerfen
|
||
</button>
|
||
</div>
|
||
<p id="downloadHint" style="margin-top: 10px; color: #666; display: none;" data-i18n="master.downloadReady">
|
||
PDF wurde erstellt und ist bereit zum Download
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script src="../js/master.js"></script>
|
||
</body>
|
||
</html> |