generated from rmcguire/go-server-with-otel
58 lines
2.0 KiB
HTML
58 lines
2.0 KiB
HTML
{{define "layout"}}<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>EcoNet Admin</title>
|
|
<link rel="stylesheet" href="/static/pico.classless.min.css">
|
|
<link rel="stylesheet" href="/static/app.css">
|
|
<script src="/static/htmx.min.js" defer></script>
|
|
<script>
|
|
// Set the theme before first paint to avoid a flash.
|
|
(function () {
|
|
var saved = localStorage.getItem("theme");
|
|
var theme = saved || (window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light");
|
|
document.documentElement.setAttribute("data-theme", theme);
|
|
})();
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<header class="app-header">
|
|
<hgroup>
|
|
<h1>EcoNet Admin</h1>
|
|
<p>Rheem water heater status & control</p>
|
|
</hgroup>
|
|
<button id="theme-toggle" class="secondary theme-toggle" aria-label="Toggle dark mode" onclick="toggleTheme()"></button>
|
|
</header>
|
|
|
|
<main>
|
|
<div id="devices" class="device-grid" hx-get="/ui/devices" hx-trigger="every 30s" hx-swap="innerHTML">
|
|
{{template "devices" .}}
|
|
</div>
|
|
</main>
|
|
|
|
<dialog id="debug-modal" class="debug-modal">
|
|
<article>
|
|
<header>
|
|
<button aria-label="Close" rel="prev" onclick="document.getElementById('debug-modal').close()"></button>
|
|
<strong>Raw device JSON</strong>
|
|
</header>
|
|
<pre><code id="debug-modal-body">Loading…</code></pre>
|
|
</article>
|
|
</dialog>
|
|
|
|
<script>
|
|
function themeIcon(t) { return t === "dark" ? "☀️" : "🌙"; } // sun / moon
|
|
function toggleTheme() {
|
|
var cur = document.documentElement.getAttribute("data-theme");
|
|
var next = cur === "dark" ? "light" : "dark";
|
|
document.documentElement.setAttribute("data-theme", next);
|
|
localStorage.setItem("theme", next);
|
|
document.getElementById("theme-toggle").textContent = themeIcon(next);
|
|
}
|
|
document.getElementById("theme-toggle").textContent =
|
|
themeIcon(document.documentElement.getAttribute("data-theme"));
|
|
</script>
|
|
</body>
|
|
</html>{{end}}
|