112 lines
5.8 KiB
PHP
112 lines
5.8 KiB
PHP
<div class="flex flex-col gap-6" x-data="{
|
|
file: null,
|
|
preview: null,
|
|
status: 'idle',
|
|
handleFile(event) {
|
|
const f = event.target.files[0];
|
|
if (!f) return;
|
|
this.file = f;
|
|
const reader = new FileReader();
|
|
reader.onload = e => this.preview = e.target.result;
|
|
reader.readAsDataURL(f);
|
|
},
|
|
analyze() {
|
|
if (!this.file) return;
|
|
this.status = 'uploading';
|
|
setTimeout(() => { this.status = 'analyzing'; }, 800);
|
|
setTimeout(() => {
|
|
this.status = 'idle';
|
|
Livewire.dispatch('openModal', { component: 'photo-help.modals.result' });
|
|
}, 2200);
|
|
},
|
|
reset() {
|
|
this.file = null;
|
|
this.preview = null;
|
|
this.status = 'idle';
|
|
},
|
|
}">
|
|
|
|
<header>
|
|
<div class="text-[11px] uppercase tracking-[0.14em] text-ink-3 font-semibold mb-1.5">KI-Unterstützung</div>
|
|
<h1 class="text-[28px] leading-tight font-extrabold tracking-tight text-ink-1">Foto-Hilfe</h1>
|
|
<p class="text-sm text-ink-2 mt-2 max-w-xl leading-relaxed">Foto der Aufgabe hochladen — die KI erklärt den Lösungsweg Schritt für Schritt.</p>
|
|
</header>
|
|
|
|
<div class="grid grid-cols-3 gap-5">
|
|
|
|
<x-card class="col-span-2 shadow-sm">
|
|
<div x-show="!preview" class="border-2 border-dashed border-line rounded-lg p-12 text-center hover:border-primary-ink transition-colors">
|
|
<div class="w-14 h-14 rounded-full bg-primary-soft text-primary-ink grid place-items-center mx-auto mb-4">
|
|
<x-heroicon-o-camera class="w-7 h-7" />
|
|
</div>
|
|
<div class="font-bold text-ink-1 mb-1">Foto hochladen</div>
|
|
<p class="text-sm text-ink-2 mb-5 max-w-sm mx-auto leading-relaxed">JPG oder PNG, max. 10 MB. Achte auf gute Beleuchtung und scharfen Fokus.</p>
|
|
<label class="inline-flex items-center gap-2 px-5 py-2.5 rounded-lg bg-ink-1 text-bg-base text-sm font-semibold cursor-pointer hover:bg-ink-2 transition-all shadow-sm">
|
|
<x-heroicon-o-arrow-up-tray class="w-4 h-4" />
|
|
Datei wählen
|
|
<input type="file" accept="image/png,image/jpeg" class="sr-only" @change="handleFile($event)">
|
|
</label>
|
|
</div>
|
|
|
|
<div x-show="preview" x-cloak class="flex flex-col gap-4">
|
|
<div class="relative rounded-lg overflow-hidden border border-line bg-bg-tint">
|
|
<img :src="preview" alt="Foto-Preview" class="w-full max-h-96 object-contain">
|
|
<button type="button" @click="reset()" class="absolute top-2 right-2 w-8 h-8 grid place-items-center rounded-full bg-ink-1/80 text-bg-base hover:bg-ink-1 transition-all" aria-label="Entfernen">
|
|
<x-heroicon-o-x-mark class="w-4 h-4" />
|
|
</button>
|
|
</div>
|
|
<div class="flex gap-2">
|
|
<x-btn variant="primary" class="flex-1 justify-center" @click="analyze()" x-bind:disabled="status !== 'idle'">
|
|
<span x-show="status === 'idle'" class="inline-flex items-center gap-2">
|
|
<x-heroicon-o-sparkles class="w-4 h-4" />
|
|
Lösungsweg erklären
|
|
</span>
|
|
<span x-show="status === 'uploading'" x-cloak class="inline-flex items-center gap-2">
|
|
<x-heroicon-o-arrow-path class="w-4 h-4 animate-spin" />
|
|
Hochladen…
|
|
</span>
|
|
<span x-show="status === 'analyzing'" x-cloak class="inline-flex items-center gap-2">
|
|
<x-heroicon-o-arrow-path class="w-4 h-4 animate-spin" />
|
|
KI analysiert…
|
|
</span>
|
|
</x-btn>
|
|
<x-btn @click="reset()">Anderes Foto</x-btn>
|
|
</div>
|
|
</div>
|
|
</x-card>
|
|
|
|
<div class="flex flex-col gap-4">
|
|
<x-card variant="gradient-primary" class="shadow-sm">
|
|
<div class="flex items-center gap-2 mb-2 text-primary-ink">
|
|
<x-heroicon-o-light-bulb class="w-4 h-4" />
|
|
<span class="text-[10px] font-bold uppercase tracking-[0.12em]">Tipp</span>
|
|
</div>
|
|
<div class="font-bold text-sm text-ink-1 mb-1.5">Halte das Blatt gerade</div>
|
|
<p class="text-xs text-ink-2 leading-relaxed">Die KI versteht dein Foto besser, wenn die Aufgabe gerade im Bild liegt und gut zu lesen ist.</p>
|
|
</x-card>
|
|
|
|
<x-card class="shadow-sm">
|
|
<div class="text-[10px] uppercase tracking-[0.12em] text-ink-3 font-semibold mb-3">Letzte Anfragen</div>
|
|
<div class="flex flex-col gap-2.5">
|
|
<div class="flex items-center gap-2.5 text-xs">
|
|
<div class="w-8 h-8 rounded-lg bg-primary-soft text-primary-ink grid place-items-center font-bold">∑</div>
|
|
<div class="min-w-0 flex-1">
|
|
<div class="font-semibold text-ink-1 truncate">Bruchrechnung</div>
|
|
<div class="text-ink-3">vor 2 Std.</div>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center gap-2.5 text-xs">
|
|
<div class="w-8 h-8 rounded-lg bg-rose-soft text-rose-ink grid place-items-center font-bold">A</div>
|
|
<div class="min-w-0 flex-1">
|
|
<div class="font-semibold text-ink-1 truncate">Diktat-Korrektur</div>
|
|
<div class="text-ink-3">gestern</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</x-card>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|