php dateien in php verzeichnis verschoben. message construct in eigene datei message.php verschoben.

assets/js/bestellformular.js

@@ -0,0 +1,34 @@
+window.onload = function () {
+    document.getElementById('formular').addEventListener('submit', function (e) {
+        e.preventDefault(); // Verhindert die Standard-Formularsendung
+        const form = e.target;
+        const data = new FormData(form);
+        const notification = document.getElementById('notification');
+        const btn = document.getElementById('bestellformular-btn');
+        fetch(form.action, {
+            method: 'POST',
+            mode: 'cors',
+            body: data,
+        })
+            .then(response => {
+                if (!response.ok) {
+                    throw new Error('Network response was not ok');
+                }
+                return response.json();
+            })
+            .then(data => {
+                // Erfolgsnachricht anzeigen
+                notification.textContent = 'Nachricht erfolgreich gesendet!';
+                btn.className = 'submitbutton text-white mx-auto submit-after-valid-captchaaaa .fadeOut';
+                // notification.className = 'bg-green-500 text-white px-4 py-2 rounded block';
+                // setTimeout(() => notification.className = 'bg-green-500 text-white px-4 py-2 rounded hidden', 5000); // Benachrichtigung nach 5 Sekunden ausblenden
+            })
+            .catch((error) => {
+                // Fehlermeldung anzeigen
+                notification.textContent = 'Fehler beim Senden der Nachricht.';
+                console.log(error);
+                notification.className = 'bg-red-500 text-white px-4 py-2 rounded block';
+                // setTimeout(() => notification.className = 'bg-red-500 text-white px-4 py-2 rounded hidden', 5000); // Benachrichtigung nach 5 Sekunden ausblenden
+            });
+    });
+};

assets/js/veruaslider.js

@@ -0,0 +1,30 @@
+window.onload = function(){
+setInterval(nextSlide, 5000);
+}
+let slideNumber = 0;
+const prevSlide = () =>{
+const slides = document.getElementsByClassName('slides');
+const slider = document.getElementById("verua-slider");
+const currentSlide = slider.getElementsByClassName('current');
+currentSlide[0].classList.remove("current");
+if(slideNumber == 0){
+slideNumber = slides.length-1;
+}
+else{
+slideNumber = slideNumber-1;
+}
+slides[slideNumber].classList.add("current");
+}
+const nextSlide = () =>{
+const slides = document.getElementsByClassName('slides');
+const slider = document.getElementById("verua-slider");
+const currentSlide = slider.getElementsByClassName('current');
+currentSlide[0].classList.remove("current");
+if(slideNumber == (slides.length-1)){
+slideNumber = 0;
+}
+else{
+slideNumber = slideNumber+1;
+}
+slides[slideNumber].classList.add("current");
+}

assets/scss/custom.scss

@@ -15,12 +15,15 @@ a {
     text-decoration: none;
     transition: 0.3s ease-in-out;
 }
+.nav-link.active, a.nav-dropdown-link.active {
+    color: #a9cd2e;
+}
 
 h1, h2, h3, h4, h5, h6 {
     font-weight:normal;
     margin-bottom: 16px;
 }
-h1, h2 {
+h1, h2, .content h1, .content h2{
     font-weight:bold;
 }
 h3 {
@@ -151,17 +154,17 @@ table .far {
 }
 
 /* Formular */
-#bestellformular {
+#formular {
     max-width: 64rem;
     margin-left: auto;
     margin-right: auto;
   }
   
-  #bestellformular div {
+  #formular div {
     margin-bottom: 1rem;
   }
   
-  #bestellformular label {
+  #formular label {
     display: block;
     margin-bottom: 0.5rem;
     font-size: 0.875rem;
@@ -169,24 +172,24 @@ table .far {
     color: #4B5563;
   }
   
-  #bestellformular select,
+  #formular select,
-  #bestellformular input,
+  #formular input,
-  #bestellformular textarea {
+  #formular textarea {
     width: 100%;
     padding: 0.5rem 1rem;
     border: 1px solid #D1D5DB;
     border-radius: 0.375rem;
   }
   
