diff --git a/public/neu/oeffentlich/auftrag.html b/public/neu/oeffentlich/auftrag.html new file mode 100644 index 0000000..8604c44 --- /dev/null +++ b/public/neu/oeffentlich/auftrag.html @@ -0,0 +1,42 @@ + + + + + + + + + + Auftragsbestätigung – WEBklar + + + + + + + + + ‹ Zurück zum Kundenbereich +
+
WEBklar
+
+
+
+
+ +

Ihre Auftragsbestätigung wird geladen …

+
+
+
+
+ + + + diff --git a/public/neu/oeffentlich/kuendigen.html b/public/neu/oeffentlich/kuendigen.html new file mode 100644 index 0000000..1e812d5 --- /dev/null +++ b/public/neu/oeffentlich/kuendigen.html @@ -0,0 +1,75 @@ + + + + + + + Verträge hier kündigen – WEBklar + + + + +
+ + ‹ Zurück zum Kundenbereich +
WEBKLAR
+

Verträge hier kündigen

+ +
+ +
+ Vertrag + + +
+ + +
+ Art der Kündigung + + + +
+ + + + + + + + + + + +
+ Zeitpunkt + + + +
+ + + +
+ + +
+ + + + diff --git a/public/neu/oeffentlich/login.html b/public/neu/oeffentlich/login.html new file mode 100644 index 0000000..248a0b5 --- /dev/null +++ b/public/neu/oeffentlich/login.html @@ -0,0 +1,90 @@ + + + + + + Anmelden – Webklar Kundenbereich + + + + + + + + + + + + + + +
+ +
+ +
+
+ + + + + +
+
+ + + + + diff --git a/public/neu/oeffentlich/oeffentlich.css b/public/neu/oeffentlich/oeffentlich.css new file mode 100644 index 0000000..fcfd403 --- /dev/null +++ b/public/neu/oeffentlich/oeffentlich.css @@ -0,0 +1,218 @@ +/* Kundenansicht neu: die öffentlichen Seiten im weißen Stil (Anmeldung, Kündigen, Widerrufen, Auftragsbestätigung). + Werte aus tokens.css (Klasse .kn auf dem body); die Auftragsseite trägt kein .kn und setzt ihre Werte unten selbst. + Ohne Karten, Verläufe, Glas, Lila und Dunkelmodus. Die Offline-Seite hat ihr Aussehen inline (der Service Worker liefert nur diese eine Datei). */ + +/* ------------------------------------------------------------------ Gemeinsam (Anmeldung, Kündigen, Widerrufen) --- */ +.kn-seite { margin: 0; background: var(--kn-bg); color: var(--kn-text); font: 16px/1.55 var(--kn-font); -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; } +.kn-seite *, .kn-seite *::before, .kn-seite *::after { box-sizing: border-box; } +.kn-seite .hidden { display: none !important; } +.kn-seite a { color: inherit; text-decoration: underline; text-decoration-color: var(--kn-line-strong); text-underline-offset: 3px; } +.kn-seite a:hover { text-decoration-color: currentColor; } +.kn-seite :focus-visible { outline: 2px solid #111; outline-offset: 2px; } +.kn-seite :disabled { opacity: .55; cursor: not-allowed; } +.kn-seite .kn-fehlertext { margin: 0; font-size: 14px; line-height: 20px; color: var(--kn-danger); font-weight: 600; } + +/* ------------------------------------------------------------------ Anmeldung --- */ +.kn-login-seite { min-height: 100svh; } +.kn-login-kopf { position: fixed; top: 0; left: 0; right: 0; z-index: 2; padding: calc(24px + env(safe-area-inset-top)) 24px 16px; pointer-events: none; } +.kn-login-logo { pointer-events: auto; font-size: 18px; line-height: 24px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; } +.kn-seite a.kn-login-logo { text-decoration: none; } +.kn-login-haupt { min-height: 100svh; display: flex; align-items: center; justify-content: center; padding: calc(88px + env(safe-area-inset-top)) 24px calc(40px + env(safe-area-inset-bottom)); } +.kn-login-spalte { width: 100%; max-width: 360px; } +.kn-login-marke { display: none; } +.kn-login-titel { margin: 0 0 24px; font-size: 22px; line-height: 28px; font-weight: 700; letter-spacing: -.02em; } +.kn-login-form { display: flex; flex-direction: column; gap: 12px; } +.kn-feld-eingabe { + width: 100%; height: 44px; min-width: 0; margin: 0; padding: 0 12px; border: 0; border-radius: var(--kn-radius); + background: var(--kn-bg); box-shadow: var(--kn-ring); color: inherit; font: inherit; font-size: 16px; outline: none; transition: box-shadow .12s; +} +.kn-feld-eingabe::placeholder { color: var(--kn-text-3); } +.kn-feld-eingabe:focus { box-shadow: 0 0 0 1px var(--kn-accent), 0 0 0 4px var(--kn-accent-ring); } +.kn-login-form .kn-fehlertext { text-align: center; } +.kn-login-staff { display: block; text-align: center; font-size: 14px; font-weight: 600; } +.kn-login-knopf { + position: relative; display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 44px; margin-top: 4px; + border: 0; border-radius: var(--kn-radius); background: var(--kn-accent); color: #fff; font: inherit; font-weight: 600; cursor: pointer; + box-shadow: var(--kn-shadow-btn); transition: background-color .12s; +} +.kn-login-knopf:hover:not(:disabled) { background: var(--kn-accent-hover); } +.kn-login-knopf svg { width: 12px; height: 12px; flex-shrink: 0; } +.kn-login-knopf .loading-spinner { display: none; } +.kn-login-knopf.is-loading svg { display: none; } +.kn-login-knopf.is-loading .button-label::after { content: ' …'; } +.kn-login-hinweis { margin: 32px 0 0; text-align: center; font-size: 14px; line-height: 20px; color: var(--kn-text-2); } +.kn-login-hinweis + .kn-login-hinweis { margin-top: 16px; } +.kn-seite a.kn-login-wichtig { color: var(--kn-text); font-weight: 600; } +@media (max-width: 880px), (pointer: coarse) and (max-height: 500px) { + .kn-login-marke { display: flex; flex-direction: column; align-items: center; gap: 12px; margin: 0 0 32px; font-size: 15px; font-weight: 600; } + .kn-login-marke img { width: 64px; height: 64px; border-radius: var(--kn-radius-lg); box-shadow: var(--kn-ring); } + .kn-login-titel { text-align: center; } + .kn-login-hinweis a { display: inline-flex; align-items: center; min-height: 44px; } +} + +/* ------------------------------------------------------------------ Kündigen und Widerrufen (schlicht) --- */ +.kn-recht main { max-width: 620px; margin: 0 auto; padding: 48px 20px 80px; } +.kn-recht h1 { margin: 0 0 8px; font-size: 28px; line-height: 34px; font-weight: 700; letter-spacing: -.02em; } +.kn-recht h2 { margin: 0 0 12px; font-size: 18px; line-height: 26px; font-weight: 600; } +.kn-markenzeile { margin-bottom: 8px; font-size: 13px; font-weight: 700; letter-spacing: .12em; color: var(--kn-text-2); } +.kn-recht .kn-formular { margin: 24px 0; } +.kn-recht label { display: block; margin: 16px 0 6px; font-size: 14px; font-weight: 600; } +.kn-recht label small { font-weight: 400; color: var(--kn-text-2); } +.kn-recht input:not([type="radio"]):not([type="checkbox"]), .kn-recht textarea { + width: 100%; min-height: 44px; padding: 0 12px; border: 0; border-radius: var(--kn-radius); background: var(--kn-bg); + box-shadow: var(--kn-ring); color: inherit; font: inherit; font-size: 16px; outline: none; transition: box-shadow .12s; +} +.kn-recht textarea { min-height: 96px; padding: 8px 12px; resize: vertical; } +.kn-recht input:not([type="radio"]):not([type="checkbox"]):focus, .kn-recht textarea:focus { box-shadow: 0 0 0 1px var(--kn-accent), 0 0 0 4px var(--kn-accent-ring); } +.kn-recht input::placeholder { color: var(--kn-text-3); } +.kn-recht fieldset { margin: 0; padding: 0; border: 0; min-width: 0; } +.kn-recht legend { margin: 16px 0 6px; padding: 0; font-size: 14px; font-weight: 600; } +.kn-recht .kn-auswahl { display: flex; align-items: center; gap: 10px; min-height: 44px; margin: 0; font-weight: 400; font-size: 16px; cursor: pointer; } +.kn-recht .kn-auswahl input { flex: 0 0 auto; width: 20px; height: 20px; margin: 0; accent-color: var(--kn-accent); } +.kn-recht #effective-date { max-width: 220px; margin-top: 6px; } +.kn-hinweis { margin: 8px 0 0; font-size: 14px; line-height: 20px; color: var(--kn-text-2); } +.kn-recht .kn-fehlertext { margin: 16px 0 0; } +.kn-absenden { + display: inline-flex; align-items: center; justify-content: center; min-height: 44px; margin-top: 20px; padding: 0 24px; border: 0; border-radius: var(--kn-radius); + background: var(--kn-accent); color: #fff; font: inherit; font-weight: 600; cursor: pointer; box-shadow: var(--kn-shadow-btn); +} +.kn-absenden:hover:not(:disabled) { background: var(--kn-accent-hover); } +.kn-bestaetigung { margin: 24px 0; padding-top: 24px; border-top: 1px solid var(--kn-line); } +.kn-bestaetigung h2 { color: var(--kn-gruen-fg); } +.kn-recht dl { display: grid; grid-template-columns: max-content 1fr; gap: 4px 16px; margin: 12px 0; } +.kn-recht dt { color: var(--kn-text-2); } +.kn-recht dd { margin: 0; overflow-wrap: anywhere; } +.kn-drucken { + display: inline-flex; align-items: center; min-height: 44px; margin-top: 14px; padding: 0 16px; border: 0; border-radius: var(--kn-radius); + background: var(--kn-bg); box-shadow: var(--kn-ring); color: inherit; font: inherit; font-weight: 500; cursor: pointer; +} +.kn-drucken:hover { background: var(--kn-bg-hover); } +@media print { .kn-drucken, .no-print { display: none !important; } } +/* Installierte App (Homescreen): Platz für die Statusleiste und ein Weg zurück in den Kundenbereich */ +.kn-zurueck { display: none; } +@media (display-mode: standalone) { + .kn-recht main { padding-top: max(48px, calc(env(safe-area-inset-top) + 20px)); } + /* Die Statusleiste ist hell: ein weißer Streifen dahinter hält Uhrzeit und Netz lesbar */ + .kn-seite::before { content: ''; position: fixed; top: 0; left: 0; right: 0; z-index: 10; height: env(safe-area-inset-top); background: var(--kn-bg); } + .kn-seite a.kn-zurueck { display: inline-block; margin-bottom: 18px; font-size: 15px; font-weight: 600; text-decoration: none; } +} +@media (max-width: 640px) { + .kn-recht dl { grid-template-columns: 1fr; gap: 0; } + .kn-recht dd { margin-bottom: 8px; } + .kn-absenden { width: 100%; } +} + +/* ------------------------------------------------------------------ Auftragsbestätigung (auftrag.html, Link aus der Mail) --- */ +body.ab-seite { + --ab-grund: #ffffff; --ab-karte: #ffffff; --ab-text: #1a1f36; --ab-weich: #5e6678; --ab-linie: #ebeef1; --ab-box: #f8f9fb; + --ab-knopf: #111111; --ab-knopf-text: #ffffff; --ab-fokus: #111111; + --ab-warn-bg: #fcedb9; --ab-warn-text: #a82c00; --ab-ok-bg: #d7f7c2; --ab-ok-text: #006908; + --ab-rot-bg: #ffe7f2; --ab-rot-text: #b3093c; --ab-muted-bg: #ebeef1; --ab-muted-text: #414552; --ab-fehler: #c0123c; + color-scheme: light; +} + +/* Grundlayout */ +body.ab-seite { + margin: 0; min-height: 100dvh; display: flex; flex-direction: column; + background: var(--ab-grund); color: var(--ab-text); + font: 16px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; +} +.ab-seite .hidden { display: none !important; } +.ab-seite .ab-innen { max-width: 40rem; margin: 0 auto; padding: 0 16px; box-sizing: border-box; width: 100%; } +.ab-seite .ab-kopf { padding: max(20px, env(safe-area-inset-top)) 0 12px; } +.ab-seite .ab-kopf .ab-innen { display: flex; align-items: center; gap: 10px; } +.ab-seite .ab-logo { width: 36px; height: 36px; border-radius: 6px; display: block; } +.ab-seite .ab-marke { font-weight: 700; letter-spacing: 0.08em; font-size: 15px; } +.ab-seite .ab-haupt { flex: 1 0 auto; padding-bottom: 24px; } +.ab-seite .ab-wurzel { border-top: 1px solid var(--ab-linie); padding: 24px 0; overflow-wrap: anywhere; word-break: normal; } +.ab-seite .ab-laden { margin: 0; color: var(--ab-weich); } +.ab-seite a { color: inherit; text-underline-offset: 3px; } +.ab-seite .ab-vh { + position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; +} +.ab-seite .ab-fuss { flex-shrink: 0; padding: 8px 0 max(24px, env(safe-area-inset-bottom)); font-size: 13px; color: var(--ab-weich); } +.ab-seite .ab-fuss .ab-innen { display: flex; gap: 16px; flex-wrap: wrap; } +.ab-seite .ab-fuss a { color: var(--ab-weich); display: inline-flex; align-items: center; min-height: 44px; } + +/* Inhalt */ +.ab-seite .ab-pille { + display: inline-block; margin: 0 0 12px; padding: 2px 8px; border-radius: 4px; font-size: 12px; font-weight: 500; line-height: 20px; + background: var(--ab-muted-bg); color: var(--ab-muted-text); +} +.ab-seite .ab-pille-warn { background: var(--ab-warn-bg); color: var(--ab-warn-text); } +.ab-seite .ab-pille-ok { background: var(--ab-ok-bg); color: var(--ab-ok-text); } +.ab-seite .ab-pille-rot { background: var(--ab-rot-bg); color: var(--ab-rot-text); } +.ab-seite .ab-h1 { font-size: 1.6rem; line-height: 1.25; font-weight: 700; letter-spacing: -.02em; margin: 0 0 12px; } +.ab-seite .ab-h1:focus { outline: none; } +.ab-seite .ab-intro, .ab-seite .ab-text { margin: 0 0 16px; } +.ab-seite .ab-text { white-space: pre-line; } +.ab-seite .ab-kontakt { margin: 0 0 16px; color: var(--ab-weich); } +.ab-seite .ab-h2 { + font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; color: var(--ab-weich); margin: 24px 0 8px; +} +.ab-seite .ab-liste { margin: 0 0 8px; padding: 0; } +.ab-seite .ab-zeile { + display: grid; grid-template-columns: 9rem 1fr; gap: 4px 12px; padding: 8px 0; border-top: 1px solid var(--ab-linie); +} +.ab-seite .ab-zeile dt { color: var(--ab-weich); } +.ab-seite .ab-zeile dd { margin: 0; } +.ab-seite .ab-gesamt { display: flex; justify-content: space-between; gap: 12px; margin: 12px 0 8px; padding-top: 12px; border-top: 2px solid var(--ab-text); } +.ab-seite .ab-gesamt strong { font-weight: 700; font-variant-numeric: tabular-nums; } +.ab-seite .ab-hinweis { margin: 4px 0 0; font-size: 0.85rem; color: var(--ab-weich); } +.ab-seite .ab-links { list-style: none; margin: 0 0 16px; padding: 0; } +.ab-seite .ab-links a { display: flex; align-items: center; min-height: 44px; line-height: 1.35; padding: 4px 0; font-weight: 600; } +.ab-seite .ab-bestaetigt { + background: var(--ab-ok-bg); color: var(--ab-ok-text); border-radius: var(--kn-radius, 6px); padding: 12px 16px; margin: 0 0 16px; +} +.ab-seite .ab-bestaetigt p { margin: 2px 0; } +.ab-seite .ab-bestaetigt:focus-visible { outline: 2px solid var(--ab-fokus); outline-offset: 2px; } + +/* Tabelle */ +.ab-seite .ab-tabelle { width: 100%; border-collapse: collapse; font-size: 0.95rem; font-variant-numeric: tabular-nums; } +.ab-seite .ab-tabelle th { text-align: left; font-weight: 600; color: var(--ab-weich); padding: 6px 8px 6px 0; border-bottom: 1px solid var(--ab-linie); } +.ab-seite .ab-tabelle td { padding: 8px 8px 8px 0; border-bottom: 1px solid var(--ab-linie); vertical-align: top; } +.ab-seite .ab-tabelle th:nth-child(n+2), .ab-seite .ab-tabelle td:nth-child(n+2) { text-align: right; white-space: nowrap; } +@media (max-width: 640px) { + .ab-seite .ab-tabelle thead { + position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; + } + .ab-seite .ab-tabelle, .ab-seite .ab-tabelle tbody, .ab-seite .ab-tabelle tr, .ab-seite .ab-tabelle td { display: block; } + .ab-seite .ab-tabelle tr { padding: 8px 0; border-bottom: 1px solid var(--ab-linie); } + .ab-seite .ab-tabelle td { + display: flex; justify-content: space-between; gap: 12px; border: 0; padding: 2px 0; text-align: right; white-space: normal; + } + .ab-seite .ab-tabelle td:first-child { display: block; text-align: left; font-weight: 700; } + .ab-seite .ab-tabelle td:nth-child(n+2) { white-space: normal; } + .ab-seite .ab-tabelle td:nth-child(n+2)::before { content: attr(data-label); color: var(--ab-weich); text-align: left; } + .ab-seite .ab-zeile { grid-template-columns: 1fr; gap: 0; } + .ab-seite .ab-wurzel { padding: 20px 0; } +} + +/* Formular */ +.ab-seite .ab-bestaetigen { margin-top: 24px; padding-top: 8px; border-top: 1px solid var(--ab-linie); } +.ab-seite .ab-feldgruppe { border: 0; margin: 0; padding: 0; min-width: 0; } +.ab-seite .ab-feldgruppe legend { font-weight: 700; padding: 0; margin: 12px 0 4px; } +.ab-seite .ab-haken { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; min-height: 44px; font-size: 15px; cursor: pointer; } +.ab-seite .ab-haken input { flex: 0 0 22px; width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--ab-knopf); } +.ab-seite .ab-frei { color: var(--ab-weich); font-size: 0.85em; } +.ab-seite .ab-fehler { margin: 8px 0; color: var(--ab-fehler); font-weight: 600; } +.ab-seite .ab-fehler[hidden] { display: none; } +.ab-seite .ab-knopf { + display: inline-block; min-height: 44px; padding: 0 24px; border: 0; border-radius: var(--kn-radius, 6px); cursor: pointer; + background: var(--ab-knopf); color: var(--ab-knopf-text); font: inherit; font-weight: 600; box-shadow: 0 1px 1px rgba(0, 0, 0, .12), 0 2px 5px rgba(60, 66, 87, .08); +} +.ab-seite .ab-knopf:disabled { opacity: 0.45; cursor: default; } +.ab-seite .ab-knopf:focus-visible, .ab-seite .ab-link:focus-visible { outline: 2px solid var(--ab-fokus); outline-offset: 2px; } +.ab-seite .ab-notiz, .ab-seite .ab-gesperrt { margin: 12px 0 0; font-size: 0.85rem; color: var(--ab-weich); } +@media (max-width: 640px) { + .ab-seite .ab-knopf { width: 100%; } +} + +/* Installierte App: Weg zurück in den Kundenbereich */ +.ab-app-back { display: none; } +@media (display-mode: standalone) { + .ab-app-back { + display: inline-block; margin: calc(env(safe-area-inset-top) + 12px) 16px 0; font-size: 15px; font-weight: 600; color: var(--ab-text); text-decoration: none; + } + .ab-seite .ab-kopf { padding-top: 12px; } +} diff --git a/public/neu/oeffentlich/offline.html b/public/neu/oeffentlich/offline.html new file mode 100644 index 0000000..220fa8b --- /dev/null +++ b/public/neu/oeffentlich/offline.html @@ -0,0 +1,48 @@ + + + + + + + Offline – WEBklar Kundenbereich + + + + +
+ +

Keine Internetverbindung

+

Der Kundenbereich braucht eine Verbindung. Sobald du wieder online bist, geht es hier weiter.

+ +
+ + + diff --git a/public/neu/oeffentlich/widerrufen.html b/public/neu/oeffentlich/widerrufen.html new file mode 100644 index 0000000..47a937a --- /dev/null +++ b/public/neu/oeffentlich/widerrufen.html @@ -0,0 +1,65 @@ + + + + + + + Vertrag widerrufen – WEBklar + + + + +
+ + ‹ Zurück zum Kundenbereich +
WEBKLAR
+

Vertrag widerrufen

+ +
+ +
+ Vertrag + + + + + + + + +
+ + +
+ + +
+ + + + + + + + + + + + +
+ + +
+ + + + + diff --git a/test/knAnsichtOeffentlich.test.js b/test/knAnsichtOeffentlich.test.js new file mode 100644 index 0000000..67ffed7 --- /dev/null +++ b/test/knAnsichtOeffentlich.test.js @@ -0,0 +1,33 @@ +import { test } from 'node:test' +import assert from 'node:assert/strict' +import { readFileSync } from 'node:fs' +import { sichtbarerText } from './support/knWortlautOrakel.js' + +const lese = (p) => readFileSync(new URL(`../public/${p}`, import.meta.url), 'utf8') +const PAARE = ['login', 'kuendigen', 'widerrufen', 'auftrag', 'offline'].map((n) => [`${n}.html`, `neu/oeffentlich/${n}.html`]) +const koerper = (html) => html.slice(html.search(/ [...koerper(html).matchAll(/\s(name|id|value|type|autocomplete|maxlength|required|min|max|step|inputmode|placeholder|enterkeyhint|data-text|data-label|data-label-for)(?:="([^"]*)")?/g)].map((m) => `${m[1]}=${m[2] ?? ''}`).sort() +const skripte = (html) => [...html.matchAll(/]*>[\s\S]*?<\/script>/g)].map((m) => m[0].replace(/\s+/g, ' ')) +for (const [alt, neu] of PAARE) { + test(`${neu}: gleicher sichtbarer Text, gleiche Felder, gleiche Skripte wie ${alt}`, () => { + assert.equal(sichtbarerText(lese(neu)), sichtbarerText(lese(alt))); assert.deepEqual(attribute(lese(neu)), attribute(lese(alt))); assert.deepEqual(skripte(lese(neu)), skripte(lese(alt))) + }) + test(`${neu}: neuer Stil, hell, ohne Verläufe, Lila und Dunkelmodus`, () => { + const n = lese(neu) + assert.match(n, //); assert.equal((n.match(/name="theme-color"/g) || []).length, 1) + assert.doesNotMatch(n, /aurora|dot-background|#9d3dfe|gradient|\/login\.css|\/legal-form\.css|\/auftrag\.css|prefers-color-scheme|content="light dark"/) + if (neu.endsWith('offline.html')) assert.doesNotMatch(n, / { + const n = lese('neu/oeffentlich/login.html'); assert.match(n, /