From 3c0deac32075993efe6bb2784492a9b05ff8f6ef Mon Sep 17 00:00:00 2001 From: Mila Hofmann Date: Fri, 30 Jan 2026 09:21:13 +0100 Subject: [PATCH] Initial commit --- agent.md | 14 + datenschutz.html | 119 +++++ impressum.html | 125 ++++++ index.html | 508 ++++++++++++++++++++++ script.js | 410 ++++++++++++++++++ styles.css | 1073 ++++++++++++++++++++++++++++++++++++++++++++++ tasks.md | 5 + 7 files changed, 2254 insertions(+) create mode 100644 agent.md create mode 100644 datenschutz.html create mode 100644 impressum.html create mode 100644 index.html create mode 100644 script.js create mode 100644 styles.css create mode 100644 tasks.md diff --git a/agent.md b/agent.md new file mode 100644 index 0000000..e3c1456 --- /dev/null +++ b/agent.md @@ -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: + +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 \ No newline at end of file diff --git a/datenschutz.html b/datenschutz.html new file mode 100644 index 0000000..a0afe99 --- /dev/null +++ b/datenschutz.html @@ -0,0 +1,119 @@ + + + + + + Datenschutz - Hofmann Wintergarten + + + + + + +
+
+

Datenschutzerklärung

+ +

1. Datenschutz auf einen Blick

+

Allgemeine Hinweise

+

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.

+ +

Datenerfassung auf dieser Website

+

Wer ist verantwortlich für die Datenerfassung auf dieser Website?

+

Die Datenverarbeitung auf dieser Website erfolgt durch den Websitebetreiber. Dessen Kontaktdaten können Sie dem Impressum dieser Website entnehmen.

+ +

Wie erfassen wir Ihre Daten?

+

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.

+

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).

+ +

2. Allgemeine Hinweise und Pflichtinformationen

+

Datenschutz

+

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.

+ +

Hinweis zur verantwortlichen Stelle

+

Die verantwortliche Stelle für die Datenverarbeitung auf dieser Website ist:

+

+ Hofmann Wintergarten GmbH
+ Musterstraße 123
+ 12345 Musterstadt
+ Telefon: +49 123 456789-0
+ E-Mail: info@hofmann-wintergarten.de +

+ +

Speicherdauer

+

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.

+ +

3. Datenerfassung auf dieser Website

+

Cookies

+

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.

+

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.

+ +

Kontaktformular

+

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.

+ +

4. Ihre Rechte

+

Sie haben jederzeit das Recht:

+
    +
  • Auskunft über Ihre bei uns gespeicherten Daten zu erhalten
    • +
  • Die Berichtigung unrichtiger Daten zu verlangen
    • +
  • Die Löschung Ihrer Daten zu verlangen
    • +
  • Die Einschränkung der Datenverarbeitung zu verlangen
    • +
  • Der Datenverarbeitung zu widersprechen
    • +
  • Ihre Einwilligung zu widerrufen
    • +
+ +

5. Externe Inhalte

+

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.

+ + ← Zurück zur Startseite +
+
+ + + + \ No newline at end of file diff --git a/impressum.html b/impressum.html new file mode 100644 index 0000000..d17d515 --- /dev/null +++ b/impressum.html @@ -0,0 +1,125 @@ + + + + + + Impressum - Hofmann Wintergarten + + + + + + +
+
+

Impressum

+ +

Angaben gemäß § 5 TMG

+

+ Hofmann Wintergarten GmbH
+ Musterstraße 123
+ 12345 Musterstadt
+ Deutschland +

+ +

+ Vertreten durch:
+ Geschäftsführer: Max Mustermann +

+ +

Kontakt

+

+ Telefon: +49 123 456789-0
+ Telefax: +49 123 456789-10
+ E-Mail: info@hofmann-wintergarten.de +

+ +

Registereintrag

+

+ Eintragung im Handelsregister.
+ Registergericht: Amtsgericht Musterstadt
+ Registernummer: HRB 12345 +

+ +

Umsatzsteuer-ID

+

+ Umsatzsteuer-Identifikationsnummer gemäß § 27 a Umsatzsteuergesetz:
+ DE 123 456 789 +

