Skip to content

GitLab

Switch branch/tag
Find file Normal viewHistoryPermalink
app.html 4.71 KB
Newer Older
Timothy J. Baek's avatar
chat feature added  
Timothy J. Baek committed
1
2 
<!DOCTYPE html>
<html lang="en">
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43 

<head>
	<meta charset="utf-8" />
	<link rel="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" />
	<meta name="robots" content="noindex,nofollow" />
	<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
		(() => {
			if (localStorage?.theme && localStorage?.theme.includes('oled')) {
				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');
			} else if (
				localStorage.theme === 'light' ||
				(!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: light)').matches)
			) {
				document.documentElement.classList.add('light');
			} else if (localStorage.theme && localStorage.theme !== 'system') {
				localStorage.theme.split(' ').forEach((e) => {
					document.documentElement.classList.add(e);
				});
			} else if (localStorage.theme && localStorage.theme === 'system') {
				systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches;
				document.documentElement.classList.add(systemTheme ? 'dark' : 'light');
			} else if (localStorage.theme && localStorage.theme === 'her') {
				document.documentElement.classList.add('dark');
				document.documentElement.classList.add('her');
			} else {
				document.documentElement.classList.add('dark');
Timothy J. Baek's avatar
enh: iframe support  
Timothy J. Baek committed
44 
			}
Danny Liu's avatar
add event listener in app.html to handle system theme changes  
Danny Liu committed
45
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
46
47
48
49
50
51
52
53 
			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');
					} else {
						document.documentElement.classList.add('light');
						document.documentElement.classList.remove('dark');
Danny Liu's avatar
add event listener in app.html to handle system theme changes  
Danny Liu committed
54 
					}
Timothy J. Baek's avatar
refac: splash screen  
Timothy J. Baek committed
55 
				}
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
56
57
58
59
60
61
62
63
64
65
66 
			});
		})();
	</script>

	<title>Open WebUI</title>

	%sveltekit.head%
</head>

<body data-sveltekit-preload-data="hover">
	<div style="display: contents">%sveltekit.body%</div>
Timothy J. Baek's avatar
refac: splash screen  
Timothy J. Baek committed
67
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
68
69
70
71
72
73
74
75 
	<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 !important;
			}
		</style>

		<img id="logo" style="
Timothy J. Baek's avatar
refac: splash screen  
Timothy J. Baek committed
76 
					position: absolute;
Timothy J. Baek's avatar
refac: splash screen  
Timothy J. Baek committed
77 
					width: auto;
Timothy J. Baek's avatar
refac: splash screen  
Timothy J. Baek committed
78 
					height: 6rem;
Timothy J. Baek's avatar
refac: styling  
Timothy J. Baek committed
79 
					top: 44%;
Timothy J. Baek's avatar
refac: splash screen  
Timothy J. Baek committed
80 
					left: 50%;
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
81
82 
					transform: translateX(-50%);
				" src="/static/splash.png" />
Timothy J. Baek's avatar
refac: splash screen  
Timothy J. Baek committed
83
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
84 
		<div style="
Timothy J. Baek's avatar
enh: her  
Timothy J. Baek committed
85 
					position: absolute;
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
86 
					top: 33%;
Timothy J. Baek's avatar
enh: her  
Timothy J. Baek committed
87
88
89 
					left: 50%;

					width: 24rem;
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
90 
					transform: translateX(-50%);
Timothy J. Baek's avatar
enh: her  
Timothy J. Baek committed
91
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
92
93
94 
					display: flex;
					flex-direction: column;
					align-items: center;
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
95
96
97
98
99 
				">
			<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="
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
100
101
102
103
104
105 
							position: absolute;
							width: 100%;
							height: 0.75rem;

							border-radius: 9999px;
							background-color: #fafafa9a;
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
106 
						"></div>
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
107
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
108 
				<div id="progress-bar" style="
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
109 
							position: absolute;
Timothy J. Baek's avatar
doc: changelog  
Timothy J. Baek committed
110 
							width: 0%;
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
111
112
113 
							height: 0.75rem;
							border-radius: 9999px;
							background-color: #fff;
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
114 
						" class="bg-white"></div>
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
115 
			</div>
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
116 
		</div>
Timothy J. Baek's avatar
enh: her  
Timothy J. Baek committed
117
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
118 
		<!-- <span style="position: absolute; bottom: 32px; left: 50%; margin: -36px 0 0 -36px">
Timothy J. Baek's avatar
refac: splash screen  
Timothy J. Baek committed
119
120 
				Footer content
			</span> -->
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
121
122
123 
	</div>
</body>
Timothy J. Baek's avatar
chat feature added  
Timothy J. Baek committed
124 
</html>
Timothy J. Baek's avatar
feat: dark splash screen  
Timothy J. Baek committed
125
126 

<style type="text/css" nonce="">
Timothy J. Baek's avatar
fix: styling  
Timothy J. Baek committed
127
128
129
130 
	html {
		overflow-y: hidden !important;
	}
Timothy J. Baek's avatar
feat: dark splash screen  
Timothy J. Baek committed
131
132
133 
	#splash-screen {
		background: #fff;
	}
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
134
Timothy J. Baek's avatar
feat: dark splash screen  
Timothy J. Baek committed
135
136
137
138
139
140
141 
	html.dark #splash-screen {
		background: #000;
	}

	html.dark #splash-screen img {
		filter: invert(1);
	}
Timothy J. Baek's avatar
enh: her  
Timothy J. Baek committed
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174 

	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;
	}
Timothy J. Baek's avatar
refac: her  
Timothy J. Baek committed
175
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
176
177
178
179
180
181
182
183
184
185 
	@media (max-width: 24rem) {
		html.her #progress-background {
			display: none;
		}

		html.her #progress-bar {
			display: none;
		}
	}
Timothy J. Baek's avatar
refac: her  
Timothy J. Baek committed
186
187
188
189
190 
	@keyframes pulse {
		50% {
			opacity: 0.65;
		}
	}
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
191
Timothy J. Baek's avatar
refac: her  
Timothy J. Baek committed
192
193
194 
	.animate-pulse-fast {
		animation: pulse 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
	}
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
195 
</style>