You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
55 lines
2.8 KiB
55 lines
2.8 KiB
2 days ago
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<title>ARZ Web Helper</title>
|
||
|
|
<style>
|
||
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||
|
|
body { background: #0a0e1a; color: #e0e0e0; font-family: 'Segoe UI', system-ui, sans-serif; min-height: 100vh; display: flex; flex-direction: column; align-items: center; padding: 40px 16px; }
|
||
|
|
h1 { font-size: 22px; font-weight: 600; color: #f3f4f6; margin-bottom: 8px; }
|
||
|
|
.subtitle { color: #6b7280; font-size: 13px; margin-bottom: 32px; }
|
||
|
|
.status { display: flex; align-items: center; gap: 8px; margin-bottom: 32px; font-size: 13px; color: #9ca3af; }
|
||
|
|
.dot { width: 8px; height: 8px; border-radius: 50%; background: #ef4444; }
|
||
|
|
.dot.ok { background: #22c55e; }
|
||
|
|
.modules { display: flex; flex-direction: column; gap: 8px; width: 100%; max-width: 400px; }
|
||
|
|
a.mod { display: flex; align-items: center; gap: 12px; padding: 14px 18px; background: #111827; border: 1px solid #1f2937; border-radius: 10px; color: #f3f4f6; text-decoration: none; font-size: 15px; transition: all 0.15s; }
|
||
|
|
a.mod:hover { background: #1f2937; border-color: #374151; }
|
||
|
|
a.mod .label { flex: 1; text-transform: capitalize; }
|
||
|
|
a.mod .arrow { color: #4b5563; }
|
||
|
|
.empty { color: #4b5563; font-size: 14px; text-align: center; padding: 32px; }
|
||
|
|
.admin-link { margin-top: 24px; }
|
||
|
|
a.admin { color: #6b7280; font-size: 13px; text-decoration: none; padding: 8px 16px; border: 1px solid #1f2937; border-radius: 8px; }
|
||
|
|
a.admin:hover { color: #9ca3af; border-color: #374151; }
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<h1>ARZ Web Helper</h1>
|
||
|
|
<p class="subtitle">build {{BUILD_TS}}</p>
|
||
|
|
<div class="status"><div class="dot" id="dot"></div><span id="st">Connecting...</span></div>
|
||
|
|
<div class="modules" id="mods"><div class="empty">Loading...</div></div>
|
||
|
|
<div class="admin-link"><a class="admin" href="/admin">Admin Panel</a></div>
|
||
|
|
<script>
|
||
|
|
const ws = new WebSocket('ws://'+location.host+'/ws');
|
||
|
|
ws.onopen = () => { document.getElementById('dot').className='dot ok'; document.getElementById('st').textContent='Connected'; };
|
||
|
|
ws.onclose = () => { document.getElementById('dot').className='dot'; document.getElementById('st').textContent='Disconnected'; };
|
||
|
|
|
||
|
|
async function loadModules() {
|
||
|
|
try {
|
||
|
|
const res = await fetch('/api/modules');
|
||
|
|
const data = await res.json();
|
||
|
|
const el = document.getElementById('mods');
|
||
|
|
const mods = data.modules || [];
|
||
|
|
if (!mods.length) { el.innerHTML = '<div class="empty">No modules loaded</div>'; return; }
|
||
|
|
el.innerHTML = '';
|
||
|
|
mods.sort();
|
||
|
|
for (const name of mods) {
|
||
|
|
el.innerHTML += '<a class="mod" href="/m/'+name+'/"><span class="label">'+name+'</span><span class="arrow">→</span></a>';
|
||
|
|
}
|
||
|
|
} catch(e) {}
|
||
|
|
}
|
||
|
|
loadModules();
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|