diff --git a/README.md b/README.md index 99b3e10..22c858b 100644 --- a/README.md +++ b/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 - -Die App unterstützt das Erstellen von WiFi QR-Codes, die automatisch von Smartphones erkannt werden. - -### Format: +**WiFi QR-Codes:** ``` -WIFI:S:;T:;P:;H:;; +http://localhost:8080/?ssid=MeinWLAN&password=MeinPasswort123 +http://localhost:8080/?ssid=OffenesWLAN ``` -### Parameter: -- **S** = SSID (Netzwerkname) -- **T** = Typ der Verschlüsselung (WPA, WEP, nopass) -- **P** = Passwort -- **H** = Versteckt (true/false) - optional +## WiFi QR-Code Format -### 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:;T:WPA;P:;; ``` -**WEP Netzwerk:** +### Offenes Netzwerk (ohne Passwort): ``` -WIFI:S:MeinWLAN;T:WEP;P:1234567890;; -``` - -**Offenes Netzwerk (ohne Passwort):** -``` -WIFI:S:MeinWLAN;T:nopass;; -``` - -**Verstecktes Netzwerk:** -``` -WIFI:S:MeinWLAN;T:WPA;P:MeinPasswort123;H:true;; +WIFI:S:;T:nopass;; ``` ### Verwendung: -1. Kopieren Sie einen der obigen Texte -2. Ersetzen Sie die Werte durch Ihre eigenen WiFi-Daten -3. Fügen Sie den Text in das Eingabefeld ein -4. Der QR-Code wird automatisch generiert -5. Scannen Sie ihn mit einem Smartphone +1. Füllen Sie die WiFi-Felder aus +2. Der QR-Code wird automatisch generiert +3. Das Textfeld zeigt den generierten Code an +4. 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) -- ✅ URL-Parameter für alle Einstellungen -- ✅ Anpassbare Größen und Farben -- ✅ Verschiedene Fehlerkorrektur-Level -- ✅ Download-Funktion -- ✅ Responsive Design -- ✅ WiFi QR-Code Unterstützung \ No newline at end of file +### Dynamische Klartext-Anzeige +- Das Textfeld zeigt immer den aktuellen Inhalt des QR-Codes an +- Bei WiFi-Eingaben wird automatisch das korrekte Format angezeigt +- Bei normaler Texteingabe bleibt der eingegebene Text sichtbar + +### Synchronisierte Felder +- 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 \ No newline at end of file diff --git a/index.html b/index.html index 435f74b..322af3b 100644 --- a/index.html +++ b/index.html @@ -285,8 +285,20 @@
- - + + +
+ +
+
+ + +
+ +
+ + +
@@ -331,7 +343,7 @@
- Generated QR Code + Generated QR Code
@@ -370,6 +382,8 @@ const textInput = document.getElementById('text'); const clearTextBtn = document.getElementById('clear-text'); + const wifiSsidInput = document.getElementById('wifi-ssid'); + const wifiPasswordInput = document.getElementById('wifi-password'); const sizeSelect = document.getElementById('size'); const errorCorrectionSelect = document.getElementById('errorCorrection'); const foregroundColor = document.getElementById('foreground'); @@ -445,6 +459,8 @@ // Clear text when clear button is clicked clearTextBtn.addEventListener('click', function() { textInput.value = ''; + wifiSsidInput.value = ''; + wifiPasswordInput.value = ''; toggleClearButton(); textInput.focus(); generateQRCode(); @@ -453,7 +469,12 @@ // Update clear button visibility when text changes textInput.addEventListener('input', function() { toggleClearButton(); - generateQRCode(); + // Only generate QR code if no wifi data is being entered + const wifiSsid = wifiSsidInput.value.trim(); + const wifiPassword = wifiPasswordInput.value.trim(); + if (!wifiSsid && !wifiPassword) { + generateQRCode(); + } }); let qr = null; @@ -464,6 +485,16 @@ foregroundColor.addEventListener('input', generateQRCode); backgroundColor.addEventListener('input', generateQRCode); + // Generate QR code when wifi settings change + wifiSsidInput.addEventListener('input', function() { + updateTextDisplay(); + generateQRCode(); + }); + wifiPasswordInput.addEventListener('input', function() { + updateTextDisplay(); + generateQRCode(); + }); + // Download QR code as image downloadBtn.addEventListener('click', downloadQRCode); @@ -472,6 +503,12 @@ if (urlParams.has('text')) { textInput.value = urlParams.get('text'); } + if (urlParams.has('ssid')) { + wifiSsidInput.value = urlParams.get('ssid'); + } + if (urlParams.has('password')) { + wifiPasswordInput.value = urlParams.get('password'); + } if (urlParams.has('size')) { const sizeValue = urlParams.get('size'); if (['128', '256', '512', '1024'].includes(sizeValue)) { @@ -500,6 +537,8 @@ function generateQRCode() { const text = textInput.value.trim(); + const wifiSsid = wifiSsidInput.value.trim(); + const wifiPassword = wifiPasswordInput.value.trim(); const size = parseInt(sizeSelect.value); const errorCorrection = errorCorrectionSelect.value.toLowerCase(); const fgColor = foregroundColor.value; @@ -515,9 +554,27 @@ errorMessage.textContent = ''; downloadBtn.style.display = 'none'; + // Determine what to encode + let qrText = text; + + // If wifi credentials are provided, generate wifi QR code + if (wifiSsid && wifiPassword) { + // Wifi QR code format: WIFI:S:;T:WPA;P:;; + qrText = `WIFI:S:${escapeSpecialChars(wifiSsid)};T:WPA;P:${escapeSpecialChars(wifiPassword)};;`; + } else if (wifiSsid && !wifiPassword) { + // SSID only (open network) + qrText = `WIFI:S:${escapeSpecialChars(wifiSsid)};T:nopass;;`; + } else if (!wifiSsid && wifiPassword) { + // Password without SSID is invalid + errorMessage.textContent = 'Bitte geben Sie eine SSID ein, wenn Sie ein Passwort angeben'; + qrcodeCanvas.style.display = 'none'; + qrcodeImg.style.display = 'none'; + return; + } + // Validate input - if (text === '') { - errorMessage.textContent = 'Please enter text or URL'; + if (qrText === '') { + errorMessage.textContent = 'Bitte geben Sie Text/URL oder Wifi-Daten ein'; // Hide both canvas and image qrcodeCanvas.style.display = 'none'; qrcodeImg.style.display = 'none'; @@ -530,7 +587,7 @@ qr = new QRious({ element: qrcodeCanvas, size: size, - value: text, + value: qrText, foreground: fgColor, background: bgColor, level: errorCorrection @@ -538,7 +595,7 @@ } else { qr.set({ size: size, - value: text, + value: qrText, foreground: fgColor, background: bgColor, level: errorCorrection @@ -560,6 +617,11 @@ } } + // Helper function to escape special characters in wifi strings + function escapeSpecialChars(str) { + return str.replace(/[\\;:,]/g, '\\$&'); + } + function downloadQRCode() { // Use the image source for download const link = document.createElement('a'); @@ -580,6 +642,26 @@ downloadBtn.textContent = originalText; }, 2000); } + + // Function to update the text display with current QR code content + function updateTextDisplay() { + const wifiSsid = wifiSsidInput.value.trim(); + const wifiPassword = wifiPasswordInput.value.trim(); + + if (wifiSsid && wifiPassword) { + // Show wifi QR code format + textInput.value = `WIFI:S:${escapeSpecialChars(wifiSsid)};T:WPA;P:${escapeSpecialChars(wifiPassword)};;`; + } else if (wifiSsid && !wifiPassword) { + // Show open network format + textInput.value = `WIFI:S:${escapeSpecialChars(wifiSsid)};T:nopass;;`; + } else { + // If no wifi data, keep original text input value + // Don't change it here to avoid overwriting user input + } + + // Update clear button visibility + toggleClearButton(); + } });