# PDF Unterschrift System

Ein Zwei-Seiten-System für digitale PDF-Unterschriften mit Echtzeit-Synchronisation.

## 🎯 Funktionen

- **Master-Seite (PC)**: PDF hochladen und unterschriebene PDF herunterladen
- **Signatur-Seite (Tablet/Smartphone)**: Permanent offen, zeigt automatisch jede neue PDF mit Vorschau
- **PDF-Vorschau**: Echte PDF-Anzeige auf beiden Seiten mit pdf.js
- **Verschiebbare Unterschrift**: Unterschrift per Drag & Drop positionieren
- **Skalierbare Unterschrift**: Größe der Unterschrift anpassen
- **Automatische Synchronisation**: Keine Session-IDs, keine QR-Codes nötig
- **Echtzeit-Übertragung**: WebSocket-basierte direkte Kommunikation
- **Mehrfachnutzung**: Signatur-Seite einmal öffnen, beliebig viele PDFs unterschreiben

## 📋 Voraussetzungen

- Node.js (Version 14 oder höher)
- Ein moderner Webbrowser (Chrome, Firefox, Safari, Edge)

## 🚀 Installation & Start

### 1. Dependencies installieren

```bash
npm install
```

### 2. Server starten

```bash
npm start
```

oder

```bash
node server.js
```

Der Server läuft nun auf `http://localhost:8080`

## 💻 Verwendung

### Schritt 1: Signatur-Seite öffnen und offen lassen (Tablet/Smartphone)

1. Öffne im Browser: `http://localhost:8080/signature.html`
2. **WICHTIG**: Lasse diese Seite permanent geöffnet!
3. Die Seite zeigt "Warte auf PDF..." - das ist normal

### Schritt 2: Master-Seite öffnen (PC)

1. Öffne im Browser: `http://localhost:8080/master.html`
2. Klicke auf "PDF auswählen" und wähle eine PDF-Datei aus

### Schritt 3: Automatische Anzeige

1. Die PDF wird **automatisch** auf der Signatur-Seite angezeigt
2. Du siehst eine **echte Vorschau** des PDFs
3. Keine QR-Codes, keine Links - alles passiert automatisch!

### Schritt 4: Unterschreiben

1. Auf der Signatur-Seite: Zeichne deine Unterschrift
2. Klicke auf "Unterschrift senden"
3. Die Unterschrift erscheint automatisch auf der Master-Seite

### Schritt 5: Unterschrift positionieren

1. Auf der Master-Seite: Die Unterschrift erscheint als **verschiebbare Box** über dem PDF
2. **Ziehe** die Unterschrift an die gewünschte Position
3. **Skaliere** die Unterschrift mit dem Griff rechts unten
4. **Optional**: Entferne die Unterschrift mit dem × falls nötig (zum Neuzeichnen)
5. **Klicke auf "Unterschrift platzieren & PDF erstellen"**
6. Die Unterschrift wird ins PDF eingefügt und die finale Version wird angezeigt

### Schritt 6: PDF herunterladen

- Auf der Master-Seite: Klicke "Unterschriebene PDF herunterladen"
- Die PDF wird mit der Unterschrift an der gewählten Position gespeichert

### Für die nächste PDF:

- Lade einfach eine neue PDF auf der Master-Seite hoch
- Sie wird automatisch auf der (noch offenen) Signatur-Seite angezeigt
- Unterschreiben → Positionieren → Platzieren → Download
- **Keine neue Session nötig!**

## 🌐 Netzwerk-Zugriff

### Für lokale Nutzung:
- Alle Geräte müssen im selben Netzwerk sein
- Verwende die IP-Adresse deines PCs statt `localhost`

### IP-Adresse finden:

**Windows:**
```bash
ipconfig
```
(Suche nach "IPv4-Adresse")

**Mac/Linux:**
```bash
ifconfig
```
oder
```bash
ip addr show
```

Dann verwende: `http://[DEINE-IP]:8080/master.html`

