.svg-container-elementor { position: relative; width: 100%; max-width: 600px; margin: auto; } /* Define a animação de pulsar a opacidade */ @keyframes pulse-opacity { 0% { opacity: 1; } 50% { opacity: 0.6; /* O quão "fraco" o pulso fica no meio da animação */ } 100% { opacity: 1; } } /* Classe que aplica a animação de pulso ao SVG ativo */ .svg-active { animation: pulse-opacity 2s infinite ease-in-out; /* Aplica a animação */ } .central-text-elementor { position: absolute; top: 50.1%; left: 50%; transform: translate(-50%, -325%); text-align: center; pointer-events: none; max-width: 80%; z-index: 10; } .central-text-elementor h2 { margin: 0; font-size: 16px; } .central-text-elementor p { font-size: 12px; line-height: 1.2rem; } @media (max-width: 1366px) { .svg-container-elementor { max-width: 400px; } .central-text-elementor { transform: translate(-50%, -220%); } .central-text-elementor h2 { font-size: 12px; } .central-text-elementor p { font-size: 11px; } } @media (max-width: 1024px) { .svg-container-elementor { max-width: 290px; } .central-text-elementor { transform: translate(-50%, -240%); } .central-text-elementor h2 { font-size: 10px; line-height: 16px; } .central-text-elementor p { font-size: 10px; line-height: 12px; } } document.addEventListener("DOMContentLoaded", function () { const infoBox = document.querySelector(".central-text-elementor"); const svgContainer = document.querySelector(".svg-container-elementor"); const infoContent = { Comportamento: { title: "Comportamento Positivo", text: "Adotar uma atitude ativa diante do tratamento faz toda a diferença. Pequenas mudanças consistentes geram grandes resultados.", }, Medicamento: { title: "Medicamento", text: "Tome os medicamentos conforme orientação médica. O uso correto é essencial para controlar a glicemia e evitar complicações.", }, Alimentacao: { title: "Alimentação saudável", text: "Comer bem é parte do tratamento. Escolhas equilibradas ajudam a manter a glicose estável e a melhorar seu bem-estar.", }, Ser_ativo: { title: "Ser Ativo", text: "A prática regular de atividade física contribui para o controle glicêmico, melhora o humor e fortalece a saúde como um todo.", }, Monitoramento: { title: "Monitoramento", text: "Acompanhe sua glicemia com frequência, permitindo, assim, o ajuste do tratamento e a prevenção de crises de hipo ou hiperglicemia.", }, Foco_da_resolucao: { title: "Resolução de problemas", text: "Dificuldades fazem parte do processo. Saber lidar com imprevistos é essencial para manter o controle com segurança.", }, Reducao: { title: "Redução de riscos", text: "Evite fatores que possam causar complicações, como maus hábitos, automedicação ou descuido com a saúde emocional.", }, }; const keys = Object.keys(infoContent); let currentIndex = 0; let autoCycleInterval; // Função para remover a classe ativa de todos os elementos const removeAllActiveClasses = () => { keys.forEach((cls) => { const el = document.querySelector(`.${cls}`); if (el) { el.classList.remove("svg-active"); } }); }; // Função que realiza a troca de conteúdo e aplica o estilo const cycleContent = () => { removeAllActiveClasses(); // Remove a classe de qualquer elemento anterior const currentKey = keys[currentIndex]; const currentElement = document.querySelector(`.${currentKey}`); if (currentElement) { // Adiciona a classe para escalar o SVG currentElement.classList.add("svg-active"); // Atualiza o texto central infoBox.innerHTML = `

${infoContent[currentKey].title}

${infoContent[currentKey].text}

`; } // Prepara o próximo índice currentIndex = (currentIndex + 1) % keys.length; }; // Função para iniciar o ciclo automático const startAutoCycle = () => { // Para garantir que não haja múltiplos intervalos rodando clearInterval(autoCycleInterval); // Executa a primeira vez imediatamente cycleContent(); // Define o intervalo para as próximas execuções (a cada 3 segundos) autoCycleInterval = setInterval(cycleContent, 3000); }; // Configuração dos eventos de mouse keys.forEach((cls) => { const el = document.querySelector(`.${cls}`); if (el) { // Importante: adicione a classe 'svg-item' para a transição funcionar el.classList.add("svg-item"); el.style.cursor = "pointer"; el.addEventListener("mouseenter", () => { clearInterval(autoCycleInterval); // Para o ciclo automático removeAllActiveClasses(); el.classList.add("svg-active"); // Adiciona escala no hover infoBox.innerHTML = `

${infoContent[cls].title}

${infoContent[cls].text}

`; }); } }); // Quando o mouse sai da área do SVG, o ciclo recomeça svgContainer.addEventListener("mouseleave", () => { removeAllActiveClasses(); infoBox.innerHTML = ""; // Limpa a caixa de texto startAutoCycle(); // Reinicia o ciclo }); // Inicia o ciclo automático quando a página carrega startAutoCycle(); });