Minecraft server status widget

index.html

<div class="card"> <div class="icon"><img src="https://cdn.worldvectorlogo.com/logos/minecraft-1.svg"></div><div class="header">
  <div class="image"> <img src="https://res.cloudinary.com/lmn/image/upload/e_sharpen:100/f_auto,fl_lossy,q_auto/v1/gameskinnyc/u/n/t/untitled-a5150.jpg" alt="" /> </div>
 
  <h2>Darien.me --- 47.201.211.17</h2>
  </div>
  <div id="rest"></div>
</div>

minecraft-server-status-widget.markdown

Minecraft server status widget

gets json string from server response

A Pen by Darien on CodePen.

License.

script.js

//based on a pen by @robinselmer
var url = "https://api.minetools.eu/ping/47.201.211.17/25565";
//https://mcapi.us/server/status?ip=47.201.211.17&port=25565
$.getJSON(url, function(r) {
    //data is the JSON string
 if(r.error){
    $('#rest').html('Server Offline');
   return false;
 } 
var pl = '';
 if(r.players.online > 0 ){ pl = '<br>Leader: '+r.players.sample[0].name;  } 
  $('#rest').html(r.description+'<br>Players Online: '+r.players.online+pl);

    
});

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;
  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;
  border-bottom: 3px solid #aaa;
  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;
  pointer-events:none;
  background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%);
}
.icon {
  position: absolute;
  right: 10px;
  top: 135px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  overflow:hidden;
  border:3px solid #fff;
  box-shadow:0 4px 0 #aaa;
  z-index:9
}
#rest{
  padding:30px 15px;
  line-height:30px;
  color:#4a6d62
}

styles

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