add ticket purchase page
Co-authored-by: Jan-Marlon Leibl <jleibl@proton.me> Reviewed-on: http://git.simonis.lol/projects/abiball/pulls/13 Reviewed-by: jank1619 <jan@kjan.email>
This commit is contained in:
61
templates/ticket/_partials/_form.html.twig
Normal file
61
templates/ticket/_partials/_form.html.twig
Normal file
@ -0,0 +1,61 @@
|
||||
<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>
|
||||
92
templates/ticket/index.html.twig
Normal file
92
templates/ticket/index.html.twig
Normal file
@ -0,0 +1,92 @@
|
||||
{% extends 'base.html.twig' %}
|
||||
|
||||
{% block title %}Tickets kaufen{% endblock %}
|
||||
|
||||
{% block body %}
|
||||
<div class="min-h-screen bg-white relative overflow-hidden">
|
||||
<header class="w-full bg-white/90 backdrop-blur-md shadow-lg fixed top-0 z-50 border-b border-gray-100">
|
||||
<div class="container mx-auto px-4 sm:px-6 lg:px-8 py-3 sm:py-4 flex justify-between items-center">
|
||||
<a href="{{ path('app_home') }}" class="flex items-center space-x-2 group">
|
||||
<img src="{{ asset('images/logo.png') }}" alt="Logo" class="w-32 sm:w-36 md:w-40 h-auto group-hover:opacity-90 transition-opacity" />
|
||||
</a>
|
||||
<a href="{{ path('app_home') }}" class="bg-gradient-to-r from-red-500 to-orange-500 hover:from-red-600 hover:to-orange-600 text-white px-6 py-2.5 rounded-full text-sm font-medium shadow-md hover:shadow-lg transition-all duration-300 flex items-center space-x-2">
|
||||
<twig:ux:icon name="line-md:home" class="w-4 h-4" />
|
||||
<span>Zurück zur Startseite</span>
|
||||
</a>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="container mx-auto px-4 sm:px-6 lg:px-8 pt-24 sm:pt-28 md:pt-32 pb-16 sm:pb-20 flex flex-col items-center justify-center relative z-10">
|
||||
<div class="w-full max-w-3xl">
|
||||
<h1 class="text-3xl sm:text-4xl md:text-5xl font-bold text-center mb-8 tracking-tight leading-tight">
|
||||
<span class="bg-clip-text text-transparent bg-gradient-to-r from-red-500 to-orange-500">Tickets kaufen</span>
|
||||
</h1>
|
||||
|
||||
<div class="bg-white/90 backdrop-blur-md shadow-2xl rounded-3xl p-8 md:p-10 mb-12 transform transition-all duration-300 border border-gray-100">
|
||||
<div data-controller="form" class="space-y-8">
|
||||
<div class="hidden" data-form-target="key">{{ env('STRIPE_PUBLIC_KEY')}}</div>
|
||||
|
||||
<section>
|
||||
<h2 class="text-2xl font-semibold mb-6 flex items-center space-x-3">
|
||||
<twig:ux:icon name="mdi:user-circle" class="w-6 h-6 text-orange-500" />
|
||||
<span>Persönliche Daten</span>
|
||||
</h2>
|
||||
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-5">
|
||||
<div class="relative">
|
||||
<twig:ux:icon name="mdi:user-circle" class="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400" />
|
||||
<input name="firstname" data-form-target="firstname" class="w-full pl-10 pr-4 py-3 rounded-xl border border-gray-200 focus:border-orange-500 focus:ring-2 focus:ring-orange-200 transition-all" type="text" placeholder="Vorname*" required>
|
||||
</div>
|
||||
<div class="relative">
|
||||
<twig:ux:icon name="mdi:user-circle" class="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400" />
|
||||
<input name="lastname" data-form-target="lastname" class="w-full pl-10 pr-4 py-3 rounded-xl border border-gray-200 focus:border-orange-500 focus:ring-2 focus:ring-orange-200 transition-all" type="text" placeholder="Nachname*" required>
|
||||
</div>
|
||||
<div class="relative">
|
||||
<twig:ux:icon name="mdi:envelope" class="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400" />
|
||||
<input name="email" data-form-target="email" class="w-full pl-10 pr-4 py-3 rounded-xl border border-gray-200 focus:border-orange-500 focus:ring-2 focus:ring-orange-200 transition-all" type="email" placeholder="E-Mail*" required>
|
||||
</div>
|
||||
<div class="relative">
|
||||
<twig:ux:icon name="ic:baseline-phone" class="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400" />
|
||||
<input name="phone" data-form-target="phone" class="w-full pl-10 pr-4 py-3 rounded-xl border border-gray-200 focus:border-orange-500 focus:ring-2 focus:ring-orange-200 transition-all" type="tel" placeholder="Telefon (optional)">
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="h-px bg-gradient-to-r from-transparent via-gray-200 to-transparent"></div>
|
||||
|
||||
<section>
|
||||
<h2 class="text-2xl font-semibold mb-6 flex items-center space-x-3">
|
||||
<twig:ux:icon name="mingcute:ticket-fill" class="w-6 h-6 text-orange-500" />
|
||||
<span>Tickets</span>
|
||||
</h2>
|
||||
|
||||
<div class="grid grid-cols-4 gap-4 mb-4 px-4 text-sm font-medium text-gray-600">
|
||||
<div>Ticket</div>
|
||||
<div>Ernährung</div>
|
||||
<div>Anmerkungen</div>
|
||||
<div class="text-center">Aktion</div>
|
||||
</div>
|
||||
|
||||
<div class="forms space-y-4">
|
||||
{% include 'ticket/_partials/_form.html.twig' %}
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-between mt-6 pt-4">
|
||||
<button data-action="form#addEntry" type="button" class="flex items-center space-x-2 text-orange-500 hover:text-orange-600 transition-colors px-4 py-2 rounded-lg hover:bg-orange-50">
|
||||
<twig:ux:icon name="line-md:plus-circle-filled" class="w-5 h-5" />
|
||||
<span>Ticket hinzufügen</span>
|
||||
</button>
|
||||
|
||||
<button type="submit" data-action="form#submit" data-form-target="submit" class="bg-gradient-to-r from-red-500 to-orange-500 hover:from-red-600 hover:to-orange-600 text-white px-8 py-3 rounded-xl text-sm font-medium shadow-md hover:shadow-lg transition-all duration-300 flex items-center space-x-2">
|
||||
<span>Jetzt bestellen</span>
|
||||
<twig:ux:icon name="line-md:arrow-right-circle" class="arrow w-4 h-4" />
|
||||
<twig:ux:icon name="loader" class="loader hidden w-4 h-4 animate-spin" />
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
{% endblock %}
|
||||
16
templates/ticket/success.html.twig
Normal file
16
templates/ticket/success.html.twig
Normal file
@ -0,0 +1,16 @@
|
||||
{% extends 'base.html.twig' %}
|
||||
|
||||
{% block title %}
|
||||
Success
|
||||
{% endblock %}
|
||||
|
||||
{% block body %}
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<h1 class="text-center">Success</h1>
|
||||
<p class="text-center">Your ticket has been successfully created.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user