From cec187dde98e8e8b6db7b2cd9334d785bc03ce22 Mon Sep 17 00:00:00 2001
From: MCHost <hypermc@ssh.surf>
Date: Tue, 8 Jul 2025 07:09:25 -0400
Subject: [PATCH] move advanced log card to the last position

---
 public/index.html | 289 +++++++++++++++++++++++++---------------------
 1 file changed, 156 insertions(+), 133 deletions(-)

diff --git a/public/index.html b/public/index.html
index e2414e0..89063d1 100644
--- a/public/index.html
+++ b/public/index.html
@@ -237,7 +237,8 @@
                                 <button id="restartBtn" class="control-btn text-sm">Restart</button>
                             </div>
                             <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>
                             </div>
                         </div>
@@ -283,7 +284,8 @@
                     <div class="mb-3 flex space-x-2">
                         <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)]">
-                        <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>
                     </div>
                 </form>
@@ -303,68 +305,79 @@
                 <h2 class="text-2xl minecraft-font mb-6 font-bold text-white">Server Links</h2>
                 <div class="flex flex-row gap-4 mb-4">
                     <!-- 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>
                         <p class="text-gray-300 mb-3 break-all">
                             <span id="myLink" class="text-blue-400">Link Not Created</span>
                             <span id="connectionStatus" class="text-xs"></span>
                         </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
                         </button>
                     </div>
                     <!-- 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>
                         <p class="text-gray-300 mb-3 break-all">
                             <span id="geyserLink" class="text-blue-400">Link Not Created</span>
                             <span id="geyserStatus" class="text-xs"></span>
                         </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
                         </button>
                     </div>
                     <!-- 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>
                         <p class="text-gray-300 mb-3 break-all">
                             <span id="sftpLink" class="text-blue-400">Link Not Created</span>
                             <span id="sftpStatus" class="text-xs"></span>
                         </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
                         </button>
                     </div>
                 </div>
                 <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 -->
-                    <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>
                         <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>
                     </div>
                     <!-- 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>
                         <p class="text-gray-300 mb-3 break-all">
                             <a id="mapUrl" href="#" class="text-blue-400 hover:underline" target="_blank">Loading...</a>
                         </p>
                     </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 class="section-bg mb-8">
                 <div class="flex items-center justify-between mb-3 flex-wrap">
                     <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>
-                                </div>
+                    <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>
+                </div>
                 <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-grow">
@@ -372,9 +385,13 @@
                             <p class="break-all text-sm" id="holesailHash">Not Loaded</p>
                             <p class="text-xs">Port: 127.0.0.1:25565</p>
                         </div>
-                        <button class="copy-key-btn ml-2" data-key-id="holesailHash" data-key-type="Minecraft" title="Copy">
-                            <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>
+                        <button class="copy-key-btn ml-2" data-key-id="holesailHash" data-key-type="Minecraft"
+                            title="Copy">
+                            <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>
                         </button>
                     </div>
@@ -385,8 +402,11 @@
                             <p class="text-xs">Port: 127.0.0.1:19132</p>
                         </div>
                         <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">
-                                <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>
                         </button>
                     </div>
@@ -397,84 +417,87 @@
                             <p class="text-xs">Port: 127.0.0.1:22</p>
                         </div>
                         <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">
-                                <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>
                         </button>
                     </div>
                 </div>
             </div>
 
