primeira versao v1

will787 · May 21, 2023 · fc74d91 · fc74d91
commit fc74d91
Show file tree

Hide file tree

Showing 9 changed files with 316 additions and 0 deletions.
diff --git a/imagens/Vector (2).png b/imagens/Vector (2).png
diff --git a/imagens/boneco.png b/imagens/boneco.png
diff --git a/imagens/logoalura.png b/imagens/logoalura.png
diff --git a/imagens/mensagem.png b/imagens/mensagem.png
diff --git a/imagens/view.png b/imagens/view.png
diff --git a/index.html b/index.html
@@ -0,0 +1,58 @@
+<!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">
+    <link rel="stylesheet" href="css/reset.css">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link rel="stylesheet" href="style.css">
+    <link rel="shortcut icon" href="imagens/logoalura.png">
+
+    <title>ONE</title>
+</head>
+<body>
+    <main>      
+        <header class="cabecalho">
+
+                <img src="imagens/logoalura.png" class="logoalura" alt="Logo da Alura">
+                <h1></h1>
+
+        </header>
+
+        <div class="container-input">
+            <div class="input">  
+                <textarea id="input-texto" placeholder="Digite seu texto" style="resize:none;"></textarea>;
+                <p><img src="imagens/Vector (2).png" class="img-vector"> Apenas letras minúsculas e sem acento.</p>
+            </div>
+
+            <div id="output">
+                <img src="imagens/boneco.png" alt="boneco alura">
+                <h2>Nenhuma mensagem encontrada</h2>
+                <span>Digite um texto que você deseja criptografar ou descriptografar.</span>
+                <button class="btn-copiar" id="copiar" onclick="copiar()">Copiar</button>
+            </div>
+        </div>
+
+        <div id="botoes">
+            <button onclick="criptografar()" class="btn-criptografar">Criptografar</button>
+            <button onclick="descriptografar()" class="btn-descriptografar">Descriptografar</button>
+            <button onclick="apagarTexto()" class="btn-limpar">Limpar</button>
+        </div>
+    </main>
+
+    <footer class="rodape">
+        <div class="icons">
+            <h3 class="copyright">&copy; 2023 - Desenvolvido por William Vieira</h3>
+            <a href="https://github.com/will787"><ion-icon name="logo-github"></ion-icon></a>
+            <a href="https://www.linkedin.com/in/william-v1/"><ion-icon name="logo-linkedin"></ion-icon></a>
+        </div>
+
+    </footer>
+
+    <script src="script.js"></script>
+    <script  type = "module"  src = "https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"></script> 
+    <script  nomodule  src = "https://unpkg .com/[email protected]/dist/ionicons/ionicons.js"></script>
+</body>
+</html>
diff --git a/reset.css b/reset.css
diff --git a/script.js b/script.js
@@ -0,0 +1,45 @@
+var TextInput = document.querySelector("#input-texto");
+var outInput = document.querySelector("#output");
+
+
+
+function criptografar() {
+    var texto = TextInput.value;
+
+    var resultCripto = texto.replace(/e/g, "enter").replace(/i/g, "imes").replace(/a/g, "ai")
+    .replace(/o/g, "ober").replace(/u/, "ufat");
+
+    document.getElementById('output').innerHTML = '<textarea id="input-texto">' + resultCripto +
+    '</textarea>' + '<button class="btn-copiar" id="copiar" onclick="copiar()">Copiar</button>'
+
+}
+
+function descriptografar() {
+    var texto = TextInput.value;
+
+    var resultDescripto = texto.replace(/enter/g, "e").replace(/imes/g, "i").replace(/ai/g, "a").replace(/ober/g, "o")
+    .replace(/ufat/g, "u");
+
+    document.getElementById('output').innerHTML = '<textarea id="input-texto">' + resultDescripto +
+    '</textarea>' + '<button class="btn-copiar" id="copiar" onclick="copiar()">Copiar</button>' 
+
+}
+
+
+function copiar() {
+    var textoCop = document.getElementById('input-texto');
+    textoCop.select();
+    document.execCommand('copy');
+
+    alert('Seu texto foi copiado');
+}
+
+function apagarTexto() {
+     var TextInput = document.querySelector('#input-texto'); 
+     TextInput.value = '';
+     window.location.reload(true); 
+};
+
+
+
+
diff --git a/style.css b/style.css
@@ -0,0 +1,213 @@
+
+@import url('https://fonts.googleapis.com/css2? family= Inter & family= Montserrat:wght@100 & family= PT+Serif:ital@1 & display=swap');
+
+body {
+    background: linear-gradient( #4b24cb, rgb(226, 224, 232));
+
+}
+
+* {
+    margin: 0;
+    padding: 0;
+    font-family: 'Inter', sans-serif;
+}
+
+.cabecalho {
+    display: flex; 
+    justify-content: space-between;
+    padding: 2%;
+
+}
+
+.cabecalho h1 {
+    color: rgb(31, 30, 30);
+}
+
+.cabecalho img {
+    max-width: 70px;
+    max-height: 70px;
+    width: auto;
+    height: auto;
+}
+
+.container-input {
+    display: flex;
+    justify-content: space-between;
+    padding: 2% 0 0 4%;
+
+}
+
+.container-input .input {
+    width: 400px;
+    height: 330px;
+}
+
+#input-texto {
+    width: 335px;
+    height: 330px;
+    font-size: 20px;
+    color: whitesmoke;
+    background: transparent;
+    box-shadow: none;
+    border: none;
+    outline: 0;
+    padding: 10px;
+    text-align: lowercase;
+
+}
+
+.input textarea::placeholder {
+    color: rgb(224, 216, 216);
+}
+
+.input p {
+    padding-top: 100px;
+    font-size: 15px;
+    font-weight: bold;
+    font-family: 'inter', sans-serif;
+    color: rgb(57, 56, 56);
+}
+
+ .img-vector {
+    padding-top: 6%;
+}
+
+#output {
+    display: flex;
+    flex-direction: column;
+    border: 3px solid;
+    border-radius: 20px;
+    width: 360px;
+    height: 500px;
+    margin-right: 3%;
+}
+
+#output .mensagem {
+    background: transparent;
+    border: none;
+    outline: none;
+    padding-top: 5px;
+    padding-left: 5px;
+    position: fixed;
+    color: white;
+}
+
+
+#output img {
+    text-align: center;
+    margin: auto;
+}
+
+#output h2 {
+    text-align: center;
+    font-size: 25px;
+    color: black;
+
+}
+
+#output span {
+    font-size: 16px;
+    text-align: center;
+}
+
+#output img {
+    max-width: 300px;
+    max-height: 300px;
+    width: auto;
+    height: auto;
+    margin-top: 50px;
+    text-align: center;
+}
+
+#botoes {
+    padding-left: 40px;
+    padding-bottom: 4%;
+    font-size: 30px;
+    display: flex;
+}
+
+#botoes button{
+    border-radius: 25px;
+    text-decoration: none;
+    width: 150px;
+    height: 50px;
+    margin-left: 1%;
+    cursor: pointer;
+    background-color: rgb(143, 128, 217);
+    font-weight: bold;
+    color: aliceblue;
+    border: aliceblue;
+
+}
+
+.btn-copiar {
+    border: 2px solid;
+    border-radius: 25px;
+    text-decoration: none;
+    width: 150px;
+    height: 50px;
+    margin-bottom: 10px;
+    margin-left: 30%;
+    cursor: pointer;
+    background-color: rgb(143, 128, 217);
+    font-weight: bold;
+    color: aliceblue;
+    border: aliceblue;
+}
+
+#botoes button:hover {
+    border: 2px solid;
+    color: #330a71;
+    transition: 0.5 all;
+}
+
+.rodape {
+    display:flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 2%;
+    margin-top: 45px;
+    text-align: center;
+    outline: none;
+    border: none;
+}
+
+.rodape h3 {
+    text-align: center;
+    color: rgb(164, 157, 157);
+    font-family: 'inter', sans-serif;
+    font-weight: 10px;
+    font-style: italic;
+}
+
+
+.rodape:hover {
+    font-size: 16px;
+    border: 2px solid;
+    color: #E5E5E5;
+}
+
+.icons ion-icon {
+    width: 25px;
+    height: 25px;
+    color:#4b24cb;
+}
+
+.icons ion-icon:hover {
+    color: black;
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+