eb55cfe248
- Increased font size for easier readability. - Applied bold font weight for better emphasis.
266 lines
13 KiB
HTML
266 lines
13 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block title %}Dashboard{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="content-header">
|
|
<div class="container-fluid">
|
|
<div class="row mb-2">
|
|
<div class="col-sm-6">
|
|
<h1 class="m-0">Dashboard</h1>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<section class="content">
|
|
<div class="container-fluid">
|
|
<div class="row">
|
|
<div class="col-md-3 col-sm-6 col-12">
|
|
<div class="info-box shadow-sm">
|
|
<span class="info-box-icon bg-info"><i class="fas fa-microchip"></i></span>
|
|
<div class="info-box-content">
|
|
<span class="info-box-text">CPU Usage</span>
|
|
<span class="info-box-number" id="cpu-usage">--</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-3 col-sm-6 col-12">
|
|
<div class="info-box shadow-sm">
|
|
<span class="info-box-icon bg-warning"><i class="fas fa-memory"></i></span>
|
|
<div class="info-box-content">
|
|
<span class="info-box-text">RAM Usage</span>
|
|
<span class="info-box-number" id="ram-usage">-- / --</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-3 col-sm-6 col-12">
|
|
<div class="info-box shadow-sm">
|
|
<span class="info-box-icon bg-success"><i class="fas fa-users"></i></span>
|
|
<div class="info-box-content">
|
|
<span class="info-box-text">Online Users</span>
|
|
<span class="info-box-number" id="online-users">--</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-3 col-sm-6 col-12">
|
|
<div class="info-box shadow-sm">
|
|
<span class="info-box-icon bg-secondary"><i class="fas fa-clock"></i></span>
|
|
<div class="info-box-content">
|
|
<span class="info-box-text">Uptime</span>
|
|
<span class="info-box-number" id="uptime">--</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-4 col-12">
|
|
<div class="info-box shadow-sm">
|
|
<span class="info-box-icon bg-primary"><i class="fas fa-exchange-alt"></i></span>
|
|
<div class="info-box-content">
|
|
<span class="info-box-text">Network Speed</span>
|
|
<div style="font-size: 16px; line-height: 1.3; font-weight: bold;">
|
|
<span class="d-block" id="download-speed">🔽 Download: --</span>
|
|
<span class="d-block" id="upload-speed">🔼 Upload: --</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4 col-12">
|
|
<div class="info-box shadow-sm">
|
|
<span class="info-box-icon bg-dark"><i class="fas fa-project-diagram"></i></span>
|
|
<div class="info-box-content">
|
|
<span class="info-box-text">Active Connections</span>
|
|
<div style="font-size: 16px; line-height: 1.3; font-weight: bold;">
|
|
<span class="d-block" id="tcp-connections">TCP: --</span>
|
|
<span class="d-block" id="udp-connections">UDP: --</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4 col-12">
|
|
<div class="info-box shadow-sm" id="ip-info-box">
|
|
<span class="info-box-icon bg-purple"><i class="fas fa-network-wired"></i></span>
|
|
<div class="info-box-content">
|
|
<span class="info-box-text">Server IPs
|
|
<a href="#" id="toggle-ip-visibility" class="text-muted ml-2"><i class="fas fa-eye"></i></a>
|
|
</span>
|
|
<div id="ip-addresses" style="filter: blur(5px); font-size: 16px; line-height: 1.3; font-weight: bold;">
|
|
<span class="d-block" id="server-ipv4">IPv4: --</span>
|
|
<span class="d-block" id="server-ipv6">IPv6: --</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-lg-6">
|
|
<div class="card card-outline card-danger">
|
|
<div class="card-header">
|
|
<h3 class="card-title"><i class="fas fa-power-off mr-2"></i>Traffic Since Last Reboot</h3>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="d-flex justify-content-between align-items-center border-bottom mb-3 pb-2">
|
|
<p class="text-lg text-success"><i class="fas fa-arrow-up mr-2"></i>Uploaded</p>
|
|
<p class="text-lg" id="reboot-uploaded-traffic">--</p>
|
|
</div>
|
|
<div class="d-flex justify-content-between align-items-center border-bottom mb-3 pb-2">
|
|
<p class="text-lg text-primary"><i class="fas fa-arrow-down mr-2"></i>Downloaded</p>
|
|
<p class="text-lg" id="reboot-downloaded-traffic">--</p>
|
|
</div>
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<p class="text-lg text-info"><i class="fas fa-chart-line mr-2"></i>Combined</p>
|
|
<p class="text-lg" id="reboot-total-traffic">--</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-6">
|
|
<div class="card card-outline card-info">
|
|
<div class="card-header">
|
|
<h3 class="card-title"><i class="fas fa-history mr-2"></i>User Traffic (All Time)</h3>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="d-flex justify-content-between align-items-center border-bottom mb-3 pb-2">
|
|
<p class="text-lg text-success"><i class="fas fa-arrow-up mr-2"></i>Uploaded</p>
|
|
<p class="text-lg" id="user-uploaded-traffic">--</p>
|
|
</div>
|
|
<div class="d-flex justify-content-between align-items-center border-bottom mb-3 pb-2">
|
|
<p class="text-lg text-primary"><i class="fas fa-arrow-down mr-2"></i>Downloaded</p>
|
|
<p class="text-lg" id="user-downloaded-traffic">--</p>
|
|
</div>
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<p class="text-lg text-info"><i class="fas fa-chart-line mr-2"></i>Combined</p>
|
|
<p class="text-lg" id="user-total-traffic">--</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-lg-3 col-6">
|
|
<div class="small-box" id="hysteria2-status-box">
|
|
<div class="inner">
|
|
<h3 id="hysteria2-status">--</h3>
|
|
<p>Hysteria2 Core</p>
|
|
</div>
|
|
<div class="icon">
|
|
<i class="fas fa-bolt"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-3 col-6">
|
|
<div class="small-box" id="telegrambot-status-box">
|
|
<div class="inner">
|
|
<h3 id="telegrambot-status">--</h3>
|
|
<p>Telegram Bot</p>
|
|
</div>
|
|
<div class="icon">
|
|
<i class="fab fa-telegram"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-3 col-6">
|
|
<div class="small-box" id="iplimit-status-box">
|
|
<div class="inner">
|
|
<h3 id="iplimit-status">--</h3>
|
|
<p>IP Limit Service</p>
|
|
</div>
|
|
<div class="icon">
|
|
<i class="fas fa-ban"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-3 col-6">
|
|
<div class="small-box" id="normalsub-status-box">
|
|
<div class="inner">
|
|
<h3 id="normalsub-status">--</h3>
|
|
<p>Subscription Service</p>
|
|
</div>
|
|
<div class="icon">
|
|
<i class="fas fa-rss"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
{% endblock %}
|
|
|
|
{% block javascripts %}
|
|
<script>
|
|
function updateServerInfo() {
|
|
fetch('{{ url_for("server_status_api") }}')
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
document.getElementById('cpu-usage').textContent = data.cpu_usage;
|
|
document.getElementById('ram-usage').textContent = `${data.ram_usage} / ${data.total_ram}`;
|
|
document.getElementById('online-users').textContent = data.online_users;
|
|
document.getElementById('uptime').textContent = data.uptime;
|
|
|
|
document.getElementById('server-ipv4').textContent = `IPv4: ${data.server_ipv4 || 'N/A'}`;
|
|
document.getElementById('server-ipv6').textContent = `IPv6: ${data.server_ipv6 || 'N/A'}`;
|
|
|
|
document.getElementById('download-speed').textContent = `🔽 Download: ${data.download_speed}`;
|
|
document.getElementById('upload-speed').textContent = `🔼 Upload: ${data.upload_speed}`;
|
|
document.getElementById('tcp-connections').textContent = `TCP: ${data.tcp_connections}`;
|
|
document.getElementById('udp-connections').textContent = `UDP: ${data.udp_connections}`;
|
|
|
|
document.getElementById('reboot-uploaded-traffic').textContent = data.reboot_uploaded_traffic;
|
|
document.getElementById('reboot-downloaded-traffic').textContent = data.reboot_downloaded_traffic;
|
|
document.getElementById('reboot-total-traffic').textContent = data.reboot_total_traffic;
|
|
|
|
document.getElementById('user-uploaded-traffic').textContent = data.user_uploaded_traffic;
|
|
document.getElementById('user-downloaded-traffic').textContent = data.user_downloaded_traffic;
|
|
document.getElementById('user-total-traffic').textContent = data.user_total_traffic;
|
|
})
|
|
.catch(error => console.error('Error fetching server info:', error));
|
|
}
|
|
|
|
function updateServiceStatuses() {
|
|
fetch('{{ url_for("server_services_status_api") }}')
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
updateServiceBox('hysteria2', data.hysteria_server);
|
|
updateServiceBox('telegrambot', data.hysteria_telegram_bot);
|
|
updateServiceBox('iplimit', data.hysteria_iplimit);
|
|
updateServiceBox('normalsub', data.hysteria_normal_sub);
|
|
})
|
|
.catch(error => console.error('Error fetching service statuses:', error));
|
|
}
|
|
|
|
function updateServiceBox(serviceName, status) {
|
|
const statusElement = document.getElementById(serviceName + '-status');
|
|
const statusBox = document.getElementById(serviceName + '-status-box');
|
|
|
|
if (status === true) {
|
|
statusElement.textContent = 'Active';
|
|
statusBox.classList.remove('bg-danger');
|
|
statusBox.classList.add('bg-success');
|
|
} else {
|
|
statusElement.textContent = 'Inactive';
|
|
statusBox.classList.remove('bg-success');
|
|
statusBox.classList.add('bg-danger');
|
|
}
|
|
}
|
|
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
updateServerInfo();
|
|
updateServiceStatuses();
|
|
setInterval(updateServerInfo, 2000);
|
|
setInterval(updateServiceStatuses, 10000);
|
|
|
|
const toggleIpBtn = document.getElementById('toggle-ip-visibility');
|
|
const ipAddressesDiv = document.getElementById('ip-addresses');
|
|
toggleIpBtn.addEventListener('click', function(e) {
|
|
e.preventDefault();
|
|
const isBlurred = ipAddressesDiv.style.filter === 'blur(5px)';
|
|
ipAddressesDiv.style.filter = isBlurred ? 'none' : 'blur(5px)';
|
|
toggleIpBtn.querySelector('i').classList.toggle('fa-eye');
|
|
toggleIpBtn.querySelector('i').classList.toggle('fa-eye-slash');
|
|
});
|
|
});
|
|
</script>
|
|
{% endblock %} |