1<!doctype html> 2<html lang="en"> 3 <head> 4 <meta charset="utf-8" /> 5 <link rel="icon" type="image/png" href="/static/favicon.png" /> 6 <link rel="icon" type="image/png" href="/static/favicon-96x96.png" sizes="96x96" /> 7 <link rel="icon" type="image/svg+xml" href="/static/favicon.svg" /> 8 <link rel="shortcut icon" href="/static/favicon.ico" /> 9 <link rel="apple-touch-icon" sizes="180x180" href="/static/apple-touch-icon.png" /> 10 <meta name="apple-mobile-web-app-title" content="Open WebUI" /> 11 12 <link rel="manifest" href="/manifest.json" crossorigin="use-credentials" /> 13 <meta 14 name="viewport" 15 content="width=device-width, initial-scale=1, maximum-scale=1, viewport-fit=cover" 16 /> 17 <meta name="theme-color" content="#171717" /> 18 <meta name="robots" content="noindex,nofollow" /> 19 <meta name="description" content="Open WebUI" /> 20 <link 21 rel="search" 22 type="application/opensearchdescription+xml" 23 title="Open WebUI" 24 href="/opensearch.xml" 25 /> 26
26<script src="/static/loader.js" defer></script>
26 27 28
28<script> 29 function resizeIframe(obj) { 30 obj.style.height = obj.contentWindow.document.documentElement.scrollHeight + 'px'; 31 } 32 </script>
32 33 34
34<script> 35 // On page load or when changing themes, best to add inline in `head` to avoid FOUC 36 (() => { 37 const metaThemeColorTag = document.querySelector('meta[name="theme-color"]'); 38 const prefersDarkTheme = window.matchMedia('(prefers-color-scheme: dark)').matches; 39 40 if (!localStorage?.theme) { 41 localStorage.theme = 'system'; 42 } 43 44 if (localStorage.theme === 'system') { 45 document.documentElement.classList.add(prefersDarkTheme ? 'dark' : 'light'); 46 metaThemeColorTag.setAttribute('content', prefersDarkTheme ? '#171717' : '#ffffff'); 47 } else if (localStorage.theme === 'oled-dark') { 48 document.documentElement.style.setProperty('--color-gray-800', '#101010'); 49 document.documentElement.style.setProperty('--color-gray-850', '#050505'); 50 document.documentElement.style.setProperty('--color-gray-900', '#000000'); 51 document.documentElement.style.setProperty('--color-gray-950', '#000000'); 52 document.documentElement.classList.add('dark'); 53 metaThemeColorTag.setAttribute('content', '#000000'); 54 } else if (localStorage.theme === 'light') { 55 document.documentElement.classList.add('light'); 56 metaThemeColorTag.setAttribute('content', '#ffffff'); 57 } else if (localStorage.theme === 'her') { 58 document.documentElement.classList.add('dark'); 59 document.documentElement.classList.add('her'); 60 metaThemeColorTag.setAttribute('content', '#983724'); 61 } else { 62 document.documentElement.classList.add('dark'); 63 metaThemeColorTag.setAttribute('content', '#171717'); 64 } 65 66 window.matchMedia('(prefers-color-scheme: dark)').addListener((e) => { 67 if (localStorage.theme === 'system') { 68 if (e.matches) { 69 document.documentElement.classList.add('dark'); 70 document.documentElement.classList.remove('light'); 71 metaThemeColorTag.setAttribute('content', '#171717'); 72 } else { 73 document.documentElement.classList.add('light'); 74 document.documentElement.classList.remove('dark'); 75 metaThemeColorTag.setAttribute('content', '#ffffff'); 76 } 77 } 78 }); 79 80 function setSplashImage() { 81 const logo = document.getElementById('logo'); 82 const isDarkMode = document.documentElement.classList.contains('dark'); 83 84 if (isDarkMode) { 85 const darkImage = new Image(); 86 darkImage.src = '/static/splash-dark.png'; 87 88 darkImage.onload = () => { 89 logo.src = '/static/splash-dark.png'; 90 logo.style.filter = ''; // Ensure no inversion is applied if splash-dark.png exists 91 }; 92 93 darkImage.onerror = () => { 94 logo.style.filter = 'invert(1)'; // Invert image if splash-dark.png is missing 95 }; 96 } 97 } 98 99 // Runs after classes are assigned 100 window.onload = setSplashImage; 101 })(); 102 </script>
102 103 104 <title>Open WebUI</title> 105 106 107 <link rel="modulepreload" href="/_app/immutable/entry/start.DDlxE25C.js"> 108 <link rel="modulepreload" href="/_app/immutable/chunks/vcqg7ZRj.js"> 109 <link rel="modulepreload" href="/_app/immutable/chunks/vexCXLX9.js"> 110 <link rel="modulepreload" href="/_app/immutable/chunks/tMLpXUqA.js"> 111 <link rel="modulepreload" href="/_app/immutable/entry/app.ChcUvDlU.js"> 112 <link rel="modulepreload" href="/_app/immutable/chunks/C1FmrZbK.js"> 113 <link rel="modulepreload" href="/_app/immutable/chunks/Cdll-xsj.js"> 114 </head> 115 116 <body data-sveltekit-preload-data="hover"> 117 <div style="display: contents"> 118
118<script> 119 { 120 __sveltekit_33qfp8 = { 121 base: "" 122 }; 123 124 const element = document.currentScript.parentElement; 125 126 Promise.all([ 127 import("/_app/immutable/entry/start.DDlxE25C.js"), 128 import("/_app/immutable/entry/app.ChcUvDlU.js") 129 ]).then(([kit, app]) => { 130 kit.start(app, element); 131 }); 132 } 133 </script>
133 134 </div> 135 136 <div 137 id="splash-screen" 138 style="position: fixed; z-index: 100; top: 0; left: 0; width: 100%; height: 100%" 139 > 140 <style type="text/css" nonce=""> 141 html { 142 overflow-y: scroll !important; 143 } 144 </style> 145 146 <img 147 id="logo" 148 style=" 149 position: absolute; 150 width: auto; 151 height: 6rem; 152 top: 44%; 153 left: 50%; 154 transform: translateX(-50%); 155 " 156 src="/static/splash.png" 157 /> 158 159 <div 160 style=" 161 position: absolute; 162 top: 33%; 163 left: 50%; 164 165 width: 24rem; 166 transform: translateX(-50%); 167 168 display: flex; 169 flex-direction: column; 170 align-items: center; 171 " 172 > 173 <img 174 id="logo-her" 175 style="width: auto; height: 13rem" 176 src="/static/splash.png" 177 class="animate-pulse-fast" 178 /> 179 180 <div style="position: relative; width: 24rem; margin-top: 0.5rem"> 181 <div 182 id="progress-background" 183 style=" 184 position: absolute; 185 width: 100%; 186 height: 0.75rem; 187 188 border-radius: 9999px; 189 background-color: #fafafa9a; 190 " 191 ></div> 192 193 <div 194 id="progress-bar" 195 style=" 196 position: absolute; 197 width: 0%; 198 height: 0.75rem; 199 border-radius: 9999px; 200 background-color: #fff; 201 " 202 class="bg-white" 203 ></div> 204 </div> 205 </div> 206 207 <!-- <span style="position: absolute; bottom: 32px; left: 50%; margin: -36px 0 0 -36px"> 208 Footer content 209 </span> --> 210 </div> 211 </body> 212</html> 213 214<style type="text/css" nonce=""> 215 html { 216 overflow-y: hidden !important; 217 } 218 219 #splash-screen { 220 background: #fff; 221 } 222 223 html.dark #splash-screen { 224 background: #000; 225 } 226 227 html.her #splash-screen { 228 background: #983724; 229 } 230 231 #logo-her { 232 display: none; 233 } 234 235 #progress-background { 236 display: none; 237 } 238 239 #progress-bar { 240 display: none; 241 } 242 243 html.her #logo { 244 display: none; 245 } 246 247 html.her #logo-her { 248 display: block; 249 filter: invert(1); 250 } 251 252 html.her #progress-background { 253 display: block; 254 } 255 256 html.her #progress-bar { 257 display: block; 258 } 259 260 @media (max-width: 24rem) { 261 html.her #progress-background { 262 display: none; 263 } 264 265 html.her #progress-bar { 266 display: none; 267 } 268 } 269 270 @keyframes pulse { 271 50% { 272 opacity: 0.65; 273 } 274 } 275 276 .animate-pulse-fast { 277 animation: pulse 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite; 278 } 279</style>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.