greggy/landingpage-haus-schleusingen
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: greggy:feature/issue-36-favicon
Branches Tags
greggy:main greggy:feature/phpunit-tests greggy:feature/issue-17-bildoptimierung-webp greggy:feature/issue-36-favicon greggy:feature/issue-18-accessibility greggy:feature/issue-19-remove-jquery-masonry greggy:feature/issue-34-contact-form-mail greggy:feature/issue- greggy:none
..
compare: greggy:a380d7e7fa010c8aa257b7bc144760d0497bb2f4
Branches Tags
greggy:main greggy:feature/phpunit-tests greggy:feature/issue-17-bildoptimierung-webp greggy:feature/issue-36-favicon greggy:feature/issue-18-accessibility greggy:feature/issue-19-remove-jquery-masonry greggy:feature/issue-34-contact-form-mail greggy:feature/issue- greggy:none

1 Commits
feature/is ... a380d7e7fa

Author SHA1 Message Date
Claw AI
a380d7e7fa feat(a11y): ARIA labels, focus management, skip-nav, keyboard nav, contrast fix
All checks were successful
Deploy Feature Branch to Test / deploy (push) Successful in 23s
Details 
Accessibility improvements per WCAG 2.1 AA:
- Skip-to-content link (TA-1)
- ARIA landmarks and roles for nav, main, sections, footer (TA-2)
- Accordion keyboard navigation + aria-expanded (TA-3)
- Lightbox focus trap + focus management + dialog role (TA-4)
- Gallery grid items keyboard accessible (TA-5)
- Improved alt texts for all images (TA-6)
- Focus-visible styles for all interactive elements (TA-7)
- Darker --stone color for WCAG AA contrast compliance (TA-8)

Fix #18
 2026-05-15 07:57:15 +00:00
9 changed files with 77 additions and 171 deletions
Expand all files Collapse all files

BIN
bilder/favicon/apple-touch-icon.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 54 KiB

BIN
bilder/favicon/favicon-16x16.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 851 B

BIN
bilder/favicon/favicon-32x32.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 2.4 KiB

BIN
bilder/favicon/favicon.ico
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 3.3 KiB

10
bilder/favicon/site.webmanifest
View File

@@ -1,10 +0,0 @@
{
"name": "Haus Schleusingen",
"short_name": "HS",
"icons": [
{ "src": "/bilder/favicon/favicon-32x32.png", "sizes": "32x32", "type": "image/png" },
{ "src": "/bilder/favicon/favicon-16x16.png", "sizes": "16x16", "type": "image/png" }
],
"theme_color": "#1c1917",
"background_color": "#fafaf9"
}

1
eslint.config.js
View File

