Joseph.Rawlings
16cd5f05de
- Updated serverplaceholder.blade.php to enhance loading skeletons for server details. - Added navigation breadcrumbs to statistics, subdomain, and system views for better user experience. - Improved loading indicators for CPU, network, memory, and disk charts in statistics.blade.php. - Refined storage.blade.php layout with section dividers and improved drive display, including bus type indicators and quota usage. - Enhanced VNC and Xterm popups with a new header design, loading animations, and reconnect functionality. - Added error handling for VNC and Xterm connections to inform users when unable to connect.
54 lines
2.7 KiB
PHP
54 lines
2.7 KiB
PHP
<div class="space-y-4">
|
|
<div class="bg-background-secondary border border-neutral p-4 rounded-lg mb-4 flex flex-col">
|
|
{{-- Header row: icon + name + status --}}
|
|
<div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2 mb-2">
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-9 h-9 rounded-lg skeleton-loading bg-base/10"></div>
|
|
<div class="h-4 w-36 rounded skeleton-loading bg-base/10"></div>
|
|
</div>
|
|
<div class="flex items-center gap-2 px-3 py-1.5 rounded-lg">
|
|
<div class="h-5 w-20 rounded-md skeleton-loading bg-base/10"></div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- Info row: IP, Memory, Disk, CPU --}}
|
|
<div class="flex flex-row flex-wrap gap-4 mt-4">
|
|
<div class="flex flex-col gap-1">
|
|
<div class="text-xs text-base/50">IPv4 Address</div>
|
|
<div class="h-4 w-28 rounded skeleton-loading bg-base/10"></div>
|
|
</div>
|
|
<div class="flex flex-col gap-1">
|
|
<div class="text-xs text-base/50">IPv6 Address</div>
|
|
<div class="h-4 w-28 rounded skeleton-loading bg-base/10"></div>
|
|
</div>
|
|
<div class="hidden sm:flex flex-col gap-1">
|
|
<div class="text-xs text-base/50">Memory</div>
|
|
<div class="h-4 w-24 rounded skeleton-loading bg-base/10"></div>
|
|
</div>
|
|
<div class="hidden sm:flex flex-col gap-1">
|
|
<div class="text-xs text-base/50">Disk</div>
|
|
<div class="h-4 w-20 rounded skeleton-loading bg-base/10"></div>
|
|
</div>
|
|
<div class="hidden sm:flex flex-col gap-1">
|
|
<div class="text-xs text-base/50">CPU</div>
|
|
<div class="h-4 w-14 rounded skeleton-loading bg-base/10"></div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- Config stats row --}}
|
|
<div class="mt-4 pt-4 border-t border-neutral">
|
|
<div class="h-3.5 w-36 rounded skeleton-loading bg-base/10 mb-3"></div>
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
|
|
@for($i = 0; $i < 4; $i++)
|
|
<div class="flex flex-col p-3 rounded-lg border border-neutral/30 bg-background/50">
|
|
<div class="flex items-center gap-2 mb-1.5">
|
|
<div class="w-7 h-7 rounded-md skeleton-loading bg-base/10"></div>
|
|
<div class="h-3 w-16 rounded skeleton-loading bg-base/10"></div>
|
|
</div>
|
|
<div class="h-4 w-20 rounded skeleton-loading bg-base/10"></div>
|
|
</div>
|
|
@endfor
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div> |