move advanced log card to the last position

This commit is contained in:
MCHost
2025-07-08 07:09:25 -04:00
parent 60f6514aba
commit cec187dde9

View File

@@ -237,7 +237,8 @@
<button id="restartBtn" class="control-btn text-sm">Restart</button> <button id="restartBtn" class="control-btn text-sm">Restart</button>
</div> </div>
<div class="flex justify-end space-x-1"> <div class="flex justify-end space-x-1">
<button id="editPropertiesBtn" class="nav-btn control-btn text-sm">Edit Properties</button> <button id="editPropertiesBtn" class="nav-btn control-btn text-sm">Edit
Properties</button>
<button id="updateModsBtn" class="nav-btn text-sm">Update Mods</button> <button id="updateModsBtn" class="nav-btn text-sm">Update Mods</button>
</div> </div>
</div> </div>
@@ -283,7 +284,8 @@
<div class="mb-3 flex space-x-2"> <div class="mb-3 flex space-x-2">
<input id="modSearch" type="text" placeholder="Search Mods (Hit Enter To Submit)" <input id="modSearch" type="text" placeholder="Search Mods (Hit Enter To Submit)"
class="bg-[rgba(10,17,40,0.3)] backdrop-blur-[12px] px-3 py-1 rounded text-sm text-white flex-grow border border-[rgba(255,255,255,0.15)]"> class="bg-[rgba(10,17,40,0.3)] backdrop-blur-[12px] px-3 py-1 rounded text-sm text-white flex-grow border border-[rgba(255,255,255,0.15)]">
<button id="searchBtn" type="submit" class="btn-minecraft" style="display: none;">Search</button> <button id="searchBtn" type="submit" class="btn-minecraft"
style="display: none;">Search</button>
<button id="closeSearchBtn" type="button" class="btn-minecraft hidden">Close</button> <button id="closeSearchBtn" type="button" class="btn-minecraft hidden">Close</button>
</div> </div>
</form> </form>
@@ -303,68 +305,79 @@
<h2 class="text-2xl minecraft-font mb-6 font-bold text-white">Server Links</h2> <h2 class="text-2xl minecraft-font mb-6 font-bold text-white">Server Links</h2>
<div class="flex flex-row gap-4 mb-4"> <div class="flex flex-row gap-4 mb-4">
<!-- Connection Link Card --> <!-- Connection Link Card -->
<div class="bg-gray-800/40 p-4 rounded-xl shadow-md hover:shadow-lg transition-shadow flex-1 min-w-[250px]"> <div
class="bg-gray-800/40 p-4 rounded-xl shadow-md hover:shadow-lg transition-shadow flex-1 min-w-[250px]">
<h3 class="text-lg minecraft-font font-semibold text-white mb-2">Connection Link</h3> <h3 class="text-lg minecraft-font font-semibold text-white mb-2">Connection Link</h3>
<p class="text-gray-300 mb-3 break-all"> <p class="text-gray-300 mb-3 break-all">
<span id="myLink" class="text-blue-400">Link Not Created</span> <span id="myLink" class="text-blue-400">Link Not Created</span>
<span id="connectionStatus" class="text-xs"></span> <span id="connectionStatus" class="text-xs"></span>
</p> </p>
<button id="generateMyLinkBtn" class="nav-btn" class="w-full bg-blue-600 hover:bg-blue-700 text-white px-3 py-1 rounded-md transition-colors text-sm"> <button id="generateMyLinkBtn" class="nav-btn"
class="w-full bg-blue-600 hover:bg-blue-700 text-white px-3 py-1 rounded-md transition-colors text-sm">
Generate Connection Link Generate Connection Link
</button> </button>
</div> </div>
<!-- Geyser Link Card --> <!-- Geyser Link Card -->
<div class="bg-gray-800/40 p-4 rounded-xl shadow-md hover:shadow-lg transition-shadow flex-1 min-w-[250px]"> <div
class="bg-gray-800/40 p-4 rounded-xl shadow-md hover:shadow-lg transition-shadow flex-1 min-w-[250px]">
<h3 class="text-lg minecraft-font font-semibold text-white mb-2">Geyser Link</h3> <h3 class="text-lg minecraft-font font-semibold text-white mb-2">Geyser Link</h3>
<p class="text-gray-300 mb-3 break-all"> <p class="text-gray-300 mb-3 break-all">
<span id="geyserLink" class="text-blue-400">Link Not Created</span> <span id="geyserLink" class="text-blue-400">Link Not Created</span>
<span id="geyserStatus" class="text-xs"></span> <span id="geyserStatus" class="text-xs"></span>
</p> </p>
<button id="generateGeyserLinkBtn" class="nav-btn" class="w-full bg-blue-600 hover:bg-blue-700 text-white px-3 py-1 rounded-md transition-colors text-sm"> <button id="generateGeyserLinkBtn" class="nav-btn"
class="w-full bg-blue-600 hover:bg-blue-700 text-white px-3 py-1 rounded-md transition-colors text-sm">
Generate Geyser Link Generate Geyser Link
</button> </button>
</div> </div>
<!-- SFTP Link Card --> <!-- SFTP Link Card -->
<div class="bg-gray-800/40 p-4 rounded-xl shadow-md hover:shadow-lg transition-shadow flex-1 min-w-[250px]"> <div
class="bg-gray-800/40 p-4 rounded-xl shadow-md hover:shadow-lg transition-shadow flex-1 min-w-[250px]">
<h3 class="text-lg minecraft-font font-semibold text-white mb-2">SFTP Link</h3> <h3 class="text-lg minecraft-font font-semibold text-white mb-2">SFTP Link</h3>
<p class="text-gray-300 mb-3 break-all"> <p class="text-gray-300 mb-3 break-all">
<span id="sftpLink" class="text-blue-400">Link Not Created</span> <span id="sftpLink" class="text-blue-400">Link Not Created</span>
<span id="sftpStatus" class="text-xs"></span> <span id="sftpStatus" class="text-xs"></span>
</p> </p>
<button id="generateSftpLinkBtn" class="nav-btn" class="w-full bg-blue-600 hover:bg-blue-700 text-white px-3 py-1 rounded-md transition-colors text-sm"> <button id="generateSftpLinkBtn" class="nav-btn"
class="w-full bg-blue-600 hover:bg-blue-700 text-white px-3 py-1 rounded-md transition-colors text-sm">
Generate SFTP Link Generate SFTP Link
</button> </button>
</div> </div>
</div> </div>
<div class="flex flex-row gap-4"> <div class="flex flex-row gap-4">
<!-- Advanced Log URL Card -->
<div class="bg-gray-800/40 p-4 rounded-xl shadow-md hover:shadow-lg transition-shadow flex-1 min-w-[250px]">
<h3 class="text-lg minecraft-font font-semibold text-white mb-2">Advanced Log</h3>
<p class="text-gray-300 mb-3 break-all">
<a id="logUrl" href="#" class="text-blue-400 hover:underline" target="_blank">Loading...</a>
</p>
</div>
<!-- Website URL Card --> <!-- Website URL Card -->
<div class="bg-gray-800/40 p-4 rounded-xl shadow-md hover:shadow-lg transition-shadow flex-1 min-w-[250px]"> <div
class="bg-gray-800/40 p-4 rounded-xl shadow-md hover:shadow-lg transition-shadow flex-1 min-w-[250px]">
<h3 class="text-lg minecraft-font font-semibold text-white mb-2">Website</h3> <h3 class="text-lg minecraft-font font-semibold text-white mb-2">Website</h3>
<p class="text-gray-300 mb-3 break-all"> <p class="text-gray-300 mb-3 break-all">
<a id="websiteUrl" href="#" class="text-blue-400 hover:underline" target="_blank">Loading...</a> <a id="websiteUrl" href="#" class="text-blue-400 hover:underline"
target="_blank">Loading...</a>
</p> </p>
</div> </div>
<!-- BlueMap URL Card --> <!-- BlueMap URL Card -->
<div class="bg-gray-800/40 p-4 rounded-xl shadow-md hover:shadow-lg transition-shadow flex-1 min-w-[250px]"> <div
class="bg-gray-800/40 p-4 rounded-xl shadow-md hover:shadow-lg transition-shadow flex-1 min-w-[250px]">
<h3 class="text-lg minecraft-font font-semibold text-white mb-2">BlueMap</h3> <h3 class="text-lg minecraft-font font-semibold text-white mb-2">BlueMap</h3>
<p class="text-gray-300 mb-3 break-all"> <p class="text-gray-300 mb-3 break-all">
<a id="mapUrl" href="#" class="text-blue-400 hover:underline" target="_blank">Loading...</a> <a id="mapUrl" href="#" class="text-blue-400 hover:underline" target="_blank">Loading...</a>
</p> </p>
</div> </div>
<!-- Advanced Log URL Card -->
<div
class="bg-gray-800/40 p-4 rounded-xl shadow-md hover:shadow-lg transition-shadow flex-1 min-w-[250px]">
<h3 class="text-lg minecraft-font font-semibold text-white mb-2">Advanced Log</h3>
<p class="text-gray-300 mb-3 break-all">
<a id="logUrl" href="#" class="text-blue-400 hover:underline" target="_blank">Loading...</a>
</p>
</div>
</div> </div>
</div> </div>
<div class="section-bg mb-8"> <div class="section-bg mb-8">
<div class="flex items-center justify-between mb-3 flex-wrap"> <div class="flex items-center justify-between mb-3 flex-wrap">
<h2 class="text-2xl minecraft-font">Holesail Keys</h2> <h2 class="text-2xl minecraft-font">Holesail Keys</h2>
<button id="toggleTutorial" class="nav-btn2 bg-blue-600 hover:bg-blue-700 text-white font-semibold py-1 px-3 rounded-md transition duration-200 md:mt-0 mt-2">Tutorial</button> <button id="toggleTutorial"
</div> class="nav-btn2 bg-blue-600 hover:bg-blue-700 text-white font-semibold py-1 px-3 rounded-md transition duration-200 md:mt-0 mt-2">Tutorial</button>
</div>
<div class="flex flex-row gap-4 mb-4"> <div class="flex flex-row gap-4 mb-4">
<div class="flex items-center p-3 bg-gray-800 rounded-md min-w-0 flex-1"> <div class="flex items-center p-3 bg-gray-800 rounded-md min-w-0 flex-1">
<div class="flex-grow"> <div class="flex-grow">
@@ -372,9 +385,13 @@
<p class="break-all text-sm" id="holesailHash">Not Loaded</p> <p class="break-all text-sm" id="holesailHash">Not Loaded</p>
<p class="text-xs">Port: 127.0.0.1:25565</p> <p class="text-xs">Port: 127.0.0.1:25565</p>
</div> </div>
<button class="copy-key-btn ml-2" data-key-id="holesailHash" data-key-type="Minecraft" title="Copy"> <button class="copy-key-btn ml-2" data-key-id="holesailHash" data-key-type="Minecraft"
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> title="Copy">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"></path> <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z">
</path>
</svg> </svg>
</button> </button>
</div> </div>
@@ -385,8 +402,11 @@
<p class="text-xs">Port: 127.0.0.1:19132</p> <p class="text-xs">Port: 127.0.0.1:19132</p>
</div> </div>
<button class="copy-key-btn ml-2" data-key-id="geyserHash" data-key-type="Geyser" title="Copy"> <button class="copy-key-btn ml-2" data-key-id="geyserHash" data-key-type="Geyser" title="Copy">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"></path> xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z">
</path>
</svg> </svg>
</button> </button>
</div> </div>
@@ -397,84 +417,87 @@
<p class="text-xs">Port: 127.0.0.1:22</p> <p class="text-xs">Port: 127.0.0.1:22</p>
</div> </div>
<button class="copy-key-btn ml-2" data-key-id="sftpHash" data-key-type="SFTP" title="Copy"> <button class="copy-key-btn ml-2" data-key-id="sftpHash" data-key-type="SFTP" title="Copy">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"></path> xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z">
</path>
</svg> </svg>
</button> </button>
</div> </div>
</div> </div>
</div> </div>
<div id="tutorialSection" class="hidden"> <div id="tutorialSection" class="hidden">
<div class="feature-card tilt-card p-6 mb-6"> <div class="feature-card tilt-card p-6 mb-6">
<h3 class="text-xl minecraft-font mb-4">What is Holesail.io?</h3> <h3 class="text-xl minecraft-font mb-4">What is Holesail.io?</h3>
<p class="text-base leading-relaxed mb-4"> <p class="text-base leading-relaxed mb-4">
<a href="https://holesail.io" target="_blank" <a href="https://holesail.io" target="_blank"
class="text-teal-400 hover:text-blue-400">Holesail.io</a> is an open-source, class="text-teal-400 hover:text-blue-400">Holesail.io</a> is an open-source,
peer-to-peer networking tool that creates secure, encrypted tunnels that bypass network peer-to-peer networking tool that creates secure, encrypted tunnels that bypass network
restrictions, firewalls, and NAT. It exposes your local network to the internet without restrictions, firewalls, and NAT. It exposes your local network to the internet without
needing port forwarding, static IPs, or Dynamic DNS, acting as a versatile tunneling and needing port forwarding, static IPs, or Dynamic DNS, acting as a versatile tunneling and
reverse proxy solution. reverse proxy solution.
</p> </p>
<div class="mb-4"> <div class="mb-4">
<p class="font-semibold mb-2">With Holesail, you can:</p> <p class="font-semibold mb-2">With Holesail, you can:</p>
<ul class="list-disc pl-6 space-y-1 text-base"> <ul class="list-disc pl-6 space-y-1 text-base">
<li>Access machines over the internet securely.</li> <li>Access machines over the internet securely.</li>
<li>Share locally running servers, websites, or AI models with other ports/services. <li>Share locally running servers, websites, or AI models with other ports/services.
</li> </li>
<li>Transfer files and folders remotely without bandwidth or size limits.</li> <li>Transfer files and folders remotely without bandwidth or size limits.</li>
<li>Play LAN games like Minecraft with friends remotely.</li> <li>Play LAN games like Minecraft with friends remotely.</li>
<li>Secure SSH servers by blocking IP access and using Holesail for connections.</li> <li>Secure SSH servers by blocking IP access and using Holesail for connections.</li>
<li>Built for ANY application, Holesail supports both the TCP and UDP Protocols <li>Built for ANY application, Holesail supports both the TCP and UDP Protocols
natively.</li> natively.</li>
<li>Expose single ports to the peer-to-peer network, unlike VPNs you never expose your <li>Expose single ports to the peer-to-peer network, unlike VPNs you never expose your
entire local network.</li> entire local network.</li>
</ul> </ul>
</div>
<p class="text-base leading-relaxed">
Built with security in mind, Holesail ensures all data is encrypted and never touches
third-party servers. Connections are truly peer-to-peer, accessible only to those with whom
you share your private key, providing both ease of use and robust security. Other peers
cannot detect your activity or services. As an open-source tool, Holesail enables
third-party services to integrate it, enhancing their security and connectivity.
</p>
<p class="text-base leading-relaxed mt-4">
Your Public My-MC Ports are Holesail connections hosted on a separate server, not our
Minecraft host. They use the same keys from the tutorial below. We hook 'em up at our jump
host to go public.
</p>
</div> </div>
<p class="text-base leading-relaxed">
Built with security in mind, Holesail ensures all data is encrypted and never touches
third-party servers. Connections are truly peer-to-peer, accessible only to those with whom
you share your private key, providing both ease of use and robust security. Other peers
cannot detect your activity or services. As an open-source tool, Holesail enables
third-party services to integrate it, enhancing their security and connectivity.
</p>
<p class="text-base leading-relaxed mt-4">
Your Public My-MC Ports are Holesail connections hosted on a separate server, not our
Minecraft host. They use the same keys from the tutorial below. We hook 'em up at our jump
host to go public.
</p>
</div>
<div class="feature-card tilt-card p-6 mb-6"> <div class="feature-card tilt-card p-6 mb-6">
<h3 class="text-xl minecraft-font mb-4">How to Use Holesail Keys</h3> <h3 class="text-xl minecraft-font mb-4">How to Use Holesail Keys</h3>
<ol class="list-decimal list-inside space-y-2"> <ol class="list-decimal list-inside space-y-2">
<li>Ensure <a href="https://nodejs.org/" target="_blank" <li>Ensure <a href="https://nodejs.org/" target="_blank"
class="text-teal-400 hover:text-blue-400">Node.js</a> is installed on your system. class="text-teal-400 hover:text-blue-400">Node.js</a> is installed on your system.
</li> </li>
<li>Install Holesail by running: <li>Install Holesail by running:
<pre <pre
class="bg-[rgba(10,17,40,0.3)] backdrop-blur-[12px] p-2 rounded mt-1 text-sm border border-[rgba(255,255,255,0.15)]">npm i holesail@2.1.0</pre> class="bg-[rgba(10,17,40,0.3)] backdrop-blur-[12px] p-2 rounded mt-1 text-sm border border-[rgba(255,255,255,0.15)]">npm i holesail@2.1.0</pre>
</li> </li>
<li>Connect to a key using the appropriate command: <li>Connect to a key using the appropriate command:
<ul class="list-disc list-inside ml-4 mt-1"> <ul class="list-disc list-inside ml-4 mt-1">
<li>For Minecraft Key (e.g., Minecraft server): <li>For Minecraft Key (e.g., Minecraft server):
<pre <pre
class="bg-[rgba(10,17,40,0.3)] backdrop-blur-[12px] p-2 rounded mt-1 text-sm border border-[rgba(255,255,255,0.15)]">holesail <span id="tutorialHolesailHash">Not Loaded</span></pre> class="bg-[rgba(10,17,40,0.3)] backdrop-blur-[12px] p-2 rounded mt-1 text-sm border border-[rgba(255,255,255,0.15)]">holesail <span id="tutorialHolesailHash">Not Loaded</span></pre>
</li> </li>
<li>For Geyser key (e.g., cross-platform Minecraft): <li>For Geyser key (e.g., cross-platform Minecraft):
<pre <pre
class="bg-[rgba(10,17,40,0.3)] backdrop-blur-[12px] p-2 rounded mt-1 text-sm border border-[rgba(255,255,255,0.15)]">holesail <span id="tutorialGeyserHash">Not Loaded</span></pre> class="bg-[rgba(10,17,40,0.3)] backdrop-blur-[12px] p-2 rounded mt-1 text-sm border border-[rgba(255,255,255,0.15)]">holesail <span id="tutorialGeyserHash">Not Loaded</span></pre>
</li> </li>
<li>For SFTP key (e.g., file transfer): <li>For SFTP key (e.g., file transfer):
<pre <pre
class="bg-[rgba(10,17,40,0.3)] backdrop-blur-[12px] p-2 rounded mt-1 text-sm border border-[rgba(255,255,255,0.15)]">holesail <span id="tutorialSftpHash">Not Loaded</span></pre> class="bg-[rgba(10,17,40,0.3)] backdrop-blur-[12px] p-2 rounded mt-1 text-sm border border-[rgba(255,255,255,0.15)]">holesail <span id="tutorialSftpHash">Not Loaded</span></pre>
</li> </li>
</ul> </ul>
</li> </li>
<li class="holesail-output-mobile-hidden">Holesail will confirm the connection. Example <li class="holesail-output-mobile-hidden">Holesail will confirm the connection. Example
output for your Minecraft server: output for your Minecraft server:
<pre <pre
class="bg-[rgba(10,17,40,0.3)] backdrop-blur-[12px] p-2 rounded mt-1 text-sm border border-[rgba(255,255,255,0.15)]"> class="bg-[rgba(10,17,40,0.3)] backdrop-blur-[12px] p-2 rounded mt-1 text-sm border border-[rgba(255,255,255,0.15)]">
~ holesail <span id="tutorialHolesailHashOutput">Not Loaded</span> ~ holesail <span id="tutorialHolesailHashOutput">Not Loaded</span>
┌───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┐ ┌───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┐
| | | |
@@ -489,49 +512,49 @@
| | | |
└───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┘ └───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┘
</pre> </pre>
</li> </li>
<li>Now you can connect to your own localhost within Minecraft!<br>Connect to: <li>Now you can connect to your own localhost within Minecraft!<br>Connect to:
<code <code
class="bg-[rgba(10,17,40,0.3)] backdrop-blur-[12px] px-1 rounded border border-[rgba(255,255,255,0.15)]">127.0.0.1:25565</code><br><br> class="bg-[rgba(10,17,40,0.3)] backdrop-blur-[12px] px-1 rounded border border-[rgba(255,255,255,0.15)]">127.0.0.1:25565</code><br><br>
</li> </li>
<li>To share the port over your internet IP as an open port, add the <code <li>To share the port over your internet IP as an open port, add the <code
class="bg-[rgba(10,17,40,0.3)] backdrop-blur-[12px] px-1 rounded border border-[rgba(255,255,255,0.15)]">--host 0.0.0.0</code> class="bg-[rgba(10,17,40,0.3)] backdrop-blur-[12px] px-1 rounded border border-[rgba(255,255,255,0.15)]">--host 0.0.0.0</code>
switch: switch:
<pre <pre
class="bg-[rgba(10,17,40,0.3)] backdrop-blur-[12px] p-2 rounded mt-1 text-sm border border-[rgba(255,255,255,0.15)]">holesail <span id="tutorialHolesailHashHost">Not Loaded</span> --host 0.0.0.0</pre> class="bg-[rgba(10,17,40,0.3)] backdrop-blur-[12px] p-2 rounded mt-1 text-sm border border-[rgba(255,255,255,0.15)]">holesail <span id="tutorialHolesailHashHost">Not Loaded</span> --host 0.0.0.0</pre>
<br>Note: Using the --host 0.0.0.0 method will require you open your port within your <br>Note: Using the --host 0.0.0.0 method will require you open your port within your
router in order to serve the port from your IP Address remotely. router in order to serve the port from your IP Address remotely.
</li> </li>
</ol> </ol>
</div> </div>
<div class="feature-card tilt-card p-6"> <div class="feature-card tilt-card p-6">
<h3 class="text-xl minecraft-font mb-4">Share with Friends</h3> <h3 class="text-xl minecraft-font mb-4">Share with Friends</h3>
<p class="mb-3"> <p class="mb-3">
Share this tutorial with your friends so they can connect to your Minecraft server or other Share this tutorial with your friends so they can connect to your Minecraft server or other
services on their own localhosts! With Holesail, no public IPs are needed! Everything stays services on their own localhosts! With Holesail, no public IPs are needed! Everything stays
secure and peer-to-peer! secure and peer-to-peer!
</p> </p>
<button id="copyTutorial" class="nav-btn">Copy Tutorial</button> <button id="copyTutorial" class="nav-btn">Copy Tutorial</button>
</div>
</div> </div>
</div> </div>
</main> </div>
</main>
<footer class="bg-[rgba(10,17,40,0.75)] backdrop-filter backdrop-blur-xl py-8 text-center relative z-2"> <footer class="bg-[rgba(10,17,40,0.75)] 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">© 2025 My-MC.Link. All rights reserved.</p>
<p class="text-sm opacity-90 mt-3"> <p class="text-sm opacity-90 mt-3">
Powered by <a href="https://holesail.io" class="underline text-teal-400 hover:text-blue-400" Powered by <a href="https://holesail.io" class="underline text-teal-400 hover:text-blue-400"
target="_blank">Holesail</a> with services target="_blank">Holesail</a> with services
donated by <a href="https://raven-scott.fyi" donated by <a href="https://raven-scott.fyi"
class="underline text-teal-400 hover:text-blue-400">SNXRaven</a> | class="underline text-teal-400 hover:text-blue-400">SNXRaven</a> |
<a href="https://git.ssh.surf/hypermc/panel" class="underline text-teal-400 hover:text-blue-400" <a href="https://git.ssh.surf/hypermc/panel" class="underline text-teal-400 hover:text-blue-400"
target="_blank">Source Code</a> target="_blank">Source Code</a>
</p> </p>
</footer> </footer>
<script src="js/app.js"></script> <script src="js/app.js"></script>
<script src="js/tutorial.js"></script> <script src="js/tutorial.js"></script>
</body> </body>