date-wizard/public/admin.html

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
  <title>Terminverwaltung - Date-Planer</title>
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&family=Quicksand:wght@600;700&display=swap" rel="stylesheet" />
  <link rel="stylesheet" href="style.css" />
  <link rel="stylesheet" href="admin.css" />
</head>
<body class="page-admin">
  <main class="admin-shell">
    <section id="loginView" class="login-view" aria-labelledby="loginTitle">
      <p class="eyebrow">Date-Planer</p>
      <h1 id="loginTitle">Terminverwaltung</h1>
      <p class="login-copy">Melde dich an, um verfügbare Tage zu verwalten.</p>
      <form id="loginForm" class="login-form">
        <label for="passwordInput">Passwort</label>
        <input id="passwordInput" name="password" type="password" autocomplete="current-password" required />
        <button class="btn btn-primary" type="submit">Anmelden</button>
      </form>
      <p id="loginMessage" class="form-message" role="status" aria-live="polite"></p>
    </section>

    <section id="adminView" class="admin-view hidden" aria-labelledby="adminTitle">
      <header class="admin-header">
        <div>
          <p class="eyebrow">Date-Planer</p>
          <h1 id="adminTitle">Verfügbare Tage</h1>
        </div>
        <button id="logoutBtn" class="text-action" type="button">Abmelden</button>
      </header>

      <nav class="admin-nav" aria-label="Verwaltung">
        <button class="admin-nav-btn is-active" type="button" data-view="datesView">Termine</button>
        <button class="admin-nav-btn" type="button" data-view="bookingsView">Gebuchte Termine</button>
        <button class="admin-nav-btn" type="button" data-view="activitiesView">Aktivitäten</button>
      </nav>

      <div id="datesView" class="admin-panel">
      <section class="admin-section add-date-section" aria-labelledby="addDateTitle">
        <div class="section-heading">
          <h2 id="addDateTitle">Verfügbare Tage planen</h2>
          <p>Einmal klicken für kurz, zweimal für lang und ein drittes Mal zum Entfernen.</p>
        </div>
        <div class="admin-calendar" aria-label="Kalender zur Terminplanung">
          <div class="calendar-header">
            <button id="prevMonthBtn" class="month-nav-btn" type="button" aria-label="Vorheriger Monat">‹</button>
            <h3 id="monthLabel" class="month-label">Monat Jahr</h3>
            <button id="nextMonthBtn" class="month-nav-btn" type="button" aria-label="Nächster Monat">›</button>
          </div>
          <div class="weekday-row" id="weekdayRow"></div>
          <div class="day-grid" id="dayGrid"></div>
        </div>
        <div class="calendar-legend" aria-label="Legende">
          <span><i class="legend-dot is-short"></i>Kurz</span>
          <span><i class="legend-dot is-long"></i>Lang</span>
        </div>
        <button id="saveDatesBtn" class="btn btn-primary" type="button">Änderungen speichern</button>
        <p id="addDateMessage" class="form-message" role="status" aria-live="polite"></p>
      </section>

      <section class="admin-section dates-section" aria-labelledby="datesTitle">
        <div class="section-heading dates-heading">
          <div>
            <h2 id="datesTitle">Eingetragene Tage</h2>
            <p id="dateCount">Lade Termine...</p>
          </div>
        </div>
        <ul id="datesList" class="dates-list" aria-live="polite"></ul>
        <p id="emptyDates" class="empty-dates hidden">Noch keine Termine eingetragen.</p>
      </section>
      </div>

      <div id="bookingsView" class="admin-panel hidden">
        <section class="admin-section" aria-labelledby="bookingsTitle">
          <div class="section-heading">
            <h2 id="bookingsTitle">Gebuchte Termine</h2>
            <p>Neueste Buchungen stehen oben.</p>
          </div>
          <ul id="bookingsList" class="bookings-list" aria-live="polite"></ul>
          <p id="emptyBookings" class="empty-dates hidden">Noch keine Termine gebucht.</p>
        </section>
      </div>

      <div id="activitiesView" class="admin-panel hidden">
        <section class="admin-section" aria-labelledby="activitiesTitle">
          <div class="section-heading">
            <h2 id="activitiesTitle">Aktivitäten verwalten</h2>
            <p>Aktive Aktivitäten werden Besucherinnen und Besuchern zur Auswahl angezeigt.</p>
          </div>
        </section>
        <section class="admin-section" aria-labelledby="activityListTitle">
          <div class="section-heading">
            <h2 id="activityListTitle">Vorhandene Aktivitäten</h2>
            <p id="activityMessage" class="form-message" role="status" aria-live="polite"></p>
          </div>
          <form id="activityAddRow" class="activity-row activity-add-row">
            <div class="activity-identity activity-add-identity">
              <button id="newActivityIcon" class="activity-row-icon" type="button" title="Icon auswählen" aria-label="Icon für neue Aktivität auswählen">🧺</button>
              <input id="newActivityName" class="activity-name-input" type="text" maxlength="100" placeholder="Neue Aktivität" aria-label="Name der neuen Aktivität" required />
            </div>
            <div class="activity-actions">
              <button id="newActivityType" class="row-action type-action is-short" type="button" title="Auf lang ändern" aria-label="Neue Aktivität: auf lang ändern"><span class="duration-indicator"></span></button>
              <button class="row-action" type="submit" title="Aktivität hinzufügen" aria-label="Aktivität hinzufügen">＋</button>
            </div>
          </form>
          <ul id="activitiesList" class="activities-list" aria-live="polite"></ul>
          <p id="emptyActivities" class="empty-dates hidden">Noch keine Aktivitäten angelegt.</p>
        </section>
      </div>
    </section>
  </main>
  <script src="admin.js" defer></script>
</body>
</html>