83 lines
4.3 KiB
PHP
83 lines
4.3 KiB
PHP
<div class="#glass-card #p-5">
|
||
<div class="grid grid-cols-1 md:grid-cols-4 gap-4">
|
||
{{-- CPU --}}
|
||
<div class="glass-card p-4 flex flex-col justify-between min-h-[140px]">
|
||
<div>
|
||
<div class="inline-flex items-center gap-2 rounded-full bg-white/5 border border-white/10 px-2.5 py-1 mb-3">
|
||
<i class="ph ph-cpu text-white/70 text-[13px]"></i>
|
||
<span class="text-[11px] tracking-wide uppercase text-white/70">CPU</span>
|
||
</div>
|
||
<div class="text-2xl font-semibold">{{ is_numeric($cpuPercent) ? $cpuPercent.'%' : '–' }}</div>
|
||
</div>
|
||
<div class="mt-3 rounded bg-white/5 p-1">
|
||
<div class="grid" style="grid-template-columns: repeat({{ $barSegments }}, minmax(0,1fr)); gap: 4px;">
|
||
@foreach($cpuSeg as $cls)
|
||
<div class="h-2 rounded {{ $cls }}"></div>
|
||
@endforeach
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{{-- RAM --}}
|
||
<div class="glass-card p-4 flex flex-col justify-between min-h-[140px]">
|
||
<div>
|
||
<div class="inline-flex items-center gap-2 rounded-full bg-white/5 border border-white/10 px-2.5 py-1 mb-3">
|
||
<i class="ph ph-memory text-white/70 text-[13px]"></i>
|
||
<span class="text-[11px] tracking-wide uppercase text-white/70">RAM</span>
|
||
</div>
|
||
<div class="text-2xl font-semibold">{{ is_numeric($ramPercent) ? $ramPercent.'%' : '–' }}</div>
|
||
@if($ramSummary)
|
||
<div class="text-[11px] text-white/50 mt-0.5">{{ $ramSummary }}</div>
|
||
@endif
|
||
</div>
|
||
<div class="mt-3 rounded bg-white/5 p-1">
|
||
<div class="grid" style="grid-template-columns: repeat({{ $barSegments }}, minmax(0,1fr)); gap: 4px;">
|
||
@foreach($ramSeg as $cls)
|
||
<div class="h-2 rounded {{ $cls }}"></div>
|
||
@endforeach
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{{-- Load --}}
|
||
<div class="glass-card p-4 flex flex-col justify-between min-h-[140px]">
|
||
<div>
|
||
<div class="inline-flex items-center gap-2 rounded-full bg-white/5 border border-white/10 px-2.5 py-1 mb-3">
|
||
<i class="ph ph-activity text-white/70 text-[13px]"></i>
|
||
<span class="text-[11px] tracking-wide uppercase text-white/70">Load</span>
|
||
</div>
|
||
<div class="text-2xl font-semibold">{{ $loadText ?? '–' }}</div>
|
||
</div>
|
||
<div class="mt-3 flex items-center gap-3">
|
||
@foreach($loadDots as $d)
|
||
<div class="flex items-center gap-1 text-[11px] text-white/50">
|
||
<span class="w-2 h-2 rounded-full {{ $d['cls'] }}"></span>
|
||
<span>{{ $d['label'] }}</span>
|
||
</div>
|
||
@endforeach
|
||
</div>
|
||
</div>
|
||
|
||
{{-- Uptime --}}
|
||
<div class="glass-card p-4 flex flex-col justify-between min-h-[140px]">
|
||
<div>
|
||
<div class="inline-flex items-center gap-2 rounded-full bg-white/5 border border-white/10 px-2.5 py-1 mb-3">
|
||
<i class="{{ $uptimeIcon }} text-white/70 text-[13px]"></i>
|
||
<span class="text-[11px] tracking-wide uppercase text-white/70">Uptime</span>
|
||
</div>
|
||
<div class="text-2xl font-semibold">{{ $uptimeText ?? '–' }}</div>
|
||
</div>
|
||
<div class="flex items-center gap-2 text-[10px]">
|
||
<div class="inline-flex items-center gap-1 rounded-full bg-white/5 border border-white/10 px-1.5 py-0.5 #mb-3">
|
||
<span class="tracking-wide uppercase text-white/70">{{ $uptimeDays }}</span>
|
||
<span class="text-white/70">{{ $uptimeDaysLabel ?? '' }}</span>
|
||
</div>
|
||
<div class="inline-flex items-center gap-1 rounded-full bg-white/5 border border-white/10 px-1.5 py-0.5 #mb-3">
|
||
<span class="tracking-wide uppercase text-white/70">{{ $uptimeHours }}</span>
|
||
<span class="text-white/70">{{ $uptimeHoursLabel ?? '' }}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|