V1.0
This commit is contained in:
106
html/master.html
Normal file
106
html/master.html
Normal file
@@ -0,0 +1,106 @@
|
||||
<!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">
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="header">
|
||||
<h1>📄 Master Station</h1>
|
||||
<p>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">Warte auf Signatur-Station...</span>
|
||||
</div>
|
||||
|
||||
<div class="upload-section" id="uploadSection">
|
||||
<h2>PDF Dokument auswählen</h2>
|
||||
<p style="margin: 20px 0; color: #666;">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>
|
||||
PDF auswählen
|
||||
</button>
|
||||
<p id="pdfSelectHint" style="margin-top: 15px; color: #856404; font-style: italic; display: block;">
|
||||
⚠️ Bitte warten Sie, bis die Signatur-Station verbunden ist.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div id="statusSection" style="display: none;">
|
||||
|
||||
<div class="status waiting" id="statusMessage">
|
||||
Warte auf Unterschrift von der Signatur-Station...
|
||||
</div>
|
||||
|
||||
<!-- Page Navigation -->
|
||||
<div class="page-navigation" id="pageNavigation" style="display: none;">
|
||||
<button class="nav-button" id="prevPageBtn" onclick="changePage(-1)">◀ Zurück</button>
|
||||
<span id="pageInfo">Seite 1 von 1</span>
|
||||
<button class="nav-button" id="nextPageBtn" onclick="changePage(1)">Weiter ▶</button>
|
||||
</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>
|
||||
<img id="signatureImage" src="" alt="Unterschrift">
|
||||
<div class="resize-handle" id="resizeHandle"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="signature-controls" id="signatureControls">
|
||||
<p><strong>📝 Unterschrift positionieren:</strong> Ziehe die Unterschrift an die gewünschte Position im PDF. Nutze den Griff rechts unten zum Skalieren.</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>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()">
|
||||
Nur aktuelle Seite (<span id="currentPageNum">1</span>)
|
||||
</label>
|
||||
<label style="cursor: pointer;">
|
||||
<input type="checkbox" id="allPages" onchange="updatePageSelection()">
|
||||
Alle Seiten
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display: flex; gap: 15px; margin-top: 15px;">
|
||||
<button class="upload-button" onclick="removeSignatureOverlay()" style="flex: 1; background: #dc3545;">
|
||||
🗑️ Unterschrift entfernen
|
||||
</button>
|
||||
<button class="upload-button" id="placeSignatureButton" style="flex: 2; background: linear-gradient(135deg, #28a745 0%, #20c997 100%);">
|
||||
✓ Unterschrift 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>
|
||||
⬇ Unterschriebene PDF herunterladen
|
||||
</button>
|
||||
<button class="discard-button" id="discardButton">
|
||||
🗑️ Verwerfen
|
||||
</button>
|
||||
</div>
|
||||
<p id="downloadHint" style="margin-top: 10px; color: #666; display: none;">
|
||||
PDF wurde erstellt und ist bereit zum Download
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="../js/master.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
73
html/signature.html
Normal file
73
html/signature.html
Normal file
@@ -0,0 +1,73 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Unterschrift - PDF Signatur</title>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.min.js"></script>
|
||||
<link rel="stylesheet" href="../css/signature.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="header">
|
||||
<h1>✍️ Unterschriften-Station</h1>
|
||||
<p>Bereit für Unterschriften</p>
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
<div id="loadingSection" class="loading">
|
||||
<div class="spinner"></div>
|
||||
<p>Verbinde mit Server...</p>
|
||||
</div>
|
||||
|
||||
<div id="waitingSection" class="waiting-message" style="display: none;">
|
||||
<div class="icon">📄</div>
|
||||
<h2>Warte auf PDF...</h2>
|
||||
<p>Bereit zum Unterschreiben. Lade ein PDF auf der Master-Station hoch.</p>
|
||||
</div>
|
||||
|
||||
<div id="signatureSection" style="display: none;">
|
||||
<div class="pdf-display" id="pdfDisplay">
|
||||
<h3>📄 Zu unterschreibendes Dokument</h3>
|
||||
<div id="pageInfoSignature" style="margin: 10px 0; font-weight: bold; color: #11998e; font-size: 1.1em;">
|
||||
Seite 1 von 1
|
||||
</div>
|
||||
<div id="pdfPagesContainer" style="max-height: 60vh; overflow-y: auto; border: 2px solid #11998e; border-radius: 8px; padding: 10px; background: white;">
|
||||
<!-- Pages will be inserted here dynamically -->
|
||||
</div>
|
||||
<p style="margin-top: 15px; color: #666; font-size: 0.9em;">Scrolle nach unten um alle Seiten zu sehen</p>
|
||||
</div>
|
||||
|
||||
<div class="info-box">
|
||||
<strong>📝 Anleitung:</strong> Zeichnen Sie Ihre Unterschrift mit dem Finger oder der Maus im Feld unten. Drücken Sie dann auf "Unterschrift senden".
|
||||
</div>
|
||||
|
||||
<div class="signature-section">
|
||||
<h3 style="margin-bottom: 15px;">Unterschriftsfeld:</h3>
|
||||
<canvas id="signatureCanvas" class="signature-pad" width="740" height="300"></canvas>
|
||||
</div>
|
||||
|
||||
<div class="controls">
|
||||
<button class="button button-clear" id="clearButton">
|
||||
🗑️ Löschen
|
||||
</button>
|
||||
<button class="button button-submit" id="submitButton" disabled>
|
||||
✓ Unterschrift senden
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="success-message" id="successMessage">
|
||||
<h2>✅ Erfolgreich!</h2>
|
||||
<p>Ihre Unterschrift wurde erfolgreich übertragen.</p>
|
||||
</div>
|
||||
|
||||
<div class="error-message" id="errorMessage">
|
||||
❌ Fehler beim Senden der Unterschrift. Bitte versuchen Sie es erneut.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="../js/signature.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user