app.html 4.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199
  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="manifest" href="%sveltekit.assets%/manifest.json" crossorigin="use-credentials" />
  7. <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
  8. <meta name="robots" content="noindex,nofollow" />
  9. <link
  10. rel="search"
  11. type="application/opensearchdescription+xml"
  12. title="Open WebUI"
  13. href="/opensearch.xml"
  14. />
  15. <script>
  16. // On page load or when changing themes, best to add inline in `head` to avoid FOUC
  17. (() => {
  18. if (localStorage?.theme && localStorage?.theme.includes('oled')) {
  19. document.documentElement.style.setProperty('--color-gray-900', '#000000');
  20. document.documentElement.style.setProperty('--color-gray-950', '#000000');
  21. document.documentElement.classList.add('dark');
  22. } else if (
  23. localStorage.theme === 'light' ||
  24. (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: light)').matches)
  25. ) {
  26. document.documentElement.classList.add('light');
  27. } else if (localStorage.theme && localStorage.theme !== 'system') {
  28. localStorage.theme.split(' ').forEach((e) => {
  29. document.documentElement.classList.add(e);
  30. });
  31. } else if (localStorage.theme && localStorage.theme === 'system') {
  32. systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches;
  33. document.documentElement.classList.add(systemTheme ? 'dark' : 'light');
  34. } else if (localStorage.theme && localStorage.theme === 'her') {
  35. document.documentElement.classList.add('dark');
  36. document.documentElement.classList.add('her');
  37. } else {
  38. document.documentElement.classList.add('dark');
  39. }
  40. window.matchMedia('(prefers-color-scheme: dark)').addListener((e) => {
  41. if (localStorage.theme === 'system') {
  42. if (e.matches) {
  43. document.documentElement.classList.add('dark');
  44. document.documentElement.classList.remove('light');
  45. } else {
  46. document.documentElement.classList.add('light');
  47. document.documentElement.classList.remove('dark');
  48. }
  49. }
  50. });
  51. })();
  52. </script>
  53. <title>Open WebUI</title>
  54. %sveltekit.head%
  55. </head>
  56. <body data-sveltekit-preload-data="hover">
  57. <div style="display: contents">%sveltekit.body%</div>
  58. <div
  59. id="splash-screen"
  60. style="position: fixed; z-index: 100; top: 0; left: 0; width: 100%; height: 100%"
  61. >
  62. <style type="text/css" nonce="">
  63. html {
  64. overflow-y: scroll !important;
  65. }
  66. </style>
  67. <img
  68. id="logo"
  69. style="
  70. position: absolute;
  71. width: 6rem;
  72. height: 6rem;
  73. top: 41%;
  74. left: 50%;
  75. margin-left: -3rem;
  76. "
  77. src="/logo.svg"
  78. />
  79. <img
  80. id="logo-her"
  81. style="
  82. position: absolute;
  83. width: 12rem;
  84. height: 12rem;
  85. top: 34%;
  86. left: 50%;
  87. margin-left: -6rem;
  88. "
  89. src="/logo.svg"
  90. class="animate-pulse-fast"
  91. />
  92. <div
  93. id="progress-background"
  94. style="
  95. position: absolute;
  96. top: 58%;
  97. left: 50%;
  98. margin-left: -12rem;
  99. width: 24rem;
  100. height: 0.75rem;
  101. border-radius: 9999px;
  102. background-color: #fafafa9a;
  103. "
  104. class="bg-white"
  105. ></div>
  106. <div
  107. id="progress-bar"
  108. style="
  109. position: absolute;
  110. top: 58%;
  111. left: 50%;
  112. margin-left: -12rem;
  113. height: 0.75rem;
  114. border-radius: 9999px;
  115. background-color: #fff;
  116. width: 0rem;
  117. "
  118. class="bg-white"
  119. ></div>
  120. <!-- <span style="position: absolute; bottom: 32px; left: 50%; margin: -36px 0 0 -36px">
  121. Footer content
  122. </span> -->
  123. </div>
  124. </body>
  125. </html>
  126. <style type="text/css" nonce="">
  127. html {
  128. overflow-y: hidden !important;
  129. }
  130. #splash-screen {
  131. background: #fff;
  132. }
  133. html.dark #splash-screen {
  134. background: #000;
  135. }
  136. html.dark #splash-screen img {
  137. filter: invert(1);
  138. }
  139. html.her #splash-screen {
  140. background: #983724;
  141. }
  142. #logo-her {
  143. display: none;
  144. }
  145. #progress-background {
  146. display: none;
  147. }
  148. #progress-bar {
  149. display: none;
  150. }
  151. html.her #logo {
  152. display: none;
  153. }
  154. html.her #logo-her {
  155. display: block;
  156. filter: invert(1);
  157. }
  158. html.her #progress-background {
  159. display: block;
  160. }
  161. html.her #progress-bar {
  162. display: block;
  163. }
  164. @keyframes pulse {
  165. 50% {
  166. opacity: 0.65;
  167. }
  168. }
  169. .animate-pulse-fast {
  170. animation: pulse 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  171. }
  172. </style>