68 lines
3.5 KiB
PHP
68 lines
3.5 KiB
PHP
<div class="glass-card relative p-4 max-h-fit border border-white/10 bg-white/5 rounded-2xl">
|
||
{{-- Kopf --}}
|
||
<div class="flex items-center justify-between -mb-3">
|
||
<div class="inline-flex items-center gap-2 rounded-full bg-white/5 border border-white/10 px-2.5 py-1">
|
||
<i class="ph ph-hard-drives text-white/70 text-[13px]"></i>
|
||
<span class="text-[11px] tracking-wide uppercase text-white/70">Storage</span>
|
||
</div>
|
||
<button wire:click="refresh"
|
||
class="inline-flex items-center gap-1 rounded-full border border-white/10 bg-white/5 px-2 py-0.5 text-[10px] text-white/70 hover:text-white hover:border-white/20 transition">
|
||
Update <i class="ph ph-arrows-clockwise text-[12px]"></i>
|
||
</button>
|
||
</div>
|
||
|
||
{{-- Inhalt --}}
|
||
<div class="grid grid-cols-1 items-center">
|
||
{{-- Donut --}}
|
||
<div class="flex items-center justify-center">
|
||
<div class="relative" style="width: {{ $diskInnerSize + 80 }}px; height: {{ $diskInnerSize + 80 }}px;">
|
||
{{-- Innerer grauer Kreis --}}
|
||
<div class="absolute inset-[36px] rounded-full bg-white/[0.04] backdrop-blur-sm ring-1 ring-white/10"></div>
|
||
|
||
{{-- Prozentanzeige im Zentrum --}}
|
||
<div class="absolute inset-0 flex flex-col items-center justify-center">
|
||
<div class="text-2xl md:text-3xl font-semibold leading-none tracking-tight">
|
||
{{ $diskCenterText['percent'] }}
|
||
</div>
|
||
<div class="text-[10px] md:text-[11px] text-white/60 mt-1 uppercase tracking-wide">
|
||
{{ $diskCenterText['label'] }}
|
||
</div>
|
||
@if($measuredAt)
|
||
<div class="absolute bottom-12 mt-2 text-[10px] text-white/45 text-center">
|
||
zuletzt aktualisiert: <br> {{ \Carbon\Carbon::parse($measuredAt)->diffForHumans() }}
|
||
</div>
|
||
@endif
|
||
</div>
|
||
|
||
{{-- Segment-Ring --}}
|
||
@foreach($diskSegments as $seg)
|
||
<span class="absolute top-1/2 left-1/2 block"
|
||
style="
|
||
transform: rotate({{ $seg['angle'] }}deg) translateX({{ $diskSegOuterRadius + 14 }}px);
|
||
width: 12px; height: 6px; margin:-3px 0 0 -6px;">
|
||
<span class="block w-full h-full rounded-full {{ $seg['class'] }}"></span>
|
||
</span>
|
||
@endforeach
|
||
</div>
|
||
</div>
|
||
|
||
{{-- Zahlen --}}
|
||
<div class="md:pl-2">
|
||
<dl class="space-y-2">
|
||
<div class="flex items-center justify-between">
|
||
<dt class="text-white/60 text-sm">Gesamt</dt>
|
||
<dd class="font-medium tabular-nums text-base">{{ is_numeric($diskTotalGb) ? $diskTotalGb.' GB' : '–' }}</dd>
|
||
</div>
|
||
<div class="flex items-center justify-between">
|
||
<dt class="text-white/60 text-sm">Genutzt</dt>
|
||
<dd class="font-medium tabular-nums text-base">{{ is_numeric($diskUsedGb) ? $diskUsedGb.' GB' : '–' }}</dd>
|
||
</div>
|
||
<div class="flex items-center justify-between">
|
||
<dt class="text-white/60 text-sm">Frei</dt>
|
||
<dd class="font-medium tabular-nums text-base">{{ is_numeric($diskFreeGb) ? $diskFreeGb.' GB' : '–' }}</dd>
|
||
</div>
|
||
</dl>
|
||
</div>
|
||
</div>
|
||
</div>
|