80 lines
3.6 KiB
HTML
80 lines
3.6 KiB
HTML
<!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 id="alreadyConnectedWarning" class="already-connected-warning" style="display: none;">
|
|
<div class="warning-icon">⚠️</div>
|
|
<div class="warning-text">
|
|
<strong>Hinweis:</strong> Bereits eine andere Signatur-Station ist mit dem Master verbunden.
|
|
Diese Station kann nicht verwendet werden, solange die andere Station aktiv ist.
|
|
</div>
|
|
</div>
|
|
</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> |