Spaces:
Running
Running
must create all pages. Design a beautiful, modern desktop UI for a “Minecraft Server Manager” application. The style should be: • Dark mode base (#1e1e2e) with teal/cyan accents (#00b894). • Inter or JetBrains Mono for body and monospace for code. • 2XL rounded corners on cards & buttons, soft drop shadows, 16px padding and 24px gutters throughout. • Vertical sidebar on the left with icons + labels: Dashboard, Servers, Create Server, Console, Mods, Backups, Performance, Tunnel, Settings. • Top bar with app title (“Sahaj33 Server Manager”), theme toggle, and close/minimize controls. Create mockups for these screens: Dashboard Big Start, Stop, Restart buttons Status badge (🟢 Running / 🔴 Stopped) Info cards: Public IP (ngrok URL), LAN IP, Port, Edition, Version, Players online “Reload” button and skeleton loaders for data fetching Servers List Table of existing servers with columns: Name, Edition, Version, Status, Players, Actions (Start/Stop/Restart/Delete) Search/filter bar on top Create Server Wizard Step 1: Choose Edition (Java/Bedrock) + Flavor (Vanilla, Paper, Fabric, etc.) + Version dropdown (with “Show Snapshots” toggle) Step 2: Allocate RAM (slider + numeric input, default suggestion based on system RAM) Step 3: Select or browse server folder via file‑picker button Step 4: Accept EULA checkbox (disables “Next” until checked) + “Finish” button Console Full‑width scrollable log window (dark monospaced text) Command input at bottom with “Send” button “Clear” and “Download Log” icons Mods Search bar with source toggle (CurseForge / Modrinth) List of popular mods with thumbnails, name, version, “Install” / “Remove” buttons Installed mods shown separately Backups “Backup Now” button + schedule dropdown (Off / Hourly / Daily / Weekly) Table of backups: Timestamp, Size, Description, Actions (Restore, Delete) Performance Live charts: CPU %, RAM %, TPS (line graphs) Uptime counter, player count, tick rate badge Tunnel “Start Tunnel” and “Stop Tunnel” buttons Display public URL card with copy‑to‑clipboard icon Status badge (Active/Inactive) Settings Tabs or sections: General (MOTD, max players, difficulty, game rules), Advanced (auto-update jars, mod folder), Tunnel (ngrok token input here), Appearance (theme toggle), About Save button fixed at bottom For each screen, include: Clear hover, pressed, and disabled states on buttons Toast/pop‑up notifications for success/error Skeleton loaders while fetching data Generate a single cohesive design system: color palette, typography scale, button styles, input styles, cards, modals, dialogs. Deliverables: high-fidelity mockups for each screen, plus a unified style guide. - Initial Deployment
b9c53ec verified | <html lang="en" class="dark"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Sahaj33 Server Manager</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet"> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <style> | |
| :root { | |
| --bg-primary: #1e1e2e; | |
| --bg-secondary: #2a2a3a; | |
| --accent: #00b894; | |
| --text-primary: #e2e8f0; | |
| --text-secondary: #94a3b8; | |
| } | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| background-color: var(--bg-primary); | |
| color: var(--text-primary); | |
| } | |
| .mono { | |
| font-family: 'JetBrains Mono', monospace; | |
| } | |
| .card { | |
| background-color: var(--bg-secondary); | |
| border-radius: 2rem; | |
| box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); | |
| } | |
| .btn { | |
| border-radius: 2rem; | |
| padding: 0.75rem 1.5rem; | |
| font-weight: 500; | |
| transition: all 0.2s; | |
| } | |
| .btn-primary { | |
| background-color: var(--accent); | |
| color: white; | |
| } | |
| .btn-primary:hover { | |
| background-color: #00a884; | |
| transform: translateY(-1px); | |
| } | |
| .btn-primary:active { | |
| transform: translateY(0); | |
| } | |
| .btn-secondary { | |
| background-color: var(--bg-secondary); | |
| border: 1px solid #3f3f5a; | |
| } | |
| .btn-secondary:hover { | |
| background-color: #3a3a4a; | |
| border-color: var(--accent); | |
| } | |
| .input-field { | |
| background-color: #2a2a3a; | |
| border: 1px solid #3f3f5a; | |
| border-radius: 2rem; | |
| padding: 0.75rem 1.5rem; | |
| color: var(--text-primary); | |
| } | |
| .input-field:focus { | |
| outline: none; | |
| border-color: var(--accent); | |
| } | |
| .sidebar-item { | |
| padding: 0.75rem 1.5rem; | |
| border-radius: 2rem; | |
| transition: all 0.2s; | |
| } | |
| .sidebar-item:hover { | |
| background-color: #3a3a4a; | |
| } | |
| .sidebar-item.active { | |
| background-color: var(--accent); | |
| color: white; | |
| } | |
| .status-badge { | |
| display: inline-flex; | |
| align-items: center; | |
| padding: 0.25rem 0.75rem; | |
| border-radius: 2rem; | |
| font-size: 0.875rem; | |
| font-weight: 500; | |
| } | |
| .status-badge.running { | |
| background-color: rgba(0, 184, 148, 0.1); | |
| color: var(--accent); | |
| } | |
| .status-badge.stopped { | |
| background-color: rgba(239, 68, 68, 0.1); | |
| color: #ef4444; | |
| } | |
| .skeleton { | |
| background-color: #3a3a4a; | |
| border-radius: 0.5rem; | |
| animation: pulse 2s infinite; | |
| } | |
| @keyframes pulse { | |
| 0%, 100% { | |
| opacity: 1; | |
| } | |
| 50% { | |
| opacity: 0.5; | |
| } | |
| } | |
| .toast { | |
| position: fixed; | |
| bottom: 2rem; | |
| right: 2rem; | |
| padding: 1rem 1.5rem; | |
| border-radius: 2rem; | |
| background-color: var(--bg-secondary); | |
| box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); | |
| transform: translateY(100px); | |
| opacity: 0; | |
| transition: all 0.3s ease; | |
| z-index: 100; | |
| } | |
| .toast.show { | |
| transform: translateY(0); | |
| opacity: 1; | |
| } | |
| .toast.success { | |
| border-left: 4px solid var(--accent); | |
| } | |
| .toast.error { | |
| border-left: 4px solid #ef4444; | |
| } | |
| .tab { | |
| padding: 0.75rem 1.5rem; | |
| border-radius: 2rem; | |
| cursor: pointer; | |
| transition: all 0.2s; | |
| } | |
| .tab:hover { | |
| background-color: #3a3a4a; | |
| } | |
| .tab.active { | |
| background-color: var(--accent); | |
| color: white; | |
| } | |
| .console-log { | |
| background-color: #1a1a2a; | |
| color: #e2e8f0; | |
| font-family: 'JetBrains Mono', monospace; | |
| padding: 1rem; | |
| border-radius: 1rem; | |
| height: 400px; | |
| overflow-y: auto; | |
| } | |
| .console-log::-webkit-scrollbar { | |
| width: 8px; | |
| } | |
| .console-log::-webkit-scrollbar-track { | |
| background: #2a2a3a; | |
| border-radius: 4px; | |
| } | |
| .console-log::-webkit-scrollbar-thumb { | |
| background: #3f3f5a; | |
| border-radius: 4px; | |
| } | |
| .console-log::-webkit-scrollbar-thumb:hover { | |
| background: var(--accent); | |
| } | |
| .mod-card { | |
| transition: all 0.2s; | |
| } | |
| .mod-card:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1); | |
| } | |
| .chart-container { | |
| height: 200px; | |
| } | |
| </style> | |
| </head> | |
| <body class="min-h-screen flex"> | |
| <!-- Sidebar --> | |
| <div class="w-64 bg-[#2a2a3a] p-6 flex flex-col"> | |
| <div class="flex items-center mb-8"> | |
| <div class="w-10 h-10 rounded-full bg-[#00b894] flex items-center justify-center mr-3"> | |
| <i data-feather="cpu" class="text-white"></i> | |
| </div> | |
| <span class="font-bold text-xl">Sahaj33</span> | |
| </div> | |
| <nav class="flex-1 space-y-2"> | |
| <a href="#" class="sidebar-item active flex items-center" onclick="showScreen('dashboard')"> | |
| <i data-feather="home" class="mr-3"></i> | |
| Dashboard | |
| </a> | |
| <a href="#" class="sidebar-item flex items-center" onclick="showScreen('servers')"> | |
| <i data-feather="server" class="mr-3"></i> | |
| Servers | |
| </a> | |
| <a href="#" class="sidebar-item flex items-center" onclick="showScreen('create-server')"> | |
| <i data-feather="plus-circle" class="mr-3"></i> | |
| Create Server | |
| </a> | |
| <a href="#" class="sidebar-item flex items-center" onclick="showScreen('console')"> | |
| <i data-feather="terminal" class="mr-3"></i> | |
| Console | |
| </a> | |
| <a href="#" class="sidebar-item flex items-center" onclick="showScreen('mods')"> | |
| <i data-feather="package" class="mr-3"></i> | |
| Mods | |
| </a> | |
| <a href="#" class="sidebar-item flex items-center" onclick="showScreen('backups')"> | |
| <i data-feather="save" class="mr-3"></i> | |
| Backups | |
| </a> | |
| <a href="#" class="sidebar-item flex items-center" onclick="showScreen('performance')"> | |
| <i data-feather="activity" class="mr-3"></i> | |
| Performance | |
| </a> | |
| <a href="#" class="sidebar-item flex items-center" onclick="showScreen('tunnel')"> | |
| <i data-feather="globe" class="mr-3"></i> | |
| Tunnel | |
| </a> | |
| <a href="#" class="sidebar-item flex items-center" onclick="showScreen('settings')"> | |
| <i data-feather="settings" class="mr-3"></i> | |
| Settings | |
| </a> | |
| </nav> | |
| <div class="mt-auto pt-6 border-t border-[#3f3f5a]"> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center"> | |
| <i data-feather="moon" class="mr-2"></i> | |
| <span>Dark Mode</span> | |
| </div> | |
| <label class="relative inline-flex items-center cursor-pointer"> | |
| <input type="checkbox" class="sr-only peer" checked> | |
| <div class="w-11 h-6 bg-gray-700 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-[#00b894]"></div> | |
| </label> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main Content --> | |
| <div class="flex-1 flex flex-col"> | |
| <!-- Top Bar --> | |
| <header class="bg-[#2a2a3a] p-6 flex items-center justify-between border-b border-[#3f3f5a]"> | |
| <h1 class="text-2xl font-bold">Sahaj33 Server Manager</h1> | |
| <div class="flex items-center space-x-4"> | |
| <button class="w-8 h-8 rounded-full flex items-center justify-center hover:bg-[#3a3a4a]"> | |
| <i data-feather="minimize-2"></i> | |
| </button> | |
| <button class="w-8 h-8 rounded-full flex items-center justify-center hover:bg-[#3a3a4a]"> | |
| <i data-feather="x"></i> | |
| </button> | |
| </div> | |
| </header> | |
| <!-- Screen Content --> | |
| <main class="flex-1 p-6 overflow-y-auto"> | |
| <!-- Dashboard Screen --> | |
| <div id="dashboard-screen" class="screen"> | |
| <div class="flex items-center justify-between mb-6"> | |
| <h2 class="text-xl font-bold">Dashboard</h2> | |
| <button class="btn btn-secondary flex items-center" onclick="showToast('Server data reloaded', 'success')"> | |
| <i data-feather="refresh-cw" class="mr-2"></i> | |
| Reload | |
| </button> | |
| </div> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6"> | |
| <div class="card p-6"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h3 class="font-medium">Server Status</h3> | |
| <span class="status-badge running"> | |
| <i data-feather="circle" class="w-2 h-2 mr-2"></i> | |
| Running | |
| </span> | |
| </div> | |
| <div class="flex space-x-4"> | |
| <button class="btn btn-primary flex-1 flex items-center justify-center"> | |
| <i data-feather="power" class="mr-2"></i> | |
| Stop | |
| </button> | |
| <button class="btn btn-secondary flex-1 flex items-center justify-center"> | |
| <i data-feather="rotate-cw" class="mr-2"></i> | |
| Restart | |
| </button> | |
| </div> | |
| </div> | |
| <div class="card p-6"> | |
| <h3 class="font-medium mb-4">Players Online</h3> | |
| <div class="flex items-center justify-between"> | |
| <div class="text-3xl font-bold">4</div> | |
| <div class="flex -space-x-2"> | |
| <img class="w-8 h-8 rounded-full border-2 border-[#2a2a3a]" src="https://mc-heads.net/avatar/MHF_Steve" alt="Player"> | |
| <img class="w-8 h-8 rounded-full border-2 border-[#2a2a3a]" src="https://mc-heads.net/avatar/MHF_Alex" alt="Player"> | |
| <img class="w-8 h-8 rounded-full border-2 border-[#2a2a3a]" src="https://mc-heads.net/avatar/Notch" alt="Player"> | |
| <img class="w-8 h-8 rounded-full border-2 border-[#2a2a3a]" src="https://mc-heads.net/avatar/Dinnerbone" alt="Player"> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="card p-6"> | |
| <h3 class="font-medium mb-4">Server Resources</h3> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <div class="text-sm text-[#94a3b8]">CPU Usage</div> | |
| <div class="text-xl font-bold">24%</div> | |
| </div> | |
| <div> | |
| <div class="text-sm text-[#94a3b8]">RAM Usage</div> | |
| <div class="text-xl font-bold">3.2/8 GB</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> | |
| <div class="card p-6"> | |
| <h3 class="font-medium mb-4">Server Information</h3> | |
| <div class="space-y-4"> | |
| <div> | |
| <div class="text-sm text-[#94a3b8]">Public IP</div> | |
| <div class="flex items-center"> | |
| <div class="skeleton w-48 h-6"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="text-sm text-[#94a3b8]">LAN IP</div> | |
| <div class="flex items-center"> | |
| <div class="skeleton w-32 h-6"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="text-sm text-[#94a3b8]">Port</div> | |
| <div class="flex items-center"> | |
| <div class="skeleton w-16 h-6"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="text-sm text-[#94a3b8]">Edition</div> | |
| <div class="flex items-center"> | |
| <div class="skeleton w-24 h-6"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="text-sm text-[#94a3b8]">Version</div> | |
| <div class="flex items-center"> | |
| <div class="skeleton w-24 h-6"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="card p-6"> | |
| <h3 class="font-medium mb-4">Recent Activity</h3> | |
| <div class="space-y-4"> | |
| <div class="flex items-start"> | |
| <div class="w-8 h-8 rounded-full bg-[#3a3a4a] flex items-center justify-center mr-3"> | |
| <i data-feather="user" class="text-[#94a3b8]"></i> | |
| </div> | |
| <div> | |
| <div class="font-medium">Notch joined the game</div> | |
| <div class="text-sm text-[#94a3b8]">2 minutes ago</div> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="w-8 h-8 rounded-full bg-[#3a3a4a] flex items-center justify-center mr-3"> | |
| <i data-feather="alert-circle" class="text-[#94a3b8]"></i> | |
| </div> | |
| <div> | |
| <div class="font-medium">Server autosave completed</div> | |
| <div class="text-sm text-[#94a3b8]">15 minutes ago</div> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="w-8 h-8 rounded-full bg-[#3a3a4a] flex items-center justify-center mr-3"> | |
| <i data-feather="user" class="text-[#94a3b8]"></i> | |
| </div> | |
| <div> | |
| <div class="font-medium">Dinnerbone left the game</div> | |
| <div class="text-sm text-[#94a3b8]">32 minutes ago</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="card p-6"> | |
| <h3 class="font-medium mb-4">Quick Actions</h3> | |
| <div class="grid grid-cols-2 gap-4"> | |
| <button class="btn btn-secondary flex flex-col items-center py-4"> | |
| <i data-feather="save" class="w-6 h-6 mb-2"></i> | |
| Backup Now | |
| </button> | |
| <button class="btn btn-secondary flex flex-col items-center py-4"> | |
| <i data-feather="upload" class="w-6 h-6 mb-2"></i> | |
| Upload World | |
| </button> | |
| <button class="btn btn-secondary flex flex-col items-center py-4"> | |
| <i data-feather="globe" class="w-6 h-6 mb-2"></i> | |
| Start Tunnel | |
| </button> | |
| <button class="btn btn-secondary flex flex-col items-center py-4"> | |
| <i data-feather="settings" class="w-6 h-6 mb-2"></i> | |
| Server Settings | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Servers Screen --> | |
| <div id="servers-screen" class="screen hidden"> | |
| <div class="flex items-center justify-between mb-6"> | |
| <h2 class="text-xl font-bold">Servers</h2> | |
| <button class="btn btn-primary flex items-center" onclick="showScreen('create-server')"> | |
| <i data-feather="plus" class="mr-2"></i> | |
| Create Server | |
| </button> | |
| </div> | |
| <div class="card p-6 mb-6"> | |
| <div class="flex items-center justify-between mb-6"> | |
| <div class="relative flex-1 max-w-md"> | |
| <i data-feather="search" class="absolute left-4 top-1/2 transform -translate-y-1/2 text-[#94a3b8]"></i> | |
| <input type="text" placeholder="Search servers..." class="input-field pl-10 w-full"> | |
| </div> | |
| <div class="flex space-x-2"> | |
| <button class="btn btn-secondary"> | |
| <i data-feather="filter" class="mr-2"></i> | |
| Filter | |
| </button> | |
| <button class="btn btn-secondary"> | |
| <i data-feather="refresh-cw" class="mr-2"></i> | |
| Refresh | |
| </button> | |
| </div> | |
| </div> | |
| <div class="overflow-x-auto"> | |
| <table class="w-full"> | |
| <thead> | |
| <tr class="text-left text-[#94a3b8] border-b border-[#3f3f5a]"> | |
| <th class="pb-4">Name</th> | |
| <th class="pb-4">Edition</th> | |
| <th class="pb-4">Version</th> | |
| <th class="pb-4">Status</th> | |
| <th class="pb-4">Players</th> | |
| <th class="pb-4 text-right">Actions</th> | |
| </tr> | |
| </thead> | |
| <tbody class="divide-y divide-[#3f3f5a]"> | |
| <tr> | |
| <td class="py-4 font-medium">Survival World</td> | |
| <td class="py-4">Java</td> | |
| <td class="py-4">1.19.2</td> | |
| <td class="py-4"> | |
| <span class="status-badge running"> | |
| <i data-feather="circle" class="w-2 h-2 mr-2"></i> | |
| Running | |
| </span> | |
| </td> | |
| <td class="py-4">4/20</td> | |
| <td class="py-4 text-right"> | |
| <div class="flex justify-end space-x-2"> | |
| <button class="w-8 h-8 rounded-full flex items-center justify-center hover:bg-[#3a3a4a]"> | |
| <i data-feather="power" class="w-4 h-4"></i> | |
| </button> | |
| <button class="w-8 h-8 rounded-full flex items-center justify-center hover:bg-[#3a3a4a]"> | |
| <i data-feather="rotate-cw" class="w-4 h-4"></i> | |
| </button> | |
| <button class="w-8 h-8 rounded-full flex items-center justify-center hover:bg-[#3a3a4a]"> | |
| <i data-feather="trash-2" class="w-4 h-4"></i> | |
| </button> | |
| </div> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td class="py-4 font-medium">Creative Builds</td> | |
| <td class="py-4">Java</td> | |
| <td class="py-4">1.18.2</td> | |
| <td class="py-4"> | |
| <span class="status-badge stopped"> | |
| <i data-feather="circle" class="w-2 h-2 mr-2"></i> | |
| Stopped | |
| </span> | |
| </td> | |
| <td class="py-4">0/20</td> | |
| <td class="py-4 text-right"> | |
| <div class="flex justify-end space-x-2"> | |
| <button class="w-8 h-8 rounded-full flex items-center justify-center hover:bg-[#3a3a4a]"> | |
| <i data-feather="power" class="w-4 h-4"></i> | |
| </button> | |
| <button class="w-8 h-8 rounded-full flex items-center justify-center hover:bg-[#3a3a4a]"> | |
| <i data-feather="rotate-cw" class="w-4 h-4"></i> | |
| </button> | |
| <button class="w-8 h-8 rounded-full flex items-center justify-center hover:bg-[#3a3a4a]"> | |
| <i data-feather="trash-2" class="w-4 h-4"></i> | |
| </button> | |
| </div> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td class="py-4 font-medium">Bedrock Edition</td> | |
| <td class="py-4">Bedrock</td> | |
| <td class="py-4">1.19.40</td> | |
| <td class="py-4"> | |
| <span class="status-badge running"> | |
| <i data-feather="circle" class="w-2 h-2 mr-2"></i> | |
| Running | |
| </span> | |
| </td> | |
| <td class="py-4">2/10</td> | |
| <td class="py-4 text-right"> | |
| <div class="flex justify-end space-x-2"> | |
| <button class="w-8 h-8 rounded-full flex items-center justify-center hover:bg-[#3a3a4a]"> | |
| <i data-feather="power" class="w-4 h-4"></i> | |
| </button> | |
| <button class="w-8 h-8 rounded-full flex items-center justify-center hover:bg-[#3a3a4a]"> | |
| <i data-feather="rotate-cw" class="w-4 h-4"></i> | |
| </button> | |
| <button class="w-8 h-8 rounded-full flex items-center justify-center hover:bg-[#3a3a4a]"> | |
| <i data-feather="trash-2" class="w-4 h-4"></i> | |
| </button> | |
| </div> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td class="py-4 font-medium">Modded Server</td> | |
| <td class="py-4">Java</td> | |
| <td class="py-4">1.16.5</td> | |
| <td class="py-4"> | |
| <span class="status-badge stopped"> | |
| <i data-feather="circle" class="w-2 h-2 mr-2"></i> | |
| Stopped | |
| </span> | |
| </td> | |
| <td class="py-4">0/20</td> | |
| <td class="py-4 text-right"> | |
| <div class="flex justify-end space-x-2"> | |
| <button class="w-8 h-8 rounded-full flex items-center justify-center hover:bg-[#3a3a4a]"> | |
| <i data-feather="power" class="w-4 h-4"></i> | |
| </button> | |
| <button class="w-8 h-8 rounded-full flex items-center justify-center hover:bg-[#3a3a4a]"> | |
| <i data-feather="rotate-cw" class="w-4 h-4"></i> | |
| </button> | |
| <button class="w-8 h-8 rounded-full flex items-center justify-center hover:bg-[#3a3a4a]"> | |
| <i data-feather="trash-2" class="w-4 h-4"></i> | |
| </button> | |
| </div> | |
| </td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Create Server Wizard --> | |
| <div id="create-server-screen" class="screen hidden"> | |
| <div class="flex items-center justify-between mb-6"> | |
| <h2 class="text-xl font-bold">Create New Server</h2> | |
| <button class="btn btn-secondary" onclick="showScreen('servers')"> | |
| <i data-feather="arrow-left" class="mr-2"></i> | |
| Back to Servers | |
| </button> | |
| </div> | |
| <div class="card p-6"> | |
| <div class="flex mb-6"> | |
| <div class="flex-1"> | |
| <div class="flex flex-col items-center"> | |
| <div class="w-12 h-12 rounded-full flex items-center justify-center mb-2" id="step-1-indicator"> | |
| <span class="text-lg font-bold">1</span> | |
| </div> | |
| <span class="text-sm">Edition</span> | |
| </div> | |
| </div> | |
| <div class="flex-1"> | |
| <div class="flex flex-col items-center"> | |
| <div class="w-12 h-12 rounded-full flex items-center justify-center mb-2 bg-[#3a3a4a]" id="step-2-indicator"> | |
| <span class="text-lg font-bold">2</span> | |
| </div> | |
| <span class="text-sm text-[#94a3b8]">Resources</span> | |
| </div> | |
| </div> | |
| <div class="flex-1"> | |
| <div class="flex flex-col items-center"> | |
| <div class="w-12 h-12 rounded-full flex items-center justify-center mb-2 bg-[#3a3a4a]" id="step-3-indicator"> | |
| <span class="text-lg font-bold">3</span> | |
| </div> | |
| <span class="text-sm text-[#94a3b8]">Location</span> | |
| </div> | |
| </div> | |
| <div class="flex-1"> | |
| <div class="flex flex-col items-center"> | |
| <div class="w-12 h-12 rounded-full flex items-center justify-center mb-2 bg-[#3a3a4a]" id="step-4-indicator"> | |
| <span class="text-lg font-bold">4</span> | |
| </div> | |
| <span class="text-sm text-[#94a3b8]">EULA</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div id="step-1-content"> | |
| <h3 class="text-lg font-medium mb-6">Choose Server Edition</h3> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8"> | |
| <div class="card p-6 cursor-pointer hover:border-[#00b894] border-2 border-[#3f3f5a] rounded-2xl transition-all"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-10 h-10 rounded-full bg-[#00b894] flex items-center justify-center mr-3"> | |
| <i data-feather="box" class="text-white"></i> | |
| </div> | |
| <h4 class="font-bold">Java Edition</h4> | |
| </div> | |
| <p class="text-[#94a3b8] mb-4">The original Minecraft experience with extensive modding support.</p> | |
| <div class="flex flex-wrap gap-2"> | |
| <span class="px-3 py-1 rounded-full bg-[#3a3a4a] text-sm">Vanilla</span> | |
| <span class="px-3 py-1 rounded-full bg-[#3a3a4a] text-sm">Paper</span> | |
| <span class="px-3 py-1 rounded-full bg-[#3a3a4a] text-sm">Fabric</span> | |
| <span class="px-3 py-1 rounded-full bg-[#3a3a4a] text-sm">Forge</span> | |
| </div> | |
| </div> | |
| <div class="card p-6 cursor-pointer hover:border-[#00b894] border-2 border-[#3f3f5a] rounded-2xl transition-all"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-10 h-10 rounded-full bg-[#3a3a4a] flex items-center justify-center mr-3"> | |
| <i data-feather="smartphone" class="text-white"></i> | |
| </div> | |
| <h4 class="font-bold">Bedrock Edition</h4> | |
| </div> | |
| <p class="text-[#94a3b8] mb-4">Cross-platform version that works on mobile, console, and Windows 10/11.</p> | |
| <div class="flex flex-wrap gap-2"> | |
| <span class="px-3 py-1 rounded-full bg-[#3a3a4a] text-sm">Vanilla</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <h4 class="font-medium mb-3">Server Flavor</h4> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-3"> | |
| <button class="btn btn-secondary">Vanilla</button> | |
| <button class="btn btn-secondary">Paper</button> | |
| <button class="btn btn-secondary">Fabric</button> | |
| <button class="btn btn-secondary">Forge</button> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <h4 class="font-medium mb-3">Version</h4> | |
| <div class="flex items-center"> | |
| <select class="input-field flex-1 mr-4"> | |
| <option>1.19.2</option> | |
| <option>1.19.1</option> | |
| <option>1.19</option> | |
| <option>1.18.2</option> | |
| <option>1.18.1</option> | |
| <option>1.18</option> | |
| </select> | |
| <div class="flex items-center"> | |
| <label class="inline-flex items-center cursor-pointer"> | |
| <input type="checkbox" class="sr-only peer"> | |
| <div class="relative w-11 h-6 bg-gray-700 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-[#00b894]"></div> | |
| <span class="ml-2 text-sm">Show Snapshots</span> | |
| </label> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex justify-end"> | |
| <button class="btn btn-primary" onclick="nextStep(2)"> | |
| Next | |
| <i data-feather="arrow-right" class="ml-2"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div id="step-2-content" class="hidden"> | |
| <h3 class="text-lg font-medium mb-6">Allocate Resources</h3> | |
| <div class="card p-6 mb-6"> | |
| <h4 class="font-medium mb-4">RAM Allocation</h4> | |
| <div class="mb-4"> | |
| <input type="range" min="1" max="16" value="4" class="w-full h-2 bg-[#3a3a4a] rounded-lg appearance-none cursor-pointer"> | |
| </div> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <span class="text-sm text-[#94a3b8]">Minimum: 1GB</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <input type="number" min="1" max="16" value="4" class="input-field w-20 text-center mr-2"> | |
| <span>GB</span> | |
| </div> | |
| <div> | |
| <span class="text-sm text-[#94a3b8]">Maximum: 16GB</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="card p-6 mb-6"> | |
| <h4 class="font-medium mb-4">System Resources</h4> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-4"> | |
| <div> | |
| <div class="text-sm text-[#94a3b8] mb-1">Available RAM</div> | |
| <div class="font-medium">16 GB</div> | |
| </div> | |
| <div> | |
| <div class="text-sm text-[#94a3b8] mb-1">CPU Cores</div> | |
| <div class="font-medium">8 Cores</div> | |
| </div> | |
| <div> | |
| <div class="text-sm text-[#94a3b8] mb-1">Disk Space</div> | |
| <div class="font-medium">256 GB SSD</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex justify-between"> | |
| <button class="btn btn-secondary" onclick="prevStep(1)"> | |
| <i data-feather="arrow-left" class="mr-2"></i> | |
| Back | |
| </button> | |
| <button class="btn btn-primary" onclick="nextStep(3)"> | |
| Next | |
| <i data-feather="arrow-right" class="ml-2"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div id="step-3-content" class="hidden"> | |
| <h3 class="text-lg font-medium mb-6">Server Location</h3> | |
| <div class="card p-6 mb-6"> | |
| <h4 class="font-medium mb-4">Server Directory</h4> | |
| <div class="flex items-center"> | |
| <input type="text" placeholder="C:\Minecraft\Servers\NewServer" class="input-field flex-1 mr-4"> | |
| <button class="btn btn-secondary"> | |
| <i data-feather="folder" class="mr-2"></i> | |
| Browse | |
| </button> | |
| </div> | |
| <div class="mt-3 text-sm text-[#94a3b8]"> | |
| The server files will be created in this directory. Make sure you have write permissions. | |
| </div> | |
| </div> | |
| <div class="card p-6 mb-6"> | |
| <h4 class="font-medium mb-4">World Options</h4> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <div> | |
| <div class="text-sm text-[#94a3b8] mb-2">World Type</div> | |
| <select class="input-field w-full"> | |
| <option>Default</option> | |
| <option>Flat</option> | |
| <option>Large Biomes</option> | |
| <option>Amplified</option> | |
| <option>Single Biome</option> | |
| </select> | |
| </div> | |
| <div> | |
| <div class="text-sm text-[#94a3b8] mb-2">Seed</div> | |
| <input type="text" placeholder="Leave blank for random" class="input-field w-full"> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex justify-between"> | |
| <button class="btn btn-secondary" onclick="prevStep(2)"> | |
| <i data-feather="arrow-left" class="mr-2"></i> | |
| Back | |
| </button> | |
| <button class="btn btn-primary" onclick="nextStep(4)"> | |
| Next | |
| <i data-feather="arrow-right" class="ml-2"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div id="step-4-content" class="hidden"> | |
| <h3 class="text-lg font-medium mb-6">Minecraft EULA</h3> | |
| <div class="card p-6 mb-6"> | |
| <div class="flex items-start"> | |
| <div class="flex items-center h-5"> | |
| <input id="eula-checkbox" type="checkbox" class="w-4 h-4 rounded bg-[#3a3a4a] border-[#3f3f5a] focus:ring-[#00b894]"> | |
| </div> | |
| <label for="eula-checkbox" class="ml-3 text-sm"> | |
| <span class="font-medium">I agree to the Minecraft End User License Agreement (EULA)</span> | |
| <p class="text-[#94a3b8] mt-1">By checking this box, you acknowledge that you have read and agree to the <a href="#" class="text-[#00b894] hover:underline">Minecraft EULA</a>. This is required to run a Minecraft server.</p> | |
| </label> | |
| </div> | |
| </div> | |
| <div class="card p-6 mb-6"> | |
| <h4 class="font-medium mb-4">Server Summary</h4> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <div> | |
| <div class="text-sm text-[#94a3b8] mb-1">Edition</div> | |
| <div class="font-medium">Java Edition (Paper)</div> | |
| </div> | |
| <div> | |
| <div class="text-sm text-[#94a3b8] mb-1">Version</div> | |
| <div class="font-medium">1.19.2</div> | |
| </div> | |
| <div> | |
| <div class="text-sm text-[#94a3b8] mb-1">RAM Allocation</div> | |
| <div class="font-medium">4 GB</div> | |
| </div> | |
| <div> | |
| <div class="text-sm text-[#94a3b8] mb-1">Location</div> | |
| <div class="font-medium">C:\Minecraft\Servers\NewServer</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex justify-between"> | |
| <button class="btn btn-secondary" onclick="prevStep(3)"> | |
| <i data-feather="arrow-left" class="mr-2"></i> | |
| Back | |
| </button> | |
| <button class="btn btn-primary" id="finish-btn" disabled> | |
| <i data-feather="check" class="mr-2"></i> | |
| Finish | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Console Screen --> | |
| <div id="console-screen" class="screen hidden"> | |
| <div class="flex items-center justify-between mb-6"> | |
| <h2 class="text-xl font-bold">Server Console</h2> | |
| <div class="flex space-x-3"> | |
| <button class="btn btn-secondary"> | |
| <i data-feather="download" class="mr-2"></i> | |
| Download Log | |
| </button> | |
| <button class="btn btn-secondary"> | |
| <i data-feather="trash-2" class="mr-2"></i> | |
| Clear | |
| </button> | |
| </div> | |
| </div> | |
| <div class="card p-6 mb-6"> | |
| <div class="console-log mono" id="console-output"> | |
| [12:34:56] [Server thread/INFO]: Starting minecraft server version 1.19.2<br> | |
| [12:34:56] [Server thread/INFO]: Loading properties<br> | |
| [12:34:56] [Server thread/INFO]: Default game type: SURVIVAL<br> | |
| [12:34:56] [Server thread/INFO]: Generating keypair<br> | |
| [12:34:57] [Server thread/INFO]: Starting Minecraft server on *:25565<br> | |
| [12:34:57] [Server thread/INFO]: Using epoll channel type<br> | |
| [12:34:57] [Server thread/INFO]: Preparing level "world"<br> | |
| [12:34:58] [Server thread/INFO]: Preparing start region for dimension minecraft:overworld<br> | |
| [12:34:59] [Server thread/INFO]: Time elapsed: 1234 ms<br> | |
| [12:34:59] [Server thread/INFO]: Done (3.456s)! For help, type "help"<br> | |
| [12:35:02] [User Authenticator #1/INFO]: UUID of player Notch is 069a79f4-44e9-4726-a5be-fca90e38aaf5<br> | |
| [12:35:02] [Server thread/INFO]: Notch[/127.0.0.1:12345] logged in with entity id 123 at ([world] 123.5, 64.0, 456.5)<br> | |
| [12:35:02] [Server thread/INFO]: Notch joined the game<br> | |
| [12:35:12] [Server thread/INFO]: Notch: Hello everyone!<br> | |
| [12:35:15] [Server thread/INFO]: <Notch> This server is awesome!<br> | |
| </div> | |
| <div class="flex items-center mt-4"> | |
| <input type="text" placeholder="Enter command..." class="input-field flex-1 mr-3"> | |
| <button class="btn btn-primary"> | |
| <i data-feather="send" class="mr-2"></i> | |
| Send | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Mods Screen --> | |
| <div id="mods-screen" class="screen hidden"> | |
| <div class="flex items-center justify-between mb-6"> | |
| <h2 class="text-xl font-bold">Mods Manager</h2> | |
| <button class="btn btn-secondary"> | |
| <i data-feather="refresh-cw" class="mr-2"></i> | |
| Refresh | |
| </button> | |
| </div> | |
| <div class="card p-6 mb-6"> | |
| <div class="flex items-center justify-between mb-6"> | |
| <div class="relative flex-1 max-w-md"> | |
| <i data-feather="search" class="absolute left-4 top-1/2 transform -translate-y-1/2 text-[#94a3b8]"></i> | |
| <input type="text" placeholder="Search mods..." class="input-field pl-10 w-full"> | |
| </div> | |
| <div class="flex space-x-2"> | |
| <div class="flex items-center space-x-2"> | |
| <span class="text-sm">Source:</span> | |
| <select class="input-field"> | |
| <option>CurseForge</option> | |
| <option>Modrinth</option> | |
| </select> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mb-8"> | |
| <h3 class="font-medium mb-4">Installed Mods (4)</h3> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"> | |
| <div class="card p-4 mod-card"> | |
| <div class="flex items-start"> | |
| <img src="https://media.forgecdn.net/avatars/thumbnails/109/919/64/64/636379036914047709.png" alt="Mod icon" class="w-12 h-12 rounded-lg mr-3"> | |
| <div class="flex-1"> | |
| <div class="flex items-start justify-between"> | |
| <div> | |
| <h4 class="font-medium">JourneyMap</h4> | |
| <div class="text-sm text-[#94a3b8]">v5.8.2</div> | |
| </div> | |
| <button class="btn btn-secondary px-3 py-1 text-sm"> | |
| <i data-feather="trash-2" class="w-3 h-3 mr-1"></i> | |
| Remove | |
| </button> | |
| </div> | |
| <div class="text-sm mt-2">Real-time mapping in-game or in a web browser as you explore.</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="card p-4 mod-card"> | |
| <div class="flex items-start"> | |
| <img src="https://media.forgecdn.net/avatars/thumbnails/9/558/64/64/635442179201009052.png" alt="Mod icon" class="w-12 h-12 rounded-lg mr-3"> | |
| <div class="flex-1"> | |
| <div class="flex items-start justify-between"> | |
| <div> | |
| <h4 class="font-medium">JEI</h4> | |
| <div class="text-sm text-[#94a3b8]">v10.2.1</div> | |
| </div> | |
| <button class="btn btn-secondary px-3 py-1 text-sm"> | |
| <i data-feather="trash-2" class="w-3 h-3 mr-1"></i> | |
| Remove | |
| </button> | |
| </div> | |
| <div class="text-sm mt-2">View items and recipes in-game with an easy-to-use searchable interface.</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="card p-4 mod-card"> | |
| <div class="flex items-start"> | |
| <img src="https://media.forgecdn.net/avatars/thumbnails/122/485/64/64/636416371123002121.png" alt="Mod icon" class="w-12 h-12 rounded-lg mr-3"> | |
| <div class="flex-1"> | |
| <div class="flex items-start justify-between"> | |
| <div> | |
| <h4 class="font-medium">OptiFine</h4> | |
| <div class="text-sm text-[#94a3b8]">v1.19.2_HD_U_H5</div> | |
| </div> | |
| <button class="btn btn-secondary px-3 py-1 text-sm"> | |
| <i data-feather="trash-2" class="w-3 h-3 mr-1"></i> | |
| Remove | |
| </button> | |
| </div> | |
| <div class="text-sm mt-2">Improves game performance and graphics with many configuration options.</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="font-medium mb-4">Popular Mods</h3> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"> | |
| <div class="card p-4 mod-card"> | |
| <div class="flex items-start"> | |
| <img src="https://media.forgecdn.net/avatars/thumbnails/6/474/64/64/635377073070724415.png" alt="Mod icon" class="w-12 h-12 rounded-lg mr-3"> | |
| <div class="flex-1"> | |
| <div class="flex items-start justify-between"> | |
| <div> | |
| <h4 class="font-medium">Biomes O' Plenty</h4> | |
| <div class="text-sm text-[#94a3b8]">v15.0.0</div> | |
| </div> | |
| <button class="btn btn-primary px-3 py-1 text-sm"> | |
| <i data-feather="download" class="w-3 h-3 mr-1"></i> | |
| Install | |
| </button> | |
| </div> | |
| <div class="text-sm mt-2">Adds dozens of new biomes to Minecraft, from lush forests to desolate wastelands.</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="card p-4 mod-card"> | |
| <div class="flex items-start"> | |
| <img src="https://media.forgecdn.net/avatars/thumbnails/11/938/64/64/635473153101000042.png" alt="Mod icon" class="w-12 h-12 rounded-lg mr-3"> | |
| <div class="flex-1"> | |
| <div class="flex items-start justify-between"> | |
| <div> | |
| <h4 class="font-medium">Tinkers' Construct</h4> | |
| <div class="text-sm text-[#94a3b8]">v3.5.2</div> | |
| </div> | |
| <button class="btn btn-primary px-3 py-1 text-sm"> | |
| <i data-feather="download" class="w-3 h-3 mr-1"></i> | |
| Install | |
| </button> | |
| </div> | |
| <div class="text-sm mt-2">A mod about putting tools together in a wide variety of ways.</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="card p-4 mod-card"> | |
| <div class="flex items-start"> | |
| <img src="https://media.forgecdn.net/avatars/thumbnails/7/30/64/64/635384305308620621.png" alt="Mod icon" class="w-12 h-12 rounded-lg mr-3"> | |
| <div class="flex-1"> | |
| <div class="flex items-start justify-between"> | |
| <div> | |
| <h4 class="font-medium">Applied Energistics 2</h4> | |
| <div class="text-sm text-[#94a3b8]">v10.0.0</div> | |
| </div> | |
| <button class="btn btn-primary px-3 py-1 text-sm"> | |
| <i data-feather="download" class="w-3 h-3 mr-1"></i> | |
| Install | |
| </button> | |
| </div> | |
| <div class="text-sm mt-2">A Minecraft mod about matter, energy and using them to conquer the world.</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="card p-4 mod-card"> | |
| <div class="flex items-start"> | |
| <img src="https://media.forgecdn.net/avatars/thumbnails/12/21/64/64/635476135809983906.png" alt="Mod icon" class="w-12 h-12 rounded-lg mr-3"> | |
| <div class="flex-1"> | |
| <div class="flex items-start justify-between"> | |
| <div> | |
| <h4 class="font-medium">Thaumcraft</h4> | |
| <div class="text-sm text-[#94a3b8]">v6.1.BETA26</div> | |
| </div> | |
| <button class="btn btn-primary px-3 py-1 text-sm"> | |
| <i data-feather="download" class="w-3 h-3 mr-1"></i> | |
| Install | |
| </button> | |
| </div> | |
| <div class="text-sm mt-2">Adding magic to Minecraft through a system of discovery and research.</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="card p-4 mod-card"> | |
| <div class="flex items-start"> | |
| <img src="https://media.forgecdn.net/avatars/thumbnails/10/25/64/64/635452593375309762.png" alt="Mod icon" class="w-12 h-12 rounded-lg mr-3"> | |
| <div class="flex-1"> | |
| <div class="flex items-start justify-between"> | |
| <div> | |
| <h4 class="font-medium">Twilight Forest</h4> | |
| <div class="text-sm text-[#94a3b8]">v4.1.0</div> | |
| </div> | |
| <button class="btn btn-primary px-3 py-1 text-sm"> | |
| <i data-feather="download" class="w-3 h-3 mr-1"></i> | |
| Install | |
| </button> | |
| </div> | |
| <div class="text-sm mt-2">A dimension full of mystery, danger, and adventure!</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="card p-4 mod-card"> | |
| <div class="flex items-start"> | |
| <img src="https://media.forgecdn.net/avatars/thumbnails/13/949/64/64/635512188039194703.png" alt="Mod icon" class="w-12 h-12 rounded-lg mr-3"> | |
| <div class="flex-1"> | |
| <div class="flex items-start justify-between"> | |
| <div> | |
| <h4 class="font-medium">Botania</h4> | |
| <div class="text-sm text-[#94a3b8]">v1.19.2-429</div> | |
| </div> | |
| <button class="btn btn-primary px-3 py-1 text-sm"> | |
| <i data-feather="download" class="w-3 h-3 mr-1"></i> | |
| Install | |
| </button> | |
| </div> | |
| <div class="text-sm mt-2">A magic tech mod based on natural magic using flowers.</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Backups Screen --> | |
| <div id="backups-screen" class="screen hidden"> | |
| <div class="flex items-center justify-between mb-6"> | |
| <h2 class="text-xl font-bold">Backups</h2> | |
| <div class="flex space-x-3"> | |
| <button class="btn btn-secondary"> | |
| <i data-feather="refresh-cw" class="mr-2"></i> | |
| Refresh | |
| </button> | |
| <button class="btn btn-primary"> | |
| <i data-feather="plus" class="mr-2"></i> | |
| Backup Now | |
| </button> | |
| </div> | |
| </div> | |
| <div class="card p-6 mb-6"> | |
| <div class="flex items-center justify-between mb-6"> | |
| <h3 class="font-medium">Automatic Backups</h3> | |
| <div class="flex items-center space-x-3"> | |
| <span class="text-sm text-[#94a3b8]">Schedule:</span> | |
| <select class="input-field"> | |
| <option>Off</option> | |
| <option>Hourly</option> | |
| <option selected>Daily</option> | |
| <option>Weekly</option> | |
| </select> | |
| </div> | |
| </div> | |
| <div class="overflow-x-auto"> | |
| <table class="w-full"> | |
| <thead> | |
| <tr class="text-left text-[#94a3b8] border-b border-[#3f3f5a]"> | |
| <th class="pb-4">Timestamp</th> | |
| <th class="pb-4">Size</th> | |
| <th class="pb-4">Description</th> | |
| <th class="pb-4 text-right">Actions</th> | |
| </tr> | |
| </thead> | |
| <tbody class="divide-y divide-[#3f3f5a]"> | |
| <tr> | |
| <td class="py-4">2023-04-15 14:30:22</td> | |
| <td class="py-4">1.2 GB</td> | |
| <td class="py-4">Automatic daily backup</td> | |
| <td class="py-4 text-right"> | |
| <div class="flex justify-end space-x-2"> | |
| <button class="w-8 h-8 rounded-full flex items-center justify-center hover:bg-[#3a3a4a]"> | |
| <i data-feather="rotate-ccw" class="w-4 h-4"></i> | |
| </button> | |
| <button class="w-8 h-8 rounded-full flex items-center justify-center hover:bg-[#3a3a4a]"> | |
| <i data-feather="download" class="w-4 h-4"></i> | |
| </button> | |
| <button class="w-8 h-8 rounded-full flex items-center justify-center hover:bg-[#3a3a4a]"> | |
| <i data-feather="trash-2" class="w-4 h-4"></i> | |
| </button> | |
| </div> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td class="py-4">2023-04-14 14:30:18</td> | |
| <td class="py-4">1.1 GB</td> | |
| <td class="py-4">Automatic daily backup</td> | |
| <td class="py-4 text-right"> | |
| <div class="flex justify-end space-x-2"> | |
| <button class="w-8 h-8 rounded-full flex items-center justify-center hover:bg-[#3a3a4a]"> | |
| <i data-feather="rotate-ccw" class="w-4 h-4"></i> | |
| </button> | |
| <button class="w-8 h-8 rounded-full flex items-center justify-center hover:bg-[#3a3a4a]"> | |
| <i data-feather="download" class="w-4 h-4"></i> | |
| </button> | |
| <button class="w-8 h-8 rounded-full flex items-center justify-center hover:bg-[#3a3a4a]"> | |
| <i data-feather="trash-2" class="w-4 h-4"></i> | |
| </button> | |
| </div> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td class="py-4">2023-04-13 14:30:15</td> | |
| <td class="py-4">1.0 GB</td> | |
| <td class="py-4">Automatic daily backup</td> | |
| <td class="py-4 text-right"> | |
| <div class="flex justify-end space-x-2"> | |
| <button class="w-8 h-8 rounded-full flex items-center justify-center hover:bg-[#3a3a4a]"> | |
| <i data-feather="rotate-ccw" class="w-4 h-4"></i> | |
| </button> | |
| <button class="w-8 h-8 rounded-full flex items-center justify-center hover:bg-[#3a3a4a]"> | |
| <i data-feather="download" class="w-4 h-4"></i> | |
| </button> | |
| <button class="w-8 h-8 rounded-full flex items-center justify-center hover:bg-[#3a3a4a]"> | |
| <i data-feather="trash-2" class="w-4 h-4"></i> | |
| </button> | |
| </div> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td class="py-4">2023-04-10 08:15:42</td> | |
| <td class="py-4">1.3 GB</td> | |
| <td class="py-4">Manual backup before mod installation</td> | |
| <td class="py-4 text-right"> | |
| <div class="flex justify-end space-x-2"> | |
| <button class="w-8 h-8 rounded-full flex items-center justify-center hover:bg-[#3a3a4a]"> | |
| <i data-feather="rotate-ccw" class="w-4 h-4"></i> | |
| </button> | |
| <button class="w-8 h-8 rounded-full flex items-center justify-center hover:bg-[#3a3a4a]"> | |
| <i data-feather="download" class="w-4 h-4"></i> | |
| </button> | |
| <button class="w-8 h-8 rounded-full flex items-center justify-center hover:bg-[#3a3a4a]"> | |
| <i data-feather="trash-2" class="w-4 h-4"></i> | |
| </button> | |
| </div> | |
| </td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Performance Screen --> | |
| <div id="performance-screen" class="screen hidden"> | |
| <div class="flex items-center justify-between mb-6"> | |
| <h2 class="text-xl font-bold">Server Performance</h2> | |
| <button class="btn btn-secondary"> | |
| <i data-feather="refresh-cw" class="mr-2"></i> | |
| Refresh | |
| </button> | |
| </div> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6"> | |
| <div class="card p-6"> | |
| <h3 class="font-medium mb-4">CPU Usage</h3> | |
| <div class="chart-container"> | |
| <canvas id="cpuChart"></canvas> | |
| </div> | |
| </div> | |
| <div class="card p-6"> | |
| <h3 class="font-medium mb-4">RAM Usage</h3> | |
| <div class="chart-container"> | |
| <canvas id="ramChart"></canvas> | |
| </div> | |
| </div> | |
| <div class="card p-6"> | |
| <h3 class="font-medium mb-4">TPS (Ticks Per Second)</h3> | |
| <div class="chart-container"> | |
| <canvas id="tpsChart"></canvas> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> | |
| <div class="card p-6"> | |
| <h3 class="font-medium mb-4">Server Stats</h3> | |
| <div class="space-y-4"> | |
| <div> | |
| <div class="text-sm text-[#94a3b8]">Uptime</div> | |
| <div class="text-xl font-bold">2d 14h 23m</div> | |
| </div> | |
| <div> | |
| <div class="text-sm text-[#94a3b8]">Player Count</div> | |
| <div class="text-xl font-bold">4/20</div> | |
| </div> | |
| <div> | |
| <div class="text-sm text-[#94a3b8]">Tick Rate</div> | |
| <div class="flex items-center"> | |
| <span class="status-badge running mr-2">20 TPS</span> | |
| <span class="text-sm text-[#94a3b8]">(100%)</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="card p-6"> | |
| <h3 class="font-medium mb-4">World Stats</h3> | |
| <div class="space-y-4"> | |
| <div> | |
| <div class="text-sm text-[#94a3b8]">Loaded Chunks</div> | |
| <div class="text-xl font-bold">1,234</div> | |
| </div> | |
| <div> | |
| <div class="text-sm text-[#94a3b8]">Entities</div> | |
| <div class="text-xl font-bold">567</div> | |
| </div> | |
| <div> | |
| <div class="text-sm text-[#94a3b8]">Tile Entities</div> | |
| <div class="text-xl font-bold">89</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="card p-6"> | |
| <h3 class="font-medium mb-4">Performance Tips</h3> | |
| <div class="space-y-3"> | |
| <div class="flex items-start"> | |
| <i data-feather="alert-circle" class="text-yellow-400 mr-2 mt-0.5"></i> | |
| <div> | |
| <div class="font-medium">High Entity Count</div> | |
| <div class="text-sm text-[#94a3b8]">Consider reducing mob spawn rates</div> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <i data-feather="alert-circle" class="text-yellow-400 mr-2 mt-0.5"></i> | |
| <div> | |
| <div class="font-medium">RAM Usage</div> | |
| <div class="text-sm text-[#94a3b8]">Allocate more RAM for better performance</div> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <i data-feather="check-circle" class="text-green-400 mr-2 mt-0.5"></i> | |
| <div> | |
| <div class="font-medium">CPU Usage</div> | |
| <div class="text-sm text-[#94a3b8]">Within optimal range</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Tunnel Screen --> | |
| <div id="tunnel-screen" class="screen hidden"> | |
| <div class="flex items-center justify-between mb-6"> | |
| <h2 class="text-xl font-bold">Tunnel</h2> | |
| <button class="btn btn-secondary"> | |
| <i data-feather="refresh-cw" class="mr-2"></i> | |
| Refresh | |
| </button> | |
| </div> | |
| <div class="card p-6 mb-6"> | |
| <div class="flex items-center justify-between mb-6"> | |
| <h3 class="font-medium">ngrok Tunnel</h3> | |
| <div class="flex space-x-3"> | |
| <button class="btn btn-primary"> | |
| <i data-feather="play" class="mr-2"></i> | |
| Start Tunnel | |
| </button> | |
| <button class="btn btn-secondary" disabled> | |
| <i data-feather="stop" class="mr-2"></i> | |
| Stop Tunnel | |
| </button> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <div> | |
| <h4 class="font-medium mb-3">Status</h4> | |
| <div class="flex items-center"> | |
| <span class="status-badge stopped"> | |
| <i data-feather="circle" class="w-2 h-2 mr-2"></i> | |
| Inactive | |
| </span> | |
| </div> | |
| </div> | |
| <div> | |
| <h4 class="font-medium mb-3">Public URL</h4> | |
| <div class="flex items-center"> | |
| <div class="input-field flex-1 truncate">Not active - start tunnel to generate URL</div> | |
| <button class="btn btn-secondary ml-3" disabled> | |
| <i data-feather="copy" class="w-4 h-4"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="card p-6"> | |
| <h3 class="font-medium mb-4">Tunnel Configuration</h3> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6"> | |
| <div> | |
| <div class="text-sm text-[#94a3b8] mb-2">Protocol</div> | |
| <select class="input-field w-full"> | |
| <option>TCP</option> | |
| <option>HTTP</option> | |
| <option>HTTPS</option> | |
| </select> | |
| </div> | |
| <div> | |
| <div class="text-sm text-[#94a3b8] mb-2">Port</div> | |
| <input type="number" value="25565" class="input-field w-full"> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <div class="text-sm text-[#94a3b8] mb-2">Region</div> | |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-3"> | |
| <button class="btn btn-secondary">United States</button> | |
| <button class="btn btn-secondary">Europe</button> | |
| <button class="btn btn-secondary">Asia</button> | |
| <button class="btn btn-secondary">Australia</button> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex items-center"> | |
| <input id="auth-checkbox" type="checkbox" class="w-4 h-4 rounded bg-[#3a3a4a] border-[#3f3f5a] focus:ring-[#00b894]"> | |
| <label for="auth-checkbox" class="ml-3 text-sm"> | |
| <span class="font-medium">Require authentication</span> | |
| <p class="text-[#94a3b8] mt-1">Users will need to enter a username and password to connect.</p> | |
| </label> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Settings Screen --> | |
| <div id="settings-screen" class="screen hidden"> | |
| <div class="flex items-center justify-between mb-6"> | |
| <h2 class="text-xl font-bold">Settings</h2> | |
| <button class="btn btn-secondary"> | |
| <i data-feather="refresh-cw" class="mr-2"></i> | |
| Reset Changes | |
| </button> | |
| </div> | |
| <div class="card p-6 mb-6"> | |
| <div class="flex | |
| <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=Sahaj33/mc-server-2" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |