ClaudeandClaude Sonnet 5.5
794a63c0d7
- R53: Das Widget wartet vor jedem Absenden, bis das Formular-Token formMinSekunden plus 0,5 s alt
ist ("Einen Moment …", Knopf gesperrt); gilt nach dem Neuladen der Konfiguration und beim Wiederholen
nach "neu_laden". Kein stilles Erfolgs-201 ohne Buchung mehr.
- R54: "Vertrag widerrufen" im Fuß ist ein zweiter Knopf (44 px). Im Knopfmodus lädt das Widget die
Konfiguration beim Laden der Seite (ein Abruf) und zeigt bei Widerrufsrecht dauerhaft einen zweiten
Knopf "Vertrag widerrufen" neben dem Buchungsknopf, der den Dialog beim Widerrufsformular öffnet.
- Telefonlink im Widget und auf der Gästeseite: Text mit Buchstaben oder Mehrfachangaben wird nie zum
tel:-Link, "(0)" hinter der Landesvorwahl entfällt.
- Portal, Einstellungen: Kasten "Einbau auf deiner Website" mit Einbau-Code und Kopierknopf; Hinweistexte
zum Widerruf passen zu R55 (auch Anfragen).
- G02: Widerrufssatz nennt, dass der Knopf bis zum Beginn des Termins gilt und danach das Formular auf der
Website oder die E-Mail an den Betrieb.
- Einbau-Anleitung angepasst (siteKey und Code im Portal, Knopfmodus, Checkliste); Tests und Playwright.
Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
82 lines
13 KiB
HTML
82 lines
13 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de" xmlns="http://www.w3.org/1999/xhtml">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<!--
|
|
G02 · Termin bestätigt (Zusammenfassung mit Verwaltungslink und Kalendereintrag)
|
|
Betreff: {{betreff}}
|
|
Absender: „<Betrieb>“ <Portal-Postfach> · Antworten an die Betriebs-E-Mail
|
|
Empfänger: Gast · ohne BCC
|
|
Platzhalter: {{gast_name}}, {{leistung}}, {{person}}, {{datum}}, {{zeit}}, {{dauer}}, {{preis}}, {{zahlung}}, {{nummer}}, {{link}}, {{ort}}, {{storno_text}}, {{widerrufsbelehrung}}, {{widerruf_link}}, {{betreff}}, {{farbe}}, {{betrieb_name}}, {{betrieb_adresse}}, {{betrieb_telefon}}, {{betrieb_email}}, {{impressum_url}}, {{datenschutz_url}}
|
|
Optionale Blöcke (Anrede genau einer von sie und du, vom Server gesetzt): sie, du, preis, person, storno, widerruf, kein_widerruf, anfrage_angenommen
|
|
Block preis: Preis und Zahlungsart. Block person: Person oder Platz. Block storno: Stornobedingungen im Wortlaut ({{storno_text}}).
|
|
Block widerruf: Widerrufsrecht besteht ({{widerrufsbelehrung}} als Text mit Zeilenumbrüchen, {{widerruf_link}}).
|
|
Block kein_widerruf: Verbraucherbuchung einer Freizeitdienstleistung mit festem Termin (§ 312g Abs. 2 Nr. 9 BGB), gleicher Wortlaut in Sie- und Du-Fassung.
|
|
Block anfrage_angenommen: der Betrieb hat eine Anfrage angenommen. Kalendereintrag (.ics) kommt als icalEvent.
|
|
Schließen sich aus: widerruf und kein_widerruf (der Server setzt höchstens einen von beiden).
|
|
-->
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<meta name="color-scheme" content="light dark">
|
|
<meta name="supported-color-schemes" content="light dark">
|
|
<title>{{betreff}}</title>
|
|
<!--[if mso]><style>table,td{font-family:Arial,Helvetica,sans-serif!important;}</style><![endif]-->
|
|
<style>
|
|
a{color:#111111;}
|
|
@media (max-width:620px){.w{width:100%!important;}.px{padding-left:24px!important;padding-right:24px!important;}.lbl{display:block!important;width:100%!important;padding-bottom:2px!important;border-bottom:0!important;}.val{display:block!important;width:100%!important;padding-top:0!important;}}
|
|
@media (prefers-color-scheme:dark){.bg{background:#161615!important;}.card{background:#1f1f1e!important;}.ink{color:#f2f1ee!important;}.mut{color:#a8a6a0!important;}.box{background:#2a2a28!important;border-color:#3a3a37!important;}.btn{background:#f2f1ee!important;}.btn a{color:#161615!important;}.btn2{border-color:#f2f1ee!important;}.btn2 a{color:#f2f1ee!important;}.rowline{border-color:#3a3a37!important;}.pill{background:#1f1f1e!important;}.pill span{color:#f2f1ee!important;}}
|
|
</style>
|
|
</head>
|
|
<body style="margin:0;padding:0;background:#f1f0ec;">
|
|
<table role="presentation" class="bg" width="100%" cellpadding="0" cellspacing="0" border="0" style="background:#f1f0ec;">
|
|
<tr><td align="center" style="padding:32px 12px;">
|
|
<table role="presentation" class="w" width="600" cellpadding="0" cellspacing="0" border="0" style="width:600px;max-width:600px;">
|
|
<tr><td class="px" bgcolor="{{farbe}}" style="background:{{farbe}};border-radius:16px 16px 0 0;padding:18px 40px;"><table role="presentation" cellpadding="0" cellspacing="0" border="0"><tr><td class="pill" bgcolor="#ffffff" style="background:#ffffff;border-radius:8px;padding:8px 14px;font-family:Arial,Helvetica,sans-serif;font-size:17px;line-height:22px;font-weight:bold;color:#111111;"><span style="color:#111111;">{{betrieb_name}}</span></td></tr></table></td></tr>
|
|
<tr><td class="card" style="background:#ffffff;border-radius:0 0 16px 16px;">
|
|
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0">
|
|
<tr><td class="px ink" style="padding:36px 40px 0 40px;font-family:Arial,Helvetica,sans-serif;font-size:26px;line-height:32px;mso-line-height-rule:exactly;font-weight:bold;letter-spacing:-0.5px;color:#111111;"><!-- WENN sie -->Ihr Termin ist bestätigt<!-- ENDE sie --><!-- WENN du -->Dein Termin ist bestätigt<!-- ENDE du --></td></tr>
|
|
<tr><td class="px mut" style="padding:14px 40px 0 40px;font-family:Arial,Helvetica,sans-serif;font-size:16px;line-height:25px;mso-line-height-rule:exactly;color:#4a4843;"><!-- WENN sie -->Guten Tag {{gast_name}},<br><!-- WENN anfrage_angenommen -->
|
|
{{betrieb_name}} hat Ihre Terminanfrage angenommen. <!-- ENDE anfrage_angenommen -->Ihr Termin ist bestätigt. Hier die Zusammenfassung:<!-- ENDE sie --><!-- WENN du -->Hallo {{gast_name}},<br><!-- WENN anfrage_angenommen -->
|
|
{{betrieb_name}} hat deine Terminanfrage angenommen. <!-- ENDE anfrage_angenommen -->Dein Termin ist bestätigt. Hier die Zusammenfassung:<!-- ENDE du --></td></tr>
|
|
<tr><td class="px" style="padding:24px 40px 0 40px;"><table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="font-family:Arial,Helvetica,sans-serif;font-size:14px;line-height:21px;mso-line-height-rule:exactly;">
|
|
<tr><td class="lbl mut rowline" width="150" valign="top" style="width:150px;padding:11px 12px 11px 0;border-bottom:1px solid #ecebe6;color:#6b6964;">Leistung</td><td class="val ink rowline" valign="top" style="padding:11px 0;border-bottom:1px solid #ecebe6;color:#111111;"><strong>{{leistung}}</strong></td></tr>
|
|
<!-- WENN person -->
|
|
<tr><td class="lbl mut rowline" width="150" valign="top" style="width:150px;padding:11px 12px 11px 0;border-bottom:1px solid #ecebe6;color:#6b6964;">Bei</td><td class="val ink rowline" valign="top" style="padding:11px 0;border-bottom:1px solid #ecebe6;color:#111111;">{{person}}</td></tr>
|
|
<!-- ENDE person -->
|
|
<tr><td class="lbl mut rowline" width="150" valign="top" style="width:150px;padding:11px 12px 11px 0;border-bottom:1px solid #ecebe6;color:#6b6964;">Datum</td><td class="val ink rowline" valign="top" style="padding:11px 0;border-bottom:1px solid #ecebe6;color:#111111;">{{datum}}</td></tr>
|
|
<tr><td class="lbl mut rowline" width="150" valign="top" style="width:150px;padding:11px 12px 11px 0;border-bottom:1px solid #ecebe6;color:#6b6964;">Uhrzeit</td><td class="val ink rowline" valign="top" style="padding:11px 0;border-bottom:1px solid #ecebe6;color:#111111;">{{zeit}} Uhr</td></tr>
|
|
<tr><td class="lbl mut rowline" width="150" valign="top" style="width:150px;padding:11px 12px 11px 0;border-bottom:1px solid #ecebe6;color:#6b6964;">Dauer</td><td class="val ink rowline" valign="top" style="padding:11px 0;border-bottom:1px solid #ecebe6;color:#111111;">{{dauer}}</td></tr>
|
|
<!-- WENN preis -->
|
|
<tr><td class="lbl mut rowline" width="150" valign="top" style="width:150px;padding:11px 12px 11px 0;border-bottom:1px solid #ecebe6;color:#6b6964;">Preis</td><td class="val ink rowline" valign="top" style="padding:11px 0;border-bottom:1px solid #ecebe6;color:#111111;">{{preis}}</td></tr>
|
|
<tr><td class="lbl mut rowline" width="150" valign="top" style="width:150px;padding:11px 12px 11px 0;border-bottom:1px solid #ecebe6;color:#6b6964;">Zahlung</td><td class="val ink rowline" valign="top" style="padding:11px 0;border-bottom:1px solid #ecebe6;color:#111111;">{{zahlung}}</td></tr>
|
|
<!-- ENDE preis -->
|
|
<tr><td class="lbl mut rowline" width="150" valign="top" style="width:150px;padding:11px 12px 11px 0;border-bottom:1px solid #ecebe6;color:#6b6964;">Ort</td><td class="val ink rowline" valign="top" style="padding:11px 0;border-bottom:1px solid #ecebe6;color:#111111;">{{ort}}</td></tr>
|
|
<tr><td class="lbl mut rowline" width="150" valign="top" style="width:150px;padding:11px 12px 11px 0;border-bottom:1px solid #ecebe6;color:#6b6964;">Buchungsnummer</td><td class="val ink rowline" valign="top" style="padding:11px 0;border-bottom:1px solid #ecebe6;color:#111111;">{{nummer}}</td></tr>
|
|
</table></td></tr>
|
|
<!-- WENN storno -->
|
|
<tr><td class="px ink" style="padding:24px 40px 0 40px;font-family:Arial,Helvetica,sans-serif;font-size:15px;line-height:22px;font-weight:bold;color:#111111;">Stornobedingungen</td></tr>
|
|
<tr><td class="px mut" style="padding:6px 40px 0 40px;font-family:Arial,Helvetica,sans-serif;font-size:16px;line-height:25px;mso-line-height-rule:exactly;color:#4a4843;">{{storno_text}}</td></tr>
|
|
<!-- ENDE storno -->
|
|
<tr><td class="px" style="padding:26px 40px 0 40px;"><table role="presentation" cellpadding="0" cellspacing="0" border="0"><tr><td class="btn" bgcolor="#111111" style="background:#111111;border-radius:10px;"><a href="{{link}}" style="display:block;padding:14px 26px;font-family:Arial,Helvetica,sans-serif;font-size:15px;font-weight:bold;color:#ffffff;text-decoration:none;">Termin verwalten →</a></td></tr></table></td></tr>
|
|
<tr><td class="px mut" style="padding:10px 40px 0 40px;font-family:Arial,Helvetica,sans-serif;font-size:13px;line-height:20px;mso-line-height-rule:exactly;color:#6b6964;"><!-- WENN sie -->Hier können Sie Ihren Termin ansehen, absagen oder verschieben, solange es die Bedingungen des Betriebs erlauben. Ein Kalendereintrag liegt dieser E-Mail bei.<!-- ENDE sie --><!-- WENN du -->Hier kannst du deinen Termin ansehen, absagen oder verschieben, solange es die Bedingungen des Betriebs erlauben. Ein Kalendereintrag liegt dieser E-Mail bei.<!-- ENDE du --></td></tr>
|
|
<!-- WENN kein_widerruf -->
|
|
<tr><td class="px mut" style="padding:30px 40px 0 40px;font-family:Arial,Helvetica,sans-serif;font-size:16px;line-height:25px;mso-line-height-rule:exactly;color:#4a4843;">Für diese Buchung besteht kein Widerrufsrecht (§ 312g Abs. 2 Nr. 9 BGB). Absagen richten sich nach den Stornobedingungen.</td></tr>
|
|
<!-- ENDE kein_widerruf -->
|
|
<!-- WENN widerruf -->
|
|
<tr><td class="px mut" style="padding:30px 40px 0 40px;font-family:Arial,Helvetica,sans-serif;font-size:16px;line-height:25px;mso-line-height-rule:exactly;color:#4a4843;"><!-- WENN sie --><strong>Widerrufsrecht.</strong> Wenn Sie Verbraucher sind, können Sie diesen Vertrag innerhalb von 14 Tagen ab Vertragsschluss ohne Angabe von Gründen widerrufen. Bis zum Beginn des Termins geht das über den Knopf „Vertrag widerrufen“; danach über das Formular „Vertrag widerrufen“ auf der Website von {{betrieb_name}} oder per E-Mail an {{betrieb_email}}. Die ausführliche Widerrufsbelehrung und das Muster-Widerrufsformular finden Sie weiter unten in dieser E-Mail.<!-- ENDE sie --><!-- WENN du --><strong>Widerrufsrecht.</strong> Wenn du Verbraucher bist, kannst du diesen Vertrag innerhalb von 14 Tagen ab Vertragsschluss ohne Angabe von Gründen widerrufen. Bis zum Beginn des Termins geht das über den Knopf „Vertrag widerrufen“; danach über das Formular „Vertrag widerrufen“ auf der Website von {{betrieb_name}} oder per E-Mail an {{betrieb_email}}. Die ausführliche Widerrufsbelehrung und das Muster-Widerrufsformular findest du weiter unten in dieser E-Mail.<!-- ENDE du --></td></tr>
|
|
<tr><td class="px" style="padding:18px 40px 0 40px;"><table role="presentation" cellpadding="0" cellspacing="0" border="0"><tr><td class="btn2" style="border:2px solid #111111;border-radius:10px;"><a href="{{widerruf_link}}" style="display:block;padding:12px 24px;font-family:Arial,Helvetica,sans-serif;font-size:15px;font-weight:bold;color:#111111;text-decoration:none;">Vertrag widerrufen</a></td></tr></table></td></tr>
|
|
<tr><td class="px ink" style="padding:26px 40px 0 40px;font-family:Arial,Helvetica,sans-serif;font-size:15px;line-height:22px;font-weight:bold;color:#111111;">Widerrufsbelehrung und Muster-Widerrufsformular</td></tr>
|
|
<tr><td class="px mut" style="padding:4px 40px 0 40px;font-family:Arial,Helvetica,sans-serif;font-size:13px;line-height:20px;mso-line-height-rule:exactly;color:#6b6964;">Rechtlich vorgeschriebener Wortlaut:</td></tr>
|
|
<tr><td class="px" style="padding:10px 40px 0 40px;"><table role="presentation" class="box" width="100%" cellpadding="0" cellspacing="0" border="0" style="background:#f7f6f3;border:1px solid #e8e6e0;border-radius:12px;"><tr><td class="ink" style="padding:16px 20px;font-family:Arial,Helvetica,sans-serif;font-size:13px;line-height:20px;color:#111111;">{{widerrufsbelehrung}}</td></tr></table></td></tr>
|
|
<!-- ENDE widerruf -->
|
|
<tr><td class="px ink" style="padding:28px 40px 40px 40px;font-family:Arial,Helvetica,sans-serif;font-size:16px;line-height:24px;color:#111111;">Viele Grüße<br><strong>{{betrieb_name}}</strong></td></tr>
|
|
</table>
|
|
</td></tr>
|
|
<tr><td class="px mut" align="center" style="padding:24px 40px 0 40px;font-family:Arial,Helvetica,sans-serif;font-size:12px;line-height:19px;color:#6b6964;"><div><strong>{{betrieb_name}}</strong></div><div>{{betrieb_adresse}}</div><div>{{betrieb_telefon}}</div><div><a class="mut" href="mailto:{{betrieb_email}}" style="color:#6b6964;text-decoration:none;">{{betrieb_email}}</a></div></td></tr>
|
|
<tr><td class="px mut" align="center" style="padding:12px 40px 0 40px;font-family:Arial,Helvetica,sans-serif;font-size:12px;line-height:19px;color:#6b6964;"><a class="mut" href="{{impressum_url}}" style="color:#4a4843;text-decoration:underline;">Impressum</a> · <a class="mut" href="{{datenschutz_url}}" style="color:#4a4843;text-decoration:underline;">Datenschutz</a></td></tr>
|
|
<tr><td class="px mut" align="center" style="padding:12px 40px 0 40px;font-family:Arial,Helvetica,sans-serif;font-size:12px;line-height:19px;color:#6b6964;">Diese E-Mail wurde im Auftrag von {{betrieb_name}} über den Terminplaner von WEBklar versendet. Antworten gehen direkt an {{betrieb_name}}.</td></tr>
|
|
</table>
|
|
</td></tr>
|
|
</table>
|
|
</body>
|
|
</html>
|