mobile update part-4

Byson94 · Sep 18, 2024 · 33df27e · 33df27e
1 parent c16fac4
commit 33df27e
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 5 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
diff --git a/build_files/css/EngineUI.css b/build_files/css/EngineUI.css
@@ -45,7 +45,6 @@ body {
         transform-origin: top left;
         transform: scale(0.7);
     }
-
     }
 
 @media (max-width: 480px) {

diff --git a/build_files/html/mainMenu.html b/build_files/html/mainMenu.html
@@ -85,6 +85,15 @@
             outline: none; 
         }
 
+        .deviceNotSupported {
+            display: none;
+            position: fixed;
+            background-color: #222222;
+            width: 100%;
+            height: 100%;
+            z-index: 1100;
+        }
+
 /* Responsive adjustments */
 @media (max-width: 600px) {
     #header h2 {
@@ -169,11 +178,18 @@
         transform: translateX(20px);
     }
 }
-
     </style>
 </head>
 
 <body>
+    <div class="deviceNotSupported" style="background-color: #1c1c1c; width: 100%; height: 100vh; display: none; position: fixed; top: 0; left: 0; z-index: 999; align-items: center; justify-content: center; text-align: center;">
+        <h1 style="color: #26d07c; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-weight: bold; font-size: 2.5em; margin-bottom: 20px; letter-spacing: 1px;">⚠ Device Not Supported ⚠</h1>
+        <p style="padding: 20px; text-align: center; color: #b3b3b3; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-size: 1.1em; line-height: 1.6; max-width: 90%; margin: auto;">This device's width is too small to fully support this engine. Some elements may appear disordered. Proceed at your own risk!</p>
+        <button onclick="ContinuedWithRisks()" style="display: block; margin: 30px auto; padding: 12px 25px; background-color: #26d07c; color: #1c1c1c; border: none; border-radius: 6px; cursor: pointer; font-size: 1em; font-family: 'Segoe UI', sans-serif; transition: background-color 0.3s ease, transform 0.2s ease; box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);">
+            Continue Anyway
+        </button>
+    </div>
+
     <label>
         <input type="checkbox">
         <div class="toggle">
@@ -238,5 +254,18 @@ <h2>Create New Project</h2>
             window.location.href = "Settings.html";
         }
     </script>
+
+    <!-- Device width not supported -->
+    <script>
+    document.addEventListener("DOMContentLoaded", function() {
+        if (window.innerWidth < 348) {
+            document.querySelector('.deviceNotSupported').style.display = 'block';
+        }
+    });
+
+    function ContinuedWithRisks() {
+        document.querySelector('.deviceNotSupported').style.display = 'none';
+    }
+    </script>
 </body>
 </html>
-Original file line number
+Diff line change
@@ Expand Up / @@ -45,7 +45,6 @@ body { @@
             transform-origin: top left;
             transform: scale(0.7);
         }
         }
     @media (max-width: 480px) {
@@ Expand Down @@