From 1c656b87ed372b9dedd22e6daa87c18d11c890a3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ren=C3=A9=20Bachmann?= <bahmcloud@noreply.localhost>
Date: Wed, 15 Apr 2026 18:18:53 +0000
Subject: [PATCH] whatsapp_bridge/ui/index.html aktualisiert

---
 whatsapp_bridge/ui/index.html | 137 +++++++++++++++++++++++-----------
 1 file changed, 92 insertions(+), 45 deletions(-)
diff --git a/whatsapp_bridge/ui/index.html b/whatsapp_bridge/ui/index.html
index 2ed1df5..77e6035 100644
--- a/whatsapp_bridge/ui/index.html
+++ b/whatsapp_bridge/ui/index.html
@@ -1,51 +1,98 @@
-<script>
-    // Wir nutzen relative Pfade (ohne führenden Slash), 
-    // damit Ingress den Pfad korrekt auflöst.
-    async function update() {
-        try {
-            const res = await fetch('api/status'); // Geändert von /api/status
-            if (!res.ok) throw new Error('Network error');
-            
-            const data = await res.json();
-            const statusEl = document.getElementById('status');
-            const qrSection = document.getElementById('qr-section');
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Bahmcloud Bridge Manager</title>
+    <style>
+        body { font-family: -apple-system, system-ui, sans-serif; background: #111; color: white; text-align: center; padding: 20px; }
+        .card { background: #222; border-radius: 15px; padding: 25px; max-width: 400px; margin: 40px auto; box-shadow: 0 10px 30px rgba(0,0,0,0.5); border: 1px solid #333; }
+        h1 { color: #25D366; margin-bottom: 5px; }
+        .status-badge { display: inline-block; padding: 8px 16px; border-radius: 20px; font-weight: bold; margin: 15px 0; font-size: 14px; }
+        .connected { background: #25D366; color: black; }
+        .disconnected { background: #e74c3c; color: white; }
+        .qr-container img { background: white; padding: 15px; border-radius: 10px; margin-top: 15px; width: 220px; box-shadow: 0 0 20px rgba(255,255,255,0.1); }
+        .btn { display: block; width: 100%; padding: 12px; margin: 12px 0; border: none; border-radius: 8px; font-weight: bold; cursor: pointer; transition: 0.2s; font-size: 14px; }
+        .btn-orange { background: #f39c12; color: white; }
+        .btn-orange:hover { background: #e67e22; }
+        .btn-red { background: #e74c3c; color: white; }
+        .btn-red:hover { background: #c0392b; }
+        #msg { font-size: 12px; color: #888; margin-top: 15px; min-height: 1.2em; }
+    </style>
+</head>
+<body>
+    <div class="card">
+        <h1>Bahmcloud Bridge</h1>
+        <p style="color: #666; font-size: 13px; margin-bottom: 20px;">WhatsApp Management Interface</p>
+        
+        <div id="status" class="status-badge disconnected">Initialisiere...</div>
+        
+        <div id="qr-section" class="qr-container" style="display:none;">
+            <p style="font-size: 14px;">Bitte QR-Code scannen:</p>
+            <div id="qr-code"></div>
+        </div>
 
-            if (data.isReady) {
-                statusEl.innerText = "CONNECTED ✅";
-                statusEl.className = "status-badge connected";
-                qrSection.style.display = "none";
-            } else if (data.hasQr) {
-                statusEl.innerText = "WAITING FOR SCAN 📱";
-                statusEl.className = "status-badge disconnected";
-                qrSection.style.display = "block";
-                document.getElementById('qr-code').innerHTML = `<img src="${data.qrCode}">`;
-            } else {
-                statusEl.innerText = "INITIALIZING...";
-                qrSection.style.display = "none";
+        <div style="margin-top: 30px; border-top: 1px solid #333; padding-top: 10px;">
+            <button class="btn btn-orange" onclick="cmd('auth/logout', 'POST', 'Möchtest du die aktuelle Nummer abmelden?')">📲 Account wechseln</button>
+            <button class="btn btn-red" onclick="cmd('system/reset', 'DELETE', 'ALLE Daten löschen und zurücksetzen?')">⚠️ Werkseinstellungen</button>
+        </div>
+        <p id="msg"></p>
+    </div>
+
+    <script>
+        // Erkennt den aktuellen Pfad (wichtig für HA Ingress)
+        const getBaseUrl = () => {
+            const path = window.location.pathname;
+            return path.endsWith('/') ? path : path + '/';
+        };
+
+        async function update() {
+            try {
+                const response = await fetch(getBaseUrl() + 'api/status');
+                const data = await response.json();
+                
+                const statusEl = document.getElementById('status');
+                const qrSection = document.getElementById('qr-section');
+
+                if (data.isReady) {
+                    statusEl.innerText = "VERBUNDEN ✅";
+                    statusEl.className = "status-badge connected";
+                    qrSection.style.display = "none";
+                } else if (data.hasQr) {
+                    statusEl.innerText = "WARTE AUF SCAN 📱";
+                    statusEl.className = "status-badge disconnected";
+                    qrSection.style.display = "block";
+                    document.getElementById('qr-code').innerHTML = `<img src="${data.qrCode}">`;
+                } else {
+                    statusEl.innerText = "LADE CLIENT...";
+                    qrSection.style.display = "none";
+                }
+            } catch (e) {
+                document.getElementById('status').innerText = "VERBINDUNG VERLOREN ❌";
+                document.getElementById('status').className = "status-badge disconnected";
             }
-        } catch (e) {
-            console.error("Update failed", e);
-            document.getElementById('status').innerText = "OFFLINE ❌";
         }
-    }
 
-    async function cmd(url, method, msg) {
-        if (!confirm(msg)) return;
-        document.getElementById('msg').innerText = "Working...";
-        
-        // Auch hier: Slash am Anfang entfernen für relative Pfade
-        const relativeUrl = url.startsWith('/') ? url.substring(1) : url;
-        
-        try {
-            const res = await fetch(relativeUrl, { method });
-            const data = await res.json();
-            alert(data.message);
-            location.reload();
-        } catch (e) {
-            alert("Error: " + e.message);
+        async function cmd(endpoint, method, confirmMsg) {
+            if (!confirm(confirmMsg)) return;
+            
+            const msgEl = document.getElementById('msg');
+            msgEl.innerText = "Befehl wird gesendet...";
+            
+            try {
+                const res = await fetch(getBaseUrl() + endpoint, { method });
+                const data = await res.json();
+                alert(data.message);
+                location.reload();
+            } catch (e) {
+                alert("Fehler: " + e.message);
+                msgEl.innerText = "";
+            }
         }
-    }
 
-    setInterval(update, 3000);
-    update();
-</script>
\ No newline at end of file
+        // Alle 3 Sekunden aktualisieren
+        setInterval(update, 3000);
+        update();
+    </script>
+</body>
+</html>
\ No newline at end of file
