Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <link rel="icon" href="%sveltekit.assets%/favicon.png" /> | |
| <link rel="apple-touch-icon" href="%sveltekit.assets%/favicon.png" /> | |
| <link rel="manifest" href="%sveltekit.assets%/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> | |
| 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'); | |
| } | |
| } | |
| }); | |
| })(); | |
| </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 ; | |
| } | |
| </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 ; | |
| } | |
| #splash-screen { | |
| background: #fff; | |
| } | |
| html.dark #splash-screen { | |
| background: #000; | |
| } | |
| html.dark #splash-screen img { | |
| filter: invert(1); | |
| } | |
| 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> | |