Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Launcher</title> | |
| <link rel="stylesheet" href="styles.css?v=2"> | |
| <script src="script.js?v=2"></script> | |
| <script src="nav-visibility.js"></script> | |
| <style> | |
| /* Your existing styles */ | |
| body { | |
| margin: 0; | |
| font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; | |
| background-color: #1e1e1e; | |
| color: #fff; | |
| } | |
| .launcher { | |
| width: 900px; | |
| height: 600px; | |
| margin: 50px auto; | |
| background-color: #333; | |
| border-radius: 8px; | |
| overflow: hidden; | |
| box-shadow: 0 0 20px rgba(0, 0, 0, 0.5); | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| .title-bar { | |
| background-color: #2c2c2c; | |
| padding: 10px; | |
| text-align: center; | |
| color: #ddd; | |
| font-size: 14px; | |
| font-weight: 600; | |
| box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); | |
| } | |
| .content { | |
| display: flex; | |
| flex: 1; | |
| overflow: hidden; | |
| } | |
| .sidebar { | |
| background-color: #242424; | |
| width: 200px; | |
| display: flex; | |
| flex-direction: column; | |
| flex-shrink: 0; | |
| border-right: 1px solid #333; | |
| } | |
| .profile { | |
| padding: 20px 10px; | |
| border-bottom: 1px solid #333; | |
| text-align: center; | |
| } | |
| .profile-name { | |
| font-weight: bold; | |
| display: block; | |
| font-size: 16px; | |
| } | |
| .profile-status { | |
| font-size: 12px; | |
| color: #00cc00; | |
| display: block; | |
| margin-top: 5px; | |
| } | |
| nav ul { | |
| list-style-type: none; | |
| padding: 0; | |
| margin: 0; | |
| flex-grow: 1; | |
| } | |
| .nav-item { | |
| display: flex; | |
| align-items: center; | |
| padding: 15px 20px; | |
| cursor: pointer; | |
| transition: background-color 0.2s; | |
| } | |
| .nav-item:hover, | |
| .nav-item.selected { | |
| background-color: #444; | |
| } | |
| .nav-icon { | |
| width: 24px; | |
| height: 24px; | |
| margin-right: 15px; | |
| } | |
| .nav-text { | |
| font-size: 14px; | |
| } | |
| .main-panel { | |
| flex: 1; | |
| display: flex; | |
| flex-direction: column; | |
| background-color: #202020; | |
| } | |
| .top-bar { | |
| background-color: #2c2c2c; | |
| padding: 15px 20px; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| color: #ddd; | |
| box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); | |
| flex-shrink: 0; | |
| } | |
| .game-title { | |
| font-size: 18px; | |
| font-weight: bold; | |
| } | |
| .tabs { | |
| display: flex; | |
| } | |
| .tab { | |
| margin-left: 20px; | |
| cursor: pointer; | |
| color: #888; | |
| text-transform: uppercase; | |
| font-size: 14px; | |
| transition: color 0.2s; | |
| } | |
| .tab:hover, | |
| .tab.selected { | |
| color: #00cc00; | |
| } | |
| .main-content { | |
| flex: 1; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| background-color: #202020; | |
| padding: 20px; | |
| box-sizing: border-box; | |
| position: relative; | |
| } | |
| .minecraft-image { | |
| width: 100%; | |
| height: auto; | |
| } | |
| .installations { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| width: 100%; | |
| background-color: #292929; | |
| box-sizing: border-box; | |
| position: absolute; | |
| bottom: 0; | |
| left: 0; | |
| padding: 10px 20px; | |
| border-top: 1px solid #333; | |
| } | |
| .custom-select-wrapper { | |
| position: relative; | |
| display: inline-block; | |
| width: 250px; | |
| z-index: 9999; | |
| } | |
| .custom-select { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-family: 'MinecraftRegular', sans-serif; | |
| font-size: 1em; | |
| padding: 7px; | |
| border: 2px solid #000; | |
| background-color: #048239; | |
| color: #FFF; | |
| cursor: pointer; | |
| box-shadow: 4px 4px #4E4E50; | |
| user-select: none; | |
| z-index: 9999; | |
| } | |
| .custom-select.open { | |
| border-radius: 5px 5px 0 0; | |
| } | |
| .custom-options { | |
| position: absolute; | |
| top: calc(100% + -238px); | |
| left: 0; | |
| right: 0; | |
| border: 2px solid #000; | |
| border-top: none; | |
| background-color: #035525; | |
| box-shadow: 4px 4px #4E4E50; | |
| z-index: 9999; | |
| display: none; | |
| border-radius: 0 0 5px 5px; | |
| color: #FFF; | |
| max-height: 200px; | |
| overflow-y: auto; | |
| } | |
| .custom-options.open { | |
| display: block; | |
| } | |
| .custom-option { | |
| display: flex; | |
| align-items: center; | |
| padding: 10px; | |
| cursor: pointer; | |
| border-bottom: 1px solid #000; | |
| z-index: 9999; | |
| } | |
| .custom-option:last-child { | |
| border-bottom: none; | |
| } | |
| .custom-option:hover { | |
| background-color: #127e3f; | |
| } | |
| .custom-option img { | |
| width: 32px; | |
| height: 32px; | |
| margin-right: 10px; | |
| } | |
| .play-button { | |
| background-color: #00cc00; | |
| border: none; | |
| padding: 10px 40px; | |
| border-radius: 5px; | |
| cursor: pointer; | |
| color: #fff; | |
| font-size: 16px; | |
| font-weight: bold; | |
| text-transform: uppercase; | |
| transition: background-color 0.2s; | |
| } | |
| .play-button:hover { | |
| background-color: #00ff00; | |
| } | |
| .bottom-bar { | |
| background-color: #2c2c2c; | |
| padding: 10px 20px; | |
| text-align: right; | |
| color: #ddd; | |
| border-top: 1px solid #333; | |
| box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.2); | |
| } | |
| .usernameSelect { | |
| font-size: 14px; | |
| } | |
| /* Minecraft-themed checkbox styles */ | |
| .mod-maker-checkbox { | |
| position: relative; | |
| display: inline-block; | |
| width: 60px; | |
| height: 34px; | |
| } | |
| .mod-maker-checkbox input { | |
| opacity: 0; | |
| width: 0; | |
| height: 0; | |
| } | |
| .mod-maker-checkbox .slider { | |
| position: absolute; | |
| cursor: pointer; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| background-color: #ccc; | |
| transition: .4s; | |
| border-radius: 34px; | |
| } | |
| .mod-maker-checkbox .slider:before { | |
| position: absolute; | |
| content: ""; | |
| height: 26px; | |
| width: 26px; | |
| left: 4px; | |
| bottom: 4px; | |
| background-color: white; | |
| transition: .4s; | |
| border-radius: 50%; | |
| } | |
| .mod-maker-checkbox input:checked + .slider { | |
| background-color: #00cc00; | |
| } | |
| .mod-maker-checkbox input:checked + .slider:before { | |
| transform: translateX(26px); | |
| } | |
| </style> | |
| </head> | |
| <body onload="detection()"> | |
| <div class="launcher"> | |
| <div class="title-bar"> | |
| <span>MineXLauncher 0.2.2</span> | |
| </div> | |
| <div class="content"> | |
| <div class="sidebar"> | |
| <div class="profile"> | |
| <span class="profile-name" id="profile-name">Default</span> | |
| </div> | |
| <nav> | |
| <ul> | |
| <li class="nav-item" onclick="redirectToNews()"> | |
| <img src="./Resources/news-icon.png" alt="News Icon" class="nav-icon"> | |
| <span class="nav-text">Updates</span> | |
| </li> | |
| <li class="nav-item" onclick="redirectToMain()"> | |
| <img src="./Resources/minecraft-icon.png" alt="Minecraft Icon" class="nav-icon"> | |
| <span class="nav-text">Game</span> | |
| </li> | |
| <li class="nav-item selected" > | |
| <img src="./Resources/settings-icon.png" alt="Settings Icon" class="nav-icon"> | |
| <span class="nav-text">Settings</span> | |
| </li> | |
| <li class="nav-item" onclick="redirectToList()"> | |
| <img src="./Resources/serverlist-icon.png" alt="List Icon" class="nav-icon"> | |
| <span class="nav-text">Server List</span> | |
| </li> | |
| <li class="nav-item" id="modMakerItem" style="display: none;" onclick="createAbout('https://eaglerforge-builder.vercel.app/')"> | |
| <img src="https://eaglerforge-builder.vercel.app/favicon.png" alt="List Icon" class="nav-icon"> <!-- Outsourcing Images --> | |
| <span class="nav-text">Eaglerforge Mod Maker (Block)</span> | |
| </li> | |
| <li class="nav-item" id="apiItem" style="display: none;" onclick="createAbout('https://eaglerforge.github.io/apidocs/')"> | |
| <img src="https://avatars.githubusercontent.com/u/157155680?s=48&v=4" alt="List Icon" class="nav-icon"> | |
| <span class="nav-text">Eaglerforge API</span> | |
| </li> | |
| </ul> | |
| </nav> | |
| </div> | |
| <div class="main-content"> | |
| <div class="top-bar"> | |
| <span class="game-title">Settings</span> | |
| </div> | |
| <input type="text" class="usernameSelect" id="usernameInput" placeholder="Enter new username"> | |
| <button class="minecraft-button" onclick="submitForm()">Submit</button> | |
| <br> | |
| <label class="mod-maker-checkbox" onclick="modKitChecker()"> | |
| <input type="checkbox" id="modMakerCheckbox"> | |
| <span class="slider"></span> | |
| </label> | |
| <span class="modMakerKit">Mod Maker Kit</span> | |
| </div> | |
| </div> | |
| <div class="bottom-bar"> | |
| <span class="username" id="bottom-profile-name">MinecraftXLauncher</span> | |
| </div> | |
| </div> | |
| <script> | |
| document.addEventListener("DOMContentLoaded", function() { | |
| // Function to get a cookie value by name | |
| function getCookie(name) { | |
| let cookieArr = document.cookie.split(";"); | |
| for(let i = 0; i < cookieArr.length; i++) { | |
| let cookiePair = cookieArr[i].split("="); | |
| if(name === cookiePair[0].trim()) { | |
| return decodeURIComponent(cookiePair[1]); | |
| } | |
| } | |
| return null; | |
| } | |
| // Set the username placeholder from the cookie | |
| let username = getCookie("username"); | |
| if (username != null) { | |
| document.getElementById("profile-name").textContent = username; | |
| document.getElementById("bottom-profile-name").textContent = username; | |
| } | |
| // Set the mod maker checkbox state from the cookie | |
| let modMakerKitEnabled = getCookie("modMakerKitEnabled"); | |
| if (modMakerKitEnabled === "true") { | |
| document.getElementById("modMakerCheckbox").checked = true; | |
| document.getElementById("modMakerItem").style.display = "flex"; | |
| document.getElementById("apiItem").style.display = "flex"; | |
| } else { | |
| document.getElementById("modMakerItem").style.display = "none"; | |
| document.getElementById("apiItem").style.display = "none"; | |
| } | |
| }); | |
| function submitForm() { | |
| var username = document.getElementById('usernameInput').value; | |
| document.cookie = "username=" + encodeURIComponent(username); | |
| location.reload(); | |
| alert("Settings saved successfully!"); | |
| } | |
| function modKitChecker() { | |
| var modMakerCheckbox = document.getElementById('modMakerCheckbox'); | |
| if (modMakerCheckbox.checked) { | |
| document.cookie = "modMakerKitEnabled=true"; | |
| } else { | |
| document.cookie = "modMakerKitEnabled=false"; | |
| } | |
| location.reload(); | |
| } | |
| </script> | |
| </body> | |
| </html> | |