Plausible Analytics einbinden und CSP/Texte anpassen

Made-with: Cursor
docs: README um Termin-URL-Parameter und Beispiel ergänzen
2026-04-16 12:52:11 +02:00 · 2026-04-16 09:00:57 +02:00
2 changed files with 21 additions and 9 deletions
@@ -7,7 +7,7 @@ Dieses Projekt basiert auf dem Code von https://qr.alster.space/. Er wurde um ve
 ## Features

 - Vollständig clientseitig (keine Server-Kommunikation)
- URL-Parameter für alle Einstellungen
+- URL-Parameter für alle Einstellungen (inkl. Modus Text/WLAN/Termin)
 - Anpassbare Größen und Farben
 - Verschiedene Fehlerkorrektur-Level
 - Download-Funktion
@@ -69,9 +69,15 @@ Die App bietet spezielle Eingabefelder für WiFi-Daten:

 Die Anwendung unterstützt folgende URL-Parameter:

- `text` - Text oder URL für den QR-Code
- `ssid` - WiFi SSID
- `password` - WiFi Passwort
+- `mode` - Inhaltstyp: `text`, `wifi` oder `event` (Termin/Kalender). Ohne `mode` wird bei vorhandenen Termin-Feldern automatisch der Termin-Modus gewählt.
+- `text` - Text oder URL für den QR-Code (Modus Text)
+- `ssid` - WiFi SSID (Modus WLAN)
+- `password` - WiFi Passwort (Modus WLAN)
+- `eventTitle` - Titel des Termins (Modus `event`)
+- `eventStart` - Beginn im Format `YYYY-MM-DDTHH:mm` (lokale Ortszeit Europe/Berlin, z. B. `2026-04-16T14:30`)
+- `eventEnd` - Ende (optional), gleiches Format wie `eventStart`
+- `eventLocation` - Ort (optional)
+- `eventDescription` - Beschreibung (optional)
 - `size` - Größe (128, 256, 512, 1024)
 - `errorCorrection` - Fehlerkorrektur (L, M, Q, H)
 - `foreground` - Vordergrundfarbe (Hex-Code)
