118 lines
6.3 KiB
PHP
118 lines
6.3 KiB
PHP
@php
|
|
$subjects = [
|
|
['name' => 'Mathematik', 'icon' => '∑', 'color' => 'primary', 'progress' => 75, 'lessons' => '18 / 24'],
|
|
['name' => 'Deutsch', 'icon' => 'A', 'color' => 'rose', 'progress' => 65, 'lessons' => '13 / 20'],
|
|
['name' => 'Englisch', 'icon' => 'E', 'color' => 'violet', 'progress' => 50, 'lessons' => '8 / 16'],
|
|
['name' => 'Sachkunde', 'icon' => '🌱', 'color' => 'green', 'progress' => 78, 'lessons' => '14 / 18'],
|
|
['name' => 'Musik', 'icon' => '♪', 'color' => 'amber', 'progress' => 42, 'lessons' => '5 / 12'],
|
|
['name' => 'Sport', 'icon' => '⚽', 'color' => 'green', 'progress' => 64, 'lessons' => '9 / 14'],
|
|
];
|
|
$weekDays = [
|
|
['day' => 'Mo', 'minutes' => 12],
|
|
['day' => 'Di', 'minutes' => 18],
|
|
['day' => 'Mi', 'minutes' => 22],
|
|
['day' => 'Do', 'minutes' => 9],
|
|
['day' => 'Fr', 'minutes' => 15],
|
|
['day' => 'Sa', 'minutes' => 6],
|
|
['day' => 'So', 'minutes' => 4],
|
|
];
|
|
$maxMin = max(array_column($weekDays, 'minutes')) ?: 1;
|
|
@endphp
|
|
|
|
<div class="flex flex-col gap-6">
|
|
|
|
<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">Analyse</div>
|
|
<h1 class="text-[28px] leading-tight font-extrabold tracking-tight text-ink-1">Fortschritt</h1>
|
|
<p class="text-sm text-ink-2 mt-2 max-w-xl leading-relaxed">Verlauf, Streaks und Bestleistungen — sieh wie weit du gekommen bist.</p>
|
|
</div>
|
|
<x-btn>
|
|
<x-heroicon-o-arrow-down-tray class="w-3.5 h-3.5" />
|
|
Export
|
|
</x-btn>
|
|
</header>
|
|
|
|
{{-- Stats Overview --}}
|
|
<section class="grid grid-cols-4 gap-4">
|
|
<x-stat-tile label="Gesamtpunkte" value="2.480" trend="+180 diese Woche" />
|
|
<x-stat-tile label="Lernserie" value="7" unit="Tage" trend="+2 persönlicher Rekord" />
|
|
<x-stat-tile label="Lernzeit gesamt" value="14h" unit="32 Min." trend="+12% vs. Vormonat" />
|
|
<x-stat-tile label="Erfolgsquote" value="75 %" trend="Sehr gut" />
|
|
</section>
|
|
|
|
{{-- Week Chart + Subjects --}}
|
|
<section class="grid grid-cols-3 gap-5">
|
|
<x-card class="col-span-2 shadow-sm">
|
|
<div class="flex justify-between items-center mb-5">
|
|
<div>
|
|
<h2 class="font-bold text-base text-ink-1">Diese Woche</h2>
|
|
<p class="text-xs text-ink-3 mt-0.5">Lernzeit pro Tag in Minuten</p>
|
|
</div>
|
|
<x-pill variant="primary">86 Min. gesamt</x-pill>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-7 gap-3 items-end h-48 pt-4">
|
|
@foreach($weekDays as $d)
|
|
@php $h = (int) round(($d['minutes'] / $maxMin) * 100); @endphp
|
|
<div class="flex flex-col items-center gap-2 h-full">
|
|
<div class="flex-1 w-full flex items-end">
|
|
<div class="w-full bg-primary-soft rounded-t-md relative group transition-all hover:bg-primary-ink/20" style="height:{{ $h }}%;">
|
|
<div class="absolute -top-6 left-1/2 -translate-x-1/2 text-[10px] font-mono tabular-nums font-bold text-ink-1 opacity-0 group-hover:opacity-100 transition-opacity">
|
|
{{ $d['minutes'] }}
|
|
</div>
|
|
<div class="absolute inset-0 rounded-t-md bg-primary-ink" style="height:100%;opacity:0.15;"></div>
|
|
</div>
|
|
</div>
|
|
<div class="text-[11px] font-semibold text-ink-3">{{ $d['day'] }}</div>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
</x-card>
|
|
|
|
<x-card class="shadow-sm">
|
|
<h2 class="font-bold text-base text-ink-1 mb-3">Streak</h2>
|
|
|
|
<div class="text-center py-4">
|
|
<div class="text-5xl font-extrabold tracking-tight text-amber-ink font-mono tabular-nums">7</div>
|
|
<div class="text-xs text-ink-3 mt-1 font-semibold uppercase tracking-wider">Tage am Stück</div>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-7 gap-1 mt-2">
|
|
@for($i = 0; $i < 7; $i++)
|
|
<div class="aspect-square rounded-md bg-amber-soft border border-amber-soft grid place-items-center">
|
|
<x-heroicon-s-fire class="w-4 h-4 text-amber-ink" />
|
|
</div>
|
|
@endfor
|
|
</div>
|
|
|
|
<div class="text-[11px] text-ink-3 mt-3 text-center">Persönlicher Rekord: 12 Tage</div>
|
|
</x-card>
|
|
</section>
|
|
|
|
{{-- Per-Subject Progress --}}
|
|
<section>
|
|
<h2 class="font-bold text-base text-ink-1 mb-4">Fortschritt pro Fach</h2>
|
|
|
|
<x-card class="shadow-sm">
|
|
<div class="flex flex-col">
|
|
@foreach($subjects as $s)
|
|
@php
|
|
$colorMap = ['primary' => ['bg' => 'bg-primary-soft', 'ink' => 'text-primary-ink', 'bar' => 'bg-primary-ink'], 'rose' => ['bg' => 'bg-rose-soft', 'ink' => 'text-rose-ink', 'bar' => 'bg-rose-ink'], 'violet' => ['bg' => 'bg-violet-soft', 'ink' => 'text-violet-ink', 'bar' => 'bg-violet-ink'], 'green' => ['bg' => 'bg-green-soft', 'ink' => 'text-green-ink', 'bar' => 'bg-green-ink'], 'amber' => ['bg' => 'bg-amber-soft', 'ink' => 'text-amber-ink', 'bar' => 'bg-amber-ink']];
|
|
$c = $colorMap[$s['color']];
|
|
@endphp
|
|
<div class="grid grid-cols-[44px_1fr_140px_60px] gap-4 items-center py-3 border-t border-line first:border-t-0">
|
|
<div class="w-10 h-10 rounded-lg {{ $c['bg'] }} {{ $c['ink'] }} grid place-items-center font-bold">{{ $s['icon'] }}</div>
|
|
<div class="font-semibold text-sm text-ink-1">{{ $s['name'] }}</div>
|
|
<div class="h-2 rounded-full bg-bg-base overflow-hidden">
|
|
<div class="h-full rounded-full {{ $c['bar'] }} transition-all duration-500" style="width:{{ $s['progress'] }}%;"></div>
|
|
</div>
|
|
<div class="font-mono tabular-nums text-xs font-semibold {{ $c['ink'] }} text-right">{{ $s['progress'] }} %</div>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
</x-card>
|
|
</section>
|
|
|
|
</div>
|