noe/noe.sh
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

add color thingo

Browse source
This commit is contained in:
41666 2024-05-02 21:02:17 -04:00
parent 060461d536
commit 4d190031b6
1 changed files with 102 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

102
-~-/what the fuck is a lightrunner/-~-/index.html Normal file
View file

@ -0,0 +1,102 @@
<!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 &lt;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") +
b.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>