feat: enhance Firewall, Backup, Storage, and Power Controls sections with improved layouts and detailed information for better user interaction
This commit is contained in:
@@ -316,31 +316,76 @@
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
|
||||
<!-- Firewall Manager -->
|
||||
<div class="group relative overflow-hidden bg-gradient-to-br from-warning/5 via-background-secondary to-background-secondary border border-warning/20 hover:border-warning/40 rounded-3xl p-6 transition-all duration-500 hover:shadow-2xl hover:shadow-warning/10">
|
||||
<div class="absolute top-0 right-0 w-48 h-48 bg-warning/5 rounded-full blur-3xl -translate-y-1/2 translate-x-1/2 group-hover:scale-150 transition-transform duration-700"></div>
|
||||
<div class="relative z-10 h-full flex flex-col">
|
||||
<div class="w-12 h-12 rounded-2xl bg-gradient-to-br from-warning to-warning/70 flex items-center justify-center shadow-lg shadow-warning/30 mb-4">
|
||||
<x-ri-shield-keyhole-line class="size-6 text-white" />
|
||||
<div class="flex items-start justify-between mb-4">
|
||||
<div class="w-12 h-12 rounded-2xl bg-gradient-to-br from-warning to-warning/70 flex items-center justify-center shadow-lg shadow-warning/30">
|
||||
<x-ri-shield-keyhole-line class="size-6 text-white" />
|
||||
</div>
|
||||
<div class="flex gap-1.5">
|
||||
<span class="px-2 py-1 bg-warning/10 text-warning text-xs font-medium rounded-lg">Inbound</span>
|
||||
<span class="px-2 py-1 bg-warning/10 text-warning text-xs font-medium rounded-lg">Outbound</span>
|
||||
</div>
|
||||
</div>
|
||||
<h3 class="text-lg font-bold text-color-base mb-2">Firewall</h3>
|
||||
<p class="text-color-muted text-sm leading-relaxed mb-4 flex-1">Custom rules, IP aliases and real-time logs.</p>
|
||||
<div class="flex flex-wrap gap-1.5">
|
||||
<span class="px-2 py-1 bg-warning/10 text-warning text-xs font-medium rounded-lg">Inbound</span>
|
||||
<span class="px-2 py-1 bg-warning/10 text-warning text-xs font-medium rounded-lg">Outbound</span>
|
||||
<h3 class="text-lg font-bold text-color-base mb-2">Firewall Manager</h3>
|
||||
<p class="text-color-muted text-sm leading-relaxed mb-4">Create custom rules, manage IP aliases, and monitor real-time traffic logs to protect your server.</p>
|
||||
<!-- Mock Firewall Rules -->
|
||||
<div class="space-y-2 mt-auto">
|
||||
<div class="flex items-center gap-3 p-2.5 bg-background/50 rounded-xl border border-neutral/10">
|
||||
<div class="w-2 h-2 rounded-full bg-success"></div>
|
||||
<span class="text-xs text-color-muted flex-1">Allow SSH (22/tcp)</span>
|
||||
<span class="text-xs text-success font-medium">Active</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-3 p-2.5 bg-background/50 rounded-xl border border-neutral/10">
|
||||
<div class="w-2 h-2 rounded-full bg-success"></div>
|
||||
<span class="text-xs text-color-muted flex-1">Allow HTTP/S (80,443)</span>
|
||||
<span class="text-xs text-success font-medium">Active</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-3 p-2.5 bg-background/50 rounded-xl border border-neutral/10">
|
||||
<div class="w-2 h-2 rounded-full bg-error"></div>
|
||||
<span class="text-xs text-color-muted flex-1">Block 192.168.1.0/24</span>
|
||||
<span class="text-xs text-error font-medium">Denied</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Backup & Snapshots -->
|
||||
<div class="group relative overflow-hidden bg-gradient-to-br from-success/5 via-background-secondary to-background-secondary border border-success/20 hover:border-success/40 rounded-3xl p-6 transition-all duration-500 hover:shadow-2xl hover:shadow-success/10">
|
||||
<div class="absolute bottom-0 left-0 w-48 h-48 bg-success/5 rounded-full blur-3xl translate-y-1/2 -translate-x-1/2 group-hover:scale-150 transition-transform duration-700"></div>
|
||||
<div class="relative z-10 h-full flex flex-col">
|
||||
<div class="w-12 h-12 rounded-2xl bg-gradient-to-br from-success to-success/70 flex items-center justify-center shadow-lg shadow-success/30 mb-4">
|
||||
<x-ri-database-2-line class="size-6 text-white" />
|
||||
<div class="flex items-start justify-between mb-4">
|
||||
<div class="w-12 h-12 rounded-2xl bg-gradient-to-br from-success to-success/70 flex items-center justify-center shadow-lg shadow-success/30">
|
||||
<x-ri-database-2-line class="size-6 text-white" />
|
||||
</div>
|
||||
<div class="px-2.5 py-1 bg-success/10 rounded-lg border border-success/20">
|
||||
<span class="text-xs text-success font-medium">Auto-enabled</span>
|
||||
</div>
|
||||
</div>
|
||||
<h3 class="text-lg font-bold text-color-base mb-2">Backups</h3>
|
||||
<p class="text-color-muted text-sm leading-relaxed mb-4 flex-1">Automated snapshots with one-click restore.</p>
|
||||
<div class="p-2.5 bg-success/10 rounded-xl border border-success/20">
|
||||
<div class="flex items-center justify-between text-xs">
|
||||
<span class="text-color-muted">Last backup</span>
|
||||
<span class="text-success font-medium">2h ago</span>
|
||||
<h3 class="text-lg font-bold text-color-base mb-2">Backup & Snapshots</h3>
|
||||
<p class="text-color-muted text-sm leading-relaxed mb-4">Automated daily snapshots with instant one-click restore. Keep your data safe with point-in-time recovery.</p>
|
||||
<!-- Mock Backup List -->
|
||||
<div class="space-y-2 mt-auto">
|
||||
<div class="flex items-center justify-between p-2.5 bg-background/50 rounded-xl border border-neutral/10">
|
||||
<div class="flex items-center gap-2">
|
||||
<x-ri-checkbox-circle-fill class="size-4 text-success" />
|
||||
<span class="text-xs text-color-base font-medium">Daily Backup</span>
|
||||
</div>
|
||||
<span class="text-xs text-color-muted">2h ago</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between p-2.5 bg-background/50 rounded-xl border border-neutral/10">
|
||||
<div class="flex items-center gap-2">
|
||||
<x-ri-checkbox-circle-fill class="size-4 text-success" />
|
||||
<span class="text-xs text-color-base font-medium">Weekly Snapshot</span>
|
||||
</div>
|
||||
<span class="text-xs text-color-muted">3 days ago</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between p-2.5 bg-background/50 rounded-xl border border-neutral/10">
|
||||
<div class="flex items-center gap-2">
|
||||
<x-ri-time-line class="size-4 text-warning" />
|
||||
<span class="text-xs text-color-base font-medium">Next backup</span>
|
||||
</div>
|
||||
<span class="text-xs text-warning font-medium">in 22h</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -351,33 +396,87 @@
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
|
||||
<!-- Storage Manager -->
|
||||
<div class="group relative overflow-hidden bg-gradient-to-br from-purple-500/5 via-background-secondary to-background-secondary border border-purple-500/20 hover:border-purple-500/40 rounded-3xl p-6 transition-all duration-500 hover:shadow-2xl hover:shadow-purple-500/10">
|
||||
<div class="absolute top-0 left-0 w-48 h-48 bg-purple-500/5 rounded-full blur-3xl -translate-y-1/2 -translate-x-1/2 group-hover:scale-150 transition-transform duration-700"></div>
|
||||
<div class="relative z-10 h-full flex flex-col">
|
||||
<div class="w-12 h-12 rounded-2xl bg-gradient-to-br from-purple-500 to-purple-500/70 flex items-center justify-center shadow-lg shadow-purple-500/30 mb-4">
|
||||
<x-ri-hard-drive-2-line class="size-6 text-white" />
|
||||
</div>
|
||||
<h3 class="text-lg font-bold text-color-base mb-2">Storage</h3>
|
||||
<p class="text-color-muted text-sm leading-relaxed mb-4 flex-1">Add, resize, or remove virtual disks.</p>
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="flex-1 h-2 bg-background rounded-full overflow-hidden">
|
||||
<div class="h-full w-[65%] bg-gradient-to-r from-purple-500 to-purple-400 rounded-full"></div>
|
||||
<div class="flex items-start justify-between mb-4">
|
||||
<div class="w-12 h-12 rounded-2xl bg-gradient-to-br from-purple-500 to-purple-500/70 flex items-center justify-center shadow-lg shadow-purple-500/30">
|
||||
<x-ri-hard-drive-2-line class="size-6 text-white" />
|
||||
</div>
|
||||
<div class="text-right">
|
||||
<div class="text-lg font-bold text-color-base">65 GB</div>
|
||||
<div class="text-xs text-color-muted">of 100 GB used</div>
|
||||
</div>
|
||||
</div>
|
||||
<h3 class="text-lg font-bold text-color-base mb-2">Storage Manager</h3>
|
||||
<p class="text-color-muted text-sm leading-relaxed mb-4">Add, resize, or remove virtual disks on the fly. Expand storage without downtime.</p>
|
||||
<!-- Storage Breakdown -->
|
||||
<div class="space-y-3 mt-auto">
|
||||
<div>
|
||||
<div class="flex items-center justify-between text-xs mb-1.5">
|
||||
<span class="text-color-muted">System (sda1)</span>
|
||||
<span class="text-purple-400 font-medium">45 GB</span>
|
||||
</div>
|
||||
<div class="h-2 bg-background rounded-full overflow-hidden">
|
||||
<div class="h-full w-[45%] bg-gradient-to-r from-purple-500 to-purple-400 rounded-full"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="flex items-center justify-between text-xs mb-1.5">
|
||||
<span class="text-color-muted">Data (sdb1)</span>
|
||||
<span class="text-purple-400 font-medium">20 GB</span>
|
||||
</div>
|
||||
<div class="h-2 bg-background rounded-full overflow-hidden">
|
||||
<div class="h-full w-[20%] bg-gradient-to-r from-purple-500 to-purple-400 rounded-full"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-between pt-2 border-t border-neutral/10">
|
||||
<span class="text-xs text-color-muted">Available</span>
|
||||
<span class="text-xs text-success font-medium">35 GB free</span>
|
||||
</div>
|
||||
<span class="text-xs text-color-muted whitespace-nowrap">65/100GB</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Power Controls -->
|
||||
<div class="group relative overflow-hidden bg-gradient-to-br from-error/5 via-background-secondary to-background-secondary border border-error/20 hover:border-error/40 rounded-3xl p-6 transition-all duration-500 hover:shadow-2xl hover:shadow-error/10">
|
||||
<div class="absolute bottom-0 right-0 w-48 h-48 bg-error/5 rounded-full blur-3xl translate-y-1/2 translate-x-1/2 group-hover:scale-150 transition-transform duration-700"></div>
|
||||
<div class="relative z-10 h-full flex flex-col">
|
||||
<div class="w-12 h-12 rounded-2xl bg-gradient-to-br from-error to-error/70 flex items-center justify-center shadow-lg shadow-error/30 mb-4">
|
||||
<x-ri-shut-down-line class="size-6 text-white" />
|
||||
<div class="flex items-start justify-between mb-4">
|
||||
<div class="w-12 h-12 rounded-2xl bg-gradient-to-br from-error to-error/70 flex items-center justify-center shadow-lg shadow-error/30">
|
||||
<x-ri-shut-down-line class="size-6 text-white" />
|
||||
</div>
|
||||
<div class="flex items-center gap-2 px-2.5 py-1 bg-success/10 rounded-lg border border-success/20">
|
||||
<div class="w-2 h-2 rounded-full bg-success animate-pulse"></div>
|
||||
<span class="text-xs text-success font-medium">Running</span>
|
||||
</div>
|
||||
</div>
|
||||
<h3 class="text-lg font-bold text-color-base mb-2">Power</h3>
|
||||
<p class="text-color-muted text-sm leading-relaxed mb-4 flex-1">Start, stop, reboot, and power cycle.</p>
|
||||
<div class="flex gap-1.5">
|
||||
<span class="flex-1 py-1.5 bg-success/15 text-success text-xs font-medium rounded-lg text-center">Start</span>
|
||||
<span class="flex-1 py-1.5 bg-warning/15 text-warning text-xs font-medium rounded-lg text-center">Reboot</span>
|
||||
<span class="flex-1 py-1.5 bg-error/15 text-error text-xs font-medium rounded-lg text-center">Stop</span>
|
||||
<h3 class="text-lg font-bold text-color-base mb-2">Power Controls</h3>
|
||||
<p class="text-color-muted text-sm leading-relaxed mb-4">Full control over your server's power state. Start, stop, reboot, or force power cycle instantly.</p>
|
||||
<!-- Power Actions -->
|
||||
<div class="grid grid-cols-3 gap-2 mb-4">
|
||||
<div class="flex flex-col items-center gap-2 p-3 bg-success/10 hover:bg-success/20 rounded-xl border border-success/20 cursor-pointer transition-colors">
|
||||
<x-ri-play-fill class="size-5 text-success" />
|
||||
<span class="text-xs text-success font-medium">Start</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-center gap-2 p-3 bg-warning/10 hover:bg-warning/20 rounded-xl border border-warning/20 cursor-pointer transition-colors">
|
||||
<x-ri-restart-line class="size-5 text-warning" />
|
||||
<span class="text-xs text-warning font-medium">Reboot</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-center gap-2 p-3 bg-error/10 hover:bg-error/20 rounded-xl border border-error/20 cursor-pointer transition-colors">
|
||||
<x-ri-stop-fill class="size-5 text-error" />
|
||||
<span class="text-xs text-error font-medium">Stop</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Server Stats -->
|
||||
<div class="flex items-center justify-between p-2.5 bg-background/50 rounded-xl border border-neutral/10 mt-auto">
|
||||
<div class="flex items-center gap-2">
|
||||
<x-ri-time-line class="size-4 text-color-muted" />
|
||||
<span class="text-xs text-color-muted">Uptime</span>
|
||||
</div>
|
||||
<span class="text-xs text-color-base font-medium">14d 6h 32m</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user