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,259 +105,248 @@
 	</title>
 </svelte:head>
 
-{#if loaded}
-	<div class="fixed m-10 z-50">
-		<div class="flex space-x-2">
-			<div class=" self-center">
-				<img
-					crossorigin="anonymous"
-					src="{WEBUI_BASE_URL}/static/favicon.png"
-					class=" w-8 rounded-full"
-					alt="logo"
-				/>
+<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">
+				<div class=" self-center">
+					<img
+						crossorigin="anonymous"
+						src="{WEBUI_BASE_URL}/static/favicon.png"
+						class=" w-6 rounded-full"
+						alt="logo"
+					/>
+				</div>
 			</div>
 		</div>
-	</div>
 
-	<div class=" bg-white dark:bg-gray-950 min-h-screen w-full flex justify-center font-primary">
-		<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">
-					<div
-						class="flex items-center justify-center gap-3 text-xl sm:text-2xl text-center font-semibold dark:text-gray-200"
-					>
-						<div>
-							{$i18n.t('Signing in to {{WEBUI_NAME}}', { WEBUI_NAME: $WEBUI_NAME })}
-						</div>
+		<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">
+						<div
+							class="flex items-center justify-center gap-3 text-xl sm:text-2xl text-center font-semibold dark:text-gray-200"
+						>
+							<div>
+								{$i18n.t('Signing in to {{WEBUI_NAME}}', { WEBUI_NAME: $WEBUI_NAME })}
+							</div>
 
-						<div>
-							<Spinner />
+							<div>
+								<Spinner />
+							</div>
 						</div>
 					</div>
-				</div>
-			{:else}
-				<div class="  my-auto pb-10 w-full dark:text-gray-100">
-					<form
-						class=" flex flex-col justify-center"
-						on:submit|preventDefault={() => {
-							submitHandler();
-						}}
-					>
-						<div class="mb-1">
-							<div class=" text-2xl font-medium">
-								{#if mode === 'signin'}
-									{$i18n.t(`Sign in to {{WEBUI_NAME}}`, { WEBUI_NAME: $WEBUI_NAME })}
-								{:else}
-									{$i18n.t(`Sign up to {{WEBUI_NAME}}`, { WEBUI_NAME: $WEBUI_NAME })}
+				{:else}
+					<div class="  my-auto pb-10 w-full dark:text-gray-100">
+						<form
+							class=" flex flex-col justify-center"
+							on:submit|preventDefault={() => {
+								submitHandler();
+							}}
+						>
+							<div class="mb-1">
+								<div class=" text-2xl font-medium">
+									{#if mode === 'signin'}
+										{$i18n.t(`Sign in to {{WEBUI_NAME}}`, { WEBUI_NAME: $WEBUI_NAME })}
+									{:else}
+										{$i18n.t(`Sign up to {{WEBUI_NAME}}`, { WEBUI_NAME: $WEBUI_NAME })}
+									{/if}
+								</div>
+
+								{#if mode === 'signup'}
+									<div class=" mt-1 text-xs font-medium text-gray-500">
+										ⓘ {$WEBUI_NAME}
+										{$i18n.t(
+											'does not make any external connections, and your data stays securely on your locally hosted server.'
+										)}
+									</div>
 								{/if}
 							</div>
 
-							{#if mode === 'signup'}
-								<div class=" mt-1 text-xs font-medium text-gray-500">
-									ⓘ {$WEBUI_NAME}
-									{$i18n.t(
-										'does not make any external connections, and your data stays securely on your locally hosted server.'
-									)}
-								</div>
-							{/if}
-						</div>
+							{#if $config?.features.enable_login_form}
+								<div class="flex flex-col mt-4">
+									{#if mode === 'signup'}
+										<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="my-0.5 w-full text-sm outline-none bg-transparent"
+												autocomplete="name"
+												placeholder={$i18n.t('Enter Your Full Name')}
+												required
+											/>
+										</div>
+									{/if}
 
-						{#if $config?.features.enable_login_form}
-							<div class="flex flex-col mt-4">
-								{#if mode === 'signup'}
-									<div>
-										<div class=" text-sm font-medium text-left mb-1">{$i18n.t('Name')}</div>
+									<div class="mb-2">
+										<div class=" text-sm font-medium text-left mb-1">{$i18n.t('Email')}</div>
 										<input
-											bind:value={name}
-											type="text"
-											class="w-full text-sm outline-none bg-transparent"
-											autocomplete="name"
-											placeholder={$i18n.t('Enter Your Full Name')}
+											bind:value={email}
+											type="email"
+											class="my-0.5 w-full text-sm outline-none bg-transparent"
+											autocomplete="email"
+											placeholder={$i18n.t('Enter Your Email')}
 											required
 										/>
 									</div>
 
-									<hr class=" my-3 dark:border-gray-900" />
-								{/if}
+									<div>
+										<div class=" text-sm font-medium text-left mb-1">{$i18n.t('Password')}</div>
 
-								<div class="mb-2">
-									<div class=" text-sm font-medium text-left mb-1">{$i18n.t('Email')}</div>
-									<input
-										bind:value={email}
-										type="email"
-										class=" w-full text-sm outline-none bg-transparent"
-										autocomplete="email"
-										placeholder={$i18n.t('Enter Your Email')}
-										required
-									/>
+										<input
+											bind:value={password}
+											type="password"
+											class="my-0.5 w-full text-sm outline-none bg-transparent"
+											placeholder={$i18n.t('Enter Your Password')}
+											autocomplete="current-password"
+											required
+										/>
+									</div>
 								</div>
+							{/if}
 
-								<div>
-									<div class=" text-sm font-medium text-left mb-1">{$i18n.t('Password')}</div>
+							{#if $config?.features.enable_login_form}
+								<div class="mt-5">
+									<button
+										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')}
+									</button>
 
-									<input
-										bind:value={password}
-										type="password"
-										class="w-full text-sm outline-none bg-transparent"
-										placeholder={$i18n.t('Enter Your Password')}
-										autocomplete="current-password"
-										required
-									/>
+									{#if $config?.features.enable_signup}
+										<div class=" mt-4 text-sm text-center">
+											{mode === 'signin'
+												? $i18n.t("Don't have an account?")
+												: $i18n.t('Already have an account?')}
+
+											<button
+												class=" font-medium underline"
+												type="button"
+												on:click={() => {
+													if (mode === 'signin') {
+														mode = 'signup';
+													} else {
+														mode = 'signin';
+													}
+												}}
+											>
+												{mode === 'signin' ? $i18n.t('Sign up') : $i18n.t('Sign in')}
+											</button>
+										</div>
+									{/if}
 								</div>
-							</div>
-						{/if}
+							{/if}
+						</form>
 
-						{#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"
-									type="submit"
-								>
-									{mode === 'signin' ? $i18n.t('Sign in') : $i18n.t('Create Account')}
-								</button>
+						{#if Object.keys($config?.oauth?.providers ?? {}).length > 0}
+							<div class="inline-flex items-center justify-center w-full">
+								<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="px-3 text-sm font-medium text-gray-900 dark:text-white bg-transparent"
+										>{$i18n.t('or')}</span
+									>
+								{/if}
 
-								{#if $config?.features.enable_signup}
-									<div class=" mt-4 text-sm text-center">
-										{mode === 'signin'
-											? $i18n.t("Don't have an account?")
-											: $i18n.t('Already have an account?')}
+								<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}
+									<button
+										class="flex items-center px-6 border-2 dark:border-gray-800 duration-300 dark:bg-gray-900 hover:bg-gray-100 dark:hover:bg-gray-800 w-full rounded-2xl dark:text-white text-sm py-3 transition"
+										on:click={() => {
+											window.location.href = `${WEBUI_BASE_URL}/oauth/google/login`;
+										}}
+									>
+										<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" class="size-6 mr-3">
+											<path
+												fill="#EA4335"
+												d="M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z"
+											/><path
+												fill="#4285F4"
+												d="M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z"
+											/><path
+												fill="#FBBC05"
+												d="M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z"
+											/><path
+												fill="#34A853"
+												d="M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z"
+											/><path fill="none" d="M0 0h48v48H0z" />
+										</svg>
+										<span>{$i18n.t('Continue with {{provider}}', { provider: 'Google' })}</span>
+									</button>
+								{/if}
+								{#if $config?.oauth?.providers?.microsoft}
+									<button
+										class="flex items-center px-6 border-2 dark:border-gray-800 duration-300 dark:bg-gray-900 hover:bg-gray-100 dark:hover:bg-gray-800 w-full rounded-2xl dark:text-white text-sm py-3 transition"
+										on:click={() => {
+											window.location.href = `${WEBUI_BASE_URL}/oauth/microsoft/login`;
+										}}
+									>
+										<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 21 21" class="size-6 mr-3">
+											<rect x="1" y="1" width="9" height="9" fill="#f25022" /><rect
+												x="1"
+												y="11"
+												width="9"
+												height="9"
+												fill="#00a4ef"
+											/><rect x="11" y="1" width="9" height="9" fill="#7fba00" /><rect
+												x="11"
+												y="11"
+												width="9"
+												height="9"
+												fill="#ffb900"
+											/>
+										</svg>
+										<span>{$i18n.t('Continue with {{provider}}', { provider: 'Microsoft' })}</span>
+									</button>
+								{/if}
+								{#if $config?.oauth?.providers?.oidc}
+									<button
+										class="flex items-center px-6 border-2 dark:border-gray-800 duration-300 dark:bg-gray-900 hover:bg-gray-100 dark:hover:bg-gray-800 w-full rounded-2xl dark:text-white text-sm py-3 transition"
+										on:click={() => {
+											window.location.href = `${WEBUI_BASE_URL}/oauth/oidc/login`;
+										}}
+									>
+										<svg
+											xmlns="http://www.w3.org/2000/svg"
+											fill="none"
+											viewBox="0 0 24 24"
+											stroke-width="1.5"
+											stroke="currentColor"
+											class="size-6 mr-3"
+										>
+											<path
+												stroke-linecap="round"
+												stroke-linejoin="round"
+												d="M15.75 5.25a3 3 0 0 1 3 3m3 0a6 6 0 0 1-7.029 5.912c-.563-.097-1.159.026-1.563.43L10.5 17.25H8.25v2.25H6v2.25H2.25v-2.818c0-.597.237-1.17.659-1.591l6.499-6.499c.404-.404.527-1 .43-1.563A6 6 0 1 1 21.75 8.25Z"
+											/>
+										</svg>
 
-										<button
-											class=" font-medium underline"
-											type="button"
-											on:click={() => {
-												if (mode === 'signin') {
-													mode = 'signup';
-												} else {
-													mode = 'signin';
-												}
-											}}
+										<span
+											>{$i18n.t('Continue with {{provider}}', {
+												provider: $config?.oauth?.providers?.oidc ?? 'SSO'
+											})}</span
 										>
-											{mode === 'signin' ? $i18n.t('Sign up') : $i18n.t('Sign in')}
-										</button>
-									</div>
+									</button>
 								{/if}
 							</div>
 						{/if}
-					</form>
-
-					{#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" />
-							{#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"
-									>{$i18n.t('or')}</span
-								>
-							{/if}
-						</div>
-						<div class="flex flex-col space-y-2">
-							{#if $config?.oauth?.providers?.google}
-								<button
-									class="flex items-center px-6 border-2 dark:border-gray-800 duration-300 dark:bg-gray-900 hover:bg-gray-100 dark:hover:bg-gray-800 w-full rounded-2xl dark:text-white text-sm py-3 transition"
-									on:click={() => {
-										window.location.href = `${WEBUI_BASE_URL}/oauth/google/login`;
-									}}
-								>
-									<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" class="size-6 mr-3">
-										<path
-											fill="#EA4335"
-											d="M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z"
-										/><path
-											fill="#4285F4"
-											d="M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z"
-										/><path
-											fill="#FBBC05"
-											d="M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z"
-										/><path
-											fill="#34A853"
-											d="M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z"
-										/><path fill="none" d="M0 0h48v48H0z" />
-									</svg>
-									<span>{$i18n.t('Continue with {{provider}}', { provider: 'Google' })}</span>
-								</button>
-							{/if}
-							{#if $config?.oauth?.providers?.microsoft}
-								<button
-									class="flex items-center px-6 border-2 dark:border-gray-800 duration-300 dark:bg-gray-900 hover:bg-gray-100 dark:hover:bg-gray-800 w-full rounded-2xl dark:text-white text-sm py-3 transition"
-									on:click={() => {
-										window.location.href = `${WEBUI_BASE_URL}/oauth/microsoft/login`;
-									}}
-								>
-									<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 21 21" class="size-6 mr-3">
-										<rect x="1" y="1" width="9" height="9" fill="#f25022" /><rect
-											x="1"
-											y="11"
-											width="9"
-											height="9"
-											fill="#00a4ef"
-										/><rect x="11" y="1" width="9" height="9" fill="#7fba00" /><rect
-											x="11"
-											y="11"
-											width="9"
-											height="9"
-											fill="#ffb900"
-										/>
-									</svg>
-									<span>{$i18n.t('Continue with {{provider}}', { provider: 'Microsoft' })}</span>
-								</button>
-							{/if}
-							{#if $config?.oauth?.providers?.oidc}
-								<button
-									class="flex items-center px-6 border-2 dark:border-gray-800 duration-300 dark:bg-gray-900 hover:bg-gray-100 dark:hover:bg-gray-800 w-full rounded-2xl dark:text-white text-sm py-3 transition"
-									on:click={() => {
-										window.location.href = `${WEBUI_BASE_URL}/oauth/oidc/login`;
-									}}
-								>
-									<svg
-										xmlns="http://www.w3.org/2000/svg"
-										fill="none"
-										viewBox="0 0 24 24"
-										stroke-width="1.5"
-										stroke="currentColor"
-										class="size-6 mr-3"
-									>
-										<path
-											stroke-linecap="round"
-											stroke-linejoin="round"
-											d="M15.75 5.25a3 3 0 0 1 3 3m3 0a6 6 0 0 1-7.029 5.912c-.563-.097-1.159.026-1.563.43L10.5 17.25H8.25v2.25H6v2.25H2.25v-2.818c0-.597.237-1.17.659-1.591l6.499-6.499c.404-.404.527-1 .43-1.563A6 6 0 1 1 21.75 8.25Z"
-										/>
-									</svg>
-
-									<span
-										>{$i18n.t('Continue with {{provider}}', {
-											provider: $config?.oauth?.providers?.oidc ?? 'SSO'
-										})}</span
-									>
-								</button>
-							{/if}
-						</div>
-					{/if}
-				</div>
-			{/if}
+					</div>
+				{/if}
+			</div>
 		</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>
+	{/if}
+</div>