MadHouse-Labs/file-uploader
2
0
Fork 0
Code Issues Pull requests Packages Activity Actions

i love web design!

Browse source
This commit is contained in:
cirroskais 2024-05-24 02:01:12 -04:00
parent 428b391f13
commit b1555b7fd7
No known key found for this signature in database
GPG key ID: 5FC73EBF2678E33D
13 changed files with 27 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/app.css
View file

@ -16,3 +16,7 @@ body {
font-weight: 400; font-weight: 400;
font-style: normal; font-style: normal;
} }
* {
@apply transition-colors;
}

4
src/error.html
View file

@ -28,14 +28,14 @@
<div class="flex space-x-2"> <div class="flex space-x-2">
<button on:click="history.back();"> <button on:click="history.back();">
<div <div
class="flex p-2 space-x-2 rounded-lg border-b-2 transition-colors border-neutral-400 hover:border-neutral-500 hover:dark:border-neutral-500 dark:border-neutral-700 bg-neutral-200 dark:bg-neutral-900" class="flex p-2 space-x-2 rounded-lg border-b-2 border-neutral-400 hover:border-neutral-500 hover:dark:border-neutral-500 dark:border-neutral-700 bg-neutral-200 dark:bg-neutral-900"
> >
<p>Go Back</p> <p>Go Back</p>
</div> </div>
</button> </button>
<a <a
href="/" href="/"
class="flex p-2 space-x-2 rounded-lg border-b-2 transition-colors border-neutral-400 hover:border-neutral-500 hover:dark:border-neutral-500 dark:border-neutral-700 bg-neutral-200 dark:bg-neutral-900" class="flex p-2 space-x-2 rounded-lg border-b-2 border-neutral-400 hover:border-neutral-500 hover:dark:border-neutral-500 dark:border-neutral-700 bg-neutral-200 dark:bg-neutral-900"
> >
<p>Go Home</p> <p>Go Home</p>
</a> </a>

5
src/lib/components/Dropdown.svelte
View file

