Main_Website-Oblistudios/admin.html

100 lines
2.7 KiB
HTML

<!doctype html>
<meta charset="utf-8">
<title>ASA Config Admin</title>
<style>
body {
font: 14px/1.45 system-ui,Segoe UI,Arial;
margin: 0;
background: #0b1220;
color: #e8eeff
}
main {
max-width: 980px;
margin: 24px auto;
padding: 0 16px
}
.bar {
display: flex;
gap: 8px;
align-items: center;
margin-bottom: 12px;
flex-wrap: wrap
}
input, button, textarea {
border-radius: 8px;
border: 1px solid rgba(255,255,255,.15);
background: #0f1730;
color: #e8eeff
}
input {
padding: 8px 10px;
flex: 1;
min-width: 240px
}
button {
padding: 8px 14px;
cursor: pointer
}
textarea {
width: 100%;
height: 480px;
padding: 12px
}
.hint {
color: #97a4c0;
font-size: 12px;
margin-top: 6px
}
.ok {
color: #1fd4a0
}
.err {
color: #ff6b6b
}
</style>
<main>
<h1>ASA Config Admin</h1>
<div class="bar">
<input id="api" placeholder="Service base URL" value="http://localhost:5317">
<input id="token" placeholder="Admin Bearer token">
<button id="load">Load</button>
<button id="save">Save</button>
<span id="msg"></span>
</div>
<textarea id="json">{}</textarea>
<div class="hint">Edits the JSON that your ASAservers page consumes. Save, then refresh the public page.</div>
</main>
<script>
const $ = s => document.querySelector(s);
function msg(t, ok = true) { const el = $('#msg'); el.textContent = t; el.className = ok ? 'ok' : 'err'; }
$('#load').onclick = async () => {
try {
const r = await fetch($('#api').value + '/admin/config', { headers: { Authorization: 'Bearer ' + $('#token').value } });
if (!r.ok) throw new Error(await r.text());
$('#json').value = await r.text();
msg('Loaded');
} catch (e) { msg('Load failed: ' + e.message, false); }
};
$('#save').onclick = async () => {
try {
JSON.parse($('#json').value);
const r = await fetch($('#api').value + '/admin/config', {
method: 'PUT',
headers: { 'Content-Type': 'application/json', Authorization: 'Bearer ' + $('#token').value },
body: $('#json').value
});
if (!r.ok) throw new Error(await r.text());
msg('Saved');
} catch (e) { msg('Save failed: ' + e.message, false); }
};
</script>