[WIP] Redesign of AoS Status Page

A little while ago I saw a thread by Warp on BnS (click here) about redesigning the current status page layout and thought it was good. Since I haven’t seen any updates from that project I got bored one night before an exam and worked on a design. This is still a WIP. Tell us what you think about this design and how it compares to the current version. Also the table/player list is currently hidden under the join server button and a button hides and shows the table.



Red indicates that those areas are incomplete and are just text


html code:

status.html {{server.name}} body { margin: 0; padding: 0; font-family: Arial;

h1, h2, h4, h5, h6, p {
margin: 0;


h3 {
.game-area {
width: 80%;
margin: auto;
padding: 20px 0;


.game-top {
width: 100%;
overflow: hidden;
.game-left {
float: left;
width: 50%;
overflow: hidden;
margin-right: 3%;
.game-left h1 {
text-transform: uppercase;
font-size: 36px;
font-family: ‘Oswald’, sans-serif;
.game-left h2 {
text-transform: uppercase;
font-size: 30px;
color: #666;
font-weight: 100;
.game-left img {
width: 70%;
height: auto;
margin-top: 20px;

.game-right {
overflow: hidden;
.game-right h1 {
text-transform: uppercase;
font-size: 36px;
font-family: ‘Oswald’, sans-serif;
.yellow {
color: #FD9F01;
.green {
color: #6EBD29;
.extra {
color: #A403FE;
.blue {
color: #0136DB;
.red {
color: #FB0606;
.game-right h2 {
margin: 10px 0;
color: #666;
font-family: tahoma;
font-weight: 300;
font-size: 30px;
.game-right h3 {
font-size: 26px;
font-family: ‘Oswald’, sans-serif;
.game-right p {
font-size: 16px;
color: #666;
margin: 10px 0;
line-height: 24px;

.game-bottom {
width: 100%;
overflow: hidden;
margin: 20px 0;
.game-bottom a {
color: rgba(255,255,255,1);
text-decoration: none;
background: linear-gradient(#09CB10, #03C70B);
font-family: ‘Oswald’, sans-serif;
font-weight: normal;
text-transform: uppercase;
font-size: 28px;
display: block;
padding: 10px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: 0px -7px 0px rgba(219,31,5,1), 0px 9px 25px rgba();
-moz-box-shadow: 0px -7px 0px rgba(219,31,5,1), 0px 9px 25px rgba();
box-shadow: 0 -7px 0 #009703, 0 9px 25px;
margin: 10px auto;
text-align: center;

-webkit-transition: all .1s ease;
-moz-transition: all .1s ease;
-ms-transition: all .1s ease;
-o-transition: all .1s ease;
transition: all .1s ease;

/* tables */
table.playerlist {
background-color: #CDCDCD;
font-size: 8pt;
width: 75%;
text-align: left;
table.playerlist thead tr th, table.playerlist tfoot tr th {
background-color: #e6EEEE;
border: 0px solid #FFF;
font-size: 8pt;
padding: 1px;
table.playerlist thead tr .header {
background-image: url(http://i.imgur.com/jNaQX.gif);
background-repeat: no-repeat;
background-position: center right;
cursor: pointer;
table.playerlist tbody td {
color: #3D3D3D;
padding: 1px;
background-color: #FFF;
vertical-align: top;
p.hidden { display: none;}
table.playerlist tbody tr.odd td {
table.playerlist thead tr .headerSortUp {
background-image: url(http://i.imgur.com/mn5iZ.gif);
table.playerlist thead tr .headerSortDown {
background-image: url(http://i.imgur.com/pHz3n.gif);
table.playerlist thead tr .headerSortDown, table.playerlist thead tr .headerSortUp {
background-color: #8dbdd8;


Current uptime: {{(reactor.seconds() - server.start_time)|int}} seconds

statistics & info

Top Player: Deuce

Current Map:

{{server.map_info.name}} by {{server.map_info.author}}

Player Count:


Weapon Usage:

SMG 31% Rifle 40% SHOTGUN 21%

Intel Capture:

[Blue 0/10], [Red 7/10]

Enabled scripts:

{{ ', '.join(server.config['scripts'])}}

Map Rotation:

{{ ', '.join(server.config['maps'])}}

   <div class="game-bottom">
     <a href="" class="button">Join Server</a>
        <div id="spoiler" style="display:none" align="center"> 

{% for player in server.players.values() %}

{% endfor %}

Show/hide Table

I’ll probably tweak the design and try to add more stuff later.

id Name Team Score Ping
{{player.team.id}} {{player.name}} {{player.team.name}} {{player.kills}} {{player.latency}}

I really like warp’s design. If you could have a background image that changes with each map (taken in OS with all the shaders) I think that would be nice. (: An Isometric view of the map might be nice instead of the flat birds eye-view which really doesn’t tell anyone anything unless you’ve been on the map before.

Well as far as i know the only map view is the overview flat one.

I’ll probably tweak the design some more when i get more time.

Some staff members use this to check for suspicious players and this design hides the list, even if you have access to it, you have one more button to press.
Imo, stats page doesnt have to be pretty, just the information needs to be easily obtained.

Also, you made uptime in big numbers but you didnt have the idea of turning seconds into a duration format we can more easily understand.

Shy if you don't mind I can give a swing at the design as well. Would be cool to color code the servers. I could redesign all of aloha if anyone cared enough. Could do something like our new chat logo for Rev and make everything the new "Flat" theme.

Since this is a WIP some stuff can be changed.

Also about the time: I am unsure what would needed to be done to change it from seconds to minutes/hours/etc.

In both my status page and the original one (and aloha one) the time is determined by this input:

{{(reactor.seconds() - server.start_time)|int}}

Go ahead

Can you give me some dimensions? I’m going to make the mockup in an image format. Like dimensions of the image… table… etc…

Not sure. My design looks different on different screen sizes.

I like the design. Personally Im more of a fan of Warps design. I do agree with Sniper that some Admins do use the page to look for suspicious activity and without being displayed the Admin is required to hit Ctrl+left click if he/she wants to scan multiple servers at once.

I definitely think the table should still be there.

Well in my code the table is still there. The spolier effect can be removed.

I personally find who’s online more interesting than the gun stat percentage of the server, but that’s just me lol. :stuck_out_tongue:

Me two. I can’t seem to understand what the icons mean on the status pages.

So I got bored and made a mockup.

The goal eventually would be to have a "personalized" server list where you can click an "arrow" next to the Server Title e.g. "Babel" and it will collapse the table/map. You would also be able to rearrange the server list or set "favorites" that way you only see the stats of the server you want to see. All of this would be stored via cookies/login.

You can join the game by doing two things either clicking the Server Name e.g. "Babel" or by clicking the join game button on the map.
May come up with some other ideas, so the map isn't inhibited, but the map really isn't something people use that often anyways…

Many more things can be added or changed this is just a proof of concept. If you hate it or if you love it please leave feedback.

That might be possible. But AFAIK every server only as a html page that displays the information from that server.
(pysnip → feature_server → web → template → status.html)

Also I feel it should have different colors than the one in your design. Too bright and cluttered.

Unpatriotic haole!!!
Yeah, I can change the colors lol. And I was suggesting a server list being the main page when you go to aloha.pk and all of that happening.

The status server could stand to be redesigned but this seems like it’s pushing most of the useful information off or at least down the page.

Okay this should convert the uptime from seconds to minutes:

<h2>Current Uptime: </h2><h2 id="minutes"></h2><h2> minutes</h2>

/* JavaScript Code */
var minutes = Math.floor({{(reactor.seconds() - server.start_time)|int}} / 60);
document.getElementById("minutes").innerHTML = minutes;

this is why we should discuss possible designs that fit everyone’s needs.

The table could also be added at the top of the page in a spolier div so that it is hidden for people who don’t needs, but easily opened for admins and those who need it.

Yeah, what’s useful to an admin might be different than what’s useful to a player.
I think the best way to figure out what everyone needs/finds important is to create a list.

Things I find important in no particular order:

  1. Map name
  2. Image of map
  3. Player name list
  4. Player count
  5. Country of players / ping / accuracy / ratio (basically all the stats in the table)
  6. Map rotation
  7. Server name