Skip to content

GitLab

Switch branch/tag
Find file Normal viewHistoryPermalink
app.html 4.89 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
chore; format  
Timothy J. Baek committed
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18 
	<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';
Timothy J. Baek's avatar
enh: iframe support  
Timothy J. Baek committed
19 
			}
Timothy J. Baek's avatar
chore; format  
Timothy J. Baek committed
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48 
		</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');
				}
Danny Liu's avatar
add event listener in app.html to handle system theme changes  
Danny Liu committed
49
Timothy J. Baek's avatar
chore; format  
Timothy J. Baek committed
50
51
52
53
54
55
56
57
58 
				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
59 
					}
Timothy J. Baek's avatar
chore; format  
Timothy J. Baek committed
60
61
62 
				});
			})();
		</script>
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
63
Timothy J. Baek's avatar
chore; format  
Timothy J. Baek committed
64 
		<title>Open WebUI</title>
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
65
Timothy J. Baek's avatar
chore; format  
Timothy J. Baek committed
66
67 
		%sveltekit.head%
	</head>
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
68
Timothy J. Baek's avatar
chore; format  
Timothy J. Baek committed
69
70 
	<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
71
Timothy J. Baek's avatar
chore; format  
Timothy J. Baek committed
72
73
74
75
76
77
78
79
80 
		<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>
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
81
Timothy J. Baek's avatar
chore; format  
Timothy J. Baek committed
82
83
84 
			<img
				id="logo"
				style="
Timothy J. Baek's avatar
refac: splash screen  
Timothy J. Baek committed
85 
					position: absolute;
Timothy J. Baek's avatar
refac: splash screen  
Timothy J. Baek committed
86 
					width: auto;
Timothy J. Baek's avatar
refac: splash screen  
Timothy J. Baek committed
87 
					height: 6rem;
Timothy J. Baek's avatar
refac: styling  
Timothy J. Baek committed
88 
					top: 44%;
Timothy J. Baek's avatar
refac: splash screen  
Timothy J. Baek committed
89 
					left: 50%;
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
90 
					transform: translateX(-50%);
Timothy J. Baek's avatar
chore; format  
Timothy J. Baek committed
91
92
93 
				"
				src="/static/splash.png"
			/>
Timothy J. Baek's avatar
refac: splash screen  
Timothy J. Baek committed
94
Timothy J. Baek's avatar
chore; format  
Timothy J. Baek committed
95
96 
			<div
				style="
Timothy J. Baek's avatar
enh: her  
Timothy J. Baek committed
97 
					position: absolute;
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
98 
					top: 33%;
Timothy J. Baek's avatar
enh: her  
Timothy J. Baek committed
99
100
101 
					left: 50%;

					width: 24rem;
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
102 
					transform: translateX(-50%);
Timothy J. Baek's avatar
enh: her  
Timothy J. Baek committed
103
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
104
105
106 
					display: flex;
					flex-direction: column;
					align-items: center;
Timothy J. Baek's avatar
chore; format  
Timothy J. Baek committed
107
108
109
110
111
112
113
114
115
116
117
118
119 
				"
			>
				<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
120
121
122
123
124
125 
							position: absolute;
							width: 100%;
							height: 0.75rem;

							border-radius: 9999px;
							background-color: #fafafa9a;
Timothy J. Baek's avatar
chore; format  
Timothy J. Baek committed
126
127 
						"
					></div>
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
128
Timothy J. Baek's avatar
chore; format  
Timothy J. Baek committed
129
130
131 
					<div
						id="progress-bar"
						style="
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
132 
							position: absolute;
Timothy J. Baek's avatar
doc: changelog  
Timothy J. Baek committed
133 
							width: 0%;
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
134
135
136 
							height: 0.75rem;
							border-radius: 9999px;
							background-color: #fff;
Timothy J. Baek's avatar
chore; format  
Timothy J. Baek committed
137
138
139
140 
						"
						class="bg-white"
					></div>
				</div>
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
141 
			</div>
Timothy J. Baek's avatar
enh: her  
Timothy J. Baek committed
142
Timothy J. Baek's avatar
chore; format  
Timothy J. Baek committed
143 
			<!-- <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
144
145 
				Footer content
			</span> -->
Timothy J. Baek's avatar
chore; format  
Timothy J. Baek committed
146
147 
		</div>
	</body>
Timothy J. Baek's avatar
chat feature added  
Timothy J. Baek committed
148 
</html>
Timothy J. Baek's avatar
feat: dark splash screen  
Timothy J. Baek committed
149
150 

<style type="text/css" nonce="">
Timothy J. Baek's avatar
fix: styling  
Timothy J. Baek committed
151
152
153
154 
	html {
		overflow-y: hidden !important;
	}
Timothy J. Baek's avatar
feat: dark splash screen  
Timothy J. Baek committed
155
156
157 
	#splash-screen {
		background: #fff;
	}
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
158
Timothy J. Baek's avatar
feat: dark splash screen  
Timothy J. Baek committed
159
160
161
162
163
164
165 
	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
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198 

	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
199
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
200
201
202
203
204
205
206
207
208
209 
	@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
210
211
212
213
214 
	@keyframes pulse {
		50% {
			opacity: 0.65;
		}
	}
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
215
Timothy J. Baek's avatar
refac: her  
Timothy J. Baek committed
216
217
218 
	.animate-pulse-fast {
		animation: pulse 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
	}
Timothy J. Baek's avatar
chore; format  
Timothy J. Baek committed
219 
</style>