-
Notifications
You must be signed in to change notification settings - Fork 0
/
popup.html
156 lines (155 loc) · 5.5 KB
/
popup.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
154
155
156
<!DOCTYPE html>
<html>
<head>
<title>Aqua Buddy</title>
<link href="./css/aqua-buddy.min.css" rel="stylesheet" />
<script type="text/javascript" src="./popup.js"></script>
</head>
<body>
<div class="popup shadow divide-y divide-gray-400">
<div
class="p-2 flex items-center bg-blue-100 border-b-1 border-gray-500 h-24"
>
<div class="ml-4 flex-grow">
<h1 class="text-lg">Aqua Buddy</h1>
<span class="text-xs italic">I'm your friend 💙 and I'm here to help you stay hydrated!</span>
</div>
<img src="images/aqua-buddy-64.png" alt="Aqua Buddy" />
</div>
<div class="p-4">
<div class="flex justify-end pb-4">
<label
for="input_doNotDisturb"
class="flex items-center cursor-pointer"
>
<!-- label -->
<span class="mr-4 text-gray-700 font-medium"> Do not disturb </span>
<!-- toggle -->
<div class="relative">
<!-- input -->
<input id="input_doNotDisturb" type="checkbox" class="sr-only" />
<div class="toggle" id="toggleContainer">
<!-- line -->
<div
class="toggle-slide w-10 h-4 bg-gray-400 rounded-full shadow-inner"
></div>
<!-- dot -->
<div
class="toggle-slider absolute w-6 h-6 bg-white rounded-full shadow inset-y-0 left-0"
></div>
</div>
</div>
</label>
</div>
<div class="flex flex-col pb-4">
<h2 class="text-base pb-1">Remind Me Every</h2>
<div class="flex space-x-1">
<button
id="button_15"
title="Set frequency to 15 minutes"
data-frequency="15"
class="focus:outline-none focus:shadow-outline rounded py-2 px-4"
>
15 mins
</button>
<button
id="button_30"
title="Set frequency to 30 minutes"
data-frequency="30"
class="focus:outline-none focus:shadow-outline rounded py-2 px-4"
>
30 mins
</button>
<button
id="button_45"
title="Set frequency to 45 minutes"
data-frequency="45"
class="focus:outline-none focus:shadow-outline rounded py-2 px-4"
>
45 mins
</button>
<button
id="button_60"
title="Set frequency to 60 minutes"
data-frequency="60"
class="focus:outline-none focus:shadow-outline rounded py-2 px-4"
>
60 mins
</button>
</div>
</div>
<div class="flex flex-col">
<h2 class="text-base pb-1">Quiet Hours</h2>
<div class="flex justify-between items-center">
<label for="quietHoursFrom">From: </label>
<div class="relative">
<select
class="block appearance-none w-full bg-gray-200 border border-gray-200 text-gray-700 py-3 px-4 pr-8 rounded leading-tight focus:outline-none focus:shadow-outline"
id="quietHoursFrom"
></select>
<div
class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700"
>
<svg
class="fill-current h-4 w-4"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
>
<path
d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"
/>
</svg>
</div>
</div>
<label for="quietHoursTo">To: </label>
<div class="relative">
<select
class="block appearance-none w-full bg-gray-200 border border-gray-200 text-gray-700 py-3 px-4 pr-8 rounded leading-tight focus:outline-none focus:shadow-outline"
id="quietHoursTo"
></select>
<div
class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700"
>
<svg
class="fill-current h-4 w-4"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
>
<path
d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"
/>
</svg>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="p-2 text-xs bg-gray-100">
Made with <span class="text-red-600">♥</span> by
<a
class="text-blue-600 italic focus:outline-none focus:shadow-outline"
href="https://www.umairhafeez.com"
target="_blank"
title="Umair Hafeez"
>Umair Hafeez</a
><br /><br />
Icons made by
<a
class="text-blue-600 italic focus:outline-none focus:shadow-outline"
href="https://www.flaticon.com/authors/smalllikeart"
target="_blank"
title="smalllikeart"
>smalllikeart</a
>
from
<a
class="text-blue-600 italic focus:outline-none focus:shadow-outline"
href="https://www.flaticon.com/"
target="_blank"
title="Flaticon"
>www.flaticon.com</a
>
</div>
</body>
</html>