1a4bdb1fe1
Es gibt nun task collections und vordefinierte tasks für alle. Onboarding verfeinert und webseite-carousel gefixt (logging später entfernen!)
279 lines
16 KiB
PHP
279 lines
16 KiB
PHP
@php
|
||
$steps = [
|
||
'intro' => 'Willkommen',
|
||
'packages' => 'Aufgaben wählen',
|
||
'event' => 'Event benennen',
|
||
'palette' => 'Farbwelt',
|
||
'invite' => 'Einladungen',
|
||
];
|
||
@endphp
|
||
|
||
<x-filament-panels::page>
|
||
<div class="mx-auto w-full max-w-4xl space-y-10">
|
||
<section class="rounded-3xl border border-white/60 bg-white/80 p-8 shadow-xl shadow-rose-100/40 backdrop-blur-md">
|
||
<header class="space-y-4 text-center">
|
||
<p class="inline-flex items-center gap-2 rounded-full border border-rose-100 bg-white/70 px-4 py-1 text-sm font-medium text-rose-500 shadow-sm">
|
||
Fotospiel Studio · Geführter Start
|
||
</p>
|
||
<h1 class="font-display text-4xl font-semibold tracking-tight text-slate-900">
|
||
Eure Gäste werden zu Geschichtenerzähler:innen
|
||
</h1>
|
||
<p class="mx-auto max-w-2xl text-base leading-relaxed text-slate-600">
|
||
Wir richten mit euch die Aufgaben, das Event und den ersten QR-Code ein. Alles ohne Technikstress – Schritt für Schritt.
|
||
</p>
|
||
</header>
|
||
|
||
<ol class="mt-8 grid gap-3 md:grid-cols-5">
|
||
@foreach ($steps as $key => $label)
|
||
<li class="flex flex-col items-center gap-2">
|
||
<span
|
||
@class([
|
||
'flex h-10 w-10 items-center justify-center rounded-full text-sm font-semibold transition',
|
||
'bg-rose-500 text-white shadow-lg shadow-rose-300/70' => $step === $key,
|
||
'bg-white text-rose-500 border border-rose-200' => $step !== $key,
|
||
])>
|
||
{{ $loop->iteration }}
|
||
</span>
|
||
<span class="text-sm font-medium text-slate-600">
|
||
{{ $label }}
|
||
</span>
|
||
</li>
|
||
@endforeach
|
||
</ol>
|
||
</section>
|
||
|
||
@if ($step === 'intro')
|
||
<section class="rounded-3xl border border-white/70 bg-gradient-to-br from-rose-50 via-white to-sky-50 p-10 shadow-lg shadow-rose-100/50">
|
||
<div class="space-y-6 text-center">
|
||
<h2 class="text-3xl font-semibold text-slate-900">So funktioniert Fotospiel</h2>
|
||
<div class="grid gap-6 md:grid-cols-3">
|
||
<div class="rounded-2xl bg-white/80 p-5 shadow-sm">
|
||
<h3 class="font-semibold text-slate-900">1 · Aufgaben auswählen</h3>
|
||
<p class="mt-2 text-sm text-slate-600">Kuratiere Aufgaben, die eure Gäste inspirieren – ohne schon Fotos zu sammeln.</p>
|
||
</div>
|
||
<div class="rounded-2xl bg-white/80 p-5 shadow-sm">
|
||
<h3 class="font-semibold text-slate-900">2 · Event gestalten</h3>
|
||
<p class="mt-2 text-sm text-slate-600">Name, Datum und Farben bestimmen das Look & Feel eurer Fotostory.</p>
|
||
</div>
|
||
<div class="rounded-2xl bg-white/80 p-5 shadow-sm">
|
||
<h3 class="font-semibold text-slate-900">3 · QR-Code teilen</h3>
|
||
<p class="mt-2 text-sm text-slate-600">Euer Einladungslink führt Gäste direkt in die Galerie – kein App-Download notwendig.</p>
|
||
</div>
|
||
</div>
|
||
<button
|
||
wire:click="start"
|
||
type="button"
|
||
class="inline-flex items-center justify-center gap-2 rounded-full bg-rose-500 px-8 py-3 text-base font-semibold text-white shadow-lg shadow-rose-300/60 transition hover:bg-rose-600">
|
||
Jetzt loslegen
|
||
</button>
|
||
</div>
|
||
</section>
|
||
@endif
|
||
|
||
@if ($step === 'packages')
|
||
<section class="rounded-3xl border border-white/70 bg-white/85 p-10 shadow-xl shadow-rose-100/50">
|
||
<form wire:submit.prevent="savePackages" class="space-y-6">
|
||
<div class="space-y-2 text-center">
|
||
<h2 class="text-3xl font-semibold text-slate-900">Wählt euer erstes Aufgabenpaket</h2>
|
||
<p class="text-sm text-slate-600">Jedes Paket enthält spielerische Prompts. Ihr könnt später weitere hinzufügen oder eigene Aufgaben erstellen.</p>
|
||
</div>
|
||
<div class="grid gap-4 md:grid-cols-2">
|
||
@foreach ($this->packageList as $package)
|
||
<label
|
||
for="package-{{ $package['id'] }}"
|
||
class="group flex cursor-pointer flex-col gap-3 rounded-2xl border border-rose-100 bg-white/80 p-5 shadow-sm transition hover:border-rose-300 hover:shadow-lg">
|
||
<div class="flex items-start gap-3">
|
||
<input
|
||
id="package-{{ $package['id'] }}"
|
||
type="checkbox"
|
||
value="{{ $package['id'] }}"
|
||
wire:model="selectedPackages"
|
||
class="mt-1 h-4 w-4 rounded border-rose-200 text-rose-500 focus:ring-rose-400" />
|
||
<div>
|
||
<p class="text-base font-semibold text-slate-900">{{ $package['name'] }}</p>
|
||
@if ($package['description'])
|
||
<p class="mt-1 text-sm text-slate-600">{{ $package['description'] }}</p>
|
||
@endif
|
||
</div>
|
||
</div>
|
||
</label>
|
||
@endforeach
|
||
</div>
|
||
@error('selectedPackages')
|
||
<p class="text-sm text-rose-600">{{ $message }}</p>
|
||
@enderror
|
||
<div class="flex justify-end">
|
||
<button
|
||
type="submit"
|
||
class="inline-flex items-center justify-center gap-2 rounded-full bg-rose-500 px-6 py-3 text-sm font-semibold text-white shadow-lg shadow-rose-300/60 transition hover:bg-rose-600">
|
||
Weiter zu Schritt 2
|
||
</button>
|
||
</div>
|
||
</form>
|
||
</section>
|
||
@endif
|
||
|
||
@if ($step === 'event')
|
||
<section class="rounded-3xl border border-white/70 bg-white/90 p-10 shadow-xl shadow-sky-100/50">
|
||
<form wire:submit.prevent="saveEvent" class="space-y-6">
|
||
<div class="space-y-2">
|
||
<h2 class="text-3xl font-semibold text-slate-900">Wie heißt euer Event?</h2>
|
||
<p class="text-sm text-slate-600">Name und Anlass erscheinen in eurer Gästegalerie und auf den Einladungen.</p>
|
||
</div>
|
||
<div class="grid gap-5 md:grid-cols-2">
|
||
<div class="md:col-span-2">
|
||
<label class="block text-sm font-semibold text-slate-700">
|
||
Event-Name
|
||
<input
|
||
type="text"
|
||
wire:model.defer="eventName"
|
||
class="mt-1 w-full rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm text-slate-900 shadow-sm focus:border-rose-400 focus:ring-rose-400"
|
||
placeholder="z. B. Hochzeit Anna & Lea" />
|
||
</label>
|
||
@error('eventName')
|
||
<p class="mt-1 text-sm text-rose-600">{{ $message }}</p>
|
||
@enderror
|
||
</div>
|
||
<div>
|
||
<label class="block text-sm font-semibold text-slate-700">
|
||
Datum
|
||
<input
|
||
type="date"
|
||
wire:model.defer="eventDate"
|
||
class="mt-1 w-full rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm text-slate-900 shadow-sm focus:border-rose-400 focus:ring-rose-400" />
|
||
</label>
|
||
@error('eventDate')
|
||
<p class="mt-1 text-sm text-rose-600">{{ $message }}</p>
|
||
@enderror
|
||
</div>
|
||
<div>
|
||
<label class="block text-sm font-semibold text-slate-700">
|
||
Anlass
|
||
<select
|
||
wire:model.defer="eventTypeId"
|
||
class="mt-1 w-full rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm text-slate-900 shadow-sm focus:border-rose-400 focus:ring-rose-400">
|
||
<option value="">Bitte wählen</option>
|
||
@foreach ($this->eventTypeOptions as $id => $label)
|
||
<option value="{{ $id }}">{{ $label }}</option>
|
||
@endforeach
|
||
</select>
|
||
</label>
|
||
@error('eventTypeId')
|
||
<p class="mt-1 text-sm text-rose-600">{{ $message }}</p>
|
||
@enderror
|
||
</div>
|
||
</div>
|
||
<div class="flex justify-between">
|
||
<button type="button" wire:click="$set('step', 'packages')" class="text-sm font-semibold text-slate-500 hover:text-slate-700">
|
||
Zurück
|
||
</button>
|
||
<button
|
||
type="submit"
|
||
class="inline-flex items-center justify-center gap-2 rounded-full bg-rose-500 px-6 py-3 text-sm font-semibold text-white shadow-lg shadow-rose-300/60 transition hover:bg-rose-600">
|
||
Weiter zu Schritt 3
|
||
</button>
|
||
</div>
|
||
</form>
|
||
</section>
|
||
@endif
|
||
|
||
@if ($step === 'palette')
|
||
<section class="rounded-3xl border border-white/70 bg-white/90 p-10 shadow-xl shadow-emerald-100/50">
|
||
<form wire:submit.prevent="savePalette" class="space-y-6">
|
||
<div class="space-y-2">
|
||
<h2 class="text-3xl font-semibold text-slate-900">Welche Farben spiegeln eure Story?</h2>
|
||
<p class="text-sm text-slate-600">Wir wenden die Palette auf Karten, QR-Layouts und App-Elemente an. Ihr könnt sie später jederzeit ändern.</p>
|
||
</div>
|
||
<div class="grid gap-4 md:grid-cols-2">
|
||
@foreach ($this->paletteOptions as $value => $data)
|
||
<label
|
||
for="palette-{{ $value }}"
|
||
class="flex cursor-pointer flex-col gap-3 rounded-2xl border border-slate-200 bg-white/80 p-5 shadow-sm transition hover:border-rose-300 hover:shadow-lg">
|
||
<div class="flex items-start gap-3">
|
||
<input
|
||
id="palette-{{ $value }}"
|
||
type="radio"
|
||
value="{{ $value }}"
|
||
wire:model.defer="palette"
|
||
class="mt-1 h-4 w-4 border-rose-300 text-rose-500 focus:ring-rose-400" />
|
||
<div>
|
||
<p class="text-base font-semibold text-slate-900">{{ $data['label'] }}</p>
|
||
<p class="mt-1 text-sm text-slate-600">{{ $data['description'] }}</p>
|
||
</div>
|
||
</div>
|
||
</label>
|
||
@endforeach
|
||
</div>
|
||
@error('palette')
|
||
<p class="text-sm text-rose-600">{{ $message }}</p>
|
||
@enderror
|
||
<div class="flex justify-between">
|
||
<button type="button" wire:click="$set('step', 'event')" class="text-sm font-semibold text-slate-500 hover:text-slate-700">
|
||
Zurück
|
||
</button>
|
||
<button
|
||
type="submit"
|
||
class="inline-flex items-center justify-center gap-2 rounded-full bg-rose-500 px-6 py-3 text-sm font-semibold text-white shadow-lg shadow-rose-300/60 transition hover:bg-rose-600">
|
||
Weiter zu Schritt 4
|
||
</button>
|
||
</div>
|
||
</form>
|
||
</section>
|
||
@endif
|
||
|
||
@if ($step === 'invite')
|
||
<section class="rounded-3xl border border-white/70 bg-white/90 p-10 shadow-xl shadow-indigo-100/50">
|
||
<form wire:submit.prevent="finish" class="space-y-6">
|
||
<div class="space-y-2">
|
||
<h2 class="text-3xl font-semibold text-slate-900">Wie soll euer Einladungs-Layout aussehen?</h2>
|
||
<p class="text-sm text-slate-600">Wir generieren sofort einen QR-Code samt PDF/SVG-Downloads.</p>
|
||
</div>
|
||
<div class="grid gap-4 md:grid-cols-2">
|
||
@foreach ($this->layoutOptions as $layout)
|
||
<label
|
||
for="layout-{{ $layout['id'] }}"
|
||
class="flex cursor-pointer flex-col gap-3 rounded-2xl border border-slate-200 bg-white/80 p-5 shadow-sm transition hover:border-rose-300 hover:shadow-lg">
|
||
<div class="flex items-start gap-3">
|
||
<input
|
||
id="layout-{{ $layout['id'] }}"
|
||
type="radio"
|
||
value="{{ $layout['id'] }}"
|
||
wire:model.defer="inviteLayout"
|
||
class="mt-1 h-4 w-4 border-rose-300 text-rose-500 focus:ring-rose-400" />
|
||
<div>
|
||
<p class="text-base font-semibold text-slate-900">{{ $layout['name'] }}</p>
|
||
<p class="mt-1 text-sm text-slate-600">{{ $layout['subtitle'] }}</p>
|
||
</div>
|
||
</div>
|
||
</label>
|
||
@endforeach
|
||
</div>
|
||
@error('inviteLayout')
|
||
<p class="text-sm text-rose-600">{{ $message }}</p>
|
||
@enderror
|
||
<div class="flex justify-between">
|
||
<button type="button" wire:click="$set('step', 'palette')" class="text-sm font-semibold text-slate-500 hover:text-slate-700">
|
||
Zurück
|
||
</button>
|
||
<button
|
||
type="submit"
|
||
@class([
|
||
'inline-flex items-center justify-center gap-2 rounded-full px-6 py-3 text-sm font-semibold text-white shadow-lg transition',
|
||
'bg-rose-500 shadow-rose-300/60 hover:bg-rose-600' => ! $isProcessing,
|
||
'bg-rose-400 opacity-70' => $isProcessing,
|
||
])
|
||
wire:loading.attr="disabled"
|
||
wire:target="finish">
|
||
<span wire:loading.remove wire:target="finish">Setup abschließen</span>
|
||
<span wire:loading wire:target="finish" class="flex items-center gap-2">
|
||
<x-filament::loading-indicator class="h-4 w-4" />
|
||
Bitte warten …
|
||
</span>
|
||
</button>
|
||
</div>
|
||
</form>
|
||
</section>
|
||
@endif
|
||
</div>
|
||
</x-filament-panels::page>
|