-                <div id="tutorialSection" class="hidden">
-                    <div class="feature-card tilt-card p-6 mb-6">
-                        <h3 class="text-xl minecraft-font mb-4">What is Holesail.io?</h3>
-                        <p class="text-base leading-relaxed mb-4">
-                            <a href="https://holesail.io" target="_blank"
-                                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
-                            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
-                            reverse proxy solution.
-                        </p>
-                        <div class="mb-4">
-                            <p class="font-semibold mb-2">With Holesail, you can:</p>
-                            <ul class="list-disc pl-6 space-y-1 text-base">
-                                <li>Access machines over the internet securely.</li>
-                                <li>Share locally running servers, websites, or AI models with other ports/services.
-                                </li>
-                                <li>Transfer files and folders remotely without bandwidth or size limits.</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>Built for ANY application, Holesail supports both the TCP and UDP Protocols
-                                    natively.</li>
-                                <li>Expose single ports to the peer-to-peer network, unlike VPNs you never expose your
-                                    entire local network.</li>
-                            </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 id="tutorialSection" class="hidden">
+                <div class="feature-card tilt-card p-6 mb-6">
+                    <h3 class="text-xl minecraft-font mb-4">What is Holesail.io?</h3>
+                    <p class="text-base leading-relaxed mb-4">
+                        <a href="https://holesail.io" target="_blank"
+                            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
+                        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
+                        reverse proxy solution.
+                    </p>
+                    <div class="mb-4">
+                        <p class="font-semibold mb-2">With Holesail, you can:</p>
+                        <ul class="list-disc pl-6 space-y-1 text-base">
+                            <li>Access machines over the internet securely.</li>
+                            <li>Share locally running servers, websites, or AI models with other ports/services.
+                            </li>
+                            <li>Transfer files and folders remotely without bandwidth or size limits.</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>Built for ANY application, Holesail supports both the TCP and UDP Protocols
+                                natively.</li>
+                            <li>Expose single ports to the peer-to-peer network, unlike VPNs you never expose your
+                                entire local network.</li>
+                        </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 class="feature-card tilt-card p-6 mb-6">
-                        <h3 class="text-xl minecraft-font mb-4">How to Use Holesail Keys</h3>
-                        <ol class="list-decimal list-inside space-y-2">
-                            <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.
-                            </li>
-                            <li>Install Holesail by running:
-                                <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>Connect to a key using the appropriate command:
-                                <ul class="list-disc list-inside ml-4 mt-1">
-                                    <li>For Minecraft Key (e.g., Minecraft server):
-                                        <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>For Geyser key (e.g., cross-platform Minecraft):
-                                        <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>For SFTP key (e.g., file transfer):
-                                        <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>
-                                </ul>
-                            </li>
-                            <li class="holesail-output-mobile-hidden">Holesail will confirm the connection. Example
-                                output for your Minecraft server:
-                                <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)]">
+                <div class="feature-card tilt-card p-6 mb-6">
+                    <h3 class="text-xl minecraft-font mb-4">How to Use Holesail Keys</h3>
+                    <ol class="list-decimal list-inside space-y-2">
+                        <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.
+                        </li>
+                        <li>Install Holesail by running:
+                            <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>Connect to a key using the appropriate command:
+                            <ul class="list-disc list-inside ml-4 mt-1">
+                                <li>For Minecraft Key (e.g., Minecraft server):
+                                    <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>For Geyser key (e.g., cross-platform Minecraft):
+                                    <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>For SFTP key (e.g., file transfer):
+                                    <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>
+                            </ul>
+                        </li>
+                        <li class="holesail-output-mobile-hidden">Holesail will confirm the connection. Example
+                            output for your Minecraft server:
+                            <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="tutorialHolesailHashOutput">Not Loaded</span>
 ┌───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┐
 |                                                                                                                       |
@@ -489,49 +512,49 @@
 |                                                                                                                       |
 └───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┘
                 </pre>
-                            </li>
-                            <li>Now you can connect to your own localhost within Minecraft!<br>Connect to:
-                                <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>
-                            </li>
-                            <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>
-                                switch:
-                                <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
-                                router in order to serve the port from your IP Address remotely.
-                            </li>
-                        </ol>
-                    </div>
+                        </li>
+                        <li>Now you can connect to your own localhost within Minecraft!<br>Connect to:
+                            <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>
+                        </li>
+                        <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>
+                            switch:
+                            <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
+                            router in order to serve the port from your IP Address remotely.
+                        </li>
+                    </ol>
+                </div>
 
-                    <div class="feature-card tilt-card p-6">
-                        <h3 class="text-xl minecraft-font mb-4">Share with Friends</h3>
-                        <p class="mb-3">
-                            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
-                            secure and peer-to-peer!
-                        </p>
-                        <button id="copyTutorial" class="nav-btn">Copy Tutorial</button>
-                    </div>
+                <div class="feature-card tilt-card p-6">
+                    <h3 class="text-xl minecraft-font mb-4">Share with Friends</h3>
+                    <p class="mb-3">
+                        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
+                        secure and peer-to-peer!
+                    </p>
+                    <button id="copyTutorial" class="nav-btn">Copy Tutorial</button>
                 </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">
-            <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 text-teal-400 hover:text-blue-400"
-                    target="_blank">Holesail</a> with services
-                donated by <a href="https://raven-scott.fyi"
-                    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"
-                    target="_blank">Source Code</a>
-            </p>
-        </footer>
+    <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 mt-3">
+            Powered by <a href="https://holesail.io" class="underline text-teal-400 hover:text-blue-400"
+                target="_blank">Holesail</a> with services
+            donated by <a href="https://raven-scott.fyi"
+                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"
+                target="_blank">Source Code</a>
+        </p>
+    </footer>
 
-        <script src="js/app.js"></script>
-        <script src="js/tutorial.js"></script>
+    <script src="js/app.js"></script>
+    <script src="js/tutorial.js"></script>
 
 </body>