From 60d9d594d0482c4c5e84c8c863434f4ad98bd6f3 Mon Sep 17 00:00:00 2001
From: "info@pi-farm.de" <pi-farm@noreply.git.pi-farm.de>
Date: Tue, 3 Mar 2026 23:57:36 +0000
Subject: [PATCH] templates/index.html aktualisiert

---
 templates/index.html | 29 ++++++++++++++++-------------
 1 file changed, 16 insertions(+), 13 deletions(-)

diff --git a/templates/index.html b/templates/index.html
index 3885b5c..601a65c 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -37,32 +37,35 @@
                 <h2 class="text-xl font-bold mb-4">📍 Nodes</h2>
                 <div id="node-list" class="space-y-2">
                     {% for node in nodes %}
-                    <div class="p-3 bg-gray-800 rounded-lg border border-gray-700 relative group transition-all hover:border-blue-500" id="node-{{ node.id }}">
-                        <form action="/remove_node/{{ node.id }}" method="post" class="absolute top-1 right-1 opacity-0 group-hover:opacity-100 transition-opacity">
-                            <button type="submit" class="text-red-500 font-bold px-1 hover:scale-125">×</button>
-                        </form>
-
+                    <div class="p-3 bg-gray-800 rounded-lg border border-gray-700 relative group" id="node-{{ node.id }}">
+                        
                         <div class="flex items-center justify-between mb-1">
                             <div class="text-sm font-bold truncate pr-4">{{ node.name }}</div>
                             <div class="status-indicator">
-                                {% if "Docker" in node.status or "Online" in node.status %}
-                                    <span class="flex h-2 w-2 rounded-full bg-blue-500 shadow-[0_0_8px_rgba(59,130,246,0.8)]" title="Docker installiert"></span>
+                                {% if node.status == "Docker Aktiv" %}
+                                    <span class="flex h-2.5 w-2.5 rounded-full bg-blue-500 shadow-[0_0_10px_#3b82f6]"></span>
+                                {% elif node.status == "Kopplung..." %}
+                                    <span class="flex h-2.5 w-2.5 rounded-full bg-yellow-500 animate-pulse"></span>
                                 {% else %}
-                                    <span class="flex h-2 w-2 rounded-full bg-yellow-500 opacity-75" title="Nur SSH"></span>
+                                    <span class="flex h-2.5 w-2.5 rounded-full bg-gray-600"></span>
                                 {% endif %}
                             </div>
                         </div>
 
-                        <div class="text-[10px] text-gray-500 font-mono">{{ node.ip }}</div>
+                        <div class="text-[10px] text-gray-500 font-mono flex justify-between items-center">
+                            {{ node.ip }}
+                            <a href="/refresh_status/{{ node.id }}" class="hover:text-blue-400">🔄</a>
+                        </div>
                         
-                        <div class="mt-2 flex items-center gap-1">
-                            <span class="text-[9px] px-1.5 py-0.5 rounded bg-gray-900 border border-gray-600 text-gray-300 uppercase tracking-tighter status-text">
+                        <div class="mt-2">
+                            <span class="text-[9px] px-1.5 py-0.5 rounded bg-black border border-gray-600 
+                                {% if node.status == 'Docker Aktiv' %} text-blue-400 border-blue-900 {% else %} text-gray-400 {% endif %}">
                                 {{ node.status }}
                             </span>
                         </div>
 
-                        <button onclick="openTerminal('{{ node.ip }}')" class="mt-3 text-[10px] bg-blue-900/50 hover:bg-blue-600 border border-blue-700/50 text-blue-200 py-1 rounded w-full transition-colors">
-                            Konsole öffnen
+                        <button onclick="openTerminal('{{ node.ip }}')" class="mt-3 text-[10px] bg-gray-700 hover:bg-blue-800 py-1 rounded w-full transition-all">
+                            Konsole
                         </button>
                     </div>
                     {% endfor %}