feat: enhance control panel layout and improve card presentation for better user experience
This commit is contained in:
@@ -218,7 +218,7 @@
|
||||
<div class="container mx-auto px-4">
|
||||
<div class="bg-gradient-to-b from-background-secondary/50 to-background-secondary/20 rounded-3xl p-8 md:p-12">
|
||||
<!-- Section Header -->
|
||||
<div class="max-w-2xl mb-12">
|
||||
<div class="text-center max-w-2xl mx-auto mb-12">
|
||||
<p class="text-sm font-medium text-primary uppercase tracking-wider mb-3">Control Panel</p>
|
||||
<h2 class="text-3xl md:text-4xl font-bold text-color-base mb-4">
|
||||
{{ theme('panel_title', 'Complete Server Management') }}
|
||||
@@ -228,26 +228,26 @@
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Bento Grid -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-12 gap-4 md:gap-6">
|
||||
<!-- Live Telemetry - Large Card -->
|
||||
<div class="lg:col-span-7 group relative overflow-hidden bg-gradient-to-br from-primary/5 via-background-secondary to-background-secondary border border-primary/20 hover:border-primary/40 rounded-3xl p-8 transition-all duration-500 hover:shadow-2xl hover:shadow-primary/10">
|
||||
<!-- Bento Grid - Row 1: Live Telemetry + Firewall -->
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
|
||||
<!-- Live Telemetry -->
|
||||
<div class="group relative overflow-hidden bg-gradient-to-br from-primary/5 via-background-secondary to-background-secondary border border-primary/20 hover:border-primary/40 rounded-3xl p-8 transition-all duration-500 hover:shadow-2xl hover:shadow-primary/10">
|
||||
<div class="absolute top-0 right-0 w-64 h-64 bg-primary/10 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">
|
||||
<div class="flex items-start justify-between mb-6">
|
||||
<div class="w-16 h-16 rounded-2xl bg-gradient-to-br from-primary to-primary/70 flex items-center justify-center shadow-lg shadow-primary/30">
|
||||
<x-ri-line-chart-line class="size-8 text-white" />
|
||||
<div class="flex items-start justify-between mb-5">
|
||||
<div class="w-14 h-14 rounded-2xl bg-gradient-to-br from-primary to-primary/70 flex items-center justify-center shadow-lg shadow-primary/30">
|
||||
<x-ri-line-chart-line class="size-7 text-white" />
|
||||
</div>
|
||||
<div class="flex gap-1">
|
||||
<span class="px-3 py-1 bg-primary/10 text-primary text-xs font-medium rounded-full">CPU</span>
|
||||
<span class="px-3 py-1 bg-primary/10 text-primary text-xs font-medium rounded-full">Memory</span>
|
||||
<span class="px-3 py-1 bg-primary/10 text-primary text-xs font-medium rounded-full">Network</span>
|
||||
<div class="flex gap-1.5">
|
||||
<span class="px-2.5 py-1 bg-primary/10 text-primary text-xs font-medium rounded-full">CPU</span>
|
||||
<span class="px-2.5 py-1 bg-primary/10 text-primary text-xs font-medium rounded-full">RAM</span>
|
||||
<span class="px-2.5 py-1 bg-primary/10 text-primary text-xs font-medium rounded-full">Network</span>
|
||||
</div>
|
||||
</div>
|
||||
<h3 class="text-2xl font-bold text-color-base mb-2">Live Telemetry</h3>
|
||||
<p class="text-color-muted leading-relaxed mb-6">Monitor CPU, memory, network, and disk I/O with interactive charts. Track performance over hours, days, weeks, or months.</p>
|
||||
<h3 class="text-xl font-bold text-color-base mb-2">Live Telemetry</h3>
|
||||
<p class="text-color-muted text-sm leading-relaxed mb-5">Monitor CPU, memory, network, and disk I/O with interactive charts. Track performance over time.</p>
|
||||
<!-- Mock Chart - Animated -->
|
||||
<div style="display: flex; align-items: flex-end; gap: 4px; padding: 16px; background: rgba(0,0,0,0.1); border-radius: 12px; height: 96px;">
|
||||
<div style="display: flex; align-items: flex-end; gap: 3px; padding: 12px; background: rgba(0,0,0,0.1); border-radius: 12px; height: 80px;">
|
||||
<span class="chart-bar" style="--delay: 0s; --h1: 65%; --h2: 40%; --h3: 85%; --h4: 30%;"></span>
|
||||
<span class="chart-bar" style="--delay: 0.1s; --h1: 45%; --h2: 70%; --h3: 35%; --h4: 80%;"></span>
|
||||
<span class="chart-bar" style="--delay: 0.2s; --h1: 80%; --h2: 50%; --h3: 70%; --h4: 45%;"></span>
|
||||
@@ -266,228 +266,212 @@
|
||||
<span class="chart-bar" style="--delay: 0.45s; --h1: 70%; --h2: 50%; --h3: 90%; --h4: 35%;"></span>
|
||||
<span class="chart-bar" style="--delay: 0.55s; --h1: 40%; --h2: 75%; --h3: 55%; --h4: 85%;"></span>
|
||||
<span class="chart-bar" style="--delay: 0.65s; --h1: 90%; --h2: 60%; --h3: 70%; --h4: 45%;"></span>
|
||||
<span class="chart-bar" style="--delay: 0.75s; --h1: 50%; --h2: 40%; --h3: 80%; --h4: 65%;"></span>
|
||||
<span class="chart-bar" style="--delay: 0.85s; --h1: 75%; --h2: 85%; --h3: 35%; --h4: 55%;"></span>
|
||||
<span class="chart-bar" style="--delay: 0.95s; --h1: 35%; --h2: 55%; --h3: 65%; --h4: 90%;"></span>
|
||||
<span class="chart-bar" style="--delay: 1.05s; --h1: 85%; --h2: 45%; --h3: 50%; --h4: 40%;"></span>
|
||||
<span class="chart-bar" style="--delay: 0.05s; --h1: 60%; --h2: 70%; --h3: 85%; --h4: 75%;"></span>
|
||||
<span class="chart-bar" style="--delay: 0.12s; --h1: 45%; --h2: 90%; --h3: 40%; --h4: 60%;"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Firewall - Medium Card -->
|
||||
<div class="lg:col-span-5 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-8 transition-all duration-500 hover:shadow-2xl hover:shadow-warning/10">
|
||||
<div class="absolute bottom-0 left-0 w-48 h-48 bg-warning/10 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-16 h-16 rounded-2xl bg-gradient-to-br from-warning to-warning/70 flex items-center justify-center shadow-lg shadow-warning/30 mb-6">
|
||||
<x-ri-shield-keyhole-line class="size-8 text-white" />
|
||||
</div>
|
||||
<h3 class="text-2xl font-bold text-color-base mb-2">Firewall Manager</h3>
|
||||
<p class="text-color-muted leading-relaxed mb-6 flex-1">Configure inbound and outbound rules, set default policies, create IP aliases and view real-time firewall logs.</p>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<span class="px-3 py-1.5 bg-warning/10 text-warning text-xs font-semibold rounded-lg">Custom Rules</span>
|
||||
<span class="px-3 py-1.5 bg-warning/10 text-warning text-xs font-semibold rounded-lg">IP Aliases</span>
|
||||
<span class="px-3 py-1.5 bg-warning/10 text-warning text-xs font-semibold rounded-lg">Live Logs</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Backups - Medium Card -->
|
||||
<div class="lg:col-span-4 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-8 transition-all duration-500 hover:shadow-2xl hover:shadow-success/10">
|
||||
<div class="relative z-10 h-full flex flex-col">
|
||||
<div class="w-14 h-14 rounded-2xl bg-gradient-to-br from-success to-success/70 flex items-center justify-center shadow-lg shadow-success/30 mb-5">
|
||||
<x-ri-database-2-line class="size-7 text-white" />
|
||||
</div>
|
||||
<h3 class="text-xl font-bold text-color-base mb-2">Backup & Snapshots</h3>
|
||||
<p class="text-color-muted text-sm leading-relaxed mb-4 flex-1">Create manual backups or rely on automated hourly snapshots. One-click restore.</p>
|
||||
<div class="p-3 bg-success/10 rounded-xl border border-success/20">
|
||||
<div class="flex items-center justify-between text-sm">
|
||||
<span class="text-color-muted">Last backup</span>
|
||||
<span class="text-success font-medium">2 hours ago</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Console - Medium Card -->
|
||||
<div class="lg:col-span-4 group relative overflow-hidden bg-gradient-to-br from-info/5 via-background-secondary to-background-secondary border border-info/20 hover:border-info/40 rounded-3xl p-8 transition-all duration-500 hover:shadow-2xl hover:shadow-info/10">
|
||||
<!-- VNC Console -->
|
||||
<div class="group relative overflow-hidden bg-gradient-to-br from-info/5 via-background-secondary to-background-secondary border border-info/20 hover:border-info/40 rounded-3xl p-8 transition-all duration-500 hover:shadow-2xl hover:shadow-info/10">
|
||||
<div class="absolute bottom-0 right-0 w-48 h-48 bg-info/10 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-14 h-14 rounded-2xl bg-gradient-to-br from-info to-info/70 flex items-center justify-center shadow-lg shadow-info/30 mb-5">
|
||||
<x-ri-terminal-box-line class="size-7 text-white" />
|
||||
</div>
|
||||
<h3 class="text-xl font-bold text-color-base mb-2">VNC Console</h3>
|
||||
<p class="text-color-muted text-sm leading-relaxed mb-4 flex-1">Direct web-based access to your VPS. Perfect for OS installation and recovery mode.</p>
|
||||
<div style="padding: 12px; background: #0d1117; border-radius: 12px; font-family: 'Courier New', monospace; font-size: 13px; border: 1px solid #30363d;">
|
||||
<p class="text-color-muted text-sm leading-relaxed mb-5 flex-1">Direct web-based access to your VPS. Perfect for OS installation and recovery mode.</p>
|
||||
<div style="padding: 14px; background: #0d1117; border-radius: 12px; font-family: 'Courier New', monospace; font-size: 13px; border: 1px solid #30363d;">
|
||||
<span style="color: #58a6ff; font-weight: 600;">root@vps</span><span style="color: #8b949e;">:</span><span style="color: #7ee787; font-weight: 600;">~</span><span style="color: #8b949e;">$</span> <span id="terminal-text" style="color: #f0f6fc;"></span><span id="terminal-cursor" style="color: #58a6ff;">█</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
(function() {
|
||||
const commands = [
|
||||
'systemctl status nginx',
|
||||
'htop',
|
||||
'df -h',
|
||||
'free -m',
|
||||
'uname -a',
|
||||
'ls -la /var/www',
|
||||
'tail -f /var/log/syslog',
|
||||
'netstat -tulpn',
|
||||
'docker ps',
|
||||
'cat /etc/os-release',
|
||||
'uptime',
|
||||
'whoami',
|
||||
'pwd',
|
||||
'ip addr show'
|
||||
];
|
||||
<script>
|
||||
(function() {
|
||||
const commands = [
|
||||
'systemctl status nginx',
|
||||
'htop',
|
||||
'df -h',
|
||||
'free -m',
|
||||
'uname -a',
|
||||
'ls -la /var/www',
|
||||
'tail -f /var/log/syslog',
|
||||
'netstat -tulpn',
|
||||
'docker ps',
|
||||
'cat /etc/os-release',
|
||||
'uptime',
|
||||
'whoami',
|
||||
'pwd',
|
||||
'ip addr show'
|
||||
];
|
||||
|
||||
const textEl = document.getElementById('terminal-text');
|
||||
const cursorEl = document.getElementById('terminal-cursor');
|
||||
let currentText = '';
|
||||
let isTyping = true;
|
||||
let commandIndex = Math.floor(Math.random() * commands.length);
|
||||
let charIndex = 0;
|
||||
|
||||
// Cursor blink
|
||||
setInterval(() => {
|
||||
cursorEl.style.opacity = cursorEl.style.opacity === '0' ? '1' : '0';
|
||||
}, 530);
|
||||
|
||||
function type() {
|
||||
const command = commands[commandIndex];
|
||||
|
||||
const textEl = document.getElementById('terminal-text');
|
||||
const cursorEl = document.getElementById('terminal-cursor');
|
||||
let currentText = '';
|
||||
let isTyping = true;
|
||||
let commandIndex = Math.floor(Math.random() * commands.length);
|
||||
let charIndex = 0;
|
||||
|
||||
// Cursor blink
|
||||
setInterval(() => {
|
||||
cursorEl.style.opacity = cursorEl.style.opacity === '0' ? '1' : '0';
|
||||
}, 530);
|
||||
|
||||
function type() {
|
||||
const command = commands[commandIndex];
|
||||
|
||||
if (isTyping) {
|
||||
if (charIndex < command.length) {
|
||||
currentText += command[charIndex];
|
||||
textEl.textContent = currentText;
|
||||
charIndex++;
|
||||
setTimeout(type, 50 + Math.random() * 100);
|
||||
} else {
|
||||
// Finished typing, wait then delete
|
||||
setTimeout(() => {
|
||||
isTyping = false;
|
||||
type();
|
||||
}, 2000 + Math.random() * 1500);
|
||||
}
|
||||
if (isTyping) {
|
||||
if (charIndex < command.length) {
|
||||
currentText += command[charIndex];
|
||||
textEl.textContent = currentText;
|
||||
charIndex++;
|
||||
setTimeout(type, 50 + Math.random() * 100);
|
||||
} else {
|
||||
if (currentText.length > 0) {
|
||||
currentText = currentText.slice(0, -1);
|
||||
textEl.textContent = currentText;
|
||||
setTimeout(type, 30 + Math.random() * 40);
|
||||
} else {
|
||||
// Finished deleting, pick new command
|
||||
isTyping = true;
|
||||
charIndex = 0;
|
||||
let newIndex;
|
||||
do {
|
||||
newIndex = Math.floor(Math.random() * commands.length);
|
||||
} while (newIndex === commandIndex && commands.length > 1);
|
||||
commandIndex = newIndex;
|
||||
setTimeout(type, 500 + Math.random() * 500);
|
||||
}
|
||||
// Finished typing, wait then delete
|
||||
setTimeout(() => {
|
||||
isTyping = false;
|
||||
type();
|
||||
}, 2000 + Math.random() * 1500);
|
||||
}
|
||||
} else {
|
||||
if (currentText.length > 0) {
|
||||
currentText = currentText.slice(0, -1);
|
||||
textEl.textContent = currentText;
|
||||
setTimeout(type, 30 + Math.random() * 40);
|
||||
} else {
|
||||
// Finished deleting, pick new command
|
||||
isTyping = true;
|
||||
charIndex = 0;
|
||||
let newIndex;
|
||||
do {
|
||||
newIndex = Math.floor(Math.random() * commands.length);
|
||||
} while (newIndex === commandIndex && commands.length > 1);
|
||||
commandIndex = newIndex;
|
||||
setTimeout(type, 500 + Math.random() * 500);
|
||||
}
|
||||
}
|
||||
|
||||
// Start after a short delay
|
||||
setTimeout(type, 1000);
|
||||
})();
|
||||
</script>
|
||||
}
|
||||
|
||||
// Start after a short delay
|
||||
setTimeout(type, 1000);
|
||||
})();
|
||||
</script>
|
||||
|
||||
<!-- Storage - Card -->
|
||||
<div class="lg:col-span-4 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">
|
||||
<!-- Bento Grid - Row 2: 4 Medium Cards -->
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 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="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>
|
||||
<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>
|
||||
</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="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>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 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="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 Manager</h3>
|
||||
<p class="text-color-muted text-sm leading-relaxed mb-4 flex-1">Add, resize, or remove virtual disks. Multiple bus types and cache modes.</p>
|
||||
<div class="space-y-2">
|
||||
<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>
|
||||
<span class="text-xs text-color-muted">65GB / 100GB</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- OS Reinstall -->
|
||||
<div class="lg:col-span-2 group relative overflow-hidden bg-gradient-to-br from-primary/5 via-background-secondary to-background-secondary border border-primary/20 hover:border-primary/40 rounded-3xl p-6 transition-all duration-500 hover:shadow-2xl hover:shadow-primary/10">
|
||||
<div class="relative z-10 h-full flex flex-col">
|
||||
<div class="w-12 h-12 rounded-2xl bg-gradient-to-br from-primary to-primary/70 flex items-center justify-center shadow-lg shadow-primary/30 mb-4">
|
||||
<x-ri-refresh-line class="size-6 text-white" />
|
||||
</div>
|
||||
<h3 class="text-lg font-bold text-color-base mb-2">OS Reinstall</h3>
|
||||
<p class="text-color-muted text-sm leading-relaxed mb-4 flex-1">50+ OS templates with one-click reinstallation.</p>
|
||||
<div class="flex flex-wrap gap-1.5">
|
||||
<span class="px-2 py-1 bg-primary/10 text-primary text-xs font-medium rounded-lg">Ubuntu</span>
|
||||
<span class="px-2 py-1 bg-primary/10 text-primary text-xs font-medium rounded-lg">Debian</span>
|
||||
<span class="px-2 py-1 bg-primary/10 text-primary text-xs font-medium rounded-lg">+48</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Task History -->
|
||||
<div class="lg:col-span-2 group relative overflow-hidden bg-gradient-to-br from-secondary/5 via-background-secondary to-background-secondary border border-secondary/20 hover:border-secondary/40 rounded-3xl p-6 transition-all duration-500 hover:shadow-2xl hover:shadow-secondary/10">
|
||||
<div class="relative z-10 h-full flex flex-col">
|
||||
<div class="w-12 h-12 rounded-2xl bg-gradient-to-br from-secondary to-secondary/70 flex items-center justify-center shadow-lg shadow-secondary/30 mb-4">
|
||||
<x-ri-history-line class="size-6 text-white" />
|
||||
</div>
|
||||
<h3 class="text-lg font-bold text-color-base mb-2">Task History</h3>
|
||||
<p class="text-color-muted text-sm leading-relaxed mb-4 flex-1">Full audit logs of all server operations.</p>
|
||||
<div class="space-y-1.5 text-xs">
|
||||
<div class="flex items-center justify-between text-color-muted">
|
||||
<span>OS Reinstall</span>
|
||||
<span class="text-success">✓</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between text-color-muted">
|
||||
<span>Snapshot</span>
|
||||
<span class="text-success">✓</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Network Tools -->
|
||||
<div class="lg:col-span-2 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="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-global-line class="size-6 text-white" />
|
||||
</div>
|
||||
<h3 class="text-lg font-bold text-color-base mb-2">Network Tools</h3>
|
||||
<p class="text-color-muted text-sm leading-relaxed mb-4 flex-1">IPv4 & IPv6 with rDNS and bandwidth stats.</p>
|
||||
<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 text-center p-1.5 bg-success/10 rounded-lg">
|
||||
<div class="text-xs text-color-muted">↓</div>
|
||||
<div class="text-sm font-semibold text-success">1.2 GB</div>
|
||||
</div>
|
||||
<div class="flex-1 text-center p-1.5 bg-success/10 rounded-lg">
|
||||
<div class="text-xs text-color-muted">↑</div>
|
||||
<div class="text-sm font-semibold text-success">856 MB</div>
|
||||
<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>
|
||||
<span class="text-xs text-color-muted whitespace-nowrap">65/100GB</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Power Controls -->
|
||||
<div class="lg:col-span-2 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="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="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">
|
||||
<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>
|
||||
<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 flex-1">Graceful shutdown, hard reset, and power cycle.</p>
|
||||
<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 px-1.5 py-1 bg-success/15 text-success text-xs font-medium rounded-lg text-center">Start</span>
|
||||
<span class="flex-1 px-1.5 py-1 bg-warning/15 text-warning text-xs font-medium rounded-lg text-center">Reboot</span>
|
||||
<span class="flex-1 px-1.5 py-1 bg-error/15 text-error text-xs font-medium rounded-lg text-center">Stop</span>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Bento Grid - Row 3: Quick Features Strip -->
|
||||
<div class="grid grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
<!-- OS Reinstall -->
|
||||
<div class="group flex items-center gap-4 p-4 bg-background/30 hover:bg-background/50 border border-neutral/10 hover:border-primary/30 rounded-2xl transition-all duration-300">
|
||||
<div class="w-10 h-10 rounded-xl bg-primary/10 flex items-center justify-center flex-shrink-0 group-hover:scale-110 transition-transform">
|
||||
<x-ri-refresh-line class="size-5 text-primary" />
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="font-semibold text-color-base text-sm">OS Reinstall</h4>
|
||||
<p class="text-xs text-color-muted">50+ templates</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Task History -->
|
||||
<div class="group flex items-center gap-4 p-4 bg-background/30 hover:bg-background/50 border border-neutral/10 hover:border-secondary/30 rounded-2xl transition-all duration-300">
|
||||
<div class="w-10 h-10 rounded-xl bg-secondary/10 flex items-center justify-center flex-shrink-0 group-hover:scale-110 transition-transform">
|
||||
<x-ri-history-line class="size-5 text-secondary" />
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="font-semibold text-color-base text-sm">Task History</h4>
|
||||
<p class="text-xs text-color-muted">Full audit logs</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Network Tools -->
|
||||
<div class="group flex items-center gap-4 p-4 bg-background/30 hover:bg-background/50 border border-neutral/10 hover:border-success/30 rounded-2xl transition-all duration-300">
|
||||
<div class="w-10 h-10 rounded-xl bg-success/10 flex items-center justify-center flex-shrink-0 group-hover:scale-110 transition-transform">
|
||||
<x-ri-global-line class="size-5 text-success" />
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="font-semibold text-color-base text-sm">Network</h4>
|
||||
<p class="text-xs text-color-muted">IPv4/IPv6 & rDNS</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ISO Mount -->
|
||||
<div class="group flex items-center gap-4 p-4 bg-background/30 hover:bg-background/50 border border-neutral/10 hover:border-info/30 rounded-2xl transition-all duration-300">
|
||||
<div class="w-10 h-10 rounded-xl bg-info/10 flex items-center justify-center flex-shrink-0 group-hover:scale-110 transition-transform">
|
||||
<x-ri-disc-line class="size-5 text-info" />
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="font-semibold text-color-base text-sm">ISO Mount</h4>
|
||||
<p class="text-xs text-color-muted">Custom images</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user