Encriptador concluido por el momento D:

Author: mrp500

index.html

@@ -27,7 +27,7 @@ <h1><img class="candado" src="imagenes/candado.svg" draggable="false" oncontextm
         </h1>
         <label for="inputTextArea"></label>
             <div class="input">
-                <textarea id="inputTextArea" rows="18" cols="40" placeholder="Ingrese texto aquí" class="campotransparente-uno"></textarea>
+                <textarea id="inputTextArea" rows="19" cols="32" placeholder="Ingrese texto aquí" class="campotransparente-uno"></textarea>
                 <p>
                     <img class="circulo-exclamacion" src="imagenes/circulo-exclamacion-cierre.svg" alt="Circulo-Exclamacion">
                     Solo letras minusculas y sin acentos
@@ -39,10 +39,10 @@ <h1><img class="candado" src="imagenes/candado.svg" draggable="false" oncontextm
             </div>
                 <div class="output">
                     <div class="detective">
-                        <img id="hideable-image" src="imagenes/detective.svg" draggable="false" oncontextmenu="return false" alt="Detective" onclick="hideImageAndFocusTextarea();">
+                        <img id="clickable-image" src="imagenes/detective.svg" draggable="false" oncontextmenu="return false" alt="Detective" onclick="convertToTextArea();">
                     </div>
-                    <textarea id="result" rows="18" cols="32" class="campotransparente-dos" onclick="hideImageAndFocusTextarea();"></textarea><br>
-                <div style="text-align: center;">
+                    <textarea id="result" rows="20" cols="32" class="campotransparente-dos" onclick="convertToTextArea();"></textarea><br>
+                <div class="divbutton-tres">
                     <button class="button-tres" onclick="copyText();">Copiar</button>
                 </div>
             </div>

script.js

@@ -12,7 +12,7 @@ function encryptText() {
     resultTextArea.value = encryptedText;
     var inputElement = document.getElementById('inputTextArea');
     inputElement.value = '';
-    document.getElementById('hideable-image').style.display = 'none';
+    document.getElementById('clickable-image').style.display = 'none';
     } else {
         var inputElement = document.getElementById('inputTextArea');
         inputElement.focus();
@@ -32,31 +32,39 @@ function decryptText() {
     resultTextArea.value = decryptedText;
     var inputElement = document.getElementById('inputTextArea');
     inputElement.value = '';
-    document.getElementById('hideable-image').style.display = 'none';
+    document.getElementById('clickable-image').style.display = 'none';
     } else {
         var inputElement = document.getElementById('inputTextArea');
         inputElement.focus();
     }
 }
 
 document.querySelector('.button-tres').addEventListener('click', function() {
-    var image = document.getElementById('hideable-image');
+    var image = document.getElementById('clickable-image');
     image.style.display = 'none'; 
 });
 
+function convertToTextArea() {
+    var image = document.getElementById('clickable-image');
+    var textArea = document.getElementById('result');
+    image.style.display = 'none';
+    textArea.style.display = 'block';
+    textArea.focus();
+}
+
 
 function hideImageAndFocusTextarea(event) {
-    var image = document.getElementById('hideable-image');
+    var image = document.getElementById('clickable-image');
     var textarea = document.getElementById('result');
     image.style.display = 'none';
     textarea.focus(); 
 }
 
