beea/open-webui
0
1<!doctype html>2<html lang="en">3 <head>4 <meta charset="utf-8" />5 <link rel="icon" href="%sveltekit.assets%/favicon.png" />6 <link rel="apple-touch-icon" href="%sveltekit.assets%/favicon.png" />7 <link rel="manifest" href="%sveltekit.assets%/manifest.json" crossorigin="use-credentials" />8 <meta9 name="viewport"10 content="width=device-width, initial-scale=1, maximum-scale=1, viewport-fit=cover"11 />12 <meta name="theme-color" content="#171717" />13 <meta name="robots" content="noindex,nofollow" />14 <meta name="description" content="Open WebUI" />15 <link16 rel="search"17 type="application/opensearchdescription+xml"18 title="Open WebUI"19 href="/opensearch.xml"20 />21 22 <script>23 function resizeIframe(obj) {24 obj.style.height = obj.contentWindow.document.documentElement.scrollHeight + 'px';25 }26 </script>27 28 <script>29 // On page load or when changing themes, best to add inline in `head` to avoid FOUC30 (() => {31 const metaThemeColorTag = document.querySelector('meta[name="theme-color"]');32 const prefersDarkTheme = window.matchMedia('(prefers-color-scheme: dark)').matches;33 34 if (!localStorage?.theme) {35 localStorage.theme = 'system';36 }37 38 if (localStorage.theme === 'system') {39 document.documentElement.classList.add(prefersDarkTheme ? 'dark' : 'light');40 metaThemeColorTag.setAttribute('content', prefersDarkTheme ? '#171717' : '#ffffff');41 } else if (localStorage.theme === 'oled-dark') {42 document.documentElement.style.setProperty('--color-gray-800', '#101010');43 document.documentElement.style.setProperty('--color-gray-850', '#050505');44 document.documentElement.style.setProperty('--color-gray-900', '#000000');45 document.documentElement.style.setProperty('--color-gray-950', '#000000');46 document.documentElement.classList.add('dark');47 metaThemeColorTag.setAttribute('content', '#000000');48 } else if (localStorage.theme === 'light') {49 document.documentElement.classList.add('light');50 metaThemeColorTag.setAttribute('content', '#ffffff');51 } else if (localStorage.theme === 'her') {52 document.documentElement.classList.add('dark');53 document.documentElement.classList.add('her');54 metaThemeColorTag.setAttribute('content', '#983724');55 } else {56 document.documentElement.classList.add('dark');57 metaThemeColorTag.setAttribute('content', '#171717');58 }59 60 window.matchMedia('(prefers-color-scheme: dark)').addListener((e) => {61 if (localStorage.theme === 'system') {62 if (e.matches) {63 document.documentElement.classList.add('dark');64 document.documentElement.classList.remove('light');65 metaThemeColorTag.setAttribute('content', '#171717');66 } else {67 document.documentElement.classList.add('light');68 document.documentElement.classList.remove('dark');69 metaThemeColorTag.setAttribute('content', '#ffffff');70 }71 }72 });73 })();74 </script>75 76 <title>Open WebUI</title>77 78 %sveltekit.head%79 </head>80 81 <body data-sveltekit-preload-data="hover">82 <div style="display: contents">%sveltekit.body%</div>83 84 <div85 id="splash-screen"86 style="position: fixed; z-index: 100; top: 0; left: 0; width: 100%; height: 100%"87 >88 <style type="text/css" nonce="">89 html {90 overflow-y: scroll !important;91 }92 </style>93 94 <img95 id="logo"96 style="97 position: absolute;98 width: auto;99 height: 6rem;100 top: 44%;101 left: 50%;102 transform: translateX(-50%);103 "104 src="/static/splash.png"105 />106 107 <div108 style="109 position: absolute;110 top: 33%;111 left: 50%;112 113 width: 24rem;114 transform: translateX(-50%);115 116 display: flex;117 flex-direction: column;118 align-items: center;119 "120 >121 <img122 id="logo-her"123 style="width: auto; height: 13rem"124 src="/static/splash.png"125 class="animate-pulse-fast"126 />127 128 <div style="position: relative; width: 24rem; margin-top: 0.5rem">129 <div130 id="progress-background"131 style="132 position: absolute;133 width: 100%;134 height: 0.75rem;135 136 border-radius: 9999px;137 background-color: #fafafa9a;138 "139 ></div>140 141 <div142 id="progress-bar"143 style="144 position: absolute;145 width: 0%;146 height: 0.75rem;147 border-radius: 9999px;148 background-color: #fff;149 "150 class="bg-white"151 ></div>152 </div>153 </div>154 155 <!-- <span style="position: absolute; bottom: 32px; left: 50%; margin: -36px 0 0 -36px">156 Footer content157 </span> -->158 </div>159 </body>160</html>161 162<style type="text/css" nonce="">163 html {164 overflow-y: hidden !important;165 }166 167 #splash-screen {168 background: #fff;169 }170 171 html.dark #splash-screen {172 background: #000;173 }174 175 html.dark #splash-screen img {176 filter: invert(1);177 }178 179 html.her #splash-screen {180 background: #983724;181 }182 183 #logo-her {184 display: none;185 }186 187 #progress-background {188 display: none;189 }190 191 #progress-bar {192 display: none;193 }194 195 html.her #logo {196 display: none;197 }198 199 html.her #logo-her {200 display: block;201 filter: invert(1);202 }203 204 html.her #progress-background {205 display: block;206 }207 208 html.her #progress-bar {209 display: block;210 }211 212 @media (max-width: 24rem) {213 html.her #progress-background {214 display: none;215 }216 217 html.her #progress-bar {218 display: none;219 }220 }221 222 @keyframes pulse {223 50% {224 opacity: 0.65;225 }226 }227 228 .animate-pulse-fast {229 animation: pulse 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;230 }231</style>232