Spaces:
Running
Running
| <html lang="en"> | |
| <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@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet"> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| 'dark-base': '#1e1e2e', | |
| 'dark-surface': '#27293d', | |
| 'dark-element': '#313348', | |
| 'teal-accent': '#00b894', | |
| }, | |
| borderRadius: { | |
| '2xl': '1rem', | |
| }, | |
| fontFamily: { | |
| sans: ['Inter', 'sans-serif'], | |
| mono: ['JetBrains Mono', 'monospace'], | |
| }, | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| body { | |
| overflow: hidden; | |
| background-color: #1e1e2e; | |
| color: #e5e7eb; | |
| } | |
| .sidebar-link.active { | |
| background-color: #27293d; | |
| border-left: 4px solid #00b894; | |
| } | |
| .info-card { | |
| transition: all 0.2s ease; | |
| } | |
| .info-card:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3); | |
| } | |
| .log-container { | |
| scrollbar-width: thin; | |
| scrollbar-color: rgba(0, 184, 148, 0.5) transparent; | |
| } | |
| .log-container::-webkit-scrollbar { | |
| width: 6px; | |
| } | |
| .log-container::-webkit-scrollbar-track { | |
| background: transparent; | |
| } | |
| .log-container::-webkit-scrollbar-thumb { | |
| background-color: rgba(0, 184, 148, 0.5); | |
| border-radius: 3px; | |
| } | |
| .skeleton-loader { | |
| animation: skeleton 1.5s infinite ease-in-out; | |
| } | |
| @keyframes skeleton { | |
| 0% { background-position: -200% 0; } | |
| 100% { background-position: 200% 0; } | |
| } | |
| .btn-primary { | |
| transition: all 0.2s ease; | |
| } | |
| .btn-primary:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 6px 12px rgba(0, 184, 148, 0.3); | |
| } | |
| .btn-primary:active { | |
| transform: translateY(0); | |
| } | |
| .toast { | |
| animation: fadeIn 0.3s ease-in-out, fadeOut 0.3s 2s ease-in-out forwards; | |
| z-index: 50; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(-20px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| @keyframes fadeOut { | |
| from { opacity: 1; } | |
| to { opacity: 0; visibility: hidden; } | |
| } | |
| .tab-indicator { | |
| height: 3px; | |
| transition: left 0.3s ease, width 0.3s ease; | |
| } | |
| .mod-card:hover .mod-buttons { | |
| opacity: 1; | |
| } | |
| .chart { | |
| min-height: 180px; | |
| } | |
| </style> | |
| </head> | |
| <body class="flex h-screen font-sans bg-dark-base"> | |
| <!-- Top Bar --> | |
| <div class="absolute top-0 left-0 right-0 h-16 bg-dark-element flex items-center justify-between px-6 border-b border-dark-surface z-50"> | |
| <div class="flex items-center"> | |
| <div class="w-8 h-8 bg-teal-accent rounded-full mr-3 flex items-center justify-center"> | |
| <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-5 h-5 text-dark-element"> | |
| <path d="M11.47 3.84a.75.75 0 011.06 0l8.69 8.69a.75.75 0 101.06-1.06l-8.689-8.69a2.25 2.25 0 00-3.182 0l-8.69 8.69a.75.75 0 001.061 1.06l8.69-8.69z" /> | |
| <path d="M12 5.432l8.159 8.159c.03.03.06.058.091.086v6.198c0 1.035-.84 1.875-1.875 1.875H15a.75.75 0 01-.75-.75v-4.5a.75.75 0 00-.75-.75h-3a.75.75 0 00-.75.75V21a.75.75 0 01-.75.75H5.625a1.875 1.875 0 01-1.875-1.875v-6.198a2.29 2.29 0 00.091-.086L12 5.43z" /> | |
| </svg> | |
| </div> | |
| <h1 class="text-xl font-bold">Sahaj33 Server Manager</h1> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <button id="theme-toggle" class="p-2 rounded-lg hover:bg-dark-surface transition-colors"> | |
| <div id="light-icon"> | |
| <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5"> | |
| <path stroke-linecap="round" stroke-linejoin="round" d="M12 3v2.25m6.364.386l-1.591 1.591M21 12h-2.25m-.386 6.364l-1.591-1.591M12 18.75V21m-4.773-4.227l-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0z" /> | |
| </svg> | |
| </div> | |
| </button> | |
| <div class="flex space-x-2"> | |
| <button class="w-8 h-8 flex items-center justify-center hover:bg-gray-600 rounded-full transition-colors"> | |
| <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5"> | |
| <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 12h-15" /> | |
| </svg> | |
| </button> | |
| <button class="w-8 h-8 flex items-center justify-center hover:bg-gray-600 rounded-full transition-colors"> | |
| <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5"> | |
| <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" /> | |
| </svg> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Sidebar --> | |
| <div class="w-60 mt-16 flex-shrink-0 overflow-y-auto bg-dark-element h-full py-6"> | |
| <div class="px-6"> | |
| <div class="space-y-1"> | |
| <!-- Sidebar Links --> | |
| <button class="sidebar-link active w-full flex items-center py-3 px-6 rounded-2xl font-medium text-left transition-colors"> | |
| <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5 mr-3"> | |
| <path stroke-linecap="round" stroke-linejoin="round" d="M9 17.25v1.007a3 3 0 01-.879 2.122L7.5 21h9l-.621-.621A3 3 0 0115 18.257V17.25m6-12V15a2.25 2.25 0 01-2.25 2.25H5.25A2.25 2.25 0 013 15V5.25m18 0A2.25 2.25 0 0018.75 3H5.25A2.25 2.25 0 003 5.25m18 0V12a2.25 2.25 0 01-2.25 2.25H5.25A2.25 2.25 0 013 12V5.25" /> | |
| </svg> | |
| Dashboard | |
| </button> | |
| <button class="sidebar-link w-full flex items-center py-3 px-6 rounded-2xl font-medium text-left hover:bg-dark-surface transition-colors"> | |
| <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5 mr-3"> | |
| <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 6.75h12M8.25 12h12m-12 5.25h12M3.75 6.75h.007v.008H3.75V6.75zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zM3.75 12h.007v.008H3.75V12zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm-.375 5.25h.007v.008H3.75v-.008zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0z" /> | |
| </svg> | |
| Servers | |
| </button> | |
| <button class="sidebar-link w-full flex items-center py-3 px-6 rounded-2xl font-medium text-left hover:bg-dark-surface transition-colors"> | |
| <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5 mr-3"> | |
| <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v6m3-3H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z" /> | |
| </svg> | |
| Create Server | |
| </button> | |
| <button class="sidebar-link w-full flex items-center py-3 px-6 rounded-2xl font-medium text-left hover:bg-dark-surface transition-colors"> | |
| <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5 mr-3"> | |
| <path stroke-linecap="round" stroke-linejoin="round" d="M6 13.5V3.75m0 9.75a1.5 1.5 0 010 3m0-3a1.5 1.5 0 000 3m0 3.75V16.5m12-3V3.75m0 9.75a1.5 1.5 0 010 3m0-3a1.5 1.5 0 000 3m0 3.75V16.5m-6-9V3.75m0 3.75a1.5 1.5 0 010 3m0-3a1.5 1.5 0 000 3m0 9.75V10.5" /> | |
| </svg> | |
| Console | |
| </button> | |
| <button class="sidebar-link w-full flex items-center py-3 px-6 rounded-2xl font-medium text-left hover:bg-dark-surface transition-colors"> | |
| <svg xmlns="http://www.w2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5 mr-3"> | |
| <path stroke-linecap="round" stroke-linejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99" /> | |
| </svg> | |
| Mods | |
| </button> | |
| <button class="sidebar-link w-full flex items-center py-3 px-6 rounded-2xl font-medium text-left hover:bg-dark-surface transition-colors"> | |
| <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5 mr-3"> | |
| <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75l3 3m0 0l3-3m-3 3v-7.5M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /> | |
| </svg> | |
| Backups | |
| </button> | |
| <button class="sidebar-link w-full flex items-center py-3 px-6 rounded-2xl font-medium text-left hover:bg-dark-surface transition-colors"> | |
| <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5 mr-3"> | |
| <path stroke-linecap="round" stroke-linejoin="round" d="M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 013 19.875v-6.75zM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V8.625zM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V4.125z" /> | |
| </svg> | |
| Performance | |
| </button> | |
| <button class="sidebar-link w-full flex items-center py-3 px-6 rounded-2xl font-medium text-left hover:bg-dark-surface transition-colors"> | |
| <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5 mr-3"> | |
| <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 10.5V6.75a4.5 4.5 0 119 0v3.75M3.75 21.75h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H3.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" /> | |
| </svg> | |
| Tunnel | |
| </button> | |
| <button class="sidebar-link w-full flex items-center py-3 px-6 rounded-2xl font-medium text-left hover:bg-dark-surface transition-colors"> | |
| <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5 mr-3"> | |
| <path stroke-linecap="round" stroke-linejoin="round" d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.324.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 011.37.49l1.296 2.247a1.125 1.125 0 01-.26 1.431l-1.003.827c-.293.24-.438.613-.431.992a6.759 6.759 0 010 .255c-.007.378.138.75.43.99l1.005.828c.424.35.534.954.26 1.43l-1.298 2.247a1.125 1.125 0 01-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.57 6.57 0 01-.22.128c-.331.183-.581.495-.644.869l-.213 1.28c-.09.543-.56.941-1.11.941h-2.594c-.55 0-1.02-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 01-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 01-1.369-.49l-1.297-2.247a1.125 1.125 0 01.26-1.431l1.004-.827c.292-.24.437-.613.43-.992a6.932 6.932 0 010-.255c.007-.378-.138-.75-.43-.99l-1.004-.828a1.125 1.125 0 01-.26-1.43l1.297-2.247a1.125 1.125 0 011.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.087.22-.128.332-.183.582-.495.644-.869l.214-1.281z" /> | |
| <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" /> | |
| </svg> | |
| Settings | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main Content Area --> | |
| <div class="flex-1 flex flex-col overflow-hidden mt-16"> | |
| <div class="flex-1 overflow-y-auto"> | |
| <!-- Dashboard Screen --> | |
| <div id="dashboard-content" class="p-8"> | |
| <!-- Server Header --> | |
| <div class="flex justify-between mb-8"> | |
| <div> | |
| <h2 class="text-2xl font-bold flex items-center"> | |
| Survival Server | |
| <span class="ml-4 bg-green-900/20 border border-green-600/30 text-green-400 text-xs font-medium px-3 py-1 rounded-full uppercase">🟢 Running</span> | |
| </h2> | |
| <p class="text-gray-400 mt-2">sm.sahaj33.com</p> | |
| </div> | |
| <div class="flex space-x-4"> | |
| <button class="btn-primary bg-teal-accent hover:bg-teal-600 text-white font-medium px-5 py-2.5 rounded-2xl transition-all"> | |
| Start Server | |
| </button> | |
| <button class="btn-primary bg-orange-600 hover:bg-orange-700 text-white font-medium px-5 py-2.5 rounded-2xl transition-all"> | |
| Stop Server | |
| </button> | |
| <button class="btn-primary bg-purple-600 hover:bg-purple-700 text-white font-medium px-5 py-2.5 rounded-2xl transition-all"> | |
| Restart Server | |
| </button> | |
| <button class="bg-dark-element hover:bg-gray-700 text-gray-300 font-medium px-4 py-2.5 rounded-2xl transition-colors"> | |
| Reload | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Server Stats Grid --> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8"> | |
| <div class="info-card bg-dark-element rounded-2xl p-6 hover:shadow-md focus:shadow-md transition-shadow"> | |
| <div class="flex justify-between"> | |
| <div> | |
| <h3 class="text-md font-semibold text-gray-400">Public IP</h3> | |
| <p class="text-xl mt-2 bg-gradient-to-r from-teal-400 to-teal-500 bg-clip-text text-transparent font-medium"> | |
| 123.ngrok.io | |
| </p> | |
| </div> | |
| <button class="p-2 hover:bg-gray-700 rounded-md transition-colors" title="Copy to Clipboard"> | |
| <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4 text-gray-400"> | |
| <path stroke-linecap="round" stroke-linejoin="round" d="M15.666 3.888A2.25 2.25 0 0013.5 2.25h-3c-1.03 0-1.9.693-2.166 1.638m7.332 0c.055.194.084.4.084.612v0a.75.75 0 01-.75.75H9a.75.75 0 01-.75-.75v0c0-.212.03-.418.084-.612m7.332 0c.646.049 1.288.11 1.927.184 1.1.128 1.907 1.077 1.907 2.185V19.5a2.25 2.25 0 01-2.25 2.25H6.75A2.25 2.25 0 014.5 19.5V6.257c0-1.108.806-2.057 1.907-2.185a48.208 48.208 0 011.927-.184" /> | |
| </svg> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="info-card bg-dark-element rounded-2xl p-6 hover:shadow-md focus:shadow-md transition-shadow"> | |
| <div> | |
| <h3 class="text-md font-semibold text-gray-400">LAN IP & Port</h3> | |
| <p class="text-xl mt-2"> | |
| 192.168.1.42:25565 | |
| </p> | |
| </div> | |
| </div> | |
| <div class="info-card bg-dark-element rounded-2xl p-6 hover:shadow-md focus:shadow-md transition-shadow"> | |
| <div class="flex justify-between"> | |
| <div> | |
| <h3 class="text-md font-semibold text-gray-400">Edition</h3> | |
| <p class="text-xl mt-2">Java Edition</p> | |
| </div> | |
| <div class="text-right"> | |
| <h3 class="text-md font-semibold text-gray-400">Version</h3> | |
| <p class="text-xl mt-2">1.19.2</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="info-card bg-dark-element rounded-2xl p-6 hover:shadow-md focus:shadow-md transition-shadow"> | |
| <div> | |
| <h3 class="text-md font-semibold text-gray-400">Players Online</h3> | |
| <div class="mt-2 flex items-center"> | |
| <span class="text-2xl font-bold">8</span> | |
| <span class="text-sm text-gray-400 ml-2">/ 20 players</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Players --> | |
| <div class="bg-dark-element rounded-2xl p-6 mb-8"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="text-xl font-bold">Online Players</h2> | |
| <div class="text-gray-400">View full player list</div> | |
| </div> | |
| <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-8 gap-6"> | |
| <!-- Sample Player Cards --> | |
| <div class="text-center"> | |
| <div class="bg-gray-700 rounded-2xl h-20 mb-3 mx-auto flex items-center justify-center" style="width: 20px;"> | |
| <!-- Player head placeholder --> | |
| <div class="w-12 h-12 rounded-full overflow-hidden"> | |
| <!-- Minecraft head graphic --> | |
| <div class="w-full h-full bg-gradient-to-b from-gray-500 to-gray-700"></div> | |
| </div> | |
| </div> | |
| <p class="text-sm font-medium">Sahaj33</p> | |
| <p class="text-xs text-gray-400">Playtime: 4h</p> | |
| </div> | |
| <!-- More players ... --> | |
| <div class="text-center"> | |
| <div class="bg-gray-700 rounded-2xl h-20 mb-3 mx-auto flex items-center justify-center" style="width: 20px;"> | |
| <div class="w-12 h-12 rounded-full overflow-hidden"> | |
| <div class="w-full h-full bg-gradient-to-b from-yellow-400 to-yellow-600"></div> | |
| </div> | |
| </div> | |
| <p class="text-sm font-medium">EnderCat</p> | |
| <p class="text-xs text-gray-400">Playtime: 2h</p> | |
| </div> | |
| <div class="text-center"> | |
| <div class="bg-gray-700 rounded-2xl h-20 mb-3 mx-auto flex items-center justify-center" style="width: 20px;"> | |
| <div class="w-12 h-12 rounded-full overflow-hidden"> | |
| <div class="w-full h-full bg-gradient-to-b from-blue-400 to-blue-600"></div> | |
| </div> | |
| </div> | |
| <p class="text-sm font-medium">BuilderBob</p> | |
| <p class="text-xs text-gray-400">Playtime: 6h</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Active Server Settings --> | |
| <div class="bg-dark-element rounded-2xl p-6"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="text-xl font-bold">Active Settings</h2> | |
| <div class="text-sm text-gray-400">Changed: 2 days ago</div> | |
| </div> | |
| <div class="flex flex-wrap gap-4"> | |
| <div class="px-4 py-2 bg-dark-surface rounded-full text-sm"> | |
| Difficulty: Normal | |
| </div> | |
| <div class="px-4 py-2 bg-dark-surface rounded-full text-sm"> | |
| Gamemode: Survival | |
| </div> | |
| <div class="px-4 py-2 bg-dark-surface rounded-full text-sm"> | |
| PVP: Enabled | |
| </div> | |
| <div class="px-4 py-2 bg-dark-surface rounded-full text-sm"> | |
| Hardcore: Disabled | |
| </div> | |
| <div class="px-4 py-2 bg-dark-surface rounded-full text-sm"> | |
| Spawn Protection: Enabled | |
| </div> | |
| <div class="px-4 py-2 bg-dark-surface rounded-full text-sm"> | |
| Level Seed: MountainSurvival | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Servers Screen (Hidden) --> | |
| <div id="servers-content" class="p-8 hidden"> | |
| <!-- Servers Screen Content --> | |
| </div> | |
| <!-- Create Server Screen (Hidden) --> | |
| <div id="create-server-content" class="p-8 hidden"> | |
| <!-- Create Server Wizard --> | |
| </div> | |
| <!-- Console Screen (Hidden) --> | |
| <div id="console-content" class="p-8 hidden"> | |
| <!-- Console Content --> | |
| </div> | |
| <!-- Mods Screen (Hidden) --> | |
| <div id="mods-content" class="p-8 hidden"> | |
| <!-- Mods Content --> | |
| </div> | |
| <!-- Backups Screen (Hidden) --> | |
| <div id="backups-content" class="p-8 hidden"> | |
| <!-- Backups Content --> | |
| </div> | |
| <!-- Performance Screen (Hidden) --> | |
| <div id="performance-content" class="p-8 hidden"> | |
| <!-- Performance Content --> | |
| </div> | |
| <!-- Tunnel Screen (Hidden) --> | |
| <div id="tunnel-content" class="p-8 hidden"> | |
| <!-- Tunnel Content --> | |
| </div> | |
| <!-- Settings Screen (Hidden) --> | |
| <div id="settings-content" class="p-8 hidden"> | |
| <!-- Settings Content --> | |
| </div> | |
| </div> | |
| <!-- Footer --> | |
| <div class="bg-dark-element py-3 px-6 text-xs text-gray-500 flex justify-between"> | |
| <div>© 2023 Sahaj33 Server Manager | v3.4.2</div> | |
| <div>Last Update: Today 14:37</div> | |
| </div> | |
| </div> | |
| <!-- Toast Notification --> | |
| <div id="toast-notification" class="fixed top-6 right-6 bg-dark-element rounded-lg px-4 py-3 shadow-lg border-l-4 border-teal-accent hidden"> | |
| <div class="flex items-center"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-green-500 mr-2" viewBox="0 0 20 20" fill="currentColor"> | |
| <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" /> | |
| </svg> | |
| <span>Server status updated successfully!</span> | |
| <button class="ml-4 hover:text-gray-300" id="close-toast"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor"> | |
| <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" /> | |
| </svg> | |
| </button> | |
| </div> | |
| </div> | |
| <script> | |
| // Theme toggle functionality | |
| const themeToggle = document.getElementById('theme-toggle'); | |
| const lightIcon = themeToggle.querySelector('#light-icon'); | |
| themeToggle.addEventListener('click', function() { | |
| document.body.classList.toggle('bg-gray-100'); | |
| document.body.classList.toggle('text-gray-900'); | |
| document.body.classList.toggle('bg-dark-base'); | |
| document.body.classList.toggle('text-gray-200'); | |
| lightIcon.classList.toggle('hidden'); | |
| }); | |
| // Toast notification display | |
| function showToast(message) { | |
| const toast = document.getElementById('toast-notification'); | |
| toast.querySelector('span').textContent = message; | |
| toast.classList.remove('hidden'); | |
| setTimeout(() => { | |
| toast.classList.add('hidden'); | |
| }, 3000); | |
| } | |
| // Close toast when button clicked | |
| document.getElementById('close-toast').addEventListener('click', function() { | |
| document.getElementById('toast-notification').classList.add('hidden'); | |
| }); | |
| // Simulate button actions with toast notifications | |
| document.querySelectorAll('.btn-primary').forEach(button => { | |
| button.addEventListener('click', function() { | |
| showToast("Command sent to server"); | |
| }); | |
| }); | |
| // Sidebar navigation | |
| document.querySelectorAll('.sidebar-link').forEach(link => { | |
| link.addEventListener('click', function() { | |
| // Remove active class from all links | |
| document.querySelectorAll('.sidebar-link').forEach(el => { | |
| el.classList.remove('active'); | |
| el.classList.remove('bg-dark-surface'); | |
| el.classList.remove('border-l-4'); | |
| el.classList.remove('border-teal-accent'); | |
| }); | |
| // Add active class to clicked link | |
| this.classList.add('active'); | |
| // Display notification | |
| showToast("Navigation to: " + this.textContent.trim()); | |
| }); | |
| }); | |
| // Handle skeleton loader simulation | |
| setTimeout(function() { | |
| document.querySelectorAll('.skeleton-loader').forEach(el => { | |
| el.classList.add('bg-gray-200/20'); | |
| el.classList.remove('bg-gradient-to-r'); | |
| el.classList.remove('from-gray-600'); | |
| el.classList.remove('to-gray-700'); | |
| }); | |
| }, 1500); | |
| </script> | |
| <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-by-sahaj33" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |