KiriX/ServerStatus.html

## ServerStatus.html
<html>
	<head>
		<meta charset="utf-8">
		<style type="text/css">
				.DOWN {
				  background-color: red;
				}
				.UP {
				  background-color: green;
				}
				.sphere {
				  height: 20px;
				  width: 20px;
				  border-radius: 50%;
				  text-align: center;
				  vertical-align: middle;
				  //font-size: 500%;
				  position: relative;
				  box-shadow: inset -1px -1px 10px #000, 5px 5px 10px black, inset 0px 0px 1px;
				  display: inline-block;
				  color: white;
				  //margin: 5%;
				}
				.sphere::after {
				  background-color: rgba(255, 255, 255, 0.3);
				  content: '';
				  height: 45%;
				  width: 12%;
				  position: absolute;
				  top: 4%;
				  left: 15%;
				  border-radius: 50%;
				  transform: rotate(40deg);
				}
		</style>
	</head>
<p id="server-stats">Статус серверов:
<div class="name">EU: <div id="EU" class="sphere"><div></div></div></div>
<div class="name">NA: <div id="NA" class="sphere"></div></div>
<div class="name">PTS: <div id="PTS" class="sphere"></div></div>
</p>

<div id="debug">DEBUG:</div>
</html>

<script>
function ajax(url, callback) {
        var xhr = new XMLHttpRequest();
        xhr.open('GET', url);
        xhr.onreadystatechange = function(){
            if (this.readyState == 4) {
                if (this.status == 200)
                    callback(JSON.parse(this.responseText));
            }
        };
        xhr.send(null);
    }

    ajax('https://live-services.elderscrollsonline.com/status/realms', function(data){
        var serverStatuses = data['zos_platform_response']['response'];
		//
        var container = document.getElementById('debug');
        Object.keys(serverStatuses).forEach(function(k) {
 			if (k == "The Elder Scrolls Online (EU)")
			{
				document.getElementById('EU').classList.add(serverStatuses[k]);
			}
 			if (k == "The Elder Scrolls Online (NA)")
			{
				document.getElementById('NA').classList.add(serverStatuses[k]);
			}
 			if (k == "The Elder Scrolls Online (PTS)")
			{
				document.getElementById('PTS').classList.add(serverStatuses[k]);
			}
            var p = document.createElement('p');
            var status = document.createTextNode(k + ' - ' + serverStatuses[k]);
            p.appendChild(status);
            container.appendChild(p);
        });
});
setInterval(ajax,1000*60); // Every 1 minute
</script>
	<html>
	<head>
	<meta charset="utf-8">
	<style type="text/css">
	.DOWN {
	background-color: red;
	}
	.UP {
	background-color: green;
	}
	.sphere {
	height: 20px;
	width: 20px;
	border-radius: 50%;
	text-align: center;
	vertical-align: middle;
	//font-size: 500%;
	position: relative;
	box-shadow: inset -1px -1px 10px #000, 5px 5px 10px black, inset 0px 0px 1px;
	display: inline-block;
	color: white;
	//margin: 5%;
	}
	.sphere::after {
	background-color: rgba(255, 255, 255, 0.3);
	content: '';
	height: 45%;
	width: 12%;
	position: absolute;
	top: 4%;
	left: 15%;
	border-radius: 50%;
	transform: rotate(40deg);
	}
	</style>
	</head>
	<p id="server-stats">Статус серверов:
	<div class="name">EU: <div id="EU" class="sphere"><div></div></div></div>
	<div class="name">NA: <div id="NA" class="sphere"></div></div>
	<div class="name">PTS: <div id="PTS" class="sphere"></div></div>
	</p>

	<div id="debug">DEBUG:</div>
	</html>

	<script>
	function ajax(url, callback) {
	var xhr = new XMLHttpRequest();
	xhr.open('GET', url);
	xhr.onreadystatechange = function(){
	if (this.readyState == 4) {
	if (this.status == 200)
	callback(JSON.parse(this.responseText));
	}
	};
	xhr.send(null);
	}

	ajax('https://live-services.elderscrollsonline.com/status/realms', function(data){
	var serverStatuses = data['zos_platform_response']['response'];
	//
	var container = document.getElementById('debug');
	Object.keys(serverStatuses).forEach(function(k) {
	if (k == "The Elder Scrolls Online (EU)")
	{
	document.getElementById('EU').classList.add(serverStatuses[k]);
	}
	if (k == "The Elder Scrolls Online (NA)")
	{
	document.getElementById('NA').classList.add(serverStatuses[k]);
	}
	if (k == "The Elder Scrolls Online (PTS)")
	{
	document.getElementById('PTS').classList.add(serverStatuses[k]);
	}
	var p = document.createElement('p');
	var status = document.createTextNode(k + ' - ' + serverStatuses[k]);
	p.appendChild(status);
	container.appendChild(p);
	});
	});
	setInterval(ajax,1000*60); // Every 1 minute
	</script>