Add sneaky

src/App.svelte

@@ -22,7 +22,8 @@
   
     let didFirstSetup: boolean  = $derived(DBState.db?.didFirstSetup)
     let gridOpen = $state(false)
-
+    let aprilFools = new Date().getMonth() === 3 && new Date().getDate() === 1
+    let aprilFoolsPage = $state(0)
 </script>
 
 <main class="flex bg-bg w-full h-full max-w-100vw text-textcolor" ondragover={(e) => {
@@ -39,7 +40,60 @@
         checkCharOrder()
     }
 }}>
-    {#if !$loadedStore}
+    {#if aprilFools}
+
+        <div class="bg-[#212121] w-full h-screen min-h-screen text-black flex relative">
+            <div class="w-full max-w-3xl mx-auto py-8 px-4 flex justify-center items-center">
+                <!-- svelte-ignore a11y_no_static_element_interactions -->
+                <div class="flex flex-col w-full items-center text-[#bbbbbb]">
+                    {#if aprilFoolsPage === 0}
+                        <h1 class="text-3xl text-white font-bold mb-6">What can I help you?</h1>
+                        <textarea class="resize-none w-full placeholder-[#bbbbbb] bg-[#303030] rounded-3xl h-[110px] py-4 px-6 mb-6" placeholder="Ask me" onkeydown={(e) => {
+                            if(e.key === 'Enter'){
+                                aprilFoolsPage = 1
+                            }
+                        }}></textarea>
+                        <!-- svelte-ignore a11y_click_events_have_key_events -->
+                        <div class="flex gap-1.5" onclick={() => {
+                            aprilFoolsPage = 1
+                        }}>
+                            <button class="rounded-full border border-[#bbbbbb15] px-4 py-2">
+                                <span class="text-[#bbbbbb]">🔍</span>
+                                Search
+                            </button>
+                            <button class="rounded-full border border-[#bbbbbb15] px-4 py-2">
+                                <span class="text-[#bbbbbb]">🎮</span>
+                                Games
+                            </button>
+                            <button class="rounded-full border border-[#bbbbbb15] px-4 py-2">
+                                <span class="text-[#bbbbbb]">🎨</span>
+                                Roleplay
+                            </button>
+                            <button class="rounded-full border border-[#bbbbbb15] px-4 py-2">
+                                More
+                            </button>
+                        </div>
+                    {:else}
+                    <h1 class="text-3xl text-white font-bold mb-6">
+                        Happy April Fools!
+                    </h1>
+                    <p class="text-[#bbbbbb] mb-6">
+                        <!-- svelte-ignore a11y_missing_attribute -->
+                        <!-- svelte-ignore a11y_click_events_have_key_events -->
+                        Go <a class="text-blue-500 cursor-pointer" onclick={() => {
+                            aprilFoolsPage = 0
+                            aprilFools = false
+                        }}>
+                            Back to normal    
+                        </a>
+                    </p>
+
+                    {/if}
+                </div>
+            </div>
+            <span class="absolute top-4 left-4 font-bold text-[#bbbbbb] text-md md:text-lg">RisyGTP-9</span>
+        </div>
+    {:else if !$loadedStore}
         <div class="w-full h-full flex justify-center items-center text-textcolor text-xl bg-gray-900 flex-col">
             <div class="flex flex-row items-center">
                 <svg class="animate-spin -ml-1 mr-3 h-5 w-5 text-textcolor" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">

src/lib/UI/Title.svelte

@@ -44,6 +44,7 @@
 
 </script>
 
+
 <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
 <!-- svelte-ignore a11y_click_events_have_key_events -->
 <h2 class="text-4xl text-textcolor mb-0 mt-6 font-black relative" class:text-bordered={specialDay === 'newYear'} onclick={onClick}>