Neutralise demo pages: stack-agnostic copy, non-stale dates
- Demo bars now read "Beispielseite · So könnte Ihr Online-Auftritt aussehen" (was "Tier A (Google-Stack)" / "Tier B (Self-Hosted)" / "für Gäste"). - Booking widgets relabelled generic: "Online-Terminbuchung" / "Sichere Buchung" (dropped Google Kalender + branded dots, Cal.com, self-hosted). - Removed Tier/Google/Cal.com refs from rendered copy AND HTML comments. - Demo booking dates now render on the current week via JS (no stale dates). - TODO.md: tick off completed items; add onboard back-office (Leads/Clients CRUD). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
@@ -90,7 +90,7 @@
|
||||
.booking-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 40px; align-items: center; }
|
||||
.booking-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; box-shadow: var(--shadow); }
|
||||
.gcal-head { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: .82rem; border-bottom: 1px solid var(--line); padding-bottom: 14px; margin-bottom: 18px; }
|
||||
.gcal-dot { flex: 0 0 auto; width: 12px; height: 12px; border-radius: 50%; background: #4285F4; box-shadow: 18px 0 0 #34A853, 36px 0 0 #FBBC05; margin-right: 40px; }
|
||||
.gcal-dot { flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; background: #4caf7d; box-shadow: 0 0 0 3px rgba(76,175,125,.18); margin-right: 12px; }
|
||||
.slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
|
||||
.slot { text-align: center; padding: 11px 6px; border: 1px solid var(--line); border-radius: 9px; color: var(--ink); font-size: .9rem; cursor: pointer; transition: .15s; background: #1b1611; }
|
||||
.slot:hover { border-color: var(--gold); color: var(--gold-2); }
|
||||
@@ -133,7 +133,7 @@
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="demo-bar">Demo · Tier A (Google-Stack) — Beispielseite für Kund:innen <button class="cb-open" type="button" onclick="cbOpen()">📞 Rückruf anfordern</button></div>
|
||||
<div class="demo-bar">Beispielseite · So könnte Ihr Online-Auftritt aussehen <button class="cb-open" type="button" onclick="cbOpen()">📞 Rückruf anfordern</button></div>
|
||||
|
||||
<header class="nav">
|
||||
<div class="wrap nav-inner">
|
||||
@@ -198,11 +198,11 @@
|
||||
<li>Automatische Erinnerung am Vortag</li>
|
||||
<li>Kostenlos umbuchen bis 24 Std. vorher</li>
|
||||
</ul>
|
||||
<!-- Tier A: dieser Button öffnet in der echten Version den Google Kalender „Terminplan" (Appointment Schedule). -->
|
||||
<!-- Demo: in der Live-Version öffnet dieser Button die echte Online-Terminbuchung. -->
|
||||
<a href="#" class="btn" onclick="return false;">Verfügbare Zeiten ansehen →</a>
|
||||
</div>
|
||||
<div class="booking-card">
|
||||
<div class="gcal-head"><span class="gcal-dot"></span> Google Kalender · Terminplan — Heute, 23. Juni</div>
|
||||
<div class="gcal-head"><span class="gcal-dot"></span> Online-Terminbuchung — <span id="bookDate">heute</span></div>
|
||||
<div class="slots">
|
||||
<div class="slot off">09:00</div>
|
||||
<div class="slot">10:30</div>
|
||||
@@ -214,7 +214,7 @@
|
||||
<div class="slot off">17:15</div>
|
||||
<div class="slot">18:00</div>
|
||||
</div>
|
||||
<p class="form-note" style="margin-top:16px;">Demo-Vorschau. In der Live-Version wird hier der echte Google-Kalender-Terminplan eingebettet.</p>
|
||||
<p class="form-note" style="margin-top:16px;">Demo-Vorschau. In der Live-Version buchen Ihre Kund:innen hier rund um die Uhr selbst einen freien Termin — mit sofortiger Bestätigung.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -247,7 +247,7 @@
|
||||
<h2>Frage stellen oder Rückruf anfordern</h2>
|
||||
<p>Schreib uns kurz — wir melden uns am selben Tag.</p>
|
||||
</div>
|
||||
<!-- Tier A: dieses Formular postet an einen n8n-Webhook -> Google Sheet (Leads) + Telegram. -->
|
||||
<!-- Demo: 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-A" />
|
||||
<input type="hidden" name="source" value="demo-tier-a" />
|
||||
@@ -283,7 +283,7 @@
|
||||
<div class="wrap" style="margin-top:30px;opacity:.6;font-size:.8rem;">© 2026 Schnittpunkt Barbershop · Demo-Seite · Impressum · Datenschutz</div>
|
||||
</footer>
|
||||
<script>
|
||||
// Lead-Formular -> n8n Webhook -> Google Sheet (Leads) + Telegram-Benachrichtigung.
|
||||
// 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();
|
||||
@@ -311,6 +311,15 @@
|
||||
return false;
|
||||
}
|
||||
</script>
|
||||
<script>
|
||||
// Keep the demo booking header on today's date so the example never looks stale.
|
||||
(function () {
|
||||
const M = ['Januar','Februar','März','April','Mai','Juni','Juli','August','September','Oktober','November','Dezember'];
|
||||
const t = new Date();
|
||||
const el = document.getElementById('bookDate');
|
||||
if (el) el.textContent = 'heute, ' + t.getDate() + '. ' + M[t.getMonth()];
|
||||
})();
|
||||
</script>
|
||||
<script>window.CB_CTX = { client_id: "DEMO-A", source: "callback-tier-a" };</script>
|
||||
<!-- ===== Rückruf-Widget (lead capture popup) ===== -->
|
||||
<style>
|
||||
|
||||
Reference in New Issue
Block a user