EZPPFarm/EZPPLauncher
2
0
Fork 0
Code Issues Pull Requests Projects Releases 17 Activity

add WIP design

Browse Source
This commit is contained in:
HorizonCode
2024-12-10 23:29:28 +01:00
parent 314fb4d19e
commit a271522069
38 changed files with 190 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/app.html
View File

@@ -3,7 +3,6 @@
<head>
<meta charset="utf-8" />
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Tauri + SvelteKit + Typescript App</title>
%sveltekit.head%

BIN
src/assets/background.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.2 MiB

BIN
src/assets/logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 53 KiB

16
src/lib/components/ui/avatar/avatar-fallback.svelte Normal file
View File

@@ -0,0 +1,16 @@
<script lang="ts">
import { Avatar as AvatarPrimitive } from "bits-ui";
import { cn } from "$lib/utils.js";
let {
ref = $bindable(null),
class: className,
...restProps
}: AvatarPrimitive.FallbackProps = $props();
</script>
<AvatarPrimitive.Fallback
bind:ref
class={cn("bg-muted flex h-full w-full items-center justify-center rounded-full", className)}
{...restProps}
/>

16
src/lib/components/ui/avatar/avatar-image.svelte Normal file
View File

@@ -0,0 +1,16 @@
<script lang="ts">
import { Avatar as AvatarPrimitive } from "bits-ui";
import { cn } from "$lib/utils.js";
let {
ref = $bindable(null),
class: className,
...restProps
}: AvatarPrimitive.ImageProps = $props();
</script>
<AvatarPrimitive.Image
bind:ref
class={cn("aspect-square h-full w-full", className)}
{...restProps}
/>

16
src/lib/components/ui/avatar/avatar.svelte Normal file
View File

@@ -0,0 +1,16 @@
<script lang="ts">
import { Avatar as AvatarPrimitive } from "bits-ui";
import { cn } from "$lib/utils.js";
let {
ref = $bindable(null),
class: className,
...restProps
}: AvatarPrimitive.RootProps = $props();
</script>
<AvatarPrimitive.Root
bind:ref
class={cn("relative flex size-10 shrink-0 overflow-hidden rounded-full", className)}
{...restProps}
/>

13
src/lib/components/ui/avatar/index.ts Normal file
View File

@@ -0,0 +1,13 @@
import Root from "./avatar.svelte";
import Image from "./avatar-image.svelte";
import Fallback from "./avatar-fallback.svelte";
export {
Root,
Image,
Fallback,
//
Root as Avatar,
Image as AvatarImage,
Fallback as AvatarFallback,
};

11
src/lib/components/ui/background/background.svelte Normal file
View File

@@ -0,0 +1,11 @@
<script lang="ts">
import background from "../../../../assets/background.gif";
</script>
<div class="absolute w-screen h-screen overflow-hidden pointer-events-none">
<img
src={background}
alt="background"
class="absolute top-0 left-0 w-screen -z-10 pointer-events-none blur opacity-40"
/>
</div>

44
src/lib/components/ui/logo/logo.svelte Normal file
View File

@@ -0,0 +1,44 @@
<script lang="ts">
import ezppLogo from "../../../../assets/logo.png";
</script>
<div class="w-screen pointer-events-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">
<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.4s infinite forwards beat-pulse;
}
.main-logo {
animation: 0.4s infinite forwards beat;
}
}
@keyframes beat {
0%,
100% {
scale: 1;
}
90% {
scale: 1.05;
}
}
@keyframes beat-pulse {
0%,
100% {
scale: 0.9;
opacity: 0;
}
85% {
scale: 1.15;
opacity: 0.25;
}
}
</style>

20
src/lib/components/ui/progressbar/progressbar.svelte Normal file
View File

@@ -0,0 +1,20 @@
<script lang="ts">
let {
loadingText,
progress,
indeterminate,
}: { loadingText: string; progress: number; indeterminate: boolean } =
$props();
</script>
<div
class="relative flex items-center justify-center w-[80vw] h-10 bg-gray-900/70 border rounded overflow-hidden"
>
<div
class="absolute h-full rounded top-0 left-0 bg-pink-600 transition-all"
style="width: {indeterminate
? 100
: Math.min(100, Math.max(0, progress))}%;"
></div>
<p class="text-xs z-10">{loadingText}</p>
</div>

14
src/lib/components/ui/titlebar/titlebar.svelte
View File

@@ -17,22 +17,24 @@
});
</script>
<div data-tauri-drag-region class="titlebar">
<div data-tauri-drag-region class="titlebar z-[9999]">
<!-- <p class="mr-auto ms-2 text-sm">EZPPLauncher</p> -->
<div class="titlebar-button" id="titlebar-minimize">
<Minimize size={14} />
<Minimize size={18} />
</div>
<div class="titlebar-button close" id="titlebar-close">
<Close size={14} />
<Close size={18} />
</div>
</div>
<style lang="scss">
.titlebar {
height: 30px;
background: #040612;
/* background: #040612; */
user-select: none;
display: flex;
justify-content: flex-end;
align-items: center;
position: fixed;
top: 0;
left: 0;
@@ -43,8 +45,8 @@
display: inline-flex;
justify-content: center;
align-items: center;
width: 35px;
height: 25px;
width: 45px;
height: 100%;
user-select: none;
-webkit-user-select: none;
}

2
src/routes/+layout.svelte
View File

@@ -5,6 +5,6 @@
</script>
<Titlebar />
<main class="pt-7">
<main>
{@render children()}
</main>

38
src/routes/+page.svelte
View File

@@ -1,5 +1,39 @@
<script lang="ts">
import Button from "$lib/components/ui/button/button.svelte";
import Background from "@/components/ui/background/background.svelte";
import Button from "@/components/ui/button/button.svelte";
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);
</script>
<Button>Click me!</Button>
<div class="relative h-screen w-screen">
<Background />
<div class="absolute top-2 right-2 py-7">
<Avatar.Root>
<Avatar.AvatarFallback>U</Avatar.AvatarFallback>
<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"
>
<Logo />
<div class="flex flex-row gap-1 items-center">
<Progressbar loadingText="Waiting for launch..." {progress} indeterminate={false} />
<Button
onclick={() => {
console.log(progress);
if (progress >= 100) {
progress = 0;
} else {
progress += 10;
}
}}>Launch</Button
>
</div>
</div>
</div>