From c80b4d2a7bc6b578835fa70c12d8409c0abba6a8 Mon Sep 17 00:00:00 2001 From: praboth charith Date: Wed, 1 May 2024 16:14:07 +0530 Subject: [PATCH] Version 1.2.0 release - (Stable Version) (#15) * Update README.md * responsive issue fixed * class changed to id * icons changed * text color not showing on some website issue fixed * after refresh 2-cursor triangle not loading issue fixed * after refresh active stage (1,2,3) show added * fixed triangle cursor added (pre-created) * 'reset all button' css style code position changed * code reformatted and some responsive issues fixed * version change commit * min.js file update and code formatted * icon duplicate issue fixed * user select removed * modal scrollbar colour changed * Update README.md * code reordered * min.js code updated # Version 1.2.0 release - (Stable Version) --- README.md | 31 +- accessibility-menu.js | 1439 ++++++++++++++++++++----------------- accessibility-menu.min.js | 8 +- package.json | 2 +- 4 files changed, 797 insertions(+), 683 deletions(-) diff --git a/README.md b/README.md index 5b237a3..9400cb0 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ # Accessibility Plugin -[![npm version](https://d25lcipzij17d.cloudfront.net/badge.svg?id=js&r=r&ts=1683906897&type=6e&v=1.1.0&x2=0)](https://badge.fury.io/js/accessibility-plugin) +[![npm version](https://badge.fury.io/js/accessibility-plugin.svg)](https://badge.fury.io/js/accessibility-plugin) ## Description @@ -9,7 +9,7 @@ The Accessibility Plugin is a JavaScript library that helps improve the accessib ## Features - **Invert Colors**: Inverts the colors of the page to improve readability for users with visual impairments. -- **Grayscale**: Converts the page to grayscale to improve readability for users with visual impairments. +- **Grayscale**: Converts the page grayscale to improve readability for users with visual impairments. - **Low Saturation**: Reduces the saturation of the page to improve readability for users with visual impairments. - **High Saturation**: Increases the saturation of the page to improve readability for users with visual impairments. - **Link Highlight**: Highlights all links on the page to make them easier to identify for users with visual impairments. @@ -27,7 +27,8 @@ The Accessibility Plugin is a JavaScript library that helps improve the accessib - **Reading Guide**: Makes it easier to read long lines of text by Long Highlight Cursor. - **Reset**: Resets all accessibility settings to their default values. - **Close**: Closes the accessibility menu. -- **Change Position**: You can change the position of the accessibility menu to `left`, `right`, `top` or `bottom` as User need. +- **Change Position**: You can change the position of the accessibility menu to `left`, `right`, `top` or `bottom` as User needs. +- **Save Settings**: Save the current settings to the local storage and load them when the page is reloaded. ## Installation @@ -63,27 +64,7 @@ You can use `min.js` file _as your requirement_ - In this div, you can find class `right` by **default**. You can change it to `left`, `right`, `top` or `bottom` as you need -## Example +## Preview -### default view + -![image](https://github.com/PrabothCharith/accessibility-plugin/assets/91902549/755a78db-6de1-43d7-a3f0-ec179cc39d69) -SCR-20240422-svdv -SCR-20240422-suzy -SCR-20240422-suyc - -## left -![image](https://github.com/PrabothCharith/accessibility-plugin/assets/91902549/7aa31c05-e856-4857-9cbc-774e6952b8fb) -![image](https://github.com/PrabothCharith/accessibility-plugin/assets/91902549/e6349b8f-bfc2-47c7-bd4d-0fca448cbb78) - -## right -![image](https://github.com/PrabothCharith/accessibility-plugin/assets/91902549/fc0a5a70-9456-4c52-8f5a-ffbae51e0379) -![image](https://github.com/PrabothCharith/accessibility-plugin/assets/91902549/bcf16866-1231-44be-98b4-e3e908e91c64) - -## top -![image](https://github.com/PrabothCharith/accessibility-plugin/assets/91902549/f3da4198-c796-49ae-9580-466b428d5feb) -![image](https://github.com/PrabothCharith/accessibility-plugin/assets/91902549/7fe55c42-1e3d-464a-9b04-8c77879930d2) - -## bottom -![image](https://github.com/PrabothCharith/accessibility-plugin/assets/91902549/b08a86d4-e4fd-4736-9f7a-099ada59010f) -![image](https://github.com/PrabothCharith/accessibility-plugin/assets/91902549/a965796c-8dbf-4f38-ae82-bc3f5b4793d7) diff --git a/accessibility-menu.js b/accessibility-menu.js index 1c190eb..fef7024 100644 --- a/accessibility-menu.js +++ b/accessibility-menu.js @@ -1,740 +1,772 @@ -const accessibilityMenuStyles = ` :root { - --acc_color_1: #000; - --acc_color_2: #fff; - --border_radius: 25px; +const accessibilityMenuStyles = ` + :root { + --acc_color_1: #000; + --acc_color_2: #fff; + --border_radius: 25px; } - + .hidden { - display: none !important; + display: none !important; } - - #accessibility-modal, #accessibility-modal * { - transition: all 0.3s ease 0s; - font-family: 'calibri', sans-serif; - font-size: 16px; - line-height: 1; - letter-spacing: 0; - text-align: center; + + #accessibility-modal, + #accessibility-modal * { + transition: all 0.3s ease 0s; + font-family: 'calibri', sans-serif; + font-size: 16px; + line-height: 1; + letter-spacing: 0; + text-align: center; + user-select: none; } - + #accessibility-modal { - position: fixed; - top: 5vh; - left: 0; - width: 98%; - max-width: 500px; - height: 90vh; - background: var(--acc_color_2); - z-index: 1000; - justify-content: center; - border-radius: 0 var(--border_radius) var(--border_radius) 0; - box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); - overflow: clip; - overflow-y: auto; + position: fixed; + top: 5vh; + left: 0; + width: 98%; + max-width: 500px; + height: auto; + max-height: 90vh; + background: var(--acc_color_2); + z-index: 1000; + justify-content: center; + border-radius: 0 var(--border_radius) var(--border_radius) 0; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); + overflow: clip; + display: flex; + flex-direction: column; } - + #accessibility-modal #closeBtn { - position: absolute; - width: 50px; - height: 50px; - border-radius: var(--border_radius); - background: var(--acc_color_1); - color: var(--acc_color_2); - cursor: pointer; - overflow: clip; - border: none; - outline: none; - display: flex; - justify-content: center; - align-items: center; - transform: translate(0,-4px); + position: absolute; + width: 50px; + height: 50px; + border-radius: var(--border_radius); + background: var(--acc_color_1); + color: var(--acc_color_2); + cursor: pointer; + overflow: clip; + border: none; + outline: none; + display: flex; + justify-content: center; + align-items: center; + transform: translate(0,-4px); } - + #accessibility-modal.left #closeBtn { - top: 0; - right: 0; - margin: 15px; + top: 0; + right: 0; + margin: 15px; } - + #accessibility-modal.right #closeBtn { - top: 0; - left: 0; - margin: 15px; + top: 0; + left: 0; + margin: 15px; } - + #accessibility-modal.top #closeBtn { - top: 0; - left: 0; - margin: 15px; + top: 0; + left: 0; + margin: 15px; } - + #accessibility-modal.bottom #closeBtn { - top: 0; - left: 0; - margin: 15px; + top: 0; + left: 0; + margin: 15px; } - + #accessibility-modal.left { - left: 0; - right: auto; - border-radius: 0 var(--border_radius) var(--border_radius) 0; + left: 0; + right: auto; + border-radius: 0 var(--border_radius) var(--border_radius) 0; } - + #accessibility-modal.right { - right: 0; - left: auto; - border-radius: var(--border_radius) 0 0 var(--border_radius); + right: 0; + left: auto; + border-radius: var(--border_radius) 0 0 var(--border_radius); } - + #accessibility-modal.top { - top: 0; - left: 1%; - height: auto; - max-height: 90vh; - border-radius: 0 0 var(--border_radius) var(--border_radius); + top: 0; + left: 1%; + height: auto; + max-height: 90vh; + border-radius: 0 0 var(--border_radius) var(--border_radius); } - + #accessibility-modal.bottom { - top: auto; - bottom: 0; - left: 1%; - height: auto; - max-height: 90vh; - border-radius: var(--border_radius) var(--border_radius) 0 0; + top: auto; + bottom: 0; + left: 1%; + height: auto; + max-height: 90vh; + border-radius: var(--border_radius) var(--border_radius) 0 0; } - + #accessibility-modal.close { - width: 50px; - height: 50px; - border-radius: var(--border_radius); - cursor: pointer; - box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); - overflow: clip; - margin: 5px; + width: 50px; + height: 50px; + border-radius: var(--border_radius); + cursor: pointer; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); + overflow: clip; + margin: 5px; + padding: 0; } - + #accessibility-modal.close .acc-item { - opacity: 0; + opacity: 0; } - + #accessibility-modal.close #closeBtn { - position: absolute; - width: 50px; - height: 50px; - border: none; - background: none; - color: var(--acc_color_2); - background: var(--acc_color_1); - font-size: 20px; - cursor: pointer; - margin: 0; - transform: translate(0,0); + position: absolute; + width: 50px; + height: 50px; + border: none; + background: none; + color: var(--acc_color_2); + background: var(--acc_color_1); + font-size: 20px; + cursor: pointer; + margin: 0; + transform: translate(0,0); } - + #accessibility-modal #closeBtn svg { - width: 20px; - height: 20px; + width: 20px; + height: 20px; } #accessibility-modal.close #closeBtn svg { - width: 40px; - height: 40px; + width: 40px; + height: 40px; } - + #accessibility-modal.close:hover #closeBtn { - filter: opacity(0.8); + filter: opacity(0.8); } - + #accessibility-modal #headerContent { - position: relative; - display: flex; - justify-content: center; - align-items: center; - width: calc(100% - 80px); - height: 50px; - background: var(--acc_color_1); - color: var(--acc_color_2); - border-radius: var(--border_radius); - margin: 10px 10px 10px 70px; + position: relative; + display: flex; + justify-content: center; + align-items: center; + width: calc(100% - 80px); + height: 50px; + background: var(--acc_color_1); + color: var(--acc_color_2); + border-radius: var(--border_radius); + margin: 10px 10px 10px 70px; } - + #accessibility-modal.left #headerContent { - margin: 10px 70px 10px 10px; + margin: 10px 70px 10px 10px; } - + #accessibility-modal.right #headerContent { - margin: 10px 10px 10px 70px; + margin: 10px 10px 10px 70px; } - + #accessibility-modal #headerContent p { - margin-top: 15px; - font-size: 20px; - font-weight: 600; + margin-top: 15px; + font-size: 20px; + font-weight: 600; } - + #accessibility-modal.close #headerContent { - display: none; + display: none; } - + #accessibility-tools { - display: flex; - flex-wrap: wrap; - justify-content: center; - align-items: start; - width: 100%; - height: auto; - transition: all 0.3s ease 2s; + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: start; + width: 100%; + height: auto; + transition: all 0.3s ease 2s; + overflow-y: auto; + margin-bottom: 140px; } - + + #accessibility-tools::-webkit-scrollbar { + width: 10px; + background: var(--acc_color_2); + } + + #accessibility-tools::-webkit-scrollbar-thumb { + background: var(--acc_color_1); + border-radius: 10px; + } + .acc-item { - min-width: 120px; - width: 33%; - max-width: 200px; - height: auto; - margin: 0; - cursor: pointer; + min-width: 120px; + width: 33%; + max-width: 200px; + height: auto; + margin: 0; + cursor: pointer; } - + .acc-item:hover .acc-child { - box-shadow: 0 0 5px rgba(0, 0, 0, .5); + box-shadow: 0 0 5px rgba(0, 0, 0, .5); } - + .acc-item:hover .acc-child.active { - filter: opacity(0.8); - border: 1px solid var(--acc_color_2); + filter: opacity(0.8); + border: 1px solid var(--acc_color_2); + color: var(--acc_color_2); } - + .acc-child { - position: relative; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - width: auto; - height: auto; - aspect-ratio: 1/1; - background: var(--acc_color_2); - border-radius: var(--border_radius); - margin: 10px; - padding: 10px 10px 0; - box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); - border: 1px solid var(--acc_color_1); + position: relative; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + width: auto; + height: auto; + aspect-ratio: 1/1; + background: var(--acc_color_2); + border-radius: var(--border_radius); + margin: 10px; + padding: 10px 10px 0; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); + border: 1px solid var(--acc_color_1); + color: var(--acc_color_1); } - + .acc-child.active { - background: var(--acc_color_1); - color: var(--acc_color_2); - box-shadow: none; - border: 1px solid var(--acc_color_1); + background: var(--acc_color_1); + color: var(--acc_color_2); + box-shadow: none; + border: 1px solid var(--acc_color_1); } - + .acc-progress-parent { - display: flex; - justify-content: space-between; - width: 100%; - padding-bottom: 10px; + display: flex; + justify-content: space-between; + width: 100%; + padding-bottom: 10px; } - + .acc-progress-child { - min-width: 30%; - width: 48%; - max-width: 48%; - height: 3px; - margin: 0 1%; - background: var(--acc_color_1); - border-radius: 5px; + min-width: 30%; + width: 48%; + max-width: 48%; + height: 3px; + margin: 0 1%; + background: var(--acc_color_1); + border-radius: 5px; } - + .acc-child.active .acc-progress-child { - background: var(--acc_color_2); - opacity: 0.5; + background: var(--acc_color_2); + opacity: 0.5; } - + .acc-child.active .acc-progress-child.active { - opacity: 1; + opacity: 1; } - + #accessibility-tools svg, - #accessibility-tools img{ - width: 30px; - height: 30px; - margin-bottom: 10px; + #accessibility-tools img { + width: 30px; + height: 30px; + margin-bottom: 10px; } - - .change-positions{ - display: flex; - align-items: bottom; - width: fit-content; - background: var(--acc_color_1); - border-top-right-radius: var(--border_radius); - } - - .change-positions button{ - width: auto; - height: 50px; - border: none; - background: var(--acc_color_1); - color: var(--acc_color_2); - cursor: pointer; - display: flex; - justify-content: center; - align-items: center; - aspect-ratio: 1/1; - padding: 20px; - margin: 10px; - border-radius: var(--border_radius); + + #change-positions { + display: flex; + align-items: bottom; + width: fit-content; + background: var(--acc_color_1); + border-top-right-radius: var(--border_radius); } - - .change-positions button svg{ - scale: 1.3; - fill: var(--acc_color_2); + + #change-positions button { + width: auto; + height: 50px; + border: none; + background: var(--acc_color_1); + color: var(--acc_color_2); + cursor: pointer; + display: flex; + justify-content: center; + align-items: center; + aspect-ratio: 1/1; + padding: 20px; + margin: 10px; + border-radius: var(--border_radius); } - - .change-positions button:hover{ - background: var(--acc_color_2); + + #change-positions button svg { + scale: 1.3; + fill: var(--acc_color_2); } - - .change-positions button:hover svg{ - scale: 1.8; - fill: var(--acc_color_1); + + #change-positions button:hover { + background: var(--acc_color_2); } - - .change-positions button.active{ - background: var(--acc_color_2); + + #change-positions button:hover svg { + scale: 1.8; + fill: var(--acc_color_1); } - - .change-positions button.active svg{ - fill: var(--acc_color_1); + + #change-positions button.active { + background: var(--acc_color_2); } - + + #change-positions button.active svg { + fill: var(--acc_color_1); + } + + #acc-footer { + display: flex; + flex-direction: column; + width: 100%; + position: absolute; + bottom: 0; + left: 0; + background: var(--acc_color_2); + } + + #reset-all { + width: calc(100% - 20px); + height: 50px; + background: var(--acc_color_1); + color: var(--acc_color_2); + border-radius: var(--border_radius); + cursor: pointer; + display: flex; + justify-content: center; + align-items: center; + margin: 10px; + } + + #reset-all:hover { + filter: opacity(0.8); + } + /*Accessibility Tools*/ + .invert { - filter: invert(1); + filter: invert(1); } - + .grayscale { - filter: grayscale(1); + filter: grayscale(1); } - + .low-saturation { - filter: saturate(20%); + filter: saturate(20%); } - + .high-saturation { - filter: saturate(200%); + filter: saturate(200%); } - + .underline-style-0 a { - text-decoration: none; - background: black !important; - color: yellow !important; - font-weight: bolder; + text-decoration: none; + background: black !important; + color: yellow !important; + font-weight: bolder; } - - .underline-style-0 a:hover , - .underline-style-2 a:hover , - .underline-style-1 a:hover{ - text-decoration: underline !important; + + .underline-style-0 a:hover, + .underline-style-2 a:hover, + .underline-style-1 a:hover { + text-decoration: underline !important; } - + .underline-style-1 a { - text-decoration: none; - background: #FFD740 !important; - color: #005A9C !important; - font-weight: bolder; + text-decoration: none; + background: #FFD740 !important; + color: #005A9C !important; + font-weight: bolder; } - + .underline-style-2 a { - text-decoration: none; - background: white !important; - color: black !important; - font-weight: bolder; + text-decoration: none; + background: white !important; + color: black !important; + font-weight: bolder; } .contrast-style-0 { - filter: contrast(0.5); + filter: contrast(0.5); } .contrast-style-1 { - filter: contrast(1.5); + filter: contrast(1.5); } .contrast-style-2 { - filter: contrast(2); + filter: contrast(2); } - + /*Apply Two or more filters*/ + .invert.grayscale { - filter: invert(1) grayscale(1); + filter: invert(1) grayscale(1); } .invert.low-saturation { - filter: invert(1) saturate(20%); + filter: invert(1) saturate(20%); } .invert.high-saturation { - filter: invert(1) saturate(200%); + filter: invert(1) saturate(200%); } .invert.contrast-style-0 { - filter: invert(1) contrast(0.5); + filter: invert(1) contrast(0.5); } .invert.contrast-style-1 { - filter: invert(1) contrast(1.5); + filter: invert(1) contrast(1.5); } .invert.contrast-style-2 { - filter: invert(1) contrast(2); + filter: invert(1) contrast(2); } .grayscale.low-saturation { - filter: grayscale(1) saturate(20%); + filter: grayscale(1) saturate(20%); } .grayscale.high-saturation { - filter: grayscale(1) saturate(200%); + filter: grayscale(1) saturate(200%); } .grayscale.contrast-style-0 { - filter: grayscale(1) contrast(0.5); + filter: grayscale(1) contrast(0.5); } .grayscale.contrast-style-1 { - filter: grayscale(1) contrast(1.5); + filter: grayscale(1) contrast(1.5); } .grayscale.contrast-style-2 { - filter: grayscale(1) contrast(2); + filter: grayscale(1) contrast(2); } .low-saturation.high-saturation { - filter: saturate(20%) saturate(200%); + filter: saturate(20%) saturate(200%); } .low-saturation.contrast-style-0 { - filter: saturate(20%) contrast(0.5); + filter: saturate(20%) contrast(0.5); } .low-saturation.contrast-style-1 { - filter: saturate(20%) contrast(1.5); + filter: saturate(20%) contrast(1.5); } .low-saturation.contrast-style-2 { - filter: saturate(20%) contrast(2); + filter: saturate(20%) contrast(2); } .high-saturation.contrast-style-0 { - filter: saturate(200%) contrast(0.5); + filter: saturate(200%) contrast(0.5); } .high-saturation.contrast-style-1 { - filter: saturate(200%) contrast(1.5); + filter: saturate(200%) contrast(1.5); } .high-saturation.contrast-style-2 { - filter: saturate(200%) contrast(2); + filter: saturate(200%) contrast(2); } .contrast-style-0.contrast-style-1 { - filter: contrast(0.5) contrast(1.5); + filter: contrast(0.5) contrast(1.5); } .contrast-style-0.contrast-style-2 { - filter: contrast(0.5) contrast(2); + filter: contrast(0.5) contrast(2); } .contrast-style-1.contrast-style-2 { - filter: contrast(1.5) contrast(2); + filter: contrast(1.5) contrast(2); } .invert.grayscale.low-saturation { - filter: invert(1) grayscale(1) saturate(20%); + filter: invert(1) grayscale(1) saturate(20%); } .invert.grayscale.high-saturation { - filter: invert(1) grayscale(1) saturate(200%); + filter: invert(1) grayscale(1) saturate(200%); } .invert.grayscale.contrast-style-0 { - filter: invert(1) grayscale(1) contrast(0.5); + filter: invert(1) grayscale(1) contrast(0.5); } .invert.grayscale.contrast-style-1 { - filter: invert(1) grayscale(1) contrast(1.5); + filter: invert(1) grayscale(1) contrast(1.5); } .invert.grayscale.contrast-style-2 { - filter: invert(1) grayscale(1) contrast(2); + filter: invert(1) grayscale(1) contrast(2); } .invert.low-saturation.high-saturation { - filter: invert(1) saturate(20%) saturate(200%); + filter: invert(1) saturate(20%) saturate(200%); } .invert.low-saturation.contrast-style-0 { - filter: invert(1) saturate(20%) contrast(0.5); + filter: invert(1) saturate(20%) contrast(0.5); } .invert.low-saturation.contrast-style-1 { - filter: invert(1) saturate(20%) contrast(1.5); + filter: invert(1) saturate(20%) contrast(1.5); } .invert.low-saturation.contrast-style-2 { - filter: invert(1) saturate(20%) contrast(2); + filter: invert(1) saturate(20%) contrast(2); } .invert.high-saturation.contrast-style-0 { - filter: invert(1) saturate(200%) contrast(0.5); + filter: invert(1) saturate(200%) contrast(0.5); } .invert.high-saturation.contrast-style-1 { - filter: invert(1) saturate(200%) contrast(1.5); + filter: invert(1) saturate(200%) contrast(1.5); } .invert.high-saturation.contrast-style-2 { - filter: invert(1) saturate(200%) contrast(2); + filter: invert(1) saturate(200%) contrast(2); } .invert.contrast-style-0.contrast-style-1 { - filter: invert(1) contrast(0.5) contrast(1.5); + filter: invert(1) contrast(0.5) contrast(1.5); } .invert.contrast-style-0.contrast-style-2 { - filter: invert(1) contrast(0.5) contrast(2); + filter: invert(1) contrast(0.5) contrast(2); } .invert.contrast-style-1.contrast-style-2 { - filter: invert(1) contrast(1.5) contrast(2); + filter: invert(1) contrast(1.5) contrast(2); } .grayscale.low-saturation.high-saturation { - filter: grayscale(1) saturate(20%) saturate(200%); + filter: grayscale(1) saturate(20%) saturate(200%); } .grayscale.low-saturation.contrast-style-0 { - filter: grayscale(1) saturate(20%) contrast(0.5); + filter: grayscale(1) saturate(20%) contrast(0.5); } .grayscale.low-saturation.contrast-style-1 { - filter: grayscale(1) saturate(20%) contrast(1.5); + filter: grayscale(1) saturate(20%) contrast(1.5); } .grayscale.low-saturation.contrast-style-2 { - filter: grayscale(1) saturate(20%) contrast(2); + filter: grayscale(1) saturate(20%) contrast(2); } .grayscale.high-saturation.contrast-style-0 { - filter: grayscale(1) saturate(200%) contrast(0.5); + filter: grayscale(1) saturate(200%) contrast(0.5); } .grayscale.high-saturation.contrast-style-1 { - filter: grayscale(1) saturate(200%) contrast(1.5); + filter: grayscale(1) saturate(200%) contrast(1.5); } .grayscale.high-saturation.contrast-style-2 { - filter: grayscale(1) saturate(200%) contrast(2); + filter: grayscale(1) saturate(200%) contrast(2); } .grayscale.contrast-style-0.contrast-style-1 { - filter: grayscale(1) contrast(0.5) contrast(1.5); + filter: grayscale(1) contrast(0.5) contrast(1.5); } .grayscale.contrast-style-0.contrast-style-2 { - filter: grayscale(1) contrast(0.5) contrast(2); + filter: grayscale(1) contrast(0.5) contrast(2); } .grayscale.contrast-style-1.contrast-style-2 { - filter: grayscale(1) contrast(1.5) contrast(2); + filter: grayscale(1) contrast(1.5) contrast(2); } .low-saturation.high-saturation.contrast-style-0 { - filter: saturate(20%) saturate(200%) contrast(0.5); + filter: saturate(20%) saturate(200%) contrast(0.5); } .low-saturation.high-saturation.contrast-style-1 { - filter: saturate(20%) saturate(200%) contrast(1.5); + filter: saturate(20%) saturate(200%) contrast(1.5); } .low-saturation.high-saturation.contrast-style-2 { - filter: saturate(20%) saturate(200%) contrast(2); + filter: saturate(20%) saturate(200%) contrast(2); } .low-saturation.contrast-style-0.contrast-style-1 { - filter: saturate(20%) contrast(0.5) contrast(1.5); + filter: saturate(20%) contrast(0.5) contrast(1.5); } .low-saturation.contrast-style-0.contrast-style-2 { - filter: saturate(20%) contrast(0.5) contrast(2); + filter: saturate(20%) contrast(0.5) contrast(2); } .low-saturation.contrast-style-1.contrast-style-2 { - filter: saturate(20%) contrast(1.5) contrast(2); + filter: saturate(20%) contrast(1.5) contrast(2); } .high-saturation.contrast-style-0.contrast-style-1 { - filter: saturate(200%) contrast(0.5) contrast(1.5); + filter: saturate(200%) contrast(0.5) contrast(1.5); } .high-saturation.contrast-style-0.contrast-style-2 { - filter: saturate(200%) contrast(0.5) contrast(2); + filter: saturate(200%) contrast(0.5) contrast(2); } .high-saturation.contrast-style-1.contrast-style-2 { - filter: saturate(200%) contrast(1.5) contrast(2); + filter: saturate(200%) contrast(1.5) contrast(2); } .contrast-style-0.contrast-style-1.contrast-style-2 { - filter: contrast(0.5) contrast(1.5) contrast(2); + filter: contrast(0.5) contrast(1.5) contrast(2); } .invert.grayscale.low-saturation.high-saturation { - filter: invert(1) grayscale(1) saturate(20%) saturate(200%); + filter: invert(1) grayscale(1) saturate(20%) saturate(200%); } .invert.grayscale.low-saturation.contrast-style-0 { - filter: invert(1) grayscale(1) saturate(20%) contrast(0.5); + filter: invert(1) grayscale(1) saturate(20%) contrast(0.5); } .invert.grayscale.low-saturation.contrast-style-1 { - filter: invert(1) grayscale(1) saturate(20%) contrast(1.5); + filter: invert(1) grayscale(1) saturate(20%) contrast(1.5); } .invert.grayscale.low-saturation.contrast-style-2 { - filter: invert(1) grayscale(1) saturate(20%) contrast(2); + filter: invert(1) grayscale(1) saturate(20%) contrast(2); } .invert.grayscale.high-saturation.contrast-style-0 { - filter: invert(1) grayscale(1) saturate(200%) contrast(0.5); + filter: invert(1) grayscale(1) saturate(200%) contrast(0.5); } .invert.grayscale.high-saturation.contrast-style-1 { - filter: invert(1) grayscale(1) saturate(200%) contrast(1.5); + filter: invert(1) grayscale(1) saturate(200%) contrast(1.5); } .invert.grayscale.high-saturation.contrast-style-2 { - filter: invert(1) grayscale(1) saturate(200%) contrast(2); + filter: invert(1) grayscale(1) saturate(200%) contrast(2); } .invert.low-saturation.high-saturation.contrast-style-0 { - filter: invert(1) saturate(20%) saturate(200%) contrast(0.5); + filter: invert(1) saturate(20%) saturate(200%) contrast(0.5); } .invert.low-saturation.high-saturation.contrast-style-1 { - filter: invert(1) saturate(20%) saturate(200%) contrast(1.5); + filter: invert(1) saturate(20%) saturate(200%) contrast(1.5); } .invert.low-saturation.high-saturation.contrast-style-2 { - filter: invert(1) saturate(20%) saturate(200%) contrast(2); + filter: invert(1) saturate(20%) saturate(200%) contrast(2); } .invert.low-saturation.contrast-style-0.contrast-style-1 { - filter: invert(1) saturate(20%) contrast(0.5) contrast(1.5); + filter: invert(1) saturate(20%) contrast(0.5) contrast(1.5); } .invert.low-saturation.contrast-style-0.contrast-style-2 { - filter: invert(1) saturate(20%) contrast(0.5) contrast(2); + filter: invert(1) saturate(20%) contrast(0.5) contrast(2); } .invert.low-saturation.contrast-style-1.contrast-style-2 { - filter: invert(1) saturate(20%) contrast(1.5) contrast(2); + filter: invert(1) saturate(20%) contrast(1.5) contrast(2); } .invert.high-saturation.contrast-style-0.contrast-style-1 { - filter: invert(1) saturate(200%) contrast(0.5) contrast(1.5); + filter: invert(1) saturate(200%) contrast(0.5) contrast(1.5); } .invert.high-saturation.contrast-style-0.contrast-style-2 { - filter: invert(1) saturate(200%) contrast(0.5) contrast(2); + filter: invert(1) saturate(200%) contrast(0.5) contrast(2); } .invert.high-saturation.contrast-style-1.contrast-style-2 { - filter: invert(1) saturate(200%) contrast(1.5) contrast(2); + filter: invert(1) saturate(200%) contrast(1.5) contrast(2); } .grayscale.low-saturation.high-saturation.contrast-style-0 { - filter: grayscale(1) saturate(20%) saturate(200%) contrast(0.5); + filter: grayscale(1) saturate(20%) saturate(200%) contrast(0.5); } .grayscale.low-saturation.high-saturation.contrast-style-1 { - filter: grayscale(1) saturate(20%) saturate(200%) contrast(1.5); + filter: grayscale(1) saturate(20%) saturate(200%) contrast(1.5); } .grayscale.low-saturation.high-saturation.contrast-style-2 { - filter: grayscale(1) saturate(20%) saturate(200%) contrast(2); + filter: grayscale(1) saturate(20%) saturate(200%) contrast(2); } .grayscale.low-saturation.contrast-style-0.contrast-style-1 { - filter: grayscale(1) saturate(20%) contrast(0.5) contrast(1.5); + filter: grayscale(1) saturate(20%) contrast(0.5) contrast(1.5); } .grayscale.low-saturation.contrast-style-0.contrast-style-2 { - filter: grayscale(1) saturate(20%) contrast(0.5) contrast(2); + filter: grayscale(1) saturate(20%) contrast(0.5) contrast(2); } .grayscale.low-saturation.contrast-style-1.contrast-style-2 { - filter: grayscale(1) saturate(20%) contrast(1.5) contrast(2); + filter: grayscale(1) saturate(20%) contrast(1.5) contrast(2); } .grayscale.high-saturation.contrast-style-0.contrast-style-1 { - filter: grayscale(1) saturate(200%) contrast(0.5) contrast(1.5); + filter: grayscale(1) saturate(200%) contrast(0.5) contrast(1.5); } .grayscale.high-saturation.contrast-style-0.contrast-style-2 { - filter: grayscale(1) saturate(200%) contrast(0.5) contrast(2); + filter: grayscale(1) saturate(200%) contrast(0.5) contrast(2); } .grayscale.high-saturation.contrast-style-1.contrast-style-2 { - filter: grayscale(1) saturate(200%) contrast(1.5) contrast(2); + filter: grayscale(1) saturate(200%) contrast(1.5) contrast(2); } .low-saturation.high-saturation.contrast-style-0.contrast-style-1 { - filter: saturate(20%) saturate(200%) contrast(0.5) contrast(1.5); + filter: saturate(20%) saturate(200%) contrast(0.5) contrast(1.5); } .low-saturation.high-saturation.contrast-style-0.contrast-style-2 { - filter: saturate(20%) saturate(200%) contrast(0.5) contrast(2); + filter: saturate(20%) saturate(200%) contrast(0.5) contrast(2); } .low-saturation.high-saturation.contrast-style-1.contrast-style-2 { - filter: saturate(20%) saturate(200%) contrast(1.5) contrast(2); + filter: saturate(20%) saturate(200%) contrast(1.5) contrast(2); } - + .hide-images img { - display: none; + display: none; } .hide-video video { - display: none; + display: none; } - - .line-height-0 *{ - line-height: 1.5; - } - - .line-height-1 *{ - line-height: 1.8; - } - .line-height-2 *{ - line-height: 2; - } + .line-height-0 * { + line-height: 1.5; + } - #reset-all{ - width: calc(100% - 20px); - height: 50px; - background: var(--acc_color_1); - color: var(--acc_color_2); - border-radius: var(--border_radius); - cursor: pointer; - display: flex; - justify-content: center; - align-items: center; - margin: 10px; + .line-height-1 * { + line-height: 1.8; } - #reset-all:hover{ - filter: opacity(0.8); + .line-height-2 * { + line-height: 2; } #cursor { @@ -744,7 +776,7 @@ const accessibilityMenuStyles = ` :root { top: 0; left: 0; } - + #cursor.cursor-0 { width: 50px; height: auto; @@ -780,237 +812,247 @@ const accessibilityMenuStyles = ` :root { transform-origin: center; transform: translate(-50%, 50%); } + + #triangle-cursor { + width: 0; + height: 0; + border-left: 10px solid transparent; + border-right: 10px solid transparent; + border-bottom: 10px solid yellow; + position: fixed; + top: 0; + left: 0; + transform: translate(-50%, -50%); + transition: all 0.1s ease; + z-index: 999999998; + pointer-events: none; + display: none; + } `; -const accessibilityMenuHTML = `
- -
+ +

Accessibility Tools

-
-
- - +
+
+ +
-
- - - -

Invert Colours

- +
+ + + + +

Invert Colours

+ +
- - + +
-
- - - - -

Grayscale

- +
+ + + +

Grayscale

+ +
- - + +
-
- - - - -

Low Saturation

- +
+ + + + +

Low Saturation

+ +
- - + +
-
- - - - -

Links Highlight

- +
+ + + + +

Links Highlight

+ +
- - + +
-
- - - -

Font Size

- +
+ + + +

Font Size

+ +
- - + +
-
- - - -

Line Height

- +
+ + + +

Line Height

+ +
- - + +
-
- - - -

Letter Spacing

- +
+ + + +

Letter Spacing

+ +
- - + +
-
- - - -

Text Align

- +
+ + + +

Text Align

+ +
- - + +
-
- - - -

Contrast

- +
+ + + +

Contrast

+ +
- - + +
-
- - - - - - -

Hide image

-
+
+ + + + + + +

Hide image

+
- - + +
-
- - - -

Hide video

-
+
+ + + +

Hide video

+
- - + +
-
- - - -

Change Cursors

- +
+ + + +

Change Cursors

+ +
+
+ + +
+
+ + +
-
- - - - -
- - - - -
- -
`; -document.addEventListener("DOMContentLoaded", function () { +`; +document.addEventListener("DOMContentLoaded", function() { const accessibilityMenuStyleElement = document.createElement("style"); accessibilityMenuStyleElement.innerHTML = accessibilityMenuStyles; @@ -1406,56 +1448,12 @@ document.addEventListener("DOMContentLoaded", function () { docElement.classList.toggle('hide-video'); }); - document.querySelector('#reset-all').addEventListener('click', () => { - const cursor = document.querySelector('#cursor'); - - //reset all the accessibility settings - docElement.classList.remove('invert'); - docElement.classList.remove('grayscale'); - docElement.classList.remove('high-saturation'); - docElement.classList.remove('low-saturation'); - docElement.classList.remove('underline-style-0'); - docElement.classList.remove('underline-style-1'); - docElement.classList.remove('underline-style-2'); - docElement.style.fontSize = ''; - docElement.classList.remove('line-height-0'); - docElement.classList.remove('line-height-1'); - docElement.classList.remove('line-height-2'); - docElement.style.letterSpacing = ''; - docElement.style.textAlign = ''; - docElement.classList.remove('contrast'); - docElement.classList.remove('contrast-style-0'); - docElement.classList.remove('contrast-style-1'); - docElement.classList.remove('contrast-style-2'); - docElement.classList.remove('hide-images'); - docElement.classList.remove('hide-video'); - cursor.classList.remove('cursor-0'); - cursor.classList.remove('cursor-1'); - cursor.classList.remove('cursor-2'); - docElement.style.cursor = ''; - const triangle = document.getElementById('triangle-cursor'); - if (triangle) { - triangle.remove(); - } - - //reset the progress bar - document.querySelectorAll('.acc-progress-parent').forEach(child => { - child.classList.add('hidden'); - }); - - //reset the active state of the accessibility tools - document.querySelectorAll('.acc-child').forEach(child => { - child.classList.remove('active'); - child.querySelectorAll('path').forEach(icon => { - icon.style.fill = 'var(--acc_color_1)'; - }); - }); - }); - let cursorClickCount = 0; document.querySelector('#change-cursor').addEventListener('click', () => { const item = document.querySelector('#change-cursor'); const cursor = document.querySelector('#cursor'); + const triangle = document.getElementById('triangle-cursor'); + triangle.style.display = 'none'; if (cursorClickCount === 3) { cursorClickCount = 0; @@ -1465,10 +1463,6 @@ document.addEventListener("DOMContentLoaded", function () { cursor.classList.remove('cursor-1'); cursor.classList.remove('cursor-2'); docElement.style.cursor = ''; - const triangle = document.getElementById('triangle-cursor'); - if (triangle) { - triangle.remove(); - } } else { item.classList.remove('active'); if (cursorClickCount === 0) { @@ -1479,7 +1473,6 @@ document.addEventListener("DOMContentLoaded", function () { item.querySelector('.acc-progress-child-1').classList.add('active'); item.querySelector('.acc-progress-child-2').classList.remove('active'); item.querySelector('.acc-progress-child-3').classList.remove('active'); - const triangle = document.getElementById('triangle-cursor'); } else if (cursorClickCount === 1) { cursor.classList.remove('cursor-0'); cursor.classList.add('cursor-1'); @@ -1488,7 +1481,6 @@ document.addEventListener("DOMContentLoaded", function () { item.querySelector('.acc-progress-child-1').classList.remove('active'); item.querySelector('.acc-progress-child-2').classList.add('active'); item.querySelector('.acc-progress-child-3').classList.remove('active'); - const triangle = document.getElementById('triangle-cursor'); } else if (cursorClickCount === 2) { cursor.classList.remove('cursor-0'); cursor.classList.remove('cursor-1'); @@ -1498,24 +1490,7 @@ document.addEventListener("DOMContentLoaded", function () { item.querySelector('.acc-progress-child-1').classList.remove('active'); item.querySelector('.acc-progress-child-2').classList.remove('active'); item.querySelector('.acc-progress-child-3').classList.add('active'); - - //create new div triangle cursor also work with cursor-2 - const triangle = document.createElement('div'); - triangle.id = 'triangle-cursor'; - triangle.style.width = '0'; - triangle.style.height = '0'; - triangle.style.borderLeft = '10px solid transparent'; - triangle.style.borderRight = '10px solid transparent'; - triangle.style.borderBottom = '10px solid yellow'; - triangle.style.position = 'fixed'; - triangle.style.top = '0'; - triangle.style.left = '0'; - triangle.style.transform = 'translate(-50%, -50%)'; - triangle.style.transition = 'all 0.1s ease'; - triangle.style.zIndex = '999999999'; - triangle.style.pointerEvents = 'none'; - document.body.appendChild(triangle); - + triangle.style.display = 'block'; } cursorClickCount++; } @@ -1557,7 +1532,53 @@ document.addEventListener("DOMContentLoaded", function () { cursor.style.width = '50px'; } }); - }) + }); + + document.querySelector('#reset-all').addEventListener('click', () => { + const cursor = document.querySelector('#cursor'); + + //reset all the accessibility settings + docElement.classList.remove('invert'); + docElement.classList.remove('grayscale'); + docElement.classList.remove('high-saturation'); + docElement.classList.remove('low-saturation'); + docElement.classList.remove('underline-style-0'); + docElement.classList.remove('underline-style-1'); + docElement.classList.remove('underline-style-2'); + docElement.style.fontSize = ''; + docElement.classList.remove('line-height-0'); + docElement.classList.remove('line-height-1'); + docElement.classList.remove('line-height-2'); + docElement.style.letterSpacing = ''; + docElement.style.textAlign = ''; + docElement.classList.remove('contrast'); + docElement.classList.remove('contrast-style-0'); + docElement.classList.remove('contrast-style-1'); + docElement.classList.remove('contrast-style-2'); + docElement.classList.remove('hide-images'); + docElement.classList.remove('hide-video'); + cursor.classList.remove('cursor-0'); + cursor.classList.remove('cursor-1'); + cursor.classList.remove('cursor-2'); + docElement.style.cursor = ''; + const triangle = document.getElementById('triangle-cursor'); + if (triangle) { + triangle.remove(); + } + + //reset the progress bar + document.querySelectorAll('.acc-progress-parent').forEach(child => { + child.classList.add('hidden'); + }); + + //reset the active state of the accessibility tools + document.querySelectorAll('.acc-child').forEach(child => { + child.classList.remove('active'); + child.querySelectorAll('path').forEach(icon => { + icon.style.fill = 'var(--acc_color_1)'; + }); + }); + }); //save the user's settings in local storage function saveSettings() { @@ -1694,25 +1715,124 @@ document.addEventListener("DOMContentLoaded", function () { document.querySelector('#grayscale').classList.add('active'); } if (docElement.classList.contains('high-saturation') || docElement.classList.contains('low-saturation')) { - document.querySelector('#saturation').classList.add('active'); + const item = document.querySelector('#saturation'); + item.classList.add('active'); + item.querySelector('.acc-progress-parent').classList.remove('hidden'); + if (docElement.classList.contains('high-saturation')) { + item.querySelector('.acc-progress-child-1').classList.remove('active'); + item.querySelector('.acc-progress-child-2').classList.add('active'); + } else if (docElement.classList.contains('low-saturation')) { + item.querySelector('.acc-progress-child-1').classList.add('active'); + item.querySelector('.acc-progress-child-2').classList.remove('active'); + } } if (docElement.classList.contains('underline-style-0') || docElement.classList.contains('underline-style-1') || docElement.classList.contains('underline-style-2')) { - document.querySelector('#underline').classList.add('active'); + const item = document.querySelector('#underline'); + item.classList.add('active'); + item.querySelector('.acc-progress-parent').classList.remove('hidden'); + if (docElement.classList.contains('underline-style-0')) { + item.querySelector('.acc-progress-child-1').classList.add('active'); + item.querySelector('.acc-progress-child-2').classList.remove('active'); + item.querySelector('.acc-progress-child-3').classList.remove('active'); + } else if (docElement.classList.contains('underline-style-1')) { + item.querySelector('.acc-progress-child-1').classList.remove('active'); + item.querySelector('.acc-progress-child-2').classList.add('active'); + item.querySelector('.acc-progress-child-3').classList.remove('active'); + } else if (docElement.classList.contains('underline-style-2')) { + item.querySelector('.acc-progress-child-1').classList.remove('active'); + item.querySelector('.acc-progress-child-2').classList.remove('active'); + item.querySelector('.acc-progress-child-3').classList.add('active'); + } } if (docElement.style.fontSize) { - document.querySelector('#font-size').classList.add('active'); + const item = document.querySelector('#font-size'); + item.classList.add('active'); + item.querySelector('.acc-progress-parent').classList.remove('hidden'); + if (docElement.style.fontSize === '1.3rem') { + item.querySelector('.acc-progress-child-1').classList.add('active'); + item.querySelector('.acc-progress-child-2').classList.remove('active'); + item.querySelector('.acc-progress-child-3').classList.remove('active'); + } else if (docElement.style.fontSize === '1.5rem') { + item.querySelector('.acc-progress-child-1').classList.remove('active'); + item.querySelector('.acc-progress-child-2').classList.add('active'); + item.querySelector('.acc-progress-child-3').classList.remove('active'); + } else if (docElement.style.fontSize === '1.8rem') { + item.querySelector('.acc-progress-child-1').classList.remove('active'); + item.querySelector('.acc-progress-child-2').classList.remove('active'); + item.querySelector('.acc-progress-child-3').classList.add('active'); + } } if (docElement.classList.contains('line-height-0') || docElement.classList.contains('line-height-1') || docElement.classList.contains('line-height-2')) { - document.querySelector('#line-height').classList.add('active'); + const item = document.querySelector('#line-height'); + item.classList.add('active'); + item.querySelector('.acc-progress-parent').classList.remove('hidden'); + if (docElement.classList.contains('line-height-0')) { + item.querySelector('.acc-progress-child-1').classList.add('active'); + item.querySelector('.acc-progress-child-2').classList.remove('active'); + item.querySelector('.acc-progress-child-3').classList.remove('active'); + } else if (docElement.classList.contains('line-height-1')) { + item.querySelector('.acc-progress-child-1').classList.remove('active'); + item.querySelector('.acc-progress-child-2').classList.add('active'); + item.querySelector('.acc-progress-child-3').classList.remove('active'); + } else if (docElement.classList.contains('line-height-2')) { + item.querySelector('.acc-progress-child-1').classList.remove('active'); + item.querySelector('.acc-progress-child-2').classList.remove('active'); + item.querySelector('.acc-progress-child-3').classList.add('active'); + } } if (docElement.style.letterSpacing) { - document.querySelector('#letter-spacing').classList.add('active'); + const item = document.querySelector('#letter-spacing'); + item.classList.add('active'); + item.querySelector('.acc-progress-parent').classList.remove('hidden'); + if (docElement.style.letterSpacing === '0.1rem') { + item.querySelector('.acc-progress-child-1').classList.add('active'); + item.querySelector('.acc-progress-child-2').classList.remove('active'); + item.querySelector('.acc-progress-child-3').classList.remove('active'); + } else if (docElement.style.letterSpacing === '0.2rem') { + item.querySelector('.acc-progress-child-1').classList.remove('active'); + item.querySelector('.acc-progress-child-2').classList.add('active'); + item.querySelector('.acc-progress-child-3').classList.remove('active'); + } else if (docElement.style.letterSpacing === '0.3rem') { + item.querySelector('.acc-progress-child-1').classList.remove('active'); + item.querySelector('.acc-progress-child-2').classList.remove('active'); + item.querySelector('.acc-progress-child-3').classList.add('active'); + } } if (docElement.style.textAlign) { - document.querySelector('#text-align').classList.add('active'); + const item = document.querySelector('#text-align'); + item.classList.add('active'); + item.querySelector('.acc-progress-parent').classList.remove('hidden'); + if (docElement.style.textAlign === 'left') { + item.querySelector('.acc-progress-child-1').classList.add('active'); + item.querySelector('.acc-progress-child-2').classList.remove('active'); + item.querySelector('.acc-progress-child-3').classList.remove('active'); + } else if (docElement.style.textAlign === 'center') { + item.querySelector('.acc-progress-child-1').classList.remove('active'); + item.querySelector('.acc-progress-child-2').classList.add('active'); + item.querySelector('.acc-progress-child-3').classList.remove('active'); + } else if (docElement.style.textAlign === 'right') { + item.querySelector('.acc-progress-child-1').classList.remove('active'); + item.querySelector('.acc-progress-child-2').classList.remove('active'); + item.querySelector('.acc-progress-child-3').classList.add('active'); + } } if (docElement.classList.contains('contrast-style-0') || docElement.classList.contains('contrast-style-1') || docElement.classList.contains('contrast-style-2')) { - document.querySelector('#contrast').classList.add('active'); + const item = document.querySelector('#contrast'); + item.classList.add('active'); + item.querySelector('.acc-progress-parent').classList.remove('hidden'); + if (docElement.classList.contains('contrast-style-0')) { + item.querySelector('.acc-progress-child-1').classList.add('active'); + item.querySelector('.acc-progress-child-2').classList.remove('active'); + item.querySelector('.acc-progress-child-3').classList.remove('active'); + } else if (docElement.classList.contains('contrast-style-1')) { + item.querySelector('.acc-progress-child-1').classList.remove('active'); + item.querySelector('.acc-progress-child-2').classList.add('active'); + item.querySelector('.acc-progress-child-3').classList.remove('active'); + } else if (docElement.classList.contains('contrast-style-2')) { + item.querySelector('.acc-progress-child-1').classList.remove('active'); + item.querySelector('.acc-progress-child-2').classList.remove('active'); + item.querySelector('.acc-progress-child-3').classList.add('active'); + } } if (docElement.classList.contains('hide-images')) { document.querySelector('#hide-images').classList.add('active'); @@ -1721,7 +1841,25 @@ document.addEventListener("DOMContentLoaded", function () { document.querySelector('#hide-video').classList.add('active'); } if (cursor.classList.contains('cursor-0') || cursor.classList.contains('cursor-1') || cursor.classList.contains('cursor-2')) { - document.querySelector('#change-cursor').classList.add('active'); + const item = document.querySelector('#change-cursor'); + const triangle = document.getElementById('triangle-cursor'); + triangle.style.display = 'none'; + item.classList.add('active'); + item.querySelector('.acc-progress-parent').classList.remove('hidden'); + if (cursor.classList.contains('cursor-0')) { + item.querySelector('.acc-progress-child-1').classList.add('active'); + item.querySelector('.acc-progress-child-2').classList.remove('active'); + item.querySelector('.acc-progress-child-3').classList.remove('active'); + } else if (cursor.classList.contains('cursor-1')) { + item.querySelector('.acc-progress-child-1').classList.remove('active'); + item.querySelector('.acc-progress-child-2').classList.add('active'); + item.querySelector('.acc-progress-child-3').classList.remove('active'); + } else if (cursor.classList.contains('cursor-2')) { + item.querySelector('.acc-progress-child-1').classList.remove('active'); + item.querySelector('.acc-progress-child-2').classList.remove('active'); + item.querySelector('.acc-progress-child-3').classList.add('active'); + triangle.style.display = 'block'; + } } accItems.forEach(item => { @@ -1730,5 +1868,4 @@ document.addEventListener("DOMContentLoaded", function () { }); }); - -}); +}); \ No newline at end of file diff --git a/accessibility-menu.min.js b/accessibility-menu.min.js index de3298b..91aac80 100644 --- a/accessibility-menu.min.js +++ b/accessibility-menu.min.js @@ -1,6 +1,2 @@ -const accessibilityMenuStyles = `:root{--acc_color_1:#000;--acc_color_2:#fff;--border_radius:25px}.hidden{display:none!important}#accessibility-modal,#accessibility-modal *{transition:all .3s ease 0s;font-family:"Poppins",sans-serif;font-size:16px;line-height:1;letter-spacing:0;text-align:center}#accessibility-modal,#accessibility-modal.left{left:0;border-radius:0 var(--border_radius) var(--border_radius)0}#accessibility-modal{position:fixed;top:5vh;width:100%;height:90vh;background:var(--acc_color_2);z-index:1000;justify-content:center;box-shadow:0 0 10px rgba(0,0,0,.1);overflow:clip}#accessibility-modal #closeBtn,#accessibility-modal #headerContent{display:flex;justify-content:center;align-items:center;height:50px;border-radius:var(--border_radius)}#accessibility-modal #closeBtn{position:absolute;width:50px;background:var(--acc_color_2);cursor:pointer;overflow:clip;border:0;outline:0}#accessibility-modal.left #closeBtn{top:0;right:0;margin:15px 0}#accessibility-modal.bottom #closeBtn,#accessibility-modal.right #closeBtn,#accessibility-modal.top #closeBtn{top:0;left:0;margin:15px}#accessibility-modal.left{right:auto;max-width:500px}#accessibility-modal.right{right:0;left:auto;max-width:500px;border-radius:var(--border_radius)0 0 var(--border_radius)}#accessibility-modal.bottom,#accessibility-modal.top{top:0;left:1%;width:98%;height:auto;max-height:90vh;border-radius:0 0 var(--border_radius) var(--border_radius)}#accessibility-modal.bottom{top:auto;bottom:0;border-radius:var(--border_radius) var(--border_radius)0 0}#accessibility-modal.close{width:50px;height:50px;border-radius:var(--border_radius);cursor:pointer;box-shadow:0 0 10px rgba(0,0,0,.1);overflow:clip;margin:5px}#accessibility-modal.close .acc-item{opacity:0}#accessibility-modal.close #closeBtn{position:absolute;width:50px;height:50px;border:0;background:0 0;color:var(--acc_color_2);background:var(--acc_color_1);font-size:20px;cursor:pointer;margin:0}#accessibility-modal #closeBtn svg{width:40px;height:40px}#accessibility-modal.close:hover #closeBtn{filter:opacity(.8)}#accessibility-modal #headerContent{position:relative;width:calc(100% - 80px);background:var(--acc_color_1);color:var(--acc_color_2);margin:10px 10px 10px 70px}#accessibility-modal.left #headerContent{margin:10px 70px 10px 10px}#accessibility-modal.right #headerContent{margin:10px 10px 10px 70px}#accessibility-modal #headerContent p{margin-top:15px;font-size:20px;font-weight:600}#accessibility-modal.close #headerContent,.hide-images img,.hide-video video{display:none}#accessibility-tools{flex-wrap:wrap;align-items:start;width:100%;transition:all .3s ease 2s}.acc-item{min-width:120px;width:33%;max-width:200px;height:auto;margin:0;cursor:pointer}.acc-item:hover .acc-child{box-shadow:0 0 2px rgba(0,0,0,.1)}.acc-item:hover .acc-child.active{filter:opacity(.8);border:1px solid var(--acc_color_2)}#accessibility-tools,.acc-child{display:flex;justify-content:center;height:auto}.acc-child{position:relative;flex-direction:column;align-items:center;width:auto;aspect-ratio:1/1;background:var(--acc_color_2);border-radius:var(--border_radius);margin:10px;padding:10px 10px 0;box-shadow:0 0 10px rgba(0,0,0,.1)}#reset-all,.acc-child.active{background:var(--acc_color_1);color:var(--acc_color_2)}.acc-child,.acc-child.active,.acc-item:hover .acc-child{border:1px solid var(--acc_color_1)}.acc-child.active{box-shadow:none}.acc-progress-parent{display:flex;justify-content:space-between;width:100%;padding-bottom:10px}.acc-progress-child{min-width:30%;width:48%;max-width:48%;height:3px;margin:0 1%;background:var(--acc_color_1);border-radius:5px}.acc-child.active .acc-progress-child{background:var(--acc_color_2);opacity:.5}.acc-child.active .acc-progress-child.active{opacity:1}#accessibility-tools img,#accessibility-tools svg{width:30px;height:30px;margin-bottom:10px}.invert{filter:invert(1)}.grayscale{filter:grayscale(1)}.low-saturation{filter:saturate(20%)}.high-saturation{filter:saturate(200%)}.underline-style-0 a{text-decoration:none;background:#000!important;color:#ff0!important;font-weight:bolder}.underline-style-0 a:hover,.underline-style-1 a:hover,.underline-style-2 a:hover{text-decoration:underline!important}.underline-style-1 a{text-decoration:none;background:#ffd740!important;color:#005a9c!important;font-weight:bolder}.underline-style-2 a{text-decoration:none;background:#fff!important;color:#000!important;font-weight:bolder}.contrast-style-0{filter:contrast(.5)}.contrast-style-1{filter:contrast(1.5)}.contrast-style-2{filter:contrast(2)}.line-height-0 *{line-height:1.5}.line-height-1 *{line-height:1.8}.line-height-2 *{line-height:2}#reset-all{width:calc(100% - 20px);height:50px;border-radius:var(--border_radius);cursor:pointer;display:flex;justify-content:center;align-items:center;margin:10px}`; -const accessibilityMenuHTML = `

Accessibility Tools

Invert Colours

Grayscale

Low Saturation

Links Highlight

Font Size

Line Height

Letter Spacing

Text Align

Contrast

Hide image

Hide video

Change Cursors

`; -document.addEventListener("DOMContentLoaded",function(){var e,s,t,c,r,l,a=document.createElement("style");a.innerHTML=accessibilityMenuStyles,document.head.appendChild(a),document.body.insertAdjacentHTML("beforeend",accessibilityMenuHTML);const i=document.getElementById("accessibility-modal"),o=document.getElementById("closeBtn"),n=document.getElementById("accessibility-tools"),d=(o.addEventListener("click",()=>{i.classList.toggle("close"),o.innerHTML=i.classList.contains("close")?'\n \n \n':i.classList.contains("top")?'\n \n':i.classList.contains("bottom")?'\n \n':i.classList.contains("left")?'\n \n':i.classList.contains("right")?'\n \n':"",n.style.display=i.classList.contains("close")?setTimeout(()=>{n.style.display="none"},200):"flex"}),document.querySelectorAll(".acc-item").forEach(s=>{s.addEventListener("click",()=>{s.querySelector(".acc-child").classList.toggle("active"),s.querySelectorAll("path").forEach(e=>{e.style.fill=s.querySelector(".acc-child").classList.contains("active")?"var(--acc_color_2)":"var(--acc_color_1)"})})}),document.querySelector("html"));document.querySelector("#invert-colors").addEventListener("click",()=>{document.querySelector("#invert-colors");d.classList.toggle("invert")}),document.querySelector("#grayscale").addEventListener("click",()=>{document.querySelector("#grayscale");d.classList.toggle("grayscale")});let v=0,u=(document.querySelector("#saturation").addEventListener("click",()=>{var e=document.querySelector("#saturation");2===v?(v=0,e.querySelector("p").innerText="Low Saturation",e.querySelector(".acc-progress-parent").classList.add("hidden"),e.classList.add("active"),d.classList.remove("high-saturation"),d.classList.remove("low-saturation")):(e.classList.remove("active"),0===v?(d.classList.add("low-saturation"),e.querySelector("p").innerText="Low Saturation",e.querySelector(".acc-progress-parent").classList.remove("hidden"),e.querySelector(".acc-progress-child-1").classList.add("active"),e.querySelector(".acc-progress-child-2").classList.remove("active")):1===v&&(d.classList.remove("low-saturation"),d.classList.add("high-saturation"),e.querySelector("p").innerText="High Saturation",e.querySelector(".acc-progress-parent").classList.remove("hidden"),e.querySelector(".acc-progress-child-1").classList.remove("active"),e.querySelector(".acc-progress-child-2").classList.add("active")),v++)}),0),L=(document.querySelector("#underline").addEventListener("click",()=>{var e=document.querySelector("#underline");3===u?(u=0,e.querySelector(".acc-progress-parent").classList.add("hidden"),e.classList.add("active"),d.classList.remove("underline"),d.classList.remove("underline-style-0"),d.classList.remove("underline-style-1"),d.classList.remove("underline-style-2")):(e.classList.remove("active"),0===u?(d.classList.add("underline"),e.querySelector(".acc-progress-parent").classList.remove("hidden"),e.querySelector(".acc-progress-child-1").classList.add("active"),e.querySelector(".acc-progress-child-2").classList.remove("active"),e.querySelector(".acc-progress-child-3").classList.remove("active"),d.classList.add("underline-style-0"),d.classList.remove("underline-style-1"),d.classList.remove("underline-style-2")):1===u?(d.classList.remove("underline-style-0"),d.classList.add("underline-style-1"),d.classList.remove("underline-style-2"),e.querySelector(".acc-progress-parent").classList.remove("hidden"),e.querySelector(".acc-progress-child-1").classList.remove("active"),e.querySelector(".acc-progress-child-2").classList.add("active"),e.querySelector(".acc-progress-child-3").classList.remove("active")):2===u&&(d.classList.remove("underline-style-0"),d.classList.remove("underline-style-1"),d.classList.add("underline-style-2"),e.querySelector(".acc-progress-parent").classList.remove("hidden"),e.querySelector(".acc-progress-child-1").classList.remove("active"),e.querySelector(".acc-progress-child-2").classList.remove("active"),e.querySelector(".acc-progress-child-3").classList.add("active")),u++)}),0),y=(document.querySelector("#font-size").addEventListener("click",()=>{var e=document.querySelector("#font-size");3===L?(L=0,e.querySelector(".acc-progress-parent").classList.add("hidden"),e.classList.add("active"),d.style.fontSize=""):(e.classList.remove("active"),0===L?(d.style.fontSize="1.3rem",e.querySelector(".acc-progress-parent").classList.remove("hidden"),e.querySelector(".acc-progress-child-1").classList.add("active"),e.querySelector(".acc-progress-child-2").classList.remove("active"),e.querySelector(".acc-progress-child-3").classList.remove("active")):1===L?(d.style.fontSize="1.5rem",e.querySelector(".acc-progress-parent").classList.remove("hidden"),e.querySelector(".acc-progress-child-1").classList.remove("active"),e.querySelector(".acc-progress-child-2").classList.add("active"),e.querySelector(".acc-progress-child-3").classList.remove("active")):2===L&&(d.style.fontSize="1.8rem",e.querySelector(".acc-progress-parent").classList.remove("hidden"),e.querySelector(".acc-progress-child-1").classList.remove("active"),e.querySelector(".acc-progress-child-2").classList.remove("active"),e.querySelector(".acc-progress-child-3").classList.add("active")),L++)}),0),g=(document.querySelector("#line-height").addEventListener("click",()=>{var e=document.querySelector("#line-height");3===y?(y=0,e.querySelector(".acc-progress-parent").classList.add("hidden"),e.classList.add("active"),d.classList.remove("line-height-0"),d.classList.remove("line-height-1"),d.classList.remove("line-height-2")):(e.classList.remove("active"),0===y?(d.classList.add("line-height-0"),d.classList.remove("line-height-1"),d.classList.remove("line-height-2"),e.querySelector(".acc-progress-parent").classList.remove("hidden"),e.querySelector(".acc-progress-child-1").classList.add("active"),e.querySelector(".acc-progress-child-2").classList.remove("active"),e.querySelector(".acc-progress-child-3").classList.remove("active")):1===y?(d.classList.remove("line-height-0"),d.classList.add("line-height-1"),d.classList.remove("line-height-2"),e.querySelector(".acc-progress-parent").classList.remove("hidden"),e.querySelector(".acc-progress-child-1").classList.remove("active"),e.querySelector(".acc-progress-child-2").classList.add("active"),e.querySelector(".acc-progress-child-3").classList.remove("active")):2===y&&(d.classList.remove("line-height-0"),d.classList.remove("line-height-1"),d.classList.add("line-height-2"),e.querySelector(".acc-progress-parent").classList.remove("hidden"),e.querySelector(".acc-progress-child-1").classList.remove("active"),e.querySelector(".acc-progress-child-2").classList.remove("active"),e.querySelector(".acc-progress-child-3").classList.add("active")),y++)}),0),m=(document.querySelector("#letter-spacing").addEventListener("click",()=>{var e=document.querySelector("#letter-spacing");3===g?(g=0,e.querySelector(".acc-progress-parent").classList.add("hidden"),e.classList.add("active"),d.style.letterSpacing=""):(e.classList.remove("active"),0===g?(d.style.letterSpacing="0.1rem",e.querySelector(".acc-progress-parent").classList.remove("hidden"),e.querySelector(".acc-progress-child-1").classList.add("active"),e.querySelector(".acc-progress-child-2").classList.remove("active"),e.querySelector(".acc-progress-child-3").classList.remove("active")):1===g?(d.style.letterSpacing="0.2rem",e.querySelector(".acc-progress-parent").classList.remove("hidden"),e.querySelector(".acc-progress-child-1").classList.remove("active"),e.querySelector(".acc-progress-child-2").classList.add("active"),e.querySelector(".acc-progress-child-3").classList.remove("active")):2===g&&(d.style.letterSpacing="0.3rem",e.querySelector(".acc-progress-parent").classList.remove("hidden"),e.querySelector(".acc-progress-child-1").classList.remove("active"),e.querySelector(".acc-progress-child-2").classList.remove("active"),e.querySelector(".acc-progress-child-3").classList.add("active")),g++)}),0),h=(document.querySelector("#text-align").addEventListener("click",()=>{var e=document.querySelector("#text-align");3===m?(m=0,e.querySelector(".acc-progress-parent").classList.add("hidden"),e.classList.add("active"),d.style.textAlign=""):(e.classList.remove("active"),0===m?(d.style.textAlign="left",e.parentElement.querySelector("svg").innerHTML='',e.querySelector(".acc-progress-parent").classList.remove("hidden"),e.querySelector(".acc-progress-child-1").classList.add("active"),e.querySelector(".acc-progress-child-2").classList.remove("active"),e.querySelector(".acc-progress-child-3").classList.remove("active")):1===m?(d.style.textAlign="center",e.parentElement.querySelector("svg").innerHTML='',e.querySelector(".acc-progress-parent").classList.remove("hidden"),e.querySelector(".acc-progress-child-1").classList.remove("active"),e.querySelector(".acc-progress-child-2").classList.add("active"),e.querySelector(".acc-progress-child-3").classList.remove("active")):2===m&&(d.style.textAlign="right",e.parentElement.querySelector("svg").innerHTML='',e.querySelector(".acc-progress-parent").classList.remove("hidden"),e.querySelector(".acc-progress-child-1").classList.remove("active"),e.querySelector(".acc-progress-child-2").classList.remove("active"),e.querySelector(".acc-progress-child-3").classList.add("active")),m++)}),0);function p(e,s,t){let c="";var r;t&&((r=new Date).setTime(r.getTime()+24*t*60*60*1e3),c="; expires="+r.toUTCString()),document.cookie=e+"="+(s||"")+c+"; path=/"}function S(e){var t=e+"=",c=document.cookie.split(";");for(let s=0;s{var e=document.querySelector("#contrast");3===h?(h=0,e.querySelector(".acc-progress-parent").classList.add("hidden"),e.classList.add("active"),d.classList.remove("contrast"),d.classList.remove("contrast-style-0"),d.classList.remove("contrast-style-1"),d.classList.remove("contrast-style-2")):(e.classList.remove("active"),0===h?(d.classList.add("contrast"),e.querySelector(".acc-progress-parent").classList.remove("hidden"),e.querySelector(".acc-progress-child-1").classList.add("active"),e.querySelector(".acc-progress-child-2").classList.remove("active"),e.querySelector(".acc-progress-child-3").classList.remove("active"),d.classList.add("contrast-style-0"),d.classList.remove("contrast-style-1"),d.classList.remove("contrast-style-2")):1===h?(d.classList.remove("contrast-style-0"),d.classList.add("contrast-style-1"),d.classList.remove("contrast-style-2"),e.querySelector(".acc-progress-parent").classList.remove("hidden"),e.querySelector(".acc-progress-child-1").classList.remove("active"),e.querySelector(".acc-progress-child-2").classList.add("active"),e.querySelector(".acc-progress-child-3").classList.remove("active")):2===h&&(d.classList.remove("contrast-style-0"),d.classList.remove("contrast-style-1"),d.classList.add("contrast-style-2"),e.querySelector(".acc-progress-parent").classList.remove("hidden"),e.querySelector(".acc-progress-child-1").classList.remove("active"),e.querySelector(".acc-progress-child-2").classList.remove("active"),e.querySelector(".acc-progress-child-3").classList.add("active")),h++)}),document.querySelector("#hide-images").addEventListener("click",()=>{d.classList.toggle("hide-images")}),document.querySelector("#hide-video").addEventListener("click",()=>{d.classList.toggle("hide-video")}),document.querySelector("#reset-all").addEventListener("click",()=>{d.classList.remove("invert"),d.classList.remove("grayscale"),d.classList.remove("high-saturation"),d.classList.remove("low-saturation"),d.classList.remove("underline"),d.classList.remove("underline-style-0"),d.classList.remove("underline-style-1"),d.classList.remove("underline-style-2"),d.style.fontSize="",d.classList.remove("line-height-0"),d.classList.remove("line-height-1"),d.classList.remove("line-height-2"),d.style.letterSpacing="",d.style.textAlign="",d.classList.remove("contrast"),d.classList.remove("contrast-style-0"),d.classList.remove("contrast-style-1"),d.classList.remove("contrast-style-2"),d.classList.remove("hide-images"),d.classList.remove("hide-video")}),a=S("contrast"),e=S("grayscale"),s=S("invert"),t=S("brightness"),c=S("blur"),r=S("underline"),l=S("fontSize"),a&&document.body.classList.add("contrast"),e&&document.body.classList.add("grayscale"),s&&document.body.classList.add("invert"),t&&document.body.classList.add("brightness"),c&&document.body.classList.add("blur"),r&&document.body.classList.add("underline"),l&&(document.body.style.fontSize=l),window.addEventListener("beforeunload",function(){var e=document.body.classList.contains("contrast")?"contrast":"",s=document.body.classList.contains("grayscale")?"grayscale":"",t=document.body.classList.contains("invert")?"invert":"",c=document.body.classList.contains("brightness")?"brightness":"",r=document.body.classList.contains("blur")?"blur":"",l=document.body.classList.contains("underline")?"underline":"",a=document.body.style.fontSize;p("contrast",e,365),p("grayscale",s,365),p("invert",t,365),p("brightness",c,365),p("blur",r,365),p("underline",l,365),p("fontSize",a,365)})}); \ No newline at end of file +const accessibilityMenuStyles="\n :root {\n --acc_color_1: #000;\n --acc_color_2: #fff;\n --border_radius: 25px;\n }\n \n .hidden {\n display: none !important;\n }\n \n #accessibility-modal,\n #accessibility-modal * {\n transition: all 0.3s ease 0s;\n font-family: 'calibri', sans-serif;\n font-size: 16px;\n line-height: 1;\n letter-spacing: 0;\n text-align: center;\n user-select: none;\n }\n \n #accessibility-modal {\n position: fixed;\n top: 5vh;\n left: 0;\n width: 98%;\n max-width: 500px;\n height: auto;\n max-height: 90vh;\n background: var(--acc_color_2);\n z-index: 1000;\n justify-content: center;\n border-radius: 0 var(--border_radius) var(--border_radius) 0;\n box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);\n overflow: clip;\n display: flex;\n flex-direction: column;\n }\n \n #accessibility-modal #closeBtn {\n position: absolute;\n width: 50px;\n height: 50px;\n border-radius: var(--border_radius);\n background: var(--acc_color_1);\n color: var(--acc_color_2);\n cursor: pointer;\n overflow: clip;\n border: none;\n outline: none;\n display: flex;\n justify-content: center;\n align-items: center;\n transform: translate(0,-4px);\n }\n \n #accessibility-modal.left #closeBtn {\n top: 0;\n right: 0;\n margin: 15px;\n }\n \n #accessibility-modal.right #closeBtn {\n top: 0;\n left: 0;\n margin: 15px;\n }\n \n #accessibility-modal.top #closeBtn {\n top: 0;\n left: 0;\n margin: 15px;\n }\n \n #accessibility-modal.bottom #closeBtn {\n top: 0;\n left: 0;\n margin: 15px;\n }\n \n #accessibility-modal.left {\n left: 0;\n right: auto;\n border-radius: 0 var(--border_radius) var(--border_radius) 0;\n }\n \n #accessibility-modal.right {\n right: 0;\n left: auto;\n border-radius: var(--border_radius) 0 0 var(--border_radius);\n }\n \n #accessibility-modal.top {\n top: 0;\n left: 1%;\n height: auto;\n max-height: 90vh;\n border-radius: 0 0 var(--border_radius) var(--border_radius);\n }\n \n #accessibility-modal.bottom {\n top: auto;\n bottom: 0;\n left: 1%;\n height: auto;\n max-height: 90vh;\n border-radius: var(--border_radius) var(--border_radius) 0 0;\n }\n \n #accessibility-modal.close {\n width: 50px;\n height: 50px;\n border-radius: var(--border_radius);\n cursor: pointer;\n box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);\n overflow: clip;\n margin: 5px;\n padding: 0;\n }\n \n #accessibility-modal.close .acc-item {\n opacity: 0;\n }\n \n #accessibility-modal.close #closeBtn {\n position: absolute;\n width: 50px;\n height: 50px;\n border: none;\n background: none;\n color: var(--acc_color_2);\n background: var(--acc_color_1);\n font-size: 20px;\n cursor: pointer;\n margin: 0;\n transform: translate(0,0);\n }\n \n #accessibility-modal #closeBtn svg {\n width: 20px;\n height: 20px;\n }\n \n #accessibility-modal.close #closeBtn svg {\n width: 40px;\n height: 40px;\n }\n \n #accessibility-modal.close:hover #closeBtn {\n filter: opacity(0.8);\n }\n \n #accessibility-modal #headerContent {\n position: relative;\n display: flex;\n justify-content: center;\n align-items: center;\n width: calc(100% - 80px);\n height: 50px;\n background: var(--acc_color_1);\n color: var(--acc_color_2);\n border-radius: var(--border_radius);\n margin: 10px 10px 10px 70px;\n }\n \n #accessibility-modal.left #headerContent {\n margin: 10px 70px 10px 10px;\n }\n \n #accessibility-modal.right #headerContent {\n margin: 10px 10px 10px 70px;\n }\n \n #accessibility-modal #headerContent p {\n margin-top: 15px;\n font-size: 20px;\n font-weight: 600;\n }\n \n #accessibility-modal.close #headerContent {\n display: none;\n }\n \n #accessibility-tools {\n display: flex;\n flex-wrap: wrap;\n justify-content: center;\n align-items: start;\n width: 100%;\n height: auto;\n transition: all 0.3s ease 2s;\n overflow-y: auto;\n margin-bottom: 140px;\n }\n \n #accessibility-tools::-webkit-scrollbar {\n width: 10px;\n background: var(--acc_color_2);\n }\n \n #accessibility-tools::-webkit-scrollbar-thumb {\n background: var(--acc_color_1);\n border-radius: 10px;\n }\n \n .acc-item {\n min-width: 120px;\n width: 33%;\n max-width: 200px;\n height: auto;\n margin: 0;\n cursor: pointer;\n }\n \n .acc-item:hover .acc-child {\n box-shadow: 0 0 5px rgba(0, 0, 0, .5);\n }\n \n .acc-item:hover .acc-child.active {\n filter: opacity(0.8);\n border: 1px solid var(--acc_color_2);\n color: var(--acc_color_2);\n }\n \n .acc-child {\n position: relative;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n width: auto;\n height: auto;\n aspect-ratio: 1/1;\n background: var(--acc_color_2);\n border-radius: var(--border_radius);\n margin: 10px;\n padding: 10px 10px 0;\n box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);\n border: 1px solid var(--acc_color_1);\n color: var(--acc_color_1);\n }\n \n .acc-child.active {\n background: var(--acc_color_1);\n color: var(--acc_color_2);\n box-shadow: none;\n border: 1px solid var(--acc_color_1);\n }\n \n .acc-progress-parent {\n display: flex;\n justify-content: space-between;\n width: 100%;\n padding-bottom: 10px;\n }\n \n .acc-progress-child {\n min-width: 30%;\n width: 48%;\n max-width: 48%;\n height: 3px;\n margin: 0 1%;\n background: var(--acc_color_1);\n border-radius: 5px;\n }\n \n .acc-child.active .acc-progress-child {\n background: var(--acc_color_2);\n opacity: 0.5;\n }\n \n .acc-child.active .acc-progress-child.active {\n opacity: 1;\n }\n \n #accessibility-tools svg,\n #accessibility-tools img {\n width: 30px;\n height: 30px;\n margin-bottom: 10px;\n }\n \n #change-positions {\n display: flex;\n align-items: bottom;\n width: fit-content;\n background: var(--acc_color_1);\n border-top-right-radius: var(--border_radius);\n }\n \n #change-positions button {\n width: auto;\n height: 50px;\n border: none;\n background: var(--acc_color_1);\n color: var(--acc_color_2);\n cursor: pointer;\n display: flex;\n justify-content: center;\n align-items: center;\n aspect-ratio: 1/1;\n padding: 20px;\n margin: 10px;\n border-radius: var(--border_radius);\n }\n \n #change-positions button svg {\n scale: 1.3;\n fill: var(--acc_color_2);\n }\n \n #change-positions button:hover {\n background: var(--acc_color_2);\n }\n \n #change-positions button:hover svg {\n scale: 1.8;\n fill: var(--acc_color_1);\n }\n \n #change-positions button.active {\n background: var(--acc_color_2);\n }\n \n #change-positions button.active svg {\n fill: var(--acc_color_1);\n }\n \n #acc-footer {\n display: flex;\n flex-direction: column;\n width: 100%;\n position: absolute;\n bottom: 0;\n left: 0;\n background: var(--acc_color_2);\n }\n \n #reset-all {\n width: calc(100% - 20px);\n height: 50px;\n background: var(--acc_color_1);\n color: var(--acc_color_2);\n border-radius: var(--border_radius);\n cursor: pointer;\n display: flex;\n justify-content: center;\n align-items: center;\n margin: 10px;\n }\n \n #reset-all:hover {\n filter: opacity(0.8);\n }\n \n /*Accessibility Tools*/\n \n .invert {\n filter: invert(1);\n }\n \n .grayscale {\n filter: grayscale(1);\n }\n \n .low-saturation {\n filter: saturate(20%);\n }\n \n .high-saturation {\n filter: saturate(200%);\n }\n \n .underline-style-0 a {\n text-decoration: none;\n background: black !important;\n color: yellow !important;\n font-weight: bolder;\n }\n \n .underline-style-0 a:hover,\n .underline-style-2 a:hover,\n .underline-style-1 a:hover {\n text-decoration: underline !important;\n }\n \n .underline-style-1 a {\n text-decoration: none;\n background: #FFD740 !important;\n color: #005A9C !important;\n font-weight: bolder;\n }\n \n .underline-style-2 a {\n text-decoration: none;\n background: white !important;\n color: black !important;\n font-weight: bolder;\n }\n \n .contrast-style-0 {\n filter: contrast(0.5);\n }\n \n .contrast-style-1 {\n filter: contrast(1.5);\n }\n \n .contrast-style-2 {\n filter: contrast(2);\n }\n \n /*Apply Two or more filters*/\n \n .invert.grayscale {\n filter: invert(1) grayscale(1);\n }\n \n .invert.low-saturation {\n filter: invert(1) saturate(20%);\n }\n \n .invert.high-saturation {\n filter: invert(1) saturate(200%);\n }\n \n .invert.contrast-style-0 {\n filter: invert(1) contrast(0.5);\n }\n \n .invert.contrast-style-1 {\n filter: invert(1) contrast(1.5);\n }\n \n .invert.contrast-style-2 {\n filter: invert(1) contrast(2);\n }\n \n .grayscale.low-saturation {\n filter: grayscale(1) saturate(20%);\n }\n \n .grayscale.high-saturation {\n filter: grayscale(1) saturate(200%);\n }\n \n .grayscale.contrast-style-0 {\n filter: grayscale(1) contrast(0.5);\n }\n \n .grayscale.contrast-style-1 {\n filter: grayscale(1) contrast(1.5);\n }\n \n .grayscale.contrast-style-2 {\n filter: grayscale(1) contrast(2);\n }\n \n .low-saturation.high-saturation {\n filter: saturate(20%) saturate(200%);\n }\n \n .low-saturation.contrast-style-0 {\n filter: saturate(20%) contrast(0.5);\n }\n \n .low-saturation.contrast-style-1 {\n filter: saturate(20%) contrast(1.5);\n }\n \n .low-saturation.contrast-style-2 {\n filter: saturate(20%) contrast(2);\n }\n \n .high-saturation.contrast-style-0 {\n filter: saturate(200%) contrast(0.5);\n }\n \n .high-saturation.contrast-style-1 {\n filter: saturate(200%) contrast(1.5);\n }\n \n .high-saturation.contrast-style-2 {\n filter: saturate(200%) contrast(2);\n }\n \n .contrast-style-0.contrast-style-1 {\n filter: contrast(0.5) contrast(1.5);\n }\n \n .contrast-style-0.contrast-style-2 {\n filter: contrast(0.5) contrast(2);\n }\n \n .contrast-style-1.contrast-style-2 {\n filter: contrast(1.5) contrast(2);\n }\n \n .invert.grayscale.low-saturation {\n filter: invert(1) grayscale(1) saturate(20%);\n }\n \n .invert.grayscale.high-saturation {\n filter: invert(1) grayscale(1) saturate(200%);\n }\n \n .invert.grayscale.contrast-style-0 {\n filter: invert(1) grayscale(1) contrast(0.5);\n }\n \n .invert.grayscale.contrast-style-1 {\n filter: invert(1) grayscale(1) contrast(1.5);\n }\n \n .invert.grayscale.contrast-style-2 {\n filter: invert(1) grayscale(1) contrast(2);\n }\n \n .invert.low-saturation.high-saturation {\n filter: invert(1) saturate(20%) saturate(200%);\n }\n \n .invert.low-saturation.contrast-style-0 {\n filter: invert(1) saturate(20%) contrast(0.5);\n }\n \n .invert.low-saturation.contrast-style-1 {\n filter: invert(1) saturate(20%) contrast(1.5);\n }\n \n .invert.low-saturation.contrast-style-2 {\n filter: invert(1) saturate(20%) contrast(2);\n }\n \n .invert.high-saturation.contrast-style-0 {\n filter: invert(1) saturate(200%) contrast(0.5);\n }\n \n .invert.high-saturation.contrast-style-1 {\n filter: invert(1) saturate(200%) contrast(1.5);\n }\n \n .invert.high-saturation.contrast-style-2 {\n filter: invert(1) saturate(200%) contrast(2);\n }\n \n .invert.contrast-style-0.contrast-style-1 {\n filter: invert(1) contrast(0.5) contrast(1.5);\n }\n \n .invert.contrast-style-0.contrast-style-2 {\n filter: invert(1) contrast(0.5) contrast(2);\n }\n \n .invert.contrast-style-1.contrast-style-2 {\n filter: invert(1) contrast(1.5) contrast(2);\n }\n \n .grayscale.low-saturation.high-saturation {\n filter: grayscale(1) saturate(20%) saturate(200%);\n }\n \n .grayscale.low-saturation.contrast-style-0 {\n filter: grayscale(1) saturate(20%) contrast(0.5);\n }\n \n .grayscale.low-saturation.contrast-style-1 {\n filter: grayscale(1) saturate(20%) contrast(1.5);\n }\n \n .grayscale.low-saturation.contrast-style-2 {\n filter: grayscale(1) saturate(20%) contrast(2);\n }\n \n .grayscale.high-saturation.contrast-style-0 {\n filter: grayscale(1) saturate(200%) contrast(0.5);\n }\n \n .grayscale.high-saturation.contrast-style-1 {\n filter: grayscale(1) saturate(200%) contrast(1.5);\n }\n \n .grayscale.high-saturation.contrast-style-2 {\n filter: grayscale(1) saturate(200%) contrast(2);\n }\n \n .grayscale.contrast-style-0.contrast-style-1 {\n filter: grayscale(1) contrast(0.5) contrast(1.5);\n }\n \n .grayscale.contrast-style-0.contrast-style-2 {\n filter: grayscale(1) contrast(0.5) contrast(2);\n }\n \n .grayscale.contrast-style-1.contrast-style-2 {\n filter: grayscale(1) contrast(1.5) contrast(2);\n }\n \n .low-saturation.high-saturation.contrast-style-0 {\n filter: saturate(20%) saturate(200%) contrast(0.5);\n }\n \n .low-saturation.high-saturation.contrast-style-1 {\n filter: saturate(20%) saturate(200%) contrast(1.5);\n }\n \n .low-saturation.high-saturation.contrast-style-2 {\n filter: saturate(20%) saturate(200%) contrast(2);\n }\n \n .low-saturation.contrast-style-0.contrast-style-1 {\n filter: saturate(20%) contrast(0.5) contrast(1.5);\n }\n \n .low-saturation.contrast-style-0.contrast-style-2 {\n filter: saturate(20%) contrast(0.5) contrast(2);\n }\n \n .low-saturation.contrast-style-1.contrast-style-2 {\n filter: saturate(20%) contrast(1.5) contrast(2);\n }\n \n .high-saturation.contrast-style-0.contrast-style-1 {\n filter: saturate(200%) contrast(0.5) contrast(1.5);\n }\n \n .high-saturation.contrast-style-0.contrast-style-2 {\n filter: saturate(200%) contrast(0.5) contrast(2);\n }\n \n .high-saturation.contrast-style-1.contrast-style-2 {\n filter: saturate(200%) contrast(1.5) contrast(2);\n }\n \n .contrast-style-0.contrast-style-1.contrast-style-2 {\n filter: contrast(0.5) contrast(1.5) contrast(2);\n }\n \n .invert.grayscale.low-saturation.high-saturation {\n filter: invert(1) grayscale(1) saturate(20%) saturate(200%);\n }\n \n .invert.grayscale.low-saturation.contrast-style-0 {\n filter: invert(1) grayscale(1) saturate(20%) contrast(0.5);\n }\n \n .invert.grayscale.low-saturation.contrast-style-1 {\n filter: invert(1) grayscale(1) saturate(20%) contrast(1.5);\n }\n \n .invert.grayscale.low-saturation.contrast-style-2 {\n filter: invert(1) grayscale(1) saturate(20%) contrast(2);\n }\n \n .invert.grayscale.high-saturation.contrast-style-0 {\n filter: invert(1) grayscale(1) saturate(200%) contrast(0.5);\n }\n \n .invert.grayscale.high-saturation.contrast-style-1 {\n filter: invert(1) grayscale(1) saturate(200%) contrast(1.5);\n }\n \n .invert.grayscale.high-saturation.contrast-style-2 {\n filter: invert(1) grayscale(1) saturate(200%) contrast(2);\n }\n \n .invert.low-saturation.high-saturation.contrast-style-0 {\n filter: invert(1) saturate(20%) saturate(200%) contrast(0.5);\n }\n \n .invert.low-saturation.high-saturation.contrast-style-1 {\n filter: invert(1) saturate(20%) saturate(200%) contrast(1.5);\n }\n \n .invert.low-saturation.high-saturation.contrast-style-2 {\n filter: invert(1) saturate(20%) saturate(200%) contrast(2);\n }\n \n .invert.low-saturation.contrast-style-0.contrast-style-1 {\n filter: invert(1) saturate(20%) contrast(0.5) contrast(1.5);\n }\n \n .invert.low-saturation.contrast-style-0.contrast-style-2 {\n filter: invert(1) saturate(20%) contrast(0.5) contrast(2);\n }\n \n .invert.low-saturation.contrast-style-1.contrast-style-2 {\n filter: invert(1) saturate(20%) contrast(1.5) contrast(2);\n }\n \n .invert.high-saturation.contrast-style-0.contrast-style-1 {\n filter: invert(1) saturate(200%) contrast(0.5) contrast(1.5);\n }\n \n .invert.high-saturation.contrast-style-0.contrast-style-2 {\n filter: invert(1) saturate(200%) contrast(0.5) contrast(2);\n }\n \n .invert.high-saturation.contrast-style-1.contrast-style-2 {\n filter: invert(1) saturate(200%) contrast(1.5) contrast(2);\n }\n \n .grayscale.low-saturation.high-saturation.contrast-style-0 {\n filter: grayscale(1) saturate(20%) saturate(200%) contrast(0.5);\n }\n \n .grayscale.low-saturation.high-saturation.contrast-style-1 {\n filter: grayscale(1) saturate(20%) saturate(200%) contrast(1.5);\n }\n \n .grayscale.low-saturation.high-saturation.contrast-style-2 {\n filter: grayscale(1) saturate(20%) saturate(200%) contrast(2);\n }\n \n .grayscale.low-saturation.contrast-style-0.contrast-style-1 {\n filter: grayscale(1) saturate(20%) contrast(0.5) contrast(1.5);\n }\n \n .grayscale.low-saturation.contrast-style-0.contrast-style-2 {\n filter: grayscale(1) saturate(20%) contrast(0.5) contrast(2);\n }\n \n .grayscale.low-saturation.contrast-style-1.contrast-style-2 {\n filter: grayscale(1) saturate(20%) contrast(1.5) contrast(2);\n }\n \n .grayscale.high-saturation.contrast-style-0.contrast-style-1 {\n filter: grayscale(1) saturate(200%) contrast(0.5) contrast(1.5);\n }\n \n .grayscale.high-saturation.contrast-style-0.contrast-style-2 {\n filter: grayscale(1) saturate(200%) contrast(0.5) contrast(2);\n }\n \n .grayscale.high-saturation.contrast-style-1.contrast-style-2 {\n filter: grayscale(1) saturate(200%) contrast(1.5) contrast(2);\n }\n \n .low-saturation.high-saturation.contrast-style-0.contrast-style-1 {\n filter: saturate(20%) saturate(200%) contrast(0.5) contrast(1.5);\n }\n \n .low-saturation.high-saturation.contrast-style-0.contrast-style-2 {\n filter: saturate(20%) saturate(200%) contrast(0.5) contrast(2);\n }\n \n .low-saturation.high-saturation.contrast-style-1.contrast-style-2 {\n filter: saturate(20%) saturate(200%) contrast(1.5) contrast(2);\n }\n \n .hide-images img {\n display: none;\n }\n \n .hide-video video {\n display: none;\n }\n \n .line-height-0 * {\n line-height: 1.5;\n }\n \n .line-height-1 * {\n line-height: 1.8;\n }\n \n .line-height-2 * {\n line-height: 2;\n }\n \n #cursor {\n position: fixed;\n z-index: 999999999;\n pointer-events: none;\n top: 0;\n left: 0;\n }\n \n #cursor.cursor-0 {\n width: 50px;\n height: auto;\n aspect-ratio: 1/1;\n background: rgba(255, 0, 0, 0.5);\n border: 2px solid var(--acc_color_2);\n box-shadow: 0 0 20px 0 var(--acc_color_2);\n border-radius: 50%;\n mix-blend-mode: difference;\n transition: all 0.1s ease;\n transform-origin: center;\n transform: translate(-50%, -50%);\n }\n \n #cursor.cursor-1 {\n width: 100%;\n height: 15vh;\n background: transparent;\n border: 10px solid var(--acc_color_2);\n border-left: 0;\n border-right: 0;\n box-shadow: 0 0 0 100vh rgb(0 0 0 / 50%);\n transition: none;\n transform: translate(0, -50%);\n }\n \n #cursor.cursor-2 {\n width: 25vw;\n height: 8px;\n background: var(--acc_color_1);\n border: yellow 2px solid;\n transition: all 0.1s ease;\n transform-origin: center;\n transform: translate(-50%, 50%);\n }\n \n #triangle-cursor {\n width: 0;\n height: 0;\n border-left: 10px solid transparent;\n border-right: 10px solid transparent;\n border-bottom: 10px solid yellow;\n position: fixed;\n top: 0;\n left: 0;\n transform: translate(-50%, -50%);\n transition: all 0.1s ease;\n z-index: 999999998;\n pointer-events: none;\n display: none;\n }\n",accessibilityMenuHTML='\n
\n \n
\n

Accessibility Tools

\n
\n
\n \n \n
\n
\n \n \n \n \n

Invert Colours

\n \n
\n
\n \n \n
\n
\n \n \n \n

Grayscale

\n \n
\n
\n \n \n
\n
\n \n \n \n \n

Low Saturation

\n \n
\n
\n \n \n
\n
\n \n \n \n \n

Links Highlight

\n \n
\n
\n \n \n
\n
\n \n \n \n

Font Size

\n \n
\n
\n \n \n
\n
\n \n \n \n

Line Height

\n \n
\n
\n \n \n
\n
\n \n \n \n

Letter Spacing

\n \n
\n
\n \n \n
\n
\n \n \n \n

Text Align

\n \n
\n
\n \n \n
\n
\n \n \n \n

Contrast

\n \n
\n
\n \n \n
\n
\n \n \n \n \n \n \n

Hide image

\n
\n
\n \n \n
\n
\n \n \n \n

Hide video

\n
\n
\n \n \n
\n
\n \n \n \n

Change Cursors

\n \n
\n
\n
\n \n \n
\n
\n \n \n \n
\n' +;document.addEventListener("DOMContentLoaded",function(){function e(){r.classList.toggle("close"),a.innerHTML=r.classList.contains("close")?'\n \n \n':r.classList.contains("top")?'\n \n':r.classList.contains("bottom")?'\n \n':r.classList.contains("left")?'\n \n':r.classList.contains("right")?'\n \n':""}function t(){r.classList.contains("left")?(l.classList.add("active"),o.classList.remove("active"),d.classList.remove("active"),v.classList.remove("active")):r.classList.contains("top")?(o.classList.add("active"),l.classList.remove("active"),d.classList.remove("active"),v.classList.remove("active")):r.classList.contains("bottom")?(d.classList.add("active"),o.classList.remove("active"),l.classList.remove("active"),v.classList.remove("active")):r.classList.contains("right")&&(v.classList.add("active"),o.classList.remove("active"),d.classList.remove("active"),l.classList.remove("active"))}function s(){localStorage.setItem("accessibility-settings",JSON.stringify({invertColors:i.classList.contains("invert"),grayscale:i.classList.contains("grayscale"),highSaturation:i.classList.contains("high-saturation"),lowSaturation:i.classList.contains("low-saturation"),underlineStyle0:i.classList.contains("underline-style-0"),underlineStyle1:i.classList.contains("underline-style-1"),underlineStyle2:i.classList.contains("underline-style-2"),fontSize:i.style.fontSize,lineHeight0:i.classList.contains("line-height-0"),lineHeight1:i.classList.contains("line-height-1"),lineHeight2:i.classList.contains("line-height-2"),letterSpacing:i.style.letterSpacing,textAlign:i.style.textAlign,contrast:i.classList.contains("contrast"),contrastStyle0:i.classList.contains("contrast-style-0"),contrastStyle1:i.classList.contains("contrast-style-1"),contrastStyle2:i.classList.contains("contrast-style-2"),hideImages:i.classList.contains("hide-images"),hideVideo:i.classList.contains("hide-video"),cursor0:S.classList.contains("cursor-0"),cursor1:S.classList.contains("cursor-1"),cursor2:S.classList.contains("cursor-2"),accPosition:r.classList.contains("left")?"left":r.classList.contains("top")?"top":r.classList.contains("bottom")?"bottom":r.classList.contains("right")?"right":""}))}const c=document.createElement("style");c.innerHTML=accessibilityMenuStyles,document.head.appendChild(c),document.body.insertAdjacentHTML("beforeend",accessibilityMenuHTML);const r=document.getElementById("accessibility-modal"),a=document.getElementById("closeBtn");document.getElementById("accessibility-tools");a.addEventListener("click",()=>{e()});const n=document.querySelectorAll(".acc-item");n.forEach(e=>{e.addEventListener("click",()=>{e.querySelector(".acc-child").classList.toggle("active"),e.querySelectorAll("path").forEach(t=>{t.style.fill=e.querySelector(".acc-child").classList.contains("active")?"var(--acc_color_2)":"var(--acc_color_1)"})})});const i=document.querySelector("html"),l=document.getElementById("align-acc-left"),o=document.getElementById("align-acc-top"),d=document.getElementById("align-acc-bottom"),v=document.getElementById("align-acc-right");t(),l.addEventListener("click",()=>{e(),r.classList.remove("top"),r.classList.remove("bottom"),r.classList.remove("right"),r.classList.add("left"),t()}),o.addEventListener("click",()=>{e(),r.classList.remove("left"),r.classList.remove("bottom"),r.classList.remove("right"),r.classList.add("top"),t()}),d.addEventListener("click",()=>{e(),r.classList.remove("left"),r.classList.remove("top"),r.classList.remove("right"),r.classList.add("bottom"),t()}),v.addEventListener("click",()=>{e(),r.classList.remove("left"),r.classList.remove("top"),r.classList.remove("bottom"),r.classList.add("right"),t()}),document.querySelector("#invert-colors").addEventListener("click",()=>{document.querySelector("#invert-colors");i.classList.toggle("invert")}),document.querySelector("#grayscale").addEventListener("click",()=>{document.querySelector("#grayscale");i.classList.toggle("grayscale")});let h=0;document.querySelector("#saturation").addEventListener("click",()=>{const e=document.querySelector("#saturation");2===h?(h=0,e.querySelector("p").innerText="Low Saturation",e.querySelector(".acc-progress-parent").classList.add("hidden"),e.classList.add("active"),i.classList.remove("high-saturation"),i.classList.remove("low-saturation")):(e.classList.remove("active"),0===h?(i.classList.add("low-saturation"),e.querySelector("p").innerText="Low Saturation",e.querySelector(".acc-progress-parent").classList.remove("hidden"),e.querySelector(".acc-progress-child-1").classList.add("active"),e.querySelector(".acc-progress-child-2").classList.remove("active")):1===h&&(i.classList.remove("low-saturation"),i.classList.add("high-saturation"),e.querySelector("p").innerText="High Saturation",e.querySelector(".acc-progress-parent").classList.remove("hidden"),e.querySelector(".acc-progress-child-1").classList.remove("active"),e.querySelector(".acc-progress-child-2").classList.add("active")),h++)});let g=0;document.querySelector("#underline").addEventListener("click",()=>{const e=document.querySelector("#underline");3===g?(g=0,e.querySelector(".acc-progress-parent").classList.add("hidden"),e.classList.add("active"),i.classList.remove("underline"),i.classList.remove("underline-style-0"),i.classList.remove("underline-style-1"),i.classList.remove("underline-style-2")):(e.classList.remove("active"),0===g?(i.classList.add("underline"),e.querySelector(".acc-progress-parent").classList.remove("hidden"),e.querySelector(".acc-progress-child-1").classList.add("active"),e.querySelector(".acc-progress-child-2").classList.remove("active"),e.querySelector(".acc-progress-child-3").classList.remove("active"),i.classList.add("underline-style-0"),i.classList.remove("underline-style-1"),i.classList.remove("underline-style-2")):1===g?(i.classList.remove("underline-style-0"),i.classList.add("underline-style-1"),i.classList.remove("underline-style-2"),e.querySelector(".acc-progress-parent").classList.remove("hidden"),e.querySelector(".acc-progress-child-1").classList.remove("active"),e.querySelector(".acc-progress-child-2").classList.add("active"),e.querySelector(".acc-progress-child-3").classList.remove("active")):2===g&&(i.classList.remove("underline-style-0"),i.classList.remove("underline-style-1"),i.classList.add("underline-style-2"),e.querySelector(".acc-progress-parent").classList.remove("hidden"),e.querySelector(".acc-progress-child-1").classList.remove("active"),e.querySelector(".acc-progress-child-2").classList.remove("active"),e.querySelector(".acc-progress-child-3").classList.add("active")),g++)});let u=0;document.querySelector("#font-size").addEventListener("click",()=>{const e=document.querySelector("#font-size");3===u?(u=0,e.querySelector(".acc-progress-parent").classList.add("hidden"),e.classList.add("active"),i.style.fontSize=""):(e.classList.remove("active"),0===u?(i.style.fontSize="1.3rem",e.querySelector(".acc-progress-parent").classList.remove("hidden"),e.querySelector(".acc-progress-child-1").classList.add("active"),e.querySelector(".acc-progress-child-2").classList.remove("active"),e.querySelector(".acc-progress-child-3").classList.remove("active")):1===u?(i.style.fontSize="1.5rem",e.querySelector(".acc-progress-parent").classList.remove("hidden"),e.querySelector(".acc-progress-child-1").classList.remove("active"),e.querySelector(".acc-progress-child-2").classList.add("active"),e.querySelector(".acc-progress-child-3").classList.remove("active")):2===u&&(i.style.fontSize="1.8rem",e.querySelector(".acc-progress-parent").classList.remove("hidden"),e.querySelector(".acc-progress-child-1").classList.remove("active"),e.querySelector(".acc-progress-child-2").classList.remove("active"),e.querySelector(".acc-progress-child-3").classList.add("active")),u++)});let y=0;document.querySelector("#line-height").addEventListener("click",()=>{const e=document.querySelector("#line-height");3===y?(y=0,e.querySelector(".acc-progress-parent").classList.add("hidden"),e.classList.add("active"),i.classList.remove("line-height-0"),i.classList.remove("line-height-1"),i.classList.remove("line-height-2")):(e.classList.remove("active"),0===y?(i.classList.add("line-height-0"),i.classList.remove("line-height-1"),i.classList.remove("line-height-2"),e.querySelector(".acc-progress-parent").classList.remove("hidden"),e.querySelector(".acc-progress-child-1").classList.add("active"),e.querySelector(".acc-progress-child-2").classList.remove("active"),e.querySelector(".acc-progress-child-3").classList.remove("active")):1===y?(i.classList.remove("line-height-0"),i.classList.add("line-height-1"),i.classList.remove("line-height-2"),e.querySelector(".acc-progress-parent").classList.remove("hidden"),e.querySelector(".acc-progress-child-1").classList.remove("active"),e.querySelector(".acc-progress-child-2").classList.add("active"),e.querySelector(".acc-progress-child-3").classList.remove("active")):2===y&&(i.classList.remove("line-height-0"),i.classList.remove("line-height-1"),i.classList.add("line-height-2"),e.querySelector(".acc-progress-parent").classList.remove("hidden"),e.querySelector(".acc-progress-child-1").classList.remove("active"),e.querySelector(".acc-progress-child-2").classList.remove("active"),e.querySelector(".acc-progress-child-3").classList.add("active")),y++)});let p=0;document.querySelector("#letter-spacing").addEventListener("click",()=>{const e=document.querySelector("#letter-spacing");3===p?(p=0,e.querySelector(".acc-progress-parent").classList.add("hidden"),e.classList.add("active"),i.style.letterSpacing=""):(e.classList.remove("active"),0===p?(i.style.letterSpacing="0.1rem",e.querySelector(".acc-progress-parent").classList.remove("hidden"),e.querySelector(".acc-progress-child-1").classList.add("active"),e.querySelector(".acc-progress-child-2").classList.remove("active"),e.querySelector(".acc-progress-child-3").classList.remove("active")):1===p?(i.style.letterSpacing="0.2rem",e.querySelector(".acc-progress-parent").classList.remove("hidden"),e.querySelector(".acc-progress-child-1").classList.remove("active"),e.querySelector(".acc-progress-child-2").classList.add("active"),e.querySelector(".acc-progress-child-3").classList.remove("active")):2===p&&(i.style.letterSpacing="0.3rem",e.querySelector(".acc-progress-parent").classList.remove("hidden"),e.querySelector(".acc-progress-child-1").classList.remove("active"),e.querySelector(".acc-progress-child-2").classList.remove("active"),e.querySelector(".acc-progress-child-3").classList.add("active")),p++)});let L=0;document.querySelector("#text-align").addEventListener("click",()=>{const e=document.querySelector("#text-align");3===L?(L=0,e.querySelector(".acc-progress-parent").classList.add("hidden"),e.classList.add("active"),i.style.textAlign=""):(e.classList.remove("active"),0===L?(i.style.textAlign="left",e.parentElement.querySelector("svg").innerHTML='',e.querySelector(".acc-progress-parent").classList.remove("hidden"),e.querySelector(".acc-progress-child-1").classList.add("active"),e.querySelector(".acc-progress-child-2").classList.remove("active"),e.querySelector(".acc-progress-child-3").classList.remove("active")):1===L?(i.style.textAlign="center",e.parentElement.querySelector("svg").innerHTML='',e.querySelector(".acc-progress-parent").classList.remove("hidden"),e.querySelector(".acc-progress-child-1").classList.remove("active"),e.querySelector(".acc-progress-child-2").classList.add("active"),e.querySelector(".acc-progress-child-3").classList.remove("active")):2===L&&(i.style.textAlign="right",e.parentElement.querySelector("svg").innerHTML='',e.querySelector(".acc-progress-parent").classList.remove("hidden"),e.querySelector(".acc-progress-child-1").classList.remove("active"),e.querySelector(".acc-progress-child-2").classList.remove("active"),e.querySelector(".acc-progress-child-3").classList.add("active")),L++)});let m=0;document.querySelector("#contrast").addEventListener("click",()=>{const e=document.querySelector("#contrast");3===m?(m=0,e.querySelector(".acc-progress-parent").classList.add("hidden"),e.classList.add("active"),i.classList.remove("contrast"),i.classList.remove("contrast-style-0"),i.classList.remove("contrast-style-1"),i.classList.remove("contrast-style-2")):(e.classList.remove("active"),0===m?(i.classList.add("contrast"),e.querySelector(".acc-progress-parent").classList.remove("hidden"),e.querySelector(".acc-progress-child-1").classList.add("active"),e.querySelector(".acc-progress-child-2").classList.remove("active"),e.querySelector(".acc-progress-child-3").classList.remove("active"),i.classList.add("contrast-style-0"),i.classList.remove("contrast-style-1"),i.classList.remove("contrast-style-2")):1===m?(i.classList.remove("contrast-style-0"),i.classList.add("contrast-style-1"),i.classList.remove("contrast-style-2"),e.querySelector(".acc-progress-parent").classList.remove("hidden"),e.querySelector(".acc-progress-child-1").classList.remove("active"),e.querySelector(".acc-progress-child-2").classList.add("active"),e.querySelector(".acc-progress-child-3").classList.remove("active")):2===m&&(i.classList.remove("contrast-style-0"),i.classList.remove("contrast-style-1"),i.classList.add("contrast-style-2"),e.querySelector(".acc-progress-parent").classList.remove("hidden"),e.querySelector(".acc-progress-child-1").classList.remove("active"),e.querySelector(".acc-progress-child-2").classList.remove("active"),e.querySelector(".acc-progress-child-3").classList.add("active")),m++)}),document.querySelector("#hide-images").addEventListener("click",()=>{i.classList.toggle("hide-images")}),document.querySelector("#hide-video").addEventListener("click",()=>{i.classList.toggle("hide-video")});let f=0;document.querySelector("#change-cursor").addEventListener("click",()=>{const e=document.querySelector("#change-cursor"),t=document.querySelector("#cursor"),s=document.getElementById("triangle-cursor");s.style.display="none",3===f?(f=0,e.querySelector(".acc-progress-parent").classList.add("hidden"),e.classList.add("active"),t.classList.remove("cursor-0"),t.classList.remove("cursor-1"),t.classList.remove("cursor-2"),i.style.cursor=""):(e.classList.remove("active"),0===f?(t.classList.add("cursor-0"),t.classList.remove("cursor-1"),t.classList.remove("cursor-2"),e.querySelector(".acc-progress-parent").classList.remove("hidden"),e.querySelector(".acc-progress-child-1").classList.add("active"),e.querySelector(".acc-progress-child-2").classList.remove("active"),e.querySelector(".acc-progress-child-3").classList.remove("active")):1===f?(t.classList.remove("cursor-0"),t.classList.add("cursor-1"),t.classList.remove("cursor-2"),e.querySelector(".acc-progress-parent").classList.remove("hidden"),e.querySelector(".acc-progress-child-1").classList.remove("active"),e.querySelector(".acc-progress-child-2").classList.add("active"),e.querySelector(".acc-progress-child-3").classList.remove("active")):2===f&&(t.classList.remove("cursor-0"),t.classList.remove("cursor-1"),t.classList.add("cursor-2"),i.style.cursor="none",e.querySelector(".acc-progress-parent").classList.remove("hidden"),e.querySelector(".acc-progress-child-1").classList.remove("active"),e.querySelector(".acc-progress-child-2").classList.remove("active"),e.querySelector(".acc-progress-child-3").classList.add("active"),s.style.display="block"),f++)});const S=document.getElementById("cursor");document.addEventListener("mousemove",e=>{if(S.classList.contains("cursor-0"))S.style.top=e.clientY+"px",S.style.left=e.clientX+"px";else if(S.classList.contains("cursor-1"))S.style.top=e.clientY+"px",S.style.left=0;else if(S.classList.contains("cursor-2")){S.style.top=e.clientY+"px",e.clientXwindow.innerWidth-window.innerWidth/8?S.style.left=window.innerWidth-window.innerWidth/8+"px":S.style.left=e.clientX+"px";const t=document.getElementById("triangle-cursor");t.style.top=e.clientY+"px",t.style.left=e.clientX+"px"}}),document.querySelectorAll("a,button").forEach(e=>{e.addEventListener("mouseover",()=>{S.classList.contains("cursor-0")&&(S.style.width="100px")}),e.addEventListener("mouseleave",()=>{S.classList.contains("cursor-0")&&(S.style.width="50px")})}),document.querySelector("#reset-all").addEventListener("click",()=>{const e=document.querySelector("#cursor");i.classList.remove("invert"),i.classList.remove("grayscale"),i.classList.remove("high-saturation"),i.classList.remove("low-saturation"),i.classList.remove("underline-style-0"),i.classList.remove("underline-style-1"),i.classList.remove("underline-style-2"),i.style.fontSize="",i.classList.remove("line-height-0"),i.classList.remove("line-height-1"),i.classList.remove("line-height-2"),i.style.letterSpacing="",i.style.textAlign="",i.classList.remove("contrast"),i.classList.remove("contrast-style-0"),i.classList.remove("contrast-style-1"),i.classList.remove("contrast-style-2"),i.classList.remove("hide-images"),i.classList.remove("hide-video"),e.classList.remove("cursor-0"),e.classList.remove("cursor-1"),e.classList.remove("cursor-2"),i.style.cursor="";const t=document.getElementById("triangle-cursor");t&&t.remove(),document.querySelectorAll(".acc-progress-parent").forEach(e=>{e.classList.add("hidden")}),document.querySelectorAll(".acc-child").forEach(e=>{e.classList.remove("active"),e.querySelectorAll("path").forEach(e=>{e.style.fill="var(--acc_color_1)"})})}),window.addEventListener("beforeunload",s);const w=JSON.parse(localStorage.getItem("accessibility-settings"));if(w&&(w.invertColors&&i.classList.add("invert"),w.grayscale&&i.classList.add("grayscale"),w.highSaturation&&i.classList.add("high-saturation"),w.lowSaturation&&i.classList.add("low-saturation"),w.underlineStyle0&&i.classList.add("underline-style-0"),w.underlineStyle1&&i.classList.add("underline-style-1"),w.underlineStyle2&&i.classList.add("underline-style-2"),w.fontSize&&(i.style.fontSize=w.fontSize),w.lineHeight0&&i.classList.add("line-height-0"),w.lineHeight1&&i.classList.add("line-height-1"),w.lineHeight2&&i.classList.add("line-height-2"),w.letterSpacing&&(i.style.letterSpacing=w.letterSpacing),w.textAlign&&(i.style.textAlign=w.textAlign),w.contrast&&i.classList.add("contrast"),w.contrastStyle0&&i.classList.add("contrast-style-0"),w.contrastStyle1&&i.classList.add("contrast-style-1"),w.contrastStyle2&&i.classList.add("contrast-style-2"),w.hideImages&&i.classList.add("hide-images"),w.hideVideo&&i.classList.add("hide-video"),w.cursor0&&S.classList.add("cursor-0"),w.cursor1&&S.classList.add("cursor-1"),w.cursor2&&S.classList.add("cursor-2"),r.classList.contains("left")?r.classList.remove("left"):r.classList.contains("top")?r.classList.remove("top"):r.classList.contains("bottom")?r.classList.remove("bottom"):r.classList.contains("right")&&r.classList.remove("right"),"left"===w.accPosition?r.classList.add("left"):"top"===w.accPosition?r.classList.add("top"):"bottom"===w.accPosition?r.classList.add("bottom"):"right"===w.accPosition&&r.classList.add("right"),t()),i.classList.contains("invert")&&document.querySelector("#invert-colors").classList.add("active"),i.classList.contains("grayscale")&&document.querySelector("#grayscale").classList.add("active"),i.classList.contains("high-saturation")||i.classList.contains("low-saturation")){const e=document.querySelector("#saturation");e.classList.add("active"),e.querySelector(".acc-progress-parent").classList.remove("hidden"),i.classList.contains("high-saturation")?(e.querySelector(".acc-progress-child-1").classList.remove("active"),e.querySelector(".acc-progress-child-2").classList.add("active")):i.classList.contains("low-saturation")&&(e.querySelector(".acc-progress-child-1").classList.add("active"),e.querySelector(".acc-progress-child-2").classList.remove("active"))}if(i.classList.contains("underline-style-0")||i.classList.contains("underline-style-1")||i.classList.contains("underline-style-2")){const e=document.querySelector("#underline");e.classList.add("active"),e.querySelector(".acc-progress-parent").classList.remove("hidden"),i.classList.contains("underline-style-0")?(e.querySelector(".acc-progress-child-1").classList.add("active"),e.querySelector(".acc-progress-child-2").classList.remove("active"),e.querySelector(".acc-progress-child-3").classList.remove("active")):i.classList.contains("underline-style-1")?(e.querySelector(".acc-progress-child-1").classList.remove("active"),e.querySelector(".acc-progress-child-2").classList.add("active"),e.querySelector(".acc-progress-child-3").classList.remove("active")):i.classList.contains("underline-style-2")&&(e.querySelector(".acc-progress-child-1").classList.remove("active"),e.querySelector(".acc-progress-child-2").classList.remove("active"),e.querySelector(".acc-progress-child-3").classList.add("active"))}if(i.style.fontSize){const e=document.querySelector("#font-size");e.classList.add("active"),e.querySelector(".acc-progress-parent").classList.remove("hidden"),"1.3rem"===i.style.fontSize?(e.querySelector(".acc-progress-child-1").classList.add("active"),e.querySelector(".acc-progress-child-2").classList.remove("active"),e.querySelector(".acc-progress-child-3").classList.remove("active")):"1.5rem"===i.style.fontSize?(e.querySelector(".acc-progress-child-1").classList.remove("active"),e.querySelector(".acc-progress-child-2").classList.add("active"),e.querySelector(".acc-progress-child-3").classList.remove("active")):"1.8rem"===i.style.fontSize&&(e.querySelector(".acc-progress-child-1").classList.remove("active"),e.querySelector(".acc-progress-child-2").classList.remove("active"),e.querySelector(".acc-progress-child-3").classList.add("active"))}if(i.classList.contains("line-height-0")||i.classList.contains("line-height-1")||i.classList.contains("line-height-2")){const e=document.querySelector("#line-height");e.classList.add("active"),e.querySelector(".acc-progress-parent").classList.remove("hidden"),i.classList.contains("line-height-0")?(e.querySelector(".acc-progress-child-1").classList.add("active"),e.querySelector(".acc-progress-child-2").classList.remove("active"),e.querySelector(".acc-progress-child-3").classList.remove("active")):i.classList.contains("line-height-1")?(e.querySelector(".acc-progress-child-1").classList.remove("active"),e.querySelector(".acc-progress-child-2").classList.add("active"),e.querySelector(".acc-progress-child-3").classList.remove("active")):i.classList.contains("line-height-2")&&(e.querySelector(".acc-progress-child-1").classList.remove("active"),e.querySelector(".acc-progress-child-2").classList.remove("active"),e.querySelector(".acc-progress-child-3").classList.add("active"))}if(i.style.letterSpacing){const e=document.querySelector("#letter-spacing");e.classList.add("active"),e.querySelector(".acc-progress-parent").classList.remove("hidden"),"0.1rem"===i.style.letterSpacing?(e.querySelector(".acc-progress-child-1").classList.add("active"),e.querySelector(".acc-progress-child-2").classList.remove("active"),e.querySelector(".acc-progress-child-3").classList.remove("active")):"0.2rem"===i.style.letterSpacing?(e.querySelector(".acc-progress-child-1").classList.remove("active"),e.querySelector(".acc-progress-child-2").classList.add("active"),e.querySelector(".acc-progress-child-3").classList.remove("active")):"0.3rem"===i.style.letterSpacing&&(e.querySelector(".acc-progress-child-1").classList.remove("active"),e.querySelector(".acc-progress-child-2").classList.remove("active"),e.querySelector(".acc-progress-child-3").classList.add("active"))}if(i.style.textAlign){const e=document.querySelector("#text-align");e.classList.add("active"),e.querySelector(".acc-progress-parent").classList.remove("hidden"),"left"===i.style.textAlign?(e.querySelector(".acc-progress-child-1").classList.add("active"),e.querySelector(".acc-progress-child-2").classList.remove("active"),e.querySelector(".acc-progress-child-3").classList.remove("active")):"center"===i.style.textAlign?(e.querySelector(".acc-progress-child-1").classList.remove("active"),e.querySelector(".acc-progress-child-2").classList.add("active"),e.querySelector(".acc-progress-child-3").classList.remove("active")):"right"===i.style.textAlign&&(e.querySelector(".acc-progress-child-1").classList.remove("active"),e.querySelector(".acc-progress-child-2").classList.remove("active"),e.querySelector(".acc-progress-child-3").classList.add("active"))}if(i.classList.contains("contrast-style-0")||i.classList.contains("contrast-style-1")||i.classList.contains("contrast-style-2")){const e=document.querySelector("#contrast");e.classList.add("active"),e.querySelector(".acc-progress-parent").classList.remove("hidden"),i.classList.contains("contrast-style-0")?(e.querySelector(".acc-progress-child-1").classList.add("active"),e.querySelector(".acc-progress-child-2").classList.remove("active"),e.querySelector(".acc-progress-child-3").classList.remove("active")):i.classList.contains("contrast-style-1")?(e.querySelector(".acc-progress-child-1").classList.remove("active"),e.querySelector(".acc-progress-child-2").classList.add("active"),e.querySelector(".acc-progress-child-3").classList.remove("active")):i.classList.contains("contrast-style-2")&&(e.querySelector(".acc-progress-child-1").classList.remove("active"),e.querySelector(".acc-progress-child-2").classList.remove("active"),e.querySelector(".acc-progress-child-3").classList.add("active"))}if(i.classList.contains("hide-images")&&document.querySelector("#hide-images").classList.add("active"),i.classList.contains("hide-video")&&document.querySelector("#hide-video").classList.add("active"),S.classList.contains("cursor-0")||S.classList.contains("cursor-1")||S.classList.contains("cursor-2")){const e=document.querySelector("#change-cursor"),t=document.getElementById("triangle-cursor");t.style.display="none",e.classList.add("active"),e.querySelector(".acc-progress-parent").classList.remove("hidden"),S.classList.contains("cursor-0")?(e.querySelector(".acc-progress-child-1").classList.add("active"),e.querySelector(".acc-progress-child-2").classList.remove("active"),e.querySelector(".acc-progress-child-3").classList.remove("active")):S.classList.contains("cursor-1")?(e.querySelector(".acc-progress-child-1").classList.remove("active"),e.querySelector(".acc-progress-child-2").classList.add("active"),e.querySelector(".acc-progress-child-3").classList.remove("active")):S.classList.contains("cursor-2")&&(e.querySelector(".acc-progress-child-1").classList.remove("active"),e.querySelector(".acc-progress-child-2").classList.remove("active"),e.querySelector(".acc-progress-child-3").classList.add("active"),t.style.display="block")}n.forEach(e=>{e.querySelectorAll("path").forEach(t=>{t.style.fill=e.querySelector(".acc-child").classList.contains("active")?"var(--acc_color_2)":"var(--acc_color_1)"})})}); \ No newline at end of file diff --git a/package.json b/package.json index 0c5f4dc..7f1d66b 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "accessibility-plugin", - "version": "1.1.0", + "version": "1.2.0", "description": "You can use this plugin to make a accessibility friendly website fast and easily", "main": "accessibility-menu.js", "scripts": {