39 lines
1.9 KiB
PHP
39 lines
1.9 KiB
PHP
<div class="flex flex-col items-center justify-center h-full gap-8 select-none">
|
|
{{-- Pulsierender Avatar Ring --}}
|
|
<div class="relative flex items-center justify-center">
|
|
{{-- Outer ring --}}
|
|
<div class="absolute w-72 h-72 rounded-full border border-primary/20 fox-pulse-ring"></div>
|
|
<div class="absolute w-56 h-56 rounded-full border border-primary/30 fox-pulse-ring" style="animation-delay: 0.6s"></div>
|
|
<div class="absolute w-40 h-40 rounded-full border border-primary/40 fox-pulse-ring" style="animation-delay: 1.2s"></div>
|
|
|
|
{{-- Avatar core --}}
|
|
<div class="relative w-32 h-32 rounded-full bg-gradient-to-br from-primary/30 to-primary/10
|
|
border border-primary/50 backdrop-blur-xl flex items-center justify-center
|
|
shadow-[0_0_60px_rgba(99,102,241,0.4)]">
|
|
<span class="text-5xl">🦊</span>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- Name + Status --}}
|
|
<div class="flex flex-col items-center gap-2">
|
|
<h1 class="text-4xl font-light tracking-[0.6em] text-white pl-[0.6em]">F O X</h1>
|
|
@php
|
|
$statusDot = match ($status) {
|
|
'thinking' => 'bg-amber-400 shadow-[0_0_8px_rgb(251_191_36)]',
|
|
'speaking' => 'bg-cyan-400 shadow-[0_0_8px_rgb(34_211_238)]',
|
|
default => 'bg-emerald-400 shadow-[0_0_8px_rgb(52_211_153)]',
|
|
};
|
|
$statusText = match ($status) {
|
|
'thinking' => 'Denkt nach …',
|
|
'speaking' => 'Spricht …',
|
|
default => 'Online',
|
|
};
|
|
@endphp
|
|
<div class="flex items-center gap-2 text-xs uppercase tracking-widest text-white/60">
|
|
<span class="w-1.5 h-1.5 rounded-full {{ $statusDot }}"></span>
|
|
<span>{{ $statusText }}</span>
|
|
</div>
|
|
<div class="text-[10px] text-white/30 font-mono uppercase tracking-widest">{{ $label }}</div>
|
|
</div>
|
|
</div>
|