We use cookies to ensure you get the best experience on our website
Página inicial Explorar Ajuda
Entrar
tuxworld
/
site
2
0
Fork 0
Arquivos Issues 0 Pull Requests 0 Wiki
Ver código fonte

First files

Jonas van Leeuwen 7 horas atrás
commit
aa9fc81065
8 arquivos alterados com 343 adições e 0 exclusões
Visão unificada Mostrar estatísticas do Diff
  1. 112 0
      css/styles.css
  2. 0 0
      css/tailwind.min.css
  3. BIN
      images/background.png
  4. BIN
      images/logo.png
  5. 99 0
      index.html
  6. 13 0
      js/clipboard.js
  7. 6 0
      js/clipboard.min.js
  8. 113 0
      js/serverstatus-home.js

+ 112 - 0
css/styles.css
Ver arquivo 

@@ -0,0 +1,112 @@
 
+:root {
 
+    --lightcolor: #efefef;
 
+    --green-900: #22543d;
 
+}
 
+
 
+html {
 
+    scroll-behavior: smooth;
 
+}
 
+
 
+body {
 
+    background-color: #272727;
 
+    background-image: url(/images/background.png);
 
+    background-repeat: no-repeat;
 
+    background-size: cover;
 
+    font-family: 'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
 
+}
 
+
 
+a {
 
+    transition: all 0.2s ease;
 
+}
 
+
 
+.layoutfooter, .layoutfooter a {
 
+    color: #fff;
 
+}
 
+
 
+.cbsitehover {
 
+    height: 100%;
 
+    width: 100%;
 
+    transition: all 0.5s ease;
 
+}
 
+    .cbsitehover2 {
 
+        overflow: hidden;
 
+    }
 
+    .cbsitehover:hover {
 
+        transform: scale(1.15);
 
+    }
 
+
 
+.ccdiscordjoin {
 
+    display: inline-block;
 
+    position: relative;
 
+    transition: 0.5s;
 
+}
 
+    .ccdiscordjoin:after {
 
+        content: '\25B8';
 
+        position: absolute;
 
+        opacity: 0;
 
+        top: 0;
 
+        right: -20px;
 
+        transition: 0.5s;
 
+    }
 
+    button.ccdiscordjoinpre:hover span {
 
+    padding-right: 20px;
 
+    }
 
+    button.ccdiscordjoinpre:hover .ccdiscordjoin:after {
 
+        opacity: 1;
 
+        right: 0;
 
+    }
 
+
 
+.ccinfoframe {
 
+    width: 100%;
 
+    height: 80vh;
 
+    min-height: 600px;
 
+    max-height: 900px;
 
+}
 
+
 
+.ccmorecells {
 
+    height: 200px;
 
+}
 
+
 
+@media screen and (min-width: 1024px) {
 
+    .ccinfoframe {
 
+        width: 500px;
 
+        height: 80vh;
 
+        min-height:600px;
 
+        max-height: 900px;
 
+    }
 
+    .ccmorecells {
 
+        height: 400px;
 
+    }
 
+}
 
+
 
+#snackbar {
 
+    visibility: hidden;
 
+    min-width: 8em;
 
+    margin-left: -4em;
 
+    text-align: center;
 
+    position: fixed;
 
+    z-index: 30;
 
+    left: 50%;
 
+    bottom: 30px;
 
+}
 
+    #snackbar.show {
 
+        visibility: visible;
 
+        -webkit-animation: fadein 0.5s, fadeout 0.5s 2s;
 
+        animation: fadein 0.5s, fadeout 0.5s 2s;
 
+    }
 
+    @-webkit-keyframes fadein {
 
+        from {bottom: 0; opacity: 0;} 
+        to {bottom: 30px; opacity: 1;}
 
+    }
 
+    @keyframes fadein {
 
+        from {bottom: 0; opacity: 0;}
 
+        to {bottom: 30px; opacity: 1;}
 
+    }
 
+    @-webkit-keyframes fadeout {
 
+        from {bottom: 30px; opacity: 1;} 
+        to {bottom: 0; opacity: 0;}
 
+    }
 
