Add Datum und anpassung der positzionierung

.dockerignore

@@ -2,7 +2,10 @@ node_modules
 npm-debug.log
 .git
 .gitignore
-README.md
 .env
+.env.local
+README.md
+.dockerignore
 *.md
 .DS_Store
+Thumbs.db

build.sh

@@ -0,0 +1,16 @@
+#!/bin/bash
+# Build script that ignores the harmless metadata file error
+
+set -e
+
+echo "Building Docker image..."
+docker compose build 2>&1 | grep -v "no such file or directory" || true
+
+# Check if build was successful by checking if image exists
+if docker images | grep -q "docusighn-pdf-signature"; then
+    echo "✓ Build successful!"
+    exit 0
+else
+    echo "✗ Build failed!"
+    exit 1
+fi

css/master.css

@@ -299,32 +299,43 @@ body {
     box-shadow: 0 4px 12px rgba(0,0,0,0.2);
     display: none;
     z-index: 10;
+    flex-direction: column;
+    align-items: flex-start;
+    min-width: 200px;
 }
 
 .signature-overlay.show {
-    display: block;
+    display: flex;
+}
+
+.signature-overlay .text-overlay-content {
+    order: 1;
+    font-size: 14px;
+    color: #333;
+    background: rgba(255, 255, 255, 0.95);
+    padding: 5px 10px;
+    border-radius: 4px;
+    pointer-events: none;
+    margin-bottom: 5px;
+    max-width: 100%;
+    word-wrap: break-word;
+    width: 100%;
+    box-sizing: border-box;
+}
+
+.signature-overlay .signature-image-container {
+    order: 2;
+    width: 100%;
+    flex-shrink: 0;
 }
 
 .signature-overlay img {
     display: block;
     max-width: 300px;
+    width: auto;
     height: auto;
     pointer-events: none;
-}
-
-.signature-overlay .text-overlay-content {
-    position: absolute;
-    top: 5px;
-    left: 5px;
-    font-size: 14px;
-    color: #333;
-    background: rgba(255, 255, 255, 0.9);
-    padding: 5px 10px;
-    border-radius: 4px;
-    pointer-events: none;
-    max-width: calc(100% - 20px);
-    word-wrap: break-word;
-    z-index: 11;
+    margin: 0 auto;
 }
 
 .signature-overlay .handle {
@@ -352,6 +363,8 @@ body {
     background: #667eea;
     cursor: nwse-resize;
     border-radius: 3px;
+    z-index: 12;
+    pointer-events: auto;
 }
 
 .text-input-section {

docker-compose.yml

@@ -1,10 +1,9 @@
-version: '3.8'
-
 services:
   pdf-signature:
     build:
       context: .
       dockerfile: Dockerfile
+    image: docusighn-pdf-signature:latest
     container_name: pdf-signature-system
     ports:
       - "8080:8080"

html/master.html

@@ -73,7 +73,9 @@
                     <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>
-                        <img id="signatureImage" src="" alt="Unterschrift">
+                        <div class="signature-image-container">
+                            <img id="signatureImage" src="" alt="Unterschrift">
+                        </div>
                         <div class="resize-handle" id="resizeHandle"></div>
                     </div>
                 </div>

js/master.js

@@ -818,34 +818,32 @@ async function addSignatureToPdf() {
             const sigWidth = overlayWidth * scaleX;
             const sigHeight = sigWidth * (signatureImage.height / signatureImage.width);
 
-            // Convert position to PDF coordinates (bottom-left origin)
+            // Convert overlay position to PDF coordinates (bottom-left origin)
             const x = overlayLeft * scaleX;
-            const y = height - (overlayTop * scaleY) - sigHeight;
+            const overlayTopInPdf = height - (overlayTop * scaleY);
+            
+            // Calculate text dimensions if text exists
+            let textHeight = 0;
+            let textSpacing = 0;
+            if (textOverlayText) {
+                textHeight = textFontSize * scaleY;
+                textSpacing = 5 * scaleY; // 5px spacing between text and signature
+            }
+            
+            // Position signature lower to make room for text above
+            // Signature y position: overlay top - text height - spacing - signature height
+            const y = overlayTopInPdf - textHeight - textSpacing - sigHeight;
 
             console.log('PDF Position:', x, y, 'Größe:', sigWidth, 'x', sigHeight);
+            console.log('Text Höhe:', textHeight, 'Abstand:', textSpacing);
 
-            // Add signature to page
-            page.drawImage(signatureImage, {
-                x: x,
-                y: y,
-                width: sigWidth,
-                height: sigHeight,
-            });
-
-            console.log('✓ Unterschrift zu Seite', pageNum, 'hinzugefügt');
-            
-            // Add text overlay if it exists (text is part of signature overlay, positioned top-left)
+            // Add text FIRST (if exists) - positioned at top of overlay
             if (textOverlayText) {
-                // Text is positioned relative to signature overlay (top-left)
-                // Calculate text position: overlay left position + small offset, overlay top position - small offset
                 const textOffsetX = 5 * scaleX; // 5px offset from left
-                const textOffsetY = -5 * scaleY; // 5px offset from top (negative because PDF y is bottom-up)
                 const textX = x + textOffsetX;
-                // overlayTop is from top of canvas, convert to PDF coordinates (bottom-up)
-                const overlayTopInPdf = height - (overlayTop * scaleY);
-                const textY = overlayTopInPdf + textOffsetY; // Top of overlay - small offset
+                const textY = overlayTopInPdf - textHeight; // At top of overlay
                 
-                // Add text to page
+                // Add text to page FIRST (drawn first = appears behind signature)
                 page.drawText(textOverlayText, {
                     x: textX,
                     y: textY,
@@ -853,8 +851,18 @@ async function addSignatureToPdf() {
                     color: rgb(0, 0, 0),
                 });
                 
-                console.log('✓ Text zu Seite', pageNum, 'hinzugefügt');
+                console.log('✓ Text zu Seite', pageNum, 'hinzugefügt (oberhalb der Unterschrift)');
             }
+
+            // Add signature to page AFTER text (positioned lower to make room for text)
+            page.drawImage(signatureImage, {
+                x: x,
+                y: y,
+                width: sigWidth,
+                height: sigHeight,
+            });
+
+            console.log('✓ Unterschrift zu Seite', pageNum, 'hinzugefügt (unterhalb des Textes)');
         }
 
         // Save PDF

master.html

@@ -1,97 +0,0 @@
-<!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="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="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">
-                <button class="upload-button" onclick="document.getElementById('pdfInput').click()">
-                    PDF auswählen
-                </button>
-            </div>
-
-            <div id="statusSection" style="display: none;">
-                <div class="connection-status">
-                    <span class="status-indicator connected" id="statusIndicator"></span>
-                    <span id="connectionText">Verbunden mit Signatur-Station</span>
-                </div>
-
-                <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;">
-                    <button class="download-button" id="downloadButton" disabled>
-                        ⬇ Unterschriebene PDF herunterladen
-                    </button>
-                    <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="master.js"></script>
-</body>
-</html>