HeliosLauncher/app/settings.ejs

<div id="settingsContainer" style="display: none;">
    <div id="settingsContainerLeft">
        <div id="settingsNavContainer">
            <div id="settingsNavHeader">
                <span id="settingsNavHeaderText">Settings</span>
            </div>
            <div id="settingsNavItemsContainer">
                <div id="settingsNavItemsContent">
                    <button class="settingsNavItem" rSc="settingsTabAccount" selected>Account</button>
                    <button class="settingsNavItem" rSc="settingsTabMinecraft">Minecraft</button>
                    <button class="settingsNavItem" rSc="settingsTabJava">Java</button>
                    <button class="settingsNavItem" rSc="settingsTabLauncher">Launcher</button>
                    <div class="settingsNavSpacer"></div>
                    <button class="settingsNavItem" rSc="settingsTabAbout">About</button>
                    <button class="settingsNavItem" rSc="settingsTabUpdates">Updates</button>
                    <div id="settingsNavContentBottom">
                        <div class="settingsNavDivider"></div>
                        <button id="settingsNavDone">Done</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="settingsContainerRight">
        <div id="settingsTabAccount" class="settingsTab">
            <div class="settingsTabHeader">
                <span class="settingsTabHeaderText">Account Settings</span>
                <span class="settingsTabHeaderDesc">Add new accounts or manage existing ones.</span>
            </div>
            <div id="settingsAddAccountContainer">
                <button id="settingsAddAccount">
                    <span id="settingsAddAccountText">&#43; Add Account</span>
                </button>
            </div>
            <div id="settingsCurrentAccountsHeader">
                <span class="settingsFieldTitle">Current Accounts</span>
            </div>
            <div id="settingsCurrentAccounts">
                <!-- Auth accounts populated here. -->
            </div>
        </div>
        <div id="settingsTabMinecraft" class="settingsTab" style="display: none;">
            <div class="settingsTabHeader">
                <span class="settingsTabHeaderText">Minecraft Settings</span>
                <span class="settingsTabHeaderDesc">Options related to game launch.</span>
            </div>
            <div id="settingsGameResolutionContainer">
                <span class="settingsFieldTitle">Game Resolution</span>
                <div id="settingsGameResolutionContent">
                    <input type="number" id="settingsGameWidth" min="0" cValue="GameWidth">
                    <div id="settingsGameResolutionCross">&#10006;</div>
                    <input type="number" id="settingsGameHeight" min="0" cValue="GameHeight">
                </div>
            </div>
            <div class="settingsDivider"></div>
            <div class="settingsFieldContainer">
                <div class="settingsFieldLeft">
                    <span class="settingsFieldTitle">Launch in fullscreen.</span>
                </div>
                <div class="settingsFieldRight">
                    <label class="toggleSwitch">
                        <input type="checkbox" cValue="Fullscreen">
                        <span class="toggleSwitchSlider"></span>
                    </label>
                </div>
            </div>
            <div class="settingsDivider"></div>
            <div class="settingsFieldContainer">
                <div class="settingsFieldLeft">
                    <span class="settingsFieldTitle">Automatically connect to the server on launch.</span>
                </div>
                <div class="settingsFieldRight">
                    <label class="toggleSwitch">
                        <input type="checkbox" cValue="AutoConnect">
                        <span class="toggleSwitchSlider"></span>
                    </label>
                </div>
            </div>
            <div class="settingsDivider"></div>
            <div class="settingsFieldContainer">
                <div class="settingsFieldLeft">
                    <span class="settingsFieldTitle">Launch game process detached from launcher.</span>
                    <span class="settingsFieldDesc">If the game is not detached, closing the launcher will also close the game.</span>
                </div>
                <div class="settingsFieldRight">
                    <label class="toggleSwitch">
                        <input type="checkbox" cValue="LaunchDetached">
                        <span class="toggleSwitchSlider"></span>
                    </label>
                </div>
            </div>
        </div>
        <div id="settingsTabJava" class="settingsTab" style="display: none;">
            <div class="settingsTabHeader">
                <span class="settingsTabHeaderText">Java Settings</span>
                <span class="settingsTabHeaderDesc">Manage the Java configuration (advanced).</span>
            </div>
            <div id="settingsMaxRAMRange" class="rangeSlider" cValue="MaxRAM" min="3" max="8" value="8" step="0.5">
                <div class="rangeSliderBar"></div>
                <div class="rangeSliderTrack"></div>
            </div>
            <div id="settingsMinRAMRange" class="rangeSlider" cValue="MinRAM" min="3" max="8" value="8" step="0.5">
                <div class="rangeSliderBar"></div>
                <div class="rangeSliderTrack"></div>
            </div>
        </div>
        <div id="settingsTabLauncher" class="settingsTab" style="display: none;">
            <div class="settingsTabHeader">
                <span class="settingsTabHeaderText">Launcher Settings</span>
                <span class="settingsTabHeaderDesc">Options related to the launcher itself.</span>
            </div>
            <div class="settingsFieldContainer">
                <div class="settingsFieldLeft">
                    <span class="settingsFieldTitle">Allow prerelease updates.</span>
                    <span class="settingsFieldDesc">Prereleases contain the latest features and updates, however they may be buggy.<br>This will always be true if you are using a prerelease version.</span>
                </div>
                <div class="settingsFieldRight">
                    <label class="toggleSwitch">
                        <input type="checkbox" cValue="AllowPrerelease">
                        <span class="toggleSwitchSlider"></span>
                    </label>
                </div>
            </div>
        </div>
        <div id="settingsTabAbout" class="settingsTab" style="display: none;">
            <div class="settingsTabHeader">
                <span class="settingsTabHeaderText">About</span>
                <span class="settingsTabHeaderDesc">Lorem ipsum dolor sit amet.</span>
            </div>
        </div>
        <div id="settingsTabUpdates" class="settingsTab" style="display: none;">
            <div class="settingsTabHeader">
                <span class="settingsTabHeaderText">Software Updates</span>
                <span class="settingsTabHeaderDesc">Manage and review application updates.</span>
            </div>
        </div>
    </div>
    <script src="./assets/js/scripts/settings.js"></script>
</div>