mirror of
https://github.com/open-webui/open-webui
synced 2024-11-21 15:47:49 +00:00
refac: styling
This commit is contained in:
Timothy J. Baek
parent
dbf14afa32
commit
cfe255bb95
10
src/app.css
10
src/app.css
@ -16,6 +16,12 @@
|
|||||||
font-display: swap;
|
font-display: swap;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: 'InstrumentSerif';
|
||||||
|
src: url('/assets/fonts/InstrumentSerif-Regular.ttf');
|
||||||
|
font-display: swap;
|
||||||
|
}
|
||||||
|
|
||||||
html {
|
html {
|
||||||
word-break: break-word;
|
word-break: break-word;
|
||||||
}
|
}
|
||||||
@ -26,6 +32,10 @@ code {
|
|||||||
width: auto;
|
width: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.font-secondary {
|
||||||
|
font-family: 'InstrumentSerif', sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
math {
|
math {
|
||||||
margin-top: 1rem;
|
margin-top: 1rem;
|
||||||
}
|
}
|
||||||
|
|||||||
39
src/lib/components/common/SlideShow.svelte
Normal file
39
src/lib/components/common/SlideShow.svelte
Normal file
@ -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>
|
||||||
@ -9,6 +9,7 @@
|
|||||||
import { generateInitialsImage, canvasPixelTest } from '$lib/utils';
|
import { generateInitialsImage, canvasPixelTest } from '$lib/utils';
|
||||||
import { page } from '$app/stores';
|
import { page } from '$app/stores';
|
||||||
import { getBackendConfig } from '$lib/apis';
|
import { getBackendConfig } from '$lib/apis';
|
||||||
|
import SlideShow from '$lib/components/common/SlideShow.svelte';
|
||||||
|
|
||||||
const i18n = getContext('i18n');
|
const i18n = getContext('i18n');
|
||||||
|
|
||||||
@ -104,259 +105,248 @@
|
|||||||
</title>
|
</title>
|
||||||
</svelte:head>
|
</svelte:head>
|
||||||
|
|
||||||
{#if loaded}
|
<div class="w-full h-screen max-h-[100dvh] text-white relative">
|
||||||
<div class="fixed m-10 z-50">
|
<div class="w-full h-full absolute top-0 left-0 bg-white dark:bg-black"></div>
|
||||||
<div class="flex space-x-2">
|
|
||||||
<div class=" self-center">
|
<!-- <div
|
||||||
<img
|
class="w-full h-full absolute top-0 left-0 bg-gradient-to-t dark:from-black dark:to-black/60"
|
||||||
crossorigin="anonymous"
|
></div> -->
|
||||||
src="{WEBUI_BASE_URL}/static/favicon.png"
|
|
||||||
class=" w-8 rounded-full"
|
<!-- <div class="w-full h-full absolute top-0 left-0 backdrop-blur-xl bg-black/50"></div> -->
|
||||||
alt="logo"
|
|
||||||
/>
|
{#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>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class=" bg-white dark:bg-gray-950 min-h-screen w-full flex justify-center font-primary">
|
<div
|
||||||
<div class="w-full sm:max-w-md px-10 min-h-screen flex flex-col text-center">
|
class="fixed bg-transparent min-h-screen w-full flex justify-center font-primary z-50 text-black dark:text-white"
|
||||||
{#if ($config?.features.auth_trusted_header ?? false) || $config?.features.auth === false}
|
>
|
||||||
<div class=" my-auto pb-10 w-full">
|
<div class="w-full sm:max-w-md px-10 min-h-screen flex flex-col text-center">
|
||||||
<div
|
{#if ($config?.features.auth_trusted_header ?? false) || $config?.features.auth === false}
|
||||||
class="flex items-center justify-center gap-3 text-xl sm:text-2xl text-center font-semibold dark:text-gray-200"
|
<div class=" my-auto pb-10 w-full">
|
||||||
>
|
<div
|
||||||
<div>
|
class="flex items-center justify-center gap-3 text-xl sm:text-2xl text-center font-semibold dark:text-gray-200"
|
||||||
{$i18n.t('Signing in to {{WEBUI_NAME}}', { WEBUI_NAME: $WEBUI_NAME })}
|
>
|
||||||
</div>
|
<div>
|
||||||
|
{$i18n.t('Signing in to {{WEBUI_NAME}}', { WEBUI_NAME: $WEBUI_NAME })}
|
||||||
|
</div>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<Spinner />
|
<Spinner />
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
{:else}
|
||||||
{:else}
|
<div class=" my-auto pb-10 w-full dark:text-gray-100">
|
||||||
<div class=" my-auto pb-10 w-full dark:text-gray-100">
|
<form
|
||||||
<form
|
class=" flex flex-col justify-center"
|
||||||
class=" flex flex-col justify-center"
|
on:submit|preventDefault={() => {
|
||||||
on:submit|preventDefault={() => {
|
submitHandler();
|
||||||
submitHandler();
|
}}
|
||||||
}}
|
>
|
||||||
>
|
<div class="mb-1">
|
||||||
<div class="mb-1">
|
<div class=" text-2xl font-medium">
|
||||||
<div class=" text-2xl font-medium">
|
{#if mode === 'signin'}
|
||||||
{#if mode === 'signin'}
|
{$i18n.t(`Sign in to {{WEBUI_NAME}}`, { WEBUI_NAME: $WEBUI_NAME })}
|
||||||
{$i18n.t(`Sign in to {{WEBUI_NAME}}`, { WEBUI_NAME: $WEBUI_NAME })}
|
{:else}
|
||||||
{:else}
|
{$i18n.t(`Sign up to {{WEBUI_NAME}}`, { WEBUI_NAME: $WEBUI_NAME })}
|
||||||
{$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}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{#if mode === 'signup'}
|
{#if $config?.features.enable_login_form}
|
||||||
<div class=" mt-1 text-xs font-medium text-gray-500">
|
<div class="flex flex-col mt-4">
|
||||||
ⓘ {$WEBUI_NAME}
|
{#if mode === 'signup'}
|
||||||
{$i18n.t(
|
<div class="mb-2">
|
||||||
'does not make any external connections, and your data stays securely on your locally hosted server.'
|
<div class=" text-sm font-medium text-left mb-1">{$i18n.t('Name')}</div>
|
||||||
)}
|
<input
|
||||||
</div>
|
bind:value={name}
|
||||||
{/if}
|
type="text"
|
||||||
</div>
|
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="mb-2">
|
||||||
<div class="flex flex-col mt-4">
|
<div class=" text-sm font-medium text-left mb-1">{$i18n.t('Email')}</div>
|
||||||
{#if mode === 'signup'}
|
|
||||||
<div>
|
|
||||||
<div class=" text-sm font-medium text-left mb-1">{$i18n.t('Name')}</div>
|
|
||||||
<input
|
<input
|
||||||
bind:value={name}
|
bind:value={email}
|
||||||
type="text"
|
type="email"
|
||||||
class="w-full text-sm outline-none bg-transparent"
|
class="my-0.5 w-full text-sm outline-none bg-transparent"
|
||||||
autocomplete="name"
|
autocomplete="email"
|
||||||
placeholder={$i18n.t('Enter Your Full Name')}
|
placeholder={$i18n.t('Enter Your Email')}
|
||||||
required
|
required
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<hr class=" my-3 dark:border-gray-900" />
|
<div>
|
||||||
{/if}
|
<div class=" text-sm font-medium text-left mb-1">{$i18n.t('Password')}</div>
|
||||||
|
|
||||||
<div class="mb-2">
|
<input
|
||||||
<div class=" text-sm font-medium text-left mb-1">{$i18n.t('Email')}</div>
|
bind:value={password}
|
||||||
<input
|
type="password"
|
||||||
bind:value={email}
|
class="my-0.5 w-full text-sm outline-none bg-transparent"
|
||||||
type="email"
|
placeholder={$i18n.t('Enter Your Password')}
|
||||||
class=" w-full text-sm outline-none bg-transparent"
|
autocomplete="current-password"
|
||||||
autocomplete="email"
|
required
|
||||||
placeholder={$i18n.t('Enter Your Email')}
|
/>
|
||||||
required
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<div class=" text-sm font-medium text-left mb-1">{$i18n.t('Password')}</div>
|
|
||||||
|
|
||||||
<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
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{/if}
|
|
||||||
|
|
||||||
{#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 $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>
|
</div>
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
{#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>
|
||||||
|
|
||||||
|
{#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>
|
||||||
|
{/if}
|
||||||
|
</form>
|
||||||
|
|
||||||
|
{#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}
|
||||||
|
|
||||||
|
<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>
|
||||||
|
|
||||||
|
<span
|
||||||
|
>{$i18n.t('Continue with {{provider}}', {
|
||||||
|
provider: $config?.oauth?.providers?.oidc ?? 'SSO'
|
||||||
|
})}</span
|
||||||
|
>
|
||||||
|
</button>
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
</form>
|
</div>
|
||||||
|
{/if}
|
||||||
{#if Object.keys($config?.oauth?.providers ?? {}).length > 0}
|
</div>
|
||||||
<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>
|
</div>
|
||||||
</div>
|
{/if}
|
||||||
{/if}
|
</div>
|
||||||
|
|
||||||
<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>
|
|
||||||
|
|||||||
BIN
static/assets/fonts/InstrumentSerif-Italic.ttf
Normal file
BIN
static/assets/fonts/InstrumentSerif-Italic.ttf
Normal file
Binary file not shown.
BIN
static/assets/fonts/InstrumentSerif-Regular.ttf
Normal file
BIN
static/assets/fonts/InstrumentSerif-Regular.ttf
Normal file
Binary file not shown.
BIN
static/assets/images/adam.jpg
Normal file
BIN
static/assets/images/adam.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 MiB |
BIN
static/assets/images/earth.jpg
Normal file
BIN
static/assets/images/earth.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 782 KiB |
BIN
static/assets/images/galaxy.jpg
Normal file
BIN
static/assets/images/galaxy.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.8 MiB |
BIN
static/assets/images/space.jpg
Normal file
BIN
static/assets/images/space.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 432 KiB |
Loading…
Reference in New Issue
Block a user