reptil1990/DocuSighn
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

2-Sprachen (DE,EN)

Browse Source
This commit is contained in:
Carsten Graf
2026-01-16 14:45:22 +00:00
parent 48ac8e97bc
commit 6fca4087da
7 changed files with 414 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
html/master.html
View File

@@ -7,40 +7,46 @@
<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>📄 Master Station</h1>
<p>PDF hochladen und Unterschrift empfangen</p>
<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">Warte auf Signatur-Station...</span>
<span id="connectionText" data-i18n="master.waitingForStation">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>
<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>
<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;">
<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">
<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;">
<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"
@@ -49,19 +55,19 @@
<!-- 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>
<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" 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()">Springe zu Seite</button>
<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">Empfangene Unterschrift wird hier angezeigt</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>
@@ -81,27 +87,27 @@
</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>
<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>Auf welchen Seiten platzieren?</strong></p>
<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()">
Nur aktuelle Seite (<span id="currentPageNum">1</span>)
<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()">
Alle Seiten
<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;">
<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%);">
<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>
@@ -109,14 +115,14 @@
<div style="text-align: center;">
<div style="display: flex; gap: 15px; justify-content: center; flex-wrap: wrap;">
<button class="download-button" id="downloadButton" disabled>
<button class="download-button" id="downloadButton" disabled data-i18n="master.downloadPdf">
⬇ Unterschriebene PDF herunterladen
</button>
<button class="discard-button" id="discardButton">
<button class="discard-button" id="discardButton" data-i18n="master.discard">
🗑️ Verwerfen
</button>
</div>
<p id="downloadHint" style="margin-top: 10px; color: #666; display: none;">
<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>