Update index.html

index.html

@@ -98,9 +98,12 @@
         #userInterface>* {
             width: 100%;
             height: 100%;
-            text-align: center;
+            display:flex;
+            align-items: center;
+            justify-content: center;
             background-color: rgba(0, 0, 0, 0.25);
             border: 1px dashed rgba(255, 255, 255, 0.5);
+            font-size: calc(clamp(100%, 1vh, 5vh))
         }
 
 
@@ -221,14 +224,14 @@
                                 </div>
                             </div>
                             <div id="userInterface" class="text-light d-none">
-                                <div>Q-Save</div>
-                                <div>Q-Load</div>
-                                <div>Save</div>
-                                <div>Load</div>
-                                <div>Auto</div>
-                                <div>Skip</div>
-                                <div>Log</div>
-                                <div>Config</div>
+                                <div><div>Q-Save</div></div>
+                                <div><div>Q-Load</div></div>
+                                <div><div>Save</div></div>
+                                <div><div>Load</div></div>
+                                <div><div>Auto</div></div>
+                                <div><div>Skip</div></div>
+                                <div><div>Log</div></div>
+                                <div><div>Config</div></div>
                             </div>
                         </div>
                     </div>
@@ -352,7 +355,7 @@
                 el.style.fontSize = (el.parentNode.offsetHeight * document.querySelector("#fontSizeInput").value) + "px";
             });
             document.querySelectorAll("#userInterface >div").forEach(el => {
-                el.style.fontSize = (el.parentNode.offsetHeight * 0.65) + "px";
+                //el.style.fontSize = (el.parentNode.offsetHeight * 0.65) + "px";
             });
             //linear-gradient(rgba(170, 100, 101, 0.7), rgba(145, 152, 229, 0.9))
             let bg = "linear-gradient(rgba(" + hex2rgb(document.getElementById("topColor").value) + ", " + document.getElementById("topAlpha").value + "), rgba(" + hex2rgb(document.getElementById("btmColor").value) + ", " + document.getElementById("btmAlpha").value + "))";
@@ -522,6 +525,7 @@
             if (!this.classList.contains("opacity-50")) {
                 document.documentElement.style.setProperty('--mainMassageHeight', "80%");
                 document.getElementById("userInterface").classList.remove("d-none");
+                document.querySelectorAll("#userInterface>*").forEach(el => el.classList.remove("d-none"));
                 createEditor();
             } else {
                 document.documentElement.style.setProperty('--mainMassageHeight', "100%");
@@ -541,7 +545,7 @@
         });
         document.querySelectorAll("#userInterface > div").forEach(el => {
             el.addEventListener("click", function () {
-                document.getElementById("render").click();
+                el.classList.add("d-none");
             });
         });
     </script>