A small webpage for displaying the results of a Server ping
<!DOCTYPE html>
<html>
<style>
body,
html {
background: url(https://negativerocks.co.uk/Files/Header.png) center no-repeat;
background-size: cover;
min-height: 100%;
font-family: 'Roboto Mono', monospace;
font-size: 15px;
display: flex;
align-items: center;
justify-content: center
}
body:before {
content: "";
width: 100%;
height: 100%;
background-color:rgba(221, 207, 255, 255);
position: absolute;
top: 0;
left: 0;
z-index: 10
}
h1,
h2 {
font-weight: 400;
letter-spacing: -2px
}
.card {
position: relative;
margin: 0 auto;
padding: 0;
width: 200px;
min-width: 350px;
background: #ffffff;
border-radius: 5px;
box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.3);
-webkit-animation: fadein 2s;
animation: fadein 2s;
overflow: hidden;
z-index: 999;
}
.header {
position: relative;
z-index: 1;
width: 100%;
height: 180px;
box-shadow: 0 4px 3px #0002;
overflow: hidden;
}
.card img {
width: 100%;
transition: all 1s ease;
z-index: 0
}
.image {
width: 100%;
height: 180px;
cursor: crosshair;
overflow: hidden;
}
.image:hover img {
-webkit-transform: scale(1.2, 1.2);
transform: scale(1.2, 1.2);
}
.header h2 {
position: absolute;
bottom: 0;
margin: 0;
width: 100%;
padding: 0 10px;
color: #fff;
text-transform: uppercase;
pointer-events: none;
background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.65) 100%);
}
.icon {
position: absolute;
background: #fff;
right: 10px;
top: 135px;
width: 80px;
height: 80px;
border-radius: 50%;
overflow: hidden;
border: 3px solid #fff;
box-shadow: 0 4px 3px #0002;
z-index: 9
}
#rest {
padding: 30px 15px;
line-height: 30px;
color: #000d42
}
</style>
<body></body>
<div class="card">
<div class="icon">
<img src="https://pbs.twimg.com/profile_images/808180587605331969/u-CULTwl_400x400.jpg" id="favicon"></div>
<div class="header">
<div class="image"> <img src="https://negativerocks.co.uk/Files/Header.png" alt="" /> </div>
<h2>B&C SMP</h2>
<!-- put server name here !-->
</div>
<div id="rest">Loading ...</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
//based on a pen by @robinselmer
var url = "https://api.minetools.eu/ping/mineserver.charliestelling.co.uk/25565"; //insert server here
$.getJSON(url, function(r) {
//data is the JSON string
if (r.error) {
$('#rest').html('Server Offline');
return false;
}
var pl = '';
if (r.players.sample.length > 0) {
pl = '<br>OP: ' + r.players.sample[0].name;
}
$('#rest').html(r.description.replace(/§(.+?)/gi, '') + '<br><b>Players Online:</b> ' + r.players.online + pl + '<br><b>mineserver.charliestelling.co.uk</b>');
$('#favicon').attr('src', r.favicon);
});
</script>
</body>
</html>
api.minetools.eu