From 37ecdebcbaf0065c9d4668f117519115a80c3a71 Mon Sep 17 00:00:00 2001
From: Silabear <56885288+Silabear@users.noreply.github.com>
Date: Fri, 14 Aug 2026 23:10:57 +0100
Subject: [PATCH 1/8] initial welcome screen design

---
 src/lib/components/WelcomeScreen.svelte | 68 +++++++++++++++++++++++++
 src/routes/+page.svelte                 | 10 ++++
 2 files changed, 78 insertions(+)
 create mode 100644 src/lib/components/WelcomeScreen.svelte

diff --git a/src/lib/components/WelcomeScreen.svelte b/src/lib/components/WelcomeScreen.svelte
new file mode 100644
index 0000000..78d1878
--- /dev/null
+++ b/src/lib/components/WelcomeScreen.svelte
@@ -0,0 +1,68 @@
+<script lang="ts">
+    import IconImport from "~icons/tabler/upload";
+    import IconGradient from "~icons/tabler/contrast-2";
+    import IconLore from "~icons/tabler/swords";
+    import IconCode from "~icons/tabler/code";
+</script>
+
+<div class="absolute">
+        <div
+            class="fixed top-0 left-0 z-40 flex h-screen w-screen flex-col items-center overflow-auto bg-black/65 text-zinc-100"
+            style="font-family: Lexend">
+            <div
+                aria-hidden="true"
+                onclick={() => close()}
+                class="fixed top-0 left-0 z-40 h-screen w-screen bg-transparent"
+                tabindex="-1">
+            </div>
+            <div
+                class="z-50 w-[95%] md:w-[50%] 2xl:w-[40%] m-auto py-4">
+                <div class="flex items-center rounded-t-lg bg-zinc-900 p-2 text-xl">
+                    <img src="/dph.svg" class="h-8 ml-1 " alt="logo" />  
+                    <span class="text-lg font-bold m-2 bg-linear-to-r from-red-500 to-yellow-600 bg-clip-text text-transparent">Minecraft Text Editor</span>
+                    <div class="grow"></div>
+                    <button aria-label="close" class="p-2 hover:bg-black/15 rounded-md" onclick={close}>X</button>
+                </div>
+                <div class="rounded-b-lg px-4 pb-4 flex flex-col space-y-1 bg-zinc-900">
+                    <p>Welcome! </p>
+                    <p class="text-zinc-300 text-sm">With this tool, easily generate text for Minecraft datapacks, tellraw commands, and more. Here's what else we have to offer:</p>
+                    <div class="grid grid-cols-1 lg:grid-cols-2 gap-2 mt-2">
+
+                        <div class="flex items-center space-x-2 bg-zinc-800 text-zinc-200 rounded-md border-rose-500 p-2 border-0 shadow-xl drop-shadow-lg">
+                            <IconImport class="w-[7.5%] lg:w-1/5" />
+                            <div class="flex flex-col space-y-1 my-1">
+                                <span class="uppercase text-xs text-zinc-500 font-bold">Import</span>
+                                <span class="text-sm">Import text components from any version into the editor to make adjustments.</span>
+                            </div>
+                        </div>
+
+                        <div class="flex items-center space-x-2 bg-zinc-800 text-zinc-200 rounded-md border-rose-500 p-2 border-0 shadow-xl drop-shadow-lg">
+                            <IconGradient class="w-[7.5%] lg:w-1/5" />
+                            <div class="flex flex-col space-y-1 my-1">
+                                <span class="uppercase text-xs text-zinc-500 font-bold">Gradient</span>
+                                <span class="text-sm">Easily add gradients to text, without the output being insanely long.</span>
+                            </div>
+                        </div>
+
+                        <div class="flex items-center space-x-2 bg-zinc-800 text-zinc-200 rounded-md border-rose-500 p-2 border-0 shadow-xl drop-shadow-lg">
+                            <IconLore class="w-[7.5%] lg:w-1/5" />
+                            <div class="flex flex-col space-y-1 my-1">
+                                <span class="uppercase text-xs text-zinc-500 font-bold">Lore output</span>
+                                <span class="text-sm">With two clicks, get an output correctly formatted for item lore components.</span>
+                            </div>
+                        </div>
+
+                        <div class="flex items-center space-x-2 bg-zinc-800 text-zinc-200 rounded-md border-rose-500 p-2 border-0 shadow-xl drop-shadow-lg">
+                            <IconCode class="w-[7.5%] lg:w-1/5" />
+                            <div class="flex flex-col space-y-1 my-1">
+                                <span class="uppercase text-xs text-zinc-500 font-bold">Open source</span>
+                                <span class="text-sm">All the code that makes this work is public. We maintain and update the site regularly.</span>
+                            </div>
+                        </div>
+                    </div>
+                    <p class="text-zinc-300 text-xs mt-2">This site is maintained by Datapack Hub, and is <b>not</b> endorsed by Mojang Studios.</p>
+                </div>
+            </div>
+        </div>
+    </div>
+
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index a3d964e..867dbd4 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+  import WelcomeScreen from '../lib/components/WelcomeScreen.svelte';
+
     import { openDataStore } from "$lib/db";
     import { outputVersion } from "$lib/stores";
     import { convert } from "$lib/text/nbt/export";
