From d894ce2df9b2c8a0da373e04cdce3615ec4d7cd6 Mon Sep 17 00:00:00 2001
From: philipp lang <philipp@aweos.de>
Date: Sat, 17 Feb 2024 14:28:59 +0100
Subject: [PATCH] Add success message

---
 partials/anfrage/default.htm | 124 +++++++++++++++++------------------
 partials/anfrage/success.htm |   3 +
 2 files changed, 65 insertions(+), 62 deletions(-)
 create mode 100644 partials/anfrage/success.htm

diff --git a/partials/anfrage/default.htm b/partials/anfrage/default.htm
index 9dedd07..2cc5dca 100644
--- a/partials/anfrage/default.htm
+++ b/partials/anfrage/default.htm
@@ -1,67 +1,67 @@
-<form data-request="anfrage::onSubmit" data-request-flash class="grid sm:grid-cols-2 md:grid-cols-1 lg:grid-cols-2 gap-3">
+<div id="anfrageform">
+    <form data-request="anfrage::onSubmit" data-request-flash class="grid sm:grid-cols-2 md:grid-cols-1 lg:grid-cols-2 gap-3">
 
-    <div>
-      <label for="reason" class="block text-sm font-medium text-gray-900 dark:text-white">Grund für die Feier</label>
-      <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">
-    </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="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="guests" class="block text-sm font-medium text-gray-900 dark:text-white">Anzahl Gäste (ca)</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>
-      <label for="birthday" class="block text-sm font-medium text-gray-900 dark:text-white">Geburtsdatum</label>
-      <input id="birthday" name="birthday" 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 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="relative col-span-full">
-        <div class="grid grid-cols-1 gap-2">
-            <label for="datenschutz" class="p-0 block leading-none relative flex items-start">
-                <input id="datenschutz" type="checkbox" name="datenschutz" class="peer absolute invisible" />
-                <span class="border-neutral-400 border-4 border-solid peer-checked:border-neutral-800 absolute left-0 w-6 h-6 rounded block top-0"></span>
-                <span class="peer-checked:bg-neutral-800 left-[0.5rem] top-[0.5rem] w-2 h-2 absolute rounded block top-0"></span>
-                <span class="pl-8 pt-1 @sm:pt-0 text-gray-600 text-sm @sm:text-base">
-                    <span>Ich habe die <a href="/datenschutzerklaerung" class="font-semibold" target="_BLANK">Datenschutzerklärung</a> zur Kenntnis genommen und akzeptiere diese.</span>
-                    <span class="text-red-800">*</span>
-                </span>
-            </label>
+        <div>
+          <label for="reason" class="block text-sm font-medium text-gray-900 dark:text-white">Grund für die Feier</label>
+          <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">
         </div>
-    </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>
-</form>
+        <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="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="guests" class="block text-sm font-medium text-gray-900 dark:text-white">Anzahl Gäste (ca)</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>
+          <label for="birthday" class="block text-sm font-medium text-gray-900 dark:text-white">Geburtsdatum</label>
+          <input id="birthday" name="birthday" 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 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="relative col-span-full">
+            <div class="grid grid-cols-1 gap-2">
+                <label for="datenschutz" class="p-0 block leading-none relative flex items-start">
+                    <input id="datenschutz" type="checkbox" name="datenschutz" class="peer absolute invisible" />
+                    <span class="border-neutral-400 border-4 border-solid peer-checked:border-neutral-800 absolute left-0 w-6 h-6 rounded block top-0"></span>
+                    <span class="peer-checked:bg-neutral-800 left-[0.5rem] top-[0.5rem] w-2 h-2 absolute rounded block top-0"></span>
+                    <span class="pl-8 pt-1 @sm:pt-0 text-gray-600 text-sm @sm:text-base">
+                        <span>Ich habe die <a href="/datenschutzerklaerung" class="font-semibold" target="_BLANK">Datenschutzerklärung</a> zur Kenntnis genommen und akzeptiere diese.</span>
+                        <span class="text-red-800">*</span>
+                    </span>
+                </label>
+            </div>
+        </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>
+    </form>
+</div>
diff --git a/partials/anfrage/success.htm b/partials/anfrage/success.htm
new file mode 100644
index 0000000..d4c044d
--- /dev/null
+++ b/partials/anfrage/success.htm
@@ -0,0 +1,3 @@
+<div>
+    Vielen Dank für deine Anfrage. Wir haben dir eine Kopie deiner Anfrage per E-Mail geschickt. Wir werden uns in den nächsten 2-3 Werktagen melden.
+</div>