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,
-  #bestellformular input,
-  #bestellformular textarea {
+  #formular select,
+  #formular input,
+  #formular textarea {
     width: 100%;
     padding: 0.5rem 1rem;
     border: 1px solid #D1D5DB;
     border-radius: 0.375rem;
   }
   
-  #bestellformular select:focus,
-  #bestellformular input:focus,
-  #bestellformular textarea:focus {
+  #formular select:focus,
+  #formular input: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