Skip to content

Instantly share code, notes, and snippets.

@Brickgard
Created December 14, 2021 17:36
Show Gist options
  • Save Brickgard/5678ea9e2fa2e8ae83abab920d60c0bd to your computer and use it in GitHub Desktop.
Save Brickgard/5678ea9e2fa2e8ae83abab920d60c0bd to your computer and use it in GitHub Desktop.
Stellius Server Status Embed
<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://i.imgur.com/z4D0D5H.jpg" alt="" /> </div>
<h2>Stellius Network</h2>
</div>
<div id="rest">Loading ...</div>
</div>
//based on a pen by @robinselmer
var url = "https://api.minetools.eu/ping/mc.stellius.online/25565";
$.getJSON(url, function(r) {
//data is the JSON string
if(r.error){
$('#rest').html('Server Offline');
return false;
}
var pl = '';
$('#rest').html('mc.stellius.online'+'<br><b>Players Online:</b> '+r.players.online+pl);
$('#favicon').attr('src', r.favicon);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
body,html{
background:url(https://i.imgur.com/a/r2Lziyr.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: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: #111177;
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;
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;
background:#fff;
right: 10px;
top: 135px;
width: 80px;
height: 80px;
border-radius: 50%;
overflow:hidden;
border:3px solid #333388;
box-shadow:0 4px 3px #0002;
z-index:9
}
#rest{
padding:30px 15px;
line-height:30px;
color:#aaaaff
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment