Mabulig/MabuligWeb
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Mobile-friendly UI

Browse Source
This commit is contained in:
Fritz Villahermosa
2026-05-29 00:09:42 +08:00
parent 578a86b9e9
commit 4461782b70
3 changed files with 36 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+1
View File
@@ -2,6 +2,7 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8"> <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> <title>Mabulig Web App</title>
<script type="importmap"> <script type="importmap">
{ {
main.css
+31 -3
View File
@@ -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-face {
font-family: "SF Pro Medium"; font-family: "SF Pro Medium";
src: url("fonts/SF-Pro.ttf") format("truetype"); src: url("fonts/SF-Pro.ttf") format("truetype");
@@ -74,11 +98,11 @@ h4 {
/* Container that covers the whole screen */ /* Container that covers the whole screen */
#loader-container { #loader-container {
position: absolute; position: fixed;
top: 0; top: 0;
left: 0; left: 0;
width: 100vw; width: 100%;
height: 100vh; height: 100%;
/*background-color: #1111115d; */ /* Dark background */ /*background-color: #1111115d; */ /* Dark background */
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@@ -87,6 +111,10 @@ h4 {
z-index: 999; /* Ensure it stays on top of the Three.js canvas */ z-index: 999; /* Ensure it stays on top of the Three.js canvas */
color: black; color: black;
font-family: 'Blender Pro Bold'; font-family: 'Blender Pro Bold';
/* Prevent accidental text selection while tapping on mobile */
user-select: none;
-webkit-user-select: none;
} }
/* The actual spinning throbber */ /* The actual spinning throbber */
main.js
+4
View File
@@ -87,6 +87,10 @@ function updateNameText(name) {
const gui = new GUI({ width: 425 }); //New UI const gui = new GUI({ width: 425 }); //New UI
if (window.innerWidth <= 600) {
gui.close(); // Starts collapsed on mobile
}
//Loading elements //Loading elements
const loaderContainer = document.getElementById('loader-container'); const loaderContainer = document.getElementById('loader-container');
const loadingText = document.getElementById('loading-text'); const loadingText = document.getElementById('loading-text');