<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous">
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>
<div class="dmtop margin-accesibilidad">
<button type="button" class="btn btnAccesibilidad" id="botoon" data-bs-
toggle="modal"
data-bs-target="#modalAcc">
</button>
</div>
<script defer
src="https://cdn.jsdelivr.net/npm/alpinejs@3.13.5/dist/cdn.min.js"></script>
<div x-data="{ grayscale: 0, contrasteMode: 0, saturacionMode: 0, leerMode: 0,
resaltar: 0, indicadoresS: ['gray', 'gray', 'red'],indicadoresC: ['gray', 'gray',
'red'], indicadoresL: ['gray', 'gray', 'red'], indicadoresG: ['gray', 'gray',
'gray', 'gray', 'gray', 'red'] }"
x-init="
$watch('grayscale', value => {
switch (value) {
case 20:
document.documentElement.style.filter = 'grayscale(20%)';
indicadoresG = ['red', 'gray', 'gray', 'gray', 'gray',
'gray'];
break;
case 40:
document.documentElement.style.filter = 'grayscale(40%)';
indicadoresG = ['red', 'red', 'gray', 'gray', 'gray',
'gray'];
break;
case 60:
document.documentElement.style.filter = 'grayscale(60%)';
indicadoresG = ['red', 'red', 'red', 'gray', 'gray',
'gray'];
break;
case 80:
document.documentElement.style.filter = 'grayscale(80%)';
indicadoresG = ['red', 'red', 'red', 'red', 'gray',
'gray'];
break;
case 100:
document.documentElement.style.filter = 'grayscale(100%)';
indicadoresG = ['red', 'red', 'red', 'red', 'red', 'gray'];
break;
case 0:
document.documentElement.style.filter = 'grayscale(0)';
indicadoresG = ['gray', 'gray', 'gray', 'gray', 'gray',
'red'];
break;
}
});
$watch('contrasteMode', value => {
switch (value % 3) {
case 0:
document.documentElement.style.filter = 'invert(0)';
indicadoresC = ['gray', 'gray', 'red']
break;
case 1:
document.documentElement.style.filter = 'invert(1)';
indicadoresC = ['red', 'gray', 'gray']
break;
case 2:
document.documentElement.style.filter = 'sepia(1)';
indicadoresC = ['gray', 'red', 'gray']
break;
}
});
$watch('saturacionMode', value => {
switch (value % 3) {
case 0:
document.documentElement.style.filter = 'saturate(1)';
indicadoresS = ['gray', 'gray', 'red']
break;
case 1:
document.documentElement.style.filter = 'saturate(2)';
indicadoresS = ['red', 'gray' , 'gray']
break;
case 2:
document.documentElement.style.filter = 'saturate(0.5)';
indicadoresS = ['gray', 'red', 'gray']
break;
}
});
$watch('leerMode', value => {
let crosshair = document.getElementById('crosshair');
let readingMask = document.getElementById('readingMask'); //
Asegúrate de tener una referencia a este elemento
let e = { pageX: window.innerWidth / 2, pageY: window.innerHeight *
0.95 }; // 75% hacia abajo en la pantalla
switch (value % 3) {
case 0: // normal mode
document.onmousemove = null;
crosshair.style.display = 'none';
readingMask.style.display = 'none';
document.body.style.cursor = 'auto';
document.body.classList.remove('large-cursor')
document.body.classList.remove('blur');
indicadoresL = ['gray', 'gray', 'red']
break;
case 1: // crosshair mode
document.onmousemove = function(e) {
crosshair.style.left = e.pageX - (crosshair.offsetWidth
/ 2) + 'px';
crosshair.style.top = e.pageY - (crosshair.offsetHeight
/ 2) + 'px';
crosshair.style.display = 'block';
readingMask.style.display = 'none';
document.body.style.cursor = 'auto';
indicadoresL = ['red', 'gray', 'gray']
}
document.onmousemove(e); // Ejecuta la función
inmediatamente
break;
case 2:
document.onmousemove = function(e) {
readingMask.style.left = e.pageX -
(readingMask.offsetWidth / 2) + 'px';
readingMask.style.top = e.pageY -
(readingMask.offsetHeight / 2) + 'px';
readingMask.style.display = 'block';
crosshair.style.display = 'none';
document.body.style.cursor = 'auto';
document.body.classList.add('blur');
indicadoresL = ['gray', 'red', 'gray']
}
document.onmousemove(e); // Ejecuta la función
inmediatamente
break;
}
});
$watch('resaltar', value => {
let links = document.querySelectorAll('a');
links.forEach(link => {
if (value) {
link.style.backgroundColor = 'black';
link.style.color = 'yellow';
} else {
link.style.backgroundColor = '';
link.style.color= '';
}
});
})
">
<div id="readingMask" class="reading-mask"></div>
<!-- Modal -->
<div class="modal fade" id="modalAcc" tabindex="-1" aria-
labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-scrollable" id="modalDialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="titulo">Accesibilidad</h5>
<button type="button" class="btn-close" data-bs-
dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div id="contet1" onclick="increaseFontSize()">
<div>
<button id="bton1" onclick="increaseFontSize()">
<img id="aumentar" src="images/aumentar.png"
alt="aumentar fuente">
</button>
</div>
<div id="fonts">
<span class="button-text">Aumentar Fuente</span>
</div>
</div>
<div id="contet2" onclick="decreaseFontSize()">
<div>
<button id="bton3" onclick="decreaseFontSize()">
<img id="disminuir" src="images/disminuir.png"
alt="disminuir fuente">
</button>
</div>
<div>
<span class="button-text">Disminuir Fuente</span>
</div>
</div>
<div id="contet3" onclick="resetFontSize()">
<div>
<button id="bton2" onclick="resetFontSize()">
<img id="restaurar" src="images/restaurar.png"
alt="Restaurar tamaño de fuente">
</button>
</div>
<div>
<span class="button-text">Restablecer Fuente</span>
</div>
</div>
<div id="contet5" @click="saturacionMode = (saturacionMode
+ 1) % 3" class="indicators">
<div>
<button id="bton6" @click="saturacionMode =
(saturacionMode + 1) % 3">
<img id="saturar" src="images/saturar.png"
alt="saturacion">
</button>
</div>
<div>
<span class="button-text">Modo saturar</span>
<span :style="'color: ' +
indicadoresS[0]">Alto</span>
<span :style="'color: ' +
indicadoresS[1]">Bajo</span>
<span :style="'color: ' +
indicadoresS[2]">Normal</span>
</div>
</div>
<div id="contet6" @click="contrasteMode = (contrasteMode +
1) % 3">
<div>
<button id="bton5" @click="contrasteMode =
(contrasteMode + 1) % 3">
<img id="contraste" src="images/contraste.png"
alt="contraste">
</button>
</div>
<div>
<span class="button-text">Modo contraste</span>
<span :style="'color: ' +
indicadoresC[0]">Alto</span>
<span :style="'color: ' +
indicadoresC[1]">Bajo</span>
<span :style="'color: ' +
indicadoresC[2]">Normal</span>
</div>
</div>
<div id="contet7" @click="leerMode = (leerMode + 1) % 3">
<div>
<button id="bton7" @click="leerMode = (leerMode +
1) % 3">
<img id="lectura" src="images/lectura.png"
alt="Cambiar a modo lectura">
</button>
</div>
<div>
<span class="button-text">Ayudas lectoras</span>
<span :style="'color: ' + indicadoresL[0]">Linea
guia</span>
<span :style="'color: ' +
indicadoresL[1]">Mascara</span>
<span :style="'color: ' +
indicadoresL[2]">Normal</span>
</div>
</div>
<div id="contet8" @click="resaltar = !resaltar">
<div>
<button id="bton4" @click="resaltar = !resaltar">
<img id="resaltar" src="images/link.png"
alt="Resaltar links">
</button>
</div>
<div>
<span class="button-text">Resaltar links</span>
</div>
</div>
<div id="contet9" @click="window.scrollTo({ top: 0,
behavior: 'smooth' })">
<div>
<button id="bton8" @click="window.scrollTo({ top:
0, behavior: 'smooth' })">
<img id="inicio" src="images/subir.png"
alt="subir">
</button>
</div>
<div>
<span class="button-text">Ir arriba</span>
</div>
</div>
<div id="contet10"
@click="window.scrollTo({ top:
document.body.scrollHeight, belhavior: 'smooth'})">
<div>
<button id="bton9"
@click="window.scrollTo({ top:
document.body.scrollHeight, belhavior: 'smooth'})">
<img id="final" src="images/bajar.png"
alt="bajar">
</button>
</div>
<div>
<span class="button-text">Ir abajo</span>
</div>
</div>
<div id="contet11"
@click="grayscale = Math.min(grayscale + 20) % 120;
if(grayscale === 120) grayscale = 0;">
<div>
<button id="bton10"
@click="grayscale = Math.min(grayscale + 120) %
120; if(grayscale === 120) grayscale = 0;">
<img id="mas" src="images/anadir.png"
alt="escala de grises">
</button>
</div>
<div>
<span class="button-text">Escala gris</span>
<span :style="'color: ' +
indicadoresG[0]">20%</span>
<span :style="'color: ' +
indicadoresG[1]">40%</span>
<span :style="'color: ' +
indicadoresG[2]">60%</span>
<span :style="'color: ' +
indicadoresG[3]">80%</span>
<span :style="'color: ' +
indicadoresG[4]">100%</span>
<span :style="'color: ' +
indicadoresG[5]">0%</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="crosshair" class="crosshair">
<div class="line horizontal"></div>
<div class="line vertical"></div>
</div>
<script>
const originalFontSizes = new Map();
let timeoutId;
// Almacenar los tamaños de fuente originales al cargar la página
document.addEventListener('DOMContentLoaded', function () {
document.querySelectorAll('*').forEach(element => {
let fontSize = window.getComputedStyle(element).fontSize;
originalFontSizes.set(element, fontSize);
});
document.querySelectorAll('#contet1, #contet2, #contet3, #contet5,
#contet6, #contet7, #contet8, #contet9, #contet10, #contet11,
#contet12').forEach(element => {
element.addEventListener('mouseenter', function () {
// Cancelar el timeout si ya existe uno
if (timeoutId) {
clearTimeout(timeoutId);
}
// Agregar un retraso antes de agregar la clase 'active'
timeoutId = setTimeout(() => {
this.classList.add('active');
}, 0);
});
element.addEventListener('mouseleave', function () {
// Cancelar el timeout si ya existe uno
if (timeoutId) {
clearTimeout(timeoutId);
}
// Quitar la clase 'active' inmediatamente
this.classList.remove('active');
});
});
});
function changeFontSize(element, change) {
// Omitir elementos dentro del modal y del botón
if (document.querySelector('#modalAcc').contains(element)) {
return;
}
let fontSize = parseFloat(window.getComputedStyle(element).fontSize);
element.style.fontSize = `${fontSize + change}px`;
}
function increaseFontSize() {
document.querySelectorAll('*').forEach(element =>
changeFontSize(element, 5));
}
function resetFontSize() {
// Restablecer a los tamaños de fuente originales
originalFontSizes.forEach((originalFontSize, element) => {
element.style.fontSize = originalFontSize;
});
}
function decreaseFontSize() {
document.querySelectorAll('*').forEach(element =>
changeFontSize(element, -5));
}
var myModal = new bootstrap.Modal(document.getElementById('modalAcc'), {
backdrop: false
});
myModal._element.addEventListener('shown.bs.modal', function () {
document.body.style.overflowY = 'visible';
});
myModal._element.addEventListener('hidden.bs.modal', function () {
document.body.style.overflowY = 'auto';
});
</script>