@ -10,10 +10,7 @@
</script> </script>
<div class="flex relative w-fit"> <div class="flex relative w-fit">
<button <button class="my-auto w-min hover:text-overlay2 {visible && 'text-overlay2'}" on:click={toggle}>
class="my-auto w-min transition-colors hover:text-overlay2 {visible && 'text-overlay2'}"
on:click={toggle}
>
<Menu size="20"></Menu> <Menu size="20"></Menu>
</button> </button>
{#if visible} {#if visible}

2
src/lib/components/File.svelte
View file

@ -12,7 +12,7 @@
let percent = 0; let percent = 0;
</script> </script>
<div class="rounded-md bg-mantle"> <div class="rounded-md transition-all bg-mantle">
<div <div
in:fade|global={{ delay: 100 * i }} in:fade|global={{ delay: 100 * i }}
class="flex px-1.5 w-full h-14 rounded-md transition-all" class="flex px-1.5 w-full h-14 rounded-md transition-all"

2
src/lib/components/Footer.svelte
View file

@ -1,3 +1,3 @@
<div <div
class="flex place-content-between px-4 w-full h-full rounded-xl shadow-md transition-colors py-auto bg-crust" class="flex place-content-between px-4 w-full h-full rounded-xl shadow-md py-auto bg-crust"
></div> ></div>

2
src/lib/components/Forms/LoginForm.svelte
View file

@ -49,7 +49,7 @@
<div class="flex justify-center items-center h-full"> <div class="flex justify-center items-center h-full">
<div class="flex flex-col space-y-2"> <div class="flex flex-col space-y-2">
<div class="transition-colors fill-text"> <div class=" fill-text">
<Logo /> <Logo />
</div> </div>
<form on:submit|preventDefault> <form on:submit|preventDefault>

2
src/lib/components/Forms/RegisterForm.svelte
View file

@ -60,7 +60,7 @@
<div class="flex justify-center items-center h-full"> <div class="flex justify-center items-center h-full">
<div class="flex flex-col space-y-2"> <div class="flex flex-col space-y-2">
<div class="transition-colors fill-text"> <div class=" fill-text">
<Logo /> <Logo />
</div> </div>
<form on:submit|preventDefault> <form on:submit|preventDefault>

4
src/lib/components/Header.svelte
View file

@ -9,9 +9,7 @@
import Logo from '$lib/components/Logo.svelte'; import Logo from '$lib/components/Logo.svelte';
</script> </script>
<div <div class="flex place-content-between px-4 w-full h-full rounded-xl shadow-md py-auto bg-crust">
class="flex place-content-between px-4 w-full h-full rounded-xl shadow-md transition-colors py-auto bg-crust"
>
<div class="flex my-auto md:space-x-6"> <div class="flex my-auto md:space-x-6">
<a <a
href="/dashboard" href="/dashboard"

4
src/lib/components/Inputs/Button.svelte
View file

@ -5,13 +5,13 @@
</script> </script>
<button <button
class="group/button {pulse ? 'animate-pulse cursor-wait' : ''} transition-colors" class="group/button {pulse ? 'animate-pulse cursor-wait' : ''} "
type="button" type="button"
on:click={click} on:click={click}
{disabled} {disabled}
> >
<div <div
class="flex p-2 space-x-2 rounded-lg border-b-2 transition-colors hadow-md bg-crust border-overlay2 hover:border-overlay0 group-disabled/button:border-overlay0 group-disabled/button:hover:border-overlay0" class="flex p-2 space-x-2 rounded-lg border-b-2 hadow-md bg-crust border-overlay2 hover:border-overlay0 group-disabled/button:border-overlay0 group-disabled/button:hover:border-overlay0"
> >
<slot /> <slot />
</div> </div>

18
src/lib/components/Inputs/FormInput.svelte
View file

@ -7,12 +7,12 @@
<!-- insane that i have to do this because --> <!-- insane that i have to do this because -->
<!-- 'type' attribute cannot be dynamic if input uses two-way binding --> <!-- 'type' attribute cannot be dynamic if input uses two-way binding -->
{#if type === 'username'} {#if type === 'username'}
<div class="flex p-2 space-x-1 rounded-lg shadow-md transition-colors bg-crust"> <div class="flex p-2 space-x-1 rounded-lg shadow-md bg-crust">
<div class="py-0.5 pr-1 border-r-2 transition-colors border-overlay2"> <div class="py-0.5 pr-1 border-r-2 border-overlay2">
<slot /> <slot />
</div> </div>
<input <input
class="py-0.5 transition-colors bg-crust peer placeholder:text-overlay1" class="py-0.5 bg-crust peer placeholder:text-overlay1"
type="username" type="username"
{name} {name}
{id} {id}
@ -28,12 +28,12 @@
</div> </div>
</div> </div>
{:else if type === 'email'} {:else if type === 'email'}
<div class="flex p-2 space-x-1 rounded-lg shadow-md transition-colors bg-crust"> <div class="flex p-2 space-x-1 rounded-lg shadow-md bg-crust">
<div class="py-0.5 pr-1 border-r-2 transition-colors border-overlay2"> <div class="py-0.5 pr-1 border-r-2 border-overlay2">
<slot /> <slot />
</div> </div>
<input <input
class="py-0.5 transition-colors bg-crust peer placeholder:text-overlay1" class="py-0.5 bg-crust peer placeholder:text-overlay1"
type="email" type="email"
{name} {name}
{id} {id}
@ -49,12 +49,12 @@
</div> </div>
</div> </div>
{:else if type === 'password'} {:else if type === 'password'}
<div class="flex p-2 space-x-1 rounded-lg shadow-md transition-colors bg-crust"> <div class="flex p-2 space-x-1 rounded-lg shadow-md bg-crust">
<div class="py-0.5 pr-1 border-r-2 transition-colors border-overlay2"> <div class="py-0.5 pr-1 border-r-2 border-overlay2">
<slot /> <slot />
</div> </div>
<input <input
class="py-0.5 transition-colors bg-crust peer placeholder:text-overlay1" class="py-0.5 bg-crust peer placeholder:text-overlay1"
type="password" type="password"
{name} {name}
{id} {id}

2
src/lib/components/Inputs/Link.svelte
View file

@ -10,7 +10,7 @@
{:else if style === 'button'} {:else if style === 'button'}
<a <a
{href} {href}
class="flex p-2 space-x-2 rounded-lg border-b-2 transition-colors border-neutral-400 class="flex p-2 space-x-2 rounded-lg border-b-2 border-neutral-400
hover:border-neutral-500 hover:dark:border-neutral-500 dark:border-neutral-700 bg-neutral-200 dark:bg-neutral-900" hover:border-neutral-500 hover:dark:border-neutral-500 dark:border-neutral-700 bg-neutral-200 dark:bg-neutral-900"
> >
<slot /> <slot />

2
src/lib/components/Logo.svelte
View file

@ -2,7 +2,7 @@
viewBox="0 0 1200 628" viewBox="0 0 1200 628"
version="1.1" version="1.1"
id="svg1" id="svg1"
class="transition-colors fill-inherit" class=" fill-inherit"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns: xmlns:
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 291 KiB

After

Width:  |  Height:  |  Size: 291 KiB

8
src/routes/(app)/dashboard/+page.svelte
View file

@ -43,9 +43,7 @@
input.click(); input.click();
}} }}
> >
<div <div class="flex m-auto text-lg text-surface2 group-hover:text-overlay1">
class="flex m-auto text-lg transition-colors text-surface2 group-hover:text-overlay1"
>
<Upload></Upload> <Upload></Upload>
</div> </div>
</button> </button>
@ -56,9 +54,7 @@
running = true; running = true;
}} }}
> >
<div <div class="flex m-auto text-lg text-surface2 group-hover:text-green">
class="flex m-auto text-lg transition-colors text-surface2 group-hover:text-green"
>
<Check class=""></Check> <Check class=""></Check>
</div> </div>
</button> </button>