enh: warning for mobile users

Not playable on mobile
agarciacif · Aug 30, 2024 · 6a583a5 · 6a583a5
1 parent b65e6a8
commit 6a583a5
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 1 deletion.
diff --git a/assets/style.css b/assets/style.css
@@ -46,6 +46,18 @@ h1 {
   padding: 2em;
 }
 
+#warning {
+  display: none;
+}
+
+@media only screen and (max-width: 600px) {
+  #player {
+    display: none;
+  }
+  #warning {
+    display: block;
+  }
+}
 
 @media (prefers-color-scheme: light) {
   :root {

diff --git a/index.html b/index.html
@@ -12,14 +12,15 @@
 </head>
 
 <body>
-  <header class="flex flex-col gap-1 w-auto md:mt-2">
+  <header class="flex justify-center items-center flex-col gap-1 w-auto md:mt-2">
     <p class="text-3xl font-bold">Undynetale</p>
     <a href="/~https://github.com/AgusZ02/JuegoNDS">
         <div class="flex justify-center">
             <svg class="fill-[#959ca7] transition duration-200 hover:fill-white mr-2" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-4.466 19.59c-.405.078-.534-.171-.534-.384v-2.195c0-.747-.262-1.233-.55-1.481 1.782-.198 3.654-.875 3.654-3.947 0-.874-.312-1.588-.823-2.147.082-.202.356-1.016-.079-2.117 0 0-.671-.215-2.198.82-.64-.18-1.324-.267-2.004-.271-.68.003-1.364.091-2.003.269-1.528-1.035-2.2-.82-2.2-.82-.434 1.102-.16 1.915-.077 2.118-.512.56-.824 1.273-.824 2.147 0 3.064 1.867 3.751 3.645 3.954-.229.2-.436.552-.508 1.07-.457.204-1.614.557-2.328-.666 0 0-.423-.768-1.227-.825 0 0-.78-.01-.055.487 0 0 .525.246.889 1.17 0 0 .463 1.428 2.688.944v1.489c0 .211-.129.459-.528.385-3.18-1.057-5.472-4.056-5.472-7.59 0-4.419 3.582-8 8-8s8 3.581 8 8c0 3.533-2.289 6.531-5.466 7.59z"/></svg>
             <p class="text-[#959ca7] hover:text-white transition duration-500 font-light">AgusZ02</p>
         </div>
     </a>
+    <h1 id="warning">Use a computer to play this game</h1>
 </header>
   <div style="display: flex; align-items: center; flex-direction: column;">
     <desmond-player id="player">