diff --git a/index.html b/index.html index 26bf15b..476bfa4 100644 --- a/index.html +++ b/index.html @@ -7,7 +7,7 @@ Encriptador/Desencriptador - + @@ -17,21 +17,25 @@ var copyText = document.getElementById('result'); copyText.select(); document.execCommand('copy'); - alert('Texto copiado: ' + copyText.value); } -

Encriptador/Desencriptador

+

Encriptador
+ Desencriptador

-
- +
+

Solo letras minusculas y sin acentos

- - +
+ + +
-

- +

+
+ +
\ No newline at end of file diff --git a/script.js b/script.js index 560edeb..a04484b 100644 --- a/script.js +++ b/script.js @@ -21,3 +21,7 @@ function decryptText() { .replace(/enter/g, 'e'); resultTextArea.value = decryptedText; } + +function limpiarTextarea() { + document.getElementById('inputTextArea').value = ''; // 'result' es el ID del textarea que quieres limpiar +} \ No newline at end of file diff --git a/styles.css b/styles.css index e69de29..6bc54d1 100644 --- a/styles.css +++ b/styles.css @@ -0,0 +1,202 @@ +h1 { + font-size: 40px; + text-align: block; + color: rgb(139, 180, 255); + font-family: 'Montserrat', sans-serif; + margin-top: 20px; + margin-bottom: 20px; + font-weight: bold; +} + +body { + width: 1080px; + height: 720px; + margin: 0 auto; + background-image: linear-gradient(to bottom, rgb(10, 0, 95) 10%, rgb(82, 142, 255) 70% ); + background-repeat: no-repeat; +} + +.input { + float: left; + padding-top: 50px; + color: rgb(10, 0, 95, 0.75); + font-family: 'Montserrat', sans-serif; + font-weight: bold; + background-color: none; +} + +.campotransparente-uno::placeholder { + color: rgb(82, 142, 255, 0.75); + +} + +.output { + float: right; + padding-top: 50px; + padding-left: 20px; + padding-right: 20px; + color: rgb(12, 0, 122); + font-family: 'Montserrat', sans-serif; + font-weight: bold; + background-color: none; + border-radius: 50px; + box-shadow: 2px 5px 10px 2px rgba(0, 0, 0, 0.5); +} + +.campotransparente-uno { + display: block; + margin: 10px; + padding: 10px; + background:transparent; + border: none; + resize: none; + outline: none; + font-size: 18px; + font-weight: bold; + font-family: 'Montserrat', sans-serif; + text-align: center; + color: rgb(255, 255, 255); + line-height: 0.99; +} + +.campotransparente-dos { + margin: 10px; + padding: 10px; + background:transparent; + border: none; + resize: none; + outline: none; + font-size: 18px; + font-weight: bold; + font-family: 'Montserrat', sans-serif; + text-align: center; + color: rgb(255, 255, 255); + line-height: 1.02; +} + +::-webkit-scrollbar { + display: none; +} + +p { + font-size: 18px; + font-family: 'Montserrat', sans-serif; + margin: 10px; + text-align: center; +} + +.button-uno { + background-color: rgb(12, 0, 122); + border-radius: 15px; + color: white; + padding: 10px 20px; + text-align: center; + text-decoration: none; + display: inline-block; + font-size: 16px; + margin: 20px; + cursor: pointer; + border: none; + box-shadow: 2px 5px 10px 2px rgba(0, 0, 0, 0.5); + position: relative; +} + +.button-uno:hover { + background-color: rgb(207, 66, 0); /* Puedes utilizar cualquier color deseado */ +} + +.button-dos { + background-color: rgb(0, 47, 175); + border-radius: 15px; + color: white; + padding: 10px 20px; + text-align: inline-block; + text-decoration: none; + display: inline-block; + font-size: 16px; + margin: 20px; + cursor: pointer; + border: none; + box-shadow: 2px 5px 10px 2px rgba(0, 0, 0, 0.5); + position: relative; +} + +.button-dos:hover { + background-color: rgb(233, 87, 19); /* Puedes utilizar cualquier color deseado */ +} + +.button-tres { + background-color: rgb(12, 0, 122); + border-radius: 15px; + color: white; + padding: 10px 20px; + text-align: inline-block; + text-decoration: none; + display: inline-block; + font-size: 16px; + margin: 20px; + cursor: pointer; + border: none; + box-shadow: 2px 5px 10px 2px rgba(0, 0, 0, 0.5); + position: relative; +} + +.button-tres:hover { + background-color: rgb(233, 87, 19); /* Puedes utilizar cualquier color deseado */ +} + +@media screen and (max-width: 720px) { + + h1 { + font-size: 30px; + text-align: center; + } + + body { + margin: 0 auto; + width: 100%; + height: 100%; + } + + .input { + float: none; + padding: 20px; + } + + .campotransparente-uno { + line-height: 1; + display: block; + width: 100%; + margin: 0; + padding: 15px; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + } + + .button-uno { + margin-bottom: 0; + } + + .button-dos { + margin-bottom: 0; + } + + .output { + float: none; + margin: 5% + } + + .campotransparente-dos { + line-height: 1; + display: block; + display: block; + width: 100%; + margin: 0; + padding: 15px; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + } + +} \ No newline at end of file