Settings page UI

start ui of settings page (no behaviour), small padding tweaks, add "FancyInput" component

src/lib/components/functional/FancyInput.svelte

@@ -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>

src/lib/sections/about/Credits.svelte

@@ -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

src/lib/sections/about/Donate.svelte

@@ -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>

src/lib/sections/about/Resources.svelte

@@ -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

src/lib/sections/about/Why.svelte

@@ -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?

src/lib/sections/settings/Appearance.svelte

@@ -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>

src/lib/sections/settings/Conversion.svelte

@@ -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>

src/lib/sections/settings/index.ts

@@ -0,0 +1,2 @@
+export { default as Appearance } from "./Appearance.svelte";
+export { default as Conversion } from "./Conversion.svelte";

src/routes/+page.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.

src/routes/settings/+page.svelte

@@ -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>