-
Notifications
You must be signed in to change notification settings - Fork 3
/
window.html
75 lines (71 loc) · 1.78 KB
/
window.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
<!--
TODO:
· Update ComicBook to allow pages to be added after the object is initialised.
This would allow us to start rendering the comic immediately instead of
having to wait for the complete archive to be extracted before rendering.
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf8">
<title>Comic Reader</title>
<link rel="stylesheet" href="lib/comicbook/comicbook.css">
<style>
html, body {
height: 100%;
}
body {
overflow: auto;
}
#filepicker {
margin: 10px;
}
#open {
font-size: 20px;
text-align: center;
padding: 100px 0;
}
#open button {
font-size: 20px;
padding: 10px 20px;
margin-bottom: 20px;
}
.progress, .bar {
width: 200px;
height: 1em;
display: inline-block;
}
.progress {
border: solid 1px;
}
.bar {
width: 0;
background-color: gray;
}
.dragover {
background-color: lightgoldenrodyellow;
}
</style>
</head>
<body>
<div id="filepicker">
<div id="open">
<button>select a comic</button>
<p>or drop one anywhere on this window.</p>
</div>
<div id="progressbar" style="display:none">
opening <span id="filename"></span>...
<br>
<span class="progress"><span class="bar"></span></span>
</div>
</div>
<div id="comic-wrapper" style="display:none">
<canvas id="comic"></canvas>
</div>
<script src="lib/jquery-2.0.0.min.js"></script>
<script src="lib/bitjs/io.js"></script>
<script src="lib/bitjs/archive.js"></script>
<script src="lib/comicbook/js/comicbook.js"></script>
<script src="app.js"></script>
</body>
</html>