|
|
| Рядок 1: |
Рядок 1: |
| <html><div class="card"> <div class="icon222"><img src="https://i.imgur.com/uv3Dk9W.jpg" id="favicon"></div><div class="header"> | | <html><iframe src="https://api.mcstatus.io/v2/widget/java/play.bastion16.co.ua"></iframe></html> |
| <div class="image"> <img src="https://wiki.bastion16.co.ua/images/5/5f/IMG_20240928_235304_415.jpg" alt="" /> </div>
| |
|
| |
| <h2>play.bastion16.co.ua</h2>
| |
| </div>
| |
| <div id="rest">Loading ...</div>
| |
| </div>
| |
| <script>//based on a pen by @robinselmer
| |
| var url = "https://api.minetools.eu/ping/195.95.147.160/35211";
| |
| //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 = ' '+r.players.sample[0].name; }
| |
| var pl1 = '';
| |
| if(r.players.sample.length > 1 ){ pl1 = ' '+r.players.sample[1].name; }
| |
| var pl2 = '';
| |
| if(r.players.sample.length > 2 ){ pl2 = ' '+r.players.sample[2].name; }
| |
| var pl3 = '';
| |
| if(r.players.sample.length > 3 ){ pl3 = ' '+r.players.sample[3].name; }
| |
| var pl4 = '';
| |
| if(r.players.sample.length > 4 ){ pl4 = ' '+r.players.sample[4].name; }
| |
| var pl5 = '';
| |
| if(r.players.sample.length > 5 ){ pl5 = ' '+r.players.sample[5].name; }
| |
| var pl6 = '';
| |
| if(r.players.sample.length > 6 ){ pl6 = ' '+r.players.sample[6].name; }
| |
| var pl7 = '';
| |
| if(r.players.sample.length > 7 ){ pl7 = ' '+r.players.sample[7].name; }
| |
| var pl8 = '';
| |
| if(r.players.sample.length > 8 ){ pl8 = ' '+r.players.sample[8].name; }
| |
| var pl9 = '';
| |
| if(r.players.sample.length > 9 ){ pl9 = ' '+r.players.sample[9].name; }
| |
| var pl10 = '';
| |
| if(r.players.sample.length > 10 ){ pl10 = ' '+r.players.sample[10].name; }
| |
| var pl11 = '';
| |
| if(r.players.sample.length > 11 ){ pl11 = ' '+r.players.sample[11].name; }
| |
| var pl12 = '';
| |
| if(r.players.sample.length > 12 ){ pl12 = ' '+r.players.sample[12].name; }
| |
| var pl13 = '';
| |
| if(r.players.sample.length > 13 ){ pl13 = ' '+r.players.sample[13].name; }
| |
| var pl14 = '';
| |
| if(r.players.sample.length > 14 ){ pl14 = ' '+r.players.sample[14].name; }
| |
| var pl15 = '';
| |
| if(r.players.sample.length > 15 ){ pl15 = ' '+r.players.sample[15].name; }
| |
| var pl16 = '';
| |
| if(r.players.sample.length > 16 ){ pl16 = ' '+r.players.sample[16].name; }
| |
| var pl17 = '';
| |
| if(r.players.sample.length > 17 ){ pl17 = ' '+r.players.sample[17].name; }
| |
| var pl18 = '';
| |
| if(r.players.sample.length > 18 ){ pl18 = ' '+r.players.sample[18].name; }
| |
| var pl19 = '';
| |
| if(r.players.sample.length > 19 ){ pl19 = ' '+r.players.sample[19].name; }
| |
| $('#rest').html(r.description.replace(/§(.+?)/gi, '')+'<br><b>Players Online (' +r.players.online+'):</b>'+pl+pl1+pl2+pl3+pl4+pl5+pl6+pl7+pl8+pl9+pl10+pl11+pl12+pl13+pl14+pl15+pl16+pl17+pl18+pl19) ;
| |
| $('#favicon').attr('src', r.favicon);
| |
|
| |
| });
| |
| | |
| </script>
| |
| <style>
| |
| 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%);
| |
| }
| |
| .icon222 {
| |
| 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></html> | |