-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
49 lines (46 loc) · 2.37 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
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title>Decodificador de Textos</title>
<link rel="shortcut icon" href="assets/images/favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="assets/css/reset.css">
<link rel="stylesheet" href="assets/css/style.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=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<header>
<h1><img src="assets/images/logo.png" alt="Logo da Alura"></h1>
</header>
<main>
<div class="left-panel">
<textarea id="input-textarea" cols="30" rows="10" placeholder="Digite seu texto" spellcheck="false"></textarea>
<p><i class="fa fa-info-circle" aria-hidden="true"></i> Apenas letras minúsculas e sem acento</p>
<div class="buttons">
<button class="dark-button" id="crip-button">Criptografar</button>
<button class="light-button" id="decrip-button">Descriptografar</button>
</div>
</div><!--
Remove espaço em branco entre as divs
--><div class="right-panel">
<div class="message">
<img class="desenho" src="assets/images/desenho.png" alt="Boneco segurando uma lupa">
<p><strong>Nenhuma mensagem encontrada</strong></p>
<p>Digite um texto que você deseja criptografar ou descriptografar</p>
</div>
<div class="output">
<p class="output-text"></p>
<button class="light-button" id="copy-button">Copiar</button>
</div>
</div>
</main>
<footer>
<p>Desenvolvido por <a href="https://github.com/ezequielhenrique" target="_blank"><i style="font-size:1.2em" class="fa"></i>ezequielhenrique</a> - 2023</p>
</footer>
</body>
<script src="assets/js/script.js"></script>
</html>