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>
47 lines
2.1 KiB
HTML
47 lines
2.1 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">
|
||
<meta name="theme-color" content="#000000">
|
||
<title>Offline – WEBklar Kundenbereich</title>
|
||
<!-- Wird vom Service Worker (sw.js) ohne Internet angezeigt: alles inline, keine weiteren Dateien -->
|
||
<style>
|
||
html, body { height: 100%; margin: 0; }
|
||
body {
|
||
display: grid; place-items: center; padding: 24px; box-sizing: border-box;
|
||
background: radial-gradient(ellipse at 50% 0%, rgba(157, 61, 254, 0.22), transparent 60%), #000;
|
||
color: #fff; font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||
text-align: center; line-height: 1.5;
|
||
}
|
||
main { max-width: 340px; }
|
||
svg { width: 72px; height: 72px; border-radius: 18px; }
|
||
h1 { margin: 22px 0 8px; font-size: 22px; }
|
||
p { margin: 0 0 26px; color: rgba(255, 255, 255, 0.6); font-size: 15px; }
|
||
button {
|
||
padding: 13px 26px; border: none; border-radius: 999px; background: #9d3dfe; color: #fff;
|
||
font: inherit; font-weight: 700; font-size: 15px; cursor: pointer;
|
||
}
|
||
button:active { transform: scale(0.97); }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<main>
|
||
<svg viewBox="0 0 512 512" aria-hidden="true">
|
||
<rect width="512" height="512" fill="#fff"/>
|
||
<g transform="translate(256 256) scale(0.9) translate(-256 -256)">
|
||
<ellipse cx="256" cy="256" rx="210" ry="150" fill="#111" transform="rotate(-28 256 256)"/>
|
||
<circle cx="356" cy="172" r="18" fill="#fff"/>
|
||
<path transform="translate(256 256) rotate(-28)" d="M 0,-170 C 22,-105 60,-72 120,-56 C 60,-40 22,-8 0,64 C -22,-8 -60,-40 -120,-56 C -60,-72 -22,-105 0,-170 Z" fill="#fff"/>
|
||
</g>
|
||
</svg>
|
||
<h1>Keine Internetverbindung</h1>
|
||
<p>Der Kundenbereich braucht eine Verbindung. Sobald du wieder online bist, geht es hier weiter.</p>
|
||
<button type="button" onclick="location.reload()">Erneut versuchen</button>
|
||
</main>
|
||
<script>
|
||
window.addEventListener('online', () => location.reload())
|
||
</script>
|
||
</body>
|
||
</html>
|