diff --git a/encriptador.html b/encriptador.html new file mode 100644 index 0000000..05afa70 --- /dev/null +++ b/encriptador.html @@ -0,0 +1,50 @@ + + + + + + Encriptador + + + + +
+
+ +
+
+

Unicamente utilizar letras minusculas, sin caracteres especiales

+
+
+ + + + + +
+ +
+ 250px +
+

Ningun mensaje fue encontrado

+

Ingresa el texto a encriptar/desencriptar

+
+
+
+ + + \ No newline at end of file diff --git a/index.js b/index.js new file mode 100644 index 0000000..dcea90a --- /dev/null +++ b/index.js @@ -0,0 +1,47 @@ +function encrip() { + let texto = document.getElementById("texto").value; + let tituloMensaje = document.getElementById("titulo-mensaje"); + let parrafo = document.getElementById("parrafo"); + let modelo = document.getElementById("modelo"); + + let textoCifrado = texto + .replace(/e/gi, "enter") + .replace(/i/gi, "imesr") + .replace(/a/gi, "ai") + .replace(/o/gi, "ober") + .replace(/u/gi, "ufat"); + + if (texto.length != 0){ + document.getElementById("texto").value = textoCifrado; + tituloMensaje.textContent = "El texto ha sido encriptado"; + parrafo.textContent = ""; + } else { + tituloMensaje.textContent = "No se ha encontrado mensaje"; + parrafo.textContent = "Ingresa el texto a encriptar"; + alert("Ingresa el texto"); + } +} + +function desencrip() { + let texto = document.getElementById("texto").value; + let tituloMensaje = document.getElementById("titulo-mensaje"); + let parrafo = document.getElementById("parrafo"); + let modelo = document.getElementById("modelo"); + + let textoCifrado = texto + .replace(/enter/gi, "e") + .replace(/imesr/gi, "i") + .replace(/ai/gi, "a") + .replace(/ober/gi, "o") + .replace(/ufat/gi, "u"); + + if (texto.length != 0) { + document.getElementById("texto").value = textoCifrado; + tituloMensaje.textContent = "El texto ha sido desencriptado"; + parrafo.textContent = ""; + } else { + tituloMensaje.textContent = "No se ha encontrado mensaje"; + parrafo.textContent = "Ingresa el texto a encriptar"; + alert("Ingresa el texto"); + } +} \ No newline at end of file diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..c2536b9 --- /dev/null +++ b/styles.css @@ -0,0 +1,227 @@ +* { + margin: 0; + padding: 0; +} + +.container { + position: relative; + width: 100vw; + height: 100vh; + background: #fcf7ff; +} + +.texto { + position: absolute; + width: 42%; + height: 60%; + left: 10%; + top: 15%; + border: none; + font-family: "arial"; + font-style: bold; + font-weight: 400; + font-size: 30px; + line-height: 150%; + background-color: #fcf7ff; + text-transform: lowercase; +} + +.texto::placeholder { + color: #0D47A1; +} + +.texto:focus, .texto:active { + border: none; + outline: none; +} + + +.terminos { + display: flex; + flex-direction: row; + align-items: center; + padding: 0px; + gap: 8px; + position: absolute; + width: 80%; + left: 12%; + top: 80%; +} + +.terminos p { + font-family: "arial"; + font-style: bold; + font-weight: 400; + font-size: 20px; + line-height: 100%; + color: #90CAF9; + opacity: 0.8; + flex: none; + order: 1; + flex-grow: 0; +} + +.botones { + display: flex; + flex-direction: row; + align-items: flex-start; + padding: 1% 0; + position: absolute; + width: 80%; + left: 12%; + top: 82%; +} + +.btn-encriptar { + align-items: center; + justify-content: center; + padding: 2%; + gap: 8px; + width: 25%; + background-color: #90CAF9; + border-radius: 24px; + font-family: "inter"; + font-size: 18px; + line-height: 19px; + text-align: center; + color: #fcf7ff; +} + +.btn-desencriptar { + box-sizing: border-box; + display: flex; + flex-direction: row; + align-items: flex-start; + justify-content: center; + padding: 2%; + gap: 8px; + width: 25%; + background: #90CAF9; + border: 1px solid #0D47A1; + border-radius: 24px; + font-family: "inter"; + font-weight: 400; + font-size: 16px; + line-height: 19px; + text-align: center; + color: #35244b; +} + +.btn-encriptar:hover, +.btn-desencriptar:hover { + margin: 0.3%; + width: 24.5%; + padding: 1.8%; +} + +.encriptado { + display: flex; + justify-content: center; + position: absolute; + width: 30%; + height: 90%; + left: 60%; + top: 5%; + background: #ffffff; + box-shadow: 0px 24px 30px -8px rgba(0, 0, 0, 0.08); + border-radius: 32px; +} + +.mensaje-encriptado { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + padding: 1%; + gap: 16px; + position: absolute; + width: 100%; + top: 65%; + text-align: center; +} + +.mensaje-encriptado h2 { + width: 60%; + font-family: "arial"; + font-style: bold; + font-weight: 700; + font-size: 20px; + line-height: 120%; + text-align: center; + color: #0D47A1; +} + +.mensaje-encriptado p { + width: 80%; + font-family: "arial"; + font-style: bold; + font-weight: 400; + font-size: 16px; + line-height: 150%; + text-align: center; + color: #042352; +} + +.encriptado img { + position: absolute; + width: 80%; + height: 50%; + top: 15%; +} + +@media (max-width: 57.5em) { + .container { + display: flex; + flex-direction: row; + } + .encriptar { + width: 100%; + } + .texto { + width: 80%; + height: 60%; + left: 10%; + top: 5%; + } + .terminos { + width: 80%; + left: 10%; + top: 67%; + } + .terminos p { + font-size: 16px; + } + .botones { + width: 80%; + left: 10%; + top: 70%; + } + .btn-encriptar { + width: 20%; + border-radius: 1px; + } + .btn-desencriptar { + width: 20%; + border-radius: 1px; + } + .btn-encriptar:hover, .btn-desencriptar:hover { + margin: 0.3%; + width: 30%; + padding: 1.8%; + } + .encriptado { + width: 80%; + height: 15%; + left: 10%; + top: 80%; + } + .mensaje-encriptado { + width: 100%; + top: 5%; + } + .encriptado img { + top: 0; + display: none; + visibility: hidden; + } +} \ No newline at end of file