91 lines
3.6 KiB
PHP
91 lines
3.6 KiB
PHP
<div class="hud-shell" x-data="hudClock()" x-init="start()">
|
|
{{-- TOPBAR --}}
|
|
<header class="hud-topbar">
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-8 h-8 rounded-lg bg-primary/20 border border-primary/40 flex items-center justify-center">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-primary" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M12 3l1.5 4.5h4.5l-3.6 2.7 1.4 4.5L12 12l-3.8 2.7 1.4-4.5L6 7.5h4.5z"/>
|
|
</svg>
|
|
</div>
|
|
<div class="flex flex-col">
|
|
<span class="text-sm font-light tracking-[0.4em] text-white pl-[0.4em]">F O X</span>
|
|
<span class="text-[10px] text-white/40 -mt-0.5 flex items-center gap-1.5">
|
|
<span class="w-1 h-1 rounded-full bg-emerald-400 shadow-[0_0_4px_rgb(52_211_153)]"></span>
|
|
System Online
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="hidden md:flex items-center gap-6 font-mono text-white/80">
|
|
<div class="flex flex-col items-center leading-tight">
|
|
<span class="text-2xl tabular-nums" x-text="time">--:--:--</span>
|
|
<span class="text-[10px] text-white/40 uppercase tracking-widest" x-text="date"></span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex items-center gap-3 text-white/80">
|
|
@if ($weather['temperature'] !== null)
|
|
<span class="font-mono text-sm">{{ number_format($weather['temperature'], 1, ',', '') }} °C</span>
|
|
@endif
|
|
<span class="text-xs uppercase tracking-widest text-white/40">{{ $weather['city'] }}</span>
|
|
</div>
|
|
</header>
|
|
|
|
{{-- BODY 3-Spalten-Grid --}}
|
|
<main class="hud-main">
|
|
<aside class="hud-col-left">
|
|
<livewire:widgets.system-stats />
|
|
<livewire:widgets.uptime />
|
|
<livewire:widgets.weather />
|
|
<livewire:widgets.screen-preview />
|
|
</aside>
|
|
|
|
<section class="hud-col-center">
|
|
<livewire:widgets.fox-avatar />
|
|
</section>
|
|
|
|
<aside class="hud-col-right">
|
|
<div class="glass overflow-hidden h-full flex flex-col">
|
|
<div class="px-5 py-3 border-b border-white/10 flex items-center justify-between flex-shrink-0">
|
|
<h3 class="text-xs uppercase tracking-widest text-white/50 font-medium">Conversation</h3>
|
|
<a href="/chat" class="text-[10px] text-white/40 hover:text-primary transition uppercase tracking-widest">
|
|
Vollbild →
|
|
</a>
|
|
</div>
|
|
<div class="flex-1 overflow-hidden">
|
|
<livewire:chat />
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
</main>
|
|
</div>
|
|
|
|
@assets
|
|
<script>
|
|
document.addEventListener('alpine:init', () => {
|
|
Alpine.data('hudClock', () => ({
|
|
time: '',
|
|
date: '',
|
|
interval: null,
|
|
|
|
start() {
|
|
this.tick();
|
|
this.interval = setInterval(() => this.tick(), 1000);
|
|
},
|
|
|
|
tick() {
|
|
const now = new Date();
|
|
this.time = now.toLocaleTimeString('de-AT', { hour12: false });
|
|
this.date = now.toLocaleDateString('de-AT', {
|
|
weekday: 'short', day: '2-digit', month: 'short', year: 'numeric'
|
|
});
|
|
},
|
|
|
|
destroy() {
|
|
if (this.interval) clearInterval(this.interval);
|
|
},
|
|
}));
|
|
});
|
|
</script>
|
|
@endassets
|