Mercurial

comparison mrjunejune/test/snapshots/tools_file_converter.snapshot @ 256:30c2196d03d4

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
[site] Integrate Zenbu themes and components Co-authored-by: Copilot <[email protected]>
author MrJuneJune <me@mrjunejune.com>
date Tue, 04 Aug 2026 16:49:01 -0700
parents 1c0878eb17de
children 60a876c4587a
comparison
equal deleted inserted replaced
255:5ec271d612ae 256:30c2196d03d4
4 <meta charset="UTF-8"> 4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>File Format Converter</title> 6 <title>File Format Converter</title>
7 <meta charset="UTF-8"> 7 <meta charset="UTF-8">
8 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 8 <meta name="viewport" content="width=device-width, initial-scale=1.0">
9 <meta name="theme-color" content="#f7f3e8">
9 <link rel="icon" type="image/svg+xml" href="/public/epi_all_colors.svg"> 10 <link rel="icon" type="image/svg+xml" href="/public/epi_all_colors.svg">
11 <link rel="manifest" href="/public/manifest.json">
12 <link rel="apple-touch-icon" href="/public/epi_all_colors.svg">
10 13
11 <link rel="preload" href="/public/fonts/Roboto-Regular.ttf" as="font" crossorigin> 14 <link rel="preload" href="/public/fonts/Roboto-Regular.ttf" as="font" crossorigin>
12 <link rel="preload" href="/public/fonts/Roboto-Thin.ttf"as="font" crossorigin> 15 <link rel="preload" href="/public/fonts/Roboto-Thin.ttf"as="font" crossorigin>
13 16
14 <!-- <link rel="preload" href="/public/fonts/atkinson-regular.woff" as="font" type="font/woff" crossorigin> --> 17 <!-- <link rel="preload" href="/public/fonts/atkinson-regular.woff" as="font" type="font/woff" crossorigin> -->
17 <!-- <link rel="preload" href="/public/fonts/more-sugar.extras.otf" as="font" type="font/otf" crossorigin> --> 20 <!-- <link rel="preload" href="/public/fonts/more-sugar.extras.otf" as="font" type="font/otf" crossorigin> -->
18 <link rel="preload" href="/public/fonts/more-sugar.regular.otf" as="font" type="font/otf" crossorigin> 21 <link rel="preload" href="/public/fonts/more-sugar.regular.otf" as="font" type="font/otf" crossorigin>
19 <link rel="preload" href="/public/fonts/more-sugar.thin.otf" as="font" type="font/otf" crossorigin> 22 <link rel="preload" href="/public/fonts/more-sugar.thin.otf" as="font" type="font/otf" crossorigin>
20 <link rel="preload" href="/public/epi_all_colors.svg" as="image"> 23 <link rel="preload" href="/public/epi_all_colors.svg" as="image">
21 24
25 <link rel="stylesheet" href="/public/design-system/styles/tokens.css" />
26 <link rel="stylesheet" href="/public/design-system/styles/themes.css" />
22 <link rel="preload" href="/base.css" as="style" /> 27 <link rel="preload" href="/base.css" as="style" />
23 <link rel="stylesheet" href="/base.css" /> 28 <link rel="stylesheet" href="/base.css" />
24 29 <link rel="stylesheet" href="/public/design-system/styles/components.css" />
30 <script
31 type="module"
32 src="/public/design-system/components/index.js"
33 ></script>
34
35 <script src="/public/pwa-register.js" defer></script>
25 36
26 <style> 37 <style>
27 .container { 38 .container {
28 max-width: 800px; 39 max-width: 800px;
29 margin: 2rem auto; 40 margin: 2rem auto;
155 </head> 166 </head>
156 <body> 167 <body>
157 <style> 168 <style>
158 :root { 169 :root {
159 --header-background: var(--white); 170 --header-background: var(--white);
160 --header-color: rgb(var(--black)); 171 --header-color: var(--black);
161 --link-hover-accent: var(--awesome); 172 --link-hover-accent: var(--awesome);
162 } 173 }
163 174
164 /* Fixed icon in top left corner */ 175 #themeControl {
165 #themeToggle {
166 position: fixed; 176 position: fixed;
167 top: 20px; 177 top: 20px;
168 left: 20px; 178 left: 20px;
169 background: var(--header-background);
170 display: flex;
171 align-items: center;
172 border-radius: 50%;
173 cursor: pointer;
174 z-index: 1000; 179 z-index: 1000;
175 box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
176 transition: transform 0.2s ease; 180 transition: transform 0.2s ease;
177 } 181 }
178 182
179 #themeToggle:hover { 183 #themeControl:hover {
180 transform: scale(1.05); 184 transform: scale(1.05);
185 }
186
187 #themeToggle {
188 flex-direction: column;
189 min-width: 4.5rem;
190 padding: 0.35rem;
191 border-radius: 1.5rem;
192 }
193
194 #themeName {
195 font-family: "More", sans-serif;
196 font-size: 0.65rem;
197 line-height: 1;
181 } 198 }
182 199
183 /* Professional header */ 200 /* Professional header */
184 header { 201 header {
185 margin: auto; 202 margin: auto;
186 padding: 1.5em 1em; 203 padding: 1.5em 1em;
187 font-family: "More", sans-serif; 204 font-family: "More", sans-serif;
188 box-shadow: 0 2px 8px rgba(var(--black), 5%); 205 box-shadow: var(--zen-shadow-sm);
189 width: 720px; 206 width: 720px;
190 max-width: calc(100% - 2em); 207 max-width: calc(100% - 2em);
191 text-align: center; 208 text-align: center;
192 } 209 }
193 210
207 display: none; 224 display: none;
208 } 225 }
209 226
210 /* Mobile responsiveness */ 227 /* Mobile responsiveness */
211 @media (max-width: 720px) { 228 @media (max-width: 720px) {
212 #themeToggle { 229 #themeControl {
213 top: 15px; 230 top: 15px;
214 left: 15px; 231 left: 15px;
215 } 232 }
216 233
217 header { 234 header {
222 font-size: 1.5em; 239 font-size: 1.5em;
223 } 240 }
224 } 241 }
225 242
226 @media (max-width: 480px) { 243 @media (max-width: 480px) {
227 #themeToggle { 244 #themeControl {
228 top: 10px; 245 top: 10px;
229 left: 10px; 246 left: 10px;
230 } 247 }
231 248
232 #themeToggle img { 249 #themeToggle img {
248 --logo-invert: invert(0); 265 --logo-invert: invert(0);
249 --epi-grayscale: grayscale(0) brightness(1); 266 --epi-grayscale: grayscale(0) brightness(1);
250 } 267 }
251 268
252 /* 2. MANUAL DARK OVERRIDE */ 269 /* 2. MANUAL DARK OVERRIDE */
253 html.dark { 270 html[data-zen-theme="ink"] {
254 --logo-invert: invert(1); 271 --logo-invert: invert(1);
255 --epi-grayscale: grayscale(1); 272 --epi-grayscale: grayscale(1);
256 } 273 }
257 274
258 /* 3. MANUAL LIGHT OVERRIDE */ 275 /* 3. MANUAL LIGHT OVERRIDE */
259 html.light-mode { 276 html[data-zen-theme="paper"] {
260 --logo-invert: invert(0); 277 --logo-invert: invert(0);
261 --epi-grayscale: brightness(2.9) grayscale(1); 278 --epi-grayscale: brightness(2.9) grayscale(1);
262 } 279 }
280
281 html[data-zen-theme="playful"] {
282 --logo-invert: invert(0);
283 --epi-grayscale: saturate(1.25);
284 }
263 285
264 /* 4. SYSTEM PREFERENCE */ 286 /* 4. SYSTEM PREFERENCE */
265 @media (prefers-color-scheme: dark) { 287 @media (prefers-color-scheme: dark) {
266 :root:not(.light-mode) { 288 :root:not([data-zen-theme]) {
267 --logo-invert: invert(1); 289 --logo-invert: invert(1);
268 } 290 }
269 } 291 }
270 292
271 /* 5. APPLY TO ELEMENTS */ 293 /* 5. APPLY TO ELEMENTS */
280 filter: var(--epi-grayscale); 302 filter: var(--epi-grayscale);
281 transition: filter 0.3s ease; 303 transition: filter 0.3s ease;
282 } 304 }
283 </style> 305 </style>
284 306
285 <div id="themeToggle"> 307 <zen-button id="themeControl" variant="quiet">
286 <img id="epiChan" class="epi-logo" aria-label="Toggle dark mode" src="/public/epi_all_colors.svg" height="50" width="50"> 308 <button
287 </div> 309 id="themeToggle"
310 type="button"
311 aria-label="Change site theme"
312 >
313 <img
314 id="epiChan"
315 class="epi-logo"
316 alt=""
317 src="/public/epi_all_colors.svg"
318 height="50"
319 width="50"
320 >
321 <span id="themeName" aria-live="polite">Auto</span>
322 </button>
323 </zen-button>
288 324
289 <header> 325 <header>
290 <h1><a href="/">MrJuneJune</a></h1> 326 <h1><a href="/">MrJuneJune</a></h1>
291 </header> 327 </header>
292 <script src="/index.js"></script> 328 <script src="/index.js"></script>
293
294 329
295 330
296 <div class="container"> 331 <div class="container">
297 <h1>File Format Converter</h1> 332 <h1>File Format Converter</h1>
298 <p>Convert your images and videos to different formats using FFmpeg</p> 333 <p>Convert your images and videos to different formats using FFmpeg</p>