Skip to content

Commit bd1c185

Browse files
m1kc3bm1kc3b
committed
init client
1 parent b7d7062 commit bd1c185

File tree

3 files changed

+141
-0
lines changed

3 files changed

+141
-0
lines changed

‎project_8/assets/index.html

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<link rel="stylesheet" href="./style.css">
7+
<script src="./script.js"></script>
8+
<title>ESP32 - Project #8 - Switch Web Server</title>
9+
</head>
10+
<body>
11+
<div class="container">
12+
<h1>Toggle Led <span class="led off"></span></h1>
13+
14+
<div>
15+
<label class="switch">
16+
<input type="checkbox" onchange="toggleGreen()" id="input_green">
17+
<span class="slider round"></span>
18+
</label>
19+
</div>
20+
21+
</div>
22+
</body>
23+
</html>

‎project_8/assets/script.js

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
let redIsOn = false
2+
let greenIsOn = false
3+
4+
5+
function toggleGreen() {
6+
fetch('/green').then(res => {
7+
if (res.ok) {
8+
const input_red = document.querySelector("#input_green").checked
9+
const led = document.querySelector(".led")
10+
11+
if (input_red) {
12+
led.classList.remove('off')
13+
led.classList.add('on')
14+
} else {
15+
led.classList.remove('on')
16+
led.classList.add('off')
17+
}
18+
} else {
19+
console.error("Erreur avec la requête")
20+
}
21+
})
22+
}

‎project_8/assets/style.css

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
html {
2+
font-family: Helvetica;
3+
display: inline-block;
4+
margin: 0px auto;
5+
text-align: center;
6+
}
7+
8+
body {
9+
margin: 0;
10+
height: 100vh;
11+
display: flex;
12+
justify-content: center;
13+
align-items: center;
14+
}
15+
16+
.led {
17+
display: inline-block;
18+
width: 30px;
19+
height: 30px;
20+
/* background-color: grey; */
21+
border-radius: 50%;
22+
/* box-shadow: 0 0 10px green; */
23+
margin-left: 5px;
24+
}
25+
26+
.off {
27+
background-color: grey;
28+
}
29+
30+
.on {
31+
background-color: rgb(36, 236, 36);
32+
box-shadow: 0 0 10px green;
33+
}
34+
35+
/* The switch - the box around the slider */
36+
.switch {
37+
position: relative;
38+
display: inline-block;
39+
width: 60px;
40+
height: 34px;
41+
}
42+
43+
/* Hide default HTML checkbox */
44+
.switch input {
45+
opacity: 0;
46+
width: 0;
47+
height: 0;
48+
}
49+
50+
/* The slider */
51+
.slider {
52+
position: absolute;
53+
cursor: pointer;
54+
top: 0;
55+
left: 0;
56+
right: 0;
57+
bottom: 0;
58+
background-color: #ccc;
59+
-webkit-transition: .4s;
60+
transition: .4s;
61+
}
62+
63+
.slider:before {
64+
position: absolute;
65+
content: "";
66+
height: 26px;
67+
width: 26px;
68+
left: 4px;
69+
bottom: 4px;
70+
background-color: white;
71+
-webkit-transition: .4s;
72+
transition: .4s;
73+
}
74+
75+
input:checked + .slider {
76+
background-color: #2196F3;
77+
}
78+
79+
input:focus + .slider {
80+
box-shadow: 0 0 1px #2196F3;
81+
}
82+
83+
input:checked + .slider:before {
84+
-webkit-transform: translateX(26px);
85+
-ms-transform: translateX(26px);
86+
transform: translateX(26px);
87+
}
88+
89+
/* Rounded sliders */
90+
.slider.round {
91+
border-radius: 34px;
92+
}
93+
94+
.slider.round:before {
95+
border-radius: 50%;
96+
}

0 commit comments

Comments
 (0)