From 24ebfebcfd547ba8e797b6597a6f9319dcae0070 Mon Sep 17 00:00:00 2001
From: Wind-Explorer <windexplorer@outlook.com>
Date: Wed, 31 Dec 2025 23:37:13 +0800
Subject: [PATCH] welcome screen UI

---
 src/assets/icons/external-link.svelte | 15 +++++++
 src/routes/welcome/+page.svelte       | 59 +++++++++++++++++++--------
 2 files changed, 58 insertions(+), 16 deletions(-)
 create mode 100644 src/assets/icons/external-link.svelte

diff --git a/src/assets/icons/external-link.svelte b/src/assets/icons/external-link.svelte
new file mode 100644
index 0000000..a46e5c1
--- /dev/null
+++ b/src/assets/icons/external-link.svelte
@@ -0,0 +1,15 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+  class="lucide lucide-external-link-icon lucide-external-link"
+  ><path d="M15 3h6v6" /><path d="M10 14 21 3" /><path
+    d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"
+  /></svg
+>
diff --git a/src/routes/welcome/+page.svelte b/src/routes/welcome/+page.svelte
index 60fe2f0..b33cd08 100644
--- a/src/routes/welcome/+page.svelte
+++ b/src/routes/welcome/+page.svelte
@@ -1,6 +1,8 @@
 <script lang="ts">
   import { invoke } from "@tauri-apps/api/core";
   import { getCurrentWebviewWindow } from "@tauri-apps/api/webviewWindow";
+  import DollPreview from "../app-menu/components/doll-preview.svelte";
+  import ExternalLink from "../../assets/icons/external-link.svelte";
 
   let isContinuing = false;
 
@@ -17,24 +19,49 @@
   };
 </script>
 
-<div class="w-full h-full bg-base-100 flex items-center justify-center p-8">
-  <div class="card w-full max-w-md bg-base-200 shadow-lg">
-    <div class="card-body gap-4">
-      <div class="flex flex-col gap-1">
-        <h1 class="text-2xl font-semibold">Friendolls</h1>
-        <p class="text-base text-base-content/80">
-          Passive social app connecting peers through mouse cursor interactions in the form of desktop pets.
-        </p>
+<div class="size-full relative bg-linear-to-br from-base-100 to-[#b7f2ff77]">
+  <div class="flex flex-row gap-2 justify-between size-full p-6">
+    <div class="flex flex-col justify-between">
+      <div class="flex flex-col gap-2 h-full pt-4">
+        <div class="flex flex-col gap-8 mb-18">
+          <div class="flex flex-col gap-2">
+            <div class="flex flex-row gap-2">
+              <p class="text-xl font-light">meow? nyaaa!!</p>
+            </div>
+            <p class="opacity-70 text-3xl font-bold">
+              a cute passive socialization layer!
+            </p>
+          </div>
+          <div>
+            <button
+              class="btn btn-primary"
+              onclick={handleContinue}
+              disabled={isContinuing}
+            >
+              {#if isContinuing}
+                Loading...
+              {:else}
+                <div class="scale-70">
+                  <ExternalLink />
+                </div>
+                Sign in with browser
+              {/if}
+            </button>
+          </div>
+          <p class="text-xs opacity-50 max-w-60">
+            An account is needed to identify you for connecting with friends.
+          </p>
+        </div>
       </div>
-      <div class="card-actions justify-end pt-2">
-        <button class="btn btn-primary" onclick={handleContinue} disabled={isContinuing}>
-          {#if isContinuing}
-            Loading...
-          {:else}
-            Continue
-          {/if}
-        </button>
+      <div>
+        <p class="uppercase">Pre-release</p>
       </div>
     </div>
   </div>
+  <div class="absolute bottom-6 right-6 flex flex-col gap-1 justify-between">
+    <div></div>
+    <div class="flex flex-col scale-200 origin-bottom-right">
+      <DollPreview bodyColor="b7f2ff" outlineColor="496065" />
+    </div>
+  </div>
 </div>