diff options
Diffstat (limited to 'html')
| -rw-r--r-- | html/color-contrast-checker/index.html | 28 |
1 files changed, 27 insertions, 1 deletions
diff --git a/html/color-contrast-checker/index.html b/html/color-contrast-checker/index.html index 30a1d66..5d3b28d 100644 --- a/html/color-contrast-checker/index.html +++ b/html/color-contrast-checker/index.html @@ -11,7 +11,7 @@ .color-box { padding: 10px; text-align: center; border: 1px solid #ccc; } .hidden { display: none; } .form-controls { display: flex; justify-content: space-between; align-items: center; } - .checkbox-controls { display: flex; gap: 20px; } + .checkbox-controls { display: flex; gap: 20px; align-items: center; } </style> </head> <body> @@ -27,6 +27,7 @@ <div class="checkbox-controls"> <label><input type="checkbox" id="toggleFails" onchange="updateVisibility()"> Hide failing pairs</label> <label><input type="checkbox" id="sortContrast" onchange="updateColors()"> Sort by contrast</label> + <button type="button" onclick="shareColors()">Share Palette</button> </div> </div> </form> @@ -39,6 +40,31 @@ </footer> <script> + window.addEventListener('load', () => { + const urlParams = new URLSearchParams(window.location.search); + const colors = urlParams.get('colors'); + if (colors) { + document.getElementById('colors').value = decodeURIComponent(colors); + updateColors(); + } + }); + + function shareColors() { + const colors = document.getElementById('colors').value; + if (!colors) return; + + const encodedColors = encodeURIComponent(colors); + const url = `${window.location.origin}${window.location.pathname}?colors=${encodedColors}`; + + // Copy to clipboard + navigator.clipboard.writeText(url).then(() => { + alert('Share link copied to clipboard!'); + }).catch(() => { + // Fallback if clipboard API fails + prompt('Copy this share link:', url); + }); + } + function getContrastRatio(c1, c2) { function luminance(r, g, b) { let a = [r, g, b].map(v => { |