#include "sh_core_esp8266.h"
const char* wifi_setup_page = 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">
</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">
<div class="col">
<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="password">
</div>
<div class="d-grid">
<button type="submit" class="btn btn-primary">
Save & reboot
</button>
</div>
</form>
<hr>
<div>
<div>Last Wi-Fi SSID:</div>
<b>{{LAST_SSID}}</b>
<form method="POST" action="/wifi_confirm" style="margin-top:10px;">
<button type="submit">This connection is correct</button>
</form>
</div>
</div>
<div class="col">
<div class="wifi-list-container"></div>
</div>
</div>
</div>
<p class="text-center text-muted mt-3 mb-0">
ESP SmartHome Device
</p>
</div>
</div>
</div>
<script>
async function load_wifi_networks() {
const box = document.querySelector(".wifi-list-container");
if (!box) return;
box.innerHTML = "<div class='scanning'>Scanning...</div>";
try {
const res = await fetch("/wifi_scan", { cache: "no-store" });
if (!res.ok) throw new Error("HTTP " + res.status);
const data = await res.json();
if (!data || data.status !== "ok") {
box.innerHTML = "<div class='error-box'>Response ERROR</div>";
return;
}
const list = Array.isArray(data.networks) ? data.networks : [];
if (list.length === 0) {
box.innerHTML = "<div class='no-result'>Networks not found</div>";
return;
}
list.sort((a, b) => (b.signal || 0) - (a.signal || 0));
let html = "";
html += "<div class='wifi-list'>";
html += "<div class='wifi-list-header'>";
html += " <div class='heading'>Wi-Fi networks</div>";
html += " <button type='button' onclick='load_wifi_networks()'>Rescan</button>";
html += "</div>";
html += "<div class='wifi-list-body'>";
for (const net of list) {
const ssid = (net.ssid ?? "");
if(!ssid.length) continue;
const secured = !!net.secured;
const p = Math.max(0, Math.min(100, Number(net.signal ?? 0)));
html += "<div class='wifi-row' data-ssid='" + encodeURIComponent(ssid) + "' data-signal='" + p + "' data-secured='" + (secured ? "1" : "0") + "'></div>";
}
html += "</div></div>";
box.innerHTML = html;
const rows = box.querySelectorAll(".wifi-row");
rows.forEach((row) => {
const ssid = decodeURIComponent(row.getAttribute("data-ssid") || "");
const p = Number(row.getAttribute("data-signal") || "0");
const secured = row.getAttribute("data-secured") === "1";
const btn = document.createElement("button");
btn.type = "button";
btn.onclick = () => {
const inp = document.querySelector("input[name=ssid]");
if (inp) inp.value = ssid;
};
btn.textContent = ssid + (secured ? " 🔒" : "");
const sig = document.createElement("div");
sig.classList.add("signal");
const bar = document.createElement("div");
bar.classList.add("signal-bar");
const fill = document.createElement("div");
fill.classList.add("signal-bar-fill");
fill.style.width = p + "%";
bar.appendChild(fill);
const perc = document.createElement("div");
perc.classList.add("signal-percent");
perc.textContent = p + "%";
sig.appendChild(bar);
sig.appendChild(perc);
row.appendChild(btn);
row.appendChild(sig);
});
} catch (e) {
box.innerHTML = "<div class='error-box'>Scanning ERROR</div>";
}
}
document.addEventListener("DOMContentLoaded", () => {
load_wifi_networks();
});
</script>
</body>
</html>
)HTML";
const char* update_page = 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="/" class="link-light text-decoration-none">Back</a>
</p>
</div>
</div>
</div>
</body>
</html>
)HTML";