@@ -92,6 +98,11 @@ http://localhost:8080/?ssid=MeinWLAN&password=MeinPasswort123
 http://localhost:8080/?ssid=OffenesWLAN
 ```

+**Termin (Kalender, iCal im QR):**
+```
+http://localhost:8080/?mode=event&eventTitle=Team-Meeting&eventStart=2026-04-16T14:30&eventEnd=2026-04-16T15:30
+```
+
 **Achtung:** Das WLAN-Passwort ist im Link im Klartext sichtbar!

 ## WiFi QR-Code Format
@@ -133,7 +144,7 @@ Das Smartphone erkennt automatisch, dass es sich um WiFi-Daten handelt und biete

 ### Teilen-Funktion

-Mit dem Button "Teilen" kann ein Link mit allen aktuellen Einstellungen (inkl. WiFi-Daten) in die Zwischenablage kopiert werden. Dieser Link kann weitergegeben werden und öffnet die App direkt mit den gewählten Einstellungen.
+Mit dem Button "Teilen" kann ein Link mit allen aktuellen Einstellungen (inkl. WiFi- oder Termin-Daten) in die Zwischenablage kopiert werden. Dieser Link kann weitergegeben werden und öffnet die App direkt mit den gewählten Einstellungen.

 **Achtung:** Wenn ein WLAN-Passwort eingegeben ist, wird dieses im Link im Klartext übertragen!

@@ -3,9 +3,10 @@
 <html lang="de"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data:; object-src 'none';">
+    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' https://plausible.elpatron.me; style-src 'self' 'unsafe-inline'; img-src 'self' data:; connect-src 'self' https://plausible.elpatron.me; object-src 'none';">
    <title>QR ohne Schnickschnack</title>
    <link rel="icon" type="image/svg+xml" href="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><rect width='32' height='32' fill='white' rx='6' ry='6'/><rect x='4' y='4' width='8' height='8' fill='black'/><rect x='20' y='4' width='8' height='8' fill='black'/><rect x='4' y='20' width='8' height='8' fill='black'/><rect x='14' y='14' width='4' height='4' fill='black'/></svg>">
+    <script defer data-domain="qr.elpatron.me" src="https://plausible.elpatron.me/js/script.js"></script>
    <script src="./assets/qrious.min.js"></script>
    <script src="./main.js"></script>
    <!--
@@ -496,7 +497,7 @@

            <p>Not today.</p>

-            <p>Rather than bemoan the fact that there's no easy way to get QR ohne Schnickschnak without the low-key parasitic monetization, I found a library (qrious) and put together just enough Javascript code to generate QR codes in the browser. No ads, no trackers, no sending your data to someone else's server for who-knows-what-reason.</p>
+            <p>Rather than bemoan the fact that there's no easy way to get QR ohne Schnickschnak without the low-key parasitic monetization, I found a library (qrious) and put together just enough Javascript code to generate QR codes in the browser. No ads; page views are counted with self-hosted Plausible (privacy-friendly, no cookies). Your QR content is not sent anywhere.</p>

            <p>Go ahead and inspect the page source. Save it to your computer, copy it, remix it, whatever you want.</p>

@@ -507,12 +508,12 @@
            <p>Be excellent to each other.</p>

            <h3>Modi</h3>
-            <p>Unter <strong>QR-Inhalt</strong> wählst du, was kodiert wird: freier Text oder URL, WLAN-Zugangsdaten (WIFI-QR) oder einen <strong>Kalendertermin</strong>. Im Modus „Termin“ erzeugt der QR-Code einen Standard-iCalendar-Eintrag (VEVENT), den viele Smartphones beim Scannen in die Kalender-App übernehmen. Datumseingabe als <strong>TT/MM/JJJJ</strong>, Uhrzeit im <strong>24-Stunden-Format</strong>; die Zeitzone ist <strong>Europe/Berlin</strong>. Es wird nichts an einen Server gesendet.</p>
+            <p>Unter <strong>QR-Inhalt</strong> wählst du, was kodiert wird: freier Text oder URL, WLAN-Zugangsdaten (WIFI-QR) oder einen <strong>Kalendertermin</strong>. Im Modus „Termin“ erzeugt der QR-Code einen Standard-iCalendar-Eintrag (VEVENT), den viele Smartphones beim Scannen in die Kalender-App übernehmen. Datumseingabe als <strong>TT/MM/JJJJ</strong>, Uhrzeit im <strong>24-Stunden-Format</strong>; die Zeitzone ist <strong>Europe/Berlin</strong>. Deine Eingaben für den QR-Code werden nicht an einen Server gesendet.</p>
        </div>
    </div>

    <div class="footer">
-        Dieser QR-Code-Generator funktioniert vollständig in deinem Browser. Es werden keine Daten an einen Server gesendet. <i>Quellcode und README bei <a href="https://gitea.elpatron.me/elpatron/QR-Code-Generator" target="_blank">Gitea</a></i>.
+        Dieser QR-Code-Generator funktioniert vollständig in deinem Browser; QR-Inhalte werden nicht hochgeladen. Seitenaufrufe werden mit selbst gehostetem Plausible aggregiert (ohne Cookies). <i>Quellcode und README bei <a href="https://gitea.elpatron.me/elpatron/QR-Code-Generator" target="_blank">Gitea</a></i>.
        <p class="credit">Made with ❤️ and 🍪 by Markus. Self hosted on <a href="https://unraid.net" target="_blank">Unraid</a> for <a href="https://medisoftware.de" target="_blank">medisoftware</a>. Credits: <a href="https://qr.alster.space/" target="_blank">alsternerd</a></p>
    </div>
Author	SHA1	Message	Date
elpatron	7790fe6dda	Plausible Analytics einbinden und CSP/Texte anpassen Made-with: Cursor	2026-04-16 12:52:11 +02:00
elpatron	8dac716c28	docs: README um Termin-URL-Parameter und Beispiel ergänzen - mode und event* Parameter dokumentiert - Beispiel-Link für Kalender-QR - Teilen-Hinweis um Termin-Daten erweitert Made-with: Cursor	2026-04-16 09:00:57 +02:00