UniqAI/open-webui
1
0
Fork 0
mirror of https://github.com/open-webui/open-webui synced 2025-01-18 08:40:58 +00:00
Code Issues Actions 5 Packages Projects Releases Wiki Activity

refac: styling

Browse Source
This commit is contained in:
Timothy J. Baek 2024-11-03 03:04:35 -08:00
parent 194b924a96
commit d3ac439000
1 changed files with 21 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
src/lib/components/OnBoarding.svelte
View File

@ -2,6 +2,8 @@
import { getContext } from 'svelte'; import { getContext } from 'svelte';
const i18n = getContext('i18n'); const i18n = getContext('i18n');
import { WEBUI_BASE_URL } from '$lib/constants';
import Marquee from './common/Marquee.svelte'; import Marquee from './common/Marquee.svelte';
import SlideShow from './common/SlideShow.svelte'; import SlideShow from './common/SlideShow.svelte';
import ArrowRightCircle from './icons/ArrowRightCircle.svelte'; import ArrowRightCircle from './icons/ArrowRightCircle.svelte';
@ -12,16 +14,29 @@
{#if show} {#if show}
<div class="w-full h-screen max-h-[100dvh] text-white relative"> <div class="w-full h-screen max-h-[100dvh] text-white relative">
<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>
<SlideShow duration={5000} /> <SlideShow duration={5000} />
<div <div
class="w-full h-full absolute top-0 left-0 bg-gradient-to-t dark:from-black dark:to-black/60" class="w-full h-full absolute top-0 left-0 bg-gradient-to-t from-20% from-black to-transparent"
></div> ></div>
<div class="w-full h-full absolute top-0 left-0 backdrop-blur-xl"></div> <div class="w-full h-full absolute top-0 left-0 backdrop-blur-sm bg-black/50"></div>
<div class="relative bg-transparent w-full min-h-screen flex z-10"> <div class="relative bg-transparent w-full min-h-screen flex z-10">
<div class="flex flex-col justify-center w-full items-center pb-10 text-center"> <div class="flex flex-col justify-end w-full items-center pb-10 text-center">
<div class="text-5xl lg:text-7xl font-secondary"> <div class="text-5xl lg:text-7xl font-secondary">
<Marquee <Marquee
duration={5000} duration={5000}
@ -41,10 +56,8 @@
<div class="mt-0.5">{$i18n.t(`wherever you are`)}</div> <div class="mt-0.5">{$i18n.t(`wherever you are`)}</div>
</div> </div>
</div>
<div class="absolute bottom-12 left-0 right-0 w-full"> <div class="flex justify-center mt-8">
<div class="flex justify-center">
<div class="flex flex-col justify-center items-center"> <div class="flex flex-col justify-center items-center">
<button <button
class="relative z-20 flex p-1 rounded-full bg-white/5 hover:bg-white/10 transition font-medium text-sm" class="relative z-20 flex p-1 rounded-full bg-white/5 hover:bg-white/10 transition font-medium text-sm"
@ -58,6 +71,8 @@
</div> </div>
</div> </div>
</div> </div>
<!-- <div class="absolute bottom-12 left-0 right-0 w-full"></div> -->
</div> </div>
</div> </div>
{/if} {/if}