From 702d7e813ec35a88dc6bec5d0cb614b3a85be89c Mon Sep 17 00:00:00 2001
From: MCHost <hypermc@ssh.surf>
Date: Thu, 3 Jul 2025 22:00:07 -0400
Subject: [PATCH] add ham menu

---
 public/index.html | 175 ++++++++++++++++++++++++++++++----------------
 public/js/app.js  |  17 -----
 2 files changed, 116 insertions(+), 76 deletions(-)
diff --git a/public/index.html b/public/index.html
index deba6c5..ef3627d 100644
--- a/public/index.html
+++ b/public/index.html
@@ -4,79 +4,136 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Minecraft Server Status Checker</title>
+    <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>
-    <link rel="stylesheet" href="css/style.min.css">
-    <link rel="apple-touch-icon" sizes="180x180" href="/favicon/apple-touch-icon.png">
-    <link rel="icon" type="image/png" sizes="32x32" href="/favicon/favicon-32x32.png">
-    <link rel="icon" type="image/png" sizes="16x16" href="/favicon/favicon-16x16.png">
-    <link rel="manifest" href="/favicon/site.webmanifest">
+    <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);
+        }
+    </style>
 </head>
 
-<body class="bg-gray-900 text-white min-h-screen flex flex-col relative overflow-hidden">
-    <div id="particles-js" class="absolute inset-0 z-0"></div>
-    <header class="relative z-10 bg-gray-800/80 backdrop-blur-md py-6 shadow-md">
-        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-            <h1 class="text-4xl font-bold tracking-tight text-center animate-slide-in">
-                My-MC Server Status Check
-            </h1>
+<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" 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>
+            <li class="mb-6">
+                <a href="https://status.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">Check MC Status</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">Futuristic Free Minecraft Hosting</p>
+            </div>
+            <nav class="hidden md:flex items-center gap-2">
+                <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>
+                <a href="https://status.my-mc.link" class="nav-btn" target="_blank">Check MC Status</a>
+            </nav>
         </div>
     </header>
-    <main class="relative z-10 flex-grow max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12 w-full">
-        <div class="bg-gray-800/50 backdrop-blur-md p-8 rounded-2xl shadow-xl max-w-lg mx-auto ring-1 ring-gray-700/50">
-            <form id="serverForm" class="space-y-6">
-                <div class="animate-slide-in" style="animation-delay: 0.1s;">
-                    <label for="edition" class="block text-sm font-medium text-gray-300">Server Edition</label>
-                    <select id="edition" name="edition"
-                        class="mt-2 block w-full 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-3">
-                        <option value="java">Java Edition</option>
-                        <option value="bedrock">Bedrock Edition</option>
-                    </select>
-                </div>
-                <div class="animate-slide-in" style="animation-delay: 0.2s;">
-                    <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-2 block w-full 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-3"
-                        required>
-                </div>
-                <button type="submit"
-                    class="w-full bg-blue-600 hover:bg-blue-700 text-white font-semibold py-3 px-4 rounded-lg transition-all duration-300 animate-slide-in shadow-md hover:shadow-lg"
-                    style="animation-delay: 0.3s;">
-                    Check Status
-                </button>
-                <div id="loadingSpinner" class="loading-spinner"></div>
-            </form>
-            <div id="statusResult" class="mt-8 hidden">
-                <h2 class="text-2xl font-semibold text-blue-400 animate-slide-in">Server Status</h2>
-                <div id="statusContent" class="mt-4 p-6 bg-gray-700/50 rounded-lg text-gray-200 ring-1 ring-gray-600/50"></div>
-            </div>
-            <div id="widgetSection" class="mt-8 hidden">
-                <h2 class="text-2xl font-semibold text-blue-400 animate-slide-in">Embed Server Status Widget</h2>
-                <div class="mt-4 p-6 bg-gray-700/50 rounded-lg text-gray-200 ring-1 ring-gray-600/50">
-                    <p class="mb-4">Add a widget to your website to display your server's status:</p>
-                    <pre id="widgetCode" class="bg-gray-800 p-4 rounded-md text-sm text-gray-300 overflow-x-auto" style="display: none;"></pre>
 
-                    <button id="copyWidgetCode" class="mt-4 bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2 px-4 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-blue-600 text-white text-sm px-6 py-3 rounded-lg shadow-lg animate-slide-in z-50">
-                        Widget code copied to clipboard!
+    <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>
-
-        </div>
+        </section>
     </main>
-    <footer class="relative z-10 bg-gray-800/80 backdrop-blur-md py-4 shadow-md">
-        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
-            <p class="text-gray-400 text-sm">© 2025 My-MC.Link Server Status Checker</p>
-        </div>
+
+    <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="js/app.js"></script>
+
+    <script src="https://my-mc.link/js/main.js"></script>
 </body>
 
 </html>
\ No newline at end of file
diff --git a/public/js/app.js b/public/js/app.js
index 2ed4b04..1205957 100644
--- a/public/js/app.js
+++ b/public/js/app.js
@@ -1,20 +1,3 @@
-// Initialize tsParticles
-tsParticles.load("particles-js", {
-    particles: {
-        number: { value: 50, density: { enable: true, value_area: 800 } },
-        color: { value: ["#60a5fa", "#a855f7", "#ec4899"] },
-        shape: { type: "circle" },
-        opacity: { value: 0.5, random: true },
-        size: { value: 3, random: true },
-        move: { enable: true, speed: 0.5, direction: "none", random: true, out_mode: "out" },
-    },
-    interactivity: {
-        events: { onhover: { enable: true, mode: "repulse" }, onclick: { enable: true, mode: "push" } },
-        modes: { repulse: { distance: 100, duration: 0.4 }, push: { particles_nb: 4 } },
-    },
-    retina_detect: true
-});
-
 // Confetti function
 function launchConfetti() {
     confetti({
