51 lines
3.0 KiB
PHP
51 lines
3.0 KiB
PHP
{{-- Responsive Topbar: Chips links (grid), IP rechts (stacked) --}}
|
||
<div class="md:flex md:items-center md:justify-between gap-3">
|
||
|
||
{{-- Chips: auf Mobile 1–2 Spalten Grid, ab lg wieder flex/wrap --}}
|
||
<div class="grid grid-cols-1 min-[420px]:grid-cols-2 lg:flex lg:flex-wrap gap-2">
|
||
{{-- Domains --}}
|
||
<div class="inline-flex w-full lg:w-auto items-center gap-2 rounded-2xl border border-white/10 bg-white/5
|
||
px-3 py-2 md:px-4 md:py-2 text-sm md:text-base">
|
||
<i class="ph-duotone ph-globe text-white/70"></i>
|
||
<span class="font-medium tracking-wide">Domains</span>
|
||
<span class="ml-auto lg:ml-1.5 inline-flex h-5 md:h-6 min-w-[1.25rem] items-center justify-center
|
||
rounded-full bg-white/10 px-2 text-xs md:text-sm tabular-nums">{{ $domainsCount ?? 0 }}</span>
|
||
</div>
|
||
|
||
{{-- Warnungen --}}
|
||
<div class="inline-flex w-full lg:w-auto items-center gap-2 rounded-2xl border border-white/10 bg-white/5
|
||
px-3 py-2 md:px-4 md:py-2 text-sm md:text-base">
|
||
<i class="ph-duotone ph-warning-octagon text-white/70"></i>
|
||
<span class="font-medium tracking-wide">Warnungen</span>
|
||
<span class="ml-auto lg:ml-1.5 inline-flex h-5 md:h-6 min-w-[1.25rem] items-center justify-center
|
||
rounded-full bg-white/10 px-2 text-xs md:text-sm tabular-nums">{{ $warningsCount ?? 0 }}</span>
|
||
</div>
|
||
|
||
{{-- Updates --}}
|
||
<div class="inline-flex w-full lg:w-auto items-center gap-2 rounded-2xl border border-white/10 bg-white/5
|
||
px-3 py-2 md:px-4 md:py-2 text-sm md:text-base">
|
||
<i class="ph-duotone ph-arrows-counter-clockwise text-white/70"></i>
|
||
<span class="font-medium tracking-wide">Updates</span>
|
||
<span class="ml-auto lg:ml-1.5 inline-flex h-5 md:h-6 min-w-[1.25rem] items-center justify-center
|
||
rounded-full bg-white/10 px-2 text-xs md:text-sm tabular-nums">{{ $updatesCount ?? 0 }}</span>
|
||
</div>
|
||
</div>
|
||
|
||
{{-- IPs: auf Mobile unter die Chips, ab md rechtsbündig; mono, kompakt --}}
|
||
<div class="mt-2 md:mt-0 flex flex-col items-stretch md:items-end gap-2">
|
||
<div class="inline-flex items-center gap-2 rounded-xl border border-sky-400/30 bg-sky-400/10
|
||
px-3 py-1.5 text-[13px] leading-none font-mono text-white/85">
|
||
<i class="ph-duotone ph-globe-simple text-sky-300/80"></i>
|
||
<span class="truncate max-w-[60vw] md:max-w-none">{{ $ipv4 ?? '–' }}</span>
|
||
</div>
|
||
|
||
@if(!empty($ipv6) && $ipv6 !== '–')
|
||
<div class="inline-flex items-center gap-2 rounded-xl border border-violet-400/30 bg-violet-400/10
|
||
px-3 py-1.5 text-[13px] leading-none font-mono text-white/85">
|
||
<i class="ph-duotone ph-globe-hemisphere-east text-violet-300/80"></i>
|
||
<span class="truncate max-w-[60vw] md:max-w-none">{{ $ipv6 }}</span>
|
||
</div>
|
||
@endif
|
||
</div>
|
||
</div>
|