diff --git a/www/code-39.woff b/www/code-39.woff
new file mode 100644
index 0000000..a9daeb1
Binary files /dev/null and b/www/code-39.woff differ
diff --git a/www/systemid.html b/www/systemid.html
new file mode 100644
index 0000000..cba19fd
--- /dev/null
+++ b/www/systemid.html
@@ -0,0 +1,103 @@
+<html>
+	<head>
+		<title>SystemID</title>
+    <script src="https://use.typekit.net/hsz4ulo.js"></script>
+    <script>try{Typekit.load({ async: true });}catch(e){}</script>
+    <style>
+@font-face {
+  font-family: 'code-39';
+  src: url('code-39.woff') format('woff');
+  font-weight: normal;
+  font-style: normal;
+}
+
+.barcode {
+  width: 400px;
+  height: 50px;
+  font-family: 'code-39';
+  font-size: 24px;
+}
+
+.top {
+  text-align: left;
+}
+
+.bottom {
+  text-align: right;
+}
+
+[contenteditable=true]:empty::before{
+  content: attr(placeholder);
+  color: grey;
+}
+
+@media screen {
+.sysid {
+  border: 1px dashed #AAA;
+}
+}
+
+.sysid {
+  width: 400px;
+  height: 120px;
+  font-family: 'droid-sans-mono';
+  font-size: 96px;
+  text-align: center;
+  text-transform: uppercase;
+}
+
+.sysid:focus {
+  outline: 0;
+}
+
+.block {
+  margin: 20px;
+}
+    </style>
+  </head>
+  <body>
+    <div class="block">
+      <div id="barcode0.0" class="top barcode"></div>
+      <div id="sysid0" class="sysid" contenteditable="true" placeholder="SYSID#"></div>
+      <div id="barcode0.1" class="bottom barcode"></div>
+    </div>
+
+    <div class="block">
+      <div id="barcode1.0" class="top barcode"></div>
+      <div id="sysid1" class="sysid" contenteditable="true" placeholder="SYSID#"></div>
+      <div id="barcode1.1" class="bottom barcode"></div>
+    </div>
+
+    <div class="block">
+      <div id="barcode2.0" class="top barcode"></div>
+      <div id="sysid2" class="sysid" contenteditable="true" placeholder="SYSID#"></div>
+      <div id="barcode2.1" class="bottom barcode"></div>
+    </div>
+
+    <script>
+"use strict";
+document.addEventListener('DOMContentLoaded', (e) => {
+  for (let i = 0; true; i++) {
+    let sysid = document.getElementById('sysid' + i);
+    if (!sysid) {
+      break;
+    }
+    let barcodes = [];
+    for (let j = 0; true; j++) {
+      let barcode = document.getElementById('barcode' + i + '.' + j);
+      if (!barcode) {
+        break;
+      }
+      barcodes.push(barcode);
+    }
+    sysid.addEventListener('input', (e) => {
+      let barcodeText = '*' + sysid.innerText.toUpperCase() + '*';
+      barcodes.forEach((barcode) => {
+        barcode.innerText = barcodeText;
+      });
+    });
+  }
+});
+    </script>
+  </body>
+</html>
