From 394cd89417d00da34050cd8f3447287d70c9aa36 Mon Sep 17 00:00:00 2001
From: Pyro Nicampt <81565698+PyroNicampt@users.noreply.github.com>
Date: Sun, 29 Dec 2024 02:33:04 -0600
Subject: [PATCH] Add temporary notification for mobile users

Needs to be removed when mobile navigation is added
---
 index.html | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/index.html b/index.html
index 002730e..6af104c 100644
--- a/index.html
+++ b/index.html
@@ -247,5 +247,21 @@
         <br>
         This tool is a fan work, Derail Valley owned by Altfuture
     </div>
+    <div id="mobileAlert" style="display:none;position:fixed;width:100vw;height:100vh;color:#fff;font-size:50px;align-items:center;justify-content:center;">
+        <div style="display:flex;align-items:center;justify-content:center;width:calc(100% - 150px);height:calc(100% - 150px);background:#d00b;border:#e00d solid 5px;border-radius: 30px;">
+            <div style="width:80%;height:60%;justify-content:center;text-align:center;">
+                <p>Touch navigation will be added in the future.</p>
+                <p>Right now, features may not work well or at all with touch screen.</p>
+                <p>Tap to continue.</p>
+            </div>
+        </div>
+        <script>
+            {
+                let alertscreen = document.getElementById('mobileAlert');
+                if(!window.matchMedia('(pointer:fine)')) alertscreen.style.display = 'flex';
+                alertscreen.addEventListener('pointerdown', () => {alertscreen.remove()});
+            }
+        </script>
+    </div>
   </body>
 </html>