Skip to content

GitLab

Switch branch/tag
Find file Normal viewHistoryPermalink
app.html 4.7 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')) {
Danny Liu's avatar
Update theme options and persist OLED dark theme if selected  
Danny Liu committed
26 
					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
27 
					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
28 
					document.documentElement.classList.add('dark');
Timothy J. Baek's avatar
fix: theme issue  
Timothy J. Baek committed
29 
				} else if (
Danny Liu's avatar
use IIFE in app.html to prevent FOUC  
Danny Liu committed
30
31
32
33
34
35
36
37
38
39
40 
					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
41
42
43 
				} 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
44 
				} else {
Danny Liu's avatar
use IIFE in app.html to prevent FOUC  
Danny Liu committed
45
46 
					document.documentElement.classList.add('dark');
				}
Danny Liu's avatar
add event listener in app.html to handle system theme changes  
Danny Liu committed
47
Danny Liu's avatar
use IIFE in app.html to prevent FOUC  
Danny Liu committed
48
49
50
51
52
53
54
55
56 
				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
57 
					}
Danny Liu's avatar
run prettier  
Danny Liu committed
58 
				});
Danny Liu's avatar
use IIFE in app.html to prevent FOUC  
Danny Liu committed
59 
			})();
Timothy J. Baek's avatar
feat: light mode support  
Timothy J. Baek committed
60
61 
		</script>
Timothy J. Baek's avatar
Update app.html  
Timothy J. Baek committed
62
63 
		<title>Open WebUI</title>
Timothy J. Baek's avatar
chat feature added  
Timothy J. Baek committed
64
65
66
67 
		%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
68
Timothy J. Baek's avatar
refac: splash screen  
Timothy J. Baek committed
69
70 
		<div
			id="splash-screen"
Timothy J. Baek's avatar
feat: dark splash screen  
Timothy J. Baek committed
71 
			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
72
73
74
75
76
77
78
79 
		>
			<style type="text/css" nonce="">
				html {
					overflow-y: scroll !important;
				}
			</style>

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

					width: 24rem;
					margin-left: -12rem;
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
101
102
103 
					display: flex;
					flex-direction: column;
					align-items: center;
Timothy J. Baek's avatar
enh: her  
Timothy J. Baek committed
104 
				"
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129 
			>
				<img
					id="logo-her"
					style="width: 13rem; height: 13rem"
					src="/logo.svg"
					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
130 
							width: 0%;
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
131
132
133
134
135
136
137
138 
							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
139
Timothy J. Baek's avatar
refac: splash screen  
Timothy J. Baek committed
140
141
142 
			<!-- <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
143 
		</div>
Timothy J. Baek's avatar
chat feature added  
Timothy J. Baek committed
144
145 
	</body>
</html>
Timothy J. Baek's avatar
feat: dark splash screen  
Timothy J. Baek committed
146
147 

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

	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
195
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
196
197
198
199
200
201
202
203
204
205 
	@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
206
207
208
209
210
211
212
213 
	@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
214 
</style>