mirror of
https://github.com/plan-player-analytics/Plan.git
synced 2025-01-01 05:57:50 +01:00
New network.html
This commit is contained in:
Rsl1122
parent
5577771231
commit
bf3044cb03
526
Plan/src/main/resources/web/network - Example.html
Normal file
526
Plan/src/main/resources/web/network - Example.html
Normal file
@ -0,0 +1,526 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
|
||||
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
|
||||
<title>Plan | Network</title>
|
||||
<!-- Favicon-->
|
||||
<link rel="icon" href="favicon.ico" type="image/x-icon">
|
||||
|
||||
<!-- Google Fonts -->
|
||||
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700&subset=latin,cyrillic-ext" rel="stylesheet"
|
||||
type="text/css">
|
||||
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" type="text/css">
|
||||
|
||||
<!-- Bootstrap Core Css -->
|
||||
<link href="plugins/bootstrap/css/bootstrap.css" rel="stylesheet">
|
||||
|
||||
<!-- Waves Effect Css -->
|
||||
<link href="plugins/node-waves/waves.css" rel="stylesheet"/>
|
||||
|
||||
<!-- Animation Css -->
|
||||
<link href="plugins/animate-css/animate.css" rel="stylesheet"/>
|
||||
|
||||
<!-- Custom Css -->
|
||||
<link href="css/style.css" rel="stylesheet">
|
||||
|
||||
<!-- Plan Stylesheet -->
|
||||
<link href="css/main.css" rel="stylesheet">
|
||||
|
||||
<!-- AdminBSB Themes. You can choose a theme from css/themes instead of get all themes -->
|
||||
<link href="css/themes/all-themes.css" rel="stylesheet"/>
|
||||
</head>
|
||||
|
||||
<body class="theme-red">
|
||||
<!-- Page Loader -->
|
||||
<div class="page-loader-wrapper">
|
||||
<div class="loader">
|
||||
<div class="preloader">
|
||||
<div class="spinner-layer pl-red">
|
||||
<div class="circle-clipper left">
|
||||
<div class="circle"></div>
|
||||
</div>
|
||||
<div class="circle-clipper right">
|
||||
<div class="circle"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p>Please wait...</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- #END# Page Loader -->
|
||||
<!-- Overlay For Sidebars -->
|
||||
<div class="overlay"></div>
|
||||
<!-- #END# Overlay For Sidebars -->
|
||||
<!-- Search Bar -->
|
||||
<div class="search-bar">
|
||||
<div class="search-icon">
|
||||
<i class="material-icons">search</i>
|
||||
</div>
|
||||
<input type="text" placeholder="START TYPING...">
|
||||
<div class="close-search">
|
||||
<i class="material-icons">close</i>
|
||||
</div>
|
||||
</div>
|
||||
<!-- #END# Search Bar -->
|
||||
<!-- Top Bar -->
|
||||
<nav class="navbar">
|
||||
<div class="container-fluid">
|
||||
<div class="navbar-header">
|
||||
<a href="javascript:void(0);" class="navbar-toggle collapsed" data-toggle="collapse"
|
||||
data-target="#navbar-collapse" aria-expanded="false"></a>
|
||||
<a href="javascript:void(0);" class="bars"></a>
|
||||
<a class="navbar-brand">Plan | Network</a>
|
||||
</div>
|
||||
<div class="collapse navbar-collapse" id="navbar-collapse">
|
||||
<ul class="nav navbar-nav navbar-right">
|
||||
<!-- Call Search (Disabled)
|
||||
<li><a href="javascript:void(0);" class="js-search" data-close="true"><i class="material-icons">search</i></a></li>
|
||||
<!-- #END# Call Search -->
|
||||
<li class="pull-right"><a href="javascript:void(0);" class="js-right-sidebar" data-close="true"><i
|
||||
class="material-icons">settings</i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<!-- #Top Bar -->
|
||||
<section>
|
||||
<!-- Left Sidebar -->
|
||||
<aside id="leftsidebar" class="sidebar">
|
||||
<!-- Menu -->
|
||||
<div class="menu">
|
||||
<ul class="list">
|
||||
<li class="active">
|
||||
<a class="nav-button" href="javascript:void(0)">
|
||||
<i class="material-icons">info_outline</i>
|
||||
<span>Overview</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="nav-button" href="javascript:void(0)">
|
||||
<i class="material-icons">storage</i>
|
||||
<span>Servers</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- #Menu -->
|
||||
<!-- Footer -->
|
||||
<div class="legal">
|
||||
<div class="version">
|
||||
<b>Player Analytics: </b> v4.1.0
|
||||
</div>
|
||||
</div>
|
||||
<!-- #Footer -->
|
||||
</aside>
|
||||
<!-- #END# Left Sidebar -->
|
||||
<!-- Right Sidebar -->
|
||||
<aside id="rightsidebar" class="right-sidebar">
|
||||
<div class="tab-content">
|
||||
<div role="tabpanel" class="tab-pane fade in active in active" id="skins">
|
||||
<ul class="demo-choose-skin">
|
||||
<li data-theme="red" class="active">
|
||||
<div class="red"></div>
|
||||
<span>Red</span>
|
||||
</li>
|
||||
<li data-theme="pink">
|
||||
<div class="pink"></div>
|
||||
<span>Pink</span>
|
||||
</li>
|
||||
<li data-theme="purple">
|
||||
<div class="purple"></div>
|
||||
<span>Purple</span>
|
||||
</li>
|
||||
<li data-theme="deep-purple">
|
||||
<div class="deep-purple"></div>
|
||||
<span>Deep Purple</span>
|
||||
</li>
|
||||
<li data-theme="indigo">
|
||||
<div class="indigo"></div>
|
||||
<span>Indigo</span>
|
||||
</li>
|
||||
<li data-theme="blue">
|
||||
<div class="blue"></div>
|
||||
<span>Blue</span>
|
||||
</li>
|
||||
<li data-theme="light-blue">
|
||||
<div class="light-blue"></div>
|
||||
<span>Light Blue</span>
|
||||
</li>
|
||||
<li data-theme="cyan">
|
||||
<div class="cyan"></div>
|
||||
<span>Cyan</span>
|
||||
</li>
|
||||
<li data-theme="teal">
|
||||
<div class="teal"></div>
|
||||
<span>Teal</span>
|
||||
</li>
|
||||
<li data-theme="green">
|
||||
<div class="green"></div>
|
||||
<span>Green</span>
|
||||
</li>
|
||||
<li data-theme="light-green">
|
||||
<div class="light-green"></div>
|
||||
<span>Light Green</span>
|
||||
</li>
|
||||
<li data-theme="lime">
|
||||
<div class="lime"></div>
|
||||
<span>Lime</span>
|
||||
</li>
|
||||
<li data-theme="yellow">
|
||||
<div class="yellow"></div>
|
||||
<span>Yellow</span>
|
||||
</li>
|
||||
<li data-theme="amber">
|
||||
<div class="amber"></div>
|
||||
<span>Amber</span>
|
||||
</li>
|
||||
<li data-theme="orange">
|
||||
<div class="orange"></div>
|
||||
<span>Orange</span>
|
||||
</li>
|
||||
<li data-theme="deep-orange">
|
||||
<div class="deep-orange"></div>
|
||||
<span>Deep Orange</span>
|
||||
</li>
|
||||
<li data-theme="brown">
|
||||
<div class="brown"></div>
|
||||
<span>Brown</span>
|
||||
</li>
|
||||
<li data-theme="grey">
|
||||
<div class="grey"></div>
|
||||
<span>Grey</span>
|
||||
</li>
|
||||
<li data-theme="blue-grey">
|
||||
<div class="blue-grey"></div>
|
||||
<span>Blue Grey</span>
|
||||
</li>
|
||||
<li data-theme="black">
|
||||
<div class="black"></div>
|
||||
<span>Black</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
<!-- #END# Right Sidebar -->
|
||||
</section>
|
||||
|
||||
<section class="content">
|
||||
<div class="main-limiter">
|
||||
<div id="main">
|
||||
<div id="tab-overview" class="tab">
|
||||
<div class="col-xs-12 col-sm-12 col-md-8 col-lg-8">
|
||||
<div class="card">
|
||||
<div class="header">
|
||||
<h2><i class="col-blue fa fa-area-chart"></i> Network Online Activity</h2>
|
||||
</div>
|
||||
<div class="body">
|
||||
<div id="playerChartDay" class="dashboard-flot-chart"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Network Information -->
|
||||
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
|
||||
<div class="card">
|
||||
<div class="body bg-white">
|
||||
<div class="m-b--35 font-bold">NETWORK INFORMATION</div>
|
||||
<ul class="dashboard-stat-list">
|
||||
<li>
|
||||
<i class="fa fa-users"></i> Total Players
|
||||
<span class="pull-right"><b>${playersTotal}</b></span>
|
||||
</li>
|
||||
<li>
|
||||
<i class="col-blue fa fa-user"></i> Unique Players / Day
|
||||
<small>(AVG.)</small>
|
||||
<span class="pull-right"><b>${playersAverage}</b></span>
|
||||
</li>
|
||||
<li>
|
||||
<i class="col-light-green fa fa-user-plus"></i> New Players / Day
|
||||
<small>(AVG.)</small>
|
||||
<span class="pull-right"><b>${playersNewAverage}</b></span>
|
||||
</li>
|
||||
<li></li>
|
||||
<li><i class="col-green fa fa-line-chart"></i> Last Peak: ${lastPeakTime}<span
|
||||
class="pull-right"><b>${playersLastPeak}</b> Players</span></li>
|
||||
<li><i class="col-blue fa fa-line-chart"></i> All Time Peak: ${bestPeakTime}<span
|
||||
class="pull-right"><b>${playersBestPeak}</b> Players</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="body bg-white">
|
||||
<div class="m-b--35 font-bold">PLAYERS</div>
|
||||
<ul class="dashboard-stat-list">
|
||||
<li>
|
||||
<i class="col-blue fa fa-users"></i> Unique | 24h
|
||||
<span class="pull-right"><b>${playersUniqueDay}</b></span>
|
||||
</li>
|
||||
<li>
|
||||
<i class="col-light-green fa fa-user-plus"></i> New | 24h
|
||||
<span class="pull-right"><b>${playersNewDay}</b></span>
|
||||
</li>
|
||||
<li>
|
||||
<i class="col-blue fa fa-users"></i> Unique | 7d
|
||||
<span class="pull-right"><b>${playersUniqueWeek}</b></span>
|
||||
</li>
|
||||
<li>
|
||||
<i class="col-light-green fa fa-user-plus"></i> New | 7d
|
||||
<span class="pull-right"><b>${playersNewWeek}</b></span>
|
||||
</li>
|
||||
<li>
|
||||
<i class="col-blue fa fa-users"></i> Unique | 30d
|
||||
<span class="pull-right"><b>${playersUniqueMonth}</b></span>
|
||||
</li>
|
||||
<li>
|
||||
<i class="col-light-green fa fa-user-plus"></i> New | 30d
|
||||
<span class="pull-right"><b>${playersNewMonth}</b></span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- #END# Network Information -->
|
||||
</div>
|
||||
<!-- #END# Tab Overview -->
|
||||
<div id="tab-servers" class="tab">
|
||||
<div class="row clearfix">
|
||||
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
|
||||
<div class="card">
|
||||
<div class="header">
|
||||
<div class="row clearfix">
|
||||
<div class="col-xs-12 col-sm-12">
|
||||
<h2><i class="col-light-green fa fa-server"></i> Server 1</h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">
|
||||
<div class="row">
|
||||
<div id="playerChartServer1" style="height: 200px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<div class="row">
|
||||
<div class="col-md-8">
|
||||
<p><i class="fa fa-users"></i> Registered Players <span
|
||||
class="pull-right">1234</span></p>
|
||||
<p><i class="col-blue fa fa-user"></i> Players Online <span
|
||||
class="pull-right">5 / 100</span></p>
|
||||
<p><i class="col-deep-orange fa fa-compass"></i> Type <span
|
||||
class="pull-right">Spigot 1.12.1</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<p><i class="fa fa-clock-o"></i> Last Refresh<span
|
||||
class="pull-right"><b>12:42</b></span>
|
||||
</p>
|
||||
<br>
|
||||
<button href="#" type="button" class="pull-right btn bg-light-green waves-effect">
|
||||
<i class="material-icons">trending_up</i>
|
||||
<span>ANALYSIS</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
|
||||
<div class="card">
|
||||
<div class="header">
|
||||
<div class="row clearfix">
|
||||
<div class="col-xs-12 col-sm-12">
|
||||
<h2><i class="col-light-green fa fa-server"></i> Server 2</h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">
|
||||
<div class="row">
|
||||
<div id="playerChartServer2" style="height: 200px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<div class="row">
|
||||
<div class="col-md-8">
|
||||
<p><i class="fa fa-users"></i> Registered Players <span
|
||||
class="pull-right">1234</span></p>
|
||||
<p><i class="col-blue fa fa-user"></i> Players Online <span
|
||||
class="pull-right">5 / 100</span></p>
|
||||
<p><i class="col-deep-orange fa fa-compass"></i> Type <span
|
||||
class="pull-right">PaperSpigot 1.12.1</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<p><i class="fa fa-clock-o"></i> Last Refresh<span
|
||||
class="pull-right"><b>13:53</b></span>
|
||||
</p>
|
||||
<br>
|
||||
<button href="#" type="button" class="pull-right btn bg-light-green waves-effect">
|
||||
<i class="material-icons">trending_up</i>
|
||||
<span>ANALYSIS</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row clearfix">
|
||||
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
|
||||
<div class="card">
|
||||
<div class="header">
|
||||
<div class="row clearfix">
|
||||
<div class="col-xs-12 col-sm-12">
|
||||
<h2><i class="col-light-green fa fa-server"></i> Server 3</h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">
|
||||
<div class="row">
|
||||
<div id="playerChartServer3" style="height: 200px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<div class="row">
|
||||
<div class="col-md-8">
|
||||
<p><i class="fa fa-users"></i> Registered Players <span
|
||||
class="pull-right">1234</span></p>
|
||||
<p><i class="col-blue fa fa-user"></i> Players Online <span
|
||||
class="pull-right">5 / 100</span></p>
|
||||
<p><i class="col-deep-orange fa fa-compass"></i> Type <span
|
||||
class="pull-right">Spigot 1.12.1</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<p><i class="fa fa-clock-o"></i> Last Refresh<span
|
||||
class="pull-right"><b>12:42</b></span>
|
||||
</p>
|
||||
<br>
|
||||
<button href="#" type="button" class="pull-right btn bg-light-green waves-effect">
|
||||
<i class="material-icons">trending_up</i>
|
||||
<span>ANALYSIS</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- #END# Tab Servers -->
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Jquery Core Js -->
|
||||
<script src="plugins/jquery/jquery.min.js"></script>
|
||||
|
||||
<!-- Bootstrap Core Js -->
|
||||
<script src="plugins/bootstrap/js/bootstrap.js"></script>
|
||||
|
||||
<!-- Slimscroll Plugin Js -->
|
||||
<script src="plugins/jquery-slimscroll/jquery.slimscroll.js"></script>
|
||||
|
||||
<!-- Waves Effect Plugin Js -->
|
||||
<script src="plugins/node-waves/waves.js"></script>
|
||||
|
||||
<!-- HighCharts -->
|
||||
<script src="https://code.highcharts.com/stock/highstock.js"></script>
|
||||
<script src="https://code.highcharts.com/modules/no-data-to-display.js"></script>
|
||||
|
||||
<!-- Font Awesome -->
|
||||
<script src="https://use.fontawesome.com/df48eb908b.js"></script>
|
||||
|
||||
<!-- Header, Sidenav & Skin changer -->
|
||||
<script src="js/admin.js"></script>
|
||||
|
||||
<!-- Plan Charts -->
|
||||
<script src="./js/playerGraph.js"></script>
|
||||
|
||||
<!-- Chart Data -->
|
||||
<script>
|
||||
Highcharts.setOptions({
|
||||
lang: {noData: "No Data to Display"},
|
||||
global: {
|
||||
timezoneOffset: ${timeZone} * 60
|
||||
}
|
||||
})
|
||||
;
|
||||
// Data Variables
|
||||
var playersOnlineSeries = {
|
||||
name: 'Players Online',
|
||||
data: ${playersOnlineSeries},
|
||||
type: 'areaspline',
|
||||
color: '${playersGraphColor}',
|
||||
tooltip: {
|
||||
valueDecimals: 0
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<!-- Plan load script -->
|
||||
<script>
|
||||
$(function () {
|
||||
|
||||
var navButtons = document.getElementsByClassName("nav-button");
|
||||
var tabs = document.getElementsByClassName("tab");
|
||||
var slideIndex = window.sessionStorage.getItem("AnalysisSlideIndex");
|
||||
if (slideIndex === null) {
|
||||
slideIndex = 0;
|
||||
}
|
||||
var x = document.getElementById("main");
|
||||
x.style.transform = "translate3d(0px,0px,0)";
|
||||
x.style.width = "" + navButtons.length * 100 + "%";
|
||||
for (var i = 0; i < navButtons.length; i++) {
|
||||
navButtons[i].onclick = openFunc(i);
|
||||
tabs[i].style.width = "" + 100 / navButtons.length + "%";
|
||||
}
|
||||
x.style.opacity = "1";
|
||||
openFunc(slideIndex)();
|
||||
|
||||
// Chart draw scripts
|
||||
/*playersChart('playerChartDay', playersOnlineSeries, 1);
|
||||
${serverTabGraphViewFunctions}
|
||||
/**/
|
||||
|
||||
function openFunc(i) {
|
||||
return function () {
|
||||
var max = navButtons.length;
|
||||
for (var j = 0; j < max; j++) {
|
||||
if (navButtons[j].parentElement.classList.contains('active')) {
|
||||
navButtons[j].parentElement.classList.remove('active');
|
||||
}
|
||||
if (j == i) {
|
||||
navButtons[j].parentElement.classList.add('active');
|
||||
|
||||
}
|
||||
}
|
||||
var percent = -100 / navButtons.length;
|
||||
slideIndex = i;
|
||||
if (slideIndex > max) {
|
||||
slideIndex = 0
|
||||
}
|
||||
if (slideIndex < 0) {
|
||||
slideIndex = max
|
||||
}
|
||||
window.sessionStorage.setItem("AnalysisSlideIndex", slideIndex);
|
||||
var value = slideIndex * percent;
|
||||
x.style.transition = "0.5s";
|
||||
x.style.transform = "translate3d(" + value + "%,0px,0)";
|
||||
};
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<!-- Demo Js -->
|
||||
<script src="js/demo.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
79
Plan/src/main/resources/web/network-old.html
Normal file
79
Plan/src/main/resources/web/network-old.html
Normal file
@ -0,0 +1,79 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Plan | Network</title>
|
||||
<meta name="description" content="Player Analysis window">
|
||||
<meta name="author" content="Rsl1122">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta charset=utf-8>
|
||||
<link rel="icon" href="https://puu.sh/tK0KL/6aa2ba141b.ico" type="image/x-icon">
|
||||
<link rel="stylesheet" href="./main.css">
|
||||
<link href="https://fonts.googleapis.com/css?family=Quicksand:300,400" rel="stylesheet">
|
||||
<script src="https://use.fontawesome.com/df48eb908b.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<div>
|
||||
<div class="right fa-stack fa-lg" style="padding: 23px; margin:8px">
|
||||
<i style="padding: 0; color: #fff; font-size: 100px;" class="fa fa-square fa-stack-1x"></i>
|
||||
<i style="padding: 0; color: #348e0f; font-size: 95px;" class="fa fa-square fa-stack-1x"></i>
|
||||
<i style="padding: 0; color: #fff; font-size: 60px;" class="fa fa-circle fa-stack-1x"></i>
|
||||
<div style="margin: 0; padding: 0; width: 100%; height: 100%; position: relative; overflow: hidden; top: -6px;">
|
||||
<i style="position: absolute; left: -4px; top: 8px; color: #348e0f; font-size: 40px;" class="fa fa-bar-chart fa-stack-1x"></i>
|
||||
</div>
|
||||
</div>
|
||||
<p class="right">Player Analytics v.${version}</p>
|
||||
<h1>${networkName} | Network</h1>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="headwrap">
|
||||
<div class="sidenav">
|
||||
<a class="nav-button" href="javascript:void(0)"><div title="Information" class="sidenav-button">
|
||||
<div><i class="fa fa-info-circle"></i></div>
|
||||
</div></a>
|
||||
<a class="nav-button"><div title="Coming Soon" class="sidenav-button sidenav-button-disabled">
|
||||
<div><i class="fa fa-area-chart"></i></div>
|
||||
</div></a>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="row">
|
||||
<div class="column">
|
||||
<div class="box-header">
|
||||
<h2><i class="fa fa-bar-chart"></i> Players Online</h2>
|
||||
</div>
|
||||
<div class="box-footer">
|
||||
<div id="playersOnline" style="width: 100%; height: 400px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
<div class="box-header">
|
||||
<h2><i class="fa fa-info-circle"></i> Information</h2>
|
||||
</div>
|
||||
<div class="box" style="height: 75%;">
|
||||
<p>${playersOnline} Players Online</p>
|
||||
<p>${playersTotal} Total Players</p>
|
||||
<p>${playersNewDay} New Players Today<br>${playersNewWeek} New Players This Week</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
${contentServers}
|
||||
</div>
|
||||
</div>
|
||||
<script src="https://code.highcharts.com/modules/no-data-to-display.js"></script>
|
||||
<script src="https://code.highcharts.com/stock/highstock.js"></script>
|
||||
<script src="./js/playerGraph.js"></script>
|
||||
<script>
|
||||
var playersOnlineSeries = {
|
||||
name: 'Players Online',
|
||||
data: ${playersOnlineSeries},
|
||||
type: 'areaspline',
|
||||
color: '${playersGraphColor}',
|
||||
tooltip: {
|
||||
valueDecimals: 0
|
||||
}
|
||||
};
|
||||
playersChart('playersOnline', playersOnlineSeries, 3);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,79 +1,400 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
|
||||
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
|
||||
<title>Plan | Network</title>
|
||||
<meta name="description" content="Player Analysis window">
|
||||
<meta name="author" content="Rsl1122">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta charset=utf-8>
|
||||
<link rel="icon" href="https://puu.sh/tK0KL/6aa2ba141b.ico" type="image/x-icon">
|
||||
<link rel="stylesheet" href="./main.css">
|
||||
<link href="https://fonts.googleapis.com/css?family=Quicksand:300,400" rel="stylesheet">
|
||||
<script src="https://use.fontawesome.com/df48eb908b.js"></script>
|
||||
<!-- Favicon-->
|
||||
<link rel="icon" href="favicon.ico" type="image/x-icon">
|
||||
|
||||
<!-- Google Fonts -->
|
||||
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700&subset=latin,cyrillic-ext" rel="stylesheet"
|
||||
type="text/css">
|
||||
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" type="text/css">
|
||||
|
||||
<!-- Bootstrap Core Css -->
|
||||
<link href="plugins/bootstrap/css/bootstrap.css" rel="stylesheet">
|
||||
|
||||
<!-- Waves Effect Css -->
|
||||
<link href="plugins/node-waves/waves.css" rel="stylesheet"/>
|
||||
|
||||
<!-- Animation Css -->
|
||||
<link href="plugins/animate-css/animate.css" rel="stylesheet"/>
|
||||
|
||||
<!-- Custom Css -->
|
||||
<link href="css/style.css" rel="stylesheet">
|
||||
|
||||
<!-- Plan Stylesheet -->
|
||||
<link href="css/main.css" rel="stylesheet">
|
||||
|
||||
<!-- AdminBSB Themes. You can choose a theme from css/themes instead of get all themes -->
|
||||
<link href="css/themes/all-themes.css" rel="stylesheet"/>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<div>
|
||||
<div class="right fa-stack fa-lg" style="padding: 23px; margin:8px">
|
||||
<i style="padding: 0; color: #fff; font-size: 100px;" class="fa fa-square fa-stack-1x"></i>
|
||||
<i style="padding: 0; color: #348e0f; font-size: 95px;" class="fa fa-square fa-stack-1x"></i>
|
||||
<i style="padding: 0; color: #fff; font-size: 60px;" class="fa fa-circle fa-stack-1x"></i>
|
||||
<div style="margin: 0; padding: 0; width: 100%; height: 100%; position: relative; overflow: hidden; top: -6px;">
|
||||
<i style="position: absolute; left: -4px; top: 8px; color: #348e0f; font-size: 40px;" class="fa fa-bar-chart fa-stack-1x"></i>
|
||||
</div>
|
||||
</div>
|
||||
<p class="right">Player Analytics v.${version}</p>
|
||||
<h1>${networkName} | Network</h1>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="headwrap">
|
||||
<div class="sidenav">
|
||||
<a class="nav-button" href="javascript:void(0)"><div title="Information" class="sidenav-button">
|
||||
<div><i class="fa fa-info-circle"></i></div>
|
||||
</div></a>
|
||||
<a class="nav-button"><div title="Coming Soon" class="sidenav-button sidenav-button-disabled">
|
||||
<div><i class="fa fa-area-chart"></i></div>
|
||||
</div></a>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="row">
|
||||
<div class="column">
|
||||
<div class="box-header">
|
||||
<h2><i class="fa fa-bar-chart"></i> Players Online</h2>
|
||||
</div>
|
||||
<div class="box-footer">
|
||||
<div id="playersOnline" style="width: 100%; height: 400px;"></div>
|
||||
</div>
|
||||
|
||||
<body class="theme-red">
|
||||
<!-- Page Loader -->
|
||||
<div class="page-loader-wrapper">
|
||||
<div class="loader">
|
||||
<div class="preloader">
|
||||
<div class="spinner-layer pl-red">
|
||||
<div class="circle-clipper left">
|
||||
<div class="circle"></div>
|
||||
</div>
|
||||
<div class="column">
|
||||
<div class="box-header">
|
||||
<h2><i class="fa fa-info-circle"></i> Information</h2>
|
||||
</div>
|
||||
<div class="box" style="height: 75%;">
|
||||
<p>${playersOnline} Players Online</p>
|
||||
<p>${playersTotal} Total Players</p>
|
||||
<p>${playersNewDay} New Players Today<br>${playersNewWeek} New Players This Week</p>
|
||||
</div>
|
||||
<div class="circle-clipper right">
|
||||
<div class="circle"></div>
|
||||
</div>
|
||||
</div>
|
||||
${contentServers}
|
||||
</div>
|
||||
</div>
|
||||
<p>Please wait...</p>
|
||||
</div>
|
||||
<script src="https://code.highcharts.com/modules/no-data-to-display.js"></script>
|
||||
</div>
|
||||
<!-- #END# Page Loader -->
|
||||
<!-- Overlay For Sidebars -->
|
||||
<div class="overlay"></div>
|
||||
<!-- #END# Overlay For Sidebars -->
|
||||
<!-- Search Bar -->
|
||||
<div class="search-bar">
|
||||
<div class="search-icon">
|
||||
<i class="material-icons">search</i>
|
||||
</div>
|
||||
<input type="text" placeholder="START TYPING...">
|
||||
<div class="close-search">
|
||||
<i class="material-icons">close</i>
|
||||
</div>
|
||||
</div>
|
||||
<!-- #END# Search Bar -->
|
||||
<!-- Top Bar -->
|
||||
<nav class="navbar">
|
||||
<div class="container-fluid">
|
||||
<div class="navbar-header">
|
||||
<a href="javascript:void(0);" class="navbar-toggle collapsed" data-toggle="collapse"
|
||||
data-target="#navbar-collapse" aria-expanded="false"></a>
|
||||
<a href="javascript:void(0);" class="bars"></a>
|
||||
<a class="navbar-brand">${networkName} | Network</a>
|
||||
</div>
|
||||
<div class="collapse navbar-collapse" id="navbar-collapse">
|
||||
<ul class="nav navbar-nav navbar-right">
|
||||
<!-- Call Search (Disabled)
|
||||
<li><a href="javascript:void(0);" class="js-search" data-close="true"><i class="material-icons">search</i></a></li>
|
||||
<!-- #END# Call Search -->
|
||||
<li class="pull-right"><a href="javascript:void(0);" class="js-right-sidebar" data-close="true"><i
|
||||
class="material-icons">settings</i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<!-- #Top Bar -->
|
||||
<section>
|
||||
<!-- Left Sidebar -->
|
||||
<aside id="leftsidebar" class="sidebar">
|
||||
<!-- Menu -->
|
||||
<div class="menu">
|
||||
<ul class="list">
|
||||
<li class="active">
|
||||
<a class="nav-button" href="javascript:void(0)">
|
||||
<i class="material-icons">info_outline</i>
|
||||
<span>Overview</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="nav-button" href="javascript:void(0)">
|
||||
<i class="material-icons">storage</i>
|
||||
<span>Servers</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- #Menu -->
|
||||
<!-- Footer -->
|
||||
<div class="legal">
|
||||
<div class="version">
|
||||
<b>Player Analytics: </b> v${version}
|
||||
</div>
|
||||
</div>
|
||||
<!-- #Footer -->
|
||||
</aside>
|
||||
<!-- #END# Left Sidebar -->
|
||||
<!-- Right Sidebar -->
|
||||
<aside id="rightsidebar" class="right-sidebar">
|
||||
<div class="tab-content">
|
||||
<div role="tabpanel" class="tab-pane fade in active in active" id="skins">
|
||||
<ul class="demo-choose-skin">
|
||||
<li data-theme="red" class="active">
|
||||
<div class="red"></div>
|
||||
<span>Red</span>
|
||||
</li>
|
||||
<li data-theme="pink">
|
||||
<div class="pink"></div>
|
||||
<span>Pink</span>
|
||||
</li>
|
||||
<li data-theme="purple">
|
||||
<div class="purple"></div>
|
||||
<span>Purple</span>
|
||||
</li>
|
||||
<li data-theme="deep-purple">
|
||||
<div class="deep-purple"></div>
|
||||
<span>Deep Purple</span>
|
||||
</li>
|
||||
<li data-theme="indigo">
|
||||
<div class="indigo"></div>
|
||||
<span>Indigo</span>
|
||||
</li>
|
||||
<li data-theme="blue">
|
||||
<div class="blue"></div>
|
||||
<span>Blue</span>
|
||||
</li>
|
||||
<li data-theme="light-blue">
|
||||
<div class="light-blue"></div>
|
||||
<span>Light Blue</span>
|
||||
</li>
|
||||
<li data-theme="cyan">
|
||||
<div class="cyan"></div>
|
||||
<span>Cyan</span>
|
||||
</li>
|
||||
<li data-theme="teal">
|
||||
<div class="teal"></div>
|
||||
<span>Teal</span>
|
||||
</li>
|
||||
<li data-theme="green">
|
||||
<div class="green"></div>
|
||||
<span>Green</span>
|
||||
</li>
|
||||
<li data-theme="light-green">
|
||||
<div class="light-green"></div>
|
||||
<span>Light Green</span>
|
||||
</li>
|
||||
<li data-theme="lime">
|
||||
<div class="lime"></div>
|
||||
<span>Lime</span>
|
||||
</li>
|
||||
<li data-theme="yellow">
|
||||
<div class="yellow"></div>
|
||||
<span>Yellow</span>
|
||||
</li>
|
||||
<li data-theme="amber">
|
||||
<div class="amber"></div>
|
||||
<span>Amber</span>
|
||||
</li>
|
||||
<li data-theme="orange">
|
||||
<div class="orange"></div>
|
||||
<span>Orange</span>
|
||||
</li>
|
||||
<li data-theme="deep-orange">
|
||||
<div class="deep-orange"></div>
|
||||
<span>Deep Orange</span>
|
||||
</li>
|
||||
<li data-theme="brown">
|
||||
<div class="brown"></div>
|
||||
<span>Brown</span>
|
||||
</li>
|
||||
<li data-theme="grey">
|
||||
<div class="grey"></div>
|
||||
<span>Grey</span>
|
||||
</li>
|
||||
<li data-theme="blue-grey">
|
||||
<div class="blue-grey"></div>
|
||||
<span>Blue Grey</span>
|
||||
</li>
|
||||
<li data-theme="black">
|
||||
<div class="black"></div>
|
||||
<span>Black</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
<!-- #END# Right Sidebar -->
|
||||
</section>
|
||||
|
||||
<section class="content">
|
||||
<div class="main-limiter">
|
||||
<div id="main">
|
||||
<div id="tab-overview" class="tab">
|
||||
<div class="col-xs-12 col-sm-12 col-md-8 col-lg-8">
|
||||
<div class="card">
|
||||
<div class="header">
|
||||
<h2><i class="col-blue fa fa-area-chart"></i> Network Online Activity</h2>
|
||||
</div>
|
||||
<div class="body">
|
||||
<div id="playerChartDay" class="dashboard-flot-chart"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Network Information -->
|
||||
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
|
||||
<div class="card">
|
||||
<div class="body bg-white">
|
||||
<div class="m-b--35 font-bold">NETWORK INFORMATION</div>
|
||||
<ul class="dashboard-stat-list">
|
||||
<li>
|
||||
<i class="fa fa-users"></i> Total Players
|
||||
<span class="pull-right"><b>${playersTotal}</b></span>
|
||||
</li>
|
||||
<li>
|
||||
<i class="col-blue fa fa-user"></i> Unique Players / Day
|
||||
<small>(AVG.)</small>
|
||||
<span class="pull-right"><b>${playersAverage}</b></span>
|
||||
</li>
|
||||
<li>
|
||||
<i class="col-light-green fa fa-user-plus"></i> New Players / Day
|
||||
<small>(AVG.)</small>
|
||||
<span class="pull-right"><b>${playersNewAverage}</b></span>
|
||||
</li>
|
||||
<li></li>
|
||||
<li><i class="col-green fa fa-line-chart"></i> Last Peak: ${lastPeakTime}<span
|
||||
class="pull-right"><b>${playersLastPeak}</b> Players</span></li>
|
||||
<li><i class="col-blue fa fa-line-chart"></i> All Time Peak: ${bestPeakTime}<span
|
||||
class="pull-right"><b>${playersBestPeak}</b> Players</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="body bg-white">
|
||||
<div class="m-b--35 font-bold">PLAYERS</div>
|
||||
<ul class="dashboard-stat-list">
|
||||
<li>
|
||||
<i class="col-blue fa fa-users"></i> Unique | 24h
|
||||
<span class="pull-right"><b>${playersUniqueDay}</b></span>
|
||||
</li>
|
||||
<li>
|
||||
<i class="col-light-green fa fa-user-plus"></i> New | 24h
|
||||
<span class="pull-right"><b>${playersNewDay}</b></span>
|
||||
</li>
|
||||
<li>
|
||||
<i class="col-blue fa fa-users"></i> Unique | 7d
|
||||
<span class="pull-right"><b>${playersUniqueWeek}</b></span>
|
||||
</li>
|
||||
<li>
|
||||
<i class="col-light-green fa fa-user-plus"></i> New | 7d
|
||||
<span class="pull-right"><b>${playersNewWeek}</b></span>
|
||||
</li>
|
||||
<li>
|
||||
<i class="col-blue fa fa-users"></i> Unique | 30d
|
||||
<span class="pull-right"><b>${playersUniqueMonth}</b></span>
|
||||
</li>
|
||||
<li>
|
||||
<i class="col-light-green fa fa-user-plus"></i> New | 30d
|
||||
<span class="pull-right"><b>${playersNewMonth}</b></span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- #END# Network Information -->
|
||||
</div>
|
||||
<!-- #END# Tab Overview -->
|
||||
<div id="tab-servers" class="tab">
|
||||
${tabContentServers}
|
||||
</div>
|
||||
<!-- #END# Tab Servers -->
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Jquery Core Js -->
|
||||
<script src="plugins/jquery/jquery.min.js"></script>
|
||||
|
||||
<!-- Bootstrap Core Js -->
|
||||
<script src="plugins/bootstrap/js/bootstrap.js"></script>
|
||||
|
||||
<!-- Slimscroll Plugin Js -->
|
||||
<script src="plugins/jquery-slimscroll/jquery.slimscroll.js"></script>
|
||||
|
||||
<!-- Waves Effect Plugin Js -->
|
||||
<script src="plugins/node-waves/waves.js"></script>
|
||||
|
||||
<!-- HighCharts -->
|
||||
<script src="https://code.highcharts.com/stock/highstock.js"></script>
|
||||
<script src="https://code.highcharts.com/modules/no-data-to-display.js"></script>
|
||||
|
||||
<!-- Font Awesome -->
|
||||
<script src="https://use.fontawesome.com/df48eb908b.js"></script>
|
||||
|
||||
<!-- Header, Sidenav & Skin changer -->
|
||||
<script src="js/admin.js"></script>
|
||||
|
||||
<!-- Plan Charts -->
|
||||
<script src="./js/playerGraph.js"></script>
|
||||
|
||||
<!-- Chart Data -->
|
||||
<script>
|
||||
var playersOnlineSeries = {
|
||||
name: 'Players Online',
|
||||
data: ${playersOnlineSeries},
|
||||
type: 'areaspline',
|
||||
color: '${playersGraphColor}',
|
||||
tooltip: {
|
||||
valueDecimals: 0
|
||||
}
|
||||
};
|
||||
playersChart('playersOnline', playersOnlineSeries, 3);
|
||||
Highcharts.setOptions({
|
||||
lang: {noData: "No Data to Display"},
|
||||
global: {
|
||||
timezoneOffset: ${timeZone} * 60
|
||||
}
|
||||
})
|
||||
;
|
||||
// Data Variables
|
||||
var playersOnlineSeries = {
|
||||
name: 'Players Online',
|
||||
data: ${playersOnlineSeries},
|
||||
type: 'areaspline',
|
||||
color: '${playersGraphColor}',
|
||||
tooltip: {
|
||||
valueDecimals: 0
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<!-- Plan load script -->
|
||||
<script>
|
||||
$(function () {
|
||||
|
||||
var navButtons = document.getElementsByClassName("nav-button");
|
||||
var tabs = document.getElementsByClassName("tab");
|
||||
var slideIndex = window.sessionStorage.getItem("AnalysisSlideIndex");
|
||||
if (slideIndex === null) {
|
||||
slideIndex = 0;
|
||||
}
|
||||
var x = document.getElementById("main");
|
||||
x.style.transform = "translate3d(0px,0px,0)";
|
||||
x.style.width = "" + navButtons.length * 100 + "%";
|
||||
for (var i = 0; i < navButtons.length; i++) {
|
||||
navButtons[i].onclick = openFunc(i);
|
||||
tabs[i].style.width = "" + 100 / navButtons.length + "%";
|
||||
}
|
||||
x.style.opacity = "1";
|
||||
openFunc(slideIndex)();
|
||||
|
||||
// Chart draw scripts
|
||||
/*playersChart('playerChartDay', playersOnlineSeries, 1);
|
||||
${serverTabGraphViewFunctions}
|
||||
/**/
|
||||
|
||||
function openFunc(i) {
|
||||
return function () {
|
||||
var max = navButtons.length;
|
||||
for (var j = 0; j < max; j++) {
|
||||
if (navButtons[j].parentElement.classList.contains('active')) {
|
||||
navButtons[j].parentElement.classList.remove('active');
|
||||
}
|
||||
if (j == i) {
|
||||
navButtons[j].parentElement.classList.add('active');
|
||||
|
||||
}
|
||||
}
|
||||
var percent = -100 / navButtons.length;
|
||||
slideIndex = i;
|
||||
if (slideIndex > max) {
|
||||
slideIndex = 0
|
||||
}
|
||||
if (slideIndex < 0) {
|
||||
slideIndex = max
|
||||
}
|
||||
window.sessionStorage.setItem("AnalysisSlideIndex", slideIndex);
|
||||
var value = slideIndex * percent;
|
||||
x.style.transition = "0.5s";
|
||||
x.style.transform = "translate3d(" + value + "%,0px,0)";
|
||||
};
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<!-- Demo Js -->
|
||||
<script src="js/demo.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Loading…
Reference in New Issue
Block a user