Initial commit
This commit is contained in:
@@ -0,0 +1,14 @@
|
|||||||
|
I want you to rebuild this website using only html, css and js.
|
||||||
|
It's a one-pager, with a floating menu-bar at the top. Every Segment has a header at the top, which is an anker for the links in the menu-bar.
|
||||||
|
The First Segment and landing page is a carusell of 3 images rotating.
|
||||||
|
The second segmend is only text.
|
||||||
|
The third segment is a carusell of image-text-combinations, so there is alwas a picture on the left and text on the right. Those should be navigatable with arrows on the left and right.
|
||||||
|
The fourth segment is a slideshow of almost fullscreen images, only leaving space for the header of the segment.
|
||||||
|
The fifth segment is an almost full screen 3d viewer, that is implemented with this:
|
||||||
|
<iframe src="https://mx-static.markilux.com/360/16981/16981.html" border="0" style="width: 100%; height: 750px;"></iframe>
|
||||||
|
The sixth segment consists of two columns of image and text pairs, that link to partner websites.
|
||||||
|
The seventh segment is an info page about current event. It should contain one dummy heading and one dummy textfield below the 'Aktuelles' Header.
|
||||||
|
The last segment shows contact information and a contact form, that will send a confirmation mail to the customer and one mail to us with the message and customers contact details.
|
||||||
|
The Footer is almost the same as the floating menu bar, only adding 'Datenshutz' and 'Impressum', which link to one page each (same domain, other path).
|
||||||
|
Also implement a cookie banner, that asks for permission and does not use any dark patterns.
|
||||||
|
Only load the 3d viewer if the user consented to cookies. If they did not consent, don't load the 3d viewer but show a notice in it's place, that they have to accept cookies to show the 3d viewer and add a button that repoens banner the cookie
|
||||||
@@ -0,0 +1,119 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="de">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Datenschutz - Hofmann Wintergarten</title>
|
||||||
|
<link rel="stylesheet" href="styles.css">
|
||||||
|
<style>
|
||||||
|
.legal-page {
|
||||||
|
padding-top: 100px;
|
||||||
|
min-height: 100vh;
|
||||||
|
}
|
||||||
|
.legal-content {
|
||||||
|
max-width: 800px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 40px 20px;
|
||||||
|
}
|
||||||
|
.legal-content h1 {
|
||||||
|
color: var(--primary-color);
|
||||||
|
margin-bottom: 30px;
|
||||||
|
}
|
||||||
|
.legal-content h2 {
|
||||||
|
color: var(--primary-color);
|
||||||
|
margin-top: 30px;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
}
|
||||||
|
.legal-content p {
|
||||||
|
margin-bottom: 15px;
|
||||||
|
line-height: 1.8;
|
||||||
|
}
|
||||||
|
.back-link {
|
||||||
|
display: inline-block;
|
||||||
|
margin-top: 30px;
|
||||||
|
color: var(--primary-color);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<nav class="navbar" id="navbar">
|
||||||
|
<div class="nav-container">
|
||||||
|
<a href="index.html" class="logo">Hofmann Wintergarten</a>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<main class="legal-page">
|
||||||
|
<div class="legal-content">
|
||||||
|
<h1>Datenschutzerklärung</h1>
|
||||||
|
|
||||||
|
<h2>1. Datenschutz auf einen Blick</h2>
|
||||||
|
<h3>Allgemeine Hinweise</h3>
|
||||||
|
<p>Die folgenden Hinweise geben einen einfachen Überblick darüber, was mit Ihren personenbezogenen Daten passiert, wenn Sie diese Website besuchen. Personenbezogene Daten sind alle Daten, mit denen Sie persönlich identifiziert werden können.</p>
|
||||||
|
|
||||||
|
<h3>Datenerfassung auf dieser Website</h3>
|
||||||
|
<p><strong>Wer ist verantwortlich für die Datenerfassung auf dieser Website?</strong></p>
|
||||||
|
<p>Die Datenverarbeitung auf dieser Website erfolgt durch den Websitebetreiber. Dessen Kontaktdaten können Sie dem Impressum dieser Website entnehmen.</p>
|
||||||
|
|
||||||
|
<h3>Wie erfassen wir Ihre Daten?</h3>
|
||||||
|
<p>Ihre Daten werden zum einen dadurch erhoben, dass Sie uns diese mitteilen. Hierbei kann es sich z.B. um Daten handeln, die Sie in ein Kontaktformular eingeben.</p>
|
||||||
|
<p>Andere Daten werden automatisch oder nach Ihrer Einwilligung beim Besuch der Website durch unsere IT-Systeme erfasst. Das sind vor allem technische Daten (z.B. Internetbrowser, Betriebssystem oder Uhrzeit des Seitenaufrufs).</p>
|
||||||
|
|
||||||
|
<h2>2. Allgemeine Hinweise und Pflichtinformationen</h2>
|
||||||
|
<h3>Datenschutz</h3>
|
||||||
|
<p>Die Betreiber dieser Seiten nehmen den Schutz Ihrer persönlichen Daten sehr ernst. Wir behandeln Ihre personenbezogenen Daten vertraulich und entsprechend der gesetzlichen Datenschutzvorschriften sowie dieser Datenschutzerklärung.</p>
|
||||||
|
|
||||||
|
<h3>Hinweis zur verantwortlichen Stelle</h3>
|
||||||
|
<p>Die verantwortliche Stelle für die Datenverarbeitung auf dieser Website ist:</p>
|
||||||
|
<p>
|
||||||
|
Hofmann Wintergarten GmbH<br>
|
||||||
|
Musterstraße 123<br>
|
||||||
|
12345 Musterstadt<br>
|
||||||
|
Telefon: +49 123 456789-0<br>
|
||||||
|
E-Mail: info@hofmann-wintergarten.de
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<h3>Speicherdauer</h3>
|
||||||
|
<p>Soweit innerhalb dieser Datenschutzerklärung keine speziellere Speicherdauer genannt wurde, verbleiben Ihre personenbezogenen Daten bei uns, bis der Zweck für die Datenverarbeitung entfällt. Wenn Sie ein berechtigtes Löschersuchen geltend machen oder eine Einwilligung zur Datenverarbeitung widerrufen, werden Ihre Daten gelöscht.</p>
|
||||||
|
|
||||||
|
<h2>3. Datenerfassung auf dieser Website</h2>
|
||||||
|
<h3>Cookies</h3>
|
||||||
|
<p>Unsere Internetseiten verwenden so genannte "Cookies". Cookies sind kleine Textdateien und richten auf Ihrem Endgerät keinen Schaden an. Sie werden entweder vorübergehend für die Dauer einer Sitzung (Session-Cookies) oder dauerhaft (permanente Cookies) auf Ihrem Endgerät gespeichert.</p>
|
||||||
|
<p>Sie können Ihren Browser so einstellen, dass Sie über das Setzen von Cookies informiert werden und Cookies nur im Einzelfall erlauben, die Annahme von Cookies für bestimmte Fälle oder generell ausschließen sowie das automatische Löschen der Cookies beim Schließen des Browsers aktivieren.</p>
|
||||||
|
|
||||||
|
<h3>Kontaktformular</h3>
|
||||||
|
<p>Wenn Sie uns per Kontaktformular Anfragen zukommen lassen, werden Ihre Angaben aus dem Anfrageformular inklusive der von Ihnen dort angegebenen Kontaktdaten zwecks Bearbeitung der Anfrage und für den Fall von Anschlussfragen bei uns gespeichert. Diese Daten geben wir nicht ohne Ihre Einwilligung weiter.</p>
|
||||||
|
|
||||||
|
<h2>4. Ihre Rechte</h2>
|
||||||
|
<p>Sie haben jederzeit das Recht:</p>
|
||||||
|
<ul>
|
||||||
|
<li>Auskunft über Ihre bei uns gespeicherten Daten zu erhalten</li>
|
||||||
|
<li>Die Berichtigung unrichtiger Daten zu verlangen</li>
|
||||||
|
<li>Die Löschung Ihrer Daten zu verlangen</li>
|
||||||
|
<li>Die Einschränkung der Datenverarbeitung zu verlangen</li>
|
||||||
|
<li>Der Datenverarbeitung zu widersprechen</li>
|
||||||
|
<li>Ihre Einwilligung zu widerrufen</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<h2>5. Externe Inhalte</h2>
|
||||||
|
<p>Auf dieser Website können externe Inhalte wie ein 3D-Viewer eingebunden werden. Diese Inhalte werden nur geladen, wenn Sie ausdrücklich Ihre Zustimmung erteilt haben. Ohne Ihre Zustimmung werden keine Daten an externe Server übertragen.</p>
|
||||||
|
|
||||||
|
<a href="index.html" class="back-link">← Zurück zur Startseite</a>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<footer class="footer">
|
||||||
|
<div class="container">
|
||||||
|
<div class="footer-content">
|
||||||
|
<div class="footer-nav">
|
||||||
|
<a href="index.html">Home</a>
|
||||||
|
<a href="datenschutz.html">Datenschutz</a>
|
||||||
|
<a href="impressum.html">Impressum</a>
|
||||||
|
</div>
|
||||||
|
<div class="footer-bottom">
|
||||||
|
<p>© 2024 Hofmann Wintergarten GmbH. Alle Rechte vorbehalten.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
+125
@@ -0,0 +1,125 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="de">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Impressum - Hofmann Wintergarten</title>
|
||||||
|
<link rel="stylesheet" href="styles.css">
|
||||||
|
<style>
|
||||||
|
.legal-page {
|
||||||
|
padding-top: 100px;
|
||||||
|
min-height: 100vh;
|
||||||
|
}
|
||||||
|
.legal-content {
|
||||||
|
max-width: 800px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 40px 20px;
|
||||||
|
}
|
||||||
|
.legal-content h1 {
|
||||||
|
color: var(--primary-color);
|
||||||
|
margin-bottom: 30px;
|
||||||
|
}
|
||||||
|
.legal-content h2 {
|
||||||
|
color: var(--primary-color);
|
||||||
|
margin-top: 30px;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
}
|
||||||
|
.legal-content p {
|
||||||
|
margin-bottom: 15px;
|
||||||
|
line-height: 1.8;
|
||||||
|
}
|
||||||
|
.back-link {
|
||||||
|
display: inline-block;
|
||||||
|
margin-top: 30px;
|
||||||
|
color: var(--primary-color);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<nav class="navbar" id="navbar">
|
||||||
|
<div class="nav-container">
|
||||||
|
<a href="index.html" class="logo">Hofmann Wintergarten</a>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<main class="legal-page">
|
||||||
|
<div class="legal-content">
|
||||||
|
<h1>Impressum</h1>
|
||||||
|
|
||||||
|
<h2>Angaben gemäß § 5 TMG</h2>
|
||||||
|
<p>
|
||||||
|
Hofmann Wintergarten GmbH<br>
|
||||||
|
Musterstraße 123<br>
|
||||||
|
12345 Musterstadt<br>
|
||||||
|
Deutschland
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
<strong>Vertreten durch:</strong><br>
|
||||||
|
Geschäftsführer: Max Mustermann
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<h2>Kontakt</h2>
|
||||||
|
<p>
|
||||||
|
Telefon: +49 123 456789-0<br>
|
||||||
|
Telefax: +49 123 456789-10<br>
|
||||||
|
E-Mail: info@hofmann-wintergarten.de
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<h2>Registereintrag</h2>
|
||||||
|
<p>
|
||||||
|
Eintragung im Handelsregister.<br>
|
||||||
|
Registergericht: Amtsgericht Musterstadt<br>
|
||||||
|
Registernummer: HRB 12345
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<h2>Umsatzsteuer-ID</h2>
|
||||||
|
<p>
|
||||||
|
Umsatzsteuer-Identifikationsnummer gemäß § 27 a Umsatzsteuergesetz:<br>
|
||||||
|
DE 123 456 789
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<h2>Verantwortlich für den Inhalt nach § 55 Abs. 2 RStV</h2>
|
||||||
|
<p>
|
||||||
|
Max Mustermann<br>
|
||||||
|
Musterstraße 123<br>
|
||||||
|
12345 Musterstadt
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<h2>Streitschlichtung</h2>
|
||||||
|
<p>Die Europäische Kommission stellt eine Plattform zur Online-Streitbeilegung (OS) bereit: <a href="https://ec.europa.eu/consumers/odr" target="_blank" rel="noopener">https://ec.europa.eu/consumers/odr</a>.</p>
|
||||||
|
<p>Unsere E-Mail-Adresse finden Sie oben im Impressum.</p>
|
||||||
|
<p>Wir sind nicht bereit oder verpflichtet, an Streitbeilegungsverfahren vor einer Verbraucherschlichtungsstelle teilzunehmen.</p>
|
||||||
|
|
||||||
|
<h2>Haftung für Inhalte</h2>
|
||||||
|
<p>Als Diensteanbieter sind wir gemäß § 7 Abs.1 TMG für eigene Inhalte auf diesen Seiten nach den allgemeinen Gesetzen verantwortlich. Nach §§ 8 bis 10 TMG sind wir als Diensteanbieter jedoch nicht verpflichtet, übermittelte oder gespeicherte fremde Informationen zu überwachen oder nach Umständen zu forschen, die auf eine rechtswidrige Tätigkeit hinweisen.</p>
|
||||||
|
<p>Verpflichtungen zur Entfernung oder Sperrung der Nutzung von Informationen nach den allgemeinen Gesetzen bleiben hiervon unberührt. Eine diesbezügliche Haftung ist jedoch erst ab dem Zeitpunkt der Kenntnis einer konkreten Rechtsverletzung möglich. Bei Bekanntwerden von entsprechenden Rechtsverletzungen werden wir diese Inhalte umgehend entfernen.</p>
|
||||||
|
|
||||||
|
<h2>Haftung für Links</h2>
|
||||||
|
<p>Unser Angebot enthält Links zu externen Websites Dritter, auf deren Inhalte wir keinen Einfluss haben. Deshalb können wir für diese fremden Inhalte auch keine Gewähr übernehmen. Für die Inhalte der verlinkten Seiten ist stets der jeweilige Anbieter oder Betreiber der Seiten verantwortlich. Die verlinkten Seiten wurden zum Zeitpunkt der Verlinkung auf mögliche Rechtsverstöße überprüft. Rechtswidrige Inhalte waren zum Zeitpunkt der Verlinkung nicht erkennbar.</p>
|
||||||
|
<p>Eine permanente inhaltliche Kontrolle der verlinkten Seiten ist jedoch ohne konkrete Anhaltspunkte einer Rechtsverletzung nicht zumutbar. Bei Bekanntwerden von Rechtsverletzungen werden wir derartige Links umgehend entfernen.</p>
|
||||||
|
|
||||||
|
<h2>Urheberrecht</h2>
|
||||||
|
<p>Die durch die Seitenbetreiber erstellten Inhalte und Werke auf diesen Seiten unterliegen dem deutschen Urheberrecht. Die Vervielfältigung, Bearbeitung, Verbreitung und jede Art der Verwertung außerhalb der Grenzen des Urheberrechtes bedürfen der schriftlichen Zustimmung des jeweiligen Autors bzw. Erstellers. Downloads und Kopien dieser Seite sind nur für den privaten, nicht kommerziellen Gebrauch gestattet.</p>
|
||||||
|
<p>Soweit die Inhalte auf dieser Seite nicht vom Betreiber erstellt wurden, werden die Urheberrechte Dritter beachtet. Insbesondere werden Inhalte Dritter als solche gekennzeichnet. Sollten Sie trotzdem auf eine Urheberrechtsverletzung aufmerksam werden, bitten wir um einen entsprechenden Hinweis. Bei Bekanntwerden von Rechtsverletzungen werden wir derartige Inhalte umgehend entfernen.</p>
|
||||||
|
|
||||||
|
<a href="index.html" class="back-link">← Zurück zur Startseite</a>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<footer class="footer">
|
||||||
|
<div class="container">
|
||||||
|
<div class="footer-content">
|
||||||
|
<div class="footer-nav">
|
||||||
|
<a href="index.html">Home</a>
|
||||||
|
<a href="datenschutz.html">Datenschutz</a>
|
||||||
|
<a href="impressum.html">Impressum</a>
|
||||||
|
</div>
|
||||||
|
<div class="footer-bottom">
|
||||||
|
<p>© 2024 Hofmann Wintergarten GmbH. Alle Rechte vorbehalten.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
+508
@@ -0,0 +1,508 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="de">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Hofmann Wintergarten</title>
|
||||||
|
<link rel="stylesheet" href="styles.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<!-- Cookie Banner -->
|
||||||
|
<div id="cookie-banner" class="cookie-banner hidden">
|
||||||
|
<div class="cookie-content">
|
||||||
|
<p>Diese Website verwendet Cookies, um Ihnen die bestmögliche Erfahrung zu bieten. Dazu gehört auch das Laden von externen Inhalten wie dem 3D-Viewer.</p>
|
||||||
|
<div class="cookie-buttons">
|
||||||
|
<button id="accept-cookies" class="btn btn-primary">Akzeptieren</button>
|
||||||
|
<button id="decline-cookies" class="btn btn-secondary">Ablehnen</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Floating Navigation -->
|
||||||
|
<nav class="navbar" id="navbar">
|
||||||
|
<div class="nav-container">
|
||||||
|
<a href="#home" class="logo-link">
|
||||||
|
<img src="assets/Hofmann logo.png" alt="Hofmann Wintergarten" class="logo-img">
|
||||||
|
</a>
|
||||||
|
<div class="nav-highlight" id="nav-highlight"></div>
|
||||||
|
<ul class="nav-links">
|
||||||
|
<li data-section="ueber-uns"><a href="#ueber-uns">Über uns</a></li>
|
||||||
|
<li data-section="leistungen"><a href="#leistungen">Leistungen</a></li>
|
||||||
|
<li data-section="referenzen"><a href="#referenzen">Referenzen</a></li>
|
||||||
|
<li data-section="showroom"><a href="#showroom">Showroom</a></li>
|
||||||
|
<li data-section="partner"><a href="#partner">Partner</a></li>
|
||||||
|
<li data-section="aktuelles"><a href="#aktuelles">Aktuelles</a></li>
|
||||||
|
<li data-section="kontakt"><a href="#kontakt">Kontakt</a></li>
|
||||||
|
</ul>
|
||||||
|
<button class="mobile-menu-toggle" id="mobile-menu-toggle">
|
||||||
|
<span></span>
|
||||||
|
<span></span>
|
||||||
|
<span></span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<!-- Mobile Menu -->
|
||||||
|
<div class="mobile-menu" id="mobile-menu">
|
||||||
|
<ul>
|
||||||
|
<li><a href="#ueber-uns">Über uns</a></li>
|
||||||
|
<li><a href="#leistungen">Leistungen</a></li>
|
||||||
|
<li><a href="#referenzen">Referenzen</a></li>
|
||||||
|
<li><a href="#showroom">Showroom</a></li>
|
||||||
|
<li><a href="#partner">Partner</a></li>
|
||||||
|
<li><a href="#aktuelles">Aktuelles</a></li>
|
||||||
|
<li><a href="#kontakt">Kontakt</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Segment 1: Home / Image Carousel -->
|
||||||
|
<section id="home" class="segment segment-hero" style="scroll-snap-align: start;">
|
||||||
|
<div class="carousel" id="hero-carousel">
|
||||||
|
<div class="carousel-slide active">
|
||||||
|
<img src="assets/1 Kopf/Kopfbild - Kontakt-clean.png" alt="Kontakt">
|
||||||
|
<div class="carousel-text">
|
||||||
|
<h2 class="carousel-title">KONTAKT</h2>
|
||||||
|
<p class="carousel-content">Rufen Sie uns an unter<br>09221 / 701855</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="carousel-slide">
|
||||||
|
<img src="assets/1 Kopf/Kopfbild - Partner-clean.png" alt="Partner">
|
||||||
|
<div class="carousel-text">
|
||||||
|
<h2 class="carousel-title">PARTNER</h2>
|
||||||
|
<p class="carousel-content">für Wintergärten,<br>Terrassenüberdachungen<br>und Markisen</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="carousel-slide">
|
||||||
|
<img src="assets/1 Kopf/Kopfbild - Wohlfühloase-clean.png" alt="Wohlfühloase">
|
||||||
|
<div class="carousel-text">
|
||||||
|
<h2 class="carousel-title">WOHLFÜHLOASE</h2>
|
||||||
|
<p class="carousel-content">Ihr FACHMANN für die sonnigen Momente</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="carousel-indicators">
|
||||||
|
<span class="indicator active" data-slide="0"></span>
|
||||||
|
<span class="indicator" data-slide="1"></span>
|
||||||
|
<span class="indicator" data-slide="2"></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<div class="segment-separator"></div>
|
||||||
|
|
||||||
|
<!-- Segment 2: Über uns -->
|
||||||
|
<section id="ueber-uns" class="segment segment-text">
|
||||||
|
<div class="container">
|
||||||
|
<h2 class="section-header">Über uns</h2>
|
||||||
|
<div class="text-content">
|
||||||
|
<p>Die Firma Hofmann ist Ihr kompetenter Partner für Wintergärten, Terrassenüberdachungen und Sonnenschutzsysteme. Seit über 30 Jahren stehen wir für Qualität, Innovation und Kundenzufriedenheit.</p>
|
||||||
|
<p>Unser erfahrenes Team berät Sie umfassend und realisiert Ihre Wünsche mit höchster Präzision. Wir verwenden ausschließlich hochwertige Materialien und modernste Technologien, um Ihnen ein Produkt zu bieten, das überzeugt.</p>
|
||||||
|
<p>Von der ersten Beratung bis zur finalen Montage begleiten wir Sie auf dem Weg zu Ihrem Traum-Wintergarten. Vertrauen Sie auf unsere Expertise und lassen Sie sich von unseren Referenzprojekten inspirieren.</p>
|
||||||
|
<p>Wir freuen uns darauf, auch Ihr Projekt erfolgreich umzusetzen!</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<div class="segment-separator"></div>
|
||||||
|
|
||||||
|
<!-- Segment 3: Leistungen - Carousel with arrows -->
|
||||||
|
<section id="leistungen" class="segment segment-leistungen">
|
||||||
|
<div class="container">
|
||||||
|
<h2 class="section-header">Leistungen</h2>
|
||||||
|
|
||||||
|
<div class="leistungen-carousel-wrapper">
|
||||||
|
<button class="carousel-arrow carousel-prev" id="leistungen-prev">❮</button>
|
||||||
|
|
||||||
|
<div class="leistungen-carousel">
|
||||||
|
<div class="leistungen-track" id="leistungen-track">
|
||||||
|
<!-- Markisen first with markilux logo -->
|
||||||
|
<div class="leistung-slide active">
|
||||||
|
<div class="leistung-image">
|
||||||
|
<img src="assets/2 Leistungen/Markisen.jpg" alt="Markisen">
|
||||||
|
</div>
|
||||||
|
<div class="leistung-content">
|
||||||
|
<div class="leistung-logo">
|
||||||
|
<img src="assets/4 Partner/Partner Logos/Markilux.png" alt="Markilux">
|
||||||
|
</div>
|
||||||
|
<h3>Markisen</h3>
|
||||||
|
<p>Flexible Beschattung für Terrasse und Balkon. Unsere Markisen bieten optimalen Sonnenschutz bei Bedarf.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="leistung-slide">
|
||||||
|
<div class="leistung-image">
|
||||||
|
<img src="assets/2 Leistungen/Balkonverglasungen.JPG" alt="Balkonverglasungen">
|
||||||
|
</div>
|
||||||
|
<div class="leistung-content">
|
||||||
|
<h3>Balkonverglasungen</h3>
|
||||||
|
<p>Genießen Sie Ihren Balkon das ganze Jahr über. Unsere Balkonverglasungen schützen vor Wind, Wetter und Lärm.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="leistung-slide">
|
||||||
|
<div class="leistung-image">
|
||||||
|
<img src="assets/2 Leistungen/Faltanlagen.jpg" alt="Faltanlagen">
|
||||||
|
</div>
|
||||||
|
<div class="leistung-content">
|
||||||
|
<h3>Faltanlagen</h3>
|
||||||
|
<p>Flexible Glaslösungen für Terrasse und Balkon. Unsere Faltanlagen verbinden Indoor-Komfort mit Outdoor-Feeling.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="leistung-slide">
|
||||||
|
<div class="leistung-image">
|
||||||
|
<img src="assets/2 Leistungen/Haustüren.jpg" alt="Haustüren">
|
||||||
|
</div>
|
||||||
|
<div class="leistung-content">
|
||||||
|
<h3>Haustüren</h3>
|
||||||
|
<p>Der erste Eindruck zählt. Unsere hochwertigen Haustüren kombinieren Sicherheit, Wärmedämmung und ansprechendes Design.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="leistung-slide">
|
||||||
|
<div class="leistung-image">
|
||||||
|
<img src="assets/2 Leistungen/Haustürüberdachungen.jpg" alt="Haustürüberdachungen">
|
||||||
|
</div>
|
||||||
|
<div class="leistung-content">
|
||||||
|
<h3>Haustürüberdachungen</h3>
|
||||||
|
<p>Schutz vor Regen und Schnee beim Eingang. Unsere Überdachungen bieten praktischen Wetterschutz mit ästhetischem Wert.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="leistung-slide">
|
||||||
|
<div class="leistung-image">
|
||||||
|
<img src="assets/2 Leistungen/Insektenschutz.jpg" alt="Insektenschutz">
|
||||||
|
</div>
|
||||||
|
<div class="leistung-content">
|
||||||
|
<h3>Insektenschutz</h3>
|
||||||
|
<p>Genießen Sie frische Luft ohne ungebetene Gäste. Unsere Insektenschutzsysteme sind unauffällig und effektiv.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="leistung-slide">
|
||||||
|
<div class="leistung-image">
|
||||||
|
<img src="assets/2 Leistungen/Terassenüberdachungen.jpg" alt="Terassenüberdachungen">
|
||||||
|
</div>
|
||||||
|
<div class="leistung-content">
|
||||||
|
<h3>Terassenüberdachungen</h3>
|
||||||
|
<p>Ihre Terrasse als Wohnraum im Freien. Unsere Überdachungen schaffen geschützte Außenbereiche für jedes Wetter.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="leistung-slide">
|
||||||
|
<div class="leistung-image">
|
||||||
|
<img src="assets/2 Leistungen/Wintergärten.jpg" alt="Wintergärten">
|
||||||
|
</div>
|
||||||
|
<div class="leistung-content">
|
||||||
|
<h3>Wintergärten</h3>
|
||||||
|
<p>Maßgeschneiderte Wintergärten für Ihr Zuhause. Lichtdurchflutete Räume zum Wohlfühlen – das ganze Jahr über.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button class="carousel-arrow carousel-next" id="leistungen-next">❯</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="leistungen-indicators" id="leistungen-indicators">
|
||||||
|
<span class="indicator active" data-slide="0"></span>
|
||||||
|
<span class="indicator" data-slide="1"></span>
|
||||||
|
<span class="indicator" data-slide="2"></span>
|
||||||
|
<span class="indicator" data-slide="3"></span>
|
||||||
|
<span class="indicator" data-slide="4"></span>
|
||||||
|
<span class="indicator" data-slide="5"></span>
|
||||||
|
<span class="indicator" data-slide="6"></span>
|
||||||
|
<span class="indicator" data-slide="7"></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<div class="segment-separator"></div>
|
||||||
|
|
||||||
|
<!-- Segment 4: Referenzen -->
|
||||||
|
segment-3d
|
||||||
|
<section id="referenzen" class="segment segment-slideshow">
|
||||||
|
<div class="container">
|
||||||
|
<h2 class="section-header">Referenzen</h2>
|
||||||
|
</div>
|
||||||
|
<div class="slideshow-wrapper">
|
||||||
|
<div class="fullscreen-slideshow" id="referenzen-slideshow">
|
||||||
|
<div class="slideshow-slide active">
|
||||||
|
<img src="assets/3 Referenzen/Faltanlage.jpg" alt="Faltanlage">
|
||||||
|
</div>
|
||||||
|
<div class="slideshow-slide">
|
||||||
|
<img src="assets/3 Referenzen/Glashaus in Döhlau.jpg" alt="Glashaus in Döhlau">
|
||||||
|
</div>
|
||||||
|
<div class="slideshow-slide">
|
||||||
|
<img src="assets/3 Referenzen/Glashaus in Fassoldshof.jpg" alt="Glashaus in Fassoldshof">
|
||||||
|
</div>
|
||||||
|
<div class="slideshow-slide">
|
||||||
|
<img src="assets/3 Referenzen/Glashaus in Mainroth.jpg" alt="Glashaus in Mainroth">
|
||||||
|
</div>
|
||||||
|
<div class="slideshow-slide">
|
||||||
|
<img src="assets/3 Referenzen/Glashaus in Marktschorgast.jpg" alt="Glashaus in Marktschorgast">
|
||||||
|
</div>
|
||||||
|
<div class="slideshow-slide">
|
||||||
|
<img src="assets/3 Referenzen/Glashaus in Neustadt.jpg" alt="Glashaus in Neustadt">
|
||||||
|
</div>
|
||||||
|
<div class="slideshow-slide">
|
||||||
|
<img src="assets/3 Referenzen/Glashaus in Tröstau.JPG" alt="Glashaus in Tröstau">
|
||||||
|
</div>
|
||||||
|
<div class="slideshow-slide">
|
||||||
|
<img src="assets/3 Referenzen/Haustür in Schmeilsdorf.jpg" alt="Haustür in Schmeilsdorf">
|
||||||
|
</div>
|
||||||
|
<div class="slideshow-slide">
|
||||||
|
<img src="assets/3 Referenzen/Haustürüberdachung Neuenmarkt.jpg" alt="Haustürüberdachung Neuenmarkt">
|
||||||
|
</div>
|
||||||
|
<div class="slideshow-slide">
|
||||||
|
<img src="assets/3 Referenzen/Markise 1.jpg" alt="Markise">
|
||||||
|
</div>
|
||||||
|
<div class="slideshow-slide">
|
||||||
|
<img src="assets/3 Referenzen/Markise in Kulmbach.jpg" alt="Markise in Kulmbach">
|
||||||
|
</div>
|
||||||
|
<div class="slideshow-slide">
|
||||||
|
<img src="assets/3 Referenzen/Pergola Markise (2).jpg" alt="Pergola Markise">
|
||||||
|
</div>
|
||||||
|
<div class="slideshow-slide">
|
||||||
|
<img src="assets/3 Referenzen/Pergola Markise.jpg" alt="Pergola Markise">
|
||||||
|
</div>
|
||||||
|
<div class="slideshow-slide">
|
||||||
|
<img src="assets/3 Referenzen/Terassenüberdachung in Harsdorf.jpg" alt="Terassenüberdachung in Harsdorf">
|
||||||
|
</div>
|
||||||
|
<div class="slideshow-slide">
|
||||||
|
<img src="assets/3 Referenzen/Terassenüberdachungen in Heinersreuth.jpg" alt="Terassenüberdachungen in Heinersreuth">
|
||||||
|
</div>
|
||||||
|
<div class="slideshow-slide">
|
||||||
|
<img src="assets/3 Referenzen/Wintergarten in Eckersdorf.jpg" alt="Wintergarten in Eckersdorf">
|
||||||
|
</div>
|
||||||
|
<div class="slideshow-slide">
|
||||||
|
<img src="assets/3 Referenzen/Wintergarten in Kulmbach (1).jpg" alt="Wintergarten in Kulmbach">
|
||||||
|
</div>
|
||||||
|
<div class="slideshow-slide">
|
||||||
|
<img src="assets/3 Referenzen/Wintergarten in Kulmbach.jpg" alt="Wintergarten in Kulmbach">
|
||||||
|
</div>
|
||||||
|
<div class="slideshow-slide">
|
||||||
|
<img src="assets/3 Referenzen/Wintergarten in Neudrossenfeld.jpg" alt="Wintergarten in Neudrossenfeld">
|
||||||
|
</div>
|
||||||
|
<div class="slideshow-indicators">
|
||||||
|
<span class="indicator active" data-slide="0"></span>
|
||||||
|
<span class="indicator" data-slide="1"></span>
|
||||||
|
<span class="indicator" data-slide="2"></span>
|
||||||
|
<span class="indicator" data-slide="3"></span>
|
||||||
|
<span class="indicator" data-slide="4"></span>
|
||||||
|
<span class="indicator" data-slide="5"></span>
|
||||||
|
<span class="indicator" data-slide="6"></span>
|
||||||
|
<span class="indicator" data-slide="7"></span>
|
||||||
|
<span class="indicator" data-slide="8"></span>
|
||||||
|
<span class="indicator" data-slide="9"></span>
|
||||||
|
<span class="indicator" data-slide="10"></span>
|
||||||
|
<span class="indicator" data-slide="11"></span>
|
||||||
|
<span class="indicator" data-slide="12"></span>
|
||||||
|
<span class="indicator" data-slide="13"></span>
|
||||||
|
<span class="indicator" data-slide="14"></span>
|
||||||
|
<span class="indicator" data-slide="15"></span>
|
||||||
|
<span class="indicator" data-slide="16"></span>
|
||||||
|
<span class="indicator" data-slide="17"></span>
|
||||||
|
<span class="indicator" data-slide="18"></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<div class="segment-separator"></div>
|
||||||
|
|
||||||
|
<!-- Segment 5: Showroom (3D Viewer) -->
|
||||||
|
<section id="showroom" class="segment segment-3d">
|
||||||
|
<div class="container">
|
||||||
|
<h2 class="section-header">Showroom</h2>
|
||||||
|
</div>
|
||||||
|
<div class="slideshow-wrapper">
|
||||||
|
<div class="viewer-container" id="viewer-container">
|
||||||
|
<div id="cookie-notice" class="cookie-notice hidden">
|
||||||
|
<p>Um den 3D-Viewer zu nutzen, müssen Sie Cookies akzeptieren.</p>
|
||||||
|
<button id="reopen-cookie-banner" class="btn btn-primary">Cookie-Einstellungen öffnen</button>
|
||||||
|
</div>
|
||||||
|
<iframe id="viewer-iframe" src="" border="0"></iframe>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<div class="segment-separator"></div>
|
||||||
|
|
||||||
|
<!-- Segment 6: Partner -->
|
||||||
|
<section id="partner" class="segment segment-partner">
|
||||||
|
<div class="container">
|
||||||
|
<h2 class="section-header">Partner</h2>
|
||||||
|
<div class="partner-grid">
|
||||||
|
<div class="partner-item">
|
||||||
|
<a href="https://solarlux.com" target="_blank" rel="noopener">
|
||||||
|
<img src="assets/4 Partner/Partner Logos/Solarlux.jpg" alt="Solarlux">
|
||||||
|
<span>Solarlux</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="partner-item">
|
||||||
|
<a href="https://markilux.com" target="_blank" rel="noopener">
|
||||||
|
<img src="assets/4 Partner/Partner Logos/Markilux.png" alt="Markilux">
|
||||||
|
<span>Markilux</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="partner-item">
|
||||||
|
<a href="https://elsner-elektronik.de" target="_blank" rel="noopener">
|
||||||
|
<img src="assets/4 Partner/Partner Logos/Elsner.png" alt="Elsner">
|
||||||
|
<span>Elsner</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="partner-item">
|
||||||
|
<a href="https://albohn.de" target="_blank" rel="noopener">
|
||||||
|
<img src="assets/4 Partner/Partner Logos/albohn tebau links.jpg" alt="Albohn">
|
||||||
|
<span>Albohn</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="partner-item">
|
||||||
|
<a href="https://reflexa.de" target="_blank" rel="noopener">
|
||||||
|
<img src="assets/4 Partner/Partner Logos/Reflexa.jpg" alt="Reflexa">
|
||||||
|
<span>Reflexa</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="partner-item">
|
||||||
|
<a href="https://alulux.de" target="_blank" rel="noopener">
|
||||||
|
<img src="assets/4 Partner/Partner Logos/Alulux.png" alt="Alulux">
|
||||||
|
<span>Alulux</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="partner-item">
|
||||||
|
<a href="https://ts-alu.de" target="_blank" rel="noopener">
|
||||||
|
<img src="assets/4 Partner/Partner Logos/TS Alumium (1).jpg" alt="TS Alu">
|
||||||
|
<span>TS Alu</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="partner-item">
|
||||||
|
<a href="https://rmf-vordach.de" target="_blank" rel="noopener">
|
||||||
|
<img src="assets/4 Partner/Partner Logos/RMF.png" alt="RMF">
|
||||||
|
<span>RMF</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="partner-item">
|
||||||
|
<a href="https://rudolph-insektenschutz.de" target="_blank" rel="noopener">
|
||||||
|
<img src="assets/4 Partner/Partner Logos/Rudolph.jpg" alt="Rudolph">
|
||||||
|
<span>Rudolph</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="partner-item">
|
||||||
|
<a href="https://therma.de" target="_blank" rel="noopener">
|
||||||
|
<img src="assets/4 Partner/Partner Logos/Therma.jpg" alt="Therma">
|
||||||
|
<span>Therma</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="partner-item">
|
||||||
|
<a href="https://schoeninger-glas.de" target="_blank" rel="noopener">
|
||||||
|
<img src="assets/4 Partner/Partner Logos/Schoeninger.png" alt="Schöninger Glas">
|
||||||
|
<span>Schöninger Glas</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="partner-item">
|
||||||
|
<div class="partner-no-link">
|
||||||
|
<img src="assets/4 Partner/Partner Logos/Solan.jpg" alt="Solan">
|
||||||
|
<span>Solan</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<div class="segment-separator"></div>
|
||||||
|
|
||||||
|
<!-- Segment 7: Aktuelles -->
|
||||||
|
<section id="aktuelles" class="segment segment-news">
|
||||||
|
<div class="container">
|
||||||
|
<h2 class="section-header">Aktuelles</h2>
|
||||||
|
<div class="news-content">
|
||||||
|
<article class="news-item">
|
||||||
|
<h3>Tag der offenen Tür</h3>
|
||||||
|
<p class="news-date">15. März 2024</p>
|
||||||
|
<p>Wir laden Sie herzlich ein zu unserem Tag der offenen Tür am Samstag, den 15. März 2024 von 10:00 bis 16:00 Uhr. Lassen Sie sich von unseren neuesten Projekten inspirieren und nutzen Sie die Gelegenheit für ein persönliches Gespräch mit unserem Team.</p>
|
||||||
|
<p>Erleben Sie hautnah die Qualität unserer Wintergärten und lassen Sie sich unverbindlich beraten. Für das leibliche Wohl ist selbstverständlich gesorgt.</p>
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<div class="segment-separator"></div>
|
||||||
|
|
||||||
|
<!-- Segment 8: Kontakt -->
|
||||||
|
<section id="kontakt" class="segment segment-contact">
|
||||||
|
<div class="container">
|
||||||
|
<h2 class="section-header">Kontakt</h2>
|
||||||
|
<div class="contact-wrapper">
|
||||||
|
<div class="contact-info">
|
||||||
|
<h3>Hofmann Wintergartentechnik</h3>
|
||||||
|
<h3>Inhaber: Harry Hofmann</h3>
|
||||||
|
<address>
|
||||||
|
<p>Maingasse 10</p>
|
||||||
|
<p>95326 Kulmbach - Melkendorf</p>
|
||||||
|
<p>Tel: <a href="tel:00499221701855">+49 (0)9221 / 70 18 55</a></p>
|
||||||
|
<p>Fax: +49 (0)9221 / 70 18 57</p>
|
||||||
|
<p>E-Mail: <a href="mailto:info@wintergarten-hofmann.de">info@wintergarten-hofmann.de</a></p>
|
||||||
|
</address>
|
||||||
|
</div>
|
||||||
|
<div class="contact-form-wrapper">
|
||||||
|
<h3>Schreiben Sie uns</h3>
|
||||||
|
<form id="contact-form" class="contact-form">
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="name">Name *</label>
|
||||||
|
<input type="text" id="name" name="name" required>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="email">E-Mail *</label>
|
||||||
|
<input type="email" id="email" name="email" required>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="phone">Telefon</label>
|
||||||
|
<input type="tel" id="phone" name="phone">
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="subject">Betreff *</label>
|
||||||
|
<input type="text" id="subject" name="subject" required>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="message">Nachricht *</label>
|
||||||
|
<textarea id="message" name="message" rows="5" required></textarea>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label class="checkbox-label">
|
||||||
|
<input type="checkbox" name="privacy" required>
|
||||||
|
<span>Ich habe die <a href="datenschutz.html">Datenschutzerklärung</a> gelesen und stimme der Verarbeitung meiner Daten zu. *</span>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<button type="submit" class="btn btn-primary">Nachricht senden</button>
|
||||||
|
</form>
|
||||||
|
<div id="form-success" class="form-message success hidden">
|
||||||
|
<p>Vielen Dank für Ihre Nachricht! Wir werden uns umgehend bei Ihnen melden.</p>
|
||||||
|
</div>
|
||||||
|
<div id="form-error" class="form-message error hidden">
|
||||||
|
<p>Es ist ein Fehler aufgetreten. Bitte versuchen Sie es später erneut.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Footer integrated into Kontakt segment -->
|
||||||
|
<div class="footer-content">
|
||||||
|
<div class="footer-nav">
|
||||||
|
<a href="#ueber-uns">Über uns</a>
|
||||||
|
<a href="#leistungen">Leistungen</a>
|
||||||
|
<a href="#referenzen">Referenzen</a>
|
||||||
|
<a href="#showroom">Showroom</a>
|
||||||
|
<a href="#partner">Partner</a>
|
||||||
|
<a href="#aktuelles">Aktuelles</a>
|
||||||
|
<a href="#kontakt">Kontakt</a>
|
||||||
|
<a href="datenschutz.html">Datenschutz</a>
|
||||||
|
<a href="impressum.html">Impressum</a>
|
||||||
|
</div>
|
||||||
|
<div class="footer-bottom">
|
||||||
|
<p>© 2026 Hofmann Wintergartentechnik. Alle Rechte vorbehalten.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<script src="script.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -0,0 +1,410 @@
|
|||||||
|
// Cookie Banner Functionality
|
||||||
|
const cookieBanner = document.getElementById('cookie-banner');
|
||||||
|
const acceptCookiesBtn = document.getElementById('accept-cookies');
|
||||||
|
const declineCookiesBtn = document.getElementById('decline-cookies');
|
||||||
|
const cookieNotice = document.getElementById('cookie-notice');
|
||||||
|
const viewerIframe = document.getElementById('viewer-iframe');
|
||||||
|
const reopenCookieBannerBtn = document.getElementById('reopen-cookie-banner');
|
||||||
|
|
||||||
|
const COOKIE_CONSENT_KEY = 'cookieConsent';
|
||||||
|
const VIEWER_URL = 'https://mx-static.markilux.com/360/16981/16981.html';
|
||||||
|
|
||||||
|
// Check cookie consent on page load
|
||||||
|
function checkCookieConsent() {
|
||||||
|
const consent = localStorage.getItem(COOKIE_CONSENT_KEY);
|
||||||
|
|
||||||
|
if (consent === null) {
|
||||||
|
// No consent given yet, show banner
|
||||||
|
cookieBanner.classList.remove('hidden');
|
||||||
|
showCookieNotice();
|
||||||
|
} else if (consent === 'accepted') {
|
||||||
|
// Cookies accepted, load 3D viewer
|
||||||
|
load3DViewer();
|
||||||
|
} else {
|
||||||
|
// Cookies declined, show notice
|
||||||
|
showCookieNotice();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Accept cookies
|
||||||
|
if (acceptCookiesBtn) {
|
||||||
|
acceptCookiesBtn.addEventListener('click', () => {
|
||||||
|
localStorage.setItem(COOKIE_CONSENT_KEY, 'accepted');
|
||||||
|
cookieBanner.classList.add('hidden');
|
||||||
|
load3DViewer();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Decline cookies
|
||||||
|
if (declineCookiesBtn) {
|
||||||
|
declineCookiesBtn.addEventListener('click', () => {
|
||||||
|
localStorage.setItem(COOKIE_CONSENT_KEY, 'declined');
|
||||||
|
cookieBanner.classList.add('hidden');
|
||||||
|
showCookieNotice();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Reopen cookie banner
|
||||||
|
if (reopenCookieBannerBtn) {
|
||||||
|
reopenCookieBannerBtn.addEventListener('click', () => {
|
||||||
|
cookieBanner.classList.remove('hidden');
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Load 3D viewer
|
||||||
|
function load3DViewer() {
|
||||||
|
if (cookieNotice) cookieNotice.classList.add('hidden');
|
||||||
|
if (viewerIframe) viewerIframe.src = VIEWER_URL;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Show cookie notice instead of viewer
|
||||||
|
function showCookieNotice() {
|
||||||
|
if (cookieNotice) cookieNotice.classList.remove('hidden');
|
||||||
|
if (viewerIframe) viewerIframe.src = '';
|
||||||
|
}
|
||||||
|
|
||||||
|
// Mobile Menu Toggle
|
||||||
|
const mobileMenuToggle = document.getElementById('mobile-menu-toggle');
|
||||||
|
const mobileMenu = document.getElementById('mobile-menu');
|
||||||
|
|
||||||
|
if (mobileMenuToggle && mobileMenu) {
|
||||||
|
mobileMenuToggle.addEventListener('click', () => {
|
||||||
|
mobileMenu.classList.toggle('active');
|
||||||
|
});
|
||||||
|
|
||||||
|
// Close mobile menu when clicking on a link
|
||||||
|
mobileMenu.querySelectorAll('a').forEach(link => {
|
||||||
|
link.addEventListener('click', () => {
|
||||||
|
mobileMenu.classList.remove('active');
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Hero Carousel
|
||||||
|
const heroCarousel = document.getElementById('hero-carousel');
|
||||||
|
if (heroCarousel) {
|
||||||
|
const heroSlides = heroCarousel.querySelectorAll('.carousel-slide');
|
||||||
|
const heroIndicators = heroCarousel.querySelectorAll('.indicator');
|
||||||
|
let heroCurrentSlide = 0;
|
||||||
|
const heroSlideCount = heroSlides.length;
|
||||||
|
|
||||||
|
function showHeroSlide(index) {
|
||||||
|
heroSlides.forEach((slide, i) => {
|
||||||
|
slide.classList.toggle('active', i === index);
|
||||||
|
});
|
||||||
|
heroIndicators.forEach((indicator, i) => {
|
||||||
|
indicator.classList.toggle('active', i === index);
|
||||||
|
});
|
||||||
|
heroCurrentSlide = index;
|
||||||
|
}
|
||||||
|
|
||||||
|
function nextHeroSlide() {
|
||||||
|
const next = (heroCurrentSlide + 1) % heroSlideCount;
|
||||||
|
showHeroSlide(next);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Auto-rotate hero carousel
|
||||||
|
setInterval(nextHeroSlide, 5000);
|
||||||
|
|
||||||
|
// Click on indicators
|
||||||
|
heroIndicators.forEach((indicator, index) => {
|
||||||
|
indicator.addEventListener('click', () => {
|
||||||
|
showHeroSlide(index);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Leistungen Carousel
|
||||||
|
const leistungenTrack = document.getElementById('leistungen-track');
|
||||||
|
const leistungenPrevBtn = document.getElementById('leistungen-prev');
|
||||||
|
const leistungenNextBtn = document.getElementById('leistungen-next');
|
||||||
|
const leistungenIndicators = document.querySelectorAll('#leistungen-indicators .indicator');
|
||||||
|
|
||||||
|
if (leistungenTrack && leistungenPrevBtn && leistungenNextBtn) {
|
||||||
|
const leistungenSlides = leistungenTrack.querySelectorAll('.leistung-slide');
|
||||||
|
let leistungenCurrentSlide = 0;
|
||||||
|
const leistungenSlideCount = leistungenSlides.length;
|
||||||
|
|
||||||
|
function showLeistungenSlide(index) {
|
||||||
|
leistungenTrack.style.transform = `translateX(-${index * 100}%)`;
|
||||||
|
leistungenSlides.forEach((slide, i) => {
|
||||||
|
slide.classList.toggle('active', i === index);
|
||||||
|
});
|
||||||
|
if (leistungenIndicators.length > 0) {
|
||||||
|
leistungenIndicators.forEach((indicator, i) => {
|
||||||
|
indicator.classList.toggle('active', i === index);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
leistungenCurrentSlide = index;
|
||||||
|
}
|
||||||
|
|
||||||
|
leistungenPrevBtn.addEventListener('click', () => {
|
||||||
|
const prev = (leistungenCurrentSlide - 1 + leistungenSlideCount) % leistungenSlideCount;
|
||||||
|
showLeistungenSlide(prev);
|
||||||
|
});
|
||||||
|
|
||||||
|
leistungenNextBtn.addEventListener('click', () => {
|
||||||
|
const next = (leistungenCurrentSlide + 1) % leistungenSlideCount;
|
||||||
|
showLeistungenSlide(next);
|
||||||
|
});
|
||||||
|
|
||||||
|
// Click on indicators
|
||||||
|
leistungenIndicators.forEach((indicator, index) => {
|
||||||
|
indicator.addEventListener('click', () => {
|
||||||
|
showLeistungenSlide(index);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Referenzen Slideshow
|
||||||
|
const referenzenSlideshow = document.getElementById('referenzen-slideshow');
|
||||||
|
if (referenzenSlideshow) {
|
||||||
|
const referenzenSlides = referenzenSlideshow.querySelectorAll('.slideshow-slide');
|
||||||
|
const referenzenIndicators = referenzenSlideshow.querySelectorAll('.indicator');
|
||||||
|
let referenzenCurrentSlide = 0;
|
||||||
|
const referenzenSlideCount = referenzenSlides.length;
|
||||||
|
|
||||||
|
function showReferenzenSlide(index) {
|
||||||
|
referenzenSlides.forEach((slide, i) => {
|
||||||
|
slide.classList.toggle('active', i === index);
|
||||||
|
});
|
||||||
|
referenzenIndicators.forEach((indicator, i) => {
|
||||||
|
indicator.classList.toggle('active', i === index);
|
||||||
|
});
|
||||||
|
referenzenCurrentSlide = index;
|
||||||
|
}
|
||||||
|
|
||||||
|
function nextReferenzenSlide() {
|
||||||
|
const next = (referenzenCurrentSlide + 1) % referenzenSlideCount;
|
||||||
|
showReferenzenSlide(next);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Auto-rotate referenzen slideshow
|
||||||
|
setInterval(nextReferenzenSlide, 6000);
|
||||||
|
|
||||||
|
// Click on indicators
|
||||||
|
referenzenIndicators.forEach((indicator, index) => {
|
||||||
|
indicator.addEventListener('click', () => {
|
||||||
|
showReferenzenSlide(index);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Contact Form
|
||||||
|
const contactForm = document.getElementById('contact-form');
|
||||||
|
const formSuccess = document.getElementById('form-success');
|
||||||
|
const formError = document.getElementById('form-error');
|
||||||
|
|
||||||
|
if (contactForm) {
|
||||||
|
contactForm.addEventListener('submit', async (e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
const formData = new FormData(contactForm);
|
||||||
|
const data = {
|
||||||
|
name: formData.get('name'),
|
||||||
|
email: formData.get('email'),
|
||||||
|
phone: formData.get('phone'),
|
||||||
|
subject: formData.get('subject'),
|
||||||
|
message: formData.get('message'),
|
||||||
|
privacy: formData.get('privacy')
|
||||||
|
};
|
||||||
|
|
||||||
|
// Basic validation
|
||||||
|
if (!data.name || !data.email || !data.subject || !data.message || !data.privacy) {
|
||||||
|
alert('Bitte füllen Sie alle Pflichtfelder aus.');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Email validation
|
||||||
|
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
||||||
|
if (!emailRegex.test(data.email)) {
|
||||||
|
alert('Bitte geben Sie eine gültige E-Mail-Adresse ein.');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
// Simulate form submission (replace with actual endpoint)
|
||||||
|
// In a real implementation, you would send this to a server endpoint
|
||||||
|
// that handles the email sending (e.g., using nodemailer, SendGrid, etc.)
|
||||||
|
|
||||||
|
// For demonstration, we'll simulate a successful submission
|
||||||
|
await simulateFormSubmission(data);
|
||||||
|
|
||||||
|
// Show success message
|
||||||
|
contactForm.classList.add('hidden');
|
||||||
|
if (formSuccess) formSuccess.classList.remove('hidden');
|
||||||
|
if (formError) formError.classList.add('hidden');
|
||||||
|
|
||||||
|
// Reset form
|
||||||
|
contactForm.reset();
|
||||||
|
|
||||||
|
// Hide success message after 5 seconds and show form again
|
||||||
|
setTimeout(() => {
|
||||||
|
if (formSuccess) formSuccess.classList.add('hidden');
|
||||||
|
contactForm.classList.remove('hidden');
|
||||||
|
}, 5000);
|
||||||
|
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Form submission error:', error);
|
||||||
|
if (formError) formError.classList.remove('hidden');
|
||||||
|
if (formSuccess) formSuccess.classList.add('hidden');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Simulate form submission (replace with actual API call)
|
||||||
|
function simulateFormSubmission(data) {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
// Simulate network delay
|
||||||
|
setTimeout(() => {
|
||||||
|
console.log('Form data submitted:', data);
|
||||||
|
// Simulate 95% success rate for demo
|
||||||
|
if (Math.random() > 0.05) {
|
||||||
|
resolve({ success: true });
|
||||||
|
} else {
|
||||||
|
reject(new Error('Network error'));
|
||||||
|
}
|
||||||
|
}, 1000);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Smooth scroll for navigation links
|
||||||
|
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
||||||
|
anchor.addEventListener('click', function (e) {
|
||||||
|
e.preventDefault();
|
||||||
|
const target = document.querySelector(this.getAttribute('href'));
|
||||||
|
if (target) {
|
||||||
|
const headerOffset = 70;
|
||||||
|
const elementPosition = target.getBoundingClientRect().top;
|
||||||
|
const offsetPosition = elementPosition + window.pageYOffset - headerOffset;
|
||||||
|
|
||||||
|
window.scrollTo({
|
||||||
|
top: offsetPosition,
|
||||||
|
behavior: 'smooth'
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// Navbar scroll effect
|
||||||
|
let lastScroll = 0;
|
||||||
|
const navbar = document.getElementById('navbar');
|
||||||
|
|
||||||
|
window.addEventListener('scroll', () => {
|
||||||
|
const currentScroll = window.pageYOffset;
|
||||||
|
|
||||||
|
if (currentScroll > 100) {
|
||||||
|
navbar.style.boxShadow = '0 4px 20px rgba(0, 0, 0, 0.1)';
|
||||||
|
} else {
|
||||||
|
navbar.style.boxShadow = '0 2px 10px rgba(0, 0, 0, 0.1)';
|
||||||
|
}
|
||||||
|
|
||||||
|
lastScroll = currentScroll;
|
||||||
|
});
|
||||||
|
|
||||||
|
// Initialize on page load
|
||||||
|
document.addEventListener('DOMContentLoaded', () => {
|
||||||
|
checkCookieConsent();
|
||||||
|
initNavHighlight();
|
||||||
|
});
|
||||||
|
|
||||||
|
// Navigation highlight bubble functionality
|
||||||
|
function initNavHighlight() {
|
||||||
|
const highlight = document.getElementById('nav-highlight');
|
||||||
|
const navLinks = document.querySelectorAll('.nav-links li');
|
||||||
|
const sections = document.querySelectorAll('section[id]');
|
||||||
|
|
||||||
|
if (!highlight || navLinks.length === 0) return;
|
||||||
|
|
||||||
|
function updateHighlight(element) {
|
||||||
|
if (!element) {
|
||||||
|
highlight.classList.remove('active');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const link = element.querySelector('a');
|
||||||
|
if (!link) return;
|
||||||
|
|
||||||
|
const linkRect = link.getBoundingClientRect();
|
||||||
|
const navContainerRect = document.querySelector('.nav-container').getBoundingClientRect();
|
||||||
|
|
||||||
|
highlight.style.width = `${linkRect.width}px`;
|
||||||
|
highlight.style.height = `${linkRect.height}px`;
|
||||||
|
highlight.style.left = `${linkRect.left - navContainerRect.left}px`;
|
||||||
|
highlight.style.top = `${linkRect.top - navContainerRect.top}px`;
|
||||||
|
highlight.classList.add('active');
|
||||||
|
}
|
||||||
|
|
||||||
|
function getCurrentSection() {
|
||||||
|
const scrollPos = window.scrollY + window.innerHeight / 3;
|
||||||
|
|
||||||
|
for (let i = sections.length - 1; i >= 0; i--) {
|
||||||
|
const section = sections[i];
|
||||||
|
const sectionTop = section.offsetTop;
|
||||||
|
const sectionHeight = section.offsetHeight;
|
||||||
|
|
||||||
|
if (scrollPos >= sectionTop && scrollPos < sectionTop + sectionHeight) {
|
||||||
|
return section.id;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return sections[0]?.id;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Check if we're in the home section (at the top of the page)
|
||||||
|
function isInHomeSection() {
|
||||||
|
return window.scrollY < window.innerHeight / 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
function updateActiveNav() {
|
||||||
|
// Hide bubble when in home section
|
||||||
|
if (isInHomeSection()) {
|
||||||
|
highlight.classList.remove('active');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const currentSection = getCurrentSection();
|
||||||
|
|
||||||
|
navLinks.forEach(li => {
|
||||||
|
const section = li.getAttribute('data-section');
|
||||||
|
if (section === currentSection) {
|
||||||
|
updateHighlight(li);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Update on scroll with snap-friendly timing
|
||||||
|
let ticking = false;
|
||||||
|
window.addEventListener('scroll', () => {
|
||||||
|
if (!ticking) {
|
||||||
|
window.requestAnimationFrame(() => {
|
||||||
|
updateActiveNav();
|
||||||
|
ticking = false;
|
||||||
|
});
|
||||||
|
ticking = true;
|
||||||
|
}
|
||||||
|
}, { passive: true });
|
||||||
|
|
||||||
|
// Initial update
|
||||||
|
updateActiveNav();
|
||||||
|
|
||||||
|
// Update on hover
|
||||||
|
navLinks.forEach(li => {
|
||||||
|
li.addEventListener('mouseenter', () => {
|
||||||
|
updateHighlight(li);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// Reset to current section on mouse leave from nav
|
||||||
|
document.querySelector('.nav-links').addEventListener('mouseleave', () => {
|
||||||
|
updateActiveNav();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Handle visibility change to pause/resume carousels
|
||||||
|
document.addEventListener('visibilitychange', () => {
|
||||||
|
if (document.hidden) {
|
||||||
|
// Page is hidden, could pause animations here if needed
|
||||||
|
} else {
|
||||||
|
// Page is visible again
|
||||||
|
}
|
||||||
|
});
|
||||||
+1073
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,5 @@
|
|||||||
|
remove the border around the 3d viewer in Showroom and the slideshow in Referenzen
|
||||||
|
Make the site start scrolled all the way up. Currently it's slightly scrolled down and snaps there, due to the scroll snap. make it start at the top.
|
||||||
|
Move the logo in the menu bar a bit to the left.
|
||||||
|
In the Menu Bar, highlight the currently shown section. For that, use a bubble that moves left and right to surround the according word in the menu bar and snaps just like the scrolling
|
||||||
|
Fix the footer. Currently it's a bit broken. It should be displayed in the bottom of the Kontakt segment
|
||||||
Reference in New Issue
Block a user