web/webtools
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

Added hex colour
All checks were successful
/ publish (push) Successful in 1m44s
Details

Browse source
This commit is contained in:
Leon Mika 2026-01-26 11:02:33 +11:00
parent 89a6b4d062
commit 7f6dcac154
5 changed files with 176 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
.gitignore vendored
View file

@ -1 +1,3 @@
target/ target/
.vscode/
.idea/

37
site/hex-color/index.html Normal file
View file

@ -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>

116
site/hex-color/script.js Normal file
View file

@ -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');
}
}

20
site/hex-color/style.css Normal file
View file

@ -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;
}

1
site/index.html
View file

@ -30,6 +30,7 @@
<li><a href="/finska/">Finska Scorecard</a></li> <li><a href="/finska/">Finska Scorecard</a></li>
<li><a href="/mental-arithmatic/">Mental Arithmatic Game</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="/neon-snake/">Neon Snake</a>: vibe-coded by Google Gemini</li>
<li><a href="/hex-color/">Hex Color Converter</a></li>
</ul> </ul>
</main> </main>
</body> </body>