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>