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

Add holesail key section along with holesail tutorial and easy share tutorial so folks can share easy on discord

Browse Source
This commit is contained in:
MCHost
2025-06-26 04:13:21 -04:00
parent 281d3432b4
commit d096231869
3 changed files with 613 additions and 364 deletions
Download Patch File Download Diff File Expand all files Collapse all files

185
public/index.html
View File

@ -185,7 +185,6 @@
<button id="stopBtn" class="bg-red-600 hover:bg-red-700 rounded font-medium control-btn">Stop</button>
<button id="restartBtn"
class="bg-yellow-600 hover:bg-yellow-700 rounded font-medium control-btn">Restart</button>
</div>
<button id="editPropertiesBtn"
class="bg-purple-600 hover:bg-purple-700 px-4 py-2 rounded control-btn w-full mt-2">Edit Server
@ -219,7 +218,6 @@
</div>
<div class="bg-gray-800 p-6 rounded-lg shadow-lg mb-6" id="sftpBrowserSection" style="display: none;">
<!-- Container for header and button -->
<div class="flex justify-between items-baseline mb-4">
<h2 class="text-xl font-semibold">SFTP Browser</h2>
<button id="sftpBtn" class="px-3 py-1 rounded text-sm flex items-center space-x-1"
@ -228,7 +226,6 @@
<span>Refresh SFTP</span>
</button>
</div>
<!-- Iframe remains unchanged -->
<iframe id="sftpIframe" class="w-full rounded" style="height: 650px; min-height: 650px;"
sandbox="allow-same-origin allow-scripts allow-downloads allow-popups"
allow="clipboard-read; clipboard-write"></iframe>
@ -287,6 +284,188 @@
</div>
</div>
</div>
<div class="bg-gray-800 p-6 rounded-lg shadow-lg mb-6">
<div class="flex items-center justify-between mb-4">
<h2 class="text-xl font-semibold text-white">Holesail Keys</h2>
<button id="toggleTutorial" class="bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2 px-4 rounded-md transition duration-200">Tutorial</button>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
<div class="flex items-center bg-gray-700 p-3 rounded-md">
<div class="flex-grow">
<p class="text-gray-300"><strong>Minecraft Key:</strong></p>
<p class="text-gray-100 break-all" id="holesailHash">Not Loaded</p>
<p class="text-sm text-gray-400">Port: 127.0.0.1:25565</p>
</div>
<button onclick="navigator.clipboard.writeText(document.getElementById('holesailHash').textContent)" class="ml-2 text-gray-300 hover:text-white" title="Copy">
<svg class="w-5 h-5" 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 class="flex items-center bg-gray-700 p-3 rounded-md">
<div class="flex-grow">
<p class="text-gray-300"><strong>Geyser Key:</strong></p>
<p class="text-gray-100 break-all" id="geyserHash">Not Loaded</p>
<p class="text-sm text-gray-400">Port: 127.0.0.1:19132</p>
</div>
<button onclick="navigator.clipboard.writeText(document.getElementById('geyserHash').textContent)" class="ml-2 text-gray-300 hover:text-white" title="Copy">
<svg class="w-5 h-5" 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 class="flex items-center bg-gray-700 p-3 rounded-md">
<div class="flex-grow">
<p class="text-gray-300"><strong>SFTP Key:</strong></p>
<p class="text-gray-100 break-all" id="sftpHash">Not Loaded</p>
<p class="text-sm text-gray-400">Port: 127.0.0.1:22</p>
</div>
<button onclick="navigator.clipboard.writeText(document.getElementById('sftpHash').textContent)" class="ml-2 text-gray-300 hover:text-white" title="Copy">
<svg class="w-5 h-5" 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 id="tutorialSection" class="hidden">
<div class="bg-gray-700 p-6 rounded-xl mb-6 border border-gray-600">
<h3 class="text-xl font-bold mb-4 text-white border-b border-gray-500 pb-2">What is Holesail.io?</h3>
<p class="text-gray-200 text-base leading-relaxed mb-4">
<a href="https://holesail.io" target="_blank" class="text-blue-400 hover:underline font-medium">Holesail.io</a> is an open-source, peer-to-peer networking tool that creates secure, encrypted tunnels that bypass network restrictions, firewalls, and NAT.<BR>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="text-gray-200 font-semibold mb-2">With Holesail, you can:</p>
<ul class="list-disc pl-6 space-y-1 text-gray-200 text-base">
<li>* Access machines over the internet securely.</li>
<li>* Share locally running servers, websites, or AI models with others.</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>
</ul>
</div>
<p class="text-gray-200 text-base leading-relaxed">
Built with security in mind, Holesail ensures all data is encrypted and never touches third-party servers.<BR>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.<BR>Other peers cannot detect your activity or services.<BR>As an open-source tool, Holesail enables third-party services to integrate it, enhancing their security and connectivity.
</p>
</div>
<div class="bg-gray-700 p-4 rounded-md mb-6">
<h3 class="text-lg font-semibold mb-3 text-white">How to Use Holesail Keys</h3>
<ol class="list-decimal list-inside space-y-2 text-gray-300">
<li>Ensure <a href="https://nodejs.org/" target="_blank" class="text-blue-400 hover:underline">Node.js</a> is installed on your system.</li>
<li>Install Holesail by running:
<pre class="bg-gray-800 p-2 rounded mt-1 text-sm">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-gray-800 p-2 rounded mt-1 text-sm">holesail <span id="tutorialHolesailHash">Not Loaded</span></pre>
</li>
<li>For Geyser key (e.g., cross-platform Minecraft):
<pre class="bg-gray-800 p-2 rounded mt-1 text-sm">holesail <span id="tutorialGeyserHash">Not Loaded</span></pre>
</li>
<li>For SFTP key (e.g., file transfer):
<pre class="bg-gray-800 p-2 rounded mt-1 text-sm">holesail <span id="tutorialSftpHash">Not Loaded</span></pre>
</li>
</ul>
</li>
<li>Holesail will confirm the connection. Example output for your Minecraft server:
<pre class="bg-gray-800 p-2 rounded mt-1 text-sm">
~ ❯ holesail <span id="tutorialHolesailHashOutput">Not Loaded</span>
┌───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┐
| |
| |
| Holesail TCP Client Started ⛵️ |
| Connection Mode: Private Connection String |
| Access application on http://127.0.0.1:25565/ |
| Connected to key: <span id="tutorialHolesailHashOutput2">Not Loaded</span> |
| NOTE: TREAT PRIVATE CONNECTION STRINGS HOW YOU WOULD TREAT SSH KEY, DO NOT SHARE IT WITH ANYONE YOU DO NOT TRUST |
| |
| |
| |
└───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┘
</pre>
</li>
<li>To share the port over your internet IP as an open port, add the <code class="bg-gray-800 px-1 rounded">--host 0.0.0.0</code> switch:
<pre class="bg-gray-800 p-2 rounded mt-1 text-sm">holesail <span id="tutorialHolesailHashHost">Not Loaded</span> --host 0.0.0.0</pre>
</li>
</ol>
</div>
<div class="bg-gray-700 p-4 rounded-md">
<h3 class="text-lg font-semibold mb-3 text-white">Share with Friends</h3>
<p class="text-gray-300 mb-3">
Share this tutorial with your friends so they can connect to your Minecraft server or other services on their own localhosts!<BR>With Holesail, no public IPs are needed! Everything stays secure and peer-to-peer!
</p>
<button id="copyTutorial" class="bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2 px-4 rounded-md transition duration-200">Copy Tutorial</button>
<p id="copyNotification" class="hidden text-green-400 mt-2 text-sm">Tutorial copied to clipboard!</p>
</div>
</div>
<script>
// Function to update tutorial spans when key display spans are populated
function updateTutorialSpans() {
const holesailHash = document.getElementById('holesailHash').textContent;
const geyserHash = document.getElementById('geyserHash').textContent;
const sftpHash = document.getElementById('sftpHash').textContent;
document.getElementById('tutorialHolesailHash').textContent = holesailHash;
document.getElementById('tutorialGeyserHash').textContent = geyserHash;
document.getElementById('tutorialSftpHash').textContent = sftpHash;
document.getElementById('tutorialHolesailHashOutput').textContent = holesailHash;
document.getElementById('tutorialHolesailHashOutput2').textContent = holesailHash;
document.getElementById('tutorialHolesailHashHost').textContent = holesailHash;
}
// Run initially
updateTutorialSpans();
// Observe changes to key display spans
const observer = new MutationObserver(updateTutorialSpans);
document.querySelectorAll('#holesailHash, #geyserHash, #sftpHash').forEach(span => {
observer.observe(span, { childList: true, characterData: true, subtree: true });
});
// Toggle tutorial section visibility
document.getElementById('toggleTutorial').addEventListener('click', () => {
const tutorialSection = document.getElementById('tutorialSection');
tutorialSection.classList.toggle('hidden');
});
// Copy summarized tutorial in Markdown and show success message
document.getElementById('copyTutorial').addEventListener('click', () => {
const holesailHash = document.getElementById('holesailHash').textContent;
const markdownTutorial = `# Join My Minecraft Server with Holesail!
Holesail is a secure, peer-to-peer tool that lets you connect to my server without public IPs.
1. **Install Node.js**: Download and install from [nodejs.org](https://nodejs.org/).
2. **Install Holesail**: Open a terminal and run:
\`\`\`bash
npm i holesail@2.1.0
\`\`\`
3. **Connect to the server**: Use this command with the key:
\`\`\`bash
holesail ${holesailHash}
\`\`\`
4. **Join in Minecraft**: Once Holesail confirms the connection, connect to \`127.0.0.1:25565\` in Minecraft.
**Note**: Keep the key private, like an SSH key. No public IPs needed—it's all peer-to-peer!`;
navigator.clipboard.writeText(markdownTutorial);
// Show success message
const notification = document.getElementById('copyNotification');
notification.classList.remove('hidden');
// Hide success message after 3 seconds
setTimeout(() => {
notification.classList.add('hidden');
}, 3000);
});
</script>
</div>
</main>
<footer class="bg-gray-800 py-4">