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-19-remove-jquery-masonry
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:73635a5f031d6dad4f7f722a210959aa4ff52d37
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

4 Commits
feature/is ... 73635a5f03

Author SHA1 Message Date
Claw (AI)
73635a5f03 fix(js): improve lightbox WebP fallback error handler
All checks were successful
Deploy Feature Branch to Test / deploy (push) Successful in 24s
Details 
- Use .off('error') to prevent stacking error handlers
- Simplify fallback logic: only replace .webp → .png on error
- Prevents infinite error loops
 2026-05-15 07:57:09 +00:00
Claw (AI)
b237cb6315 fix(images): remove unused masonry.js and fix broken references 
- Delete js/masonry.pkgd.min.js (24 KB, never referenced in HTML)
- Fix bad3.jpg → Bad-3.webp reference (was 404)
- Fix WhatsApp Image reference → replaced with Bad-4.webp (existing image)
- Update data-img attributes to use WebP paths
 2026-05-15 07:57:09 +00:00
Claw (AI)
98cb53df09 fix(images): update nginx with gzip and 30d cache headers 
- Enable gzip for CSS, JS, SVG, JSON, XML
- Add 30-day cache headers for static assets (images, CSS, JS, fonts)
- Set Cache-Control: public, immutable for static files
 2026-05-15 07:57:09 +00:00
Claw (AI)
8666bc1eec feat(images): convert all images to WebP with 87% size reduction 
- Convert 34 images (PNG/JPG) to WebP at quality 80
- Total savings: 21.6 MB → 2.8 MB (87% reduction)
- Add <picture> elements with WebP source + original fallback
- Add loading=lazy to all below-the-fold images
- Update lightbox to serve WebP images with error fallback
 2026-05-15 07:57:09 +00:00
44 changed files with 216 additions and 189 deletions
Expand all files Collapse all files

BIN
bilder/Außenansicht-2-small.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 20 KiB

BIN
bilder/Außenansicht-2.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 153 KiB

BIN
bilder/Bad-2-small.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 16 KiB

BIN
bilder/Bad-2.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 202 KiB

BIN
bilder/Bad-3-small.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

BIN
bilder/Bad-3.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 145 KiB

BIN
bilder/Bad-4-small.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

BIN
bilder/Bad-4.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 159 KiB

BIN
bilder/Bad-small.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 16 KiB

BIN
bilder/Bad.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 290 KiB

BIN
bilder/Kinderzimmer 2-small.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.3 KiB

BIN
bilder/Kinderzimmer 2.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 132 KiB

BIN
bilder/Kinderzimmer 3-small.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.6 KiB

BIN
bilder/Kinderzimmer 3.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 174 KiB

BIN
bilder/Kinderzimmer-small.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 11 KiB

BIN
bilder/Kinderzimmer.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 104 KiB

BIN
bilder/Küche 1-small.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

BIN
bilder/Küche 1.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 371 KiB

BIN
bilder/grundrisse/Dachboden unten 2-small.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.0 KiB

BIN
bilder/grundrisse/Dachboden unten 2.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 98 KiB

BIN
bilder/grundrisse/Dachboden unten-small.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.3 KiB

BIN
bilder/grundrisse/Dachboden unten.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 54 KiB

BIN
bilder/grundrisse/EG 3D-small.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.8 KiB

BIN
bilder/grundrisse/EG 3D.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 39 KiB

BIN
bilder/grundrisse/EG-small.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 13 KiB

BIN
bilder/grundrisse/EG.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 117 KiB

BIN
bilder/grundrisse/OG 1 2-small.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 17 KiB

BIN
bilder/grundrisse/OG 1 2.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 138 KiB

BIN
bilder/grundrisse/OG 1 3D-small.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.8 KiB

BIN
bilder/grundrisse/OG 1 3D.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 40 KiB

BIN
bilder/grundrisse/OG 2 3D-small.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.0 KiB

BIN
bilder/grundrisse/OG 2 3D.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 42 KiB

BIN
bilder/grundrisse/OG 2 grundriss-small.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

BIN
bilder/grundrisse/OG 2 grundriss.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 150 KiB

BIN
bilder/kinderzimmer 2 2-small.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 10 KiB

