Mercurial

diff 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
line wrap: on
line diff
--- a/mrjunejune/test/snapshots/tools_index.html.snapshot	Sat Jan 03 17:29:12 2026 -0800
+++ b/mrjunejune/test/snapshots/tools_index.html.snapshot	Sat Jan 03 19:37:51 2026 -0800
@@ -4,7 +4,8 @@
 Connection: close
 Body: 
 
-="font/woff" crossorigin>
+"font/woff" crossorigin>
+<link rel="preload" href="/public/fonts/atkinson-bold.woff" as="font" type="font/woff" crossorigin>
 
 <link rel="preload" href="/public/fonts/more-sugar.extras.otf" as="font" type="font/otf" crossorigin>
 <link rel="preload" href="/public/fonts/more-sugar.regular.otf" as="font" type="font/otf" crossorigin>
@@ -14,104 +15,7 @@
 <link rel="stylesheet" href="/base.css" />
 
 
-    <style>
-        .container {
-            max-width: 800px;
-            margin: 2rem auto;
-            padding: 2rem;
-        }
-
-        .converter-section {
-            border-radius: 8px;
-            border: 2px solid var(--lightgray);
-            padding: 2rem;
-            margin-bottom: 2rem;
-        }
-
-        .converter-section h2 {
-            margin-top: 0;
-            color: var(--black);
-        }
-
-        .file-input-wrapper {
-            margin: 1rem 0;
-        }
-
-        .file-input-wrapper label {
-            display: block;
-            margin-bottom: 0.5rem;
-            font-weight: 600;
-        }
-
-        input[type="file"] {
-            width: 50%;
-            padding: 0.5rem;
-            border: 2px dashed #ccc;
-            border-radius: 4px;
-            background: white;
-        }
-
-        button {
-            background: var(--purple);
-            font-family: "More Thin", sans-serif;
-            color: var(--gray-gradient);
-            border: none;
-            padding: 0.75rem 1.5rem;
-            border-radius: 4px;
-            cursor: pointer;
-            font-size: 1rem;
-            margin-top: 1rem;
-        }
-
-        button:hover {
-            background: var(--orange);
-        }
-
-        button:disabled {
-            background: var(--gray);
-            cursor: not-allowed;
-        }
-
-        .result {
-            margin-top: 1rem;
-            padding: 1rem;
-            background: white;
-            border-radius: 4px;
-            display: none;
-        }
-
-        .result.show {
-            display: block;
-        }
-
-        .result.success {
-            border-left: 4px solid var(--blue);
-        }
-
-        .result.error {
-            border-left: 4px solid var(--red);
-        }
-
-        .download-link {
-            display: inline-block;
-            margin-top: 0.5rem;
-            color: var(--awesome);
-            text-decoration: none;
-        }
-
-        .download-link:hover {
-            text-decoration: underline;
-        }
-
-        .loading {
-            display: none;
-            margin-top: 1rem;
-        }
-
-        .loading.show {
-            display: block;
-        }
-    </style>
+    <link rel="stylesheet" href="markdown_to_html/index.css" />
 </head>
 <body>
     <style>
@@ -252,58 +156,131 @@
 <script src="/index.js"></script>
 
 
-
+    <div class="header">
+        <h1>Markdown to HTML Converter</h1>
+    </div>
+    
     <div class="container">
-        <h1>File Format Converter</h1>
-        <p>Convert your images and videos to different formats using FFmpeg</p>
+        <div class="panel">
+            <div class="label">Markdown Input</div>
+            <textarea id="input" placeholder="Type your markdown here..."># Welcome to Markdown Converter
+
+## Features
+
+This converter supports:
 
