app.html 5.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231
  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. <meta
  9. 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. <link
  16. rel="search"
  17. type="application/opensearchdescription+xml"
  18. title="Open WebUI"
  19. href="/opensearch.xml"
  20. />
  21. <script>
  22. function resizeIframe(obj) {
  23. obj.style.height = obj.contentWindow.document.documentElement.scrollHeight + 'px';
  24. }
  25. </script>
  26. <script>
  27. // On page load or when changing themes, best to add inline in `head` to avoid FOUC
  28. (() => {
  29. const metaThemeColorTag = document.querySelector('meta[name="theme-color"]');
  30. const prefersDarkTheme = window.matchMedia('(prefers-color-scheme: dark)').matches;
  31. if (!localStorage?.theme) {
  32. localStorage.theme = 'system';
  33. }
  34. if (localStorage.theme === 'system') {
  35. document.documentElement.classList.add(prefersDarkTheme ? 'dark' : 'light');
  36. metaThemeColorTag.setAttribute('content', prefersDarkTheme ? '#171717' : '#ffffff');
  37. } else if (localStorage.theme === 'oled-dark') {
  38. document.documentElement.style.setProperty('--color-gray-800', '#101010');
  39. document.documentElement.style.setProperty('--color-gray-850', '#050505');
  40. document.documentElement.style.setProperty('--color-gray-900', '#000000');
  41. document.documentElement.style.setProperty('--color-gray-950', '#000000');
  42. document.documentElement.classList.add('dark');
  43. metaThemeColorTag.setAttribute('content', '#000000');
  44. } else if (localStorage.theme === 'light') {
  45. document.documentElement.classList.add('light');
  46. metaThemeColorTag.setAttribute('content', '#ffffff');
  47. } else if (localStorage.theme === 'her') {
  48. document.documentElement.classList.add('dark');
  49. document.documentElement.classList.add('her');
  50. metaThemeColorTag.setAttribute('content', '#983724');
  51. } else {
  52. document.documentElement.classList.add('dark');
  53. metaThemeColorTag.setAttribute('content', '#171717');
  54. }
  55. window.matchMedia('(prefers-color-scheme: dark)').addListener((e) => {
  56. if (localStorage.theme === 'system') {
  57. if (e.matches) {
  58. document.documentElement.classList.add('dark');
  59. document.documentElement.classList.remove('light');
  60. metaThemeColorTag.setAttribute('content', '#171717');
  61. } else {
  62. document.documentElement.classList.add('light');
  63. document.documentElement.classList.remove('dark');
  64. metaThemeColorTag.setAttribute('content', '#ffffff');
  65. }
  66. }
  67. });
  68. })();
  69. </script>
  70. <title>Open WebUI</title>
  71. %sveltekit.head%
  72. </head>
  73. <body data-sveltekit-preload-data="hover">
  74. <div style="display: contents">%sveltekit.body%</div>
  75. <div
  76. id="splash-screen"
  77. style="position: fixed; z-index: 100; top: 0; left: 0; width: 100%; height: 100%"
  78. >
  79. <style type="text/css" nonce="">
  80. html {
  81. overflow-y: scroll !important;
  82. }
  83. </style>
  84. <img
  85. id="logo"
  86. style="
  87. position: absolute;
  88. width: auto;
  89. height: 6rem;
  90. top: 44%;
  91. left: 50%;
  92. transform: translateX(-50%);
  93. "
  94. src="/static/splash.png"
  95. />
  96. <div
  97. style="
  98. position: absolute;
  99. top: 33%;
  100. left: 50%;
  101. width: 24rem;
  102. transform: translateX(-50%);
  103. display: flex;
  104. flex-direction: column;
  105. align-items: center;
  106. "
  107. >
  108. <img
  109. id="logo-her"
  110. style="width: auto; height: 13rem"
  111. src="/static/splash.png"
  112. class="animate-pulse-fast"
  113. />
  114. <div style="position: relative; width: 24rem; margin-top: 0.5rem">
  115. <div
  116. id="progress-background"
  117. style="
  118. position: absolute;
  119. width: 100%;
  120. height: 0.75rem;
  121. border-radius: 9999px;
  122. background-color: #fafafa9a;
  123. "
  124. ></div>
  125. <div
  126. id="progress-bar"
  127. style="
  128. position: absolute;
  129. width: 0%;
  130. height: 0.75rem;
  131. border-radius: 9999px;
  132. background-color: #fff;
  133. "
  134. class="bg-white"
  135. ></div>
  136. </div>
  137. </div>
  138. <!-- <span style="position: absolute; bottom: 32px; left: 50%; margin: -36px 0 0 -36px">
  139. Footer content
  140. </span> -->
  141. </div>
  142. </body>
  143. </html>
  144. <style type="text/css" nonce="">
  145. html {
  146. overflow-y: hidden !important;
  147. }
  148. #splash-screen {
  149. background: #fff;
  150. }
  151. html.dark #splash-screen {
  152. background: #000;
  153. }
  154. html.dark #splash-screen img {
  155. filter: invert(1);
  156. }
  157. html.her #splash-screen {
  158. background: #983724;
  159. }
  160. #logo-her {
  161. display: none;
  162. }
  163. #progress-background {
  164. display: none;
  165. }
  166. #progress-bar {
  167. display: none;
  168. }
  169. html.her #logo {
  170. display: none;
  171. }
  172. html.her #logo-her {
  173. display: block;
  174. filter: invert(1);
  175. }
  176. html.her #progress-background {
  177. display: block;
  178. }
  179. html.her #progress-bar {
  180. display: block;
  181. }
  182. @media (max-width: 24rem) {
  183. html.her #progress-background {
  184. display: none;
  185. }
  186. html.her #progress-bar {
  187. display: none;
  188. }
  189. }
  190. @keyframes pulse {
  191. 50% {
  192. opacity: 0.65;
  193. }
  194. }
  195. .animate-pulse-fast {
  196. animation: pulse 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  197. }
  198. </style>