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>
201 lines
11 KiB
HTML
201 lines
11 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, interactive-widget=resizes-content">
|
||
<title>Kundenbereich – WEBklar</title>
|
||
<!-- Als App auf den Homescreen: Manifest, Icons, Statusleiste (App-Ansicht auf dem Handy, kundenbereich.css) -->
|
||
<link rel="manifest" href="/manifest.webmanifest">
|
||
<link rel="icon" href="/favicon.ico" sizes="32x32">
|
||
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
|
||
<link rel="apple-touch-icon" href="/img/apple-touch-icon.png">
|
||
<meta name="theme-color" content="#000000">
|
||
<meta name="mobile-web-app-capable" content="yes">
|
||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
|
||
<meta name="apple-mobile-web-app-title" content="WEBklar">
|
||
|
||
<link rel="stylesheet" href="/login.css">
|
||
<link rel="stylesheet" href="/kundenbereich.css">
|
||
<link rel="stylesheet" href="/chat-composer.css">
|
||
</head>
|
||
<body class="portal-page dashboard-page kb-page">
|
||
<div class="dot-background" aria-hidden="true">
|
||
<div class="dot-pattern"></div>
|
||
<div class="dot-fade"></div>
|
||
</div>
|
||
<div class="kb-glow" aria-hidden="true"></div>
|
||
|
||
<header class="kb-header">
|
||
<!-- App-Ansicht: Zurueck aus Unterseiten der Wartung, Seitentitel beim Scrollen (initAppShell) -->
|
||
<button type="button" class="kb-back hidden" id="kb-back" aria-label="Zurück zu Wartung">
|
||
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M15 18l-6-6 6-6"/></svg>
|
||
<span>Wartung</span>
|
||
</button>
|
||
<div class="kb-bar-title">
|
||
<a class="kb-logo" href="/dashboard.html"><svg class="kb-logo-mark" 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>WEBKLAR</a>
|
||
<span class="kb-app-title" id="kb-app-title" aria-hidden="true"></span>
|
||
</div>
|
||
<div class="kb-account">
|
||
<div class="kb-account-text">
|
||
<strong id="customer-name"></strong>
|
||
<span id="customer-meta"></span>
|
||
</div>
|
||
<button type="button" class="kb-avatar" id="customer-avatar" aria-label="Mein Konto" aria-haspopup="dialog" aria-controls="kb-sheet"></button>
|
||
<button type="button" class="kb-logout" id="logout-btn">Abmelden</button>
|
||
</div>
|
||
</header>
|
||
|
||
<!-- Konto: auf dem Handy als Bottom-Sheet, am Desktop als Popover unter dem Avatar (initAppShell) -->
|
||
<dialog class="kb-sheet" id="kb-sheet" aria-label="Mein Konto">
|
||
<div class="kb-sheet-panel">
|
||
<div class="kb-sheet-grip" aria-hidden="true"></div>
|
||
<div class="kb-sheet-me">
|
||
<span class="kb-avatar" id="kb-sheet-avatar" aria-hidden="true"></span>
|
||
<div class="kb-sheet-me-text">
|
||
<strong id="kb-sheet-name">Mein Konto</strong>
|
||
<span id="kb-sheet-meta"></span>
|
||
</div>
|
||
<button type="button" class="kb-sheet-x" data-sheet-close aria-label="Schließen">
|
||
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M18 6 6 18M6 6l12 12"/></svg>
|
||
</button>
|
||
</div>
|
||
<!-- App-Ansicht: hierher wandert die Karte "Dein Ansprechpartner" aus der Seitenleiste -->
|
||
<div id="kb-contact-slot"></div>
|
||
<div class="kb-install hidden" data-install></div>
|
||
<nav class="kb-sheet-links" aria-label="Verträge und Rechtliches">
|
||
<a class="legal-strong" href="/kuendigen.html">Verträge hier kündigen</a>
|
||
<a class="legal-strong" href="/widerrufen.html">Vertrag widerrufen</a>
|
||
<a href="/abo-bedingungen.html" target="_blank" rel="noopener">Vertragsbedingungen</a>
|
||
<a href="/datenschutz.html" target="_blank" rel="noopener">Datenschutz</a>
|
||
<a href="https://webklar.com/impressum" target="_blank" rel="noopener">Impressum</a>
|
||
</nav>
|
||
<button type="button" class="kb-sheet-logout" id="kb-sheet-logout">Abmelden</button>
|
||
</div>
|
||
</dialog>
|
||
|
||
<div class="kb-shell dashboard-content-reveal">
|
||
<!-- Seitenleiste: Navigation, Ansprechpartner, Wartungs-Abo. In der App-Ansicht (Handy)
|
||
wird die Navigation zur Tab-Leiste unten; die Karten wandern in Konto-Sheet bzw. Tab "Wartung". -->
|
||
<aside class="kb-side">
|
||
<p class="kb-label">Kundenbereich</p>
|
||
<nav class="kb-nav" aria-label="Kundenbereich">
|
||
<button type="button" class="kb-nav-item active" data-view="projects">
|
||
<svg class="kb-tab-ico" viewBox="0 0 24 24" aria-hidden="true"><rect x="3" y="4" width="18" height="16" rx="3"/><path d="M3 9h18M6.5 6.5h.01M9.5 6.5h.01"/></svg>
|
||
<span class="kb-tab-label">Projekte</span> <span class="kb-count" id="projects-count"></span></button>
|
||
<button type="button" class="kb-nav-item" data-view="activity">
|
||
<svg class="kb-tab-ico" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 12h4l3-7 4 14 3-7h4"/></svg>
|
||
<span class="kb-tab-label">Fortschritt</span></button>
|
||
<button type="button" class="kb-nav-item" data-view="invoices">
|
||
<svg class="kb-tab-ico" viewBox="0 0 24 24" aria-hidden="true"><path d="M6 3h12v18l-3-2-3 2-3-2-3 2z"/><path d="M9 8h6M9 12h6M9 16h3"/></svg>
|
||
<span class="kb-tab-label">Rechnungen</span> <span class="kb-badge kb-badge-red hidden" id="invoices-badge" title="offene Rechnungen"></span></button>
|
||
<button type="button" class="kb-nav-item" data-view="chat">
|
||
<svg class="kb-tab-ico" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 14.5a2.5 2.5 0 0 1-2.5 2.5H8l-4 4V5.5A2.5 2.5 0 0 1 6.5 3h11A2.5 2.5 0 0 1 20 5.5z"/></svg>
|
||
<span class="kb-tab-label">Chat</span> <span class="kb-badge hidden" id="chat-badge" title="ungelesene Nachrichten"></span></button>
|
||
<!-- Nur App-Ansicht; am Desktop steht die Wartung als Karte in der Seitenleiste -->
|
||
<button type="button" class="kb-nav-item kb-tab-wartung hidden" data-view="wartung" id="kb-tab-wartung">
|
||
<svg class="kb-tab-ico" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 3l7 3v5.5c0 4.3-2.9 8.1-7 9.5-4.1-1.4-7-5.2-7-9.5V6z"/><path d="M9 12l2 2 4-4"/></svg>
|
||
<span class="kb-tab-label">Wartung</span> <span class="kb-badge hidden" id="kb-tab-wartung-badge"></span></button>
|
||
</nav>
|
||
|
||
<section class="kb-card kb-contact" aria-label="Ansprechpartner">
|
||
<p class="kb-label">Dein Ansprechpartner</p>
|
||
<strong id="contact-name">WEBklar-Team</strong>
|
||
<span id="contact-response">Antwort meist < 1 Werktag</span>
|
||
<button type="button" data-view="chat">Nachricht schreiben</button>
|
||
</section>
|
||
|
||
<!-- Wartungs-Abo: Angebot bzw. Status (app.js) -->
|
||
<section class="kb-abo hidden" id="abo-card" aria-live="polite"></section>
|
||
</aside>
|
||
|
||
<main class="kb-main">
|
||
<div id="viewas-banner" class="viewas-banner hidden"></div>
|
||
<p id="load-error" class="error hidden"></p>
|
||
|
||
<!-- Projekte -->
|
||
<section class="kb-view active" id="view-projects">
|
||
<header class="kb-head">
|
||
<h1>Projekte</h1>
|
||
<p id="projects-subtitle">Deine Website – Vorschau, Status und Details.</p>
|
||
</header>
|
||
<!-- App-Ansicht im Browser: Hinweis "Zum Homescreen hinzufügen" (ausblendbar) -->
|
||
<div class="kb-install kb-install-card hidden" data-install data-install-dismissible></div>
|
||
<p id="loading" class="kb-empty">Projekte werden geladen…</p>
|
||
<ul id="projects" class="kb-projects hidden"></ul>
|
||
<div id="empty" class="kb-panel kb-empty hidden">Noch keine Website-Projekte zugewiesen.</div>
|
||
</section>
|
||
|
||
<!-- Fortschritt -->
|
||
<section class="kb-view" id="view-activity">
|
||
<header class="kb-head">
|
||
<h1>Fortschritt</h1>
|
||
<p>Was wir an deinen Projekten erledigt haben.</p>
|
||
</header>
|
||
<div class="kb-panel" id="activity-body"><p class="kb-empty">Lade…</p></div>
|
||
</section>
|
||
|
||
<!-- Rechnungen -->
|
||
<section class="kb-view" id="view-invoices">
|
||
<header class="kb-head">
|
||
<h1>Rechnungen</h1>
|
||
<p>Deine Rechnungen ansehen, bezahlen und herunterladen.</p>
|
||
</header>
|
||
<div class="kb-panel" id="invoices-body"><p class="kb-empty">Lade…</p></div>
|
||
<p class="kb-note hidden" id="invoices-abo-note">Rechnungen zum Wartungs-Abo findest du unter „Abo verwalten & Rechnungen“ <span class="kb-desk-only">in der Seitenleiste</span><span class="kb-app-only">im Bereich <a href="#wartung" data-view="wartung">Wartung</a></span>.</p>
|
||
</section>
|
||
|
||
<!-- Chat -->
|
||
<section class="kb-view" id="view-chat">
|
||
<header class="kb-head">
|
||
<h1>Chat</h1>
|
||
<p>Schreib uns – wir antworten meist innerhalb eines Werktags.</p>
|
||
</header>
|
||
<div class="kb-panel chat-box">
|
||
<div class="chat-messages" id="chat-messages"></div>
|
||
<!-- Eingabezeile mit Bild, Kamera, Datei und Sprachnachricht (chat-composer.js) -->
|
||
<div id="chat-composer"></div>
|
||
<p class="chat-hint">Enter = Senden, Shift+Enter = neue Zeile. Bilder und Dateien bis 25 MB – auch per Einfügen oder Hineinziehen.</p>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- App-Ansicht, Tab "Wartung": die Abo-Karte der Seitenleiste als Übersicht;
|
||
Stundenkonto bzw. Bestellung und Übernahmegutschrift öffnen sich als Unterseiten -->
|
||
<section class="kb-view" id="view-wartung">
|
||
<header class="kb-head">
|
||
<h1>Wartung</h1>
|
||
<p>Betrieb, Pflege und Support für Ihre Website.</p>
|
||
</header>
|
||
<div id="kb-abo-slot"><p class="kb-empty">Lade…</p></div>
|
||
</section>
|
||
|
||
<!-- Wartungs-Abo: Bestellung bzw. Stundenkonto (app.js) -->
|
||
<section class="kb-view" id="view-abo" aria-live="polite"></section>
|
||
|
||
<!-- Übernahmegutschrift (app.js) -->
|
||
<section class="kb-view" id="view-takeover">
|
||
<header class="kb-head">
|
||
<h1>Übernahmegutschrift</h1>
|
||
<p>Schon woanders bezahlt? Wir rechnen die doppelt bezahlte Zeit an.</p>
|
||
</header>
|
||
<div id="takeover-card" aria-live="polite"><p class="kb-empty">Lade…</p></div>
|
||
</section>
|
||
|
||
<footer class="kb-legal">
|
||
<a class="legal-strong" href="/kuendigen.html">Verträge hier kündigen</a>
|
||
<a class="legal-strong" href="/widerrufen.html">Vertrag widerrufen</a>
|
||
<a href="/abo-bedingungen.html" target="_blank" rel="noopener">Vertragsbedingungen</a>
|
||
<a href="/datenschutz.html" target="_blank" rel="noopener">Datenschutz</a>
|
||
<a href="https://webklar.com/impressum" target="_blank" rel="noopener">Impressum</a>
|
||
</footer>
|
||
</main>
|
||
</div>
|
||
|
||
<script src="/chat-composer.js"></script>
|
||
<script src="/app.js"></script>
|
||
<script>
|
||
initDashboardPage();
|
||
</script>
|
||
</body>
|
||
</html>
|