zoomyboy
/
wn-discoteam-theme
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix form
continuous-integration/drone/push Build is passing Details

This commit is contained in:
philipp lang 2024-02-13 02:18:27 +01:00
parent 395b1f40d7
commit 7642ab0c40
5 changed files with 74 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
layouts/base.htm
View File

@ -3,7 +3,7 @@
<!doctype html> <!doctype html>
<html lang="it"> <html lang="it">
{% partial 'shared/head' %} {% partial 'shared/head' %}
<body class="font-nunito dark"> <body class="font-nunito">
{% partial 'shared/header' %} {% partial 'shared/header' %}
{% page %} {% page %}
{% partial 'shared/footer' %} {% partial 'shared/footer' %}

12
pages/homepage.htm
View File

@ -16,9 +16,11 @@ is_hidden = 0
</div> </div>
</div> </div>
<section id="ablauf" class="py-10 comtainer mx-auto"> <div class="container mx-auto py-10 px-6">
<div class="flex space-x-6 items-start">
<section id="ablauf" class="grow">
{% partial 'heading' title="Ablauf" %} {% partial 'heading' title="Ablauf" %}
<div class="px-6"> <div>
{% partial 'listelement' title="Anfragen" number="1" content='Fülle das folgende <a href="#buchen">Formular</a> aus und sende uns so eine Buchungsanfrage.' %} {% partial 'listelement' title="Anfragen" number="1" content='Fülle das folgende <a href="#buchen">Formular</a> aus und sende uns so eine Buchungsanfrage.' %}
{% partial 'listelement' title="Rückmeldung" number="2" content='Wir melden uns innerhalb von einigen Tagen per E-Mail bei dir und senden dir ein Vertragsdokument als PDF zu.' %} {% partial 'listelement' title="Rückmeldung" number="2" content='Wir melden uns innerhalb von einigen Tagen per E-Mail bei dir und senden dir ein Vertragsdokument als PDF zu.' %}
{% partial 'listelement' title="Bestätigung" number="3" content='Sende uns den Vertrag unterschrieben per Post zurück.' %} {% partial 'listelement' title="Bestätigung" number="3" content='Sende uns den Vertrag unterschrieben per Post zurück.' %}
@ -28,9 +30,13 @@ is_hidden = 0
</div> </div>
</section> </section>
<section id="anfrage" class="py-10 container mx-auto"> <section id="anfrage" class="shadow-xl bg-neutral-200 border border-neutral-200 rounded-xl p-3 w-2/5 flex-none">
{% partial 'heading' title="Anfrage" %} {% partial 'heading' title="Anfrage" %}
<div class="mt-4">
{% component 'anfrage' %} {% component 'anfrage' %}
</div>
</section> </section>
</div> </div>
</div>
</div>

70
partials/anfrage/default.htm
View File

