ClaudeandClaude Opus 5.5
57ba2c06f9
Der Fix aus bd7b1fc (Seite mindestens bildschirmhoch) hat nicht gewirkt
und wird zurueckgenommen. Die Ursache ist nicht die Seitenhoehe:
Bei black-translucent ist der Bereich fuer fixierte Elemente in der
installierten iOS-App um die Statusleiste (59 pt) kuerzer als der
Bildschirm. Solange die Seite oben steht, klebt dieser Bereich oben, und
die Tab-Leiste haengt ueber dem unteren Rand. Nach dem Herunterscrollen
sitzt sie richtig, deshalb sah es nur im Chat gut aus.
Mit undurchsichtiger Statusleiste (black) beginnt die App unterhalb der
Statusleiste, und der Bereich ist korrekt bemessen. Nachteil: Der lila
Schimmer reicht nicht mehr hinter die Uhrzeit. Die Abstaende oben kommen
weiter aus env(safe-area-inset-top), das dann 0 ist.
Browser, Android und Desktop unveraendert (pixelgleich).
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
203 lines
11 KiB
HTML
203 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">
|
||
<!-- Undurchsichtige Statusleiste: bei black-translucent ist der Bereich fuer fixierte Elemente in der
|
||
installierten iOS-App um die Statusleiste zu kurz (Tab-Leiste haengt ~59 px ueber dem Rand) -->
|
||
<meta name="apple-mobile-web-app-status-bar-style" content="black">
|
||
<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>
|