@@ -53,6 +55,8 @@
     
     let exportSelectionDialog: Modal = $state()!;
 
+    let showWelcomeScreen: boolean = true;  
+
     async function loadData() {
         if (localStorage.getItem("content")) {
             tiptapJSON = JSON.parse(localStorage.getItem("content")!);
@@ -396,6 +400,11 @@
     </div>
 </noscript>
 
+{#if showWelcomeScreen}
+    <WelcomeScreen></WelcomeScreen>
+{/if}
+
+
 {#await import("$lib/components/modals/topbar/ExportModal.svelte") then modal}
     <modal.default bind:outputDialog {editor} {recentlyCopied} />
 {/await}
@@ -403,3 +412,4 @@
 {#await import("$lib/components/modals/ExportSelectionModal.svelte") then modal}
     <modal.default bind:exportSelectionDialog editor={editor!} shouldOptimise={shouldOptimise} />
 {/await}
+

From 7d1c61a771f11018201d4f1fbe3d57375af419cc Mon Sep 17 00:00:00 2001
From: Silabear <56885288+Silabear@users.noreply.github.com>
Date: Sat, 15 Aug 2026 22:01:40 +0100
Subject: [PATCH 2/8] welcome screen changes + style rearranging

---
 src/app.css                                   |   4 +
 src/lib/components/TopUI.svelte               |   6 +-
 src/lib/components/WelcomeScreen.svelte       | 114 +++++++++++-------
 .../components/modals/ClickEventModal.svelte  |  12 +-
 .../modals/CustomSourceModal.svelte           |  34 +++---
 .../components/modals/FontPickerModal.svelte  |   2 +-
 .../components/modals/FontUploadModal.svelte  |   2 +-
 .../modals/topbar/SettingsModal.svelte        |   2 +-
 src/routes/+page.svelte                       |   9 +-
 9 files changed, 105 insertions(+), 80 deletions(-)

diff --git a/src/app.css b/src/app.css
index e7ca08d..c2470bf 100644
--- a/src/app.css
+++ b/src/app.css
@@ -120,6 +120,10 @@ strong {
     @apply rounded-md p-1 text-lg font-medium hover:bg-white/3;
 }
 
+.input-basic {
+    @apply rounded-md bg-zinc-900 p-2;
+}
+
 .tippy-box[data-theme~="dph"] {
     background-color: var(--color-zinc-700);
     font-family: "Lexend", sans-serif;
diff --git a/src/lib/components/TopUI.svelte b/src/lib/components/TopUI.svelte
index 8ff1b7d..e8f8083 100644
--- a/src/lib/components/TopUI.svelte
+++ b/src/lib/components/TopUI.svelte
@@ -8,7 +8,7 @@
     import IconUpload from "~icons/tabler/upload";
     import IconSettings from "~icons/tabler/settings";
 
-    const { editor }: { editor: Editor | undefined } = $props();
+    let { editor, welcomeScreenVisible = $bindable() }: { editor: Editor | undefined, welcomeScreenVisible: boolean } = $props();
 
     let snapshots = $state<object[]>([]);
     let importText: string = $state("");
@@ -34,10 +34,10 @@
 </script>
 
 <div class="flex w-full items-center bg-zinc-950 text-sm text-zinc-300" style="font-family: Lexend">
-    <div class="flex items-center px-3 py-2 hover:bg-white/3">
+    <button class="flex items-center px-3 py-2 hover:bg-white/3" onclick={() => welcomeScreenVisible = true}>
         <img src="/dph.svg" class="size-5" alt="logo" height="20" width="20" />
         <span class="nomob ml-2 font-semibold">Minecraft Text Editor</span>
-    </div>
+    </button>
     <button
         class="flex items-center space-x-[0.45rem] px-[0.6rem] py-2 hover:bg-white/3"
         onclick={importDialog?.open}>
diff --git a/src/lib/components/WelcomeScreen.svelte b/src/lib/components/WelcomeScreen.svelte
index 78d1878..4c5a807 100644
--- a/src/lib/components/WelcomeScreen.svelte
+++ b/src/lib/components/WelcomeScreen.svelte
@@ -3,66 +3,90 @@
     import IconGradient from "~icons/tabler/contrast-2";
     import IconLore from "~icons/tabler/swords";
     import IconCode from "~icons/tabler/code";
+    import IconClose from "~icons/tabler/X"
+    import Key from "./Key.svelte";
+
+    let { visible = $bindable(false) }: { visible: boolean } = $props()
+
+    function handleKeydown(event: KeyboardEvent) {
+        if (event.key === "Escape" && visible) {
+            visible = false;
+        }
+    }
 </script>
 
+<svelte:window onkeydown={handleKeydown} />
+
+{#if visible}
 <div class="absolute">
+    <div
+        class="fixed top-0 left-0 z-40 flex h-screen w-screen flex-col items-center overflow-auto bg-black/65 text-zinc-100"
+        style="font-family: Lexend">
         <div
-            class="fixed top-0 left-0 z-40 flex h-screen w-screen flex-col items-center overflow-auto bg-black/65 text-zinc-100"
-            style="font-family: Lexend">
-            <div
-                aria-hidden="true"
-                onclick={() => close()}
-                class="fixed top-0 left-0 z-40 h-screen w-screen bg-transparent"
-                tabindex="-1">
+            aria-hidden="true"
+            onclick={() => close()}
+            class="fixed top-0 left-0 z-40 h-screen w-screen bg-transparent"
+            tabindex="-1">
+        </div>
+        <div
+            class="z-50 w-[95%] md:w-[50%] 2xl:w-[40%] m-auto py-4">
+            <div class="flex items-center rounded-t-lg bg-zinc-900 p-2 text-xl">
+                <img src="/dph.svg" class="h-8 ml-1 " alt="logo" />  
+                <span class="text-lg font-black m-2 bg-linear-to-r from-red-500 to-yellow-600 bg-clip-text text-transparent">Minecraft Text Editor</span>
+                <div class="grow"></div>
+                <button aria-label="close" class="p-2 hover:bg-black/15 rounded-md" onclick={() => visible = false}><IconClose /></button>
             </div>
-            <div
-                class="z-50 w-[95%] md:w-[50%] 2xl:w-[40%] m-auto py-4">
-                <div class="flex items-center rounded-t-lg bg-zinc-900 p-2 text-xl">
-                    <img src="/dph.svg" class="h-8 ml-1 " alt="logo" />  
-                    <span class="text-lg font-bold m-2 bg-linear-to-r from-red-500 to-yellow-600 bg-clip-text text-transparent">Minecraft Text Editor</span>
-                    <div class="grow"></div>
-                    <button aria-label="close" class="p-2 hover:bg-black/15 rounded-md" onclick={close}>X</button>
-                </div>
-                <div class="rounded-b-lg px-4 pb-4 flex flex-col space-y-1 bg-zinc-900">
-                    <p>Welcome! </p>
-                    <p class="text-zinc-300 text-sm">With this tool, easily generate text for Minecraft datapacks, tellraw commands, and more. Here's what else we have to offer:</p>
-                    <div class="grid grid-cols-1 lg:grid-cols-2 gap-2 mt-2">
+            <div class="rounded-b-lg px-4 pb-4 flex flex-col space-y-1 bg-zinc-900">
+                <h1 class="font-black">Welcome! </h1>
+                <p class="text-zinc-300 text-sm">With this tool, you can easily generate text components for Minecraft datapacks, tellraw commands, and more. Here's what makes us unique:</p>
+
+                <div class="grid grid-cols-1 lg:grid-cols-2 gap-2 mt-2">
 
-                        <div class="flex items-center space-x-2 bg-zinc-800 text-zinc-200 rounded-md border-rose-500 p-2 border-0 shadow-xl drop-shadow-lg">
-                            <IconImport class="w-[7.5%] lg:w-1/5" />
-                            <div class="flex flex-col space-y-1 my-1">
-                                <span class="uppercase text-xs text-zinc-500 font-bold">Import</span>
-                                <span class="text-sm">Import text components from any version into the editor to make adjustments.</span>
-                            </div>
+                    <div class="flex items-center space-x-2 bg-green-500/20 text-zinc-200 rounded-md border-green-500 p-2 border-2 shadow-xl drop-shadow-lg">
+                        <IconImport class="w-[7.5%] lg:w-1/10" />
+                        <div class="flex flex-col space-y-1 my-1 w-[92.5%] lg:w-9/10">
+                            <span class="uppercase text-xs text-green-500 font-bold">Import</span>
+                            <span class="text-sm text-green-100">Import text components from any version into the editor.</span>
                         </div>
+                    </div>
 
-                        <div class="flex items-center space-x-2 bg-zinc-800 text-zinc-200 rounded-md border-rose-500 p-2 border-0 shadow-xl drop-shadow-lg">
-                            <IconGradient class="w-[7.5%] lg:w-1/5" />
-                            <div class="flex flex-col space-y-1 my-1">
-                                <span class="uppercase text-xs text-zinc-500 font-bold">Gradient</span>
-                                <span class="text-sm">Easily add gradients to text, without the output being insanely long.</span>
-                            </div>
+                    <div class="flex items-center space-x-2 bg-rose-500/20 text-zinc-200 rounded-md border-rose-500 p-2 border-2 shadow-xl drop-shadow-lg">
+                        <IconGradient class="w-[7.5%] lg:w-1/10" />
+                        <div class="flex flex-col space-y-1 my-1 w-[92.5%] lg:w-9/10">
+                            <span class="uppercase text-xs text-rose-500 font-bold">Gradient</span>
+                            <span class="text-sm text-rose-100">Easily add gradients to text, we'll do the rest.</span>
                         </div>
+                    </div>
 
-                        <div class="flex items-center space-x-2 bg-zinc-800 text-zinc-200 rounded-md border-rose-500 p-2 border-0 shadow-xl drop-shadow-lg">
-                            <IconLore class="w-[7.5%] lg:w-1/5" />
-                            <div class="flex flex-col space-y-1 my-1">
-                                <span class="uppercase text-xs text-zinc-500 font-bold">Lore output</span>
-                                <span class="text-sm">With two clicks, get an output correctly formatted for item lore components.</span>
-                            </div>
+                    <div class="flex items-center space-x-2 bg-blue-500/20 text-zinc-200 rounded-md border-blue-500 p-2 border-2 shadow-xl drop-shadow-lg">
+                        <IconLore class="w-[7.5%] lg:w-1/10" />
+                        <div class="flex flex-col space-y-1 my-1 w-[92.5%] lg:w-9/10">
+                            <span class="uppercase text-xs text-blue-500 font-bold">Lore output</span>
+                            <span class="text-sm text-blue-100">Get an output correctly formatted for item lore components.</span>
                         </div>
+                    </div>
 
-                        <div class="flex items-center space-x-2 bg-zinc-800 text-zinc-200 rounded-md border-rose-500 p-2 border-0 shadow-xl drop-shadow-lg">
-                            <IconCode class="w-[7.5%] lg:w-1/5" />
-                            <div class="flex flex-col space-y-1 my-1">
-                                <span class="uppercase text-xs text-zinc-500 font-bold">Open source</span>
-                                <span class="text-sm">All the code that makes this work is public. We maintain and update the site regularly.</span>
-                            </div>
+                    <div class="flex items-center space-x-2 bg-zinc-800 text-zinc-200 rounded-md border-zinc-500 p-2 border-2 shadow-xl drop-shadow-lg">
+                        <IconCode class="w-[7.5%] lg:w-1/10" />
+                        <div class="flex flex-col space-y-1 my-1 w-[92.5%] lg:w-9/10">
+                            <span class="uppercase text-xs text-zinc-500 font-bold">Open source</span>
+                            <span class="text-sm">All the code is public, and we maintain and update it regularly.</span>
                         </div>
                     </div>
-                    <p class="text-zinc-300 text-xs mt-2">This site is maintained by Datapack Hub, and is <b>not</b> endorsed by Mojang Studios.</p>
                 </div>
+
+                <!-- <p class="text-sm text-zinc-200 mt-2">Click <Key>ESC</Key> to dismiss.</p> -->
+
+                <p class="text-zinc-400 text-xs mt-2">This site is maintained by Datapack Hub, and is <b>not</b> endorsed by Mojang Studios.</p>
+                    
+                <noscript>
+                    <div class="rounded-md border-2 border-red-500 bg-red-500/20 px-3 py-2 mt-2 text-rose-200">
+                        <h1 class="font-bold text-white">This website requires JavaScript to work.</h1>
+                        <p class="text-sm">Please enable Javascript access in your site settings, then refresh the page. If you still see this notice, try a different browser, or ask for help in our <a href="https://discord.datapackhub.net/">Discord server</a>.</p>
+                    </div>
+                </noscript>
             </div>
         </div>
     </div>
-
+</div>
+{/if}
\ No newline at end of file
diff --git a/src/lib/components/modals/ClickEventModal.svelte b/src/lib/components/modals/ClickEventModal.svelte
index ca35c1a..c4ebbfe 100644
--- a/src/lib/components/modals/ClickEventModal.svelte
+++ b/src/lib/components/modals/ClickEventModal.svelte
@@ -11,7 +11,7 @@
 
 <Modal title="Click Event" bind:this={clickEventDialog} key="T">
     <p>Event Type</p>
-    <select bind:value={clickEventType} class="rounded-md bg-zinc-900 p-2">
+    <select bind:value={clickEventType} class="input-basic">
         <option value="open_url">Open URL</option>
         <option value="run_command">Run Command</option>
         <option value="suggest_command">Suggest Command</option>
@@ -32,7 +32,7 @@
         <p class="mt-2">Command:</p>
         <input
             type="text"
-            class="rounded-md bg-zinc-900 p-2"
+            class="input-basic"
             placeholder="/give @s apple"
             bind:value={clickEventValue} />
         <p class="text-zinc-400">Note: the player must have permission to run the command!</p>
@@ -40,7 +40,7 @@
         <p class="mt-2">Command:</p>
         <input
             type="text"
-            class="rounded-md bg-zinc-900 p-2"
+            class="input-basic"
             placeholder="/give @s apple"
             bind:value={clickEventValue} />
         <p class="text-zinc-400">Note: the player must have permission to run the command!</p>
@@ -48,21 +48,21 @@
         <p class="mt-2">Text to copy:</p>
         <input
             type="text"
-            class="rounded-md bg-zinc-900 p-2"
+            class="input-basic"
             placeholder="I love the Wuppertal Suspension Railway"
             bind:value={clickEventValue} />
     {:else if clickEventType == "change_page"}
         <p class="mt-2">Page to go to:</p>
         <input
             type="number"
-            class="rounded-md bg-zinc-900 p-2"
+            class="input-basic"
             placeholder="32"
             bind:value={clickEventValue} />
     {:else if clickEventType == "open_dialog"}
         <p class="mt-2">Dialog ID:</p>
         <input
             type="text"
-            class="rounded-md bg-zinc-900 p-2"
+            class="input-basic"
             placeholder="namespace:example_dialog"
             bind:value={clickEventValue} />
     {/if}
diff --git a/src/lib/components/modals/CustomSourceModal.svelte b/src/lib/components/modals/CustomSourceModal.svelte
index 63b9aa8..59a6540 100644
--- a/src/lib/components/modals/CustomSourceModal.svelte
+++ b/src/lib/components/modals/CustomSourceModal.svelte
@@ -122,7 +122,7 @@
             {/if}
         </div>
     {:else}
-        <select bind:value={customType} class="rounded-md bg-zinc-900 p-2">
+        <select bind:value={customType} class="input-basic">
             <option value="translate">Translate Key</option>
             <option value="score">Score Value</option>
             <option value="nbt">NBT Value</option>
@@ -136,14 +136,14 @@
         <p class="mt-2">Translate Key</p>
         <input
             type="text"
-            class="rounded-md bg-zinc-900 p-2"
+            class="input-basic"
             placeholder="item.minecraft.beef"
             bind:value={customValues.translate.key} />
 
         <p class="mt-2">Fallback</p>
         <input
             type="text"
-            class="rounded-md bg-zinc-900 p-2"
+            class="input-basic"
             placeholder="This text is shown if the key does not exist"
             bind:value={customValues.translate.fallback} />
 
@@ -198,13 +198,13 @@
         <p class="mt-2">Objective</p>
         <input
             type="text"
-            class="rounded-md bg-zinc-900 p-2"
+            class="input-basic"
             placeholder="money"
             bind:value={customValues.score.objective} />
         <p class="mt-2">Player, Fake Player, or Entity</p>
         <input
             type="text"
-            class="rounded-md bg-zinc-900 p-2"
+            class="input-basic"
             placeholder="@s"
             bind:value={customValues.score.name} />
 
@@ -225,7 +225,7 @@
         </button>
     {:else if customType === "nbt"}
         <p class="mt-2">NBT Source type</p>
-        <select bind:value={customValues.nbt.sourceType} class="rounded-md bg-zinc-900 p-2">
+        <select bind:value={customValues.nbt.sourceType} class="input-basic">
             <option value="storage">Storage</option>
             <option value="block">Block</option>
             <option value="entity">Entity</option>
@@ -234,14 +234,14 @@
             <p class="mt-2">Storage ID</p>
             <input
                 type="text"
-                class="rounded-md bg-zinc-900 p-2"
+                class="input-basic"
                 placeholder="example:storage"
                 bind:value={customValues.nbt.storage} />
 
             <p class="mt-2">NBT path</p>
             <input
                 type="text"
-                class="rounded-md bg-zinc-900 p-2"
+                class="input-basic"
                 placeholder="Items[0].id"
                 bind:value={customValues.nbt.path} />
 
@@ -270,14 +270,14 @@
             <p class="mt-2">Entity</p>
             <input
                 type="text"
-                class="rounded-md bg-zinc-900 p-2"
+                class="input-basic"
                 placeholder="@e[type=villager,limit=1,sort=nearest]"
                 bind:value={customValues.nbt.entity} />
 
             <p class="mt-2">NBT path</p>
             <input
                 type="text"
-                class="rounded-md bg-zinc-900 p-2"
+                class="input-basic"
                 placeholder="Items[0].id"
                 bind:value={customValues.nbt.path} />
 
@@ -306,14 +306,14 @@
             <p class="mt-2">Entity</p>
             <input
                 type="text"
-                class="rounded-md bg-zinc-900 p-2"
+                class="input-basic"
                 placeholder="~ ~ ~"
                 bind:value={customValues.nbt.block} />
 
             <p class="mt-2">NBT path</p>
             <input
                 type="text"
-                class="rounded-md bg-zinc-900 p-2"
+                class="input-basic"
                 placeholder="Items[0].id"
                 bind:value={customValues.nbt.path} />
 
@@ -343,7 +343,7 @@
         <p class="mt-2">Keybind</p>
         <input
             type="text"
-            class="rounded-md bg-zinc-900 p-2"
+            class="input-basic"
             placeholder="key.jump"
             bind:value={customValues.keybind.key} />
         <button
@@ -358,7 +358,7 @@
         <p class="mt-2">Selector</p>
         <input
             type="text"
-            class="rounded-md bg-zinc-900 p-2"
+            class="input-basic"
             placeholder="@p[tag=something]"
             bind:value={customValues.selector.selector} />
         <button
@@ -375,7 +375,7 @@
         </button>
     {:else if customType === "object"}
         <p class="mt-2">Object Type</p>
-        <select bind:value={customValues.object.object} class="rounded-md bg-zinc-900 p-2">
+        <select bind:value={customValues.object.object} class="input-basic">
             <option value="atlas">Atlas (sprite)</option>
             <option value="player">Player Head</option>
         </select>
@@ -393,7 +393,7 @@
             <p class="mt-2">Sprite</p>
             <input
                 type="text"
-                class="rounded-md bg-zinc-900 p-2"
+                class="input-basic"
                 bind:value={customValues.object.sprite} />
 
             <button
@@ -415,7 +415,7 @@
             <p class="mt-2">Username</p>
             <input
                 type="text"
-                class="rounded-md bg-zinc-900 p-2"
+                class="input-basic"
                 bind:value={customValues.object.player.name} />
 
             <div class="mt-2 flex items-center space-x-2">
diff --git a/src/lib/components/modals/FontPickerModal.svelte b/src/lib/components/modals/FontPickerModal.svelte
index da8a131..5c43c0f 100644
--- a/src/lib/components/modals/FontPickerModal.svelte
+++ b/src/lib/components/modals/FontPickerModal.svelte
@@ -99,7 +99,7 @@
         <p class="my-2">Or, if you want to use a custom font without importing it, enter the ID:</p>
         <input
             type="text"
-            class="rounded-md bg-zinc-900 p-2"
+            class="input-basic"
             placeholder="namespace:id"
             bind:value={fontName} />
 
diff --git a/src/lib/components/modals/FontUploadModal.svelte b/src/lib/components/modals/FontUploadModal.svelte
index b710ec8..b2958bc 100644
--- a/src/lib/components/modals/FontUploadModal.svelte
+++ b/src/lib/components/modals/FontUploadModal.svelte
@@ -96,7 +96,7 @@
         <p>
             Enter font identifier <span class="font-mono text-white/60">(namespace:font_name)</span>
         </p>
-        <input type="text" class="rounded-md bg-zinc-900 p-2" bind:value={identifier} />
+        <input type="text" class="input-basic" bind:value={identifier} />
         <button onclick={addToFontLUT} class="btn"> Add font </button>
     {/if}
 </Modal>
diff --git a/src/lib/components/modals/topbar/SettingsModal.svelte b/src/lib/components/modals/topbar/SettingsModal.svelte
index 6f0d927..6fb412a 100644
--- a/src/lib/components/modals/topbar/SettingsModal.svelte
+++ b/src/lib/components/modals/topbar/SettingsModal.svelte
@@ -55,7 +55,7 @@
             <select
                 name="fontSize"
                 bind:value={$appSettings.fontSize}
-                class="rounded-md bg-zinc-900 p-2">
+                class="input-basic">
                 <option value={0}>Small</option>
                 <option value={1}>Default</option>
                 <option value={2}>Large</option>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 867dbd4..bf6d968 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -55,7 +55,7 @@
     
     let exportSelectionDialog: Modal = $state()!;
 
-    let showWelcomeScreen: boolean = true;  
+    let showWelcomeScreen: boolean = $state(true);  
 
     async function loadData() {
         if (localStorage.getItem("content")) {
@@ -233,7 +233,7 @@
 <svelte:window onkeydown={clearMarksHandler} />
 
 <main class="flex h-screen max-h-screen flex-col">
-    <TopUI {editor} />
+    <TopUI {editor} bind:welcomeScreenVisible={showWelcomeScreen} />
 
     <ControlBar {editor} />
 
@@ -400,10 +400,7 @@
     </div>
 </noscript>
 
-{#if showWelcomeScreen}
-    <WelcomeScreen></WelcomeScreen>
-{/if}
-
+<WelcomeScreen bind:visible={showWelcomeScreen} />
 
 {#await import("$lib/components/modals/topbar/ExportModal.svelte") then modal}
     <modal.default bind:outputDialog {editor} {recentlyCopied} />

From 73e7098b7595d80201a975904039069c1b8c5add Mon Sep 17 00:00:00 2001
From: Silabear <56885288+Silabear@users.noreply.github.com>
Date: Sat, 15 Aug 2026 22:07:27 +0100
Subject: [PATCH 3/8] welcome screen changes

---
 src/app.css                             | 4 ++++
 src/lib/components/WelcomeScreen.svelte | 6 ++++--
 src/routes/+page.svelte                 | 2 +-
 3 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/app.css b/src/app.css
index c2470bf..980a065 100644
--- a/src/app.css
+++ b/src/app.css
@@ -124,6 +124,10 @@ strong {
     @apply rounded-md bg-zinc-900 p-2;
 }
 
+.link {
+    @apply font-bold underline
+}
+
 .tippy-box[data-theme~="dph"] {
     background-color: var(--color-zinc-700);
     font-family: "Lexend", sans-serif;
diff --git a/src/lib/components/WelcomeScreen.svelte b/src/lib/components/WelcomeScreen.svelte
index 4c5a807..3a55db6 100644
--- a/src/lib/components/WelcomeScreen.svelte
+++ b/src/lib/components/WelcomeScreen.svelte
@@ -75,9 +75,11 @@
                     </div>
                 </div>
 
-                <!-- <p class="text-sm text-zinc-200 mt-2">Click <Key>ESC</Key> to dismiss.</p> -->
+                <p class="text-sm text-zinc-400 mt-2"><b class="text-zinc-300">Feedback?</b> We are a small team and would love to hear any feedback you have! Let us know what you think on our <a href="https://discord.datapackhub.net/" class="link">Discord server</a>.</p>
 
-                <p class="text-zinc-400 text-xs mt-2">This site is maintained by Datapack Hub, and is <b>not</b> endorsed by Mojang Studios.</p>
+                <p class="text-sm text-zinc-400 mt-1"><b class="text-zinc-300">Bugs?</b> Report them on our <a href="https://discord.datapackhub.net/" class="link">Discord server</a>, or create an issue on <a href="https://github.com/Datapack-Hub/text/issues" class="link">Github</a>.</p>
+
+                <p class="text-zinc-500 text-xs mt-2">This site is maintained by Datapack Hub, and is <b>not</b> endorsed by Mojang Studios.</p>
                     
                 <noscript>
                     <div class="rounded-md border-2 border-red-500 bg-red-500/20 px-3 py-2 mt-2 text-rose-200">
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index bf6d968..336adc6 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -391,7 +391,7 @@
                             enabled, please refresh. If that doesn't work, then try a different
                             browser. If that still doesn't work, then ask for help in <a
                                 href="https://discord.datapackhub.net/"
-                                class="font-bold underline">our Discord</a
+                                class="link">our Discord</a
                             ></span>
                     </div>
                 </div>

From c1fc72b5315e9f583fce8c3cfb045fb7274ca776 Mon Sep 17 00:00:00 2001
From: Silabear <56885288+Silabear@users.noreply.github.com>
Date: Sat, 15 Aug 2026 23:42:18 +0100
Subject: [PATCH 4/8] gradient change

---
 src/lib/components/WelcomeScreen.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/components/WelcomeScreen.svelte b/src/lib/components/WelcomeScreen.svelte
index 3a55db6..5a8052f 100644
--- a/src/lib/components/WelcomeScreen.svelte
+++ b/src/lib/components/WelcomeScreen.svelte
@@ -32,7 +32,7 @@
             class="z-50 w-[95%] md:w-[50%] 2xl:w-[40%] m-auto py-4">
             <div class="flex items-center rounded-t-lg bg-zinc-900 p-2 text-xl">
                 <img src="/dph.svg" class="h-8 ml-1 " alt="logo" />  
-                <span class="text-lg font-black m-2 bg-linear-to-r from-red-500 to-yellow-600 bg-clip-text text-transparent">Minecraft Text Editor</span>
+                <span class="text-lg font-black m-2 bg-linear-to-r from-red-500 to-yellow-500 bg-clip-text text-transparent">Minecraft Text Editor</span>
                 <div class="grow"></div>
                 <button aria-label="close" class="p-2 hover:bg-black/15 rounded-md" onclick={() => visible = false}><IconClose /></button>
             </div>

From 2e8162d8a4f2f62291637111a1eae4bb90ddd8ab Mon Sep 17 00:00:00 2001
From: Silabear <56885288+Silabear@users.noreply.github.com>
Date: Sun, 16 Aug 2026 01:10:55 +0100
Subject: [PATCH 5/8] only show welcome screen once, unless needed

---
 src/lib/components/WelcomeScreen.svelte | 14 +++++++++++++-
 src/routes/+page.svelte                 |  2 +-
 2 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/src/lib/components/WelcomeScreen.svelte b/src/lib/components/WelcomeScreen.svelte
index 5a8052f..f681681 100644
--- a/src/lib/components/WelcomeScreen.svelte
+++ b/src/lib/components/WelcomeScreen.svelte
@@ -1,10 +1,12 @@
 <script lang="ts">
+    const welcomeScreenFormat = "1"
+
     import IconImport from "~icons/tabler/upload";
     import IconGradient from "~icons/tabler/contrast-2";
     import IconLore from "~icons/tabler/swords";
     import IconCode from "~icons/tabler/code";
     import IconClose from "~icons/tabler/X"
-    import Key from "./Key.svelte";
+    import { onMount } from "svelte";
 
     let { visible = $bindable(false) }: { visible: boolean } = $props()
 
@@ -13,6 +15,16 @@
             visible = false;
         }
     }
+
+    onMount(() => {
+        let seenWelcome = localStorage.getItem("seen_welcome")
+        if (seenWelcome && seenWelcome == welcomeScreenFormat) {
+            visible = false
+        } else {
+            visible = true
+            localStorage.setItem("seen_welcome", welcomeScreenFormat);
+        }
+    })
 </script>
 
 <svelte:window onkeydown={handleKeydown} />
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 336adc6..4c15cbe 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -55,7 +55,7 @@
     
     let exportSelectionDialog: Modal = $state()!;
 
-    let showWelcomeScreen: boolean = $state(true);  
+    let showWelcomeScreen: boolean = $state(false);  
 
     async function loadData() {
         if (localStorage.getItem("content")) {

From c028c60276b0cb9db0471ce6ac96e26be1c82251 Mon Sep 17 00:00:00 2001
From: Silabear <56885288+Silabear@users.noreply.github.com>
Date: Sun, 16 Aug 2026 01:20:06 +0100
Subject: [PATCH 6/8] wording changes + style fix

---
 src/app.css                             | 2 +-
 src/lib/components/WelcomeScreen.svelte | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/app.css b/src/app.css
index 980a065..8a5ff9e 100644
--- a/src/app.css
+++ b/src/app.css
@@ -125,7 +125,7 @@ strong {
 }
 
 .link {
-    @apply font-bold underline
+    @apply font-bold underline;
 }
 
 .tippy-box[data-theme~="dph"] {
diff --git a/src/lib/components/WelcomeScreen.svelte b/src/lib/components/WelcomeScreen.svelte
index f681681..2645fa1 100644
--- a/src/lib/components/WelcomeScreen.svelte
+++ b/src/lib/components/WelcomeScreen.svelte
@@ -66,7 +66,7 @@
                         <IconGradient class="w-[7.5%] lg:w-1/10" />
                         <div class="flex flex-col space-y-1 my-1 w-[92.5%] lg:w-9/10">
                             <span class="uppercase text-xs text-rose-500 font-bold">Gradient</span>
-                            <span class="text-sm text-rose-100">Easily add gradients to text, we'll do the rest.</span>
+                            <span class="text-sm text-rose-100">Add gradients to text, while keeping styles and interactivity.</span>
                         </div>
                     </div>
 

From cfd7ae5c221cc3d87b045f8507ccb444287e74b8 Mon Sep 17 00:00:00 2001
From: Silabear <56885288+Silabear@users.noreply.github.com>
Date: Sun, 16 Aug 2026 01:22:18 +0100
Subject: [PATCH 7/8] click out of the welcome modal

---
 src/lib/components/WelcomeScreen.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/components/WelcomeScreen.svelte b/src/lib/components/WelcomeScreen.svelte
index 2645fa1..edfa677 100644
--- a/src/lib/components/WelcomeScreen.svelte
+++ b/src/lib/components/WelcomeScreen.svelte
@@ -36,7 +36,7 @@
         style="font-family: Lexend">
         <div
             aria-hidden="true"
-            onclick={() => close()}
+            onclick={() => visible = false}
             class="fixed top-0 left-0 z-40 h-screen w-screen bg-transparent"
             tabindex="-1">
         </div>

From 24d35cd6cb78ddc67c596bef28794ade0d10fd7a Mon Sep 17 00:00:00 2001
From: Silabear <56885288+Silabear@users.noreply.github.com>
Date: Sun, 16 Aug 2026 01:43:00 +0100
Subject: [PATCH 8/8] fix tests

---
 src/lib/components/WelcomeScreen.svelte | 3 +--
 src/lib/globals.ts                      | 1 +
 src/tests/e2e/basic.test.ts             | 8 ++++++++
 src/tests/e2e/modals.test.ts            | 8 ++++++++
 4 files changed, 18 insertions(+), 2 deletions(-)
 create mode 100644 src/lib/globals.ts

diff --git a/src/lib/components/WelcomeScreen.svelte b/src/lib/components/WelcomeScreen.svelte
index edfa677..c86839e 100644
--- a/src/lib/components/WelcomeScreen.svelte
+++ b/src/lib/components/WelcomeScreen.svelte
@@ -1,12 +1,11 @@
 <script lang="ts">
-    const welcomeScreenFormat = "1"
-
     import IconImport from "~icons/tabler/upload";
     import IconGradient from "~icons/tabler/contrast-2";
     import IconLore from "~icons/tabler/swords";
     import IconCode from "~icons/tabler/code";
     import IconClose from "~icons/tabler/X"
     import { onMount } from "svelte";
+    import { welcomeScreenFormat } from "$lib/globals";
 
     let { visible = $bindable(false) }: { visible: boolean } = $props()
 
diff --git a/src/lib/globals.ts b/src/lib/globals.ts
new file mode 100644
index 0000000..b74b696
--- /dev/null
+++ b/src/lib/globals.ts
@@ -0,0 +1 @@
+export const welcomeScreenFormat = "1";
diff --git a/src/tests/e2e/basic.test.ts b/src/tests/e2e/basic.test.ts
index fd4767e..92d8a75 100644
--- a/src/tests/e2e/basic.test.ts
+++ b/src/tests/e2e/basic.test.ts
@@ -1,7 +1,15 @@
+import { welcomeScreenFormat } from "$lib/globals";
 import { expect, test } from "@playwright/test";
 
 test.beforeEach(async ({ page }) => {
     await page.goto("/");
+    await page.waitForLoadState();
+
+    await page.evaluate((format) => {
+        localStorage.setItem('hasSeenWelcome', format); 
+    }, welcomeScreenFormat);
+
+    await page.reload();
 });
 
 test("home page loads", async ({ page }) => {
diff --git a/src/tests/e2e/modals.test.ts b/src/tests/e2e/modals.test.ts
index bfcb0a4..0afb629 100644
--- a/src/tests/e2e/modals.test.ts
+++ b/src/tests/e2e/modals.test.ts
@@ -1,7 +1,15 @@
+import { welcomeScreenFormat } from "$lib/globals";
 import { test, expect } from "@playwright/test";
 
 test.beforeEach(async ({ page }) => {
     await page.goto("/");
+    await page.waitForLoadState();
+
+    await page.evaluate((format) => {
+        localStorage.setItem('hasSeenWelcome', format); 
+    }, welcomeScreenFormat);
+
+    await page.reload();
 });
 
 test("the font button should work", async ({ page }) => {