-
Notifications
You must be signed in to change notification settings - Fork 0
/
aboutSettings.html
153 lines (131 loc) · 4.05 KB
/
aboutSettings.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
<style>
@import url(https://fonts.googleapis.com/css?family=Raleway:400,500);
html,
body {
background: #93cede; /* Old browsers */
background: -moz-linear-gradient(-45deg, #93cede 0%, #75bdd1 41%, #84edb0 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(-45deg, #93cede 0%, #75bdd1 41%, #84edb0 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg, #0099ff 0%, #0099cc 41%, #33cccc 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
background: radial-gradient(circle, #000, #212121, #000);
font-size: 14px;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#93cede', endColorstr='#84edb0',GradientType=1 );
text-align: center;
font-family: 'Raleway', Helvetica, sans-serif;
min-width: 320px;
}
header {
font-size: 2em;
font-weight: bold;
margin: 20px;
}
#form-outer {
background-color: rgb(256, 256, 256);
margin: 0 auto;
border-radius: 4px;
width: 75%;
max-width: 900px;
padding: 10px;
padding-top: 20px;
}
.center {
position: fixed; /* or absolute */
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
button {
background-color: #1b5e20;
border-radius: 20px;
color: white;
font-size: 1em;
height: 37px;
font-weight: 500;
text-transform: uppercase;
touch-action: manipulation;
transition-duration: 33ms;
transition-property: background-color, border-color, color, box-shadow, filter, transform;
transform: translate3d(0px, 0px, 0px);
font-family: Circular, Helvetica, Arial, sans-serif;
margin: 10px;
border: 0px solid;
padding-top: 10px;
padding-right: 35px;
padding-bottom: 10px;
padding-left: 35px;
cursor: pointer;
}
.button:hover {
background-color:rgb(29, 185, 84);
}
.deactivated {
background-color: #aaa;
border-radius: 4px;
color: white;
font-size: 1em;
height: 40px;
width: 96px;
margin: 10px;
border: 0px solid;
overFlow: hidden;
}
.activated {
background-color: #59ace0;
border-radius: 4px;
color: white;
font-size: 1em;
height: 40px;
width: 96px;
margin: 10px;
border: 0px solid;
overFlow: hidden;
cursor: pointer;
}
#block_container
{
text-align:left;
width: 700px;
}
#bloc1, #bloc2
{
display:inline-block;
text-align: left;
vertical-align: middle;
}
img {
margin: 5px;
}
</style>
<body>
<h1 id="title"></h1>
<div id="form-outer" class="center">
<h3 id="description"><b>
Settings Explained </b>
</h3>
<hr width="70%" style="border: 1px solid#D3D3D3;">
<div style="margin: auto;width: 540px">
<div id="block_container">
<div id="bloc1"> <img src="images/camera.png"></img></div>
<div id="bloc2"><h4>Enable Camera</h4><p>Enable the application to check blink rate in the background</p></div>
</div>
<div id="block_container">
<div id="bloc1"> <img src="images/time.png"></img></div>
<div id="bloc2"><h4>Time Interval</h4>
<p>Select the time interval for checking blink rate and splash screen</p>
</div>
</div>
<div id="block_container">
<div id="bloc1"> <img src="images/202020rule.png"></img></div>
<div id="bloc2"> <h4>Enable 20-20-20</h4>
<p>Enable reminder for looking at a far object every 20 minutes</p></div>
</div>
<div id="block_container">
<div id="bloc1"> <img src="images/notification.png"></img></div>
<div id="bloc2"> <h4>Enable Notification</h4>
<p>Enable notifications aout blink rate for given time interval</p></div>
</div>
</div>
<div class="algn">
<button id="back" class="button" onclick="location.href='settings.html'">Back</button>
</div>
</div>
</body>