othman.suseno/atlas
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update UI
Some checks failed
CI / test-build (push) Has been cancelled
Details

Browse Source
This commit is contained in:
othman hendy suseno
2025-12-18 16:13:15 +07:00
parent 78f99033fa
commit 11b8196d84
1 changed files with 19 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
web/templates/storage.html
View File

@@ -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>