Mercurial

diff mrjunejune/src/tools/file_converter/index.html @ 258:60a876c4587a

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
[ui] Add semantic primitive ownership Build a layered Zenbu token and sizing system, make authored controls use native-underneath primitives, migrate mrjunejune without imposing visual surfaces, and document/enforce HTML ownership in the catalog and wiki. Co-authored-by: Copilot <[email protected]>
author MrJuneJune <me@mrjunejune.com>
date Wed, 05 Aug 2026 05:25:40 -0700
parents 3bdfffaad162
children
line wrap: on
line diff
--- a/mrjunejune/src/tools/file_converter/index.html	Tue Aug 04 16:49:11 2026 -0700
+++ b/mrjunejune/src/tools/file_converter/index.html	Wed Aug 05 05:25:40 2026 -0700
@@ -9,13 +9,13 @@
         .container {
             max-width: 800px;
             margin: 2rem auto;
-            padding: 2rem;
+            padding: var(--zenbu-sys-padding-xl);
         }
 
         .converter-section {
-            border-radius: 8px;
+            border-radius: var(--zenbu-sys-radius-control);
             border: 2px solid var(--lightgray);
-            padding: 2rem;
+            padding: var(--zenbu-sys-padding-xl);
             margin-bottom: 2rem;
         }
 
@@ -35,11 +35,11 @@
         }
 
         input[type="file"] {
-            padding: 0.75rem;
+            padding: var(--zenbu-sys-padding-sm);
             border: 2px dashed #ccc;
-            border-radius: 4px;
+            border-radius: var(--zenbu-sys-radius-control-small);
             background: white;
-            font-size: 16px;
+            font-size: var(--zenbu-sys-font-size-md);
         }
 
         button {
@@ -47,12 +47,9 @@
             font-family: "More Thin", sans-serif;
             color: var(--gray-gradient);
             border: none;
-            padding: 0.75rem 1.5rem;
-            border-radius: 4px;
+            border-radius: var(--zenbu-sys-radius-control-small);
             cursor: pointer;
-            font-size: 1rem;
             margin-top: 1rem;
-            min-height: 44px;
         }
 
         button:hover {
@@ -66,9 +63,9 @@
 
         .result {
             margin-top: 1rem;
-            padding: 1rem;
+            padding: var(--zenbu-sys-padding-md);
             background: white;
-            border-radius: 4px;
+            border-radius: var(--zenbu-sys-radius-control-small);
             display: none;
         }
 
@@ -107,30 +104,28 @@
         /* Mobile responsive */
         @media (max-width: 720px) {
             .container {
-                padding: 1rem;
+                padding: var(--zenbu-sys-padding-md);
                 margin: 1rem auto;
             }
 
             .converter-section {
-                padding: 1.5rem 1rem;
+                padding:
+                  var(--zenbu-sys-padding-lg)
+                  var(--zenbu-sys-padding-md);
             }
 
             .converter-section h2 {
-                font-size: 1.5rem;
+                font-size: var(--zenbu-sys-font-size-2xl);
             }
 
             .file-input-wrapper label {
-                font-size: 1rem;
+                font-size: var(--zenbu-sys-font-size-md);
             }
 
-            button {
-                font-size: 1.1rem;
-                padding: 1rem 1.5rem;
-            }
 
             .result {
-                padding: 1rem;
-                font-size: 1rem;
+                padding: var(--zenbu-sys-padding-md);
+                font-size: var(--zenbu-sys-font-size-md);
             }
         }
     </style>
@@ -148,10 +143,14 @@
 
             <div class="file-input-wrapper">
                 <label for="imageInput">Choose an image file:</label>
-                <input type="file" id="imageInput" accept="image/*">
+                <zen-input appearance="plain" size="md">
+                  <input type="file" id="imageInput" accept="image/*">
+                </zen-input>
             </div>
 
-            <button id="convertImageBtn" onclick="convertImageToWebP()">Convert to WebP</button>
+            <zen-button appearance="plain" size="md">
+              <button id="convertImageBtn" onclick="convertImageToWebP()">Convert to WebP</button>
+            </zen-button>
 
             <div class="loading" id="imageLoading">Converting... Please wait.</div>
 
@@ -167,10 +166,14 @@
 
             <div class="file-input-wrapper">
                 <label for="videoInput">Choose a video file:</label>
-                <input type="file" id="videoInput" accept="video/*">
+                <zen-input appearance="plain" size="md">
+                  <input type="file" id="videoInput" accept="video/*">
+                </zen-input>
             </div>
 
-            <button id="convertVideoBtn" onclick="convertVideoToMP4()">Convert to MP4</button>
+            <zen-button appearance="plain" size="md">
+              <button id="convertVideoBtn" onclick="convertVideoToMP4()">Convert to MP4</button>
+            </zen-button>
 
             <div class="loading" id="videoLoading">Converting... Please wait.</div>