Created
February 17, 2024 17:34
-
-
Save lc-at/b73bc1b0869ce7dc7b774af3daf1c062 to your computer and use it in GitHub Desktop.
colortable: simple tool to help convert a color theme or anything that can be done by converting colors
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <title>colortable</title> | |
| <link | |
| rel="stylesheet" | |
| href="https://cdn.jsdelivr.net/npm/@exampledev/new.css@1/new.min.css" | |
| /> | |
| <link rel="stylesheet" href="https://fonts.xz.style/serve/inter.css" /> | |
| </head> | |
| <body> | |
| <h1>colortable</h1> | |
| <p> | |
| Simple tool that may be useful. Initially created to help me convert a | |
| color theme to another color theme. | |
| </p> | |
| <h2>(1) Input</h2> | |
| <p> | |
| <textarea | |
| id="input" | |
| rows="10" | |
| cols="50" | |
| placeholder="#000000 | |
| #ababab | |
| rgb(0,0,0)" | |
| ></textarea> | |
| <br /> | |
| <button id="btnRender" onclick="renderTable()">Render table!</button> | |
| </p> | |
| <h2>(2) The Table</h2> | |
| <table id="theTable"></table> | |
| <br /> | |
| <button id="btnGetOutput" onclick="getOutput()">Get output!</button> | |
| <h2>(3) Output</h2> | |
| <p> | |
| <textarea | |
| id="output" | |
| rows="10" | |
| cols="50" | |
| placeholder="Output" | |
| readonly | |
| ></textarea> | |
| </p> | |
| <footer> | |
| <p> | |
| Made by <a href="https://lcat.dev">ttycelery</a>. Proprietary license. Nah, just kidding. Do whatever you want with it. | |
| </p> | |
| </body> | |
| <script> | |
| function renderTable() { | |
| const input = document.getElementById("input").value; | |
| const lines = input.split("\n"); | |
| const table = document.getElementById("theTable"); | |
| table.innerHTML = ""; | |
| lines.forEach((line) => { | |
| const tr = document.createElement("tr"); | |
| const td1 = document.createElement("td"); | |
| const td2 = document.createElement("td"); | |
| const td3 = document.createElement("td"); | |
| const color = line.trim(); | |
| td1.style.width = "40%"; | |
| td1.style.height = "30%"; | |
| td1.style.backgroundColor = color; | |
| td2.textContent = color; | |
| td2.contentEditable = true; | |
| td3.style.width = "40%"; | |
| td3.style.height = "30%"; | |
| td3.style.backgroundColor = color; | |
| td2.oninput = () => { | |
| td3.style.backgroundColor = td2.textContent; | |
| }; | |
| tr.appendChild(td1); | |
| tr.appendChild(td2); | |
| tr.appendChild(td3); | |
| table.appendChild(tr); | |
| }); | |
| } | |
| function getOutput() { | |
| const table = document.getElementById("theTable"); | |
| const rows = table.getElementsByTagName("tr"); | |
| const output = document.getElementById("output"); | |
| let outputText = ""; | |
| for (let i = 0; i < rows.length; i++) { | |
| const row = rows[i]; | |
| const tds = row.getElementsByTagName("td"); | |
| const color = tds[1].textContent; | |
| outputText += color + "\n"; | |
| } | |
| output.value = outputText; | |
| } | |
| </script> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment