diff options
| author | elioat <{ID}+{username}@users.noreply.github.com> | 2025-02-10 15:39:07 -0500 |
|---|---|---|
| committer | elioat <{ID}+{username}@users.noreply.github.com> | 2025-02-10 15:39:07 -0500 |
| commit | 935de61556e3711e73646bf7aa0c75544c985759 (patch) | |
| tree | dcec4c5d9f20803cc68abd75237139e934916fc6 | |
| parent | 191c64514ee6d740d2cc8d35f955ff721f83c128 (diff) | |
| download | tour-935de61556e3711e73646bf7aa0c75544c985759.tar.gz | |
*
| -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 => { |