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

merge: resolve conflicts with main (WebP + vanilla JS + a11y)
All checks were successful
Deploy Feature Branch to Test / deploy (push) Successful in 32s
Details

Browse Source
This commit is contained in:
Claw
2026-05-19 13:28:52 +00:00
parent 73635a5f03 4ca48a7445
commit 9c0a9a856a
9 changed files with 295 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files

87
index.php
View File

@@ -126,6 +126,11 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
<html lang="de">
<head>
<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" />
<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." />
@@ -182,11 +187,11 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
</script>
<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>
<nav id="navbar">
<a href="#main-content" class="skip-link">Zum Inhalt springen</a>
<nav id="navbar" role="navigation" aria-label="Hauptnavigation">
<div class="nav-logo">Bahnhofstraße 10</div>
<button class="nav-hamburger" aria-label="Navigation öffnen" aria-expanded="false">
<span></span>
@@ -235,6 +240,7 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
</div>
</section>
<main id="main-content">
<div class="facts-strip">
<div class="fact">
<div class="fact-val">227</div>
@@ -291,7 +297,7 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
</div>
</section>
<section id="galerie" class="gallery-section">
<section id="galerie" class="gallery-section" aria-label="Fotogalerie">
<div class="gallery-header">
<div>
<div class="section-eyebrow">Fotogalerie</div>
@@ -301,84 +307,84 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
<div class="masonry-grid">
<div class="grid-sizer"></div>
<div class="grid-item" data-img="bilder/Außenansicht-2.webp">
<div class="grid-item" data-img="bilder/Außenansicht-2.webp" role="button" tabindex="0" aria-label="Außenansicht – Großansicht öffnen">
<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" />
<img src="bilder/Außenansicht-2-small.png" alt="Außenansicht des Einfamilienhauses" loading="lazy" />
</picture>
<span class="grid-item-label">Außenansicht</span>
</div>
<div class="grid-item" data-img="bilder/wohnzimmer2.webp">
<div class="grid-item" data-img="bilder/wohnzimmer2.webp" role="button" tabindex="0" aria-label="Wohnzimmer – Großansicht öffnen">
<picture>
<source srcset="bilder/wohnzimmer2-small.webp" type="image/webp">
<img src="bilder/wohnzimmer2-small.png" alt="Wohnzimmer" loading="lazy" />
<img src="bilder/wohnzimmer2-small.png" alt="Wohnzimmer mit 42,6 m² Wohnfläche" loading="lazy" />
</picture>
<span class="grid-item-label">Wohnzimmer · 42,6 m²</span>
</div>
<div class="grid-item" data-img="bilder/Küche 1.webp">
<div class="grid-item" data-img="bilder/Küche 1.webp" role="button" tabindex="0" aria-label="Küche – Großansicht öffnen">
<picture>
<source srcset="bilder/Küche 1-small.webp" type="image/webp">
<img src="bilder/Küche 1.jpg" alt="Küche" loading="lazy" />
<img src="bilder/Küche 1.jpg" alt="Küche mit 18,4 m²" loading="lazy" />
</picture>
<span class="grid-item-label">Küche · 18,4 m²</span>
</div>
<div class="grid-item" data-img="bilder/schlafzimmer.webp">
<div class="grid-item" data-img="bilder/schlafzimmer.webp" role="button" tabindex="0" aria-label="Schlafzimmer – Großansicht öffnen">
<picture>
<source srcset="bilder/schlafzimmer-small.webp" type="image/webp">
<img src="bilder/schlafzimmer-small.png" alt="Schlafzimmer" loading="lazy" />
<img src="bilder/schlafzimmer-small.png" alt="Schlafzimmer mit 18 m²" loading="lazy" />
</picture>
<span class="grid-item-label">Schlafzimmer · 18 m²</span>
</div>
<div class="grid-item" data-img="bilder/Bad.webp">
<div class="grid-item" data-img="bilder/Bad.webp" role="button" tabindex="0" aria-label="Badezimmer – Großansicht öffnen">
<picture>
<source srcset="bilder/Bad-small.webp" type="image/webp">
<img src="bilder/Bad.jpg" alt="Badezimmer" loading="lazy" />
<img src="bilder/Bad.jpg" alt="Badezimmer mit 9,8 m²" loading="lazy" />
</picture>
<span class="grid-item-label">Badezimmer · 9,8 m²</span>
</div>
<div class="grid-item" data-img="bilder/Kinderzimmer.webp">
<div class="grid-item" data-img="bilder/Kinderzimmer.webp" role="button" tabindex="0" aria-label="Kinderzimmer 1 – Großansicht öffnen">
<picture>
<source srcset="bilder/Kinderzimmer-small.webp" type="image/webp">
<img src="bilder/Kinderzimmer-small.png" alt="Kinderzimmer 1" loading="lazy" />
<img src="bilder/Kinderzimmer-small.png" alt="Kinderzimmer 1 mit 21,7 m²" loading="lazy" />
</picture>
<span class="grid-item-label">Kinderzimmer 1 · 21,7 m²</span>
</div>
<div class="grid-item" data-img="bilder/Kinderzimmer 2.webp">
<div class="grid-item" data-img="bilder/Kinderzimmer 2.webp" role="button" tabindex="0" aria-label="Kinderzimmer 2 – Großansicht öffnen">
<picture>
<source srcset="bilder/Kinderzimmer 2-small.webp" type="image/webp">
<img src="bilder/Kinderzimmer 2-small.png" alt="Kinderzimmer 2" loading="lazy" />
<img src="bilder/Kinderzimmer 2-small.png" alt="Kinderzimmer 2 mit 15,7 m²" loading="lazy" />
</picture>
<span class="grid-item-label">Kinderzimmer 2 · 15,7 m²</span>
</div>
<div class="grid-item" data-img="bilder/kinderzimmer 2 2.webp">
<div class="grid-item" data-img="bilder/kinderzimmer 2 2.webp" role="button" tabindex="0" aria-label="Kinderzimmer Detail – Großansicht öffnen">
<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" />
<img src="bilder/kinderzimmer 2 2-small.png" alt="Detailansicht Kinderzimmer" loading="lazy" />
</picture>
<span class="grid-item-label">Kinderzimmer Detail</span>
</div>
<div class="grid-item" data-img="bilder/Kinderzimmer 3.webp">
<div class="grid-item" data-img="bilder/Kinderzimmer 3.webp" role="button" tabindex="0" aria-label="Gästezimmer – Großansicht öffnen">
<picture>
<source srcset="bilder/Kinderzimmer 3-small.webp" type="image/webp">
<img src="bilder/Kinderzimmer 3-small.png" alt="Kinderzimmer 3" loading="lazy" />
<img src="bilder/Kinderzimmer 3-small.png" alt="Gästezimmer mit 11,5 m²" loading="lazy" />
</picture>
<span class="grid-item-label">Gästezimmer · 11,5 m²</span>
</div>
<div class="grid-item" data-img="bilder/Bad-2.webp">
<div class="grid-item" data-img="bilder/Bad-2.webp" role="button" tabindex="0" aria-label="Zweites Bad – Großansicht öffnen">
<picture>
<source srcset="bilder/Bad-2-small.webp" type="image/webp">
<img src="bilder/Bad-2-small.jpg" alt="Wohnbereich Detail 1" loading="lazy" />
<img src="bilder/Bad-2-small.jpg" alt="Zweites Badezimmer im Haus" loading="lazy" />
</picture>
<span class="grid-item-label">Wohnbereich</span>
</div>
<div class="grid-item" data-img="bilder/Bad-3.webp">
<div class="grid-item" data-img="bilder/Bad-3.webp" role="button" tabindex="0" aria-label="Drittes Bad – Großansicht öffnen">
<picture>
<source srcset="bilder/Bad-3-small.webp" type="image/webp">
<img src="bilder/Bad-3-small.jpg" alt="Wohnbereich Detail 2" loading="lazy" />
<img src="bilder/Bad-3-small.jpg" alt="Drittes Badezimmer im Haus" loading="lazy" />
</picture>
<span class="grid-item-label">Wohnbereich Detail</span>
</div>
<div class="grid-item" data-img="bilder/Bad-4.webp">
<div class="grid-item" data-img="bilder/Bad-4.webp" role="button" tabindex="0" aria-label="Wohnbereich Detail – Großansicht öffnen">
<picture>
<source srcset="bilder/Bad-4-small.webp" type="image/webp">
<img src="bilder/Bad-4-small.jpg" alt="Wohnbereich Detail 3" loading="lazy" />
@@ -393,14 +399,14 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
<h2>Großzügig auf allen Etagen</h2>
<div class="floor-accordion">
<div class="floor-item">
<div class="floor-header">
<div class="floor-header" role="button" tabindex="0" aria-expanded="false" aria-controls="floor-body-0" id="floor-title-0">
<span class="floor-title">Erdgeschoss</span>
<div class="floor-size">
<span>99,5 m²</span>
<div class="floor-icon">+</div>
</div>
</div>
<div class="floor-body">
<div class="floor-body" id="floor-body-0" role="region" aria-labelledby="floor-title-0">
<div class="floor-rooms-grid">
<div class="room-chip">
Flur
@@ -450,14 +456,14 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
</div>
</div>
<div class="floor-item">
<div class="floor-header">
<div class="floor-header" role="button" tabindex="0" aria-expanded="false" aria-controls="floor-body-1" id="floor-title-1">
<span class="floor-title">1. Obergeschoss</span>
<div class="floor-size">
<span>120,4 m²</span>
<div class="floor-icon">+</div>
</div>
</div>
<div class="floor-body">
<div class="floor-body" id="floor-body-1" role="region" aria-labelledby="floor-title-1">
<div class="floor-rooms-grid">
<div class="room-chip">
Flur
@@ -507,14 +513,14 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
</div>
</div>
<div class="floor-item">
<div class="floor-header">
<div class="floor-header" role="button" tabindex="0" aria-expanded="false" aria-controls="floor-body-2" id="floor-title-2">
<span class="floor-title">2. Obergeschoss</span>
<div class="floor-size">
<span>68 m²</span>
<div class="floor-icon">+</div>
</div>
</div>
<div class="floor-body">
<div class="floor-body" id="floor-body-2" role="region" aria-labelledby="floor-title-2">
<div class="floor-rooms-grid">
<div class="room-chip">
Flur
@@ -564,14 +570,14 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
</div>
</div>
<div class="floor-item">
<div class="floor-header">
<div class="floor-header" role="button" tabindex="0" aria-expanded="false" aria-controls="floor-body-3" id="floor-title-3">
<span class="floor-title">Dachboden</span>
<div class="floor-size">
<span>94 m² Nutzfläche</span>
<div class="floor-icon">+</div>
</div>
</div>
<div class="floor-body">
<div class="floor-body" id="floor-body-3" role="region" aria-labelledby="floor-title-3">
<div class="floor-rooms-grid">
<div class="room-chip">
Dachboden unten (ungeheizt)
@@ -611,7 +617,7 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
</div>
</section>
<section class="pricing-section" id="miete">
<section class="pricing-section" id="miete" aria-label="Mietkonditionen">
<div class="pricing-inner">
<div class="section-eyebrow">Mietkonditionen</div>
<h2>Transparente Preisgestaltung</h2>
@@ -709,7 +715,7 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
</div>
</section>
<section class="contact-section" id="kontakt">
<section class="contact-section" id="kontakt" aria-label="Kontaktformular">
<div class="contact-inner">
<div class="section-eyebrow">Kontakt</div>
<h2>
@@ -810,7 +816,8 @@ foreach ($interestOptions as $opt):
</div>
</section>
<footer>
</main>
<footer role="contentinfo">
<div class="footer-logo">Bahnhofstraße 10 · Schleusingen</div>
<div class="footer-links">
<a href="impressum.html">Impressum</a>
@@ -818,9 +825,9 @@ foreach ($interestOptions as $opt):
</div>
</footer>
<div class="lightbox" id="lightbox">
<button class="lightbox-close" id="lightboxClose">&times;</button>
<img src="" id="lightboxImg" alt="Vollbild" />
<div class="lightbox" id="lightbox" role="dialog" aria-modal="true" aria-label="Bildansicht">
<button class="lightbox-close" id="lightboxClose" aria-label="Bildansicht schließen">&times;</button>
<img src="" id="lightboxImg" alt="" />
</div>
<script src="js/haus-schleusingen.js"></script>