2<html lang="en">
3<head>
4 <meta charset="utf-8" />
5 <meta name="viewport" content="width=device-width, initial-scale=1" />
6 <title>voicenote</title>
7 <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🎙</text></svg>" />
8 <link rel="stylesheet" href="styles.css" />
9</head>
10<body>
11 <div class="page">
12 <header>
13 <h1>voicenote</h1>
14 <p class="tagline">Voice dictation that never leaves your browser</p>
15 </header>
17 <div class="controls">
18 <button id="recordBtn" class="primary"><span class="dot"></span><span id="recordLabel">Record</span></button>
19 <button id="copyBtn" title="Copy the document to the clipboard">Copy</button>
20 <button id="clearBtn" title="Clear the document">Clear</button>
21 <span id="status" class="status"></span>
22 </div>
24 <div class="modelrow">
25 <label for="model">Model</label>
26 <select id="model"></select>
27 <span id="modelNote" class="hint"></span>
28 </div>
30 <div id="progressWrap" class="progress hidden">
31 <div class="progress-track"><div id="progressBar" class="progress-bar"></div></div>
32 <span id="progressText"></span>
33 </div>
35 <div class="doccard">
36 <textarea id="doc" spellcheck="true"
37 placeholder="Press Record and start speaking — or just type. Your document is saved locally and survives reloads."></textarea>
38 <div id="interim" class="interim"></div>
39 </div>
41 <footer>
42 <span id="wordcount">0 words</span>
43 <span id="engine"></span>
44 </footer>
45 </div>
47 <script type="module" src="app.js"></script>
48</body>
49</html>