@ -1,29 +1,49 @@
<form data-request="anfrage::onSubmit" data-request-flash class="grid grid-cols-[max-content_1fr] gap-x-6 gap-y-2"> <form data-request="anfrage::onSubmit" data-request-flash class="grid grid-cols-2 gap-3">
<span>Vorname</span>
<input type="text" name="firstname" class="border-gray-700 border-2" /> <div class="col-span-full">
<span>Nachname</span> <label for="reason" class="block text-sm font-medium text-gray-900 dark:text-white">Grund für die Feier</label>
<input type="text" name="lastname" class="border-gray-700 border-2" /> <input id="reason" name="reason" class="shadow-sm bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500 dark:shadow-sm-light" placeholder="z.B. 18. Geburtstag">
<span>Telefonnummer</span>
<input type="text" name="phone" class="border-gray-700 border-2" />
<span>E-Mail-Adressse</span>
<input type="text" name="email" class="border-gray-700 border-2" />
<span>Grund für die Feier</span>
<input type="text" name="reason" class="border-gray-700 border-2" />
<span>Wie viele Gäste werden erwartet</span>
<input type="text" name="guests" class="border-gray-700 border-2" />
<span>Was du sonst noch loswerden willst</span>
<textarea name="misc" rows="5" class="border-gray-700 border-2"></textarea>
<span>Gewünschtes Datum</span>
<div class="relative max-w-sm">
<div class="absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none">
<svg class="w-4 h-4 text-gray-500 dark:text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
<path d="M20 4a2 2 0 0 0-2-2h-2V1a1 1 0 0 0-2 0v1h-3V1a1 1 0 0 0-2 0v1H6V1a1 1 0 0 0-2 0v1H2a2 2 0 0 0-2 2v2h20V4ZM0 18a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8H0v10Zm5-8h10a1 1 0 0 1 0 2H5a1 1 0 0 1 0-2Z"/>
</svg>
</div>
<input datepicker datepicker-autohide datepicker-format="dd.mm.yyyy" name="date" type="text" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full ps-10 p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="Datum auswählen">
</div> </div>
<div class="flex justify-center col-span-full"> <div>
<button class="py-3 px-6 rounded bg-gray-600 text-xl font-bold text-gray-300" type="submit">Absenden</button> <label for="firstname" class="block text-sm font-medium text-gray-900 dark:text-white">Vorname</label>
<input id="firstname" name="firstname" class="shadow-sm bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500 dark:shadow-sm-light" placeholder="">
</div>
<div>
<label for="lastname" class="block text-sm font-medium text-gray-900 dark:text-white">Nachname</label>
<input id="lastname" name="lastname" class="shadow-sm bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500 dark:shadow-sm-light" placeholder="">
</div>
<div>
<label for="phone" class="block text-sm font-medium text-gray-900 dark:text-white">Telefonnummer</label>
<input id="phone" name="phone" class="shadow-sm bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500 dark:shadow-sm-light" placeholder="">
</div>
<div>
<label for="email" class="block text-sm font-medium text-gray-900 dark:text-white">E-Mail-Adresse</label>
<input id="email" name="email" class="shadow-sm bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500 dark:shadow-sm-light" placeholder="">
</div>
<div>
<label for="date" class="block text-sm font-medium text-gray-900 dark:text-white">Gewünschtes Datum</label>
<input id="date" name="date" datepicker datepicker-autohide datepicker-format="dd.mm.yyyy" class="shadow-sm bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500 dark:shadow-sm-light" placeholder="">
</div>
<div>
<label for="guests" class="block text-sm font-medium text-gray-900 dark:text-white">Wie viele Gäste werden erwartet?</label>
<input id="guests" name="guests" class="shadow-sm bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500 dark:shadow-sm-light" placeholder="">
</div>
<div class="col-span-full">
<label for="misc" class="block text-sm font-medium text-gray-900 dark:text-white">Was du sonst noch loswerden willst …</label>
<textarea id="misc" name="misc" rows="5" class="shadow-sm bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500 dark:shadow-sm-light"></textarea>
</div>
<div class="flex justify-center col-span-full mt-5">
<button class="py-2 px-6 rounded bg-blue-900 hover:bg-blue-800 text-lg font-bold text-gray-300" type="submit">Absenden</button>
</div> </div>
</form> </form>

2
partials/heading.htm
View File

@ -1 +1 @@
<h1 class="font-bold text-center text-3xl">{{title}}</h1> <h1 class="font-bold {{class}} text-3xl">{{title}}</h1>

12
partials/listelement.htm
View File

@ -1,9 +1,9 @@
<div class="mt-3"> <div class="mt-3">
<div class="flex"> <div class="flex items-center">
<div class="flex-none bg-gray-900 text-white w-12 h-12 flex items-center justify-center rounded-full text-2xl">{{number}}</div> <div class="flex-none bg-neutral-900 text-white w-10 h-10 flex items-center justify-center rounded-full text-xl shadow font-semibold">{{number}}</div>
<div class="ml-5"> <div class="text-2xl ml-6 font-semibold">{{title}}</div>
<div class="text-2xl">{{title}}</div> </div>
<div class="text-xl"> {{ content | raw }} </div> <div class="ml-16 text-lg">
</div> {{ content | raw }}
</div> </div>
</div> </div>