+ +

Verantwortlich für den Inhalt nach § 55 Abs. 2 RStV

+

+ Max Mustermann
+ Musterstraße 123
+ 12345 Musterstadt +

+ +

Streitschlichtung

+

Die Europäische Kommission stellt eine Plattform zur Online-Streitbeilegung (OS) bereit: https://ec.europa.eu/consumers/odr.

+

Unsere E-Mail-Adresse finden Sie oben im Impressum.

+

Wir sind nicht bereit oder verpflichtet, an Streitbeilegungsverfahren vor einer Verbraucherschlichtungsstelle teilzunehmen.

+ +

Haftung für Inhalte

+

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.

+

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.

+ +

Haftung für Links

+

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.

+

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.

+ +

Urheberrecht

+

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.

+

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.

+ + ← Zurück zur Startseite +
+
+ + + + \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..438b95c --- /dev/null +++ b/index.html @@ -0,0 +1,508 @@ + + + + + + Hofmann Wintergarten + + + + + + + + + + +
+ +
+ + +
+ +
+ +
+ + +
+
+

Über uns

+
+

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.

+

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.

+

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.

+

Wir freuen uns darauf, auch Ihr Projekt erfolgreich umzusetzen!

+
+
+
+ +
+ + +
+
+

Leistungen

+ +
+ + +
+
+ +
+
+ Markisen +
+
+ +

Markisen

+

Flexible Beschattung für Terrasse und Balkon. Unsere Markisen bieten optimalen Sonnenschutz bei Bedarf.

+
+
+ +
+
+ Balkonverglasungen +
+
+

Balkonverglasungen

+

Genießen Sie Ihren Balkon das ganze Jahr über. Unsere Balkonverglasungen schützen vor Wind, Wetter und Lärm.

+
+
+ +
+
+ Faltanlagen +
+
+

Faltanlagen

+

Flexible Glaslösungen für Terrasse und Balkon. Unsere Faltanlagen verbinden Indoor-Komfort mit Outdoor-Feeling.

+
+
+ +
+
+ Haustüren +
+
+

Haustüren

+

Der erste Eindruck zählt. Unsere hochwertigen Haustüren kombinieren Sicherheit, Wärmedämmung und ansprechendes Design.

+
+
+ +
+
+ Haustürüberdachungen +
+
+

Haustürüberdachungen

+

Schutz vor Regen und Schnee beim Eingang. Unsere Überdachungen bieten praktischen Wetterschutz mit ästhetischem Wert.

+
+
+ +
+
+ Insektenschutz +
+
+

Insektenschutz

+

Genießen Sie frische Luft ohne ungebetene Gäste. Unsere Insektenschutzsysteme sind unauffällig und effektiv.

+
+
+ +
+
+ Terassenüberdachungen +
+
+

Terassenüberdachungen

+

Ihre Terrasse als Wohnraum im Freien. Unsere Überdachungen schaffen geschützte Außenbereiche für jedes Wetter.

+
+
+ +
+
+ Wintergärten +
+
+

Wintergärten

+

Maßgeschneiderte Wintergärten für Ihr Zuhause. Lichtdurchflutete Räume zum Wohlfühlen – das ganze Jahr über.

+
+
+
+
+ + +
+ +
+ + + + + + + + +
+
+
+ +
+ + + segment-3d +
+
+

Referenzen

+
+
+
+
+ Faltanlage +
+
+ Glashaus in Döhlau +
+
+ Glashaus in Fassoldshof +
+
+ Glashaus in Mainroth +
+
+ Glashaus in Marktschorgast +
+
+ Glashaus in Neustadt +
+
+ Glashaus in Tröstau +
+
+ Haustür in Schmeilsdorf +
+
+ Haustürüberdachung Neuenmarkt +
+
+ Markise +
+
+ Markise in Kulmbach +
+
+ Pergola Markise +
+
+ Pergola Markise +
+
+ Terassenüberdachung in Harsdorf +
+
+ Terassenüberdachungen in Heinersreuth +
+
+ Wintergarten in Eckersdorf +
+
+ Wintergarten in Kulmbach +
+
+ Wintergarten in Kulmbach +
+
+ Wintergarten in Neudrossenfeld +
+
+ + + + + + + + + + + + + + + + + + + +
+
+
+
+ +
+ + +
+
+

