diff options
| author | elioat <{ID}+{username}@users.noreply.github.com> | 2025-02-10 16:52:03 -0500 |
|---|---|---|
| committer | elioat <{ID}+{username}@users.noreply.github.com> | 2025-02-10 16:52:03 -0500 |
| commit | 445a6619ecda4210b1b0454c4332360f37396fd1 (patch) | |
| tree | 4993ee136927f7e56dc2c7468722d57f85199248 /html | |
| parent | b14fa3e07e3641d56173f8948fc0db34cc943180 (diff) | |
| download | tour-445a6619ecda4210b1b0454c4332360f37396fd1.tar.gz | |
*
Diffstat (limited to 'html')
| -rw-r--r-- | html/ccc/index.html | 71 |
1 files changed, 66 insertions, 5 deletions
diff --git a/html/ccc/index.html b/html/ccc/index.html index 2b3b0cd..b3ebfa2 100644 --- a/html/ccc/index.html +++ b/html/ccc/index.html @@ -4,6 +4,7 @@ <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Color Contrast Checker</title> + <meta name="description" content="Give it a list of colors, find accessible combinations."> <style> body { font-family: Arial, sans-serif; padding: 20px; } .color-input { margin-bottom: 10px; width: 100%; height: 100px; } @@ -21,6 +22,15 @@ margin: 1rem 0; grid-column: 1 / -1; } + .warning { + color: #856404; + background-color: #fff3cd; + border: 1px solid #ffeeba; + padding: 1rem; + border-radius: 4px; + margin: 1rem 0; + grid-column: 1 / -1; + } </style> </head> <body> @@ -50,6 +60,7 @@ </footer> <script> + // ===== Initialization and URL Parameter Handling ===== window.addEventListener('load', () => { const urlParams = new URLSearchParams(window.location.search); const colors = urlParams.get('colors'); @@ -57,8 +68,14 @@ document.getElementById('colors').value = decodeURIComponent(colors); updateColors(); } + + // Only create test UI if tests parameter is present and true + if (urlParams.get('tests') === 'true' || urlParams.get('tests') === 't') { + createTestUI(); + } }); + // ===== Share Functionality ===== function shareColors() { const colors = document.getElementById('colors').value; if (!colors) return; @@ -75,6 +92,7 @@ }); } + // ===== Color Parsing and Conversion ===== function parseColor(color) { // Remove all whitespace and convert to lowercase const originalColor = color; // Store original format @@ -150,6 +168,7 @@ return `#${toHex(r)}${toHex(g)}${toHex(b)}`; } + // ===== Contrast Calculation and WCAG Compliance ===== function getContrastRatio(color1, color2) { function luminance(r, g, b) { let a = [r, g, b].map(v => { @@ -189,6 +208,7 @@ return "Fail"; } + // ===== UI Generation and Updates ===== function createColorBox(color1, color2, contrast, level, accessible, showGlow) { const classes = ["color-box"]; if (!accessible) classes.push("failing"); @@ -208,12 +228,13 @@ function updateColors() { const input = document.getElementById("colors").value; + const results = document.getElementById("results"); // First split by newlines const colorLines = input.split(/\n+/).map(line => line.trim()).filter(line => line); // Then process each line to handle both comma-separated values and rgb/rgba formats - const colors = colorLines.flatMap(line => { + let colors = colorLines.flatMap(line => { // Temporary replace commas in rgb/rgba values with a special marker line = line.replace(/rgba?\([^)]+\)/g, match => match.replace(/,/g, '|')); @@ -223,7 +244,28 @@ .filter(color => color); }); - const results = document.getElementById("results"); + // Clear any existing warnings + document.querySelectorAll('.warning').forEach(el => el.remove()); + + // Deduplicate colors by converting to a standard format and back + colors = [...new Set(colors.map(color => { + try { + const parsed = parseColor(color); + return parsed.originalFormat; + } catch (error) { + return color; // Keep invalid colors for error handling + } + }))]; + + const duplicates = findDuplicateColors(colors); + if (duplicates.length > 0) { + console.warn('Duplicate colors found:', duplicates); + // Show warning in UI + const warning = document.createElement('div'); + warning.className = 'warning'; + warning.textContent = `Duplicate colors found (${duplicates.join(', ')})`; + results.insertAdjacentElement('beforebegin', warning); + } try { const colorCombinations = colors.flatMap((color1, i) => @@ -256,6 +298,27 @@ } } + function findDuplicateColors(colors) { + const seen = new Map(); + const duplicates = new Set(); + + colors.forEach(color => { + try { + const parsed = parseColor(color); + const normalized = `rgb(${parsed.r},${parsed.g},${parsed.b},${parsed.a})`; + + if (seen.has(normalized)) { + duplicates.add(color); + } + seen.set(normalized, color); + } catch (error) { + // Ignore invalid colors + } + }); + + return Array.from(duplicates); + } + function updateVisibility() { let hideFails = document.getElementById("toggleFails").checked; @@ -264,6 +327,7 @@ }); } + // ===== Testing Functions ===== function runContrastTests() { const testCases = [ { @@ -494,9 +558,6 @@ <p>Validation Tests: ${validationResults.passed}/${validationResults.total} passed</p> `; } - - // Initialize test UI when page loads - window.addEventListener('load', createTestUI); </script> </body> </html> |