PaletteSwitcher/dist/index.html

79 lines
1.9 KiB
HTML
Raw Normal View History

2021-11-21 19:12:16 +00:00
<html>
<head>
<meta charset="utf-8" />
<script src="/wasm_exec.js"></script>
<script async src="/main.js"></script>
<style>
@media (prefers-color-scheme: dark) {
body {
color: #fff;
background: #000;
}
a:link {
color: #9cf;
}
a:hover,
a:visited:hover {
color: #cef;
}
a:visited {
color: #c9f;
}
}
body {
margin: 1em auto;
max-width: 40em;
padding: 0 0.62em;
font: 1.2em/1.62 sans-serif;
}
h1,
h2,
h3 {
line-height: 1.2;
}
.container {
display: flex;
flex-direction: column;
justify-content: center;
}
#output {
max-width: 100%;
align-self: center;
}
@media print {
body {
max-width: none;
}
}
</style>
</head>
<body>
<article>
<h1>Go+Wasm image dithering tool</h1>
<aside>Featuring the Nord Color Palette</aside>
<p>
Load an image, click Go and wait (potentially for a while) for the image
to be dithered using the Nord color palette and the Floyd-Steinberg
algorithm.
</p>
<p>
Performance isn't great, as Go+Wasm only runs on a single thread. The
Wasm call also blocks the rendering (that would be fixable, though).
</p>
<p>
If you're into that sort of thing, source code is available on
<a href="https://github.com/CrispyBaguette/wasm-palette-converter"
>GitHub</a
>.
</p>
<form>
<input type="file" id="source-image" accept="image/png, image/jpeg" />
<button id="go-btn" type="button">Go</button>
</form>
<div class="container">
<img id="output" />
</div>
</article>
</body>
</html>