diff --git a/Encriptador.js b/Encriptador.js new file mode 100644 index 0000000..bfd266e --- /dev/null +++ b/Encriptador.js @@ -0,0 +1,115 @@ +const btnEncriptar = document.querySelector(".btn-encriptar"); +const txtEncriptar = document.querySelector(".encriptar"); +const aviso = document.querySelector(".textalert"); +const respuesta = document.querySelector(".evaluar"); +const contenido = document.querySelector(".tarjeta-visualizador"); +const btnCopiar = document.querySelector(".btn-copiar"); +const btnDesencriptar = document.querySelector(".btn-desencriptar"); + +btnEncriptar.addEventListener("click", e=>{ + e.preventDefault(); + let texto = txtEncriptar.value; + let txt = texto.normalize("NFD").replace(/[$\.¿\?~!\¡@#%^&*()_|}\{[\]>\<:"`;,\u0300-\u036f']/g, ""); + + if(texto == ""){ + aviso.style.background = "#0A3871"; + aviso.style.color = "#FFFF"; + aviso.style.fontWeight = "800"; + aviso.textContent = "El campo de texto está vacio"; + + setTimeout(()=>{ + aviso.removeAttribute("style"); + },1500); + } + + else if(texto !== txt){ + aviso.style.background = "#0A3871"; + aviso.style.color = "#FFFF"; + aviso.style.fontWeight = "800"; + aviso.textContent = "No usar caracteres especiales"; + + setTimeout(()=>{ + aviso.removeAttribute("style"); + },1500); + } + + else if(texto !== texto.toLowerCase()){ + aviso.style.background = "#0A3871"; + aviso.style.color = "#FFFF"; + aviso.style.fontWeight = "800"; + aviso.textContent = "Solo letras minúsculas y sin acentos"; + + setTimeout(()=>{ + aviso.removeAttribute("style"); + },1500); + } + + else{ + texto = texto.replace(/e/mg, "enter"); + texto = texto.replace(/i/mg, "imes"); + texto = texto.replace(/a/mg, "ai"); + texto = texto.replace(/o/mg, "ober"); + texto = texto.replace(/u/mg, "ufat"); + + respuesta.innerHTML = texto; + btnCopiar.style.visibility = "inherit"; + contenido.remove(); + } +}); + +btnDesencriptar.addEventListener("click", e=>{ + e.preventDefault(); + let texto = txtEncriptar.value; + let txt = texto.normalize("NFD").replace(/[$\.¿\?~!\¡@#%^&*()_|}\{[\]>\<:"`;,\u0300-\u036f']/g, ""); + + if(texto == ""){ + aviso.style.background = "#0A3871"; + aviso.style.color = "#FFFF"; + aviso.style.fontWeight = "800"; + aviso.textContent = "El campo de texto no debe estar vacio"; + + setTimeout(()=>{ + aviso.removeAttribute("style"); + },1500); + } + + else if(texto !== txt){ + aviso.style.background = "#0A3871"; + aviso.style.color = "#FFFF"; + aviso.style.fontWeight = "800"; + aviso.textContent = "No debe tener acentos y caracteres especiales"; + + setTimeout(()=>{ + aviso.removeAttribute("style"); + },1500); + } + + else if(texto !== texto.toLowerCase()){ + aviso.style.background = "#0A3871"; + aviso.style.color = "#FFFF"; + aviso.style.fontWeight = "800"; + aviso.textContent = "El texto debe ser todo en minúscula"; + + setTimeout(()=>{ + aviso.removeAttribute("style"); + },1500); + } + + else{ + texto = texto.replace(/enter/mg, "e"); + texto = texto.replace(/imes/mg, "i"); + texto = texto.replace(/ai/mg, "a"); + texto = texto.replace(/ober/mg, "o"); + texto = texto.replace(/ufat/mg, "u"); + + respuesta.innerHTML = texto; + btnCopiar.style.visibility = "inherit"; + contenido.remove(); + } +}); + +btnCopiar.addEventListener("click", copiar = () => { + var contenido = document.querySelector(".evaluar").textContent; + navigator.clipboard.writeText(contenido); +}) + diff --git a/Imagenes/alert.png b/Imagenes/alert.png new file mode 100644 index 0000000..f9c080c Binary files /dev/null and b/Imagenes/alert.png differ diff --git a/Imagenes/linkedinicon.svg b/Imagenes/linkedinicon.svg new file mode 100644 index 0000000..2da6438 --- /dev/null +++ b/Imagenes/linkedinicon.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/Imagenes/logo.png b/Imagenes/logo.png new file mode 100644 index 0000000..fb39bfd Binary files /dev/null and b/Imagenes/logo.png differ diff --git a/Imagenes/logoicon.ico b/Imagenes/logoicon.ico new file mode 100644 index 0000000..28568b1 Binary files /dev/null and b/Imagenes/logoicon.ico differ diff --git a/Imagenes/personaje.png b/Imagenes/personaje.png new file mode 100644 index 0000000..4e14bec Binary files /dev/null and b/Imagenes/personaje.png differ diff --git a/Index.html b/Index.html new file mode 100644 index 0000000..57d3f56 --- /dev/null +++ b/Index.html @@ -0,0 +1,59 @@ + + + + + + Encriptador + + + + + +
+ + + +
+ +
+
+ + + +
+ + Imagen Alerta +

Solo letras minúsculas y sin acentos

+ +
+
+ + + +
+
+ +
+ +
+ Imagen de Personaje +

Ningún mensaje fue encontrado

+

Ingresa el texto que deseas encriptar o desencriptar

+ +
+ + + + + +
+
+ + + + \ No newline at end of file diff --git a/Style.css b/Style.css new file mode 100644 index 0000000..dcf0d81 --- /dev/null +++ b/Style.css @@ -0,0 +1,358 @@ +@import url('https://fonts.googleapis.com/css2?family=Inter&display=swap'); + +:root{ + --Shadow:#00000014; + --Shadow2: #00000020; + --Shadow3:#E5E5E5; + --Fondo:#F3F5FC; + --white: #FFFFFF; + --dark-blue-100: #609ED4; + --dark-blue-200: #356EA9; + --dark-blue-300: #0A3871; + --dark-blue-400: #072B61; + --dark-blue-500: #052051; + --gray-100: #CED4DA; + --gray-200: #ADB5BD; + --gray-300: #868E96; + --gray-500: #343A40; + --gray-400: #495057; + --gray-900: #212529; +} + +*{ + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: 'inter', sans-serif; + text-decoration: none; + background: var(--Fondo); +} + +body{ + height: 100%; +} + +img{ + max-width: 100%; +} + +header{ + position: absolute; + margin: 40px 0px 0px 40px; +} + +header .logo{ + display: flex; + align-items: flex-start; + width: 120px; + height: 48px; +} + +main{ + display: flex; + flex-direction: row; +} + +.encriptador{ + width: 60%; + margin: 168px 0px 0px 140px; + background: transparent; +} + +.encriptar{ + width: 660px; + height: 288px; + font-weight: 400; + font-size: 32px; + line-height: 48px; + outline: none; + border: 0px solid; + resize: none; +} + +.encriptar::placeholder,:focus{ + color: var(--dark-blue-300); +} + +.encriptador-aviso{ + display: flex; + flex-direction: row; + align-items: center; + padding: 0; + gap: 8px; + position: absolute; + top: 480px; +} + +.textalert{ + width: 100%; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 150%; + opacity: 0.8; + color: #495057; +} + +.encriptar-desencriptar{ + display: flex; + flex-direction: row; + align-items: flex-start; + gap: 24px; + position: absolute; + top: 526px; +} + +.btn-encriptar{ + width: 328px; + height: 67px; + padding: 24px; + font-style: normal; + font-weight: 400; + font-size: 16px; + line-height: 19px; + text-align: center; + color: var(--white); + background-color: var(--dark-blue-300); + border: 1px solid var(--dark-blue-300); + border-radius: 24px; + cursor: pointer; + box-shadow: 0px 20px 29px -5px var(--Shadow); +} + +.btn-encriptar:active,.btn-desencriptar:active{ + background: var(--gray-300); + top: 2px; +} + +.btn-desencriptar{ + width: 328px; + height: 67px; + padding: 24px; + font-style: normal; + font-weight: 400; + font-size: 16px; + line-height: 19px; + text-align: center; + color: var(--dark-blue-300); + background-color: #D8DFE8; + border: 1px solid var(--dark-blue-300); + border-radius: 24px; + cursor: pointer; + box-shadow: 0px 20px 29px -5px var(--Shadow); +} + +.btn-copiar:active{ + background: var(--gray-300); +} + +.visualizador{ + width: 270px; + height: 580px; + background: var(--white); + box-shadow: 10px 10px 10px -8px var(--Shadow2); + position: relative; + margin-top: 40px; + border-radius: 32px; + text-align: center; +} + +.tarjeta-visualizador{ + width: 250px; + margin: auto; + margin-top: 50%; + background: var(--white); +} + +.img-personaje{ + background: var(--white); +} + +.texto-visualizador-uno{ + font-style: normal; + font-weight: 700; + font-size: 18px; + line-height: 120%; + text-align: center; + color: var(--gray-500); + background: var(--white); +} + +.texto-visualizador-dos{ + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 150%; + text-align: center; + color: var(--gray-400); + background: var(--white); +} + +.evaluar{ + width: 100%; + height: 485px; + position: absolute; + padding: 20px; + top: 0; + left: 0; + font-weight: 400; + font-size: 24px; + line-height: 36px; + color: var(--gray-400); + background: transparent; + border-top-right-radius: 32px; + border-top-left-radius: 32px; + border: none; + resize: none; +} + +.evaluar:focus{ + outline: none; +} + +.btn-copiar{ + width: 224px; + height: 67px; + margin: 23px; + position: absolute; + bottom: 0; + left: 0; + visibility: hidden; + padding: 24px; + font-size: 16px; + line-height: 19px; + text-align: center; + background: var(--white); + border: 1px solid var(--dark-blue-300); + border-radius: 20px; + cursor: pointer; +} + +.btn-encriptar:hover, +.btn-desencriptar:hover, +.btn-copiar:hover{ + transform: scale(0.95); +} + +footer{ + margin-top: 15px; + padding: 8px; + border-top: 2px solid var(--Shadow3); + color: var(--gray-500); + text-align: center; + height: 5px; + font-size: 20px; + font-weight: 700; +} + +.linkedin:hover{ + color: var(--Shadow3); + opacity: 0.9; +} + +@media(max-width: 1250px){ + main{ + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .encriptador{ + margin: 168px 0px 0px 0px; + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .encriptar-desencriptar{ + display: flex; + align-items: center; + position: inherit; + } + + .encriptador-aviso{ + position: inherit; + margin: 15px; + } + + .visualizador{ + width: 665px; + height: 350px; + display: flex; + justify-content: center; + align-items: flex-end; + } + + .tarjeta-visualizador{ + display: block; + justify-content: center; + align-items: center; + width: 100%; + position: absolute; + bottom: 20%; + font-size: 24px; + font-weight: 700; + } + + .img-personaje{ + display: none; + } + + .btn-copiar{ + position: inherit; + width: 100%; + } + + .evaluar{ + width: 100%; + height: 210px; + padding: 10px; + } +} + +@media(max-width: 768px){ + + header .logo{ + background: var(--Fondo); + padding: 2px; + } + + .encriptar{ + width: 90%; + font-size: 24px; + } + + .encriptar-desencriptar{ + display: grid; + gap: 21px; + } + + .visualizador{ + width:90%; + } + + .tarjeta-visualizador{ + padding-bottom: 150px; + + } + + .desarrollador-por{ + font-size: 20px; + } +} + +@media(max-width:350px){ + .btn-encriptar, .btn-desencriptar{ + width: auto; + height: auto; + padding: auto; + } + .btn-copiar{ + width: auto; + height: auto; + padding: auto; + } + +}