Initial

renderer/index.html

@@ -0,0 +1,123 @@
+<!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="sort" title="Sortierung">
+            <option value="name">Nach Name</option>
+            <option value="new">Neueste zuerst</option>
+            <option value="old">Älteste zuerst</option>
+          </select>
+          <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>