-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
129 lines (115 loc) · 8.18 KB
/
index.html
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
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="./assets/logo-alura.svg">
<title>Encriptador Alura Challenge</title>
<link rel="stylesheet" href="css/alura.css">
</head>
<body>
<header class="contenedor-logo">
<img src="./assets/logo-alura.svg" alt="Logo Alura">
</header>
<main class="contenedor-secciones">
<div class="seccion-izquierda">
<form class="contenedor-textarea">
<textarea id="textarea-ingreso" placeholder="Ingrese texto aquí" class="textarea-ingreso" cols="30"
rows="10"></textarea>
</form>
<div class="contenedor-inferior">
<div class="contenedor-alerta">
<img src="./assets/alerta.svg" alt="icono alerta">
<p class="alerta-texto">Solo letras minúsculas y sin acentos.</p>
</div>
<div class="contenedor-botones">
<div class="contenedor-boton">
<button class="boton-encriptar boton" id="boton-encriptar">Encriptar</button>
</div>
<div class="contenedor-boton">
<button class="boton-desencriptar boton" id="boton-desencriptar">Desencriptar</button>
</div>
</div>
</div>
</div>
<div class="seccion-derecha">
<textarea class="textarea-salida" data-clipboard-action="copy" id="textarea-salida" readonly="readonly">
</textarea>
<div class="contenedor-illustracion" id="contenedor-illustracion">
<img class="illustracion" src="./assets/illustracion.svg" alt="Illustración">
</div>
<div class="contenedor-mensaje" id="contenedor-mensaje">
<p class="texto-1">Ningun mensaje fue encontrado</p>
<p class="texto-2">Ingresa el texto que desees encriptar o desencriptar.</p>
</div>
<div class="contenedor-boton">
<button class="boton-copiar boton ocultar" id="boton-copiar">Copiar</button>
</div>
<div class="version-personalizada">
<a href="matrix.html">
<svg width="57" height="57" viewBox="0 0 57 57" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_d_126806_853)">
<path d="M20.408 39.1335C22.6887 39.1335 24.8343 38.2452 26.447 36.6325L38.6342 24.447C40.233 22.8431 41.1307 20.6706 41.1303 18.406C41.13 16.1413 40.2318 13.9691 38.6325 12.3657C37.8408 11.5705 36.8993 10.9402 35.8624 10.5112C34.8256 10.0822 33.714 9.86304 32.5919 9.86637C30.3112 9.86637 28.1673 10.7547 26.5546 12.3674L14.3674 24.5529C12.7689 26.1568 11.8713 28.3288 11.871 30.5932C11.8707 32.8576 12.7677 35.0299 14.3657 36.6342C15.1577 37.4295 16.0995 38.0598 17.1366 38.4888C18.1738 38.9178 19.2857 39.1369 20.408 39.1335Z" fill="#7AF9C6"/>
<path d="M20.408 38.6335L20.4065 38.6335C19.3503 38.6367 18.3038 38.4305 17.3278 38.0267C16.3517 37.623 15.4653 37.0298 14.7199 36.2814C13.2153 34.7708 12.3707 32.7254 12.371 30.5933C12.3713 28.4613 13.2164 26.4164 14.7212 24.9062C14.7213 24.9061 14.7214 24.906 14.7215 24.9059L26.9081 12.7209L26.9082 12.7209C28.4271 11.202 30.4439 10.3664 32.5919 10.3664L32.5933 10.3664C33.6493 10.3632 34.6955 10.5695 35.6713 10.9732C36.6471 11.3769 37.5331 11.9701 38.2782 12.7184L38.2785 12.7187C39.7843 14.2285 40.63 16.2737 40.6303 18.406C40.6306 20.5381 39.7857 22.5833 38.2807 24.0934C38.2805 24.0936 38.2803 24.0938 38.2801 24.094L26.0935 36.279L26.0934 36.279C24.5746 37.7978 22.5561 38.6335 20.408 38.6335Z" stroke="#3DE2B8"/>
</g>
<defs>
<filter id="filter0_d_126806_853" x="0.870972" y="0.866333" width="55.2594" height="55.2672" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dx="2" dy="4"/>
<feGaussianBlur stdDeviation="6.5"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.478431 0 0 0 0 0.976471 0 0 0 0 0.776471 0 0 0 0.6 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_126806_853"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_126806_853" result="shape"/>
</filter>
</defs>
</svg>
</a>
</div>
</div>
</main>
<footer>
<div class="contenedor-redes-sociales">
<div class="red-social">
<a href="https://www.instagram.com/" target="_blank">
<svg class="instagram" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
style="fill: rgba(0, 0, 0, 1);transform: msFilter">
<path
d="M11.999 7.377a4.623 4.623 0 1 0 0 9.248 4.623 4.623 0 0 0 0-9.248zm0 7.627a3.004 3.004 0 1 1 0-6.008 3.004 3.004 0 0 1 0 6.008z">
</path>
<circle cx="16.806" cy="7.207" r="1.078"></circle>
<path
d="M20.533 6.111A4.605 4.605 0 0 0 17.9 3.479a6.606 6.606 0 0 0-2.186-.42c-.963-.042-1.268-.054-3.71-.054s-2.755 0-3.71.054a6.554 6.554 0 0 0-2.184.42 4.6 4.6 0 0 0-2.633 2.632 6.585 6.585 0 0 0-.419 2.186c-.043.962-.056 1.267-.056 3.71 0 2.442 0 2.753.056 3.71.015.748.156 1.486.419 2.187a4.61 4.61 0 0 0 2.634 2.632 6.584 6.584 0 0 0 2.185.45c.963.042 1.268.055 3.71.055s2.755 0 3.71-.055a6.615 6.615 0 0 0 2.186-.419 4.613 4.613 0 0 0 2.633-2.633c.263-.7.404-1.438.419-2.186.043-.962.056-1.267.056-3.71s0-2.753-.056-3.71a6.581 6.581 0 0 0-.421-2.217zm-1.218 9.532a5.043 5.043 0 0 1-.311 1.688 2.987 2.987 0 0 1-1.712 1.711 4.985 4.985 0 0 1-1.67.311c-.95.044-1.218.055-3.654.055-2.438 0-2.687 0-3.655-.055a4.96 4.96 0 0 1-1.669-.311 2.985 2.985 0 0 1-1.719-1.711 5.08 5.08 0 0 1-.311-1.669c-.043-.95-.053-1.218-.053-3.654 0-2.437 0-2.686.053-3.655a5.038 5.038 0 0 1 .311-1.687c.305-.789.93-1.41 1.719-1.712a5.01 5.01 0 0 1 1.669-.311c.951-.043 1.218-.055 3.655-.055s2.687 0 3.654.055a4.96 4.96 0 0 1 1.67.311 2.991 2.991 0 0 1 1.712 1.712 5.08 5.08 0 0 1 .311 1.669c.043.951.054 1.218.054 3.655 0 2.436 0 2.698-.043 3.654h-.011z">
</path>
</svg>
</a>
</div>
<div class="red-social">
<a href="https://github.com/Joel-x-x/" target="_blank">
<svg class="github" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
style="fill: rgba(0, 0, 0, 1);transform: msFilter">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M12.026 2c-5.509 0-9.974 4.465-9.974 9.974 0 4.406 2.857 8.145 6.821 9.465.499.09.679-.217.679-.481 0-.237-.008-.865-.011-1.696-2.775.602-3.361-1.338-3.361-1.338-.452-1.152-1.107-1.459-1.107-1.459-.905-.619.069-.605.069-.605 1.002.07 1.527 1.028 1.527 1.028.89 1.524 2.336 1.084 2.902.829.091-.645.351-1.085.635-1.334-2.214-.251-4.542-1.107-4.542-4.93 0-1.087.389-1.979 1.024-2.675-.101-.253-.446-1.268.099-2.64 0 0 .837-.269 2.742 1.021a9.582 9.582 0 0 1 2.496-.336 9.554 9.554 0 0 1 2.496.336c1.906-1.291 2.742-1.021 2.742-1.021.545 1.372.203 2.387.099 2.64.64.696 1.024 1.587 1.024 2.675 0 3.833-2.33 4.675-4.552 4.922.355.308.675.916.675 1.846 0 1.334-.012 2.41-.012 2.737 0 .267.178.577.687.479C19.146 20.115 22 16.379 22 11.974 22 6.465 17.535 2 12.026 2z">
</path>
</svg>
</a>
</div>
<div class="red-social">
<a href="https://www.linkedin.com/in/acostajoel0001/" target="_blank">
<svg class="linkedin" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
style="fill: rgba(0, 0, 0, 1);transform: msFilter">
<circle cx="4.983" cy="5.009" r="2.188"></circle>
<path
d="M9.237 8.855v12.139h3.769v-6.003c0-1.584.298-3.118 2.262-3.118 1.937 0 1.961 1.811 1.961 3.218v5.904H21v-6.657c0-3.27-.704-5.783-4.526-5.783-1.835 0-3.065 1.007-3.568 1.96h-.051v-1.66H9.237zm-6.142 0H6.87v12.139H3.095z">
</path>
</svg>
</a>
</div>
</div>
<p class="texto-footer">Designed with 💙 by Joel Acosta - Challenge Oracle ONE and Alura Latam</p>
</footer>
<script src="js/alura.js"></script>
</body>
</html>