index.html (6299 bytes)
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8" /> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 6 <title>Scan Subread</title> 7 <link rel="stylesheet" href="/src/style.css" /> 8 </head> 9 <body> 10 <header id="topbar"> 11 <button 12 id="menu" 13 class="icon" 14 aria-controls="panel" 15 aria-expanded="false" 16 aria-label="Menu" 17 title="Menu" 18 > 19 <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 7h16M4 12h16M4 17h16" /></svg> 20 </button> 21 <button id="page-left" class="icon" aria-label="Previous page" title="Previous page" disabled> 22 <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M15 5l-7 7 7 7" /></svg> 23 </button> 24 <button id="page-label" title="Go to a page" disabled>No PDF</button> 25 <input 26 id="page-input" 27 type="text" 28 inputmode="numeric" 29 enterkeyhint="go" 30 autocomplete="off" 31 aria-label="Go to page" 32 title="Type a page number. Enter goes, Escape cancels." 33 hidden 34 /> 35 <button id="page-right" class="icon" aria-label="Next page" title="Next page" disabled> 36 <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M9 5l7 7-7 7" /></svg> 37 </button> 38 <button id="play" class="icon" aria-label="Play" title="Play" disabled> 39 <svg class="i-play" viewBox="0 0 24 24" aria-hidden="true"> 40 <path class="solid" d="M8 5.5v13l10.5-6.5z" /> 41 </svg> 42 <svg class="i-pause" viewBox="0 0 24 24" aria-hidden="true"> 43 <path class="solid" d="M6.5 5h4v14h-4zM13.5 5h4v14h-4z" /> 44 </svg> 45 </button> 46 <button 47 id="sync-page" 48 class="icon" 49 aria-label="Move the audio to this page" 50 title="Move the audio to this page" 51 disabled 52 > 53 <svg viewBox="0 0 24 24" aria-hidden="true"> 54 <path d="M6 3h8.5L19 7.5V21H6z" /> 55 <path class="solid" d="M10 10v7l5.5-3.5z" /> 56 </svg> 57 </button> 58 </header> 59 60 <div id="strip"> 61 <span id="player-status"></span> 62 <span id="follow-note" hidden>Follow paused</span> 63 <span id="pages-status" hidden></span> 64 <span id="status" aria-live="polite"></span> 65 </div> 66 <!-- The full texts of the strip after a tap on it. It floats over the page (status.ts). --> 67 <div id="strip-full" hidden></div> 68 69 <aside id="panel"> 70 <h1>Scan Subread</h1> 71 <p class="hint"> 72 Load a PDF and the subtitles of its audiobook. The page follows the player. Tap a word: 73 dictionary. Long press: Anki card. 74 </p> 75 76 <label>PDF (scan or text) <input id="pdf-file" type="file" accept="application/pdf" /></label> 77 <label>Subtitles (.srt or .vtt) <input id="sub-file" type="file" /></label> 78 79 <section id="make" hidden> 80 <div class="row"> 81 <button id="make-subs" disabled>Make subtitles with SubRead</button> 82 <select id="sub-lang" title="Narration language"> 83 <option value="auto">auto</option> 84 <option value="ja">ja</option> 85 <option value="en">en</option> 86 </select> 87 </div> 88 <div id="make-status" class="hint"></div> 89 </section> 90 91 <div id="srt-row" class="row" hidden> 92 <a id="srt-download" download>Download the .srt</a> 93 <button id="srt-share" hidden>Share the .srt</button> 94 </div> 95 96 <section id="audio-row"> 97 <label>Audio (web only) <input id="audio-file" type="file" accept="audio/*" /></label> 98 <audio id="audio" controls></audio> 99 </section> 100 101 <fieldset id="follow"> 102 <legend>Follow the audio</legend> 103 <label 104 ><input type="radio" name="follow" value="highlight" checked /> Highlight and turn 105 pages</label 106 > 107 <label><input type="radio" name="follow" value="pages" /> Turn pages only</label> 108 <label><input type="radio" name="follow" value="off" /> Off</label> 109 </fieldset> 110 111 <label 112 >OCR language 113 <select id="lang"> 114 <option value="eng">English (eng)</option> 115 <option value="jpn">Japanese, horizontal (jpn)</option> 116 <option value="jpn_vert">Japanese, vertical (jpn_vert)</option> 117 <option value="jpn+eng">Japanese + English</option> 118 </select> 119 </label> 120 <label class="check" 121 ><input id="rtl" type="checkbox" /> Pages turn right to left (vertical Japanese)</label 122 > 123 <label class="check" 124 ><input id="force-ocr" type="checkbox" /> Force OCR (the text layer of the PDF is 125 wrong)</label 126 > 127 <label id="dict-row" 128 >Dictionary 129 <select id="dict"> 130 <option value="">Ask each time</option> 131 </select> 132 </label> 133 <label id="pause-row" class="check" 134 ><input id="pause-lookup" type="checkbox" checked /> Pause on lookup</label 135 > 136 <div class="row"> 137 <button id="clear-book">Clear this book's pages</button> 138 <button id="clear-all">Clear all pages</button> 139 </div> 140 141 <section id="suite" hidden> 142 <h2>SubRead suite</h2> 143 <ul id="suite-list" class="suite"></ul> 144 </section> 145 146 <ol id="cues"></ol> 147 </aside> 148 149 <main id="main"> 150 <div id="viewer"> 151 <section id="empty" class="card" hidden> 152 <h2>Scan Subread</h2> 153 <p> 154 Read a PDF along with its audiobook. The page follows the narrator, and a tap on a word 155 looks it up. 156 </p> 157 <button id="open-pdf" class="primary">Open a PDF</button> 158 <p class="hint"> 159 Then open its subtitles (.srt or .vtt) in the menu, or make them with SubRead on 160 Android. 161 </p> 162 <div id="suite-checklist"></div> 163 </section> 164 <div id="page" hidden> 165 <div id="overlay"></div> 166 </div> 167 </div> 168 <!-- Over the page, not in the top bar: a button that shows must not move the others. --> 169 <button 170 id="follow-now" 171 aria-label="Follow the audio again" 172 title="Follow the audio again: go to its page" 173 hidden 174 > 175 Follow 176 </button> 177 </main> 178 179 <script type="module" src="/src/main.ts"></script> 180 </body> 181 </html>