From 11b8196d84d1a3b0af232e59c09fd6f91895de4c Mon Sep 17 00:00:00 2001
From: "othman.suseno" <othman.suseno@adastra.id>
Date: Thu, 18 Dec 2025 16:13:15 +0700
Subject: [PATCH] update UI

---
 web/templates/storage.html | 37 +++++++++++++++++++------------------
 1 file changed, 19 insertions(+), 18 deletions(-)

diff --git a/web/templates/storage.html b/web/templates/storage.html
index 9dd2cae..7d06a69 100644
--- a/web/templates/storage.html
+++ b/web/templates/storage.html
@@ -109,23 +109,23 @@
             <h3 class="text-sm font-medium text-slate-300 mb-3">Status Legend</h3>
             <div class="flex flex-wrap gap-4 text-xs">
               <div class="flex items-center gap-2">
-                <div class="w-4 h-4 rounded bg-green-500"></div>
+                <div class="w-4 h-4 rounded bg-slate-700 border border-slate-500"></div>
                 <span class="text-slate-400">Available</span>
               </div>
               <div class="flex items-center gap-2">
-                <div class="w-4 h-4 rounded bg-blue-600"></div>
+                <div class="w-4 h-4 rounded bg-blue-600 border border-blue-500"></div>
                 <span class="text-slate-400">In Use</span>
               </div>
               <div class="flex items-center gap-2">
-                <div class="w-4 h-4 rounded bg-slate-600"></div>
+                <div class="w-4 h-4 rounded bg-slate-600 border border-slate-500"></div>
                 <span class="text-slate-400">Free</span>
               </div>
               <div class="flex items-center gap-2">
-                <div class="w-4 h-4 rounded bg-yellow-500"></div>
+                <div class="w-4 h-4 rounded bg-yellow-600 border border-yellow-500"></div>
                 <span class="text-slate-400">Warning</span>
               </div>
               <div class="flex items-center gap-2">
-                <div class="w-4 h-4 rounded bg-red-500"></div>
+                <div class="w-4 h-4 rounded bg-red-600 border border-red-500"></div>
                 <span class="text-slate-400">Error</span>
               </div>
             </div>
@@ -500,32 +500,33 @@ async function loadDisks() {
     // Update summary
     summaryEl.textContent = `Disk: ${disks.length}`;
 
-    // Visual disk blocks (like QNAP)
+    // Visual disk blocks (like QNAP) - using slate theme
     visualEl.innerHTML = disks.map((disk, index) => {
-      // Available disks = green (since ListDisks only returns available disks)
-      const statusColor = 'bg-green-500';
-      const statusBorder = 'border-green-400';
+      // Available disks - using slate theme colors
+      const statusColor = 'bg-slate-700';
+      const statusBorder = 'border-slate-500';
+      const accentColor = 'border-blue-500';
       
       return `
         <div class="group relative">
-          <div class="disk-block ${statusColor} ${statusBorder} border-2 rounded-xl p-5 min-w-[130px] cursor-pointer transition-all duration-200 hover:scale-110 hover:shadow-xl hover:shadow-green-500/30 hover:-translate-y-1" 
+          <div class="disk-block ${statusColor} ${statusBorder} border-2 rounded-xl p-5 min-w-[130px] cursor-pointer transition-all duration-200 hover:scale-110 hover:shadow-xl hover:shadow-blue-500/20 hover:-translate-y-1 hover:border-blue-500" 
                title="${disk.name} - ${disk.size || 'Unknown size'}\n${disk.path || `/dev/${disk.name}`}"
                onclick="selectDisk('${disk.name}')">
             <div class="flex flex-col items-center justify-center">
-              <div class="w-16 h-16 rounded-xl bg-white/25 flex items-center justify-center mb-3 backdrop-blur-sm border border-white/30">
-                <svg class="w-9 h-9 text-white drop-shadow-sm" fill="currentColor" viewBox="0 0 20 20">
+              <div class="w-16 h-16 rounded-xl bg-slate-600/50 flex items-center justify-center mb-3 backdrop-blur-sm border border-slate-500/50 group-hover:bg-slate-600 group-hover:border-blue-500/50 transition-colors">
+                <svg class="w-9 h-9 text-slate-200 drop-shadow-sm group-hover:text-blue-400 transition-colors" fill="currentColor" viewBox="0 0 20 20">
                   <path d="M4 3a2 2 0 100 4h12a2 2 0 100-4H4z"></path>
                   <path fill-rule="evenodd" d="M3 8h14v7a2 2 0 01-2 2H5a2 2 0 01-2-2V8zm5 3a1 1 0 011-1h2a1 1 0 110 2H9a1 1 0 01-1-1z" clip-rule="evenodd"></path>
                 </svg>
               </div>
               <div class="text-center">
-                <div class="text-white font-bold text-lg mb-1 drop-shadow-sm">${disk.name}</div>
-                <div class="text-white/95 text-sm font-semibold">${disk.size || 'N/A'}</div>
+                <div class="text-slate-100 font-bold text-lg mb-1 drop-shadow-sm group-hover:text-blue-400 transition-colors">${disk.name}</div>
+                <div class="text-slate-300 text-sm font-semibold">${disk.size || 'N/A'}</div>
               </div>
             </div>
             <!-- Status indicator -->
             <div class="absolute top-3 right-3">
-              <div class="w-3.5 h-3.5 bg-white rounded-full shadow-md border-2 border-green-600"></div>
+              <div class="w-3.5 h-3.5 bg-blue-500 rounded-full shadow-md border-2 border-slate-800"></div>
             </div>
           </div>
         </div>
@@ -535,7 +536,7 @@ async function loadDisks() {
     // Detailed disk list
     listEl.innerHTML = disks.map(disk => {
       const status = 'Available';
-      const statusColor = 'bg-green-900 text-green-300';
+      const statusColor = 'bg-slate-700 text-slate-200';
       const diskPath = disk.path || `/dev/${disk.name}`;
       
       return `
@@ -543,8 +544,8 @@ async function loadDisks() {
           <div class="flex items-center justify-between">
             <div class="flex items-center gap-4 flex-1">
               <!-- Disk Icon -->
-              <div class="w-12 h-12 rounded-lg bg-green-500 flex items-center justify-center flex-shrink-0">
-                <svg class="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 20 20">
+              <div class="w-12 h-12 rounded-lg bg-slate-700 border border-slate-600 flex items-center justify-center flex-shrink-0">
+                <svg class="w-6 h-6 text-slate-300" fill="currentColor" viewBox="0 0 20 20">
                   <path d="M4 3a2 2 0 100 4h12a2 2 0 100-4H4z"></path>
                   <path fill-rule="evenodd" d="M3 8h14v7a2 2 0 01-2 2H5a2 2 0 01-2-2V8zm5 3a1 1 0 011-1h2a1 1 0 110 2H9a1 1 0 01-1-1z" clip-rule="evenodd"></path>
                 </svg>