Encriptador concluido!

mrp500 · Mar 6, 2024 · 59d30f7 · 59d30f7
1 parent e49f976
commit 59d30f7
Show file tree

Hide file tree

Showing 3 changed files with 72 additions and 40 deletions.
diff --git a/index.html b/index.html
@@ -21,7 +21,7 @@
         </script>
     </head>
     <body>
-        <h1><img class="candado" src="imagenes/candado.svg" draggable="false" oncontextmenu="return false" alt="Candado">
+        <h1><img class="candado" src="imagenes/candado.svg" alt="Candado">
             <span class ="encriptador">Encriptador</span><br>
             <span class = "desencriptador">Desencriptador</span>
         </h1>
@@ -39,7 +39,7 @@ <h1><img class="candado" src="imagenes/candado.svg" draggable="false" oncontextm
             </div>
                 <div class="output">
                     <div class="detective">
-                        <img id="clickable-image" src="imagenes/detective.svg" draggable="false" oncontextmenu="return false" alt="Detective" onclick="convertToTextArea();">
+                        <img id="clickable-image" src="imagenes/detective.svg" alt="Detective" onclick="convertToTextArea();">
                     </div>
                     <textarea id="result" rows="20" cols="32" class="campotransparente-dos" onclick="convertToTextArea();"></textarea><br>
                 <div class="divbutton-tres">

diff --git a/script.js b/script.js
@@ -1,12 +1,3 @@
-document.getElementById('clickable-image').addEventListener('click', function() {
-    document.querySelector('.button-tres').style.visibility = 'visible';
-});
-
-document.getElementById('result').addEventListener('click', function() {
-    document.querySelector('.button-tres').style.visibility = 'visible';
-});
-console.log()
-
 document.getElementById('result').addEventListener('blur', function() {
     var resultTextArea = document.getElementById('result');
     var image = document.getElementById('clickable-image');
@@ -59,35 +50,48 @@ function decryptText() {
     }
 }
 
-document.querySelector('.button-tres').addEventListener('click', function() {
+document.getElementById('result').addEventListener('input', function() {
     var image = document.getElementById('clickable-image');
-    image.style.display = 'none'; 
+    var resultTextArea = document.getElementById('result');
+    if (resultTextArea.value.trim() !== '') {
+        image.style.display = 'none'; 
+    } else {
+        image.style.display = 'block'; 
+    }
 });
 
+/*document.getElementById('result').addEventListener('input', function() {
+    var button = document.querySelector('.button-tres');
+    var resultTextArea = document.getElementById('result');
+    if (resultTextArea.value.trim() !== '') {
+        button.style.visibility = 'visible'; // Hacer visible el botón cuando se empiece a escribir en el área de texto
+    } else {
+        button.style.visibility = 'hidden'; // Ocultar el botón si el área de texto está vacía
+    }
+});*/
 
-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) {
+document.getElementById('result').addEventListener('input', function() {
     var image = document.getElementById('clickable-image');
-    var textarea = document.getElementById('result');
-    image.style.display = 'none';
-    textarea.focus(); 
-}
-
-document.getElementById('clickable-image').onclick = hideImageAndFocusTextarea;
-
-document.getElementById('result').addEventListener('blur', function() {
+    var button = document.querySelector('.button-tres');
     var resultTextArea = document.getElementById('result');
-    var image = document.getElementById('clickable-image');
-    if (resultTextArea.value.trim() === '') {
-        image.style.display = 'block'; 
+    if (resultTextArea.value.trim() !== '') {
+        button.style.visibility = 'visible';
+        image.style.display = 'none'; // Ocultar la imagen del detective si el área de texto tiene cualquier tipo de actividad
+    } else {
+        button.style.visibility = 'hidden';
+        image.style.display = 'block'; // Mostrar la imagen del detective si el área de texto está vacía
     }
 });
 
+document.getElementById('result').addEventListener('change', function() {
+    var image = document.getElementById('clickable-image');
+    var button = document.querySelector('.button-tres');
+    var resultTextArea = document.getElementById('result');
+    if (resultTextArea.value.trim() !== '') {
+        button.style.visibility = 'visible';
+        image.style.display = 'none'; // Ocultar la imagen del detective si el área de texto tiene cualquier tipo de actividad
+    } else {
+        button.style.visibility = 'hidden';
+        image.style.display = 'block'; // Mostrar la imagen del detective si el área de texto está vacía
+    }
+});
diff --git a/styles.css b/styles.css
@@ -6,6 +6,12 @@ h1 {
     margin-top: 10px;
     margin-bottom: 20px;
     font-weight: bold;
+    pointer-events: none;
+    user-select: none; 
+    -webkit-user-select: none;
+    -moz-user-select: none; 
+    -ms-user-select: none; 
+        user-select: none;
 }
 
 .desencriptador {
@@ -17,6 +23,8 @@ h1 {
     height: 60px;
     transform: translate(0px, 35px);
     filter: invert(58%) sepia(34%) saturate(841%) hue-rotate(189deg) brightness(115%) contrast(101%);
+    pointer-events: none;
+    user-select: none; 
     -webkit-user-select: none;
     -moz-user-select: none; 
     -ms-user-select: none; 
@@ -40,11 +48,17 @@ body {
     font-family: 'Montserrat', sans-serif;
     font-weight: bold;
     background-color: none;
+    user-select: none; 
+    -webkit-user-select: none;
+    -moz-user-select: none; 
+    -ms-user-select: none; 
+        user-select: none;
 }
 
 .campotransparente-uno::placeholder {
     color:  rgb(82, 142, 255, 0.75);
-
+    pointer-events: none;
+    user-select: none; 
 }
 
 .output {
@@ -60,6 +74,11 @@ body {
     background-color: none;
     border-radius: 50px;
     box-shadow: 2px 5px 10px 2px rgba(0, 0, 0, 0.5);
+    user-select: none; 
+    -webkit-user-select: none;
+    -moz-user-select: none; 
+    -ms-user-select: none; 
+        user-select: none;
 }
 
 .campotransparente-uno {
@@ -107,10 +126,7 @@ body {
     position: absolute;
     margin-left: 6%;
     margin-top: 6%;
-    -webkit-user-select: none;
-    -moz-user-select: none; 
-    -ms-user-select: none; 
-        user-select: none;
+    pointer-events: none;
 }
 
 p {
@@ -119,6 +135,12 @@ p {
     margin-top: 15px;
     margin-bottom: 10px;
     text-align: center;
+    pointer-events: none;
+    user-select: none; 
+    -webkit-user-select: none;
+    -moz-user-select: none; 
+    -ms-user-select: none; 
+        user-select: none;
 }
 
 .circulo-exclamacion {
@@ -148,7 +170,9 @@ p {
 }
 
 .button-uno:hover {
+    transition: 0.1s all;
     background-color: rgb(207, 66, 0);
+    transform: scale(1.1);
 }
 
 .button-dos {
@@ -170,7 +194,9 @@ p {
 }
 
 .button-dos:hover {
+    transition: 0.1s all;
     background-color: rgb(207, 66, 0);
+    transform: scale(1.1);
 }
 
 .divbutton-tres {
@@ -204,7 +230,9 @@ p {
 }
 
 .button-tres:hover {
-    background-color: rgb(207, 66, 0); /* Puedes utilizar cualquier color deseado */
+    transition: 0.1s all;
+    background-color: rgb(207, 66, 0);
+    transform: scale(1.1);
 }
 
 @media screen and (max-width: 720px) {