tinance2-doorbot/data/index.html

270 lines
No EOL
6.9 KiB
HTML

<!DOCTYPE HTML>
<html>
<head>
<title>ESP Web Server</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="data:,">
<style>
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 */
}
</style>
</head>
<body>
<div class="navbar">
<a class="active" href="/">Home</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>
<hr>
<div>
<table>
<tr>
<th style="text-align: left;">Endpoint</th>
<th>HTTP Method</th>
<th>Parameters</th>
<th>Description</th>
</tr>
<tr>
<td style="text-align: left;">/</td>
<td>GET</td>
<td>N/A</td>
<td>Serves the index.html file</td>
</tr>
<tr>
<td style="text-align: left;">/version</td>
<td>GET</td>
<td>N/A</td>
<td>Returns the version number</td>
</tr>
<tr>
<td style="text-align: left;">/gpio</td>
<td>POST</td>
<td>output, state</td>
<td>Controls the GPIO pin</td>
</tr>
<tr>
<td style="text-align: left;">/state/relay</td>
<td>GET</td>
<td>N/A</td>
<td>Returns the state of relay1</td>
</tr>
<tr>
<td style="text-align: left;">/settings/relaydisabled</td>
<td>GET, POST</td>
<td>value</td>
<td>Gets or sets the relay disabled value</td>
</tr>
<tr>
<td style="text-align: left;">/settings/relaymode</td>
<td>GET, POST</td>
<td>value</td>
<td>Gets or sets the relay mode currently "LATCH" or "TOGGLE"</td>
</tr>
<tr>
<td style="text-align: left;">/settings/tinance2creds</td>
<td>GET, POST</td>
<td>identifier, key</td>
<td>Gets or sets the Tinance credentials</td>
</tr>
<tr>
<td style="text-align: left;">/settings/tinance2url</td>
<td>GET, POST</td>
<td>url</td>
<td>Gets or sets the Tinance URL</td>
</tr>
<tr>
<td style="text-align: left;">/settings/tinance2validatecardurl</td>
<td>GET</td>
<td>N/A</td>
<td>Returns the validate card URL</td>
</tr>
<tr>
<td style="text-align: left;">/settings/tinance2readerinfourl</td>
<td>GET</td>
<td>N/A</td>
<td>Returns the reader info URL</td>
</tr>
<tr>
<td style="text-align: left;">/settings/tinance2aclsurl</td>
<td>GET</td>
<td>N/A</td>
<td>Returns the ACLs URL</td>
</tr>
<tr>
<td style="text-align: left;">/settings/tinance2logurl</td>
<td>GET</td>
<td>N/A</td>
<td>Returns the reader log URL</td>
</tr>
<tr>
<td style="text-align: left;">/settings/webhooklockenabled</td>
<td>GET, POST</td>
<td>value</td>
<td>Gets or sets the webhook lock enabled value</td>
</tr>
<tr>
<td style="text-align: left;">/settings/webhooklockhook</td>
<td>GET, POST</td>
<td>value</td>
<td>Gets or sets the webhook lock hook</td>
</tr>
<tr>
<td style="text-align: left;">/settings/webhookunlockenabled</td>
<td>GET, POST</td>
<td>value</td>
<td>Gets or sets the webhook unlock enabled value</td>
</tr>
<tr>
<td style="text-align: left;">/settings/webhookunlockhook</td>
<td>GET, POST</td>
<td>value</td>
<td>Gets or sets the webhook unlock hook</td>
</tr>
<tr>
<t00d style="text-align: left;">/users</td>
<td>GET, POST</td>
<td>N/A</td>
<td>lists all local / backup user</td>
</tr>
<tr>
<td style="text-align: left;">/users/create</td>
<td>GET, POST</td>
<td>cardid, desc</td>
<td>Creates a local / backup user</td>
</tr>
<tr>
<td style="text-align: left;">/users/update</td>
<td>GET, POST</td>
<td>cardid, newCardId, desc</td>
<td>updates a local / backup user if cardid is the same set newCardId to same value.</td>
</tr>
<tr>
<td style="text-align: left;">/users/remove</td>
<td>GET, POST</td>
<td>cardid</td>
<td>removes a local / backup user</td>
</tr>
</table>
</div>
</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>
</body>
</html>