tuxworld
/
site


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899
							<!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>