add docker version

asf-cloud-server/monitor/monitor.html

@@ -5,6 +5,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>ASF Infrastructure Monitor</title>
+    <link rel="icon" type="image/png" href="/static/app logo.png">
     <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;700&display=swap" rel="stylesheet">
@@ -32,6 +33,8 @@
             margin: 0;
             padding: 20px;
             min-height: 100vh;
+            display: flex;
+            flex-direction: column;
         }
 
         header {
@@ -40,6 +43,26 @@
             animation: fadeInDown 0.8s ease-out;
         }
 
+        .header-logo {
+            height: 80px;
+            margin-bottom: 15px;
+            filter: drop-shadow(0 0 10px rgba(56, 189, 248, 0.3));
+        }
+
+        h1 {
+            font-size: 2.5rem;
+            font-weight: 700;
+            margin-bottom: 10px;
+            background: linear-gradient(to right, var(--accent-blue), var(--accent-purple));
+            -webkit-background-clip: text;
+            background-clip: text;
+            -webkit-text-fill-color: transparent;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 15px;
+        }
+
         header p {
             color: var(--text-dim);
             font-size: 1.1rem;
@@ -51,6 +74,7 @@
             gap: 30px;
             max-width: 1400px;
             margin: 0 auto;
+            flex: 1;
         }
 
         .card {
@@ -221,6 +245,13 @@
             font-weight: 500;
         }
 
+        .service-logo {
+            width: 32px;
+            height: 32px;
+            object-fit: contain;
+            border-radius: 6px;
+        }
+
         .service-status {
             display: flex;
             align-items: center;
@@ -229,6 +260,23 @@
             font-weight: 600;
         }
 
+        footer {
+            text-align: center;
+            margin-top: 50px;
+            padding: 20px;
+            border-top: 1px solid var(--glass-border);
+        }
+
+        .footer-logo {
+            height: 60px;
+            opacity: 0.8;
+            transition: opacity 0.3s ease;
+        }
+
+        .footer-logo:hover {
+            opacity: 1;
+        }
+
         @keyframes fadeInDown {
             from {
                 opacity: 0;
@@ -284,7 +332,8 @@
     </div>
 
     <header>
-        <h1><i class="fas fa-shield-halved"></i> ASF Infrastructure Monitor</h1>
+        <img src="/static/app image.png" alt="ASF Logo" class="header-logo">
+        <h1>ASF Infrastructure Monitor</h1>
         <p>Real-time system health and service availability</p>
     </header>
 
@@ -387,6 +436,10 @@
         </div>
     </div>
 
+    <footer>
+        <img src="/static/Nabd.png" alt="Nabd Logo" class="footer-logo">
+    </footer>
+
     <script>
         const charts = {};
 
@@ -459,7 +512,7 @@
                 serviceList.innerHTML = data.services.map(s => `
                     <li class="service-item">
                         <div class="service-name">
-                            <i class="fas ${getServiceIcon(s.name)}"></i>
+                            <img src="${getServiceLogo(s.name)}" class="service-logo" onerror="this.src='https://via.placeholder.com/32?text=${s.name.charAt(0)}'">
                             ${s.name}
                         </div>
                         <div class="service-status" style="color: ${s.status === 'online' ? 'var(--status-green)' : 'var(--status-red)'}">
@@ -477,16 +530,16 @@
             }
         }
 
-        function getServiceIcon(name) {
-            const icons = {
-                'Gitea': 'fa-code-branch',
-                'OpenProject': 'fa-tasks',
-                'Draw.io': 'fa-project-diagram',
-                'TestArena': 'fa-vial',
-                'TBM': 'fa-microchip',
-                'Board': 'fa-chalkboard'
+        function getServiceLogo(name) {
+            const logos = {
+                'Gitea': 'https://gitea.io/images/gitea.png',
+                'OpenProject': '/static/openproject_files/openproject-logo-centered-blue-background-d7fcb3fb.png',
+                'Draw.io': 'https://app.diagrams.net/images/logo-flat.svg',
+                'TestArena': '/static/testarena.png',
+                'TBM': '/static/tbm.ico',
+                'Board': 'https://excalidraw.com/favicon-32x32.png'
             };
-            return icons[name] || 'fa-globe';
+            return logos[name] || '';
         }
 
         // Initialize