102 lines
2.7 KiB
HTML
102 lines
2.7 KiB
HTML
<!DOCTYPE html>
|
|
<title>base32 color</title>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
|
<link
|
|
href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible&display=swap"
|
|
rel="stylesheet"
|
|
/>
|
|
<script
|
|
src="https://cdnjs.cloudflare.com/ajax/libs/gl-matrix/3.4.2/gl-matrix-min.js"
|
|
referrerpolicy="no-referrer"
|
|
></script>
|
|
<style>
|
|
:root {
|
|
font-family: "Atkinson Hyperlegible", sans-serif;
|
|
background-color: black;
|
|
color: #efefef;
|
|
}
|
|
|
|
section {
|
|
padding: 2em;
|
|
}
|
|
|
|
#color-box {
|
|
width: 300px;
|
|
height: 300px;
|
|
background-color: var(--color);
|
|
}
|
|
</style>
|
|
|
|
<noscript>
|
|
unfortunately we need javascript to do math, please enable <333
|
|
</noscript>
|
|
<main>
|
|
<section>colors are hot</section>
|
|
<section>
|
|
<form id="form">
|
|
<input
|
|
id="input"
|
|
type="text"
|
|
maxlength="9"
|
|
minlength="9"
|
|
value="turquoise"
|
|
/>
|
|
</form>
|
|
<label for="input">9 character word (case insensitive)</label>
|
|
<button id="update">update</button>
|
|
</section>
|
|
<section>
|
|
<div id="color-box"></div>
|
|
<ul>
|
|
<li id="rgb">rgb(-1,-1,-1)</li>
|
|
<li id="hex">#HHHHHH</li>
|
|
</ul>
|
|
</section>
|
|
</main>
|
|
|
|
<script>
|
|
const inputEl = document.querySelector("#input");
|
|
const updateEl = document.querySelector("#update");
|
|
const colorBoxEl = document.querySelector("#color-box");
|
|
const hexEl = document.querySelector("#hex");
|
|
const rgbEl = document.querySelector("#rgb");
|
|
|
|
const setColor = (r, g, b) => {
|
|
colorBoxEl.setAttribute("style", `--color: rgb(${r}, ${g}, ${b})`);
|
|
hexEl.innerHTML = `#${(
|
|
r.toString(16).padStart(2, "0") +
|
|
g.toString(16).padStart(2, "0") +
|
|
b.toString(16).padStart(2, "0")
|
|
).toLowerCase()}`;
|
|
rgbEl.innerHTML = `rgb(${r}, ${g}, ${b})`;
|
|
};
|
|
|
|
const base32to8bit = (b32) => Math.round((parseInt(b32, 36) / 46655) * 255);
|
|
|
|
const inputToColor = (inputRaw) => {
|
|
const input = inputRaw + "000000000";
|
|
// Input will be 0-9A-Z,
|
|
const r = base32to8bit(input.substr(0, 3));
|
|
const g = base32to8bit(input.substr(3, 3));
|
|
const b = base32to8bit(input.substr(6, 3));
|
|
|
|
return { r, g, b };
|
|
};
|
|
|
|
const onUpdate = (event) => {
|
|
console.log("onUpdate", { event, inputEl });
|
|
const { r, g, b } = inputToColor(event.target.value);
|
|
setColor(r, g, b);
|
|
};
|
|
|
|
setTimeout(() => {
|
|
onUpdate({ target: document.querySelector("#input") });
|
|
});
|
|
|
|
inputEl.addEventListener("keyup", onUpdate);
|
|
inputEl.addEventListener("change", onUpdate);
|
|
inputEl.addEventListener("keypress", onUpdate);
|
|
inputEl.addEventListener("blur", onUpdate);
|
|
update.addEventListener("click", onUpdate.bind(null, { target: inputEl }));
|
|
</script>
|