BIN
bilder/kinderzimmer 2 2.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 42 KiB

BIN
bilder/schlafzimmer-small.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 13 KiB

BIN
bilder/schlafzimmer.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 36 KiB

BIN
bilder/wohnzimmer2-small.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

BIN
bilder/wohnzimmer2.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 48 KiB

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: {

207
index.php
View File

@@ -182,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>
@@ -209,7 +210,7 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
<div <div
class="hero-bg" class="hero-bg"
id="heroBg" id="heroBg"
style="background-image: url(bilder/Außenansicht-2.png)" style="background-image: url(bilder/Außenansicht-2.webp)"
></div> ></div>
<div class="hero-overlay"></div> <div class="hero-overlay"></div>
<div class="hero-content" id="heroContent"> <div class="hero-content" id="heroContent">
@@ -282,7 +283,10 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
</div> </div>
</div> </div>
<div class="intro-img" data-animate> <div class="intro-img" data-animate>
<img src="bilder/wohnzimmer2.png" alt="Wohnzimmer" /> <picture>
<source srcset="bilder/wohnzimmer2.webp" type="image/webp">
<img src="bilder/wohnzimmer2.png" alt="Wohnzimmer" loading="lazy" />
</picture>
<div class="intro-img-badge">Wohnzimmer · 42,6 m²</div> <div class="intro-img-badge">Wohnzimmer · 42,6 m²</div>
</div> </div>
</section> </section>
@@ -297,55 +301,88 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
<div class="masonry-grid"> <div class="masonry-grid">
<div class="grid-sizer"></div> <div class="grid-sizer"></div>
<div class="grid-item" data-img="bilder/Außenansicht-2.png"> <div class="grid-item" data-img="bilder/Außenansicht-2.webp">
<img src="bilder/Außenansicht-2-small.png" alt="Außenansicht" /> <picture>
<source srcset="bilder/Außenansicht-2-small.webp" type="image/webp">
<img src="bilder/Außenansicht-2-small.png" alt="Außenansicht" loading="lazy" />
</picture>
<span class="grid-item-label">Außenansicht</span> <span class="grid-item-label">Außenansicht</span>
</div> </div>
<div class="grid-item" data-img="bilder/wohnzimmer2.png"> <div class="grid-item" data-img="bilder/wohnzimmer2.webp">
<img src="bilder/wohnzimmer2-small.png" alt="Wohnzimmer" /> <picture>
<source srcset="bilder/wohnzimmer2-small.webp" type="image/webp">
<img src="bilder/wohnzimmer2-small.png" alt="Wohnzimmer" loading="lazy" />
</picture>
<span class="grid-item-label">Wohnzimmer · 42,6 m²</span> <span class="grid-item-label">Wohnzimmer · 42,6 m²</span>
</div> </div>
<div class="grid-item" data-img="bilder/Küche 1.jpg"> <div class="grid-item" data-img="bilder/Küche 1.webp">
<img src="bilder/Küche 1.jpg" alt="Küche" /> <picture>
<source srcset="bilder/Küche 1-small.webp" type="image/webp">
<img src="bilder/Küche 1.jpg" alt="Küche" loading="lazy" />
</picture>
<span class="grid-item-label">Küche · 18,4 m²</span> <span class="grid-item-label">Küche · 18,4 m²</span>
</div> </div>
<div class="grid-item" data-img="bilder/schlafzimmer.png"> <div class="grid-item" data-img="bilder/schlafzimmer.webp">
<img src="bilder/schlafzimmer-small.png" alt="Schlafzimmer" /> <picture>
<source srcset="bilder/schlafzimmer-small.webp" type="image/webp">
<img src="bilder/schlafzimmer-small.png" alt="Schlafzimmer" loading="lazy" />
</picture>
<span class="grid-item-label">Schlafzimmer · 18 m²</span> <span class="grid-item-label">Schlafzimmer · 18 m²</span>
</div> </div>
<div class="grid-item" data-img="bilder/Bad.jpg"> <div class="grid-item" data-img="bilder/Bad.webp">
<img src="bilder/Bad.jpg" alt="Badezimmer" /> <picture>
<source srcset="bilder/Bad-small.webp" type="image/webp">
<img src="bilder/Bad.jpg" alt="Badezimmer" loading="lazy" />
</picture>
<span class="grid-item-label">Badezimmer · 9,8 m²</span> <span class="grid-item-label">Badezimmer · 9,8 m²</span>
</div> </div>
<div class="grid-item" data-img="bilder/Kinderzimmer.png"> <div class="grid-item" data-img="bilder/Kinderzimmer.webp">
<img src="bilder/Kinderzimmer-small.png" alt="Kinderzimmer 1" /> <picture>
<source srcset="bilder/Kinderzimmer-small.webp" type="image/webp">
<img src="bilder/Kinderzimmer-small.png" alt="Kinderzimmer 1" loading="lazy" />
</picture>
<span class="grid-item-label">Kinderzimmer 1 · 21,7 m²</span> <span class="grid-item-label">Kinderzimmer 1 · 21,7 m²</span>
</div> </div>
<div class="grid-item" data-img="bilder/Kinderzimmer 2.jpg"> <div class="grid-item" data-img="bilder/Kinderzimmer 2.webp">
<img src="bilder/Kinderzimmer 2-small.png" alt="Kinderzimmer 2" /> <picture>
<source srcset="bilder/Kinderzimmer 2-small.webp" type="image/webp">
<img src="bilder/Kinderzimmer 2-small.png" alt="Kinderzimmer 2" loading="lazy" />
</picture>
<span class="grid-item-label">Kinderzimmer 2 · 15,7 m²</span> <span class="grid-item-label">Kinderzimmer 2 · 15,7 m²</span>
</div> </div>
<div class="grid-item" data-img="bilder/kinderzimmer 2 2.jpeg"> <div class="grid-item" data-img="bilder/kinderzimmer 2 2.webp">
<img src="bilder/kinderzimmer 2 2-small.png" alt="Kinderzimmer Detail" /> <picture>
<source srcset="bilder/kinderzimmer 2 2-small.webp" type="image/webp">
<img src="bilder/kinderzimmer 2 2-small.png" alt="Kinderzimmer Detail" loading="lazy" />
</picture>
<span class="grid-item-label">Kinderzimmer Detail</span> <span class="grid-item-label">Kinderzimmer Detail</span>
</div> </div>
<div class="grid-item" data-img="bilder/Kinderzimmer 3.jpg"> <div class="grid-item" data-img="bilder/Kinderzimmer 3.webp">
<img src="bilder/Kinderzimmer 3-small.png" alt="Kinderzimmer 3" /> <picture>
<source srcset="bilder/Kinderzimmer 3-small.webp" type="image/webp">
<img src="bilder/Kinderzimmer 3-small.png" alt="Kinderzimmer 3" loading="lazy" />
</picture>
<span class="grid-item-label">Gästezimmer · 11,5 m²</span> <span class="grid-item-label">Gästezimmer · 11,5 m²</span>
</div> </div>
<div class="grid-item" data-img="bilder/Bad-2.jpg"> <div class="grid-item" data-img="bilder/Bad-2.webp">
<img src="bilder/Bad-2-small.jpg" alt="Wohnbereich Detail 1" /> <picture>
<source srcset="bilder/Bad-2-small.webp" type="image/webp">
<img src="bilder/Bad-2-small.jpg" alt="Wohnbereich Detail 1" loading="lazy" />
</picture>
<span class="grid-item-label">Wohnbereich</span> <span class="grid-item-label">Wohnbereich</span>
</div> </div>
<div class="grid-item" data-img="bilder/bad3.jpg"> <div class="grid-item" data-img="bilder/Bad-3.webp">
<img src="bilder/Bad-3-small.jpg" alt="Wohnbereich Detail 2" /> <picture>
<source srcset="bilder/Bad-3-small.webp" type="image/webp">
<img src="bilder/Bad-3-small.jpg" alt="Wohnbereich Detail 2" loading="lazy" />
</picture>
<span class="grid-item-label">Wohnbereich Detail</span> <span class="grid-item-label">Wohnbereich Detail</span>
</div> </div>
<div class="grid-item" data-img="bilder/WhatsApp Image 2026-03-30 at 07.50.42 (2).jpeg"> <div class="grid-item" data-img="bilder/Bad-4.webp">
<img <picture>
src="bilder/WhatsApp Image 2026-03-30 at 07.50.42 (2).jpeg" <source srcset="bilder/Bad-4-small.webp" type="image/webp">
alt="Wohnbereich Detail 3" <img src="bilder/Bad-4-small.jpg" alt="Wohnbereich Detail 3" loading="lazy" />
/> </picture>
<span class="grid-item-label">Hausansicht</span> <span class="grid-item-label">Hausansicht</span>
</div> </div>
</div> </div>
@@ -391,16 +428,24 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
</div> </div>
</div> </div>
<div class="floor-plan floor-plan-multi"> <div class="floor-plan floor-plan-multi">
<img <picture>
src="bilder/grundrisse/EG-small.jpg" <source srcset="bilder/grundrisse/EG-small.webp" type="image/webp">
alt="Grundriss Erdgeschoss" <img
data-img="bilder/grundrisse/EG.png" src="bilder/grundrisse/EG-small.jpg"
/> alt="Grundriss Erdgeschoss"
<img loading="lazy"
src="bilder/grundrisse/EG 3D-small.jpg" data-img="bilder/grundrisse/EG.webp"
alt="Grundriss Erdgeschoss" />
data-img="bilder/grundrisse/EG 3D.png" </picture>
/> <picture>
<source srcset="bilder/grundrisse/EG 3D-small.webp" type="image/webp">
<img
src="bilder/grundrisse/EG 3D-small.jpg"
alt="Grundriss Erdgeschoss"
loading="lazy"
data-img="bilder/grundrisse/EG 3D.webp"
/>
</picture>
</div> </div>
</div> </div>
</div> </div>
@@ -440,16 +485,24 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
</div> </div>
</div> </div>
<div class="floor-plan floor-plan-multi"> <div class="floor-plan floor-plan-multi">
<img <picture>
src="bilder/grundrisse/OG 1 2-small.jpg" <source srcset="bilder/grundrisse/OG 1 2-small.webp" type="image/webp">
alt="Grundriss 1. Obergeschoss" <img
data-img="bilder/grundrisse/OG 1 2.png" src="bilder/grundrisse/OG 1 2-small.jpg"
/> alt="Grundriss 1. Obergeschoss"
<img loading="lazy"
src="bilder/grundrisse/OG 1 3D-small.jpg" data-img="bilder/grundrisse/OG 1 2.webp"
alt="Grundriss 1. Obergeschoss" />
data-img="bilder/grundrisse/OG 1 3D.png" </picture>
/> <picture>
<source srcset="bilder/grundrisse/OG 1 3D-small.webp" type="image/webp">
<img
src="bilder/grundrisse/OG 1 3D-small.jpg"
alt="Grundriss 1. Obergeschoss"
loading="lazy"
data-img="bilder/grundrisse/OG 1 3D.webp"
/>
</picture>
</div> </div>
</div> </div>
</div> </div>
@@ -489,16 +542,24 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
</div> </div>
</div> </div>
<div class="floor-plan floor-plan-multi"> <div class="floor-plan floor-plan-multi">
<img <picture>
src="bilder/grundrisse/OG 2 grundriss-small.jpg" <source srcset="bilder/grundrisse/OG 2 grundriss-small.webp" type="image/webp">
alt="Grundriss 2. Obergeschoss (1)" <img
data-img="bilder/grundrisse/OG 2 grundriss.png" src="bilder/grundrisse/OG 2 grundriss-small.jpg"
/> alt="Grundriss 2. Obergeschoss (1)"
<img loading="lazy"
src="bilder/grundrisse/OG 2 3D-small.jpg" data-img="bilder/grundrisse/OG 2 grundriss.webp"
alt="Grundriss 2. Obergeschoss (1)" />
data-img="bilder/grundrisse/OG 2 3D.png" </picture>
/> <picture>
<source srcset="bilder/grundrisse/OG 2 3D-small.webp" type="image/webp">
<img
src="bilder/grundrisse/OG 2 3D-small.jpg"
alt="Grundriss 2. Obergeschoss (1)"
loading="lazy"
data-img="bilder/grundrisse/OG 2 3D.webp"
/>
</picture>
</div> </div>
</div> </div>
</div> </div>
@@ -526,16 +587,24 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
</div> </div>
</div> </div>
<div class="floor-plan floor-plan-multi"> <div class="floor-plan floor-plan-multi">
<img <picture>
src="bilder/grundrisse/Dachboden unten 2-small.jpg" <source srcset="bilder/grundrisse/Dachboden unten 2-small.webp" type="image/webp">
alt="Grundriss Dachboden" <img
data-img="bilder/grundrisse/Dachboden unten 2.png" src="bilder/grundrisse/Dachboden unten 2-small.jpg"
/> alt="Grundriss Dachboden"
<img loading="lazy"
src="bilder/grundrisse/Dachboden unten-small.jpg" data-img="bilder/grundrisse/Dachboden unten 2.webp"
alt="Grundriss Dachboden" />
data-img="bilder/grundrisse/Dachboden unten.png" </picture>
/> <picture>
<source srcset="bilder/grundrisse/Dachboden unten-small.webp" type="image/webp">
<img
src="bilder/grundrisse/Dachboden unten-small.jpg"
alt="Grundriss Dachboden"
loading="lazy"
data-img="bilder/grundrisse/Dachboden unten.webp"
/>
</picture>
</div> </div>
</div> </div>
</div> </div>

182
js/haus-schleusingen.js
View File

@@ -1,144 +1,88 @@
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
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";
} }
}); });
}
$("[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);
}
}); });
// Lightbox – gallery grid items // Lightbox – gallery grid items
document.querySelectorAll(".grid-item").forEach(function (item) { $(document).on("click", ".grid-item", function () {
item.addEventListener("click", function () { var src = $(this).data("img") || $(this).find("img").attr("src");
var src = this.dataset.img || this.querySelector("img").getAttribute("src"); $("#lightboxImg").off("error").on("error", function () {
openLightbox(src); // WebP fallback: try original format
if ($(this).attr('src').endsWith('.webp')) {
$(this).attr('src', src.replace(/\.webp$/, '.png'));
}
}); });
$("#lightboxImg").attr("src", src);
$("#lightbox").addClass("open");
$("body").css("overflow", "hidden");
}); });
// 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); $("#lightboxImg").off("error").on("error", function () {
if ($(this).attr('src').endsWith('.webp')) {
$(this).attr('src', src.replace(/\.webp$/, '.png'));
}
}); });
$("#lightboxImg").attr("src", src);
$("#lightbox").addClass("open");
$("body").css("overflow", "hidden");
}); });
$("#lightboxClose, #lightbox").on("click", function (e) {
function openLightbox(src) { if (e.target === this) {
document.getElementById("lightboxImg").setAttribute("src", src); $("#lightbox").removeClass("open");
document.getElementById("lightbox").classList.add("open"); $("body").css("overflow", "");
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) { $(document).on("keydown", function (e) {
if (e.key === "Escape") closeLightbox(); if (e.key === "Escape") {
$("#lightbox").removeClass("open");
$("body").css("overflow", "");
}
}); });
// Form submit is handled server-side by PHP – no JS intervention needed. // Form submit is handled server-side by PHP – no JS intervention needed.
// Form submit – opens email client with pre-filled mailto: link
document.getElementById("contactForm").addEventListener("submit", function (e) {
e.preventDefault();
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";
});
});
}); });
// Mobile hamburger menu (vanilla JS) // Mobile hamburger menu (vanilla JS)

13
nginx.conf
View File

@@ -5,7 +5,20 @@ server {
root /usr/share/nginx/html; root /usr/share/nginx/html;
index haus-schleusingen.html; index haus-schleusingen.html;
# Gzip aktivieren
gzip on;
gzip_types text/css application/javascript image/svg+xml application/json text/xml;
gzip_min_length 256;
gzip_vary on;
location / { location / {
try_files $uri $uri/ /haus-schleusingen.html; try_files $uri $uri/ /haus-schleusingen.html;
} }
# Lange Cache-Dauer für Bilder und statische Assets
location ~* \.(jpg|jpeg|png|webp|gif|ico|svg|css|js|woff2?)$ {
expires 30d;
add_header Cache-Control "public, immutable";
access_log off;
}
} }