refactor(js): remove jQuery dependency and replace with vanilla JS

- Rewrite haus-schleusingen.js entirely in vanilla JavaScript - Use IntersectionObserver instead of scroll event for scroll animations - Replace jQuery slideUp/slideDown with display toggle for accordion - Replace jQuery fadeIn with CSS opacity transition for form success - Remove jQuery CDN script tag from haus-schleusingen.html - Delete unused masonry.pkgd.min.js - Remove jquery globals from eslint.config.js Ref #19
Merge pull request 'Fix #15 : Kontaktformular – mailto:-Integration für echte Anfragen' (#20 ) from feature/issue-15-kontaktformular-backend into main
2026-05-13 23:06:57 +00:00 · 2026-05-14 00:45:55 +02:00 · 2026-05-13 22:39:42 +00:00 · 2026-05-11 12:50:05 +02:00 · 2026-05-11 06:38:28 +00:00 · 2026-05-10 23:00:47 +02:00
5 changed files with 147 additions and 75 deletions
--- a/css/haus-schleusingen.css
+++ b/css/haus-schleusingen.css
@@ -928,6 +928,29 @@ nav.scrolled .nav-links a:hover {
  color: var(--stone);
 }

+.contact-details {
+  text-align: center;
+  margin-top: 2rem;
+  padding-top: 1.5rem;
+  border-top: 1px solid var(--warm);
+}
+
+.contact-details p {
+  font-size: 0.95rem;
+  color: var(--stone);
+}
+
+.contact-details a {
+  color: var(--accent);
+  text-decoration: none;
+  font-weight: 600;
+  transition: color 0.2s;
+}
+
+.contact-details a:hover {
+  color: var(--accent-light);
+}
+
 /* FOOTER */
 footer {
  background: var(--dark);
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -13,7 +13,6 @@ module.exports = [
      sourceType: "script",
      globals: {
        ...globals.browser,
-        ...globals.jquery,
      },
    },
    plugins: {
--- a/haus-schleusingen.html
+++ b/haus-schleusingen.html
@@ -5,7 +5,6 @@
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Einfamilienhaus zur Miete - Schleusingen</title>
    <link rel="stylesheet" href="fonts/fonts.css" />
-    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <link rel="stylesheet" href="css/haus-schleusingen.css" />
  </head>
  <body>
@@ -527,16 +526,19 @@
          <div class="form-success" id="formSuccess">
            <p>Vielen Dank für Ihre Anfrage!</p>
            <br />
-            <small>Wir melden uns schnellstmöglich bei Ihnen.</small>
+            <small>Ihr E-Mail-Programm wurde geöffnet. Bitte senden Sie die E-Mail ab, damit Ihre Anfrage bei uns eingeht.</small>
          </div>
        </div>
+        <div class="contact-details">
+          <p>Oder schreiben Sie uns direkt: <a href="mailto:mki@kies-media.de">mki@kies-media.de</a></p>
+        </div>
      </div>
    </section>

    <footer>
      <div class="footer-logo">Bahnhofstraße 10 · Schleusingen</div>
      <div class="footer-links">
-        <a href="#">Impressum</a>
+        <a href="/impressum" target="_blank">Impressum</a>
        <a href="#">Datenschutz</a>
      </div>
    </footer>
--- a/js/haus-schleusingen.js
+++ b/js/haus-schleusingen.js
@@ -1,84 +1,141 @@
-$(function () {
+document.addEventListener("DOMContentLoaded", function () {
  // Navbar scroll
-  $(window).on("scroll", function () {
-    if ($(this).scrollTop() > 60) $("#navbar").addClass("scrolled");
-    else $("#navbar").removeClass("scrolled");
+  var navbar = document.getElementById("navbar");
+  window.addEventListener("scroll", function () {
+    if (window.scrollY > 60) navbar.classList.add("scrolled");
+    else navbar.classList.remove("scrolled");
  });

  // Hero animation on load
  setTimeout(function () {
-    $("#heroContent").addClass("visible");
-    $("#heroBg").addClass("loaded");
+    document.getElementById("heroContent").classList.add("visible");
+    document.getElementById("heroBg").classList.add("loaded");
  }, 200);

-  // Scroll animations
-  function checkVisible() {
-    $(".fact, [data-animate]").each(function () {
-      var el = $(this);
-      var top = el.offset().top;
-      var windowBottom = $(window).scrollTop() + $(window).height();
-      if (windowBottom > top + 60) {
-        el.addClass("visible");
-        el.css({ opacity: 1, transform: "translateY(0)" });
-      }
+  // Scroll animations via IntersectionObserver
+  var animElements = document.querySelectorAll(".fact, [data-animate]");
+  animElements.forEach(function (el) {
+    el.style.opacity = "0";
+    el.style.transform = "translateY(30px)";
+    el.style.transition = "opacity 0.8s ease, transform 0.8s ease";
+  });
+
+  if ("IntersectionObserver" in window) {
+    var observer = new IntersectionObserver(
+      function (entries) {
+        entries.forEach(function (entry) {
+          if (entry.isIntersecting) {
+            entry.target.classList.add("visible");
+            entry.target.style.opacity = "1";
+            entry.target.style.transform = "translateY(0)";
+            observer.unobserve(entry.target);
+          }
+        });
+      },
+      { rootMargin: "0px 0px -60px 0px" }
+    );
+    animElements.forEach(function (el) {
+      observer.observe(el);
+    });
+  } else {
+    // Fallback: show all immediately
+    animElements.forEach(function (el) {
+      el.classList.add("visible");
+      el.style.opacity = "1";
+      el.style.transform = "translateY(0)";
    });
  }
-  $("[data-animate]").css({
-    opacity: 0,
-    transform: "translateY(30px)",
-    transition: "opacity 0.8s ease, transform 0.8s ease",
-  });
-  $(window).on("scroll", checkVisible);
-  checkVisible();

  // Floor accordion
-  $(".floor-header").on("click", function () {
-    var item = $(this).closest(".floor-item");
-    var isOpen = item.hasClass("open");
-    $(".floor-item").removeClass("open");
-    $(".floor-body").slideUp(300);
-    if (!isOpen) {
-      item.addClass("open");
-      item.find(".floor-body").slideDown(300);
-    }
+  document.querySelectorAll(".floor-header").forEach(function (header) {
+    header.addEventListener("click", function () {
+      var item = this.closest(".floor-item");
+      var isOpen = item.classList.contains("open");
+      var allItems = document.querySelectorAll(".floor-item");
+
+      // Close all
+      allItems.forEach(function (fi) {
+        fi.classList.remove("open");
+        var body = fi.querySelector(".floor-body");
+        if (body) body.style.display = "none";
+      });
+
+      // Open clicked if it was closed
+      if (!isOpen) {
+        item.classList.add("open");
+        var body = item.querySelector(".floor-body");
+        if (body) body.style.display = "block";
+      }
+    });
  });

  // Lightbox – gallery grid items
-  $(document).on("click", ".grid-item", function () {
-    var src = $(this).data("img") || $(this).find("img").attr("src");
-    $("#lightboxImg").attr("src", src);
-    $("#lightbox").addClass("open");
-    $("body").css("overflow", "hidden");
+  document.querySelectorAll(".grid-item").forEach(function (item) {
+    item.addEventListener("click", function () {
+      var src = this.dataset.img || this.querySelector("img").getAttribute("src");
+      openLightbox(src);
+    });
  });

  // Lightbox – floor plan images in Raumaufteilung
-  $(document).on("click", ".floor-plan img[data-img]", function () {
-    var src = $(this).data("img");
-    $("#lightboxImg").attr("src", src);
-    $("#lightbox").addClass("open");
-    $("body").css("overflow", "hidden");
-  });
-  $("#lightboxClose, #lightbox").on("click", function (e) {
-    if (e.target === this) {
-      $("#lightbox").removeClass("open");
-      $("body").css("overflow", "");
-    }
-  });
-  $(document).on("keydown", function (e) {
-    if (e.key === "Escape") {
-      $("#lightbox").removeClass("open");
-      $("body").css("overflow", "");
-    }
+  document.querySelectorAll(".floor-plan img[data-img]").forEach(function (img) {
+    img.addEventListener("click", function () {
+      openLightbox(this.dataset.img);
+    });
  });

-  // Form submit
-  $("#contactForm").on("submit", function (e) {
+  function openLightbox(src) {
+    document.getElementById("lightboxImg").setAttribute("src", src);
+    document.getElementById("lightbox").classList.add("open");
+    document.body.style.overflow = "hidden";
+  }
+
+  function closeLightbox() {
+    document.getElementById("lightbox").classList.remove("open");
+    document.body.style.overflow = "";
+  }
+
+  document.getElementById("lightboxClose").addEventListener("click", closeLightbox);
+  document.getElementById("lightbox").addEventListener("click", function (e) {
+    if (e.target === this) closeLightbox();
+  });
+  document.addEventListener("keydown", function (e) {
+    if (e.key === "Escape") closeLightbox();
+  });
+
+  // Form submit – opens email client with pre-filled mailto: link
+  document.getElementById("contactForm").addEventListener("submit", function (e) {
    e.preventDefault();
-    var btn = $(this).find(".btn-submit");
-    btn.text("Wird gesendet...").prop("disabled", true);
-    setTimeout(function () {
-      $("#contactForm").hide();
-      $("#formSuccess").fadeIn(400);
-    }, 1200);
+
+    var fname = document.getElementById("fname").value.trim();
+    var lname = document.getElementById("lname").value.trim();
+    var email = document.getElementById("email").value.trim();
+    var phone = document.getElementById("phone").value.trim();
+    var interest = document.getElementById("interest").value;
+    var message = document.getElementById("message").value.trim();
+
+    var subject = "Kontaktanfrage: " + interest;
+    var body = "Von: " + fname + " " + lname + "\n";
+    body += "E-Mail: " + email + "\n";
+    if (phone) body += "Telefon: " + phone + "\n";
+    body += "Anliegen: " + interest + "\n\n";
+    body += message;
+
+    var mailto =
+      "mailto:mki@kies-media.de" +
+      "?subject=" + encodeURIComponent(subject) +
+      "&body=" + encodeURIComponent(body);
+
+    window.location.href = mailto;
+
+    // Show success message
+    this.style.display = "none";
+    var success = document.getElementById("formSuccess");
+    success.style.display = "block";
+    success.style.opacity = "0";
+    success.style.transition = "opacity 0.4s ease";
+    requestAnimationFrame(function () {
+      success.style.opacity = "1";
+    });
  });
 });
--- a/js/masonry.pkgd.min.js
+++ b/js/masonry.pkgd.min.js
Author	SHA1	Message	Date
greggy	bbd1db63a2	refactor(js): remove jQuery dependency and replace with vanilla JS - Rewrite haus-schleusingen.js entirely in vanilla JavaScript - Use IntersectionObserver instead of scroll event for scroll animations - Replace jQuery slideUp/slideDown with display toggle for accordion - Replace jQuery fadeIn with CSS opacity transition for form success - Remove jQuery CDN script tag from haus-schleusingen.html - Delete unused masonry.pkgd.min.js - Remove jquery globals from eslint.config.js Ref #19	2026-05-13 23:06:57 +00:00
greggy	88780c300a	Merge pull request 'Fix #15 : Kontaktformular – mailto:-Integration für echte Anfragen' (#20 ) from feature/issue-15-kontaktformular-backend into main Reviewed-on: #20	2026-05-14 00:45:55 +02:00
Claw	cc7b2d8d70	fix(kontakt): replace simulated form submit with mailto: link - Generate mailto: link with all form data on submit - Opens user's email client with pre-filled email to mki@kies-media.de - Subject includes interest type, body contains all form fields - Update success message to reflect email client behavior - Remove fake setTimeout simulation Fix #15	2026-05-13 22:39:42 +00:00
greggy	ea85280cde	Merge pull request 'Fix #11 : Kontakt-Section mit Email hinzufügen' (#14 ) from feature/issue-11 into main Reviewed-on: #14	2026-05-11 12:50:05 +02:00
Claw	958f52fd5d	Fix #11 : Kontakt-Section mit Email hinzufügen - Email mki@kies-media.de als direkter Kontaktlink unter dem Formular - Neues .contact-details CSS passend zum bestehenden Design - Minimaler Eingriff: bestehendes Design bleibt erhalten	2026-05-11 06:38:28 +00:00
greggy	9c68365ab8	Merge pull request 'Fix #4 : Impressum-Link im Footer hinzufügen' (#5 ) from feature/issue-4 into main Reviewed-on: #5	2026-05-10 23:00:47 +02:00
greggy	5b304730fa	feat: update Impressum-Link im Footer (Issue #4 )	2026-05-10 21:22:14 +02:00