mivanchenko
cde0cb0fa8
- New demo-pizzeria (Bella Napoli): interactive menu -> cart (qty +/-, live total) -> order form (pickup/delivery, address, time, notes) that POSTs the order summary to the lead-intake webhook (client_id DEMO-PIZZA, source order-pizzeria). Verified end-to-end (~5s). - Fix barbershop "Google Kalender" header: the 3 dots were faked via box-shadow with no layout width, so text overlapped them. Reserve space. - Chooser: client-friendly wording (no "self-hosted"/Cal.com jargon, no "~0 EUR"), reframed as example businesses, 3-up responsive layout. - TODO.md: decouple tier from business type; demos as stack-agnostic starters; hosting (Google vs self-host) decided per client. Plus notes on n8n auth hardening and a real Orders flow/tab. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
163 lines
9.5 KiB
HTML
163 lines
9.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>smb-online — Demo-Auswahl</title>
|
|
<style>
|
|
* { box-sizing: border-box; }
|
|
body { font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; background: #0f1419; color: #e7edf2; margin: 0; min-height: 100vh; display: grid; place-items: center; padding: 40px 20px; }
|
|
.box { width: min(980px, 100%); }
|
|
h1 { font-size: 1.7rem; margin: 0 0 6px; }
|
|
p.sub { color: #93a1ad; margin: 0 0 32px; }
|
|
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px; }
|
|
a.card { display: block; text-decoration: none; color: inherit; background: #182029; border: 1px solid #26303b; border-radius: 16px; padding: 26px; transition: transform .15s, border-color .2s; }
|
|
a.card:hover { transform: translateY(-4px); }
|
|
.a:hover { border-color: #c8a05a; }
|
|
.b:hover { border-color: #0f8a7e; }
|
|
.c:hover { border-color: #e0533a; }
|
|
.tag { font-size: .72rem; letter-spacing: 2px; text-transform: uppercase; font-weight: 700; }
|
|
.a .tag { color: #c8a05a; }
|
|
.b .tag { color: #2bb3a3; }
|
|
.c .tag { color: #f0795f; }
|
|
.card h2 { margin: 10px 0 6px; font-size: 1.3rem; }
|
|
.card span { color: #93a1ad; font-size: .92rem; }
|
|
@media (max-width: 640px) { .cards { grid-template-columns: 1fr; } }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="box">
|
|
<h1>smb-online — Beispielseiten</h1>
|
|
<p class="sub">So könnte Ihr Online-Auftritt aussehen — drei Beispiele aus verschiedenen Branchen. Klicken Sie sich durch, dann sprechen wir über Ihren. <button class="cb-open" type="button" onclick="cbOpen()" style="margin-left:0">📞 Rückruf anfordern</button></p>
|
|
<div class="cards">
|
|
<a class="card a" href="demo-tier-a/index.html">
|
|
<span class="tag">Beispiel · Friseur</span>
|
|
<h2>Schnittpunkt — Barbershop</h2>
|
|
<span>Eine schlanke Website mit Online-Terminbuchung — Ihre Kund:innen buchen selbst, rund um die Uhr, ganz ohne Anruf.</span>
|
|
</a>
|
|
<a class="card b" href="demo-tier-b/index.html">
|
|
<span class="tag">Beispiel · Physiotherapie</span>
|
|
<h2>PhysioVital — Praxis</h2>
|
|
<span>Ein vertrauenswürdiger Auftritt mit Online-Terminanfrage und Kontaktformular — Anfragen landen direkt und sicher bei Ihnen.</span>
|
|
</a>
|
|
<a class="card c" href="demo-pizzeria/index.html">
|
|
<span class="tag">Beispiel · Pizzeria</span>
|
|
<h2>Bella Napoli — Pizzeria</h2>
|
|
<span>Speisekarte mit Online-Bestellung — Gäste stellen ihre Bestellung selbst zusammen, alles läuft zentral bei Ihnen ein.</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<script>window.CB_CTX = { client_id: "DEMO", source: "callback-chooser" };</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>
|