hypermc/status-check
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add new particle system

Browse Source
This commit is contained in:
MCHost
2025-07-10 01:22:42 -04:00
parent 1ef09e5015
commit 3a9589b0d9
1 changed files with 41 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
public/index.html
View File

@@ -15,17 +15,21 @@
.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;
}
@@ -34,36 +38,40 @@
<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;">
<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);">
<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>
<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>
<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>
<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>
<div id="particles-js" style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1;"></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">
<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">Server Status Checker</p>
@@ -79,7 +87,8 @@
<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">
<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">
@@ -93,10 +102,11 @@
</select>
</div>
<div>
<label for="connection" class="block text-sm font-medium text-gray-300">Connection String (host:port)</label>
<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-transparent !bg-transparent border border-gray-600 rounded-lg shadow-sm focus:ring-blue-500 focus:border-blue-500 focus:bg-transparent active:bg-transparent text-white transition-all duration-300 hover:bg-gray-600/30 py-2 px-4 text-base text-center placeholder-gray-400 autofill:bg-transparent"
required>
class="mt-1 block w-full mx-auto max-w-md bg-transparent !bg-transparent border border-gray-600 rounded-lg shadow-sm focus:ring-blue-500 focus:border-blue-500 focus:bg-transparent active:bg-transparent text-white transition-all duration-300 hover:bg-gray-600/30 py-2 px-4 text-base text-center placeholder-gray-400 autofill:bg-transparent"
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">
@@ -106,17 +116,25 @@
</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 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">
<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">
<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>
@@ -139,6 +157,7 @@
document.querySelector('.mobile-nav-container').classList.toggle('hidden');
});
</script>
<script src="https://cdn.jsdelivr.net/npm/particles.js@2.0.0/particles.min.js"></script>
<script src="js/app.js"></script>
<script src="https://my-mc.link/js/main.js"></script>
</body>