2024-04-15 18:28:30 +00:00
<!DOCTYPE HTML>
< html >
2023-06-12 17:17:28 +00:00
< head >
< title > ESP Web Server< / title >
< meta name = "viewport" content = "width=device-width, initial-scale=1" >
< link rel = "icon" href = "data:," >
< style >
2024-04-15 18:28:30 +00:00
html {
font-family: Arial;
display: inline-block;
text-align: center;
background-color: #f2f2f2; /* Add background color */
}
h2 {
font-size: 3.0rem;
}
p {
font-size: 2.0rem;
}
body {
max-width: 600px;
margin: 0px auto;
padding-bottom: 25px;
}
.switch {
position: relative;
display: inline-block;
width: 120px;
height: 68px;
}
.switch input {
display: none;
}
.slider {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
border-radius: 6px;
}
.slider:before {
position: absolute;
content: "";
height: 52px;
width: 52px;
left: 8px;
bottom: 8px;
background-color: #fff;
-webkit-transition: .4s;
transition: .4s;
border-radius: 3px;
}
input:checked + .slider {
background-color: #b30000;
}
input:checked + .slider:before {
-webkit-transform: translateX(52px);
-ms-transform: translateX(52px);
transform: translateX(52px);
}
.navbar {
background-color: #333;
overflow: hidden;
width: 100%; /* Make navbar full width */
}
.navbar a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.navbar a:hover {
background-color: #ddd;
color: black;
}
.navbar a.active {
background-color: #4CAF50;
color: white;
}
.navbar .version {
float: right;
padding: 14px 16px;
color: #f2f2f2;
}
.news {
margin-top: 20px;
border: 1px solid #ccc; /* Add border around news item */
padding: 10px; /* Add padding to news item */
}
2023-06-12 17:17:28 +00:00
< / style >
< / head >
< body >
2024-04-15 18:28:30 +00:00
< div class = "navbar" >
< a class = "active" href = "/" > Home< / a >
< a href = "docs" > API Docs< / a >
< a href = "update" > Update< / a >
< span class = "version" id = "version" > Version: < span id = "versionNumber" > < / span > < / span >
< / div >
< h2 > Card Web Server & API< / h2 >
< div class = "news" >
< h3 > Latest News< / h3 >
< p > Added API docs and Serial Interface docs. To access the API docs, click on "docs" in the navbar. For the Serial docs, just type "help" on the serial CLI.< / p >
< / div >
< script >
var xhr = new XMLHttpRequest();
xhr.open("GET", "/version", true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 & & xhr.status === 200) {
var response = JSON.parse(xhr.responseText);
var versionNumber = document.getElementById("versionNumber");
versionNumber.textContent = response["version"];
}
};
xhr.send();
< / script >
< script >
function toggleCheckbox(element) {
var xhr = new XMLHttpRequest();
if (element.checked) {
xhr.open("GET", "/gpio?output=" + element.id + "& state=1", true);
} else {
xhr.open("GET", "/gpio?output=" + element.id + "& state=0", true);
}
xhr.send();
}
< / script >
2023-06-12 17:17:28 +00:00
< / body >
< / html >
