feat: add desktop requirement info to WelcomeModal

src/components/WelcomeModal.tsx

@@ -9,6 +9,7 @@ import {
 import LufraiLogo from "~icons/custom/lufrai-logo";
 import AppIcon from "~icons/custom/icon";
 import ExternalLinkIcon from "~icons/carbon/launch";
+import WarningIcon from "~icons/carbon/warning-alt-filled";
 import LaunchIcon from "~icons/carbon/edit";
 import Modal, { ModalCloseButton } from "./Modal";
 import { LocalStoreContext } from "~/stores";
@@ -98,7 +99,9 @@ const WelcomeModal: Component = (props) => {
 
   return (
     <Modal open={isOpen()}>
-      <ModalCloseButton onClick={() => setLocalState("showWelcome", false)} />
+      <div class="hidden xl:block">
+        <ModalCloseButton onClick={() => setLocalState("showWelcome", false)} />
+      </div>
       <div class="max-h-[50vh] overflow-y-auto px-2">
         <div class="min-h-[50vh] flex items-center justify-center">
           <div>
@@ -299,7 +302,7 @@ const WelcomeModal: Component = (props) => {
       </div>
       <div class="mt-14 relative flex justify-center gap-10">
         <div
-          class="form-control flex-row items-center gap-2"
+          class="hidden xl:flex form-control flex-row items-center gap-2"
           title="Unterstütze Lufrai mit einem Wasserzeichen im Dokument"
         >
           <input
@@ -320,11 +323,14 @@ const WelcomeModal: Component = (props) => {
         </div>
         <button
           onClick={() => setLocalState("showWelcome", false)}
-          class="btn btn-xl btn-primary gap-2 transition-all shadow-lg hover:shadow-lg shadow-indigo-300 hover:shadow-indigo-500 hover:ring-2 ring-offset-2 ring-indigo-500"
+          class="hidden xl:flex btn btn-xl btn-primary gap-2 transition-all shadow-lg hover:shadow-lg shadow-indigo-300 hover:shadow-indigo-500 hover:ring-2 ring-offset-2 ring-indigo-500"
         >
           <LaunchIcon />
           Loslegen
         </button>
+        <div class="w-full text-sm xl:hidden bg-error bg-opacity-50 ring-2 ring-offset-2 ring-error text-error-content rounded p-3 shadow-2xl flex items-center justify-center gap-3">
+          <WarningIcon /> Bitte verwende einen Laptop oder Computer!
+        </div>
       </div>
       <div class="absolute bottom-8 right-8 text-xs text-black opacity-60 flex gap-3">
         <span>Version: {__APP_VERSION__}</span>