-
Notifications
You must be signed in to change notification settings - Fork 0
/
main.html
134 lines (118 loc) · 4.99 KB
/
main.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
<!DOCTYPE html>
<html>
<head>
<title>WaniRecall</title>
<script src="assets/js/jquery-2.0.3.min.js"></script>
<script src="assets/js/raphael-min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="svg.js"></script>
<script src="audio.js"></script>
<link href="assets/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body class="login">
<header>
<img src="assets/img/wanikani-background.jpg">
<p class="welcome"></p>
</header>
<div id="login-container" class="container">
<form class="form-signin">
<h2 class="form-signin-header">Please Enter API Key</h2>
<input type="text" id="api-key" class="form-control" placeholder="API Key">
<button id="submit" class="btn btn-block btn-large btn-primary">Submit Key</button>
<p class="text-info"></p>
<p class="text-danger"></p>
</form>
</div>
<div id="levels-container" class="container">
<form>
<fieldset>
<legend>Select Levels to Study</legend>
<p class="message"></p>
<div class="levels">
<label class="checkbox-inline">
<input type="checkbox" value="radical"> Radicals
</label>
<label class="checkbox-inline">
<input type="checkbox" value="kanji" checked> Kanji
</label>
<label class="checkbox-inline">
<input type="checkbox" value="vocabulary"> Vocabulary
</label>
<div class="clearfix"></div>
<select multiple="multiple"></select>
<p>Items to study: <span class="items-to-study">0</span></p>
</div>
<div class="actions">
<button class="btn btn-default start-studying">Start Studying</button>
</div>
</fieldset>
</form>
</div>
<div id="item-container" class="container">
<p>Remaining: <span class="remaining">0</span></p>
<div class="wrapper canvas-wrapper">
<div class="overlay">Draw here</div>
<canvas id="canvas" width="570" height="109"></canvas>
</div>
<div class="wrapper paper-wrapper">
<div class="overlay">Click to <span class="underline">r</span>eveal</div>
<div id="paper"></div>
</div>
<p class="item"> </p>
<p class="meaning"></p>
<div class="actions">
<button class="btn btn-default back">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="underline">B</span>ack
</button>
<button class="btn btn-default clear"><span class="underline">C</span>lear</button>
<button class="btn btn-default audio">
<span class="glyphicon glyphicon-volume-down"></span> <span class="underline">A</span>udio
</button>
<button class="btn btn-default reveal"><span class="underline">R</span>eveal</button>
<button class="btn btn-default next">
<span class="underline">N</span>ext
<span class="glyphicon glyphicon-chevron-right"></span>
</button>
<audio></audio>
</div>
</div>
<!-- Progress Modal -->
<div class="modal fade" id="progressModal" tabindex="-1" role="dialog" aria-labelledby="progressModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Saved Progress</h4>
</div>
<div class="modal-body">
You have progress since you were last logged in. Would you like to restore your progress and continue?
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary modal-yes">Yes</button>
<button type="button" class="btn btn-primary modal-no">No</button>
</div>
</div>
</div>
</div>
<!-- Logout Modal -->
<div class="modal fade" id="logoutModal" tabindex="-1" role="dialog" aria-labelledby="logoutModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Save Progress</h4>
</div>
<div class="modal-body">
Would you like to save your progress and start from where you left off, next time you log in? Due to the size of the data, progress is only stored locally and not sync'd to the chrome account. Progress would only resume next time you logged in using this device.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary modal-save">Yes, Save and Logout</button>
<button type="button" class="btn btn-primary modal-logout">No, Just Logout</button>
</div>
</div>
</div>
</div>
</body>
<script src="front.js"></script>
</html>