-  #bestellformular select:focus,
+  #formular select:focus,
-  #bestellformular input:focus,
+  #formular input:focus,
-  #bestellformular textarea:focus {
+  #formular textarea:focus {
     outline: none;
     border-color: #3B82F6;
     box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.5);
   }
   
-  #bestellformular button {
+  #formular button {
    width:350px;
     padding: 0.5rem 1rem;
     margin-bottom:10px;
@@ -197,15 +200,15 @@ table .far {
     border-radius: 0.375rem;
   }
 
-  #bestellformular .submitbutton{
+  #formular .submitbutton{
     background-color: #a9cd2e;
     align-self: center;
     width:100%;
   }
-  #bestellformular button:hover {
+  #formular button:hover {
     background-color: #2563EB;
   }
-  #bestellformular .submitbutton:hover{
+  #formular .submitbutton:hover{
     background-color: #88a625;
   }
   .captcha-container {
@@ -218,6 +221,13 @@ table .far {
     margin-right: auto;
 }
 
+.fadeOut {
+    @apply transition-opacity duration-500 ease-in-out opacity-0 invisible;
+  }
+  .fadeIn {
+    @apply transition-opacity duration-500 ease-in-out opacity-100 visible;
+  }
+  
 /**************** Component Styles ******************/ 
 
 // Icons

content/german/bestellung/freiberufliche.md

@@ -3,12 +3,12 @@ date = '2024-02-21T08:49:32Z'
 draft = false
 title = 'Freiberufliche'
 +++
-{{% veruaslider %}}
+{{% veruaslider height="450px" %}}
 {{% slide image="../bestellungen-header.jpg" first="true " %}}
 {{% /veruaslider %}}
 {{% section %}}
 {{% aligncenter %}}
-#### Bestellformular 
+#### Bestellformular
 ## VeruA ** Verwaltung und Abrechnung  
 ### Freiberufliche
 <br>
@@ -19,64 +19,72 @@ title = 'Freiberufliche'
 
 {{% /aligncenter %}}
 
-<form action="https://verua.dev-1.andreashnida.de/ajaxmail.php" method="POST" id="bestellformular">
+<form action="https://verua.dev-1.andreashnida.de/php/ajaxmail.php" method="POST" id="formular">
 <div id="formPartOne">
+<input type="hidden" name="formularart" value="Bestellformular Freiberufliche">
         <div>
-            <label for="gender">Gender</label>
+            <label for="gender">Geschlecht</label>
-            <select id="gender" name="gender" required>
+            <select id="gender" name="gender" require >
-                <option value="frau">Frau</option>
+                <option value="weiblich">Frau</option>
-                <option value="mann">Mann</option>
+                <option value="männlich">Mann</option>
                 <option value="divers">Divers</option>
             </select>
         </div>
         <div>
-            <label for="name">Name</label>
+            <label for="sprache">Sprache</label>
-            <input type="text" id="name" name="name" required>
+            <select id="sprache" name="sprache" require >
+                <option value="deutsch">Deutsch</option>
+                <option value="franzoesisch">Französisch</option>
+            </select>
+        </div>
+        <div>
+            <label for="name">Nachname</label>
+            <input type="text" id="name" name="name" require >
         </div>
         <div>
             <label for="vorname">Vorname</label>
-            <input type="text" id="vorname" name="vorname" required>
+            <input type="text" id="vorname" name="vorname" require >
         </div>
         <div>
             <label for="strasse">Strasse</label>
-            <input type="text" id="strasse" name="strasse" required>
+            <input type="text" id="strasse" name="strasse" require >
         </div>
         <div>
             <label for="plz_ort">PLZ Ort</label>
-            <input type="text" id="plz_ort" name="plz_ort" required>
+            <input type="text" id="plz_ort" name="plz_ort" require >
         </div>
         <div>
             <label for="telefon">Telefon</label>
-            <input type="text" id="telefon" name="telefon" required>
+            <input type="text" id="telefon" name="telefon" require >
         </div>
         <div>
             <label for="email">Email</label>
-            <input type="email" id="email" name="email" required>
+            <input type="email" id="email" name="email" require >
         </div>
         <div>
             <label for="message">Message</label>
-            <textarea id="message" name="message" rows="4" required></textarea>
+            <textarea id="message" name="message" rows="4" require ></textarea>
         </div>
         <div>
             <label for="zsr_nummer">ZSR Nummer</label>
-            <input type="text" id="zsr_nummer" name="zsr_nummer" required>
+            <input type="text" id="zsr_nummer" name="zsr_nummer" require >
         </div>
 </div>
 <div id="formPartTwo">
         <div>
             <label for="bestehend">Wünschen Sie einen neuer Server oder den Zugang zu einem bestehenden Team-Server?</label>
-            <select id="bestehend" name="bestehend" required>
+            <select id="bestehend" name="bestehend" require >
                 <option value="Applikation und Zugang zu bestehendem Team-Server">Applikation und Zugang zu bestehendem Team-Server (1'296 CHF)</option>
                 <option value="Applikation und neuer Webserver">Applikation und neuer Webserver (1'296 CHF)</option>
             </select>
         </div>
         <div>
             <label for="servername">Bitte geben Sie den Namen des Servers an. Der Zugriff erfolgt immer über die Web-Adresse: https://<strong>wunschname</strong>.verua.ch</label>
-            <input type="url" id="servername" name="servername" placeholder="https://wunschname.verua.ch" required>
+            <input type="url" id="servername" name="servername" placeholder="https://wunschname.verua.ch" require >
         </div>
         <div>
             <label for="modulpop2">Wünschen Sie die Erweiterung um das Modul POP2?</label>
-            <select id="modulpop2" name="modulpop2" required>
+            <select id="modulpop2" name="modulpop2" require >
                 <option value="Nein, nur das Standard-Programm">Nein, nur das Standard-Programm</option>
                 <option value="Ja, ich bestelle das Zusatzmodul POP2 für 42.00 CHF jährlich, Bereitstellungskosten einmalig 438.00 CHF">Ja, ich bestelle das Zusatzmodul POP2 für 42.00 CHF jährlich, Bereitstellungskosten einmalig 438.00 CHF</option>
                 <option value="Ich bin mir noch nicht sicher.">Ich bin mir noch nicht sicher.</option>
@@ -84,7 +92,7 @@ title = 'Freiberufliche'
         </div>
         <div>
             <label for="materialverwaltung">Benötigen Sie das Zusatzmodul Materialverwaltung?</label>
-            <select id="materialverwaltung" name="materialverwaltung" required>
+            <select id="materialverwaltung" name="materialverwaltung" require >
                 <option value="Nein, nur das Standard-Programm">Nein, nur das Standard-Programm</option>
                 <option value="Ja, ich bestelle das Zusatzmodul Materialverwaltung für 138.00 CHF jährlich, Bereitstellungskosten einmalig 342.00 CHF">Ja, ich bestelle das Zusatzmodul Materialverwaltung für 138.00 CHF jährlich, Bereitstellungskosten einmalig 342.00 CHF</option>
                 <option value="Ich bin mir noch nicht sicher.">Ich bin mir noch nicht sicher.</option>
@@ -92,7 +100,7 @@ title = 'Freiberufliche'
         </div>
         <div>
             <label for="qrcode">Wünschen Sie die Erweiterung um das Modul QR-Code?</label>
-            <select id="qrcode" name="qrcode" required>
+            <select id="qrcode" name="qrcode" require >
                 <option value="Nein, nur das Standard-Programm">Nein, nur das Standard-Programm</option>
                 <option value="Ja, ich bestelle das Zusatzmodul Materialverwaltung für 138.00 CHF jährlich, Bereitstellungskosten einmalig 342.00 CHF">Ja, ich bestelle das Zusatzmodul Materialverwaltung für 138.00 CHF jährlich, Bereitstellungskosten einmalig 342.00 CHF</option>
                 <option value="Ich bin mir noch nicht sicher.">Ich bin mir noch nicht sicher.</option>
@@ -100,47 +108,21 @@ title = 'Freiberufliche'
         </div>
         <div>
             <label for="wochenbett">Benötigen Sie das Programm für Wochenbett-Betreuung?</label>
-            <select id="wochenbett" name="wochenbett" required>
+            <select id="wochenbett" name="wochenbett" require >
                 <option value="Nein">Nein</option>
                 <option value="Ja, ich möchte die Wochenbett-Version">Ja, ich möchte die Wochenbett-Version</option>
             </select>
         </div>
        <div>
             <label for="anmerkung">Anmerkung</label>
-            <textarea id="anmerkung" name="anmerkung" rows="4" required></textarea>
+            <textarea id="anmerkung" name="anmerkung" rows="4" require ></textarea>
         </div>        
 </div>
 <div class ="captcha-container"></div>
-<button type="submit" class="submitbutton text-white mx-auto submit-after-valid-captcha">Submit</button>
+<button id="bestellformular-btn" type="submit" class="submitbutton text-white mx-auto submit-after-valid-captchaaaa">Kostenpflichtig bestellen</button>
+<div id="notification" class="mt-10 bg-blue-500 px-4 py-2 text-white  rounded hidden">Notification</div>
 </form>
-<div id="notification" class="mt-10 bg-blue-500 px-4 py-2 text-white hidden rounded">Notification</div>
 <link rel="stylesheet" href="https://verua.dev-1.andreashnida.de/vendor/captcha-system/css/main.css">
-<script src = 'https://verua.dev-1.andreashnida.de/vendor/captcha-system/js/main.js'></script>
+<script src ='https://verua.dev-1.andreashnida.de/vendor/captcha-system/js/main.js'></script>
-<script>
+
-window.onload = function() {
+{{% /section %}}
-document.getElementById('bestellformular').addEventListener('submit', function(e) {
-e.preventDefault(); // Verhindert die Standard-Formularsendung
-const form = e.target;
-const data = new FormData(form);
-const notification = document.getElementById('notification');
-fetch(form.action, {
-method: 'POST',
-body: data,
-})
-.then(response => response.json()) // Erwartet, dass die Antwort ein JSON ist
-.then(data => {
-// Erfolgsnachricht anzeigen
-notification.textContent = 'Nachricht erfolgreich gesendet!';
-notification.className = 'bg-green-500 text-white px-4 py-2 rounded block';
-setTimeout(() => notification.className = 'bg-green-500 text-white px-4 py-2 rounded hidden', 5000); // Benachrichtigung nach 5 Sekunden ausblenden
-})
-.catch((error) => {
-// Fehlermeldung anzeigen
-notification.textContent = 'Fehler beim Senden der Nachricht.';
-notification.className = 'bg-red-500 text-white px-4 py-2 rounded block';
-setTimeout(() => notification.className = 'bg-red-500 text-white px-4 py-2 rounded hidden', 5000); // Benachrichtigung nach 5 Sekunden ausblenden
-});
-});
-};
-</script>
-        {{% /section %}}

content/german/bestellung/online-testversion.md

@@ -4,7 +4,7 @@ draft = false
 title = 'Online Testversion'
 +++
 
-{{% veruaslider %}}
+{{% veruaslider height="450px" %}}
 {{% slide image="../online-testversion-header.jpg" first="true " %}}
 {{% /veruaslider %}}
 

content/german/bestellung/zusatzmodule-freiberufliche.md

@@ -0,0 +1,34 @@
++++
+date = '2024-02-21T13:22:03Z'
+draft = false
+title = 'Zusatzmodule Freiberufliche'
++++
+
+{{% veruaslider height="450px" %}}
+{{% slide image="../bestellungen-header.jpg" first="true " %}}
+{{% /veruaslider %}}
+{{% section %}}
+{{% aligncenter %}}
+#### Bestellformular 
+## VeruA ** Verwaltung und Abrechnung  
+### Zsatzmodule für Freiberufliche
+<br>
+
+---
+
+<br>
+
+{{% /aligncenter %}}
+
+
+
+
+
+
+
+
+
+
+
+
+{{% /section %}}

content/german/preisliste/freiberufliche.md

@@ -4,7 +4,7 @@ draft = false
 title = 'Verua Preisliste für Freiberufliche'
 +++
 
-{{% veruaslider %}}
+{{% veruaslider height="450px" %}}
 {{% slide image="../freiberufliche-header-slide-1.jpg" first="true " %}}
 {{% slide image="../freiberufliche-header-slide-2.jpg" %}}
 {{% /veruaslider %}}

content/german/preisliste/organisationen.md

@@ -4,7 +4,7 @@ draft = false
 title = 'Organisationen'
 +++
 
-{{% veruaslider %}}
+{{% veruaslider height="450px" %}}
 {{% slide image="../freiberufliche-header-slide-1.jpg" first="true " %}}
 {{% slide image="../freiberufliche-header-slide-2.jpg" %}}
 {{% /veruaslider %}}

content/german/preisliste/weitere-dienstleistungen.md

@@ -4,7 +4,7 @@ draft = false
 title = 'Weitere Dienstleistungen'
 +++
 
-{{% veruaslider %}}
+{{% veruaslider height="450px" %}}
 {{% slide image="../freiberufliche-header-slide-1.jpg" first="true " %}}
 {{% slide image="../freiberufliche-header-slide-2.jpg" %}}
 {{% /veruaslider %}}

themes/hugoplate/layouts/_default/single.html

@@ -1,5 +1,12 @@
 {{ define "main" }}
+{{/*  Lade JS nur wenn wir es brauchen   */}}
 <div class="content">
-{{ .Content }}
+    {{ .Content }}
 </div>
+
+{{ if eq .Section "bestellung" }}
+{{ $js := resources.Get "js/bestellformular.js" | minify }}
+<script src="{{ $js.RelPermalink }}"></script>
+
+{{ end }}
 {{ end }}

themes/hugoplate/layouts/shortcodes/veruaslider.html

@@ -1,43 +1,13 @@
 {{/*  TODO ADD S M L Modes  */}}
 {{/*  TODO FIX HEIGHT ISSUE   */}}
 {{/*  TODO FIX Slider Height on Mobile when no Headline is given   */}}
-<section class="hero-slider h-screen md:h-[750px]">
+<section class="hero-slider h-screen {{ with .Get "height" }}md:h-[{{ . }}]{{ else }}md:h-[750px]{{ end }}">
 <div class="verua-slider-wrapper">
-<div class="verua-slider h-screen md:h-[750px]" id="verua-slider">
+<div class="verua-slider h-screen {{ with .Get "height" }}md:h-[{{ . }}]{{ else }}md:h-[750px]{{ end }}" id="verua-slider">
 {{ .Inner  }}
 </div>
 </div>
 </section>
-<script>
+{{ $vsjs := resources.Get "js/veruaslider.js" | minify }}
-window.onload = function(){
+<script src="{{ $vsjs.RelPermalink }}"></script>
-setInterval(nextSlide, 5000);
-}
-let slideNumber = 0;
-const prevSlide = () =>{
-const slides = document.getElementsByClassName('slides');
-const slider = document.getElementById("verua-slider");
-const currentSlide = slider.getElementsByClassName('current');
-currentSlide[0].classList.remove("current");
-if(slideNumber == 0){
-slideNumber = slides.length-1;
-}
-else{
-slideNumber = slideNumber-1;
-}
-slides[slideNumber].classList.add("current");
-}
-const nextSlide = () =>{
-const slides = document.getElementsByClassName('slides');
-const slider = document.getElementById("verua-slider");
-const currentSlide = slider.getElementsByClassName('current');
-currentSlide[0].classList.remove("current");
-if(slideNumber == (slides.length-1)){
-slideNumber = 0;
-}
-else{
-slideNumber = slideNumber+1;
-}
-slides[slideNumber].classList.add("current");
-}
-</script>
 <!-- /Hero Slider -->