Added hex colour

2026-01-26 11:02:33 +11:00 · 2026-01-26 11:02:33 +11:00 · 7f6dcac154
parent 89a6b4d062
commit 7f6dcac154
5 changed files with 176 additions and 0 deletions
--- a/.gitignore
+++ b/.gitignore
@ -1 +1,3 @@
 target/
+.vscode/
+.idea/
--- a/site/hex-color/index.html
+++ b/site/hex-color/index.html
@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Hex Color Converter - Tools</title>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css">
+  <link rel="stylesheet" href="./style.css">
+  <script src="./script.js" defer></script>
+</head>
+<body class="container">
+    <header>
+      <hgroup>
+        <h1>Hex Color Converter</h1>
+        <p>Convert hex color values to normalized RGB components</p>
+      </hgroup>
+    </header>
+    <main>
+      <button id="addHexBtn">Add Hex</button>
+
+      <table id="colorTable" class="hidden">
+        <thead>
+          <tr>
+            <th>Preview</th>
+            <th>Hex</th>
+            <th>Normalized (R, G, B, A)</th>
+            <th>Action</th>
+          </tr>
+        </thead>
+        <tbody id="colorTableBody">
+        </tbody>
+      </table>
+
+      <button id="showHiddenBtn" class="hidden secondary">Show Hidden Rows</button>
+    </main>
+</body>
+</html>
--- a/site/hex-color/script.js
+++ b/site/hex-color/script.js
@ -0,0 +1,116 @@
+async function addHexFromClipboard() {
+  try {
+    const text = await navigator.clipboard.readText();
+    const hex = text.trim();
+
+    // Parse hex color
+    const color = parseHexColor(hex);
+    if (!color) {
+      alert('Invalid hex color in clipboard. Expected format: #RRGGBB or #RRGGBBAA');
+      return;
+    }
+
+    // Add row to table
+    addColorRow(hex, color);
+
+    // Show table if hidden
+    document.getElementById('colorTable').classList.remove('hidden');
+  } catch (err) {
+    alert('Failed to read from clipboard: ' + err.message);
+  }
+}
+
+document.getElementById('addHexBtn').addEventListener('click', addHexFromClipboard);
+
+document.getElementById('showHiddenBtn').addEventListener('click', () => {
+  const rows = document.querySelectorAll('#colorTableBody tr.hidden');
+  rows.forEach(row => row.classList.remove('hidden'));
+  updateShowHiddenButton();
+});
+
+document.addEventListener('keydown', (e) => {
+  if (e.key === 'p' || e.key === 'P') {
+    addHexFromClipboard();
+  }
+});
+
+function parseHexColor(hex) {
+  // Remove leading hash if present
+  const cleanHex = hex.startsWith('#') ? hex.slice(1) : hex;
+
+  // Validate hex string (6 or 8 characters)
+  if (!/^[0-9A-Fa-f]{6}([0-9A-Fa-f]{2})?$/.test(cleanHex)) {
+    return null;
+  }
+
+  // Parse components
+  const r = parseInt(cleanHex.slice(0, 2), 16) / 255;
+  const g = parseInt(cleanHex.slice(2, 4), 16) / 255;
+  const b = parseInt(cleanHex.slice(4, 6), 16) / 255;
+  const a = cleanHex.length === 8 ? parseInt(cleanHex.slice(6, 8), 16) / 255 : 1.0;
+
+  return { r, g, b, a, hex: '#' + cleanHex };
+}
+
+function addColorRow(originalHex, color) {
+  const tbody = document.getElementById('colorTableBody');
+  const row = tbody.insertRow();
+
+  // Preview cell
+  const previewCell = row.insertCell();
+  const preview = document.createElement('div');
+  preview.style.width = '40px';
+  preview.style.height = '40px';
+  preview.style.backgroundColor = `rgba(${color.r * 255}, ${color.g * 255}, ${color.b * 255}, ${color.a})`;
+  preview.style.border = '1px solid #ccc';
+  preview.style.borderRadius = '4px';
+  previewCell.appendChild(preview);
+
+  // Hex cell
+  const hexCell = row.insertCell();
+  hexCell.textContent = color.hex;
+
+  // Normalized components cell
+  const normalizedCell = row.insertCell();
+  const normalizedText = `${color.r.toFixed(1)}, ${color.g.toFixed(1)}, ${color.b.toFixed(1)}, ${color.a.toFixed(1)}`;
+  normalizedCell.textContent = normalizedText;
+
+  // Action cell with copy and hide buttons
+  const actionCell = row.insertCell();
+
+  const copyBtn = document.createElement('button');
+  copyBtn.textContent = 'Copy';
+  copyBtn.className = 'secondary';
+  copyBtn.addEventListener('click', () => {
+    navigator.clipboard.writeText(normalizedText).then(() => {
+      const originalText = copyBtn.textContent;
+      copyBtn.textContent = 'Copied!';
+      setTimeout(() => {
+        copyBtn.textContent = originalText;
+      }, 1500);
+    }).catch(err => {
+      alert('Failed to copy: ' + err.message);
+    });
+  });
+  actionCell.appendChild(copyBtn);
+
+  const hideBtn = document.createElement('button');
+  hideBtn.textContent = 'Hide';
+  hideBtn.className = 'secondary';
+  hideBtn.addEventListener('click', () => {
+    row.classList.add('hidden');
+    updateShowHiddenButton();
+  });
+  actionCell.appendChild(hideBtn);
+}
+
+function updateShowHiddenButton() {
+  const hiddenRows = document.querySelectorAll('#colorTableBody tr.hidden');
+  const showHiddenBtn = document.getElementById('showHiddenBtn');
+
+  if (hiddenRows.length > 0) {
+    showHiddenBtn.classList.remove('hidden');
+  } else {
+    showHiddenBtn.classList.add('hidden');
+  }
+}
--- a/site/hex-color/style.css
+++ b/site/hex-color/style.css
@ -0,0 +1,20 @@
+.hidden {
+  display: none;
+}
+
+#colorTable {
+  margin-top: 2rem;
+}
+
+#colorTable button {
+  margin: 0;
+  margin-right: 0.5rem;
+}
+
+#colorTable td {
+  vertical-align: middle;
+}
+
+#showHiddenBtn {
+  margin-top: 1rem;
+}
--- a/site/index.html
+++ b/site/index.html
@ -30,6 +30,7 @@
      <li><a href="/finska/">Finska Scorecard</a></li>
      <li><a href="/mental-arithmatic/">Mental Arithmatic Game</a></li>
      <li><a href="/neon-snake/">Neon Snake</a>: vibe-coded by Google Gemini</li>
+      <li><a href="/hex-color/">Hex Color Converter</a></li>
    </ul>
  </main>
 </body>