v2/index.html hinzugefügt

2026-07-28 00:27:37 +02:00
parent d823f73935
commit 485b68724c
1 changed files with 153 additions and 0 deletions
@@ -0,0 +1,153 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Gateway Status</title>
+    <style>
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+            background-color: #121212;
+            color: #e0e0e0;
+            margin: 0;
+            padding: 20px;
+            font-size: 14px;
+        }
+        h1 { 
+            font-size: 1.5rem; 
+            border-bottom: 1px solid #333; 
+            padding-bottom: 10px; 
+            margin-bottom: 20px; 
+        }
+        
+        /* Kompaktes Listen-Layout */
+        .node-list {
+            display: flex;
+            flex-direction: column;
+            gap: 6px;
+            max-width: 1000px; /* Maximale Breite für bessere Lesbarkeit auf großen Monitoren */
+        }
+        .node-row {
+            display: flex;
+            align-items: center;
+            background: #1e1e1e;
+            padding: 8px 12px;
+            border-radius: 6px;
+            border: 1px solid #2a2a2a;
+            transition: background 0.2s;
+        }
+        .node-row:hover { background: #252525; }
+        
+        /* Status Indikator (Leuchtender Punkt) */
+        .status-dot {
+            width: 10px;
+            height: 10px;
+            border-radius: 50%;
+            margin-right: 15px;
+            flex-shrink: 0;
+        }
+        .online .status-dot { background-color: #00C851; box-shadow: 0 0 8px rgba(0, 200, 81, 0.5); }
+        .offline .status-dot { background-color: #ff4444; box-shadow: 0 0 8px rgba(255, 68, 68, 0.5); }
+        
+        .server-badge {
+            background: #333;
+            padding: 2px 6px;
+            border-radius: 4px;
+            font-size: 0.75rem;
+            color: #aaa;
+            text-transform: uppercase;
+            margin-right: 15px;
+            width: 110px; 
+            text-align: center;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            flex-shrink: 0;
+        }
+        
+        .client-name {
+            font-weight: 600;
+            width: 220px; 
+            margin-right: 15px;
+            flex-shrink: 0;
+        }
+        
+        .handshake {
+            color: #888;
+            font-size: 0.85rem;
+            flex-grow: 1;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+        
+        .time {
+            color: #aaa;
+            font-size: 0.85rem;
+            text-align: right;
+            white-space: nowrap;
+            margin-left: 15px;
+            width: 90px;
+            flex-shrink: 0;
+        }
+        
+        /* Responsiv für Smartphones */
+        @media (max-width: 700px) {
+            .node-row { flex-wrap: wrap; gap: 5px; padding: 10px; }
+            .server-badge, .client-name { width: auto; margin-right: 10px; }
+            .handshake { width: 100%; margin-left: 25px; margin-top: 4px; }
+            .time { width: auto; margin-left: 25px; text-align: left; }
+        }
+    </style>
+</head>
+<body>
+    <h1>Gateway Status</h1>
+    <div class="node-list" id="node-list">
+        <p>Lade Status-Daten...</p>
+    </div>
+
+    <script>
+        // API URL anpassen (da index.html im selben Ordner liegt, reicht der Dateiname)
+        const API_URL = 'api.php';
+
+        async function fetchStatus() {
+            try {
+                const response = await fetch(API_URL);
+                const data = await response.json();
+                const list = document.getElementById('node-list');
+                list.innerHTML = '';
+                
+                data.forEach(node => {
+                    const lastSeen = new Date(node.last_seen + " UTC");
+                    const now = new Date();
+                    const diffMinutes = (now - lastSeen) / 1000 / 60;
+                    
+                    // Offline wenn letzter Ping älter als 5 Minuten ist
+                    const isOnline = (node.status === 'true' && diffMinutes < 5);
+                    
+                    const row = document.createElement('div');
+                    row.className = `node-row ${isOnline ? 'online' : 'offline'}`;
+                    
+                    // Runden oder "< 1" anzeigen, wenn es unter einer Minute ist
+                    let timeText = Math.round(diffMinutes) + ' Min.';
+                    if (diffMinutes < 1) timeText = '< 1 Min.';
+                    
+                    row.innerHTML = `
+                        <div class="status-dot"></div>
+                        <div class="server-badge" title="${node.server}">${node.server}</div>
+                        <div class="client-name">${node.client}</div>
+                        <div class="handshake">Handshake: ${node.handshake}</div>
+                        <div class="time" title="Letztes Update: ${lastSeen.toLocaleString()}">vor ${timeText}</div>
+                    `;
+                    list.appendChild(row);
+                });
+            } catch (err) {
+                console.error("Fehler beim Abrufen der Daten:", err);
+            }
+        }
+        
+        fetchStatus();
+        setInterval(fetchStatus, 30000); // 30 Sekunden Refresh
+    </script>
+</body>
+</html>