style

2025-05-28 13:55:46 -04:00
parent a99fd176e6
commit d135cdafcb
2 changed files with 36 additions and 13 deletions
@@ -1,19 +1,31 @@
-<html>
+<html data-theme="light">
-  <head> </head>
+  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="pico.min.css" />
  </head>
  <body>
-    <form id="form">
+    <main class="container">
-      <input
+      <form id="form">
-        type="text"
+        <fieldset role="group">
-        name="thing"
+          <input type="text" name="thing" placeholder="Enter barcode here..." />
-        value="TATAFFADTTFDDFTFAFDFTFFATTFDDFTDFTDDTADAAFTTFAAADFFFDTDTTDFATDDDT"
+          <button type="submit" disabled>Decode</button>
-        size="100"
+        </fieldset>
-      />
+        <small><a href="#" id="example">Try an example</a></small>
-      <button type="submit" disabled>Decode</button>
+      </form>
    </form>
-    <pre id="result"></pre>
+      <pre id="result"></pre>
    </main>
-    <a href="https://github.com/cjdenio/usps-barcode-decoder">[source]</a>
+    <footer class="container">
      <small>
        <a
          href="https://github.com/cjdenio/usps-barcode-decoder"
          class="secondary"
          >[source on GitHub]</a
        >
      </small>
    </footer>
    <script>
      WebAssembly.instantiateStreaming(fetch("imb.wasm")).then(
@@ -114,6 +126,13 @@
          });
          document.querySelector("button[type=submit]").disabled = false;
          document.getElementById("example").addEventListener("click", (e) => {
            e.preventDefault();
            document.querySelector("form input[name=thing]").value =
              "TATAFFADTTFDDFTFAFDFTFFATTFDDFTDFTDDTADAAFTTFAAADFFFDTDTTDFATDDDT";
            document.getElementById("form").requestSubmit();
          });
        }
      );
    </script>