0.9, color schemes

docker-compose.yml

@@ -4,10 +4,12 @@ services:
       context: .
       dockerfile: Dockerfile
     container_name: k8s-pulse
+    user: "${UID:-1000}:${GID:-1000}"
     ports:
       - "5000:5000"
     environment:
-      - KUBECONFIG=/home/nonroot/.kube/config
+      - KUBECONFIG=/tmp/config
+      - HOME=/tmp
     volumes:
-      - ${KUBECONFIG:-~/.kube/config}:/home/nonroot/.kube/config:ro
+      - ${KUBECONFIG:-/home/builder/.kube/config}:/tmp/config:ro
     restart: unless-stopped

static/app.js

@@ -78,6 +78,65 @@
     };
 })();
 
+const palettes = {
+    dark: {
+        nodeCP: 0x1e1b4b, nodeWorker: 0x1e293b, frameCP: 0xa855f7, frameWorker: 0x3b82f6,
+        runColor: 0x10b981, runEmissive: 0x059669,
+        pendColor: 0xf59e0b, pendEmissive: 0xd97706,
+        succColor: 0x94a3b8, succEmissive: 0x475569,
+        failColor: 0xef4444, failEmissive: 0xdc2626,
+        unusedColor: 0x64748b, unusedEmissive: 0x334155,
+        textColCP: '#f3e8ff', textBgCP: 'rgba(46, 16, 101, 0.92)',
+        textColW: '#f8fafc', textBgW: 'rgba(15, 23, 42, 0.85)',
+        gridMain: 0x3b82f6, gridBg: 0x1e293b
+    },
+    neon: {
+        nodeCP: 0x101010, nodeWorker: 0x141414, frameCP: 0xff00ff, frameWorker: 0x00ff00,
+        runColor: 0x00ff00, runEmissive: 0x00aa00,
+        pendColor: 0xffff00, pendEmissive: 0xaaaa00,
+        succColor: 0x00ffff, succEmissive: 0x00aaaa,
+        failColor: 0xff0000, failEmissive: 0xaa0000,
+        unusedColor: 0x004400, unusedEmissive: 0x002200,
+        textColCP: '#ff00ff', textBgCP: 'rgba(20, 0, 20, 0.9)',
+        textColW: '#00ff00', textBgW: 'rgba(0, 20, 0, 0.9)',
+        gridMain: 0x00ff00, gridBg: 0x101010
+    },
+    light: {
+        nodeCP: 0xe2e8f0, nodeWorker: 0xf1f5f9, frameCP: 0x9333ea, frameWorker: 0x2563eb,
+        runColor: 0x059669, runEmissive: 0x047857,
+        pendColor: 0xd97706, pendEmissive: 0xb45309,
+        succColor: 0x64748b, succEmissive: 0x475569,
+        failColor: 0xdc2626, failEmissive: 0xb91c1c,
+        unusedColor: 0x94a3b8, unusedEmissive: 0x64748b,
+        textColCP: '#4c1d95', textBgCP: 'rgba(233, 213, 255, 0.9)',
+        textColW: '#0f172a', textBgW: 'rgba(241, 245, 249, 0.9)',
+        gridMain: 0x94a3b8, gridBg: 0xe2e8f0
+    },
+    gray: {
+        nodeCP: 0x374151, nodeWorker: 0x4b5563, frameCP: 0x9ca3af, frameWorker: 0xd1d5db,
+        runColor: 0x6ee7b7, runEmissive: 0x34d399,
+        pendColor: 0xfcd34d, pendEmissive: 0xfbbf24,
+        succColor: 0xe5e7eb, succEmissive: 0xd1d5db,
+        failColor: 0xfca5a5, failEmissive: 0xf87171,
+        unusedColor: 0x9ca3af, unusedEmissive: 0x6b7280,
+        textColCP: '#f3f4f6', textBgCP: 'rgba(55, 65, 81, 0.9)',
+        textColW: '#f9fafb', textBgW: 'rgba(75, 85, 99, 0.9)',
+        gridMain: 0x9ca3af, gridBg: 0x374151
+    },
+    bw: {
+        nodeCP: 0xeeeeee, nodeWorker: 0xf0f0f0, frameCP: 0x000000, frameWorker: 0x555555,
+        runColor: 0x666666, runEmissive: 0x444444,
+        pendColor: 0x999999, pendEmissive: 0x777777,
+        succColor: 0xcccccc, succEmissive: 0xaaaaaa,
+        failColor: 0x000000, failEmissive: 0x000000,
+        unusedColor: 0xdddddd, unusedEmissive: 0xbbbbbb,
+        textColCP: '#000000', textBgCP: 'rgba(255, 255, 255, 0.9)',
+        textColW: '#333333', textBgW: 'rgba(255, 255, 255, 0.9)',
+        gridMain: 0x000000, gridBg: 0xffffff
+    }
+};
+
+let currentTheme = 'dark';
 let currentMetric = 'cpu';
 let clusterData = null;
 
