aboutsummaryrefslogtreecommitdiff
path: root/downloads/thai-massage-booking-mockup.html
diff options
context:
space:
mode:
authorAgando <roduccomm@gmail.com>2026-08-06 05:01:13 +0200
committerAgando <roduccomm@gmail.com>2026-08-06 05:01:13 +0200
commitd4abdf3d7764bf4362a16261d0ebf151a15926f7 (patch)
tree7c80e35e5d8eeeb5501dd6f2f8e6b1a4471d6ea6 /downloads/thai-massage-booking-mockup.html
parent17c2d8bc91d99eb9f102254bcd650204c5c9426c (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.html925
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>&lt;iframe src="https://thaimassage.massagebooking.de/widget"
+ width="100%" height="500" frameborder="0"&gt;
+&lt;/iframe&gt;</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