Mercurial

comparison mrjunejune/test/snapshots/tools_markdown_to_html_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 t/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>
8 <link rel="preload" href="/public/fonts/more-sugar.regular.otf" as="font" type="font/otf" crossorigin> 11 <link rel="preload" href="/public/fonts/more-sugar.regular.otf" as="font" type="font/otf" crossorigin>
9 <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>
10 13
11 <link rel="preload" href="/base.css" as="style" /> 14 <link rel="preload" href="/base.css" as="style" />
12 <link rel="stylesheet" href="/base.css" /> 15 <link rel="stylesheet" href="/base.css" />
13 16
14 17
15 <style> 18 <style>
16 .epi-photo { 19 .container {
17 display: flex; 20 max-width: 800px;
18 justify-content: center; 21 margin: 2rem auto;
19 margin-bottom: 10px; 22 padding: 2rem;
20 } 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 }
21 </style> 146 </style>
22 </head> 147 </head>
23 <body> 148 <body>
24 <style> 149 <style>
25 :root { 150 :root {
26 --header-background: var(--white); 151 --header-background: var(--white);
27 --header-color: rgb(var(--black)); 152 --header-color: rgb(var(--black));
28 --link-hover-accent: var(--awesome); 153 --link-hover-accent: var(--awesome);
29 } 154 }
157 <h1><a href="/">MrJuneJune</a></h1> 282 <h1><a href="/">MrJuneJune</a></h1>
158 </header> 283 </header>
159 <script src="/index.js"></script> 284 <script src="/index.js"></script>
160 285
161 286
162 <main> 287
163 <p>Hi, my name is Juntae, but most people call me June or MrJuneJune.</p> 288 <div class="container">
164 289 <h1>File Format Converter</h1>
165 <p>I am a software engineer with experience spanning a wide range of companies, from small startups to FAANGs....</p> 290 <p>Convert your images and videos to different formats using FFmpeg</p>
166 <p>I know it is lame to work for them, but I have a dog so I need to put foods on my table.</p> 291
167 292 <div class="converter-section">
168 <div class="epi-photo"> 293 <h2>Image to WebP Converter</h2>
169 <img id="currentPhoto" style="opacity: 0; transition: opacity 0.2s;" /> 294 <p>Upload an image file (PNG, JPG, GIF, etc.) to convert it to WebP format</p>
170 </div> 295
171 296 <div class="file-input-wrapper">
172 <p>During my free time, I like to write codes mostly in C, Python, and Typescript. All in mono repo styles using mercurial and bazel. (I know that is mentally ill...)</p> 297 <label for="imageInput">Choose an image file:</label>
173 <p>Feel free to check it out. My bad code..</p> 298 <input type="file" id="imageInput" accept="image/*">
174 299 </div>
175 <h2>Links</h2> 300
176 <ul> 301 <button id="convertImageBtn" onclick="convertImageToWebP()">Convert to WebP</button>
177 <li><a href="https://zenbu.babocoder.com/file/tip">Repository</a> - Check out my monorepo code</li> 302
178 <li><a href="/resume">Resume</a> - My professional experiences </li> 303 <div class="loading" id="imageLoading">Converting... Please wait.</div>
179 <li><a href="/tools">Tools</a> - Tools </li> 304
180 <!-- <li><a href="/blogs">Blogs</a> - Personal Blogs where I rant </li> --> 305 <div class="result" id="imageResult">
181 </ul> 306 <p id="imageMessage"></p>
182 </main> 307 <a id="imageDownload" class="download-link" style="display: none;">Download WebP Image</a>
183 <div style="display: flex; align-items: center; justify-content: center; margin: 30px 0px;"> 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;">
184 <small>&copy; 2026 June Park</small> 330 <small>&copy; 2026 June Park</small>
185 </div> 331 </div>
186 332
187 </body> 333 </div>
188 <script> 334 <script src="/tools/file_converter/index.js"></script>
189 let arr = Array.from({ length: 18 }, (_, i) => i+1); 335 </body>
190 function setRandomImages() { 336 </htmlLocation: /tools/markdown_to_html
191 const randomIndex = Math.floor(Math.random() * arr.length); 337
192 const pos = arr[randomIndex];
193 currentPhoto.src = `/public/epi-photos/webp/${pos}.webp`;
194 currentPhoto.onload = () => {
195 currentPhoto.style.opacity = "1";
196 };
197 setTimeout(() => setRandomImages(), 1000);
198 }
199 setRandomImages();
200 </script>
201 </htmlLocation: /
202 Location: /resume
203 Location: /tools/markdown_to_html
204