120 lines
4.5 KiB
C
120 lines
4.5 KiB
C
const char index_html[] PROGMEM = R"rawliteral(
|
|
<!DOCTYPE HTML><html>
|
|
<head>
|
|
<title>LED Panel Control</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<style>
|
|
* { box-sizing: border-box; margin: 0; padding: 0; }
|
|
body { font-family: Arial, sans-serif; background: #1a1a2e; color: #eee; padding: 20px; }
|
|
h1 { text-align: center; margin-bottom: 30px; font-size: 1.5em; }
|
|
.container { max-width: 400px; margin: 0 auto; }
|
|
.card {
|
|
background: #16213e;
|
|
border-radius: 12px;
|
|
padding: 16px 20px;
|
|
margin-bottom: 12px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
.card-label { font-size: 1em; }
|
|
.card-label small { display: block; color: #888; font-size: 0.75em; margin-top: 2px; }
|
|
.toggle { position: relative; width: 52px; height: 28px; flex-shrink: 0; }
|
|
.toggle input { opacity: 0; width: 0; height: 0; }
|
|
.toggle .slider {
|
|
position: absolute; cursor: pointer;
|
|
top: 0; left: 0; right: 0; bottom: 0;
|
|
background: #444; border-radius: 28px;
|
|
transition: 0.3s;
|
|
}
|
|
.toggle .slider:before {
|
|
content: ""; position: absolute;
|
|
height: 22px; width: 22px;
|
|
left: 3px; bottom: 3px;
|
|
background: #fff; border-radius: 50%;
|
|
transition: 0.3s;
|
|
}
|
|
.toggle input:checked + .slider { background: #4CAF50; }
|
|
.toggle input:checked + .slider:before { transform: translateX(24px); }
|
|
.brightness-card {
|
|
background: #16213e;
|
|
border-radius: 12px;
|
|
padding: 16px 20px;
|
|
margin-bottom: 12px;
|
|
}
|
|
.brightness-card label { font-size: 1em; display: block; margin-bottom: 8px; }
|
|
.brightness-row { display: flex; align-items: center; gap: 12px; }
|
|
.brightness-row input[type=range] { flex: 1; accent-color: #4CAF50; }
|
|
.brightness-row span { min-width: 32px; text-align: right; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<h1>LED Panel Control</h1>
|
|
|
|
<div class="card">
|
|
<div class="card-label">Top Text<small>Witamy w PTI</small></div>
|
|
<label class="toggle"><input type="checkbox" id="top_text" checked onchange="toggle('top_text', this.checked)"><span class="slider"></span></label>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<div class="card-label">Bottom Text<small>School programs</small></div>
|
|
<label class="toggle"><input type="checkbox" id="bottom_text" checked onchange="toggle('bottom_text', this.checked)"><span class="slider"></span></label>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<div class="card-label">Vehicles<small>Vehicle interruptions</small></div>
|
|
<label class="toggle"><input type="checkbox" id="vehicles" checked onchange="toggle('vehicles', this.checked)"><span class="slider"></span></label>
|
|
</div>
|
|
|
|
<div class="brightness-card">
|
|
<label>Brightness</label>
|
|
<div class="brightness-row">
|
|
<input type="range" id="brightness" min="0" max="100" value="100" oninput="updateBrightnessLabel()" onchange="sendBrightness()">
|
|
<span id="brightnessValue">100</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
function toggle(program, enabled) {
|
|
var xhr = new XMLHttpRequest();
|
|
xhr.open("POST", "/toggle-program", true);
|
|
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
|
|
xhr.send("program=" + program + "&enabled=" + (enabled ? "true" : "false"));
|
|
}
|
|
|
|
function updateBrightnessLabel() {
|
|
document.getElementById("brightnessValue").innerText = document.getElementById("brightness").value;
|
|
}
|
|
|
|
function sendBrightness() {
|
|
var val = document.getElementById("brightness").value;
|
|
var xhr = new XMLHttpRequest();
|
|
xhr.open("POST", "/brightness", true);
|
|
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
|
|
xhr.send("value=" + val);
|
|
}
|
|
|
|
function fetchStatus() {
|
|
var xhr = new XMLHttpRequest();
|
|
xhr.open("GET", "/program-status", true);
|
|
xhr.onload = function() {
|
|
if (xhr.status === 200) {
|
|
var s = JSON.parse(xhr.responseText);
|
|
document.getElementById("top_text").checked = s.top_text;
|
|
document.getElementById("bottom_text").checked = s.bottom_text;
|
|
document.getElementById("vehicles").checked = s.vehicles;
|
|
document.getElementById("brightness").value = s.brightness;
|
|
document.getElementById("brightnessValue").innerText = s.brightness;
|
|
}
|
|
};
|
|
xhr.send();
|
|
}
|
|
|
|
window.onload = fetchStatus;
|
|
</script>
|
|
</body>
|
|
</html>
|
|
)rawliteral";
|