feat: Add WiFi QR code generation with dedicated UI fields and dynamic text display

README.md

@@ -2,6 +2,18 @@
 
 Ein einfacher QR-Code-Generator, der vollständig im Browser läuft. Keine Daten werden an externe Server gesendet.
 
+## Features
+
+- ✅ Vollständig clientseitig (keine Server-Kommunikation)
+- ✅ URL-Parameter für alle Einstellungen
+- ✅ Anpassbare Größen und Farben
+- ✅ Verschiedene Fehlerkorrektur-Level
+- ✅ Download-Funktion
+- ✅ Responsive Design
+- ✅ **WiFi QR-Code Unterstützung mit eigener UI**
+- ✅ **Dynamische Klartext-Anzeige**
+- ✅ **Automatische QR-Code-Generierung**
+
 ## Docker Setup
 
 ### Mit Docker Compose (empfohlen)
@@ -32,11 +44,29 @@ docker rm qr-generator
 
 Nach dem Start ist die Anwendung unter `http://localhost:8080` erreichbar.
 
+### Normale QR-Codes
+
+Geben Sie einfach Text oder URLs in das erste Eingabefeld ein. Der QR-Code wird automatisch generiert.
+
+### WiFi QR-Codes
+
+Die App bietet spezielle Eingabefelder für WiFi-Daten:
+
+1. **WiFi SSID:** Geben Sie den Namen Ihres WLAN-Netzwerks ein
+2. **WiFi Password:** Geben Sie das WLAN-Passwort ein
+3. **Automatische Generierung:** Der QR-Code wird im korrekten WiFi-Format erstellt
+4. **Klartext-Anzeige:** Das Textfeld zeigt den generierten WiFi-Code an
+
+**Verschlüsselung:** Fest eingestellt auf WPA/WPA2  
+**Hidden Network:** Standardmäßig auf false (nicht versteckt)
+
 ### URL-Parameter
 
 Die Anwendung unterstützt folgende URL-Parameter:
 
 - `text` - Text oder URL für den QR-Code
+- `ssid` - WiFi SSID
+- `password` - WiFi Passwort
 - `size` - Größe (128, 256, 512, 1024)
 - `errorCorrection` - Fehlerkorrektur (L, M, Q, H)
 - `foreground` - Vordergrundfarbe (Hex-Code)
@@ -44,64 +74,52 @@ Die Anwendung unterstützt folgende URL-Parameter:
 
 ### Beispiele
 
+**Normale QR-Codes:**
 ```
 http://localhost:8080/?text=Hello%20World
 http://localhost:8080/?text=Test&size=512&errorCorrection=H
 http://localhost:8080/?text=Colored&foreground=%23ff0000&background=%23ffff00
 ```
 
-## WiFi QR-Codes erstellen
+**WiFi QR-Codes:**
-
-Die App unterstützt das Erstellen von WiFi QR-Codes, die automatisch von Smartphones erkannt werden.
-
-### Format:
 ```
-WIFI:S:<SSID>;T:<Verschlüsselung>;P:<Passwort>;H:<Versteckt>;;
+http://localhost:8080/?ssid=MeinWLAN&password=MeinPasswort123
+http://localhost:8080/?ssid=OffenesWLAN
 ```
 
-### Parameter:
+## WiFi QR-Code Format
-- **S** = SSID (Netzwerkname)
-- **T** = Typ der Verschlüsselung (WPA, WEP, nopass)
-- **P** = Passwort
-- **H** = Versteckt (true/false) - optional
 
-### Beispiele:
+Die App generiert automatisch QR-Codes im Standard-WiFi-Format:
 
-**WPA/WPA2 Netzwerk:**
+### WPA/WPA2 Netzwerk:
 ```
-WIFI:S:MeinWLAN;T:WPA;P:MeinPasswort123;;
+WIFI:S:<SSID>;T:WPA;P:<Passwort>;;
 ```
 
-**WEP Netzwerk:**
+### Offenes Netzwerk (ohne Passwort):
 ```
-WIFI:S:MeinWLAN;T:WEP;P:1234567890;;
+WIFI:S:<SSID>;T:nopass;;
-```
-
-**Offenes Netzwerk (ohne Passwort):**
-```
-WIFI:S:MeinWLAN;T:nopass;;
-```
-
-**Verstecktes Netzwerk:**
-```
-WIFI:S:MeinWLAN;T:WPA;P:MeinPasswort123;H:true;;
 ```
 
 ### Verwendung:
-1. Kopieren Sie einen der obigen Texte
+1. Füllen Sie die WiFi-Felder aus
-2. Ersetzen Sie die Werte durch Ihre eigenen WiFi-Daten
+2. Der QR-Code wird automatisch generiert
-3. Fügen Sie den Text in das Eingabefeld ein
+3. Das Textfeld zeigt den generierten Code an
-4. Der QR-Code wird automatisch generiert
+4. Scannen Sie ihn mit einem Smartphone
-5. Scannen Sie ihn mit einem Smartphone
 
 Das Smartphone erkennt automatisch, dass es sich um WiFi-Daten handelt und bietet an, sich mit dem Netzwerk zu verbinden!
 
-## Features
+## Besondere Funktionen
 
-- ✅ Vollständig clientseitig (keine Server-Kommunikation)
+### Dynamische Klartext-Anzeige
-- ✅ URL-Parameter für alle Einstellungen
+- Das Textfeld zeigt immer den aktuellen Inhalt des QR-Codes an
-- ✅ Anpassbare Größen und Farben
+- Bei WiFi-Eingaben wird automatisch das korrekte Format angezeigt
-- ✅ Verschiedene Fehlerkorrektur-Level
+- Bei normaler Texteingabe bleibt der eingegebene Text sichtbar
-- ✅ Download-Funktion
+
-- ✅ Responsive Design
+### Synchronisierte Felder
-- ✅ WiFi QR-Code Unterstützung 
+- Beim Leeren des Textfeldes werden auch die WiFi-Felder geleert
+- Alle Felder werden synchron verwaltet
+
+### Intelligente Validierung
+- WiFi-Passwort ohne SSID wird als Fehler angezeigt
+- Leere Eingaben werden entsprechend behandelt