-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
137 lines (119 loc) · 6.61 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
130
131
132
133
134
135
136
137
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Encriptador</title>
<link rel="shortcut icon" href="img/alura-logo-pestaña-celeste.png" />
<link rel="stylesheet" type="text/css" href="reset.css">
<link rel="stylesheet" type="text/css" href="estilos.css">
<!--Font Awesome-->
<script defer src="https://use.fontawesome.com/releases/v5.15.4/js/all.js"
integrity="sha384-rOA1PnstxnOBLzCLMcre8ybwbTmemjzdNlILg8O7z1lUkLXozs4DHonlDtnE7fpc"
crossorigin="anonymous"></script>
</head>
<body class="cuerpo">
<div class="contenedor-ppal">
<div class="contenedor-logo-menus">
<div class="contenedor-logo"><a rel="noreferrer noopener" href="https://www.aluracursos.com/"
target="_blank" title="Alura"><img id="logo-alura" src="img/Logo.svg" alt="Logo Alura"></a>
</div>
<div class="menu">
<ul class="lista-menu">
<li class="opcion1">
<!--<img src="img/Page icon.svg" alt="Cómo funciona">-->
<i onclick="showRules()" class="fas fa-cog" id="info" title="Reglas"></i>
</li>
<li class="opcion2">
<!--<img src="img/Page icon2.svg" alt="Acerca de">-->
<i onclick="showInfo()" class="fas fa-info-circle" id="acerca-de" title="Acerca de"></i>
</li>
</ul>
</ul>
</div>
<div id="contenedor-dialogo-info" class="contenedor-dialogs" style="display: none;">
<dialog id="info-dialog">
<div class="contenedor-close-info"><i onclick="closeWindow()" class="fas fa-window-close" id="close-info"></i></div>
<div class="cont-text-dialog-info"><p class="t-dialog-info">Hola! Mi nombre es Daniel De Blassis y cree esta aplicación que corresponde al challenge #1 del
programa Alura ONE.</p><br>
<p class="t-dialog-info"><a href="https://github.com/DanielDeBlassis/1_Encriptador" target="_blank"
rel="nofollow noreferrer noopener">Aquí</a> puedes encontrar el repositorio del proyecto.
</p></div>
</dialog>
</div>
<div id="contenedor-dialogo-rules" class="contenedor-dialogs" style="display: none;">
<dialog id="rules-dialog">
<div class="contenedor-close-info"><i onclick="closeWindow()" class="fas fa-window-close" id="close-reglas"></i></div>
<div class="cont-text-dialog-rules">
<h2>Las "llaves" de encriptación que utilizaremos son las siguientes:</h2><br>
<ul class="lista">
<li>La letra "e" es convertida para "enter"</li>
<li>La letra "i" es convertida para "imes"</li>
<li>La letra "a" es convertida para "ai"</li>
<li>La letra "o" es convertida para "ober"</li>
<li>La letra "u" es convertida para "ufat"</li>
</ul>
</div>
</dialog>
</div>
<div class="menu-idioma">
<ul class="menu-idioma-lista">
<li class="opcion-idioma espania">
<div class="elipse">
<img onclick="cambiarEspaniol()" id="spain" src="img/spain.png" class="img-idioma espania"
alt="Español">
</div>
</li>
<li class="opcion-idioma brazil">
<div class="elipse">
<img onclick="cambiarPortugues()" src="img/brazil.png" id="brasil"
class="img-idioma portugal" alt="Portugués">
</div>
</li>
</ul>
</div>
</div>
<form>
<div id="contenedor-resultado" class="contenedor-lateral">
<div class="contenedor-munieco"><img src="img/muñeco-gif.gif" alt="Figura persona con lupa"></div>
<div class="contenedor-texto-munieco" id="cont-texto-munieco">
<p id="texto-p1">Ningún mensaje fue encontrado</p>
<p id="texto-p2">Ingresa el texto que desees encriptar o desencriptar.</p>
</div>
</div>
</form>
<form class="formulario">
<div class="contenedor-formulario">
<div class="contenedor-botones-textarea" id="cont-cop-bor">
<button id="copy" class="boton-copiar" type="button" title="Copiar"><a><i class="fas fa-copy"
id="icono-copiar"></i></a> Copiar</button>
<button id="reset" class="boton-reset" type="reset" title="Borrar"><a><i
class="fas fa-trash"></i></a> Borrar</button>
</div>
<textarea onkeypress="return soloLetras(event)" id="areaTexto" name="textoIngresado" class="textarea" placeholder="Ingrese el texto aquí" onkeyup="javascript:this.value=this.value.toLowerCase();" required pattern="a-z"></textarea>
</div>
<div class="contenedor-aclaracion" id="cont-advert">
<p class="texto-advertencia"><i id="exclamacion" class="fa fa-exclamation-circle"
aria-hidden="true"></i> Solo letras
minúsculas y sin acentos</p>
</div>
<dialog id="fail">
<i class="fas fa-exclamation-triangle"></i><span id="fail-text"> Ingrese texto</span>
</dialog>
<div class="contenedor-botones">
<button id="encriptar" class="boton encriptado" type="button">
<p class="texto-boton-encriptado">Encriptar</p>
</button>
<button id="desencriptar" class="boton desencriptado" type="button">
<p class="texto-boton-desencriptado">Desencriptar</p>
</button>
</div>
</form>
</div>
<footer id="footer">
<p id="creditos">© Íconos de España y Brasil creados por Freepik - <a href="https://www.flaticon.com/authors/freepik"
target="_blank" rel="nofollow noreferrer noopener"><em>Flaticon</em></a></p>
</footer>
<script src="script.js"></script>
</body>
</html>