added checkbox for patching

assets/checkbox.css

@@ -0,0 +1,85 @@
+[type="checkbox"]:not(:checked),
+[type="checkbox"]:checked {
+    position: absolute;
+    left: 0;
+    opacity: 0.01;
+}
+
+[type="checkbox"]:not(:checked)+label,
+[type="checkbox"]:checked+label {
+    position: relative;
+    padding-left: 2.3em;
+    font-size: 1.05em;
+    line-height: 1.7;
+    cursor: pointer;
+}
+
+/* checkbox aspect */
+[type="checkbox"]:not(:checked)+label:before,
+[type="checkbox"]:checked+label:before {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 1.4em;
+    height: 1.4em;
+    border: 1px solid #565656;
+    background: #4c4c4c;
+    border-radius: .2em;
+    box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1), 0 0 0 hsla(var(--main-accent), 93%, 48%, 20%);
+    -webkit-transition: all .275s;
+    transition: all .275s;
+}
+
+/* checked mark aspect */
+[type="checkbox"]:not(:checked)+label:after,
+[type="checkbox"]:checked+label:after {
+    content: '✕';
+    position: absolute;
+    top: .525em;
+    left: .18em;
+    font-size: 1.375em;
+    font-weight: bolder;
+    color: hsl(var(--main-accent), 93%, 48%);
+    line-height: 0;
+    -webkit-transition: all .2s;
+    transition: all .2s;
+}
+
+/* checked mark aspect changes */
+[type="checkbox"]:not(:checked)+label:after {
+    opacity: 0;
+    -webkit-transform: scale(0) rotate(45deg);
+    transform: scale(0) rotate(45deg);
+}
+
+[type="checkbox"]:checked+label:after {
+    opacity: 1;
+    -webkit-transform: scale(1) rotate(0);
+    transform: scale(1) rotate(0);
+    translate: -1.5px -1px;
+}
+
+/* Disabled checkbox */
+[type="checkbox"]:disabled:not(:checked)+label:before,
+[type="checkbox"]:disabled:checked+label:before {
+    box-shadow: none;
+    border-color: #565656;
+    background-color: #4c4c4c;
+    cursor: not-allowed;
+}
+
+[type="checkbox"]:disabled:checked+label:after {
+    color: #777;
+}
+
+[type="checkbox"]:disabled+label {
+    color: #aaa;
+    cursor: not-allowed;
+}
+
+/* Accessibility */
+[type="checkbox"]:checked:focus+label:before,
+[type="checkbox"]:not(:checked):focus+label:before {
+    box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1), 0 0 0 6px hsla(var(--main-accent), 93%, 48%, 20%);
+}

assets/launcher.css

@@ -23,6 +23,15 @@
     width: 100%;
 }
 
+.launch-button-section {
+    display: flex;
+    flex-direction: column;
+}
+
+.launch-button-section button {
+    margin-bottom: 10px;
+}
+
 .loading-section,
 .login-section {
     margin-top: 35px;
@@ -48,7 +57,7 @@
 }
 
 .folder-section {
-    margin-top: 45px;
+    margin-top: 13px;
     display: flex;
     flex-flow: column;
     justify-content: center;

html/index.html

@@ -8,6 +8,7 @@
     <link rel="icon" type="image/png" href="../assets/logo.png" />
     <link href="../assets/mdb.min.css" rel="stylesheet" />
     <link href="../assets/launcher.css" rel="stylesheet" />
+    <link href="../assets/checkbox.css" rel="stylesheet" />
     <style>
         * {
             user-select: none;
@@ -25,7 +26,7 @@
                 <div class="launcher-window position-relative overflow-hidden">
                     <div class="container px-1 py-2 w-100 mw-100 h-100">
                         <div class="row d-flex justify-content-center align-items-center h-100">
-                            <div id="loading-page" class="sections col col-xl-10">
+                            <div id="loading-page" class="sections col col-xl-10" style="display: none">
                                 <div class="launch-section flex-row">
                                     <div class="server-logo">
                                         <img src="../assets/logo.png" height="120">
@@ -44,7 +45,7 @@
                                     <div class="loading-indicator-text">Loading... Please wait</div>
                                 </div>
                             </div>
-                            <div id="launch-page" class="sections col col-xl-10" style="display: none;">
+                            <div id="launch-page" class="sections col col-xl-10" style="//display: none;">
                                 <div class="account-section">
                                     <div class="user-image">
                                     </div>
@@ -61,8 +62,12 @@
                                     <div class="server-logo">
                                         <img src="../assets/logo.png" height="150">
                                     </div>
-                                    <div class="launch-button">
+                                    <div class="launch-button-section">
                                         <button class="btn btn-lg btn-launch btn-accent" id="launch-btn">Launch</button>
+                                        <div class="patch-checkbox">
+                                            <input type="checkbox" id="enablePatching" checked/>
+                                            <label for="enablePatching" style="display: initial;">enable Patching</label>
+                                        </div>
                                     </div>
                                 </div>
                                 <div class="folder-section">
@@ -87,7 +92,8 @@
                                         <label class="form-label" for="login-username">Username</label>
                                     </div>
                                     <div class="form-outline mb-3 w-50">
-                                        <input type="password" id="login-password" class="form-control form-control-lg" />
+                                        <input type="password" id="login-password"
+                                            class="form-control form-control-lg" />
                                         <label class="form-label" for="login-password">Password</label>
                                     </div>
                                     <div class="pt-1 mb-4">