refac: styling

src/app.css

@@ -16,6 +16,12 @@
 	font-display: swap;
 }
 
+@font-face {
+	font-family: 'InstrumentSerif';
+	src: url('/assets/fonts/InstrumentSerif-Regular.ttf');
+	font-display: swap;
+}
+
 html {
 	word-break: break-word;
 }
@@ -26,6 +32,10 @@ code {
 	width: auto;
 }
 
+.font-secondary {
+	font-family: 'InstrumentSerif', sans-serif;
+}
+
 math {
 	margin-top: 1rem;
 }

src/lib/components/common/SlideShow.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+
+	export let imageUrls = [
+		'/assets/images/adam.jpg',
+		'/assets/images/galaxy.jpg',
+		'/assets/images/earth.jpg',
+		'/assets/images/space.jpg'
+	];
+	export let duration = 5000;
+	let selectedImageIdx = 0;
+
+	onMount(() => {
+		setInterval(() => {
+			selectedImageIdx = (selectedImageIdx + 1) % 5;
+		}, duration);
+	});
+</script>
+
+{#each imageUrls as imageUrl, idx (idx)}
+	<div
+		class="image w-full h-full absolute top-0 left-0 bg-cover bg-center transition-opacity duration-1000"
+		style="opacity: {selectedImageIdx === idx ? 1 : 0}; background-image: url('{imageUrl}')"
+	></div>
+{/each}
+
+<style>
+	.image {
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		background-size: cover;
+		background-position: center; /* Center the background images */
+		transition: opacity 1s ease-in-out; /* Smooth fade effect */
+		opacity: 0; /* Make images initially not visible */
+	}
+</style>

src/routes/auth/+page.svelte

@@ -9,6 +9,7 @@
 	import { generateInitialsImage, canvasPixelTest } from '$lib/utils';
 	import { page } from '$app/stores';
 	import { getBackendConfig } from '$lib/apis';
+	import SlideShow from '$lib/components/common/SlideShow.svelte';
 
 	const i18n = getContext('i18n');
 
@@ -104,6 +105,15 @@
 	</title>
 </svelte:head>
 
+<div class="w-full h-screen max-h-[100dvh] text-white relative">
+	<div class="w-full h-full absolute top-0 left-0 bg-white dark:bg-black"></div>
+
+	<!-- <div
+		class="w-full h-full absolute top-0 left-0 bg-gradient-to-t dark:from-black dark:to-black/60"
+	></div> -->
+
+	<!-- <div class="w-full h-full absolute top-0 left-0 backdrop-blur-xl bg-black/50"></div> -->
+
 	{#if loaded}
 		<div class="fixed m-10 z-50">
 			<div class="flex space-x-2">
@@ -111,14 +121,16 @@
 					<img
 						crossorigin="anonymous"
 						src="{WEBUI_BASE_URL}/static/favicon.png"
-					class=" w-8 rounded-full"
+						class=" w-6 rounded-full"
 						alt="logo"
 					/>
 				</div>
 			</div>
 		</div>
 
-	<div class=" bg-white dark:bg-gray-950 min-h-screen w-full flex justify-center font-primary">
+		<div
+			class="fixed bg-transparent min-h-screen w-full flex justify-center font-primary z-50 text-black dark:text-white"
+		>
 			<div class="w-full sm:max-w-md px-10 min-h-screen flex flex-col text-center">
 				{#if ($config?.features.auth_trusted_header ?? false) || $config?.features.auth === false}
 					<div class=" my-auto pb-10 w-full">
@@ -164,19 +176,17 @@
 							{#if $config?.features.enable_login_form}
 								<div class="flex flex-col mt-4">
 									{#if mode === 'signup'}
-									<div>
+										<div class="mb-2">
 											<div class=" text-sm font-medium text-left mb-1">{$i18n.t('Name')}</div>
 											<input
 												bind:value={name}
 												type="text"
-											class="w-full text-sm outline-none bg-transparent"
+												class="my-0.5 w-full text-sm outline-none bg-transparent"
 												autocomplete="name"
 												placeholder={$i18n.t('Enter Your Full Name')}
 												required
 											/>
 										</div>
-
-									<hr class=" my-3 dark:border-gray-900" />
 									{/if}
 
 									<div class="mb-2">
@@ -184,7 +194,7 @@
 										<input
 											bind:value={email}
 											type="email"
-										class=" w-full text-sm outline-none bg-transparent"
+											class="my-0.5 w-full text-sm outline-none bg-transparent"
 											autocomplete="email"
 											placeholder={$i18n.t('Enter Your Email')}
 											required
@@ -197,7 +207,7 @@
 										<input
 											bind:value={password}
 											type="password"
-										class="w-full text-sm outline-none bg-transparent"
+											class="my-0.5 w-full text-sm outline-none bg-transparent"
 											placeholder={$i18n.t('Enter Your Password')}
 											autocomplete="current-password"
 											required
@@ -209,7 +219,7 @@
 							{#if $config?.features.enable_login_form}
 								<div class="mt-5">
 									<button
-									class=" bg-gray-900 hover:bg-gray-800 w-full rounded-2xl text-white font-medium text-sm py-2.5 transition"
+										class="bg-gray-700/5 hover:bg-gray-700/10 dark:bg-gray-100/5 dark:hover:bg-gray-100/10 dark:text-gray-300 dark:hover:text-white transition w-full rounded-full font-medium text-sm py-2.5"
 										type="submit"
 									>
 										{mode === 'signin' ? $i18n.t('Sign in') : $i18n.t('Create Account')}
@@ -242,13 +252,15 @@
 
 						{#if Object.keys($config?.oauth?.providers ?? {}).length > 0}
 							<div class="inline-flex items-center justify-center w-full">
-							<hr class="w-64 h-px my-8 bg-gray-200 border-0 dark:bg-gray-700" />
+								<hr class="w-32 h-px my-4 border-0 dark:bg-gray-100/10 bg-gray-700/10" />
 								{#if $config?.features.enable_login_form}
 									<span
-									class="absolute px-3 font-medium text-gray-900 -translate-x-1/2 bg-white left-1/2 dark:text-white dark:bg-gray-950"
+										class="px-3 text-sm font-medium text-gray-900 dark:text-white bg-transparent"
 										>{$i18n.t('or')}</span
 									>
 								{/if}
+
+								<hr class="w-32 h-px my-4 border-0 dark:bg-gray-100/10 bg-gray-700/10" />
 							</div>
 							<div class="flex flex-col space-y-2">
 								{#if $config?.oauth?.providers?.google}
@@ -337,26 +349,4 @@
 			</div>
 		</div>
 	{/if}
-
-<style>
-	.font-mona {
-		font-family:
-			'Mona Sans',
-			-apple-system,
-			'Inter',
-			ui-sans-serif,
-			system-ui,
-			'Segoe UI',
-			Roboto,
-			Ubuntu,
-			Cantarell,
-			'Noto Sans',
-			sans-serif,
-			'Helvetica Neue',
-			Arial,
-			'Apple Color Emoji',
-			'Segoe UI Emoji',
-			'Segoe UI Symbol',
-			'Noto Color Emoji';
-	}
-</style>
+</div>