## 📁 Dateien

```
pdf-signature-system/
├── master.html      # Master-Seite (PDF hochladen)
├── signature.html   # Signatur-Seite (unterschreiben)
├── server.js        # WebSocket Server
├── package.json     # Node.js Dependencies
└── README.md        # Diese Datei
```

## 🔧 Technische Details

### Verwendete Technologien:
- **Frontend**: HTML5, CSS3, JavaScript
- **PDF-Vorschau**: PDF.js (Mozilla)
- **PDF-Verarbeitung**: PDF-Lib (Client-seitig)
- **Kommunikation**: WebSockets
- **Server**: Node.js mit `ws` Package
- **Interaktivität**: Drag & Drop, Resize Handles

### Architektur:
1. Signatur-Seite öffnen und permanent offen lassen
2. Master-Seite lädt PDF hoch
3. WebSocket-Server leitet PDF direkt an Signatur-Seite weiter
4. Unterschrift wird über WebSocket zurück an Master gesendet
5. Master-Seite fügt Unterschrift ins PDF ein
6. Für nächste PDF: Einfach neue PDF hochladen - alles andere bleibt wie es ist!

## 🛠️ Anpassungen

### Standard-Position der Unterschrift ändern:

In `master.html`, Zeile ~20:
```javascript
let signaturePos = { x: 0.7, y: 0.1 }; // x: 0-1 (links-rechts), y: 0-1 (oben-unten)
```

### Standard-Größe der Unterschrift ändern:

Zeile ~21:
```javascript
let signatureScale = 0.3;  // 0.3 = 30% der PDF-Breite
```

### Port ändern:

In `server.js`, Zeile ~158:
```javascript
const PORT = 8080;  // Ändere auf gewünschten Port
```

Dann auch in beiden HTML-Dateien die WebSocket-URL anpassen.

## ❗ Troubleshooting

### "WebSocket Verbindung fehlgeschlagen"
- Stelle sicher, dass der Server läuft
- Prüfe ob Port 8080 verfügbar ist
- Bei Firewall: Erlaube Port 8080

### "Warte auf PDF..." bleibt stehen
- Stelle sicher, dass beide Seiten mit dem Server verbunden sind
- Prüfe Browser-Konsole auf Fehlermeldungen
- Server neustarten und beide Seiten neu laden

### PDF-Vorschau wird nicht angezeigt
- Stelle sicher, dass pdf.js korrekt geladen wurde (siehe Browser-Konsole)
- Versuche eine andere PDF-Datei
- Browser-Cache leeren und Seite neu laden

### Unterschrift lässt sich nicht verschieben
- Stelle sicher, dass die Unterschrift vollständig geladen ist
- Klicke direkt auf die Unterschrift (nicht auf die Griffe)
- Browser neu laden

### Unterschrift wird nicht angezeigt
- Prüfe Browser-Konsole auf Fehlermeldungen
- Stelle sicher, dass beide Seiten verbunden sind
- Server neustarten

### PDF-Download funktioniert nicht
- Warte bis Status "Unterschrift erhalten" angezeigt wird
- Prüfe ob PDF-Lib korrekt geladen wurde
- Browser-Cache leeren

## 🔒 Sicherheitshinweise

⚠️ **Wichtig**: Dieses System ist für den lokalen Gebrauch gedacht!

Für den Produktiveinsatz beachten:
- HTTPS verwenden (WSS statt WS)
- Authentifizierung implementieren
- Session-Timeouts einrichten
- Input-Validierung verstärken
- Rate-Limiting hinzufügen

## 📝 Lizenz

MIT License - Frei verwendbar für private und kommerzielle Zwecke

## 🤝 Support

Bei Fragen oder Problemen:
1. Prüfe die Konsole (F12 in Browser)
2. Stelle sicher, dass Node.js installiert ist
3. Verifiziere Netzwerk-Verbindung zwischen Geräten

---

Viel Erfolg mit dem PDF Unterschrift System! ✍️📄