-        <div class="converter-section">
-            <h2>Image to WebP Converter</h2>
-            <p>Upload an image file (PNG, JPG, GIF, etc.) to convert it to WebP format</p>
+- **Bold text** and *italic text*
+- [Links](https://example.com)
+- `inline code`
+- ~~strikethrough~~
+
+### Lists
+
+1. Ordered lists
+2. Like this one
+3. With numbers
 
-            <div class="file-input-wrapper">
-                <label for="imageInput">Choose an image file:</label>
-                <input type="file" id="imageInput" accept="image/*">
-            </div>
+- Unordered lists
+- Use dashes
+- Or asterisks
+
+### Code Blocks
+
+```
+function example() {
+    return "Hello World";
+}
+```
+
+### Blockquotes
 
-            <button id="convertImageBtn" onclick="convertImageToWebP()">Convert to WebP</button>
+> This is a blockquote
+> It can span multiple lines
 
-            <div class="loading" id="imageLoading">Converting... Please wait.</div>
+---
+
+### Images
 
-            <div class="result" id="imageResult">
-                <p id="imageMessage"></p>
-                <a id="imageDownload" class="download-link" style="display: none;">Download WebP Image</a>
+![Alt text](https://via.placeholder.com/150)
+
+**Try editing this text!**</textarea>
+        </div>
+        
+        <div class="panel">
+            <div class="title">
+              <div class="label">HTML Output</div>
+              <button id="copy"> Copy </button>
             </div>
+            <div id="output"></div>
         </div>
-
-        <div class="converter-section">
-            <h2>Video to MP4 Converter</h2>
-            <p>Upload a video file (AVI, MOV, MKV, etc.) to convert it to MP4 format</p>
-
-            <div class="file-input-wrapper">
-                <label for="videoInput">Choose a video file:</label>
-                <input type="file" id="videoInput" accept="video/*">
-            </div>
-
-            <button id="convertVideoBtn" onclick="convertVideoToMP4()">Convert to MP4</button>
-
-            <div class="loading" id="videoLoading">Converting... Please wait.</div>
-
-            <div class="result" id="videoResult">
-                <p id="videoMessage"></p>
-                <a id="videoDownload" class="download-link" style="display: none;">Download MP4 Video</a>
-            </div>
-        </div>
-        <div style="display: flex; align-items: center; justify-content: center; margin: 30px 0px;">
+    </div>
+    <div style="display: flex; align-items: center; justify-content: center; margin: 30px 0px;">
   <small>&copy; 2026 June Park</small>
 </div>
 
-    </div>
-    <script src="/tools/file_converter/index.js"></script>
+    <script src="/markdown_to_html.js"></script>
+    <script>
+        function convert() {
+          output.innerHTML = '';
+          const markdown = input.value;
+          renderMarkdown(output, markdown);
+        }
+        input.addEventListener('input', convert);
+        
+        convert();
+
+        copy.addEventListener('click', () => {
+          const htmlBlob = new Blob([output.innerHTML], { type: 'text/html'});
+          const textBlob = new Blob([output.innerText], { type: 'text/plain'});
+          const data = [new ClipboardItem({
+            'text/html': htmlBlob,
+            'text/plain': textBlob
+          })];
+          navigator.clipboard.write(data).then(() => {
+            copy.textContent = "Copied!";
+            setTimeout(() => {
+              copy.textContent = "Copy";
+              copy.classList.remove('success');
+            }, 1000);
+          }).catch(err => {
+            console.error('Failed to copy: ', err);
+          });
+        });
+    </script>
 </body>
-</htmlLocation: /tools
+</htmlLocation: /
 
-ition-style">SOFTWARE ENGINEER</p>
+ <p> 
+          <span class="entry-title-style">Tools & Platforms:</span>
+          <span class="skill-type-style">Bazel, PostgresSQL, Mercurial, Git, Pands, Raylib, XCode</span>
+        </p>
+        <p>
+          <span class="entry-title-style"> Web Frameworks: </span>
+          <span class="skill-type-style"> Django, Rails, React, Flask</span>
+        </p>
+        <p>
+          <span class="entry-title-style"> DevOp:</span>
+          <span class="skill-type-style"> Plummi, Heroku, DigitalOcean, AWS, Google Cloud </span>
+        </p>
+        <p>
+          <span class="entry-title-style"> Language:</span>
+          <span class="skill-type-style"> English, Korean, Japanese </span>
+        </p>
+      </div>
+
+      <!-- Experiences -->
+     <div class="sub-header">
+        <h2 class="section-style"> Experience </h2>
+        <div class="line"></div>
+      </div>
+      <div class="flex-box">
+        <p class="entry-title-style">
+          <a href="https://www.meta.com/">Meta</a>
+        </p>
+        <p class="entry-location-style">San Francisco, CA, USA</p>
+      </div>
+      <div class="flex-box">
+        <p class="entry-position-style">SOFTWARE ENGINEER</p>
         <p class="entry-date-style">Oct, 2024 - Present</p>
       </div>
       <ul class="description-style">
@@ -465,4 +442,6 @@
 
     <script href="index.js"></script>
   </body>
-</html>
+</htmlLocation: /resume
+Location: /tools
+