Skip to content

GitLab

Switch branch/tag
Find file Normal viewHistoryPermalink
app.html 4.87 KB
Newer Older
Timothy J. Baek's avatar
chat feature added  
Timothy J. Baek committed
1
2
3
4
5 
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
Timothy J. Baek's avatar
fix: manifest.json issue  
Timothy J. Baek committed
6 
		<link rel="manifest" href="%sveltekit.assets%/manifest.json" crossorigin="use-credentials" />
Timothy J. Baek's avatar
Update app.html  
Timothy J. Baek committed
7 
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
tracer123's avatar
Update app.html  
tracer123 committed
8 
		<meta name="robots" content="noindex,nofollow" />
Timothy J. Baek's avatar
feat: browser search engine support  
Timothy J. Baek committed
9
10
11
12
13
14 
		<link
			rel="search"
			type="application/opensearchdescription+xml"
			title="Open WebUI"
			href="/opensearch.xml"
		/>
Timothy J. Baek's avatar
feat: python code execution  
Timothy J. Baek committed
15
Timothy J. Baek's avatar
enh: iframe support  
Timothy J. Baek committed
16
17
18
19
20
21 
		<script>
			function resizeIframe(obj) {
				obj.style.height = obj.contentWindow.document.documentElement.scrollHeight + 'px';
			}
		</script>
Timothy J. Baek's avatar
feat: light mode support  
Timothy J. Baek committed
22
23 
		<script>
			// On page load or when changing themes, best to add inline in `head` to avoid FOUC
Danny Liu's avatar
use IIFE in app.html to prevent FOUC  
Danny Liu committed
24 
			(() => {
Timothy J. Baek's avatar
fix: theme issue  
Timothy J. Baek committed
25 
				if (localStorage?.theme && localStorage?.theme.includes('oled')) {
Timothy J. Baek's avatar
feat: darker oled  
Timothy J. Baek committed
26
27 
					document.documentElement.style.setProperty('--color-gray-800', '#171717');
					document.documentElement.style.setProperty('--color-gray-850', '#0d0d0d');
Danny Liu's avatar
Update theme options and persist OLED dark theme if selected  
Danny Liu committed
28 
					document.documentElement.style.setProperty('--color-gray-900', '#000000');
Danny Liu's avatar
dynamically adjust --color-gray-950 value for OLED black sidebar  
Danny Liu committed
29 
					document.documentElement.style.setProperty('--color-gray-950', '#000000');
Danny Liu's avatar
Update theme options and persist OLED dark theme if selected  
Danny Liu committed
30 
					document.documentElement.classList.add('dark');
Timothy J. Baek's avatar
fix: theme issue  
Timothy J. Baek committed
31 
				} else if (
Danny Liu's avatar
use IIFE in app.html to prevent FOUC  
Danny Liu committed
32
33
34
35
36
37
38
39
40
41
42 
					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');
Timothy J. Baek's avatar
enh: her  
Timothy J. Baek committed
43
44
45 
				} else if (localStorage.theme && localStorage.theme === 'her') {
					document.documentElement.classList.add('dark');
					document.documentElement.classList.add('her');
Danny Liu's avatar
run prettier  
Danny Liu committed
46 
				} else {
Danny Liu's avatar
use IIFE in app.html to prevent FOUC  
Danny Liu committed
47
48 
					document.documentElement.classList.add('dark');
				}
Danny Liu's avatar
add event listener in app.html to handle system theme changes  
Danny Liu committed
49
Danny Liu's avatar
use IIFE in app.html to prevent FOUC  
Danny Liu 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 
					}
Danny Liu's avatar
run prettier  
Danny Liu committed
60 
				});
Danny Liu's avatar
use IIFE in app.html to prevent FOUC  
Danny Liu committed
61 
			})();
Timothy J. Baek's avatar
feat: light mode support  
Timothy J. Baek committed
62
63 
		</script>
Timothy J. Baek's avatar
Update app.html  
Timothy J. Baek committed
64
65 
		<title>Open WebUI</title>
Timothy J. Baek's avatar
chat feature added  
Timothy J. Baek committed
66
67
68
69 
		%sveltekit.head%
	</head>
	<body data-sveltekit-preload-data="hover">
		<div style="display: contents">%sveltekit.body%</div>
