-
Notifications
You must be signed in to change notification settings - Fork 6
Expand file tree
/
Copy pathindex.html
More file actions
93 lines (91 loc) · 7.32 KB
/
index.html
File metadata and controls
93 lines (91 loc) · 7.32 KB
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
<!DOCTYPE html>
<html lang="en">
<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">
<title>Encriptador | Oracle + Alura</title>
<meta name="keywords" content="Encriptador, Oracle, Alura, Proyecto">
<meta name="title" content="Encriptador | Oracle + Alura">
<meta name="description" content="Proyecto propuesto por ONE (Oracle Next Education) + Alura utilizando HTML, SASS y Javascript">
<meta property="og:type" content="website">
<meta property="og:url" content="https://patrickwebsdev.github.io/Encriptador-Oracle-Alura/">
<meta property="og:title" content="Encriptador | Oracle + Alura">
<meta property="og:description" content="Proyecto propuesto por ONE (Oracle Next Education) + Alura utilizando HTML, SASS y Javascript">
<meta property="og:image" content="https://raw.githubusercontent.com/patrickwebsdev/Encriptador-Oracle-Alura/master/img/screenshot-new.png">
<meta property="twitter:card" content="summary_large_image">
<meta property="twitter:url" content="https://patrickwebsdev.github.io/Encriptador-Oracle-Alura/">
<meta property="twitter:title" content="Encriptador | Oracle + Alura">
<meta property="twitter:description" content="Proyecto propuesto por ONE (Oracle Next Education) + Alura utilizando HTML, SASS y Javascript">
<meta property="twitter:image" content="https://raw.githubusercontent.com/patrickwebsdev/Encriptador-Oracle-Alura/master/img/screenshot-new.png">
<meta name="author" content="PatrickWebs">
<!-- generics -->
<link rel="icon" href="./favicon/favicon-32.png" sizes="32x32">
<link rel="icon" href="./favicon/favicon-128.png" sizes="128x128">
<link rel="icon" href="./favicon/favicon-180.png" sizes="180x180">
<link rel="icon" href="./favicon/favicon-192.png" sizes="192x192">
<!-- Android -->
<link rel="shortcut icon" sizes="196x196" href="./favicon/favicon-196.png">
<!-- iOS -->
<link rel="apple-touch-icon" href="./favicon/favicon-120.png" sizes="120x120">
<link rel="apple-touch-icon" href="./favicon/favicon-152.png" sizes="152x152">
<link rel="apple-touch-icon" href="./favicon/favicon-180.png" sizes="180x180">
<link rel="stylesheet" href="style.min.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap" rel="stylesheet">
</head>
<body>
<main class="main">
<section class="main__logo">
<h1 class="main__h1"><img class="main__img" src="img/logo.svg" alt="Alura Logo"></h1>
</section>
<section class="main__form">
<textarea class="main__textarea" name="mensaje" id="mensaje" placeholder="Ingrese el texto aqui"></textarea>
<div class="main__footer">
<div class="main__small">
<small>Solo letras minúsculas y sin acentos</small>
</div>
<div class="main__buttons">
<button class="main__button main__button-primary" id="encriptar">Encriptar</button>
<button class="main__button main__button-secondary" id="desencriptar">Desencriptar</button>
</div>
</div>
</section>
<aside class="aside">
<section class="aside__content" id="ningunMensaje">
<div class="aside__img">
<img src="img/muneco.svg" alt="Ningun mensaje encontrado - imagen">
</div>
<div class="aside__text aside__none">
<h2 class="aside__h2">Ningún mensaje fue encontrado</h2>
<p class="aside__p">Ingresa el texto que desees encriptar o desencriptar</p>
</div>
</section>
<section class="aside__content aside__content-between aside__content--none" id="mensajeEncontrado">
<div class="aside__message">
<p class="aside__encrypt" id="mensajeEncriptado">Hola</p>
</div>
<button class="aside__button bubbly-button" id="copiarMensaje">Copiar</button>
</section>
</aside>
</main>
<footer>
<h3 class="developer"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0)"><path fill-rule="evenodd" clip-rule="evenodd" d="M14.2425 3.02985C14.7783 3.1638 15.1041 3.70673 14.9701 4.24253L10.9701 20.2425C10.8362 20.7783 10.2933 21.1041 9.75746 20.9701C9.22167 20.8362 8.89591 20.2933 9.02986 19.7575L13.0299 3.75746C13.1638 3.22166 13.7067 2.8959 14.2425 3.02985ZM6.70711 6.29289C7.09763 6.68341 7.09763 7.31658 6.70711 7.7071L2.41421 12L6.70711 16.2929C7.09763 16.6834 7.09763 17.3166 6.70711 17.7071C6.31658 18.0976 5.68342 18.0976 5.29289 17.7071L0.292893 12.7071C-0.0976311 12.3166 -0.0976311 11.6834 0.292893 11.2929L5.29289 6.29289C5.68342 5.90236 6.31658 5.90236 6.70711 6.29289ZM17.2929 6.29289C17.6834 5.90236 18.3166 5.90236 18.7071 6.29289L23.7071 11.2929C24.0976 11.6834 24.0976 12.3166 23.7071 12.7071L18.7071 17.7071C18.3166 18.0976 17.6834 18.0976 17.2929 17.7071C16.9024 17.3166 16.9024 16.6834 17.2929 16.2929L21.5858 12L17.2929 7.7071C16.9024 7.31658 16.9024 6.68341 17.2929 6.29289Z" fill="#293644"></path></g><defs><clipPath id="clip0"><rect width="24" height="24" fill="white"></rect></clipPath></defs></svg> with <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="511.626px" height="511.627px" viewBox="0 0 511.626 511.627" style="enable-background:new 0 0 511.626 511.627;" xml:space="preserve"><g><path d="M475.366,71.951c-24.175-23.606-57.575-35.404-100.215-35.404c-11.8,0-23.843,2.046-36.117,6.136 c-12.279,4.093-23.702,9.615-34.256,16.562c-10.568,6.945-19.65,13.467-27.269,19.556c-7.61,6.091-14.845,12.564-21.696,19.414 c-6.854-6.85-14.087-13.323-21.698-19.414c-7.616-6.089-16.702-12.607-27.268-19.556c-10.564-6.95-21.985-12.468-34.261-16.562 c-12.275-4.089-24.316-6.136-36.116-6.136c-42.637,0-76.039,11.801-100.211,35.404C12.087,95.552,0,128.288,0,170.162 c0,12.753,2.24,25.889,6.711,39.398c4.471,13.514,9.566,25.031,15.275,34.546c5.708,9.514,12.181,18.796,19.414,27.837 c7.233,9.042,12.519,15.27,15.846,18.699c3.33,3.422,5.948,5.899,7.851,7.419L243.25,469.937c3.427,3.429,7.614,5.144,12.562,5.144 s9.138-1.715,12.563-5.137l177.87-171.307c43.588-43.583,65.38-86.41,65.38-128.475C511.626,128.288,499.537,95.552,475.366,71.951 z"></path></g></svg> by <a href="https://patrickwebsdev.github.io/portafolio" target="_blank" alt="Portfolio">PatrickWebs</a></h3>
</footer>
<div class="modal" id="modal">
<div class="modal__container">
<div class="modal__header">
<h3 class="modal__title">Error</h3>
</div>
<div class="modal__body">
<p class="modal__p">El texto no puede contener mayusculas y/o caracteres especiales</p>
</div>
<div class="modal__footer">
<button class="modal__button" id="modalButton">Entendido</button>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>