51 lines
2.7 KiB
PHP
51 lines
2.7 KiB
PHP
<div>
|
|
<header class="flex items-center justify-between gap-4 p-6 border-b border-line">
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-10 h-10 rounded-lg bg-primary-soft text-primary-ink grid place-items-center">
|
|
<x-heroicon-o-sparkles class="w-5 h-5" />
|
|
</div>
|
|
<div>
|
|
<div class="text-[10px] uppercase tracking-[0.12em] text-ink-3 font-semibold">KI-Analyse</div>
|
|
<div class="font-bold text-base text-ink-1">Lösungsweg</div>
|
|
</div>
|
|
</div>
|
|
<button type="button" wire:click="closeModal" aria-label="Schließen" class="text-ink-3 hover:text-ink-1 transition-colors p-1">
|
|
<x-heroicon-o-x-mark class="w-5 h-5" />
|
|
</button>
|
|
</header>
|
|
|
|
<div class="p-6 flex flex-col gap-4">
|
|
<div class="flex gap-3 items-start">
|
|
<div class="w-7 h-7 rounded-full bg-primary text-white grid place-items-center text-xs font-bold shrink-0">1</div>
|
|
<div class="flex-1">
|
|
<div class="font-semibold text-sm text-ink-1 mb-1">Erkennung</div>
|
|
<p class="text-sm text-ink-2 leading-relaxed">Aufgabe erkannt: schriftliche Multiplikation. Zwei dreistellige Zahlen.</p>
|
|
</div>
|
|
</div>
|
|
<div class="flex gap-3 items-start">
|
|
<div class="w-7 h-7 rounded-full bg-primary text-white grid place-items-center text-xs font-bold shrink-0">2</div>
|
|
<div class="flex-1">
|
|
<div class="font-semibold text-sm text-ink-1 mb-1">Methode</div>
|
|
<p class="text-sm text-ink-2 leading-relaxed">Stellengerechte Multiplikation — beginne mit der Einer-Stelle des unteren Faktors.</p>
|
|
</div>
|
|
</div>
|
|
<div class="flex gap-3 items-start">
|
|
<div class="w-7 h-7 rounded-full bg-primary text-white grid place-items-center text-xs font-bold shrink-0">3</div>
|
|
<div class="flex-1">
|
|
<div class="font-semibold text-sm text-ink-1 mb-1">Schritte</div>
|
|
<p class="text-sm text-ink-2 leading-relaxed">Einer-Produkt notieren, Zehner-Produkt um eine Stelle versetzt darunter schreiben, dann addieren.</p>
|
|
</div>
|
|
</div>
|
|
<div class="bg-primary-soft border border-primary-soft rounded-lg p-4 mt-2">
|
|
<div class="text-[11px] uppercase tracking-[0.12em] text-primary-ink font-semibold mb-1">Hinweis</div>
|
|
<p class="text-sm text-ink-2 leading-relaxed">Vergiss nicht den Übertrag bei jedem Stellenwechsel. Achte auf saubere Spalten.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<footer class="px-6 pb-6">
|
|
<x-btn variant="primary" class="w-full justify-center" wire:click="closeModal">
|
|
Verstanden
|
|
</x-btn>
|
|
</footer>
|
|
</div>
|