Add files via upload

Incluído novos campos de dados, alteração no Style da página, incluídas novas opções e novo formato de alert.
EnsieBruno · Oct 26, 2024 · a552609 · a552609
1 parent af6f3fa
commit a552609
Show file tree

Hide file tree

Showing 3 changed files with 128 additions and 24 deletions.
diff --git a/index.css b/index.css
@@ -19,7 +19,7 @@ h1 {
     border-radius: 15px; /* Cantos arredondados */
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
     padding: 20px;
-    max-width: 400px;
+    max-width:400px ;
     width: 100%;
     text-align: center;
 }
@@ -47,12 +47,49 @@ button {
     font-size: 16px;
 }
 
+#plano,
+#setor{
+    width: 37%;
+    padding: 5px;
+    margin: 8px 0;
+    border-radius: 10px;
+    border: 1px solid #ccc;
+}
+
+#copy,
+#clear{
+    max-width: fit-content;
+}
+
 button:hover {
     background-color: #0056b3; /* Cor ao passar o mouse */
 }
 
+
 /* Estilo para o textarea de mensagem */
 textarea {
-    resize: none; /* Remover a opção de redimensionar */
     height: 150px;
-}
+}
+
+/* Estilo para o aviso temporário */
+.aviso {
+    position: fixed;
+    bottom: 20px;
+    left: 50%;
+    transform: translateX(-50%);
+    background-color: #4caf50;
+    color: #fff;
+    padding: 10px 20px;
+    border-radius: 5px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+    font-size: 16px;
+    font-family: Arial, sans-serif;
+    z-index: 1000;
+    opacity: 0;
+    transition: opacity 0.3s ease;
+}
+
+/* Estilo para mostrar o aviso */
+.aviso.mostrar {
+    opacity: 1;
+}
diff --git a/index.html b/index.html
@@ -9,21 +9,46 @@
 </head>
 <body>
     <div class="container">
-        <h1>Retenção</h1>
 
-        <label for="telefone">Telefone:</label>
-        <input type="text" id="telefone" name="telefone">
+        <h1>Agilizador</h1> 
 
-        <button onclick="formatarTelefone()">Formatar</button><br><br>
+        <label for="plano">Planos:</label>
+        <select id="plano" name="plano">
+            <option value="Começar">Começar</option>
+            <option value="Crescer">Crescer</option>
+            <option value="Evoluir">Evoluir</option>
+            <option value="Potencializar">Potencializar</option>
+        </select>
 
-        <label for="mensagem">Mensagem:</label>
+        <label for="setor">Time</label>
+        <select id="setor" name="setor">
+            <option value="Financeiro">Financeiro</option>
+            <option value="Comercial">Comercial</option>
+            <option value="Suporte">Suporte</option>
+            <option value="KA">KA</option>
+        </select>
+
+        <label for="telefone"></label>
+        <input type="text" placeholder="Telefone: (XX) X XXXX - XXXX" id="telefone" name="telefone">
+        <label for="CNPJ"></label>
+        <input type="text" placeholder="CNPJ: XX.XXX.XXX/000X-XX " id="cnpj" name="cnpj">
+        <label for="email"></label>
+        <input type="text" placeholder="Email: [email protected] " id="email" name="email">
+        <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>
         <textarea id="mensagem" name="mensagem" rows="10" cols="50"></textarea>
 
         <!-- Botão para copiar o conteúdo -->
-        <button onclick="copiarMensagem()">Copiar mensagem</button>
+        <button id="copy" onclick="copiarMensagem()">Copiar</button>
 
         <!-- Botão para limpar o conteúdo -->
-        <button onclick="limparCampos()">Limpar campos</button>
+        <button id="clear" onclick="limparCampos()">Limpar</button>
     </div>
 </body>
 </html>
diff --git a/index.js b/index.js
@@ -1,29 +1,44 @@
 // Função para formatar telefone e gerar a mensagem
 function formatarTelefone() {
   let telefone = document.getElementById("telefone").value;
+  let cnpj = document.getElementById("cnpj").value;
+  let email = document.getElementById("email").value;
+  let ticket = document.getElementById("ticket").value;
+  let plano = document.getElementById("plano").value;
+  let setor = document.getElementById("setor").value;
 
   // Remover caracteres não numéricos
   telefone = telefone.replace(/\D/g, "");
+  cnpj = cnpj.replace(/\D/g, "");
+  email = email.trim();
+  ticket = ticket.trim();
 
-  // Verificar se tem 11 dígitos para aplicar o formato
+  // 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");
   } else {
-      telefone = "Número inválido";
+      telefone = "NA";
+  }
+
+  // Verificar se tem 14 dígitos, para aplicar o formato CNPJ
+  if (cnpj.length === 14) {
+    cnpj = cnpj.replace(/^(\d{2})(\d{3})(\d{3})(\d{4})(\d{2})$/, "$1.$2.$3/$4-$5");
+  } else {
+    cnpj = "NA";
   }
 
   // Gerar a mensagem
   let mensagem = `
-  Boa tarde!
-
-  Me chamo Bruno, do time de Atenção da Olist. Gostaria de marcar uma ligação para conversarmos sobre o Olist ERP. Poderia nos enviar um telefone e horário de preferência para realizarmos o contato?
-
-  Tentamos ligar no telefone: ${telefone}, porém sem sucesso. Pode verificar se o telefone não tem bloqueios para números que não estão em sua agenda?
-
-  Ficamos à disposição!
+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}
 
-  Atenciosamente,
-  Equipe Suporte Olist Tiny!
+Obrigado, Pessoal!
   `;
 
   // Exibir a mensagem no textarea
@@ -43,11 +58,38 @@ function copiarMensagem() {
   document.execCommand("copy");
 
   // Alerta ao usuário que o texto foi copiado
-  alert("Mensagem copiada para a área de transferência!");
+  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");
+  }, 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
+  }, 2000);
 }
 
 // Função para limpar os campos de telefone e mensagem
 function limparCampos() {
-  document.getElementById("telefone").value = ""; // Limpa o telefone
-  document.getElementById("mensagem").value = ""; // Limpa a mensagem
+  document.getElementById("telefone").value = ""
+  document.getElementById("cnpj").value = "";
+  document.getElementById("email").value = "";
+  document.getElementById("ticket").value = "";
+  document.getElementById("plano").value = "Começar";
+  document.getElementById("setor").value = "Financeiro";
+  document.getElementById("mensagem").value = "";
+
 }