Add web GUI, docs, scripts, and 5G router config
- Web app (Flask): status, config, firewall, logs, users, restart - Docs: AT commands, deploy, DNS, quickstart, web GUI - Scripts: connect, deploy, diag, healthcheck, modem-status, speedtest, status, troubleshoot - Init and iptables: 5g-router, 5g-webgui, rules.v4 - CHANGELOG, TODO, REVISION; config and README updates
This commit is contained in:
nearxos
420
web/static/app.js
Normal file
420
web/static/app.js
Normal file
@@ -0,0 +1,420 @@
|
||||
(function () {
|
||||
// Alpine 5G Router – Rev: 2 (see REVISION in repo root)
|
||||
const API = '/api';
|
||||
const pageId = document.body.getAttribute('data-page');
|
||||
if (!pageId) return;
|
||||
|
||||
async function api(path, opts = {}) {
|
||||
const res = await fetch(API + path, {
|
||||
...opts,
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
...(opts.headers || {}),
|
||||
},
|
||||
credentials: 'same-origin',
|
||||
});
|
||||
const data = await res.json().catch(() => ({}));
|
||||
if (res.status === 401) {
|
||||
window.location.href = '/login';
|
||||
throw new Error('Unauthorized');
|
||||
}
|
||||
if (!res.ok) throw new Error(data.error || res.statusText);
|
||||
return data;
|
||||
}
|
||||
|
||||
function showMsg(elId, text, type) {
|
||||
const el = document.getElementById(elId);
|
||||
if (!el) return;
|
||||
el.textContent = text;
|
||||
el.className = 'msg visible ' + (type || '');
|
||||
el.classList.remove('success', 'error');
|
||||
if (type) el.classList.add(type);
|
||||
if (text) setTimeout(() => { el.classList.remove('visible'); }, 4000);
|
||||
}
|
||||
|
||||
function escapeHtml(s) {
|
||||
if (s == null) return '';
|
||||
const div = document.createElement('div');
|
||||
div.textContent = s;
|
||||
return div.innerHTML;
|
||||
}
|
||||
|
||||
// ---- Status page ----
|
||||
if (pageId === 'status') {
|
||||
const grid = document.getElementById('statusGrid');
|
||||
const modemGrid = document.getElementById('modemGrid');
|
||||
const refreshBtn = document.getElementById('refreshStatus');
|
||||
const speedtest5gBtn = document.getElementById('speedtest5gBtn');
|
||||
const speedtestWanBtn = document.getElementById('speedtestWanBtn');
|
||||
const speedtestResult = document.getElementById('speedtestResult');
|
||||
const speedtestMsg = document.getElementById('speedtestMsg');
|
||||
if (!grid) return;
|
||||
|
||||
function statusItem(label, value) {
|
||||
return '<div class="status-item"><label>' + escapeHtml(label) + '</label><div class="value">' + escapeHtml(value == null || value === '' ? '–' : String(value)) + '</div></div>';
|
||||
}
|
||||
|
||||
async function loadStatus() {
|
||||
grid.innerHTML = '<span style="color: var(--text-muted);">Loading…</span>';
|
||||
if (modemGrid) modemGrid.innerHTML = '';
|
||||
try {
|
||||
const s = await api('/status');
|
||||
grid.innerHTML = [
|
||||
{ label: 'Modem USB', value: s.modem_usb || '–' },
|
||||
{ label: 'WAN interface', value: s.wan_interface || '–' },
|
||||
{ label: 'WAN state', value: s.wan_state || '–' },
|
||||
{ label: 'WAN IP', value: s.wan_ip || '–' },
|
||||
{ label: 'Default route', value: s.default_route || '–' },
|
||||
{ label: 'AT port', value: (s.at_port || '–') + ' (' + (s.at_available === 'yes' ? 'available' : 'no') + ')' },
|
||||
].map(function (o) { return statusItem(o.label, o.value); }).join('');
|
||||
|
||||
if (modemGrid && s.modem && Object.keys(s.modem).length) {
|
||||
const m = s.modem;
|
||||
modemGrid.innerHTML = [
|
||||
{ label: 'AT port', value: m.at_port },
|
||||
{ label: 'Manufacturer', value: m.manufacturer },
|
||||
{ label: 'Model', value: m.model },
|
||||
{ label: 'Revision', value: m.revision },
|
||||
{ label: 'IMEI', value: m.imei },
|
||||
{ label: 'Signal (CSQ)', value: m.signal_csq != null ? m.signal_csq + ' (0–31)' : null },
|
||||
{ label: '2G/3G registration', value: m.creg_status },
|
||||
{ label: 'LTE/5G registration', value: m.cereg_status },
|
||||
{ label: 'USB mode', value: m.usb_mode ? m.usb_mode + ' (40=RNDIS)' : null },
|
||||
{ label: 'ICCID (SIM)', value: m.iccid },
|
||||
{ label: 'Operator', value: m.operator },
|
||||
{ label: 'Modem IP', value: m.modem_ip },
|
||||
].map(function (o) { return statusItem(o.label, o.value); }).join('');
|
||||
} else if (modemGrid) {
|
||||
modemGrid.innerHTML = '<span style="color: var(--text-muted);">No modem AT data (check AT port).</span>';
|
||||
}
|
||||
} catch (e) {
|
||||
grid.innerHTML = '<span class="msg error visible">' + escapeHtml(e.message) + '</span>';
|
||||
if (modemGrid) modemGrid.innerHTML = '';
|
||||
}
|
||||
}
|
||||
|
||||
async function runSpeedtest(iface) {
|
||||
if (!speedtestResult) return;
|
||||
speedtestResult.textContent = 'Running speedtest… (may take 30–60s)';
|
||||
if (speedtestMsg) { speedtestMsg.textContent = ''; speedtestMsg.classList.remove('visible', 'success', 'error'); }
|
||||
if (speedtest5gBtn) speedtest5gBtn.disabled = true;
|
||||
if (speedtestWanBtn) speedtestWanBtn.disabled = true;
|
||||
try {
|
||||
const data = await api('/speedtest', { method: 'POST', body: JSON.stringify({ interface: iface }) });
|
||||
const ifLabel = data.interface === '5g' ? '5G (modem)' : 'WAN';
|
||||
const ifDev = data.iface ? ` (${data.iface})` : '';
|
||||
let out = ifLabel + ifDev + '\n';
|
||||
if (data.source_ip) out += 'Local IP: ' + data.source_ip + '\n';
|
||||
if (data.public_ip) out += 'Public IP: ' + data.public_ip + '\n';
|
||||
else if (data.interface) out += 'Public IP: (unknown)\n';
|
||||
out += '\n';
|
||||
if (data.ping) out += 'Ping: ' + data.ping + '\n';
|
||||
if (data.download) out += 'Download: ' + data.download + '\n';
|
||||
if (data.upload) out += 'Upload: ' + data.upload + '\n';
|
||||
if (data.raw) out += '\n' + data.raw;
|
||||
speedtestResult.textContent = out;
|
||||
if (speedtestMsg) { showMsg('speedtestMsg', 'Speedtest done.', 'success'); }
|
||||
} catch (e) {
|
||||
speedtestResult.textContent = 'Error: ' + e.message;
|
||||
if (speedtestMsg) showMsg('speedtestMsg', e.message, 'error');
|
||||
} finally {
|
||||
if (speedtest5gBtn) speedtest5gBtn.disabled = false;
|
||||
if (speedtestWanBtn) speedtestWanBtn.disabled = false;
|
||||
}
|
||||
}
|
||||
|
||||
if (speedtest5gBtn) speedtest5gBtn.addEventListener('click', function () { runSpeedtest('5g'); });
|
||||
if (speedtestWanBtn) speedtestWanBtn.addEventListener('click', function () { runSpeedtest('wan'); });
|
||||
|
||||
loadStatus();
|
||||
if (refreshBtn) refreshBtn.addEventListener('click', function () { loadStatus(); });
|
||||
}
|
||||
|
||||
// ---- Logs page ----
|
||||
if (pageId === 'logs') {
|
||||
const view = document.getElementById('logView');
|
||||
const buttons = document.querySelectorAll('button[data-log]');
|
||||
if (!view) return;
|
||||
|
||||
async function loadLog(which) {
|
||||
view.textContent = 'Loading…';
|
||||
try {
|
||||
const data = await api('/logs?which=' + (which === 'speedtest' ? 'speedtest' : '5g') + '&tail=300');
|
||||
view.textContent = data.lines && data.lines.length ? data.lines.join('\n') : '(empty)';
|
||||
} catch (e) {
|
||||
view.textContent = 'Error: ' + e.message;
|
||||
}
|
||||
}
|
||||
|
||||
buttons.forEach(btn => btn.addEventListener('click', () => loadLog(btn.getAttribute('data-log'))));
|
||||
loadLog('5g');
|
||||
}
|
||||
|
||||
// ---- Restart page ----
|
||||
if (pageId === 'restart') {
|
||||
const btn = document.getElementById('restart5gBtn');
|
||||
if (!btn) return;
|
||||
btn.addEventListener('click', async () => {
|
||||
btn.disabled = true;
|
||||
showMsg('restartMsg', '', '');
|
||||
try {
|
||||
await api('/5g/restart', { method: 'POST' });
|
||||
showMsg('restartMsg', 'Restart initiated.', 'success');
|
||||
} catch (e) {
|
||||
showMsg('restartMsg', e.message, 'error');
|
||||
} finally {
|
||||
btn.disabled = false;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// ---- Config page ----
|
||||
if (pageId === 'config') {
|
||||
const editor = document.getElementById('configEditor');
|
||||
const loadBtn = document.getElementById('loadConfig');
|
||||
const saveBtn = document.getElementById('saveConfig');
|
||||
if (!editor) return;
|
||||
|
||||
async function loadConfig() {
|
||||
try {
|
||||
const cfg = await api('/config');
|
||||
editor.value = Object.entries(cfg).map(([k, v]) => k + '="' + (v || '') + '"').join('\n');
|
||||
} catch (e) {
|
||||
showMsg('configMsg', e.message, 'error');
|
||||
}
|
||||
}
|
||||
|
||||
saveBtn.addEventListener('click', async () => {
|
||||
const raw = editor.value;
|
||||
const cfg = {};
|
||||
raw.split('\n').forEach(line => {
|
||||
line = line.trim();
|
||||
if (!line || line.startsWith('#')) return;
|
||||
const eq = line.indexOf('=');
|
||||
if (eq > 0) {
|
||||
const k = line.slice(0, eq).trim();
|
||||
let v = line.slice(eq + 1).trim();
|
||||
if ((v.startsWith('"') && v.endsWith('"')) || (v.startsWith("'") && v.endsWith("'"))) v = v.slice(1, -1);
|
||||
cfg[k] = v;
|
||||
}
|
||||
});
|
||||
try {
|
||||
await api('/config', { method: 'PUT', body: JSON.stringify(cfg) });
|
||||
showMsg('configMsg', 'Saved.', 'success');
|
||||
} catch (e) {
|
||||
showMsg('configMsg', e.message, 'error');
|
||||
}
|
||||
});
|
||||
|
||||
loadConfig();
|
||||
if (loadBtn) loadBtn.addEventListener('click', loadConfig);
|
||||
}
|
||||
|
||||
// ---- Firewall page (SQLite) ----
|
||||
if (pageId === 'firewall') {
|
||||
const tableBody = document.getElementById('firewallTable');
|
||||
const tableNameEl = document.getElementById('firewallTableName');
|
||||
const ruleLineEl = document.getElementById('firewallRuleLine');
|
||||
const addBtn = document.getElementById('firewallAddBtn');
|
||||
const applyBtn = document.getElementById('firewallApplyBtn');
|
||||
if (!tableBody) return;
|
||||
|
||||
async function loadFirewall() {
|
||||
tableBody.innerHTML = '<tr><td colspan="4">Loading…</td></tr>';
|
||||
try {
|
||||
const data = await api('/firewall');
|
||||
const rules = data.rules || [];
|
||||
if (rules.length === 0) {
|
||||
tableBody.innerHTML = '<tr><td colspan="4">No rules. Add one below.</td></tr>';
|
||||
return;
|
||||
}
|
||||
tableBody.innerHTML = rules.map(r => {
|
||||
const delBtn = '<button type="button" class="btn btn-danger" data-delete-id="' + r.id + '">Delete</button>';
|
||||
return '<tr><td>' + escapeHtml(r.table_name) + '</td><td class="value">' + escapeHtml(r.rule_line) + '</td><td>' + (r.enabled ? 'yes' : 'no') + '</td><td>' + delBtn + '</td></tr>';
|
||||
}).join('');
|
||||
tableBody.querySelectorAll('[data-delete-id]').forEach(btn => {
|
||||
btn.addEventListener('click', () => deleteRule(parseInt(btn.getAttribute('data-delete-id'), 10)));
|
||||
});
|
||||
} catch (e) {
|
||||
tableBody.innerHTML = '<tr><td colspan="4" class="error">' + escapeHtml(e.message) + '</td></tr>';
|
||||
}
|
||||
}
|
||||
|
||||
async function deleteRule(id) {
|
||||
if (!confirm('Delete this rule?')) return;
|
||||
try {
|
||||
await api('/firewall/' + id, { method: 'DELETE' });
|
||||
showMsg('firewallMsg', 'Rule deleted.', 'success');
|
||||
loadFirewall();
|
||||
} catch (e) {
|
||||
showMsg('firewallMsg', e.message, 'error');
|
||||
}
|
||||
}
|
||||
|
||||
addBtn.addEventListener('click', async () => {
|
||||
const table_name = (tableNameEl && tableNameEl.value) || 'filter';
|
||||
const rule_line = (ruleLineEl && ruleLineEl.value) || '';
|
||||
if (!rule_line.trim()) { showMsg('firewallMsg', 'Rule line required.', 'error'); return; }
|
||||
try {
|
||||
await api('/firewall', { method: 'POST', body: JSON.stringify({ table_name, rule_line }) });
|
||||
showMsg('firewallMsg', 'Rule added.', 'success');
|
||||
if (ruleLineEl) ruleLineEl.value = '';
|
||||
loadFirewall();
|
||||
} catch (e) {
|
||||
showMsg('firewallMsg', e.message, 'error');
|
||||
}
|
||||
});
|
||||
|
||||
applyBtn.addEventListener('click', async () => {
|
||||
try {
|
||||
await api('/firewall/apply', { method: 'POST' });
|
||||
showMsg('firewallMsg', 'Rules applied (iptables-restore).', 'success');
|
||||
} catch (e) {
|
||||
showMsg('firewallMsg', e.message, 'error');
|
||||
}
|
||||
});
|
||||
|
||||
loadFirewall();
|
||||
}
|
||||
|
||||
// ---- Routes page (SQLite) ----
|
||||
if (pageId === 'routes') {
|
||||
const tableBody = document.getElementById('routesTable');
|
||||
const liveEl = document.getElementById('routesLive');
|
||||
const destEl = document.getElementById('routeDest');
|
||||
const gwEl = document.getElementById('routeGw');
|
||||
const devEl = document.getElementById('routeDev');
|
||||
const metricEl = document.getElementById('routeMetric');
|
||||
const addBtn = document.getElementById('routeAddBtn');
|
||||
const applyBtn = document.getElementById('routesApplyBtn');
|
||||
const refreshLiveBtn = document.getElementById('routesRefreshLive');
|
||||
if (!tableBody) return;
|
||||
|
||||
async function loadRoutes() {
|
||||
tableBody.innerHTML = '<tr><td colspan="6">Loading…</td></tr>';
|
||||
try {
|
||||
const data = await api('/routes');
|
||||
const routes = data.routes || [];
|
||||
if (routes.length === 0) {
|
||||
tableBody.innerHTML = '<tr><td colspan="6">No routes. Add one below.</td></tr>';
|
||||
return;
|
||||
}
|
||||
tableBody.innerHTML = routes.map(r => {
|
||||
const delBtn = '<button type="button" class="btn btn-danger" data-delete-id="' + r.id + '">Delete</button>';
|
||||
return '<tr><td>' + escapeHtml(r.destination) + '</td><td>' + escapeHtml(r.gateway) + '</td><td>' + escapeHtml(r.dev) + '</td><td>' + (r.metric != null ? r.metric : '') + '</td><td>' + (r.enabled ? 'yes' : 'no') + '</td><td>' + delBtn + '</td></tr>';
|
||||
}).join('');
|
||||
tableBody.querySelectorAll('[data-delete-id]').forEach(btn => {
|
||||
btn.addEventListener('click', () => deleteRoute(parseInt(btn.getAttribute('data-delete-id'), 10)));
|
||||
});
|
||||
} catch (e) {
|
||||
tableBody.innerHTML = '<tr><td colspan="6" class="error">' + escapeHtml(e.message) + '</td></tr>';
|
||||
}
|
||||
}
|
||||
|
||||
async function loadLive() {
|
||||
if (!liveEl) return;
|
||||
liveEl.innerHTML = 'Loading…';
|
||||
try {
|
||||
const data = await api('/routes/live');
|
||||
const lines = data.routes || [];
|
||||
liveEl.innerHTML = lines.length ? lines.map(l => '<div>' + escapeHtml(l) + '</div>').join('') : '(none)';
|
||||
} catch (e) {
|
||||
liveEl.innerHTML = 'Error: ' + escapeHtml(e.message);
|
||||
}
|
||||
}
|
||||
|
||||
async function deleteRoute(id) {
|
||||
if (!confirm('Delete this route?')) return;
|
||||
try {
|
||||
await api('/routes/' + id, { method: 'DELETE' });
|
||||
showMsg('routesMsg', 'Route deleted.', 'success');
|
||||
loadRoutes();
|
||||
} catch (e) {
|
||||
showMsg('routesMsg', e.message, 'error');
|
||||
}
|
||||
}
|
||||
|
||||
addBtn.addEventListener('click', async () => {
|
||||
const destination = (destEl && destEl.value) || '';
|
||||
const gateway = (gwEl && gwEl.value) || '';
|
||||
const dev = (devEl && devEl.value) || '';
|
||||
const metric = metricEl && metricEl.value !== '' ? parseInt(metricEl.value, 10) : undefined;
|
||||
if (!destination.trim()) { showMsg('routesMsg', 'Destination required.', 'error'); return; }
|
||||
try {
|
||||
await api('/routes', { method: 'POST', body: JSON.stringify({ destination: destination.trim(), gateway: gateway.trim() || undefined, dev: dev.trim() || undefined, metric }) });
|
||||
showMsg('routesMsg', 'Route added.', 'success');
|
||||
if (destEl) destEl.value = '';
|
||||
if (gwEl) gwEl.value = '';
|
||||
if (devEl) devEl.value = '';
|
||||
if (metricEl) metricEl.value = '';
|
||||
loadRoutes();
|
||||
} catch (e) {
|
||||
showMsg('routesMsg', e.message, 'error');
|
||||
}
|
||||
});
|
||||
|
||||
applyBtn.addEventListener('click', async () => {
|
||||
try {
|
||||
await api('/routes/apply', { method: 'POST' });
|
||||
showMsg('routesMsg', 'Routes applied (ip route add).', 'success');
|
||||
loadLive();
|
||||
} catch (e) {
|
||||
showMsg('routesMsg', e.message, 'error');
|
||||
}
|
||||
});
|
||||
|
||||
if (refreshLiveBtn) refreshLiveBtn.addEventListener('click', loadLive);
|
||||
loadRoutes();
|
||||
loadLive();
|
||||
}
|
||||
|
||||
// ---- Users page ----
|
||||
if (pageId === 'users') {
|
||||
const tbody = document.getElementById('usersTable');
|
||||
const addBtn = document.getElementById('addUserBtn');
|
||||
if (!tbody) return;
|
||||
|
||||
async function loadUsers() {
|
||||
try {
|
||||
const data = await api('/users');
|
||||
tbody.innerHTML = data.users.map(u => {
|
||||
const del = u.username !== 'admin' ? '<button type="button" class="btn btn-danger" data-delete="' + escapeHtml(u.username) + '">Delete</button>' : '';
|
||||
return '<tr><td>' + escapeHtml(u.username) + '</td><td>' + escapeHtml(u.role) + '</td><td>' + del + '</td></tr>';
|
||||
}).join('');
|
||||
tbody.querySelectorAll('[data-delete]').forEach(btn => {
|
||||
btn.addEventListener('click', () => deleteUser(btn.getAttribute('data-delete')));
|
||||
});
|
||||
} catch (e) {
|
||||
showMsg('usersMsg', e.message, 'error');
|
||||
}
|
||||
}
|
||||
|
||||
async function deleteUser(username) {
|
||||
if (!confirm('Delete user "' + username + '"?')) return;
|
||||
try {
|
||||
await api('/users', { method: 'PUT', body: JSON.stringify({ action: 'delete', username }) });
|
||||
showMsg('usersMsg', 'User deleted.', 'success');
|
||||
loadUsers();
|
||||
} catch (e) {
|
||||
showMsg('usersMsg', e.message, 'error');
|
||||
}
|
||||
}
|
||||
|
||||
addBtn.addEventListener('click', () => {
|
||||
const username = prompt('Username:');
|
||||
if (!username) return;
|
||||
const password = prompt('Password:');
|
||||
if (!password) return;
|
||||
const role = (prompt('Role (admin or support):', 'support') || 'support').toLowerCase();
|
||||
if (role !== 'admin' && role !== 'support') {
|
||||
showMsg('usersMsg', 'Role must be admin or support.', 'error');
|
||||
return;
|
||||
}
|
||||
api('/users', { method: 'PUT', body: JSON.stringify({ action: 'add', username: username.trim(), password, role }) })
|
||||
.then(() => { showMsg('usersMsg', 'User added.', 'success'); loadUsers(); })
|
||||
.catch(e => showMsg('usersMsg', e.message, 'error'));
|
||||
});
|
||||
|
||||
loadUsers();
|
||||
}
|
||||
})();
|
||||
68
web/static/login.html
Normal file
68
web/static/login.html
Normal file
@@ -0,0 +1,68 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Login – Alpine 5G Router</title>
|
||||
<link rel="stylesheet" href="/static/style.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="login-wrap">
|
||||
<div class="login-card">
|
||||
<h1>Alpine 5G Router</h1>
|
||||
<p class="sub">Sign in to manage modem and network</p>
|
||||
<form id="loginForm">
|
||||
<div class="form-group">
|
||||
<label for="username">Username</label>
|
||||
<input type="text" id="username" name="username" autocomplete="username" required autofocus>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="password">Password</label>
|
||||
<input type="password" id="password" name="password" autocomplete="current-password" required>
|
||||
</div>
|
||||
<div id="loginError" class="login-error"></div>
|
||||
<button type="submit" class="btn btn-primary" id="submitBtn">Sign in</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
const form = document.getElementById('loginForm');
|
||||
const errorEl = document.getElementById('loginError');
|
||||
const submitBtn = document.getElementById('submitBtn');
|
||||
|
||||
function showError(msg) {
|
||||
errorEl.textContent = msg || 'Login failed';
|
||||
errorEl.classList.add('visible');
|
||||
}
|
||||
function hideError() {
|
||||
errorEl.textContent = '';
|
||||
errorEl.classList.remove('visible');
|
||||
}
|
||||
|
||||
form.addEventListener('submit', async (e) => {
|
||||
e.preventDefault();
|
||||
hideError();
|
||||
submitBtn.disabled = true;
|
||||
const username = document.getElementById('username').value.trim();
|
||||
const password = document.getElementById('password').value;
|
||||
try {
|
||||
const res = await fetch('/api/login', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ username, password }),
|
||||
});
|
||||
const data = await res.json().catch(() => ({}));
|
||||
if (res.ok) {
|
||||
window.location.href = '/dashboard';
|
||||
return;
|
||||
}
|
||||
showError(data.error || 'Invalid username or password');
|
||||
} catch (err) {
|
||||
showError('Network error');
|
||||
} finally {
|
||||
submitBtn.disabled = false;
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
443
web/static/style.css
Normal file
443
web/static/style.css
Normal file
@@ -0,0 +1,443 @@
|
||||
/* Alpine 5G Web GUI – shared styles */
|
||||
|
||||
:root {
|
||||
--bg: #0f1419;
|
||||
--surface: #1a2332;
|
||||
--border: #2d3a4d;
|
||||
--text: #e6edf3;
|
||||
--text-muted: #8b949e;
|
||||
--accent: #58a6ff;
|
||||
--accent-hover: #79b8ff;
|
||||
--danger: #f85149;
|
||||
--success: #3fb950;
|
||||
--radius: 8px;
|
||||
--font: system-ui, -apple-system, sans-serif;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: var(--font);
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
min-height: 100vh;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--accent);
|
||||
text-decoration: none;
|
||||
}
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* Login */
|
||||
.login-wrap {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.login-card {
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
padding: 2rem;
|
||||
width: 100%;
|
||||
max-width: 360px;
|
||||
}
|
||||
|
||||
.login-card h1 {
|
||||
margin: 0 0 0.5rem;
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.login-card .sub {
|
||||
color: var(--text-muted);
|
||||
font-size: 0.875rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
display: block;
|
||||
font-size: 0.875rem;
|
||||
margin-bottom: 0.35rem;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.form-group input {
|
||||
width: 100%;
|
||||
padding: 0.5rem 0.75rem;
|
||||
font-size: 1rem;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 6px;
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.form-group input:focus {
|
||||
outline: none;
|
||||
border-color: var(--accent);
|
||||
}
|
||||
|
||||
.btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0.5rem 1rem;
|
||||
font-size: 0.9375rem;
|
||||
font-weight: 500;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
transition: background 0.15s;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: var(--accent);
|
||||
color: #fff;
|
||||
width: 100%;
|
||||
padding: 0.6rem;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
.btn-primary:hover {
|
||||
background: var(--accent-hover);
|
||||
}
|
||||
.btn-primary:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: var(--border);
|
||||
color: var(--text);
|
||||
}
|
||||
.btn-secondary:hover {
|
||||
background: #3d4d66;
|
||||
}
|
||||
|
||||
.btn-danger {
|
||||
background: var(--danger);
|
||||
color: #fff;
|
||||
}
|
||||
.btn-danger:hover {
|
||||
background: #ff6b6b;
|
||||
}
|
||||
|
||||
.login-error {
|
||||
margin-top: 1rem;
|
||||
padding: 0.5rem 0.75rem;
|
||||
background: rgba(248, 81, 73, 0.15);
|
||||
border: 1px solid var(--danger);
|
||||
border-radius: 6px;
|
||||
color: var(--danger);
|
||||
font-size: 0.875rem;
|
||||
display: none;
|
||||
}
|
||||
.login-error.visible {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Dashboard */
|
||||
.dash {
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.dash-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
gap: 1rem;
|
||||
margin-bottom: 1.5rem;
|
||||
padding-bottom: 1rem;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.dash-header h1 {
|
||||
margin: 0;
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.user-badge {
|
||||
font-size: 0.875rem;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
.user-badge strong {
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.nav-tabs {
|
||||
display: flex;
|
||||
gap: 0.25rem;
|
||||
margin-bottom: 1rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.nav-tabs button {
|
||||
padding: 0.5rem 1rem;
|
||||
font-size: 0.875rem;
|
||||
background: transparent;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 6px;
|
||||
color: var(--text-muted);
|
||||
cursor: pointer;
|
||||
}
|
||||
.nav-tabs button:hover {
|
||||
color: var(--text);
|
||||
border-color: var(--text-muted);
|
||||
}
|
||||
.nav-tabs button.active {
|
||||
background: var(--surface);
|
||||
color: var(--accent);
|
||||
border-color: var(--accent);
|
||||
}
|
||||
|
||||
/* Nav links (per-page layout) */
|
||||
.nav-links {
|
||||
display: flex;
|
||||
gap: 0.25rem;
|
||||
margin-bottom: 1rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
padding: 0.5rem 1rem;
|
||||
font-size: 0.875rem;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 6px;
|
||||
color: var(--text-muted);
|
||||
background: transparent;
|
||||
text-decoration: none;
|
||||
}
|
||||
.nav-link:hover {
|
||||
color: var(--text);
|
||||
border-color: var(--text-muted);
|
||||
}
|
||||
.nav-link.active {
|
||||
background: var(--surface);
|
||||
color: var(--accent);
|
||||
border-color: var(--accent);
|
||||
}
|
||||
|
||||
.page-content {
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.panel {
|
||||
display: none;
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
padding: 1.25rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
.panel.active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.panel h2 {
|
||||
margin: 0 0 1rem;
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.status-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.status-item {
|
||||
padding: 0.75rem;
|
||||
background: var(--bg);
|
||||
border-radius: 6px;
|
||||
border: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.status-item label {
|
||||
display: block;
|
||||
font-size: 0.75rem;
|
||||
color: var(--text-muted);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.03em;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.status-item .value {
|
||||
font-family: ui-monospace, monospace;
|
||||
font-size: 0.875rem;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.log-view {
|
||||
font-family: ui-monospace, monospace;
|
||||
font-size: 0.8125rem;
|
||||
background: var(--bg);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 6px;
|
||||
padding: 1rem;
|
||||
max-height: 400px;
|
||||
overflow: auto;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.config-editor,
|
||||
.firewall-editor {
|
||||
font-family: ui-monospace, monospace;
|
||||
font-size: 0.8125rem;
|
||||
width: 100%;
|
||||
min-height: 280px;
|
||||
padding: 0.75rem;
|
||||
background: var(--bg);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 6px;
|
||||
color: var(--text);
|
||||
resize: vertical;
|
||||
}
|
||||
.config-editor:focus,
|
||||
.firewall-editor:focus {
|
||||
outline: none;
|
||||
border-color: var(--accent);
|
||||
}
|
||||
|
||||
.config-form {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
|
||||
gap: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.config-form .form-group {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.actions {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
margin-top: 1rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.msg {
|
||||
padding: 0.5rem 0.75rem;
|
||||
border-radius: 6px;
|
||||
font-size: 0.875rem;
|
||||
margin-top: 0.5rem;
|
||||
display: none;
|
||||
}
|
||||
.msg.visible {
|
||||
display: block;
|
||||
}
|
||||
.msg.success {
|
||||
background: rgba(63, 185, 80, 0.15);
|
||||
border: 1px solid var(--success);
|
||||
color: var(--success);
|
||||
}
|
||||
.msg.error {
|
||||
background: rgba(248, 81, 73, 0.15);
|
||||
border: 1px solid var(--danger);
|
||||
color: var(--danger);
|
||||
}
|
||||
|
||||
.table-wrap {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
th, td {
|
||||
padding: 0.5rem 0.75rem;
|
||||
text-align: left;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
th {
|
||||
color: var(--text-muted);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.routes-list {
|
||||
font-family: ui-monospace, monospace;
|
||||
font-size: 0.8125rem;
|
||||
background: var(--bg);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 6px;
|
||||
padding: 1rem;
|
||||
max-height: 300px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.routes-list div {
|
||||
padding: 0.25rem 0;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
.routes-list div:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.form-row {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
}
|
||||
.form-row input,
|
||||
.form-row select {
|
||||
padding: 0.4rem 0.5rem;
|
||||
font-size: 0.875rem;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 6px;
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
}
|
||||
.form-row input:focus,
|
||||
.form-row select:focus {
|
||||
outline: none;
|
||||
border-color: var(--accent);
|
||||
}
|
||||
.form-row input[type="number"] {
|
||||
width: 5rem;
|
||||
}
|
||||
|
||||
.status-section {
|
||||
font-size: 0.9375rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-muted);
|
||||
margin: 1.25rem 0 0.5rem;
|
||||
}
|
||||
|
||||
.speedtest-result {
|
||||
font-family: ui-monospace, monospace;
|
||||
font-size: 0.875rem;
|
||||
background: var(--bg);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 6px;
|
||||
padding: 0.75rem 1rem;
|
||||
min-height: 2rem;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
Reference in New Issue
Block a user