2 files changed, 35 insertions, 9 deletions
diff --git a/js/dither/dither.js b/js/dither/dither.js
index f7e549f..7bfdc13 100644
--- a/js/dither/dither.js
+++ b/js/dither/dither.js
@@ -24,6 +24,8 @@ document.getElementById('download').addEventListener('click', function() {
     const a = document.createElement('a'); // Create an anchor element
     a.href = dataUrl; // Set the href of the anchor to the data URL
     a.download = 'dithered-image.png'; // Set the download attribute to the desired file name
+    a.setAttribute('rel', 'noopener noreferrer');
+    a.setAttribute('target', '_blank');
     document.body.appendChild(a); // Append the anchor to the body
     a.click(); // Trigger a click on the anchor to start the download
     document.body.removeChild(a); // Remove the anchor from the body
diff --git a/js/dither/index.html b/js/dither/index.html
index fc06402..894cb26 100644
--- a/js/dither/index.html
+++ b/js/dither/index.html
@@ -5,33 +5,57 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Floyd-Steinberg Dithering</title>
     <style>
+        @font-face {
+            font-family: 'ChicagoFLF';
+            src: url('https://eli.li/_assets/bin/inknswitch/ChicagoFLF.ttf') format('truetype');
+            font-weight: normal;
+            font-style: normal;
+        }
         body {
-            margin: 0 auto;
             display: block;
-            padding: 2em;
-         }
+            padding: 0.25em 0.5em;
+            background-color: beige;
+            font-family: sans-serif;
+            font-size: large;
+        }
+        h1,h2 {
+            font-family: 'ChicagoFLF', sans-serif;
+            margin: 0;
+        }
+        label {
+            font-family: 'ChicagoFLF', sans-serif;
+            font-size: 1.25em;
+        }
         canvas, input, button {
-            max-width: 100%;
-            padding: 1em;
-            margin: 0 auto;
-            display: block;
-            border: 1px solid black;
+            max-width: calc(100% - 4em);
+            padding: 0;
+            border: 1px solid rgb(133, 133, 133);
+            box-sizing: border-box;
         }
         button, input[type="file"] {
+            border-radius: 7px;
             cursor: pointer;
-            padding: 1em 2em;
+            padding: 0.5em 1em;
             font-size: 1.25em;
         }
     </style>
 </head>
 <body>
+    <h1>Dither me this</h1>
     <canvas id="canvas"></canvas>
     <br>
     <br>
+    <h2>Step 1.</h2>
+    <label for="upload">Upload an image</label>
+    <br>
     <input type="file" id="upload" accept="image/*">
     <br>
     <br>
+    <h2>Step 2.</h2>
+    <label for="download">Download the image</label>
+    <br>
     <button id="download">Download Image</button>
+    <p>Note that the image processing all happens in your browser, nothing is ever uploaded to anything other than your browser.</p>
     <script src="dither.js"></script>
 </body>
 </html>