├── img ├── one.png ├── screenshot-new.png ├── icon.svg ├── logo.svg └── muneco.svg ├── .vscode └── settings.json ├── favicon ├── logo.png ├── favicon-120.png ├── favicon-128.png ├── favicon-152.png ├── favicon-180.png ├── favicon-192.png ├── favicon-196.png └── favicon-32.png ├── reset.scss ├── script.js ├── README.md ├── style.min.css ├── index.html └── style.scss /img/one.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/patrickwebsdev/Encriptador-Oracle-Alura/HEAD/img/one.png -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "compile-hero.disable-compile-files-on-did-save-code": false 3 | } -------------------------------------------------------------------------------- /favicon/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/patrickwebsdev/Encriptador-Oracle-Alura/HEAD/favicon/logo.png -------------------------------------------------------------------------------- /favicon/favicon-120.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/patrickwebsdev/Encriptador-Oracle-Alura/HEAD/favicon/favicon-120.png -------------------------------------------------------------------------------- /favicon/favicon-128.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/patrickwebsdev/Encriptador-Oracle-Alura/HEAD/favicon/favicon-128.png -------------------------------------------------------------------------------- /favicon/favicon-152.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/patrickwebsdev/Encriptador-Oracle-Alura/HEAD/favicon/favicon-152.png -------------------------------------------------------------------------------- /favicon/favicon-180.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/patrickwebsdev/Encriptador-Oracle-Alura/HEAD/favicon/favicon-180.png -------------------------------------------------------------------------------- /favicon/favicon-192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/patrickwebsdev/Encriptador-Oracle-Alura/HEAD/favicon/favicon-192.png -------------------------------------------------------------------------------- /favicon/favicon-196.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/patrickwebsdev/Encriptador-Oracle-Alura/HEAD/favicon/favicon-196.png -------------------------------------------------------------------------------- /favicon/favicon-32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/patrickwebsdev/Encriptador-Oracle-Alura/HEAD/favicon/favicon-32.png -------------------------------------------------------------------------------- /img/screenshot-new.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/patrickwebsdev/Encriptador-Oracle-Alura/HEAD/img/screenshot-new.png -------------------------------------------------------------------------------- /img/icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /img/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /reset.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | /* 3 | Reset CSS 4 | */ 5 | 6 | /* Disable animations */ 7 | 8 | @media (prefers-reduced-motion: reduce){ 9 | * { 10 | animation: none; 11 | transition: none; 12 | } 13 | } 14 | 15 | /* Reset margin and padding */ 16 | 17 | * { 18 | margin: 0; 19 | padding: 0; 20 | border: 0; 21 | box-sizing: border-box; 22 | vertical-align: baseline; 23 | } 24 | /* Images */ 25 | 26 | img, picture, video, iframe, figure { 27 | max-width: 100%; 28 | width: 100%; 29 | display: block; 30 | } 31 | 32 | /* Reset Link */ 33 | 34 | a { 35 | display: block; 36 | } 37 | 38 | /* except paragraph */ 39 | p a { 40 | display: inline; 41 | } 42 | 43 | /* Remove all points in
  • */ 44 | li { 45 | list-style-type: none; 46 | } 47 | 48 | /* smooth scroll */ 49 | html { 50 | scroll-behavior: smooth; 51 | } 52 | 53 | /* Disable default styles from paragraph tags */ 54 | h1, h2, h3, h4, h5, h6, p, span, a, strong, blockquote, i, b, u, em { 55 | font-size: 1em; 56 | font-weight: inherit; 57 | font-style: inherit; 58 | text-decoration: none; 59 | color: inherit; 60 | } 61 | 62 | /* Prevent problems with pseudoelements from quotes */ 63 | blockquote:before, blockquote:after, q:before, q:after { 64 | content: ''; 65 | content: none; 66 | } 67 | 68 | /* Selection paragraph config */ 69 | ::selection { 70 | background-color: rgba(0, 0, 0, .5); 71 | text-shadow: none; 72 | } 73 | 74 | /* Level problems of typography and placement of forms */ 75 | form, input, textarea, select, button, label { 76 | font-family: inherit; 77 | font-size: inherit; 78 | hyphens: auto; 79 | background-color: transparent; 80 | display: block; 81 | color: inherit; 82 | } 83 | 84 | /* Table reset */ 85 | table, tr, td { 86 | border-collapse: collapse; 87 | border-spacing: 0; 88 | } 89 | 90 | /* Prevent SVG problems */ 91 | svg { 92 | width: 100%; 93 | display: block; 94 | fill: currentColor; 95 | * { 96 | fill: currentColor; 97 | } 98 | } 99 | 100 | body { 101 | min-height: 100vh; 102 | font-size: 100%; 103 | line-height: 1.4em; 104 | font-smooth: always; 105 | -webkit-font-smoothing: antialiased; 106 | -moz-osx-font-smoothing: grayscale; 107 | } -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | const mensaje = document.getElementById('mensaje'); 2 | const encriptar = document.getElementById('encriptar'); 3 | const desencriptar = document.getElementById('desencriptar'); 4 | const ningunMensaje = document.getElementById('ningunMensaje'); 5 | const mensajeEncontrado = document.getElementById('mensajeEncontrado'); 6 | const copiarMensaje = document.getElementById('copiarMensaje'); 7 | const mensajeEncriptado = document.getElementById('mensajeEncriptado'); 8 | const modal = document.getElementById("modal"); 9 | const modalButton = document.getElementById("modalButton"); 10 | 11 | const llaves = { 12 | 'e': 'enter', 13 | 'i': 'imes', 14 | 'a': 'ai', 15 | 'o': 'ober', 16 | 'u': 'ufat' 17 | } 18 | 19 | const reversedLlaves = Object.keys(llaves).reduce((accum, next) => { 20 | const value = llaves[next]; 21 | accum[value] = next; 22 | return accum; 23 | }, {}) 24 | 25 | /** 26 | * 27 | * @param {Record} diccionario 28 | * 29 | */ 30 | 31 | function preRegExp(diccionario){ 32 | const preRegex = Object.keys(diccionario).reduce((accum, next) => accum+"|"+next); 33 | return new RegExp(preRegex, 'g') 34 | } 35 | 36 | function encriptarTexto(text, diccionario){ 37 | return text.replace(preRegExp(diccionario), (match) => diccionario[match]); 38 | } 39 | 40 | function checkString(string){ 41 | const check = /[^a-z 0-9]/g.test(string); 42 | if(check){ 43 | modal.style.display = "flex"; 44 | } 45 | return !check; 46 | } 47 | 48 | function toggleMensaje(texto, textoEncriptado){ 49 | if(checkString(texto) && texto != ""){ 50 | if(mensajeEncontrado.classList.contains('aside__content--none')){ 51 | mensajeEncontrado.classList.toggle('aside__content--none'); 52 | ningunMensaje.classList.toggle('aside__content--none'); 53 | } 54 | mensajeEncriptado.innerHTML = textoEncriptado; 55 | } 56 | } 57 | modalButton.addEventListener('click', function(e){ 58 | e.preventDefault(); 59 | modal.style.display = "none"; 60 | }); 61 | encriptar.addEventListener('click', function(e){ 62 | e.preventDefault(); 63 | toggleMensaje(mensaje.value, encriptarTexto(mensaje.value, llaves)); 64 | }) 65 | desencriptar.addEventListener('click', function(e){ 66 | e.preventDefault(); 67 | toggleMensaje(mensaje.value, encriptarTexto(mensaje.value, reversedLlaves)); 68 | }) 69 | copiarMensaje.addEventListener('click', () => { 70 | navigator.clipboard.writeText(mensajeEncriptado.innerHTML); 71 | }) -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |
    2 | 3 | # 🚀 Challenge Encriptador | Oracle + Alura 4 |

    5 | 6 |

    7 |
    8 | 9 | 10 | 11 | 12 |
    13 | 14 | # 📝 Descripción 15 | 16 | Este proyecto es una aplicación que utiliza HTML, CSS, JavaScript para encriptar y desencriptar texto. La encriptación se realiza mediante la sustitución de ciertas letras por otras según un conjunto específico de reglas. La aplicación solo acepta letras minúsculas y no se permiten acentos ni caracteres especiales. 17 | 18 | La página web cuenta con campos para que el usuario pueda ingresar el texto que desea encriptar o desencriptar y seleccionar la opción correspondiente. El resultado de la operación se muestra en la pantalla y existe la opción de copiar el texto encriptado o desencriptado al portapapeles mediante un botón de "copiar". 19 | 20 | # 📒 Diccionarios 21 | ## 🔒 Diccionario de encriptacion 22 | | 🔑 Llave | ✏️ Reemplazo | 23 | |-----------|-----------| 24 | | e | enter | 25 | | i | imes | 26 | | a | ai | 27 | | o | ober | 28 | | u | ufat | 29 | 30 | --- 31 | 32 | ## 🔓 Diccionario de desencriptacion 33 | | 🔑 Llave | ✏️ Reemplazo | 34 | |-----------|-----------| 35 | | enter | e | 36 | | imes | i | 37 | | ai | a | 38 | | ober | o | 39 | | ufat | u | 40 | 41 | # 📑 Requisitos 42 | 43 | - ✅ Debe funcionar solo con letras minúsculas 44 | - ✅ No deben ser utilizados letras con acentos ni caracteres especiales 45 | - ✅ Debe ser posible convertir una palabra para la versión encriptada también devolver una palabra encriptada para su versión original. (Ejemplos: "gato" => "gaitober" | "gaitober" => "gato") 46 | - ✅ La página debe tener campos para 47 | inserción del texto que será encriptado o desencriptado, y el usuario debe poder escoger entre as dos opciones. 48 | - ✅ El resultado debe ser mostrado en la pantalla. 49 | - ✅ 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. 50 | 51 | # Autor 52 | 53 | [![Linkedin](https://img.shields.io/badge/Linkedin-0072b1?logo=linkedin&logoColor=white&style=for-the-badge)](https://www.linkedin.com/in/patrickwebsdev/) 54 | 55 | [![PatrickWebs](https://img.shields.io/badge/patrickwebs.dev-00E2A2.svg?logo=data:image/png;base64,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&style=for-the-badge)](https://patrickwebs.dev) 56 | 57 | [![Discord](https://img.shields.io/badge/PATRICK%239235-7289da?logo=discord&logoColor=FFFFFF&style=for-the-badge)](https://discordapp.com/users/415654011887419413) 58 | 59 | [![GitHub](https://img.shields.io/badge/patrickwebsdev-black?logo=github&logoColor=FFFFFF&style=for-the-badge)](https://github.com/patrickwebsdev) -------------------------------------------------------------------------------- /style.min.css: -------------------------------------------------------------------------------- 1 | svg,svg *{fill:currentColor}.main__form,body{flex-direction:column}.aside__encrypt,.aside__h2,.aside__p,.modal__body,.modal__header{text-align:center}@media (prefers-reduced-motion:reduce){*{animation:none;transition:none}}*{margin:0;padding:0;border:0;box-sizing:border-box;vertical-align:baseline}figure,iframe,img,picture,video{max-width:100%;width:100%;display:block}a{display:block}p a{display:inline}li{list-style-type:none}html{scroll-behavior:smooth}a,b,blockquote,em,h1,h2,h3,h4,h5,h6,i,p,span,strong,u{font-size:1em;font-weight:inherit;font-style:inherit;text-decoration:none;color:inherit}blockquote:after,blockquote:before,q:after,q:before{content:"";content:none}::selection{background-color:rgba(0,0,0,.5);text-shadow:none}button,form,input,label,select,textarea{font-family:inherit;font-size:inherit;hyphens:auto;background-color:transparent;display:block;color:inherit}table,td,tr{border-collapse:collapse;border-spacing:0}svg{width:100%;display:block}body{min-height:100vh;font-size:100%;line-height:1.4em;font-smooth:always;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#292B38;color:#FFF;display:flex;font-family:Roboto,sans-serif}.main{width:100%;min-height:95vh;padding:2em 0;display:flex;flex-direction:row}.main__logo{display:flex;justify-content:center;min-width:10vw}.main__img{max-width:8em}.main__form{margin-top:4em;min-height:60vh;width:60vw;display:flex;justify-content:space-between}.main__textarea{width:100%;min-height:60vh;color:#FFF;font-size:1.75em;resize:none;height:100%}.main__textarea::placeholder{color:#FFF}.main__textarea:focus{outline:0}.main__footer{display:flex;flex-direction:column}.main__small{width:100%;margin-bottom:.5em}.main__small small{padding-left:1.5em;position:relative;display:flex;align-items:center}.main__small small::before{content:"";background-image:url(img/icon.svg);width:1em;height:1em;background-repeat:no-repeat;background-position:center;background-size:cover;display:block;position:absolute;left:0;filter:invert(1) brightness(2)}.main__buttons{width:100%;display:flex;flex-direction:row;justify-content:space-evenly;align-items:center}.main__button{border-radius:.5em;padding:1em;font-weight:600;font-family:1.5em;width:100%;cursor:pointer}.main__button-primary{background-color:#4EA1FA;color:#FFF;transition:background 250ms;margin-right:.75em}.main__button-primary:hover{background:#007bff}.main__button-secondary{background-color:#1D1E23;border:.15em solid #1D1E23;color:#4EA1FA;transition:background 250ms,border 250ms;margin-left:.75em}.aside__button,.modal__button{font-family:1.5em;color:#4EA1FA;transition:opacity 250ms}.main__button-secondary:hover{border-color:#4EA1FA}.aside{width:30vw;min-height:60vh;max-height:calc(90vh - 2em);padding:0 3em}.aside__content{background-color:#4EA1FA;box-shadow:0 0 2em 0 rgba(0,0,0,.38);-webkit-box-shadow:0 0 2em 0 rgba(0,0,0,.38);-moz-box-shadow:0 0 2em 0 rgba(0,0,0,.38);height:100%;width:100%;border-radius:1.5em;padding:2em;display:flex;justify-content:center;align-items:center;flex-direction:column}.aside__content--between{justify-content:space-between}.aside__content--none{display:none}.aside__message{overflow-y:auto;width:100%;height:100%}.aside__text{margin-top:3em;display:flex;justify-content:center;align-items:center;flex-direction:column}footer,footer h3{justify-content:center}.aside__h2{font-size:2em;line-height:1em;font-weight:600}.aside__p{margin-top:.5em;width:75%}.aside__encrypt{font-size:1.75em;line-height:1em;max-height:94vh;word-break:break-all}.aside__button{border-radius:.5em;margin-top:1em;padding:1em;min-height:6vh;font-weight:600;width:100%;cursor:pointer;background-color:#1D1E23;border:.15em solid #1D1E23;margin-left:.75em}.aside__button:hover{opacity:.8}footer{width:100%;min-height:5vh;display:flex;align-items:center;flex-direction:row}footer h3{font-size:1em;display:flex;align-items:center;color:#FFF}.modal,.modal__footer{justify-content:center}footer h3 svg{font-size:1em;width:1em;height:1em}footer h3 svg:nth-child(1){margin-right:.4em}footer h3 svg:nth-child(2){margin:0 .4em}footer h3 a{margin-left:.4em;text-decoration:underline}.modal{position:absolute;top:0;left:0;width:100%;height:100%;display:none;align-items:center;background-color:rgba(0,0,0,.5)}.modal__container{width:35vw;background-color:#4EA1FA;height:50vh;border-radius:2em;padding:2em;display:flex;justify-content:space-between;flex-direction:column;align-items:center}.modal__header{width:100%}.modal__title{font-size:2em}.modal__p{font-size:1.5em}.modal__footer{width:100%;display:flex;align-items:center}.modal__button{border-radius:.5em;margin-top:1em;padding:1em;min-height:6vh;font-weight:600;width:100%;cursor:pointer;background-color:#1D1E23;border:.15em solid #1D1E23;margin-left:.75em}.modal__button:hover{opacity:.8}@media screen and (max-width:1200px){.main{width:100%}.main__logo{min-width:7.5em}.aside{width:45vw}}@media screen and (max-width:1023px){.aside,.main__form{width:100%;padding:2em}body{flex-direction:column}.main{width:100%;flex-direction:column}.main__logo{min-width:7.5em;justify-content:flex-start}.main__textarea{font-size:1.5em}.aside{min-height:auto}.aside__content{padding-top:2em;padding-bottom:2em}.aside__img{display:none}.aside__text{margin:0}.aside__h2{font-size:1em}.aside__p{font-size:.9em}.aside__encrypt{font-size:1.5em}.aside__message{max-height:30vh;min-height:5vh}.modal__container{width:75vw}}@media screen and (max-width:767px){.main__buttons{flex-direction:column}.main__button{margin:1em 0 0}.aside__encrypt,.main__textarea{font-size:1.25em}.modal__container{width:90vw}}::-webkit-scrollbar{width:.25em}::-webkit-scrollbar-track{background:rgba(255,255,255,.5);border-radius:1em}::-webkit-scrollbar-thumb{background:rgba(0,0,0,.5);border-radius:1em}::-webkit-scrollbar-thumb:hover{background:rgba(0,0,0,.75)}button{position:relative;display:flex;justify-content:center;align-items:center;overflow:hidden}button:after{content:"";background:rgba(0,157,255,.5);display:block;position:absolute;opacity:0;width:10em;height:10em;border-radius:100%;padding:0;margin:0;transition:all 1s;transform:scale(5);aspect-ratio:1/1}button:active:after{padding:0;margin:0;opacity:1;transition:0s;transform:scale(0)}button:focus{outline:0} -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Encriptador | Oracle + Alura 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 |
    42 | 45 |
    46 | 47 | 56 |
    57 | 74 |
    75 | 78 | 91 | 92 | 93 | -------------------------------------------------------------------------------- /style.scss: -------------------------------------------------------------------------------- 1 | @import "reset.scss"; 2 | body { 3 | background-color: #292B38; 4 | color: #FFFFFF; 5 | display: flex; 6 | flex-direction: column; 7 | font-family: 'Roboto', sans-serif; 8 | } 9 | .main { 10 | width: 100%; 11 | min-height: 95vh; 12 | padding: 2em 0; 13 | display: flex; 14 | flex-direction: row; 15 | &__logo { 16 | display: flex; 17 | justify-content: center; 18 | min-width: 10vw; 19 | } 20 | &__img { 21 | max-width: 8em; 22 | } 23 | &__form { 24 | margin-top: 4em; 25 | min-height: 60vh; 26 | width: 60vw; 27 | display: flex; 28 | flex-direction: column; 29 | justify-content: space-between; 30 | } 31 | &__textarea { 32 | width: 100%; 33 | min-height: 60vh; 34 | color: #FFFFFF; 35 | font-size: 1.75em; 36 | resize: none; 37 | height: 100%; 38 | &::placeholder { 39 | color: #FFFFFF; 40 | } 41 | &:focus { 42 | outline: none; 43 | } 44 | } 45 | &__footer { 46 | display: flex; 47 | flex-direction: column; 48 | } 49 | &__small { 50 | width: 100%; 51 | margin-bottom: 0.5em; 52 | small { 53 | padding-left: 1.5em; 54 | position: relative; 55 | display: flex; 56 | align-items: center; 57 | &::before { 58 | content: ''; 59 | background-image: url("img/icon.svg"); 60 | width: 1em; 61 | height: 1em; 62 | background-repeat: no-repeat; 63 | background-position: center; 64 | background-size: cover; 65 | display: block; 66 | position: absolute; 67 | left: 0; 68 | filter: invert(1) brightness(2); 69 | } 70 | } 71 | } 72 | &__buttons { 73 | width: 100%; 74 | display: flex; 75 | flex-direction: row; 76 | justify-content: space-evenly; 77 | align-items: center; 78 | } 79 | &__button { 80 | border-radius: 0.5em; 81 | padding: 1em; 82 | font-weight: 600; 83 | font-family: 1.5em; 84 | width: 100%; 85 | cursor: pointer; 86 | &-primary { 87 | background-color: #4EA1FA; 88 | color: #FFFFFF; 89 | transition: background 250ms; 90 | margin-right: 0.75em; 91 | &:hover { 92 | background: #007bff; 93 | } 94 | } 95 | &-secondary { 96 | background-color: #1D1E23; 97 | border: 0.15em solid #1D1E23; 98 | color: #4EA1FA; 99 | transition: background 250ms, border 250ms; 100 | margin-left: 0.75em; 101 | &:hover { 102 | border-color: #4EA1FA; 103 | } 104 | } 105 | } 106 | } 107 | .aside { 108 | width: 30vw; 109 | min-height: 60vh; 110 | max-height: calc(90vh - 2em); 111 | padding: 0 3em; 112 | &__content { 113 | background-color: #4EA1FA; 114 | box-shadow: 0em 0em 2em 0em rgba(0,0,0,0.38); 115 | -webkit-box-shadow: 0em 0em 2em 0em rgba(0,0,0,0.38); 116 | -moz-box-shadow: 0em 0em 2em 0em rgba(0,0,0,0.38); 117 | height: 100%; 118 | width: 100%; 119 | border-radius: 1.5em; 120 | padding: 2em; 121 | display: flex; 122 | justify-content: center; 123 | align-items: center; 124 | flex-direction: column; 125 | &--between { 126 | justify-content: space-between; 127 | } 128 | &--none { 129 | display: none; 130 | } 131 | } 132 | &__message { 133 | overflow-y: auto; 134 | width: 100%; 135 | height: 100%; 136 | } 137 | &__text { 138 | margin-top: 3em; 139 | display: flex; 140 | justify-content: center; 141 | align-items: center; 142 | flex-direction: column; 143 | } 144 | &__h2 { 145 | font-size: 2em; 146 | text-align: center; 147 | line-height: 1em; 148 | font-weight: 600; 149 | } 150 | &__p { 151 | margin-top: .5em; 152 | width: 75%; 153 | text-align: center; 154 | } 155 | &__encrypt { 156 | font-size: 1.75em; 157 | text-align: center; 158 | line-height: 1em; 159 | max-height: 94vh; 160 | word-break: break-all; 161 | } 162 | &__button { 163 | border-radius: 0.5em; 164 | margin-top: 1em; 165 | padding: 1em; 166 | min-height: 6vh; 167 | font-weight: 600; 168 | font-family: 1.5em; 169 | width: 100%; 170 | cursor: pointer; 171 | background-color: #1D1E23; 172 | border: 0.15em solid #1D1E23; 173 | color: #4EA1FA; 174 | transition: opacity 250ms; 175 | margin-left: 0.75em; 176 | &:hover { 177 | opacity: .8; 178 | } 179 | } 180 | } 181 | footer { 182 | width: 100%; 183 | min-height: 5vh; 184 | display: flex; 185 | justify-content: center; 186 | align-items: center; 187 | flex-direction: row; 188 | h3 { 189 | font-size: 1em; 190 | display: flex; 191 | justify-content: center; 192 | align-items: center; 193 | color: #FFF; 194 | svg { 195 | font-size: 1em; 196 | width: 1em; 197 | height: 1em; 198 | &:nth-child(1) { 199 | margin-right: .4em; 200 | } 201 | &:nth-child(2) { 202 | margin: 0 .4em; 203 | } 204 | } 205 | a { 206 | margin-left: .4em; 207 | text-decoration: underline; 208 | } 209 | } 210 | } 211 | .modal { 212 | position: absolute; 213 | top: 0; 214 | left: 0; 215 | width: 100%; 216 | height: 100%; 217 | display: none; 218 | justify-content: center; 219 | align-items: center; 220 | background-color: rgba(0,0,0,.5); 221 | &__container { 222 | width: 35vw; 223 | background-color: #4EA1FA; 224 | height: 50vh; 225 | border-radius: 2em; 226 | padding: 2em; 227 | display: flex; 228 | justify-content: space-between; 229 | flex-direction: column; 230 | align-items: center; 231 | } 232 | &__header { 233 | width: 100%; 234 | text-align: center; 235 | } 236 | &__title { 237 | font-size: 2em; 238 | } 239 | &__body { 240 | text-align: center; 241 | } 242 | &__p { 243 | font-size: 1.5em; 244 | } 245 | &__footer { 246 | width: 100%; 247 | display: flex; 248 | justify-content: center; 249 | align-items: center; 250 | } 251 | &__button { 252 | border-radius: 0.5em; 253 | margin-top: 1em; 254 | padding: 1em; 255 | min-height: 6vh; 256 | font-weight: 600; 257 | font-family: 1.5em; 258 | width: 100%; 259 | cursor: pointer; 260 | background-color: #1D1E23; 261 | border: 0.15em solid #1D1E23; 262 | color: #4EA1FA; 263 | transition: opacity 250ms; 264 | margin-left: 0.75em; 265 | &:hover { 266 | opacity: .8; 267 | } 268 | } 269 | } 270 | @media screen and (max-width: 1200px){ 271 | .main { 272 | width: 100%; 273 | &__logo { 274 | min-width: 7.5em; 275 | } 276 | } 277 | .aside { 278 | width: 45vw; 279 | } 280 | } 281 | @media screen and (max-width: 1023px){ 282 | body { 283 | flex-direction: column; 284 | } 285 | .main { 286 | width: 100%; 287 | flex-direction: column; 288 | &__logo { 289 | min-width: 7.5em; 290 | justify-content: flex-start; 291 | } 292 | &__form { 293 | width: 100%; 294 | padding: 2em; 295 | } 296 | &__textarea { 297 | font-size: 1.5em; 298 | } 299 | } 300 | .aside { 301 | width: 100%; 302 | min-height: auto; 303 | padding: 2em; 304 | &__content { 305 | padding-top: 2em; 306 | padding-bottom: 2em; 307 | } 308 | &__img { 309 | display: none; 310 | } 311 | &__text { 312 | margin: 0; 313 | } 314 | &__h2 { 315 | font-size: 1em; 316 | } 317 | &__p { 318 | font-size: 0.9em; 319 | } 320 | &__encrypt { 321 | font-size: 1.5em; 322 | } 323 | &__message { 324 | max-height: 30vh; 325 | min-height: 5vh; 326 | } 327 | } 328 | .modal { 329 | &__container { 330 | width: 75vw; 331 | } 332 | } 333 | } 334 | @media screen and (max-width: 767px){ 335 | .main { 336 | &__buttons { 337 | flex-direction: column; 338 | } 339 | &__button { 340 | margin: 0; 341 | margin-top: 1em; 342 | } 343 | &__textarea { 344 | font-size: 1.25em; 345 | } 346 | } 347 | .aside { 348 | &__encrypt { 349 | font-size: 1.25em; 350 | } 351 | } 352 | .modal { 353 | &__container { 354 | width: 90vw; 355 | } 356 | } 357 | } 358 | 359 | ::-webkit-scrollbar { 360 | width: 0.25em; 361 | } 362 | 363 | ::-webkit-scrollbar-track { 364 | background: rgba(255,255,255,.5); 365 | border-radius: 1em; 366 | } 367 | 368 | ::-webkit-scrollbar-thumb { 369 | background: rgba(0,0,0,.5); 370 | border-radius: 1em; 371 | } 372 | 373 | ::-webkit-scrollbar-thumb:hover { 374 | background: rgba(0,0,0,.75); 375 | } 376 | 377 | button { 378 | position: relative; 379 | display: flex; 380 | justify-content: center; 381 | align-items: center; 382 | overflow: hidden; 383 | &:after { 384 | content: ""; 385 | background: rgba(0, 157, 255, 0.5); 386 | display: block; 387 | position: absolute; 388 | opacity: 0; 389 | width: 10em; 390 | height: 10em; 391 | border-radius: 100%; 392 | padding: 0; 393 | margin: 0; 394 | transition: all 1s; 395 | transform: scale(5); 396 | aspect-ratio: 1/1; 397 | } 398 | 399 | &:active:after { 400 | padding: 0; 401 | margin: 0; 402 | opacity: 1; 403 | transition: 0s; 404 | transform: scale(0); 405 | } 406 | 407 | &:focus { outline:0; } 408 | 409 | } -------------------------------------------------------------------------------- /img/muneco.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 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 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | --------------------------------------------------------------------------------