lqb
/
open-webui
зеркало из https://github.com/open-webui/open-webui.git


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255
							<!doctype html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<link rel="icon" type="image/png" href="/static/favicon.png" />
		<link rel="icon" type="image/png" href="/static/favicon-96x96.png" sizes="96x96" />
		<link rel="icon" type="image/svg+xml" href="/static/favicon.svg" />
		<link rel="shortcut icon" href="/static/favicon.ico" />
		<link rel="apple-touch-icon" sizes="180x180" href="/static/apple-touch-icon.png" />
		<meta name="apple-mobile-web-app-title" content="Open WebUI" />

		<link rel="manifest" href="/manifest.json" crossorigin="use-credentials" />
		<meta
			name="viewport"
			content="width=device-width, initial-scale=1, maximum-scale=1, viewport-fit=cover"
		/>
		<meta name="theme-color" content="#171717" />
		<meta name="robots" content="noindex,nofollow" />
		<meta name="description" content="Open WebUI" />
		<link
			rel="search"
			type="application/opensearchdescription+xml"
			title="Open WebUI"
			href="/opensearch.xml"
		/>
		<script src="/static/loader.js" defer></script>

		<script>
			function resizeIframe(obj) {
				obj.style.height = obj.contentWindow.document.documentElement.scrollHeight + 'px';
			}
		</script>

		<script>
			// On page load or when changing themes, best to add inline in `head` to avoid FOUC
			(() => {
				const metaThemeColorTag = document.querySelector('meta[name="theme-color"]');
				const prefersDarkTheme = window.matchMedia('(prefers-color-scheme: dark)').matches;

				if (!localStorage?.theme) {
					localStorage.theme = 'system';
				}

				if (localStorage.theme === 'system') {
					document.documentElement.classList.add(prefersDarkTheme ? 'dark' : 'light');
					metaThemeColorTag.setAttribute('content', prefersDarkTheme ? '#171717' : '#ffffff');
				} else if (localStorage.theme === 'oled-dark') {
					document.documentElement.style.setProperty('--color-gray-800', '#101010');
					document.documentElement.style.setProperty('--color-gray-850', '#050505');
					document.documentElement.style.setProperty('--color-gray-900', '#000000');
					document.documentElement.style.setProperty('--color-gray-950', '#000000');
					document.documentElement.classList.add('dark');
					metaThemeColorTag.setAttribute('content', '#000000');
				} else if (localStorage.theme === 'light') {
					document.documentElement.classList.add('light');
					metaThemeColorTag.setAttribute('content', '#ffffff');
				} else if (localStorage.theme === 'her') {
					document.documentElement.classList.add('dark');
					document.documentElement.classList.add('her');
					metaThemeColorTag.setAttribute('content', '#983724');
				} else {
					document.documentElement.classList.add('dark');
					metaThemeColorTag.setAttribute('content', '#171717');
				}

				window.matchMedia('(prefers-color-scheme: dark)').addListener((e) => {
					if (localStorage.theme === 'system') {
						if (e.matches) {
							document.documentElement.classList.add('dark');
							document.documentElement.classList.remove('light');
							metaThemeColorTag.setAttribute('content', '#171717');
						} else {
							document.documentElement.classList.add('light');
							document.documentElement.classList.remove('dark');
							metaThemeColorTag.setAttribute('content', '#ffffff');
						}
					}
				});

				function setSplashImage() {
					const logo = document.getElementById('logo');
					const isDarkMode = document.documentElement.classList.contains('dark');

					if (isDarkMode) {
						const darkImage = new Image();
						darkImage.src = '/static/splash-dark.png';

						darkImage.onload = () => {
							logo.src = '/static/splash-dark.png';
							logo.style.filter = ''; // Ensure no inversion is applied if splash-dark.png exists
						};

						darkImage.onerror = () => {
							logo.style.filter = 'invert(1)'; // Invert image if splash-dark.png is missing
						};
					}
				}

				// Runs after classes are assigned
				window.onload = setSplashImage;
			})();
		</script>

		<title>Open WebUI</title>

		%sveltekit.head%
	</head>

	<body data-sveltekit-preload-data="hover">
		<div style="display: contents">%sveltekit.body%</div>

		<div
			id="splash-screen"
			style="position: fixed; z-index: 100; top: 0; left: 0; width: 100%; height: 100%"
		>
			<style type="text/css" nonce="">
				html {
					overflow-y: scroll !important;
				}
			</style>

			<img
				id="logo"
				style="
					position: absolute;
					width: auto;
					height: 6rem;
					top: 44%;
					left: 50%;
					transform: translateX(-50%);
				"
				src="/static/splash.png"
			/>

			<div
				style="
					position: absolute;
					top: 33%;
					left: 50%;

					width: 24rem;
					transform: translateX(-50%);

					display: flex;
					flex-direction: column;
					align-items: center;
				"
			>
				<img
					id="logo-her"
					style="width: auto; height: 13rem"
					src="/static/splash.png"
					class="animate-pulse-fast"
				/>

				<div style="position: relative; width: 24rem; margin-top: 0.5rem">
					<div
						id="progress-background"
						style="
							position: absolute;
							width: 100%;
							height: 0.75rem;

							border-radius: 9999px;
							background-color: #fafafa9a;
						"
					></div>

					<div
						id="progress-bar"
						style="
							position: absolute;
							width: 0%;
							height: 0.75rem;
							border-radius: 9999px;
							background-color: #fff;
						"
						class="bg-white"
					></div>
				</div>
			</div>

			<!-- <span style="position: absolute; bottom: 32px; left: 50%; margin: -36px 0 0 -36px">
				Footer content
			</span> -->
		</div>
	</body>
</html>

<style type="text/css" nonce="">
	html {
		overflow-y: hidden !important;
	}

	#splash-screen {
		background: #fff;
	}

	html.dark #splash-screen {
		background: #000;
	}

	html.her #splash-screen {
		background: #983724;
	}

	#logo-her {
		display: none;
	}

	#progress-background {
		display: none;
	}

	#progress-bar {
		display: none;
	}

	html.her #logo {
		display: none;
	}

	html.her #logo-her {
		display: block;
		filter: invert(1);
	}

	html.her #progress-background {
		display: block;
	}

	html.her #progress-bar {
		display: block;
	}

	@media (max-width: 24rem) {
		html.her #progress-background {
			display: none;
		}

		html.her #progress-bar {
			display: none;
		}
	}

	@keyframes pulse {
		50% {
			opacity: 0.65;
		}
	}

	.animate-pulse-fast {
		animation: pulse 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
	}
</style>