From 7c76e077e21bb26ff57770ecf166472f9bbf4c24 Mon Sep 17 00:00:00 2001
From: Christoph Polcin <coco@miconoco.de>
Date: Sat, 7 Mar 2026 00:14:41 +0100
Subject: [PATCH] v23

---
 dashboard.html | 202 ++++++++++++++++++++++++-------------------------
 1 file changed, 98 insertions(+), 104 deletions(-)
diff --git a/dashboard.html b/dashboard.html
index 00d3aa1..4c5215d 100644
--- a/dashboard.html
+++ b/dashboard.html
@@ -3,7 +3,8 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>MIO Dashboard</title>
+    <title>MIO Instances</title>
+
     <style>
         * {
             margin: 0;
@@ -12,22 +13,23 @@
         }
 
         body {
-            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
-            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+            font-family: system-ui,sans-serif;
+            background: linear-gradient(135deg, #4c566a 0%, #2e3440 100%);
             min-height: 100vh;
             padding: 20px;
         }
 
         /* Header Styles */
         .header {
-            background: white;
+            background: #3b4252;
             padding: 16px 24px;
             border-radius: 8px;
             display: flex;
             align-items: center;
             justify-content: space-between;
             margin-bottom: 24px;
-            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+            border-left: 8px solid #88c0d0;
         }
 
         .header-left {
@@ -39,11 +41,12 @@
         .header-title {
             font-size: 18px;
             font-weight: 600;
-            color: #333;
+            color: #eceff4;
+            text-transform: uppercase;
         }
 
         .butterfly-icon {
-            font-size: 24px;
+            font-size: 36px;
         }
 
         .header-right {
@@ -55,8 +58,8 @@
         .btn {
             padding: 8px 12px;
             border: none;
-            background: #f0f2f5;
-            color: #333;
+            background: #4c566a;
+            color: #eceff4;
             border-radius: 6px;
             cursor: pointer;
             font-size: 16px;
@@ -68,12 +71,12 @@
         }
 
         .btn:hover {
-            background: #e4e6eb;
+            background: #5e81ac;
             transform: translateY(-1px);
         }
 
         .btn-primary {
-            background: #f0f2f5;
+            background: #4c566a;
             font-weight: 500;
         }
 
@@ -89,8 +92,8 @@
 
         .avatar-btn {
             border-radius: 50%;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            color: white;
+            background: linear-gradient(135deg, #81a1c1 0%, #5e81ac 100%);
+            color: #eceff4;
             font-weight: 600;
             position: relative;
             cursor: pointer;
@@ -106,14 +109,15 @@
             position: absolute;
             top: 100%;
             right: 0;
-            background: white;
+            background: #3b4252;
             border-radius: 6px;
-            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
             min-width: 160px;
             z-index: 1000;
             display: none;
             margin-top: 4px;
             overflow: hidden;
+            border: 1px solid #4c566a;
         }
 
         .dropdown-menu.active {
@@ -125,7 +129,7 @@
             display: flex;
             align-items: center;
             gap: 8px;
-            color: #333;
+            color: #eceff4;
             cursor: pointer;
             transition: background 0.2s ease;
             border: none;
@@ -136,15 +140,15 @@
         }
 
         .dropdown-item:hover {
-            background: #f0f2f5;
+            background: #4c566a;
         }
 
         .dropdown-item.danger {
-            color: #dc3545;
+            color: #bf616a;
         }
 
         .dropdown-item.danger:hover {
-            background: #ffe5e5;
+            background: #4c566a;
         }
 
         /* Instances Container */
@@ -155,47 +159,35 @@
 
         /* Instance Card */
         .instance {
-            background: white;
-            padding: 16px 20px;
+            background: #3b4252;
+            padding: 16px 12px 16px 20px;
             border-radius: 8px;
             margin-bottom: 12px;
-            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
             transition: all 0.2s ease;
             display: grid;
             grid-template-columns: auto 1fr auto auto;
             grid-template-rows: auto auto;
             gap: 12px 12px;
             align-items: start;
+            border-left: 8px solid #b48ead;
         }
 
         .instance:hover {
-            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
+            background: #434c5e;
         }
 
-        /* Heartbeat on its own row */
-        .heartbeat {
-            font-size: 20px;
-            animation: pulse 1.5s ease-in-out infinite;
-            width: 24px;
-            height: 24px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            flex-shrink: 0;
-            grid-column: 1;
-            grid-row: 1;
-        }
-
-        .heartbeat.healthy {
-            color: #28a745;
+        .instance.healthy {
+            border-left-color: #a3be8c;
         }
 
-        .heartbeat.warning {
-            color: #ffc107;
+        .instance.warning {
+            border-left-color: #ebcb8b;
         }
 
-        .heartbeat.critical {
-            color: #dc3545;
+        .instance.critical {
+            border-left-color: #bf616a;
         }
 
         @keyframes pulse {
@@ -206,13 +198,12 @@
         /* First line: name + tags + menu */
         .instance-name {
             font-weight: 500;
-            color: #333;
+            color: #eceff4;
             display: flex;
             align-items: center;
-            grid-column: 2;
+            grid-column: 1;
             grid-row: 1;
-            text-transform: uppercase;
-            font-size: 13px;
+            font-size: 14px;
             letter-spacing: 0.5px;
             height: 24px;
         }
@@ -222,7 +213,7 @@
             display: flex;
             gap: 8px;
             align-items: center;
-            grid-column: 3;
+            grid-column: 2;
             grid-row: 1;
             justify-self: end;
             height: 24px;
@@ -232,8 +223,8 @@
             display: inline-flex;
             align-items: center;
             padding: 4px 8px;
-            background: #f0f2f5;
-            color: #333;
+            background: #4c566a;
+            color: #88c0d0;
             border-radius: 4px;
             font-size: 11px;
             font-weight: 500;
@@ -241,10 +232,12 @@
             transition: all 0.2s ease;
             position: relative;
             text-transform: uppercase;
+            border: 1px solid #5e81ac;
         }
 
         .tag:hover {
-            background: #e4e6eb;
+            background: #5e81ac;
+            color: #eceff4;
         }
 
         /* Tag tooltip */
@@ -254,8 +247,8 @@
             bottom: -24px;
             left: 50%;
             transform: translateX(-50%);
-            background: #333;
-            color: white;
+            background: #2e3440;
+            color: #88c0d0;
             padding: 4px 8px;
             border-radius: 4px;
             font-size: 10px;
@@ -265,6 +258,7 @@
             pointer-events: none;
             transition: opacity 0.2s ease;
             z-index: 100;
+            border: 1px solid #4c566a;
         }
 
         .tag:hover::before {
@@ -275,7 +269,7 @@
         .metrics {
             display: flex;
             gap: 24px;
-            grid-column: 2 / 4;
+            grid-column: 1 / 3;
             grid-row: 2;
         }
 
@@ -289,7 +283,7 @@
 
         .metric-bar {
             height: 8px;
-            background: #e9ecef;
+            background: #2e3440;
             border-radius: 4px;
             overflow: hidden;
             cursor: pointer;
@@ -303,23 +297,23 @@
         }
 
         .metric-utilization .metric-fill {
-            background: linear-gradient(90deg, #4a90e2 0%, #357abd 100%);
+            background: linear-gradient(90deg, #81a1c1 0%, #5e81ac 100%);
         }
 
         .metric-saturation .metric-fill {
-            background: linear-gradient(90deg, #f5a623 0%, #d68910 100%);
+            background: linear-gradient(90deg, #d08770 0%, #bf616a 100%);
         }
 
         .metric-error .metric-fill {
-            background: linear-gradient(90deg, #e74c3c 0%, #c0392b 100%);
+            background: linear-gradient(90deg, #bf616a 0%, #a3414a 100%);
         }
 
         .metric-latency .metric-fill {
-            background: linear-gradient(90deg, #9b59b6 0%, #8e44ad 100%);
+            background: linear-gradient(90deg, #b48ead 0%, #a3429e 100%);
         }
 
         .metric-uptime .metric-fill {
-            background: linear-gradient(90deg, #28a745 0%, #20c997 100%);
+            background: linear-gradient(90deg, #a3be8c 0%, #8fb78a 100%);
         }
 
         /* Metric value tooltip */
@@ -328,8 +322,8 @@
             bottom: -24px;
             left: 50%;
             transform: translateX(-50%);
-            background: #333;
-            color: white;
+            background: #2e3440;
+            color: #88c0d0;
             padding: 4px 8px;
             border-radius: 4px;
             font-size: 11px;
@@ -339,6 +333,7 @@
             pointer-events: none;
             transition: opacity 0.2s ease;
             z-index: 100;
+            border: 1px solid #4c566a;
         }
 
         .metric-bar:hover + .metric-tooltip,
@@ -350,7 +345,7 @@
         .instance-menu {
             flex-shrink: 0;
             position: relative;
-            grid-column: 4;
+            grid-column: 3;
             grid-row: 1;
             justify-self: end;
             display: flex;
@@ -360,9 +355,9 @@
 
         .menu-btn {
             background: none;
-            border: none;
+            border: 1px solid #4c566a;
             font-size: 18px;
-            color: #666;
+            color: #81a1c1;
             cursor: pointer;
             padding: 4px 8px;
             border-radius: 4px;
@@ -374,8 +369,8 @@
         }
 
         .menu-btn:hover {
-            background: #f0f2f5;
-            color: #333;
+            background: #4c566a;
+            color: #88c0d0;
         }
 
         /* Responsive Design */
@@ -384,6 +379,10 @@
                 grid-template-columns: auto 1fr auto;
             }
 
+            .instance-name {
+                font-size: 13px;
+            }
+
             .instance-tags {
             }
 
@@ -398,19 +397,18 @@
 
         @media (max-width: 480px) {
             .header {
-                flex-direction: column;
-                gap: 12px;
-                align-items: flex-start;
+                padding-left: 16px;
+                padding-right: 16px;
             }
 
             .header-right {
-                width: 100%;
-                justify-content: flex-end;
             }
 
             .instance {
                 grid-template-columns: auto 1fr auto;
                 gap: 8px;
+                padding-left: 16px;
+                padding-right: 16px;
             }
 
             .instance-tags {
@@ -422,8 +420,8 @@
             }
 
             .tag {
-                font-size: 10px;
-                padding: 3px 6px;
+                font-size: 8px;
+                padding: 2px 4px;
             }
         }
     </style>
@@ -433,7 +431,7 @@
     <div class="header">
         <div class="header-left">
             <span class="butterfly-icon">🦋</span>
-            <h1 class="header-title">MIO Dashboard</h1>
+            <h1 class="header-title">MIO Instances</h1>
         </div>
         <div class="header-right">
             <button class="btn btn-primary btn-icon" onclick="showAddInstanceModal()" title="Add Instance">
@@ -452,12 +450,11 @@
 
     <!-- Instances List -->
     <div class="instances-container" id="instancesList">
-        <!-- Instance 1: Healthy -->
-        <div class="instance">
-            <div class="heartbeat healthy">♥</div>
-            <div class="instance-name">prod-server-01</div>
+        <!-- Instance 1 -->
+        <div class="instance critical">
+            <div class="instance-name">netti</div>
             <div class="instance-tags">
-                <span class="tag" data-label="Type">compute</span>
+                <span class="tag" data-label="App">netbox</span>
                 <span class="tag" data-label="Location">us-east-1</span>
             </div>
             <div class="instance-menu dropdown">
@@ -473,9 +470,9 @@
             <div class="metrics">
                 <div class="metric metric-utilization">
                     <div class="metric-bar">
-                        <div class="metric-fill" style="width: 65%"></div>
+                        <div class="metric-fill" style="width: 15%"></div>
                     </div>
-                    <div class="metric-tooltip">Utilization: 65%</div>
+                    <div class="metric-tooltip">Utilization: 15%</div>
                 </div>
                 <div class="metric metric-saturation">
                     <div class="metric-bar">
@@ -485,9 +482,9 @@
                 </div>
                 <div class="metric metric-error">
                     <div class="metric-bar">
-                        <div class="metric-fill" style="width: 2%"></div>
+                        <div class="metric-fill" style="width: 62%"></div>
                     </div>
-                    <div class="metric-tooltip">Error Rate: 0.2%</div>
+                    <div class="metric-tooltip">Error Rate: 62%</div>
                 </div>
                 <div class="metric metric-latency">
                     <div class="metric-bar">
@@ -497,25 +494,24 @@
                 </div>
                 <div class="metric metric-uptime">
                     <div class="metric-bar">
-                        <div class="metric-fill" style="width: 99.9%"></div>
+                        <div class="metric-fill" style="width: 20.9%"></div>
                     </div>
-                    <div class="metric-tooltip">Uptime: 99.9%</div>
+                    <div class="metric-tooltip">Uptime: 20.9%</div>
                 </div>
             </div>
         </div>
 
-        <!-- Instance 2: Warning -->
-        <div class="instance">
-            <div class="heartbeat warning">♥</div>
-            <div class="instance-name">staging-api-02</div>
+        <!-- Instance 2 -->
+        <div class="instance warning">
+            <div class="instance-name">papi</div>
             <div class="instance-tags">
-                <span class="tag" data-label="Type">api</span>
+                <span class="tag" data-label="App">paperless</span>
                 <span class="tag" data-label="Location">eu-west-1</span>
             </div>
             <div class="instance-menu dropdown">
                 <button class="menu-btn" onclick="toggleInstanceMenu(this)">☰</button>
                 <div class="dropdown-menu">
-                    <button class="dropdown-item">�� Terminal</button>
+                    <button class="dropdown-item">💻 Terminal</button>
                     <button class="dropdown-item">💾 Backup</button>
                     <button class="dropdown-item">⬆️ Upgrade</button>
                     <button class="dropdown-item">🔄 Reboot</button>
@@ -556,12 +552,11 @@
             </div>
         </div>
 
-        <!-- Instance 3: Critical -->
+        <!-- Instance 3 -->
         <div class="instance">
-            <div class="heartbeat critical">♥</div>
-            <div class="instance-name">worker-queue-03</div>
+            <div class="instance-name">ci</div>
             <div class="instance-tags">
-                <span class="tag" data-label="Type">worker</span>
+                <span class="tag" data-label="App">buildbot</span>
                 <span class="tag" data-label="Location">ap-south-1</span>
             </div>
             <div class="instance-menu dropdown">
@@ -608,12 +603,11 @@
             </div>
         </div>
 
-        <!-- Instance 4: Healthy -->
-        <div class="instance">
-            <div class="heartbeat healthy">♥</div>
-            <div class="instance-name">db-primary-01</div>
+        <!-- Instance 4 -->
+        <div class="instance healthy">
+            <div class="instance-name">chat</div>
             <div class="instance-tags">
-                <span class="tag" data-label="Type">database</span>
+                <span class="tag" data-label="App">irc</span>
                 <span class="tag" data-label="Location">us-west-2</span>
             </div>
             <div class="instance-menu dropdown">
@@ -680,12 +674,12 @@
         // Toggle instance menu
         function toggleInstanceMenu(button) {
             const menu = button.nextElementSibling;
-            
+
             // Close all other menus
             document.querySelectorAll('.instance-menu .dropdown-menu').forEach(m => {
                 if (m !== menu) m.classList.remove('active');
             });
-            
+
             menu.classList.toggle('active');
         }
 
@@ -711,4 +705,4 @@
         });
     </script>
 </body>
-</html>
\ No newline at end of file
+</html>
-- 
2.51.2

