diff --git a/a11y.js b/a11y.js new file mode 100644 index 0000000..8b8fb57 --- /dev/null +++ b/a11y.js @@ -0,0 +1,83 @@ +const accessibilityBtn = document.createElement('button'); +accessibilityBtn.id = 'accessibility-btn'; +accessibilityBtn.textContent = ''; // Set text content to empty string +accessibilityBtn.style.position = 'fixed'; +accessibilityBtn.style.bottom = '70px'; +accessibilityBtn.style.left = '20px'; +accessibilityBtn.style.backgroundColor = '#007bff'; +accessibilityBtn.style.color = '#ffffff'; +accessibilityBtn.style.padding = '10px 15px'; +accessibilityBtn.style.borderRadius = '5px'; +accessibilityBtn.style.cursor = 'pointer'; + + +const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); +svg.innerHTML = ''; +svg.setAttribute('viewBox', '0 0 100 100'); +svg.setAttribute('fill', 'currentColor'); +svg.setAttribute('width', '1.5em'); +svg.setAttribute('xmlns', 'http://www.w3.org/2000/svg'); +svg.querySelector('path').setAttribute('title', 'Accessibility Tools'); + +accessibilityBtn.appendChild(svg); + +document.body.appendChild(accessibilityBtn); + + +const accessibilityMenu = document.createElement('div'); +accessibilityMenu.id = 'accessibility-menu'; +accessibilityMenu.style.position = 'absolute'; +accessibilityMenu.style.top = `${accessibilityBtn.offsetTop + accessibilityBtn.offsetHeight}px`; +accessibilityMenu.style.left = accessibilityBtn.style.left; +accessibilityMenu.style.backgroundColor = '#fff'; +accessibilityMenu.style.border = '1px solid #ccc'; +accessibilityMenu.style.borderRadius = '5px'; +accessibilityMenu.classList.add('hidden'); +accessibilityMenu.style.padding = '10px'; + +const accessibilityOptions = ['Make Font Larger', 'Make Font Smaller', 'Set Grayscale', 'Set Negative Colors', 'Change Font to OpenDyslexic', 'Reset', "Add this button to your homepage"]; +accessibilityOptions.forEach(option => { + const button = document.createElement('button'); + button.textContent = option; + button.style.display = 'block'; // Display each button on a new line + button.style.marginBottom = '5px'; // Add spacing between buttons + accessibilityMenu.appendChild(button); +}); + +document.body.appendChild(accessibilityMenu); + + +accessibilityBtn.onclick = function() { + accessibilityMenu.classList.toggle('hidden'); +}; + + +document.querySelectorAll('#accessibility-menu button').forEach((button, index) => { + button.onclick = function() { + switch (index) { + case 0: + document.body.style.fontSize = '2em'; + break; + case 1: + document.body.style.fontSize = '0.8em'; + break; + case 2: + document.body.style.filter = 'grayscale(100%)'; + break; + case 3: + document.body.style.filter = 'invert(100%)'; + break; + case 4: + document.body.classList.add('opendyslexic'); + break; + case 5: + document.body.style.fontSize = '1.2em'; + document.body.style.filter = 'grayscale(0%)'; + document.body.style.filter = 'invert(0%)'; + document.body.style.fontFamily = 'Source Sans Pro'; + break; + case 6: + window.open("https://github.com/td00/a11y"); + } + }; +});