ClaudeandClaude Opus 5.5
20bf5afe28
Auf dem Handy (unter 880 px und Handys quer) sieht der Kundenbereich aus wie eine App; der Desktop bleibt pixelgleich. - Kopfzeile als App-Leiste: Logo, beim Scrollen der Seitentitel, Avatar - Navigation als Tab-Leiste unten mit Symbolen und Zaehlern; neuer Tab "Wartung" mit der Abo-Karte, Stundenkonto/Bestellung und Uebernahmegutschrift als Unterseiten mit Zurueck (auch Android-Geste) - Konto als Bottom-Sheet (Ansprechpartner, Vertraege kuendigen/widerrufen, Rechtliches, Abmelden), am Desktop als Popover unter dem Avatar - Rechnungen als Karten, Fortschritt als Zeitleiste, Chat fuellt den Bildschirm; bei offener Tastatur verschwindet die Tab-Leiste (kommt auch nach der Android-Zurueck-Geste wieder) - Installierbar: Manifest, App-Icons (WEBklar-Logo), Favicon, Hinweis "Zum Home-Bildschirm"; Service Worker nur fuer die Offline-Seite, Kundendaten werden nicht zwischengespeichert - Installierte App: Kuendigen/Widerrufen mit Link zurueck in den Kundenbereich (nur dort sichtbar, Texte unveraendert); Login-Links zu Bedingungen/Datenschutz/Impressum oeffnen wie im Dashboard ein neues Fenster - Login mit App-Icon und Abstaenden fuer Statusleiste/Home-Balken - Hinweise "in der Seitenleiste" haben auf dem Handy eine eigene Fassung Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
65 lines
3.2 KiB
HTML
65 lines
3.2 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
|
||
<title>Verträge hier kündigen – WEBklar</title>
|
||
<link rel="stylesheet" href="/legal-form.css">
|
||
</head>
|
||
<body>
|
||
<main>
|
||
<!-- Nur in der installierten App sichtbar: dort gibt es keinen Zurück-Knopf des Browsers -->
|
||
<a class="app-back no-print" href="/dashboard.html">‹ Zurück zum Kundenbereich</a>
|
||
<div class="brandline">WEBKLAR</div>
|
||
<h1>Verträge hier kündigen</h1>
|
||
|
||
<form id="decl-form" class="card" novalidate>
|
||
<fieldset>
|
||
<legend data-label-for="kind" data-label="Art der Kündigung">Art der Kündigung</legend>
|
||
<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>
|
||
<label class="radio"><input type="radio" name="kind" value="geschaeftsaufgabe" data-text="Sonderkündigung wegen Geschäftsaufgabe"> Sonderkündigung wegen Geschäftsaufgabe</label>
|
||
</fieldset>
|
||
<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="name" data-label-for="name" data-label="Name">Name</label>
|
||
<input id="name" name="name" autocomplete="name" required maxlength="200">
|
||
|
||
<label for="email" data-label-for="email" data-label="E-Mail für die Bestätigung">E-Mail-Adresse <small>(dorthin schicken wir die Bestätigung)</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)</small></label>
|
||
<input id="customerNumber" name="customerNumber" maxlength="50">
|
||
|
||
<label>Vertrag</label>
|
||
<input value="WEBklar Wartungs-Abo" disabled>
|
||
|
||
<fieldset>
|
||
<legend>Zeitpunkt</legend>
|
||
<label class="radio"><input type="radio" name="when" value="naechstmoeglich" checked> zum nächstmöglichen Zeitpunkt</label>
|
||
<label class="radio"><input type="radio" name="when" value="datum"> zu einem bestimmten Datum</label>
|
||
<input type="date" id="effective-date" class="hidden">
|
||
</fieldset>
|
||
|
||
<p class="error hidden" id="form-error"></p>
|
||
<button type="submit" class="big-btn">Jetzt kündigen</button>
|
||
</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>Die Bestätigung mit dem Zeitpunkt, zu dem Ihr Vertrag endet, haben wir an Ihre E-Mail-Adresse geschickt.</p>
|
||
<button type="button" class="print-btn" id="print-btn">Diese Bestätigung drucken oder als PDF speichern</button>
|
||
</div>
|
||
</main>
|
||
<script src="/legal-form.js"></script>
|
||
<script>
|
||
initLegalForm({ endpoint: '/api/abo/public/cancel', fields: ['kind', 'reason', 'name', 'email', 'customerNumber', 'effective'] })
|
||
</script>
|
||
</body>
|
||
</html>
|