55 lines
1.9 KiB
HTML
55 lines
1.9 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>admin</title>
|
|
<script src="https://unpkg.com/htmx.org@2.0.4"></script>
|
|
<style>
|
|
body { font: 12px ui-monospace, monospace; margin: 1rem; }
|
|
.tabs { display: flex; gap: 0.5rem; align-items: center; margin-bottom: 1rem; }
|
|
.tabs button {
|
|
color: #06c; background: none; border: none; font: inherit;
|
|
cursor: pointer; padding: 4px 10px; border-radius: 3px;
|
|
}
|
|
.tabs button.active { font-weight: bold; color: #000; background: #f0f0f0; cursor: default; }
|
|
.toolbar { display: flex; gap: 0.5rem; align-items: center; margin-bottom: 0.5rem; }
|
|
.toolbar input[type="text"] {
|
|
font: inherit; padding: 2px 6px; border: 1px solid #ccc;
|
|
border-radius: 3px; width: 16rem;
|
|
}
|
|
table { border-collapse: collapse; width: 100%; }
|
|
th, td { padding: 4px 8px; border-bottom: 1px solid #eee; text-align: left; vertical-align: top; }
|
|
th { background: #f7f7f7; position: sticky; top: 0; }
|
|
tr:hover { background: #fafafa; }
|
|
.num { text-align: right; }
|
|
.mine { background: #fffbe6; }
|
|
.name, .mod { color: #06c; }
|
|
.src { color: #555; }
|
|
.htmx-indicator { color: #888; opacity: 0; transition: opacity 200ms; }
|
|
.htmx-request .htmx-indicator { opacity: 1; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<nav class="tabs">
|
|
<button class="active"
|
|
onclick="activateTab(this)"
|
|
hx-get="/admin_htmx/processes" hx-target="#panel"
|
|
hx-trigger="click, load">processes</button>
|
|
<button onclick="activateTab(this)"
|
|
hx-get="/admin_htmx/modules" hx-target="#panel"
|
|
hx-trigger="click">modules</button>
|
|
<span class="htmx-indicator">…</span>
|
|
</nav>
|
|
|
|
<main id="panel"></main>
|
|
|
|
<script>
|
|
function activateTab(btn) {
|
|
for (const b of btn.parentNode.querySelectorAll("button")) {
|
|
b.classList.toggle("active", b === btn);
|
|
}
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|