Minecraft server status widget

index.html

<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://pbs.twimg.com/media/C2bx8KGWQAEORsE.jpg" alt="" /> </div>
 
  <h2>mc.hypixel.net</h2>
  </div>
  <div id="rest">Loading ...</div>
</div>

minecraft-server-status-widget.markdown

Minecraft server status widget

gets json string from server response

A Pen by Nodws on CodePen.

License.

script.js

//based on a pen by @robinselmer
var url = "https://api.minetools.eu/ping/mc.hypixel.net/25565";
//https://mcapi.us/server/status?ip=666.fluctis.com&port=25757
$.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);
 $('#favicon').attr('src', r.favicon);
    
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

style.css

body,html{
  background:url(http://oi61.tinypic.com/2qswabn.jpg) 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:rgba(0,0,0,0.8);
  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: 300px;
  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
}

styles

<link href="https://fonts.googleapis.com/css?family=Roboto+Mono" rel="stylesheet" />