From 5e8559ec9749aa66c3d84f09554e82092d0a5e44 Mon Sep 17 00:00:00 2001
From: Andreas Knuth <andreas.knuth@gmail.com>
Date: Wed, 28 Jan 2026 16:40:40 -0600
Subject: [PATCH] QRCode

---
 caddy/email-setup/setup.html | 122 +++++++++++++++++++++++++++++++++++
 1 file changed, 122 insertions(+)
diff --git a/caddy/email-setup/setup.html b/caddy/email-setup/setup.html
index e69de29..b05827d 100644
--- a/caddy/email-setup/setup.html
+++ b/caddy/email-setup/setup.html
@@ -0,0 +1,122 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>E-Mail Einrichtung</title>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
+    <style>
+        body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background: #f2f2f7; display: flex; justify-content: center; align-items: center; min-height: 100vh; margin: 0; padding: 20px; box-sizing: border-box; }
+        .card { background: white; padding: 2.5rem; border-radius: 24px; box-shadow: 0 12px 30px rgba(0,0,0,0.1); width: 100%; max-width: 420px; text-align: center; transition: all 0.3s ease; }
+        .logo { width: 80px; height: 80px; margin-bottom: 1.5rem; }
+        h1 { margin: 0 0 1rem 0; color: #1a1a1a; font-size: 1.8rem; }
+        p { color: #666; line-height: 1.5; margin-bottom: 2rem; }
+        
+        /* Eingabe-Bereich */
+        #input-section { transition: opacity 0.3s ease; }
+        input { width: 100%; padding: 16px; margin-bottom: 16px; border: 2px solid #eee; border-radius: 14px; font-size: 16px; box-sizing: border-box; transition: border-color 0.2s; outline: none; }
+        input:focus { border-color: #007AFF; }
+        button { width: 100%; padding: 16px; background: #007AFF; color: white; border: none; border-radius: 14px; font-size: 18px; font-weight: 600; cursor: pointer; transition: background 0.2s, transform 0.1s; }
+        button:hover { background: #0062cc; }
+        button:active { transform: scale(0.98); }
+        
+        /* QR-Code Bereich (initial versteckt) */
+        #qr-section { display: none; opacity: 0; transition: opacity 0.5s ease; }
+        #qrcode { margin: 2rem auto; padding: 15px; background: white; border-radius: 16px; box-shadow: 0 4px 12px rgba(0,0,0,0.08); display: inline-block; }
+        #qrcode img { margin: auto; } /* Zentriert den generierten QR-Code */
+        
+        .hint { font-size: 0.9rem; color: #888; margin-top: 1.5rem; }
+        .hint strong { color: #333; }
+        .error { color: #d32f2f; background: #fde8e8; padding: 10px; border-radius: 8px; font-size: 0.9rem; display: none; margin-bottom: 16px; }
+        .back-btn { background: transparent; color: #007AFF; margin-top: 1rem; font-size: 16px; }
+        .back-btn:hover { background: #f0f8ff; }
+    </style>
+</head>
+<body>
+
+<div class="card">
+    <img src="/logo.png" alt="Logo" class="logo">
+    
+    <div id="input-section">
+        <h1>E-Mail Setup</h1>
+        <p>Gib deine E-Mail-Adresse ein, um dein iPhone oder iPad automatisch zu konfigurieren.</p>
+        
+        <div id="error-msg" class="error">Bitte eine gültige E-Mail-Adresse eingeben.</div>
+        
+        <input type="email" id="email" placeholder="name@firma.de" required autocomplete="email">
+        <button onclick="generateQR()">QR-Code erstellen</button>
+    </div>
+
+    <div id="qr-section">
+        <h1>Scanne mich!</h1>
+        <p>Öffne die <strong>Kamera-App</strong> auf deinem iPhone und richte sie auf diesen Code.</p>
+        
+        <div id="qrcode"></div>
+        
+        <p class="hint">
+            Tippe auf das Banner, das oben erscheint. <br>
+            Klicke auf <strong>"Zulassen"</strong> und gehe dann in die <strong>Einstellungen</strong>, um das Profil zu installieren.
+        </p>
+        <button class="back-btn" onclick="resetForm()">Zurück</button>
+    </div>
+</div>
+
+<script>
+    const inputSection = document.getElementById('input-section');
+    const qrSection = document.getElementById('qr-section');
+    const emailInput = document.getElementById('email');
+    const errorMsg = document.getElementById('error-msg');
+    let qrcode = null;
+
+    function generateQR() {
+        const email = emailInput.value.trim();
+        
+        if (!email || !email.includes('@') || email.split('@')[1].length < 3) {
+            errorMsg.style.display = 'block';
+            emailInput.focus();
+            return;
+        }
+        errorMsg.style.display = 'none';
+
+        const domain = email.split('@')[1];
+        // Der magische Link
+        const targetUrl = `https://autodiscover.${domain}/apple?email=${email}`;
+
+        // Eingabe ausblenden, QR-Bereich einblenden
+        inputSection.style.display = 'none';
+        qrSection.style.display = 'block';
+        setTimeout(() => qrSection.style.opacity = '1', 50);
+
+        // QR-Code generieren (oder aktualisieren)
+        if (qrcode === null) {
+            qrcode = new QRCode(document.getElementById("qrcode"), {
+                text: targetUrl,
+                width: 200,
+                height: 200,
+                colorDark : "#000000",
+                colorLight : "#ffffff",
+                correctLevel : QRCode.CorrectLevel.H
+            });
+        } else {
+            qrcode.clear();
+            qrcode.makeCode(targetUrl);
+        }
+    }
+
+    function resetForm() {
+        qrSection.style.opacity = '0';
+        setTimeout(() => {
+            qrSection.style.display = 'none';
+            inputSection.style.display = 'block';
+            emailInput.value = '';
+            emailInput.focus();
+        }, 300);
+    }
+
+    emailInput.addEventListener("keypress", function(event) {
+        if (event.key === "Enter") generateQR();
+    });
+</script>
+
+</body>
+</html>
\ No newline at end of file
