├── error.png ├── inicio3.png ├── reto-01.png ├── images ├── g.jpg ├── g1.jpg ├── Logo.png ├── alert.ico ├── explo.gif ├── logo3.ico ├── nave1.gif ├── Imagen3.png ├── alerta2.png ├── alerta3.png ├── error1.ico ├── error2.ico ├── pestana.ico ├── admiracion.ico ├── admiracion.png └── g1 - copia.jpg ├── responsivo.png ├── styles ├── contenedor-grid.css ├── caja-main.css ├── reset.css ├── caja-resultado.css ├── alertas.css ├── caja-encriptador.css ├── animacion.css └── contenedor-body.css ├── scripts ├── alertas.js └── animacion_nave.js ├── README.md └── index.html /error.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uri1490/challenge01/HEAD/error.png -------------------------------------------------------------------------------- /inicio3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uri1490/challenge01/HEAD/inicio3.png -------------------------------------------------------------------------------- /reto-01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uri1490/challenge01/HEAD/reto-01.png -------------------------------------------------------------------------------- /images/g.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uri1490/challenge01/HEAD/images/g.jpg -------------------------------------------------------------------------------- /images/g1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uri1490/challenge01/HEAD/images/g1.jpg -------------------------------------------------------------------------------- /responsivo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uri1490/challenge01/HEAD/responsivo.png -------------------------------------------------------------------------------- /images/Logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uri1490/challenge01/HEAD/images/Logo.png -------------------------------------------------------------------------------- /images/alert.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uri1490/challenge01/HEAD/images/alert.ico -------------------------------------------------------------------------------- /images/explo.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uri1490/challenge01/HEAD/images/explo.gif -------------------------------------------------------------------------------- /images/logo3.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uri1490/challenge01/HEAD/images/logo3.ico -------------------------------------------------------------------------------- /images/nave1.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uri1490/challenge01/HEAD/images/nave1.gif -------------------------------------------------------------------------------- /images/Imagen3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uri1490/challenge01/HEAD/images/Imagen3.png -------------------------------------------------------------------------------- /images/alerta2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uri1490/challenge01/HEAD/images/alerta2.png -------------------------------------------------------------------------------- /images/alerta3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uri1490/challenge01/HEAD/images/alerta3.png -------------------------------------------------------------------------------- /images/error1.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uri1490/challenge01/HEAD/images/error1.ico -------------------------------------------------------------------------------- /images/error2.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uri1490/challenge01/HEAD/images/error2.ico -------------------------------------------------------------------------------- /images/pestana.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uri1490/challenge01/HEAD/images/pestana.ico -------------------------------------------------------------------------------- /images/admiracion.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uri1490/challenge01/HEAD/images/admiracion.ico -------------------------------------------------------------------------------- /images/admiracion.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uri1490/challenge01/HEAD/images/admiracion.png -------------------------------------------------------------------------------- /images/g1 - copia.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uri1490/challenge01/HEAD/images/g1 - copia.jpg -------------------------------------------------------------------------------- /styles/contenedor-grid.css: -------------------------------------------------------------------------------- 1 | 2 | @import url("animacion.css"); 3 | @import url("caja-main.css"); 4 | 5 | .contenedor_encriptador{ 6 | display: grid; 7 | height: 90%; 8 | width: 90%; 9 | gap:.3rem; 10 | grid-template-rows: 1fr 10fr 1fr; 11 | grid-template-areas: 12 | "titulo" 13 | "cuerpo" 14 | "pie" 15 | ; 16 | } 17 | 18 | -------------------------------------------------------------------------------- /scripts/alertas.js: -------------------------------------------------------------------------------- 1 | let mensaje=""; 2 | function modificaAlerta(tipo){ 3 | switch(parseInt(tipo)){ 4 | case 1: mensaje = "¡No hay texto que encriptar!"; 5 | break; 6 | case 2: mensaje = "¡No hay texto que desencriptar!"; 7 | break; 8 | case 3: mensaje = "¡No hay texto que copiar!"; 9 | break; 10 | } 11 | document.querySelector(".alertas").style.display="flex"; 12 | document.querySelector('.mensaje_Alerta').innerText= mensaje; 13 | document.querySelector('.mensaje_Alerta').style.color="#00FFF5"; 14 | 15 | } 16 | 17 | 18 | document.querySelector(".cerrar").addEventListener("click",()=>{ 19 | document.querySelector(".alertas").style.display="none"; 20 | }); -------------------------------------------------------------------------------- /styles/caja-main.css: -------------------------------------------------------------------------------- 1 | @import url("caja-encriptador.css"); 2 | @import url("caja-resultado.css"); 3 | .caja_main{ 4 | display: grid; 5 | height: 100%; 6 | gap: .3rem; 7 | grid-template-rows: 2fr 1fr; 8 | grid-template-areas: 9 | "encriptador" 10 | "resultado" 11 | ; 12 | } 13 | 14 | @media all and (min-width: 768px) { 15 | .caja_main{ 16 | height: 100%; 17 | gap: .3rem; 18 | grid-template-rows: 2fr 1fr; 19 | grid-template-areas: 20 | "encriptador" 21 | "resultado" 22 | ; 23 | } 24 | } 25 | 26 | @media all and (min-width: 1440px) { 27 | .caja_main{ 28 | height: 100%; 29 | gap: .3rem; 30 | grid-template-rows: none; 31 | grid-template-columns: 2fr 1fr; 32 | grid-template-areas: 33 | "encriptador resultado" 34 | ; 35 | } 36 | } 37 | /* 768-1174 */ 38 | /* 1440-1024 */ 39 | /* 375-933 */ 40 | -------------------------------------------------------------------------------- /styles/reset.css: -------------------------------------------------------------------------------- 1 | /* http://meyerweb.com/eric/tools/css/reset/ 2 | v2.0 | 20110126 3 | License: none (public domain) 4 | */ 5 | 6 | html, body, div, span, applet, object, iframe, 7 | h1, h2, h3, h4, h5, h6, p, blockquote, pre, 8 | a, abbr, acronym, address, big, cite, code, 9 | del, dfn, em, img, ins, kbd, q, s, samp, 10 | small, strike, strong, sub, sup, tt, var, 11 | b, u, i, center, 12 | dl, dt, dd, ol, ul, li, 13 | fieldset, form, label, legend, 14 | table, caption, tbody, tfoot, thead, tr, th, td, 15 | article, aside, canvas, details, embed, 16 | figure, figcaption, footer, header, hgroup, 17 | menu, nav, output, ruby, section, summary, 18 | time, mark, audio, video { 19 | margin: 0; 20 | padding: 0; 21 | border: 0; 22 | font-size: 100%; 23 | font: inherit; 24 | vertical-align: baseline; 25 | } 26 | /* HTML5 display-role reset for older browsers */ 27 | article, aside, details, figcaption, figure, 28 | footer, header, hgroup, menu, nav, section { 29 | display: block; 30 | } 31 | body { 32 | line-height: 1; 33 | } 34 | ol, ul { 35 | list-style: none; 36 | } 37 | blockquote, q { 38 | quotes: none; 39 | } 40 | blockquote:before, blockquote:after, 41 | q:before, q:after { 42 | content: ''; 43 | content: none; 44 | } 45 | table { 46 | border-collapse: collapse; 47 | border-spacing: 0; 48 | } -------------------------------------------------------------------------------- /styles/caja-resultado.css: -------------------------------------------------------------------------------- 1 | .caja_resultado{ 2 | display: flex; 3 | flex-direction: column; 4 | background:rgba(230, 230, 238, 0.2); 5 | /* background: #343838; */ 6 | grid-area: resultado; 7 | border-radius: 1rem; 8 | justify-content: space-between; 9 | align-items: center; 10 | padding: .3rem; 11 | } 12 | 13 | .imagen_resultado{ 14 | position: relative; 15 | display: none; 16 | justify-content: center; 17 | align-items: flex-end; 18 | } 19 | .etiqueta_texto{ 20 | color:#00FFF5; 21 | text-align: justify; 22 | font-family: 'Orbitron', sans-serif; 23 | } 24 | #resultado_Sinmensaje{ 25 | color:#00FFF5; 26 | font-family: 'Geostar Fill',sans-serif; 27 | font-size: 1rem; 28 | text-align: justify; 29 | background: #000; 30 | width: 90%; 31 | height: 2rem; 32 | border-radius: .5rem; 33 | resize: none; 34 | border: 1px solid #00dffc; 35 | } 36 | ::-webkit-scrollbar{ 37 | background: #00FFF5; 38 | width: 13px; 39 | border-radius: .3rem; 40 | } 41 | ::-webkit-scrollbar-thumb{ 42 | background: #343838; 43 | width: 15px; 44 | border-radius: .3rem; 45 | } 46 | ::-webkit-scrollbar-thumb:hover{ 47 | background-color: rgb(81, 8, 197); 48 | } 49 | 50 | ::-webkit-scrollbar-thumb:active{ 51 | background-color: rgb(207, 18, 18); 52 | } 53 | .explorador{ 54 | position: absolute; 55 | height: 8rem; 56 | width: 8rem; 57 | } 58 | .gero{ 59 | width: 24rem; 60 | border-radius: .5rem; 61 | 62 | } 63 | .caja_btn{ 64 | display: flex; 65 | justify-content: center; 66 | } 67 | 68 | .mensaje_advertencia{ 69 | display: flex; 70 | 71 | align-items: center; 72 | } 73 | 74 | 75 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Challenge-Oracle-One 01 :technologist: 2 | 3 | - **Descripción:** Aplicacion que se encarga de encriptar y desencriptar textos. :computer: 4 | 5 | 6 | - Las "llaves" de encriptación que se utilixan son las siguientes: :key: 7 | ``` 8 | La letra "e" es convertida para "enter" 9 | La letra "i" es convertida para "imes" 10 | La letra "a" es convertida para "ai" 11 | La letra "o" es convertida para "ober" 12 | La letra "u" es convertida para "ufat" 13 | ``` 14 | > Por ejemplo: 15 | "gato" => "gaitober" 16 | gaitober" => "gato" 17 | 18 | ***Requerimientos:*** :clipboard: 19 | - Debe funcionar solo con letras minúsculas 20 | - No deben ser utilizados letras con acentos ni caracteres especiales 21 | - Debe ser posible convertir una palabra para la versión encriptada también devolver una palabra encriptada para su versión original. 22 | - La página debe tener campos para inserción del texto que será encriptado o desencriptado, y el usuario debe poder escoger entre las dos opciones. 23 | - El resultado debe ser mostrado en la pantalla. 24 | Extras: 25 | - Un botón que copie el texto encriptado/desencriptado para la sección de transferencia, o sea que tenga la misma funcionalidad del ctrl+C o de la opción "copiar" del menú de las aplicaciones. 26 | 27 | ## Aplicacion final :flying_saucer: 28 | * **Link:** https://uri1490.github.io/challenge01/* 29 | ``` 30 | Inicio de la aplicación 31 | ``` 32 | ![Imagen inicio](https://github.com/uri1490/challenge01/blob/main/reto-01.png) 33 | ``` 34 | Funcionalidad de la aplicación 35 | ``` 36 | ![Imagen funcionalidad](https://github.com/uri1490/challenge01/blob/main/inicio3.png) 37 | ``` 38 | Error en caso de campos vacios 39 | ``` 40 | ![Imagen error](https://github.com/uri1490/challenge01/blob/main/error.png) 41 | ``` 42 | Aplicación responsiva 43 | ``` 44 | ![Imagen responsivo](https://github.com/uri1490/challenge01/blob/main/responsivo.png) 45 | -------------------------------------------------------------------------------- /scripts/animacion_nave.js: -------------------------------------------------------------------------------- 1 | const reg = [/ai/g,/enter/g,/imes/g,/ober/g,/ufat/g]; 2 | let textoEncriptado = document.getElementById("resultado_Sinmensaje").innerText; 3 | let text = ""; 4 | let arreglo = ""; 5 | let result =""; 6 | let vocales=["a","e","i","o","u"]; 7 | let codigo=["ai","enter","imes","ober","ufat"]; 8 | let resTexto=""; 9 | 10 | document.querySelector("#btn-encriptar").addEventListener("click",()=>{ 11 | text = document.querySelector("#input-texto").value; 12 | if(text.length != 0 && /^\s+$/.test(text) == false){ 13 | arreglo = text.split(''); 14 | arreglo.forEach((elemento, index) =>{ 15 | vocales.forEach((vocal, posicion) =>{ 16 | arreglo[index]=(vocal==elemento)?codigo[posicion]:arreglo[index]; 17 | }) 18 | result+=arreglo[index]; 19 | }) 20 | resTexto=result; 21 | result=[]; 22 | document.querySelector('#resultado_Sinmensaje').innerText = resTexto; 23 | document.querySelector('.imagen_resultado').style.display="none"; 24 | } 25 | else{ 26 | modificaAlerta("1"); 27 | } 28 | }); 29 | document.querySelector("#btn-desencriptar").addEventListener("click",()=>{ 30 | if(document.querySelector("#input-texto").value.length!=0 && /^\s+$/.test(text) == false){ 31 | resTexto = document.querySelector("#input-texto").value; 32 | reg.forEach((cod, index)=>{ 33 | resTexto = resTexto.replace(cod, vocales[index]); 34 | }) 35 | document.querySelector('#resultado_Sinmensaje').innerText = resTexto; 36 | resTexto=""; 37 | } 38 | else{ 39 | modificaAlerta("2"); 40 | } 41 | 42 | }); 43 | document.querySelector("#btn-copiar").addEventListener("click",()=>{ 44 | document.getElementById("resultado_Sinmensaje").value != ""? 45 | document.getElementById("input-texto").value = document.getElementById("resultado_Sinmensaje").value: 46 | modificaAlerta("3"); 47 | }); 48 | -------------------------------------------------------------------------------- /styles/alertas.css: -------------------------------------------------------------------------------- 1 | .alertas{ 2 | background:rgba(230, 230, 238, 0.3); 3 | width: 100vw; 4 | height: 100vh; 5 | z-index: 10; 6 | position: absolute; 7 | display: none; 8 | 9 | justify-content: center; 10 | align-items: center; 11 | 12 | } 13 | .mensaje{ 14 | display: flex; 15 | flex-direction: column; 16 | width: 90%; 17 | height: 35%; 18 | background-color: #343838; 19 | border-radius: 1.2rem; 20 | justify-content: space-between; 21 | align-items: center; 22 | 23 | } 24 | .imagen_error{ 25 | width: 4rem; 26 | height: 4rem; 27 | filter: drop-shadow(0 0 3px rgb(16, 216, 252)) drop-shadow(0 0 1px rgb(6, 160, 180)); 28 | } 29 | .mensaje_Alerta{ 30 | font-family: Verdana, Geneva, Tahoma, sans-serif; 31 | } 32 | .cerrar{ 33 | width: 9rem; 34 | height: 2rem; 35 | margin: .5rem; 36 | border-radius: .3rem; 37 | background-color: #343838; 38 | color:#00FFF5; 39 | border: .1rem solid #000; 40 | } 41 | .caja_encabezado{ 42 | background-color: #00ADB5; 43 | display: flex; 44 | justify-content: center; 45 | align-items: center; 46 | width: 100%; 47 | height: 2rem; 48 | border-radius: 1.2rem 1.2rem 0 0; 49 | padding: .1rem; 50 | } 51 | 52 | .mensaje_encabezado{ 53 | color:#343838; 54 | font-family: Verdana, Geneva, Tahoma, sans-serif; 55 | } 56 | .cerrar:active{ 57 | color: #00b4cc; 58 | box-shadow: 0 0 20px #25abd9; 59 | cursor: pointer; 60 | border: 1px solid #00dffc; 61 | } 62 | @media(any-hover:hover){ 63 | .cerrar:hover{ 64 | /* background: #25abd9;*/ 65 | color: #00b4cc; 66 | box-shadow: 0 0 20px #25abd9; 67 | transition: 1s; 68 | cursor: pointer; 69 | border: 1px solid #00dffc; 70 | } 71 | } 72 | 73 | /* .mensaje{ 74 | display: flex; 75 | flex-direction: column; 76 | width: 40%; 77 | height: 30%; 78 | background-color: #505353; 79 | border-radius: 1.2rem; 80 | justify-content: space-between; 81 | align-items: center; 82 | 83 | } 84 | .mensajeAlerta{ 85 | 86 | } 87 | .cerrar{ 88 | width: 9rem; 89 | height: 2rem; 90 | margin: 1rem; 91 | } 92 | .caja_encabezado{ 93 | background-color: red; 94 | display: flex; 95 | justify-content: center; 96 | align-items: center; 97 | width: 100%; 98 | height: 2rem; 99 | border-radius: 1.2rem 1.2rem 0 0; 100 | padding: .1rem; 101 | } */ -------------------------------------------------------------------------------- /styles/caja-encriptador.css: -------------------------------------------------------------------------------- 1 | .caja_encriptador{ 2 | display: flex; 3 | flex-direction: column; 4 | justify-content: space-between; 5 | background:rgba(230, 230, 238, 0.2); 6 | /* background:rgba(230, 230, 238, 0.45); */ 7 | /* background: #343838; */ 8 | border-radius: 1rem; 9 | grid-area: encriptador; 10 | padding: .3rem; 11 | } 12 | .logoA{ 13 | 14 | width: 1.5rem; 15 | height: 2rem; 16 | margin: 1rem 1rem 0; 17 | animation: animacionLogo 4s infinite linear; 18 | } 19 | .imgC{ 20 | filter: drop-shadow(0 0 1px rgb(16, 216, 252)) drop-shadow(0 0 1px rgb(6, 160, 180)); 21 | } 22 | .botones{ 23 | display: flex; 24 | flex-direction: column; 25 | align-items: center; 26 | } 27 | .btn{ 28 | margin: .2rem; 29 | font-weight: bold; 30 | border: .1rem solid #000; 31 | border-radius: 6px; 32 | width: 16rem; 33 | height: 2.5rem; 34 | background-color: #343838; 35 | /* background-color: #343838; */ 36 | color: #005f6b; 37 | font-size: 1.5rem; 38 | font-family: 'Orbitron', sans-serif; 39 | } 40 | .restriccion{ 41 | color:#00FFF5; 42 | font-family: 'Orbitron', sans-serif; 43 | } 44 | 45 | .caja_input{ 46 | position: relative; 47 | display: flex; 48 | flex-direction: column; 49 | width: 100%; 50 | align-items: center; 51 | /* border-style: dashed; 52 | border-width: 1px; */ 53 | } 54 | .input-texto{ 55 | margin-top: 1rem; 56 | width: 90%; 57 | box-sizing:border-box; 58 | outline: none; 59 | /* background: #343838; */ 60 | background: #000; 61 | color: rgb(29, 201, 201); 62 | text-shadow:#00b4cc; 63 | font-family: 'Orbitron', sans-serif; 64 | border-radius: .3rem; 65 | border: 1px solid #000; 66 | font-size: 2rem; 67 | } 68 | .caja_input span{ 69 | top: 2rem; 70 | position: absolute; 71 | color: #4FBDBA; 72 | /* left: 0; */ 73 | pointer-events: none; 74 | /* font-size: 1rem; */ 75 | transition: .5s; 76 | font-size: 1rem; 77 | font-family: 'Orbitron', sans-serif; 78 | } 79 | 80 | .input-texto:valid~span, 81 | .input-texto:focus~span{ 82 | color: #00dffc; 83 | transform: translateX(1px) translateY(-25px); 84 | font-size: .9em; 85 | padding: 0 10px; 86 | background: #000; 87 | border-left: 1px solid #00dffc; 88 | border-right: 1px solid #00dffc; 89 | } 90 | .input-texto:valid,.input-texto:focus{ 91 | border: 1px solid #00dffc; 92 | } 93 | .btn:active{ 94 | color: #00b4cc; 95 | box-shadow: 0 0 20px #25abd9; 96 | cursor: pointer; 97 | border: 1px solid #00dffc; 98 | } 99 | @media(any-hover:hover){ 100 | .btn:hover{ 101 | /* background: #25abd9;*/ 102 | color: #00b4cc; 103 | box-shadow: 0 0 20px #25abd9; 104 | transition: 1s; 105 | cursor: pointer; 106 | border: 1px solid #00dffc; 107 | } 108 | } 109 | @keyframes animacionLogo{ 110 | 0%{ 111 | filter: drop-shadow(0 0 0px rgb(16, 216, 252)) drop-shadow(0 0 0px rgb(6, 160, 180)); 112 | } 113 | 25%{ 114 | filter: drop-shadow(0 0 7px rgb(16, 216, 252)) drop-shadow(0 0 1px rgb(6, 160, 180)); 115 | } 116 | 50%{ 117 | filter: drop-shadow(0 0 15px rgb(16, 216, 252)) drop-shadow(0 0 3px rgb(6, 160, 180)); 118 | } 119 | 25%{ 120 | filter: drop-shadow(0 0 7px rgb(16, 216, 252)) drop-shadow(0 0 1px rgb(6, 160, 180)); 121 | } 122 | 0%{ 123 | filter: drop-shadow(0 0 0px rgb(16, 216, 252)) drop-shadow(0 0 0px rgb(6, 160, 180)); 124 | } 125 | } -------------------------------------------------------------------------------- /styles/animacion.css: -------------------------------------------------------------------------------- 1 | /* title { 2 | color: white; 3 | font-size: 100px; 4 | position: relative; 5 | width: 800px; 6 | margin: 0 auto; 7 | font-family: 'Varela', sans-serif; 8 | } */ 9 | 10 | title:after { 11 | content: attr(data-text); 12 | position: absolute; 13 | left: 8px; 14 | text-shadow: -1px 0 #00FFF5; 15 | top: 0; 16 | color: black; 17 | /* background: black; */ 18 | overflow: hidden; 19 | clip: rect(0, 900px, 0, 0); 20 | animation: noise-anim 2s infinite linear alternate-reverse; 21 | } 22 | 23 | title:before { 24 | content: attr(data-text); 25 | position: absolute; 26 | left: 4px; 27 | text-shadow: 1px 0 #00FFF5; 28 | top: 0; 29 | color: black; 30 | /* background: black; */ 31 | overflow: hidden; 32 | clip: rect(0, 900px, 0, 0); 33 | animation: noise-anim-2 3s infinite linear alternate-reverse; 34 | } 35 | 36 | @keyframes noise-anim { 37 | 0% { 38 | clip: rect(51px, 9999px, 28px, 0); 39 | } 40 | 5% { 41 | clip: rect(70px, 9999px, 19px, 0); 42 | } 43 | 10% { 44 | clip: rect(92px, 9999px, 13px, 0); 45 | } 46 | 15% { 47 | clip: rect(85px, 9999px, 49px, 0); 48 | } 49 | 20% { 50 | clip: rect(45px, 9999px, 56px, 0); 51 | } 52 | 25% { 53 | clip: rect(26px, 9999px, 31px, 0); 54 | } 55 | 30% { 56 | clip: rect(62px, 9999px, 73px, 0); 57 | } 58 | 35% { 59 | clip: rect(34px, 9999px, 11px, 0); 60 | } 61 | 40% { 62 | clip: rect(26px, 9999px, 61px, 0); 63 | } 64 | 45% { 65 | clip: rect(34px, 9999px, 71px, 0); 66 | } 67 | 50% { 68 | clip: rect(35px, 9999px, 69px, 0); 69 | } 70 | 55% { 71 | clip: rect(92px, 9999px, 81px, 0); 72 | } 73 | 60% { 74 | clip: rect(26px, 9999px, 85px, 0); 75 | } 76 | 65% { 77 | clip: rect(2px, 9999px, 68px, 0); 78 | } 79 | 70% { 80 | clip: rect(54px, 9999px, 79px, 0); 81 | } 82 | 75% { 83 | clip: rect(35px, 9999px, 85px, 0); 84 | } 85 | 80% { 86 | clip: rect(70px, 9999px, 60px, 0); 87 | } 88 | 85% { 89 | clip: rect(32px, 9999px, 26px, 0); 90 | } 91 | 90% { 92 | clip: rect(94px, 9999px, 53px, 0); 93 | } 94 | 95% { 95 | clip: rect(99px, 9999px, 92px, 0); 96 | } 97 | 100% { 98 | clip: rect(42px, 9999px, 27px, 0); 99 | } 100 | } 101 | 102 | @keyframes noise-anim-2 { 103 | 0% { 104 | clip: rect(21px, 9999px, 49px, 0); 105 | } 106 | 5% { 107 | clip: rect(27px, 9999px, 52px, 0); 108 | } 109 | 10% { 110 | clip: rect(21px, 9999px, 70px, 0); 111 | } 112 | 15% { 113 | clip: rect(65px, 9999px, 25px, 0); 114 | } 115 | 20% { 116 | clip: rect(24px, 9999px, 10px, 0); 117 | } 118 | 25% { 119 | clip: rect(61px, 9999px, 64px, 0); 120 | } 121 | 30% { 122 | clip: rect(34px, 9999px, 47px, 0); 123 | } 124 | 35% { 125 | clip: rect(46px, 9999px, 93px, 0); 126 | } 127 | 40% { 128 | clip: rect(46px, 9999px, 9px, 0); 129 | } 130 | 45% { 131 | clip: rect(67px, 9999px, 36px, 0); 132 | } 133 | 50% { 134 | clip: rect(72px, 9999px, 20px, 0); 135 | } 136 | 55% { 137 | clip: rect(79px, 9999px, 26px, 0); 138 | } 139 | 60% { 140 | clip: rect(13px, 9999px, 87px, 0); 141 | } 142 | 65% { 143 | clip: rect(10px, 9999px, 25px, 0); 144 | } 145 | 70% { 146 | clip: rect(85px, 9999px, 11px, 0); 147 | } 148 | 75% { 149 | clip: rect(94px, 9999px, 35px, 0); 150 | } 151 | 80% { 152 | clip: rect(50px, 9999px, 86px, 0); 153 | } 154 | 85% { 155 | clip: rect(74px, 9999px, 67px, 0); 156 | } 157 | 90% { 158 | clip: rect(1px, 9999px, 40px, 0); 159 | } 160 | 95% { 161 | clip: rect(3px, 9999px, 48px, 0); 162 | } 163 | 100% { 164 | clip: rect(90px, 9999px, 23px, 0); 165 | } 166 | } 167 | 168 | 169 | /* borbujas */ 170 | .bubbles{ 171 | position: absolute; 172 | display: flex; 173 | width: 100%; 174 | /* z-index: -1; */ 175 | justify-content: center; 176 | } 177 | 178 | .bubbles span{ 179 | background: #4fc3dc; 180 | border-radius: 50%; 181 | animation: animate 15s cubic-bezier(0, 0.26, 0.51, 0.57) infinite; 182 | animation-duration: calc(125s/var(--i)); 183 | 184 | } 185 | @keyframes animate{ 186 | 0%{ 187 | transform: translateY(96vh)scale(0); 188 | } 189 | 100%{ 190 | transform: translateY(-10vh) scale(1); 191 | } 192 | } -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | Challeng-One1 17 | 18 | 19 | 20 |
21 |
22 |
23 |
24 | imagen user 25 |

Advertencia

26 |
27 |

28 | imagen user 29 | 32 |
33 |
34 |
35 |
36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 |
77 |
78 |
79 | imagen user 80 |
81 |
82 |
83 |
84 | 85 | ENCRIPTADOR 86 | 87 |
88 |
89 |
90 |
91 |
92 | imagen user 93 |
94 | 95 | Ingrese texto aqui 96 |
97 | 98 |
99 |
100 |
101 | imagen user 102 | 103 | Solo letras minusculas y sin acentos 104 | 105 |
106 |
107 |
108 | 111 |
112 | 113 |
114 | 117 |
118 | 119 |
120 |
121 |
122 |
123 |
124 | imagen user 125 | imagen user 126 |
127 | 128 | 129 | 130 | 131 | 132 | 133 |

134 | Ingrese el texto que desees encriptar o desencriptar. 135 |

136 |
137 | 140 |
141 |
142 |
143 |
144 | 150 | 151 |
152 |
153 |
154 | 155 | 156 | -------------------------------------------------------------------------------- /styles/contenedor-body.css: -------------------------------------------------------------------------------- 1 | @import url("contenedor-grid.css"); 2 | @import url("alertas.css"); 3 | @import url("animacion.css"); 4 | /* whereas recognition of the inherent, frijole, gemunu libre, finger paint, tourney */ 5 | 6 | .contenedor{ 7 | position: relative; 8 | display: flex; 9 | justify-content: center; 10 | height: 100vh; 11 | width: 100vW; 12 | 13 | } 14 | .contenedor_fondo{ 15 | background-color: black; 16 | height: 100vh; 17 | width: 100vw; 18 | } 19 | .contenedor_estructura{ 20 | position: absolute; 21 | display: flex; 22 | height: 100vh; 23 | width:100%; 24 | justify-content:center; 25 | align-items: center; 26 | } 27 | 28 | header{ 29 | /* background-color: #343838; */ 30 | background-image: linear-gradient(135deg, rgba(2,0,36,0.7888631090487239) 0%, rgba(57,62,70,0.8097447795823666) 68%, rgba(0,173,181,0.7795823665893271) 79%, rgba(0,255,245,0.7958236658932715) 100%); 31 | /* background-image: linear-gradient(135deg, rgba(2,0,36,1) 0%, rgba(9,109,121,1) 35%, rgba(6,173,140,1) 60%, rgba(5,189,178,1) 68%, rgba(3,190,212,1) 79%, rgba(0,212,255,1) 100%);/* linear-gradient(135deg,#00b7d4,#505488,#2f3f80,#161569,#5a4894,#a950a1,#ff7cae); */ 32 | display: flex; 33 | justify-content: center; 34 | align-items: center; 35 | border-radius: .5rem; 36 | background-size: 500% ; 37 | animation: footer-animacion 10s infinite; 38 | } 39 | title{ 40 | position: relative;/* //al quitar el cursor cubre toda la pantalla */ 41 | /* max-width: max-content; */ 42 | display: block; 43 | grid-area: titulo; 44 | font-size: 2rem; 45 | font-family: 'Rubik Glitch', Verdana; 46 | filter: drop-shadow(0 0 3px rgb(16, 216, 252)) drop-shadow(0 0 1px rgb(6, 160, 180)); 47 | /* filter: drop-shadow(0 0 20px rgb(16, 216, 252)) drop-shadow(0 0 50px rgb(6, 160, 180)); */ 48 | } 49 | 50 | main{ 51 | grid-area: cuerpo; 52 | /* background-color: rgb(60, 255, 0); */ 53 | } 54 | 55 | .derechos{ 56 | text-align: center; 57 | font-family: Verdana, Geneva, Tahoma, sans-serif; 58 | font-size: 1rem; 59 | margin: .5rem; 60 | filter: drop-shadow(0 0 1px rgb(16, 216, 252)) drop-shadow(0 0 1px rgb(6, 160, 180)); 61 | } 62 | .esferas{ 63 | position: absolute; 64 | width: 90vw; 65 | background-color: black; 66 | height: 90vh; 67 | } 68 | .nave{ 69 | position: absolute; 70 | margin: 1rem; 71 | animation-name: animacion ; 72 | animation-duration: 30s; 73 | transition-timing-function: ease-in-out; 74 | animation-iteration-count: infinite; 75 | } 76 | 77 | /* title::before, 78 | title::after{ 79 | content: ""; 80 | position: absolute; 81 | top: 0; 82 | right: 0; 83 | bottom: 0; 84 | left: 0; 85 | } 86 | title::before{ 87 | background: #343838; 88 | animation: typewriter 4s steps(11) forwards; 89 | } 90 | title::after{ 91 | box-shadow: 0 0 20px #25abd9; 92 | width: .125em; 93 | background:#00dffc; 94 | animation: typewriter 4s steps(11) forwards, blink 700ms steps(11) infinite; 95 | } */ 96 | footer{ 97 | grid-area: pie; 98 | /* background-image: linear-gradient(135deg, rgba(2,0,36,1) 0%, rgba(9,109,121,1) 35%, rgba(6,173,140,1) 60%, rgba(5,189,178,1) 68%, rgba(3,190,212,1) 79%, rgba(0,212,255,1) 100%); *//* linear-gradient(135deg,#00b7d4,#505488,#2f3f80,#161569,#5a4894,#a950a1,#ff7cae); */ 99 | background-image: linear-gradient(135deg, rgba(2,0,36,0.7888631090487239) 0%, rgba(57,62,70,0.8097447795823666) 68%, rgba(0,173,181,0.7795823665893271) 79%, rgba(0,255,245,0.7958236658932715) 100%); 100 | background-size: 500% ; 101 | border-radius: 1rem; 102 | animation: footer-animacion 10s infinite; 103 | } 104 | @keyframes typewriter{ 105 | to{ 106 | left: 100%; 107 | } 108 | } 109 | @keyframes blink{ 110 | to{ 111 | background: transparent; 112 | } 113 | } 114 | 115 | @keyframes animacion{ 116 | /* 0%{left:0vw;top: 0vh;} 117 | 25%{left:80vw;top: 0vh;} 118 | 50%{left:80vw;top: 80vh;} 119 | 75%{left:0vw;top: 80vh;} 120 | 100%{left:0vw;top: 0vh;} */ 121 | 0%{left:50vw;top: 50vh;} 122 | 10%{left:20vw;top: 80vh;} 123 | 20%{left:50vw;top: 50vh;} 124 | 30%{left:20vw;top: 20vh;} 125 | 40%{left:50vw;top: 50vh;} 126 | 50%{left:80vw;top: 80vh;} 127 | 60%{left:50vw;top: 50vh;} 128 | 70%{left:10vw;top: 50vh;} 129 | 80%{left:50vw;top: 50vh;} 130 | 90%{left:80vw;top: 10vh;} 131 | 100%{left:50vw;top: 50vh;} 132 | } 133 | @keyframes footer-animacion{ 134 | 0%{background-position: 0% 50%} 135 | 50%{background-position: 100% 50%} 136 | 100%{background-position: 0% 50%} 137 | } 138 | @media all and (orientation:landscape) and (min-height: 300px) and (max-height: 500px) { 139 | title{ 140 | font-size: 1rem; 141 | } 142 | .logoA{ 143 | width: .5rem; 144 | height: .5rem; 145 | margin: .5rem .5rem 0; 146 | } 147 | .input-texto{ 148 | font-size: 1rem; 149 | } 150 | .btn{ 151 | width: 10rem; 152 | height: 1.5rem; 153 | font-size: 1rem; 154 | } 155 | .restriccion{ 156 | color:#00FFF5; 157 | font-family: 'Orbitron', sans-serif; 158 | font-size: .7rem; 159 | } 160 | .etiqueta_texto{ 161 | font-size: .7rem; 162 | } 163 | .mensaje_Alerta{ 164 | font-size: .7rem; 165 | } 166 | .imagen_error{ 167 | width: 3rem; 168 | height: 3rem; 169 | filter: drop-shadow(0 0 3px rgb(16, 216, 252)) drop-shadow(0 0 1px rgb(6, 160, 180)); 170 | } 171 | #resultado_Sinmensaje{ 172 | font-size: 1rem; 173 | height: 1rem; 174 | } 175 | .derechos{ 176 | font-size: .5rem; 177 | } 178 | } 179 | @media all and (min-width: 0px) and (max-width: 499px) { 180 | .bubbles span{ 181 | width: 10px; 182 | height: 10px; 183 | 184 | margin: 0; 185 | 186 | box-shadow: 0 0 0 7px #4fc3dc44, 187 | 0 0 50px #4fc3dc, 188 | 0 0 100px #4fc3dc; 189 | 190 | } 191 | .bubbles span:nth-child(even){ 192 | background: #4fc3dc; 193 | box-shadow: 0 0 0 7px #0D7377, 194 | 0 0 50px #4fc3dc, 195 | 0 0 100px #4fc3dc; 196 | 197 | } 198 | } 199 | 200 | @media (min-width: 500px) { 201 | 202 | .bubbles span{ 203 | width: 15px; 204 | height: 15px; 205 | margin: 0; 206 | box-shadow: 0 0 0 10px #0D7377, 207 | 0 0 50px #4fc3dc, 208 | 0 0 100px #4fc3dc; 209 | } 210 | .bubbles span:nth-child(even){ 211 | background: #4fc3dc; 212 | box-shadow: 0 0 0 10px #0D7377, 213 | 0 0 50px #4fc3dc, 214 | 0 0 100px #4fc3dc; 215 | 216 | } 217 | } 218 | 219 | @media all and (min-width: 768px) and (orientation:portrait){ 220 | 221 | title{ 222 | 223 | font-size: 2.5rem; 224 | 225 | } 226 | 227 | .botones{ 228 | flex-direction: row; 229 | justify-content: center; 230 | } 231 | .btn{ 232 | width: 20rem; 233 | height: 3rem; 234 | font-size: 1.5rem; 235 | } 236 | .logoA{ 237 | 238 | width: 2rem; 239 | height: 2rem; 240 | } 241 | .caja_resultado{ 242 | border-radius: 1rem; 243 | } 244 | .contenedor_encriptador{ 245 | gap: 1rem; 246 | 247 | } 248 | .caja_input span{ 249 | top: 1rem; 250 | font-size: 2rem; 251 | 252 | } 253 | .input-texto:valid~span, 254 | .input-texto:focus~span{ 255 | font-size: 1.5rem; 256 | transform: translateX(1px) translateY(-12px); 257 | } 258 | .mensaje{ 259 | width: 40%; 260 | } 261 | 262 | .imagen_error{ 263 | width: 7rem; 264 | height: 7rem; 265 | } 266 | .cerrar{ 267 | width: 11rem; 268 | height: 3rem; 269 | font-size: 1.5rem; 270 | } 271 | #resultado_Sinmensaje{ 272 | font-size: 1.5rem; 273 | width: 90%; 274 | height: 3rem; 275 | } 276 | /* */ 277 | .bubbles span{ 278 | width: 15px; 279 | height: 15px; 280 | margin: 0 4px; 281 | box-shadow: 0 0 0 10px #0D7377, 282 | 0 0 50px #4fc3dc, 283 | 0 0 100px #4fc3dc; 284 | } 285 | .bubbles span:nth-child(even){ 286 | background: #14FFEC; 287 | box-shadow: 0 0 0 10px #0D7377, 288 | 0 0 50px #14FFEC, 289 | 0 0 100px #14FFEC; 290 | 291 | } 292 | /* */ 293 | } 294 | @media (min-width: 849px) { 295 | /* .contenedor_grid{ 296 | grid-template-columns: 2fr 1fr; 297 | grid-template-areas: 298 | "encriptar resultado" 299 | ; 300 | column-gap: 20px; 301 | 302 | } */ 303 | .bubbles span{ 304 | width: 15px; 305 | height: 15px; 306 | margin: 0 4px; 307 | box-shadow: 0 0 0 10px #4fc3dc44, 308 | 0 0 50px #4fc3dc, 309 | 0 0 100px #4fc3dc; 310 | } 311 | .bubbles span:nth-child(even){ 312 | background: #14FFEC; 313 | box-shadow: 0 0 0 10px #0D7377, 314 | 0 0 50px #14FFEC, 315 | 0 0 100px #14FFEC; 316 | 317 | } 318 | } 319 | @media (min-width: 950px) { 320 | .bubbles span{ 321 | width: 30px; 322 | height: 30px; 323 | margin: 0 1px; 324 | box-shadow: 0 0 0 10px #4fc3dc44, 325 | 0 0 50px #4fc3dc, 326 | 0 0 100px #4fc3dc; 327 | } 328 | .bubbles span:nth-child(even){ 329 | background: #14FFEC; 330 | box-shadow: 0 0 0 10px #0D7377, 331 | 0 0 50px #14FFEC, 332 | 0 0 100px #14FFEC; 333 | 334 | } 335 | } 336 | @media (min-width: 1320px) { 337 | .bubbles span{ 338 | width: 30px; 339 | height: 30px; 340 | margin: 0 7px; 341 | box-shadow: 0 0 0 10px #4fc3dc44, 342 | 0 0 50px #4fc3dc, 343 | 0 0 100px #4fc3dc; 344 | } 345 | .bubbles span:nth-child(even){ 346 | background: #14FFEC; 347 | box-shadow: 0 0 0 10px #0D7377, 348 | 0 0 50px #14FFEC, 349 | 0 0 100px #14FFEC; 350 | 351 | } 352 | } 353 | 354 | @media all and (min-width: 1440px) { 355 | title{ 356 | 357 | font-size: 3rem; 358 | 359 | } 360 | .botones{ 361 | flex-direction: row; 362 | justify-content: center; 363 | } 364 | .imagen_resultado{ 365 | display: flex; 366 | } 367 | .contenedor_encriptador{ 368 | gap: 1rem; 369 | 370 | } 371 | .mensaje{ 372 | width: 25%; 373 | height: 25%; 374 | } 375 | .imagen_error{ 376 | width: 6rem; 377 | height: 6rem; 378 | } 379 | .cerrar{ 380 | width: 10rem; 381 | height: 3rem; 382 | font-size: 1.5rem; 383 | } 384 | #resultado_Sinmensaje{ 385 | font-size: 1.5rem; 386 | width: 90%; 387 | height: 3rem; 388 | } 389 | 390 | /* */ 391 | .bubbles span{ 392 | width: 30px; 393 | height: 30px; 394 | margin: 0 7px; 395 | box-shadow: 0 0 0 10px #0D7377, 396 | 0 0 50px #4fc3dc, 397 | 0 0 100px #4fc3dc; 398 | } 399 | .bubbles span:nth-child(even){ 400 | background: #14FFEC; 401 | box-shadow: 0 0 0 10px #0D7377, 402 | 0 0 50px #14FFEC, 403 | 0 0 100px #14FFEC; 404 | 405 | } 406 | /* */ 407 | } 408 | 409 | @media (min-width: 1890px) { 410 | 411 | .bubbles span{ 412 | width: 15px; 413 | height: 15px; 414 | margin: 1rem; 415 | box-shadow: 0 0 0 10px #0D7377, 416 | 0 0 50px #4fc3dc, 417 | 0 0 100px #4fc3dc; 418 | } 419 | .bubbles span:nth-child(even){ 420 | background: #14FFEC; 421 | box-shadow: 0 0 0 10px #0D7377, 422 | 0 0 50px #14FFEC, 423 | 0 0 100px #14FFEC; 424 | 425 | } 426 | } 427 | --------------------------------------------------------------------------------