fix permissions

src-tauri/capabilities/default.json

@@ -9,6 +9,7 @@
     "core:default",
     "shell:allow-open",
     "shell:default",
+    "shell:allow-execute",
     "dialog:default",
     "core:window:allow-start-dragging",
     "core:window:allow-minimize",

src/lib/components/ui/background/background.svelte

@@ -6,6 +6,6 @@
   <img
     src={background}
     alt="background"
-    class="absolute top-0 left-0 w-screen -z-10 pointer-events-none blur opacity-40"
+    class="absolute top-0 left-0 w-screen -z-10 pointer-events-none blur opacity-10"
   />
 </div>

src/lib/components/ui/logo/logo.svelte

@@ -1,44 +1,56 @@
 <script lang="ts">
   import ezppLogo from "../../../../assets/logo.png";
+
+  type logoProps = {
+    extended: boolean;
+    onclick: () => void;
+  };
+
+  let { extended, onclick }: logoProps = $props();
 </script>
 
-<div class="w-screen pointer-events-none">
+<div
+  class="w-screen {extended
+    ? '-translate-y-2 scale-90'
+    : 'translate-y-5 scale-125'} transition-transform select-none"
+>
   <!-- svelte-ignore a11y_click_events_have_key_events -->
   <!-- svelte-ignore a11y_no_static_element_interactions -->
-  <div class="logo-animation relative w-44 h-44 mx-auto">
+  <div class="logo-animation relative w-44 h-44 mx-auto cursor-pointer" {onclick}>
-    <img class="absolute main-logo" src={ezppLogo} alt="logo" />
     <img class="absolute pulse-logo" src={ezppLogo} alt="logo-pulse" />
+    <img class="absolute main-logo" src={ezppLogo} alt="logo" />
   </div>
 </div>
 
 <style lang="scss">
   .logo-animation {
     .pulse-logo {
-      animation: 0.4s infinite forwards beat-pulse;
+      animation: 0.5s 0.2s infinite forwards beat-pulse;
     }
     .main-logo {
-      animation: 0.4s infinite forwards beat;
+      animation: 0.5s infinite forwards beat;
     }
   }
 
   @keyframes beat {
     0%,
     100% {
-      scale: 1;
+      scale: 1.08;
     }
     90% {
-      scale: 1.05;
+      scale: 1;
     }
   }
   @keyframes beat-pulse {
-    0%,
+    0% {
-    100% {
+      scale: 0.5;
-      scale: 0.9;
+      opacity: 0.5;
-      opacity: 0;
+      filter: blur(0px);
     }
-    85% {
+    100% {
-      scale: 1.15;
+      scale: 1.4;
-      opacity: 0.25;
+      opacity: 0;
+      filter: blur(2px);
     }
   }
 </style>

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 />
+    <!-- svelte-ignore a11y_no_static_element_interactions -->
-    <div class="flex flex-row gap-1 items-center">
+    <!-- svelte-ignore a11y_click_events_have_key_events -->
-      <Progressbar loadingText="Waiting for launch..." {progress} indeterminate={false} />
+    <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>