Skip to content

Instantly share code, notes, and snippets.

@btarg
Created January 8, 2024 16:31
Show Gist options
  • Save btarg/b1f7d4ebf178ffe2b1f9e893ce7972b3 to your computer and use it in GitHub Desktop.
Save btarg/b1f7d4ebf178ffe2b1f9e893ce7972b3 to your computer and use it in GitHub Desktop.
HTML Minecraft server embed
<html>
<head>
<style>
#rest {
display: flex;
align-items: center;
justify-content: start;
flex-direction: row;
gap: 10px;
background: white;
text-align: left;
color: black;
font-weight: 600;
text-shadow: none;
width: fit-content;
padding: 16px 24px;
margin-left: auto;
margin-right: auto;
box-shadow: 8px 8px 0px 2px #00ffd5;
border: 2px solid #007b8a;
border-radius: 5px;
line-height: 1.5;
width: 70%;
}
#copy-ip {
color: white;
border: none;
padding: 10px 20px;
text-align: center;
display: inline-block;
text-shadow: none;
cursor: pointer;
transition: background-color 0.3s ease;
border-radius: 5px;
}
#copy-ip:hover {
background-color: darkgreen;
}
</style>
<script>
fetch("https://api.minetools.eu/ping/mc.hypixel.net")
.then(response => response.json())
.then(r => {
const pl = r.players.sample.length > 0 ? `<br>OP: ${r.players.sample[0].name}` : '';
document.getElementById('rest').innerHTML += `
<div>
<div>${r.description.replace(/§(.+?)/gi, '')}</div>
<div>
<span class="circle online"></span>
<span class="players-online"><b>Players Online:</b> ${r.players.online}${pl}</span>
<br><button id="copy-ip"><i class="fas fa-copy"></i> Copy IP</button>
</div>
</div>
`;
document.getElementById('favicon').src = r.favicon;
document.getElementById('copy-ip').addEventListener('click', () => {
navigator.clipboard.writeText('mc.hypixel.net').then(() => alert('IP copied to clipboard! You can now paste it into Minecraft.'), err => console.error('Could not copy text: ', err));
});
})
.catch(error => {
console.error(error);
document.getElementById('rest').innerHTML += `
<span class="circle offline"></span>Server Offline
`;
});
</script>
</head>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment