hypermc/my-mc-stats-website
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:23:53 -04:00
parent b1b8958fb6
commit 4941125315
1 changed files with 30 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
status.html
View File

@@ -1,5 +1,6 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -10,25 +11,30 @@
<link href="https://my-mc.link/favicon.ico" rel="icon" type="image/x-icon"> <link href="https://my-mc.link/favicon.ico" rel="icon" type="image/x-icon">
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.4/dist/chart.umd.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.4/dist/chart.umd.min.js"></script>
<style> <style>
table th, table td { table th,
table td {
text-align: center !important; text-align: center !important;
} }
.container-table { .container-table {
display: flex; display: flex;
justify-content: center; justify-content: center;
margin: 0 auto; margin: 0 auto;
max-width: 100%; max-width: 100%;
} }
.container-table table { .container-table table {
width: 100%; width: 100%;
max-width: 1200px; max-width: 1200px;
} }
.no-data { .no-data {
text-align: center; text-align: center;
color: #fb7185; color: #fb7185;
font-size: 1.2rem; font-size: 1.2rem;
margin: 1rem 0; margin: 1rem 0;
} }
/* Ensure cards are visible */ /* Ensure cards are visible */
.feature-card { .feature-card {
display: block !important; display: block !important;
@@ -42,6 +48,7 @@
padding: 1.5rem; padding: 1.5rem;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
} }
.tilt-card { .tilt-card {
display: block !important; display: block !important;
opacity: 1 !important; opacity: 1 !important;
@@ -50,18 +57,24 @@
} }
</style> </style>
</head> </head>
<body> <body>
<!-- Hamburger Menu Icon (visible on mobile) --> <!-- 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 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> <span class="bar w-6 h-0.5 bg-teal-400 transition-all duration-300"></span>
</button> </button>
<!-- Mobile Navigation Menu --> <!-- 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"> <ul class="text-center">
<li class="mb-6"> <li class="mb-6">
<a href="https://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">Back To Home</a> <a href="https://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">Back
To Home</a>
</li> </li>
</ul> </ul>
</nav> </nav>
@@ -75,7 +88,8 @@
<header class="header-bg py-16 text-center relative z-10"> <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 class="header-content flex items-center justify-between max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div> <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> My-MC.Link</h1>
<p class="text-lg mt-4 opacity-90 tracking-wide font-medium">Live System Monitoring</p> <p class="text-lg mt-4 opacity-90 tracking-wide font-medium">Live System Monitoring</p>
</div> </div>
@@ -84,10 +98,12 @@
</nav> </nav>
</div> </div>
</header> </header>
<div id="particles-js" style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1;"></div>
<main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pb-16 relative z-10"> <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pb-16 relative z-10">
<section class="section-bg p-8 sm:p-10 mb-12"> <section class="section-bg p-8 sm:p-10 mb-12">
<h2 class="text-3xl minecraft-font mb-8 text-center bg-clip-text text-transparent bg-gradient-to-r from-teal-400 to-blue-500"> <h2
class="text-3xl minecraft-font mb-8 text-center bg-clip-text text-transparent bg-gradient-to-r from-teal-400 to-blue-500">
Docker Environment Overview</h2> Docker Environment Overview</h2>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 mb-8"> <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
<div class="feature-card tilt-card"> <div class="feature-card tilt-card">
@@ -139,7 +155,8 @@
<tbody id="cpu-table"></tbody> <tbody id="cpu-table"></tbody>
</table> </table>
</div> </div>
<h3 class="text-xl minecraft-font mb-6 text-teal-400 text-center">Minecraft Containers (Sorted by Memory)</h3> <h3 class="text-xl minecraft-font mb-6 text-teal-400 text-center">Minecraft Containers (Sorted by Memory)
</h3>
<div class="container-table"> <div class="container-table">
<table class="w-full text-sm text-gray-200"> <table class="w-full text-sm text-gray-200">
<thead class="text-xs uppercase bg-gray-800"> <thead class="text-xs uppercase bg-gray-800">
@@ -156,7 +173,8 @@
</section> </section>
<section class="section-bg p-8 sm:p-10 mb-12"> <section class="section-bg p-8 sm:p-10 mb-12">
<h2 class="text-3xl minecraft-font mb-8 text-center bg-gradient-to-r from-teal-400 to-blue-500 bg-clip-text text-transparent"> <h2
class="text-3xl minecraft-font mb-8 text-center bg-gradient-to-r from-teal-400 to-blue-500 bg-clip-text text-transparent">
Host System Metrics</h2> Host System Metrics</h2>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8"> <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
<div> <div>
@@ -179,7 +197,8 @@
</section> </section>
<section class="section-bg p-8 sm:p-10 mb-12"> <section class="section-bg p-8 sm:p-10 mb-12">
<h2 class="text-3xl minecraft-font mb-8 text-center bg-gradient-to-r from-teal-400 to-blue-500 bg-clip-text text-transparent"> <h2
class="text-3xl minecraft-font mb-8 text-center bg-gradient-to-r from-teal-400 to-blue-500 bg-clip-text text-transparent">
Jump Node Stats</h2> Jump Node Stats</h2>
<div id="jump-no-data" class="no-data" style="display: none;">No Jump Node data available</div> <div id="jump-no-data" class="no-data" style="display: none;">No Jump Node data available</div>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 mb-8"> <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
@@ -760,6 +779,8 @@
console.log('WebSocket disconnected'); console.log('WebSocket disconnected');
}; };
</script> </script>
<script src="https://cdn.jsdelivr.net/npm/particles.js@2.0.0/particles.min.js"></script>
<script src="https://my-mc.link/js/main.js"></script> <script src="https://my-mc.link/js/main.js"></script>
</body> </body>
</html> </html>