+    @keyframes fadeout {
 
+        from {bottom: 30px; opacity: 1;}
 
+        to {bottom: 0; opacity: 0;}
 
+    }

Diferenças do arquivo suprimidas por serem muito extensas
+ 0 - 0
css/tailwind.min.css


BIN
images/background.png
Ver arquivo


BIN
images/logo.png
Ver arquivo


+ 99 - 0
index.html
Ver arquivo 

@@ -0,0 +1,99 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Tux World</title>
 
+    <meta name="description" content="A Minecraft server where we have lots of fun!">
 
+    <link rel="icon" type="image/png" href="/images/logo.png" />
 
+    <link rel="apple-touch-icon" sizes="180x180" href="/images/logo.png">
 
+    <meta name="robots" content="index">
 
+    <link href="css/styles.css" rel="stylesheet">
 
+    <link href="css/tailwind.min.css" rel="stylesheet">
 
+    <link href="https://fonts.googleapis.com/css2?family=Jost:wght@400;500;700&display=swap" rel="stylesheet">
 
+    <meta name="theme-color" content="#272727">
 
+    <meta property="og:title" content="Tux world- Minecraft Server">
 
+    <meta property="og:description" content="A Minecraft server for tux army members!">
 
+    <meta property="og:image" content="images/android-chrome-192x192.png">
 
+    <meta property="og:url" content="https://tuxworld.nl"> </head>
 
+
 
+<body style="min-height:100vh;">
 
+    <nav class="flex items-center justify-between flex-wrap bg-transparent p-6">
 
+        <a href="/">
 
+            <div class="flex items-center flex-shrink-0 text-white mr-6 select-none"> <img src="images/logo.png" class="mr-4 rounded shadow" width="30px" alt="Moonrise MC"> <span class="font-semibold text-xl tracking-tight hidden md:block" id="serverLogoName">Tux World</span> </div>
 
+        </a>
 
+        <div class="block flex-grow flex items-center w-auto"> </div>
 
+        <div id="serverStatus" class="text-gray-200 hidden md:block cursor-pointer"></div>
 
+        <div class="block md:hidden">
 
+            <div id="serverStatusM" class="text-gray-200 py-2 md:py-4"></div>
 
+        </div>
 
+        <script>
 
+            document.getElementById("serverStatus").innerHTML = "Loading..."; document.getElementById("serverStatusM").innerHTML = "Loading...";
 
+        </script>
 
+    </nav>
 
+    <div class="flex flex-wrap md:flex-row-reverse justify-center items-center text-center py-4">
 
+        <div class="w-full lg:w-1/2">
 
+            <h1 class="text-4xl text-gray-100 pt-12 lg:pt-0">Tux World</h1>
 
+            <h2 class="text-2xl text-gray-200 pt-6" id="serverVer">Minecraft Server</h2>
 
+            <div class="rounded overflow-hidden w-full sm:w-4/5 md:w-3/4 mx-auto mt-10 mb-6">
 
+                <div class="px-6 py-4">
 
+                    <div class="text-sm font-thin -mb-3" id="serverPlaynow"> <span class="inline-block bg-yellow-500 rounded-full px-3 py-1 text-sm font-thin uppercase text-gray-900 mr-2 shadow-lg">Play Now</span> </div>
 
+                    <p class="text-gray-100 text-base bg-green-900 rounded py-6 px-3 sm:text-xl md:text-2xl font-mono overflow-hidden select-all" id="serverIP" data-clipboard-text="tuxworld.nl">IP: tuxworld.nl </p>
 
+                </div>
 
+            </div>
 
+<button id="openWorldMapModal" class="w-4/5 md:w-1/2 xl:w-1/3 mb-2 bg-green-800 hover:bg-teal-800 text-gray-300 hover:text-gray py-3 px-4 text-lg rounded transition duration-200">
 
+    <span>🌍 World Map</span>
 
+</button>
 
