From 70ab08639f903a1afa78b1a0cef6636459ca1b08 Mon Sep 17 00:00:00 2001
From: "info@pi-farm.de" <pi-farm@noreply.git.pi-farm.de>
Date: Tue, 3 Mar 2026 22:14:49 +0000
Subject: [PATCH] =?UTF-8?q?templates/index.html=20hinzugef=C3=BCgt?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 templates/index.html | 105 +++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 105 insertions(+)
 create mode 100644 templates/index.html
diff --git a/templates/index.html b/templates/index.html
new file mode 100644
index 0000000..bc0ee2d
--- /dev/null
+++ b/templates/index.html
@@ -0,0 +1,105 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+    <meta charset="UTF-8">
+    <title>Pi-Orchestrator AI</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+</head>
+<body class="bg-gray-900 text-white flex h-screen">
+
+    <div class="w-1/4 border-r border-gray-700 p-4">
+        <h2 class="text-xl font-bold mb-4">📍 Nodes</h2>
+        <div id="node-list">
+            <button onclick="addNode()" class="w-full bg-blue-600 p-2 rounded mb-4">+ Node hinzufügen</button>
+        </div>
+    </div>
+
+    <div class="flex-1 flex flex-col">
+        <div id="chat-window" class="flex-1 p-6 overflow-y-auto space-y-4">
+            <div class="bg-gray-800 p-3 rounded-lg w-fit">Willkommen! Wie soll ich den Cluster verwalten?</div>
+        </div>
+
+        <div class="p-4 border-t border-gray-700 flex">
+            <input id="user-input" type="text" class="flex-1 bg-gray-800 p-3 rounded-l outline-none" placeholder="Befehl eingeben (z.B. 'Installiere Docker auf allen Nodes')">
+            <button onclick="sendMessage()" class="bg-green-600 px-6 rounded-r">Senden</button>
+        </div>
+    </div>
+
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/xterm@5.1.0/css/xterm.css" />
+<script src="https://cdn.jsdelivr.net/npm/xterm@5.1.0/lib/xterm.js"></script>
+
+<div class="flex flex-col h-full">
+    <div class="flex flex-1 overflow-hidden">
+        </div>
+
+    <div class="h-1/3 border-t border-gray-600 bg-black flex">
+        <div id="install-log" class="w-1/2 p-2 text-xs font-mono overflow-y-auto text-green-400 border-r border-gray-700">
+            > System bereit. Warte auf Befehle...
+        </div>
+        
+        <div id="terminal" class="w-1/2"></div>
+    </div>
+</div>
+
+    <script>
+        // Xterm.js Initialisierung
+        const term = new Terminal({ theme: { background: '#000' }, cursorBlink: true });
+        term.open(document.getElementById('terminal'));
+        term.write('Verfügbare Terminals: Wähle einen Node aus...\r\n');
+
+        // WebSocket für Installation-Logs
+        const logWs = new WebSocket(`ws://${location.host}/ws/install_logs`);
+        logWs.onmessage = (event) => {
+            const logDiv = document.getElementById('install-log');
+            logDiv.innerHTML += `<div>${event.data}</div>`;
+            logDiv.scrollTop = logDiv.scrollHeight;
+        };
+
+        function startInstallation(ip, user, pass) {
+            // Diese Funktion wird gerufen, wenn ein neuer Node hinzugefügt wird
+            fetch('/api/setup_node', {
+                method: 'POST', 
+                body: JSON.stringify({ip, user, pass})
+            });
+        }
+    </script>
+    
+    <script>
+        const ws = new WebSocket(`ws://${location.host}/ws/chat`);
+        const chatWindow = document.getElementById('chat-window');
+
+        ws.onmessage = (event) => {
+            const msg = document.createElement('div');
+            msg.className = "bg-blue-900 p-3 rounded-lg w-fit self-start";
+            msg.innerText = event.data;
+            chatWindow.appendChild(msg);
+            chatWindow.scrollTop = chatWindow.scrollHeight;
+        };
+
+        function sendMessage() {
+            const input = document.getElementById('user-input');
+            ws.send(input.value);
+            
+            const userMsg = document.createElement('div');
+            userMsg.className = "bg-gray-700 p-3 rounded-lg w-fit self-end ml-auto";
+            userMsg.innerText = input.value;
+            chatWindow.appendChild(userMsg);
+            
+            input.value = '';
+        }
+
+        async function addNode() {
+            const ip = prompt("IP des neuen Pi:");
+            const name = prompt("Name des Pi:");
+            if(ip && name) {
+                await fetch('/add_node', {
+                    method: 'POST',
+                    headers: {'Content-Type': 'application/json'},
+                    body: JSON.stringify({ip, name})
+                });
+                location.reload();
+            }
+        }
+    </script>
+</body>
+</html>
\ No newline at end of file
