#ifndef WEB_PAGES_H
#define WEB_PAGES_H
// -------------------- WiFi setup page --------------------
const char* wifiSetupPage = R"HTML(
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>WiFi setup</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
rel="stylesheet">
</head>
<body class="bg-dark text-light">
<div class="container py-4">
<div class="row justify-content-center">
<div class="col-12 col-md-8 col-lg-5">
<div class="card shadow-sm">
<div class="card-body">
<h1 class="h4 text-center mb-3">WiFi setup</h1>
<p class="text-muted text-center mb-4">
Connect the device to your home WiFi network.
</p>
<form method="POST" action="/save_wifi">
<div class="mb-3">
<label class="form-label">WiFi SSID</label>
<input name="ssid" class="form-control" placeholder="MyWiFi">
</div>
<div class="mb-3">
<label class="form-label">Password</label>
<input name="pass" type="password" class="form-control" placeholder="••••••••">
</div>
<div class="d-grid">
<button type="submit" class="btn btn-primary">
Save & reboot
</button>
</div>
</form>
</div>
</div>
<p class="text-center text-muted mt-3 mb-0">
ESP-01 Relay
</p>
</div>
</div>
</div>
</body>
</html>
)HTML";
// -------------------- Firmware update page --------------------
const char* updatePage = R"HTML(
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Firmware Update</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
rel="stylesheet">
</head>
<body class="bg-dark text-light">
<div class="container py-4">
<div class="row justify-content-center">
<div class="col-12 col-md-8 col-lg-5">
<div class="card shadow-sm">
<div class="card-body">
<h1 class="h4 mb-3 text-center">Firmware Update</h1>
<p class="text-muted text-center mb-4">
Select a compiled <code>.bin</code> file and upload it to update the firmware.
</p>
<form method="POST" action="/update" enctype="multipart/form-data">
<div class="mb-3">
<input type="file" name="firmware" class="form-control">
</div>
<div class="d-grid">
<button type="submit" class="btn btn-primary">
Upload & flash
</button>
</div>
</form>
</div>
</div>
<p class="text-center mt-3 mb-0">
<a href="/panel" class="link-light text-decoration-none">Back to control panel</a>
</p>
</div>
</div>
</div>
</body>
</html>
)HTML";
// -------------------- Panel page (header + footer) --------------------
const char* panelPageHeader = R"HTML(
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bedside Light Panel</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
rel="stylesheet">
</head>
<body class="bg-dark text-light">
<div class="container py-4">
<div class="row justify-content-center">
<div class="col-12 col-md-8 col-lg-6">
<div class="card shadow-sm">
<div class="card-body">
<h1 class="h4 mb-2 text-center">Bedside Matrix Night Light</h1>
<p class="text-muted text-center mb-4">
Tap the touch button on the device to turn the light on or off.
</p>
<form method="POST" action="/panel">
<div class="mb-3">
)HTML";
const char* panelPageFooter = R"HTML(
</div>
<div class="mb-3 d-grid">
<input type="hidden" name="powerState" value="">
<button name="toggleLight" class="btn btn-lg">
Power
</button>
</div>
<div class="mt-4 d-flex justify-content-between align-items-center">
<button type="submit" class="btn btn-primary">
Save settings
</button>
<a href="/update" class="btn btn-outline-secondary btn-sm">
Firmware update
</a>
<button type="button"
class="btn btn-outline-danger btn-sm"
onclick="
if (confirm('Reboot device?')) {
fetch('/reboot', {method: 'POST'})
.then(() => setTimeout(() => location.reload(), 2000));
}
">
Reboot
</button>
</div>
</form>
</div>
</div>
<p class="text-center text-muted mt-3 mb-0">
ESP-01 Relay
</p>
</div>
</div>
</div>
<script>
function ajaxSubmitForm(form) {
const formData = new FormData(form);
fetch("/panel", {
method: "POST",
body: formData
});
}
function updatePowerBtnState(powerBtn) {
if(!powerStatus) {
powerBtn.classList.remove("btn-success");
powerBtn.classList.add("btn-warning");
powerBtn.innerHTML = "Power off";
} else {
powerBtn.classList.remove("btn-warning");
powerBtn.classList.add("btn-success");
powerBtn.innerHTML = "Power on";
}
}
document.addEventListener("DOMContentLoaded", e => {
const form = document.querySelector("form");
const powerBtn = form.querySelector("[name='toggleLight']");
updatePowerBtnState(powerBtn);
form.querySelector("input[name='powerState']").value = powerStatus;
powerBtn.addEventListener("click", e => {
e.preventDefault();
powerStatus = !powerStatus;
form.querySelector("input[name='powerState']").value = powerStatus;
updatePowerBtnState(powerBtn);
ajaxSubmitForm(form);
});
});
</script>
</body>
</html>
)HTML";
#endif