+            <a href="https://link.yixboost.dev/jointuxworld" rel="noopener"> <button class="w-4/5 md:w-1/2 xl:w-1/3 mb-2 bg-gray-800 hover:bg-teal-800 text-gray-300 hover:text-gray py-3 px-4 text-lg rounded transition duration-200 ccdiscordjoinpre"> <span class="ccdiscordjoin">Join our Discord to get access</span> </button> </a>    
+            <section class="py-12 text-gray-100">
 
+    <div id="playerCards" class="flex flex-wrap justify-center gap-4">
 
+    </div>
 
+</section>
 
+
 
+        </div>
 
+    </div>
 
+
 
+<div id="worldMapModal" class="fixed inset-0 bg-black bg-opacity-90 hidden z-50 flex flex-col opacity-0 transition-opacity duration-300">
 
+    <div class="flex justify-between items-center p-4 bg-green-900">
 
+        <span class="text-gray-100 font-bold text-lg">World Map</span>
 
+        <button id="closeModal" class="text-gray-200 text-2xl font-bold">&times;</button>
 
+    </div>
 
+    <iframe id="worldMapIframe" src="https://map.tuxworld.nl" class="flex-1 w-full border-0" allowfullscreen></iframe>
 
+</div>
 
+
 
+<script>
 
+const openBtn = document.getElementById("openWorldMapModal");
 
+const modal = document.getElementById("worldMapModal");
 
+const closeBtn = document.getElementById("closeModal");
 
+
 
+function openModal() {
 
+    modal.classList.remove("hidden");
 
+    setTimeout(() => {
 
+        modal.classList.remove("opacity-0");
 
+    }, 10); 
+}
 
+
 
+function closeModal() {
 
+    modal.classList.add("opacity-0");
 
+    setTimeout(() => {
 
+        modal.classList.add("hidden");
 
+    }, 300); 
+}
 
+
 
+openBtn.addEventListener("click", openModal);
 
+closeBtn.addEventListener("click", closeModal);
 
+
 
+modal.addEventListener("click", (e) => {
 
+    if (e.target === modal) closeModal();
 
+});
 
+</script>
 
+
 
+    <script src="js/clipboard.min.js"></script>
 
+    <div id="snackbar" class="text-gray-100 bg-green-900 p-3 rounded shadow-xl">Copied!</div>
 
+    <script type="text/javascript" src="js/clipboard.js"></script>
 
+    <div class="layoutfooter w-full pb-8 text-center transition duration-200 text-white"> <a href="https://yixboost.dev" target="_blank">Powered by Yixboost NL</a></div>
 
+    <script type="text/javascript" src="js/serverstatus-home.js"></script>
 
+</body>
 
+
 
+</html>

+ 13 - 0
js/clipboard.js
Ver arquivo 

@@ -0,0 +1,13 @@
 
+new ClipboardJS('p#serverIP');
 
+var clipboard = new ClipboardJS('p#serverIP');
 
+var getsnack = document.getElementById("snackbar");
 
+
 
+clipboard.on('success', function(e) {
 
+    getsnack.classList.add('show');
 
+    setTimeout(function(){ getsnack.classList.remove('show'); }, 2500);
 
+});
 
+
 
+clipboard.on('error', function(e) {
 
+    console.error('Action:', e.action);
 
+    console.error('Trigger:', e.trigger);
 
+});

Diferenças do arquivo suprimidas por serem muito extensas
+ 6 - 0
js/clipboard.min.js


+ 113 - 0
js/serverstatus-home.js
Ver arquivo 

@@ -0,0 +1,113 @@
 
+function handleErrors(response) {
 
+    if (!response.ok) {
 
+        document.getElementById("serverStatus").innerHTML = "";
 
+        document.getElementById("serverStatusM").innerHTML = "";
 
+        document.getElementById("serverLogoName").classList.remove("hidden");
 
+    }
 
+    return response;
 
+}
 
+
 
