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"> | |
| <script src="script.js?v=2"></script> | |
| <script src="nav-visibility.js"></script> | |
| <style> | |
| 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); | |
| } | |
| .username { | |
| font-size: 14px; | |
| } | |
| /* existing styles */ | |
| /* Additional styles for upload */ | |
| .upload-section { | |
| margin-top: 10px; | |
| } | |
| .upload-button { | |
| background-color: #048239; | |
| border: none; | |
| padding: 10px; | |
| border-radius: 5px; | |
| cursor: pointer; | |
| color: #fff; | |
| font-size: 14px; | |
| font-weight: bold; | |
| margin-top: 5px; | |
| } | |
| .upload-button:hover { | |
| background-color: #00cc00; | |
| } | |
| </style> | |
| <script> | |
| // existing 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("usernameInput").placeholder = username; | |
| document.getElementById("profile-name").textContent = username; | |
| } | |
| 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"; | |
| } | |
| // Set the mod maker checkbox state from the cookie | |
| }); | |
| function handleFileSelect(event) { | |
| const file = event.target.files[0]; | |
| if (file && file.type === 'text/html') { | |
| const reader = new FileReader(); | |
| reader.onload = function(e) { | |
| const fileContent = e.target.result; | |
| addVersion(file.name, fileContent); | |
| }; | |
| reader.readAsText(file); | |
| } else { | |
| alert("Please upload a valid HTML file."); | |
| } | |
| } | |
| function addVersion(filename, fileContent) { | |
| const customOptions = document.querySelector('.custom-options'); | |
| // Create a new option for the uploaded file | |
| const option = document.createElement('div'); | |
| option.className = 'custom-option'; | |
| option.innerHTML = `<img src="Resources/icon.png" alt="${filename} Icon"> | |
| <span>${filename}</span>`; | |
| option.onclick = function() { | |
| loadUploadedFile(fileContent); | |
| }; | |
| customOptions.appendChild(option); | |
| } | |
| function loadUploadedFile(content) { | |
| const newWindow = window.open(); | |
| newWindow.document.write(content); | |
| newWindow.document.close(); | |
| } | |
| </script> | |
| </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 selected"> | |
| <img src="./Resources/minecraft-icon.png" alt="Minecraft Icon" class="nav-icon"> | |
| <span class="nav-text">Game</span> | |
| </li> | |
| <li class="nav-item" onclick="redirectToSettings()"> | |
| <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"> | |
| <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-panel"> | |
| <div class="top-bar"> | |
| <span class="game-title">EAGLERCRAFT</span> | |
| <span class="game-title">Game</span> | |
| </div> | |
| <div class="main-content"> | |
| <img src="./Resources/coverimage.png" alt="Minecraft Cover Image" class="minecraft-image"> | |
| <div class="installations"> | |
| <div class="custom-select-wrapper"> | |
| <div id="custom-select" class="custom-select" onclick="toggleOptions()"> | |
| <span class="custom-select-trigger">Versions:</span> | |
| </div> | |
| <div class="custom-options"> | |
| <div class="custom-option" onclick="selectVersion('forge')"> | |
| <img src="Resources/forge-logo.png" alt="1.8.8 Icon"> | |
| <span>Eaglerforge 1.8.8</span> | |
| </div> | |
| <div class="custom-option" onclick="selectVersion('1.8.8')"> | |
| <img src="Resources/icon.png" alt="1.8.8 Icon"> | |
| <span>Classic 1.8.8</span> | |
| </div> | |
| <div class="custom-option" onclick="selectVersion('1.5.2')"> | |
| <img src="Resources/icon.png" alt="1.5.2 Icon"> | |
| <span>1.5.2</span> | |
| </div> | |
| <div class="custom-option" onclick="selectVersion('beta13')"> | |
| <img src="Resources/icon.png" alt="Beta13 Icon"> | |
| <span>Beta 1.3</span> | |
| </div> | |
| <div class="custom-option" onclick="selectVersion('1.9')"> | |
| <img src="Resources/icon.png" alt="1.9 Icon"> | |
| <span>1.9 (Snapshot 0.3.3)</span> | |
| </div> | |
| </div> | |
| </div> | |
| <button class="play-button" onclick="playGame()">Play</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bottom-bar"> | |
| <span class="username" id="profile-name">MinecraftXLauncher</span> | |
| </div> | |
| </div> | |
| </body> | |
| </html> | |