-document.getElementById('hideable-image').onclick = hideImageAndFocusTextarea;
+document.getElementById('clickable-image').onclick = hideImageAndFocusTextarea;
 
 document.getElementById('result').addEventListener('blur', function() {
     var resultTextArea = document.getElementById('result');
-    var image = document.getElementById('hideable-image');
+    var image = document.getElementById('clickable-image');
     if (resultTextArea.value.trim() === '') {
         image.style.display = 'block'; 
     }

styles.css

@@ -3,8 +3,8 @@ h1 {
     text-align: block;
     color: rgb(139, 180, 255);
     font-family: 'Montserrat', sans-serif;
-    margin-top: 0;
-    margin-bottom: 15px;
+    margin-top: 10px;
+    margin-bottom: 20px;
     font-weight: bold;
 }
 
@@ -25,13 +25,15 @@ h1 {
 
 body {
     width: 1080px;
-    height: 720px;
+    height: 750px;
     margin: 0 auto;
     background-image: linear-gradient(to bottom, rgb(10, 0, 95) 10%, rgb(82, 142, 255) 70% );
     background-repeat: no-repeat;
 }
 
 .input {
+    height: 500px;
+    width: 400px;
     float: left;
     padding-top: 50px;
     color: rgb(10, 0, 95, 0.75);
@@ -46,6 +48,8 @@ body {
 }
 
 .output {
+    height:500px;
+    width: 400px;
     float: right;
     padding-top: 50px;
     padding-left: 20px;
@@ -75,7 +79,8 @@ body {
 }
 
 .campotransparente-dos {
-    margin: 10px;
+    display: block;
+    margin: 0px;
     padding: 10px;
     background:transparent;
     border: none;
@@ -86,7 +91,7 @@ body {
     font-family: 'Montserrat', sans-serif;
     text-align: center;
     color: rgb(255, 255, 255);
-    line-height: 1.07;
+    line-height: 1;
 }
 
 ::-webkit-scrollbar {
@@ -100,8 +105,8 @@ body {
     height: 240px;
     filter: invert(12%) sepia(92%) saturate(2487%) hue-rotate(242deg) brightness(84%) contrast(138%);
     position: absolute;
-    margin-left: 7% ;
-    margin-top: 5%;
+    margin-left: 6%;
+    margin-top: 6%;
     -webkit-user-select: none;
     -moz-user-select: none; 
     -ms-user-select: none; 
@@ -111,7 +116,8 @@ body {
 p {
     font-size: 16px;
     font-family: 'Montserrat', sans-serif;
-    margin: 10px;
+    margin-top: 15px;
+    margin-bottom: 10px;
     text-align: center;
 }
 
@@ -134,7 +140,7 @@ p {
     text-decoration: none;
     display: inline-block;
     font-size: 16px;
-    margin: 20px;
+    margin: 15px;
     cursor: pointer;
     border: none;
     box-shadow: 2px 5px 10px 2px rgba(0, 0, 0, 0.5);
@@ -156,7 +162,7 @@ p {
     text-decoration: none;
     display: inline-block;
     font-size: 16px;
-    margin: 20px;
+    margin: 15px;
     cursor: pointer;
     border: none;
     box-shadow: 2px 5px 10px 2px rgba(0, 0, 0, 0.5);
@@ -167,6 +173,14 @@ p {
     background-color: rgb(207, 66, 0);
 }
 
+.divbutton-tres {
+    margin-top: 2.5%;
+    height: 200;
+    width: auto;
+    text-align: center;
+    
+}
+
 .button-tres {
     width: 120px;
     height: 40px;
@@ -178,7 +192,7 @@ p {
     text-decoration: none;
     display: inline-block;
     font-size: 16px;
-    margin: 20px;
+    margin: 10px;
     cursor: pointer;
     border: none;
     box-shadow: 2px 5px 10px 2px rgba(0, 0, 0, 0.5);
@@ -209,14 +223,15 @@ p {
     }
 
     body {
-        margin: 0 auto;
         width: 100%;
         height: 100%;
     }
 
     .input {
         float: none;
-        padding: 20px;
+        width: auto;
+        padding: 0px;
+        margin: 0;
     }
 
     .campotransparente-uno {
@@ -237,8 +252,19 @@ p {
     .button-dos {
         margin-bottom: 0;
     }
+    
+    .intput {
+        width: 0;
+        float: none;
+        margin: 5%
+    }
+
+    .divbutton-tres {
+        margin: 0;
+    }
 
     .output {
+        width: auto;
         float: none;
         margin: 5%
     }
@@ -255,7 +281,7 @@ p {
 
     .detective {
         opacity: 30%;
-        margin: 10% 12%;
+        margin: 15% 11%;
     }
 
 }