112 lines
6.0 KiB
PHP
112 lines
6.0 KiB
PHP
{{--<div--}}
|
|
{{-- class="glass-card p-4 flex flex-row items-start justify-between gap-4 relative overflow-hidden mb-4">--}}
|
|
{{-- --}}{{-- Linke Seite: Icon + Titel --}}
|
|
{{-- <div class="flex gap-3 relative z-10">--}}
|
|
{{-- <div class="shrink-0">--}}
|
|
{{-- --}}{{-- Modernes Shield-Icon --}}
|
|
{{-- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="64" height="64">--}}
|
|
{{-- <defs>--}}
|
|
{{-- <linearGradient id="shieldGradient" x1="0" y1="0" x2="0" y2="1">--}}
|
|
{{-- <stop offset="0" stop-color="#4ade80"/>--}}
|
|
{{-- <stop offset="1" stop-color="#15803d"/>--}}
|
|
{{-- </linearGradient>--}}
|
|
{{-- <radialGradient id="shine" cx="30%" cy="20%" r="70%">--}}
|
|
{{-- <stop offset="0%" stop-color="rgba(255,255,255,0.4)"/>--}}
|
|
{{-- <stop offset="100%" stop-color="rgba(255,255,255,0)"/>--}}
|
|
{{-- </radialGradient>--}}
|
|
{{-- <filter id="glow" x="-20%" y="-20%" width="140%" height="140%">--}}
|
|
{{-- <feDropShadow dx="0" dy="0" stdDeviation="3" flood-color="#22c55e"--}}
|
|
{{-- flood-opacity="0.6"/>--}}
|
|
{{-- </filter>--}}
|
|
{{-- </defs>--}}
|
|
{{-- <path d="M32 6l20 8v12c0 13.5-8.7 22.7-20 27-11.3-4.3-20-13.5-20-27V14l20-8z"--}}
|
|
{{-- fill="url(#shieldGradient)" filter="url(#glow)"/>--}}
|
|
{{-- <path d="M32 6l20 8v12c0 13.5-8.7 22.7-20 27-11.3-4.3-20-13.5-20-27V14l20-8z"--}}
|
|
{{-- fill="url(#shine)"/>--}}
|
|
{{-- <path d="M23 33l7 7 11-14" fill="none" stroke="#fff" stroke-width="3" stroke-linecap="round"--}}
|
|
{{-- stroke-linejoin="round"/>--}}
|
|
{{-- </svg>--}}
|
|
{{-- </div>--}}
|
|
|
|
{{-- <div>--}}
|
|
{{-- <h3 class="text-lg font-semibold text-white/90">WoltGuard</h3>--}}
|
|
{{-- <p class="text-xs text-white/50">System-Wächter</p>--}}
|
|
{{-- </div>--}}
|
|
{{-- </div>--}}
|
|
|
|
{{-- --}}{{-- Rechte Seite: Status & Avatar --}}
|
|
{{-- <div class="flex items-start gap-3 relative z-10">--}}
|
|
{{-- --}}{{-- Status Badge --}}
|
|
{{-- @if($guardOk ?? false)--}}
|
|
{{-- <span--}}
|
|
{{-- class="inline-flex #items-center gap-1 px-3 py-1 rounded-full text-sm border border-emerald-400/30 text-emerald-300 bg-emerald-500/10">--}}
|
|
{{-- <i class="ph ph-check-circle text-[14px]"></i>--}}
|
|
{{-- <span class="text-[11px]">alle Dienste OK</span>--}}
|
|
{{-- </span>--}}
|
|
{{-- @else--}}
|
|
{{-- <span--}}
|
|
{{-- class="inline-flex #items-center gap-1 px-3 py-1 rounded-full text-sm border border-rose-400/30 text-rose-300 bg-rose-500/10">--}}
|
|
{{-- <i class="ph ph-warning-circle text-[11px]"></i>--}}
|
|
{{-- Störung erkannt--}}
|
|
{{-- </span>--}}
|
|
{{-- @endif--}}
|
|
{{-- </div>--}}
|
|
{{--</div>--}}
|
|
<div
|
|
wire:poll.{{ $pollSeconds }}s="refresh"
|
|
class="glass-card p-4 flex items-start justify-between gap-4 relative overflow-hidden rounded-2xl border border-white/10 bg-white/5"
|
|
>
|
|
{{-- Links: Icon + Titel --}}
|
|
<div class="flex gap-3 relative z-10">
|
|
<div class="shrink-0">
|
|
{{-- Schild-Icon im Dark Glass Look, ohne Logik im Blade --}}
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="64" height="64" aria-hidden="true">
|
|
<defs>
|
|
<linearGradient id="wg-shield-g" x1="0" y1="0" x2="0" y2="1">
|
|
<stop offset="0" stop-color="#4ade80"/>
|
|
<stop offset="1" stop-color="#15803d"/>
|
|
</linearGradient>
|
|
<radialGradient id="wg-shield-shine" cx="30%" cy="20%" r="70%">
|
|
<stop offset="0%" stop-color="rgba(255,255,255,0.4)"/>
|
|
<stop offset="100%" stop-color="rgba(255,255,255,0)"/>
|
|
</radialGradient>
|
|
<filter id="wg-glow" x="-20%" y="-20%" width="140%" height="140%">
|
|
<feDropShadow dx="0" dy="0" stdDeviation="3" flood-color="#22c55e" flood-opacity="0.55"/>
|
|
</filter>
|
|
</defs>
|
|
<path d="M32 6l20 8v12c0 13.5-8.7 22.7-20 27-11.3-4.3-20-13.5-20-27V14l20-8z"
|
|
fill="url(#wg-shield-g)" filter="url(#wg-glow)"></path>
|
|
<path d="M32 6l20 8v12c0 13.5-8.7 22.7-20 27-11.3-4.3-20-13.5-20-27V14l20-8z"
|
|
fill="url(#wg-shield-shine)"></path>
|
|
@if($guardOk)
|
|
{{-- Check-Mark --}}
|
|
<path d="M23 33l7 7 11-14" fill="none" stroke="#fff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
|
|
@else
|
|
{{-- kleines Warnsymbol --}}
|
|
<circle cx="32" cy="32" r="9" fill="none" stroke="#fff" stroke-width="2"/>
|
|
<rect x="31" y="26" width="2" height="7" rx="1" fill="#fff"/>
|
|
<rect x="31" y="35" width="2" height="2" rx="1" fill="#fff"/>
|
|
@endif
|
|
</svg>
|
|
</div>
|
|
<div>
|
|
<h3 class="text-lg font-semibold text-white/90">WoltGuard</h3>
|
|
<p class="text-xs text-white/50">System-Wächter</p>
|
|
<p class="text-[11px] text-white/40 mt-1">
|
|
{{ $okCount }}/{{ $totalCount }} Dienste aktiv
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- Rechts: Status-Badge (aus Klasse vorbereitet) --}}
|
|
<div class="flex items-start gap-3 relative z-10">
|
|
<span class="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs border {{ $badgeClass }}">
|
|
<i class="{{ $badgeIcon }} text-[13px]"></i>
|
|
<span class="whitespace-nowrap">{{ $badgeText }}</span>
|
|
</span>
|
|
</div>
|
|
|
|
{{-- Optional: dezente Deko im Hintergrund --}}
|
|
<div class="absolute -right-12 -top-12 w-48 h-48 rounded-full bg-emerald-500/5 blur-2xl"></div>
|
|
</div>
|