RomanNum3ral
/
vert
mirror of https://github.com/VERT-sh/VERT.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Site looks better now yay!

This commit is contained in:
Realmy 2024-11-11 21:47:11 +01:00
parent 1f4bad72e9
commit 3bd4697161
8 changed files with 115 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/app.css
View File

@ -7,6 +7,8 @@
@import url(@fontsource/azeret-mono/600.css); @import url(@fontsource/azeret-mono/600.css);
:root { :root {
--accent-bg: hsl(303, 73%, 81%);
--accent-fg: hsl(0, 0, 10%);
--font-body: "Lexend", system-ui, -apple-system, BlinkMacSystemFont, --font-body: "Lexend", system-ui, -apple-system, BlinkMacSystemFont,
"Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans",
"Helvetica Neue", sans-serif; "Helvetica Neue", sans-serif;

31
src/lib/components/visual/Uploader.svelte → src/lib/components/functional/Uploader.svelte
View File

@ -71,24 +71,32 @@
ondragover={() => (dragOver = true)} ondragover={() => (dragOver = true)}
ondragleave={() => (dragOver = false)} ondragleave={() => (dragOver = false)}
class={clsx( class={clsx(
"w-full h-80 max-w-screen-lg flex items-center justify-center cursor-pointer flex-col", "file-uploader",
"w-full h-80 flex items-center justify-center cursor-pointer",
"border-2 border-solid border-foreground-muted-alt rounded-2xl", "border-2 border-solid border-foreground-muted-alt rounded-2xl",
"hover:scale-95 hover:opacity-70 transition-all duration-150 ease-out", "hover:scale-95 hover:opacity-70 transition-all duration-150 ease-out",
{ {
"scale-95 opacity-70": dragOver, "scale-95 opacity-70 blur-xs": dragOver,
}, },
)} )}
class:_drag-over={dragOver}
ondrop={drop} ondrop={drop}
> >
<div <div
class="size-16 rounded-full text-background bg-foreground flex items-center justify-center" class="file-uploader-center flex items-center justify-center flex-col transition-all duration-150 ease-out"
> >
<Upload class="size-8" /> <div
class="size-16 rounded-full text-accent-foreground bg-accent-background flex items-center justify-center"
>
<Upload class="size-8" />
</div>
<h2 class="font-display text-2xl mt-6">
Drop or click to upload files
</h2>
<p class="text-foreground-muted mt-4">
All processing is done on your device. No file or size limit.
</p>
</div> </div>
<h2 class="font-display text-2xl mt-6">Drop or click to upload files</h2>
<p class="text-foreground-muted mt-4">
All processing is done on your device. No file or size limit.
</p>
</button> </button>
<input <input
@ -98,3 +106,10 @@
onchange={addFiles} onchange={addFiles}
multiple multiple
/> />
<style>
.file-uploader:hover .file-uploader-center,
.file-uploader._drag-over .file-uploader-center {
@apply scale-105;
}
</style>

27
src/lib/components/visual/svg/Logo.svelte Normal file
View File

@ -0,0 +1,27 @@
<svg
width="100%"
height="100%"
viewBox="0 0 404 96"
style="
fill-rule: evenodd;
clip-rule: evenodd;
stroke-linejoin: round;
stroke-miterlimit: 2;
"
>
<path
d="M37.166,96l27.291,0l37.303,-96l-27.017,0l-23.726,66.24l-23.588,-66.24l-27.429,0l37.166,96Z"
style="fill-rule: nonzero"
/>
<path
d="M194.057,96l0,-21.669l-58.56,0l0,-16.32l56.64,0l0,-21.668l-56.64,-0l0,-14.674l57.874,-0l0,-21.669l-82.011,-0l0,96l82.697,0Z"
style="fill-rule: nonzero"
/>
<path
d="M209.143,33.463l-0,-33.463l58.697,0c24.686,0 37.029,12.206 37.029,31.68c-0,16.869 -10.286,29.349 -31.132,30.994l33.189,33.326l-34.835,0l-62.948,-62.537Zm71.588,-0.686c0,-6.72 -6.308,-11.52 -15.634,-11.52l-31.817,0l0,23.452l31.817,-0c9.189,-0 15.634,-4.526 15.634,-11.932Zm-71.588,13.692l24.137,49.531l-24.137,0l-0,-49.531Z"
/>
<path
d="M370.971,96l0,-74.194l32.915,-0l-0,-21.806l-89.966,0l0,21.806l32.914,-0l0,74.194l24.137,0Z"
style="fill-rule: nonzero"
/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 955 B

81
src/routes/+layout.svelte
View File

@ -1,11 +1,10 @@
<script lang="ts"> <script lang="ts">
import { onMount } from "svelte";
import "../app.css"; import "../app.css";
import { goto } from "$app/navigation"; import { goto } from "$app/navigation";
import clsx from "clsx"; import { blur, duration } from "$lib/animation";
import { blur, duration, transition } from "$lib/animation";
import { quintOut } from "svelte/easing"; import { quintOut } from "svelte/easing";
import { files } from "$lib/store/index.svelte"; import { files } from "$lib/store/index.svelte";
import Logo from "$lib/components/visual/svg/Logo.svelte";
let { children, data } = $props(); let { children, data } = $props();
let navWidth = $state(1); let navWidth = $state(1);
@ -18,6 +17,7 @@
[files.files.length > 0 [files.files.length > 0
? `Convert ${files.files.length} file${files.files.length > 1 ? "s" : ""}` ? `Convert ${files.files.length} file${files.files.length > 1 ? "s" : ""}`
: `Convert`]: "/convert", : `Convert`]: "/convert",
About: "/about",
}); });
const linkCount = $derived(Object.keys(links).length); const linkCount = $derived(Object.keys(links).length);
@ -26,41 +26,54 @@
); );
</script> </script>
<div class="w-full h-full flex items-center pt-72 flex-col gap-4"> <div class="w-full h-full flex items-center pt-48 flex-col gap-10">
<div <div
bind:clientWidth={navWidth} class="w-full max-w-screen-lg p-1 border-solid border-2 rounded-2xl border-foreground-muted-alt grid"
class="bg-background relative w-full h-16 max-w-screen-lg border-2 p-1 border-solid border-foreground-muted-alt rounded-2xl flex" style="grid-template-columns: auto 1fr"
> >
<div <div
class="absolute pointer-events-none top-1 bg-foreground h-[calc(100%-8px)] rounded-xl" class="px-4 m-1 mr-3 flex items-center bg-accent-background fill-accent-foreground rounded-xl"
style="width: {navWidth / linkCount - 8}px; left: {(navWidth / >
linkCount) * <div class="h-6">
linkIndex + <Logo />
4}px; transition: {duration - 200}ms ease left;" </div>
></div> </div>
{#each Object.entries(links) as [name, link] (link)}
<button <div
class="w-1/2 h-full flex items-center justify-center rounded-xl relative" bind:clientWidth={navWidth}
onclick={() => { class="w-full flex bg-background relative h-16"
const keys = Object.keys(links); >
const currentIndex = keys.findIndex( <div
(key) => links[key] === data.pathname, class="absolute pointer-events-none top-1 bg-foreground h-[calc(100%-8px)] rounded-xl"
); style="width: {navWidth / linkCount - 8}px; left: {(navWidth /
const nextIndex = keys.findIndex( linkCount) *
(key) => links[key] === link, linkIndex +
); 4}px; transition: {duration - 200}ms ease left;"
shouldGoBack = nextIndex < currentIndex; ></div>
console.log({ shouldGoBack }); {#each Object.entries(links) as [name, link] (link)}
goto(link); <button
}} class="w-1/2 h-full flex items-center justify-center rounded-xl relative font-display"
> onclick={() => {
<span class="mix-blend-difference invert"> const keys = Object.keys(links);
{name} const currentIndex = keys.findIndex(
</span> (key) => links[key] === data.pathname,
</button> );
{/each} const nextIndex = keys.findIndex(
(key) => links[key] === link,
);
shouldGoBack = nextIndex < currentIndex;
console.log({ shouldGoBack });
goto(link);
}}
>
<span class="mix-blend-difference invert">
{name}
</span>
</button>
{/each}
</div>
</div> </div>
<div class="w-full grid grid-cols-1 grid-rows-1 relative"> <div class="w-full max-w-screen-lg grid grid-cols-1 grid-rows-1 relative">
{#key data.pathname} {#key data.pathname}
<div class="w-full"> <div class="w-full">
<div <div

2
src/routes/+page.svelte
View File

@ -1,5 +1,5 @@
<script lang="ts"> <script lang="ts">
import Uploader from "$lib/components/visual/Uploader.svelte"; import Uploader from "$lib/components/functional/Uploader.svelte";
import { converters } from "$lib/converters"; import { converters } from "$lib/converters";
import { files } from "$lib/store/index.svelte"; import { files } from "$lib/store/index.svelte";

1
src/routes/about/+page.svelte Normal file
View File

@ -0,0 +1 @@
the???

12
src/routes/convert/+page.svelte
View File

@ -13,14 +13,20 @@
{/if} {/if}
{#each files.files as file, i} {#each files.files as file, i}
<div <div
class="flex items-center w-full max-w-screen-lg border-2 border-solid border-foreground-muted-alt rounded-xl px-4 py-2" class="flex items-center w-full border-2 border-solid border-foreground-muted-alt rounded-xl pl-4 pr-2 py-2"
> >
<div class="flex items-center flex-grow"> <div class="flex items-center flex-grow">
{file.name} {file.name}
</div> </div>
<div class="flex gap-4 flex-shrink-0"> <div class="flex items-center gap-2 flex-shrink-0">
<span>from</span>
<span
class="py-2 px-3 font-display bg-foreground text-background rounded-xl"
>.{file.name.split(".").slice(-1)}</span
>
<span>to</span>
<select <select
class="border-2 border-solid border-foreground-muted-alt rounded-xl px-4 py-2 focus:!outline-none" class="font-display border-2 border-solid border-foreground-muted-alt rounded-xl p-2 focus:!outline-none"
bind:value={files.conversionTypes[i]} bind:value={files.conversionTypes[i]}
> >
{#each converters[0].supportedFormats as conversionType} {#each converters[0].supportedFormats as conversionType}

5
tailwind.config.ts
View File

@ -10,11 +10,16 @@ export default {
foreground: "var(--fg)", foreground: "var(--fg)",
"foreground-muted": "var(--fg-muted)", "foreground-muted": "var(--fg-muted)",
"foreground-muted-alt": "var(--fg-muted-alt)", "foreground-muted-alt": "var(--fg-muted-alt)",
"accent-background": "var(--accent-bg)",
"accent-foreground": "var(--accent-fg)",
}, },
fontFamily: { fontFamily: {
display: "var(--font-display)", display: "var(--font-display)",
body: "var(--font-body)", body: "var(--font-body)",
}, },
blur: {
xs: "2px",
},
}, },
}, },