mirror of
https://github.com/BeamMP/BeamMP-Website.git
synced 2026-06-19 07:11:01 +00:00
Initial Website Setup
This commit is contained in:
Starystars67
@@ -0,0 +1,8 @@
|
||||
<footer>
|
||||
<div class="container-fluid">
|
||||
<p class="text-gray-dark">
|
||||
<strong class="m-r-1">BeamMP Mod Team </strong>
|
||||
<span class="text-gray-dark">© 2020 - Present.</span>
|
||||
</p>
|
||||
</div>
|
||||
</footer>
|
||||
@@ -0,0 +1,43 @@
|
||||
<div class="container">
|
||||
<div class="row center-xs">
|
||||
<div class="col-md-4 col-sm-4">
|
||||
<a href class="logo-link">
|
||||
<span class="logo-text">BeamMP</span>
|
||||
<!--<img src="../img/beammp-logo.png"></img>-->
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-md-8 col-sm-8">
|
||||
<ul class="links">
|
||||
<li>
|
||||
<a href="/forum">
|
||||
<span class="text">Forum</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://wiki.beamng-mp.com">
|
||||
<span class="text">Docs</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/servers">
|
||||
<span class="text">Servers</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/stats">
|
||||
<span class="text">Statistics</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://github.com/Starystars67/BeamNG-MP">
|
||||
<span class="text">Github</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://www.patreon.com/BeamNGMP">
|
||||
<span class="text">Patreon</span>
|
||||
</a>
|
||||
</li>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,141 @@
|
||||
<div class="navbar-inverse navbar navbar-fixed-top">
|
||||
<div class="container-fluid">
|
||||
|
||||
<div class="navbar-header">
|
||||
<a class="current navbar-brand" href="/">
|
||||
<img alt="BeamMP Logo" class="h-20" src="../img/beammp-logo.png">
|
||||
</a>
|
||||
<button class="action-right-sidebar-toggle navbar-toggle collapsed" data-target="#navdbar" data-toggle="collapse" type="button">
|
||||
<i class="fa fa-fw fa-align-right text-white"></i>
|
||||
</button>
|
||||
<button class="navbar-toggle collapsed" data-target="#navbar" data-toggle="collapse" type="button">
|
||||
<i class="fa fa-fw fa-user text-white"></i>
|
||||
</button>
|
||||
<button class="action-sidebar-open navbar-toggle collapsed" type="button">
|
||||
<i class="fa fa-fw fa-bars text-white"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="collapse navbar-collapse" id="navbar">
|
||||
|
||||
<!-- START Left Side Navbar -->
|
||||
<ul class="nav navbar-nav navbar-left clearfix yamm">
|
||||
|
||||
<!-- START Switch Sidebar ON/OFF -->
|
||||
<li id="sidebar-switch" class="hidden-xs">
|
||||
<a class="action-toggle-sidebar-slim" data-placement="bottom" data-toggle="tooltip" href="#" title="Slim sidebar on/off">
|
||||
<i class="fa fa-lg fa-bars fa-fw"></i>
|
||||
</a>
|
||||
</li>
|
||||
<!-- END Switch Sidebar ON/OFF -->
|
||||
</ul>
|
||||
<!-- START Left Side Navbar -->
|
||||
|
||||
<!-- START Right Side Navbar -->
|
||||
<ul class="nav navbar-nav navbar-right">
|
||||
|
||||
<li role="separator" class="divider hidden-lg hidden-md hidden-sm"></li>
|
||||
<li class="dropdown-header hidden-lg hidden-md hidden-sm text-gray-lighter text-uppercase">
|
||||
<strong>Your Profile</strong>
|
||||
</li>
|
||||
|
||||
<!-- START Notification -->
|
||||
<li class="dropdown">
|
||||
|
||||
<!-- START Icon Notification with Badge (10)-->
|
||||
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button">
|
||||
<i class="fa fa-lg fa-fw fa-bell hidden-xs"></i>
|
||||
<span class="hidden-sm hidden-md hidden-lg">
|
||||
Notifications <span class="badge badge-primary m-l-1"></span>
|
||||
</span>
|
||||
<span class="label label-primary label-pill label-with-icon hidden-xs"></span>
|
||||
<span class="fa fa-fw fa-angle-down hidden-lg hidden-md hidden-sm"></span>
|
||||
</a>
|
||||
<!-- END Icon Notification with Badge (10)-->
|
||||
|
||||
<!-- START Notification Dropdown Menu -->
|
||||
<ul class="dropdown-menu dropdown-menu-right p-t-0 b-t-0 p-b-0 b-b-0 b-a-0">
|
||||
<li>
|
||||
<div class="yamm-content p-t-0 p-r-0 p-l-0 p-b-0">
|
||||
<ul class="list-group m-b-0 b-b-0">
|
||||
<li class="list-group-item b-r-0 b-l-0 b-r-0 b-t-r-0 b-t-l-0 b-b-2 w-350">
|
||||
<small class="text-uppercase">
|
||||
<strong>Notifications</strong>
|
||||
</small>
|
||||
<!--<a role="button" href="#" class="btn m-t-0 btn-xs btn-default pull-right">
|
||||
<i class="fa fa-fw fa-gear"></i>
|
||||
</a>-->
|
||||
</li>
|
||||
|
||||
<!-- START Scroll Inside Panel -->
|
||||
<li class="list-group-item b-a-0 p-x-0 p-y-0 b-t-0">
|
||||
<div class="scroll-300 custom-scrollbar">
|
||||
<!--<a href="../pages/timeline.html" class="list-group-item b-r-0 b-t-0 b-l-0">
|
||||
<div class="media">
|
||||
<div class="media-left">
|
||||
<span class="fa-stack fa-lg">
|
||||
<i class="fa fa-circle-thin fa-stack-2x text-danger"></i>
|
||||
<i class="fa fa-close fa-stack-1x fa-fw text-danger"></i>
|
||||
</span>
|
||||
</div>
|
||||
<div class="media-body">
|
||||
<h5 class="m-t-0">
|
||||
<span>We need to compress the open-source SAS protocol!</span>
|
||||
</h5>
|
||||
<p class="text-nowrap small m-b-0">
|
||||
<span>24-Jan-2020, 09:41</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>-->
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<!-- END Scroll Inside Panel -->
|
||||
<li class="list-group-item b-a-0 p-x-0 p-y-0 r-a-0 b-b-0">
|
||||
<a class="list-group-item text-center b-r-0 b-b-0 b-l-0 b-r-b-r-0 b-r-b-l-0" href="/notifications">
|
||||
See All Notifications <i class="fa fa-angle-right"></i>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</li>
|
||||
</ul>
|
||||
<!-- END Notification Dropdown Menu -->
|
||||
|
||||
</li>
|
||||
<!-- END Notification -->
|
||||
|
||||
<li class="dropdown">
|
||||
<a class="dropdown-toggle user-dropdown" data-toggle="dropdown" href="#" role="button">
|
||||
<span class="m-r-1"><%= user.username %>#<%= user.discriminator%></span>
|
||||
<div class="avatar avatar-image avatar-sm avatar-inline">
|
||||
<img alt="User" src="https://cdn.discordapp.com/avatars/<%= user.discord.id %>/<%= user.discord.avatar %>.png">
|
||||
</div>
|
||||
</a>
|
||||
<ul class="dropdown-menu">
|
||||
<li class="dropdown-header text-gray-lighter">
|
||||
<strong class="text-uppercase">Account</strong>
|
||||
</li>
|
||||
<li role="separator" class="divider"></li>
|
||||
<li>
|
||||
<a href="/profile-details">Your Profile</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">Settings <span class="label label-danger label-outline">Coming Soon</span></a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://wiki.beamng-mp.com/">Wiki <span class="label label-primary label-outline">In-Progress</span></a>
|
||||
</li>
|
||||
<li role="separator" class="divider"></li>
|
||||
<li>
|
||||
<a href="/logout">Sign Out</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<!-- END Right Side Navbar -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
+224
@@ -0,0 +1,224 @@
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<title>BeamMP</title>
|
||||
<link rel="stylesheet" type="text/css" href="css/styles.css"/>
|
||||
<!-- <link rel="stylesheet" type="text/css" href="../static/css/styles.css"/>-->
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/>
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
|
||||
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
|
||||
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
|
||||
<script src="https://kit.fontawesome.com/90f05b466c.js" crossorigin="anonymous"></script>
|
||||
<!-- Global site tag (gtag.js) - Google Analytics -->
|
||||
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-160071688-1"></script>
|
||||
<script>
|
||||
window.dataLayer = window.dataLayer || [];
|
||||
function gtag(){dataLayer.push(arguments);}
|
||||
gtag('js', new Date());
|
||||
|
||||
gtag('config', 'UA-160071688-1');
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<nav class="nav">
|
||||
<%- include('includes/nav.ejs') %>
|
||||
|
||||
</nav>
|
||||
|
||||
<header class="main-content" style="background-position: center center, center 0px;">
|
||||
<div class="introduction" style="margin-top: 0px;">
|
||||
<div class="container">
|
||||
<div class="row center-xs middle-xs">
|
||||
<div class="col-lg-8 col-md-8 col-sm-8 col-xs-12">
|
||||
<p class="lead">
|
||||
<b>BeamMP</b> Bringing Multiplayer to BeamNG.drive!<br>
|
||||
With a smooth and enjoyable experience.
|
||||
</div>
|
||||
<div id="button" class="col-lg-4 col-md-4 col-sm-4 buttons-wrapper hidden-xs">
|
||||
<div class="buttons">
|
||||
<button class="download-client js-show-story" onclick="downloadinstaller()" href="beamMP.zip" download>
|
||||
<span class="text">Download Client</span>
|
||||
<span class="description"> BeamMP_Installer.zip</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="buttons mt-3">
|
||||
<button class="download-client js-show-story" onclick="downloadserver()" href="beamMP.zip" download style="background: radial-gradient(circle,rgb(255 179 38 / 80%),rgb(255 176 0 / 65%)) center/100%;">
|
||||
<span class="text">Download Server</span>
|
||||
<span class="description"> BeamMP_Server.zip</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<section id="features">
|
||||
<div class="container">
|
||||
<div class="row center-lg center-md center-sm center-xs features">
|
||||
<article class="col-lg-3">
|
||||
<h2>Stable Servers</h2>
|
||||
BeamMP allows for stable servers,
|
||||
with a variety of servers located accross the globe.
|
||||
</article>
|
||||
<article class="col-lg-3 col-md-6 col-sm-6 col-xs-12">
|
||||
<h2> BeamNG.drive </h2> BeamMP uses the same maps, vehicles & mods
|
||||
so you don't need to learn anything new!
|
||||
</article>
|
||||
<article class="col-lg-3 col-md-6 col-sm-6 col-xs-12">
|
||||
<h2> Standalone </h2> BeamMP doesn't modify your original installation,
|
||||
so you can play either singleplayer or multiplayer.
|
||||
</article>
|
||||
<article class="col-lg-3 col-md-6 col-sm-6 col-xs-12">
|
||||
<h2> Sync quality </h2> BeamMP updates your vehicle position ~100 per second,
|
||||
allowing for a smooth overall experience.
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
<div class="row middle-lg">
|
||||
<div class="col-lg-6">
|
||||
<figure>
|
||||
<!-- <img src="../img/beammpservers.png">-->
|
||||
<img src="../img/beammpservers.png">
|
||||
</figure>
|
||||
</div>
|
||||
<div class="col-lg-6" style="text-align:center">
|
||||
<ul class="user-features-list">
|
||||
<li> Dedicated servers </li>
|
||||
<li> The original BeamNG.Drive</li>
|
||||
<li> Dedicated support team</li>
|
||||
<li> 24/7 Global Access</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
<hr>
|
||||
<section id="faq">
|
||||
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
|
||||
<div class="container">
|
||||
<!-- <div class="row"> -->
|
||||
<h1>FAQ.</h1>
|
||||
<div class="faq">
|
||||
<h3 id="faq-heading">The server list is not showing up!</h3>
|
||||
<p>Try restarting BeamMP as this can sometimes happen, if this fails to fix your issue please create a ticket in the discord</p>
|
||||
<h3 id="faq-heading">How do I open a ticket in case something doesn’t work or I have questions?</h3>
|
||||
<p>Please check the <b>#how-to-use</b> channel in Discord. Please give an accurate description of what you’ve done so the support team will help you in a fast and effective way. </p>
|
||||
<h3 id="faq-heading">Help! Im getting error codes</h3>
|
||||
<p>Please open a ticket in our Discord.</p>
|
||||
<h3 id="faq-heading"> Does this work with pirated versions of BeamNG.drive?</h3>
|
||||
<p>We don’t know if it works with pirated versions of BeamNG.drive, but we <b>will not</b> provide any support to non legit copies of the game.</p>
|
||||
<h3 id="faq-heading">How do I host a server?</h3>
|
||||
<p>In order access the files needed to host a server you have to become a Patreon supporter or a “Server Booster”. You can find the Patreon <a href="https://www.patreon.com/BeamNGMP">here</a>. You can become a Server Booster
|
||||
by clicking the server Discord name and then Server Boost in Discord. Both these categories will have early access to newer versions of the mod too.
|
||||
Don't worry the server files will eventually be open for the public once we are happy enough to release them. </p>
|
||||
<h3 id="faq-heading">Can I use mods?</h3>
|
||||
<p>Mods are supported in the new version v2.0. These are installed on the server. See our <a href="https://wiki.beamng-mp.com/en/home/Server_Mod">wiki</a> for more infomation.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer class="py-5">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-6 col-sm-4 text-xs-center order-sm-2">
|
||||
<a class="text-white" target="_blank" href="https://www.reddit.com/r/BeamMP/">
|
||||
<i class="fab fa-reddit"></i>
|
||||
</a>
|
||||
|
||||
<a class="text-white" target="_blank" href="https://twitter.com/BeamNG_MP">
|
||||
<i class="fab fa-twitter"></i>
|
||||
</a>
|
||||
|
||||
<a class="text-white" target="_blank" href="https://www.facebook.com/BeamNGMP">
|
||||
<i class="fab fa-facebook"></i>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="col-6 justify-content-between col-sm-4 text-right text-xs-center order-sm-3">
|
||||
|
||||
<a class="text-white" target="_blank" href="https://github.com/Starystars67/BeamNG-MP-docs">
|
||||
<i class="fab fa-github"></i>
|
||||
</a>
|
||||
|
||||
<a class="text-white" target="_blank" href="https://discord.gg/beammp">
|
||||
<i class="fab fa-discord"></i>
|
||||
</a>
|
||||
|
||||
<a class="text-white" target="_blank" href="https://www.beamng.com/threads/beamng-drive-multiplayer-beamng-mp-formally-local-multiplayer-lua-based.63052/">
|
||||
<i class="fa fa-envelope"></i>
|
||||
</a>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-sm-4 text-center py-4 order-sm-2">
|
||||
<small class="text-white">© 2020 BeamMP Mod Team All Rights Reserved</small>
|
||||
</br>
|
||||
<small class="ml-1"><a href="https://forum.beamng-mp.com/topic/95/privacy-policy-v1-0?_=1605727272235" target="_blank">Privacy Policy</a></small>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
<!-- <footer class="">
|
||||
<div class="col-1 justify-content-between socials-left">
|
||||
<ul class="list-inline">
|
||||
|
||||
<li class="col-xs-4 list-inline-item h3" data-toggle="tooltip" data-placement="top" title="" aria-label="Reddit" data-original-title="Reddit">
|
||||
<a class="text-white" target="_blank" href="https://www.reddit.com/user/BeamNG-MP_Mod_Team">
|
||||
<i class="fab fa-reddit"></i>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="col-xs-4 list-inline-item h3" data-toggle="tooltip" data-placement="top" title="" aria-label="Twitter" data-original-title="Twitter">
|
||||
<a class="text-white" target="_blank" href="https://twitter.com/BeamNG_MP">
|
||||
<i class="fab fa-twitter"></i>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="col-xs-4 list-inline-item h3" data-toggle="tooltip" data-placement="top" title="" aria-label="Facebook" data-original-title="Facebook">
|
||||
<a class="text-white" target="_blank" href="https://www.facebook.com/BeamNGMP">
|
||||
<i class="fab fa-facebook"></i>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="row middle-xs">
|
||||
<hr>
|
||||
<div class="col-lg-8 col-md-7 col-sm-6">
|
||||
<p>BeamNG-MP is not affiliated by BeamNG.Drive, Any trademarks belong to the respective owners.
|
||||
</p>
|
||||
</div>
|
||||
<div class="copyright col-lg-4 col-md-5 col-sm-6">
|
||||
<p class="righty"> © 2020 BeamNG-MP Mod Team All Rights Reserved.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer> -->
|
||||
<script>
|
||||
function downloadinstaller() {
|
||||
document.location.href ="/installer/BeamMP_Installer.zip";
|
||||
//alert("Sorry this is coming soon, Therefore it is not available just yet. Please join the discord to get the latest version: https://discord.gg/beammp")
|
||||
}
|
||||
|
||||
function downloadserver() {
|
||||
document.location.href ="/server/BeamMP_Server.zip";
|
||||
//alert("Sorry this is coming soon, Therefore it is not available just yet. Please join the discord to get the latest version: https://discord.gg/beammp")
|
||||
}
|
||||
|
||||
function myFunction() {
|
||||
var x = document.getElementById("burger-links");
|
||||
if (x.style.display === "block") {
|
||||
x.style.display = "none";
|
||||
} else {
|
||||
x.style.display = "block";
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<script src="js/script.js"></script>
|
||||
<!-- <script src="../static/js/script.js"></script>-->
|
||||
</body>
|
||||
@@ -0,0 +1,88 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
|
||||
<meta name="description" content="" />
|
||||
<meta name="author" content="" />
|
||||
<title>BeamNG-MP-Servers</title>
|
||||
<link href="css/servers-styles.css" rel="stylesheet" />
|
||||
<link href="https://cdn.datatables.net/1.10.20/css/dataTables.bootstrap4.min.css" rel="stylesheet" crossorigin="anonymous" />
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/js/all.min.js" crossorigin="anonymous"></script>
|
||||
<!-- Global site tag (gtag.js) - Google Analytics -->
|
||||
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-160071688-1"></script>
|
||||
<script>
|
||||
window.dataLayer = window.dataLayer || [];
|
||||
function gtag(){dataLayer.push(arguments);}
|
||||
gtag('js', new Date());
|
||||
|
||||
gtag('config', 'UA-160071688-1');
|
||||
</script>
|
||||
</head>
|
||||
<body class="sb-nav-fixed">
|
||||
<span id="TEMPAREA" style="display:none;"></span>
|
||||
<nav class="sb-topnav navbar navbar-expand navbar-dark bg-dark">
|
||||
<%- include('includes/nav.ejs') %>
|
||||
</nav>
|
||||
<div id="layoutSidenav_content">
|
||||
<main>
|
||||
<br>
|
||||
<br>
|
||||
<div class="container-fluid">
|
||||
<h1 class="mt-4">Server List</h1>
|
||||
<div class="card mb-4">
|
||||
<div class="card-header"><i class="fas fa-server mr-1"></i>BeamNG-MP Server List</div>
|
||||
<div class="card-body">
|
||||
<div class="table-responsive">
|
||||
<table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Location</th>
|
||||
<th>Server Name</th>
|
||||
<th>Map</th>
|
||||
<th>Ping</th>
|
||||
<th>Online Since</th>
|
||||
<th>Players</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>Location</th>
|
||||
<th>Server Name</th>
|
||||
<th>Map</th>
|
||||
<th>Ping</th>
|
||||
<th>Online Since</th>
|
||||
<th>Players</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
<tbody id="Servers-List">
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<footer class="py-4 bg-light mt-auto">
|
||||
<div class="container-fluid">
|
||||
<div class="d-flex align-items-center justify-content-between small">
|
||||
<div class="text-muted">Copyright © BeamNG-MP Development Team 2020</div>
|
||||
<div>
|
||||
<a href="#">Privacy Policy</a>
|
||||
·
|
||||
<a href="#">Terms & Conditions</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
<script src="https://code.jquery.com/jquery-3.4.1.min.js" crossorigin="anonymous"></script>
|
||||
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
|
||||
<script src="js/scripts.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js" crossorigin="anonymous"></script>
|
||||
<script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js" crossorigin="anonymous"></script>
|
||||
<script src="https://cdn.datatables.net/1.10.20/js/dataTables.bootstrap4.min.js" crossorigin="anonymous"></script>
|
||||
<script src="js/datatables-demo.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
+144
@@ -0,0 +1,144 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
|
||||
<meta name="description" content="" />
|
||||
<meta name="author" content="" />
|
||||
<title>BeamNG-MP-Statistics</title>
|
||||
<link href="css/servers-styles.css" rel="stylesheet" />
|
||||
<link href="https://cdn.datatables.net/1.10.20/css/dataTables.bootstrap4.min.css" rel="stylesheet" crossorigin="anonymous" />
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/js/all.min.js" crossorigin="anonymous"></script>
|
||||
<!-- Global site tag (gtag.js) - Google Analytics -->
|
||||
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-160071688-1"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
|
||||
<script>
|
||||
window.dataLayer = window.dataLayer || [];
|
||||
function gtag(){dataLayer.push(arguments);}
|
||||
gtag('js', new Date());
|
||||
|
||||
gtag('config', 'UA-160071688-1');
|
||||
</script>
|
||||
</head>
|
||||
<body class="sb-nav-fixed">
|
||||
<nav class="sb-topnav navbar navbar-expand navbar-dark bg-dark">
|
||||
<%- include('includes/nav.ejs') %>
|
||||
</nav>
|
||||
<div id="layoutSidenav_content">
|
||||
<main>
|
||||
<br>
|
||||
<br>
|
||||
<div class="container-fluid">
|
||||
<h1 class="mt-4"><i class="fas fa-server mr-1"></i>BeamMP Statistics <span id="LivePlayerCount"></span></h1>
|
||||
<div style="height: 800px;">
|
||||
<canvas id="myChart" width="400" height="770"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<footer class="py-4 bg-light mt-auto">
|
||||
<div class="container-fluid">
|
||||
<div class="d-flex align-items-center justify-content-between small">
|
||||
<div class="text-muted">Copyright © BeamNG-MP Development Team 2020</div>
|
||||
<div>
|
||||
<a href="#">Privacy Policy</a>
|
||||
·
|
||||
<a href="#">Terms & Conditions</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
<script src="https://code.jquery.com/jquery-3.4.1.min.js" crossorigin="anonymous"></script>
|
||||
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js" crossorigin="anonymous"></script>
|
||||
<script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js" crossorigin="anonymous"></script>
|
||||
<script src="https://cdn.datatables.net/1.10.20/js/dataTables.bootstrap4.min.js" crossorigin="anonymous"></script>
|
||||
<script type="text/javascript">
|
||||
var chartData = {};
|
||||
|
||||
var GetChartData = function () {
|
||||
$.ajax({
|
||||
type: 'POST',
|
||||
url: '/stats',
|
||||
data: {
|
||||
period: 'today',
|
||||
},
|
||||
dataType: 'json',
|
||||
success: function (d) {
|
||||
var Data = {}
|
||||
Data.Players = []
|
||||
Data.Servers = []
|
||||
Data.Labels = []
|
||||
console.log(d.history)
|
||||
d.history.forEach(function(item, index) {
|
||||
Data.Players.push(item.players)
|
||||
Data.Servers.push(item.servers)
|
||||
Data.Labels.push(item.datetime)
|
||||
});
|
||||
console.log(Data)
|
||||
var ctx = document.getElementById('myChart').getContext('2d');
|
||||
ctx.height = 770;
|
||||
var myChart = new Chart(ctx, {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: Data.Labels,
|
||||
datasets: [{
|
||||
label: 'Servers',
|
||||
backgroundColor: 'rgba(255,0,0,0.1)',
|
||||
borderColor: 'rgba(255,0,0,0.4)',
|
||||
data: Data.Servers,
|
||||
fill: false,
|
||||
}, {
|
||||
label: 'Players',
|
||||
fill: false,
|
||||
backgroundColor: 'rgba(0,0,255,0.1)',
|
||||
borderColor: 'rgba(0,0,255,0.4)',
|
||||
data: Data.Players,
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
title: {
|
||||
display: true,
|
||||
text: 'BeamNG-MP Statistics'
|
||||
},
|
||||
tooltips: {
|
||||
mode: 'index',
|
||||
intersect: false,
|
||||
},
|
||||
hover: {
|
||||
mode: 'nearest',
|
||||
intersect: true
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
display: true,
|
||||
scaleLabel: {
|
||||
display: true,
|
||||
labelString: 'Time'
|
||||
}
|
||||
},
|
||||
y: {
|
||||
display: true,
|
||||
scaleLabel: {
|
||||
display: true,
|
||||
labelString: 'Count'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
$(document).ready(function() {
|
||||
GetChartData();
|
||||
});
|
||||
|
||||
//const socket = io('./stats');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user