111 lines
5.2 KiB
PHP
111 lines
5.2 KiB
PHP
<div class="flex flex-col gap-8">
|
|
|
|
{{-- ─────────── HERO HEADER ─────────── --}}
|
|
<header class="flex justify-between items-end gap-6">
|
|
<div>
|
|
<div class="text-[11px] uppercase tracking-[0.14em] text-ink-3 font-semibold mb-1.5">{{ $today }}</div>
|
|
<h1 class="text-[28px] leading-tight font-extrabold tracking-tight text-ink-1">Hallo {{ $firstName }}! Bereit für heute? 👋</h1>
|
|
<p class="text-sm text-ink-2 mt-2 max-w-xl leading-relaxed">Du bist seit {{ $streakDays }} Tagen am Lernen — weiter so. Heute warten {{ count($tasks) }} Aufgaben auf dich.</p>
|
|
</div>
|
|
<x-btn variant="primary" size="lg" class="shrink-0 shadow-sm">
|
|
<x-heroicon-s-play class="w-4 h-4" />
|
|
Tagesplan starten
|
|
</x-btn>
|
|
</header>
|
|
|
|
{{-- ─────────── STATS ─────────── --}}
|
|
<section class="grid grid-cols-4 gap-4">
|
|
<x-stat-tile label="Gesamtpunkte" :value="number_format($totalPoints, 0, ',', '.')" trend="+180 diese Woche" />
|
|
<x-stat-tile label="Lernserie" :value="$streakDays" unit="Tage" trend="+2 persönlicher Rekord" />
|
|
<x-stat-tile label="Diese Woche" :value="$weekMinutes" unit="Min." trend="+12% vs. letzte Woche" />
|
|
<x-stat-tile label="Bestandene Tests" :value="$testRatio" trend="75% Erfolgsquote" />
|
|
</section>
|
|
|
|
{{-- ─────────── SUBJECTS ─────────── --}}
|
|
<section class="flex flex-col gap-4">
|
|
<div class="flex justify-between items-end">
|
|
<div>
|
|
<h2 class="font-bold text-base text-ink-1">Meine Fächer</h2>
|
|
<p class="text-xs text-ink-3 mt-1">Wähle ein Fach, um zu lernen oder eine Prüfung abzulegen.</p>
|
|
</div>
|
|
<div class="flex gap-2.5 items-center">
|
|
<x-pill>Klasse 4 · Niveau B</x-pill>
|
|
<x-btn>
|
|
Alle anzeigen
|
|
<x-heroicon-o-arrow-right class="w-3.5 h-3.5" />
|
|
</x-btn>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-4 gap-4">
|
|
@foreach($subjects as $s)
|
|
<x-subject-card
|
|
:name="$s['name']"
|
|
:icon="$s['icon']"
|
|
:color="$s['color']"
|
|
:lessons="$s['lessons']"
|
|
:progress="$s['progress']"
|
|
:next="$s['next']"
|
|
/>
|
|
@endforeach
|
|
</div>
|
|
</section>
|
|
|
|
{{-- ─────────── TASKS + SIDE (KI + Shop) ─────────── --}}
|
|
<section class="grid grid-cols-3 gap-5">
|
|
<x-card class="col-span-2 shadow-sm">
|
|
<div class="flex justify-between items-center mb-3">
|
|
<h2 class="font-bold text-base text-ink-1">Heutige Aufgaben</h2>
|
|
<x-pill variant="primary">{{ count($tasks) }} offen</x-pill>
|
|
</div>
|
|
<div class="flex flex-col">
|
|
@foreach($tasks as $t)
|
|
<x-task-row
|
|
:title="$t['title']"
|
|
:meta="$t['meta']"
|
|
:icon="$t['icon']"
|
|
:color="$t['color']"
|
|
:points="$t['points']"
|
|
/>
|
|
@endforeach
|
|
</div>
|
|
</x-card>
|
|
|
|
<div class="flex flex-col gap-5">
|
|
{{-- KI Foto-Hilfe --}}
|
|
<x-card variant="gradient-primary" class="shadow-sm">
|
|
<div class="flex items-center gap-2 mb-2.5 text-primary-ink">
|
|
<x-heroicon-o-camera class="w-4 h-4" />
|
|
<span class="text-[10px] font-bold uppercase tracking-[0.12em]">Neu · KI-Hilfe</span>
|
|
</div>
|
|
<div class="text-lg font-bold tracking-tight mb-1.5 text-ink-1 leading-snug">Du steckst bei einer Aufgabe fest?</div>
|
|
<p class="text-sm text-ink-2 mb-4 leading-relaxed">Mach ein Foto — die KI erklärt dir den Lösungsweg Schritt für Schritt mit Beispielen.</p>
|
|
<x-btn variant="primary" class="w-full justify-center shadow-sm">
|
|
<x-heroicon-o-camera class="w-4 h-4" />
|
|
Foto-Hilfe öffnen
|
|
</x-btn>
|
|
</x-card>
|
|
|
|
{{-- Belohnungs-Shop --}}
|
|
<x-card class="shadow-sm">
|
|
<div class="flex justify-between items-center mb-3">
|
|
<h2 class="font-bold text-base text-ink-1">Belohnungs-Shop</h2>
|
|
<span class="font-mono text-amber-ink font-bold text-sm tabular-nums">{{ number_format($totalPoints, 0, ',', '.') }} Pkt.</span>
|
|
</div>
|
|
<div class="flex flex-col">
|
|
@foreach($rewards as $r)
|
|
<x-reward-row
|
|
:title="$r['title']"
|
|
:emoji="$r['emoji']"
|
|
:status="$r['status']"
|
|
:price="$r['price']"
|
|
:available="$r['available']"
|
|
/>
|
|
@endforeach
|
|
</div>
|
|
</x-card>
|
|
</div>
|
|
</section>
|
|
|
|
</div>
|