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=3"> | |
| <script type="text/javascript" src="script.js"></script> | |
| <script type="text/javascript" src="embed.min.js"></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: flex-start; | |
| background-color: #202020; | |
| padding: 20px; | |
| box-sizing: border-box; | |
| position: relative; | |
| overflow: auto; /* Added to make it scrollable */ | |
| } | |
| .news-item { | |
| width: 100%; | |
| } | |
| .news-item ul { | |
| padding-left: 20px; | |
| } | |
| .news-item li { | |
| margin-bottom: 10px; | |
| } | |
| .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; | |
| } | |
| </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" id="profile-name" style="font-weight:bold"> | |
| <span style="font-weight:bold" class="profile-name">Default</span> | |
| </div> | |
| <nav> | |
| <ul> | |
| <li class="nav-item selected"> | |
| <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" 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"> <!-- 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-panel"> | |
| <div class="top-bar"> | |
| <span class="game-title">News</span> | |
| </div> | |
| <div class="main-content"> | |
| <!-- GitHub Releases --> | |
| <div class="news-item"> | |
| <h3>Latest GitHub Releases</h3> | |
| <ul id="github-releases"> | |
| <!-- JavaScript will populate this list --> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bottom-bar"> | |
| <span class="username" id="profile-name">MinecraftXLauncher</span> | |
| </div> | |
| </div> | |
| <script> | |
| // JavaScript for fetching GitHub releases and populating the list | |
| document.addEventListener('DOMContentLoaded', function() { | |
| fetch('https://api.github.com/repos/SpeedSlicer/MineXLauncher-Beta/releases') | |
| .then(response => response.json()) | |
| .then(data => { | |
| const releasesList = document.getElementById('github-releases'); | |
| data.forEach(release => { | |
| const releaseItem = document.createElement('li'); | |
| releaseItem.innerHTML = ` | |
| <strong>${release.name}</strong> | |
| <p>${release.body}</p> | |
| `; | |
| releasesList.appendChild(releaseItem); | |
| }); | |
| }) | |
| .catch(error => console.error('Error fetching GitHub releases:', error)); | |
| }); | |
| </script> | |
| <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("username").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"; | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> | |