hypermc/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:
snxraven
2025-07-10 01:20:27 -04:00
parent 6bfb933305
commit f6185059fa
12 changed files with 1601 additions and 940 deletions
Download Patch File Download Diff File Expand all files Collapse all files

114
index.html
View File

@@ -13,31 +13,45 @@
<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;">
<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;">
<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 bg-gray-900/98 flex-col items-center justify-center md:hidden" data-mobile-nav style="z-index: 99998; position: fixed; inset: 0; pointer-events: auto;">
<nav class="mobile-nav mobile-nav-container hidden fixed inset-0 bg-gray-900/98 flex-col items-center justify-center md:hidden"
data-mobile-nav style="z-index: 99998; position: fixed; inset: 0; pointer-events: auto;">
<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>
<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>
<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>
<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>
<li class="mb-6">
<a href="https://info.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">Wiki</a>
<a href="https://info.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">Wiki</a>
</li>
<li class="mb-6">
<a href="https://list.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">Server List</a>
<a href="https://list.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">Server List</a>
</li>
</ul>
</nav>
<!-- Particles.js Container -->
<div id="particles-js" style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1;"></div>
<!-- Particle Effects -->
<div class="particle"></div>
<div class="particle large"></div>
@@ -48,7 +62,8 @@
<header class="header-bg py-16 text-center relative z-2">
<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">Futuristic Free Minecraft Hosting</p>
</div>
@@ -71,7 +86,8 @@
frameborder="0" allow="autoplay;" allowfullscreen></iframe>
<img src="https://minecraft.wiki/images/Panorama_4.png" alt="Minecraft Panorama">
<div class="hero-content">
<h2 class="text-4xl minecraft-font mb-6 bg-clip-text text-transparent bg-gradient-to-r from-teal-400 to-blue-500">
<h2
class="text-4xl minecraft-font mb-6 bg-clip-text text-transparent bg-gradient-to-r from-teal-400 to-blue-500">
Craft Your Ultimate Fabric Server</h2>
<p class="text-lg mb-8 max-w-3xl mx-auto opacity-90 leading-relaxed">
Host your Minecraft server for free with secure, low-latency P2P connections.<br>Enjoy encrypted
@@ -83,7 +99,8 @@
</section>
<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">
What Sets Us Apart</h2>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
<div class="feature-card tilt-card">
@@ -110,91 +127,120 @@
</section>
<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">
My-MC Realms</h2>
<p class="text-lg mb-8 max-w-3xl mx-auto opacity-90 leading-relaxed">
My-MC Realms is a seamless alternative to Minecraft Realms, allowing you to connect to your Minecraft server directly from the Realms menu without needing the server address<br><br>Simply install the MyMcRealms mod within your client, run the <code class="bg-gray-800 text-teal-400 px-1 rounded">/my-mc-link</code> command to register a slot, and access your server with ease.
My-MC Realms is a seamless alternative to Minecraft Realms, allowing you to connect to your Minecraft
server directly from the Realms menu without needing the server address<br><br>Simply install the
MyMcRealms mod within your client, run the <code
class="bg-gray-800 text-teal-400 px-1 rounded">/my-mc-link</code> command to register a slot, and
access your server with ease.
</p>
<div class="flex justify-center mb-8">
<img src="img/my-mc-realms.webp" alt="MyMcRealms in action" class="max-w-full rounded-lg shadow-lg">
</div>
<p class="text-lg max-w-3xl mx-auto opacity-90 leading-relaxed">
<strong>Give the mod to your friends</strong><br>Once installed on your friends clients, they can access your server via the Realms menu.<br>No More Need For IPs or Ports!
<strong>Give the mod to your friends</strong><br>Once installed on your friends clients, they can access
your server via the Realms menu.<br>No More Need For IPs or Ports!
</p>
</section>
<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">
Holesail - Reverse Tunnels</h2>
<p class="text-lg mb-8 max-w-3xl mx-auto opacity-90 leading-relaxed">
<strong>Peer to Peer Tunnels for Instant Access</strong><br>Create P2P tunnels instantly that bypass any network, firewall, or NAT restrictions and expose your local network to the internet securely—no Dynamic DNS required.<br>It’s 100% free and open source!
<strong>Peer to Peer Tunnels for Instant Access</strong><br>Create P2P tunnels instantly that bypass any
network, firewall, or NAT restrictions and expose your local network to the internet securely—no Dynamic
DNS required.<br>It’s 100% free and open source!
</p>
<p class="text-lg mb-8 max-w-3xl mx-auto opacity-90 leading-relaxed">
It’s as easy as running <code class="bg-gray-800 text-teal-400 px-1 rounded">/connection-details</code> within our bot and then on your PC:<br>
It’s as easy as running <code class="bg-gray-800 text-teal-400 px-1 rounded">/connection-details</code>
within our bot and then on your PC:<br>
<code class="bg-gray-800 text-teal-400 px-1 rounded">holesail hs://s0006d08fe790479cb210dc3a2</code><br>
Within Minecraft<code class="bg-gray-800 text-teal-400 px-1 rounded">127.0.0.1:25565</code>.
</p>
<div class="flex justify-center mb-8">
<a href="https://docs.holesail.io-overview/what-can-holesail-do" class="btn-minecraft text-base" target="_blank">Get Started with Holesail</a>
<a href="https://docs.holesail.io-overview/what-can-holesail-do" class="btn-minecraft text-base"
target="_blank">Get Started with Holesail</a>
</div>
<h3 class="text-xl minecraft-font mb-6 text-center text-teal-400">⛵ What Can Holesail Do?</h3>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
<div class="feature-card tilt-card">
<h4 class="text-lg minecraft-font mb-2 text-teal-400">Access Anywhere</h4>
<p class="text-sm opacity-90 leading-relaxed">Access your machines over the internet without port forwarding or a static IP.</p>
<p class="text-sm opacity-90 leading-relaxed">Access your machines over the internet without port
forwarding or a static IP.</p>
</div>
<div class="feature-card tilt-card">
<h4 class="text-lg minecraft-font mb-2 text-teal-400">Share Locally</h4>
<p class="text-sm opacity-90 leading-relaxed">Share locally running servers, websites, and AI with anyone.</p>
<p class="text-sm opacity-90 leading-relaxed">Share locally running servers, websites, and AI with
anyone.</p>
</div>
<div class="feature-card tilt-card">
<h4 class="text-lg minecraft-font mb-2 text-teal-400">File Sharing</h4>
<p class="text-sm opacity-90 leading-relaxed">Share files and folders remotely with no bandwidth restrictions or size limits.</p>
<p class="text-sm opacity-90 leading-relaxed">Share files and folders remotely with no bandwidth
restrictions or size limits.</p>
</div>
<div class="feature-card tilt-card">
<h4 class="text-lg minecraft-font mb-2 text-teal-400">Game Remotely</h4>
<p class="text-sm opacity-90 leading-relaxed">Play Minecraft and any LAN game remotely with your friends.</p>
<p class="text-sm opacity-90 leading-relaxed">Play Minecraft and any LAN game remotely with your
friends.</p>
</div>
<div class="feature-card tilt-card">
<h4 class="text-lg minecraft-font mb-2 text-teal-400">Secure SSH</h4>
<p class="text-sm opacity-90 leading-relaxed">Secure your SSH servers, block IP access, and connect securely with Holesail.</p>
<p class="text-sm opacity-90 leading-relaxed">Secure your SSH servers, block IP access, and connect
securely with Holesail.</p>
</div>
<div class="feature-card tilt-card">
<h4 class="text-lg minecraft-font mb-2 text-teal-400">Your friends, still 127.0.0.1</h4>
<p class="text-sm opacity-90 leading-relaxed">Anyone you share a connection with, accesses on their own 127.0.0.1.</p>
<p class="text-sm opacity-90 leading-relaxed">Anyone you share a connection with, accesses on their
own 127.0.0.1.</p>
</div>
</div>
<p class="text-lg max-w-3xl mx-auto opacity-90 leading-relaxed">
<center>It’s always <code class="bg-gray-800 text-teal-400 px-1 rounded">127.0.0.1</code>—say goodbye to the internet and hello to localhost!</center>
<center>It’s always <code class="bg-gray-800 text-teal-400 px-1 rounded">127.0.0.1</code>—say goodbye to
the internet and hello to localhost!</center>
</p>
</section>
<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">
Power Up with Our API & Libraries</h2>
<p class="text-lg mb-8 max-w-3xl mx-auto opacity-90 leading-relaxed">
Take control of your Minecraft server like never before with our powerful REST API and MyMCLib libraries! Automate server management, install mods, ban players, send messages, and more with just a few lines of code. Available in JavaScript and Java, our tools make it easy to integrate and customize your server experience.
Take control of your Minecraft server like never before with our powerful REST API and MyMCLib
libraries! Automate server management, install mods, ban players, send messages, and more with just a
few lines of code. Available in JavaScript and Java, our tools make it easy to integrate and customize
your server experience.
</p>
<div class="grid grid-cols-1 sm:grid-cols-2 gap-6 mb-8">
<div class="feature-card tilt-card">
<h3 class="text-xl minecraft-font mb-3 text-teal-400">Robust REST API</h3>
<p class="text-sm opacity-90 leading-relaxed">Manage every aspect of your server programmatically, from starting and stopping to retrieving stats and logs.</p>
<p class="text-sm opacity-90 leading-relaxed">Manage every aspect of your server programmatically,
from starting and stopping to retrieving stats and logs.</p>
</div>
<div class="feature-card tilt-card">
<h3 class="text-xl minecraft-font mb-3 text-teal-400">MyMCLib Libraries</h3>
<p class="text-sm opacity-90 leading-relaxed">Simplify API interactions with our JavaScript and Java libraries, designed for developers of all skill levels.</p>
<p class="text-sm opacity-90 leading-relaxed">Simplify API interactions with our JavaScript and Java
libraries, designed for developers of all skill levels.</p>
</div>
</div>
<p class="text-lg max-w-3xl mx-auto opacity-90 leading-relaxed">
<strong>Ready to code?</strong><br>Dive into our <a href="https://info.my-mc.link/api/" class="underline text-teal-400 hover:text-blue-400">API documentation</a> and <a href="https://info.my-mc.link/mymc-lib/" class="underline text-teal-400 hover:text-blue-400">MyMCLib guide</a> to start building today!
<strong>Ready to code?</strong><br>Dive into our <a href="https://info.my-mc.link/api/"
class="underline text-teal-400 hover:text-blue-400">API documentation</a> and <a
href="https://info.my-mc.link/mymc-lib/" class="underline text-teal-400 hover:text-blue-400">MyMCLib
guide</a> to start building today!
</p>
</section>
<section id="get-started" class="section-bg p-8 sm:p-10 text-center mb-12">
<h2 class="text-3xl minecraft-font mb-6 bg-clip-text text-transparent bg-gradient-to-r from-teal-400 to-blue-500">
<h2
class="text-3xl minecraft-font mb-6 bg-clip-text text-transparent bg-gradient-to-r from-teal-400 to-blue-500">
Begin Your Adventure</h2>
<p class="text-lg mb-8 max-w-2xl mx-auto opacity-90 leading-relaxed">
Join our vibrant community, set up your server in minutes, and play with friends across platforms.<br>Free,
Join our vibrant community, set up your server in minutes, and play with friends across
platforms.<br>Free,
secure, and crafted for Minecraft fans.
</p>
<div class="flex justify-center gap-4 flex-wrap">
@@ -204,7 +250,8 @@
</section>
<section class="section-bg p-8 sm:p-10 text-center">
<h2 class="text-3xl minecraft-font mb-6 bg-clip-text text-transparent bg-gradient-to-r from-teal-400 to-blue-500">
<h2
class="text-3xl minecraft-font mb-6 bg-clip-text text-transparent bg-gradient-to-r from-teal-400 to-blue-500">
Beta Phase Notice</h2>
<p class="text-lg max-w-3xl mx-auto opacity-90 leading-relaxed">
My-MC.Link is in beta, so minor issues may arise.<br>Please review our
@@ -222,7 +269,10 @@
donated by <a href="https://raven-scott.fyi" class="underline">SNXRaven</a>
</p>
</footer>
<script src="https://cdn.jsdelivr.net/npm/particles.js@2.0.0/particles.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>