Files
website/index.html
2025-06-16 21:04:10 -04:00

157 lines
9.9 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My-MC.Link - Free Minecraft Hosting</title>
<link rel="icon" href="https://minecraft.wiki/images/Favicon.png" type="image/png">
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700;900&display=swap" rel="stylesheet">
<link href="./mc/css/style.css" rel="stylesheet">
<link href="./mc/favicon.ico" rel="icon" type="image/x-icon">
</head>
<body>
<!-- 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>
<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>
<a href="https://panel.my-mc.link" class="btn-minecraft text-base self-center" target="_blank">Panel</a>
</div>
</header>
<main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pb-16 relative z-10">
<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; loop" 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">
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
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
Journey</a>
</div>
</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">
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">
<h3 class="text-xl minecraft-font mb-3 text-teal-400">Secure P2P Networking</h3>
<p class="text-sm opacity-90 leading-relaxed">Play with peace of mind using Holesails end-to-end
encrypted connections, hiding IPs and ports.</p>
</div>
<div class="feature-card tilt-card">
<h3 class="text-xl minecraft-font mb-3 text-teal-400">Flexible Hosting Zero Cost</h3>
<p class="text-sm opacity-90 leading-relaxed">Bind your server to any device—PC, localhost, or
server—for complete control and portability.</p>
</div>
<div class="feature-card tilt-card">
<h3 class="text-xl minecraft-font mb-3 text-teal-400">Smart Mod Management</h3>
<p class="text-sm opacity-90 leading-relaxed">Install and update mods effortlessly with our
intuitive bot and powerful REST API.</p>
</div>
<div class="feature-card tilt-card">
<h3 class="text-xl minecraft-font mb-3 text-teal-400">Cross-Platform Play with Geyser</h3>
<p class="text-sm opacity-90 leading-relaxed">Connect Java and Bedrock players seamlessly with
built-in Geyser support.</p>
</div>
</div>
</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">
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.
</p>
<div class="flex justify-center mb-8">
<img src="./mc/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!
</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">
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.
</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>
</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>
</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://wiki.my-mc.link/en/api" class="underline text-teal-400 hover:text-blue-400">API documentation</a> and <a href="https://wiki.my-mc.link/en/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">
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. Free,
secure, and crafted for Minecraft fans.
</p>
<div class="flex justify-center gap-4 flex-wrap">
<a href="https://join.my-mc.link" class="btn-minecraft text-base" target="_blank">Join Our Discord</a>
<a href="https://wiki.my-mc.link" class="btn-minecraft text-base" target="_blank">Explore the Wiki</a>
</div>
</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">
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
<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
Rules</a> before getting started.
</p>
</section>
</main>
<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 src="./mc/js/main.js"></script>
</body>
</html>