+function createPlayerCard(playerName, uuid) {
 
+    const card = document.createElement("div");
 
+    card.className = "px-4 py-4 w-40 text-center flex flex-col items-center gap-2";
 
+
 
+    const avatar = document.createElement("img");
 
+    avatar.src = `https://map.tuxworld.nl/maps/world/assets/playerheads/${uuid}.png`;
 
+    avatar.alt = playerName;
 
+    avatar.className = "w-16 h-16 shadow-md";
 
+
 
+    const name = document.createElement("p");
 
+    name.textContent = playerName;
 
+    name.className = "font-mono text-sm break-words";
 
+
 
+    card.appendChild(avatar);
 
+    card.appendChild(name);
 
+    return card;
 
+}
 
+
 
+async function getUUID(playerName) {
 
+    try {
 
+        const res = await fetch(`https://api.ashcon.app/mojang/v2/user/${playerName}`);
 
+        if (!res.ok) throw new Error();
 
+        const data = await res.json();
 
+        return data.uuid;
 
+    } catch {
 
+        return "00000000000000000000000000000000";
 
+    }
 
+}
 
+
 
+function formatServerType(type) {
 
+    if (!type) return "";
 
+    return type.split("-").map(w => w.charAt(0).toUpperCase() + w.slice(1)).join(" ");
 
+}
 
+
 
+function parsePlayers(input) {
 
+    if (!input) return [];
 
+    try {
 
+        return JSON.parse(input);
 
+    } catch {
 
+        try {
 
+            const fixed = input.replace(/'/g, '"');
 
+            return JSON.parse(fixed);
 
+        } catch {
 
+            return [];
 
+        }
 
+    }
 
+}
 
+
 
+fetch("/api")
 
+    .then(handleErrors)
 
+    .then(r => r.json())
 
+    .then(async res => {
 
+        const data = res.data;
 
+
 
+        const container = document.getElementById("playerCards");
 
+        container.innerHTML = "";
 
+
 
+        if (data.online === undefined) throw new Error();
 
+
 
+        const serverType = formatServerType(data.server_id?.type || data.type);
 
+        const version = data.version || "";
 
+
 
+        document.getElementById("serverVer").textContent =
 
+            `${serverType} ${version}`.trim() || "Minecraft Server";
 
+
 
+        const onlineText = `<p class="font-bold select-none">
 
+            <span class="text-green-600">&#11044;</span>&emsp;
 
+            Online, ${data.online} / ${data.max} playing
 
+        </p>`;
 
+
 
+        document.getElementById("serverStatus").innerHTML = onlineText;
 
+        document.getElementById("serverStatusM").innerHTML = onlineText;
 
+
 
+        document.getElementById("serverPlaynow").innerHTML =
 
+            `<span class="inline-block bg-yellow-500 rounded-full px-3 py-1 text-sm font-thin uppercase text-gray-900 mr-2 shadow-lg">Play Now</span>`;
 
+
 
+        document.getElementById("serverIP").classList.remove("bg-orange-800");
 
+        document.getElementById("serverIP").classList.add("bg-green-900");
 
+
 
+        const players = parsePlayers(data.players);
 
+
 
+        if (players.length > 0) {
 
+            for (const player of players) {
 
+                const name = player.name || player;
 
+                const uuid = await getUUID(name);
 
+                container.appendChild(createPlayerCard(name, uuid));
 
+            }
 
+        } else {
 
+            const msg = document.createElement("p");
 
+            msg.textContent = "No players online";
 
+            msg.className = "text-gray-400";
 
+            container.appendChild(msg);
 
+        }
 
+    })
 
+    .catch(() => {
 
+        document.getElementById("serverStatus").innerHTML =
 
+            `<p class="text-red-600 font-bold">Error loading server status</p>`;
 
+
 
+        document.getElementById("serverStatusM").innerHTML =
 
+            `<p class="text-red-600 font-bold">Error</p>`;
 
+
 
+        document.getElementById("playerCards").innerHTML =
 
+            `<p class="text-gray-400">Cannot load players</p>`;
 
+    });

Alguns arquivos não foram mostrados porque muitos arquivos mudaram nesse diff