Hugging Face's logo

Spaces:
Felix8917
/
olyris-host
Running

App Files Community
olyris-host / index.html
Felix8917's picture
Felix8917
fai che se premi pricing ti porta sotto ai piani, se premi features ti dice porcodio a schermo, se premi home ti porta inizio alla pagina e se premi support ti fa la schermata per contattare assistenza - Initial Deployment
ab4b711 verified
raw
history blame contribute delete
63.1 kB
 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Olyris Host - Premium Minecraft Hosting</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
.gradient-bg {
background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
}
.server-card:hover {
transform: translateY(-5px);
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
.console-output {
font-family: 'Courier New', monospace;
background-color: #1a202c;
color: #e2e8f0;
}
.tab-content {
display: none;
}
.tab-content.active {
display: block;
}
#fileManager {
height: 400px;
overflow-y: auto;
}
.file-item:hover {
background-color: #edf2f7;
}
</style>
</head>
<body class="bg-gray-50">
<!-- Navigation -->
<nav class="gradient-bg text-white shadow-lg">
<div class="container mx-auto px-6 py-4">
<div class="flex items-center justify-between">
<div class="flex items-center">
<i class="fas fa-server text-2xl mr-2"></i>
<span class="font-semibold text-xl">Olyris Host</span>
</div>
<div class="hidden md:flex items-center space-x-8">
<a href="#" onclick="window.scrollTo(0,0)" class="hover:text-gray-200">Home</a>
<a href="#pricing" class="hover:text-gray-200">Pricing</a>
<a href="#" onclick="alert('porcodio')" class="hover:text-gray-200">Features</a>
<a href="#" onclick="document.getElementById('supportModal').classList.remove('hidden')" class="hover:text-gray-200">Support</a>
</div>
<div>
<button id="loginBtn" class="px-4 py-2 rounded-md bg-white text-indigo-600 font-medium hover:bg-gray-100 transition">Login</button>
</div>
</div>
</div>
</nav>
<!-- Hero Section -->
<section class="gradient-bg text-white py-20">
<div class="container mx-auto px-6 text-center">
<h1 class="text-4xl md:text-6xl font-bold mb-6">Premium Minecraft Hosting</h1>
<p class="text-xl md:text-2xl mb-8">Powerful servers with 24GB RAM & 7 Core CPU starting at $0</p>
<button onclick="document.getElementById('serverCreationModal').classList.remove('hidden')" class="px-8 py-4 bg-white text-indigo-600 rounded-lg text-lg font-bold hover:bg-gray-100 transition shadow-lg">Get Started Now</button>
</div>
</section>
<!-- Features Section -->
<section id="features" class="py-16 bg-white">
<div class="container mx-auto px-6">
<h2 class="text-3xl font-bold text-center mb-12">Why Choose MineHost?</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<div class="bg-gray-50 p-6 rounded-lg shadow-md">
<div class="text-indigo-600 mb-4">
<i class="fas fa-bolt text-4xl"></i>
</div>
<h3 class="text-xl font-bold mb-2">Blazing Fast Performance</h3>
<p class="text-gray-600">Our high-performance servers with 7 Core CPUs ensure your Minecraft world runs smoothly with no lag.</p>
</div>
<div class="bg-gray-50 p-6 rounded-lg shadow-md">
<div class="text-indigo-600 mb-4">
<i class="fas fa-shield-alt text-4xl"></i>
</div>
<h3 class="text-xl font-bold mb-2">DDoS Protection</h3>
<p class="text-gray-600">Advanced protection keeps your server safe from attacks and malicious traffic.</p>
</div>
<div class="bg-gray-50 p-6 rounded-lg shadow-md">
<div class="text-indigo-600 mb-4">
<i class="fas fa-hdd text-4xl"></i>
</div>
<h3 class="text-xl font-bold mb-2">SSD Storage</h3>
<p class="text-gray-600">NVMe SSDs provide ultra-fast world loading and chunk generation for your players.</p>
</div>
</div>
</div>
</section>
<!-- Pricing Section -->
<section id="pricing" class="py-16 bg-gray-50">
<div class="container mx-auto px-6">
<h2 class="text-3xl font-bold text-center mb-12">Our Pricing Plans</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-5xl mx-auto">
<!-- Free Plan -->
<div class="bg-white rounded-lg shadow-lg overflow-hidden transition duration-300 server-card">
<div class="px-6 py-8 border-b">
<div class="text-center">
<span class="inline-block px-3 py-1 text-sm font-semibold text-green-600 bg-green-100 rounded-full mb-4">FREE</span>
<h3 class="text-2xl font-bold mb-2">Starter</h3>
<div class="text-4xl font-bold mb-4">$0<span class="text-lg text-gray-500">/month</span></div>
<p class="text-gray-500">Perfect for small communities</p>
</div>
</div>
<div class="p-6">
<ul class="space-y-3">
<li class="flex items-center">
<i class="fas fa-check text-green-500 mr-2"></i>
<span>24GB DDR4 RAM</span>
</li>
<li class="flex items-center">
<i class="fas fa-check text-green-500 mr-2"></i>
<span>olyris.it domain</span>
</li>
<li class="flex items-center">
<i class="fas fa-check text-green-500 mr-2"></i>
<span>7 Core CPU</span>
</li>
<li class="flex items-center">
<i class="fas fa-check text-green-500 mr-2"></i>
<span>50GB NVMe SSD</span>
</li>
<li class="flex items-center">
<i class="fas fa-check text-green-500 mr-2"></i>
<span>Unlimited Slots</span>
</li>
<li class="flex items-center">
<i class="fas fa-check text-green-500 mr-2"></i>
<span>DDoS Protection</span>
</li>
</ul>
<button onclick="document.getElementById('serverCreationModal').classList.remove('hidden')" class="w-full mt-8 px-6 py-3 bg-indigo-600 text-white rounded-lg font-semibold hover:bg-indigo-700 transition">Get Started</button>
</div>
</div>
<!-- Premium Plan -->
<div class="bg-white rounded-lg shadow-lg overflow-hidden transition duration-300 server-card transform scale-105">
<div class="px-6 py-8 border-b gradient-bg text-white">
<div class="text-center">
<span class="inline-block px-3 py-1 text-sm font-semibold text-white bg-indigo-800 rounded-full mb-4">POPULAR</span>
<h3 class="text-2xl font-bold mb-2">Premium</h3>
<div class="text-4xl font-bold mb-4">$9.99<span class="text-lg opacity-70">/month</span></div>
<p class="opacity-90">For growing communities</p>
</div>
</div>
<div class="p-6">
<ul class="space-y-3">
<li class="flex items-center">
<i class="fas fa-check text-green-500 mr-2"></i>
<span>32GB DDR4 RAM</span>
</li>
<li class="flex items-center">
<i class="fas fa-check text-green-500 mr-2"></i>
<span>9 Core CPU</span>
</li>
<li class="flex items-center">
<i class="fas fa-check text-green-500 mr-2"></i>
<span>100GB NVMe SSD</span>
</li>
<li class="flex items-center">
<i class="fas fa-check text-green-500 mr-2"></i>
<span>Unlimited Slots</span>
</li>
<li class="flex items-center">
<i class="fas fa-check text-green-500 mr-2"></i>
<span>Premium Support</span>
</li>
</ul>
<button onclick="document.getElementById('systemInfoModal').classList.remove('hidden'); getSystemInfo()" class="w-full mt-8 px-6 py-3 gradient-bg text-white rounded-lg font-semibold hover:opacity-90 transition">Get Started</button>
</div>
</div>
<!-- Enterprise Plan -->
<div class="bg-white rounded-lg shadow-lg overflow-hidden transition duration-300 server-card">
<div class="px-6 py-8 border-b">
<div class="text-center">
<span class="inline-block px-3 py-1 text-sm font-semibold text-purple-600 bg-purple-100 rounded-full mb-4">BEST VALUE</span>
<h3 class="text-2xl font-bold mb-2">Enterprise</h3>
<div class="text-4xl font-bold mb-4">$19.99<span class="text-lg text-gray-500">/month</span></div>
<p class="text-gray-500">For large networks</p>
</div>
</div>
<div class="p-6">
<ul class="space-y-3">
<li class="flex items-center">
<i class="fas fa-check text-green-500 mr-2"></i>
<span>64GB DDR4 RAM</span>
</li>
<li class="flex items-center">
<i class="fas fa-check text-green-500 mr-2"></i>
<span>12 Core CPU</span>
</li>
<li class="flex items-center">
<i class="fas fa-check text-green-500 mr-2"></i>
<span>250GB NVMe SSD</span>
</li>
<li class="flex items-center">
<i class="fas fa-check text-green-500 mr-2"></i>
<span>Unlimited Slots</span>
</li>
<li class="flex items-center">
<i class="fas fa-check text-green-500 mr-2"></i>
<span>Dedicated IP</span>
</li>
</ul>
<button onclick="document.getElementById('systemInfoModal').classList.remove('hidden'); getSystemInfo()" class="w-full mt-8 px-6 py-3 bg-indigo-600 text-white rounded-lg font-semibold hover:bg-indigo-700 transition">Get Started</button>
</div>
</div>
</div>
</div>
</section>
<!-- Login Modal -->
<div id="loginModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
<div class="bg-white rounded-lg shadow-xl w-full max-w-md">
<div class="p-6">
<div class="flex justify-between items-center mb-4">
<h3 class="text-2xl font-bold">Login</h3>
<button id="closeLoginModalBtn" class="text-gray-500 hover:text-gray-700">
<i class="fas fa-times"></i>
</button>
</div>
<div class="space-y-4">
<div>
<label class="block text-gray-700 mb-2" for="loginEmail">Email</label>
<input type="email" id="loginEmail" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500" placeholder="your@email.com">
<p id="emailError" class="text-red-500 text-sm mt-1 hidden">Inserisci mail valida (@hotmail.com, @gmail.com, @outlook.com, @yahoo.com)</p>
</div>
<div>
<label class="block text-gray-700 mb-2" for="loginPassword">Password</label>
<input type="password" id="loginPassword" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500" placeholder="••••••••">
<p id="passwordError" class="text-red-500 text-sm mt-1 hidden">Password sbagliata</p>
</div>
<div class="flex justify-between items-center">
<div class="flex items-center">
<input type="checkbox" id="rememberMe" class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded">
<label for="rememberMe" class="ml-2 block text-sm text-gray-700">Remember me</label>
</div>
<a href="#" class="text-sm text-indigo-600 hover:text-indigo-500">Forgot password?</a>
</div>
<div class="pt-4">
<button id="loginSubmitBtn" class="w-full py-3 bg-indigo-600 text-white rounded-lg font-semibold hover:bg-indigo-700 transition">Login</button>
</div>
<div class="text-center text-sm text-gray-500">
Don't have an account? <a href="#" id="registerLink" class="text-indigo-600 hover:text-indigo-500">Sign up</a>
<p id="accountError" class="text-red-500 text-sm mt-2 hidden">Account non esistente, <a href="#" class="text-indigo-600 hover:text-indigo-500 underline" id="createAccountLink">registrati</a></p>
</div>
</div>
</div>
</div>
</div>
<!-- System Info Modal -->
<div id="systemInfoModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
<div class="bg-white rounded-lg shadow-xl w-full max-w-4xl">
<div class="p-6">
<div class="flex justify-between items-center mb-4">
<h3 class="text-2xl font-bold">System Information</h3>
<button id="closeSystemInfoModalBtn" class="text-gray-500 hover:text-gray-700">
<i class="fas fa-times"></i>
</button>
</div>
<div>
<h4 class="text-lg font-semibold mb-3">Network Information</h4>
<div class="space-y-2">
<div class="flex justify-between">
<span class="text-gray-600">IP Address:</span>
<span id="infoIp" class="font-medium">Loading...</span>
</div>
<div class="flex justify-between">
<span class="text-gray-600">Connection:</span>
<span id="infoConnection" class="font-medium">Loading...</span>
</div>
<div class="flex justify-between">
<span class="text-gray-600">Location:</span>
<span id="infoLocation" class="font-medium">Loading...</span>
</div>
<div class="flex justify-between">
<span class="text-gray-600">Coordinates:</span>
<span id="infoCoordinates" class="font-medium">Loading...</span>
</div>
</div>
<h4 class="text-lg font-semibold mt-6 mb-3">Hardware Information</h4>
<div class="space-y-2">
<div class="flex justify-between">
<span class="text-gray-600">CPU Cores:</span>
<span id="infoCpu" class="font-medium">Loading...</span>
</div>
<div class="flex justify-between">
<span class="text-gray-600">GPU:</span>
<span id="infoGpu" class="font-medium">Loading...</span>
</div>
<div class="flex justify-between">
<span class="text-gray-600">RAM:</span>
<span id="infoRam" class="font-medium">Loading...</span>
</div>
</div>
</div>
<div class="mt-6 pt-4 border-t">
<button id="confirmPurchaseBtn" class="w-full py-3 bg-indigo-600 text-white rounded-lg font-semibold hover:bg-indigo-700 transition">
Confirm Purchase
</button>
</div>
</div>
</div>
</div>
<!-- Server Creation Modal -->
<div id="serverCreationModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
<div class="bg-white rounded-lg shadow-xl w-full max-w-2xl">
<div class="p-6">
<div class="flex justify-between items-center mb-4">
<h3 class="text-2xl font-bold">Create New Server</h3>
<button id="closeModalBtn" class="text-gray-500 hover:text-gray-700">
<i class="fas fa-times"></i>
</button>
</div>
<div id="step1" class="space-y-4">
<div>
<label class="block text-gray-700 mb-2" for="serverName">Server Name</label>
<input type="text" id="serverName" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500" placeholder="My Awesome Server">
</div>
<div>
<label class="block text-gray-700 mb-2" for="serverLocation">Server Location</label>
<select id="serverLocation" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500">
<option value="us-east">US East (New York)</option>
<option value="us-west">US West (Los Angeles)</option>
<option value="eu">Europe (London)</option>
<option value="asia">Asia (Singapore)</option>
</select>
</div>
<div>
<label class="block text-gray-700 mb-2" for="serverIp">Server IP</label>
<div class="flex">
<input type="text" id="serverIp" class="w-full px-4 py-2 border rounded-l-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500" placeholder="my-server" readonly>
<span class="px-4 py-2 bg-gray-100 border-t border-b border-r rounded-r-lg text-gray-700" id="ipSuffix">.olyris.it</span>
</div>
</div>
<div class="pt-4">
<button id="nextStepBtn" class="w-full py-3 bg-indigo-600 text-white rounded-lg font-semibold hover:bg-indigo-700 transition">Next: Choose Version</button>
</div>
</div>
<div id="step2" class="hidden space-y-6">
<div>
<h4 class="text-lg font-semibold mb-3">Minecraft Version</h4>
<div class="grid grid-cols-2 gap-4">
<div class="border rounded-lg p-4 hover:border-indigo-500 cursor-pointer version-option" data-version="1.20.1">
<div class="flex items-center">
<div class="w-8 h-8 bg-green-100 rounded-full flex items-center justify-center mr-3">
<i class="fas fa-cube text-green-600"></i>
</div>
<span class="font-medium">1.20.1 (Latest)</span>
</div>
</div>
<div class="border rounded-lg p-4 hover:border-indigo-500 cursor-pointer version-option" data-version="1.19.4">
<div class="flex items-center">
<div class="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center mr-3">
<i class="fas fa-cube text-blue-600"></i>
</div>
<span class="font-medium">1.19.4</span>
</div>
</div>
<div class="border rounded-lg p-4 hover:border-indigo-500 cursor-pointer version-option" data-version="1.18.2">
<div class="flex items-center">
<div class="w-8 h-8 bg-purple-100 rounded-full flex items-center justify-center mr-3">
<i class="fas fa-cube text-purple-600"></i>
</div>
<span class="font-medium">1.18.2</span>
</div>
</div>
<div class="border rounded-lg p-4 hover:border-indigo-500 cursor-pointer version-option" data-version="1.17.1">
<div class="flex items-center">
<div class="w-8 h-8 bg-yellow-100 rounded-full flex items-center justify-center mr-3">
<i class="fas fa-cube text-yellow-600"></i>
</div>
<span class="font-medium">1.17.1</span>
</div>
</div>
</div>
</div>
<div>
<h4 class="text-lg font-semibold mb-3">Server Type</h4>
<div class="grid grid-cols-4 gap-3">
<div class="border rounded-lg p-3 text-center cursor-pointer type-option" data-type="vanilla">
<i class="fas fa-cube text-2xl mb-2 text-gray-700"></i>
<div class="font-medium">Vanilla</div>
</div>
<div class="border rounded-lg p-3 text-center cursor-pointer type-option" data-type="spigot">
<i class="fas fa-bolt text-2xl mb-2 text-orange-500"></i>
<div class="font-medium">Spigot</div>
</div>
<div class="border rounded-lg p-3 text-center cursor-pointer type-option" data-type="bukkit">
<i class="fas fa-puzzle-piece text-2xl mb-2 text-blue-500"></i>
<div class="font-medium">Bukkit</div>
</div>
<div class="border rounded-lg p-3 text-center cursor-pointer type-option" data-type="forge">
<i class="fas fa-cogs text-2xl mb-2 text-purple-500"></i>
<div class="font-medium">Forge</div>
</div>
</div>
</div>
<div class="flex justify-between pt-4">
<button id="prevStepBtn" class="px-6 py-2 border rounded-lg font-medium hover:bg-gray-50">Back</button>
<button id="createServerBtn" class="px-6 py-3 bg-indigo-600 text-white rounded-lg font-semibold hover:bg-indigo-700 transition">Create Server</button>
</div>
</div>
</div>
</div>
</div>
<!-- Server Dashboard -->
<div id="serverDashboard" class="hidden container mx-auto px-6 py-12">
<div class="flex justify-between items-center mb-8">
<h2 class="text-3xl font-bold">Server Dashboard</h2>
<div class="flex space-x-4">
<button id="backToHomeBtn" class="px-4 py-2 border rounded-lg hover:bg-gray-50">
<i class="fas fa-arrow-left mr-2"></i> Back to Home
</button>
</div>
</div>
<div class="bg-white rounded-lg shadow-md overflow-hidden mb-8">
<div class="p-6 border-b">
<div class="flex flex-col md:flex-row md:items-center md:justify-between">
<div>
<h3 class="text-xl font-bold" id="dashboardServerName">My Awesome Server</h3>
<div class="flex items-center mt-2">
<span class="px-2 py-1 bg-green-100 text-green-800 rounded-full text-xs font-medium mr-3">Online</span>
<span class="text-gray-600 text-sm" id="dashboardServerIp">my-server.olyris.it</span>
</div>
</div>
<div class="mt-4 md:mt-0 flex space-x-3">
<button id="startServerBtn" class="px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700">
<i class="fas fa-play mr-2"></i> Start
</button>
<button id="stopServerBtn" class="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700">
<i class="fas fa-stop mr-2"></i> Stop
</button>
<button id="restartServerBtn" class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700">
<i class="fas fa-redo mr-2"></i> Restart
</button>
</div>
</div>
</div>
<!-- Tabs -->
<div class="border-b">
<div class="flex overflow-x-auto">
<button class="tab-btn px-6 py-3 border-b-2 border-transparent font-medium hover:text-indigo-600 active" data-tab="console">Console</button>
<button class="tab-btn px-6 py-3 border-b-2 border-transparent font-medium hover:text-indigo-600" data-tab="fileManager">File Manager</button>
<button class="tab-btn px-6 py-3 border-b-2 border-transparent font-medium hover:text-indigo-600" data-tab="players">Players</button>
<button class="tab-btn px-6 py-3 border-b-2 border-transparent font-medium hover:text-indigo-600" data-tab="worlds">Worlds</button>
<button class="tab-btn px-6 py-3 border-b-2 border-transparent font-medium hover:text-indigo-600" data-tab="settings">Settings</button>
</div>
</div>
<!-- Tab Content -->
<div class="p-6">
<!-- Console Tab -->
<div id="console" class="tab-content active">
<div class="console-output p-4 rounded-lg mb-4 h-64 overflow-y-auto" id="serverConsole" style="background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);">
[00:00:00] [Server thread/INFO]: Starting minecraft server version 1.20.1<br>
[00:00:00] [Server thread/INFO]: Loading properties<br>
[00:00:00] [Server thread/INFO]: Default game type: SURVIVAL<br>
[00:00:00] [Server thread/INFO]: Generating keypair<br>
[00:00:01] [Server thread/INFO]: Starting Minecraft server on *:25565<br>
[00:00:01] [Server thread/INFO]: Using default channel type<br>
[00:00:01] [Server thread/INFO]: Preparing level "world"<br>
[00:00:02] [Server thread/INFO]: Preparing start region for dimension minecraft:overworld<br>
[00:00:03] [Server thread/INFO]: Time elapsed: 1234 ms<br>
[00:00:03] [Server thread/INFO]: Done (3.456s)! For help, type "help"<br>
</div>
<div class="flex">
<input type="text" class="flex-grow px-4 py-2 border rounded-l-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500" placeholder="Enter command...">
<button class="px-4 py-2 bg-indigo-600 text-white rounded-r-lg hover:bg-indigo-700">Send</button>
</div>
</div>
<!-- File Manager Tab -->
<div id="fileManager" class="tab-content">
<div class="flex justify-between items-center mb-4">
<div class="flex items-center">
<button class="px-3 py-1 bg-gray-100 rounded-lg mr-2 hover:bg-gray-200">
<i class="fas fa-upload"></i>
</button>
<button class="px-3 py-1 bg-gray-100 rounded-lg mr-2 hover:bg-gray-200">
<i class="fas fa-folder-plus"></i>
</button>
<button class="px-3 py-1 bg-gray-100 rounded-lg hover:bg-gray-200">
<i class="fas fa-trash"></i>
</button>
</div>
<div class="text-sm text-gray-500">
<span id="storageUsed">12.5</span>MB of <span id="storageTotal">50</span>GB used
</div>
</div>
<div class="border rounded-lg overflow-hidden">
<table class="min-w-full divide-y divide-gray-200">
<thead class="bg-gray-50">
<tr>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Name</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Size</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Modified</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
</tr>
</thead>
<tbody class="bg-white divide-y divide-gray-200" id="fileList">
<tr class="file-item hover:bg-gray-50 cursor-pointer">
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<i class="fas fa-folder text-yellow-400 mr-2"></i>
<span>world</span>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">8.2MB</td>
<td class="px-6 py-4 whitespace-nowrap">2 minutes ago</td>
<td class="px-6 py-4 whitespace-nowrap">
<button class="text-indigo-600 hover:text-indigo-900 mr-3"><i class="fas fa-download"></i></button>
<button class="text-red-600 hover:text-red-900"><i class="fas fa-trash"></i></button>
</td>
</tr>
<tr class="file-item hover:bg-gray-50 cursor-pointer">
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<i class="fas fa-file-alt text-blue-400 mr-2"></i>
<span>server.properties</span>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">1.2KB</td>
<td class="px-6 py-4 whitespace-nowrap">5 minutes ago</td>
<td class="px-6 py-4 whitespace-nowrap">
<button class="text-indigo-600 hover:text-indigo-900 mr-3"><i class="fas fa-download"></i></button>
<button class="text-red-600 hover:text-red-900"><i class="fas fa-trash"></i></button>
</td>
</tr>
<tr class="file-item hover:bg-gray-50 cursor-pointer">
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<i class="fas fa-file-alt text-blue-400 mr-2"></i>
<span>eula.txt</span>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">0.1KB</td>
<td class="px-6 py-4 whitespace-nowrap">10 minutes ago</td>
<td class="px-6 py-4 whitespace-nowrap">
<button class="text-indigo-600 hover:text-indigo-900 mr-3"><i class="fas fa-download"></i></button>
<button class="text-red-600 hover:text-red-900"><i class="fas fa-trash"></i></button>
</td>
</tr>
<tr class="file-item hover:bg-gray-50 cursor-pointer">
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<i class="fas fa-folder text-yellow-400 mr-2"></i>
<span>plugins</span>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">4.0MB</td>
<td class="px-6 py-4 whitespace-nowrap">15 minutes ago</td>
<td class="px-6 py-4 whitespace-nowrap">
<button class="text-indigo-600 hover:text-indigo-900 mr-3"><i class="fas fa-download"></i></button>
<button class="text-red-600 hover:text-red-900"><i class="fas fa-trash"></i></button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- Players Tab -->
<div id="players" class="tab-content">
<div class="text-center py-12 text-gray-500">
<i class="fas fa-users text-4xl mb-4 opacity-30"></i>
<p>No players online</p>
</div>
</div>
<!-- Worlds Tab -->
<div id="worlds" class="tab-content">
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<div class="border rounded-lg p-4 hover:shadow-md transition cursor-pointer">
<div class="flex justify-between items-start mb-3">
<h4 class="font-bold">world</h4>
<span class="px-2 py-1 bg-green-100 text-green-800 rounded-full text-xs">Active</span>
</div>
<div class="text-sm text-gray-500 mb-3">Survival world</div>
<div class="flex justify-between text-sm">
<span>8.2MB</span>
<span>Last played: Now</span>
</div>
</div>
<div class="border rounded-lg p-4 hover:shadow-md transition cursor-pointer">
<div class="flex justify-between items-start mb-3">
<h4 class="font-bold">nether</h4>
<span class="px-2 py-1 bg-gray-100 text-gray-800 rounded-full text-xs">Inactive</span>
</div>
<div class="text-sm text-gray-500 mb-3">Nether dimension</div>
<div class="flex justify-between text-sm">
<span>3.5MB</span>
<span>Last played: 1 day ago</span>
</div>
</div>
<div class="border rounded-lg p-4 hover:shadow-md transition cursor-pointer">
<div class="flex justify-between items-start mb-3">
<h4 class="font-bold">creative</h4>
<span class="px-2 py-1 bg-gray-100 text-gray-800 rounded-full text-xs">Inactive</span>
</div>
<div class="text-sm text-gray-500 mb-3">Creative building</div>
<div class="flex justify-between text-sm">
<span>12.1MB</span>
<span>Last played: 3 days ago</span>
</div>
</div>
</div>
<div class="mt-6">
<button class="px-4 py-2 border rounded-lg hover:bg-gray-50">
<i class="fas fa-plus mr-2"></i> Create New World
</button>
</div>
</div>
<!-- Settings Tab -->
<div id="settings" class="tab-content">
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div>
<h4 class="text-lg font-semibold mb-4">Server Properties</h4>
<div class="space-y-4">
<div>
<label class="block text-gray-700 mb-1">Max Players</label>
<input type="number" class="w-full px-4 py-2 border rounded-lg" value="20">
</div>
<div>
<label class="block text-gray-700 mb-1">Difficulty</label>
<select class="w-full px-4 py-2 border rounded-lg">
<option>Peaceful</option>
<option selected>Easy</option>
<option>Normal</option>
<option>Hard</option>
</select>
</div>
<div>
<label class="block text-gray-700 mb-1">Gamemode</label>
<select class="w-full px-4 py-2 border rounded-lg">
<option selected>Survival</option>
<option>Creative</option>
<option>Adventure</option>
<option>Spectator</option>
</select>
</div>
</div>
</div>
<div>
<h4 class="text-lg font-semibold mb-4">Server Management</h4>
<div class="space-y-4">
<div>
<label class="block text-gray-700 mb-1">Server Version</label>
<select class="w-full px-4 py-2 border rounded-lg">
<option selected>1.20.1 (Latest)</option>
<option>1.19.4</option>
<option>1.18.2</option>
<option>1.17.1</option>
</select>
</div>
<div>
<label class="block text-gray-700 mb-1">Server Type</label>
<select class="w-full px-4 py-2 border rounded-lg">
<option selected>Vanilla</option>
<option>Spigot</option>
<option>Bukkit</option>
<option>Forge</option>
</select>
</div>
<div class="pt-2">
<button class="px-4 py-2 bg-red-100 text-red-600 rounded-lg hover:bg-red-200">
<i class="fas fa-trash mr-2"></i> Delete Server
</button>
</div>
</div>
</div>
</div>
<div class="mt-8">
<button class="px-6 py-3 bg-indigo-600 text-white rounded-lg font-semibold hover:bg-indigo-700">Save Changes</button>
</div>
</div>
</div>
</div>
</div>
<!-- Footer -->
<footer class="bg-gray-800 text-white py-12">
<div class="container mx-auto px-6">
<div class="grid grid-cols-1 md:grid-cols-4 gap-8">
<div>
<h3 class="text-xl font-bold mb-4">MineHost</h3>
<p class="text-gray-400">Premium Minecraft hosting with powerful hardware and excellent support.</p>
</div>
<div>
<h4 class="font-bold mb-4">Quick Links</h4>
<ul class="space-y-2">
<li><a href="#" class="text-gray-400 hover:text-white">Home</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">Pricing</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">Features</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">Support</a></li>
</ul>
</div>
<div>
<h4 class="font-bold mb-4">Legal</h4>
<ul class="space-y-2">
<li><a href="#" class="text-gray-400 hover:text-white">Terms of Service</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">Privacy Policy</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">Refund Policy</a></li>
</ul>
</div>
<div>
<h4 class="font-bold mb-4">Contact</h4>
<ul class="space-y-2">
<li class="flex items-center">
<i class="fas fa-envelope mr-2 text-gray-400"></i>
<span class="text-gray-400">support@olyris.it</span>
</li>
<li class="flex items-center">
<i class="fas fa-globe mr-2 text-gray-400"></i>
<span class="text-gray-400">olyris.it</span>
</li>
</ul>
</div>
</div>
<div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400">
<p>&copy; 2023 Olyris Host. All rights reserved.</p>
</div>
</div>
</footer>
<script>
// Login modal handlers
document.getElementById('loginBtn').addEventListener('click', function() {
document.getElementById('loginModal').classList.remove('hidden');
});
document.getElementById('closeLoginModalBtn').addEventListener('click', function() {
document.getElementById('loginModal').classList.add('hidden');
});
// In-memory "database" for demo purposes
const userDatabase = {};
document.getElementById('loginSubmitBtn').addEventListener('click', function() {
const email = document.getElementById('loginEmail').value;
const password = document.getElementById('loginPassword').value;
const emailError = document.getElementById('emailError');
const passwordError = document.getElementById('passwordError');
const accountError = document.getElementById('accountError');
// Reset errors
emailError.classList.add('hidden');
passwordError.classList.add('hidden');
accountError.classList.add('hidden');
// Validate email format
const validDomains = ['@hotmail.com', '@gmail.com', '@outlook.com', '@yahoo.com'];
const isValidEmail = validDomains.some(domain => email.endsWith(domain));
if (!isValidEmail) {
emailError.classList.remove('hidden');
document.getElementById('loginEmail').classList.add('border-red-500');
return;
} else {
document.getElementById('loginEmail').classList.remove('border-red-500');
}
// Check if account exists
if (!userDatabase[email]) {
accountError.classList.remove('hidden');
return;
}
// Check password
if (userDatabase[email] !== password) {
passwordError.classList.remove('hidden');
return;
}
// Successful login
document.getElementById('loginModal').classList.add('hidden');
const loginBtn = document.getElementById('loginBtn');
loginBtn.textContent = 'My Account';
loginBtn.classList.remove('bg-white', 'text-indigo-600');
loginBtn.classList.add('bg-indigo-600', 'text-white');
});
// Registration functionality
document.getElementById('registerLink').addEventListener('click', function(e) {
e.preventDefault();
const email = document.getElementById('loginEmail').value;
const password = document.getElementById('loginPassword').value;
const emailError = document.getElementById('emailError');
const accountError = document.getElementById('accountError');
// Validate email format
const validDomains = ['@hotmail.com', '@gmail.com', '@outlook.com', '@yahoo.com'];
const isValidEmail = validDomains.some(domain => email.endsWith(domain));
if (!isValidEmail) {
emailError.classList.remove('hidden');
document.getElementById('loginEmail').classList.add('border-red-500');
return;
} else {
document.getElementById('loginEmail').classList.remove('border-red-500');
}
// Check if account already exists
if (userDatabase[email]) {
accountError.textContent = 'Email già in uso, effettua il login';
accountError.classList.remove('hidden');
return;
}
// Register new user
userDatabase[email] = password;
accountError.textContent = 'Registrazione completata! Ora puoi effettuare il login';
accountError.classList.remove('hidden');
accountError.classList.remove('text-red-500');
accountError.classList.add('text-green-500');
document.getElementById('createAccountLink').classList.add('hidden');
});
// Create account link
document.getElementById('createAccountLink').addEventListener('click', function(e) {
e.preventDefault();
const email = document.getElementById('loginEmail').value;
const password = document.getElementById('loginPassword').value;
// Register new user
userDatabase[email] = password;
document.getElementById('accountError').textContent = 'Registrazione completata! Ora puoi effettuare il login';
document.getElementById('accountError').classList.remove('text-red-500');
document.getElementById('accountError').classList.add('text-green-500');
document.getElementById('createAccountLink').classList.add('hidden');
});
document.getElementById('closeModalBtn').addEventListener('click', function() {
document.getElementById('serverCreationModal').classList.add('hidden');
});
// Update server IP based on name
document.getElementById('serverName').addEventListener('input', function() {
const serverName = this.value.toLowerCase().replace(/[^a-z0-9-]/g, '-');
document.getElementById('serverIp').value = serverName;
});
// Step navigation
document.getElementById('nextStepBtn').addEventListener('click', function() {
document.getElementById('step1').classList.add('hidden');
document.getElementById('step2').classList.remove('hidden');
});
document.getElementById('prevStepBtn').addEventListener('click', function() {
document.getElementById('step2').classList.add('hidden');
document.getElementById('step1').classList.remove('hidden');
});
// Version selection
const versionOptions = document.querySelectorAll('.version-option');
versionOptions.forEach(option => {
option.addEventListener('click', function() {
versionOptions.forEach(opt => opt.classList.remove('border-indigo-500', 'bg-indigo-50'));
this.classList.add('border-indigo-500', 'bg-indigo-50');
});
});
// Type selection
const typeOptions = document.querySelectorAll('.type-option');
typeOptions.forEach(option => {
option.addEventListener('click', function() {
typeOptions.forEach(opt => opt.classList.remove('border-indigo-500', 'bg-indigo-50'));
this.classList.add('border-indigo-500', 'bg-indigo-50');
});
});
// Create server and show dashboard
document.getElementById('createServerBtn').addEventListener('click', function() {
const serverName = document.getElementById('serverName').value;
const serverIp = document.getElementById('serverIp').value + '.olyris.it';
// Hide modal and home content
document.getElementById('serverCreationModal').classList.add('hidden');
document.querySelector('nav').classList.add('hidden');
document.querySelector('section.gradient-bg').classList.add('hidden');
document.querySelector('section#features').classList.add('hidden');
document.querySelector('section#pricing').classList.add('hidden');
document.querySelector('footer').classList.add('hidden');
// Update dashboard with server info
document.getElementById('dashboardServerName').textContent = serverName;
document.getElementById('dashboardServerIp').textContent = serverIp;
// Show dashboard
document.getElementById('serverDashboard').classList.remove('hidden');
});
// Back to home button
document.getElementById('backToHomeBtn').addEventListener('click', function() {
document.getElementById('serverDashboard').classList.add('hidden');
// Show all home sections
document.querySelector('nav').classList.remove('hidden');
document.querySelector('section.gradient-bg').classList.remove('hidden');
document.querySelector('section#features').classList.remove('hidden');
document.querySelector('section#pricing').classList.remove('hidden');
document.querySelector('footer').classList.remove('hidden');
});
// Tab switching
const tabButtons = document.querySelectorAll('.tab-btn');
const tabContents = document.querySelectorAll('.tab-content');
tabButtons.forEach(button => {
button.addEventListener('click', function() {
const tabId = this.getAttribute('data-tab');
// Remove active class from all buttons and contents
tabButtons.forEach(btn => btn.classList.remove('active', 'border-indigo-500', 'text-indigo-600'));
tabContents.forEach(content => content.classList.remove('active'));
// Add active class to clicked button and corresponding content
this.classList.add('active', 'border-indigo-500', 'text-indigo-600');
document.getElementById(tabId).classList.add('active');
});
});
// Server control buttons
document.getElementById('startServerBtn').addEventListener('click', function() {
const consoleOutput = document.getElementById('serverConsole');
consoleOutput.innerHTML += '[00:00:00] [Server thread/INFO]: Starting server...<br>';
consoleOutput.scrollTop = consoleOutput.scrollHeight;
});
document.getElementById('stopServerBtn').addEventListener('click', function() {
const consoleOutput = document.getElementById('serverConsole');
consoleOutput.innerHTML += '[00:00:00] [Server thread/INFO]: Stopping server...<br>';
consoleOutput.scrollTop = consoleOutput.scrollHeight;
});
document.getElementById('restartServerBtn').addEventListener('click', function() {
const consoleOutput = document.getElementById('serverConsole');
consoleOutput.innerHTML += '[00:00:00] [Server thread/INFO]: Restarting server...<br>';
consoleOutput.scrollTop = consoleOutput.scrollHeight;
});
// System info modal handlers
document.getElementById('closeSystemInfoModalBtn').addEventListener('click', function() {
document.getElementById('systemInfoModal').classList.add('hidden');
});
async function getSystemInfo() {
try {
// Get IP and location info
const ipResponse = await fetch('https://api.ipify.org?format=json');
const ipData = await ipResponse.json();
document.getElementById('infoIp').textContent = ipData.ip;
const locationResponse = await fetch(`https://ipapi.co/${ipData.ip}/json/`);
const locationData = await locationResponse.json();
document.getElementById('infoLocation').textContent =
`${locationData.city || 'Unknown'}, ${locationData.region || 'Unknown'}, ${locationData.country_name || 'Unknown'}`;
if (locationData.latitude && locationData.longitude) {
document.getElementById('infoCoordinates').textContent =
`${locationData.latitude}° ${locationData.latitude > 0 ? 'N' : 'S'}, ${locationData.longitude}° ${locationData.longitude > 0 ? 'E' : 'W'}`;
} else {
document.getElementById('infoCoordinates').textContent = 'Unknown';
}
// Get connection info
const connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection;
if (connection) {
document.getElementById('infoConnection').textContent =
`${connection.downlink} Mbps (${connection.effectiveType})`;
} else {
document.getElementById('infoConnection').textContent = 'Unknown';
}
// Get hardware info
document.getElementById('infoCpu').textContent = navigator.hardwareConcurrency + ' cores';
const canvas = document.createElement('canvas');
const gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl');
if (gl) {
const debugInfo = gl.getExtension('WEBGL_debug_renderer_info');
if (debugInfo) {
document.getElementById('infoGpu').textContent =
gl.getParameter(debugInfo.UNMASKED_RENDERER_WEBGL);
} else {
document.getElementById('infoGpu').textContent = 'Unknown (WebGL supported)';
}
} else {
document.getElementById('infoGpu').textContent = 'WebGL not supported';
}
// Get RAM info (approximate)
if (navigator.deviceMemory) {
document.getElementById('infoRam').textContent = navigator.deviceMemory + 'GB';
} else {
document.getElementById('infoRam').textContent = 'Unknown';
}
} catch (error) {
console.error('Error fetching system info:', error);
document.getElementById('infoIp').textContent = 'Error loading';
document.getElementById('infoConnection').textContent = 'Error loading';
document.getElementById('infoLocation').textContent = 'Error loading';
document.getElementById('infoCoordinates').textContent = 'Error loading';
document.getElementById('infoCpu').textContent = navigator.hardwareConcurrency ? navigator.hardwareConcurrency + ' cores' : 'Unknown';
document.getElementById('infoGpu').textContent = 'Unknown';
document.getElementById('infoRam').textContent = 'Unknown';
}
}
// Confirm purchase
document.getElementById('confirmPurchaseBtn').addEventListener('click', function() {
alert('Purchase confirmed! Redirecting to dashboard...');
document.getElementById('systemInfoModal').classList.add('hidden');
stopCamera();
// Here you would normally redirect to payment processing
});
</script>
<!-- Support Modal -->
<div id="supportModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
<div class="bg-white rounded-lg shadow-xl w-full max-w-md">
<div class="p-6">
<div class="flex justify-between items-center mb-4">
<h3 class="text-2xl font-bold">Contact Support</h3>
<button onclick="document.getElementById('supportModal').classList.add('hidden')" class="text-gray-500 hover:text-gray-700">
<i class="fas fa-times"></i>
</button>
</div>
<div class="space-y-4">
<div>
<label class="block text-gray-700 mb-2" for="supportEmail">Your Email</label>
<input type="email" id="supportEmail" class="w-full px-4 py-2 border rounded-lg" placeholder="your@email.com">
</div>
<div>
<label class="block text-gray-700 mb-2" for="supportMessage">Message</label>
<textarea id="supportMessage" class="w-full px-4 py-2 border rounded-lg h-32" placeholder="Describe your issue..."></textarea>
</div>
<div class="pt-4">
<button class="w-full py-3 bg-indigo-600 text-white rounded-lg font-semibold hover:bg-indigo-700 transition">Send Message</button>
</div>
</div>
</div>
</div>
</div>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Felix8917/olyris-host" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>