This repository has been archived by the owner on Apr 3, 2024. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.htm
335 lines (287 loc) · 12 KB
/
index.htm
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
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Arduino Clock</title>
</head>
<body onload="getData()">
<style>
body {
background-color: #0B0C10;
color: #c5c6c7;
font-family: 'Trebuchet MS', sans-serif;
}
header {
padding-top: 3em;
display: flex;
align-items: center;
justify-content: center;
font-family: Arial, Helvetica, sans-serif;
font-size: 200%;
font-weight: bold;
color: #66FCF1;
background-color: #0B0C10;
}
#main {
position: absolute;
width: 50%;
left: 25%;
top: 50%;
transform: translateY(-50%);
}
form {
border-radius: 5px;
text-align: center;
background-color: #1f2833;
}
.form-li {
padding: 2em;
}
.form-li label {
font-size: 275%;
}
input {
border: none;
outline: none;
border-bottom: 2px solid #45A29E;
border-radius: 5px;
color: #c5c6c7;
background-color: #0B0C10;
padding: 1em;
}
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator {
filter: invert(100%);
}
.current-clock {
margin: 2em;
border-radius: 5px;
padding: 2em;
text-align: center;
background-color: #1f2833;
visibility: hidden;
}
.current-clock p {
color: #c5c6c7;
font-size: 150%;
}
.button-red {
appearance: none;
background-color: #ff0000;
/* Rot */
border: 1px solid rgba(27, 31, 35, .15);
border-radius: 6px;
box-shadow: rgba(27, 31, 35, .1) 0 1px 0;
box-sizing: border-box;
color: #fff;
cursor: pointer;
display: inline-block;
font-family: -apple-system, system-ui, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
font-size: 14px;
font-weight: 600;
line-height: 20px;
padding: 6px 16px;
position: relative;
text-align: center;
text-decoration: none;
user-select: none;
-webkit-user-select: none;
touch-action: manipulation;
vertical-align: middle;
white-space: nowrap;
}
.button-red:focus:not(:focus-visible):not(.focus-visible) {
box-shadow: none;
outline: none;
}
.button-red:hover {
background-color: #ff0000;
/* Rot */
}
.button-red:focus {
box-shadow: rgba(164, 46, 46, 0.4) 0 0 0 3px;
outline: none;
}
.button-red:disabled {
background-color: #d39494;
border-color: rgba(27, 31, 35, .1);
color: rgba(255, 255, 255, .8);
cursor: default;
}
.button-red:active {
background-color: #8e2929;
box-shadow: rgba(20, 70, 32, .2) 0 1px 0 inset;
}
.button-green {
appearance: none;
background-color: #2ea44f;
border: 1px solid rgba(27, 31, 35, .15);
border-radius: 6px;
box-shadow: rgba(27, 31, 35, .1) 0 1px 0;
box-sizing: border-box;
color: #fff;
cursor: pointer;
display: inline-block;
font-family: -apple-system, system-ui, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
font-size: 14px;
font-weight: 600;
line-height: 20px;
padding: 6px 16px;
position: relative;
text-align: center;
text-decoration: none;
user-select: none;
-webkit-user-select: none;
touch-action: manipulation;
vertical-align: middle;
white-space: nowrap;
}
.button-green:focus:not(:focus-visible):not(.focus-visible) {
box-shadow: none;
outline: none;
}
.button-green:hover {
background-color: #2c974b;
}
.button-green:focus {
box-shadow: rgba(46, 164, 79, .4) 0 0 0 3px;
outline: none;
}
.button-green:disabled {
background-color: #94d3a2;
border-color: rgba(27, 31, 35, .1);
color: rgba(255, 255, 255, .8);
cursor: default;
}
.button-green:active {
background-color: #298e46;
box-shadow: rgba(20, 70, 32, .2) 0 1px 0 inset;
}
.alert-success {
padding: 1em;
margin: 1em;
border-radius: 5px;
color: #FFFFFF;
font-size: 125%;
background-color: #298e46;
text-align: center;
visibility: hidden;
}
.settings-div {
margin: 2em;
display: flex;
justify-content: end;
}
.settings-div a {
color: white;
text-decoration: none;
font-size: 125%;
}
</style>
<div id="main">
<header>
<h1>SMART CLOCK</h1>
</header>
<div class="alert-success" onclick="removeAlert()">
<p>Clock set!</p>
</div>
<div class="settings-div">
<a href="/settings">
<span style="vertical-align: middle;">
<svg width="25px" height="25px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M14.2788 2.15224C13.9085 2 13.439 2 12.5 2C11.561 2 11.0915 2 10.7212 2.15224C10.2274 2.35523 9.83509 2.74458 9.63056 3.23463C9.53719 3.45834 9.50065 3.7185 9.48635 4.09799C9.46534 4.65568 9.17716 5.17189 8.69017 5.45093C8.20318 5.72996 7.60864 5.71954 7.11149 5.45876C6.77318 5.2813 6.52789 5.18262 6.28599 5.15102C5.75609 5.08178 5.22018 5.22429 4.79616 5.5472C4.47814 5.78938 4.24339 6.1929 3.7739 6.99993C3.30441 7.80697 3.06967 8.21048 3.01735 8.60491C2.94758 9.1308 3.09118 9.66266 3.41655 10.0835C3.56506 10.2756 3.77377 10.437 4.0977 10.639C4.57391 10.936 4.88032 11.4419 4.88029 12C4.88026 12.5581 4.57386 13.0639 4.0977 13.3608C3.77372 13.5629 3.56497 13.7244 3.41645 13.9165C3.09108 14.3373 2.94749 14.8691 3.01725 15.395C3.06957 15.7894 3.30432 16.193 3.7738 17C4.24329 17.807 4.47804 18.2106 4.79606 18.4527C5.22008 18.7756 5.75599 18.9181 6.28589 18.8489C6.52778 18.8173 6.77305 18.7186 7.11133 18.5412C7.60852 18.2804 8.2031 18.27 8.69012 18.549C9.17714 18.8281 9.46533 19.3443 9.48635 19.9021C9.50065 20.2815 9.53719 20.5417 9.63056 20.7654C9.83509 21.2554 10.2274 21.6448 10.7212 21.8478C11.0915 22 11.561 22 12.5 22C13.439 22 13.9085 22 14.2788 21.8478C14.7726 21.6448 15.1649 21.2554 15.3694 20.7654C15.4628 20.5417 15.4994 20.2815 15.5137 19.902C15.5347 19.3443 15.8228 18.8281 16.3098 18.549C16.7968 18.2699 17.3914 18.2804 17.8886 18.5412C18.2269 18.7186 18.4721 18.8172 18.714 18.8488C19.2439 18.9181 19.7798 18.7756 20.2038 18.4527C20.5219 18.2105 20.7566 17.807 21.2261 16.9999C21.6956 16.1929 21.9303 15.7894 21.9827 15.395C22.0524 14.8691 21.9088 14.3372 21.5835 13.9164C21.4349 13.7243 21.2262 13.5628 20.9022 13.3608C20.4261 13.0639 20.1197 12.558 20.1197 11.9999C20.1197 11.4418 20.4261 10.9361 20.9022 10.6392C21.2263 10.4371 21.435 10.2757 21.5836 10.0835C21.9089 9.66273 22.0525 9.13087 21.9828 8.60497C21.9304 8.21055 21.6957 7.80703 21.2262 7C20.7567 6.19297 20.522 5.78945 20.2039 5.54727C19.7799 5.22436 19.244 5.08185 18.7141 5.15109C18.4722 5.18269 18.2269 5.28136 17.8887 5.4588C17.3915 5.71959 16.7969 5.73002 16.3099 5.45096C15.8229 5.17191 15.5347 4.65566 15.5136 4.09794C15.4993 3.71848 15.4628 3.45833 15.3694 3.23463C15.1649 2.74458 14.7726 2.35523 14.2788 2.15224ZM12.5 15C14.1695 15 15.5228 13.6569 15.5228 12C15.5228 10.3431 14.1695 9 12.5 9C10.8305 9 9.47716 10.3431 9.47716 12C9.47716 13.6569 10.8305 15 12.5 15Z"
fill="white" />
</svg>
</span>
settings
</a>
</div>
<form action="/" method="post">
<div class="form-li">
<label for="date">Date:</label><br><br>
<input type="date" name="date" id="date" required>
</div>
<div class="form-li">
<label for="time">Time:</label><br><br>
<input type="time" name="time" id="time" required>
</div>
<input type="hidden" name="set" value="true">
<div class="form-li">
<input type="submit" class="button-green" value="submit">
</div>
</form>
<div class="current-clock">
<h1>Next Alarm:</h1>
<p id="next-time"></p>
<p id="next-date"></p>
<button class="button-red" role="button" id="delete-alarm" onclick="deleteClock()">Delete</button>
</div>
</div>
</body>
<script>
function getData() {
const currentClock = document.getElementsByClassName("current-clock")[0]; // Um das erste Element zu erhalten
const timeField = document.getElementById("next-time");
const dateField = document.getElementById("next-date");
const api = "/get-data";
const xhr = new XMLHttpRequest();
xhr.open("POST", api, true);
xhr.setRequestHeader("Content-type", "application/json");
xhr.onload = function () {
if (xhr.status === 200) {
const obj = JSON.parse(xhr.responseText);
if (obj.date && obj.time) {
currentClock.style.visibility = "visible"; // Das Element sichtbar machen
timeField.textContent = obj.time; // Inhalt des timeField setzen
dateField.textContent = obj.date; // Inhalt des dateField setzen
} else {
currentClock.style.visibility = "hidden";
}
}
};
xhr.send(); // Anforderung senden
}
function deleteClock() {
const apiUrl = "/"; // Die Zielseite, auf der die POST-Anfrage gesendet wird
const data = {
date: "",
time: "",
set: false
};
const xhr = new XMLHttpRequest();
xhr.open("POST", apiUrl, true);
xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
// Konvertieren der Daten in JSON
const jsonData = JSON.stringify(data);
xhr.onload = function () {
if (xhr.status === 200) {
console.log("Erfolgreich gesendet");
var newURL = window.location.pathname + '?error=none';
// Aktualisiere die URL und lade die Seite neu
window.location.href = newURL;
} else {
console.error("Fehler beim Senden der POST-Anfrage");
}
};
xhr.send(jsonData);
}
function removeAlert() {
const alert = document.getElementsByClassName("alert-success")[0];
alert.style.visibility = "hidden";
// Die URL ohne Parameter neu setzen
const newURL = window.location.origin + window.location.pathname;
window.history.replaceState({}, document.title, newURL);
}
function showAlert() {
const alert = document.getElementsByClassName("alert-success")[0];
alert.style.visibility = "visible";
}
// Überprüfe, ob der 'error' Parameter in der URL "none" ist
const urlParams = new URLSearchParams(window.location.search);
if (urlParams.get("error") === "none") {
showAlert();
}
</script>
</html>