@@ -140,6 +199,45 @@ document.getElementById('btn-auto-rotate').addEventListener('click', () => {
     }
 });
 
+document.getElementById('theme-select').addEventListener('change', (e) => {
+    const theme = e.target.value;
+    currentTheme = theme;
+    if (theme === 'dark') {
+        document.documentElement.removeAttribute('data-theme');
+        if (typeof scene !== 'undefined' && scene) {
+            scene.background = new THREE.Color(0x090d16);
+            scene.fog.color = new THREE.Color(0x090d16);
+        }
+    } else {
+        document.documentElement.setAttribute('data-theme', theme);
+        if (typeof scene !== 'undefined' && scene) {
+            let bgColor = 0x090d16;
+            if (theme === 'neon') bgColor = 0x000000;
+            if (theme === 'light') bgColor = 0xf1f5f9;
+            if (theme === 'gray') bgColor = 0x4b5563;
+            if (theme === 'bw') bgColor = 0xffffff;
+            scene.background = new THREE.Color(bgColor);
+            scene.fog.color = new THREE.Color(bgColor);
+        }
+    }
+    
+    if (typeof scene !== 'undefined' && scene) {
+        const grid = scene.getObjectByName('gridHelper');
+        if (grid) {
+            scene.remove(grid);
+            const p = palettes[currentTheme] || palettes.dark;
+            const newGrid = new THREE.GridHelper(600, 60, p.gridMain, p.gridBg);
+            newGrid.position.y = -0.5;
+            newGrid.name = 'gridHelper';
+            scene.add(newGrid);
+        }
+    }
+    
+    if (clusterData) {
+        build3DCluster(clusterData);
+    }
+});
+
 // Initialize 3D Engine
 function init3D() {
     const container = document.getElementById('chart-container');
@@ -187,8 +285,10 @@ function init3D() {
     scene.add(purplePointLight);
 
     // Grid Floor
-    const gridHelper = new THREE.GridHelper(600, 60, 0x3b82f6, 0x1e293b);
+    const p = palettes[currentTheme] || palettes.dark;
+    const gridHelper = new THREE.GridHelper(600, 60, p.gridMain, p.gridBg);
     gridHelper.position.y = -0.5;
+    gridHelper.name = 'gridHelper';
     scene.add(gridHelper);
 
     // Orbit Controls
@@ -387,9 +487,10 @@ function build3DCluster(data) {
             (n.data.roles && (n.data.roles.includes('control-plane') || n.data.roles.includes('master'))) ||
             n.data.name.includes('control-plane') || n.data.name.includes('master');
 
+        const p = palettes[currentTheme] || palettes.dark;
         const platformGeo = new THREE.BoxGeometry(nw, 1.5, nh);
         const platformMat = new THREE.MeshStandardMaterial({
-            color: isControlPlane ? 0x1e1b4b : 0x1e293b,
+            color: isControlPlane ? p.nodeCP : p.nodeWorker,
             roughness: 0.5,
             metalness: 0.3,
             transparent: true,
@@ -412,7 +513,7 @@ function build3DCluster(data) {
 
         // Platform Border Frame
         const edges = new THREE.EdgesGeometry(platformGeo);
-        const frameColor = isControlPlane ? 0xa855f7 : 0x3b82f6;
+        const frameColor = isControlPlane ? p.frameCP : p.frameWorker;
         const lineMat = new THREE.LineBasicMaterial({ color: frameColor, linewidth: isControlPlane ? 3 : 2 });
         const wireframe = new THREE.LineSegments(edges, lineMat);
         platformMesh.add(wireframe);
@@ -422,8 +523,8 @@ function build3DCluster(data) {
 
         // Node Label Sprite (Larger, bold font for control-plane/master nodes)
         const fontSize = isControlPlane ? 34 : 24;
-        const textColor = isControlPlane ? '#f3e8ff' : '#f8fafc';
+        const textColor = isControlPlane ? p.textColCP : p.textColW;
-        const bgColor = isControlPlane ? 'rgba(46, 16, 101, 0.92)' : 'rgba(15, 23, 42, 0.85)';
+        const bgColor = isControlPlane ? p.textBgCP : p.textBgW;
 
         const sprite = createTextSprite(n.data.name, fontSize, textColor, bgColor, true, isControlPlane);
         sprite.position.set(centerX, isControlPlane ? 16 : 14, centerZ - nh / 2 - 2);
@@ -450,25 +551,26 @@ function build3DCluster(data) {
         const podGeo = new THREE.BoxGeometry(pw, 1, pd);
 
         // Color & Material based on Pod Status
-        let color = 0x10b981; // Running emerald
+        const pTheme = palettes[currentTheme] || palettes.dark;
-        let emissive = 0x059669;
+        let color = pTheme.runColor;
+        let emissive = pTheme.runEmissive;
         let opacity = 0.9;
         let transparent = false;
 
         if (p.data.type === 'unused') {
-            color = 0x64748b;
+            color = pTheme.unusedColor;
-            emissive = 0x334155;
+            emissive = pTheme.unusedEmissive;
             opacity = 0.25;
             transparent = true;
         } else if (p.data.status === 'Pending') {
-            color = 0xf59e0b;
+            color = pTheme.pendColor;
-            emissive = 0xd97706;
+            emissive = pTheme.pendEmissive;
         } else if (p.data.status === 'Succeeded') {
-            color = 0x94a3b8;
+            color = pTheme.succColor;
-            emissive = 0x475569;
+            emissive = pTheme.succEmissive;
         } else if (p.data.status !== 'Running') {
-            color = 0xef4444;
+            color = pTheme.failColor;
-            emissive = 0xdc2626;
+            emissive = pTheme.failEmissive;
         }
 
         const podMat = new THREE.MeshStandardMaterial({

static/style.css

@@ -14,6 +14,93 @@
     --color-failed: #ef4444;
     --color-unused: rgba(148, 163, 184, 0.2);
     --color-node: rgba(30, 41, 59, 0.9);
+
+    --gradient-1: rgba(59, 130, 246, 0.15);
+    --gradient-2: rgba(139, 92, 246, 0.15);
+}
+
+/* Neon Theme */
+:root[data-theme="neon"] {
+    --bg-color: #000000;
+    --text-main: #00ff00;
+    --text-muted: #008800;
+    --accent: #ff00ff;
+    --accent-hover: #ff66ff;
+    --glass-bg: rgba(0, 20, 0, 0.8);
+    --glass-border: rgba(0, 255, 0, 0.5);
+    
+    --color-running: #00ff00;
+    --color-pending: #ffff00;
+    --color-succeeded: #00ffff;
+    --color-failed: #ff0000;
+    --color-unused: rgba(0, 255, 0, 0.2);
+    --color-node: rgba(20, 20, 20, 0.9);
+    
+    --gradient-1: rgba(0, 255, 0, 0.2);
+    --gradient-2: rgba(255, 0, 255, 0.2);
+}
+
+/* Light Theme */
+:root[data-theme="light"] {
+    --bg-color: #f1f5f9;
+    --text-main: #0f172a;
+    --text-muted: #475569;
+    --accent: #2563eb;
+    --accent-hover: #1d4ed8;
+    --glass-bg: rgba(255, 255, 255, 0.75);
+    --glass-border: rgba(0, 0, 0, 0.12);
+    
+    --color-running: #059669;
+    --color-pending: #d97706;
+    --color-succeeded: #64748b;
+    --color-failed: #dc2626;
+    --color-unused: rgba(100, 116, 139, 0.2);
+    --color-node: rgba(241, 245, 249, 0.9);
+    
+    --gradient-1: rgba(37, 99, 235, 0.1);
+    --gradient-2: rgba(147, 51, 234, 0.1);
+}
+
+/* Gray Theme */
+:root[data-theme="gray"] {
+    --bg-color: #4b5563;
+    --text-main: #f9fafb;
+    --text-muted: #d1d5db;
+    --accent: #9ca3af;
+    --accent-hover: #d1d5db;
+    --glass-bg: rgba(55, 65, 81, 0.75);
+    --glass-border: rgba(255, 255, 255, 0.2);
+    
+    --color-running: #6ee7b7;
+    --color-pending: #fcd34d;
+    --color-succeeded: #e5e7eb;
+    --color-failed: #fca5a5;
+    --color-unused: rgba(209, 213, 219, 0.2);
+    --color-node: rgba(55, 65, 81, 0.9);
+    
+    --gradient-1: rgba(156, 163, 175, 0.2);
+    --gradient-2: rgba(209, 213, 219, 0.2);
+}
+
+/* Black and White Theme */
+:root[data-theme="bw"] {
+    --bg-color: #ffffff;
+    --text-main: #000000;
+    --text-muted: #333333;
+    --accent: #000000;
+    --accent-hover: #555555;
+    --glass-bg: rgba(255, 255, 255, 0.9);
+    --glass-border: rgba(0, 0, 0, 0.3);
+    
+    --color-running: #666666;
+    --color-pending: #999999;
+    --color-succeeded: #cccccc;
+    --color-failed: #000000;
+    --color-unused: rgba(0, 0, 0, 0.1);
+    --color-node: rgba(240, 240, 240, 0.9);
+    
+    --gradient-1: rgba(0, 0, 0, 0.05);
+    --gradient-2: rgba(0, 0, 0, 0.05);
 }
 
 * {
@@ -29,8 +116,8 @@ body {
     min-height: 100vh;
     overflow: hidden;
     background-image: 
-        radial-gradient(at 0% 0%, rgba(59, 130, 246, 0.15) 0px, transparent 50%),
+        radial-gradient(at 0% 0%, var(--gradient-1) 0px, transparent 50%),
-        radial-gradient(at 100% 100%, rgba(139, 92, 246, 0.15) 0px, transparent 50%);
+        radial-gradient(at 100% 100%, var(--gradient-2) 0px, transparent 50%);
 }
 
 .app-container {
@@ -124,6 +211,37 @@ body {
     box-shadow: 0 2px 6px rgba(59, 130, 246, 0.4);
 }
 
+.theme-selector {
+    display: flex;
+    align-items: center;
+}
+
+.theme-select {
+    background: rgba(15, 23, 42, 0.6);
+    color: var(--text-main);
+    border: 1px solid var(--glass-border);
+    padding: 0.5rem 1rem;
+    font-size: 0.875rem;
+    font-weight: 600;
+    border-radius: 0.5rem;
+    cursor: pointer;
+    outline: none;
+    appearance: none;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    transition: all 0.2s ease;
+}
+
+.theme-select:hover {
+    background: rgba(30, 41, 59, 0.9);
+    border-color: rgba(255, 255, 255, 0.25);
+}
+
+.theme-select option {
+    background: var(--bg-color);
+    color: var(--text-main);
+}
+
 .action-buttons {
     display: flex;
     gap: 0.5rem;

templates/index.html

@@ -26,6 +26,15 @@
                     <button class="toggle-btn active" id="btn-cpu">CPU Consumption</button>
                     <button class="toggle-btn" id="btn-mem">Memory Consumption</button>
                 </div>
+                <div class="theme-selector">
+                    <select id="theme-select" class="theme-select glass-panel">
+                        <option value="dark">Dark Theme</option>
+                        <option value="neon">Neon Theme</option>
+                        <option value="light">Light Theme</option>
+                        <option value="gray">Gray Theme</option>
+                        <option value="bw">Black & White</option>
+                    </select>
+                </div>
                 <div class="action-buttons">
                     <button class="icon-btn" id="btn-reset-cam" title="Reset Camera View">
                         <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">

version.ini

@@ -1,2 +1,2 @@
 [metadata]
-version = 0.8
+version = 0.9