-
Notifications
You must be signed in to change notification settings - Fork 0
/
Index.html
139 lines (124 loc) · 4.89 KB
/
Index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
<!DOCTYPE html>
<html lang="es">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Convertir a Lenguaje de Señas y a voz</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link rel="stylesheet" type="text/css" href="style.css"/>
<style>
body {
font-family: Arial, sans-serif;
background-color: #0B60B0;
color: #FFF;
text-align: center;
padding: 20px;
margin: 0;
}
h1 {
font-size: 3.5vh; /* Utilizar unidades relativas para el tamaño de fuente en dispositivos móviles */
}
#inputText, #outputSign {
width: 80%;
margin: 0 auto;
max-width: 600px;
}
#inputText {
padding: 2vh; /* Utilizar unidades relativas para el espaciado en dispositivos móviles */
font-size: 3vh; /* Utilizar unidades relativas para el tamaño de fuente en dispositivos móviles */
}
#outputSign {
font-family: 'Gallaudet Regular';
font-weight: normal;
background-color: #FFF;
color: #000;
font-size: 10vh; /* Utilizar unidades relativas para el tamaño de fuente en dispositivos móviles */
padding: 2vh; /* Utilizar unidades relativas para el espaciado en dispositivos móviles */
border-radius: 10px;
margin-top: 2vh; /* Utilizar unidades relativas para el margen en dispositivos móviles */
word-wrap: break-word;
overflow-y: auto;
max-height: 40vh; /* Utilizar unidades relativas para el tamaño en dispositivos móviles */
width: 90vw; /* Utilizar unidades relativas para el ancho en dispositivos móviles */
}
#footer {
font-size: 2vh; /* Utilizar unidades relativas para el tamaño de fuente en dispositivos móviles */
margin-top: 2vh; /* Utilizar unidades relativas para el margen en dispositivos móviles */
}
#footer a {
color: #FFF;
}
#limpiarButton {
background-color: #F0EDCF;
color: #0B60B0;
border: none;
padding: 2vh 4vw; /* Utilizar unidades relativas para el espaciado en dispositivos móviles */
margin-top: 2vh; /* Utilizar unidades relativas para el margen en dispositivos móviles */
cursor: pointer;
font-size: 2.5vh;
}
.boton-estilo {
background-color: #F0EDCF;
color: #0B60B0;
border: none;
padding: 2vh 4vw;
margin-top: 2vh;
cursor: pointer;
font-size: 2.5vh;
}
</style>
</head>
<body>
<h1 tabindex="0">Convertir Texto a Lenguaje de Señas y a Voz</h1>
<textarea id="inputText" placeholder="Pega o escribe el texto aquí"></textarea><br>
<button id="boton" class="boton-estilo">Leer en Voz Alta</button>
<button id="pararBoton" class="boton-estilo" onclick="pararLectura()">Parar de Leer</button>
<div tabindex="0" id="outputSign"></div>
<button id="limpiarButton" class="boton-estilo" onclick="limpiarTexto()">Limpiar</button>
<div id="footer" tabindex="0">
© Powered by <a href="https://biogestion.com.co/" target="_blank" rel="noopener">Globuss Biogestión</a><br>
<a href="politica-de-privacidad.html" target="_blank">Política de Privacidad</a>
</div>
<script>
function eliminarTildes(texto) {
return texto.normalize("NFD").replace(/[\u0300-\u036f]/g, "");
}
function convertirALenguajeDeSenas() {
const inputText = document.getElementById("inputText").value;
const outputSign = document.getElementById("outputSign");
const textoSinTildes = eliminarTildes(inputText);
outputSign.textContent = textoSinTildes;
}
function limpiarTexto() {
document.getElementById("inputText").value = "";
document.getElementById("outputSign").textContent = "";
}
document.getElementById("inputText").addEventListener("input", convertirALenguajeDeSenas);
</script>
<script>
// Verifica si el navegador soporta la Web Speech API
if ('speechSynthesis' in window) {
var synthesis = window.speechSynthesis;
var boton = document.getElementById('boton');
var inputText = document.getElementById('inputText'); // Cambio de 'texto' a 'inputText'
boton.addEventListener('click', function() {
// Crea un objeto SpeechSynthesisUtterance
var mensaje = new SpeechSynthesisUtterance(inputText.value); // Cambio de 'texto' a 'inputText'
// Reproduce el mensaje en voz alta
synthesis.speak(mensaje);
});
} else {
// El navegador no es compatible con la Web Speech API
alert("Tu navegador no admite la síntesis de voz.");
}
</script>
<script>
var synthesis = window.speechSynthesis; // Mueve la variable 'synthesis' fuera del evento del botón para que esté disponible globalmente
function pararLectura() {
if (synthesis.speaking) {
synthesis.cancel();
}
}
// Resto del código
</script>
</body>
</html>