Skip to content

Commit

Permalink
Add files via upload
Browse files Browse the repository at this point in the history
  • Loading branch information
@eddywolfs
eddywolfs authored Mar 20, 2024
0 parents commit de33fe9
Show file tree
Hide file tree
Showing 3 changed files with 324 additions and 0 deletions.
50 changes: 50 additions & 0 deletions encriptador.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Encriptador</title>
<link rel="shortcut icon" href="images/logo.png" type="image/x-icon">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<div class="encript">
<textarea
name="texto"
id="texto"
class="texto"
cols="30" rows="10"
placeholder="Ingresa el texto"
onkeypress="return ' abcdefghijklmnñopqrstuvwxyz'.includes(event.key)"
></textarea>
</div>
<div class="terminos">
<p>Unicamente utilizar letras minusculas, sin caracteres especiales</p>
</div>
<div class="botones">

<button
class="btn-encrip"
type="button"
onclick="encrip()"
>Encriptar</button>

<input type="button"
class="btn-desencrip"
value="Desencrip"
onclick="desencrip()">

</div>

<div class="encriptado">
<img src="images/logo.png" alt="250px" id="modelo">
<div class="mensaje-encriptado" id="mensaje-encriptado">
<h2 id="titulo-mensaje">Ningun mensaje fue encontrado</h2>
<p id="parrafo">Ingresa el texto a encriptar/desencriptar</p>
</div>
</div>
</div>
</body>
<script src="index.js"></script>
</html>
47 changes: 47 additions & 0 deletions index.js
Original file line number Diff line number Diff line change
@@ -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");
}
}
227 changes: 227 additions & 0 deletions styles.css
Original file line number Diff line number Diff line change
@@ -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;
}
}

0 comments on commit de33fe9

Please sign in to comment.