Timothy J. Baek's avatar
feat: splash screen support  
Timothy J. Baek committed
70
Timothy J. Baek's avatar
refac: splash screen  
Timothy J. Baek committed
71
72 
		<div
			id="splash-screen"
Timothy J. Baek's avatar
feat: dark splash screen  
Timothy J. Baek committed
73 
			style="position: fixed; z-index: 100; top: 0; left: 0; width: 100%; height: 100%"
Timothy J. Baek's avatar
refac: splash screen  
Timothy J. Baek committed
74
75
76
77
78
79
80
81 
		>
			<style type="text/css" nonce="">
				html {
					overflow-y: scroll !important;
				}
			</style>

			<img
Timothy J. Baek's avatar
enh: her  
Timothy J. Baek committed
82 
				id="logo"
Timothy J. Baek's avatar
refac: splash screen  
Timothy J. Baek committed
83
84 
				style="
					position: absolute;
Timothy J. Baek's avatar
refac: splash screen  
Timothy J. Baek committed
85 
					width: auto;
Timothy J. Baek's avatar
refac: splash screen  
Timothy J. Baek committed
86 
					height: 6rem;
Timothy J. Baek's avatar
enh: her  
Timothy J. Baek committed
87 
					top: 41%;
Timothy J. Baek's avatar
refac: splash screen  
Timothy J. Baek committed
88 
					left: 50%;
Timothy J. Baek's avatar
enh: her  
Timothy J. Baek committed
89 
					margin-left: -3rem;
Timothy J. Baek's avatar
refac: splash screen  
Timothy J. Baek committed
90 
				"
Timothy J. Baek's avatar
refac: splash screen  
Timothy J. Baek committed
91 
				src="/static/splash.png"
Timothy J. Baek's avatar
refac: splash screen  
Timothy J. Baek committed
92
93 
			/>
Timothy J. Baek's avatar
enh: her  
Timothy J. Baek committed
94
95
96 
			<div
				style="
					position: absolute;
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
97 
					top: 33%;
Timothy J. Baek's avatar
enh: her  
Timothy J. Baek committed
98
99
100
101
102 
					left: 50%;

					width: 24rem;
					margin-left: -12rem;
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
103
104
105 
					display: flex;
					flex-direction: column;
					align-items: center;
Timothy J. Baek's avatar
enh: her  
Timothy J. Baek committed
106 
				"
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
107
108
109 
			>
				<img
					id="logo-her"
Timothy J. Baek's avatar
refac: splash screen  
Timothy J. Baek committed
110
111 
					style="width: auto; height: 13rem"
					src="/static/splash.png"
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131 
					class="animate-pulse-fast"
				/>

				<div style="position: relative; width: 24rem; margin-top: 0.5rem">
					<div
						id="progress-background"
						style="
							position: absolute;
							width: 100%;
							height: 0.75rem;

							border-radius: 9999px;
							background-color: #fafafa9a;
						"
					></div>

					<div
						id="progress-bar"
						style="
							position: absolute;
Timothy J. Baek's avatar
doc: changelog  
Timothy J. Baek committed
132 
							width: 0%;
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
133
134
135
136
137
138
139
140 
							height: 0.75rem;
							border-radius: 9999px;
							background-color: #fff;
						"
						class="bg-white"
					></div>
				</div>
			</div>
Timothy J. Baek's avatar
enh: her  
Timothy J. Baek committed
141
Timothy J. Baek's avatar
refac: splash screen  
Timothy J. Baek committed
142
143
144 
			<!-- <span style="position: absolute; bottom: 32px; left: 50%; margin: -36px 0 0 -36px">
				Footer content
			</span> -->
Timothy J. Baek's avatar
feat: splash screen support  
Timothy J. Baek committed
145 
		</div>
Timothy J. Baek's avatar
chat feature added  
Timothy J. Baek committed
146
147 
	</body>
</html>
Timothy J. Baek's avatar
feat: dark splash screen  
Timothy J. Baek committed
148
149 

<style type="text/css" nonce="">
Timothy J. Baek's avatar
fix: styling  
Timothy J. Baek committed
150
151
152
153 
	html {
		overflow-y: hidden !important;
	}
Timothy J. Baek's avatar
feat: dark splash screen  
Timothy J. Baek committed
154
155
156
157
158
159
160
161
162
163 
	#splash-screen {
		background: #fff;
	}
	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
164
165
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 

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