src-tauri/capabilities/default.json

@@ -9,7 +9,6 @@
     "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-10"
+    class="absolute top-0 left-0 w-screen -z-10 pointer-events-none blur opacity-40"
   />
 </div>

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

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

src/routes/+page.svelte

@@ -4,8 +4,10 @@
   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">
@@ -16,23 +18,12 @@
       <Avatar.AvatarImage src="https://a.ez-pp.farm/1001"></Avatar.AvatarImage>
     </Avatar.Root>
   </div>
-
   <div
-    class="absolute top-0 left-0 py-3 w-full h-screen flex flex-col gap-16 items-center justify-end overflow-hidden"
+    class="absolute top-0 left-0 py-7 w-full h-screen flex flex-col gap-16 items-center justify-end"
   >
-    <!-- svelte-ignore a11y_no_static_element_interactions -->
+    <Logo />
-    <!-- svelte-ignore a11y_click_events_have_key_events -->
+    <div class="flex flex-row gap-1 items-center">
-    <Logo {extended} onclick={() => (extended = !extended)} />
+      <Progressbar loadingText="Waiting for launch..." {progress} indeterminate={false} />
-    <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);
@@ -41,10 +32,8 @@
           } else {
             progress += 10;
           }
-        }}
+        }}>Launch</Button
       >
-        Launch
-      </Button>
     </div>
   </div>
 </div>