diff options
| author | elioat <elioat@tilde.institute> | 2024-06-29 21:23:05 -0400 |
|---|---|---|
| committer | elioat <elioat@tilde.institute> | 2024-06-29 21:23:05 -0400 |
| commit | 3900b10bd2eb73d9a3b2e52973b89546b4ec43ee (patch) | |
| tree | 19433f767723e9b386f0de3e2b9d4776f334f429 /js/dither/index.html | |
| parent | 18062ebd2bdc5d090676e6f606c33299b665f6cb (diff) | |
| download | tour-3900b10bd2eb73d9a3b2e52973b89546b4ec43ee.tar.gz | |
*
Diffstat (limited to 'js/dither/index.html')
| -rw-r--r-- | js/dither/index.html | 42 |
1 files changed, 33 insertions, 9 deletions
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> |