Webklar-Kundenbereich/public/dashboard.html

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Kundenbereich – WEBklar</title>
  <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">
    <a class="kb-logo" href="/dashboard.html">WEBKLAR</a>
    <div class="kb-account">
      <div class="kb-account-text">
        <strong id="customer-name"></strong>
        <span id="customer-meta"></span>
      </div>
      <span class="kb-avatar" id="customer-avatar" aria-hidden="true"></span>
      <button type="button" class="kb-logout" id="logout-btn">Abmelden</button>
    </div>
  </header>

  <div class="kb-shell dashboard-content-reveal">
    <!-- Seitenleiste: Navigation, Ansprechpartner, Wartungs-Abo -->
    <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">Projekte <span class="kb-count" id="projects-count"></span></button>
        <button type="button" class="kb-nav-item" data-view="activity">Fortschritt</button>
        <button type="button" class="kb-nav-item" data-view="invoices">Rechnungen <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">Chat <span class="kb-badge hidden" id="chat-badge" title="ungelesene Nachrichten"></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 &lt; 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>
        <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 &amp; Rechnungen“ in der Seitenleiste.</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>

      <!-- 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>