Add files via upload

Incluído novos campos de plano e detalhes, que podem ser preenchidos, para completar o template, considerando o plano de forma automática.
EnsieBruno · Oct 29, 2024 · af90b2e · af90b2e
1 parent ea44b5b
commit af90b2e
Show file tree

Hide file tree

Showing 5 changed files with 128 additions and 92 deletions.
diff --git a/README.md b/README.md
@@ -1,46 +1,46 @@
-<!DOCTYPE html>
-<body>
-    <div class="container">
-        <h1>Máscara de Obtenção de Dados e Preenchimento Automático</h1>
-        <p>
-            Este projeto tem como objetivo automatizar o processo de coleta e preenchimento de dados
-            a partir de uma página interna, facilitando a transferência de informações entre setores.
-        </p>
-        <h2>Descrição do Projeto</h2>
-        <p>
-            Utilizamos os dados de uma página interna para colher informações e inseri-las em um template
-            para transferir ligações entre setores.
-        </p>
-        <p>
-            O processo anteriormente era feito de maneira manual. Para otimizar este fluxo, criei uma máscara
-            em JavaScript, onde é possível copiar e colar os dados da página e preencher os campos necessários.
-        </p>
-        <h2>Como Funciona</h2>
-        <ol>
-            <li>Copie os dados da página interna.</li>
-            <li>Cole os dados na máscara de preenchimento.</li>
-            <li>Clique no botão para preencher os campos automaticamente.</li>
-            <li>Utilize o botão de copiar para gerar um texto com as informações preenchidas.</li>
-        </ol>
-        <h2>Tecnologias Utilizadas</h2>
-        <ul>
-            <li>HTML</li>
-            <li>CSS</li>
-            <li>JavaScript</li>
-        </ul>
-        <h2>Como Usar</h2>
-        <p>
-            1. Clone este repositório.<br>
-            2. Abra o arquivo <code>index.html</code> em seu navegador.<br>
-            3. Siga as instruções na página para preencher os dados.
-        </p>
-        <h2>Contribuições</h2>
-        <p>
-            Contribuições são bem-vindas! Sinta-se à vontade para abrir uma issue ou enviar um pull request.
-        </p>
-    </div>
-</body>
-</html>
-
-
-![Anexo_1](https://github.com/user-attachments/assets/a3825479-4f4b-432d-a01f-a99abb088976)
+<!DOCTYPE html>
+<body>
+    <div class="container">
+        <h1>Máscara de Obtenção de Dados e Preenchimento Automático</h1>
+        <p>
+            Este projeto tem como objetivo automatizar o processo de coleta e preenchimento de dados
+            a partir de uma página interna, facilitando a transferência de informações entre setores.
+        </p>
+        <h2>Descrição do Projeto</h2>
+        <p>
+            Utilizamos os dados de uma página interna para colher informações e inseri-las em um template
+            para transferir ligações entre setores.
+        </p>
+        <p>
+            O processo anteriormente era feito de maneira manual. Para otimizar este fluxo, criei uma máscara
+            em JavaScript, onde é possível copiar e colar os dados da página e preencher os campos necessários.
+        </p>
+        <h2>Como Funciona</h2>
+        <ol>
+            <li>Copie os dados da página interna.</li>
+            <li>Cole os dados na máscara de preenchimento.</li>
+            <li>Clique no botão para preencher os campos automaticamente.</li>
+            <li>Utilize o botão de copiar para gerar um texto com as informações preenchidas.</li>
+        </ol>
+        <h2>Tecnologias Utilizadas</h2>
+        <ul>
+            <li>HTML</li>
+            <li>CSS</li>
+            <li>JavaScript</li>
+        </ul>
+        <h2>Como Usar</h2>
+        <p>
+            1. Clone este repositório.<br>
+            2. Abra o arquivo <code>index.html</code> em seu navegador.<br>
+            3. Siga as instruções na página para preencher os dados.
+        </p>
+        <h2>Contribuições</h2>
+        <p>
+            Contribuições são bem-vindas! Sinta-se à vontade para abrir uma issue ou enviar um pull request.
+        </p>
+    </div>
+</body>
+</html>
+
+
+![Anexo_1](https://github.com/user-attachments/assets/a3825479-4f4b-432d-a01f-a99abb088976)
diff --git a/index.html b/index.html
@@ -9,12 +9,14 @@
 </head>
 <body>
     <div class="container" id="paste__code">
-        <textarea placeholder="Cole os dados do administrar empresa aqui" rows="10" cols="50"></textarea>
+        <textarea id="dados__empresa" placeholder="Cole os dados do administrar empresa aqui" rows="10" cols="50"></textarea>
+        <textarea id="dados__plano" placeholder="Cole os dados da aba plano do administrar empresa aqui" rows="10" cols="50"></textarea>
+        <textarea id="detalhes" placeholder="Informe as observações..." rows="10" cols="50"></textarea>
         <button id="preencher" onclick="preencherDados()">Preencher dados</button>
     </div>
     <div class="container">
-        <h1>Olist ERP</h1> 
-
+        <img id="logo" src="./logo-erp.svg" alt="Logo Olist">
+        <br>
         <label for="plano">Planos:</label>
         <select id="plano" name="plano">
             <option value="Começar">Começar</option>

diff --git a/index.js b/index.js
@@ -1,15 +1,17 @@
 function preencherDados() {
-  const dados = document.querySelector('#paste__code textarea').value;
+  const dadosEmpresa = document.getElementById('dados__empresa').value;
+  const dadosPlano = document.getElementById('dados__plano').value;
+  const dadosDetalhes = document.getElementById('detalhes').value;
 
   // Expressões regulares para extrair os dados
   const telefoneRegex = /Celular\s*\n?\s*(\(\d{2}\)\s*\d{5}-\d{4})/;
   const emailRegex = /E-mail\s*\n?\s*([a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,})/;
   const cnpjRegex = /CNPJ\s*\n?\s*([\d]{2}\.[\d]{3}\.[\d]{3}\/[\d]{4}-[\d]{2})/;
 
   // Extraindo os dados
-  const telefoneMatch = dados.match(telefoneRegex);
-  const emailMatch = dados.match(emailRegex);
-  const cnpjMatch = dados.match(cnpjRegex);
+  const telefoneMatch = dadosEmpresa.match(telefoneRegex);
+  const emailMatch = dadosEmpresa.match(emailRegex);
+  const cnpjMatch = dadosEmpresa.match(cnpjRegex);
 
   // Verifica se encontrou os dados e extrai os valores
   const telefone = telefoneMatch ? telefoneMatch[1] : 'Não encontrado';
@@ -20,6 +22,27 @@ function preencherDados() {
   document.getElementById('telefone').value = telefone;
   document.getElementById('email').value = email;
   document.getElementById('cnpj').value = cnpj;
+
+  // Buscar o plano compatível
+  const plano = buscarPlano(dadosPlano);
+  document.getElementById('plano').value = plano;
+
+  // Exibir o conteúdo de detalhes para uso posterior
+  window.detalhes = dadosDetalhes;
+}
+
+function buscarPlano(dadosPlano) {
+  // Lista de planos possíveis
+  const planos = ["Começar", "Crescer", "Evoluir", "Potencializar"];
+
+  // Verifica se algum plano está presente na textarea de dados do plano
+  for (let plano of planos) {
+    if (dadosPlano.includes(plano)) {
+      return plano; // Retorna o plano encontrado
+    }
+  }
+
+  return "Começar"; // Retorno padrão se nenhum plano for encontrado
 }
 
 // Função para formatar dados e gerar a mensagem
@@ -39,9 +62,9 @@ function formatarTelefone() {
 
   // Verificar se tem 11 dígitos para aplicar o formato de telefone celular
   if (telefone.length === 11) {
-      telefone = telefone.replace(/(\d{2})(\d{5})(\d{4})/, "($1) $2-$3");
+    telefone = telefone.replace(/(\d{2})(\d{5})(\d{4})/, "($1) $2-$3");
   } else {
-      telefone = "NA";
+    telefone = "NA";
   }
 
   // Verificar se tem 14 dígitos, para aplicar o formato CNPJ
@@ -53,14 +76,16 @@ function formatarTelefone() {
 
   // Gerar a mensagem
   let mensagem = `Boa tarde!
-Seller deseja um contato para: 
+
 Transferencia para o time: ${setor}
 Plano: ${plano}
 CNPJ: ${cnpj}
 E-mail: ${email}
 Ticket Origem: ${ticket}
 Ligar no telefone: ${telefone}
 
+Detalhes: ${window.detalhes}
+
 Obrigado, Pessoal!`;
 
   // Exibir a mensagem no textarea
@@ -69,38 +94,26 @@ Obrigado, Pessoal!`;
 
 // Função para copiar o conteúdo da textarea de mensagem
 function copiarMensagem() {
-  // Seleciona o elemento textarea com a mensagem
   let mensagemTexto = document.getElementById("mensagem");
-
-  // Seleciona o texto do textarea
   mensagemTexto.select();
   mensagemTexto.setSelectionRange(0, 99999); // Para dispositivos móveis
-
-  // Copia o texto para a área de transferência
   document.execCommand("copy");
-
-  // Alerta ao usuário que o texto foi copiado
   mostrarAviso("Texto copiado com sucesso!");
 }
 
 function mostrarAviso(mensagem) {
-  // Cria o elemento de aviso
   const aviso = document.createElement("div");
   aviso.className = "aviso";
   aviso.textContent = mensagem;
-
-  // Adiciona o aviso ao body
   document.body.appendChild(aviso);
 
-  // Mostra o aviso com um pequeno atraso
   setTimeout(() => {
-      aviso.classList.add("mostrar");
+    aviso.classList.add("mostrar");
   }, 10);
 
-  // Remove o aviso automaticamente após 2 segundos
   setTimeout(() => {
-      aviso.classList.remove("mostrar");
-      setTimeout(() => aviso.remove(), 300); // Remove o elemento do DOM após a transição
+    aviso.classList.remove("mostrar");
+    setTimeout(() => aviso.remove(), 300);
   }, 2000);
 }
 
@@ -113,5 +126,7 @@ function limparCampos() {
   document.getElementById("plano").value = "Começar";
   document.getElementById("setor").value = "Financeiro";
   document.getElementById("mensagem").value = "";
-
-}
+  document.getElementById("dados__empresa").value = "";
+  document.getElementById("dados__plano").value = "";
+  document.getElementById("detalhes").value = "";
+}
diff --git a/logo-erp.svg b/logo-erp.svg
diff --git a/style__index.css b/style__index.css
@@ -1,29 +1,32 @@
-/* Estilo geral da página */
+
+:root{
+    --principal-color:#37aaf3;
+    --button-color: #0050dc;
+}
+
 body {
-    font-family: Arial, sans-serif;
-    background-color: #f0f8ff; /* Azul claro no fundo */
+    font-family: Soleil, Helvetica Neue, Helvetica, Arial, sans-serif;
+    background-color: #fff; 
     display: flex;
-    justify-content: space-between; /* Espaço entre as divs */
+    justify-content: space-between;
     height: 100vh;
     margin: 0;
+    font-weight: 300;
+    font-variant-numeric: tabular-nums
 }
 
-h1 {
-    color: #338be9;
-}
 
-/* Container com 50% da largura da tela */
 .container {
-    background-color: #ffffff;
-    border-radius: 15px; /* Cantos arredondados */
+    background-color: #fff;
+    border-radius: 15px; 
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
     padding: 20px;
-    width: 50%; /* 50% da largura da tela */
-    box-sizing: border-box; /* Inclui padding e border no cálculo da largura */
+    width: 50%; 
+    box-sizing: border-box;
 }
 
 #paste__code textarea{
-    height: 80vh;
+    height: 25vh;
 }
 
 /* Estilo dos inputs e textarea */
@@ -38,20 +41,20 @@ input[type="text"], textarea {
 
 /* Estilo dos botões */
 button {
-    background-color: #338be9; /* Azul */
+    background-color: var(--button-color); 
     color: white;
     padding: 10px 20px;
     margin-top: 10px;
     border: none;
-    border-radius: 10px; /* Botões arredondados */
+    border-radius: 10px;
     cursor: pointer;
     width: 100%;
     font-size: 16px;
 }
 
 label {
     font-size: 0.8em;
-    color: #338be9;
+    color: var(--principal-color);
 }
 
 #plano,
@@ -61,7 +64,7 @@ label {
     margin: 8px 0;
     border-radius: 10px;
     border: 1px solid #ccc;
-    color: #338be9;
+    color: var(--principal-color);
 }
 
 #copy,
@@ -70,7 +73,7 @@ label {
 }
 
 button:hover {
-    background-color: #0056b3; /* Cor ao passar o mouse */
+    background-color: var(--principal-color); 
 }
 
 /* Estilo para o textarea de mensagem */
@@ -99,4 +102,4 @@ textarea {
 /* Estilo para mostrar o aviso */
 .aviso.mostrar {
     opacity: 1;
-}
+}