Encriptador casi listo

mrp500 · Mar 3, 2024 · 9a1cdc7 · 9a1cdc7
1 parent a3c0e5d
commit 9a1cdc7
Show file tree

Hide file tree

Showing 3 changed files with 219 additions and 9 deletions.
diff --git a/index.html b/index.html
@@ -7,7 +7,7 @@
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <title>Encriptador/Desencriptador</title>
-        <link rel="stylesheet" href="style.css">
+        <link rel="stylesheet" href="styles.css">
         <link rel="preconnect" href="https://fonts.googleapis.com">
         <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
         <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300&display=swap" rel="stylesheet">
@@ -17,21 +17,25 @@
                 var copyText = document.getElementById('result');
                 copyText.select();
                 document.execCommand('copy');
-                alert('Texto copiado: ' + copyText.value);
             }
         </script>
     </head>
     <body>
-        <h1>Encriptador/Desencriptador</h1>
+        <h1>Encriptador<br>
+            Desencriptador</h1>
         <label for="inputTextArea"></label>
-            <div>
-                <textarea id="inputTextArea" rows="4" cols="50" placeholder="Ingrese texto aquí"></textarea>
+            <div class="input">
+                <textarea id="inputTextArea" rows="18" cols="40" placeholder="Ingrese texto aquí" class="campotransparente-uno"></textarea>
                 <p>Solo letras minusculas y sin acentos</p>
-                <button onclick="encryptText()">Encriptar!</button>
-                <button onclick="decryptText()">Desencriptar!</button>
+                <div style="text-align: center;">
+                    <button class="button-uno" onclick="encryptText(); limpiarTextarea();">Encriptar!</button>
+                    <button class="button-dos" onclick="decryptText(); limpiarTextarea();">Desencriptar!</button>
+                </div>
             </div>
-            <div><textarea id="result" rows="4" cols="50"></textarea><br>
-                <button onclick="copyText()">Copiar</button>
+            <div class="output"><textarea id="result" rows="18" cols="32" class="campotransparente-dos"></textarea><br>
+                <div style="text-align: center;">
+                    <button class="button-tres" onclick="copyText();">Copiar</button>
+                </div>
             </div>
     </body>
 </html>
diff --git 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
+}
diff --git 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;
+    }
+
+}