Add files via upload

Incluído box de analise de dados, para preenchimento automático da mascara, redimensionamento!
EnsieBruno · Oct 26, 2024 · 9a91a37 · 9a91a37
1 parent 177d745
commit 9a91a37
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 24 deletions.
diff --git a/index.css b/index.css
@@ -3,25 +3,27 @@ body {
     font-family: Arial, sans-serif;
     background-color: #f0f8ff; /* Azul claro no fundo */
     display: flex;
-    justify-content: center;
-    align-items: center;
+    justify-content: space-between; /* Espaço entre as divs */
     height: 100vh;
     margin: 0;
 }
 
 h1 {
-    color: #338be9
+    color: #338be9;
 }
 
-/* Container centralizado */
+/* Container com 50% da largura da tela */
 .container {
     background-color: #ffffff;
     border-radius: 15px; /* Cantos arredondados */
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
     padding: 20px;
-    max-width:400px ;
-    width: 100%;
-    text-align: center;
+    width: 50%; /* 50% da largura da tela */
+    box-sizing: border-box; /* Inclui padding e border no cálculo da largura */
+}
+
+#paste__code textarea{
+    height: 80vh;
 }
 
 /* Estilo dos inputs e textarea */
@@ -47,33 +49,33 @@ button {
     font-size: 16px;
 }
 
-label{
-    color: #338be9
+label {
+    font-size: 0.8em;
+    color: #338be9;
 }
 
 #plano,
-#setor{
+#setor {
     width: 37%;
     padding: 5px;
     margin: 8px 0;
     border-radius: 10px;
     border: 1px solid #ccc;
-    color: #338be9
+    color: #338be9;
 }
 
 #copy,
-#clear{
+#clear {
     max-width: fit-content;
 }
 
 button:hover {
     background-color: #0056b3; /* Cor ao passar o mouse */
 }
 
-
 /* Estilo para o textarea de mensagem */
 textarea {
-    height: 100px;
+    height: 65px;
 }
 
 /* Estilo para o aviso temporário */

diff --git a/index.html b/index.html
@@ -3,13 +3,16 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Formatar Telefone</title>
+    <title>Olist Transfer</title>
     <link rel="stylesheet" href="index.css">
     <script src="index.js" defer></script> 
 </head>
 <body>
+    <div class="container" id="paste__code">
+        <textarea placeholder="Cole os dados do administrador da empresa aqui" rows="10" cols="50"></textarea>
+        <button id="preencher" onclick="preencherDados()">Preencher dados</button>
+    </div>
     <div class="container">
-
         <h1>Olist ERP</h1> 
 
         <label for="plano">Planos:</label>
@@ -20,7 +23,7 @@ <h1>Olist ERP</h1>
             <option value="Potencializar">Potencializar</option>
         </select>
 
-        <label for="setor">Time</label>
+        <label for="setor">Time:</label>
         <select id="setor" name="setor">
             <option value="Financeiro">Financeiro</option>
             <option value="Comercial">Comercial</option>
@@ -37,8 +40,6 @@ <h1>Olist ERP</h1>
         <label for="ticket"></label>
         <input type="text" placeholder="Ticket: www.olist.com/ticket " id="ticket" name="ticket">
 
-
-
         <button onclick="formatarTelefone()">Gerar</button>
 
         <label for="mensagem"></label>

diff --git a/index.js b/index.js
@@ -1,4 +1,28 @@
-// Função para formatar telefone e gerar a mensagem
+function preencherDados() {
+  const dados = document.querySelector('#paste__code textarea').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);
+
+  // Verifica se encontrou os dados e extrai os valores
+  const telefone = telefoneMatch ? telefoneMatch[1] : 'Não encontrado';
+  const email = emailMatch ? emailMatch[1] : 'Não encontrado';
+  const cnpj = cnpjMatch ? cnpjMatch[1] : 'Não encontrado';
+
+  // Preencher os campos com os dados extraídos
+  document.getElementById('telefone').value = telefone;
+  document.getElementById('email').value = email;
+  document.getElementById('cnpj').value = cnpj;
+}
+
+// Função para formatar dados e gerar a mensagem
 function formatarTelefone() {
   let telefone = document.getElementById("telefone").value;
   let cnpj = document.getElementById("cnpj").value;
@@ -28,8 +52,7 @@ function formatarTelefone() {
   }
 
   // Gerar a mensagem
-  let mensagem = `
-Boa tarde!
+  let mensagem = `Boa tarde!
 Seller deseja um contato para: 
 Transferencia para o time: ${setor}
 Plano: ${plano}
@@ -38,8 +61,7 @@ E-mail: ${email}
 Ticket Origem: ${ticket}
 Ligar no telefone: ${telefone}
 
-Obrigado, Pessoal!
-  `;
+Obrigado, Pessoal!`;
 
   // Exibir a mensagem no textarea
   document.getElementById("mensagem").value = mensagem;