67 lines
3.5 KiB
HTML
67 lines
3.5 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>{{title}}</title>
|
|
<!-- Built by isokit (https://git.b4l.co.th/B4L/isokit) from the project's isokit.toml, scene.json and scripts. Edit those, not this file. -->
|
|
<script>
|
|
(function(){var t=null;try{t=localStorage.getItem("isokit-theme")}catch(e){}
|
|
if(t!=="light"&&t!=="dark")t=window.matchMedia&&matchMedia("(prefers-color-scheme: light)").matches?"light":"dark";
|
|
document.documentElement.setAttribute("data-theme",t);})();
|
|
</script>
|
|
<style>
|
|
:root { color-scheme: dark; --bg: #0a0f1a; --panel: #0f1626; --stroke: #2a3a56; --fg: #d6deeb; --mute: #8a97b0; --accent: #3ddc84; }
|
|
html[data-theme=light] { color-scheme: light; --bg: #f4f6fa; --panel: #ffffff; --stroke: #cfd8e6; --fg: #1b2533; --mute: #5b6880; --accent: #0e8f4f; }
|
|
* { box-sizing: border-box; }
|
|
body { margin: 0; background: var(--bg); color: var(--fg); font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
|
|
header, .wrap { max-width: 1320px; margin: 0 auto; padding: 0 20px; }
|
|
header { padding-top: 24px; display: flex; align-items: center; gap: 12px; }
|
|
h1 { margin: 0; font-size: 24px; flex: 1; }
|
|
.themebtn { background: var(--panel); color: var(--fg); border: 1px solid var(--stroke); border-radius: 5px; padding: 6px 12px; font: inherit; font-size: 14px; cursor: pointer; }
|
|
.themebtn:hover { border-color: var(--accent); }
|
|
.card { background: var(--panel); border: 1px solid var(--stroke); border-radius: 8px; padding: 14px; margin: 16px 0; }
|
|
.picked { min-height: 44px; color: var(--mute); font-size: 14px; }
|
|
.picked b { color: var(--fg); }
|
|
.picked table { border-collapse: collapse; margin-top: 4px; }
|
|
.picked th { text-align: left; font-weight: 400; padding: 1px 14px 1px 0; }
|
|
.picked td { color: var(--fg); }
|
|
footer { color: var(--mute); font-size: 12px; padding: 0 0 24px; }
|
|
/*ISOKIT_CSS*/
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<header><h1>{{title}}</h1><button class="themebtn" id="themebtn" type="button">Light / dark</button></header>
|
|
<div class="wrap">
|
|
<div class="card"><div id="view"></div></div>
|
|
<div class="card picked" id="picked">Tap or click anything for its details.</div>
|
|
<footer>Made with isokit · built {{date}}</footer>
|
|
</div>
|
|
<script id="isokit-data" type="application/json">/*ISOKIT_DATA*/</script>
|
|
<script>
|
|
/*ISOKIT_JS*/
|
|
</script>
|
|
<script>
|
|
(function () {
|
|
var data = JSON.parse(document.getElementById("isokit-data").textContent);
|
|
var picked = document.getElementById("picked");
|
|
function esc(s) { return String(s).replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">"); }
|
|
var view = IsoKit.mount(document.getElementById("view"), IsoKit.staticSource(data), {
|
|
fullscreen: document.querySelector(".card"),
|
|
onPick: function (i) {
|
|
if (!i) { picked.textContent = "Tap or click anything for its details."; return; }
|
|
picked.innerHTML = "<b>" + esc(i.name) + "</b>" + (i.detail ? "<br>" + esc(i.detail) : "") +
|
|
(i.rows && i.rows.length ? "<table>" + i.rows.map(function (r) { return "<tr><th>" + esc(r[0]) + "</th><td>" + esc(r[1]) + "</td></tr>"; }).join("") + "</table>" : "");
|
|
}
|
|
});
|
|
window.__isokit = { view: view, data: data };
|
|
document.getElementById("themebtn").addEventListener("click", function () {
|
|
var t = document.documentElement.getAttribute("data-theme") === "light" ? "dark" : "light";
|
|
document.documentElement.setAttribute("data-theme", t);
|
|
try { localStorage.setItem("isokit-theme", t); } catch (e) { /* private mode */ }
|
|
});
|
|
})();
|
|
</script>
|
|
</body>
|
|
</html>
|