Mercurial

comparison mrjunejune/test/snapshots/tools_file_converter_index.html.snapshot @ 184:8c74204fd362

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
[MD to HTML] Updated so it can be used through readme to html
author MrJuneJune <me@mrjunejune.com>
date Fri, 23 Jan 2026 22:20:35 -0800
parents 7eb79fd91c7e
children
comparison
equal deleted inserted replaced
183:a8976a008a9d 184:8c74204fd362
1 as="font" type="font/woff" crossorigin> -->
2 <!-- <link rel="preload" href="/public/fonts/atkinson-bold.woff" as="font" type="font/woff" crossorigin> -->
3
4 <!-- <link rel="preload" href="/public/fonts/more-sugar.extras.otf" as="font" type="font/otf" crossorigin> -->
5 <link rel="preload" href="/public/fonts/more-sugar.regular.otf" as="font" type="font/otf" crossorigin>
6 <link rel="preload" href="/public/fonts/more-sugar.thin.otf" as="font" type="font/otf" crossorigin>
7 <link rel="preload" href="/public/epi_all_colors.svg" as="image">
8
9 <link rel="preload" href="/base.css" as="style" />
10 <link rel="stylesheet" href="/base.css" />
11
12
13 <style>
14 .container {
15 max-width: 800px;
16 margin: 2rem auto;
17 padding: 2rem;
18 }
19
20 .converter-section {
21 border-radius: 8px;
22 border: 2px solid var(--lightgray);
23 padding: 2rem;
24 margin-bottom: 2rem;
25 }
26
27 .converter-section h2 {
28 margin-top: 0;
29 color: var(--black);
30 }
31
32 .file-input-wrapper {
33 margin: 1rem 0;
34 }
35
36 .file-input-wrapper label {
37 display: block;
38 margin-bottom: 0.5rem;
39 font-weight: 600;
40 }
41
42 input[type="file"] {
43 padding: 0.75rem;
44 border: 2px dashed #ccc;
45 border-radius: 4px;
46 background: white;
47 font-size: 16px;
48 }
49
50 button {
51 background: var(--purple);
52 font-family: "More Thin", sans-serif;
53 color: var(--gray-gradient);
54 border: none;
55 padding: 0.75rem 1.5rem;
56 border-radius: 4px;
57 cursor: pointer;
58 font-size: 1rem;
59 margin-top: 1rem;
60 min-height: 44px;
61 }
62
63 button:hover {
64 background: var(--orange);
65 }
66
67 button:disabled {
68 background: var(--gray);
69 cursor: not-allowed;
70 }
71
72 .result {
73 margin-top: 1rem;
74 padding: 1rem;
75 background: white;
76 border-radius: 4px;
77 display: none;
78 }
79
80 .result.show {
81 display: block;
82 }
83
84 .result.success {
85 border-left: 4px solid var(--blue);
86 }
87
88 .result.error {
89 border-left: 4px solid var(--red);
90 }
91
92 .download-link {
93 display: inline-block;
94 margin-top: 0.5rem;
95 color: var(--awesome);
96 text-decoration: none;
97 }
98
99 .download-link:hover {
100 text-decoration: underline;
101 }
102
103 .loading {
104 display: none;
105 margin-top: 1rem;
106 }
107
108 .loading.show {
109 display: block;
110 }
111
112 /* Mobile responsive */
113 @media (max-width: 720px) {
114 .container {
115 padding: 1rem;
116 margin: 1rem auto;
117 }
118
119 .converter-section {
120 padding: 1.5rem 1rem;
121 }
122
123 .converter-section h2 {
124 font-size: 1.5rem;
125 }
126
127 .file-input-wrapper label {
128 font-size: 1rem;
129 }
130
131 button {
132 font-size: 1.1rem;
133 padding: 1rem 1.5rem;
134 }
135
136 .result {
137 padding: 1rem;
138 font-size: 1rem;
139 }
140 }
141 </style>
142 </head>
143 <body>
144 <style>
145 :root {
146 --header-background: var(--white);
147 --header-color: rgb(var(--black));
148 --link-hover-accent: var(--awesome);
149 }
150
151 /* Fixed icon in top left corner */
152 #themeToggle {
153 position: fixed;
154 top: 20px;
155 left: 20px;
156 background: var(--header-background);
157 display: flex;
158 align-items: center;
159 border-radius: 50%;
160 cursor: pointer;
161 z-index: 1000;
162 box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
163 transition: transform 0.2s ease;
164 }
165
166 #themeToggle:hover {
167 transform: scale(1.05);
168 }
169
170 /* Professional header */
171 header {
172 margin: auto;
173 padding: 1.5em 1em;
174 font-family: "More", sans-serif;
175 box-shadow: 0 2px 8px rgba(var(--black), 5%);
176 width: 720px;
177 max-width: calc(100% - 2em);
178 text-align: center;
179 }
180
181 header h1 {
182 margin: 0;
183 font-size: 1.8em;
184 font-weight: 700;
185 letter-spacing: -0.5px;
186 }
187
188 header h1 a {
189 text-decoration: none;
190 color: var(--header-color);
191 }
192
193 header h1 a::before {
194 display: none;
195 }
196
197 /* Mobile responsiveness */
198 @media (max-width: 720px) {
199 #themeToggle {
200 top: 15px;
201 left: 15px;
202 }
203
204 header {
205 padding: 1em;
206 }
207
208 header h1 {
209 font-size: 1.5em;
210 }
211 }
212
213 @media (max-width: 480px) {
214 #themeToggle {
215 top: 10px;
216 left: 10px;
217 }
218
219 #themeToggle img {
220 height: 40px;
221 width: 40px;
222 }
223
224 header h1 {
225 font-size: 1.3em;
226 }
227 }
228
229 #logo {
230 width: 300px;
231 }
232
233 /* 1. DEFINE THE DEFAULTS (Light Mode) */
234 :root {
235 --logo-invert: invert(0);
236 --epi-grayscale: grayscale(0) brightness(1);
237 }
238
239 /* 2. MANUAL DARK OVERRIDE */
240 html.dark {
241 --logo-invert: invert(1);
242 --epi-grayscale: grayscale(1);
243 }
244
245 /* 3. MANUAL LIGHT OVERRIDE */
246 html.light-mode {
247 --logo-invert: invert(0);
248 --epi-grayscale: brightness(2.9) grayscale(1);
249 }
250
251 /* 4. SYSTEM PREFERENCE */
252 @media (prefers-color-scheme: dark) {
253 :root:not(.light-mode) {
254 --logo-invert: invert(1);
255 }
256 }
257
258 /* 5. APPLY TO ELEMENTS */
259 #logo {
260 -webkit-filter: var(--logo-invert);
261 filter: var(--logo-invert);
262 transition: filter 0.3s ease;
263 }
264
265 .epi-logo {
266 -webkit-filter: var(--epi-grayscale);
267 filter: var(--epi-grayscale);
268 transition: filter 0.3s ease;
269 }
270 </style>
271
272 <div id="themeToggle">
273 <img id="epiChan" class="epi-logo" aria-label="Toggle dark mode" src="/public/epi_all_colors.svg" height="50" width="50">
274 </div>
275
276 <header>
277 <h1><a href="/">MrJuneJune</a></h1>
278 </header>
279 <script src="/index.js"></script>
280
281
282
283 <div class="container">
284 <h1>File Format Converter</h1>
285 <p>Convert your images and videos to different formats using FFmpeg</p>
286
287 <div class="converter-section">
288 <h2>Image to WebP Converter</h2>
289 <p>Upload an image file (PNG, JPG, GIF, etc.) to convert it to WebP format</p>
290
291 <div class="file-input-wrapper">
292 <label for="imageInput">Choose an image file:</label>
293 <input type="file" id="imageInput" accept="image/*">
294 </div>
295
296 <button id="convertImageBtn" onclick="convertImageToWebP()">Convert to WebP</button>
297
298 <div class="loading" id="imageLoading">Converting... Please wait.</div>
299
300 <div class="result" id="imageResult">
301 <p id="imageMessage"></p>
302 <a id="imageDownload" class="download-link" style="display: none;">Download WebP Image</a>
303 </div>
304 </div>
305
306 <div class="converter-section">
307 <h2>Video to MP4 Converter</h2>
308 <p>Upload a video file (AVI, MOV, MKV, etc.) to convert it to MP4 format</p>
309
310 <div class="file-input-wrapper">
311 <label for="videoInput">Choose a video file:</label>
312 <input type="file" id="videoInput" accept="video/*">
313 </div>
314
315 <button id="convertVideoBtn" onclick="convertVideoToMP4()">Convert to MP4</button>
316
317 <div class="loading" id="videoLoading">Converting... Please wait.</div>
318
319 <div class="result" id="videoResult">
320 <p id="videoMessage"></p>
321 <a id="videoDownload" class="download-link" style="display: none;">Download MP4 Video</a>
322 </div>
323 </div>
324 <div style="display: flex; align-items: center; justify-content: center; margin: 30px 0px;">
325 <small>&copy; 2026 June Park</small>
326 </div>
327
328 </div>
329 <script src="/tools/file_converter/index.js"></script>
330 </body>
331 </htmlLocation: /tools/file_converter
332