-
Notifications
You must be signed in to change notification settings - Fork 0
/
options.html
122 lines (112 loc) · 5.05 KB
/
options.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
<!DOCTYPE html>
<html>
<head>
<title>Settings</title>
<script src="js/lib/jquery.js"></script>
<script src="js/lib/materialize.min.js"></script>
<script src="js/options.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="css/lib/materialize.min.css">
<link rel="stylesheet" type="text/css" href="css/content.css" />
<link rel="stylesheet" type="text/css" href="css/options.css" />
</head>
<body>
<div id="loader" class="progress">
<div class="indeterminate"></div>
</div>
<div id="container" class="container" style="display: none;">
<nav style="margin-bottom: 3%">
<div class="nav-wrapper indigo darken-1">
<a class="center brand-logo">Settings</a>
</div>
</nav>
<div class="row option">
<div class="col s9 info-icon-container">
Learn a word
<i class="material-icons tooltipped"
data-tooltip="It gives timely notifications on words with meaning at user specified time interval"
style="margin: 0 5px;">info_outline</i>
</div>
<div class="col s3 option-input">
<div class="switch">
<label>
Off
<input type="checkbox" id="notify-duration-enable">
<span class="lever"></span>
On
</label>
</div>
</div>
</div>
<div class="row option" id="notify-duration-container">
<div class="col s9 info-icon-container">
Time Interval (in hours)
<i class="material-icons tooltipped"
data-tooltip="Learn a word in specified interval"
style="margin: 0 5px;">info_outline</i>
</div>
<div class="col s3 option-input">
<span class="range-field" style="margin: unset;">
<input type="range" id="hours" min="1" max="24" value="1" />
</span>
<span id="show-hours" style="margin-left: 10px;">1</span>
</div>
</div>
<div class="row option">
<div class="col s9">Enable Google Search</div>
<div class="col s3 option-input">
<div class="switch">
<label>
Off
<input type="checkbox" id="google-search-enable">
<span class="lever"></span>
On
</label>
</div>
</div>
</div>
<div class="row option">
<div class="col s9">Show selected word</div>
<div class="col s3 option-input">
<div class="switch">
<label>
Off
<input type="checkbox" id="show-selected-word">
<span class="lever"></span>
On
</label>
</div>
</div>
</div>
<div class="row option">
<div class="col s9">Theme</div>
<div class="col s3 option-input">
<div class="input-field" style="width: 6rem;margin: unset;">
<select id="theme">
<option value="Classic" selected="selected">Classic</option>
<option value="Dark">Dark</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="preview">
<div class="info-icon-container" style="margin-bottom: 1rem;">
Preview
<i class="material-icons tooltipped"
data-tooltip="Preview for the term 'India'"
style="margin: 0 5px;">info_outline</i>
</div>
<div id="jz-popup">
<div id="jz-word">India</div>
<div id="jz-description">a republic in the Asian subcontinent in southern Asia; second most populous country in the world; achieved independence from the United Kingdom in 1947</div>
<div id="jz-search">Search Google for "India"</div>
</div>
</div>
</div>
<div class="row right-align">
<div id="restore-button" class="waves-effect waves-light btn">Restore default</div>
</div>
</div>
</body>
</html>