hypermc/website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add ham menu

Browse Source
This commit is contained in:
snxraven
2025-07-03 22:00:41 -04:00
parent 7a409d199c
commit ab04d67c0d
9 changed files with 2527 additions and 211 deletions
Download Patch File Download Diff File Expand all files Collapse all files

96
index.html
View File

@ -7,42 +7,65 @@
<title>My-MC.Link</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="css/style_min.css?p=4" rel="stylesheet">
<link href="css/style.min.css?p=" rel="stylesheet">
<link href="favicon.ico" rel="icon" type="image/x-icon">
</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;">
<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;">
<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" style="left: 10%; top: 20%; animation-delay: 0s;"></div>
<div class="particle large" style="left: 30%; top: 50%; animation-delay: 2s;"></div>
<div class="particle" style="left: 50%; top: 30%; animation-delay: 4s;"></div>
<div class="particle large" style="left: 70%; top: 60%; animation-delay: 6s;"></div>
<div class="particle" style="left: 20%; top: 80%; animation-delay: 8s;"></div>
<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">
<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>
<a href="https://panel.my-mc.link" class="btn-minecraft text-base self-center" target="_blank">Panel</a>
<!-- Navigation Buttons (hidden on mobile) -->
<nav class="flex items-center gap-2 hidden md:flex">
<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="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-2">
<section class="hero-bg mb-12">
<iframe id="ytplayer"
src="https://www.youtube.com/embed/qLuc8kZty1A?autoplay=1&loop=1&mute=1&controls=0&showinfo=0&rel=0&iv_load_policy=3&playlist=qLuc8kZty1A"
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
Host your Minecraft server for free with secure, low-latency P2P connections.<br>Enjoy encrypted
networking, effortless mod management, and cross-platform play.
</p>
<a href="https://join.my-mc.link" class="btn-minecraft inline-block text-lg" target="_blank">Start Your
@ -51,8 +74,7 @@
</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">
@ -79,37 +101,34 @@
</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">
<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>
<code class="bg-gray-800 text-teal-400 px-1 rounded">holesail hs://s0006d08fe790479cb210dc3a2</code><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-teal-400 text-center">⛵ What Can Holesail Do?</h3>
<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>
@ -137,13 +156,12 @@
</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.
@ -159,16 +177,15 @@
</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">
@ -178,11 +195,10 @@
</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
My-MC.Link is in beta, so minor issues may arise.<br>Please review our
<a href="https://my-mc.link/terms.html" class="underline text-teal-400 hover:text-blue-400">Terms of
Service</a> and
<a href="https://discord.com/guidelines" class="underline text-teal-400 hover:text-blue-400">Discord
@ -190,7 +206,7 @@
</p>
</section>
</main>
<footer class="bg-gray-900/20 backdrop-filter backdrop-blur-xl py-8 text-center relative z-10">
<footer class="bg-gray-900/20 backdrop-filter backdrop-blur-xl py-8 text-center relative z-2">
<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