Mercurial

comparison mrjunejune/test/snapshots/tools_file_converter_index.html.snapshot @ 109:1c446ab6f945

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
[MrJuneJune] New Blog about writing Seobeo library.
author June Park <parkjune1995@gmail.com>
date Sat, 03 Jan 2026 19:37:51 -0800
parents 092afa595764
children d6d578b49a19
comparison
equal deleted inserted replaced
108:f07abbcd2ec5 109:1c446ab6f945
2 Content-Type: text/plain 2 Content-Type: text/plain
3 Content-Length: 0 3 Content-Length: 0
4 Connection: close 4 Connection: close
5 Body: 5 Body:
6 6
7 reload" href="/public/fonts/more-sugar.regular.otf" as="font" type="font/otf" crossorigin> 7 /woff" crossorigin>
8 <link rel="preload" href="/public/fonts/atkinson-bold.woff" as="font" type="font/woff" crossorigin>
9
10 <link rel="preload" href="/public/fonts/more-sugar.extras.otf" as="font" type="font/otf" crossorigin>
11 <link rel="preload" href="/public/fonts/more-sugar.regular.otf" as="font" type="font/otf" crossorigin>
8 <link rel="preload" href="/public/fonts/more-sugar.thin.otf" as="font" type="font/otf" crossorigin> 12 <link rel="preload" href="/public/fonts/more-sugar.thin.otf" as="font" type="font/otf" crossorigin>
9 13
10 <link rel="preload" href="/base.css" as="style" /> 14 <link rel="preload" href="/base.css" as="style" />
11 <link rel="stylesheet" href="/base.css" /> 15 <link rel="stylesheet" href="/base.css" />
12 16
13 17
14 <link rel="stylesheet" href="/tools/index.css" /> 18 <style>
15 </head> 19 .container {
16 <body> 20 max-width: 800px;
17 <style> 21 margin: 2rem auto;
22 padding: 2rem;
23 }
24
25 .converter-section {
26 border-radius: 8px;
27 border: 2px solid var(--lightgray);
28 padding: 2rem;
29 margin-bottom: 2rem;
30 }
31
32 .converter-section h2 {
33 margin-top: 0;
34 color: var(--black);
35 }
36
37 .file-input-wrapper {
38 margin: 1rem 0;
39 }
40
41 .file-input-wrapper label {
42 display: block;
43 margin-bottom: 0.5rem;
44 font-weight: 600;
45 }
46
47 input[type="file"] {
48 padding: 0.75rem;
49 border: 2px dashed #ccc;
50 border-radius: 4px;
51 background: white;
52 font-size: 16px;
53 }
54
55 button {
56 background: var(--purple);
57 font-family: "More Thin", sans-serif;
58 color: var(--gray-gradient);
59 border: none;
60 padding: 0.75rem 1.5rem;
61 border-radius: 4px;
62 cursor: pointer;
63 font-size: 1rem;
64 margin-top: 1rem;
65 min-height: 44px;
66 }
67
68 button:hover {
69 background: var(--orange);
70 }
71
72 button:disabled {
73 background: var(--gray);
74 cursor: not-allowed;
75 }
76
77 .result {
78 margin-top: 1rem;
79 padding: 1rem;
80 background: white;
81 border-radius: 4px;
82 display: none;
83 }
84
85 .result.show {
86 display: block;
87 }
88
89 .result.success {
90 border-left: 4px solid var(--blue);
91 }
92
93 .result.error {
94 border-left: 4px solid var(--red);
95 }
96
97 .download-link {
98 display: inline-block;
99 margin-top: 0.5rem;
100 color: var(--awesome);
101 text-decoration: none;
102 }
103
104 .download-link:hover {
105 text-decoration: underline;
106 }
107
108 .loading {
109 display: none;
110 margin-top: 1rem;
111 }
112
113 .loading.show {
114 display: block;
115 }
116
117 /* Mobile responsive */
118 @media (max-width: 720px) {
119 .container {
120 padding: 1rem;
121 margin: 1rem auto;
122 }
123
124 .converter-section {
125 padding: 1.5rem 1rem;
126 }
127
128 .converter-section h2 {
129 font-size: 1.5rem;
130 }
131
132 .file-input-wrapper label {
133 font-size: 1rem;
134 }
135
136 button {
137 font-size: 1.1rem;
138 padding: 1rem 1.5rem;
139 }
140
141 .result {
142 padding: 1rem;
143 font-size: 1rem;
144 }
145 }
146 </style>
147 </head>
148 <body>
149 <style>
18 :root { 150 :root {
19 --header-background: var(--white); 151 --header-background: var(--white);
20 --header-color: rgb(var(--black)); 152 --header-color: rgb(var(--black));
21 --link-hover-accent: var(--awesome); 153 --link-hover-accent: var(--awesome);
22 } 154 }
150 <h1><a href="/">MrJuneJune</a></h1> 282 <h1><a href="/">MrJuneJune</a></h1>
151 </header> 283 </header>
152 <script src="/index.js"></script> 284 <script src="/index.js"></script>
153 285
154 286
155 <main> 287
156 <h1 class="title"> Tools </h1> 288 <div class="container">
157 <ul class="nav-list"> 289 <h1>File Format Converter</h1>
158 <li><a href="/tools/markdown_to_html">MarkDown to HTML</a></li> 290 <p>Convert your images and videos to different formats using FFmpeg</p>
159 <li><a href="/tools/file_converter">Images to Webp / Video to Mp4</a></li> 291
160 </ul> 292 <div class="converter-section">
161 <h3> TODOs </h3> 293 <h2>Image to WebP Converter</h2>
162 <p> Probably should add this... </p> 294 <p>Upload an image file (PNG, JPG, GIF, etc.) to convert it to WebP format</p>
163 <ul class="nav-list"> 295
164 <li>- Simple online LaTex editor.</li> 296 <div class="file-input-wrapper">
165 <li>- Online HLS player.</li> 297 <label for="imageInput">Choose an image file:</label>
166 </ul> 298 <input type="file" id="imageInput" accept="image/*">
167 </main> 299 </div>
168 <div style="display: flex; align-items: center; justify-content: center; margin: 30px 0px;"> 300
301 <button id="convertImageBtn" onclick="convertImageToWebP()">Convert to WebP</button>
302
303 <div class="loading" id="imageLoading">Converting... Please wait.</div>
304
305 <div class="result" id="imageResult">
306 <p id="imageMessage"></p>
307 <a id="imageDownload" class="download-link" style="display: none;">Download WebP Image</a>
308 </div>
309 </div>
310
311 <div class="converter-section">
312 <h2>Video to MP4 Converter</h2>
313 <p>Upload a video file (AVI, MOV, MKV, etc.) to convert it to MP4 format</p>
314
315 <div class="file-input-wrapper">
316 <label for="videoInput">Choose a video file:</label>
317 <input type="file" id="videoInput" accept="video/*">
318 </div>
319
320 <button id="convertVideoBtn" onclick="convertVideoToMP4()">Convert to MP4</button>
321
322 <div class="loading" id="videoLoading">Converting... Please wait.</div>
323
324 <div class="result" id="videoResult">
325 <p id="videoMessage"></p>
326 <a id="videoDownload" class="download-link" style="display: none;">Download MP4 Video</a>
327 </div>
328 </div>
329 <div style="display: flex; align-items: center; justify-content: center; margin: 30px 0px;">
169 <small>&copy; 2026 June Park</small> 330 <small>&copy; 2026 June Park</small>
170 </div> 331 </div>
171 332
172 </body> 333 </div>
173 </htmlLocation: /tools/file_converter 334 <script src="/tools/file_converter/index.js"></script>
174 335 </body>
336 </htmlLocation: /tools/markdown_to_html
337 Location: /tools/file_converter
338