projectswg-bitbucket/holocore
1
0
Fork 0
mirror of https://bitbucket.org/projectswg/holocore.git synced 2026-01-15 22:04:17 -05:00
Code Issues Projects Releases Wiki Activity

Redid the Server Management Interface

Browse Source
This commit is contained in:
Tacef Ine
2015-10-22 15:35:22 +02:00
parent 832e9442e2
commit 85c9736e2d
9 changed files with 272 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files

159
res/webserver/authenticated.html
View File

@@ -1,91 +1,68 @@
<html>
<head>
<title>Game Server Diagnostics</title>
<style type="text/css">
body {
background-color: #FFFFFF;
}
.main_container {
width: 75%;
color: #000000;
margin: 0 auto;
}
.memory_container {
width: 50%;
max-width: 50%;
height: 300px;
float: left;
color: #000000;
display: inline-block;
}
.log_container {
width: 100%;
color: #000000;
font-family: 'Courier New', Courier, 'Lucida Sans Typewriter', 'Lucida Typewriter', monospace;
font-size: 13px;
overflow: visible;
}
.server_info {
width: 50%;
max-width: 50%;
height: 300px;
float: right;
display: inline-block;
font-family: 'Courier New', Courier, 'Lucida Sans Typewriter', 'Lucida Typewriter', monospace;
font-size: 13px;
overflow-x: hidden;
overflow-y: scroll;
}
.online_players_table {
width: 100%;
}
.online_player_cell {
border: 1px solid black;
padding-left: 3px;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script>
getUrlParameter = function getUrlParameter(sParam) {
var sPageURL = decodeURIComponent(window.location.search.substring(1)), sURLVariables = sPageURL.split('&'), sParameterName, i;
for (i = 0; i < sURLVariables.length; i++) {
sParameterName = sURLVariables[i].split('=');
if (sParameterName[0] === sParam) {
return sParameterName[1] === undefined ? true : sParameterName[1];
}
}
return undefined;
};
function updateServerInfo() {
// d = new Date();
// $("#memory_usage").attr("src", "memory_usage.png?"+d.getTime());
// $("#server_info").attr("src", $("#server_info").attr("src"));
location.reload(true);
}
$(document).ready(function() {
var time = getUrlParameter("refresh");
if (time === undefined)
time = 3000;
setInterval(updateServerInfo, time);
});
</script>
</head>
<body>
<div class="main_container">
<div width="100%" height="300px">
<div class="memory_container">
Resource Usage:<br />
<image id="memory_usage" src="memory_usage.png" width="100%" />
</div>
<div class="server_info">
${ONLINE_PLAYERS}
<br />
${CHARACTER_INFO}
</div>
</div>
<div class="log_container">
${LOG}
</div>
</div>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ProjectSWG Server Management Interface</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<link href="css/auth.css" rel="stylesheet" type="text/css" />
<link rel="icon" type="image/x-icon" href="favicon.ico" />
<script type="text/javascript" src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(document).ready(
function () {
setInterval(function () {
var newDate = new Date();
var datetime = newDate.getTime();
$('#resource_img').html('<img src="memory_usage.png?currenttime?' + datetime + '" style="width:624px;height:225px;" alt="memory_usage" />');
$('#online_players_count').load('playercount.html');
$('#online_players').load('online.html');
$('#character_info').load('charinfo.html');
$('#log_container').load('log.html');
},3000);
});
</script>
</head>
<body>
<div class="header"><div class="logo_small"></div></div>
<div class="wrapper">
<div class="content_wrapper">
<div class="stats_wrapper">
<div id="memory_container" class="memory_container">
<div class="resoure_label">
Resource Usage
</div>
<div id="resource_img" class="resource_img">
<img src="memory_usage.png" style="width:624px;height:225px;" alt="memory_usage" />
</div>
</div>
<div class="dist">&nbsp;</div>
<div class="server_info">
<div id="online_players_count" class="online_players_count">
${ONLINE_PLAYER_COUNT}
</div>
<div id="online_players" class="online_players">
${ONLINE_PLAYERS}
</div>
<div class="character_info">
${CHARACTER_INFO}
</div>
</div>
</div>
<div style="clear:both;"></div>
<div class="main_log">
<div class="log_label">Server Log</div>
<div style="clear:both;"></div>
<div id="log_container" class="log_container">
${LOG}
</div>
</div>
</div>
</div>
</body>
</html>

1
res/webserver/charinfo.html Normal file
View File

@@ -0,0 +1 @@
${CHARACTER_INFO}

198
res/webserver/css/auth.css Normal file
View File

@@ -0,0 +1,198 @@
body, html {
width: 100%;
height: 100%;
color: #444;
font-family: Verdana, Geneva, sans-serif;
-webkit-font-smoothing: antialiased;
background: #f0f0f0;
margin:0;
padding:0;
}
.wrapper{
min-height:100%;
height:100%;
margin:0 auto;
}
.content_wrapper {
color: #000000;
margin-left:20px;
margin-top: 20px;
}
.online_players_table {
width: 100%;
}
.online_player_cell {
border: 1px solid #000;
padding-left: 3px;
}
.memory_container {
background: #ecf2f5;
width: 650px;
height: 63px;
margin-top: 20px;
-webkit-border-top-left-radius: 40px;
-moz-border-top-left-radius: 40px;
border-top-left-radius: 40px;
-webkit-border-top-right-radius: 40px;
-moz-border-top-right-radius: 40px;
border-top-right-radius: 40px;
border-top:#000 1px solid;
border-bottom: #000 1px solid;
border-left:#000 1px solid;
border-right:#000 1px solid;
float:left;
}
.memory_container{
height:304px;
}
.resoure_label{
padding:20px;
text-transform: uppercase;
font-weight: bold;
font-style: italic;
}
.resource_img{
background: #ecf2f5;
padding-left: 12px;
border-left:#000 1px solid;
border-right:#000 1px solid;
border-bottom:#000 1px solid;
border-top:#000 1px solid;
margin-left:-1px;
width:638px;
padding-bottom: 10px;
padding-top:10px;
}
.server_info {
background: #ecf2f5;
border-left: 1px solid #000;
border-right: 1px solid #000;
border-top: 1px solid #000;
border-bottom:1px solid #000;
border-top-left-radius: 40px;
border-top-right-radius: 40px;
float: left;
height: 305px;
margin-top: 20px;
width: 715px;
overflow: auto;
}
.online_players_count{
padding:20px;
border-bottom:#000 1px solid;
text-transform: uppercase;
font-weight: bold;
font-style: italic;
}
.character_info{
padding-left: 12px;
border-left:#000 1px solid;
border-right:#000 1px solid;
border-bottom:#000 1px solid;
margin-left:-1px;
width:702px;
}
.main_log{
float: left;
//margin-top: 229px;
position: relative;
top: 23px;
width: 91%;
}
.log_label{
background: #ecf2f5;
width: 91%;
//margin-top: 20px;
-webkit-border-top-left-radius: 40px;
-moz-border-top-left-radius: 40px;
border-top-left-radius: 40px;
-webkit-border-top-right-radius: 40px;
-moz-border-top-right-radius: 40px;
border-top-right-radius: 40px;
border-top:#000 1px solid;
border-left:#000 1px solid;
border-right:#000 1px solid;
float:left;
padding:20px;
font-size:14px;
text-transform: uppercase;
font-weight: bold;
font-style: italic;
height:22px;
}
.log_container{
color: #000000;
font-size: 12px;
overflow: visible;
padding: 20px;
position: absolute;
border-left:#000 1px solid;
border-right:#000 1px solid;
border-bottom:#000 1px solid;
border-top:#000 1px solid;
width:91%;
background: #ecf2f5;
}
.amount{
font-style:normal;
}
table{
font-weight: normal;
}
table tbody{
font-weight: normal;
}
table tbody tr{
font-weight: normal;
}
table tbody tr th{
font-weight: normal;
}
table tbody tr td{
font-weight: normal;
}
.dist{
float:left;
width:30px;
}
.header{
height:70px;
width:100%;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ecf2f5+0,7db9e8+100,ecf2f5+100&amp;1+0,1+21,1+62,0.7+68,0+100 */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMTAwJSI+CiAgICA8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjZWNmMmY1IiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMjElIiBzdG9wLWNvbG9yPSIjZWNmMmY1IiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iNjIlIiBzdG9wLWNvbG9yPSIjZWNmMmY1IiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iNjglIiBzdG9wLWNvbG9yPSIjZWNmMmY1IiBzdG9wLW9wYWNpdHk9IjAuNyIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjZWNmMmY1IiBzdG9wLW9wYWNpdHk9IjAiLz4KICA8L2xpbmVhckdyYWRpZW50PgogIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZ3JhZC11Y2dnLWdlbmVyYXRlZCkiIC8+Cjwvc3ZnPg==);
background: -moz-linear-gradient(-45deg, rgba(236,242,245,1) 0%, rgba(236,242,245,1) 21%, rgba(236,242,245,1) 62%, rgba(236,242,245,0.7) 68%, rgba(236,242,245,0) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(236,242,245,1)), color-stop(21%,rgba(236,242,245,1)), color-stop(62%,rgba(236,242,245,1)), color-stop(68%,rgba(236,242,245,0.7)), color-stop(100%,rgba(236,242,245,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg, rgba(236,242,245,1) 0%,rgba(236,242,245,1) 21%,rgba(236,242,245,1) 62%,rgba(236,242,245,0.7) 68%,rgba(236,242,245,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg, rgba(236,242,245,1) 0%,rgba(236,242,245,1) 21%,rgba(236,242,245,1) 62%,rgba(236,242,245,0.7) 68%,rgba(236,242,245,0) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg, rgba(236,242,245,1) 0%,rgba(236,242,245,1) 21%,rgba(236,242,245,1) 62%,rgba(236,242,245,0.7) 68%,rgba(236,242,245,0) 100%); /* IE10+ */
background: linear-gradient(135deg, rgba(236,242,245,1) 0%,rgba(236,242,245,1) 21%,rgba(236,242,245,1) 62%,rgba(236,242,245,0.7) 68%,rgba(236,242,245,0) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ecf2f5', endColorstr='#00ecf2f5',GradientType=1 ); /* IE6-8 fallback on horizontal gradient */
}
.logo_small{
background-image:url(../images/small_logo.png);
background-repeat:no-repeat;
background-position:50% 50%;">
width: 500px;
height:70px;
}

2
res/webserver/css/style.css
View File

@@ -92,7 +92,7 @@ input[type=password] {
width: 100%;
height: 63px;
margin-top: 20px;
box-shadow: inset 0 1px 1px #fff;
box-shadow: inset 0 1px 1px #fff;
border-top: 1px solid #ccc;
border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px;

BIN
res/webserver/images/small_logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

1
res/webserver/log.html Normal file
View File

@@ -0,0 +1 @@
${LOG}

1
res/webserver/memory.html Normal file
View File

@@ -0,0 +1 @@
<img src="memory_usage.png?currenttime" style="width:624px;height:225px;" alt="memory_usage" />

1
res/webserver/online.html Normal file
View File

@@ -0,0 +1 @@
${ONLINE_PLAYERS}

1
res/webserver/playercount.html Normal file
View File

@@ -0,0 +1 @@
${ONLINE_PLAYER_COUNT}