From 40bdd569e6d84e8226ae1566097d8f4890d38d84 Mon Sep 17 00:00:00 2001
From: HorizonCode <horizoncode88@gmail.com>
Date: Thu, 12 Dec 2024 10:33:15 +0100
Subject: [PATCH] =?UTF-8?q?add=20nice=20animations=20=F0=9F=91=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/routes/+page.svelte | 27 +++++++++++++++++++--------
 1 file changed, 19 insertions(+), 8 deletions(-)

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index f6a3e38..d0ae83c 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -4,10 +4,8 @@
   import Logo from "@/components/ui/logo/logo.svelte";
   import * as Avatar from "@/components/ui/avatar";
   import Progressbar from "@/components/ui/progressbar/progressbar.svelte";
-  import AvatarImage from "@/components/ui/avatar/avatar-image.svelte";
-  import AvatarFallback from "@/components/ui/avatar/avatar-fallback.svelte";
-
   let progress = $state(0);
+  let extended = $state(false);
 </script>
 
 <div class="relative h-screen w-screen">
@@ -18,12 +16,23 @@
       <Avatar.AvatarImage src="https://a.ez-pp.farm/1001"></Avatar.AvatarImage>
     </Avatar.Root>
   </div>
+
   <div
-    class="absolute top-0 left-0 py-7 w-full h-screen flex flex-col gap-16 items-center justify-end"
+    class="absolute top-0 left-0 py-3 w-full h-screen flex flex-col gap-16 items-center justify-end overflow-hidden"
   >
-    <Logo />
-    <div class="flex flex-row gap-1 items-center">
-      <Progressbar loadingText="Waiting for launch..." {progress} indeterminate={false} />
+    <!-- svelte-ignore a11y_no_static_element_interactions -->
+    <!-- svelte-ignore a11y_click_events_have_key_events -->
+    <Logo {extended} onclick={() => (extended = !extended)} />
+    <div
+      class="{extended
+        ? 'opacity-100 translate-y-0'
+        : 'opacity-0 translate-y-1'} flex flex-row gap-1 items-center transition-all select-none"
+    >
+      <Progressbar
+        loadingText="Waiting for launch..."
+        {progress}
+        indeterminate={false}
+      />
       <Button
         onclick={() => {
           console.log(progress);
@@ -32,8 +41,10 @@
           } else {
             progress += 10;
           }
-        }}>Launch</Button
+        }}
       >
+        Launch
+      </Button>
     </div>
   </div>
 </div>