Add files via upload

Kleber-Ribeiro · Mar 20, 2024 · fdb1f17 · fdb1f17
1 parent a367b58
commit fdb1f17
Show file tree

Hide file tree

Showing 9 changed files with 285 additions and 0 deletions.
diff --git a/codificador/assets/github.png b/codificador/assets/github.png
diff --git a/codificador/assets/icone-exclamacao.png b/codificador/assets/icone-exclamacao.png
diff --git a/codificador/assets/linkedin-icon.png b/codificador/assets/linkedin-icon.png
diff --git a/codificador/assets/logo_alura.png b/codificador/assets/logo_alura.png
diff --git a/codificador/assets/mascote.png b/codificador/assets/mascote.png
diff --git a/codificador/assets/orange-image 1.png b/codificador/assets/orange-image 1.png
diff --git a/codificador/encriptador.js b/codificador/encriptador.js
@@ -0,0 +1,36 @@
+let textInput = document.querySelector('#text__write');
+let output = document.querySelector('#area__copy');
+
+function encrypt() {
+    let text = textInput.value;
+    let resultEncrypt = text.replace(/e/g,'enter').replace(/i/g,'imes').replace(/a/g,'ai').replace(/o/g,'ober').replace(/u/g,'ufat');
+
+    document.getElementById('area__copy').innerHTML = `<textarea readonly id="text__read" rows="35">${resultEncrypt}</textarea>
+        <button id="btn-copy" onclick="copy()" title="Botão de copiar">Copiar</button>`;
+
+
+    // console.log(resultEncrypt);
+}
+
+function decrypt() {
+    let text = textInput.value;
+    let resultDecrypt = text.replace(/ai/g,'a').replace(/enter/g,'e').replace(/imes/g,'i').replace(/ober/g,'o').replace(/ufat/g,'u');
+
+    document.getElementById('area__copy').innerHTML = `<textarea readonly id="text__read" rows="35">${resultDecrypt}</textarea>
+        <button id="btn-copy" onclick="copy()" title="Botão de copiar">Copiar</button>`;
+
+
+    // console.log(resultDecrypt);
+}
+
+function copy() {
+    var textCopy = document.getElementById("text__read").textContent;
+
+    navigator.clipboard.writeText(textCopy)
+      .then(function() {
+        alert("Texto copiado para a área de transferência!");
+      })
+      .catch(function(err) {
+        console.error('Erro ao copiar o texto: ', err);
+      });
+  }
diff --git a/codificador/index.html b/codificador/index.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="pt-br">
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <link rel="shortcut icon" href="./assets/orange-image 1.png" type="image/x-icon">
+        <link rel="stylesheet" href="./styles/style.css">
+        <title>Codificador</title>
+    </head>
+    <body>
+        <header></header>
+        <main class="main__area">
+            <div id="author__area">
+                <img id="logo" src="./assets/orange-image 1.png" alt="Logo" title="Logo">
+            </div>
+            <section class="main__area__interaction">
+                <textarea id="text__write" cols="50" rows="33" placeholder="Digite seu texto aqui..." title="Local para digitar"></textarea>
+                <div class="main__area__interaction__observation">
+                    <img src="./assets/icone-exclamacao.png" alt="Observação">
+                    <p>Apenas letras minúsculas e sem acento.</p>
+                </div>
+                <div class="main__area__interaction__buttons">
+                    <button class="main__area__interaction__buttons__code" id="btn-encrypt" onclick="encrypt()" title="Botão de criptografar">Criptografar</button>
+                    <button class="main__area__interaction__buttons__code" id="btn-decrypt" onclick="decrypt()" title="Botão de descriptografar">Descriptografar</button>
+                </div>
+            </section>
+            <!-- Tive que deixar a section abaixo com id , porque como class não rodava a function de copiar. -->
+            <section id="area__copy">
+                <img id="imagem-mascote" src="./assets/mascote.png" alt="imagem-do-mascote">
+                <h2 id="title">Nenhuma mensagem encontrada</h2>
+                <p id="subtitle">Digite um texto que você deseja criptografar ou descriptografar.</p>
+            </section>
+        </main>
+        <footer class="footer__area">
+           <div class="footer__area__images__container">
+                <a href="https://linkedin.com/in/kleber-ribeiro-197955247"><img class="img__footer" src="./assets/linkedin-icon.png" alt="ícone do Linkedin" title="Acesse meu Linkedin"></a>
+                <a href="https://github.com/Kleber-Ribeiro"><img class="img__footer" src="./assets/github.png" alt="Ícone do GitHub" title="Acesse meu Github"></a>   
+           </div> 
+           <h2 id="author" title="Desenvolvido por Kleber Ribeiro">Desenvolvido por Kleber Ribeiro</h2>
+        </footer>
+    </body>
+    <script src="encriptador.js" defer></script>
+</html>
diff --git a/codificador/styles/style.css b/codificador/styles/style.css
@@ -0,0 +1,206 @@
+/* Criei essas variavéis afim de evitar repetição de código */
+:root {
+    --cor-primária:#0A3871;
+    --fonte-primária: "Inter",sans-serif;
+    --alinhamento-dos-itens: center;
+    --alinhamento-do-texto: center;
+    --peso-da-fonte: 400;
+    --font-size: 1rem;
+}
+
+
+body {
+    background: #F3F5FC;
+}
+/* main - container */
+.main__area {
+    display: flex;
+    gap: 1.25rem;
+    justify-content: space-evenly;
+}
+
+#author__area{
+    display: block;
+    flex-direction: column;
+    gap: 5%;
+    text-align: center;
+}
+
+#logo {
+    width: 4.375rem;
+    height: 4.7rem;
+    padding: 5%;
+}
+
+#author{
+    margin-top: 2%;
+    font-family: var(--fonte-primária);
+    font-size: 1rem;
+    font-weight: var(--peso-da-fonte);
+}
+
+/* Container da área de digitação */
+.main__area__interaction {
+    display: block;
+    width: 40%;
+}
+
+#text__write {
+    border: none;
+    border-radius: 1rem;
+    width: 100%;
+    background: #F3F5FC;
+}
+
+::placeholder {
+    padding-top: 10%;
+    padding-left: 2%;
+    font-family: var(--fonte-primária);
+    font-size: 2rem;
+    font-weight: var(--peso-da-fonte);
+    text-align: left;
+    color: var(--cor-primária);
+}
+
+.main__area__interaction__observation {
+    display: flex;
+    align-items: var(--alinhamento-dos-itens);
+    gap: 1.25rem;
+}
+
+/* Container dos botões */
+.main__area__interaction__buttons {
+    display: flex;
+    align-items: var(--alinhamento-dos-itens);
+    justify-content: space-between;
+}
+
+.main__area__interaction__buttons__code {
+    border-radius: 1rem;
+    width: 45%;
+    height: 8vh;
+}
+
+#btn-encrypt {
+    color: #FFFFFF;
+    background: var(--cor-primária);
+    font-family: var(--fonte-primária);
+    font-size: var(--font-size);
+    font-weight: var(--peso-da-fonte);
+    text-align: var(--alinhamento-do-texto);
+}
+
+#btn-encrypt:hover {
+    cursor: pointer;
+    background: #0f4d97;
+}
+
+
+#btn-decrypt {
+    color: var(--cor-primária);
+    border: var(--cor-primária) solid 1px;
+    background: #D8DFE8; 
+    font-family: var(--fonte-primária);
+    font-size: var(--font-size);
+    font-weight: var(--peso-da-fonte);
+    text-align: var(--alinhamento-do-texto);
+}
+
+#btn-decrypt:hover {
+    cursor: pointer;
+    background: #b6bcc4;
+}
+
+/* Container da área de cópia */
+#area__copy {
+    display: block;
+    align-items: var(--alinhamento-dos-itens);
+    border-radius: 1.25rem;
+    background-color: #FFFFFF;
+    width: 20%;
+}
+
+#imagem-mascote {
+    width: 100%;
+    height: 45%;
+    margin-top: 20% ;
+    gap: 0px;
+    opacity: 0px;
+}
+
+#title {
+    font-family: var(--fonte-primária);
+    font-size: 1.5rem;
+    font-weight: 700;
+    text-align: var(--alinhamento-do-texto);
+    color: #343A40;
+}
+
+#subtitle {
+    font-family: var(--fonte-primária);
+    font-size: var(--font-size);
+    font-weight: var(--peso-da-fonte);
+    text-align: var(--alinhamento-do-texto);
+    color: #495057;
+}
+
+#text__read{
+    border: none;
+    background: #FFFFFF;
+    border-radius: 1.25rem;
+    width: 98.5%;
+}
+
+#btn-copy {
+    font-family: var(--fonte-primária);
+    font-size: var(--font-size);
+    font-weight: var(--peso-da-fonte);
+    text-align: var(--alinhamento-do-texto);
+    border: var(--cor-primária) solid 1px;
+    border-radius: 1rem;
+    width: 50%;
+    height: 8vh;
+    margin:7% 0% 2% 25%; /*Top-right-bottom-left*/
+    color: var(--cor-primária);
+}
+
+#btn-copy:hover {
+    cursor: pointer;
+    color: #FFFFFF;
+    background: var(--cor-primária);
+}
+
+/* Container do rodapé */
+.footer__area{
+    margin-top: 3%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    background: var(--cor-primária);
+    color: #FFFFFF;
+
+}
+
+.footer__area__images__container{
+    width: 6.25rem;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 10%;
+    margin-top: 2vh;
+}
+
+.img__footer{
+    width: 80%;
+    height: 80%;
+}
+
+.img__footer:hover{
+    scale: 1.2;
+}
+
+#author{
+    font-family: var(--fonte-primária);
+    font-size: var(--font-size);
+    font-weight: var(--peso-da-fonte);
+}