Showroom

+
+
+
+ + +
+
+
+ +
+ + +
+
+

Partner

+
+
+ + Solarlux + Solarlux + +
+
+ + Markilux + Markilux + +
+
+ + Elsner + Elsner + +
+
+ + Albohn + Albohn + +
+
+ + Reflexa + Reflexa + +
+
+ + Alulux + Alulux + +
+
+ + TS Alu + TS Alu + +
+
+ + RMF + RMF + +
+
+ + Rudolph + Rudolph + +
+
+ + Therma + Therma + +
+
+ + Schöninger Glas + Schöninger Glas + +
+
+
+ Solan + Solan +
+
+
+
+
+ +
+ + +
+
+

Aktuelles

+
+
+

Tag der offenen Tür

+

15. März 2024

+

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.

+

Erleben Sie hautnah die Qualität unserer Wintergärten und lassen Sie sich unverbindlich beraten. Für das leibliche Wohl ist selbstverständlich gesorgt.

+
+
+
+
+ +
+ + +
+
+

Kontakt

+
+
+

Hofmann Wintergartentechnik

+

Inhaber: Harry Hofmann

+
+

Maingasse 10

+

95326 Kulmbach - Melkendorf

+

Tel: +49 (0)9221 / 70 18 55

+

Fax: +49 (0)9221 / 70 18 57

+

E-Mail: info@wintergarten-hofmann.de

+
+
+
+

Schreiben Sie uns

+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ +
+ +
+ + +
+
+ +
+
+ Über uns + Leistungen + Referenzen + Showroom + Partner + Aktuelles + Kontakt + Datenschutz + Impressum +
+
+

© 2026 Hofmann Wintergartentechnik. Alle Rechte vorbehalten.

