ClaudeandClaude Opus 5.5
65429aa3ac
- Bestellung auf der Portal-Startseite: Zusammenfassung, AGB- und Vorab-Leistungs-Zustimmung, Button 'Zahlungspflichtig bestellen', danach Stripe Checkout (Abo, Kleinunternehmer-Fusszeile) - Stripe-Webhook /api/abo/webhook spiegelt Abos nach Appwrite (subscriptions) und schreibt je bezahlter Rechnung 60 min gut (hourCredits, idempotent ueber Invoice-ID, 12 Monate gueltig) - Stundenkonto: FIFO-Verbrauch aus Worksheets mit countsToPlan, 15-Minuten-Takt, Mehraufwand separat ausgewiesen - Stripe-Kundenportal fuer Zahlungsart/Rechnungen/Kuendigung - Oeffentlicher Kuendigungsbutton (§ 312k) und Widerrufsbutton (§ 356a) mit Eingangsbestaetigung per Mail - Abo-Bedingungen inkl. Leistungsbeschreibung und Widerrufsbelehrung, als Anhang der Vertragsbestaetigung Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
65 lines
3.3 KiB
HTML
65 lines
3.3 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<title>Verträge hier kündigen – Webklar</title>
|
||
<link rel="stylesheet" href="/legal-form.css">
|
||
</head>
|
||
<body>
|
||
<main>
|
||
<nav><a href="/dashboard.html">← Kundenportal</a> · <a href="/abo-bedingungen.html">Abo-Bedingungen</a></nav>
|
||
<h1>Verträge hier kündigen</h1>
|
||
|
||
<div id="intro">
|
||
<p>Hier können Sie Ihr Webklar Wartungs-Abo kündigen, auch ohne Anmeldung. Eine ordentliche Kündigung wirkt zum Ende des bereits bezahlten Monats.</p>
|
||
<button type="button" class="big-btn primary" id="start-btn">Verträge hier kündigen</button>
|
||
<p class="muted">Alternativ im Kundenportal unter „Abo verwalten" oder formlos per E-Mail an kenso.gri@gmail.com.</p>
|
||
</div>
|
||
|
||
<form id="decl-form" class="card hidden" novalidate>
|
||
<label for="name" data-label-for="name" data-label="Name">Name <small>(Pflicht)</small></label>
|
||
<input id="name" name="name" autocomplete="name" required maxlength="200">
|
||
|
||
<label for="email" data-label-for="email" data-label="E-Mail">E-Mail-Adresse, mit der Sie das Abo abgeschlossen haben <small>(Pflicht)</small></label>
|
||
<input id="email" name="email" type="email" autocomplete="email" required maxlength="255">
|
||
|
||
<label for="customerNumber" data-label-for="customerNumber" data-label="Kundennummer">Kundennummer <small>(optional, hilft bei der Zuordnung)</small></label>
|
||
<input id="customerNumber" name="customerNumber" maxlength="50">
|
||
|
||
<label>Vertrag</label>
|
||
<input value="Webklar Wartungs-Abo" disabled>
|
||
|
||
<label data-label-for="kind" data-label="Art der Kündigung">Art der Kündigung</label>
|
||
<label class="radio"><input type="radio" name="kind" value="ordentlich" data-text="Ordentliche Kündigung" checked> Ordentliche Kündigung</label>
|
||
<label class="radio"><input type="radio" name="kind" value="ausserordentlich" data-text="Außerordentliche Kündigung"> Außerordentliche Kündigung aus wichtigem Grund</label>
|
||
|
||
<div id="reason-wrap" class="hidden">
|
||
<label for="reason" data-label-for="reason" data-label="Kündigungsgrund">Kündigungsgrund</label>
|
||
<textarea id="reason" name="reason" maxlength="2000"></textarea>
|
||
</div>
|
||
|
||
<label for="effective" data-label-for="effective" data-label="Gewünschter Zeitpunkt">Zeitpunkt</label>
|
||
<select id="effective" name="effective">
|
||
<option value="nächstmöglicher Zeitpunkt">zum nächstmöglichen Zeitpunkt</option>
|
||
</select>
|
||
|
||
<p class="error hidden" id="form-error"></p>
|
||
<button type="submit" class="big-btn">Jetzt kündigen</button>
|
||
<p class="muted">Sie erhalten sofort eine Eingangsbestätigung per E-Mail mit Datum und Uhrzeit sowie dem Zeitpunkt, zu dem der Vertrag endet.</p>
|
||
</form>
|
||
|
||
<div id="done" class="card ok hidden">
|
||
<h2 style="margin-top:0">Ihre Kündigung ist eingegangen</h2>
|
||
<p>Eingang: <strong id="done-at"></strong></p>
|
||
<dl id="done-list"></dl>
|
||
<p>Eine Bestätigung mit dem Vertragsende haben wir an Ihre E-Mail-Adresse geschickt. Bitte speichern oder drucken Sie diese Seite für Ihre Unterlagen.</p>
|
||
</div>
|
||
</main>
|
||
<script src="/legal-form.js"></script>
|
||
<script>
|
||
initLegalForm({ endpoint: '/api/abo/public/cancel', fields: ['name', 'email', 'customerNumber', 'kind', 'reason', 'effective'] })
|
||
</script>
|
||
</body>
|
||
</html>
|