@@ -13,6 +13,7 @@ module.exports = [
sourceType: "script", sourceType: "script",
globals: { globals: {
...globals.browser, ...globals.browser,
...globals.jquery,
}, },
}, },
plugins: { plugins: {

6
index.php
View File

@@ -126,11 +126,6 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
<html lang="de"> <html lang="de">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" type="image/png" sizes="32x32" href="/bilder/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/bilder/favicon/favicon-16x16.png">
<link rel="icon" type="image/x-icon" href="/bilder/favicon/favicon.ico">
<link rel="apple-touch-icon" sizes="180x180" href="/bilder/favicon/apple-touch-icon.png">
<link rel="manifest" href="/bilder/favicon/site.webmanifest">
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Einfamilienhaus mieten Schleusingen | 227 m², 6 Zimmer | 1.300 € Kaltmiete</title> <title>Einfamilienhaus mieten Schleusingen | 227 m², 6 Zimmer | 1.300 € Kaltmiete</title>
<meta name="description" content="Einfamilienhaus zur Langzeitmiete in Schleusingen: 227 m² Wohnfläche, 6 Zimmer, 3 Etagen mit Dachterrasse. Kaltmiete 1.300 €. Bahnhofstraße 10, 98553 Schleusingen. Ab sofort verfügbar." /> <meta name="description" content="Einfamilienhaus zur Langzeitmiete in Schleusingen: 227 m² Wohnfläche, 6 Zimmer, 3 Etagen mit Dachterrasse. Kaltmiete 1.300 €. Bahnhofstraße 10, 98553 Schleusingen. Ab sofort verfügbar." />
@@ -187,6 +182,7 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
</script> </script>
<link rel="stylesheet" href="fonts/fonts.css" /> <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" /> <link rel="stylesheet" href="css/haus-schleusingen.css" />
</head> </head>
<body> <body>

222
js/haus-schleusingen.js
View File

@@ -1,86 +1,52 @@
document.addEventListener("DOMContentLoaded", function () { $(function () {
// Navbar scroll // Navbar scroll
var navbar = document.getElementById("navbar"); $(window).on("scroll", function () {
window.addEventListener("scroll", function () { if ($(this).scrollTop() > 60) $("#navbar").addClass("scrolled");
if (window.scrollY > 60) navbar.classList.add("scrolled"); else $("#navbar").removeClass("scrolled");
else navbar.classList.remove("scrolled");
}); });
// Hero animation on load // Hero animation on load
setTimeout(function () { setTimeout(function () {
document.getElementById("heroContent").classList.add("visible"); $("#heroContent").addClass("visible");
document.getElementById("heroBg").classList.add("loaded"); $("#heroBg").addClass("loaded");
}, 200); }, 200);
// Scroll animations via IntersectionObserver // Scroll animations
var animElements = document.querySelectorAll(".fact, [data-animate]"); function checkVisible() {
animElements.forEach(function (el) { $(".fact, [data-animate]").each(function () {
el.style.opacity = "0"; var el = $(this);
el.style.transform = "translateY(30px)"; var top = el.offset().top;
el.style.transition = "opacity 0.8s ease, transform 0.8s ease"; var windowBottom = $(window).scrollTop() + $(window).height();
}); if (windowBottom > top + 60) {
el.addClass("visible");
if ("IntersectionObserver" in window) { el.css({ opacity: 1, transform: "translateY(0)" });
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)";
});
}
// Floor accordion
// Floor accordion (vanilla JS + a11y)
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 hdr = fi.querySelector(".floor-header");
if (hdr) hdr.setAttribute("aria-expanded", "false");
var body = fi.querySelector(".floor-body");
if (body) body.style.display = "none";
});
// Open clicked if it was closed
if (!isOpen) {
item.classList.add("open");
this.setAttribute("aria-expanded", "true");
var body = item.querySelector(".floor-body");
if (body) body.style.display = "block";
} }
}); });
}
$("[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-header").attr("aria-expanded", "false");
$(".floor-body").slideUp(300);
if (!isOpen) {
item.addClass("open");
$(this).attr("aria-expanded", "true");
item.find(".floor-body").slideDown(300);
}
}); });
// Accordion keyboard handler (Enter/Space) // Accordion keyboard handler (Enter/Space)
document.querySelectorAll(".floor-header").forEach(function (header) { $(".floor-header").on("keydown", function (e) {
header.addEventListener("keydown", function (e) {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
this.click();
}
});
if (e.key === "Enter" || e.key === " ") { if (e.key === "Enter" || e.key === " ") {
e.preventDefault(); e.preventDefault();
$(this).trigger("click"); $(this).trigger("click");
@@ -112,68 +78,39 @@ document.addEventListener("DOMContentLoaded", function () {
} }
// Lightbox – gallery grid items // Lightbox – gallery grid items
$(document).on("click", ".grid-item", function () {
// Lightbox – gallery grid items var src = $(this).data("img") || $(this).find("img").attr("src");
document.querySelectorAll(".grid-item").forEach(function (item) { openLightbox(src);
item.addEventListener("click", function () {
var src = this.dataset.img || this.querySelector("img").getAttribute("src");
openLightbox(src);
});
});
// Gallery keyboard handler (Enter/Space)
document.querySelectorAll(".grid-item").forEach(function (item) {
item.setAttribute("tabindex", "0");
item.addEventListener("keydown", function (e) {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
this.click();
}
});
}); });
// Lightbox – floor plan images in Raumaufteilung // Lightbox – floor plan images in Raumaufteilung
document.querySelectorAll(".floor-plan img[data-img]").forEach(function (img) { $(document).on("click", ".floor-plan img[data-img]", function () {
img.addEventListener("click", function () { var src = $(this).data("img");
openLightbox(this.dataset.img); openLightbox(src);
});
}); });
function openLightbox(src) { // Lightbox close handlers
lightboxTrigger = document.activeElement; $("#lightboxClose").on("click", function () {
document.getElementById("lightboxImg").setAttribute("src", src); closeLightbox();
document.getElementById("lightbox").classList.add("open"); });
document.body.style.overflow = "hidden"; $("#lightbox").on("click", function (e) {
// Focus close button if (e.target === this) {
setTimeout(function () { closeLightbox();
document.getElementById("lightboxClose").focus();
}, 100);
}
function closeLightbox() {
document.getElementById("lightbox").classList.remove("open");
document.body.style.overflow = "";
// Return focus to trigger
if (lightboxTrigger) {
lightboxTrigger.focus();
lightboxTrigger = null;
} }
}
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(); // Escape key to close lightbox
$(document).on("keydown", function (e) {
if (e.key === "Escape" && $("#lightbox").hasClass("open")) {
closeLightbox();
}
}); });
// Focus trap for lightbox // Focus trap for lightbox
document.getElementById("lightbox").addEventListener("keydown", function (e) { $("#lightbox").on("keydown", function (e) {
if (e.key !== "Tab") return; if (e.key !== "Tab") return;
var focusable = this.querySelectorAll("button, [href], input, select, textarea, [tabindex]:not([tabindex='-1'])"); var focusable = $(this).find("button, [href], input, select, textarea, [tabindex]:not([tabindex='-1'])").filter(":visible");
focusable = Array.from(focusable).filter(function (el) { return el.offsetParent !== null; });
if (focusable.length === 0) return; if (focusable.length === 0) return;
var first = focusable[0]; var first = focusable[0];
@@ -192,42 +129,15 @@ document.addEventListener("DOMContentLoaded", function () {
} }
}); });
// Form submit is handled server-side by PHP – no JS intervention needed. // Gallery keyboard handler (Enter/Space)
// Form submit – opens email client with pre-filled mailto: link $(document).on("keydown", ".grid-item", function (e) {
document.getElementById("contactForm").addEventListener("submit", function (e) { if (e.key === "Enter" || e.key === " ") {
e.preventDefault(); e.preventDefault();
$(this).trigger("click");
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";
});
}); });
// Form submit is handled server-side by PHP – no JS intervention needed.
}); });
// Mobile hamburger menu (vanilla JS) // Mobile hamburger menu (vanilla JS)

9
js/masonry.pkgd.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long