GrassClipper/resources/index.html
2022-04-26 22:15:06 -07:00

250 lines
9.7 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style/index.css" />
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script src="js/neutralino.js"></script>
<script src="js/windowDrag.js"></script>
<script src="js/hoverEvt.js"></script>
<script src="js/helpers.js"></script>
<script src="js/index.js"></script>
<script src="js/onLoad.js"></script>
<script src="js/options.js"></script>
<script src="js/login.js"></script>
<script src="js/authAlert.js"></script>
<script src="js/translation.js"></script>
</head>
<body>
<!-- First time setup -->
<div id="firstTimeNotice" style="display: none">
<span>
</span>
<div id="firstTimeBtns">
<button class="playBtn" id="firstTimeInstallBtn" onclick="runInstallScript()">Install</button>
<button class="altBtn" id="firstTimeDenyBtn" onclick="closeFirstTimePopup()">No thanks</button>
</div>
</div>
<!-- Login popup -->
<div id="loginPanel" style="display: none;">
<div id="loginPopupTitle">
<span>
<span id="loginSectionTitle" class="selectedTitle" onclick="setLoginSection()">Login</span>
<span id="registerSectionTitle" onclick="setRegisterSection()">Register</span>
</span>
<div id="loginPopupCloseBtn" onclick="closeLogin()">
<img src="icons/close.svg" />
</div>
</div>
<!-- Login section -->
<div id="loginPopupContentBody" class="authBody">
<div id="loginPopupContentBodyText">
<span id="loggingInTo">
Logging in to <span id="loginPopupServer"></span>
</span>
</div>
<div id="loginPopupContentBodyInputs" class="authInputs">
<div id="loginPopupContentBodyInputsUsername">
<span>
Username:
</span>
<input type="text" id="loginUsername" />
</div>
<div id="loginPopupContentBodyInputsPassword">
<span>
Password:
</span>
<input type="password" id="loginPassword" onsubmit="login()" />
</div>
</div>
<div id="loginPopupContentBodyBtns">
<button class="playBtn" id="loginPopupContentBodyBtnLogin" onclick="login()">Login</button>
<button class="altBtn" id="loginPopupContentBodyBtnRegister" onclick="setRegisterSection(true)">Register</button>
</div>
<div>
<button class="altBtn" id="noLoginBtn" onclick="(() => { launchPrivate(); closeLogin()})()">
Launch without Authentication
</button>
</div>
<!-- Alert element for any problems that arise -->
<div id="loginAlert" style="display: none">
<img src="icons/alert.svg" />
<span id="loginAlertText"></span>
</div>
</div>
<!-- Register section -->
<div id="registerPopupContentBody" style="display: none" class="authBody">
<div id="registerPopupContentBodyText">
<span id="registeringTo">
Registering for <span id="registerPopupServer"></span>
</span>
</div>
<div id="registerPopupContentBodyInputs" class="authInputs">
<div id="registerPopupContentBodyInputsUsername">
<span>
Username:
</span>
<input type="text" id="registerUsername" />
</div>
<div id="registerPopupContentBodyInputsPassword">
<span>
Password:
</span>
<input type="password" id="registerPassword" />
</div>
<div id="registerPopupContentBodyInputsPasswordConfirm">
<span>
Confirm Password:
</span>
<input type="password" id="registerPasswordConfirm" />
</div>
</div>
<div id="registerPopupContentBodyBtns">
<button class="playBtn" id="registerPopupContentBodyBtnRegister" onclick="register()">Register</button>
</div>
<!-- Alert element for any problems that arise -->
<div id="registerAlert" style="display: none">
<img src="icons/alert.svg" />
<span id="registerAlertText"></span>
</div>
</div>
</div>
<!-- Setting panel -->
<div id="settingsPanel" style="display: none;">
<div id="settingsTitleBar">
<span id="fullSettingsTitle">Settings</span>
<div id="settingsClose">
<img src="icons/close.svg" onclick="closeSettings()" />
</div>
</div>
<div id="settingsPanelInner">
<div class="settingTitle", id="scriptsTitle">
<span>Scripts</span>
</div>
<div class="settingsRow">
<div class="settingSection">
<span class="settingLabel" id="killswitchTitle">Kill Switch</span>
<input type="checkbox" id="killswitchOption" onchange="toggleKillSwitch()" />
</div>
<span class="settingSubtitle" id="killswitchSubtitle">
Only for those very paranoid about bans. Kills the game process *and your internet* if something happens to the proxy.
</span>
</div>
<div class="settingsRow">
<div class="settingSection">
<span class="settingLabel" id="proxyTitle">Install Proxy Server</span>
<button class="smolBtn" onclick="runInstallScript()" id="proxyInstall">Install</button>
</div>
<span class="settingSubtitle" id="proxySubtitle">
Install the proxy server via the install script.
</span>
</div>
<div class="settingsRow">
<div class="settingSection">
<span class="settingLabel" id="updateTitle">Update</span>
<button class="smolBtn disabled" onclick="updateResources()" id="updateBtn" disabled>Update</button>
</div>
<span class="settingSubtitle" id="updateSubtitle">
Auto updating is temporarily disabled. Check GitHub for the newest release.
</span>
</div>
<div class="settingsRow">
<div class="settingSection">
<span class="settingLabel", id="serverLaunchTitle">Enable Server Launcher</span>
<input type="checkbox" id="serverLaunchOption" onchange="toggleServerLaunchSection()" />
</div>
<span class="settingSubtitle" id="serverSubtitle">
Enable to server launcher tile for launcher a local Grasscutter instance.
</span>
</div>
<div class="settingsRow">
<div class="settingSection">
<span class="settingLabel", id="languageTitle">Language</span>
<select id="languageSelect" onchange="handleLanguageChange(this)">
</select>
</div>
<span class="settingSubtitle" id="languageSubtitle">
Select your language!
</span>
</div>
<div class="settingsRow">
<div class="settingSection">
<span class="settingLabel", id="httpsTitle">Use HTTPS</span>
<input type="checkbox" id="httpsOption" onchange="toggleHttps()" />
</select>
</div>
<span class="settingSubtitle" id="httpsSubtitle">
Choose between using HTTPS or HTTP.
</span>
</div>
</div>
</div>
<!-- Top bar (title, version, setting btn, close btn, etc.) -->
<div id="controlBar">
<span id="titleSection">
GrassClipper
<span id="version">0.4.5</span>
</span>
<div id="settingsBtn" onclick="openSettings()">
<img src="icons/cog.svg" />
</div>
<div id="minBtn" onclick="minimizeWin()">
<img src="icons/min.svg" alt="Minimize" />
</div>
<div id="closeBtn" onclick="closeWin()">
<img src="icons/close.svg" />
</div>
</div>
<div id="panelContainer">
<!-- Official play btn -->
<div id="firstPanel">
<button class="playBtn" id="playOfficial" onclick="launchOfficial()">Play Official</button>
</div>
<!-- Grasscutter play btn -->
<div id="secondPanel">
<div id="ipList" style="display: none;"></div>
<div id="secondControlContainer">
<!-- ip/server input -->
<div id="serverInput">
<input type="text" id="ip" placeholder="IP Address" oninput="handleFavoriteInput()"/>
<input type="text" id="port" placeholder="Port" oninput="handleFavoriteInput()"/>
<img src="icons/star_empty.svg" id="star" onclick="setFavorite()" />
<img src="icons/list.svg" id="star" onclick="handleFavoriteList()" />
</div>
<button class="playBtn" id="playPrivate" onclick="openLogin()">Play Private</button>
</div>
</div>
<!-- Grasscutter server launcher -->
<div id="thirdPanel" style="display: none;">
<button class="playBtn" id="serverLaunch" onclick="launchLocalServer()">Launch Local Server</button>
</div>
</div>
<!-- Bottom section (folder setting btns and such) -->
<div id="bottomBar">
<div class="bottomSection">
<div>
<div>
<button class="smolBtn" onclick="setGameExe()" id="gameExeSet">Set game folder</button>
<img src="icons/folder.svg" class="openFolderIcon" onclick="openGameFolder()"/>
</div>
<span id="gamePath" style="margin-top: 4px;"></span>
</div>
<div style="display: none;">
<div>
<button class="smolBtn" onclick="setGrasscutterFolder()" id="grasscutterFileSet">Set "Grasscutter" .jar file</button>
<img src="icons/folder.svg" class="openFolderIcon" onclick="openGrasscutterFolder()"/>
</div>
<span id="serverPath" style="margin-top: 4px;"></span>
</div>
</div>
</div>
</body>
</html>