538 lines
36 KiB
HTML
538 lines
36 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en" class="h-full">
|
||
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<meta http-equiv="Permissions-Policy" content="clipboard-write=(self https://sftp.my-mc.link)">
|
||
<title>My-MC Panel</title>
|
||
<link rel="stylesheet" href="css/style.min.css">
|
||
<link rel="stylesheet" href="css/main-site.min.css">
|
||
|
||
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700;900&display=swap" rel="stylesheet">
|
||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
|
||
<link href="https://cdn.jsdelivr.net/npm/xterm@5.3.0/css/xterm.css" rel="stylesheet" />
|
||
<link rel="icon" href="https://minecraft.wiki/images/Favicon.png" type="image/png">
|
||
<link rel="apple-touch-icon" sizes="180x180" href="/favicon/apple-touch-icon.png">
|
||
<link rel="icon" type="image/png" sizes="32x32" href="/favicon/favicon-32x32.png">
|
||
<link rel="icon" type="image/png" sizes="16x16" href="/favicon/favicon-16x16.png">
|
||
<link rel="manifest" href="/favicon/site.webmanifest">
|
||
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
||
<script src="https://cdn.jsdelivr.net/npm/xterm@5.3.0/lib/xterm.min.js"></script>
|
||
<script src="https://cdn.jsdelivr.net/npm/xterm-addon-fit@0.8.0/lib/xterm-addon-fit.min.js"></script>
|
||
</head>
|
||
|
||
<body class="min-h-full flex flex-col">
|
||
<!-- 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 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://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">Home</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://info.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">Wiki</a>
|
||
</li>
|
||
<li class="mb-6">
|
||
<button id="mobileLogoutBtn"
|
||
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">Logout</button>
|
||
</li>
|
||
</ul>
|
||
</nav>
|
||
<!-- Particle Effects -->
|
||
<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-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">
|
||
My-MC Panel</h1>
|
||
<p class="text-lg mt-4 opacity-90 tracking-wide font-medium">Manage Your Minecraft Server</p>
|
||
</div>
|
||
<!-- Navigation Buttons (hidden on mobile) -->
|
||
<nav class="flex items-center gap-2 hidden md:flex">
|
||
<a href="https://my-mc.link" class="nav-btn">Home</a>
|
||
<a href="https://stats.my-mc.link" class="nav-btn" target="_blank">System Stats</a>
|
||
<button id="refresh" class="nav-btn control-btn">Refresh</button>
|
||
<button id="backupBtn" class="nav-btn">Backup</button>
|
||
<a href="https://info.my-mc.link" class="nav-btn" target="_blank">Wiki</a>
|
||
<button id="logoutBtn" class="nav-btn">Logout</button>
|
||
</nav>
|
||
</div>
|
||
</header>
|
||
|
||
<div id="app" class="flex-grow">
|
||
<!-- Login Page and Modals -->
|
||
<div id="loginPage" class="modal hidden">
|
||
<div class="modal-content">
|
||
<button class="modal-close">×</button>
|
||
<h2 class="text-2xl minecraft-font mb-6 text-center">My-MC Panel Login</h2>
|
||
<div class="mb-4">
|
||
<input id="loginApiKey" type="text" placeholder="Enter API Key"
|
||
class="bg-[rgba(10,17,40,0.3)] backdrop-blur-[12px] px-4 py-2 rounded text-white w-full border border-[rgba(255,255,255,0.15)]">
|
||
</div>
|
||
<button id="loginBtn" class="nav-btn2 w-full">Login</button>
|
||
<p id="loginError" class="text-red-500 text-sm mt-2 hidden"></p>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="notificationContainer"></div>
|
||
|
||
<div id="tellModal" class="modal hidden">
|
||
<div class="modal-content">
|
||
<button class="modal-close">×</button>
|
||
<h2 class="text-xl minecraft-font mb-4">Send Message to <span id="tellPlayerName"></span></h2>
|
||
<form id="tellForm">
|
||
<textarea id="tellMessage" placeholder="Enter your message"
|
||
class="bg-[rgba(10,17,40,0.3)] backdrop-blur-[12px] px-4 py-2 rounded text-white w-full h-24 mb-4 border border-[rgba(255,255,255,0.15)]"></textarea>
|
||
<button type="submit" class="nav-btn w-full">Send</button>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="giveModal" class="modal hidden">
|
||
<div class="modal-content">
|
||
<button class="modal-close">×</button>
|
||
<h2 class="text-xl minecraft-font mb-4">Give Items to <span id="givePlayerName"></span></h2>
|
||
<form id="giveForm">
|
||
<div class="mb-4">
|
||
<label for="loadoutSelect" class="block text-sm font-medium mb-1">Select Loadout</label>
|
||
<select id="loadoutSelect"
|
||
class="bg-[rgba(10,17,40,0.3)] backdrop-blur-[12px] px-4 py-2 rounded text-white w-full border border-[rgba(255,255,255,0.15)]">
|
||
<option value="custom">Custom</option>
|
||
<option value="starter">Starter Kit (Torches, Food)</option>
|
||
<option value="builder">Builder Kit (Stone, Wood)</option>
|
||
<option value="combat">Combat Kit (Sword, Armor)</option>
|
||
<option value="miner">Miner Kit (Pickaxe, Torches, Shovel)</option>
|
||
<option value="adventurer">Adventurer Kit (Bow, Arrows, Compass)</option>
|
||
<option value="alchemist">Alchemist Kit (Potions, Brewing Stand)</option>
|
||
<option value="enchanter">Enchanter Kit (Books, Lapis, Enchanting Table)</option>
|
||
<option value="farmer">Farmer Kit (Seeds, Hoe, Bone Meal)</option>
|
||
<option value="nether">Nether Survival Kit (Fire Resistance, Obsidian)</option>
|
||
<option value="end">End Prep Kit (Ender Pearls, Blaze Rods)</option>
|
||
</select>
|
||
</div>
|
||
<div id="customGiveFields" class="hidden mb-4">
|
||
<div id="itemList" class="space-y-2"></div>
|
||
<button type="button" id="addItemBtn" class="nav-btn mt-2">Add Item</button>
|
||
</div>
|
||
<button type="submit" class="nav-btn w-full">Give</button>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="teleportModal" class="modal hidden">
|
||
<div class="modal-content">
|
||
<button class="modal-close">×</button>
|
||
<h2 class="text-xl minecraft-font mb-4">Teleport <span id="teleportPlayerName"></span></h2>
|
||
<form id="teleportForm">
|
||
<div class="mb-4">
|
||
<label for="teleportDestination" class="block text-sm font-medium mb-1">Select Destination
|
||
Player</label>
|
||
<select id="teleportDestination"
|
||
class="bg-[rgba(10,17,40,0.3)] backdrop-blur-[12px] px-4 py-2 rounded text-white w-full border border-[rgba(255,255,255,0.15)]">
|
||
<!-- Options populated dynamically -->
|
||
</select>
|
||
</div>
|
||
<button type="submit" class="nav-btn w-full">Teleport</button>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="effectModal" class="modal hidden">
|
||
<div class="modal-content">
|
||
<button class="modal-close">×</button>
|
||
<h2 class="text-xl minecraft-font mb-4">Apply Effect to <span id="effectPlayerName"></span></h2>
|
||
<form id="effectForm">
|
||
<div class="mb-4">
|
||
<label for="effectSelect" class="block text-sm font-medium mb-1">Select Effect</label>
|
||
<select id="effectSelect"
|
||
class="bg-[rgba(10,17,40,0.3)] backdrop-blur-[12px] px-4 py-2 rounded text-white w-full border border-[rgba(255,255,255,0.15)]">
|
||
<option value="speed:30:1">Speed (30s, Level 1)</option>
|
||
<option value="strength:30:1">Strength (30s, Level 1)</option>
|
||
<option value="regeneration:30:1">Regeneration (30s, Level 1)</option>
|
||
<option value="jump_boost:30:1">Jump Boost (30s, Level 1)</option>
|
||
<option value="invisibility:30:1">Invisibility (30s, Level 1)</option>
|
||
<option value="night_vision:60:1">Night Vision (60s, Level 1)</option>
|
||
<option value="fire_resistance:60:1">Fire Resistance (60s, Level 1)</option>
|
||
<option value="water_breathing:60:1">Water Breathing (60s, Level 1)</option>
|
||
</select>
|
||
</div>
|
||
<button type="submit" class="nav-btn w-full">Apply Effect</button>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="editPropertiesModal" class="modal hidden">
|
||
<div class="modal-content">
|
||
<button class="modal-close">×</button>
|
||
<h2 class="text-xl minecraft-font mb-4">Edit server.properties</h2>
|
||
<form id="editPropertiesForm" class="space-y-4">
|
||
<div id="propertiesFields" class="space-y-2"></div>
|
||
<button type="submit" class="nav-btn w-full">Save</button>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="updateModsModal" class="modal hidden">
|
||
<div class="modal-content flex flex-col">
|
||
<div class="flex justify-between items-center p-4 border-b border-[rgba(255,255,255,0.12)]">
|
||
<h2 class="text-xl minecraft-font">Mod Update Output</h2>
|
||
<button class="modal-close text-2xl">×</button>
|
||
</div>
|
||
<pre id="updateModsOutput"
|
||
class="flex-1 p-4 text-[#e0e7ff] text-sm max-h-[calc(95vh-10rem)] overflow-y-auto overflow-x-auto whitespace-pre-wrap break-words leading-relaxed"></pre>
|
||
<div class="p-4 border-t border-[rgba(255,255,255,0.12)]">
|
||
<button id="closeUpdateModsBtn" class="btn-minecraft w-full">Close</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Main Content -->
|
||
<main id="mainContent" class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pb-16 relative z-2">
|
||
<div class="section-bg p-4 mb-6" data-section="server-status">
|
||
<div class="flex flex-col space-y-2 mb-3">
|
||
<h2 class="text-2xl minecraft-font">Server Status</h2>
|
||
<div class="flex justify-between items-center">
|
||
<div class="flex flex-col space-y-1 text-sm">
|
||
<p><strong>User:</strong> <span id="user">Loading...</span></p>
|
||
<p><strong>Status:</strong> <span id="serverStatus">Loading...</span></p>
|
||
</div>
|
||
<div class="flex space-x-3 justify-center">
|
||
<div class="text-center">
|
||
<canvas id="memoryMeter" width="100" height="100"></canvas>
|
||
<p class="text-xs mt-1"><b>Memory</b></p>
|
||
<p id="memoryPercent" class="text-base font-bold">0%</p>
|
||
</div>
|
||
<div class="text-center">
|
||
<canvas id="cpuMeter" width="100" height="100"></canvas>
|
||
<p class="text-xs mt-1"><b>CPU</b></p>
|
||
<p id="cpuPercent" class="text-base font-bold">0%</p>
|
||
</div>
|
||
</div>
|
||
<div class="flex flex-col space-y-1">
|
||
<div class="flex justify-end space-x-1">
|
||
<button id="startBtn" class="control-btn text-sm">Start</button>
|
||
<button id="stopBtn" class="control-btn text-sm">Stop</button>
|
||
<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="updateModsBtn" class="nav-btn text-sm">Update Mods</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="section-bg mb-12">
|
||
<h2 class="text-3xl minecraft-font mb-8">Server Logs</h2>
|
||
<div id="dockerLogsTerminal" class="mt-4"></div>
|
||
</div>
|
||
|
||
<div class="section-bg mb-12">
|
||
<h2 class="text-3xl minecraft-font mb-8">Player Management</h2>
|
||
<p><strong>Connected Players:</strong><br> <span id="playerList">Loading...</span></p>
|
||
</div>
|
||
|
||
<div class="section-bg mb-12">
|
||
<h2 class="text-3xl minecraft-font mb-8">Server Console</h2>
|
||
<form id="consoleForm" onsubmit="event.preventDefault(); sendConsoleCommand();">
|
||
<input id="consoleInput" type="text" placeholder="Enter RCON Command (Hit Enter To Submit)"
|
||
class="bg-[rgba(10,17,40,0.3)] backdrop-blur-[12px] px-4 py-2 rounded text-white w-full mb-2 border border-[rgba(255,255,255,0.15)]">
|
||
<button id="sendConsole" type="submit" class="nav-btn" style="display: none;">Send</button>
|
||
</form>
|
||
<pre id="consoleOutput"
|
||
class="bg-[rgba(10,17,40,0.3)] backdrop-blur-[12px] p-4 rounded mt-4 h-48 overflow-y-auto border border-[rgba(255,255,255,0.15)]"></pre>
|
||
</div>
|
||
|
||
<div class="section-bg mb-12" id="sftpBrowserSection" style="display: none;">
|
||
<div class="flex justify-between items-baseline mb-4">
|
||
<h2 class="text-3xl minecraft-font">SFTP Browser</h2>
|
||
<button id="sftpBtn" class="nav-btn text-sm flex items-center space-x-1">
|
||
<i class="fas fa-sync-alt"></i>
|
||
<span>Refresh SFTP</span>
|
||
</button>
|
||
</div>
|
||
<iframe id="sftpIframe" class="w-full rounded" allow="clipboard-read; clipboard-write"></iframe>
|
||
</div>
|
||
|
||
<div class="section-bg mb-8">
|
||
<h2 class="text-2xl minecraft-font mb-6">Mod Management</h2>
|
||
<form id="modSearchForm" onsubmit="event.preventDefault(); searchMods(1);">
|
||
<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="closeSearchBtn" type="button" class="btn-minecraft hidden">Close</button>
|
||
</div>
|
||
</form>
|
||
<div id="modResults" class="grid grid-cols-1 md:grid-cols-2 gap-4"></div>
|
||
<div id="pagination" class="pagination-container mt-3"></div>
|
||
<h3 class="text-lg minecraft-font mt-3">Installed Mods</h3>
|
||
<div class="mb-3 flex space-x-2">
|
||
<input id="modListSearch" type="text" placeholder="Search Installed Mods"
|
||
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="clearModListSearch" type="button" class="btn-minecraft hidden">Clear</button>
|
||
</div>
|
||
<div id="modList" class="mt-2 grid grid-cols-1 md:grid-cols-2 gap-4"></div>
|
||
<div id="modListPagination" class="pagination-container mt-3"></div>
|
||
</div>
|
||
|
||
<div class="section-bg mb-8 p-6 rounded-lg">
|
||
<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]">
|
||
<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">
|
||
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]">
|
||
<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">
|
||
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]">
|
||
<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">
|
||
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]">
|
||
<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>
|
||
</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]">
|
||
<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>
|
||
</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>
|
||
<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">
|
||
<p class="text-sm"><strong>Minecraft Key:</strong></p>
|
||
<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>
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
<div class="flex items-center p-3 bg-gray-800 rounded-md min-w-0 flex-1">
|
||
<div class="flex-grow">
|
||
<p class="text-sm"><strong>Geyser Key:</strong></p>
|
||
<p class="break-all text-sm" id="geyserHash">Not Loaded</p>
|
||
<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>
|
||
</button>
|
||
</div>
|
||
<div class="flex items-center p-3 bg-gray-800 rounded-md min-w-0 flex-1">
|
||
<div class="flex-grow">
|
||
<p class="text-sm"><strong>SFTP Key:</strong></p>
|
||
<p class="break-all text-sm" id="sftpHash">Not Loaded</p>
|
||
<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>
|
||
</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>
|
||
|
||
<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>
|
||
┌───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┐
|
||
| |
|
||
| |
|
||
| 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>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>
|
||
</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>
|
||
|
||
<script src="js/app.js"></script>
|
||
<script src="js/tutorial.js"></script>
|
||
|
||
</body>
|
||
|
||
</html> |