├── .gitignore ├── assets └── images │ ├── ico.png │ ├── Logo.png │ ├── Muñeco.png │ └── Desktop.png ├── animation.js ├── index.html ├── README.md ├── app.js └── styles └── style.css /.gitignore: -------------------------------------------------------------------------------- 1 | /.vscode -------------------------------------------------------------------------------- /assets/images/ico.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Pool1541/encriptador-de-texto/HEAD/assets/images/ico.png -------------------------------------------------------------------------------- /assets/images/Logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Pool1541/encriptador-de-texto/HEAD/assets/images/Logo.png -------------------------------------------------------------------------------- /assets/images/Muñeco.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Pool1541/encriptador-de-texto/HEAD/assets/images/Muñeco.png -------------------------------------------------------------------------------- /assets/images/Desktop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Pool1541/encriptador-de-texto/HEAD/assets/images/Desktop.png -------------------------------------------------------------------------------- /animation.js: -------------------------------------------------------------------------------- 1 | //Configura el canvas para que ocupe la pantalla entera 2 | const canvas = document.querySelector("canvas"); 3 | 4 | document.querySelector("body").style.overflow = "hidden"; 5 | canvas.height = window.screen.height; 6 | canvas.width = window.screen.width; 7 | 8 | // una entrada en el array por columna de texto 9 | //cada valor represnta la posición y actual de la columna. (en canvas 0 es en la parte superior y los valores positivos de y van disminuyendo) 10 | var columns = []; 11 | for (i = 0; i < 256; i++) { 12 | columns[i] = 1; 13 | } 14 | 15 | //ejecutado una vez por fotograma 16 | function step() { 17 | //Ligeramente oscurece todo el canvas dibujando un rectángulo negro casi trasnsparente sobre todo el canvas 18 | /*esto explica tanto el flash inicial de blanco a negro (por defecto el canvas es blanco y progresivamente se convierte en negro) como el fading de los caracteres.*/ 19 | canvas.getContext("2d").fillStyle = "rgba(0,0,0,0.05)"; 20 | canvas.getContext("2d").fillRect(0, 0, canvas.width, canvas.height); 21 | 22 | //verde 23 | canvas.getContext("2d").fillStyle = "#0F0"; 24 | //para cada columna 25 | columns.map(function (value, index) { 26 | //fromCharCode convierte puntos de código unicode ( http://en.wikipedia.org/wiki/Code_point ) a un string 27 | //Los code points están en el rango 65 - 90; 28 | var character = String.fromCharCode(65 + Math.random() * 26); 29 | //dibujar el carácter 30 | canvas.getContext("2d").fillText( 31 | character, //texto 32 | index * 10, //x 33 | value //y 34 | ); 35 | 36 | //desplaza hacia abajo el carácter 37 | //si el carácter es menor de 758 entonces hay una posibilidad aleatoria de que sea reseteado 38 | columns[index] = value > 758 + Math.random() * 1e4 ? 0 : value + 10; 39 | }); 40 | } 41 | 42 | //1000/33 = ~30 veces por segundo 43 | setInterval(step, 20); 44 | 45 | canvas.addEventListener("animationend", () => { 46 | canvas.remove(); 47 | }); 48 | 49 | setTimeout(() => { 50 | document.querySelector("main").classList.remove("hidden"); 51 | document.querySelector("footer").classList.remove("hidden"); 52 | }, 4000); 53 | 54 | setTimeout(() => { 55 | document.querySelector("body").style.overflow = "auto"; 56 | document.querySelector(".center img").style.animation = "0"; 57 | document.querySelector(".center p").style.animation = "0"; 58 | document.querySelector(".center h3").style.animation = "0"; 59 | document.querySelector(".center img").style.animation = "0"; 60 | document.querySelector(".copy").style.animation = "0"; 61 | }, 7000); 62 | 63 | // Toggle button 64 | const toggleBtn = document.querySelector(".toggle-state"); 65 | 66 | toggleBtn.addEventListener("input", () => { 67 | document.querySelector("body").classList.toggle("dark"); 68 | }); 69 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Encriptador de texto 10 | 11 | 12 | 13 |
14 |
15 | 18 |
19 | 25 | 26 |
27 | !

