fast-reader/index.html at main · ljadach/fast-reader · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>fast-reader</title>
<link rel="stylesheet" href="styles.css">
</head>
<body data-font="dyslexic">

<header id="topbar">
  <span id="status">no file loaded</span>
  <span id="wpm-wrap">
    <span id="wpm-display" title="Click to type a custom WPM">350 WPM</span>
    <input id="wpm-input" type="number" min="100" max="1200" step="25" hidden>
  </span>
</header>

<main id="stage">
  <div class="tick tick-top"></div>
  <div class="tick tick-bot"></div>

  <div id="word-frame">
    <span id="word-before"></span><span id="word-orp"></span><span id="word-after"></span>
  </div>

  <div id="hint">Hold <kbd>SPACE</kbd> to read</div>
</main>

<footer id="actionbar">
  <label class="actbtn" for="file-input">Load file</label>
  <input type="file" id="file-input" accept=".txt,.md,.epub,text/plain,text/markdown,application/epub+zip" class="sr-only">
  <button id="btn-paste" class="actbtn">Paste text</button>
  <button id="btn-url" class="actbtn">From URL</button>
  <button id="btn-chapters" class="actbtn" hidden>Chapters</button>
  <button id="btn-help" class="actbtn">?</button>
</footer>

<dialog id="paste-dialog">
  <form method="dialog">
    <h2>Paste text</h2>
    <textarea id="paste-area" rows="12" placeholder="Paste anything here..."></textarea>
    <menu>
      <button value="cancel">Cancel</button>
      <button value="ok" id="paste-ok">Read</button>
    </menu>
  </form>
</dialog>

<dialog id="url-dialog">
  <form method="dialog">
    <h2>Fetch URL</h2>
    <input id="url-input" type="url" placeholder="https://example.com/article">
    <p class="muted">Tip: many sites block CORS. We'll retry through a public proxy if direct fails.</p>
    <menu>
      <button value="cancel">Cancel</button>
      <button value="ok" id="url-ok">Fetch</button>
    </menu>
  </form>
</dialog>

<dialog id="help-dialog">
  <form method="dialog">
    <h2>Controls</h2>
    <table class="keys">
      <tr><td><kbd>Hold Space</kbd></td><td>Play (release to pause)</td></tr>
      <tr><td><kbd>←</kbd> / <kbd>→</kbd></td><td>Jump back / forward 5 words</td></tr>
      <tr><td><kbd>↑</kbd> / <kbd>↓</kbd></td><td>WPM +25 / -25</td></tr>
      <tr><td><kbd>R</kbd></td><td>Restart from word 0</td></tr>
      <tr><td><kbd>F</kbd></td><td>Cycle font: dyslexic → serif → mono</td></tr>
      <tr><td><kbd>+</kbd> / <kbd>-</kbd> / <kbd>0</kbd></td><td>Bigger / smaller / reset font size</td></tr>
      <tr><td><kbd>C</kbd></td><td>Toggle chapters (EPUB only)</td></tr>
      <tr><td><kbd>Esc</kbd></td><td>Close panel</td></tr>
    </table>
    <p class="muted">For Kindle <code>.azw3</code>/<code>.kfx</code>: convert to EPUB first via Calibre + DeDRM plugin.</p>
    <menu><button value="ok">OK</button></menu>
  </form>
</dialog>

<aside id="chapter-panel" hidden>
  <header>Chapters <button id="chapter-close">×</button></header>
  <ol id="chapter-list"></ol>
</aside>

<script src="lib/jszip.min.js"></script>
<script src="lib/epub.min.js"></script>
<script src="app.js"></script>
</body>
</html>