mirror of https://github.com/VERT-sh/VERT.git
Settings page UI
start ui of settings page (no behaviour), small padding tweaks, add "FancyInput" component
This commit is contained in:
JovannMC
parent
1f01c32521
commit
b8aef6b3ed
|
|
@ -0,0 +1,47 @@
|
|||
<script lang="ts">
|
||||
type Props = {
|
||||
class?: string;
|
||||
placeholder?: string;
|
||||
value?: string;
|
||||
disabled?: boolean;
|
||||
extension?: string;
|
||||
prefix?: string;
|
||||
type?: string;
|
||||
};
|
||||
|
||||
let {
|
||||
class: className,
|
||||
placeholder = "",
|
||||
value = $bindable(),
|
||||
disabled = false,
|
||||
extension,
|
||||
prefix,
|
||||
type = "text",
|
||||
}: Props = $props();
|
||||
</script>
|
||||
|
||||
<div class="relative flex w-full {className}">
|
||||
<input
|
||||
{type}
|
||||
bind:value
|
||||
{placeholder}
|
||||
{disabled}
|
||||
class="w-full p-3 rounded-lg bg-panel border-2 border-gray-300
|
||||
{prefix ? 'pl-[2rem]' : 'pl-3'}
|
||||
{extension ? 'pr-[4rem]' : 'pr-3'}"
|
||||
/>
|
||||
{#if prefix}
|
||||
<div class="absolute left-0 top-0 bottom-0 flex items-center px-2">
|
||||
<span class="text-sm text-gray-400 px-2 py-1 rounded"
|
||||
>{prefix}</span
|
||||
>
|
||||
</div>
|
||||
{/if}
|
||||
{#if extension}
|
||||
<div class="absolute right-0 top-0 bottom-0 flex items-center px-4">
|
||||
<span class="text-sm text-black bg-gray-300 px-2 py-1 rounded"
|
||||
>{extension}</span
|
||||
>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
|
@ -40,7 +40,7 @@
|
|||
<h2 class="text-2xl font-bold">
|
||||
<HeartHandshakeIcon
|
||||
size="40"
|
||||
class="inline-block -mt-1 mr-2 bg-blue-300 p-1.5 rounded-full"
|
||||
class="inline-block -mt-1 mr-2 bg-blue-300 p-2 rounded-full"
|
||||
color="black"
|
||||
/>
|
||||
Credits
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
<script lang="ts">
|
||||
import FancyInput from "$lib/components/functional/FancyInput.svelte";
|
||||
import Panel from "$lib/components/visual/Panel.svelte";
|
||||
import {
|
||||
CalendarHeartIcon,
|
||||
|
|
@ -27,7 +28,7 @@
|
|||
<h2 class="text-2xl font-bold">
|
||||
<HeartIcon
|
||||
size="40"
|
||||
class="inline-block -mt-1 mr-2 bg-rose-300 p-1.5 rounded-full"
|
||||
class="inline-block -mt-1 mr-2 bg-rose-300 p-2 rounded-full"
|
||||
color="black"
|
||||
/>
|
||||
Donate to VERT
|
||||
|
|
@ -65,13 +66,16 @@
|
|||
class="btn bg-button text-black dynadark:text-white p-4 rounded-lg flex-1"
|
||||
>$10 USD</button
|
||||
>
|
||||
<div class="relative flex items-center flex-[2]">
|
||||
<!-- <div class="relative flex items-center flex-[2]">
|
||||
<span class="absolute left-3 text-gray-500">$</span>
|
||||
<input
|
||||
type="number"
|
||||
class="pl-8 pr-2 rounded-lg border border-gray-300 dynadark:border-gray-500 w-full h-full bg-button text-black dynadark:text-white"
|
||||
placeholder="Custom"
|
||||
/>
|
||||
</div> -->
|
||||
<div class="flex-[2] flex items-center justify-center">
|
||||
<FancyInput placeholder="Custom" prefix="$" type="number" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
<h2 class="text-2xl font-bold">
|
||||
<LinkIcon
|
||||
size="40"
|
||||
class="inline-block -mt-1 mr-2 bg-violet-400 bg- p-1.5 rounded-full"
|
||||
class="inline-block -mt-1 mr-2 bg-violet-400 bg- p-2 rounded-full"
|
||||
color="black"
|
||||
/>
|
||||
Resources
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
<h2 class="text-2xl font-bold">
|
||||
<MessageCircleQuestionIcon
|
||||
size="40"
|
||||
class="inline-block -mt-1 mr-2 bg-accent p-1.5 rounded-full"
|
||||
class="inline-block -mt-1 mr-2 bg-accent p-2 rounded-full"
|
||||
color="black"
|
||||
/>
|
||||
Why VERT?
|
||||
|
|
|
|||
|
|
@ -0,0 +1,52 @@
|
|||
<script lang="ts">
|
||||
import Panel from "$lib/components/visual/Panel.svelte";
|
||||
import { MoonIcon, RefreshCwIcon, SunIcon } from "lucide-svelte";
|
||||
|
||||
let value = $state("");
|
||||
</script>
|
||||
|
||||
<Panel class="flex flex-col gap-8 p-6">
|
||||
<div class="flex flex-col gap-3">
|
||||
<h2 class="text-2xl font-bold">
|
||||
<RefreshCwIcon
|
||||
size="40"
|
||||
class="inline-block -mt-1 mr-2 bg-violet-400 p-2 rounded-full"
|
||||
color="black"
|
||||
/>
|
||||
Appearance
|
||||
</h2>
|
||||
<div class="flex flex-col gap-8">
|
||||
<div class="flex flex-col gap-4">
|
||||
<div class="flex flex-col gap-2">
|
||||
<p class="text-base font-bold">Brightness theme</p>
|
||||
<p class="text-sm opacity-60 font-normal italic">
|
||||
Want a sunny flash-bang, or a quiet lonely night?
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex flex-col gap-3 w-full">
|
||||
<div class="flex gap-3 w-full">
|
||||
<button
|
||||
class="btn flex-1 p-4 rounded-lg bg-violet-400 text-black flex items-center justify-center"
|
||||
>
|
||||
<SunIcon
|
||||
size="24"
|
||||
class="inline-block mr-2"
|
||||
/>
|
||||
Light
|
||||
</button>
|
||||
|
||||
<button
|
||||
class="btn flex-1 p-4 rounded-lg bg-button text-black dynadark:text-white flex items-center justify-center"
|
||||
>
|
||||
<MoonIcon
|
||||
size="24"
|
||||
class="inline-block mr-2"
|
||||
/>
|
||||
Dark
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Panel>
|
||||
|
|
@ -0,0 +1,67 @@
|
|||
<script lang="ts">
|
||||
import FancyTextInput from "$lib/components/functional/FancyInput.svelte";
|
||||
import Panel from "$lib/components/visual/Panel.svelte";
|
||||
import { RefreshCwIcon, SaveAllIcon } from "lucide-svelte";
|
||||
|
||||
let value = $state("");
|
||||
</script>
|
||||
|
||||
<Panel class="flex flex-col gap-8 p-6">
|
||||
<div class="flex flex-col gap-3">
|
||||
<h2 class="text-2xl font-bold">
|
||||
<RefreshCwIcon
|
||||
size="40"
|
||||
class="inline-block -mt-1 mr-2 bg-accent p-2 rounded-full"
|
||||
color="black"
|
||||
/>
|
||||
Conversion
|
||||
</h2>
|
||||
<div class="flex flex-col gap-8">
|
||||
<div class="flex flex-col gap-4">
|
||||
<div class="flex flex-col gap-2">
|
||||
<p class="text-base font-bold">File name format</p>
|
||||
<p class="text-sm opacity-60 font-normal">
|
||||
This will determine the name of the file on download, <span
|
||||
class="font-bold italic"
|
||||
>not including the file extension.</span
|
||||
>
|
||||
You can put these following templates in the format, which
|
||||
will be replaced with the relevant information:
|
||||
<span class="font-bold">%name%</span>
|
||||
for the original file name,
|
||||
<span class="font-bold">%extension%</span>
|
||||
for the original file extension, and
|
||||
<span class="font-bold">%date%</span>
|
||||
for a date string of when the file was converted.
|
||||
</p>
|
||||
</div>
|
||||
<FancyTextInput
|
||||
placeholder="VERT_%name%"
|
||||
bind:value
|
||||
extension=".ext"
|
||||
type="text"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col gap-4">
|
||||
<div class="flex flex-col gap-2">
|
||||
<p class="text-base font-bold">Second option</p>
|
||||
<p class="text-sm opacity-60 font-normal">
|
||||
This is just a sample option. This should not show up on
|
||||
the live website. JOVANN, DO NOT ADD THIS TO THE LIVE
|
||||
WEBSITE. PLEASE. JOVANN!!!!
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-end">
|
||||
<button
|
||||
class="w-fit btn px-6 py-4 rounded-3xl bg-accent text-black flex items-center justify-center"
|
||||
>
|
||||
<SaveAllIcon size="24" class="inline-block mr-2" />
|
||||
Save
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Panel>
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
export { default as Appearance } from "./Appearance.svelte";
|
||||
export { default as Conversion } from "./Conversion.svelte";
|
||||
|
|
@ -31,7 +31,7 @@
|
|||
The file converter you'll love.
|
||||
</h1>
|
||||
<p
|
||||
class="font-normal px-5 md:p-0 text-lg md:text-xl text-black text-opacity-60 dynadark:text-white dynadark:text-opacity-60"
|
||||
class="font-normal px-5 md:p-0 text-lg md:text-xl text-black opacity-60 dynadark:text-white dynadark:opacity-60"
|
||||
>
|
||||
All processing is done on your device. No file size
|
||||
limit, no ads, and completely open source.
|
||||
|
|
|
|||
|
|
@ -0,0 +1,25 @@
|
|||
<script lang="ts">
|
||||
import * as Settings from "$lib/sections/settings";
|
||||
import { SettingsIcon } from "lucide-svelte";
|
||||
|
||||
</script>
|
||||
|
||||
<div class="flex flex-col h-full items-center">
|
||||
<h1 class="hidden md:block text-[40px] tracking-tight leading-[72px] mb-6">
|
||||
<SettingsIcon size="40" class="inline-block -mt-2 mr-2" />
|
||||
Settings
|
||||
</h1>
|
||||
|
||||
<div
|
||||
class="w-full max-w-[1280px] flex flex-col md:flex-row gap-4 p-4 md:px-4 md:py-0"
|
||||
>
|
||||
<!-- Why VERT? & Credits -->
|
||||
<div class="flex flex-col gap-4 flex-1">
|
||||
<Settings.Conversion />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col gap-4 flex-1">
|
||||
<Settings.Appearance />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
Loading…
Reference in New Issue