Skip to content

Commit 3b28e9d

Browse files
FedericoLonghinFedericoLonghin
committed
created base webPage
1 parent 18d9af4 commit 3b28e9d

1 file changed

Lines changed: 214 additions & 0 deletions

File tree

‎webpage/index.html‎

Lines changed: 214 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,214 @@
1+
<!DOCTYPE html>
2+
<html lang='en'>
3+
4+
<head>
5+
<meta charset='utf-8' />
6+
<meta name='viewport' content='width=device-width, initial-scale=1' />
7+
<title>Clock - Manager</title>
8+
9+
<style>
10+
@import url(https://fonts.googleapis.com/css?family=Poppins);
11+
12+
* {
13+
box-sizing: border-box;
14+
}
15+
16+
body {
17+
width: 100%;
18+
height: 100%;
19+
margin: 0;
20+
display: block;
21+
background-color: #fff;
22+
font-family: poppins;
23+
user-select: none;
24+
}
25+
26+
nav {
27+
background-color: #fff;
28+
padding: 20px;
29+
padding-bottom: 0;
30+
width: 100%;
31+
text-align: center;
32+
font-family: poppins;
33+
color: #424242;
34+
font-size: 100px;
35+
}
36+
37+
.button-body {
38+
margin: 30px;
39+
padding: 20px;
40+
align-items: center;
41+
border: solid;
42+
border-radius: 32px;
43+
border-color: #424242;
44+
color: #424242;
45+
text-align: center;
46+
font-size: 40px;
47+
}
48+
49+
50+
51+
.modal {
52+
visibility: hidden;
53+
height: 0;
54+
font-size: 20px;
55+
text-align: left;
56+
display: block;
57+
58+
}
59+
60+
61+
.modal-visible {
62+
visibility: visible;
63+
height: auto;
64+
65+
}
66+
67+
68+
69+
.button {
70+
display: block;
71+
}
72+
73+
.checkbox-container {
74+
margin-top: 10px;
75+
}
76+
77+
.checkbox-item {
78+
text-align: left;
79+
font-size: 25px;
80+
margin-bottom: 10px;
81+
}
82+
83+
.modal-section {
84+
margin: auto;
85+
max-width: 400px;
86+
margin-bottom: 20px;
87+
}
88+
89+
.submit-button {
90+
margin-left: 70%;
91+
width: 30%;
92+
max-width: 200px;
93+
height: 50px;
94+
font-size: 20px;
95+
border-radius: 8px;
96+
font-family: Poppins;
97+
color: #424242;
98+
border-color: #424242;
99+
}
100+
101+
.time-picker {
102+
height: 40px;
103+
font-size: 20px;
104+
border-radius: 8px;
105+
font-family: Poppins;
106+
color: #424242;
107+
border-color: #424242;
108+
}
109+
110+
.simple-button:active {
111+
background-color: #eee;
112+
}
113+
114+
label{
115+
font-size: 20px;
116+
}
117+
118+
</style>
119+
<script>
120+
const Http = new XMLHttpRequest();
121+
const url = 'http://192.168.0.105';
122+
function showModal() {
123+
document.getElementById('alarmModal').classList.toggle('modal-visible');
124+
}
125+
</script>
126+
</head>
127+
128+
129+
<body>
130+
<nav>
131+
Clock
132+
</nav>
133+
<div class='button'>
134+
<div class='button-body simple-button' onclick='Http.open("GET", url+"/strip");Http.send();'>
135+
Toggle Strip
136+
</div>
137+
</div>
138+
139+
<div class='button'>
140+
<div class='button-body'>
141+
<div onclick='showModal();'>
142+
New Alarm
143+
</div>
144+
<div class='modal' id='alarmModal'>
145+
<form id='alarmForm' method='get' action='http://192.168.0.105/alarm'>
146+
147+
<div class='modal-section'>
148+
When will it ring?
149+
<div class='checkbox-container'>
150+
<div class='checkbox-item'>
151+
<div class='checkbox-item'>
152+
153+
<label for='time'>Select a time:</label>
154+
155+
<input type='time' id='time' name='time'>
156+
</div>
157+
</div>
158+
<div class='checkbox-item'>
159+
<input type='checkbox' id='mon' name='mon'>
160+
<label for='mon'>Monday</label>
161+
</div>
162+
<div class='checkbox-item'>
163+
<input type='checkbox' id='tue' name='tue'>
164+
<label for='tue'>Tuesday</label>
165+
</div>
166+
<div class='checkbox-item'>
167+
<input type='checkbox' id='wed' name='wed'>
168+
<label for='wed'>Wednesday</label>
169+
</div>
170+
<div class='checkbox-item'>
171+
<input type='checkbox' id='thu' name='thu'>
172+
<label for='thu'>Thursday</label>
173+
</div>
174+
<div class='checkbox-item'>
175+
<input type='checkbox' id='fri' name='fri'>
176+
<label for='fri'>Friday</label>
177+
</div>
178+
<div class='checkbox-item'>
179+
<input type='checkbox' id='sat' name='sat'>
180+
<label for='sat'>Saturday</label>
181+
</div>
182+
<div class='checkbox-item'>
183+
<input type='checkbox' id='sun' name='sun'>
184+
<label for='sun'>Sunday</label>
185+
</div>
186+
187+
</div>
188+
</div>
189+
190+
<div class='modal-section'>
191+
Repeat only one time
192+
193+
<div class='checkbox-container'>
194+
<div class='checkbox-item'>
195+
<input type='checkbox' id='oneTime' name='oneTime'>
196+
<label for='oneTime'>Onetime</label>
197+
</div>
198+
199+
200+
</div>
201+
</div>
202+
203+
<input type='submit' class='submit-button' form='alarmForm' value='Set'>
204+
</div>
205+
</form>
206+
</div>
207+
208+
</div>
209+
210+
</body>
211+
212+
213+
214+
</html>

0 commit comments

Comments
 (0)