mivanchenko
e151bbd734
Floating button + centered modal on every page, opened from the demo bar and a fixed FAB. Minimal required fields (name + phone), optional business / what-they-want / message. POSTs to the lead-intake webhook (client_id DEMO/DEMO-A/DEMO-B, source callback-*). Also refreshes the stale "noch nicht aktiv" notices now that the forms are live. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
466 lines
30 KiB
HTML
466 lines
30 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
<title>PhysioVital — Praxis für Physiotherapie | Termin online buchen</title>
|
||
<meta name="description" content="Physiotherapie, Manuelle Therapie und Krankengymnastik in Erlangen. Online Termin buchen — Ihre Gesundheitsdaten bleiben in Deutschland." />
|
||
<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=Fraunces:opsz,wght@9..144,500;9..144,600&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
|
||
<style>
|
||
:root {
|
||
--bg: #f6f8f8;
|
||
--surface: #ffffff;
|
||
--ink: #16302f;
|
||
--muted: #5d716f;
|
||
--teal: #0f8a7e;
|
||
--teal-2: #0b6b62;
|
||
--teal-soft: #e4f3f1;
|
||
--sand: #f3efe7;
|
||
--line: #e3eae9;
|
||
--radius: 16px;
|
||
--shadow: 0 16px 44px rgba(16,48,47,.10);
|
||
}
|
||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||
html { scroll-behavior: smooth; }
|
||
body { font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif; background: var(--bg); color: var(--ink); line-height: 1.65; -webkit-font-smoothing: antialiased; }
|
||
h1, h2, h3 { font-family: 'Fraunces', Georgia, serif; line-height: 1.12; font-weight: 600; }
|
||
a { color: inherit; text-decoration: none; }
|
||
.wrap { width: min(1120px, 92vw); margin-inline: auto; }
|
||
section { padding: 90px 0; }
|
||
.eyebrow { color: var(--teal); font-weight: 600; letter-spacing: 2px; text-transform: uppercase; font-size: .72rem; }
|
||
|
||
/* demo ribbon */
|
||
.demo-bar { background: #0c2b29; color: #9fe6dc; font-size: .76rem; letter-spacing: 1px; text-align: center; padding: 7px 12px; }
|
||
|
||
/* nav */
|
||
header.nav { position: sticky; top: 0; z-index: 50; background: rgba(246,248,248,.85); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
|
||
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 72px; }
|
||
.brand { display: flex; align-items: center; gap: 9px; font-family: 'Fraunces', serif; font-size: 1.4rem; font-weight: 600; }
|
||
.brand .logo { width: 30px; height: 30px; border-radius: 9px; background: linear-gradient(135deg, var(--teal), var(--teal-2)); display: grid; place-items: center; color: #fff; font-size: 1rem; }
|
||
nav ul { display: flex; gap: 28px; list-style: none; align-items: center; }
|
||
nav a { color: var(--muted); font-size: .92rem; font-weight: 500; transition: color .2s; }
|
||
nav a:hover { color: var(--ink); }
|
||
.btn { display: inline-block; background: var(--teal); color: #fff; font-weight: 600; padding: 12px 22px; border-radius: 999px; border: 0; cursor: pointer; font-size: .95rem; transition: transform .15s, background .2s; }
|
||
.btn:hover { transform: translateY(-2px); background: var(--teal-2); }
|
||
.btn.ghost { background: #fff; color: var(--teal-2); border: 1px solid var(--line); }
|
||
.nav-toggle { display: none; background: none; border: 0; color: var(--ink); font-size: 1.6rem; cursor: pointer; }
|
||
|
||
/* hero */
|
||
.hero { background: linear-gradient(180deg, #fff 0%, var(--bg) 100%); border-bottom: 1px solid var(--line); }
|
||
.hero-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 50px; align-items: center; padding: 78px 0 86px; }
|
||
.hero h1 { font-size: clamp(2.5rem, 5.4vw, 3.9rem); margin: 16px 0 0; }
|
||
.hero h1 em { font-style: italic; color: var(--teal-2); }
|
||
.hero p { color: var(--muted); font-size: 1.12rem; margin: 18px 0 28px; max-width: 480px; }
|
||
.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; }
|
||
.trust-row { margin-top: 30px; display: flex; gap: 22px; flex-wrap: wrap; align-items: center; color: var(--muted); font-size: .88rem; }
|
||
.pill { background: var(--teal-soft); color: var(--teal-2); padding: 6px 13px; border-radius: 999px; font-weight: 600; font-size: .82rem; }
|
||
.hero-card { background: var(--surface); border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--shadow); padding: 26px; }
|
||
.hero-card h3 { font-family: 'Inter'; font-size: .8rem; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); font-weight: 700; }
|
||
.mini-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin: 16px 0 6px; }
|
||
.mini-cal span { text-align: center; font-size: .72rem; color: var(--muted); padding: 6px 0; }
|
||
.mini-cal b { text-align: center; font-size: .82rem; padding: 8px 0; border-radius: 8px; background: var(--bg); cursor: pointer; font-weight: 500; }
|
||
.mini-cal b.free { background: var(--teal-soft); color: var(--teal-2); font-weight: 700; }
|
||
.mini-cal b.sel { background: var(--teal); color: #fff; }
|
||
|
||
/* services */
|
||
.sec-head { max-width: 640px; margin-bottom: 46px; }
|
||
.sec-head h2 { font-size: clamp(2rem, 4.6vw, 2.9rem); margin-top: 8px; }
|
||
.sec-head p { color: var(--muted); margin-top: 10px; }
|
||
.grid { display: grid; gap: 18px; }
|
||
.services { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
|
||
.svc { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; transition: transform .18s, box-shadow .2s; }
|
||
.svc:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
|
||
.svc .ic { width: 46px; height: 46px; border-radius: 12px; background: var(--teal-soft); display: grid; place-items: center; font-size: 1.4rem; }
|
||
.svc h3 { font-size: 1.3rem; margin: 16px 0 6px; }
|
||
.svc p { color: var(--muted); font-size: .92rem; }
|
||
|
||
/* privacy band */
|
||
.privacy { background: linear-gradient(135deg, #0c2b29, #134a44); color: #eafaf7; border-radius: 0; }
|
||
.privacy-grid { display: grid; grid-template-columns: auto 1fr; gap: 34px; align-items: center; }
|
||
.shield { width: 96px; height: 96px; border-radius: 24px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); display: grid; place-items: center; font-size: 3rem; }
|
||
.privacy h2 { color: #fff; font-size: clamp(1.8rem, 4vw, 2.6rem); }
|
||
.privacy p { color: #b9ded8; margin-top: 12px; max-width: 620px; }
|
||
.badges { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 20px; }
|
||
.badge { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); border-radius: 999px; padding: 8px 15px; font-size: .82rem; font-weight: 600; color: #eafaf7; }
|
||
|
||
/* booking (Cal.com style) */
|
||
.booking { background: var(--sand); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
|
||
.booking-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: 40px; align-items: center; }
|
||
.cal { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
|
||
.cal-top { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--line); }
|
||
.cal-top .who { display: flex; align-items: center; gap: 10px; }
|
||
.cal-top .av { width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg,var(--teal),var(--teal-2)); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: .8rem; }
|
||
.cal-top small { color: var(--muted); }
|
||
.cal-body { display: grid; grid-template-columns: 1fr 150px; }
|
||
.cal-days { padding: 18px; border-right: 1px solid var(--line); }
|
||
.cal-days .row { display: grid; grid-template-columns: repeat(7,1fr); gap: 6px; }
|
||
.cal-days .row span { text-align: center; font-size: .7rem; color: var(--muted); padding: 4px 0; }
|
||
.cal-days .row b { text-align: center; font-size: .82rem; padding: 9px 0; border-radius: 8px; cursor: pointer; font-weight: 500; }
|
||
.cal-days .row b.free { background: var(--teal-soft); color: var(--teal-2); font-weight: 700; }
|
||
.cal-days .row b.sel { background: var(--teal); color: #fff; }
|
||
.cal-times { padding: 18px; display: flex; flex-direction: column; gap: 8px; }
|
||
.cal-times .t { border: 1px solid var(--teal); color: var(--teal-2); text-align: center; padding: 9px 0; border-radius: 8px; font-size: .85rem; font-weight: 600; cursor: pointer; transition: .15s; }
|
||
.cal-times .t:hover { background: var(--teal); color: #fff; }
|
||
.cal-foot { padding: 8px 20px 14px; color: var(--muted); font-size: .74rem; border-top: 1px solid var(--line); }
|
||
|
||
/* contact */
|
||
.contact { background: var(--bg); }
|
||
form.lead { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; max-width: 560px; box-shadow: var(--shadow); }
|
||
.field { margin-bottom: 16px; }
|
||
.field label { display: block; font-size: .85rem; color: var(--muted); margin-bottom: 6px; }
|
||
.field input, .field textarea, .field select { width: 100%; background: #fbfdfc; border: 1px solid var(--line); border-radius: 10px; color: var(--ink); padding: 12px 14px; font: inherit; font-size: .95rem; }
|
||
.field input:focus, .field textarea:focus, .field select:focus { outline: 2px solid var(--teal); border-color: var(--teal); }
|
||
.consent { display: flex; gap: 10px; align-items: flex-start; font-size: .82rem; color: var(--muted); }
|
||
.form-note { font-size: .78rem; color: var(--muted); margin-top: 10px; }
|
||
.toast { display: none; margin-top: 14px; padding: 12px 14px; border-radius: 10px; background: var(--teal-soft); border: 1px solid var(--teal); color: var(--teal-2); font-size: .9rem; }
|
||
|
||
/* footer */
|
||
footer { padding: 54px 0 40px; border-top: 1px solid var(--line); color: var(--muted); font-size: .9rem; background: var(--surface); }
|
||
.foot-grid { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 24px; }
|
||
|
||
/* AI receptionist bubble */
|
||
.chat-fab { position: fixed; right: 22px; bottom: 22px; z-index: 90; width: 60px; height: 60px; border-radius: 50%; background: var(--teal); color: #fff; border: 0; font-size: 1.5rem; cursor: pointer; box-shadow: 0 12px 30px rgba(15,138,126,.45); transition: transform .15s; }
|
||
.chat-fab:hover { transform: scale(1.06); }
|
||
.chat-panel { position: fixed; right: 22px; bottom: 92px; z-index: 90; width: min(340px, 88vw); background: var(--surface); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 24px 60px rgba(16,48,47,.25); overflow: hidden; display: none; }
|
||
.chat-panel.open { display: block; }
|
||
.chat-head { background: linear-gradient(135deg,var(--teal),var(--teal-2)); color: #fff; padding: 16px 18px; }
|
||
.chat-head b { font-family: 'Fraunces', serif; font-size: 1.05rem; }
|
||
.chat-head small { display: block; opacity: .85; font-size: .76rem; margin-top: 2px; }
|
||
.chat-body { padding: 16px; display: flex; flex-direction: column; gap: 10px; max-height: 280px; }
|
||
.msg { padding: 10px 13px; border-radius: 13px; font-size: .88rem; max-width: 85%; }
|
||
.msg.bot { background: var(--teal-soft); color: var(--ink); border-bottom-left-radius: 4px; align-self: flex-start; }
|
||
.msg.user { background: var(--teal); color: #fff; border-bottom-right-radius: 4px; align-self: flex-end; }
|
||
.chat-input { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--line); }
|
||
.chat-input input { flex: 1; border: 1px solid var(--line); border-radius: 999px; padding: 9px 14px; font: inherit; font-size: .88rem; }
|
||
.chat-input button { background: var(--teal); border: 0; color: #fff; border-radius: 50%; width: 38px; height: 38px; cursor: pointer; }
|
||
.chat-foot { text-align: center; font-size: .68rem; color: var(--muted); padding: 0 0 10px; }
|
||
|
||
@media (max-width: 820px) {
|
||
nav ul { display: none; }
|
||
.nav-toggle { display: block; }
|
||
nav.open ul { display: flex; position: absolute; inset: 72px 0 auto 0; flex-direction: column; background: var(--surface); padding: 18px 6vw; gap: 18px; border-bottom: 1px solid var(--line); }
|
||
.hero-grid, .booking-grid, .privacy-grid { grid-template-columns: 1fr; }
|
||
.privacy-grid { text-align: center; }
|
||
.shield { margin: 0 auto; }
|
||
section { padding: 64px 0; }
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="demo-bar">Demo · Tier B (Self-Hosted / Datenschutz) — Beispielseite <button class="cb-open" type="button" onclick="cbOpen()">📞 Rückruf anfordern</button></div>
|
||
|
||
<header class="nav">
|
||
<div class="wrap nav-inner">
|
||
<a href="#top" class="brand"><span class="logo">＋</span> PhysioVital</a>
|
||
<nav id="nav">
|
||
<ul>
|
||
<li><a href="#leistungen">Leistungen</a></li>
|
||
<li><a href="#datenschutz">Datenschutz</a></li>
|
||
<li><a href="#buchen">Termin</a></li>
|
||
<li><a href="#kontakt">Kontakt</a></li>
|
||
<li><a href="#buchen" class="btn">Termin buchen</a></li>
|
||
</ul>
|
||
</nav>
|
||
<button class="nav-toggle" aria-label="Menü" onclick="document.getElementById('nav').classList.toggle('open')">☰</button>
|
||
</div>
|
||
</header>
|
||
|
||
<main id="top">
|
||
<!-- HERO -->
|
||
<section class="hero">
|
||
<div class="wrap hero-grid">
|
||
<div>
|
||
<span class="eyebrow">Praxis für Physiotherapie · Erlangen</span>
|
||
<h1>Beweglich bleiben.<br><em>Schmerzfrei leben.</em></h1>
|
||
<p>Physiotherapie, Manuelle Therapie und Krankengymnastik — individuell, evidenzbasiert und mit Zeit für Sie. Termine online, ganz ohne Wartezeit am Telefon.</p>
|
||
<div class="hero-cta">
|
||
<a href="#buchen" class="btn">Termin online buchen</a>
|
||
<a href="#leistungen" class="btn ghost">Unsere Leistungen</a>
|
||
</div>
|
||
<div class="trust-row">
|
||
<span class="pill">🔒 Daten in Deutschland gehostet</span>
|
||
<span>Alle Kassen & privat</span>
|
||
<span>⭐ 4,9 / 5</span>
|
||
</div>
|
||
</div>
|
||
<aside class="hero-card">
|
||
<h3>Nächste freie Termine</h3>
|
||
<div class="mini-cal">
|
||
<span>Mo</span><span>Di</span><span>Mi</span><span>Do</span><span>Fr</span><span>Sa</span><span>So</span>
|
||
<b>23</b><b class="free">24</b><b class="sel">25</b><b class="free">26</b><b class="free">27</b><b>28</b><b style="opacity:.4">29</b>
|
||
</div>
|
||
<p class="form-note" style="margin-top:14px;">Mi, 25. Juni — freie Zeiten:</p>
|
||
<div style="display:flex;gap:8px;flex-wrap:wrap;margin-top:8px;">
|
||
<span class="pill" style="background:#fff;border:1px solid var(--teal);">08:30</span>
|
||
<span class="pill" style="background:#fff;border:1px solid var(--teal);">11:00</span>
|
||
<span class="pill" style="background:#fff;border:1px solid var(--teal);">15:30</span>
|
||
</div>
|
||
<a href="#buchen" class="btn" style="width:100%;text-align:center;margin-top:18px;">Diesen Termin wählen</a>
|
||
</aside>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- SERVICES -->
|
||
<section id="leistungen">
|
||
<div class="wrap">
|
||
<div class="sec-head">
|
||
<span class="eyebrow">Leistungen</span>
|
||
<h2>Therapie, die zu Ihnen passt</h2>
|
||
<p>Von der akuten Verletzung bis zur langfristigen Prävention — wir begleiten Sie auf dem ganzen Weg.</p>
|
||
</div>
|
||
<div class="grid services">
|
||
<article class="svc"><div class="ic">🖐️</div><h3>Manuelle Therapie</h3><p>Gezielte Mobilisation von Gelenken und Muskulatur bei Bewegungseinschränkungen.</p></article>
|
||
<article class="svc"><div class="ic">🏃</div><h3>Krankengymnastik</h3><p>Aktive Übungstherapie zur Wiederherstellung von Kraft, Stabilität und Beweglichkeit.</p></article>
|
||
<article class="svc"><div class="ic">💆</div><h3>Massage & Lymphdrainage</h3><p>Lösen von Verspannungen und Förderung des Lymphabflusses nach OPs oder Verletzungen.</p></article>
|
||
<article class="svc"><div class="ic">🧘</div><h3>Prävention</h3><p>Rückenschule und Trainingsberatung, damit Beschwerden gar nicht erst entstehen.</p></article>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- PRIVACY BAND -->
|
||
<section class="privacy" id="datenschutz">
|
||
<div class="wrap privacy-grid">
|
||
<div class="shield">🛡️</div>
|
||
<div>
|
||
<span class="eyebrow" style="color:#7fd8cb">Datenschutz by Design</span>
|
||
<h2>Ihre Gesundheitsdaten bleiben in Deutschland.</h2>
|
||
<p>Buchungen, Kontaktanfragen und Patientendaten laufen über unsere eigene, in Deutschland gehostete Infrastruktur — keine Weitergabe an Werbenetzwerke, kein Tracking durch Dritte. Verschlüsselt übertragen, vom ersten Klick an.</p>
|
||
<div class="badges">
|
||
<span class="badge">🇩🇪 Hosting in Deutschland</span>
|
||
<span class="badge">🔐 Verschlüsselte Übertragung (TLS)</span>
|
||
<span class="badge">🍪 Keine Cookies von Dritten</span>
|
||
<span class="badge">🚫 Kein Drittanbieter-Tracking</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- BOOKING (Cal.com style) -->
|
||
<section class="booking" id="buchen">
|
||
<div class="wrap booking-grid">
|
||
<div>
|
||
<span class="eyebrow">Termin buchen</span>
|
||
<h2 style="font-size:clamp(2rem,4.6vw,2.9rem);margin:8px 0 12px;">In drei Klicks zum Termin.</h2>
|
||
<p style="color:var(--muted);max-width:420px;">Wählen Sie Behandlung, Tag und Uhrzeit — Sie erhalten sofort eine verschlüsselte Bestätigung. Erinnerung folgt automatisch, Umbuchung jederzeit möglich.</p>
|
||
<p class="form-note" style="margin-top:18px;">Self-hosted Buchung — läuft in der Live-Version über Ihre eigene Cal.com-Instanz auf der Praxis-Infrastruktur.</p>
|
||
</div>
|
||
<!-- Tier B: in der Live-Version ist hier die self-hosted Cal.com-Instanz eingebettet. -->
|
||
<div class="cal">
|
||
<div class="cal-top">
|
||
<div class="who"><span class="av">PV</span><div><b style="font-family:'Inter';font-weight:600;">Physiotherapie · 30 Min</b><br><small>PhysioVital Erlangen</small></div></div>
|
||
<small>🔒 self-hosted</small>
|
||
</div>
|
||
<div class="cal-body">
|
||
<div class="cal-days">
|
||
<div class="row" style="margin-bottom:6px;"><span>Mo</span><span>Di</span><span>Mi</span><span>Do</span><span>Fr</span><span>Sa</span><span>So</span></div>
|
||
<div class="row">
|
||
<b style="opacity:.3">21</b><b style="opacity:.3">22</b><b>23</b><b class="free">24</b><b class="sel">25</b><b class="free">26</b><b class="free">27</b>
|
||
</div>
|
||
</div>
|
||
<div class="cal-times">
|
||
<div class="t">08:30</div>
|
||
<div class="t">11:00</div>
|
||
<div class="t">15:30</div>
|
||
<div class="t">16:15</div>
|
||
</div>
|
||
</div>
|
||
<div class="cal-foot">Zeitzone: Europa/Berlin · Demo-Vorschau</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- CONTACT -->
|
||
<section class="contact" id="kontakt">
|
||
<div class="wrap">
|
||
<div class="sec-head">
|
||
<span class="eyebrow">Kontakt</span>
|
||
<h2>Rezept einreichen oder Frage stellen</h2>
|
||
<p>Schreiben Sie uns — wir melden uns zeitnah und vertraulich zurück.</p>
|
||
</div>
|
||
<!-- Tier B: dieses Formular postet an einen n8n-Webhook -> CRM (Leads) + Telegram. -->
|
||
<form class="lead" onsubmit="return submitLead(event, this)">
|
||
<input type="hidden" name="client_id" value="DEMO-B" />
|
||
<input type="hidden" name="source" value="demo-tier-b" />
|
||
<div class="field"><label for="b-name">Name</label><input id="b-name" name="name" type="text" placeholder="Maria Musterfrau" required /></div>
|
||
<div class="field"><label for="b-contact">E-Mail oder Telefon</label><input id="b-contact" name="contact" type="text" placeholder="maria@example.de" required /></div>
|
||
<div class="field"><label for="b-svc">Anliegen</label>
|
||
<select id="b-svc" name="service"><option>Neuer Termin</option><option>Rezept einreichen</option><option>Manuelle Therapie</option><option>Krankengymnastik</option><option>Sonstiges</option></select>
|
||
</div>
|
||
<div class="field"><label for="b-msg">Nachricht</label><textarea id="b-msg" name="message" rows="3" placeholder="Ihr Anliegen, Wunschtermin, Diagnose laut Rezept …"></textarea></div>
|
||
<div class="field consent"><input type="checkbox" id="b-consent" style="width:auto;margin-top:4px;" required /><label for="b-consent" style="margin:0;">Ich willige ein, dass meine Angaben zur Bearbeitung meiner Anfrage verarbeitet werden. Die Daten werden verschlüsselt in Deutschland gespeichert.</label></div>
|
||
<button class="btn" type="submit">Anfrage sicher senden</button>
|
||
<div class="toast">✓ Danke! Demo-Formular — in der Live-Version landet Ihre Anfrage verschlüsselt im Praxis-CRM.</div>
|
||
</form>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
|
||
<footer>
|
||
<div class="wrap foot-grid">
|
||
<div>
|
||
<div class="brand" style="margin-bottom:8px;"><span class="logo">＋</span> PhysioVital</div>
|
||
<p>Hauptstraße 12 · 91054 Erlangen</p>
|
||
</div>
|
||
<div><p><b style="color:var(--ink)">Sprechzeiten</b></p><p>Mo–Fr 08–19 Uhr</p></div>
|
||
<div><p><b style="color:var(--ink)">Kontakt</b></p><p>09131 000000 · praxis@physiovital-er.de</p></div>
|
||
</div>
|
||
<div class="wrap" style="margin-top:30px;opacity:.7;font-size:.8rem;">© 2026 PhysioVital · Demo-Seite · 🇩🇪 Daten in Deutschland · Impressum · Datenschutz</div>
|
||
</footer>
|
||
|
||
<!-- AI RECEPTIONIST (placeholder for Phase 6 — Claude Haiku 4.5) -->
|
||
<button class="chat-fab" aria-label="Online-Rezeption öffnen" onclick="document.getElementById('chat').classList.toggle('open')">💬</button>
|
||
<div class="chat-panel" id="chat">
|
||
<div class="chat-head"><b>Online-Rezeption</b><small>Meist sofort eine Antwort</small></div>
|
||
<div class="chat-body">
|
||
<div class="msg bot">Hallo! 👋 Ich bin die digitale Rezeption von PhysioVital. Wie kann ich helfen?</div>
|
||
<div class="msg user">Habt ihr diese Woche noch einen Termin frei?</div>
|
||
<div class="msg bot">Ja — am Mittwoch um 11:00 oder 15:30. Soll ich einen davon für Sie vormerken?</div>
|
||
</div>
|
||
<div class="chat-input"><input type="text" placeholder="Nachricht schreiben …" /><button aria-label="Senden">➤</button></div>
|
||
<div class="chat-foot">Demo — in der Live-Version KI-gestützt (Claude)</div>
|
||
</div>
|
||
<script>
|
||
// Lead-Formular -> n8n Webhook -> CRM (Leads) + Telegram-Benachrichtigung.
|
||
const LEAD_WEBHOOK = 'https://n8n.mivanchenko.de/webhook/lead-intake';
|
||
async function submitLead(e, form) {
|
||
e.preventDefault();
|
||
const btn = form.querySelector('button[type=submit]');
|
||
const toast = form.querySelector('.toast');
|
||
const data = Object.fromEntries(new FormData(form).entries());
|
||
const old = btn.textContent;
|
||
btn.disabled = true; btn.textContent = 'Senden…';
|
||
try {
|
||
const r = await fetch(LEAD_WEBHOOK, {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify(data),
|
||
});
|
||
if (!r.ok) throw new Error(r.status);
|
||
toast.textContent = '✓ Danke! Ihre Anfrage ist eingegangen — wir melden uns.';
|
||
toast.style.display = 'block';
|
||
form.reset();
|
||
} catch (err) {
|
||
toast.textContent = '⚠ Senden fehlgeschlagen — bitte erneut versuchen oder direkt anrufen.';
|
||
toast.style.display = 'block';
|
||
} finally {
|
||
btn.disabled = false; btn.textContent = old;
|
||
}
|
||
return false;
|
||
}
|
||
</script>
|
||
<script>window.CB_CTX = { client_id: "DEMO-B", source: "callback-tier-b" };</script>
|
||
<!-- ===== Rückruf-Widget (lead capture popup) ===== -->
|
||
<style>
|
||
.cb-fab { position: fixed; right: 18px; bottom: 18px; z-index: 900; background: #0f8a7e; color: #fff; border: 0; border-radius: 999px; padding: 13px 20px; font: 600 .95rem system-ui, -apple-system, Segoe UI, Roboto, sans-serif; box-shadow: 0 10px 26px rgba(0,0,0,.28); cursor: pointer; transition: transform .15s, background .2s; }
|
||
.cb-fab:hover { transform: translateY(-2px); background: #0b6b62; }
|
||
.cb-overlay { position: fixed; inset: 0; z-index: 1000; background: rgba(8,20,19,.55); backdrop-filter: blur(3px); display: none; align-items: center; justify-content: center; padding: 18px; }
|
||
.cb-overlay.open { display: flex; }
|
||
.cb-modal { position: relative; width: min(440px, 100%); background: #fff; color: #16302f; border-radius: 16px; box-shadow: 0 24px 60px rgba(0,0,0,.35); padding: 28px 26px 22px; font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; max-height: 92vh; overflow: auto; animation: cbIn .18s ease; }
|
||
@keyframes cbIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
|
||
.cb-modal h3 { margin: 0 0 4px; font-size: 1.35rem; }
|
||
.cb-sub { margin: 0 0 18px; color: #5d716f; font-size: .9rem; }
|
||
.cb-x { position: absolute; top: 10px; right: 13px; background: none; border: 0; font-size: 1.7rem; line-height: 1; color: #9fb0ad; cursor: pointer; }
|
||
.cb-x:hover { color: #16302f; }
|
||
.cb-modal label { display: block; font-size: .82rem; font-weight: 600; margin-bottom: 13px; }
|
||
.cb-modal label .o { color: #9aa7a5; font-weight: 400; }
|
||
.cb-modal input, .cb-modal textarea { width: 100%; margin-top: 5px; font: inherit; font-size: .94rem; color: #16302f; background: #f6f8f8; border: 1px solid #e3eae9; border-radius: 9px; padding: 10px 12px; resize: vertical; }
|
||
.cb-modal input:focus, .cb-modal textarea:focus { outline: none; border-color: #0f8a7e; background: #fff; }
|
||
.cb-submit { width: 100%; margin-top: 4px; background: #0f8a7e; color: #fff; border: 0; border-radius: 999px; padding: 13px; font: 600 1rem system-ui; cursor: pointer; transition: background .2s; }
|
||
.cb-submit:hover { background: #0b6b62; }
|
||
.cb-submit:disabled { opacity: .6; cursor: default; }
|
||
.cb-toast { display: none; margin-top: 14px; padding: 11px 13px; border-radius: 9px; font-size: .88rem; font-weight: 500; }
|
||
.cb-toast.ok { background: #e3f6ec; color: #0c6b3c; border: 1px solid #b8e6cc; }
|
||
.cb-toast.err { background: #fdecec; color: #9b2226; border: 1px solid #f3c7c7; }
|
||
.cb-open { margin-left: 10px; background: rgba(255,255,255,.16); color: inherit; border: 1px solid rgba(255,255,255,.34); border-radius: 999px; padding: 3px 13px; font: 600 .74rem system-ui; cursor: pointer; letter-spacing: .4px; vertical-align: middle; }
|
||
.cb-open:hover { background: rgba(255,255,255,.30); }
|
||
@media (max-width: 560px) { .cb-fab { right: 12px; bottom: 12px; padding: 11px 17px; } }
|
||
</style>
|
||
|
||
<button class="cb-fab" type="button" onclick="cbOpen()" aria-label="Rückruf anfordern">📞 Rückruf</button>
|
||
|
||
<div class="cb-overlay" id="cbOverlay" onclick="cbBg(event)">
|
||
<div class="cb-modal" role="dialog" aria-modal="true" aria-labelledby="cbTitle">
|
||
<button class="cb-x" type="button" onclick="cbClose()" aria-label="Schließen">×</button>
|
||
<h3 id="cbTitle">Rückruf anfordern</h3>
|
||
<p class="cb-sub">Name & Nummer genügen — wir melden uns bei Ihnen. Alles andere ist optional.</p>
|
||
<form onsubmit="return cbSubmit(event, this)">
|
||
<input type="hidden" name="client_id" />
|
||
<input type="hidden" name="source" />
|
||
<label>Name *
|
||
<input name="name" required autocomplete="name" placeholder="Vor- und Nachname" />
|
||
</label>
|
||
<label>Telefon *
|
||
<input name="phone" required autocomplete="tel" inputmode="tel" placeholder="+49 …" />
|
||
</label>
|
||
<label>Ihr Betrieb <span class="o">(optional)</span>
|
||
<input name="business" placeholder="z. B. Café Lichtblick" />
|
||
</label>
|
||
<label>Was sollen wir für Sie umsetzen? <span class="o">(optional)</span>
|
||
<input name="service" placeholder="Website, Online-Buchung, Rückruf-Service …" />
|
||
</label>
|
||
<label>Nachricht <span class="o">(optional)</span>
|
||
<textarea name="message" rows="2" placeholder="Worum geht es?"></textarea>
|
||
</label>
|
||
<button class="cb-submit" type="submit">Rückruf anfordern</button>
|
||
<div class="cb-toast" id="cbToast"></div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
const CB_WEBHOOK = 'https://n8n.mivanchenko.de/webhook/lead-intake';
|
||
const cbCtx = window.CB_CTX || { client_id: 'DEMO', source: 'callback' };
|
||
function cbOpen() {
|
||
const o = document.getElementById('cbOverlay');
|
||
o.querySelector('[name=client_id]').value = cbCtx.client_id;
|
||
o.querySelector('[name=source]').value = cbCtx.source;
|
||
o.classList.add('open');
|
||
document.body.style.overflow = 'hidden';
|
||
setTimeout(() => o.querySelector('[name=name]').focus(), 60);
|
||
}
|
||
function cbClose() {
|
||
document.getElementById('cbOverlay').classList.remove('open');
|
||
document.body.style.overflow = '';
|
||
}
|
||
function cbBg(e) { if (e.target.id === 'cbOverlay') cbClose(); }
|
||
document.addEventListener('keydown', e => { if (e.key === 'Escape') cbClose(); });
|
||
async function cbSubmit(e, form) {
|
||
e.preventDefault();
|
||
const btn = form.querySelector('.cb-submit');
|
||
const toast = document.getElementById('cbToast');
|
||
const d = Object.fromEntries(new FormData(form).entries());
|
||
let msg = (d.message || '').trim();
|
||
if (d.business) msg = (msg ? msg + ' — ' : '') + 'Betrieb: ' + d.business;
|
||
const payload = {
|
||
client_id: d.client_id, source: d.source,
|
||
name: d.name, phone: d.phone,
|
||
service_interest: d.service || '', message: msg
|
||
};
|
||
const old = btn.textContent;
|
||
btn.disabled = true; btn.textContent = 'Senden…';
|
||
toast.style.display = 'none';
|
||
try {
|
||
const r = await fetch(CB_WEBHOOK, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(payload) });
|
||
if (!r.ok) throw new Error(r.status);
|
||
toast.className = 'cb-toast ok';
|
||
toast.textContent = '✓ Danke! Wir rufen Sie zurück.';
|
||
toast.style.display = 'block';
|
||
form.reset();
|
||
setTimeout(cbClose, 2200);
|
||
} catch (err) {
|
||
toast.className = 'cb-toast err';
|
||
toast.textContent = '⚠ Senden fehlgeschlagen. Bitte erneut versuchen.';
|
||
toast.style.display = 'block';
|
||
} finally {
|
||
btn.disabled = false; btn.textContent = old;
|
||
}
|
||
return false;
|
||
}
|
||
</script>
|
||
<!-- ===== /Rückruf-Widget ===== -->
|
||
|
||
</body>
|
||
</html>
|