62 lines
3.9 KiB
Twig
62 lines
3.9 KiB
Twig
|
<div class="bg-white/80 backdrop-blur-sm rounded-2xl border border-gray-100 p-5 hover:shadow-lg transition-all duration-300 group">
|
||
|
|
<div class="grid grid-cols-12 gap-5">
|
||
|
|
<div class="relative col-span-5">
|
||
|
|
<div class="relative group">
|
||
|
|
<twig:ux:icon name="mingcute:ticket-fill" class="absolute left-3.5 top-1/2 -translate-y-1/2 w-5 h-5 text-orange-400 pointer-events-none transition-colors group-hover:text-orange-500" />
|
||
|
|
<select name="ticket"
|
||
|
|
required
|
||
|
|
data-form-target="ticketType"
|
||
|
|
class="w-full pl-11 pr-10 py-3.5 rounded-xl appearance-none bg-white border border-gray-200 text-gray-800 font-medium text-[15px] focus:border-orange-500 focus:ring-2 focus:ring-orange-200 transition-all hover:border-orange-300">
|
||
|
|
<option value="" disabled selected>Bitte wählen</option>
|
||
|
|
<option value="1">All-Inclusive Ticket</option>
|
||
|
|
<option value="2">After-Show Ticket</option>
|
||
|
|
<option value="3">Kinder-Ticket (6-12 Jahre)</option>
|
||
|
|
<option value="4">Klein-Kind (0-6 Jahre)</option>
|
||
|
|
</select>
|
||
|
|
<div class="absolute inset-y-0 right-0 flex items-center pr-3.5 pointer-events-none">
|
||
|
|
<twig:ux:icon name="mdi:chevron-down" class="w-5 h-5 text-orange-400 transition-colors group-hover:text-orange-500" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="relative col-span-4">
|
||
|
|
<div class="relative group">
|
||
|
|
<twig:ux:icon name="mdi:food" class="absolute left-3.5 top-1/2 -translate-y-1/2 w-5 h-5 text-orange-400 pointer-events-none transition-colors group-hover:text-orange-500" />
|
||
|
|
<select name="food"
|
||
|
|
required
|
||
|
|
data-form-target="foodType"
|
||
|
|
class="w-full pl-11 pr-10 py-3.5 rounded-xl appearance-none bg-white border border-gray-200 text-gray-800 font-medium text-[15px] focus:border-orange-500 focus:ring-2 focus:ring-orange-200 transition-all hover:border-orange-300">
|
||
|
|
<option value="" disabled selected>Bitte wählen</option>
|
||
|
|
<option value="1">Mit Fleisch</option>
|
||
|
|
<option value="2">Vegetarisch</option>
|
||
|
|
<option value="3">Vegan</option>
|
||
|
|
</select>
|
||
|
|
<div class="absolute inset-y-0 right-0 flex items-center pr-3.5 pointer-events-none">
|
||
|
|
<twig:ux:icon name="mdi:chevron-down" class="w-5 h-5 text-orange-400 transition-colors group-hover:text-orange-500" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="relative col-span-2">
|
||
|
|
<div class="relative group">
|
||
|
|
<twig:ux:icon name="mdi:note" class="absolute left-3.5 top-1/2 -translate-y-1/2 w-5 h-5 text-orange-400 pointer-events-none transition-colors group-hover:text-orange-500" />
|
||
|
|
<input type="text"
|
||
|
|
placeholder="Optional"
|
||
|
|
name="note"
|
||
|
|
data-form-target="note"
|
||
|
|
class="w-full pl-11 pr-4 py-3.5 rounded-xl border border-gray-200 text-gray-800 text-[15px] placeholder-gray-400 focus:border-orange-500 focus:ring-2 focus:ring-orange-200 transition-all hover:border-orange-300" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="flex justify-center items-end col-span-1 pb-1">
|
||
|
|
<button data-action="form#removeEntry"
|
||
|
|
type="button"
|
||
|
|
class="group/btn p-3 hover:bg-red-50 rounded-xl transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-red-200"
|
||
|
|
title="Ticket entfernen">
|
||
|
|
<twig:ux:icon name="mingcute:delete-fill"
|
||
|
|
class="w-5 h-5 text-red-400 group-hover/btn:text-red-500 transition-colors" />
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|