Lichttisch/renderer/index.html

<!doctype html>
<html lang="de">
<head>
  <meta charset="utf-8">
  <meta http-equiv="Content-Security-Policy"
        content="default-src 'self'; img-src 'self' nc: data:; media-src nc:; style-src 'self'; script-src 'self'; connect-src 'none'">
  <title>Lichttisch</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>

  <!-- Anmeldung -->
  <section id="login" class="login" hidden>
    <div class="login-panel">
      <h1 class="wordmark">Lichttisch</h1>
      <p class="lede">Deine Fotos aus der Nextcloud ansehen, ohne sie herunterzuladen.</p>

      <label class="field">
        <span>Adresse deiner Nextcloud</span>
        <input id="server" type="url" placeholder="cloud.example.de" autocomplete="url" spellcheck="false">
      </label>

      <div id="browser-login">
        <button id="btn-browser" class="primary">Im Browser anmelden</button>
        <p class="hint">Es öffnet sich deine Nextcloud im Browser. Nach der Bestätigung dort bist du hier automatisch angemeldet.</p>
      </div>

      <div id="waiting" class="waiting" hidden>
        <span class="pulse" aria-hidden="true"></span>
        <p>Bestätige die Anmeldung im Browserfenster.</p>
        <button id="btn-cancel" class="quiet">Abbrechen</button>
      </div>

      <details id="manual">
        <summary>Mit Benutzername und App-Passwort anmelden</summary>
        <label class="field">
          <span>Benutzername</span>
          <input id="user" type="text" autocomplete="username" spellcheck="false">
        </label>
        <label class="field">
          <span>App-Passwort</span>
          <input id="pass" type="password" autocomplete="current-password">
        </label>
        <p class="hint">Ein App-Passwort erstellst du in der Nextcloud unter Persönliche Einstellungen › Sicherheit.</p>
        <button id="btn-password">Anmelden</button>
      </details>

      <label class="check">
        <input id="remember" type="checkbox" checked>
        <span>Angemeldet bleiben</span>
      </label>

      <p id="login-error" class="error" role="alert" hidden></p>
    </div>
  </section>

  <!-- Startbildschirm beim automatischen Verbinden -->
  <section id="connecting" class="connecting" hidden>
    <p>Verbinde mit deiner Nextcloud …</p>
  </section>

  <!-- Hauptansicht -->
  <div id="app" class="app" hidden>
    <aside class="sidebar">
      <div class="brand">Lichttisch</div>
      <nav class="sources" aria-label="Ansicht">
        <button data-source="timeline">Alle Fotos</button>
        <button data-source="folder">Ordner</button>
        <button data-source="albums">Alben</button>
      </nav>
      <div class="account">
        <div id="acc-name" class="acc-name"></div>
        <div id="acc-server" class="acc-server"></div>
        <button id="btn-logout" class="quiet">Abmelden</button>
      </div>
    </aside>

    <main class="main">
      <header class="toolbar">
        <nav id="crumbs" class="crumbs" aria-label="Pfad"></nav>
        <div class="tools">
          <select id="tl-order" title="Wonach die Zeitleiste sortiert wird">
            <option value="taken">Nach Aufnahmedatum</option>
            <option value="mtime">Nach Änderungsdatum</option>
          </select>
          <select id="sort" title="Sortierung">
            <option value="new">Aufnahmedatum, neueste zuerst</option>
            <option value="old">Aufnahmedatum, älteste zuerst</option>
            <option value="mnew">Änderungsdatum, neueste zuerst</option>
            <option value="mold">Änderungsdatum, älteste zuerst</option>
            <option value="name">Nach Name</option>
          </select>
          <label class="check tool-check" title="Rohdaten im DNG-Format nicht anzeigen">
            <input id="hide-dng" type="checkbox">
            <span>DNG ausblenden</span>
          </label>
          <label class="zoom" title="Vorschaugröße">
            <span class="zoom-dot small" aria-hidden="true"></span>
            <input id="zoom" type="range" min="110" max="360" step="10" value="180" aria-label="Vorschaugröße">
            <span class="zoom-dot big" aria-hidden="true"></span>
          </label>
        </div>
      </header>
      <div id="content" class="content" tabindex="-1"></div>
    </main>
  </div>

  <!-- Bildbetrachter -->
  <div id="viewer" class="viewer" hidden role="dialog" aria-label="Bildansicht">
    <div class="v-top">
      <div class="v-title">
        <span id="v-name"></span>
        <span id="v-meta" class="v-meta"></span>
      </div>
      <div class="v-actions">
        <button id="v-original" title="Originaldatei laden (O)">Original</button>
        <button id="v-open" title="In der Nextcloud öffnen">In Nextcloud</button>
        <button id="v-full" title="Vollbild (F)">Vollbild</button>
        <button id="v-close" title="Schließen (Esc)" aria-label="Schließen">✕</button>
      </div>
    </div>
    <div class="v-stage">
      <img id="v-img" alt="">
      <video id="v-video" controls hidden></video>
      <p id="v-msg" class="v-msg" hidden></p>
    </div>
    <button id="v-prev" class="v-nav prev" aria-label="Vorheriges Bild">‹</button>
    <button id="v-next" class="v-nav next" aria-label="Nächstes Bild">›</button>
  </div>

  <script src="app.js"></script>
</body>
</html>