Solo letras minúsculas y sin acentos

28 |
29 |
30 | 31 | 32 |
33 |
34 |
35 |
36 | 40 |
41 |
42 | 43 |
44 |
45 |

Ningún mensaje fue encontrado

46 |

Ingresa el texto que desees encriptar o desencriptar

47 |
48 |
49 |
50 |
51 | 63 | 64 | 65 | 66 | 67 | 68 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 |
3 | Logo 4 |
5 | 6 | # Encriptador de texto 7 | 8 | Proyecto propuesto por alura:
9 | Desarrollar un encriptador que permite tanto encriptar como desencriptar texto siguiendo ciertas reglas que se indican a continuación:
10 | 11 | --- 12 | 13 | ## :key: Llaves 14 | 15 | `La letra "e" es convertida para "enter"` 16 | 17 | `La letra "i" es convertida para "imes"` 18 | 19 | `La letra "a" es convertida para "ai"` 20 | 21 | `La letra "o" es convertida para "ober"` 22 | 23 | `La letra "u" es convertida para "ufat"` 24 | 25 | --- 26 | 27 | ## :clipboard: Requisitos 28 | 29 | - Debe funcionar solo con letras minúsculas 30 | 31 | - No deben ser utilizados letras con acentos ni caracteres especiales 32 | 33 | - Debe ser posible convertir una palabra para la versión encriptada también devolver una palabra encriptada para su versión original. 34 | 35 | - La página debe tener campos para 36 | inserción del texto que será encriptado o desencriptado, y el usuario debe poder escoger entre as dos opciones. 37 | 38 | - El resultado debe ser mostrado en la pantalla. 39 | 40 | --- 41 | 42 | ## :heavy_plus_sign: Extras 43 | 44 | - 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. 45 | 46 | --- 47 | 48 | ## Screenshots 49 | 50 | ![App Screenshot](https://github.com/Pool1541/encriptador-de-texto/blob/main/assets/images/Desktop.png) 51 | 52 | --- 53 | 54 | ## :rocket: Despliegue 55 | 56 | Puedes ver el proyecto desplegado en este enlace 57 | 58 | 59 | 60 | --- 61 | 62 | ## :art: Colores 63 | 64 | | Color | Hex | 65 | | ----------------- | ------------------------------------------------------------------ | 66 | | Dark blue 100 | ![#609ED4](https://placehold.co/15x15/609ED4/609ED4.png) `#609ED4` | 67 | | Dark blue 200 | ![#356EA9](https://placehold.co/15x15/356EA9/356EA9.png) `#356EA9` | 68 | | Dark blue 300 | ![#0A3871](https://placehold.co/15x15/0A3871/0A3871.png) `#0A3871` | 69 | | Dark blue 400 | ![#072B61](https://placehold.co/15x15/072B61/072B61.png) `#072B61` | 70 | | Dark blue 500 | ![#052051](https://placehold.co/15x15/052051/052051.png) `#052051` | 71 | | Light blue 100 | ![#F3F5FC](https://placehold.co/15x15/F3F5FC/F3F5FC.png) `#F3F5FC` | 72 | | Light blue 200 | ![#EFF1FA](https://placehold.co/15x15/EFF1FA/EFF1FA.png) `#EFF1FA` | 73 | | Light blue 300 | ![#E9ECF8](https://placehold.co/15x15/E9ECF8/E9ECF8.png) `#E9ECF8` | 74 | | Light blue 400 | ![#AAB2D5](https://placehold.co/15x15/AAB2D5/AAB2D5.png) `#AAB2D5` | 75 | | Light blue 500 | ![#757FB2](https://placehold.co/15x15/757FB2/757FB2.png) `#757FB2` | 76 | | Gray 100 | ![#CED4DA](https://placehold.co/15x15/CED4DA/CED4DA.png) `#CED4DA` | 77 | | Gray 200 | ![#ADB5BD](https://placehold.co/15x15/ADB5BD/ADB5BD.png) `#ADB5BD` | 78 | | Gray 300 | ![#868E96](https://placehold.co/15x15/868E96/868E96.png) `#868E96` | 79 | | Gray 400 | ![#495057](https://placehold.co/15x15/495057/495057.png) `#495057` | 80 | | Gray 500 | ![#343A40](https://placehold.co/15x15/343A40/343A40.png) `#343A40` | 81 | 82 | 83 | 84 | --- 85 | 86 | ## 🛠 Stack 87 | 88 | Javascript, HTML, CSS
89 | 90 | --- 91 | -------------------------------------------------------------------------------- /app.js: -------------------------------------------------------------------------------- 1 | const input = document.querySelector("#input"); 2 | const encryptorScreen = document.querySelector("#screen"); 3 | const encryptorBtn = document.querySelector("#btn-encrypt"); 4 | const decryptBtn = document.querySelector("#btn-decrypt"); 5 | const message = document.querySelector("#message"); 6 | const copyBtn = document.querySelector("#copy"); 7 | const image = document.querySelector(".center"); 8 | const screenContainer = document.querySelector(".screen-container"); 9 | const copyMessage = document.querySelector(".copy"); 10 | 11 | const keys = ["ai", "enter", "imes", "ober", "ufat"]; 12 | 13 | function getText() { 14 | const text = input.value; 15 | const messageSpan = message.querySelector("span"); 16 | const messageP = message.querySelector("p"); 17 | 18 | if (!isValid(text)) { 19 | messageSpan.classList.add("error"); 20 | messageP.classList.add("error"); 21 | message.style.animation = "shake 0.8s ease both"; 22 | } else { 23 | messageSpan.classList.remove("error"); 24 | messageP.classList.remove("error"); 25 | message.style.animation = ""; 26 | } 27 | 28 | return isValid(text) ? text : ""; 29 | } 30 | 31 | function showEncryptedMessage() { 32 | const text = getText(); 33 | if (text) { 34 | encryptorBtn.removeEventListener("click", showEncryptedMessage); 35 | typewriterAnimation(encrypt(text), encryptorBtn, showEncryptedMessage); 36 | image.classList.add("hidden"); 37 | screenContainer.classList.remove("hidden"); 38 | } else { 39 | image.classList.remove("hidden"); 40 | screenContainer.classList.add("hidden"); 41 | } 42 | } 43 | 44 | function showDecryptedMessage() { 45 | const text = getText(); 46 | if (text) { 47 | decryptBtn.removeEventListener("click", showDecryptedMessage); 48 | typewriterAnimation(decrypt(text), decryptBtn, showDecryptedMessage); 49 | image.classList.add("hidden"); 50 | screenContainer.classList.remove("hidden"); 51 | } else { 52 | image.classList.remove("hidden"); 53 | screenContainer.classList.add("hidden"); 54 | } 55 | } 56 | 57 | function encrypt(text) { 58 | let encryptedMessage = ""; 59 | 60 | for (let i = 0; i < text.length; i++) { 61 | switch (text[i]) { 62 | case "a": 63 | encryptedMessage += keys[0]; 64 | break; 65 | case "e": 66 | encryptedMessage += keys[1]; 67 | break; 68 | case "i": 69 | encryptedMessage += keys[2]; 70 | break; 71 | case "o": 72 | encryptedMessage += keys[3]; 73 | break; 74 | case "u": 75 | encryptedMessage += keys[4]; 76 | break; 77 | default: 78 | encryptedMessage += text[i]; 79 | } 80 | } 81 | 82 | return encryptedMessage; 83 | } 84 | 85 | function decrypt(text) { 86 | let encryptedMessage = text; 87 | 88 | keys.forEach((key) => { 89 | encryptedMessage = encryptedMessage.replaceAll(key, key[0]); 90 | }); 91 | 92 | return encryptedMessage; 93 | } 94 | 95 | function isValid(text) { 96 | return text ? !/[^a-z\sñ]/.test(text) : true; 97 | } 98 | 99 | function copy() { 100 | const text = encryptorScreen.innerText; 101 | 102 | if (text) { 103 | navigator.clipboard.writeText(text); 104 | document.styleSheets[0].addRule(".copy:after", "display: " + "flex" + ";"); 105 | setTimeout(() => { 106 | document.styleSheets[0].addRule( 107 | ".copy:after", 108 | "display: " + "none" + ";" 109 | ); 110 | }, 3000); 111 | } 112 | } 113 | 114 | function typewriterAnimation(text, btn, callback) { 115 | encryptorScreen.innerText = ""; 116 | let init = 0; 117 | let last = text.length - 1; 118 | const interval = setInterval(() => { 119 | if (init <= last) { 120 | if (text[init] == " ") { 121 | encryptorScreen.innerText += "\u00A0"; 122 | } else { 123 | encryptorScreen.innerText += text[init]; 124 | } 125 | init++; 126 | } else { 127 | clearInterval(interval); 128 | btn.addEventListener("click", callback); 129 | } 130 | }, 30); 131 | } 132 | 133 | input.addEventListener("input", getText); 134 | encryptorBtn.addEventListener("click", showEncryptedMessage); 135 | decryptBtn.addEventListener("click", showDecryptedMessage); 136 | copyBtn.addEventListener("click", copy); 137 | -------------------------------------------------------------------------------- /styles/style.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --white: #ffffff; 3 | --black: #000000; 4 | --error: #f52d2d; 5 | --light-blue-100: #F3F5FC; 6 | --light-blue-200: #EFF1FA; 7 | --light-blue-300: #E9ECF8; 8 | --light-blue-400: #AAB2D5; 9 | --light-blue-500: #757FB2; 10 | --dark-blue-100: #609ED4; 11 | --dark-blue-200: #356EA9; 12 | --dark-blue-300: #0A3871; 13 | --dark-blue-400: #072B61; 14 | --dark-blue-500: #052051; 15 | --gray-100: #CED4DA; 16 | --gray-200: #ADB5BD; 17 | --gray-300: #868E96; 18 | --gray-400: #495057; 19 | --gray-500: #343A40; 20 | --primary-hover: rgb(60, 92, 196); 21 | --secundary-hover: rgb(226, 228, 241); 22 | 23 | --dark-bg : #252525; 24 | --dark-bg-lightest : #303030; 25 | } 26 | 27 | * { 28 | font-family: sans-serif; 29 | padding: 0; 30 | margin: 0; 31 | box-sizing: border-box; 32 | text-decoration: none; 33 | } 34 | 35 | body { 36 | min-height: 100vh; 37 | background-color: var(--gray-100); 38 | display: flex; 39 | justify-content: space-between; 40 | flex-direction: column; 41 | transition: all .3s ease; 42 | } 43 | 44 | img, button, p, h3, .footer-center, .main-right, #input, span, .label { 45 | animation: fadeIn 3s ease both; 46 | } 47 | 48 | body.dark { 49 | background-color: var(--dark-bg); 50 | } 51 | 52 | main { 53 | padding: 60px; 54 | width: 100%; 55 | display: flex; 56 | gap: clamp(25px,5vw,4.6rem); 57 | justify-content: space-between; 58 | flex: 1 1 auto; 59 | } 60 | 61 | .main-left { 62 | position: relative; 63 | flex: 1 1 auto; 64 | display: flex; 65 | } 66 | 67 | .logo{ 68 | width: 20%; 69 | display: inline-block; 70 | user-select: none; 71 | } 72 | 73 | body.dark .logo{ 74 | filter: brightness(1.5) drop-shadow(2px 2px 3px rgba(0,0,0,.5)); 75 | } 76 | 77 | .input-container { 78 | display: flex; 79 | flex-direction: column; 80 | margin-top: 100px; 81 | width: 100%; 82 | } 83 | 84 | #input { 85 | width: 100%; 86 | background-color: transparent; 87 | border: none; 88 | outline: none; 89 | resize: none; 90 | font-size: 2rem; 91 | color: var(--dark-blue-300); 92 | flex: 1 1 auto; 93 | } 94 | 95 | body.dark #input { 96 | color: var(--gray-100); 97 | } 98 | 99 | #input::placeholder { 100 | color: var(--light-blue-400); 101 | } 102 | 103 | body.dark #input::placeholder { 104 | color: var(--gray-100); 105 | } 106 | 107 | .message { 108 | display: flex; 109 | gap: 5px; 110 | align-items: center; 111 | padding: 20px 0; 112 | user-select: none; 113 | } 114 | 115 | .message span { 116 | width: 17px; 117 | height: 17px; 118 | text-align: center; 119 | border-radius: 50%; 120 | background-color: var(--gray-400); 121 | font-size: 0.87rem; 122 | font-weight: 700; 123 | color: var(--gray-100); 124 | transition: all .2s ease-in-out; 125 | } 126 | 127 | .message span.error { 128 | background-color: var(--error); 129 | } 130 | 131 | .message p.error, body.dark .message p.error { 132 | color: var(--error); 133 | } 134 | 135 | .message p { 136 | color: var(--gray-400); 137 | font-weight: 400; 138 | font-size: .9rem; 139 | transition: all .2s ease-in-out; 140 | } 141 | 142 | body.dark .message p { 143 | color: var(--gray-200); 144 | } 145 | 146 | .buttons { 147 | display: flex; 148 | gap: 24px; 149 | user-select: none; 150 | } 151 | 152 | .btn { 153 | flex: 1 1 auto; 154 | padding: 24px 0; 155 | border: none; 156 | border-radius: 24px; 157 | font-size: 1rem; 158 | cursor: pointer; 159 | box-shadow: 1px 1px 5px 1px rgba(0, 0, 0, 0.199); 160 | transition: all .3s ease; 161 | } 162 | 163 | .secondary:hover, .btn.copy:hover{ 164 | background-color: var(--secundary-hover); 165 | } 166 | 167 | .primary:hover { 168 | background-color: var(--primary-hover); 169 | } 170 | 171 | .primary { 172 | background-color: var(--dark-blue-300); 173 | color: white; 174 | } 175 | 176 | .secondary { 177 | border: 1px solid var(--dark-blue-300); 178 | background-color: var(--gray-100); 179 | color: var(--dark-blue-300); 180 | } 181 | 182 | body.dark .secondary { 183 | border: 1px solid var(--gray-200); 184 | background-color: var(--dark-bg-lightest); 185 | color: var(--gray-100); 186 | } 187 | 188 | body.dark .secondary:hover { 189 | background-color: var(--gray-400) 190 | } 191 | 192 | .screen-container { 193 | height: 100%; 194 | display: flex; 195 | flex-direction: column; 196 | justify-content: space-between; 197 | } 198 | 199 | #screen { 200 | font-size: 1.5rem; 201 | color: var(--gray-400); 202 | max-height: 630px; 203 | word-wrap: break-word; 204 | overflow: auto; 205 | } 206 | 207 | body.dark #screen{ 208 | color: var(--gray-100); 209 | } 210 | 211 | #screen::after { 212 | content : '|'; 213 | font-size: 1.55rem; 214 | animation: flicker 1s ease-in-out infinite; 215 | } 216 | 217 | .btn.copy { 218 | flex: unset; 219 | background-color: var(--white); 220 | position: relative; 221 | } 222 | 223 | .copy::after { 224 | content: '\1F4CB Texto copiado al portapapeles'; 225 | display: none; 226 | align-items: center; 227 | justify-content: center; 228 | color: var(--gray-500); 229 | font-size: 1.1rem; 230 | font-weight: 400; 231 | width: 330px; 232 | height: 50px; 233 | padding: 5px 0; 234 | border-radius: 15px; 235 | background-color: rgb(235, 241, 238); 236 | position: absolute; 237 | top: 8px; 238 | left: 0; 239 | right: 0; 240 | margin: auto; 241 | animation: show 3s ease both; 242 | } 243 | 244 | .main-right { 245 | min-width: 400px; 246 | width: 400px; 247 | padding: 40px 25px; 248 | background-color: var(--white); 249 | border-radius: 32px; 250 | box-shadow: 0px 24px 32px -8px rgba(0, 0, 0, 0.08); 251 | word-break: break-word; 252 | } 253 | 254 | body.dark .main-right { 255 | background-color: var(--dark-bg-lightest); 256 | } 257 | 258 | .center { 259 | height: 100%; 260 | display: flex; 261 | flex-direction: column; 262 | align-items: center; 263 | justify-content: center; 264 | user-select: none; 265 | } 266 | 267 | body.dark .search-image { 268 | filter: brightness(1.2); 269 | } 270 | 271 | .hidden { 272 | display: none; 273 | } 274 | 275 | .empty-text { 276 | width: 70%; 277 | text-align: center; 278 | } 279 | 280 | .empty-text h3 { 281 | color: var(--gray-500); 282 | font-size: 1.3rem; 283 | } 284 | 285 | body.dark .empty-text h3 { 286 | color: var(--gray-100); 287 | } 288 | 289 | .empty-text p { 290 | margin-top: 15px; 291 | color: var(--gray-400); 292 | font-size: 1rem; 293 | } 294 | 295 | body.dark .empty-text p { 296 | color: var(--gray-300); 297 | } 298 | 299 | .footer-container { 300 | width: 70%; 301 | margin: auto; 302 | } 303 | 304 | .footer-center { 305 | display: flex; 306 | gap: 15px; 307 | justify-content: center; 308 | align-items: center; 309 | align-self: flex-end; 310 | padding: 15px 0; 311 | } 312 | 313 | .footer-center p { 314 | color: var(--gray-400); 315 | font-size: .9rem; 316 | } 317 | 318 | body.dark .footer-center p { 319 | color: var(--gray-100); 320 | } 321 | 322 | .footer-center p a:visited { 323 | color: var(--light-blue-500); 324 | } 325 | 326 | .footer-center p a:hover { 327 | color: var(--dark-blue-300) 328 | } 329 | 330 | .icons { 331 | display: flex; 332 | list-style: none; 333 | gap: 20px; 334 | } 335 | 336 | .icon a { 337 | font-size: 1.3rem; 338 | color: rgb(53, 53, 53); 339 | } 340 | 341 | body.dark .icon a { 342 | color: var(--gray-200); 343 | } 344 | 345 | 346 | .icon:last-child a:hover { 347 | background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%,#d6249f 60%,#285AEB 90%); 348 | -webkit-background-clip: text; 349 | color: transparent; 350 | } 351 | 352 | .icon:nth-child(2) a:hover { 353 | color: #0a66c2; 354 | } 355 | 356 | .icon:first-child a:hover { 357 | color: var(--black); 358 | } 359 | 360 | #canvas { 361 | position: absolute; 362 | animation: fadeOut 5s both ease; 363 | } 364 | 365 | @keyframes fadeIn { 366 | from { 367 | opacity: 0; 368 | transform: translateY(20px); 369 | } 370 | to { 371 | opacity: 1; 372 | transform: translateY(0); 373 | } 374 | } 375 | 376 | @keyframes fadeOut { 377 | 0%, 80% { 378 | opacity: 1; 379 | } 380 | 381 | 100% { 382 | opacity: 0; 383 | } 384 | } 385 | 386 | @keyframes shake { 387 | 10%, 90% { 388 | transform: translate3d(-1px, 0, 0); 389 | } 390 | 391 | 20%, 80% { 392 | transform: translate3d(2px, 0, 0); 393 | } 394 | 395 | 30%, 50%, 70% { 396 | transform: translate3d(-4px, 0, 0); 397 | } 398 | 399 | 40%, 60% { 400 | transform: translate3d(4px, 0, 0); 401 | } 402 | } 403 | 404 | @keyframes flicker { 405 | 0%, 30%{ 406 | opacity: 1; 407 | } 408 | 409 | 40%,70% { 410 | opacity: 0; 411 | } 412 | 413 | 80%, 100%{ 414 | opacity: 0; 415 | } 416 | } 417 | 418 | @keyframes show { 419 | 0% { 420 | transform: translateY(-80px); 421 | opacity: 0; 422 | } 423 | 424 | 50% { 425 | transform: translateY(-80px); 426 | opacity: 1; 427 | } 428 | 429 | 100% { 430 | transform: translateY(-80px); 431 | opacity: 0; 432 | display: none; 433 | } 434 | } 435 | 436 | @media screen and (max-width: 950px) { 437 | main { 438 | flex-direction: column; 439 | align-items: center; 440 | align-items: stretch; 441 | } 442 | 443 | .main-right { 444 | width: auto; 445 | display: flex; 446 | align-items: unset; 447 | justify-content: center; 448 | min-height: 150px; 449 | flex: 5 1 auto; 450 | } 451 | 452 | .center { 453 | flex: 1 1 auto; 454 | align-self: center; 455 | } 456 | 457 | .search-image { 458 | display: none; 459 | } 460 | 461 | .logo, .input-container { 462 | display: block; 463 | } 464 | 465 | .screen-container { 466 | width: 100%; 467 | height: auto; 468 | } 469 | 470 | .copy { 471 | width: 100%; 472 | margin-top: 30px; 473 | } 474 | 475 | .main-left { 476 | display: block; 477 | } 478 | 479 | .logo { 480 | transform: translateX(-50px); 481 | } 482 | 483 | .footer-container { 484 | width: 100%; 485 | } 486 | 487 | } 488 | 489 | @media screen and (max-width: 525px) { 490 | .buttons { 491 | flex-direction: column; 492 | } 493 | 494 | .main-right { 495 | min-width: 200px; 496 | padding: 20px 25px; 497 | } 498 | 499 | main { 500 | padding : 15px 30px; 501 | } 502 | 503 | #input { 504 | height: auto; 505 | } 506 | 507 | .copy::after { 508 | width: unset; 509 | font-size: .9rem; 510 | } 511 | 512 | .footer-container { 513 | padding : 0 30px 514 | } 515 | 516 | .footer-center p { 517 | font-size: .65rem; 518 | } 519 | 520 | .label { 521 | top: 15px !important; 522 | } 523 | } 524 | 525 | /* Toggle button */ 526 | 527 | .label { 528 | position: absolute; 529 | top: 0; 530 | right: 0; 531 | display: inline-flex; 532 | align-items: center; 533 | cursor: pointer; 534 | color: #394a56; 535 | } 536 | 537 | .label-text { 538 | margin-left: 16px; 539 | } 540 | 541 | .toggle { 542 | isolation: isolate; 543 | position: relative; 544 | height: 30px; 545 | width: 60px; 546 | border-radius: 15px; 547 | overflow: hidden; 548 | box-shadow: -8px -4px 8px 0px var(--gray-200), 549 | 8px 4px 12px 0px #d1d9e6, 550 | 4px 4px 4px 0px #d1d9e6 inset, 551 | -4px -4px 4px 0px var(--gray-200) inset; 552 | } 553 | 554 | body.dark .toggle { 555 | box-shadow: -8px -4px 8px 0px #2d2d2d, 556 | 8px 4px 12px 0px #0e0e0e, 557 | 4px 4px 4px 0px #060606 inset, 558 | -4px -4px 4px 0px #252525 inset; 559 | } 560 | 561 | .toggle-state { 562 | display: none; 563 | } 564 | 565 | .indicator { 566 | height: 100%; 567 | width: 200%; 568 | background: #ecf0f3; 569 | border-radius: 15px; 570 | transform: translate3d(-75%, 0, 0); 571 | transition: transform 0.4s cubic-bezier(0.85, 0.05, 0.18, 1.35); 572 | box-shadow: -8px -4px 8px 0px var(--gray-200), 573 | 8px 4px 12px 0px #d1d9e6; 574 | } 575 | 576 | body.dark .indicator { 577 | background: var(--gray-400); 578 | box-shadow: -8px -4px 8px 0px var(--dark-bg), 579 | 8px 4px 12px 0px var(--dark-bg-lightest); 580 | } 581 | 582 | .toggle-state:checked ~ .indicator { 583 | transform: translate3d(25%, 0, 0); 584 | } --------------------------------------------------------------------------------