+
+
+
+
+ + + + \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..959b38b --- /dev/null +++ b/script.js @@ -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 + } +}); \ No newline at end of file diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..b016e1d --- /dev/null +++ b/styles.css @@ -0,0 +1,1073 @@ +/* Reset and Base Styles */ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +html { + scroll-snap-type: y mandatory; + scroll-behavior: smooth; +} + +:root { + --primary-color: #003366; + --primary-dark: #002244; + --secondary-color: #f5f5f5; + --text-color: #333; + --text-light: #666; + --white: #fff; + --black: #000; + --border-color: #ddd; + --shadow: 0 2px 10px rgba(0, 0, 0, 0.1); + --shadow-hover: 0 4px 20px rgba(0, 0, 0, 0.15); + --transition: all 0.3s ease; + --navbar-height: 80px; + --bg-color: #f0f0f0; +} + +html { + scroll-behavior: smooth; +} + +body { + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; + line-height: 1.6; + color: var(--text-color); + background-color: var(--bg-color); +} + +a { + color: var(--primary-color); + text-decoration: none; + transition: var(--transition); +} + +a:hover { + color: var(--primary-dark); +} + +img { + max-width: 100%; + height: auto; + display: block; +} + +/* Container */ +.container { + max-width: 1400px; + margin: 0 auto; + padding: 0 20px; + width: 100%; +} + +/* Buttons */ +.btn { + display: inline-block; + padding: 12px 24px; + border: none; + border-radius: 4px; + cursor: pointer; + font-size: 16px; + font-weight: 500; + transition: var(--transition); + text-align: center; +} + +.btn-primary { + background-color: var(--primary-color); + color: var(--white); +} + +.btn-primary:hover { + background-color: var(--primary-dark); + color: var(--white); +} + +.btn-secondary { + background-color: transparent; + color: var(--text-color); + border: 1px solid var(--border-color); +} + +.btn-secondary:hover { + background-color: var(--secondary-color); +} + +/* Segment Separator */ +.segment-separator { + height: 4px; + background-color: var(--primary-color); + width: 100%; +} + +/* Cookie Banner */ +.cookie-banner { + position: fixed; + bottom: 0; + left: 0; + right: 0; + background-color: var(--white); + box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1); + z-index: 10000; + padding: 20px; +} + +.cookie-banner.hidden { + display: none; +} + +.cookie-content { + max-width: 1200px; + margin: 0 auto; + display: flex; + flex-wrap: wrap; + align-items: center; + justify-content: space-between; + gap: 20px; +} + +.cookie-content p { + flex: 1; + min-width: 300px; + margin: 0; +} + +.cookie-buttons { + display: flex; + gap: 10px; +} + +/* Navigation - Transparent with grey font and black outline */ +.navbar { + position: fixed; + top: 0; + left: 0; + right: 0; + background-color: rgba(255, 255, 255, 0.85); + backdrop-filter: blur(10px); + z-index: 1000; + transition: var(--transition); + height: var(--navbar-height); + border-bottom: 1px solid rgba(0, 51, 102, 0.2); +} + +.nav-container { + max-width: 1400px; + margin: 0 auto; + padding: 0 40px; + display: flex; + justify-content: space-between; + align-items: center; + height: 100%; + position: relative; +} + +.nav-container { + padding: 0 20px 0 0; +} + +.nav-container .logo-link { + margin-left: -100px; +} + +.logo-link { + display: flex; + align-items: center; + flex-shrink: 0; +} + +.logo-img { + height: 65px; + width: auto; + object-fit: contain; +} + +.nav-links { + display: flex; + list-style: none; + gap: 60px; + margin: 0; + padding: 0; + flex: 1; + justify-content: flex-end; + position: relative; +} + +.nav-links li { + position: relative; +} + +.nav-links a { + color: #ff6600; + font-weight: 400; + font-size: 16px; + position: relative; + transition: var(--transition); + padding: 8px 16px; + display: block; + z-index: 1; +} + +.nav-links a:hover { + color: #ff8800; +} + +/* Sliding highlight bubble */ +.nav-highlight { + position: absolute; + background-color: rgba(200, 200, 200, 0.3); + border-radius: 20px; + pointer-events: none; + transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); + z-index: 0; + opacity: 0; +} + +.nav-highlight.active { + opacity: 1; +} + +/* Mobile Menu Toggle */ +.mobile-menu-toggle { + display: none; + flex-direction: column; + gap: 5px; + background: none; + border: none; + cursor: pointer; + padding: 5px; +} + +.mobile-menu-toggle span { + display: block; + width: 25px; + height: 3px; + background-color: var(--text-color); + transition: var(--transition); +} + +.mobile-menu { + display: none; + position: fixed; + top: var(--navbar-height); + left: 0; + right: 0; + background-color: rgba(255, 255, 255, 0.95); + backdrop-filter: blur(10px); + z-index: 999; + padding: 20px; +} + +.mobile-menu.active { + display: block; +} + +.mobile-menu ul { + list-style: none; + display: flex; + flex-direction: column; + gap: 15px; +} + +.mobile-menu a { + color: #ff6600; + font-weight: 400; + font-size: 18px; + display: block; + padding: 10px 0; +} + +/* Segments - Fullscreen with uniform background */ +.segment { + min-height: 100vh; + padding: 10px 40px 40px; + display: flex; + flex-direction: column; + background-color: var(--bg-color); + scroll-snap-align: start; +} + +.section-header { + font-size: 28px; + font-weight: 700; + color: var(--primary-color); + margin-bottom: 10px; + text-align: left; + position: relative; + padding-left: 10px; +} + +/* Segment 1: Hero Carousel */ +.segment-hero { + padding: 0; + margin-top: var(--navbar-height); + min-height: calc(100vh - var(--navbar-height)); +} + +.carousel { + position: relative; + width: 100%; + height: calc(100vh - var(--navbar-height)); + overflow: hidden; +} + +.carousel-slide { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + opacity: 0; + transition: opacity 1s ease-in-out; +} + +.carousel-slide.active { + opacity: 1; +} + +.carousel-slide img { + width: 100%; + height: 100%; + object-fit: cover; +} + +/* Carousel Text Overlay */ +.carousel-text { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + z-index: 10; + opacity: 0; + transform: translate(-100%, -50%); + transition: all 0.8s ease-out; +} + +.carousel-slide.active .carousel-text { + opacity: 1; + transform: translate(-50%, -50%); +} + +.carousel-title { + font-size: 64px; + font-weight: 800; + color: #ff6600; + text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); + margin-bottom: 20px; + letter-spacing: 3px; +} + +.carousel-content { + font-size: 28px; + color: #003366; + font-weight: 600; + text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.8); + line-height: 1.5; +} + +.carousel-indicators { + position: absolute; + bottom: 30px; + left: 50%; + transform: translateX(-50%); + display: flex; + gap: 10px; +} + +.indicator { + width: 12px; + height: 12px; + border-radius: 50%; + background-color: rgba(255, 255, 255, 0.5); + cursor: pointer; + transition: var(--transition); +} + +.indicator.active { + background-color: var(--white); +} + +/* Segment 2: Text */ +.segment-text { + justify-content: flex-start; + padding-top: 40px; +} + +.text-content { + max-width: 800px; + margin: 0 auto; + text-align: center; +} + +.text-content p { + margin-bottom: 20px; + font-size: 18px; + line-height: 1.8; + color: var(--text-light); +} + +/* Segment 3: Leistungen - Carousel with arrows */ +.segment-leistungen { + justify-content: flex-start; + padding: 10px 0 40px; +} + +.segment-leistungen .container { + display: flex; + flex-direction: column; + height: 100%; + max-width: 100%; + padding: 0; +} + +.segment-leistungen .section-header { + padding-left: 40px; +} + +.leistungen-carousel-wrapper { + display: flex; + align-items: center; + justify-content: center; + gap: 10px; + flex: 1; + position: relative; + min-height: calc(100vh - 150px); +} + +.leistungen-carousel { + flex: 1; + height: 100%; + overflow: hidden; +} + +.leistungen-track { + display: flex; + height: 100%; + transition: transform 0.5s ease; +} + +.leistung-slide { + min-width: 100%; + display: grid; + grid-template-columns: 50% 50%; + height: calc(100vh - 150px); + opacity: 0; + transition: opacity 0.3s ease; +} + +.leistung-slide.active { + opacity: 1; +} + +.leistung-image { + width: 100%; + height: 100%; + overflow: hidden; + padding: 20px; +} + +.leistung-image img { + width: 100%; + height: 100%; + object-fit: cover; + border-radius: 8px; + box-shadow: var(--shadow); +} + +.leistung-content { + display: flex; + flex-direction: column; + justify-content: center; + padding: 40px; + height: 100%; +} + +.leistung-logo { + max-width: 200px; + margin-bottom: 20px; +} + +.leistung-logo img { + max-height: 60px; + width: auto; + object-fit: contain; +} + +.leistung-content h3 { + font-size: 36px; + color: var(--primary-color); + margin-bottom: 20px; +} + +.leistung-content p { + font-size: 20px; + color: var(--text-light); + line-height: 1.8; +} + +.carousel-arrow { + background-color: var(--white); + border: 2px solid var(--primary-color); + width: 50px; + height: 50px; + border-radius: 50%; + cursor: pointer; + font-size: 20px; + color: var(--primary-color); + transition: var(--transition); + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + z-index: 10; +} + +.carousel-arrow:hover { + background-color: var(--primary-color); + color: var(--white); +} + +.leistungen-indicators { + display: flex; + justify-content: center; + gap: 10px; + margin-top: 10px; +} + +.leistungen-indicators .indicator { + background-color: rgba(0, 51, 102, 0.3); +} + +.leistungen-indicators .indicator.active { + background-color: var(--primary-color); +} + +/* Segment 4: Referenzen */ +.segment-slideshow { + padding: 10px 40px 40px; +} + +.fullscreen-slideshow { + position: relative; + width: 100%; + height: calc(100vh - 200px); + min-height: 400px; + overflow: hidden; + border-radius: 8px; +} + +.slideshow-slide { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + opacity: 0; + transition: opacity 1.5s ease-in-out; +} + +.slideshow-slide.active { + opacity: 1; +} + +.slideshow-slide img { + width: 100%; + height: 100%; + object-fit: cover; +} + +.slideshow-indicators { + position: absolute; + bottom: 20px; + left: 50%; + transform: translateX(-50%); + display: flex; + gap: 8px; + flex-wrap: wrap; + justify-content: center; + max-width: 90%; + z-index: 10; +} + +.slideshow-indicators .indicator { + width: 10px; + height: 10px; + background-color: rgba(255, 255, 255, 0.5); +} + +.slideshow-indicators .indicator.active { + background-color: var(--white); +} + +/* Segment 5: Showroom (3D Viewer) */ +.segment-3d { + padding: 10px 40px 40px; +} + +.segment-3d .slideshow-wrapper { + flex: 1; + display: flex; + flex-direction: column; + border-radius: 8px; + /*padding: 0px; + background-color: var(--white);*/ + margin: 0; +} + +.viewer-container { + position: relative; + background-color: var(--white); + overflow: hidden; + flex: 1; + display: flex; + flex-direction: column; + height: calc(100vh - 200px); + border-radius: 8px; +} + +.viewer-container iframe { + display: block; + border: none; + flex: 1; + width: 100%; + height: 100%; +} + +.cookie-notice { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + flex: 1; + background-color: var(--secondary-color); + text-align: center; + padding: 40px; +} + +.cookie-notice.hidden { + display: none; +} + +.cookie-notice p { + font-size: 18px; + color: var(--text-light); + margin-bottom: 20px; +} + +/* Segment 6: Partner */ +.segment-partner { + justify-content: flex-start; + padding: 10px 40px 40px; +} + +.partner-grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-template-rows: repeat(4, 1fr); + gap: 20px; + flex: 1; + min-height: calc(100vh - 150px); +} + +.partner-item { + background-color: var(--white); + border: 1px solid var(--border-color); + border-radius: 8px; + overflow: hidden; + transition: var(--transition); + display: flex; +} + +.partner-item:hover { + box-shadow: var(--shadow-hover); + transform: translateY(-5px); +} + +.partner-item a, +.partner-no-link { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + padding: 20px; + color: var(--text-color); + width: 100%; + height: 100%; +} + +.partner-item img { + width: 100%; + max-width: 220px; + max-height: 120px; + object-fit: contain; + margin-bottom: 15px; +} + +.partner-item span { + font-weight: 500; + text-align: center; + font-size: 16px; +} + +/* Segment 7: Aktuelles */ +.segment-news { + justify-content: flex-start; + padding-top: 40px; +} + +.news-content { + max-width: 800px; + margin: 0 auto; +} + +.news-item { + background-color: var(--white); + padding: 40px; + border-radius: 8px; + box-shadow: var(--shadow); +} + +.news-item h3 { + font-size: 24px; + color: var(--primary-color); + margin-bottom: 10px; +} + +.news-date { + color: var(--text-light); + font-size: 14px; + margin-bottom: 20px; +} + +.news-item p { + color: var(--text-color); + line-height: 1.8; + margin-bottom: 15px; +} + +/* Segment 8: Kontakt */ +.segment-contact { + justify-content: flex-start; + padding-top: 40px; + padding-bottom: 0; + min-height: 100vh; + position: relative; +} + +.contact-wrapper { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 60px; +} + +.contact-info h3 { + font-size: 24px; + color: var(--primary-color); + margin-bottom: 20px; +} + +.contact-info address { + font-style: normal; + margin-bottom: 30px; +} + +.contact-info address p { + margin-bottom: 8px; + color: var(--text-color); +} + +.opening-hours h4 { + font-size: 18px; + color: var(--primary-color); + margin-bottom: 10px; +} + +.opening-hours p { + color: var(--text-light); + margin-bottom: 5px; +} + +.contact-form-wrapper h3 { + font-size: 24px; + color: var(--primary-color); + margin-bottom: 20px; +} + +.contact-form { + display: flex; + flex-direction: column; + gap: 20px; +} + +.form-group { + display: flex; + flex-direction: column; +} + +.form-group label { + margin-bottom: 8px; + font-weight: 500; + color: var(--text-color); +} + +.form-group input, +.form-group textarea { + padding: 12px; + border: 1px solid var(--border-color); + border-radius: 4px; + font-size: 16px; + font-family: inherit; + transition: var(--transition); +} + +.form-group input:focus, +.form-group textarea:focus { + outline: none; + border-color: var(--primary-color); +} + +.checkbox-label { + display: flex; + align-items: flex-start; + gap: 10px; + cursor: pointer; +} + +.checkbox-label input { + margin-top: 4px; +} + +.checkbox-label span { + font-weight: normal; + color: var(--text-light); +} + +.form-message { + padding: 20px; + border-radius: 4px; + margin-top: 20px; +} + +.form-message.hidden { + display: none; +} + +.form-message.success { + background-color: #d4edda; + color: #155724; + border: 1px solid #c3e6cb; +} + +.form-message.error { + background-color: #f8d7da; + color: #721c24; + border: 1px solid #f5c6cb; +} + +/* Footer */ +.footer { + background-color: var(--text-color); + color: var(--white); + padding: 40px 0 20px; + min-height: auto; +} + +/* Footer inside Kontakt segment */ +.segment-contact .footer-content { + background-color: var(--text-color); + color: var(--white); + padding: 30px 40px; + margin-top: auto; + border-radius: 8px; + width: 100%; +} + +.segment-contact .container { + display: flex; + flex-direction: column; + min-height: calc(100vh - 120px); +} + +.footer-content { + text-align: center; +} + +.footer-nav { + display: flex; + flex-wrap: wrap; + justify-content: center; + gap: 20px; + margin-bottom: 30px; +} + +.footer-nav a { + color: var(--white); + opacity: 0.8; + transition: var(--transition); +} + +.footer-nav a:hover { + opacity: 1; + color: var(--white); +} + +.footer-bottom { + border-top: 1px solid rgba(255, 255, 255, 0.1); + padding-top: 20px; +} + +.footer-bottom p { + opacity: 0.6; + font-size: 14px; +} + +/* Responsive Design */ +@media (max-width: 1024px) { + .nav-container { + padding: 0 20px; + } + + .nav-links { + gap: 25px; + } + + .partner-grid { + grid-template-columns: repeat(2, 1fr); + grid-template-rows: repeat(6, 1fr); + } + + .leistung-slide { + grid-template-columns: 1fr; + height: auto; + } + + .leistung-image { + height: 50vh; + } + + .leistung-content { + padding: 20px; + } + + .leistungen-carousel-wrapper { + min-height: auto; + } +} + +@media (max-width: 768px) { + :root { + --navbar-height: 70px; + } + + .nav-links { + display: none; + } + + .mobile-menu-toggle { + display: flex; + } + + .logo-img { + height: 50px; + } + + .section-header { + font-size: 24px; + padding-left: 20px; + } + + .leistung-slide { + grid-template-columns: 1fr; + } + + .leistung-image { + height: 300px; + padding: 10px; + } + + .leistung-content { + padding: 20px; + } + + .leistung-content h3 { + font-size: 28px; + } + + .leistung-content p { + font-size: 16px; + } + + .carousel-arrow { + width: 40px; + height: 40px; + font-size: 16px; + } + + .partner-grid { + grid-template-columns: repeat(2, 1fr); + grid-template-rows: repeat(6, 1fr); + gap: 15px; + } + + .partner-item img { + max-width: 150px; + max-height: 80px; + } + + .contact-wrapper { + grid-template-columns: 1fr; + gap: 40px; + } + + .fullscreen-slideshow { + height: 300px; + } + + .viewer-container { + height: 300px; + } + + .slideshow-indicators { + gap: 6px; + } + + .slideshow-indicators .indicator { + width: 8px; + height: 8px; + } + + .cookie-content { + flex-direction: column; + text-align: center; + } + + .segment { + padding: 10px 20px 20px; + } + + .segment-leistungen .section-header, + .segment-partner .section-header { + padding-left: 20px; + } +} + +@media (max-width: 480px) { + .section-header { + font-size: 20px; + } + + .partner-grid { + grid-template-columns: 1fr; + grid-template-rows: repeat(12, auto); + } + + .news-item { + padding: 25px; + } + + .leistung-content h3 { + font-size: 24px; + } +} \ No newline at end of file diff --git a/tasks.md b/tasks.md new file mode 100644 index 0000000..ac7b70c --- /dev/null +++ b/tasks.md @@ -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 \ No newline at end of file