blob: d2edd8ccf9f88c8b82a52fd918d621eadf2d5146 (
plain)
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
|
<!DOCTYPE html>
<html>
<head>
<title data-bind="text: documentTitle">Pow! Comics Reader</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="lib/bootstrap/v3/css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="lib/bootstrap/v3/css/bootstrap-theme.min.css" rel="stylesheet" media="screen">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="lib/bootstrap/v3/js/jquery.js"></script>
<script src="lib/bootstrap/v3/js/bootstrap.min.js"></script>
<script src="lib/localforage.min.js"></script>
<script src="lib/knockout.js"></script>
<link rel="shortcut icon" type="image/png" href="img/favicon.png"/>
<link rel="icon" type="image/png" sizes="512x512" href="img/web_hi_res_512.png"/>
<meta name="mobile-web-app-capable" content="yes">
<link rel="stylesheet" type="text/css" href="reader.css"/>
<script type="text/javascript" src="reader.js"></script>
</head>
<body>
<div class="modal fade" id="settings-modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span>
</button>
<h4 class="modal-title">Options</h4>
</div>
<div class="modal-body">
<form name="settings-form" onsubmit="return false" class="form-horizontal">
<div class="form-group">
<label class="col-sm-3 control-label">Theme:</label>
<div class="col-sm-9">
<select class="theme-select form-control">
<option value="default">Default</option>
<option value="dark">Dark</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Reading:</label>
<div class="col-sm-9">
<div class="checkbox">
<label><input class="fit-to-width-cb" type="checkbox" data-bind="attr: { checked: fitToWidth }"> Fit to width</label>
</div>
<div class="checkbox">
<label title="Applies for active file"><input class="single-column-cb" type="checkbox" data-bind="attr: { checked: singleColumn }">
Force single column</label>
</div>
<div class="checkbox">
<label title="Applies for active file"><input class="flip-columns-cb" type="checkbox" data-bind="attr: { checked: flipColumns }">
Mirror (manga mode)</label>
</div>
</div>
</div>
<hr/>
<div class="form-group">
<label class="col-sm-3 control-label">Sync account:</label>
<div class="col-sm-9">
<input type="email" class="form-control sync-account" placeholder="Not set, sync disabled" data-bind="value: syncAccount">
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="container">
<div id="splash" class="text-muted" data-bind="visible: !fileName()">No active file (Ctrl+O).</div>
<div id="left"><span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span></div>
<div id="right"><span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span></div>
<div id="reader" data-bind="css: { 'fit-width': fitToWidth, 'fit-size': fitSize, 'flip-columns': flipColumns, 'single-column': singleColumn }">
<img class="left-page" data-bind="attr: { src: getLeftPage }">
<img style="display : none" data-bind="attr: { src: getRightPage }" class="right-page hidden-xs hidden-sm hidden-md hidden-portrait">
</div>
<div class="footer">
<div class="spacer"></div>
<div class="location">
<span data-bind="html: currentPageDisp"></span> / <span data-bind="html: totalPages"></span>
(<span data-bind="html: progressPct"></span>%)
</div>
</div>
</div>
</body>
</html>
|