Mercurial

comparison mrjunejune/test/snapshots/tools_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 ="font/woff" crossorigin> 7 "font/woff" crossorigin>
8 <link rel="preload" href="/public/fonts/atkinson-bold.woff" as="font" type="font/woff" crossorigin>
8 9
9 <link rel="preload" href="/public/fonts/more-sugar.extras.otf" as="font" type="font/otf" crossorigin> 10 <link rel="preload" href="/public/fonts/more-sugar.extras.otf" as="font" type="font/otf" crossorigin>
10 <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>
11 <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>
12 13
13 <link rel="preload" href="/base.css" as="style" /> 14 <link rel="preload" href="/base.css" as="style" />
14 <link rel="stylesheet" href="/base.css" /> 15 <link rel="stylesheet" href="/base.css" />
15 16
16 17
17 <style> 18 <link rel="stylesheet" href="markdown_to_html/index.css" />
18 .container {
19 max-width: 800px;
20 margin: 2rem auto;
21 padding: 2rem;
22 }
23
24 .converter-section {
25 border-radius: 8px;
26 border: 2px solid var(--lightgray);
27 padding: 2rem;
28 margin-bottom: 2rem;
29 }
30
31 .converter-section h2 {
32 margin-top: 0;
33 color: var(--black);
34 }
35
36 .file-input-wrapper {
37 margin: 1rem 0;
38 }
39
40 .file-input-wrapper label {
41 display: block;
42 margin-bottom: 0.5rem;
43 font-weight: 600;
44 }
45
46 input[type="file"] {
47 width: 50%;
48 padding: 0.5rem;
49 border: 2px dashed #ccc;
50 border-radius: 4px;
51 background: white;
52 }
53
54 button {
55 background: var(--purple);
56 font-family: "More Thin", sans-serif;
57 color: var(--gray-gradient);
58 border: none;
59 padding: 0.75rem 1.5rem;
60 border-radius: 4px;
61 cursor: pointer;
62 font-size: 1rem;
63 margin-top: 1rem;
64 }
65
66 button:hover {
67 background: var(--orange);
68 }
69
70 button:disabled {
71 background: var(--gray);
72 cursor: not-allowed;
73 }
74
75 .result {
76 margin-top: 1rem;
77 padding: 1rem;
78 background: white;
79 border-radius: 4px;
80 display: none;
81 }
82
83 .result.show {
84 display: block;
85 }
86
87 .result.success {
88 border-left: 4px solid var(--blue);
89 }
90
91 .result.error {
92 border-left: 4px solid var(--red);
93 }
94
95 .download-link {
96 display: inline-block;
97 margin-top: 0.5rem;
98 color: var(--awesome);
99 text-decoration: none;
100 }
101
102 .download-link:hover {
103 text-decoration: underline;
104 }
105
106 .loading {
107 display: none;
108 margin-top: 1rem;
109 }
110
111 .loading.show {
112 display: block;
113 }
114 </style>
115 </head> 19 </head>
116 <body> 20 <body>
117 <style> 21 <style>
118 :root { 22 :root {
119 --header-background: var(--white); 23 --header-background: var(--white);
250 <h1><a href="/">MrJuneJune</a></h1> 154 <h1><a href="/">MrJuneJune</a></h1>
251 </header> 155 </header>
252 <script src="/index.js"></script> 156 <script src="/index.js"></script>
253 157
254 158
255 159 <div class="header">
160 <h1>Markdown to HTML Converter</h1>
161 </div>
162
256 <div class="container"> 163 <div class="container">
257 <h1>File Format Converter</h1> 164 <div class="panel">
258 <p>Convert your images and videos to different formats using FFmpeg</p> 165 <div class="label">Markdown Input</div>
259 166 <textarea id="input" placeholder="Type your markdown here..."># Welcome to Markdown Converter
260 <div class="converter-section"> 167
261 <h2>Image to WebP Converter</h2> 168 ## Features
262 <p>Upload an image file (PNG, JPG, GIF, etc.) to convert it to WebP format</p> 169
263 170 This converter supports:
264 <div class="file-input-wrapper"> 171
265 <label for="imageInput">Choose an image file:</label> 172 - **Bold text** and *italic text*
266 <input type="file" id="imageInput" accept="image/*"> 173 - [Links](https://example.com)
174 - `inline code`
175 - ~~strikethrough~~
176
177 ### Lists
178
179 1. Ordered lists
180 2. Like this one
181 3. With numbers
182
183 - Unordered lists
184 - Use dashes
185 - Or asterisks
186
187 ### Code Blocks
188
189 ```
190 function example() {
191 return "Hello World";
192 }
193 ```
194
195 ### Blockquotes
196
197 > This is a blockquote
198 > It can span multiple lines
199
200 ---
201
202 ### Images
203
204 ![Alt text](https://via.placeholder.com/150)
205
206 **Try editing this text!**</textarea>
207 </div>
208
209 <div class="panel">
210 <div class="title">
211 <div class="label">HTML Output</div>
212 <button id="copy"> Copy </button>
267 </div> 213 </div>
268 214 <div id="output"></div>
269 <button id="convertImageBtn" onclick="convertImageToWebP()">Convert to WebP</button>
270
271 <div class="loading" id="imageLoading">Converting... Please wait.</div>
272
273 <div class="result" id="imageResult">
274 <p id="imageMessage"></p>
275 <a id="imageDownload" class="download-link" style="display: none;">Download WebP Image</a>
276 </div>
277 </div> 215 </div>
278 216 </div>
279 <div class="converter-section"> 217 <div style="display: flex; align-items: center; justify-content: center; margin: 30px 0px;">
280 <h2>Video to MP4 Converter</h2>
281 <p>Upload a video file (AVI, MOV, MKV, etc.) to convert it to MP4 format</p>
282
283 <div class="file-input-wrapper">
284 <label for="videoInput">Choose a video file:</label>
285 <input type="file" id="videoInput" accept="video/*">
286 </div>
287
288 <button id="convertVideoBtn" onclick="convertVideoToMP4()">Convert to MP4</button>
289
290 <div class="loading" id="videoLoading">Converting... Please wait.</div>
291
292 <div class="result" id="videoResult">
293 <p id="videoMessage"></p>
294 <a id="videoDownload" class="download-link" style="display: none;">Download MP4 Video</a>
295 </div>
296 </div>
297 <div style="display: flex; align-items: center; justify-content: center; margin: 30px 0px;">
298 <small>&copy; 2026 June Park</small> 218 <small>&copy; 2026 June Park</small>
299 </div> 219 </div>
300 220
301 </div> 221 <script src="/markdown_to_html.js"></script>
302 <script src="/tools/file_converter/index.js"></script> 222 <script>
223 function convert() {
224 output.innerHTML = '';
225 const markdown = input.value;
226 renderMarkdown(output, markdown);
227 }
228 input.addEventListener('input', convert);
229
230 convert();
231
232 copy.addEventListener('click', () => {
233 const htmlBlob = new Blob([output.innerHTML], { type: 'text/html'});
234 const textBlob = new Blob([output.innerText], { type: 'text/plain'});
235 const data = [new ClipboardItem({
236 'text/html': htmlBlob,
237 'text/plain': textBlob
238 })];
239 navigator.clipboard.write(data).then(() => {
240 copy.textContent = "Copied!";
241 setTimeout(() => {
242 copy.textContent = "Copy";
243 copy.classList.remove('success');
244 }, 1000);
245 }).catch(err => {
246 console.error('Failed to copy: ', err);
247 });
248 });
249 </script>
303 </body> 250 </body>
304 </htmlLocation: /tools 251 </htmlLocation: /
305 252
306 ition-style">SOFTWARE ENGINEER</p> 253 <p>
254 <span class="entry-title-style">Tools & Platforms:</span>
255 <span class="skill-type-style">Bazel, PostgresSQL, Mercurial, Git, Pands, Raylib, XCode</span>
256 </p>
257 <p>
258 <span class="entry-title-style"> Web Frameworks: </span>
259 <span class="skill-type-style"> Django, Rails, React, Flask</span>
260 </p>
261 <p>
262 <span class="entry-title-style"> DevOp:</span>
263 <span class="skill-type-style"> Plummi, Heroku, DigitalOcean, AWS, Google Cloud </span>
264 </p>
265 <p>
266 <span class="entry-title-style"> Language:</span>
267 <span class="skill-type-style"> English, Korean, Japanese </span>
268 </p>
269 </div>
270
271 <!-- Experiences -->
272 <div class="sub-header">
273 <h2 class="section-style"> Experience </h2>
274 <div class="line"></div>
275 </div>
276 <div class="flex-box">
277 <p class="entry-title-style">
278 <a href="https://www.meta.com/">Meta</a>
279 </p>
280 <p class="entry-location-style">San Francisco, CA, USA</p>
281 </div>
282 <div class="flex-box">
283 <p class="entry-position-style">SOFTWARE ENGINEER</p>
307 <p class="entry-date-style">Oct, 2024 - Present</p> 284 <p class="entry-date-style">Oct, 2024 - Present</p>
308 </div> 285 </div>
309 <ul class="description-style"> 286 <ul class="description-style">
310 <li> 287 <li>
311 Took initiative on Channel Value Rule, targeting the 16% of ad traffic with both app and web destinations to improve value attribution and ROI. 288 Took initiative on Channel Value Rule, targeting the 16% of ad traffic with both app and web destinations to improve value attribution and ROI.
463 <small>&copy; 2026 June Park</small> 440 <small>&copy; 2026 June Park</small>
464 </div> 441 </div>
465 442
466 <script href="index.js"></script> 443 <script href="index.js"></script>
467 </body> 444 </body>
468 </html> 445 </htmlLocation: /resume
446 Location: /tools
447