146 lines
8.8 KiB
HTML
146 lines
8.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>My-MC Server Status Checker</title>
|
|
<link rel="icon" href="https://minecraft.wiki/images/Favicon.png" type="image/png">
|
|
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700;900&display=swap" rel="stylesheet">
|
|
<link href="https://my-mc.link/css/style.min.css" rel="stylesheet">
|
|
<link href="https://my-mc.link/favicon.ico" rel="icon" type="image/x-icon">
|
|
<script src="https://cdn.jsdelivr.net/npm/tsparticles@3.5.0/tsparticles.bundle.min.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.9.3/dist/confetti.browser.min.js"></script>
|
|
<style>
|
|
.hamburger.active .bar:nth-child(2) {
|
|
opacity: 0;
|
|
}
|
|
.hamburger.active .bar:nth-child(1) {
|
|
transform: translateY(8px) rotate(45deg);
|
|
}
|
|
.hamburger.active .bar:nth-child(3) {
|
|
transform: translateY(-8px) rotate(-45deg);
|
|
}
|
|
body {
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-height: 100vh;
|
|
}
|
|
main {
|
|
flex-grow: 1;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<!-- Hamburger Menu Icon (visible on mobile) -->
|
|
<button class="hamburger md:hidden flex flex-col justify-center items-center w-10 h-10 focus:outline-none" style="z-index: 99999; position: fixed; top: 1rem; right: 1rem; pointer-events: auto; background: transparent;">
|
|
<span class="bar w-6 h-0.5 bg-teal-400 mb-1.5 transition-all duration-300"></span>
|
|
<span class="bar w-6 h-0.5 bg-teal-400 mb-1.5 transition-all duration-300"></span>
|
|
<span class="bar w-6 h-0.5 bg-teal-400 transition-all duration-300"></span>
|
|
</button>
|
|
<!-- Mobile Navigation Menu -->
|
|
<nav class="mobile-nav mobile-nav-container hidden fixed inset-0 flex-col items-center justify-center md:hidden" data-mobile-nav style="z-index: 99998; position: fixed; inset: 0; pointer-events: auto; background: rgba(17, 24, 39, 0.98); backdrop-filter: blur(10px);">
|
|
<ul class="text-center">
|
|
<li class="mb-6">
|
|
<a href="https://panel.my-mc.link" class="text-lg minecraft-font text-white bg-gradient-to-r from-teal-400 to-blue-500 px-4 py-2 rounded-md hover:bg-gradient-to-r hover:from-blue-500 hover:to-teal-400">Home</a>
|
|
</li>
|
|
<li class="mb-6">
|
|
<a href="https://panel.my-mc.link" class="text-lg minecraft-font text-white bg-gradient-to-r from-teal-400 to-blue-500 px-4 py-2 rounded-md hover:bg-gradient-to-r hover:from-blue-500 hover:to-teal-400" target="_blank">Panel</a>
|
|
</li>
|
|
<li class="mb-6">
|
|
<a href="https://stats.my-mc.link" class="text-lg minecraft-font text-white bg-gradient-to-r from-teal-400 to-blue-500 px-4 py-2 rounded-md hover:bg-gradient-to-r hover:from-blue-500 hover:to-teal-400">System Stats</a>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
<!-- Particle Effects -->
|
|
<div class="particle"></div>
|
|
<div class="particle large"></div>
|
|
<div class="particle"></div>
|
|
<div class="particle large"></div>
|
|
<div class="particle"></div>
|
|
|
|
<header class="header-bg py-16 text-center relative z-10">
|
|
<div class="header-content flex items-center justify-between max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div>
|
|
<h1 class="text-5xl minecraft-font bg-clip-text text-transparent bg-gradient-to-r from-teal-400 to-blue-500">
|
|
My-MC.Link
|
|
</h1>
|
|
<p class="text-lg mt-4 opacity-90 tracking-wide font-medium">My-MC.Link Server Status Checker</p>
|
|
</div>
|
|
<nav class="hidden md:flex items-center gap-2">
|
|
<a href="https://my-mc.link" class="nav-btn">Home</a>
|
|
<a href="https://panel.my-mc.link" class="nav-btn" target="_blank">Panel</a>
|
|
<a href="https://stats.my-mc.link" class="nav-btn">System Stats</a>
|
|
</nav>
|
|
</div>
|
|
</header>
|
|
|
|
<main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 relative z-10">
|
|
<section class="section-bg p-4 sm:p-6 rounded-2xl mb-8 flex justify-center">
|
|
<div class="w-full max-w-2xl text-center">
|
|
<h2 class="text-xl sm:text-2xl minecraft-font mb-4 bg-clip-text text-transparent bg-gradient-to-r from-teal-400 to-blue-500">
|
|
Server Status Checker
|
|
</h2>
|
|
<div class="bg-gray-800/50 backdrop-blur-md p-6 sm:p-8 rounded-2xl shadow-xl ring-1 ring-gray-700/50">
|
|
<form id="serverForm" class="space-y-6">
|
|
<div>
|
|
<label for="edition" class="block text-sm font-medium text-gray-300">Server Edition</label>
|
|
<select id="edition" name="edition"
|
|
class="mt-1 block w-full mx-auto max-w-md bg-gray-700/50 border border-gray-600 rounded-lg shadow-sm focus:ring-blue-500 focus:border-blue-500 text-white transition-all duration-300 hover:bg-gray-600/50 py-2 px-4 text-base text-center">
|
|
<option value="java">Java Edition</option>
|
|
<option value="bedrock">Bedrock Edition</option>
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label for="connection" class="block text-sm font-medium text-gray-300">Connection String (host:port)</label>
|
|
<input type="text" id="connection" name="connection" placeholder="example.com:25565"
|
|
class="mt-1 block w-full mx-auto max-w-md bg-gray-700/50 border border-gray-600 rounded-lg shadow-sm focus:ring-blue-500 focus:border-blue-500 text-white transition-all duration-300 hover:bg-gray-600/50 py-2 px-4 text-base text-center"
|
|
required>
|
|
</div>
|
|
<button type="submit"
|
|
class="btn-minecraft w-full max-w-md mx-auto text-base font-semibold py-2 px-6 rounded-lg transition-all duration-300 shadow-md hover:shadow-lg">
|
|
Check Status
|
|
</button>
|
|
<div id="loadingSpinner" class="loading-spinner mx-auto" style="display: none;"></div>
|
|
</form>
|
|
<div id="statusResult" class="mt-6 hidden">
|
|
<h3 class="text-lg sm:text-xl minecraft-font mb-3 text-teal-400">Server Status</h3>
|
|
<div id="statusContent" class="p-4 sm:p-6 bg-gray-700/50 rounded-lg text-gray-200 ring-1 ring-gray-600/50 text-sm sm:text-base text-center"></div>
|
|
</div>
|
|
<div id="widgetSection" class="mt-6 hidden">
|
|
<h3 class="text-lg sm:text-xl minecraft-font mb-3 text-teal-400">Embed Server Status Widget</h3>
|
|
<div class="p-4 sm:p-6 bg-gray-700/50 rounded-lg text-gray-200 ring-1 ring-gray-600/50 text-center">
|
|
<p class="mb-3 text-sm opacity-90 leading-relaxed">Add a widget to your website to display your server's status:</p>
|
|
<pre id="widgetCode" class="bg-gray-800 p-3 rounded-md text-xs text-gray-300 mx-auto max-w-full overflow-x-auto" style="display: none;"></pre>
|
|
<button id="copyWidgetCode" class="btn-minecraft mt-3 text-sm font-semibold py-2 px-6 rounded-lg transition-all duration-300 shadow-md hover:shadow-lg">
|
|
Copy Widget Code
|
|
</button>
|
|
<div id="copyAlert" class="hidden fixed bottom-4 right-4 bg-teal-400 text-gray-900 text-sm px-6 py-2 rounded-lg shadow-lg animate-slide-in z-50">
|
|
Widget code copied to clipboard!
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<footer class="bg-gray-900/20 backdrop-filter backdrop-blur-xl py-8 text-center relative z-10">
|
|
<p class="text-sm opacity-90">© 2025 My-MC.Link. All rights reserved.</p>
|
|
<p class="text-sm opacity-90 mt-3">
|
|
Powered by <a href="https://holesail.io" class="underline" target="_blank">Holesail</a> with services
|
|
donated by <a href="https://raven-scott.fyi" class="underline">SNXRaven</a>
|
|
</p>
|
|
</footer>
|
|
<script>
|
|
document.querySelector('.hamburger').addEventListener('click', function () {
|
|
this.classList.toggle('active');
|
|
document.querySelector('.mobile-nav-container').classList.toggle('hidden');
|
|
});
|
|
</script>
|
|
<script src="js/app.js"></script>
|
|
<script src="https://my-mc.link/js/main.js"></script>
|
|
</body>
|
|
|
|
</html> |