579 lines
21 KiB
HTML
579 lines
21 KiB
HTML
<!doctype html>
|
||
<!--
|
||
* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
|
||
* @version 1.0.0-alpha.7
|
||
* @link https://github.com/tabler/tabler
|
||
* Copyright 2018-2019 The Tabler Authors
|
||
* Copyright 2018-2019 codecalm.net Paweł Kuna
|
||
* Licensed under MIT (https://tabler.io/license)
|
||
-->
|
||
<html lang="en">
|
||
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
|
||
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
|
||
<title>Openvpn Load Balancing Socks5 Server</title>
|
||
<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
|
||
<meta name="msapplication-TileColor" content="#206bc4" />
|
||
<meta name="theme-color" content="#206bc4" />
|
||
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
|
||
<meta name="apple-mobile-web-app-capable" content="yes" />
|
||
<meta name="mobile-web-app-capable" content="yes" />
|
||
<meta name="HandheldFriendly" content="True" />
|
||
<meta name="MobileOptimized" content="320" />
|
||
<meta name="robots" content="noindex,nofollow,noarchive" />
|
||
<link rel="icon" href="./favicon.ico" type="image/x-icon" />
|
||
<link rel="shortcut icon" href="./favicon.ico" type="image/x-icon" />
|
||
<!-- CSS files -->
|
||
<link href="./dist/libs/jqvmap/dist/jqvmap.min.css" rel="stylesheet" />
|
||
<link href="./dist/css/tabler.min.css" rel="stylesheet" />
|
||
<link href="./dist/css/demo.min.css" rel="stylesheet" />
|
||
<style>
|
||
body {
|
||
display: none;
|
||
}
|
||
</style>
|
||
</head>
|
||
|
||
<body class="antialiased">
|
||
<aside class="navbar navbar-vertical navbar-expand-lg navbar-dark">
|
||
<div class="container">
|
||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-menu">
|
||
<span class="navbar-toggler-icon"></span>
|
||
</button>
|
||
<a href="." class="navbar-brand navbar-brand-autodark">
|
||
Dashboard
|
||
</a>
|
||
<div class="navbar-nav flex-row d-lg-none">
|
||
<div class="nav-item dropdown d-none d-md-flex mr-3">
|
||
</div>
|
||
</div>
|
||
<div class="collapse navbar-collapse" id="navbar-menu">
|
||
<ul class="navbar-nav pt-lg-3">
|
||
<li class="nav-item active">
|
||
<a class="nav-link" href="./index.html">
|
||
<span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg"
|
||
class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"
|
||
fill="none" stroke-linecap="round" stroke-linejoin="round">
|
||
<path stroke="none" d="M0 0h24v24H0z" />
|
||
<polyline points="5 12 3 12 12 3 21 12 19 12" />
|
||
<path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7" />
|
||
<path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6" /></svg>
|
||
</span>
|
||
<span class="nav-link-title">
|
||
Home
|
||
</span>
|
||
</a>
|
||
</li>
|
||
<li class="nav-item dropdown">
|
||
<a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button"
|
||
aria-expanded="false">
|
||
<span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg"
|
||
class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"
|
||
fill="none" stroke-linecap="round" stroke-linejoin="round">
|
||
<path stroke="none" d="M0 0h24v24H0z" />
|
||
<rect x="4" y="4" width="6" height="5" rx="2" />
|
||
<rect x="4" y="13" width="6" height="7" rx="2" />
|
||
<rect x="14" y="4" width="6" height="7" rx="2" />
|
||
<rect x="14" y="15" width="6" height="5" rx="2" /></svg>
|
||
</span>
|
||
<span class="nav-link-title">
|
||
Connections
|
||
</span>
|
||
</a>
|
||
<ul class="dropdown-menu dropdown-menu-columns dropdown-menu-columns-2">
|
||
<li>
|
||
<a class="dropdown-item" href="./empty.html">
|
||
Empty page
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a class="dropdown-item" href="./blank.html">
|
||
Blank page
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a class="dropdown-item" href="./buttons.html">
|
||
Buttons
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a class="dropdown-item" href="./cards.html">
|
||
Cards
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a class="dropdown-item" href="./dropdowns.html">
|
||
Dropdowns
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a class="dropdown-item" href="./icons.html">
|
||
Icons
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a class="dropdown-item" href="./modals.html">
|
||
Modals
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a class="dropdown-item" href="./maps.html">
|
||
Maps
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a class="dropdown-item" href="./maps-vector.html">
|
||
Vector maps
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a class="dropdown-item" href="./navigation.html">
|
||
Navigation
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a class="dropdown-item" href="./charts.html">
|
||
Charts
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a class="dropdown-item" href="./tables.html">
|
||
Tables
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a class="dropdown-item" href="./calendar.html">
|
||
Calendar
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a class="dropdown-item" href="./carousel.html">
|
||
Carousel
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a class="dropdown-item" href="./lists.html">
|
||
Lists
|
||
</a>
|
||
</li>
|
||
<li class="dropright">
|
||
<a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-toggle="dropdown"
|
||
role="button" aria-expanded="false">
|
||
Authentication
|
||
</a>
|
||
<div class="dropdown-menu">
|
||
<a href="./sign-in.html" class="dropdown-item">Sign in</a>
|
||
<a href="./sign-up.html" class="dropdown-item">Sign up</a>
|
||
<a href="./forgot-password.html" class="dropdown-item">Forgot password</a>
|
||
<a href="./terms-of-service.html" class="dropdown-item">Terms of service</a>
|
||
</div>
|
||
</li>
|
||
<li class="dropright">
|
||
<a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-toggle="dropdown" role="button"
|
||
aria-expanded="false">
|
||
Error pages
|
||
</a>
|
||
<div class="dropdown-menu">
|
||
<a href="./400.html" class="dropdown-item">400 page</a>
|
||
<a href="./401.html" class="dropdown-item">401 page</a>
|
||
<a href="./403.html" class="dropdown-item">403 page</a>
|
||
<a href="./404.html" class="dropdown-item">404 page</a>
|
||
<a href="./500.html" class="dropdown-item">500 page</a>
|
||
<a href="./503.html" class="dropdown-item">503 page</a>
|
||
<a href="./maintenance.html" class="dropdown-item">Maintenance page</a>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</aside>
|
||
<div class="page">
|
||
<div class="content">
|
||
<div class="container-xl">
|
||
<!-- Page title -->
|
||
<div class="page-header">
|
||
<div class="row align-items-center">
|
||
<div class="col-auto">
|
||
<h2 class="page-title">
|
||
Home
|
||
</h2>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="row row-deck row-cards">
|
||
|
||
|
||
|
||
<div class="col-sm-6 col-xl-3">
|
||
<div class="card card-sm">
|
||
<div class="card-body d-flex align-items-center">
|
||
<span class="bg-blue text-white stamp mr-3"><svg xmlns="http://www.w3.org/2000/svg" class="icon"
|
||
width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none"
|
||
stroke-linecap="round" stroke-linejoin="round">
|
||
<path stroke="none" d="M0 0h24v24H0z" />
|
||
<path d="M16.7 8a3 3 0 0 0 -2.7 -2h-4a3 3 0 0 0 0 6h4a3 3 0 0 1 0 6h-4a3 3 0 0 1 -2.7 -2" />
|
||
<path d="M12 3v3m0 12v3" /></svg>
|
||
</span>
|
||
<div class="mr-3 lh-sm">
|
||
<div class="strong">
|
||
132 Sales
|
||
</div>
|
||
<div class="text-muted">12 waiting payments</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-sm-6 col-xl-3">
|
||
<div class="card card-sm">
|
||
<div class="card-body d-flex align-items-center">
|
||
<span class="bg-green text-white stamp mr-3"><svg xmlns="http://www.w3.org/2000/svg" class="icon"
|
||
width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none"
|
||
stroke-linecap="round" stroke-linejoin="round">
|
||
<path stroke="none" d="M0 0h24v24H0z" />
|
||
<circle cx="9" cy="19" r="2" />
|
||
<circle cx="17" cy="19" r="2" />
|
||
<path d="M3 3h2l2 12a3 3 0 0 0 3 2h7a3 3 0 0 0 3 -2l1 -7h-15.2" /></svg>
|
||
</span>
|
||
<div class="mr-3 lh-sm">
|
||
<div class="strong">
|
||
78 Orders
|
||
</div>
|
||
<div class="text-muted">32 shipped</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-sm-6 col-xl-3">
|
||
<div class="card card-sm">
|
||
<div class="card-body d-flex align-items-center">
|
||
<div class="mr-3">
|
||
<div class="chart-sparkline chart-sparkline-square" id="sparkline-67"></div>
|
||
</div>
|
||
<div class="mr-3 lh-sm">
|
||
<div class="strong">
|
||
1,352 Members
|
||
</div>
|
||
<div class="text-muted">163 registered today</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-sm-6 col-xl-3">
|
||
<div class="card card-sm">
|
||
<div class="card-body d-flex align-items-center">
|
||
<div class="mr-3 lh-sm">
|
||
<div class="strong">
|
||
132 Comments
|
||
</div>
|
||
<div class="text-muted">16 waiting</div>
|
||
</div>
|
||
<div class="ml-auto">
|
||
<div class="chart-sparkline chart-sparkline-square" id="sparkline-68"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-lg-12">
|
||
<div class="card">
|
||
<div class="card-body">
|
||
<div class="d-flex align-items-center">
|
||
<div class="subheader">
|
||
<h3>Traffic summary</h3>
|
||
</div>
|
||
<div class="ml-auto lh-1">
|
||
<div class="dropdown">
|
||
<a class="dropdown-toggle text-muted" href="#" data-toggle="dropdown" aria-haspopup="true"
|
||
aria-expanded="false">
|
||
Last 7 days
|
||
</a>
|
||
<div class="dropdown-menu dropdown-menu-right">
|
||
<a class="dropdown-item active" href="#">Last 7 days</a>
|
||
<a class="dropdown-item" href="#">Last 30 days</a>
|
||
<a class="dropdown-item" href="#">Last 3 months</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<canvas id="chart-traffic" class="chart-lg"></canvas>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div class="col-lg-12">
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<h4 class="card-title">Most Visited Pages</h4>
|
||
</div>
|
||
<div class="table-responsive">
|
||
<table id="ovpn_table" class="table card-table table-vcenter">
|
||
<!-- <thead>
|
||
<tr>
|
||
<th>Connection name</th>
|
||
<th>Visitors</th>
|
||
<th>Unique</th>
|
||
<th>Alive</th>
|
||
</tr>
|
||
</thead>
|
||
<tr>
|
||
<td>
|
||
name
|
||
</td>
|
||
<td class="text-muted"></td>
|
||
<td class="text-muted"></td>
|
||
<td class="text-right">
|
||
<div class="chart-sparkline" id="sparkline-69"></div>
|
||
</td>
|
||
</tr> -->
|
||
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
|
||
</div>
|
||
</div>
|
||
<footer class="footer footer-transparent">
|
||
<div class="container">
|
||
<div class="row text-center align-items-center flex-row-reverse">
|
||
<div class="col-lg-auto ml-lg-auto">
|
||
<ul class="list-inline list-inline-dots mb-0">
|
||
<li class="list-inline-item"><a href="" class="link-secondary"></a></li>
|
||
<li class="list-inline-item"><a href="" class="link-secondary"></a></li>
|
||
<li class="list-inline-item"><a href="" target="_blank" class="link-secondary"></a></li>
|
||
</ul>
|
||
</div>
|
||
<div class="col-12 col-lg-auto mt-3 mt-lg-0">
|
||
2020
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
</div>
|
||
</div>
|
||
<!-- Libs JS -->
|
||
<script src="./dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
|
||
<script src="./dist/libs/jquery/dist/jquery-3.5.1.min.js"></script>
|
||
<script src="./dist/libs/apexcharts/dist/apexcharts.min.js"></script>
|
||
<script src="./dist/libs/jqvmap/dist/jquery.vmap.min.js"></script>
|
||
<script src="./dist/libs/jqvmap/dist/maps/jquery.vmap.world.js"></script>
|
||
<script src="./dist/libs/peity/jquery.peity.min.js"></script>
|
||
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.bundle.min.js"
|
||
integrity="sha256-TQq84xX6vkwR0Qs1qH5ADkP+MvH0W+9E7TdHJsoIQiM=" crossorigin="anonymous"></script>
|
||
<!-- Tabler Core -->
|
||
<script src="./dist/js/tabler.min.js"></script>
|
||
|
||
<script>
|
||
var ctx = document.getElementById('chart-traffic').getContext('2d');
|
||
var config = {
|
||
type: 'line',
|
||
data: {
|
||
datasets: []
|
||
},
|
||
options: {
|
||
responsive: true,
|
||
title: {
|
||
display: true,
|
||
text: 'Chart.js Time Point Data'
|
||
},
|
||
animation: {
|
||
duration: 0
|
||
},
|
||
scales: {
|
||
xAxes: [{
|
||
type: 'time',
|
||
display: true,
|
||
scaleLabel: {
|
||
display: true,
|
||
labelString: 'Date'
|
||
},
|
||
ticks: {
|
||
major: {
|
||
fontStyle: 'bold',
|
||
fontColor: '#FF0000'
|
||
}
|
||
}
|
||
}],
|
||
yAxes: [{
|
||
display: true,
|
||
scaleLabel: {
|
||
display: true,
|
||
labelString: 'value'
|
||
}
|
||
}]
|
||
}
|
||
}
|
||
};
|
||
var traffic_chart = new Chart(ctx, config);
|
||
|
||
function uuidv4() {
|
||
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
|
||
var r = Math.random() * 16 | 0,
|
||
v = c == 'x' ? r : (r & 0x3 | 0x8);
|
||
return v.toString(16);
|
||
});
|
||
}
|
||
var random = (function () {
|
||
var seed = 0x2F6E2B2; // 0x2F6E2B1
|
||
return function () {
|
||
// Robert Jenkins’ 32 bit integer hash function
|
||
seed = ((seed + 0x7ED55D16) + (seed << 12)) & 0xFFFFFFFF;
|
||
seed = ((seed ^ 0xC761C23C) ^ (seed >>> 19)) & 0xFFFFFFFF;
|
||
seed = ((seed + 0x165667B1) + (seed << 5)) & 0xFFFFFFFF;
|
||
seed = ((seed + 0xD3A2646C) ^ (seed << 9)) & 0xFFFFFFFF;
|
||
seed = ((seed + 0xFD7046C5) + (seed << 3)) & 0xFFFFFFFF;
|
||
seed = ((seed ^ 0xB55A4F09) ^ (seed >>> 16)) & 0xFFFFFFFF;
|
||
return (seed & 0xFFFFFFF) / 0x10000000;
|
||
};
|
||
}());
|
||
colors = Array.from(Array(100), () => "#" + Math.floor(random() * 16777215).toString(16))
|
||
var color = Chart.helpers.color;
|
||
|
||
var update_stat = function () {
|
||
$.getJSON("/stat", function (data) {
|
||
// update top chart
|
||
var datasets = data.instances.map((value, index) => {
|
||
return {
|
||
label: value.name,
|
||
backgroundColor: color(colors[index]).alpha(0.5).rgbString(),
|
||
borderColor: colors[index],
|
||
fill: false,
|
||
data: value.io_mean.map((value, index) => {
|
||
return {
|
||
x: data.time[index],
|
||
y: value,
|
||
}
|
||
}),
|
||
}
|
||
})
|
||
traffic_chart.data.datasets = datasets;
|
||
traffic_chart.update();
|
||
// update table
|
||
var ovpn_table = $("#ovpn_table");
|
||
ovpn_table.empty();
|
||
ovpn_table.append($(`<thead>
|
||
<tr>
|
||
<th>Connection name</th>
|
||
<th>Visitors</th>
|
||
<th>Unique</th>
|
||
<th>Alive</th>
|
||
</tr>
|
||
</thead>`))
|
||
data.instances.forEach((instance, index) => {
|
||
var tr = `<tr>
|
||
<td>
|
||
${instance.name}
|
||
</td>
|
||
<td class="text-muted"></td>
|
||
<td class="text-muted"></td>
|
||
<td class="text-right">
|
||
<div class="chart-sparkline" id="sparkline-${index}"></div>
|
||
</td>
|
||
</tr>`
|
||
|
||
ovpn_table.append(tr);
|
||
$().peity && $(`#sparkline-${index}`).text(instance.ping_rate.join(", ")).peity("line", {
|
||
width: 64,
|
||
height: 40,
|
||
stroke: "#206bc4",
|
||
strokeWidth: 2,
|
||
fill: ["#d2e1f3"],
|
||
padding: .2,
|
||
});
|
||
});
|
||
|
||
|
||
});
|
||
}
|
||
update_stat();
|
||
setInterval(update_stat, 5000);
|
||
</script>
|
||
|
||
|
||
<script>
|
||
document.addEventListener("DOMContentLoaded", function () {
|
||
$().peity && $('#sparkline-67').text("56/100").peity("pie", {
|
||
width: 40,
|
||
height: 40,
|
||
stroke: "#cd201f",
|
||
strokeWidth: 2,
|
||
fill: ["#cd201f", "rgba(110, 117, 130, 0.2)"],
|
||
padding: .2,
|
||
innerRadius: 17,
|
||
});
|
||
});
|
||
</script>
|
||
<script>
|
||
document.addEventListener("DOMContentLoaded", function () {
|
||
$().peity && $('#sparkline-68').text("22/100").peity("pie", {
|
||
width: 40,
|
||
height: 40,
|
||
stroke: "#fab005",
|
||
strokeWidth: 2,
|
||
fill: ["#fab005", "rgba(110, 117, 130, 0.2)"],
|
||
padding: .2,
|
||
innerRadius: 17,
|
||
});
|
||
});
|
||
</script>
|
||
<script>
|
||
document.addEventListener("DOMContentLoaded", function () {
|
||
$().peity && $('#sparkline-69').text("17, 24, 20, 10, 5, 1, 4, 18, 13").peity("line", {
|
||
width: 64,
|
||
height: 40,
|
||
stroke: "#206bc4",
|
||
strokeWidth: 2,
|
||
fill: ["#d2e1f3"],
|
||
padding: .2,
|
||
});
|
||
});
|
||
</script>
|
||
<script>
|
||
document.addEventListener("DOMContentLoaded", function () {
|
||
$().peity && $('#sparkline-70').text("13, 11, 19, 22, 12, 7, 14, 3, 21").peity("line", {
|
||
width: 64,
|
||
height: 40,
|
||
stroke: "#206bc4",
|
||
strokeWidth: 2,
|
||
fill: ["#d2e1f3"],
|
||
padding: .2,
|
||
});
|
||
});
|
||
</script>
|
||
<script>
|
||
document.addEventListener("DOMContentLoaded", function () {
|
||
$().peity && $('#sparkline-71').text("10, 13, 10, 4, 17, 3, 23, 22, 19").peity("line", {
|
||
width: 64,
|
||
height: 40,
|
||
stroke: "#206bc4",
|
||
strokeWidth: 2,
|
||
fill: ["#d2e1f3"],
|
||
padding: .2,
|
||
});
|
||
});
|
||
</script>
|
||
<script>
|
||
document.addEventListener("DOMContentLoaded", function () {
|
||
$().peity && $('#sparkline-72').text("9, 6, 14, 11, 8, 24, 2, 16, 15").peity("line", {
|
||
width: 64,
|
||
height: 40,
|
||
stroke: "#206bc4",
|
||
strokeWidth: 2,
|
||
fill: ["#d2e1f3"],
|
||
padding: .2,
|
||
});
|
||
});
|
||
</script>
|
||
<script>
|
||
document.body.style.display = "block"
|
||
</script>
|
||
</body>
|
||
|
||
</html> |