This commit is contained in:
2026-05-18 19:40:48 +05:00
parent 3639bc22f4
commit b3fdf60b32
5 changed files with 820 additions and 268 deletions

View File

@@ -13,10 +13,12 @@ const runMsg = $("#run-msg");
const runningIndicator = $("#running-indicator");
const currentStep = $("#current-step");
const lastRunEl = $("#last-run");
const xray2Section = $("#xray2-data-section");
const POLL_INTERVAL = 10000;
let pollTimer = null;
let xray2Visible = false;
function showScreen(screen) {
loginScreen.classList.add("hidden");
@@ -27,25 +29,46 @@ function showScreen(screen) {
function formatTime(iso) {
if (!iso) return "";
const d = new Date(iso);
return d.toLocaleString();
return d.toLocaleString("ru-RU", {
day: "2-digit",
month: "2-digit",
year: "numeric",
hour: "2-digit",
minute: "2-digit",
second: "2-digit",
});
}
const stepLabels = {
initializing: "Иніціализація...",
novavps_fetching: "Полученіе данныхъ NOVAVPS...",
xray1_parsing: "Чтеніе панели Xray 1...",
xray1_syncing: "Синхронизація Xray 1...",
xray2_parsing: "Чтеніе панели Xray 2...",
xray2_syncing: "Синхронизація Xray 2...",
done: "Завершено",
novavps_url_missing: "Ошибка: ссылка NOVAVPS не задана",
no_xray_panels: "Ошибка: нѣтъ настроенныхъ панелей Xray",
fatal: "Критическая ошибка",
};
function updatePanelStatus(prefix, data) {
const badge = $(`#${prefix}-status`);
const detail = $(`#${prefix}-detail`);
const time = $(`#${prefix}-time`);
badge.textContent = data.status;
const statusMap = { idle: "ожиданіе", success: "успѣшно", error: "ошибка" };
badge.textContent = statusMap[data.status] || data.status;
badge.className = "status-badge " + data.status;
let detailText = "";
if (prefix === "novavps" && data.count != null) {
detailText = `${data.count} connections`;
detailText = `${data.count} подключеній`;
} else if (data.outboundsCount != null) {
detailText = `${data.outboundsCount} outbounds`;
if (data.synced) detailText += " (synced)";
detailText = `${data.outboundsCount} исходящихъ`;
if (data.synced) detailText += " · синхр.";
}
if (data.error) detailText += (detailText ? " | " : "") + data.error;
if (data.error) detailText += (detailText ? " · " : "") + data.error;
detail.textContent = detailText;
time.textContent = formatTime(data.timestamp);
}
@@ -63,26 +86,17 @@ async function fetchStatus() {
const isRunning = data.status === "running";
runBtn.disabled = isRunning;
runningIndicator.classList.toggle("hidden", !isRunning);
const stepLabels = {
initializing: "Initializing...",
novavps_fetching: "Fetching Novavps data...",
xray1_parsing: "Parsing Xray 1...",
xray1_syncing: "Syncing Xray 1...",
xray2_parsing: "Parsing Xray 2...",
xray2_syncing: "Syncing Xray 2...",
done: "Completed",
novavps_url_missing: "Error: NOVAVPS URL not set",
no_xray_panels: "Error: No Xray panels configured",
fatal: "Fatal error",
};
currentStep.textContent = stepLabels[data.currentStep] || data.currentStep;
updatePanelStatus("novavps", data.novavps);
updatePanelStatus("xray1", data.xray1);
updatePanelStatus("xray2", data.xray2);
lastRunEl.textContent = data.lastRun ? formatTime(data.lastRun) : "Never";
lastRunEl.textContent = data.lastRun ? formatTime(data.lastRun) : "Никогда";
if (data.xray2.status !== "idle" || data.xray2.outboundsCount > 0) {
xray2Section.classList.remove("hidden");
}
} catch (err) {
console.error("Status fetch error:", err);
}
@@ -103,11 +117,90 @@ async function fetchConfig() {
}
}
async function fetchNovavpsData() {
try {
const res = await fetch("/api/data/novavps");
if (res.status === 401) return;
const data = await res.json();
renderNovavpsTable(data);
$("#novavps-data-count").textContent = data.length;
} catch {}
}
async function fetchXrayData(panel, syncedTags) {
try {
const res = await fetch("/api/data/xray");
if (res.status === 401) return;
const data = await res.json();
if (panel === "xray1") {
renderXrayTable("xray1", data, syncedTags || []);
$("#xray1-data-count").textContent = data.length;
} else if (panel === "xray2") {
renderXrayTable("xray2", data, syncedTags || []);
$("#xray2-data-count").textContent = data.length;
}
} catch {}
}
function renderNovavpsTable(connections) {
const tbody = $("#novavps-tbody");
if (!connections.length) {
tbody.innerHTML = '<tr><td colspan="5" style="color:var(--text-muted);text-align:center;padding:2rem;">Нѣтъ данныхъ</td></tr>';
return;
}
tbody.innerHTML = connections
.map((c) => {
const name = escapeHtml(c.name || "—");
const proto = escapeHtml(c.protocol || "—");
const addr = escapeHtml(c.address || "—");
const port = escapeHtml(c.port || "—");
const sec = escapeHtml(c.security || "—");
return `<tr><td>${name}</td><td>${proto}</td><td>${addr}</td><td>${port}</td><td>${sec}</td></tr>`;
})
.join("");
}
function renderXrayTable(prefix, outbounds, syncedTags) {
const tbody = $(`#${prefix}-tbody`);
if (!outbounds.length) {
tbody.innerHTML = '<tr><td colspan="5" style="color:var(--text-muted);text-align:center;padding:2rem;">Нѣтъ данныхъ</td></tr>';
return;
}
tbody.innerHTML = outbounds
.map((o) => {
const tag = escapeHtml(o.remark || o.tag || "—");
const proto = escapeHtml(o.protocol || "—");
const addr = escapeHtml(o.address || "—");
const port = escapeHtml(o.port || "—");
const isSynced = syncedTags.includes(tag);
const syncBadge = isSynced
? '<span class="synced-badge yes">да</span>'
: '<span class="synced-badge no">—</span>';
return `<tr><td>${tag}</td><td>${proto}</td><td>${addr}</td><td>${port}</td><td>${syncBadge}</td></tr>`;
})
.join("");
}
function escapeHtml(str) {
const div = document.createElement("div");
div.textContent = str;
return div.innerHTML;
}
function startPolling() {
fetchStatus();
fetchConfig();
fetchNovavpsData();
fetchXrayData("xray1", []);
fetchXrayData("xray2", []);
if (pollTimer) clearInterval(pollTimer);
pollTimer = setInterval(fetchStatus, POLL_INTERVAL);
pollTimer = setInterval(() => {
fetchStatus();
fetchNovavpsData();
fetchXrayData("xray1", []);
fetchXrayData("xray2", []);
}, POLL_INTERVAL);
}
function stopPolling() {
@@ -124,6 +217,13 @@ function showMsg(el, text, type) {
setTimeout(() => el.classList.add("hidden"), 5000);
}
window.toggleSection = function(id) {
const content = $(`#${id}`);
const arrow = $(`#${id}-arrow`);
content.classList.toggle("collapsed");
arrow.classList.toggle("collapsed");
};
loginForm.addEventListener("submit", async (e) => {
e.preventDefault();
loginError.classList.add("hidden");
@@ -139,14 +239,14 @@ loginForm.addEventListener("submit", async (e) => {
});
const data = await res.json();
if (!res.ok) {
loginError.textContent = data.error || "Login failed";
loginError.textContent = data.error || "Входъ невозможенъ";
loginError.classList.remove("hidden");
return;
}
showScreen(dashboardScreen);
startPolling();
} catch (err) {
loginError.textContent = "Network error";
loginError.textContent = "Ошибка сѣти";
loginError.classList.remove("hidden");
}
});
@@ -168,12 +268,12 @@ saveConfigBtn.addEventListener("click", async () => {
});
const data = await res.json();
if (!res.ok) {
showMsg(configMsg, data.error || "Save failed", "error");
showMsg(configMsg, data.error || "Ошибка сохраненія", "error");
return;
}
showMsg(configMsg, "Saved", "success");
showMsg(configMsg, "Сохранено", "success");
} catch (err) {
showMsg(configMsg, "Network error", "error");
showMsg(configMsg, "Ошибка сѣти", "error");
}
});
@@ -183,17 +283,16 @@ runBtn.addEventListener("click", async () => {
const res = await fetch("/api/run", { method: "POST" });
const data = await res.json();
if (!res.ok) {
showMsg(runMsg, data.error || "Failed to start", "error");
showMsg(runMsg, data.error || "Не удалось запустить", "error");
return;
}
showMsg(runMsg, "Parser started", "success");
showMsg(runMsg, "Парсеръ запущенъ", "success");
fetchStatus();
} catch (err) {
showMsg(runMsg, "Network error", "error");
showMsg(runMsg, "Ошибка сѣти", "error");
}
});
// Check if already logged in
fetch("/api/status")
.then((res) => {
if (res.ok) {

View File

@@ -1,85 +1,178 @@
<!DOCTYPE html>
<html lang="en">
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>VPN Parser</title>
<title>VPN Parser — Панель управленія</title>
<link rel="stylesheet" href="/style.css">
</head>
<body>
<div id="app">
<div id="login-screen" class="screen">
<div class="login-box">
<h1>VPN Parser</h1>
<div class="login-card">
<div class="login-header">
<div class="logo-icon"></div>
<h1>VPN Parser</h1>
</div>
<form id="login-form">
<div class="form-group">
<label for="username">Username</label>
<div class="field">
<label for="username">Имя пользователя</label>
<input type="text" id="username" autocomplete="username" required>
</div>
<div class="form-group">
<label for="password">Password</label>
<div class="field">
<label for="password">Пароль</label>
<input type="password" id="password" autocomplete="current-password" required>
</div>
<button type="submit">Login</button>
<div id="login-error" class="error hidden"></div>
<button type="submit" class="btn btn-primary btn-full">Войти</button>
<div id="login-error" class="error-msg hidden"></div>
</form>
</div>
</div>
<div id="dashboard-screen" class="screen hidden">
<header>
<h1>VPN Parser Dashboard</h1>
<button id="logout-btn">Logout</button>
<header class="topbar">
<div class="topbar-left">
<div class="logo-icon small"></div>
<span class="topbar-title">VPN Parser — Панель управленія</span>
</div>
<button id="logout-btn" class="btn btn-ghost">Выходъ</button>
</header>
<main>
<section class="config-section">
<h2>Configuration</h2>
<main class="dashboard">
<section class="card config-card">
<h2>Настройки</h2>
<div class="config-row">
<label for="novavps-url">NOVAVPS URL</label>
<label for="novavps-url">Ссылка NOVAVPS</label>
<input type="text" id="novavps-url" placeholder="https://novavps.app/s/...">
<button id="save-config-btn">Save</button>
<button id="save-config-btn" class="btn btn-primary">Сохранить</button>
</div>
<div id="config-msg" class="msg hidden"></div>
</section>
<section class="actions-section">
<button id="run-btn">Update Now</button>
<section class="card actions-card">
<button id="run-btn" class="btn btn-success btn-lg">
<span class="btn-icon">⟳</span>
Обновить сейчасъ
</button>
<div id="run-msg" class="msg hidden"></div>
</section>
<section id="running-indicator" class="running-indicator hidden">
<section id="running-indicator" class="card running-card hidden">
<div class="spinner"></div>
<span id="current-step">Initializing...</span>
<div class="running-text">
<span class="running-label">Выполненіе</span>
<span id="current-step" class="running-step">Иніціализація...</span>
</div>
</section>
<section class="status-section">
<h2>Status</h2>
<h2 class="section-title">Статусъ панелей</h2>
<div class="status-grid">
<div class="status-card" id="novavps-card">
<h3>Novavps</h3>
<div class="status-badge" id="novavps-status">idle</div>
<div class="status-card-header">
<span class="panel-icon novavps-icon"></span>
<h3>Novavps</h3>
</div>
<div class="status-badge" id="novavps-status">ожиданіе</div>
<div class="status-detail" id="novavps-detail"></div>
<div class="status-time" id="novavps-time"></div>
</div>
<div class="status-card" id="xray1-card">
<h3>Xray 1</h3>
<div class="status-badge" id="xray1-status">idle</div>
<div class="status-card-header">
<span class="panel-icon xray-icon"></span>
<h3>Xray 1</h3>
</div>
<div class="status-badge" id="xray1-status">ожиданіе</div>
<div class="status-detail" id="xray1-detail"></div>
<div class="status-time" id="xray1-time"></div>
</div>
<div class="status-card" id="xray2-card">
<h3>Xray 2</h3>
<div class="status-badge" id="xray2-status">idle</div>
<div class="status-card-header">
<span class="panel-icon xray-icon"></span>
<h3>Xray 2</h3>
</div>
<div class="status-badge" id="xray2-status">ожиданіе</div>
<div class="status-detail" id="xray2-detail"></div>
<div class="status-time" id="xray2-time"></div>
</div>
</div>
</section>
<section class="card data-section" id="novavps-data-section">
<div class="data-section-header" onclick="toggleSection('novavps-data')">
<h2>Подключенія Novavps</h2>
<span class="data-count" id="novavps-data-count"></span>
<span class="collapse-arrow" id="novavps-data-arrow">▼</span>
</div>
<div class="data-content" id="novavps-data">
<div class="table-wrapper">
<table class="data-table" id="novavps-table">
<thead>
<tr>
<th>Имя</th>
<th>Протоколъ</th>
<th>Адресъ</th>
<th>Портъ</th>
<th>Безопасность</th>
</tr>
</thead>
<tbody id="novavps-tbody"></tbody>
</table>
</div>
</div>
</section>
<section class="card data-section" id="xray1-data-section">
<div class="data-section-header" onclick="toggleSection('xray1-data')">
<h2>Исходящія Xray 1</h2>
<span class="data-count" id="xray1-data-count"></span>
<span class="collapse-arrow" id="xray1-data-arrow">▼</span>
</div>
<div class="data-content" id="xray1-data">
<div class="table-wrapper">
<table class="data-table" id="xray1-table">
<thead>
<tr>
<th>Мѣтка</th>
<th>Протоколъ</th>
<th>Адресъ</th>
<th>Портъ</th>
<th>Синхр.</th>
</tr>
</thead>
<tbody id="xray1-tbody"></tbody>
</table>
</div>
</div>
</section>
<section class="card data-section hidden" id="xray2-data-section">
<div class="data-section-header" onclick="toggleSection('xray2-data')">
<h2>Исходящія Xray 2</h2>
<span class="data-count" id="xray2-data-count"></span>
<span class="collapse-arrow" id="xray2-data-arrow">▼</span>
</div>
<div class="data-content" id="xray2-data">
<div class="table-wrapper">
<table class="data-table" id="xray2-table">
<thead>
<tr>
<th>Мѣтка</th>
<th>Протоколъ</th>
<th>Адресъ</th>
<th>Портъ</th>
<th>Синхр.</th>
</tr>
</thead>
<tbody id="xray2-tbody"></tbody>
</table>
</div>
</div>
</section>
<section class="last-run-section">
<h2>Last Run</h2>
<div id="last-run">Never</div>
<span class="last-run-label">Послѣдній запускъ:</span>
<span id="last-run" class="last-run-value">Никогда</span>
</section>
</main>
</div>

View File

@@ -4,15 +4,54 @@
box-sizing: border-box;
}
:root {
--bg-primary: #0a0e1a;
--bg-secondary: #111827;
--bg-card: rgba(17, 24, 39, 0.7);
--bg-card-hover: rgba(17, 24, 39, 0.85);
--border-color: rgba(255, 255, 255, 0.08);
--border-active: rgba(99, 132, 255, 0.4);
--text-primary: #f1f5f9;
--text-secondary: #94a3b8;
--text-muted: #475569;
--accent-blue: #6366f1;
--accent-green: #22c55e;
--accent-red: #ef4444;
--accent-amber: #f59e0b;
--accent-cyan: #06b6d4;
--gradient-primary: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #a78bfa 100%);
--gradient-success: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
--shadow-card: 0 4px 24px rgba(0, 0, 0, 0.3);
--shadow-glow: 0 0 30px rgba(99, 102, 241, 0.15);
--radius: 12px;
--radius-sm: 8px;
--radius-xs: 6px;
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
background: #0f1117;
color: #e1e4e8;
font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
background: var(--bg-primary);
color: var(--text-primary);
min-height: 100vh;
line-height: 1.5;
}
body::before {
content: "";
position: fixed;
top: 0;
left: 0;
right: 0;
height: 400px;
background: radial-gradient(ellipse at 50% 0%, rgba(99, 102, 241, 0.12) 0%, transparent 70%);
pointer-events: none;
z-index: 0;
}
.screen {
min-height: 100vh;
position: relative;
z-index: 1;
}
.hidden {
@@ -24,116 +63,228 @@ body {
display: flex;
align-items: center;
justify-content: center;
}
.login-box {
background: #161b22;
padding: 2rem;
border-radius: 12px;
}
.login-card {
background: var(--bg-card);
backdrop-filter: blur(20px);
border: 1px solid var(--border-color);
border-radius: var(--radius);
padding: 2.5rem;
width: 100%;
max-width: 360px;
border: 1px solid #30363d;
max-width: 400px;
box-shadow: var(--shadow-card);
}
.login-box h1 {
text-align: center;
margin-bottom: 1.5rem;
font-size: 1.5rem;
}
.form-group {
margin-bottom: 1rem;
}
.form-group label {
display: block;
margin-bottom: 0.4rem;
font-size: 0.875rem;
color: #8b949e;
}
.form-group input {
width: 100%;
padding: 0.6rem 0.8rem;
background: #0d1117;
border: 1px solid #30363d;
border-radius: 6px;
color: #e1e4e8;
font-size: 1rem;
}
.form-group input:focus {
outline: none;
border-color: #58a6ff;
}
.login-box button {
width: 100%;
padding: 0.7rem;
background: #238636;
color: #fff;
border: none;
border-radius: 6px;
font-size: 1rem;
cursor: pointer;
margin-top: 0.5rem;
}
.login-box button:hover {
background: #2ea043;
}
.error {
color: #f85149;
font-size: 0.875rem;
margin-top: 0.75rem;
text-align: center;
}
/* Dashboard */
header {
.login-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 2rem;
background: #161b22;
border-bottom: 1px solid #30363d;
}
header h1 {
font-size: 1.25rem;
}
#logout-btn {
padding: 0.5rem 1rem;
background: transparent;
border: 1px solid #30363d;
border-radius: 6px;
color: #8b949e;
cursor: pointer;
}
#logout-btn:hover {
border-color: #f85149;
color: #f85149;
}
main {
padding: 2rem;
max-width: 900px;
margin: 0 auto;
}
section {
gap: 0.75rem;
margin-bottom: 2rem;
}
section h2 {
.login-header h1 {
font-size: 1.5rem;
font-weight: 700;
background: var(--gradient-primary);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.logo-icon {
width: 36px;
height: 36px;
background: var(--gradient-primary);
border-radius: var(--radius-xs);
display: flex;
align-items: center;
justify-content: center;
}
.logo-icon::after {
content: "⚡";
font-size: 18px;
filter: brightness(2);
}
.logo-icon.small {
width: 28px;
height: 28px;
border-radius: var(--radius-xs);
}
.logo-icon.small::after {
font-size: 14px;
}
.field {
margin-bottom: 1.25rem;
}
.field label {
display: block;
margin-bottom: 0.4rem;
font-size: 0.8125rem;
color: var(--text-secondary);
font-weight: 500;
}
.field input {
width: 100%;
padding: 0.7rem 0.9rem;
background: rgba(0, 0, 0, 0.3);
border: 1px solid var(--border-color);
border-radius: var(--radius-xs);
color: var(--text-primary);
font-size: 0.9375rem;
transition: border-color 0.2s, box-shadow 0.2s;
}
.field input:focus {
outline: none;
border-color: var(--accent-blue);
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}
.error-msg {
color: var(--accent-red);
font-size: 0.8125rem;
margin-top: 1rem;
text-align: center;
padding: 0.5rem;
background: rgba(239, 68, 68, 0.1);
border-radius: var(--radius-xs);
}
/* Buttons */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.6rem 1.2rem;
border: none;
border-radius: var(--radius-xs);
font-size: 0.875rem;
font-weight: 600;
cursor: pointer;
transition: all 0.2s;
white-space: nowrap;
}
.btn-primary {
background: var(--gradient-primary);
color: #fff;
}
.btn-primary:hover {
filter: brightness(1.1);
box-shadow: 0 0 20px rgba(99, 102, 241, 0.3);
}
.btn-success {
background: var(--gradient-success);
color: #fff;
}
.btn-success:hover {
filter: brightness(1.1);
box-shadow: 0 0 20px rgba(34, 197, 94, 0.3);
}
.btn-success:disabled {
opacity: 0.5;
cursor: not-allowed;
filter: none;
box-shadow: none;
}
.btn-ghost {
background: transparent;
color: var(--text-secondary);
border: 1px solid var(--border-color);
}
.btn-ghost:hover {
border-color: var(--accent-red);
color: var(--accent-red);
}
.btn-full {
width: 100%;
padding: 0.75rem;
}
.btn-lg {
padding: 0.85rem 1.75rem;
font-size: 1rem;
color: #8b949e;
margin-bottom: 1rem;
}
.btn-icon {
font-size: 1.1em;
}
/* Topbar */
.topbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.85rem 2rem;
background: rgba(17, 24, 39, 0.8);
backdrop-filter: blur(12px);
border-bottom: 1px solid var(--border-color);
position: sticky;
top: 0;
z-index: 100;
}
.topbar-left {
display: flex;
align-items: center;
gap: 0.75rem;
}
.topbar-title {
font-size: 1rem;
font-weight: 600;
background: var(--gradient-primary);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
/* Dashboard */
.dashboard {
padding: 1.5rem 2rem 3rem;
max-width: 1100px;
margin: 0 auto;
}
/* Cards */
.card {
background: var(--bg-card);
backdrop-filter: blur(12px);
border: 1px solid var(--border-color);
border-radius: var(--radius);
padding: 1.5rem;
margin-bottom: 1.25rem;
box-shadow: var(--shadow-card);
transition: border-color 0.2s;
}
.card:hover {
border-color: rgba(255, 255, 255, 0.12);
}
.card h2 {
font-size: 0.8125rem;
color: var(--text-secondary);
text-transform: uppercase;
letter-spacing: 0.05em;
letter-spacing: 0.08em;
font-weight: 600;
margin-bottom: 1rem;
}
/* Config */
@@ -144,155 +295,371 @@ section h2 {
}
.config-row label {
font-size: 0.875rem;
color: #8b949e;
font-size: 0.8125rem;
color: var(--text-secondary);
white-space: nowrap;
font-weight: 500;
}
.config-row input {
flex: 1;
padding: 0.5rem 0.75rem;
background: #0d1117;
border: 1px solid #30363d;
border-radius: 6px;
color: #e1e4e8;
padding: 0.6rem 0.8rem;
background: rgba(0, 0, 0, 0.3);
border: 1px solid var(--border-color);
border-radius: var(--radius-xs);
color: var(--text-primary);
font-size: 0.875rem;
transition: border-color 0.2s;
}
.config-row input:focus {
outline: none;
border-color: #58a6ff;
}
.config-row button {
padding: 0.5rem 1rem;
background: #1f6feb;
color: #fff;
border: none;
border-radius: 6px;
cursor: pointer;
white-space: nowrap;
}
.config-row button:hover {
background: #388bfd;
border-color: var(--accent-blue);
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}
/* Actions */
#run-btn {
padding: 0.75rem 1.5rem;
background: #238636;
color: #fff;
border: none;
border-radius: 6px;
font-size: 1rem;
cursor: pointer;
}
#run-btn:hover:not(:disabled) {
background: #2ea043;
}
#run-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
.actions-card {
display: flex;
align-items: center;
gap: 1rem;
}
/* Messages */
.msg {
margin-top: 0.5rem;
font-size: 0.875rem;
font-size: 0.8125rem;
padding: 0.4rem 0.75rem;
border-radius: var(--radius-xs);
}
.msg.success {
color: #3fb950;
color: var(--accent-green);
background: rgba(34, 197, 94, 0.1);
}
.msg.error {
color: #f85149;
color: var(--accent-red);
background: rgba(239, 68, 68, 0.1);
}
/* Running indicator */
.running-indicator {
.running-card {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 1rem;
background: #161b22;
border: 1px solid #30363d;
border-radius: 8px;
gap: 1rem;
padding: 1rem 1.5rem;
border-color: var(--border-active);
box-shadow: var(--shadow-glow);
}
.spinner {
width: 20px;
height: 20px;
border: 2px solid #30363d;
border-top-color: #58a6ff;
width: 24px;
height: 24px;
border: 2.5px solid var(--border-color);
border-top-color: var(--accent-blue);
border-radius: 50%;
animation: spin 0.8s linear infinite;
animation: spin 0.7s linear infinite;
flex-shrink: 0;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
/* Status grid */
.running-text {
display: flex;
flex-direction: column;
gap: 0.15rem;
}
.running-label {
font-size: 0.75rem;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.running-step {
font-size: 0.9375rem;
color: var(--text-primary);
font-weight: 500;
}
/* Status section */
.status-section {
margin-bottom: 1.25rem;
}
.section-title {
font-size: 0.8125rem;
color: var(--text-secondary);
text-transform: uppercase;
letter-spacing: 0.08em;
font-weight: 600;
margin-bottom: 1rem;
padding-left: 0.25rem;
}
.status-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 1rem;
}
.status-card {
background: #161b22;
border: 1px solid #30363d;
border-radius: 8px;
padding: 1rem;
background: var(--bg-card);
backdrop-filter: blur(12px);
border: 1px solid var(--border-color);
border-radius: var(--radius);
padding: 1.25rem;
box-shadow: var(--shadow-card);
transition: border-color 0.2s, transform 0.2s;
}
.status-card h3 {
font-size: 0.875rem;
color: #8b949e;
.status-card:hover {
border-color: rgba(255, 255, 255, 0.12);
transform: translateY(-2px);
}
.status-card-header {
display: flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 0.75rem;
}
.status-card-header h3 {
font-size: 0.9375rem;
font-weight: 600;
color: var(--text-primary);
}
.panel-icon {
width: 8px;
height: 8px;
border-radius: 50%;
}
.novavps-icon {
background: var(--accent-cyan);
box-shadow: 0 0 8px rgba(6, 182, 212, 0.5);
}
.xray-icon {
background: var(--accent-amber);
box-shadow: 0 0 8px rgba(245, 158, 11, 0.5);
}
.status-badge {
display: inline-block;
padding: 0.25rem 0.5rem;
border-radius: 4px;
font-size: 0.75rem;
font-weight: 600;
padding: 0.2rem 0.6rem;
border-radius: 999px;
font-size: 0.6875rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: 0.5rem;
}
.status-badge.idle {
background: #30363d;
color: #8b949e;
background: rgba(148, 163, 184, 0.15);
color: var(--text-secondary);
}
.status-badge.success {
background: #122d1a;
color: #3fb950;
background: rgba(34, 197, 94, 0.15);
color: var(--accent-green);
}
.status-badge.error {
background: #2d1215;
color: #f85149;
background: rgba(239, 68, 68, 0.15);
color: var(--accent-red);
}
.status-detail {
font-size: 0.875rem;
color: #c9d1d9;
color: var(--text-secondary);
margin-bottom: 0.25rem;
}
.status-time {
font-size: 0.75rem;
color: #484f58;
color: var(--text-muted);
}
/* Data sections */
.data-section {
padding: 0;
overflow: hidden;
}
.data-section-header {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 1.25rem 1.5rem;
cursor: pointer;
user-select: none;
transition: background 0.15s;
}
.data-section-header:hover {
background: rgba(255, 255, 255, 0.02);
}
.data-section-header h2 {
margin: 0;
flex: 1;
}
.data-count {
font-size: 0.75rem;
color: var(--text-muted);
background: rgba(255, 255, 255, 0.05);
padding: 0.15rem 0.5rem;
border-radius: 999px;
}
.collapse-arrow {
font-size: 0.625rem;
color: var(--text-muted);
transition: transform 0.2s;
}
.collapse-arrow.collapsed {
transform: rotate(-90deg);
}
.data-content {
max-height: 1000px;
overflow: hidden;
transition: max-height 0.3s ease;
}
.data-content.collapsed {
max-height: 0;
}
.table-wrapper {
overflow-x: auto;
border-top: 1px solid var(--border-color);
}
.data-table {
width: 100%;
border-collapse: collapse;
font-size: 0.8125rem;
}
.data-table thead th {
padding: 0.75rem 1rem;
text-align: left;
font-weight: 600;
color: var(--text-secondary);
font-size: 0.6875rem;
text-transform: uppercase;
letter-spacing: 0.06em;
background: rgba(0, 0, 0, 0.2);
border-bottom: 1px solid var(--border-color);
white-space: nowrap;
}
.data-table tbody td {
padding: 0.65rem 1rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.03);
color: var(--text-primary);
white-space: nowrap;
}
.data-table tbody tr {
transition: background 0.15s;
}
.data-table tbody tr:hover {
background: rgba(255, 255, 255, 0.03);
}
.data-table tbody tr:last-child td {
border-bottom: none;
}
.synced-badge {
display: inline-flex;
align-items: center;
gap: 0.3rem;
padding: 0.15rem 0.5rem;
border-radius: 999px;
font-size: 0.6875rem;
font-weight: 600;
}
.synced-badge.yes {
background: rgba(34, 197, 94, 0.15);
color: var(--accent-green);
}
.synced-badge.no {
color: var(--text-muted);
}
.synced-badge::before {
content: "";
width: 6px;
height: 6px;
border-radius: 50%;
}
.synced-badge.yes::before {
background: var(--accent-green);
}
.synced-badge.no::before {
background: var(--text-muted);
}
/* Last run */
#last-run {
font-size: 0.875rem;
color: #c9d1d9;
.last-run-section {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 1rem 0;
font-size: 0.8125rem;
}
.last-run-label {
color: var(--text-muted);
}
.last-run-value {
color: var(--text-secondary);
font-weight: 500;
}
/* Responsive */
@media (max-width: 768px) {
.dashboard {
padding: 1rem;
}
.topbar {
padding: 0.75rem 1rem;
}
.config-row {
flex-direction: column;
align-items: stretch;
}
.status-grid {
grid-template-columns: 1fr;
}
.data-table {
font-size: 0.75rem;
}
.data-table thead th,
.data-table tbody td {
padding: 0.5rem 0.6rem;
}
}

View File

@@ -13,6 +13,7 @@ export interface PanelStatus {
count?: number;
outboundsCount?: number;
synced?: boolean;
syncedOutbounds?: string[];
timestamp: string | null;
error: string | null;
}
@@ -38,8 +39,8 @@ const defaultState: AppState = {
status: "idle",
currentStep: "",
novavps: { status: "idle", count: 0, timestamp: null, error: null },
xray1: { status: "idle", outboundsCount: 0, synced: false, timestamp: null, error: null },
xray2: { status: "idle", outboundsCount: 0, synced: false, timestamp: null, error: null },
xray1: { status: "idle", outboundsCount: 0, synced: false, syncedOutbounds: [], timestamp: null, error: null },
xray2: { status: "idle", outboundsCount: 0, synced: false, syncedOutbounds: [], timestamp: null, error: null },
};
async function ensureDataDir(): Promise<void> {
@@ -89,8 +90,8 @@ export async function resetState(): Promise<AppState> {
status: "running",
currentStep: "initializing",
novavps: { status: "idle", count: 0, timestamp: null, error: null },
xray1: { status: "idle", outboundsCount: 0, synced: false, timestamp: null, error: null },
xray2: { status: "idle", outboundsCount: 0, synced: false, timestamp: null, error: null },
xray1: { status: "idle", outboundsCount: 0, synced: false, syncedOutbounds: [], timestamp: null, error: null },
xray2: { status: "idle", outboundsCount: 0, synced: false, syncedOutbounds: [], timestamp: null, error: null },
};
await saveState(state);
return state;

View File

@@ -23,7 +23,7 @@ const app = express();
const PORT = parseInt(process.env.PORT || "3000", 10);
const SESSION_SECRET = process.env.SESSION_SECRET || crypto.randomBytes(32).toString("hex");
const SESSION_TTL = 60 * 60 * 1000; // 1 hour
const SESSION_TTL = 60 * 60 * 1000;
const sessions = new Map<string, { createdAt: number; lastAccess: number }>();
@@ -157,28 +157,21 @@ async function runParser(): Promise<void> {
try {
const xray = await parseXrayPanel(panel.url, panel.username, panel.password);
if (panel.label === "xray1") {
state.xray1 = {
status: "success",
outboundsCount: xray.length,
synced: false,
timestamp: new Date().toISOString(),
error: null,
};
} else {
state.xray2 = {
status: "success",
outboundsCount: xray.length,
synced: false,
timestamp: new Date().toISOString(),
error: null,
};
}
const panelStateKey = panel.label as "xray1" | "xray2";
state[panelStateKey] = {
status: "success",
outboundsCount: xray.length,
synced: false,
syncedOutbounds: [],
timestamp: new Date().toISOString(),
error: null,
};
} catch (err) {
const errorState = {
status: "error" as const,
outboundsCount: 0,
synced: false,
syncedOutbounds: [],
timestamp: new Date().toISOString(),
error: err instanceof Error ? err.message : String(err),
};
@@ -196,11 +189,10 @@ async function runParser(): Promise<void> {
try {
await syncNovavpsToXray(valid, panel.url, panel.username, panel.password, panel.label);
if (panel.label === "xray1") {
state.xray1.synced = true;
} else {
state.xray2.synced = true;
}
const syncedTags = valid.map((_, idx) => `novavps${idx + 1}`);
const panelStateKey = panel.label as "xray1" | "xray2";
state[panelStateKey].synced = true;
state[panelStateKey].syncedOutbounds = syncedTags;
} catch (err) {
const errMsg = err instanceof Error ? err.message : String(err);
if (panel.label === "xray1") {