-
Notifications
You must be signed in to change notification settings - Fork 12
/
Copy pathreader.html
324 lines (311 loc) · 14.9 KB
/
reader.html
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
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Qiu</title>
<link rel="stylesheet" href="css/font/icon-font.css">
<link rel="stylesheet" href="css/base/reset.css">
<link rel="stylesheet" href="css/modules/common.css">
<link rel="stylesheet" href="css/modules/button.css">
<link rel="stylesheet" href="css/modules/color.css">
<link rel="stylesheet" href="css/modules/icon.css">
<link rel="stylesheet" href="css/modules/modal.css">
<link rel="stylesheet" href="css/modules/form.css">
<link rel="stylesheet" href="css/modules/tab.css">
<link rel="stylesheet" href="css/pages/reader.css">
</head>
<body>
<header></header>
<main>
<div class="toc-side">
<div class="toc">
<div class="toc-head">Table of Contents</div>
</div>
</div>
<div class="main">
<div class="toc-button">
<svg viewBox="0 0 1490 1024" width="16" height="16">
<path d="M0 65.163636C0 29.174747 29.084579 0 65.19808 0L1424.256465 0C1460.264401 0 1489.454545 29.247991 1489.454545 65.163636 1489.454545 101.152526 1460.369967 130.327273 1424.256465 130.327273L65.19808 130.327273C29.190144 130.327273 0 101.079282 0 65.163636L0 65.163636ZM0 512C0 476.01111 29.084579 446.836364 65.19808 446.836364L1424.256465 446.836364C1460.264401 446.836364 1489.454545 476.084354 1489.454545 512 1489.454545 547.98889 1460.369967 577.163636 1424.256465 577.163636L65.19808 577.163636C29.190144 577.163636 0 547.915646 0 512L0 512ZM0 958.836364C0 922.847474 29.084579 893.672727 65.19808 893.672727L1424.256465 893.672727C1460.264401 893.672727 1489.454545 922.920718 1489.454545 958.836364 1489.454545 994.825253 1460.369967 1024 1424.256465 1024L65.19808 1024C29.190144 1024 0 994.752009 0 958.836364L0 958.836364Z"></path>
</svg>
</div>
<div class="page"></div>
<div class="page doc hide">
<iframe width="100%" height="100%" id="full-page-iframe"></iframe>
</div>
<div class="prev-page"></div>
<div class="next-page"></div>
</div>
</main>
<footer></footer>
<!--工具栏-->
<div class="tool-bar disable-select" id="tool-bar">
<button class="tool-bar-btn drag-me" id="drag-me">
<i class="material-icons">drag_handle</i>
</button>
<button class="tool-bar-btn" data-full-screen="false" id="full-screen">
<i class="material-icons" title="full screen">fullscreen</i>
<i class="material-icons hidden" title="exit full screen">fullscreen_exit</i>
</button>
<button class="tool-bar-btn modal-trigger" id="setting" modal-target="setting-panel" title="setting">
<i class="material-icons">settings</i>
</button>
<button class="tool-bar-btn" id="book-mark-list" title="bookmark list">
<i class="material-icons">format_list_bulleted</i>
</button>
<button class="tool-bar-btn" id="book-mark" title="add bookmark">
<i class="material-icons">bookmark</i>
</button>
<button class="tool-bar-btn modal-trigger" id="color" modal-target="color-panel" title="background color">
<i class="material-icons">color_lens</i>
</button>
<button class="tool-bar-btn" id="exit" title="exit">
<i class="material-icons">exit_to_app</i>
</button>
</div>
<!--设置panel-->
<div class="modal" id="setting-panel">
<div class="modal-header">Setting</div>
<div class="modal-content">
<!--字体：字体族、颜色、大小-->
<!--theme：普通、夜间-->
<!--阅读模式：单页阅读、双页阅读、文档阅读-->
<div id="setting-tab" class="tab-set">
<ul class="tabs">
<li class="tab active"><a href="#font-setting">font</a></li>
<li class="tab"><a href="#spacing-setting">spacing</a></li>
<li class="tab"><a href="#style">style</a></li>
<li class="tab"><a href="#page-setting">page</a></li>
<li class="tab"><a href="#other">other</a></li>
</ul>
<div class="tab-panel" id="font-setting">
<div class="font-size-control">
<button class="btn-tip small font-size-reduce">
<i class="material-icons">remove</i>
</button>
<span class="font-size">default</span>
<button class="btn-tip small font-size-add">
<i class="material-icons">add</i>
</button>
</div>
</div>
<div class="tab-panel" id="page-setting">
<div class="page-control">
<div>
<input type="radio" id="horizontal" name="page-mode">
<label for="horizontal" title="single page">
<i class="icon-horizontal-page"></i>
</label>
</div>
<div>
<input type="radio" id="double-page" name="page-mode">
<label for="double-page" title="double page">
<i class="icon-double-page"></i>
</label>
</div>
<div>
<input type="radio" id="vertical" name="page-mode">
<label for="vertical" title="scroll">
<i class="icon-vertical-page"></i>
</label>
</div>
</div>
</div>
<div class="tab-panel" id="spacing-setting">
<div class="spacing-control">
<div class="line-height-box">
<div class="clear spacing-info">
<span class="left second-msg">Line height</span>
<span class="line-height right">default</span>
</div>
<div class="ctrl-btns">
<button class="btn-tip small line-height-reduce">
<i class="material-icons">remove</i>
</button>
<button class="btn-tip small line-height-add">
<i class="material-icons">add</i>
</button>
</div>
</div>
<div class="letter-spacing-box">
<div class="clear spacing-info">
<span class="left second-msg">Letter spacing</span>
<span class="letter-spacing right">default</span>
</div>
<div class="ctrl-btns">
<button class="btn-tip small letter-spacing-reduce">
<i class="material-icons">remove</i>
</button>
<button class="btn-tip small letter-spacing-add">
<i class="material-icons">add</i>
</button>
</div>
</div>
<div class="word-spacing-box">
<div class="clear spacing-info">
<span class="left second-msg">Word spacing</span>
<span class="word-spacing right">default</span>
</div>
<div class="ctrl-btns">
<button class="btn-tip small word-spacing-reduce">
<i class="material-icons">remove</i>
</button>
<button class="btn-tip small word-spacing-add">
<i class="material-icons">add</i>
</button>
</div>
</div>
</div>
</div>
<div class="tab-panel" id="style">
<div class="style-control">
<label class="stylesheet" title="import stylesheet">
<i class="material-icons">stars</i>
<input type="file" accept="text/css" id="import-stylesheet" class="hidden">
</label>
<button class="restore" id="restore-style" title="revert to the default style">
<i class="material-icons">restore</i>
</button>
</div>
<!--<div class="style-info">-->
<!--<span class="second-msg">find stylesheet?</span>-->
<!-- -->
<!--<a href="https://github.com/bubble-Q/QiuReader/user-stylesheet" target="_blank">Go</a>-->
<!--</div>-->
</div>
<div class="tab-panel" id="other">
<div class="other-control">
<div class="other-row">
<span class="second-msg">Popup</span>
<div class="ctrl-btns">
<button class="btn-tip small" id="toggle-popup">enabled</button>
</div>
</div>
<div class="left-right-margin other-row">
<span class="second-msg">Left and right margins</span>
<div class="ctrl-btns">
<button class="btn-tip small" id="reduce-lr-margin">
<i class="material-icons">remove</i>
</button>
<button class="btn-tip small" id="add-lr-margin">
<i class="material-icons">add</i>
</button>
</div>
</div>
<div class="top-bottom-margin other-row">
<span class="second-msg">Top and bottom margins</span>
<div class="ctrl-btns">
<button class="btn-tip small" id="reduce-tb-margin">
<i class="material-icons">remove</i>
</button>
<button class="btn-tip small" id="add-tb-margin">
<i class="material-icons">add</i>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn-tip modal-close" modal-target="setting-panel">Close</button>
</div>
</div>
<!--book-mark-panel-->
<div class="book-mark-panel hide" id="book-mark-panel">
<div class="book-mark-head clear">
Bookmarks
<i class="material-icons book-mark-panel-close right">close</i>
</div>
<ul class="book-mark-content">
</ul>
</div>
<div class="book-mark-overlay"></div>
<!--book-mark-modal-->
<div class="modal" id="book-mark-modal">
<div class="modal-header">Book Mark</div>
<div class="modal-content">
<div>
<div class="input-group">
<label for="book-mark-name">Mark</label>
<input type="text" id="book-mark-name">
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn-tip modal-close book-mark-save" modal-target="book-mark-modal">Save</button>
<button class="btn-tip modal-close" modal-target="book-mark-modal">Cancel</button>
</div>
</div>
<!--color-panel-->
<div class="modal" id="color-panel">
<div class="modal-header">Color</div>
<div class="modal-content">
<div>
<!--background color-->
<div class="color-row">
<ul class="color-list background" title="select background color">
<li class="color-item"></li>
<li class="color-item"></li>
<li class="color-item"></li>
<li class="color-item"></li>
<li class="color-item custom-color-item" title="pick your color"></li>
</ul>
</div>
<!--font color-->
<div class="color-row">
<ul class="color-list font" title="select font color">
<li class="color-item"></li>
<li class="color-item"></li>
<li class="color-item"></li>
<li class="color-item"></li>
<li class="color-item custom-color-item" title="pick your color"></li>
</ul>
</div>
<!--highlight color-->
<div class="color-row">
<ul class="color-list highlight" title="select highlight color">
<li class="color-item custom-color-item bg-red"></li>
<li class="color-item custom-color-item bg-yellow"></li>
<li class="color-item custom-color-item bg-green"></li>
<li class="color-item custom-color-item bg-blue"></li>
<li class="color-item custom-color-item bg-orange"></li>
</ul>
</div>
</div>
<div id="color-picker" class="color-picker"></div>
</div>
<div class="modal-footer">
<button class="btn-tip modal-close color-save" modal-target="color-panel">Save</button>
<button class="btn-tip modal-close" modal-target="color-panel">Cancel</button>
</div>
</div>
<!--select menu-->
<div class="select-menu" id="select-menu">
<div class="ann-color-bar" title="add highlight">
<span class="ann-color hl-red bg-red"></span>
<span class="ann-color hl-orange bg-yellow"></span>
<span class="ann-color hl-green bg-green"></span>
<span class="ann-color hl-blue bg-blue"></span>
<span class="ann-color hl-yellow bg-orange"></span>
</div>
<div class="divider"></div>
<div class="menu-item delete-hl" title="delete highlight/underline">Delete</div>
<div class="menu-item copy-text" title="copy text">Copy</div>
</div>
<script type="text/javascript" src="js/lib/JSZip/jszip.js"></script>
<script type="text/javascript" src="js/lib/epub.js/epub.js"></script>
<script type="text/javascript" src="js/lib/rangy-1.3.0/rangy-core.js"></script>
<script type="text/javascript" src="js/lib/rangy-1.3.0/rangy-classapplier.js"></script>
<script type="text/javascript" src="js/lib/rangy-1.3.0/rangy-highlighter.js"></script>
<script type="text/javascript" src="js/highlight.js"></script>
<script type="text/javascript" src="js/bookDB.js"></script>
<script type="text/javascript" src="js/drag.js"></script>
<script type="text/javascript" src="js/modal.js"></script>
<script type="text/javascript" src="js/tab.js"></script>
<script type="text/javascript" src="js/currentLocation.js"></script>
<script type="text/javascript" src="js/setting.js"></script>
<script type="text/javascript" src="js/bookMark.js"></script>
<script type="text/javascript" src="js/colorpicker.js"></script>
<script type="text/javascript" src="js/reader.js"></script>
</body>
</html>