Skip to content

Commit

Permalink
update website
Browse files Browse the repository at this point in the history
  • Loading branch information
@orbitaldot
orbitaldot committed Jun 30, 2024
1 parent 0105836 commit b379961
Show file tree
Hide file tree
Showing 3 changed files with 67 additions and 66 deletions.
69 changes: 3 additions & 66 deletions website/freddit.net/index.html
View file
Original file line number Diff line number Diff line change
@@ -1,28 +1,15 @@
<html lang="en" data-bs-theme="dark">
<head>
<title>Freddit Freebuild</title>

<meta name="viewport" content="width=device-width, initial-scale=1">
<meta property="og:image" content="https://freddit.net/assets/imgs/freddit-freebuild.png">
<meta property="og:title" content="Freddit Freebuild">
<meta property="og:description" content="The world's only Minecraft server since 2015">

<title>Freddit Freebuild</title>
<link rel="icon" type="image/png" href="assets/favico.webp">
<link rel="stylesheet" href="style.css">

<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

<style>
main {
max-width: 600px;
margin: 0 auto;
padding: 20px;
}
code {
border-radius: 4px;
padding: 2px 4px;
}
</style>
</head>

<body>
Expand All @@ -38,7 +25,6 @@
</main>
</body>

<!-- copy to clipboard toast -->
<div class="toast" id="copied-toast" style="position: absolute; top: 0; right: 0;" autohide="true" data-bs-delay="2000">
<div class="toast-header">
<strong class="me-auto">Copied!</strong>
Expand All @@ -53,54 +39,5 @@
<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>

<script>
const mcapi = 'https://eu.mc-api.net/v3/server'

const servers = [
{'name': 'Freddit Freebuild', 'address': 'play.freddit.net', 'map_url': 'https://map.freddit.net'},
{'name': 'Freddit Survival', 'address': 'survival.freddit.net', 'map_url': 'https://survivalmap.freddit.net'}
]

const copyToClipboard = (text) => {
navigator.clipboard.writeText(text)
var toastEl = document.getElementById('copied-toast');
var toast = new bootstrap.Toast(toastEl);
toast.show();
}

const serverStatusCardHTML = (server_name, server_address, status, map_url, players, version) => {
return `
<div class="col-md-4 p-2">
<div class="card">
<div class="card-header">
<img src="${mcapi}/favicon/${server_address}" alt="Server icon" style="width: 16px; height: 16px;">
${server_name}
<div class="badge bg-${status === 'online' ? 'success' : 'danger'}">${status}</div>
${version ? `<span class="badge bg-secondary">${version}</span>` : ''}
</div>
<div class="card-body">
<p>${players} player${players !== 1 ? 's' : ''} online</p>
<button class="btn btn-sm btn-outline-primary" onclick="window.open('${map_url}')">Map</button>
</div>
<div class="card-footer" onclick="copyToClipboard('${server_address}')" style="cursor: pointer;">
<code>${server_address}</code>
</div>
</div>
</div>
`
}

servers.forEach(server => {
$.get(mcapi + "/ping/" + server.address, function(data) {
if (data.error) {
$('#server-status').append(serverStatusCardHTML(server.name, server.address, 'offline', server.map_url, 0))
return
}
$('#server-status').append(serverStatusCardHTML(server.name, server.address, 'online', server.map_url, data.players.online, data.version.name))
}).fail(function() {
$('#server-status').append(serverStatusCardHTML(server.name, server.address, 'offline', server.map_url, 0))
})
})
</script>
<script src="src.js"></script>
</html>
55 changes: 55 additions & 0 deletions website/freddit.net/src.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
const mcapi = 'https://eu.mc-api.net/v3/server'

const servers = [
{
'name': 'Freddit Freebuild',
'address': 'play.freddit.net',
'map_url': 'http://map.freddit.net'
},
{
'name': 'Freddit Survival',
'address': 'survival.freddit.net',
'map_url': 'https://survivalmap.freddit.net'
}
]

const copyToClipboard = (text) => {
navigator.clipboard.writeText(text)
var toastEl = document.getElementById('copied-toast');
var toast = new bootstrap.Toast(toastEl);
toast.show();
}

const serverStatusCardHTML = (server_name, server_address, status, map_url, players, version) => {
return `
<div class="col-md-4 p-2">
<div class="card">
<div class="card-header">
<img src="${mcapi}/favicon/${server_address}" alt="Server icon" style="width: 16px; height: 16px;">
${server_name}
<div class="badge bg-${status === 'online' ? 'success' : 'danger'}">${status}</div>
${version ? `<span class="badge bg-secondary">${version}</span>` : ''}
</div>
<div class="card-body">
<p>${players} player${players !== 1 ? 's' : ''} online</p>
<button class="btn btn-sm btn-outline-primary" onclick="window.open('${map_url}')">Map</button>
</div>
<div class="card-footer" onclick="copyToClipboard('${server_address}')" style="cursor: pointer;">
<code>${server_address}</code>
</div>
</div>
</div>
`
}

servers.forEach(server => {
$.get(mcapi + "/ping/" + server.address, function(data) {
if (data.error) {
$('#server-status').append(serverStatusCardHTML(server.name, server.address, 'offline', server.map_url, 0))
return
}
$('#server-status').append(serverStatusCardHTML(server.name, server.address, 'online', server.map_url, data.players.online, data.version.name))
}).fail(function() {
$('#server-status').append(serverStatusCardHTML(server.name, server.address, 'offline', server.map_url, 0))
})
})
9 changes: 9 additions & 0 deletions website/freddit.net/style.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
main {
max-width: 600px;
margin: 0 auto;
padding: 20px;
}
code {
border-radius: 4px;
padding: 2px 4px;
}

0 comments on commit b379961

Please sign in to comment.