- Aviso de processando envio de msg

- Ajuste de ícone de whatsapp piscando notificação - ícone whatsapp desaparece quando clica no formulário
karlamagueta · Oct 15, 2024 · 3d010d5 · 3d010d5
1 parent 5410be1
commit 3d010d5
Show file tree

Hide file tree

Showing 6 changed files with 177 additions and 72 deletions.
diff --git a/app/static/css/main/aniversarios.css b/app/static/css/main/aniversarios.css
@@ -122,11 +122,40 @@
 }
 
 /* hidden by default */
-.btn--form .sucesso-span {
+#sucesso {
   display: none;
   color: green;
+  background-color: rgb(205, 251, 216);
+  font-weight: bold;
+  padding: 12px 24px;
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+  margin: 0 20px;
+  border-radius: 10px;
+  height: auto;
+  font-size: 20px;
+  justify-content: center;
+  align-items: center;
+}
+
+.processando--span {
+  color: #ff9100;
+  font-weight: bold;
+  padding: 12px 24px;
+  background-color: white;
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+  margin: 0 20px;
+  font-size: 20px;
+  border-radius: 10px;
+  justify-content: center;
+  align-items: center;
 }
 
+.btn--form span {
+  justify-content: center;
+  align-items: center;
+}
+
+
 @media (max-width:855px) {
   .grid--aniversarios {
     grid-template-columns: 1fr;

diff --git a/app/static/css/main/contacto.css b/app/static/css/main/contacto.css
@@ -53,6 +53,39 @@
     font-size: 16px;
   }
 
+#sucesso_contacto {
+    display: none;
+    color: green;
+    background-color: rgb(205, 251, 216);
+    font-weight: bold;
+    padding: 12px 24px;
+    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+    margin: 0 20px;
+    border-radius: 10px;
+    height: auto;
+    font-size: 20px;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .processando--span {
+    color: #ff9100;
+    font-weight: bold;
+    padding: 12px 24px;
+    background-color: white;
+    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+    margin: 0 20px;
+    font-size: 20px;
+    border-radius: 10px;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .btn--form span {
+    justify-content: center;
+    align-items: center;
+  }
+
 @media (max-width:800px) {
     #contacto p {
         font-size: 16px;

diff --git a/app/static/css/utilidades/utilidades.css b/app/static/css/utilidades/utilidades.css
@@ -1,5 +1,3 @@
-/* Utilidades */
-
 @font-face {
   font-family: "autumn";
   src: local("Autumn in November"),
@@ -77,7 +75,6 @@ a {
   font-display: swap;
 }
 
-
 .junge {
   font-family: "Junge", cursive;
   font-weight: 400;
@@ -153,7 +150,8 @@ a {
   justify-content: center;
   width: 60px;
   height: 60px;
-
+  opacity: 1;
+  transition: opacity 0.3s;
 }
 
 .whatsapp-fixo img {
@@ -165,11 +163,12 @@ a {
   border-radius: 100% 100% 100% 8px;
 }
 
-.whatsapp-fixo::after {
+/* Exibir o ::after apenas quando tiver a classe 'with-notification' */
+.whatsapp-fixo.with-notification::after {
   content: "1";
   position: absolute;
-  top: 2px;
-  right: 8px;
+  top: -5px; /* Ajusta a posição da notificação */
+  right: -5px;
   width: 20px;
   height: 20px;
   background-color: red;
@@ -181,6 +180,12 @@ a {
   justify-content: center;
   align-items: center;
   animation: blink 0.8s infinite;
+  z-index: 1000; /* Garante que a notificação fique acima do ícone */
+}
+
+/* Esconder o ::after permanentemente após o clique */
+.whatsapp-fixo.clicked::after {
+  display: none;
 }
 
 @keyframes blink {
@@ -192,12 +197,11 @@ a {
   }
 }
 
-
-.whatsapp-fixo.clicked::after {
-  display: none;
+/* Esconder o ícone ao clicar em inputs */
+.whatsapp-fixo.hidden {
+  opacity: 0; /* O ícone fica invisível */
 }
 
-
 @media (max-width: 1300px) {
   .container-1200 {
     margin: 0 20px;
@@ -244,4 +248,4 @@ a {
   .header-bg {
     padding-bottom: 12px;
   }
-}
+}
diff --git a/app/static/js/script.js b/app/static/js/script.js
@@ -7,36 +7,62 @@ document.addEventListener("DOMContentLoaded", function () {
   });
 });
 
-//form
+ // Whatsapp Icon 
+ const whatsappIcon = document.querySelector('.whatsapp-fixo');
+const inputs = document.querySelectorAll('input, textarea'); // Seleciona inputs e textareas
+
+// Adicionar classe 'with-notification' para exibir a notificação
+whatsappIcon.classList.add('with-notification');
+
+// Esconde o ícone quando o usuário clica em qualquer input ou textarea
+inputs.forEach(input => {
+  input.addEventListener('focus', () => {
+    whatsappIcon.classList.add('hidden'); // Esconde o ícone
+  });
+
+  input.addEventListener('blur', () => {
+    whatsappIcon.classList.remove('hidden'); // Mostra o ícone novamente
+  });
+});
+
+// Adiciona evento de clique no ícone do WhatsApp
+whatsappIcon.addEventListener('click', () => {
+  whatsappIcon.classList.remove('with-notification'); // Remove a notificação
+  whatsappIcon.classList.add('clicked'); // Adiciona a classe 'clicked' para remover o ::after permanentemente
+});
 
+//form
 
 async function enviarFormulario(suffix = "") {
   console.log("Iniciando envio do formulário");
+
+  // Seleção dos elementos
   const nome = document.getElementById(`nome${suffix}`).value;
   const email = document.getElementById(`email${suffix}`).value;
   const telemovel = document.getElementById(`telemovel${suffix}`).value;
   const mensagem = document.getElementById(`mensagem${suffix}`).value;
+  const submitBtn = document.querySelector(`.btn`); // Seleciona o botão de envio
+  const processando = document.getElementById(`processando${suffix}`); // Indicador de "Enviando..."
+  const sucesso = document.getElementById(`sucesso${suffix}`); // Mensagem de sucesso
 
+  // Verificação de campos obrigatórios
   if (!nome || !email || !telemovel || !mensagem) {
     alert("Todos os campos são obrigatórios!");
     throw new Error("Required fields are missing");
   }
 
+  // Desativar o botão "Enviar" e mostrar "Enviando..."
+  submitBtn.disabled = true;
+  processando.style.display = 'inline';
+  sucesso.style.display = 'none'; // Esconde mensagem de sucesso anterior
+
+  // FormData para envio
   const formData = new FormData();
   formData.append("nome", nome);
   formData.append("email", email);
   formData.append("telemovel", telemovel);
   formData.append("mensagem", mensagem);
 
-  const data = document.getElementById(`data${suffix}`);
-  if (data) {
-    formData.append("data", data.value);
-  }
-
-  formData.forEach((value, key) => {
-    console.log(`${key}: ${value}`);
-  });
-
   try {
     const response = await fetch("/enviar-email/", {
       method: "POST",
@@ -52,19 +78,23 @@ async function enviarFormulario(suffix = "") {
     const result = await response.json();
     console.log("Resultado da API:", result);
 
-    // clean all inputs on success
+    // Limpar todos os campos após o envio com sucesso
     const inputs = document.querySelectorAll(`.emailform${suffix} input, .emailform${suffix} textarea`);
     inputs.forEach(input => {
       input.value = '';
     });
 
-    const sucesso = document.getElementById(`sucesso${suffix}`);
-    sucesso.style.display = "inline";
-    sucesso.innerText = result.message;
+    // Exibir a mensagem de sucesso
+    sucesso.innerText = result.message || 'Mensagem enviada com sucesso!';
+    sucesso.style.display = 'inline';
 
   } catch (error) {
     console.error("Erro ao enviar o formulário:", error);
     alert(`Erro ao enviar o formulário: ${error.message}`);
+  } finally {
+    // Reativar o botão "Enviar" e esconder "Enviando..." após o processo
+    submitBtn.disabled = false;
+    processando.style.display = 'none';
   }
 }
 

diff --git a/app/templates/base.html b/app/templates/base.html
@@ -3,14 +3,14 @@
 
 <head>
     <!-- Google tag (gtag.js) -->
-<script async src="https://www.googletagmanager.com/gtag/js?id=G-PZHRZWGQCF"></script>
-<script>
-  window.dataLayer = window.dataLayer || [];
-  function gtag(){dataLayer.push(arguments);}
-  gtag('js', new Date());
-
-  gtag('config', 'G-PZHRZWGQCF');
-</script>
+    <script async src="https://www.googletagmanager.com/gtag/js?id=G-PZHRZWGQCF"></script>
+    <script>
+        window.dataLayer = window.dataLayer || [];
+        function gtag() { dataLayer.push(arguments); }
+        gtag('js', new Date());
+
+        gtag('config', 'G-PZHRZWGQCF');
+    </script>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name="description" content="Conheça o Park Encantado, parque infantil para crianças de 2 a 12 anos com piscina de bolinhas, trampolim, escorregadores e muito mais. O local perfeito para diversão em Viana do Castelo!">
@@ -19,8 +19,8 @@
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link rel="apple-touch-icon" sizes="180x180" href="static/img/apple-touch-icon.png">
-<link rel="icon" type="image/png" sizes="32x32" href="static/img/favicon-32x32.png">
-<link rel="icon" type="image/png" sizes="16x16" href="static/img/favicon-16x16.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="static/img/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="static/img/favicon-16x16.png">
     <link href="https://fonts.googleapis.com/css2?family=Fredericka+the+Great&display=swap" rel="stylesheet">
     <style>
         @import url('https://fonts.googleapis.com/css2?family=Beth+Ellen&family=Junge&display=swap');
@@ -32,21 +32,21 @@
     <header>
         <div class="header-bg">
             <div class="header">
-            {% block header %}
-            <a href="./" id="logo-img"><img src="static/img/logo.svg" alt="Park Encantado"></a>
-            <nav aria-label="primaria">
-                <ul class="header-menu">
-                    <li><a href="{{url_for('index')}}#espaco">O espaço</a></li>
-                    <li><a href="{{url_for('index')}}#aniversarios">Aniversários</a></li>
-                    <li><a href="{{url_for('index')}}#endereco">Localização</a></li>
-                    <li><a href="{{url_for('index')}}#contacto">Contacto</a></li>
-                </ul>
-                <a href="{{url_for('index')}}#aniversarios" aria-label="Botão de envio para solicitação de Informações sobre Aniversários" class="btn">Reserve</a>
-                <div class="hamburger" id="hamburger-menu">
-                    &#9776;
-                </div>
-            </nav>
-            {% endblock %}
+                {% block header %}
+                <a href="./" id="logo-img"><img src="static/img/logo.svg" alt="Park Encantado"></a>
+                <nav aria-label="primaria">
+                    <ul class="header-menu">
+                        <li><a href="{{url_for('index')}}#espaco">O espaço</a></li>
+                        <li><a href="{{url_for('index')}}#aniversarios">Aniversários</a></li>
+                        <li><a href="{{url_for('index')}}#endereco">Localização</a></li>
+                        <li><a href="{{url_for('index')}}#contacto">Contacto</a></li>
+                    </ul>
+                    <a href="{{url_for('index')}}#aniversarios" aria-label="Botão de envio para solicitação de Informações sobre Aniversários" class="btn">Reserve</a>
+                    <div class="hamburger" id="hamburger-menu">
+                        &#9776;
+                    </div>
+                </nav>
+                {% endblock %}
             </div>
         </div>
     </header>
@@ -55,7 +55,7 @@
     {% block main %}{% endblock %}
 
     {% block contacto %}
-    
+
     {% endblock %}
 
     <!--<section id="regulamento" class="container-1200">
@@ -121,20 +121,25 @@ <h1 class="titulo">regulamento</h1>
     %}
 
     <script>
-        document.addEventListener('DOMContentLoaded', () => {
-  const inputs = document.querySelectorAll('input, textarea');
-  const whatsappIcon = document.getElementById('whatsapp-icon');
-
-  inputs.forEach(input => {
-      input.addEventListener('focus', () => {
-          whatsappIcon.style.display = 'none';
-      });
-      input.addEventListener('blur', () => {
-          whatsappIcon.style.display = 'block';
-      });
-  });
-});
+        const whatsappIcon = document.querySelector('.whatsapp-fixo');
+        const inputs = document.querySelectorAll('input');
+
+        // Adiciona evento de foco nos inputs
+        inputs.forEach(input => {
+            input.addEventListener('focus', () => {
+                whatsappIcon.classList.add('hidden'); // Esconde o ícone
+            });
+
+            input.addEventListener('blur', () => {
+                whatsappIcon.classList.remove('hidden'); // Mostra o ícone novamente
+            });
+        });
+
+        // Adiciona evento de clique no ícone do WhatsApp
+        whatsappIcon.addEventListener('click', () => {
+            whatsappIcon.classList.toggle('clicked'); // Alterna a classe 'clicked'
+        });
     </script>
 </body>
 
-</html>
+</html>