Convert-first layout with share/download card

index.html

@@ -29,13 +29,17 @@
 
   <main>
     <section id="view-edit">
+      <input id="title" class="title-input" type="text" placeholder="Title (optional, used for the file name)" autocomplete="off" />
       <textarea id="input" spellcheck="false"
         placeholder="Paste an article or any text here. Pasting from a web page keeps the paragraphs and drops menus and scripts."></textarea>
       <p id="share-note" class="note hidden"></p>
+      <div class="edit-tools">
+        <button id="btn-paste" class="ghost small" type="button">Paste</button>
+        <button id="btn-clear" class="ghost small" type="button">Clear</button>
+      </div>
       <div class="edit-actions">
-        <button id="btn-clear" class="ghost" type="button">Clear</button>
-        <button id="btn-paste" class="ghost" type="button">Paste</button>
-        <button id="btn-listen" class="primary" type="button">Listen</button>
+        <button id="btn-listen" class="ghost" type="button">Listen now</button>
+        <button id="btn-convert-start" class="primary" type="button">Convert to audio</button>
       </div>
       <div id="ready" class="ready">
         <div class="ready-title" id="ready-title">Checking what's saved on this device…</div>
@@ -49,6 +53,19 @@
     </section>
 
     <section id="view-read" class="hidden">
+      <div id="export" class="export">
+        <div class="export-head">
+          <strong id="ex-title"></strong>
+          <span id="ex-meta" class="ex-meta"></span>
+        </div>
+        <div id="ex-bar" class="progress big hidden"><div id="ex-progress"></div></div>
+        <div class="export-actions">
+          <button id="btn-convert" class="primary" type="button">Convert to audio file</button>
+          <button id="btn-share" class="primary hidden" type="button">Share…</button>
+          <button id="btn-download" class="ghost hidden" type="button">Download</button>
+        </div>
+        <p id="ex-note" class="note"></p>
+      </div>
       <article id="reader" class="reader"></article>
     </section>
   </main>
@@ -60,9 +77,6 @@
       <button id="btn-play" class="round big" type="button" aria-label="Play">▶</button>
       <button id="btn-next" class="round" type="button" aria-label="Next sentence">⏭</button>
     </div>
-    <div class="player-extra">
-      <button id="btn-prepare" class="ghost small" type="button">Prepare all audio</button>
-    </div>
   </footer>
 
   <dialog id="settings">
@@ -74,13 +88,18 @@
       <label>Speed <span id="rate-label">1.0×</span>
         <input id="rate" type="range" min="0.7" max="2" step="0.1" value="1" />
       </label>
+      <label>File format
+        <select id="format">
+          <option value="mp3">MP3 (small, plays everywhere)</option>
+          <option value="wav">WAV (lossless, ~6× larger)</option>
+        </select>
+      </label>
       <label>Engine
         <select id="device">
           <option value="cpu">CPU (recommended on phones)</option>
           <option value="auto">GPU if available</option>
         </select>
       </label>
-      <button id="btn-export" type="button" class="ghost">Download as WAV</button>
       <p id="engine-info" class="note"></p>
       <button id="btn-clear-cache" type="button" class="ghost danger">Delete downloaded model</button>
       <div class="dialog-actions"><button class="primary" value="close">Done</button></div>