ElectronMCLauncher/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="settingsMemoryContainer">
                <div id="settingsMemoryTitle">Memory</div>
                <div id="settingsMemoryContent">
                    <div id="settingsMemoryContentLeft">
                        <div class="settingsMemoryContentItem">
                            <span class="settingsMemoryHeader">Maximum RAM</span>
                            <div class="settingsMemoryActionContainer">
                                <div id="settingsMaxRAMRange" class="rangeSlider" cValue="MaxRAM" min="3" max="8" value="3" step="0.5">
                                    <div class="rangeSliderBar"></div>
                                    <div class="rangeSliderTrack"></div>
                                </div>
                                <span id="settingsMaxRAMLabel" class="settingsMemoryLabel">3G</span>
                            </div>
                        </div>
                        <div class="settingsMemoryContentItem">
                            <span class="settingsMemoryHeader">Minimum RAM</span>
                            <div class="settingsMemoryActionContainer">
                                <div id="settingsMinRAMRange" class="rangeSlider" cValue="MinRAM" min="3" max="8" value="3" step="0.5">
                                    <div class="rangeSliderBar"></div>
                                    <div class="rangeSliderTrack"></div>
                                </div>
                                <span id="settingsMinRAMLabel" class="settingsMemoryLabel">3G</span>
                            </div>
                        </div>
                        <div id="settingsMemoryDesc">The recommended minimum RAM is 3 gigabytes. Setting the minimum and maximum values to the same value may reduce lag.</div>
                    </div>
                    <div id="settingsMemoryContentRight">
                        <div id="settingsMemoryStatus">
                            <div class="settingsMemoryStatusContainer">
                                <span class="settingsMemoryStatusTitle">Total</span>
                                <span id="settingsMemoryTotal" class="settingsMemoryStatusValue">16G</span>
                            </div>
                            <div class="settingsMemoryStatusContainer">
                                <span class="settingsMemoryStatusTitle">Available</span>
                                <span id="settingsMemoryAvail" class="settingsMemoryStatusValue">7.3G</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div id="settingsJavaExecContainer">
                <div id="settingsJavaExecTitle">Java Executable</div>
                <div id="settingsJavaExecContent">
                    <div id="settingsJavaExecDetails">Selected: Java 8 Update 172 (x64)</div>
                    <div id="settingsJavaExecActions">
                        <div id="settingsJavaExecIcon">
                            <svg id="settingsJavaExecSVG" x="0px" y="0px" viewBox="0 0 305.001 305.001">
                                <g>
                                    <path d="M150.99,56.513c-14.093,9.912-30.066,21.147-38.624,39.734c-14.865,32.426,30.418,67.798,32.353,69.288c0.45,0.347,0.988,0.519,1.525,0.519c0.57,0,1.141-0.195,1.605-0.583c0.899-0.752,1.154-2.029,0.614-3.069c-0.164-0.316-16.418-31.888-15.814-54.539c0.214-7.888,11.254-16.837,22.942-26.312c10.705-8.678,22.839-18.514,29.939-30.02c15.586-25.327-1.737-50.231-1.914-50.479c-0.688-0.966-1.958-1.317-3.044-0.84c-1.085,0.478-1.686,1.652-1.438,2.811c0.035,0.164,3.404,16.633-5.97,33.6C169.301,43.634,160.816,49.603,150.99,56.513z"></path>
                                    <path d="M210.365,67.682c0.994-0.749,1.286-2.115,0.684-3.205c-0.602-1.09-1.913-1.571-3.077-1.129c-2.394,0.91-58.627,22.585-58.627,48.776c0,18.053,7.712,27.591,13.343,34.556c2.209,2.731,4.116,5.09,4.744,7.104c1.769,5.804-2.422,16.294-4.184,19.846c-0.508,1.022-0.259,2.259,0.605,3.005c0.467,0.403,1.05,0.607,1.634,0.607c0.497,0,0.996-0.148,1.427-0.448c0.967-0.673,23.63-16.696,19.565-36.001c-1.514-7.337-5.12-12.699-8.302-17.43c-4.929-7.329-8.489-12.624-3.088-22.403C181.419,89.556,210.076,67.899,210.365,67.682z"></path>
                                    <path d="M63.99,177.659c-0.964,2.885-0.509,5.75,1.315,8.283c6.096,8.462,27.688,13.123,60.802,13.123c0.002,0,0.003,0,0.004,0c4.487,0,9.224-0.088,14.076-0.262c52.943-1.896,72.58-18.389,73.39-19.09c0.883-0.764,1.119-2.037,0.57-3.067c-0.549-1.029-1.733-1.546-2.864-1.235c-18.645,5.091-53.463,6.898-77.613,6.898c-27.023,0-40.785-1.946-44.154-3.383c1.729-2.374,12.392-6.613,25.605-9.212c1.263-0.248,2.131-1.414,2.006-2.695c-0.125-1.281-1.201-2.258-2.488-2.258C106.893,164.762,68.05,165.384,63.99,177.659z"></path>
                                    <path d="M241.148,160.673c-10.92,0-21.275,5.472-21.711,5.705c-1.01,0.541-1.522,1.699-1.245,2.811c0.278,1.111,1.277,1.892,2.423,1.893c0.232,0.001,23.293,0.189,25.382,13.365c1.85,11.367-21.82,29.785-31.097,35.923c-1.002,0.663-1.391,1.945-0.926,3.052c0.395,0.943,1.314,1.533,2.304,1.533c0.173,0,0.348-0.018,0.522-0.056c2.202-0.47,53.855-11.852,48.394-41.927C261.862,164.541,250.278,160.673,241.148,160.673z"></path>
                                    <path d="M205.725,216.69c0.18-0.964-0.221-1.944-1.023-2.506l-12.385-8.675c-0.604-0.423-1.367-0.556-2.076-0.368c-0.129,0.034-13.081,3.438-31.885,5.526c-7.463,0.837-15.822,1.279-24.175,1.279c-18.799,0-31.091-2.209-32.881-3.829c-0.237-0.455-0.162-0.662-0.12-0.777c0.325-0.905,2.068-1.98,3.192-2.405c1.241-0.459,1.91-1.807,1.524-3.073c-0.385-1.266-1.69-2.012-2.978-1.702c-12.424,2.998-18.499,7.191-18.057,12.461c0.785,9.343,22.428,14.139,40.725,15.408c2.631,0.18,5.477,0.272,8.456,0.272c0.002,0,0.003,0,0.005,0c30.425,0,69.429-9.546,69.819-9.643C204.818,218.423,205.544,217.654,205.725,216.69z"></path>
                                    <path d="M112.351,236.745c0.938-0.611,1.354-1.77,1.021-2.838c-0.332-1.068-1.331-1.769-2.453-1.755c-1.665,0.044-16.292,0.704-17.316,10.017c-0.31,2.783,0.487,5.325,2.37,7.556c5.252,6.224,19.428,9.923,43.332,11.31c2.828,0.169,5.7,0.254,8.539,0.254c30.39,0,50.857-9.515,51.714-9.92c0.831-0.393,1.379-1.209,1.428-2.127c0.049-0.917-0.409-1.788-1.193-2.267l-15.652-9.555c-0.543-0.331-1.193-0.441-1.813-0.314c-0.099,0.021-10.037,2.082-25.035,4.119c-2.838,0.385-6.392,0.581-10.562,0.581c-14.982,0-31.646-2.448-34.842-4.05C111.843,237.455,111.902,237.075,112.351,236.745z"></path>
                                    <path d="M133.681,290.018c69.61-0.059,106.971-12.438,114.168-20.228c2.548-2.757,2.823-5.366,2.606-7.07c-0.535-4.194-4.354-6.761-4.788-7.04c-1.045-0.672-2.447-0.496-3.262,0.444c-0.813,0.941-0.832,2.314-0.016,3.253c0.439,0.565,0.693,1.51-0.591,2.795c-2.877,2.687-31.897,10.844-80.215,13.294c-6.619,0.345-13.561,0.519-20.633,0.52c-43.262,0-74.923-5.925-79.079-9.379c1.603-2.301,12.801-5.979,24.711-8.058c1.342-0.234,2.249-1.499,2.041-2.845c-0.208-1.346-1.449-2.273-2.805-2.096c-0.336,0.045-1.475,0.115-2.796,0.195c-19.651,1.2-42.36,3.875-43.545,13.999c-0.36,3.086,0.557,5.886,2.726,8.324c5.307,5.963,20.562,13.891,91.475,13.891C133.68,290.018,133.68,290.018,133.681,290.018z"></path>
                                    <path d="M261.522,271.985c-0.984-0.455-2.146-0.225-2.881,0.567c-0.103,0.11-10.568,11.054-42.035,17.48c-12.047,2.414-34.66,3.638-67.211,3.638c-32.612,0-63.643-1.283-63.953-1.296c-1.296-0.063-2.405,0.879-2.581,2.155c-0.177,1.276,0.645,2.477,1.897,2.775c0.323,0.077,32.844,7.696,77.31,7.696c21.327,0,42.08-1.733,61.684-5.151c36.553-6.408,39.112-24.533,39.203-25.301C263.082,273.474,262.504,272.44,261.522,271.985z"></path>
                                </g>
                            </svg>
                        </div>
                        <input id="settingsJavaExecVal" type="text" value="null" cValue="JavaExecutable" disabled>
                        <input id="settingsJavaExecSel" type="file" <%= process.platform === 'win32' ? 'accept=.exe' : '' %>>
                        <label id="settingsJavaExecLabel" for="settingsJavaExecSel">Choose File</label>
                    </div>
                </div>
                <div id="settingsJavaExecDesc">The Java executable is validated before game launch. <strong>Requires Java 8 x64.</strong><br>The path should end with <strong>bin<%= process.platform === 'win32' ? '\\javaw.exe' : '/java' %></strong>.</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>