Mobile-friendly UI

2026-05-29 00:09:42 +08:00
parent 578a86b9e9
commit 4461782b70
3 changed files with 36 additions and 3 deletions
@@ -2,6 +2,7 @@
 <html lang="en">
  <head>
    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, maximum-scale=1.0">
    <title>Mabulig Web App</title>
    <script type="importmap">
      {
@@ -1,3 +1,27 @@
+body, html {
+  margin: 0;
+  padding: 0;
+  overflow: hidden; /* Prevents scrollbars */
+  width: 100vw;
+  height: 100vh;
+}
+
+@media (max-width: 600px) {
+  .lil-gui.root {
+    /* Force it to sit at the bottom or top of the screen */
+    width: 100% !important; 
+    right: 0 !important;
+    top: auto !important;
+    bottom: 0 !important; /* Move to bottom for easier thumb reach */
+    
+    /* Make the text and hit-areas slightly larger for fingers */
+    --font-size: 14px;
+    --input-font-size: 14px;
+    --widget-height: 30px;
+    --name-width: 40%;
+  }
+}
+
@font-face {
    font-family: "SF Pro Medium";
    src: url("fonts/SF-Pro.ttf") format("truetype");
@@ -74,11 +98,11 @@ h4 {

 /* Container that covers the whole screen */
 #loader-container {
-  position: absolute;
+  position: fixed;
  top: 0;
  left: 0;
-  width: 100vw;
-  height: 100vh;
+  width: 100%;
+  height: 100%;
  /*background-color: #1111115d; */ /* Dark background */
  display: flex;
  flex-direction: column;
@@ -87,6 +111,10 @@ h4 {
  z-index: 999; /* Ensure it stays on top of the Three.js canvas */
  color: black;
  font-family: 'Blender Pro Bold';
+
+  /* Prevent accidental text selection while tapping on mobile */
+  user-select: none; 
+  -webkit-user-select: none;
 }

 /* The actual spinning throbber */
@@ -87,6 +87,10 @@ function updateNameText(name) {

 const gui = new GUI({ width: 425 }); //New UI

+if (window.innerWidth <= 600) {
+  gui.close(); // Starts collapsed on mobile
+}
+
 //Loading elements 
 const loaderContainer = document.getElementById('loader-container');
 const loadingText = document.getElementById('loading-text');