107 lines
6.3 KiB
HTML
107 lines
6.3 KiB
HTML
<!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>Faerro KB</title>
|
||
<link rel="icon" href="/favicon.svg" type="image/svg+xml" />
|
||
<link rel="manifest" href="/manifest.webmanifest" />
|
||
<link rel="stylesheet" href="/styles.css" />
|
||
</head>
|
||
<body>
|
||
<header class="topbar">
|
||
<a class="brand" href="/" aria-label="Faerro KB"><span class="brand-mark">KB</span><span>Faerro <b>KB</b></span></a>
|
||
<div class="topbar-actions">
|
||
<button id="settings-button" class="icon-button settings-button" type="button" title="Backup settings" aria-label="Backup settings">⚙</button>
|
||
<span id="network-state" class="network-state"><i></i> Checking</span>
|
||
</div>
|
||
</header>
|
||
|
||
<dialog id="settings-dialog" class="settings-dialog" aria-labelledby="settings-title">
|
||
<form id="backup-form" method="dialog">
|
||
<div class="dialog-heading">
|
||
<h2 id="settings-title">Database backup</h2>
|
||
<button id="close-settings" class="icon-button dialog-close" type="button" title="Close settings" aria-label="Close settings">×</button>
|
||
</div>
|
||
<p class="settings-copy">A consistent SQLite snapshot is uploaded after each saved transcript. Keeps latest, 7 daily, 4 weekly, 12 monthly, and 5 yearly snapshots. WebDAV receives the full database file each time.</p>
|
||
<fieldset id="backup-fields">
|
||
<label for="backup-url">WebDAV folder URL</label>
|
||
<input id="backup-url" name="url" type="url" placeholder="https://cloud.example/remote.php/dav/files/name/Faerro" autocomplete="url" />
|
||
<label for="backup-username">Username</label>
|
||
<input id="backup-username" name="username" type="text" autocomplete="username" />
|
||
<label for="backup-password">App password</label>
|
||
<input id="backup-password" name="password" type="password" autocomplete="new-password" placeholder="Leave blank to keep the saved password" />
|
||
<label class="clear-password"><input id="clear-backup-password" type="checkbox" /> Remove saved password</label>
|
||
<div class="settings-actions">
|
||
<button class="save-written-note" type="submit">Save settings</button>
|
||
<button id="test-backup" class="secondary-button" type="button">Test WebDAV</button>
|
||
</div>
|
||
</fieldset>
|
||
<p id="backup-status" class="backup-status" role="status">Loading backup status…</p>
|
||
<button id="retry-backup" class="secondary-button retry-backup" type="button" hidden>Retry backup</button>
|
||
</form>
|
||
</dialog>
|
||
|
||
<main id="main">
|
||
<section class="capture" aria-labelledby="capture-title">
|
||
<div class="capture-modes" role="tablist" aria-label="Note type">
|
||
<button id="voice-mode" class="capture-mode active" type="button" role="tab" aria-selected="true" aria-controls="voice-panel">Voice</button>
|
||
<button id="write-mode" class="capture-mode" type="button" role="tab" aria-selected="false" aria-controls="write-panel">Write</button>
|
||
<button id="read-mode" class="capture-mode" type="button" role="tab" aria-selected="false" aria-controls="archive-section">Read</button>
|
||
</div>
|
||
<div id="voice-panel" role="tabpanel" aria-labelledby="voice-mode">
|
||
<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</strong>
|
||
<span id="record-help">Tap to record a voice note</span>
|
||
<div id="audio-level" class="audio-level" role="meter" aria-label="Audio level" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0" hidden>
|
||
<span id="audio-level-fill"></span>
|
||
</div>
|
||
</div>
|
||
<time id="record-time">00:00</time>
|
||
</div>
|
||
<div class="audio-upload-row">
|
||
<label class="audio-upload-button" for="audio-file-input">↑ Upload audio</label>
|
||
<input id="audio-file-input" type="file" accept="audio/*,.mp3,.m4a,.aac,.ogg,.opus,.flac,.wav" multiple />
|
||
</div>
|
||
<div class="record-meter"><span id="record-meter-fill"></span></div>
|
||
<div id="capture-message" class="capture-message" role="status"></div>
|
||
</div>
|
||
<div id="write-panel" class="write-panel" role="tabpanel" aria-labelledby="write-mode" hidden>
|
||
<label class="write-label" for="written-note">Write a note</label>
|
||
<textarea id="written-note" class="written-note" placeholder="What’s on your mind?" rows="7"></textarea>
|
||
<div class="write-actions">
|
||
<span id="draft-status" class="draft-status" role="status">Draft stays on this device until you save it.</span>
|
||
<button id="save-written-note" class="save-written-note" type="button" disabled>Upload note</button>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="queue-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 id="archive-section" class="archive-section" aria-labelledby="archive-title">
|
||
<div class="section-heading archive-heading">
|
||
<div><span class="section-kicker">SERVER STORED</span><h2 id="archive-title">Saved notes</h2></div>
|
||
</div>
|
||
<div id="archive-list" class="archive-list"></div>
|
||
<p id="archive-empty" class="empty-state">Notes awaiting transcription will appear here.</p>
|
||
</section>
|
||
</main>
|
||
|
||
<footer><p>Faerro KB © 2026</p></footer>
|
||
<script src="/app.js" defer></script>
|
||
</body>
|
||
</html> |