Initial commit

2026-09-26 11:34:15 +02:00
commit 9d0c7777a5
13 changed files with 716 additions and 0 deletions
@@ -0,0 +1,60 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
+    <meta name="theme-color" content="#f5f3ed" />
+    <meta name="apple-mobile-web-app-capable" content="yes" />
+    <meta name="apple-mobile-web-app-status-bar-style" content="default" />
+    <title>Voice KB</title>
+    <link rel="manifest" href="/manifest.webmanifest" />
+    <link rel="stylesheet" href="/styles.css" />
+  </head>
+  <body>
+    <header class="topbar">
+      <a class="brand" href="/" aria-label="Voice KB home"><span class="brand-mark">V</span><span>voice <b>kb</b></span></a>
+      <span id="network-state" class="network-state"><i></i> Checking</span>
+    </header>
+
+    <main>
+      <section class="capture" aria-labelledby="capture-title">
+        <div class="section-kicker"><span>PERSONAL ARCHIVE</span><span id="date-label"></span></div>
+        <h1 id="capture-title">Catch the thought<br /><em>before it goes.</em></h1>
+        <p class="intro">Private voice notes, kept on your own server.</p>
+        <div class="recorder-row">
+          <button id="record-button" class="record-button" type="button" aria-label="Start recording">
+            <span class="record-dot"></span>
+          </button>
+          <div class="record-copy">
+            <strong id="record-title">Ready when you are</strong>
+            <span id="record-help">Tap to record a voice note</span>
+          </div>
+          <time id="record-time">00:00</time>
+        </div>
+        <div class="record-meter"><span id="record-meter-fill"></span></div>
+        <div id="capture-message" class="capture-message" role="status"></div>
+      </section>
+
+      <section class="queue-section" aria-labelledby="queue-title">
+        <div class="section-heading">
+          <div><span class="section-kicker">ON THIS DEVICE</span><h2 id="queue-title">Upload queue <span id="queue-count">0</span></h2></div>
+          <button id="sync-button" class="icon-button" type="button" title="Sync queued recordings" aria-label="Sync queued recordings">↻</button>
+        </div>
+        <ul id="queue-list" class="queue-list"></ul>
+        <p id="queue-empty" class="empty-state">New recordings wait here until the server confirms they’re stored.</p>
+      </section>
+
+      <section class="archive-section" aria-labelledby="archive-title">
+        <div class="section-heading archive-heading">
+          <div><span class="section-kicker">YOUR LIBRARY</span><h2 id="archive-title">Recent notes</h2></div>
+          <label class="search-box"><span aria-hidden="true">⌕</span><input id="search-input" type="search" placeholder="Search transcripts" autocomplete="off" /></label>
+        </div>
+        <div id="archive-list" class="archive-list"></div>
+        <p id="archive-empty" class="empty-state">Your stored notes will appear here.</p>
+      </section>
+    </main>
+
+    <footer><span>LOCAL FIRST</span><span id="storage-status">Audio stays on this device until uploaded.</span></footer>
+    <script src="/app.js" defer></script>
+  </body>
+</html>