ttycelery/index.html

## index.html
<!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>
	<!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>