feat: create web PWA frontend

author: Paul Buetow <paul@buetow.org> 2026-04-29 20:19:34 +0300
committer: Paul Buetow <paul@buetow.org> 2026-04-29 20:19:34 +0300
commit: 4a70c0ea083306cb79d0fa325d331ffa4333154a (patch)
tree: 84df7e2f781974ef45ac8c34f1a59e80fdd5c41d /web/index.html
parent: cf30414c2a0696cc75c615f4da66ea85d0522c42 (diff)
1 files changed, 120 insertions, 1 deletions
diff --git a/web/index.html b/web/index.html
index 630ee64..f16c0de 100644
--- a/web/index.html
+++ b/web/index.html
@@ -2,9 +2,128 @@
 <html lang="en">
 <head>
 <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>KISS Media Player</title>
+<link rel="manifest" href="/manifest.json">
+<link rel="stylesheet" href="/css/theme.css">
+<link rel="stylesheet" href="/css/layout.css">
+<link rel="stylesheet" href="/css/components.css">
+<link rel="stylesheet" href="/css/player.css">
+<script type="module" src="/js/app.js"></script>
 </head>
 <body>
-<h1>Hello KISS</h1>
+<header class="site-header" role="banner">
+  <a href="/" class="logo">KISS Media</a>
+  <div class="search-bar" role="search">
+    <span aria-hidden="true">🔎</span>
+    <input id="search-input" type="search" placeholder="Search… (press /)" autocomplete="off" aria-label="Search media">
+    <button id="search-clear" class="icon-btn btn-sm" title="Clear">✕</button>
+  </div>
+  <div class="spacer"></div>
+  <button id="shuffle-toggle" class="icon-btn" title="Shuffle (r)">🔀</button>
+  <button id="admin-toggle" class="icon-btn hidden" title="Admin panel (a)">⚙</button>
+  <button id="theme-toggle" class="icon-btn" title="Toggle theme">☀</button>
+  <span id="user-name" class="text-secondary" style="font-size:0.85rem;"></span>
+  <button id="logout-btn" class="btn btn-ghost btn-sm">Log out</button>
+  <button id="menu-btn" class="icon-btn" title="Menu" aria-label="Open sets">☰</button>
+</header>
+
+<nav id="sidebar" class="sidebar" aria-label="Sets">
+  <h2>Sets</h2>
+  <div id="set-list"></div>
+</nav>
+
+<div class="page" role="main">
+  <div class="main-content">
+    <div class="toolbar" style="display:flex;align-items:center;gap:0.5rem;margin-bottom:0.75rem;">
+      <select id="filter-type" aria-label="Filter by type">
+        <option value="">All</option>
+        <option value="video">Video</option>
+        <option value="audio">Audio</option>
+      </select>
+      <button id="filter-favorites" class="btn btn-ghost btn-sm">❤ Favorites</button>
+      <div class="spacer"></div>
+      <span id="result-count" class="text-muted" style="font-size:0.8rem;"></span>
+    </div>
+    <div id="media-grid" class="media-grid" tabindex="0" aria-label="Media grid"></div>
+  </div>
+</div>
+
+<aside id="player" class="player open" aria-label="Player">
+  <div class="stage">
+    <video id="media-video" playsinline controlslist="nodownload"></video>
+    <audio id="media-audio" style="display:none;"></audio>
+    <div id="big-play" class="big-play" role="button" aria-label="Play" tabindex="0">
+      <div class="play-icon">▶</div>
+    </div>
+  </div>
+  <div class="controls">
+    <button id="btn-play" class="icon-btn" aria-label="Play/Pause (Space/p)">▶</button>
+    <div class="time" id="time-elapsed">0:00</div>
+    <div id="progress-track" class="progress-track" tabindex="0" aria-label="Seek">
+      <div id="progress-fill" class="progress-fill"></div>
+      <div id="progress-thumb" class="progress-thumb" aria-hidden="true"></div>
+    </div>
+    <div class="time" id="time-total">0:00</div>
+    <button id="btn-prev" class="icon-btn" aria-label="Previous">⏮</button>
+    <button id="btn-next" class="icon-btn" aria-label="Next">⏭</button>
+    <div class="volume-control">
+      <button id="btn-mute" class="icon-btn" aria-label="Mute">🔊</button>
+      <input id="volume-slider" type="range" min="0" max="1" step="0.05" value="1" class="volume-slider" aria-label="Volume">
+    </div>
+    <button id="btn-fullscreen" class="icon-btn" aria-label="Fullscreen (f)">⛶</button>
+  </div>
+</aside>
+
+<footer class="toast" id="toast" role="status" aria-live="polite"></footer>
+
+<!-- Notes Modal -->
+<div id="notes-modal" class="modal-overlay" role="dialog" aria-modal="true" aria-labelledby="notes-title">
+  <div class="modal">
+    <div class="modal-header">
+      <h3 id="notes-title">Notes</h3>
+      <div class="spacer"></div>
+      <button id="notes-close" class="icon-btn" aria-label="Close">✕</button>
+    </div>
+    <textarea id="notes-textarea" rows="6" placeholder="Add your notes…"></textarea>
+    <div style="display:flex;justify-content:flex-end;gap:0.5rem;margin-top:0.5rem;">
+      <button id="notes-delete" class="btn btn-danger btn-sm">Delete</button>
+      <button id="notes-save" class="btn btn-primary btn-sm">Save</button>
+    </div>
+  </div>
+</div>
+
+<!-- Admin Modal -->
+<div id="admin-modal" class="modal-overlay" role="dialog" aria-modal="true" aria-labelledby="admin-title">
+  <div class="modal" style="width:min(56rem,96vw);">
+    <div class="modal-header">
+      <h3 id="admin-title">Admin</h3>
+      <div class="spacer"></div>
+      <button id="admin-close" class="icon-btn" aria-label="Close">✕</button>
+    </div>
+    <div style="display:flex;gap:1rem;flex-wrap:wrap;">
+      <section style="flex:1 1 18rem;">
+        <h4 style="margin:0.25rem 0;font-size:0.9rem;">Users</h4>
+        <div id="admin-users"></div>
+        <form id="admin-user-form" style="margin-top:0.5rem;">
+          <input name="username" placeholder="Username" required autocomplete="off">
+          <input type="password" name="password" placeholder="Password" required autocomplete="new-password">
+          <label style="display:flex;align-items:center;gap:0.35rem;font-size:0.8rem;">
+            <input type="checkbox" name="is_admin"> Admin
+          </label>
+          <button type="submit" class="btn btn-primary btn-sm" style="margin-top:0.25rem;">Add user</button>
+        </form>
+      </section>
+      <section style="flex:1 1 18rem;">
+        <h4 style="margin:0.25rem 0;font-size:0.9rem;">Permissions</h4>
+        <div id="admin-permissions"></div>
+      </section>
+    </div>
+    <div style="display:flex;gap:0.5rem;margin-top:0.75rem;">
+      <button id="admin-rescan" class="btn btn-primary btn-sm">Trigger rescan</button>
+      <button id="admin-trash" class="btn btn-danger btn-sm">View trash</button>
+    </div>
+  </div>
+</div>
 </body>
 </html>
author	Paul Buetow <paul@buetow.org>	2026-04-29 20:19:34 +0300
committer	Paul Buetow <paul@buetow.org>	2026-04-29 20:19:34 +0300
commit	4a70c0ea083306cb79d0fa325d331ffa4333154a (patch)
tree	84df7e2f781974ef45ac8c34f1a59e80fdd5c41d /web/index.html
parent	cf30414c2a0696cc75c615f4da66ea85d0522c42 (diff)