diff options
| author | Agando <roduccomm@gmail.com> | 2026-08-06 05:01:13 +0200 |
|---|---|---|
| committer | Agando <roduccomm@gmail.com> | 2026-08-06 05:01:13 +0200 |
| commit | d4abdf3d7764bf4362a16261d0ebf151a15926f7 (patch) | |
| tree | 7c80e35e5d8eeeb5501dd6f2f8e6b1a4471d6ea6 /downloads/thai-massage-booking-mockup.html | |
| parent | 17c2d8bc91d99eb9f102254bcd650204c5c9426c (diff) | |
auto: 2026-07-29_20:45 changes
Diffstat (limited to 'downloads/thai-massage-booking-mockup.html')
| -rw-r--r-- | downloads/thai-massage-booking-mockup.html | 925 |
1 files changed, 925 insertions, 0 deletions
diff --git a/downloads/thai-massage-booking-mockup.html b/downloads/thai-massage-booking-mockup.html new file mode 100644 index 0000000..9c2e031 --- /dev/null +++ b/downloads/thai-massage-booking-mockup.html @@ -0,0 +1,925 @@ +<!DOCTYPE html> +<html lang="de"> +<head> + <meta charset="UTF-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <title>Thai Massage Kiefersfelden & Kufstein – Online Termin buchen</title> + <meta name="description" content="Professionelle Thai Massage in Kiefersfelden und Kufstein. Jetzt online Ihren Termin buchen – schnell, einfach und bequem."> + + <!-- ===== STYLES ===== --> + <style> + :root { + --gold: #c5a55a; + --gold-light: #e8d5a3; + --gold-dark: #a08838; + --dark: #1a1a1a; + --dark-soft: #2a2722; + --cream: #faf6ef; + --cream-dark: #f0e9db; + --text: #333; + --text-light: #666; + --whatsapp: #25d366; + --whatsapp-dark: #1da851; + --shadow: 0 4px 20px rgba(0,0,0,0.08); + --shadow-lg: 0 8px 40px rgba(0,0,0,0.12); + --radius: 12px; + } + + * { + margin: 0; + padding: 0; + box-sizing: border-box; + } + + body { + font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif; + background: var(--cream); + color: var(--text); + line-height: 1.6; + } + + /* ===== HEADER ===== */ + header { + background: var(--dark); + color: #fff; + padding: 0; + position: sticky; + top: 0; + z-index: 100; + box-shadow: 0 2px 10px rgba(0,0,0,0.3); + } + + .header-inner { + max-width: 1200px; + margin: 0 auto; + display: flex; + align-items: center; + justify-content: space-between; + padding: 16px 24px; + gap: 16px; + } + + .logo { + display: flex; + align-items: center; + gap: 10px; + font-size: 1.3rem; + font-weight: 700; + white-space: nowrap; + } + + .logo-icon { + font-size: 1.6rem; + } + + .logo span { + color: var(--gold); + } + + .location-switch { + display: flex; + gap: 8px; + flex-wrap: wrap; + } + + .loc-btn { + background: var(--dark-soft); + border: 1px solid var(--gold-dark); + color: #ccc; + padding: 8px 18px; + border-radius: 30px; + cursor: pointer; + font-size: 0.85rem; + transition: all 0.3s ease; + white-space: nowrap; + } + + .loc-btn:hover { + background: var(--dark-soft); + border-color: var(--gold); + color: var(--gold-light); + } + + .loc-btn.active { + background: var(--gold); + color: var(--dark); + border-color: var(--gold); + font-weight: 600; + } + + @media (max-width: 600px) { + .header-inner { + flex-direction: column; + padding: 12px 16px; + } + .location-switch { + width: 100%; + justify-content: center; + } + } + + /* ===== HERO ===== */ + .hero { + background: linear-gradient(135deg, #1a1a1a 0%, #2d2a22 50%, #1a1a1a 100%); + color: #fff; + text-align: center; + padding: 60px 24px 50px; + position: relative; + overflow: hidden; + } + + .hero::before { + content: "🧘"; + position: absolute; + font-size: 20rem; + opacity: 0.04; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + } + + .hero h1 { + font-size: 2.4rem; + margin-bottom: 12px; + position: relative; + } + + .hero h1 span { + color: var(--gold); + } + + .hero p { + font-size: 1.15rem; + color: #ddd; + max-width: 600px; + margin: 0 auto 28px; + position: relative; + } + + .hero-cta { + display: flex; + gap: 14px; + justify-content: center; + flex-wrap: wrap; + position: relative; + } + + @media (max-width: 600px) { + .hero h1 { font-size: 1.7rem; } + .hero p { font-size: 1rem; } + } + + /* ===== BUTTONS ===== */ + .btn { + display: inline-flex; + align-items: center; + gap: 8px; + padding: 14px 32px; + border-radius: 50px; + font-size: 1rem; + font-weight: 600; + text-decoration: none; + cursor: pointer; + border: none; + transition: all 0.3s ease; + } + + .btn-primary { + background: var(--gold); + color: var(--dark); + box-shadow: 0 4px 15px rgba(197, 165, 90, 0.3); + } + + .btn-primary:hover { + background: var(--gold-light); + transform: translateY(-2px); + box-shadow: 0 6px 25px rgba(197, 165, 90, 0.5); + } + + .btn-whatsapp { + background: var(--whatsapp); + color: #fff; + box-shadow: 0 4px 15px rgba(37, 211, 102, 0.3); + } + + .btn-whatsapp:hover { + background: var(--whatsapp-dark); + transform: translateY(-2px); + box-shadow: 0 6px 25px rgba(37, 211, 102, 0.5); + } + + .btn-outline { + background: transparent; + color: #fff; + border: 2px solid rgba(255,255,255,0.3); + } + + .btn-outline:hover { + border-color: var(--gold); + color: var(--gold); + } + + /* ===== BOOKING SECTION ===== */ + .booking-section { + max-width: 1100px; + margin: -30px auto 0; + padding: 0 24px 60px; + position: relative; + z-index: 10; + } + + .booking-card { + background: #fff; + border-radius: var(--radius); + box-shadow: var(--shadow-lg); + overflow: hidden; + } + + .booking-header { + background: linear-gradient(135deg, var(--gold-dark), var(--gold)); + color: #fff; + padding: 20px 32px; + display: flex; + align-items: center; + justify-content: space-between; + flex-wrap: wrap; + gap: 12px; + } + + .booking-header h2 { + font-size: 1.3rem; + display: flex; + align-items: center; + gap: 10px; + } + + .booking-header .location-badge { + background: rgba(255,255,255,0.2); + padding: 4px 14px; + border-radius: 20px; + font-size: 0.85rem; + font-weight: 500; + } + + /* ===== BOOKING WIDGET (Placeholder for Massagebooking.de iFrame) ===== */ + .booking-widget { + padding: 32px; + min-height: 420px; + background: var(--cream); + display: flex; + flex-direction: column; + align-items: center; + justify-content: flex-start; + } + + .widget-placeholder { + width: 100%; + min-height: 380px; + border: 2px dashed var(--gold-light); + border-radius: 10px; + background: #fff; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + padding: 40px 20px; + text-align: center; + } + + .widget-placeholder .icon { + font-size: 3rem; + margin-bottom: 16px; + } + + .widget-placeholder h3 { + color: var(--dark); + margin-bottom: 8px; + font-size: 1.2rem; + } + + .widget-placeholder p { + color: var(--text-light); + max-width: 400px; + margin-bottom: 20px; + } + + .widget-placeholder code { + display: block; + background: var(--dark); + color: var(--gold-light); + padding: 14px 20px; + border-radius: 8px; + font-size: 0.8rem; + max-width: 500px; + overflow-x: auto; + text-align: left; + margin: 0 auto; + } + + /* ===== SERVICES GRID ===== */ + .services { + max-width: 1100px; + margin: 0 auto; + padding: 0 24px 60px; + } + + .section-title { + text-align: center; + margin-bottom: 40px; + } + + .section-title h2 { + font-size: 2rem; + color: var(--dark); + margin-bottom: 8px; + } + + .section-title p { + color: var(--text-light); + } + + .services-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); + gap: 24px; + } + + .service-card { + background: #fff; + border-radius: var(--radius); + padding: 28px; + box-shadow: var(--shadow); + transition: all 0.3s ease; + cursor: pointer; + border: 2px solid transparent; + } + + .service-card:hover { + transform: translateY(-4px); + box-shadow: var(--shadow-lg); + border-color: var(--gold-light); + } + + .service-card .service-icon { + font-size: 2rem; + margin-bottom: 12px; + } + + .service-card h3 { + color: var(--dark); + margin-bottom: 6px; + font-size: 1.15rem; + } + + .service-card .duration { + color: var(--gold-dark); + font-size: 0.85rem; + font-weight: 600; + margin-bottom: 10px; + } + + .service-card p { + color: var(--text-light); + font-size: 0.9rem; + margin-bottom: 16px; + } + + .service-card .price { + font-size: 1.4rem; + font-weight: 700; + color: var(--dark); + } + + .service-card .price small { + font-size: 0.75rem; + font-weight: 400; + color: var(--text-light); + } + + .service-card .book-btn { + display: block; + text-align: center; + margin-top: 16px; + padding: 10px; + background: var(--cream-dark); + color: var(--dark); + border-radius: 8px; + font-weight: 600; + font-size: 0.85rem; + text-decoration: none; + transition: all 0.3s ease; + } + + .service-card:hover .book-btn { + background: var(--gold); + color: var(--dark); + } + + /* ===== LOCATIONS SECTION ===== */ + .locations { + max-width: 1100px; + margin: 0 auto; + padding: 0 24px 60px; + } + + .loc-grid { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 24px; + } + + @media (max-width: 768px) { + .loc-grid { + grid-template-columns: 1fr; + } + } + + .loc-card { + background: #fff; + border-radius: var(--radius); + box-shadow: var(--shadow); + overflow: hidden; + display: flex; + flex-direction: column; + } + + .loc-card .loc-image { + height: 200px; + background: linear-gradient(135deg, var(--dark-soft), var(--dark)); + display: flex; + align-items: center; + justify-content: center; + font-size: 4rem; + } + + .loc-card .loc-body { + padding: 24px; + flex: 1; + display: flex; + flex-direction: column; + } + + .loc-card h3 { + color: var(--dark); + font-size: 1.3rem; + margin-bottom: 8px; + } + + .loc-card .loc-address { + color: var(--text-light); + font-size: 0.9rem; + margin-bottom: 16px; + line-height: 1.8; + } + + .loc-card .loc-hours { + background: var(--cream); + padding: 14px; + border-radius: 8px; + margin-bottom: 16px; + font-size: 0.85rem; + } + + .loc-card .loc-hours .day { + display: flex; + justify-content: space-between; + padding: 2px 0; + } + + .loc-card .loc-hours .day.closed { + color: #cc5555; + } + + .loc-card .loc-cta { + margin-top: auto; + display: flex; + gap: 10px; + flex-wrap: wrap; + } + + .loc-card .loc-cta .btn { + flex: 1; + min-width: 140px; + padding: 12px 20px; + font-size: 0.9rem; + justify-content: center; + } + + /* ===== COOKIE BANNER ===== */ + .cookie-banner { + position: fixed; + bottom: 0; + left: 0; + right: 0; + background: var(--dark); + color: #fff; + padding: 16px 24px; + display: flex; + align-items: center; + justify-content: center; + gap: 16px; + flex-wrap: wrap; + z-index: 1000; + box-shadow: 0 -4px 20px rgba(0,0,0,0.3); + } + + .cookie-banner p { + font-size: 0.85rem; + max-width: 600px; + flex: 1; + } + + .cookie-banner a { + color: var(--gold); + } + + .cookie-buttons { + display: flex; + gap: 10px; + } + + .cookie-btn { + padding: 8px 20px; + border-radius: 6px; + border: none; + cursor: pointer; + font-weight: 600; + font-size: 0.85rem; + } + + .cookie-btn.accept { + background: var(--gold); + color: var(--dark); + } + + .cookie-btn.reject { + background: var(--dark-soft); + color: #ccc; + border: 1px solid #555; + } + + /* ===== FOOTER ===== */ + footer { + background: var(--dark); + color: #aaa; + padding: 40px 24px 20px; + text-align: center; + } + + footer .footer-links { + display: flex; + gap: 20px; + justify-content: center; + flex-wrap: wrap; + margin-bottom: 20px; + } + + footer .footer-links a { + color: var(--gold-light); + text-decoration: none; + font-size: 0.85rem; + transition: color 0.3s; + } + + footer .footer-links a:hover { + color: var(--gold); + } + + footer .copyright { + font-size: 0.8rem; + color: #777; + border-top: 1px solid #333; + padding-top: 16px; + } + + /* ===== FLOATING WHATSAPP BUTTON ===== */ + .wa-float { + position: fixed; + bottom: 80px; + right: 24px; + width: 60px; + height: 60px; + background: var(--whatsapp); + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + font-size: 1.8rem; + box-shadow: 0 4px 15px rgba(37, 211, 102, 0.4); + z-index: 999; + text-decoration: none; + transition: all 0.3s ease; + animation: pulse 2s infinite; + } + + .wa-float:hover { + transform: scale(1.1); + box-shadow: 0 6px 25px rgba(37, 211, 102, 0.6); + } + + @keyframes pulse { + 0% { box-shadow: 0 4px 15px rgba(37, 211, 102, 0.4); } + 50% { box-shadow: 0 4px 25px rgba(37, 211, 102, 0.7); } + 100% { box-shadow: 0 4px 15px rgba(37, 211, 102, 0.4); } + } + + @media (max-width: 600px) { + .wa-float { + bottom: 70px; + right: 16px; + width: 54px; + height: 54px; + font-size: 1.5rem; + } + } + + /* ===== DEVELOPER NOTE (hidden in production) ===== */ + .dev-note { + background: #fff3cd; + border-left: 4px solid #ffc107; + padding: 16px 24px; + margin: 0 24px 20px; + border-radius: 4px; + font-size: 0.85rem; + color: #856404; + } + + .dev-note strong { + color: #533f03; + } + + .dev-note code { + background: #fff; + padding: 2px 6px; + border-radius: 3px; + } + </style> +</head> +<body> + + <!-- ===== HEADER ===== --> + <header> + <div class="header-inner"> + <div class="logo"> + <span class="logo-icon">🌸</span> + Thai Massage <span>Kiefersfelden</span> + </div> + <div class="location-switch"> + <button class="loc-btn active" onclick="switchLocation('kiefersfelden')">🇩🇪 Kiefersfelden</button> + <button class="loc-btn" onclick="switchLocation('kufstein')">🇦🇹 Kufstein</button> + </div> + </div> + </header> + + <!-- ===== HERO ===== --> + <div class="hero"> + <h1>Entspannung beginnt hier <span>🌸</span></h1> + <p>Authentische Thai Massage in Kiefersfelden & Kufstein. Buchen Sie Ihren Termin online – in nur 30 Sekunden.</p> + <div class="hero-cta"> + <a href="#booking" class="btn btn-primary">📅 Jetzt Termin buchen</a> + <a href="https://wa.me/49XXXXXXXXXXX?text=Hallo,%20ich%20möchte%20gern%20einen%20Termin%20buchen" + class="btn btn-whatsapp" target="_blank">💬 WhatsApp schreiben</a> + <a href="tel:+499999999999" class="btn btn-outline">📞 Anrufen</a> + </div> + </div> + + <!-- ===== BOOKING SECTION ===== --> + <section class="booking-section" id="booking"> + <div class="booking-card"> + <div class="booking-header"> + <h2>📅 Online Termin buchen</h2> + <span class="location-badge" id="loc-badge">📍 Kiefersfelden</span> + </div> + + <div class="booking-widget"> + <!-- + ═══════════════════════════════════════════════════════ + PRODUCTION: Replace this placeholder with the actual + Massagebooking.de or SimplyBook.me iFrame embed code. + + Example (Massagebooking.de): + <iframe src="https://thaimassage-kiefersfelden.massagebooking.de/widget" + width="100%" height="500" frameborder="0"></iframe> + + Example (SimplyBook.me): + <iframe src="https://thaimassage.simplybook.me/v2/widget" + width="100%" height="500" frameborder="0"></iframe> + ═══════════════════════════════════════════════════════ + --> + <div class="widget-placeholder" id="widget-placeholder"> + <div class="icon">📅</div> + <h3>Booking Widget wird hier eingebettet</h3> + <p>Sobald Sie sich bei <strong>Massagebooking.de</strong> oder <strong>SimplyBook.me</strong> registriert haben, wird hier der iFrame-Code des Buchungs-Widgets eingefügt. Kunden können dann direkt auf der Webseite ihren Termin wählen.</p> + <code><iframe src="https://thaimassage.massagebooking.de/widget" + width="100%" height="500" frameborder="0"> +</iframe></code> + </div> + </div> + </div> + </section> + + <!-- ===== SERVICES ===== --> + <section class="services"> + <div class="section-title"> + <h2>Unsere Behandlungen</h2> + <p>Wählen Sie eine Behandlung und buchen Sie direkt online</p> + </div> + + <div class="services-grid"> + <div class="service-card" onclick="document.getElementById('booking').scrollIntoView({behavior:'smooth'})"> + <div class="service-icon">👐</div> + <h3>Traditionelle Thai Massage</h3> + <div class="duration">⏱ 60 Min.</div> + <p>Die klassische Thai-Massage nach alter Tradition. Dehnungen und Druckpunktmassage für den ganzen Körper.</p> + <div class="price">€45 <small>/ Termin</small></div> + <a href="#booking" class="book-btn">Jetzt buchen →</a> + </div> + + <div class="service-card" onclick="document.getElementById('booking').scrollIntoView({behavior:'smooth'})"> + <div class="service-icon">🌿</div> + <h3>Öl-Massage</h3> + <div class="duration">⏱ 60 Min.</div> + <p>Entspannende Ganzkörpermassage mit warmen Thai-Ölen. Ideal zur Lösung von Verspannungen.</p> + <div class="price">€50 <small>/ Termin</small></div> + <a href="#booking" class="book-btn">Jetzt buchen →</a> + </div> + + <div class="service-card" onclick="document.getElementById('booking').scrollIntoView({behavior:'smooth'})"> + <div class="service-icon">🔥</div> + <h3>Hot Stone Massage</h3> + <div class="duration">⏱ 75 Min.</div> + <p>Warme Steine lösen tiefe Verspannungen und bringen den Energiefluss ins Gleichgewicht.</p> + <div class="price">€65 <small>/ Termin</small></div> + <a href="#booking" class="book-btn">Jetzt buchen →</a> + </div> + + <div class="service-card" onclick="document.getElementById('booking').scrollIntoView({behavior:'smooth'})"> + <div class="service-icon">💆</div> + <h3>Rücken- & Nackenmassage</h3> + <div class="duration">⏱ 30 Min.</div> + <p>Zielgerichtete Behandlung für Rücken, Schultern und Nackenbereich. Schnelle Entspannung im Alltag.</p> + <div class="price">€28 <small>/ Termin</small></div> + <a href="#booking" class="book-btn">Jetzt buchen →</a> + </div> + + <div class="service-card" onclick="document.getElementById('booking').scrollIntoView({behavior:'smooth'})"> + <div class="service-icon">🦶</div> + <h3>Fußreflexzonenmassage</h3> + <div class="duration">⏱ 45 Min.</div> + <p>Reflexzonenmassage an den Füßen regt die Selbstheilung an und bringt tiefe Entspannung.</p> + <div class="price">€35 <small>/ Termin</small></div> + <a href="#booking" class="book-btn">Jetzt buchen →</a> + </div> + + <div class="service-card" onclick="document.getElementById('booking').scrollIntoView({behavior:'smooth'})"> + <div class="service-icon">🎁</div> + <h3>Gutschein</h3> + <div class="duration">⏱ Wählbar</div> + <p> Verschenken Sie Entspannung! Gutscheine online kaufen und per E-Mail oder Post erhalten.</p> + <div class="price">ab €28</div> + <a href="#booking" class="book-btn">Gutschein kaufen →</a> + </div> + </div> + </section> + + <!-- ===== LOCATIONS ===== --> + <section class="locations"> + <div class="section-title"> + <h2>Unsere Standorte</h2> + <p>Zwei Studios – gleiche Qualität, Ihre Wahl</p> + </div> + + <div class="loc-grid"> + <!-- Kiefersfelden --> + <div class="loc-card"> + <div class="loc-image">🏛️</div> + <div class="loc-body"> + <h3>Thai Massage Kiefersfelden 🇩🇪</h3> + <div class="loc-address"> + Musterstraße 1<br> + 83309 Kiefersfelden<br> + 📞 <a href="tel:+499999999999">+49 999 999 9999</a> + </div> + <div class="loc-hours"> + <div class="day"><span>Mo – Fr</span><span>10:00 – 19:00</span></div> + <div class="day"><span>Sa</span><span>10:00 – 16:00</span></div> + <div class="day closed"><span>Sonntag</span><span>Geschlossen</span></div> + </div> + <div class="loc-cta"> + <a href="#booking" class="btn btn-primary" onclick="switchLocation('kiefersfelden')">📅 Buchen</a> + <a href="https://wa.me/49XXXXXXXXXXX" class="btn btn-whatsapp" target="_blank">💬 WhatsApp</a> + </div> + </div> + </div> + + <!-- Kufstein --> + <div class="loc-card"> + <div class="loc-image">⛰️</div> + <div class="loc-body"> + <h3>Thai Massage Kufstein 🇦🇹</h3> + <div class="loc-address"> + Beispielfeld 2<br> + 6330 Kufstein, Tirol<br> + 📞 <a href="tel:+439999999999">+43 999 999 9999</a> + </div> + <div class="loc-hours"> + <div class="day"><span>Mo – Fr</span><span>10:00 – 19:00</span></div> + <div class="day"><span>Sa</span><span>10:00 – 16:00</span></div> + <div class="day closed"><span>Sonntag</span><span>Geschlossen</span></div> + </div> + <div class="loc-cta"> + <a href="#booking" class="btn btn-primary" onclick="switchLocation('kufstein')">📅 Buchen</a> + <a href="https://wa.me/43XXXXXXXXXXX" class="btn btn-whatsapp" target="_blank">💬 WhatsApp</a> + </div> + </div> + </div> + </div> + </section> + + <!-- ===== FOOTER ===== --> + <footer> + <div class="footer-links"> + <a href="#">Impressum</a> + <a href="#">Datenschutzerklärung</a> + <a href="#">AGB</a> + <a href="#">Widerrufsbelehrung</a> + <a href="#booking">Termin buchen</a> + </div> + <div class="copyright"> + © 2026 Thai Massage Kiefersfelden & Kufstein · Alle Rechte vorbehalten + </div> + </footer> + + <!-- ===== FLOATING WHATSAPP BUTTON ===== --> + <a href="https://wa.me/49XXXXXXXXXXX?text=Hallo,%20ich%20möchte%20gern%20einen%20Termin%20buchen" + class="wa-float" target="_blank" title="WhatsApp Nachricht senden">💬</a> + + <!-- ===== COOKIE BANNER ===== --> + <div class="cookie-banner" id="cookieBanner"> + <p>Wir verwenden Cookies, um Ihnen die bestmögliche Erfahrung zu bieten. Mit der Nutzung unserer Webseite stimmen Sie der Verwendung von Cookies zu. + <a href="#">Mehr Informationen</a></p> + <div class="cookie-buttons"> + <button class="cookie-btn reject" onclick="hideCookies('rejected')">Ablehnen</button> + <button class="cookie-btn accept" onclick="hideCookies('accepted')">Alle akzeptieren</button> + </div> + </div> + + <!-- ===== SCRIPTS ===== --> + <script> + // Location switcher + const locations = { + kiefersfelden: { + badge: '📍 Kiefersfelden', + widgetUrl: 'https://thaimassage-kiefersfelden.massagebooking.de/widget' + }, + kufstein: { + badge: '📍 Kufstein', + widgetUrl: 'https://thaimassage-kufstein.massagebooking.de/widget' + } + }; + + function switchLocation(loc) { + // Update buttons + document.querySelectorAll('.loc-btn').forEach(btn => btn.classList.remove('active')); + + // Find the right button + const buttons = document.querySelectorAll('.loc-btn'); + buttons.forEach(btn => { + const text = btn.textContent.toLowerCase(); + if (text.includes(loc.toLowerCase())) { + btn.classList.add('active'); + } + }); + + // Update badge + const badge = document.getElementById('loc-badge'); + badge.textContent = locations[loc].badge; + + // In production: reload the iFrame with the correct location's booking URL + // const iframe = document.getElementById('booking-iframe'); + // iframe.src = locations[loc].widgetUrl; + + console.log('Switched to:', loc, locations[loc].widgetUrl); + } + + // Cookie banner + function hideCookies(choice) { + document.getElementById('cookieBanner').style.display = 'none'; + console.log('Cookie choice:', choice); + // In production: store in localStorage / cookie consent tool + } + + // Smooth scroll for anchor links + document.querySelectorAll('a[href^="#"]').forEach(anchor => { + anchor.addEventListener('click', function(e) { + const target = document.querySelector(this.getAttribute('href')); + if (target) { + e.preventDefault(); + target.scrollIntoView({ behavior: 'smooth' }); + } + }); + }); + </script> + +</body> +</html>
\ No newline at end of file |