-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathspeedReader.html
More file actions
274 lines (271 loc) · 17.8 KB
/
speedReader.html
File metadata and controls
274 lines (271 loc) · 17.8 KB
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
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="/static/mountain.ico" type="image/x-icon" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/dompurify@3.0.5/dist/purify.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.5/jszip.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/epubjs/dist/epub.min.js"></script>
<link rel="stylesheet" type="text/css" href="/static/css/speedReader.css">
<meta name="description" content="Speed Reader implementation" />
<title>SArgentina - Speed Reader</title>
</head>
<body>
<div id="app-container">
<h1>Speed Reader</h1>
<h2>Tool to improve your reading speed. Just paste or upload the text you want to read and adjust your reading speed and settings. Click <a href="/">here</a> to return to main page.</h2>
<div id="speedReader-input-container">
<div id="speedReader-content">
<p id="speedReader-text"></p>
</div>
<input type="file" id="pdf-upload" accept=".pdf,.txt,.epub" style="display: none">
<textarea id="speedReader-text-input" placeholder="Paste your text here, drag & drop a PDF, TXT, or EPUB file, or right click / press for more options..."></textarea>
<div id="context-menu" class="context-menu">
<ul>
<li id="upload-pdf">Upload PDF, TXT, or EPUB</li>
<li id="paste-text">Paste Text</li>
<li id="clear-text">Clear</li>
</ul>
</div>
<button id="start-reading-btn" class="start-btn" disabled>Start Reading</button>
<div id="control-bar">
<div class="left-controls">
<button id="hide-btn" class="control-btn">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M3.99989 4L19.9999 20M16.4999 16.7559C15.1473 17.4845 13.6185 17.9999 11.9999 17.9999C8.46924 17.9999 5.36624 15.5478 3.5868 13.7788C3.1171 13.3119 2.88229 13.0784 2.7328 12.6201C2.62619 12.2933 2.62616 11.7066 2.7328 11.3797C2.88233 10.9215 3.11763 10.6875 3.58827 10.2197C4.48515 9.32821 5.71801 8.26359 7.17219 7.42676M19.4999 14.6335C19.8329 14.3405 20.138 14.0523 20.4117 13.7803L20.4146 13.7772C20.8832 13.3114 21.1182 13.0779 21.2674 12.6206C21.374 12.2938 21.3738 11.7068 21.2672 11.38C21.1178 10.9219 20.8827 10.6877 20.4133 10.2211C18.6338 8.45208 15.5305 6 11.9999 6C11.6624 6 11.3288 6.02241 10.9999 6.06448M13.3228 13.5C12.9702 13.8112 12.5071 14 11.9999 14C10.8953 14 9.99989 13.1046 9.99989 12C9.99989 11.4605 10.2135 10.9711 10.5608 10.6113"></path>
</svg>
<svg class="show-ui" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<g id="Vector">
<path d="M3.5868 13.7788C5.36623 15.5478 8.46953 17.9999 12.0002 17.9999C15.5308 17.9999 18.6335 15.5478 20.413 13.7788C20.8823 13.3123 21.1177 13.0782 21.2671 12.6201C21.3738 12.2933 21.3738 11.7067 21.2671 11.3799C21.1177 10.9218 20.8823 10.6877 20.413 10.2211C18.6335 8.45208 15.5308 6 12.0002 6C8.46953 6 5.36623 8.45208 3.5868 10.2211C3.11714 10.688 2.88229 10.9216 2.7328 11.3799C2.62618 11.7067 2.62618 12.2933 2.7328 12.6201C2.88229 13.0784 3.11714 13.3119 3.5868 13.7788Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M10 12C10 13.1046 10.8954 14 12 14C13.1046 14 14 13.1046 14 12C14 10.8954 13.1046 10 12 10C10.8954 10 10 10.8954 10 12Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</g>
</svg>
</button>
<button id="to-start-btn" class="control-btn">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
<path d="M19 20L9 12l10-8v16zM5 19V5h2v14H5z"></path>
</svg>
</button>
<button id="play-pause-btn" class="control-btn">
<svg id="play-pause-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<polygon points="5 3 19 12 5 21 5 3"></polygon>
</svg>
</button>
<button id="rewind-10-btn" class="control-btn">
<svg width="48" height="48" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg" stroke-width="3" stroke="currentColor" fill="none">
<g transform="scale(1.1)">
<polyline points="9.57 15.41 12.17 24.05 20.81 21.44" stroke-linecap="round"/>
<path d="M26.93,41.41V23a.09.09,0,0,0-.16-.07s-2.58,3.69-4.17,4.78" stroke-linecap="round"/>
<rect x="32.19" y="22.52" width="11.41" height="18.89" rx="5.7"/>
<path d="M12.14,23.94a21.91,21.91,0,1,1-.91,13.25" stroke-linecap="round"/>
</g>
</svg>
</button>
</div>
<div id="progress-container" class="progress-container">
<div id="progress-bar" class="progress-bar"></div>
</div>
<div class="right-controls">
<button id="add-text-btn" class="control-btn">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<line x1="12" y1="5" x2="12" y2="19"></line>
<line x1="5" y1="12" x2="19" y2="12"></line>
</svg>
</button>
<button id="history-btn" class="control-btn">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M12 8v4l3 3m6-3a9 9 0 1 1-18 0 9 9 0 0 1 18 0z"></path>
</svg>
</button>
<button id="settings-btn" class="control-btn">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="12" cy="12" r="3"></circle>
<path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path>
</svg>
</button>
<button id="theme-toggle" class="control-btn">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<!-- Sun (visible in light mode) -->
<g class="sun-part">
<path d="M8 22H16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M5 19H19" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M2 16H22" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M12 6C8.68629 6 6 8.68629 6 12C6 13.5217 6.56645 14.911 7.5 15.9687H16.5C17.4335 14.911 18 13.5217 18 12C18 8.68629 15.3137 6 12 6Z"
stroke="currentColor"
stroke-width="1.5"
/>
<path d="M12 2V3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
<path d="M22 12L21 12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
<path d="M3 12L2 12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
<path d="M19.0708 4.92969L18.678 5.32252" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
<path d="M5.32178 5.32227L4.92894 4.92943" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
</g>
<!-- Centered and Rotated Crescent Moon -->
<g class="moon-part">
<path d="M8 22H16" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M5 19H19" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M2 16H22" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M21.0672 11.8568L20.4253 11.469L21.0672 11.8568ZM12.1432 2.93276L11.7553 2.29085V2.29085L12.1432 2.93276ZM2.75 12C2.75 6.89137 6.89137 2.75 12 2.75V1.25C6.06294 1.25 1.25 6.06294 1.25 12H2.75ZM15.5 14.25C12.3244 14.25 9.75 11.6756 9.75 8.5H8.25C8.25 12.5041 11.4959 15.75 15.5 15.75V14.25ZM20.4253 11.469C19.4172 13.1373 17.5882 14.25 15.5 14.25V15.75C18.1349 15.75 20.4407 14.3439 21.7092 12.2447L20.4253 11.469ZM9.75 8.5C9.75 6.41182 10.8627 4.5828 12.531 3.57467L11.7553 2.29085C9.65609 3.5593 8.25 5.86509 8.25 8.5H9.75ZM21.25 12C21.25 13.3169 20.9752 14.5677 20.4806 15.6997L21.8552 16.3003C22.431 14.9824 22.75 13.5275 22.75 12H21.25ZM3.51935 15.6997C3.02475 14.5677 2.75 13.3169 2.75 12H1.25C1.25 13.5275 1.56904 14.9824 2.14482 16.3003L3.51935 15.6997ZM12 2.75C11.9115 2.75 11.8077 2.71008 11.7324 2.63168C11.6686 2.56527 11.6538 2.50244 11.6503 2.47703C11.6461 2.44587 11.6482 2.35557 11.7553 2.29085L12.531 3.57467C13.0342 3.27065 13.196 2.71398 13.1368 2.27627C13.0754 1.82126 12.7166 1.25 12 1.25V2.75ZM21.7092 12.2447C21.6444 12.3518 21.5541 12.3539 21.523 12.3497C21.4976 12.3462 21.4347 12.3314 21.3683 12.2676C21.2899 12.1923 21.25 12.0885 21.25 12H22.75C22.75 11.2834 22.1787 10.9246 21.7237 10.8632C21.286 10.804 20.7293 10.9658 20.4253 11.469L21.7092 12.2447Z"
fill="currentColor"
stroke-width="0.7"
/>
<path d="M19.9001 2.30719C19.7392 1.8976 19.1616 1.8976 19.0007 2.30719L18.5703 3.40247C18.5212 3.52752 18.4226 3.62651 18.298 3.67583L17.2067 4.1078C16.7986 4.26934 16.7986 4.849 17.2067 5.01054L18.298 5.44252C18.4226 5.49184 18.5212 5.59082 18.5703 5.71587L19.0007 6.81115C19.1616 7.22074 19.7392 7.22074 19.9001 6.81116L20.3305 5.71587C20.3796 5.59082 20.4782 5.49184 20.6028 5.44252L21.6941 5.01054C22.1022 4.849 22.1022 4.26934 21.6941 4.1078L20.6028 3.67583C20.4782 3.62651 20.3796 3.52752 20.3305 3.40247L19.9001 2.30719Z"
stroke="currentColor"
stroke-width="0.3"
/>
<path d="M16.0328 8.12967C15.8718 7.72009 15.2943 7.72009 15.1333 8.12967L14.9764 8.52902C14.9273 8.65407 14.8287 8.75305 14.7041 8.80237L14.3062 8.95987C13.8981 9.12141 13.8981 9.70107 14.3062 9.86261L14.7041 10.0201C14.8287 10.0694 14.9273 10.1684 14.9764 10.2935L15.1333 10.6928C15.2943 11.1024 15.8718 11.1024 16.0328 10.6928L16.1897 10.2935C16.2388 10.1684 16.3374 10.0694 16.462 10.0201L16.8599 9.86261C17.268 9.70107 17.268 9.12141 16.8599 8.95987L16.462 8.80237C16.3374 8.75305 16.2388 8.65407 16.1897 8.52902L16.0328 8.12967Z"
stroke="currentColor"
stroke-width="0.3"
/>
</g>
</svg>
</button>
<button id="chapter-selector-btn" class="control-btn" style="display: none;">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"></path>
<path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"></path>
</svg>
</button>
</div>
</div>
<!-- Settings Modal -->
<div id="settings-modal" class="modal hidden">
<div class="modal-content">
<div class="modal-header">
<h3>Settings</h3>
<button id="close-settings" class="close-btn">×</button>
</div>
<div class="modal-body">
<div class="settings-group">
<label>Words per minute</label>
<input type="range" id="wpm-setting" min="100" max="1000" step="50" value="300">
<span id="wpm-value">300 WPM</span>
</div>
<div class="settings-group">
<label>Word chunk size</label>
<input type="range" id="chunk-setting" min="1" max="9" step="1" value="1">
<span id="chunk-value">1 word(s)</span>
</div>
<div class="settings-group">
<label>Word size</label>
<input type="range" id="size-setting" min="1" max="5" step="0.5" value="2">
<span id="size-value">2rem</span>
</div>
<div class="settings-group">
<label>Content height</label>
<input type="range" id="height-setting" min="20" max="75" step="5" value="30">
<span id="height-value">30vh</span>
</div>
<div class="settings-group">
<label>Font family</label>
<div class="custom-select">
<div class="select-selected" id="font-preview">Arial<span class="arrow-down">
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
<polyline points="6 9 12 15 18 9"></polyline>
</svg>
</span></div>
<div class="select-options">
<div class="select-option" data-value="Arial" style="font-family: Arial">Arial</div>
<div class="select-option" data-value="Helvetica" style="font-family: Helvetica">Helvetica</div>
<div class="select-option" data-value="Times New Roman" style="font-family: 'Times New Roman'">Times New Roman</div>
<div class="select-option" data-value="Courier New" style="font-family: 'Courier New'">Courier New</div>
<div class="select-option" data-value="Georgia" style="font-family: Georgia">Georgia</div>
<div class="select-option" data-value="Verdana" style="font-family: Verdana">Verdana</div>
<div class="select-option" data-value="Roboto" style="font-family: Roboto">Roboto</div>
<div class="select-option" data-value="Open Sans" style="font-family: 'Open Sans'">Open Sans</div>
<div class="select-option" data-value="Lato" style="font-family: Lato">Lato</div>
<div class="select-option" data-value="Source Sans Pro" style="font-family: 'Source Sans Pro'">Source Sans Pro</div>
</div>
<select id="font-setting" style="display: none">
<option value="Arial">Arial</option>
<option value="Helvetica">Helvetica</option>
<option value="Times New Roman">Times New Roman</option>
<option value="Courier New">Courier New</option>
<option value="Georgia">Georgia</option>
<option value="Verdana">Verdana</option>
<option value="Roboto">Roboto</option>
<option value="Open Sans">Open Sans</option>
<option value="Lato">Lato</option>
<option value="Source Sans Pro">Source Sans Pro</option>
</select>
</div>
</div>
<div class="settings-group">
<label>Color theme</label>
<select id="color-setting">
<option value="default">Default</option>
<option value="sepia">Sepia</option>
<option value="high-contrast">High Contrast</option>
<option value="blue-light">Blue Light Filter</option>
<option value="mint">Mint</option>
<option value="sunset">Sunset</option>
<option value="night-owl">Night Owl</option>
<option value="coffee">Coffee</option>
<option value="ocean">Ocean</option>
<option value="forest">Forest</option>
<option value="rose">Rose</option>
<option value="lavender">Lavender</option>
<option value="terminal">Terminal</option>
</select>
</div>
<div class="settings-group">
<label>Progress bar color</label>
<select id="progress-color-setting">
<option value="#4CAF50">Green</option>
<option value="#2196F3">Blue</option>
<option value="#F44336">Red</option>
<option value="#FF9800">Orange</option>
<option value="#9C27B0">Purple</option>
<option value="#00BCD4">Cyan</option>
<option value="#FFEB3B">Yellow</option>
<option value="#795548">Brown</option>
<option value="#607D8B">Grey</option>
</select>
</div>
</div>
</div>
</div>
<!-- History Modal -->
<div id="history-modal" class="modal hidden">
<div class="modal-content">
<div class="modal-header">
<h3>Reading History</h3>
<button id="close-history" class="close-btn">×</button>
</div>
<div class="modal-body">
<div id="history-list" class="history-list">
<!-- History items will be inserted here -->
</div>
</div>
</div>
</div>
<!-- Chapter Selection Modal -->
<div id="chapter-modal" class="modal hidden">
<div class="modal-content">
<div class="modal-header">
<h3>Select Chapter</h3>
<div class="modal-actions">
<button id="delete-book-btn" class="close-btn">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M3 6h18"></path>
<path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"></path>
<path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"></path>
</svg>
</button>
<button id="close-chapter" class="close-btn">X</button>
</div>
</div>
<div class="modal-body">
<div id="chapter-list" class="chapter-list">
<!-- Chapters will be inserted here -->
</div>
</div>
</div>
</div>
</div>
</div>
<script defer type="application/javascript" src="/static/js/speedReader.js"></script>
</body>
</html>