Files
Frida---Fred/index.html
2026-01-31 16:22:31 +01:00

717 lines
38 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Frida und Fred - Feinkostgeschäft in Regensburg</title>
<!-- Favicons -->
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="192x192" href="android-chrome-192x192.png">
<link rel="icon" type="image/png" sizes="512x512" href="android-chrome-512x512.png">
<link href="lib/bootstrap.min.css" rel="stylesheet">
<link href="lib/fontawesome.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700;900&family=Lato:wght@300;400;700&display=swap" rel="stylesheet">
</head>
<body>
<!-- Top Bar -->
<div class="top-bar">
<div class="container-fluid px-5">
<span class="top-item"><i class="fas fa-map-marker-alt"></i> Untere Bachgasse 3, 93047 Regensburg</span>
<a class="top-item" href="tel:+4994160093260"><i class="fas fa-phone"></i> 0941 60093260</a>
<a class="top-item" href="mailto:info@frida-fred.com"><i class="fas fa-envelope"></i> info@frida-fred.com</a>
</div>
</div>
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-light sticky-top">
<div class="container-fluid px-5">
<a class="navbar-brand" href="index.html">Frida & Fred</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto">
<li class="nav-item"><a class="nav-link" href="#about">Über uns</a></li>
<li class="nav-item"><a class="nav-link" href="#produkte">Produkte</a></li>
<li class="nav-item"><a class="nav-link" href="#services">Services</a></li>
<li class="nav-item"><a class="nav-link" href="#events">Events</a></li>
<li class="nav-item"><a class="nav-link" href="lieferanten.html">Lieferanten</a></li>
<li class="nav-item"><a class="nav-link" href="#contact">Kontakt</a></li>
</ul>
</div>
</div>
</nav>
<!-- Hero Section -->
<section class="hero" id="home">
<div class="hero-content">
<div class="hero-text">
<h1 class="hero-title">Schmankerl und Kaffee<br>in Bio-Qualität</h1>
<p class="hero-subtitle">Handverlesene Produkte von regionalen Produzenten</p>
<a href="#produkte" class="btn-cta">Zu unseren Produkten</a>
</div>
<div class="hero-image">
<img src="img/logo.png" alt="Frida & Fred Logo" class="hero-logo">
</div>
</div>
</section>
<!-- About Section -->
<section id="about" class="section-about">
<div class="container-fluid px-5">
<h2 class="section-heading text-center mb-5">Gutes tut uns gut Schmankerl und Kaffee in Regensburg</h2>
<div class="about-layout">
<div class="about-text">
<h3>Natur, die man schmeckt</h3>
<p>Wir glauben daran, dass echter Geschmack durch Respekt entsteht. Respekt vor der Natur, den Tieren und dem Handwerk. Wenn wir schätzen, was die Natur uns gibt, entsteht Qualität, die nicht nur gut schmeckt, sondern auch gut tut.</p>
<h3>Tradition trifft Moderne</h3>
<p>Hinter Frida & Fred stehen wir [Dein Name], geprüfte Restaurantmeisterin und Caffeebarista. Seit 2015 lebe ich in Regensburg und bringe das Beste aus meiner alten Heimat in meine neue.</p>
<h3>Warum bei uns probieren?</h3>
<ul>
<li><strong>Echte Herkunft:</strong> Produkte von Familienbetrieben, die Tradition und Moderne verbinden.</li>
<li><strong>Natürlich &amp; Bekömmlich:</strong> Keine unnötigen Zusätze, dafür voller Geschmack und gute Verträglichkeit.</li>
<li><strong>Mit Liebe ausgewählt:</strong> Jedes Produkt hat seine eigene Geschichte, die ich gerne mit euch teile.</li>
</ul>
<p>Kommt vorbei und probiert euch durch unser Sortiment!</p>
</div>
<div class="about-image">
<img src="img/frida.jpg" alt="Frida & Fred Geschäft" class="about-img">
</div>
</div>
</div>
</section>
<!-- Products Section -->
<section id="produkte" class="section-products">
<div class="container-fluid px-5">
<h2 class="section-heading text-center mb-5">Unsere Produkte</h2>
<div class="products-grid">
<div class="product-item">
<div class="product-icon">
<i class="fas fa-wine-bottle"></i>
</div>
<h3>Weine</h3>
<p>Exquisite Weine aus dem Allgäu und darüber hinaus. Sorgfältig ausgewählte Sorten für jeden Geschmack und Anlass.</p>
</div>
<div class="product-item">
<div class="product-icon">
<i class="fas fa-cheese"></i>
</div>
<h3>Käse</h3>
<p>Heumilch Käsespezialitäten von lokalen Käsemeistern. Von mild bis würzig für jeden Käseliebhaber das Richtige.</p>
</div>
<div class="product-item">
<div class="product-icon">
<i class="fas fa-mug-hot"></i>
</div>
<h3>Kaffee</h3>
<p>Hochwertiger Bio-Kaffee & feines Gebäck. Genießen Sie unser intensives Aroma direkt hier im Laden oder nehmen Sie Ihr frisch gemahlen Kaffee mit nach Hause.</p>
</div>
<div class="product-item">
<div class="product-icon">
<i class="fas fa-jar"></i>
</div>
<h3>Sell Gmachts</h3>
<p>Tee, Kräuter , Pesto, Essig &Öl Konfitüren und Marmeladen. Handwerklich hergestellt nach bewährten Rezepten.</p>
</div>
<div class="product-item">
<div class="product-icon">
<i class="fas fa-egg"></i>
</div>
<h3>Frühstück</h3>
<p>Klein aber fein. Wir freuen uns auf Ihren Besuch.</p>
</div>
<div class="product-item">
<div class="product-icon">
<i class="fas fa-plate-wheat"></i>
</div>
<h3>Mittagessen</h3>
<p>Klein Aber fein. Wir freuen uns auf Ihren Besuch.</p>
</div>
</div>
</div>
</section>
<!-- Services Section -->
<section id="services" class="section-services">
<div class="container-fluid px-5">
<h2 class="section-heading text-center mb-5">Unsere Services</h2>
<div class="services-grid">
<div class="service-card" style="--bg-image: url('../img/services/geschenkkorb.jpg')">
<div class="service-img"></div>
<h3>Geschenkkörbe</h3>
<p>Individuell zusammengestellte Geschenkkörbe mit unseren besten Produkten. Perfekt für jeden Anlass!</p>
</div>
<div class="service-card" style="--bg-image: url('../img/services/kaeseplatte.jpg')">
<div class="service-img"></div>
<h3>Käseplatten</h3>
<p>Kunstvolle Käseplatten für Ihre Veranstaltung. Frisch zusammengestellt nach Ihren Wünschen.</p>
</div>
<div class="service-card" style="--bg-image: url('../img/services/Weintastings.jpg')">
<div class="service-img"></div>
<h3>Weintastings</h3>
<p>Professionelle Weinverkostungen mit Expertenwissen. Entdecken Sie neue Geschmackserlebnisse!</p>
</div>
</div>
</div>
</section>
<!-- Events Section -->
<section id="events" class="section-events">
<div class="container-fluid px-5">
<h2 class="section-heading text-center mb-3">Weinreisen & Käsetastings</h2>
<p class="section-subtitle text-center mb-5">Entdecken Sie unsere kulinarischen Erlebnisse eine Weinreise von Lindau über Hagnau bis nach Überlingen mit exquisiten Weinen und unserem leckeren Bio-Heumilchkäse. Jedes Tasting ist auch eine Käseverkostung mit verschiedenen Allgäuer Käsespezialitäten.</p>
<!-- Events Carousel -->
<div id="eventsCarousel" class="carousel slide events-carousel" data-bs-ride="carousel" data-bs-interval="6000">
<div class="carousel-indicators">
<button type="button" data-bs-target="#eventsCarousel" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#eventsCarousel" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#eventsCarousel" data-bs-slide-to="2" aria-label="Slide 3"></button>
<button type="button" data-bs-target="#eventsCarousel" data-bs-slide-to="3" aria-label="Slide 4"></button>
<button type="button" data-bs-target="#eventsCarousel" data-bs-slide-to="4" aria-label="Slide 5"></button>
</div>
<div class="carousel-inner">
<!-- Slide 1: Events Info -->
<div class="carousel-item active">
<div class="events-info">
<h3>Ihre Weinreise & Käseverkostung bei Frida & Fred</h3>
<p>Der Abend in der Frida beinhaltet eine Weinreise mit 5-7 Weinen und natürlich unserem leckeren Heumilchkäse. Auch für Häppchen ist selbstverständlich gesorgt. Bei Allergenen oder Ernährungspräferenzen gehen wir gerne auf individuelle Wünsche ein!</p>
<hr style="border: none; border-top: 1px solid var(--secondary-color); margin: 30px 0;">
<img src="img/slider01.jpg" alt="Weinreise und Käseverkostung" style="width: 100%; max-width: 600px; margin: 20px auto 0; display: block; border-radius: 8px;">
</div>
</div>
<!-- Slide 2: Event Details -->
<div class="carousel-item">
<div class="event-details">
<h3 style="grid-column: 1 / -1; margin-bottom: 10px;">Weinreisen 2026</h3>
<div class="event-detail-item">
<i class="fas fa-wine-glass-alt"></i>
<div>
<strong>Weintasting</strong>
<p>5-7 exquisite Weine vom Bodensee von Lindau über Hagnau bis Überlingen</p>
</div>
</div>
<div class="event-detail-item">
<i class="fas fa-euro-sign"></i>
<div>
<strong>Preis pro Person</strong>
<p>70€</p>
</div>
</div>
<div class="event-detail-item">
<i class="fas fa-users"></i>
<div>
<strong>Hinweis</strong>
<p>Da unsere Räumlichkeiten begrenzt sind, vergesst nicht eure Personenanzahl anzugeben.</p>
</div>
</div>
<div class="event-detail-item">
<i class="fas fa-envelope"></i>
<div>
<strong>Anmeldung</strong>
<p>Per E-Mail an <a href="mailto:info@frida-fred.com">info@frida-fred.com</a> oder telefonisch/WhatsApp: <a href="tel:+49015119426530">0151 19426530</a></p>
</div>
</div>
</div>
</div>
<!-- Slide 3: Weinreisen Termine -->
<div class="carousel-item">
<div class="events-dates">
<h3>Weinreisen Termine 2026</h3>
<div class="dates-grid">
<div class="date-card wine-event">
<div class="date-icon">
<i class="fas fa-wine-glass-alt"></i>
</div>
<div class="date-info">
<span class="date-day">Samstag</span>
<span class="date-number">23. Januar</span>
</div>
</div>
<div class="date-card wine-event">
<div class="date-icon">
<i class="fas fa-wine-glass-alt"></i>
</div>
<div class="date-info">
<span class="date-day">Samstag</span>
<span class="date-number">21. Februar</span>
</div>
</div>
<div class="date-card wine-event">
<div class="date-icon">
<i class="fas fa-wine-glass-alt"></i>
</div>
<div class="date-info">
<span class="date-day">Samstag</span>
<span class="date-number">21. März</span>
</div>
</div>
<div class="date-card wine-event">
<div class="date-icon">
<i class="fas fa-wine-glass-alt"></i>
</div>
<div class="date-info">
<span class="date-day">Donnerstag</span>
<span class="date-number">02. April</span>
</div>
</div>
<div class="date-card wine-event">
<div class="date-icon">
<i class="fas fa-wine-glass-alt"></i>
</div>
<div class="date-info">
<span class="date-day">Samstag</span>
<span class="date-number">20. Juni</span>
</div>
</div>
<div class="date-card wine-event">
<div class="date-icon">
<i class="fas fa-wine-glass-alt"></i>
</div>
<div class="date-info">
<span class="date-day">Samstag</span>
<span class="date-number">19. September</span>
</div>
</div>
<div class="date-card wine-event">
<div class="date-icon">
<i class="fas fa-wine-glass-alt"></i>
</div>
<div class="date-info">
<span class="date-day">Donnerstag</span>
<span class="date-number">30. Oktober</span>
</div>
</div>
<div class="date-card wine-event">
<div class="date-icon">
<i class="fas fa-wine-glass-alt"></i>
</div>
<div class="date-info">
<span class="date-day">Samstag</span>
<span class="date-number">17. Oktober</span>
</div>
</div>
<div class="date-card wine-event">
<div class="date-icon">
<i class="fas fa-wine-glass-alt"></i>
</div>
<div class="date-info">
<span class="date-day">Dienstag</span>
<span class="date-number">29. Dezember</span>
</div>
</div>
</div>
<!-- <div class="events-cta">
<a href="mailto:info@frida-fred.com" class="btn-cta">Jetzt anmelden</a>
</div> -->
</div>
</div>
<!-- Slide 4: Event Details (Käse) -->
<div class="carousel-item">
<div class="event-details">
<h3 style="grid-column: 1 / -1; margin-bottom: 10px;">Käsetastings 2026</h3>
<div class="event-detail-item">
<i class="fas fa-cheese"></i>
<div>
<strong>Käsetasting</strong>
<p>Verschiedene Heumilchkäse-Spezialitäten, perfekt auf die Weine abgestimmt</p>
</div>
</div>
<div class="event-detail-item">
<i class="fas fa-euro-sign"></i>
<div>
<strong>Preis pro Person</strong>
<p>50€</p>
</div>
</div>
<div class="event-detail-item">
<i class="fas fa-users"></i>
<div>
<strong>Hinweis</strong>
<p>Da unsere Räumlichkeiten begrenzt sind, vergesst nicht eure Personenanzahl anzugeben.</p>
</div>
</div>
<div class="event-detail-item">
<i class="fas fa-envelope"></i>
<div>
<strong>Anmeldung</strong>
<p>Per E-Mail an <a href="mailto:info@frida-fred.com">info@frida-fred.com</a> oder telefonisch/WhatsApp: <a href="tel:+49015119426530">0151 19426530</a></p>
</div>
</div>
</div>
</div>
<!-- Slide 5: Käsetastings Termine -->
<div class="carousel-item">
<div class="events-dates">
<h3>Käsetastings Termine 2026</h3>
<div class="dates-grid">
<div class="date-card cheese-event">
<div class="date-icon">
<i class="fas fa-cheese"></i>
</div>
<div class="date-info">
<span class="date-day">Donnerstag</span>
<span class="date-number">06. Februar</span>
</div>
</div>
<div class="date-card cheese-event">
<div class="date-icon">
<i class="fas fa-cheese"></i>
</div>
<div class="date-info">
<span class="date-day">Donnerstag</span>
<span class="date-number">06. März</span>
</div>
</div>
<div class="date-card cheese-event">
<div class="date-icon">
<i class="fas fa-cheese"></i>
</div>
<div class="date-info">
<span class="date-day">Donnerstag</span>
<span class="date-number">03. April</span>
</div>
</div>
<div class="date-card cheese-event">
<div class="date-icon">
<i class="fas fa-cheese"></i>
</div>
<div class="date-info">
<span class="date-day">Donnerstag</span>
<span class="date-number">08. Mai</span>
</div>
</div>
<div class="date-card cheese-event">
<div class="date-icon">
<i class="fas fa-cheese"></i>
</div>
<div class="date-info">
<span class="date-day">Donnerstag</span>
<span class="date-number">03. Juli</span>
</div>
</div>
<div class="date-card cheese-event">
<div class="date-icon">
<i class="fas fa-cheese"></i>
</div>
<div class="date-info">
<span class="date-day">Donnerstag</span>
<span class="date-number">04. September</span>
</div>
</div>
<div class="date-card cheese-event">
<div class="date-icon">
<i class="fas fa-cheese"></i>
</div>
<div class="date-info">
<span class="date-day">Donnerstag</span>
<span class="date-number">09. Oktober</span>
</div>
</div>
<div class="date-card cheese-event">
<div class="date-icon">
<i class="fas fa-cheese"></i>
</div>
<div class="date-info">
<span class="date-day">Donnerstag</span>
<span class="date-number">06. November</span>
</div>
</div>
</div>
<!-- <div class="events-cta">
<a href="mailto:info@frida-fred.com" class="btn-cta">Jetzt anmelden</a>
</div> -->
</div>
</div>
</div>
<!-- Carousel Controls -->
<button class="carousel-control-prev" type="button" data-bs-target="#eventsCarousel" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#eventsCarousel" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
</section>
<!-- Contact Section -->
<section id="contact" class="section-contact">
<div class="container-fluid px-5">
<h2 class="section-heading text-center mb-5">Kontakt</h2>
<div class="contact-layout">
<div class="contact-column">
<div class="contact-card">
<h3><i class="fas fa-map-marker-alt"></i>Besuchen Sie uns</h3>
<div class="map-embed">
<iframe src="https://www.google.com/maps?q=Untere+Bachgasse+3,+93047+Regensburg&output=embed" title="Standort Frida & Fred Ladenlokal" loading="lazy" allowfullscreen referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>
</div>
</div>
<div class="contact-column">
<div class="contact-card">
<h3><i class="fas fa-envelope"></i> Schreiben Sie uns</h3>
<form id="contactForm" class="contact-form" method="POST" action="api/send-mail.php" novalidate>
<input type="hidden" name="csrf_token" value="frida-fred-csrf-2026">
<input type="text" name="website" style="display: none;" tabindex="-1" autocomplete="off">
<div class="form-group">
<label for="name">Name *</label>
<input type="text" id="name" name="name" class="form-control" autocomplete="name" required aria-required="true">
</div>
<div class="form-group">
<label for="email">E-Mail *</label>
<input type="email" id="email" name="email" class="form-control" autocomplete="email" required aria-required="true">
</div>
<div class="form-group">
<label for="subject">Betreff *</label>
<input type="text" id="subject" name="subject" class="form-control" autocomplete="off" required aria-required="true">
</div>
<div class="form-group">
<label for="message">Nachricht *</label>
<textarea id="message" name="message" class="form-control" rows="4" autocomplete="off" required aria-required="true"></textarea>
</div>
<button type="submit" class="btn btn-submit">Nachricht senden</button>
</form>
<div id="formMessage" class="form-message" style="display: none;"></div>
</div>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="site-footer">
<div class="container-fluid px-5">
<div class="footer-content">
<div class="footer-column">
<h4>Frida & Fred</h4>
<p>Ihre Adresse für Allgäuer Bio-Spezialitäten in Regensburg.</p>
<p style="margin-bottom: 0.5rem;">
<i class="fas fa-map-marker-alt" style="color: var(--secondary-color); margin-right: 8px;"></i>
Untere Bachgasse 3<br>
<i class="fas fa-city" style="color: var(--secondary-color); margin-right: 8px;"></i>
93047 Regensburg
</p>
<p style="margin-bottom: 0.5rem;">
<i class="fas fa-phone" style="color: var(--secondary-color); margin-right: 8px;"></i>
<a href="tel:+4994160093260">0941 60093260</a><br>
<i class="fas fa-mobile" style="color: var(--secondary-color); margin-right: 8px;"></i>
<a href="tel:+49015119426530">0151 19426530</a>
</p>
<p style="margin-bottom: 1.5rem;">
<i class="fas fa-envelope" style="color: var(--secondary-color); margin-right: 8px;"></i>
<a href="mailto:info@frida-fred.com">info@frida-fred.com</a>
</p>
<div class="social-links">
<!-- <a href="#" title="Facebook"><i class="fab fa-facebook-f"></i></a> -->
<a href="https://www.instagram.com/fridaundfred_regensburg?igsh=MXd4Nm91dHR3ejZ6YQ==" title="Instagram"><i class="fab fa-instagram"></i></a>
<!-- <a href="#" title="Twitter"><i class="fab fa-twitter"></i></a> -->
</div>
</div>
<div class="footer-column">
<h4>Öffnungszeiten</h4>
<p style="margin-bottom: 0.5rem;">
<strong>Montag:</strong><br>
Geschlossen
</p>
<p style="margin-bottom: 0;">
<strong>Dienstag - Samstag:</strong><br>
09:00 19:00 Uhr
</p>
</div>
<div class="footer-column">
<h4>Navigation</h4>
<ul>
<li><a href="#about">Über uns</a></li>
<li><a href="#produkte">Produkte</a></li>
<li><a href="#services">Services</a></li>
<li><a href="lieferanten.html">Lieferanten</a></li>
</ul>
</div>
<div class="footer-column">
<h4>Rechtliches</h4>
<ul>
<li><a href="datenschutz.html">Datenschutz</a></li>
<li><a href="impressum.html">Impressum</a></li>
<li><a href="agb.html">AGB</a></li>
</ul>
</div>
</div>
<div class="footer-bottom">
<p>&copy; 2026 Frida & Fred. Alle Rechte vorbehalten.</p>
</div>
</div>
</footer>
<script src="lib/bootstrap.bundle.min.js"></script>
<script>
// Smooth scrolling for internal links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
const target = document.querySelector(this.getAttribute('href'));
if (target) {
target.scrollIntoView({
behavior: 'smooth',
block: 'start'
});
}
});
});
// Active nav link on scroll
window.addEventListener('scroll', function() {
let current = '';
const sections = document.querySelectorAll('section');
sections.forEach(section => {
const sectionTop = section.offsetTop;
const sectionHeight = section.clientHeight;
if (pageYOffset >= sectionTop - 200) {
current = section.getAttribute('id');
}
});
document.querySelectorAll('.nav-link').forEach(link => {
link.classList.remove('active');
if (link.getAttribute('href') === '#' + current) {
link.classList.add('active');
}
});
});
// Contact Form Handler
const contactForm = document.getElementById('contactForm');
const formMessage = document.getElementById('formMessage');
if (contactForm) {
contactForm.addEventListener('submit', function(e) {
e.preventDefault();
// Honeypot check
const honeypot = document.querySelector('input[name="website"]').value;
if (honeypot) {
console.warn('Bot detection triggered');
return false;
}
// Form validation
if (!contactForm.checkValidity()) {
formMessage.classList.remove('success');
formMessage.classList.add('error');
formMessage.textContent = 'Bitte füllen Sie alle erforderlichen Felder aus.';
formMessage.style.display = 'block';
return false;
}
// Email validation
const emailInput = document.getElementById('email');
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (!emailRegex.test(emailInput.value)) {
formMessage.classList.remove('success');
formMessage.classList.add('error');
formMessage.textContent = 'Bitte geben Sie eine gültige E-Mail-Adresse ein.';
formMessage.style.display = 'block';
return false;
}
// Submit button deaktivieren während des Sendens
const submitButton = contactForm.querySelector('button[type="submit"]');
const originalButtonText = submitButton.textContent;
submitButton.disabled = true;
submitButton.textContent = 'Wird gesendet...';
// Formular als FormData sammeln
const formData = new FormData(contactForm);
// AJAX-Request an send-mail.php
fetch('api/send-mail.php', {
method: 'POST',
body: formData
})
.then(response => response.json())
.then(data => {
// Submit button wieder aktivieren
submitButton.disabled = false;
submitButton.textContent = originalButtonText;
if (data.success) {
formMessage.classList.remove('error');
formMessage.classList.add('success');
formMessage.textContent = data.message;
formMessage.style.display = 'block';
// Formular zurücksetzen
contactForm.reset();
// Nachricht nach 7 Sekunden ausblenden
setTimeout(() => {
formMessage.style.display = 'none';
}, 7000);
} else {
formMessage.classList.remove('success');
formMessage.classList.add('error');
formMessage.textContent = data.message;
formMessage.style.display = 'block';
}
})
.catch(error => {
// Submit button wieder aktivieren
submitButton.disabled = false;
submitButton.textContent = originalButtonText;
console.error('Fehler:', error);
formMessage.classList.remove('success');
formMessage.classList.add('error');
formMessage.textContent = 'Es gab ein Problem beim Senden Ihrer Nachricht. Bitte versuchen Sie es später erneut.';
formMessage.style.display = 'block';
});
return false;
});
}
</script>
<!-- Back to Top Button -->
<a href="#" class="back-to-top" id="backToTop" aria-label="Nach oben scrollen">
<i class="fas fa-chevron-up"></i>
</a>
<script>
// Show/hide back to top button
window.addEventListener('scroll', function() {
const backToTop = document.getElementById('backToTop');
if (window.pageYOffset > 300) {
backToTop.classList.add('visible');
} else {
backToTop.classList.remove('visible');
}
});
</script>
</body>
</html>