-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
146 lines (130 loc) · 8.74 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
138
139
140
141
142
143
144
145
146
<!DOCTYPE html>
<html lang="pt-br">
<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">
<meta name="description" content="Simples encriptador de textos">
<title>Encrypter/Decrypter Oracle ONE</title>
<!--INCONE AO LADO DO TÍTULO DA PAGINA-->
<link rel="icon" href="img/encrypted_icon.svg?" type="image/icon type">
<!--LINK CSS-->
<link rel="stylesheet" href="styles/styles.css">
<!--FONT PADRAO DO SITE-->
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@100&family=Roboto:wght@400;500&family=Stalemate&display=swap" rel="stylesheet">
<!--Alura FONTE-->
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@100&family=Poppins:ital,wght@0,100;1,200&family=Roboto:wght@400;500&family=Stalemate&display=swap" rel="stylesheet">
<!--Rafael FONTE-->
<link href="https://fonts.googleapis.com/css2?family=Babylonica&family=Inter:wght@100&family=Poppins:ital,wght@0,100;1,200&family=Roboto:wght@400;500&family=Stalemate&display=swap" rel="stylesheet">
<!--TEXTAREA FONTE-->
<link href="https://fonts.googleapis.com/css2?family=Babylonica&family=Inter:wght@100&family=Poppins:ital,wght@0,100;1,200&family=Press+Start+2P&family=Roboto:wght@400;500&family=Stalemate&family=VT323&display=swap" rel="stylesheet">
<!--BTNs FONTE-->
<link href="https://fonts.googleapis.com/css2?family=Babylonica&family=Bebas+Neue&family=Inter:wght@100&family=Poppins:ital,wght@0,100;1,200&family=Press+Start+2P&family=Roboto:wght@400;500&family=Stalemate&family=VT323&display=swap" rel="stylesheet">
</head>
<body>
<header>
<!--NAVBAR-->
<nav class="navbar">
<ul class="navbar-nav">
<!--1° ITEM COM LOGO E TEXTO TÍTULO-->
<li class="logo">
<a href="https://pt.wikipedia.org/wiki/Encripta%C3%A7%C3%A3o" target="_blank" class="nav-link-logo">
<svg class="spacer1 layer2 layer4"></svg>
<span class="link-text text-logo">Encrypter / Decrypter</span>
</a>
</a>
</li>
<!--2° ITEM COM LINK PARA SITE ALURA-->
<li class="nav-item">
<a href="https://www.alura.com.br" target="_blank" class="nav-link">
<span class="alura">a</span>
<span class="link-text alura-text">Sobre a Alura</span>
</a>
</li>
<!--3° ITEM COM LINK PARA SITE PROJETO ONE-->
<li class="nav-item">
<a href="https://www.oracle.com/br/education/oracle-next-education" target="_blank" class="nav-link">
<span class="oracle">ONE</span>
<span class="link-text oracle-text">Sobre a Oracle ONE</span>
</a>
</li>
<!--4° ITEM COM LINK PARA LINKEDIN-->
<li class="nav-item">
<a id="links-contato" href="https://www.linkedin.com/in/rafael-da-silva-peres-ba4228bb/" target="_blank" class="nav-link">
<span class="rafael rafael-r">R<span class="rafael rafael-p">P</span></span>
<span class="link-text"><span class="rafael-r">Rafael</span> <span class="rafael-p">Peres</span>
<sub>
<!--SVG SIMBOLO LINKEDIN-->
<svg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512"><title>Logo do Linkedin</title><path d="M444.17 32H70.28C49.85 32 32 46.7 32 66.89v374.72C32 461.91 49.85 480 70.28 480h373.78c20.54 0 35.94-18.21 35.94-38.39V66.89C480.12 46.7 464.6 32 444.17 32zm-273.3 373.43h-64.18V205.88h64.18zM141 175.54h-.46c-20.54 0-33.84-15.29-33.84-34.43 0-19.49 13.65-34.42 34.65-34.42s33.85 14.82 34.31 34.42c-.01 19.14-13.31 34.43-34.66 34.43zm264.43 229.89h-64.18V296.32c0-26.14-9.34-44-32.56-44-17.74 0-28.24 12-32.91 23.69-1.75 4.2-2.22 9.92-2.22 15.76v113.66h-64.18V205.88h64.18v27.77c9.34-13.3 23.93-32.44 57.88-32.44 42.13 0 74 27.77 74 87.64z"/></svg></span>
</sub>
</a>
</li>
<!--5° E ÚLTIMO ITEM DA NAVBAR COM LINK GITHUB-->
<li class="nav-item">
<a href="https://github.com/Rafaeldasilvaperes" target="_blank" class="nav-link">
<div class="spinner"></div>
<span class="link-text">Made by <span class="rafael-r">Rafael</span> <span class="rafael-p">Peres</span>
<!--SVG SIMBOLO GITHUB-->
<sub><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-github" viewBox="0 0 16 16"><title>Logo do GitHub</title>
<path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"/>
</svg></sub>
</span>
</a>
</li>
</ul>
</nav>
</header>
<!--FINAL NAVBAR-->
<!--PREDIOS FOOTER SVG: usado método diferent dos outros aqui, imagem foi entrada com CSS-->
<div class="spacer layer1 layer3"></div>
<!--CONTEÚDO-->
<main>
<!--CONTAINER DOS CONTAINERS Entrada/Saída-->
<section class="container-textareas">
<!--CONTAINER ENTRADA-->
<section class="container1">
<label for="textarea_description"></label><br>
<!--TEXT AREA DE ENTRADA-->
<div id="textarea-entrada" class="textarea_style">
<textarea class="textarea" id="textarea" name="textarea_description" cols="16" rows="4" maxlength="500" minlength="10" placeholder="Entrada" oninput="this.value = this.value.toLowerCase()"></textarea>
<!--oninput usado direto no html para forçar entrada mínuscula no mobile-->
</div>
<br>
<span class="textarea_count" id="contadorLetras">0/500</span>
</section>
<!--CONTAINER BOTÕES ENC/DESENC-->
<div class="btn-div">
<button class="btn-enc" id="btn-exec"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" class="bi bi-lock-fill" viewBox="0 0 16 16"><title>Imagem cadeado fechado dentro do botão de Encriptar</title>
<path d="M8 1a2 2 0 0 1 2 2v4H6V3a2 2 0 0 1 2-2zm3 6V3a3 3 0 0 0-6 0v4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2z"/>
</svg>Encriptar</button>
<button class="btn-desenc" id="btn-exec-des"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" class="bi bi-unlock-fill" viewBox="0 0 16 16"><title>Imagem cadeado aberto dentro do botão de Desencriptar</title>
<path d="M11 1a2 2 0 0 0-2 2v4a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2h5V3a3 3 0 0 1 6 0v4a.5.5 0 0 1-1 0V3a2 2 0 0 0-2-2z"/>
</svg>Desencriptar</button>
</div>
<!--CONTAINER SAÍDA-->
<section class="container2">
<!--BOTÃO DE COPIAR-->
<button class="btn-copy" id="btn-copy1"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi-clipboard" viewBox="0 0 16 16"><title>Imagem de uma prancheta símbolo dos botões de Copiar texto</title>
<path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1v-1z"/>
<path d="M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3z"/>
</svg><br></button>
<!--TEXT AREA DE SAÍDA-->
<div class="textarea_style">
<textarea class="textarea textarea-saida" id="textareaDiv" name="textarea_description" cols="16" rows="4" maxlength="10000" minlength="10" placeholder="Saída" readonly></textarea>
</div>
<br>
</section>
</section>
</main>
<!--DIVISOR NO FOOTER-->
<footer class="footer-style">
<svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none"><title>Linhas em formato de onda enfeitando o rodapé da página</title>
<path d="M0,0V46.29c47.79,22.2,103.59,32.17,158,28,70.36-5.37,136.33-33.31,206.8-37.5C438.64,32.43,512.34,53.67,583,72.05c69.27,18,138.3,24.88,209.4,13.08,36.15-6,69.85-17.84,104.45-29.34C989.49,25,1113-14.29,1200,52.47V0Z" opacity=".25" class="shape-fill"></path>
<path d="M0,0V15.81C13,36.92,27.64,56.86,47.69,72.05,99.41,111.27,165,111,224.58,91.58c31.15-10.15,60.09-26.07,89.67-39.8,40.92-19,84.73-46,130.83-49.67,36.26-2.85,70.9,9.42,98.6,31.56,31.77,25.39,62.32,62,103.63,73,40.44,10.79,81.35-6.69,119.13-24.28s75.16-39,116.92-43.05c59.73-5.85,113.28,22.88,168.9,38.84,30.2,8.66,59,6.17,87.09-7.5,22.43-10.89,48-26.93,60.65-49.24V0Z" opacity=".5" class="shape-fill"></path>
<path d="M0,0V5.63C149.93,59,314.09,71.32,475.83,42.57c43-7.64,84.23-20.12,127.61-26.46,59-8.63,112.48,12.24,165.56,35.4C827.93,77.22,886,95.24,951.2,90c86.53-7,172.46-45.71,248.8-84.81V0Z" class="shape-fill"></path>
</svg>
</footer>
<!--Script-->
<script src="scripts/main.js" type="text/javascript"></script>
</body>
</html>