O Mundo Materno • Acolhimento & Organização
Início da pesquisa 1 de 5

Você é mãe de primeira viagem? 🤍

O Mundo Materno está criando materiais práticos para ajudar mães de primeira viagem a se sentirem mais preparadas e organizadas durante a gravidez e os primeiros meses do bebê. Quero entender o que mais preocupa você hoje. É rapidinho e leva menos de 2 minutos.

🌸 Suas respostas são 100% confidenciais e feitas para acolher o seu momento real.

Em qual momento você está hoje?

Escolha a opção que mais combina com você.

O que mais está te deixando insegura ou perdida neste momento?

Você pode escolher até 3 opções.

Se nós criássemos um material prático para ajudar você nessa fase, o que gostaria de encontrar nele?

Escolha até 3 opções.

Quer receber um material gratuito? 🤍

Estou preparando um material gratuito com dicas e ferramentas práticas para mães de primeira viagem. Se você quiser receber, deixe seu WhatsApp abaixo.

🤍

Obrigada por participar! 🤍

Suas respostas vão me ajudar a criar materiais realmente úteis para mães de primeira viagem. Clique abaixo para falar comigo pelo WhatsApp e receber o material gratuito quando ele estiver disponível.

FALAR COMIGO NO WHATSAPP

✨ Resposta salva com sucesso no sistema.

SCREEN 3 — PRINCIPAL DIFICULDADE (Max 3, Min 1) ======================================================== */ const screen3Options = document.querySelectorAll('#screen3Options .choice-item'); const checkboxOther = document.getElementById('checkboxOther'); const otherInputBox = document.getElementById('otherInputBox'); const inputOtherText = document.getElementById('inputOtherText'); const limitNoticeScreen3 = document.getElementById('limitNoticeScreen3'); const btnNextScreen3 = document.getElementById('btnNextScreen3'); function validateScreen3() { const checkedCount = surveyState.dificuldades.length; const hasOther = surveyState.dificuldades.includes('✍️ Outro'); let isOtherValid = true; if (hasOther) { isOtherValid = inputOtherText.value.trim().length > 0; } btnNextScreen3.disabled = !(checkedCount >= 1 && checkedCount <= 3 && isOtherValid); } screen3Options.forEach(item => { const chk = item.querySelector('input[type="checkbox"]'); item.addEventListener('click', (e) => { // If clicked input directly, let default run; else toggle if (e.target !== chk) { chk.checked = !chk.checked; } const currentlyChecked = Array.from(document.querySelectorAll('#screen3Options input[type="checkbox"]:checked')); // Prevent > 3 if (chk.checked && currentlyChecked.length > 3) { chk.checked = false; limitNoticeScreen3.classList.add('show'); setTimeout(() => { limitNoticeScreen3.classList.remove('show'); }, 3000); return; } if (chk.checked) { item.classList.add('selected'); } else { item.classList.remove('selected'); } // Handle "Outro" field display if (chk === checkboxOther) { if (chk.checked) { otherInputBox.classList.add('active'); inputOtherText.focus(); } else { otherInputBox.classList.remove('active'); inputOtherText.value = ''; } } // Update surveyState.dificuldades surveyState.dificuldades = Array.from( document.querySelectorAll('#screen3Options input[type="checkbox"]:checked') ).map(c => c.value); validateScreen3(); }); }); inputOtherText.addEventListener('input', () => { surveyState.outraDificuldade = inputOtherText.value.trim(); validateScreen3(); }); btnNextScreen3.addEventListener('click', () => { if (btnNextScreen3.disabled) return; surveyState.currentStep = 4; updateProgress(4); goToScreen('screen4'); }); /* ======================================================== SCREEN 4 — MATERIAL DE INTERESSE (Max 3, Min 1) & Single-Select ======================================================== */ const screen4Options = document.querySelectorAll('#screen4Options .choice-item'); const limitNoticeScreen4 = document.getElementById('limitNoticeScreen4'); const interesseButtons = document.querySelectorAll('#interesseGroup .segmented-btn'); const btnNextScreen4 = document.getElementById('btnNextScreen4'); function validateScreen4() { const matCount = surveyState.materiais.length; const hasInteresse = Boolean(surveyState.interesse); btnNextScreen4.disabled = !(matCount >= 1 && matCount <= 3 && hasInteresse); } screen4Options.forEach(item => { const chk = item.querySelector('input[type="checkbox"]'); item.addEventListener('click', (e) => { if (e.target !== chk) { chk.checked = !chk.checked; } const currentlyChecked = Array.from(document.querySelectorAll('#screen4Options input[type="checkbox"]:checked')); if (chk.checked && currentlyChecked.length > 3) { chk.checked = false; limitNoticeScreen4.classList.add('show'); setTimeout(() => { limitNoticeScreen4.classList.remove('show'); }, 3000); return; } if (chk.checked) { item.classList.add('selected'); } else { item.classList.remove('selected'); } surveyState.materiais = Array.from( document.querySelectorAll('#screen4Options input[type="checkbox"]:checked') ).map(c => c.value); validateScreen4(); }); }); ======= /* ======================================================== SCREEN 2 — MOMENTO ATUAL ======================================================== */ const screen2Radios = document.querySelectorAll('#screen2Options input[type="radio"]'); const btnNextScreen2 = document.getElementById('btnNextScreen2'); screen2Radios.forEach(radio => { radio.addEventListener('change', () => { screen2Radios.forEach(r => { const label = r.closest('.choice-item'); if (label) { if (r.checked) { label.classList.add('selected'); } else { label.classList.remove('selected'); } } }); surveyState.momento = radio.value; btnNextScreen2.disabled = false; }); }); btnNextScreen2.addEventListener('click', () => { if (!surveyState.momento) return; surveyState.currentStep = 3; updateProgress(3); goToScreen('screen3'); }); /* ======================================================== SCREEN 3 — PRINCIPAL DIFICULDADE (Max 3, Min 1) ======================================================== */ const screen3Checkboxes = document.querySelectorAll('#screen3Options input[type="checkbox"]'); const checkboxOther = document.getElementById('checkboxOther'); const otherInputBox = document.getElementById('otherInputBox'); const inputOtherText = document.getElementById('inputOtherText'); const limitNoticeScreen3 = document.getElementById('limitNoticeScreen3'); const btnNextScreen3 = document.getElementById('btnNextScreen3'); let toastTimer3 = null; function validateScreen3() { const checkedInputs = Array.from(document.querySelectorAll('#screen3Options input[type="checkbox"]:checked')); surveyState.dificuldades = checkedInputs.map(c => c.value); const count = surveyState.dificuldades.length; const hasOther = surveyState.dificuldades.includes('✍️ Outro'); let isOtherValid = true; if (hasOther) { isOtherValid = inputOtherText.value.trim().length > 0; } btnNextScreen3.disabled = !(count >= 1 && count <= 3 && isOtherValid); } screen3Checkboxes.forEach(chk => { chk.addEventListener('change', () => { const checkedInputs = Array.from(document.querySelectorAll('#screen3Options input[type="checkbox"]:checked')); // Enforce max 3 selection limit if (checkedInputs.length > 3) { chk.checked = false; if (limitNoticeScreen3) { limitNoticeScreen3.classList.add('show'); if (toastTimer3) clearTimeout(toastTimer3); toastTimer3 = setTimeout(() => { limitNoticeScreen3.classList.remove('show'); }, 3000); } } // Update active CSS styles on all labels screen3Checkboxes.forEach(input => { const parentLabel = input.closest('.choice-item'); if (parentLabel) { if (input.checked) { parentLabel.classList.add('selected'); } else { parentLabel.classList.remove('selected'); } } }); // Show/Hide "Outro" text box if (checkboxOther && checkboxOther.checked) { otherInputBox.classList.add('active'); } else { otherInputBox.classList.remove('active'); inputOtherText.value = ''; surveyState.outraDificuldade = ''; } validateScreen3(); }); }); inputOtherText.addEventListener('input', () => { surveyState.outraDificuldade = inputOtherText.value.trim(); validateScreen3(); }); btnNextScreen3.addEventListener('click', () => { if (btnNextScreen3.disabled) return; surveyState.currentStep = 4; updateProgress(4); goToScreen('screen4'); }); /* ======================================================== SCREEN 4 — MATERIAL DE INTERESSE (Max 3, Min 1) & Single-Select ======================================================== */ const screen4Checkboxes = document.querySelectorAll('#screen4Options input[type="checkbox"]'); const limitNoticeScreen4 = document.getElementById('limitNoticeScreen4'); const interesseButtons = document.querySelectorAll('#interesseGroup .segmented-btn'); const btnNextScreen4 = document.getElementById('btnNextScreen4'); let toastTimer4 = null; function validateScreen4() { const matCount = surveyState.materiais.length; const hasInteresse = Boolean(surveyState.interesse); btnNextScreen4.disabled = !(matCount >= 1 && matCount <= 3 && hasInteresse); } screen4Checkboxes.forEach(chk => { chk.addEventListener('change', () => { const checkedInputs = Array.from(document.querySelectorAll('#screen4Options input[type="checkbox"]:checked')); if (checkedInputs.length > 3) { chk.checked = false; if (limitNoticeScreen4) { limitNoticeScreen4.classList.add('show'); if (toastTimer4) clearTimeout(toastTimer4); toastTimer4 = setTimeout(() => { limitNoticeScreen4.classList.remove('show'); }, 3000); } } screen4Checkboxes.forEach(input => { const parentLabel = input.closest('.choice-item'); if (parentLabel) { if (input.checked) { parentLabel.classList.add('selected'); } else { parentLabel.classList.remove('selected'); } } }); surveyState.materiais = Array.from( document.querySelectorAll('#screen4Options input[type="checkbox"]:checked') ).map(c => c.value); validateScreen4(); }); });======================================================== SCREEN 1 — ABERTURA ======================================================== */ document.getElementById('btnStartSurvey').addEventListener('click', () => { surveyState.currentStep = 2; updateProgress(2); goToScreen('screen2'); }); /* ======================================================== SCREEN 2 — MOMENTO ATUAL ======================================================== */ const screen2Options = document.querySelectorAll('#screen2Options .choice-item'); const btnNextScreen2 = document.getElementById('btnNextScreen2'); screen2Options.forEach(item => { item.addEventListener('click', () => { screen2Options.forEach(opt => opt.classList.remove('selected')); item.classList.add('selected'); const radio = item.querySelector('input[type="radio"]'); radio.checked = true; surveyState.momento = radio.value; btnNextScreen2.disabled = false; }); }); btnNextScreen2.addEventListener('click', () => { if (!surveyState.momento) return; surveyState.currentStep = 3; updateProgress(3); goToScreen('screen3'); }); /* ======================================================== SCREEN 3 — PRINCIPAL DIFICULDADE (Max 3, Min 1) ======================================================== */ const screen3Options = document.querySelectorAll('#screen3Options .choice-item'); const checkboxOther = document.getElementById('checkboxOther'); const otherInputBox = document.getElementById('otherInputBox'); const inputOtherText = document.getElementById('inputOtherText'); const limitNoticeScreen3 = document.getElementById('limitNoticeScreen3'); const btnNextScreen3 = document.getElementById('btnNextScreen3'); function validateScreen3() { const checkedCount = surveyState.dificuldades.length; const hasOther = surveyState.dificuldades.includes('✍️ Outro'); let isOtherValid = true; if (hasOther) { isOtherValid = inputOtherText.value.trim().length > 0; } btnNextScreen3.disabled = !(checkedCount >= 1 && checkedCount <= 3 && isOtherValid); } screen3Options.forEach(item => { const chk = item.querySelector('input[type="checkbox"]'); item.addEventListener('click', (e) => { // If clicked input directly, let default run; else toggle if (e.target !== chk) { chk.checked = !chk.checked; } const currentlyChecked = Array.from(document.querySelectorAll('#screen3Options input[type="checkbox"]:checked')); // Prevent > 3 if (chk.checked && currentlyChecked.length > 3) { chk.checked = false; limitNoticeScreen3.classList.add('show'); setTimeout(() => { limitNoticeScreen3.classList.remove('show'); }, 3000); return; } if (chk.checked) { item.classList.add('selected'); } else { item.classList.remove('selected'); } // Handle "Outro" field display if (chk === checkboxOther) { if (chk.checked) { otherInputBox.classList.add('active'); inputOtherText.focus(); } else { otherInputBox.classList.remove('active'); inputOtherText.value = ''; } } // Update surveyState.dificuldades surveyState.dificuldades = Array.from( document.querySelectorAll('#screen3Options input[type="checkbox"]:checked') ).map(c => c.value); validateScreen3(); }); }); inputOtherText.addEventListener('input', () => { surveyState.outraDificuldade = inputOtherText.value.trim(); validateScreen3(); }); btnNextScreen3.addEventListener('click', () => { if (btnNextScreen3.disabled) return; surveyState.currentStep = 4; updateProgress(4); goToScreen('screen4'); }); /* ======================================================== SCREEN 4 — MATERIAL DE INTERESSE (Max 3, Min 1) & Single-Select ======================================================== */ const screen4Options = document.querySelectorAll('#screen4Options .choice-item'); const limitNoticeScreen4 = document.getElementById('limitNoticeScreen4'); const interesseButtons = document.querySelectorAll('#interesseGroup .segmented-btn'); const btnNextScreen4 = document.getElementById('btnNextScreen4'); function validateScreen4() { const matCount = surveyState.materiais.length; const hasInteresse = Boolean(surveyState.interesse); btnNextScreen4.disabled = !(matCount >= 1 && matCount <= 3 && hasInteresse); } screen4Options.forEach(item => { const chk = item.querySelector('input[type="checkbox"]'); item.addEventListener('click', (e) => { if (e.target !== chk) { chk.checked = !chk.checked; } const currentlyChecked = Array.from(document.querySelectorAll('#screen4Options input[type="checkbox"]:checked')); if (chk.checked && currentlyChecked.length > 3) { chk.checked = false; limitNoticeScreen4.classList.add('show'); setTimeout(() => { limitNoticeScreen4.classList.remove('show'); }, 3000); return; } if (chk.checked) { item.classList.add('selected'); } else { item.classList.remove('selected'); } surveyState.materiais = Array.from( document.querySelectorAll('#screen4Options input[type="checkbox"]:checked') ).map(c => c.value); validateScreen4(); }); }); interesseButtons.forEach(btn => { btn.addEventListener('click', () => { interesseButtons.forEach(b => b.classList.remove('selected')); btn.classList.add('selected'); surveyState.interesse = btn.getAttribute('data-value'); validateScreen4(); }); }); btnNextScreen4.addEventListener('click', () => { if (btnNextScreen4.disabled) return; surveyState.currentStep = 5; updateProgress(5); goToScreen('screen5'); }); /* ======================================================== SCREEN 5 — WHATSAPP E FINALIZAÇÃO ======================================================== */ const inputWhatsapp = document.getElementById('inputWhatsapp'); const whatsappError = document.getElementById('whatsappError'); const btnSubmitSurvey = document.getElementById('btnSubmitSurvey'); // Mask helper for BR phone: (99) 99999-9999 or (99) 9999-9999 inputWhatsapp.addEventListener('input', (e) => { whatsappError.style.display = 'none'; let val = e.target.value.replace(/\D/g, ''); if (val.length > 11) val = val.slice(0, 11); if (val.length > 10) { // 11 digits: (XX) XXXXX-XXXX val = val.replace(/^(\d{2})(\d{5})(\d{4})/, '($1) $2-$3'); } else if (val.length > 6) { // 10 digits in progress: (XX) XXXX-XXXX val = val.replace(/^(\d{2})(\d{4})(\d{0,4})/, '($1) $2-$3'); } else if (val.length > 2) { val = val.replace(/^(\d{2})(\d{0,5})/, '($1) $2'); } else if (val.length > 0) { val = val.replace(/^(\d{0,2})/, '($1'); } e.target.value = val; }); function cleanAndValidatePhone(val) { // Strip everything non-numeric let digits = val.replace(/\D/g, ''); // If user typed country code 55 with 12 or 13 digits, extract national portion if ((digits.length === 12 || digits.length === 13) && digits.startsWith('55')) { digits = digits.slice(2); } if (digits.length === 10 || digits.length === 11) { // Format normalized (XX) XXXXX-XXXX or (XX) XXXX-XXXX if (digits.length === 11) { return { valid: true, formatted: `(${digits.slice(0,2)}) ${digits.slice(2,7)}-${digits.slice(7)}`, raw: digits }; } else { return { valid: true, formatted: `(${digits.slice(0,2)}) ${digits.slice(2,6)}-${digits.slice(6)}`, raw: digits }; } } return { valid: false, formatted: '', raw: '' }; } btnSubmitSurvey.addEventListener('click', () => { const phoneValidation = cleanAndValidatePhone(inputWhatsapp.value); if (!phoneValidation.valid) { whatsappError.style.display = 'block'; inputWhatsapp.focus(); return; } whatsappError.style.display = 'none'; surveyState.whatsapp = phoneValidation.formatted; // Build Record const now = new Date(); const dateStr = now.toLocaleDateString('pt-BR', { day: '2-digit', month: '2-digit', year: 'numeric' }); const timeStr = now.toLocaleTimeString('pt-BR', { hour: '2-digit', minute: '2-digit' }); const record = { id: Date.now().toString(), data: dateStr, hora: timeStr, momento: surveyState.momento, dificuldades: surveyState.dificuldades, outraDificuldade: surveyState.outraDificuldade, materiais: surveyState.materiais, interesse: surveyState.interesse, whatsapp: surveyState.whatsapp }; // Save to localStorage try { const currentList = JSON.parse(localStorage.getItem(STORAGE_KEY) || '[]'); currentList.push(record); localStorage.setItem(STORAGE_KEY, JSON.stringify(currentList)); } catch (err) { console.error('Erro ao salvar no localStorage:', err); } // Prepare WhatsApp message let msg = `Oi! Respondi à pesquisa do O Mundo Materno e quero receber o material gratuito para mães de primeira viagem. 🤍\n\n`; msg += `📋 Minhas respostas:\n`; msg += `• Momento atual: ${surveyState.momento}\n`; msg += `• Principais dificuldades: ${surveyState.dificuldades.join(', ')}\n`; if (surveyState.outraDificuldade && surveyState.outraDificuldade.trim().length > 0) { msg += `• Outra dificuldade: ${surveyState.outraDificuldade}\n`; } msg += `• Materiais de interesse: ${surveyState.materiais.join(', ')}\n`; msg += `• Interesse em receber o material: ${surveyState.interesse}\n`; msg += `• WhatsApp: ${surveyState.whatsapp}`; const waUrl = `https://wa.me/5551981064979?text=${encodeURIComponent(msg)}`; document.getElementById('btnWhatsAppDirect').setAttribute('href', waUrl); // Transition to Thank-you Screen surveyState.currentStep = 6; updateProgress(6); goToScreen('screenThanks'); }); /* ======================================================== ADMIN PANEL & CSV EXPORT ======================================================== */ const btnOpenAdmin = document.getElementById('btnOpenAdmin'); const btnCloseAdmin = document.getElementById('btnCloseAdmin'); const adminModal = document.getElementById('adminModal'); const adminTableBody = document.getElementById('adminTableBody'); const adminCountBadge = document.getElementById('adminCountBadge'); const btnExportCsv = document.getElementById('btnExportCsv'); const btnClearData = document.getElementById('btnClearData'); function renderAdminTable() { const list = JSON.parse(localStorage.getItem(STORAGE_KEY) || '[]'); adminCountBadge.textContent = `${list.length} resposta${list.length === 1 ? '' : 's'}`; adminTableBody.innerHTML = ''; if (list.length === 0) { adminTableBody.innerHTML = ` Nenhuma resposta registrada ainda. `; return; } // Sort descending by ID / timestamp const sorted = [...list].reverse(); sorted.forEach(item => { const tr = document.createElement('tr'); const difs = Array.isArray(item.dificuldades) ? item.dificuldades.join(', ') : (item.dificuldades || '-'); const mats = Array.isArray(item.materiais) ? item.materiais.join(', ') : (item.materiais || '-'); tr.innerHTML = ` ${item.id ? item.id.slice(-6) : '-'} ${item.data || '-'} ${item.hora || '-'} ${escapeHtml(item.momento || '')} ${escapeHtml(difs)} ${escapeHtml(item.outraDificuldade || '-')} ${escapeHtml(mats)} ${escapeHtml(item.interesse || '-')} ${escapeHtml(item.whatsapp || '-')} `; adminTableBody.appendChild(tr); }); } function escapeHtml(str) { if (!str) return ''; return String(str) .replace(/&/g, '&') .replace(//g, '>') .replace(/"/g, '"') .replace(/'/g, '''); } btnOpenAdmin.addEventListener('click', (e) => { e.preventDefault(); renderAdminTable(); adminModal.classList.add('active'); }); btnCloseAdmin.addEventListener('click', () => { adminModal.classList.remove('active'); }); adminModal.addEventListener('click', (e) => { if (e.target === adminModal) { adminModal.classList.remove('active'); } }); // Export CSV with UTF-8 BOM and ';' delimiter for seamless Excel pt-BR import btnExportCsv.addEventListener('click', () => { const list = JSON.parse(localStorage.getItem(STORAGE_KEY) || '[]'); if (list.length === 0) { alert('Não há respostas para exportar.'); return; } const headers = [ 'ID da resposta', 'Data', 'Hora', 'Momento atual', 'Principais dificuldades', 'Outra dificuldade', 'Materiais de interesse', 'Interesse em receber o material', 'WhatsApp' ]; function escapeCsvCell(cell) { if (cell === null || cell === undefined) return '""'; const str = String(cell).replace(/"/g, '""'); return `"${str}"`; } const rows = list.map(item => [ item.id || '', item.data || '', item.hora || '', item.momento || '', Array.isArray(item.dificuldades) ? item.dificuldades.join(' | ') : (item.dificuldades || ''), item.outraDificuldade || '', Array.isArray(item.materiais) ? item.materiais.join(' | ') : (item.materiais || ''), item.interesse || '', item.whatsapp || '' ]); let csvContent = '\uFEFF'; // BOM csvContent += headers.map(escapeCsvCell).join(';') + '\r\n'; rows.forEach(r => { csvContent += r.map(escapeCsvCell).join(';') + '\r\n'; }); const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' }); const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = 'respostas_omundomaterno.csv'; document.body.appendChild(a); a.click(); document.body.removeChild(a); URL.revokeObjectURL(url); }); // Clear data with confirm btnClearData.addEventListener('click', () => { const count = JSON.parse(localStorage.getItem(STORAGE_KEY) || '[]').length; if (count === 0) { alert('A lista já está vazia.'); return; } if (confirm(`Tem certeza que deseja apagar todas as ${count} respostas salvas? Esta ação não pode ser desfeita.`)) { localStorage.setItem(STORAGE_KEY, JSON.stringify([])); renderAdminTable(); } }); }); ======= ======================================================== SCREEN 3 — PRINCIPAL DIFICULDADE (Max 3, Min 1) ======================================================== */ const screen3Options = document.querySelectorAll('#screen3Options .choice-item'); const checkboxOther = document.getElementById('checkboxOther'); const otherInputBox = document.getElementById('otherInputBox'); const inputOtherText = document.getElementById('inputOtherText'); const limitNoticeScreen3 = document.getElementById('limitNoticeScreen3'); const btnNextScreen3 = document.getElementById('btnNextScreen3'); function validateScreen3() { const checkedCount = surveyState.dificuldades.length; const hasOther = surveyState.dificuldades.includes('✍️ Outro'); let isOtherValid = true; if (hasOther) { isOtherValid = inputOtherText.value.trim().length > 0; } btnNextScreen3.disabled = !(checkedCount >= 1 && checkedCount <= 3 && isOtherValid); } screen3Options.forEach(item => { const chk = item.querySelector('input[type="checkbox"]'); item.addEventListener('click', (e) => { // If clicked input directly, let default run; else toggle if (e.target !== chk) { chk.checked = !chk.checked; } const currentlyChecked = Array.from(document.querySelectorAll('#screen3Options input[type="checkbox"]:checked')); // Prevent > 3 if (chk.checked && currentlyChecked.length > 3) { chk.checked = false; limitNoticeScreen3.classList.add('show'); setTimeout(() => { limitNoticeScreen3.classList.remove('show'); }, 3000); return; } if (chk.checked) { item.classList.add('selected'); } else { item.classList.remove('selected'); } // Handle "Outro" field display if (chk === checkboxOther) { if (chk.checked) { otherInputBox.classList.add('active'); inputOtherText.focus(); } else { otherInputBox.classList.remove('active'); inputOtherText.value = ''; } } // Update surveyState.dificuldades surveyState.dificuldades = Array.from( document.querySelectorAll('#screen3Options input[type="checkbox"]:checked') ).map(c => c.value); validateScreen3(); }); }); inputOtherText.addEventListener('input', () => { surveyState.outraDificuldade = inputOtherText.value.trim(); validateScreen3(); }); btnNextScreen3.addEventListener('click', () => { if (btnNextScreen3.disabled) return; surveyState.currentStep = 4; updateProgress(4); goToScreen('screen4'); }); /* ======================================================== SCREEN 4 — MATERIAL DE INTERESSE (Max 3, Min 1) & Single-Select ======================================================== */ const screen4Options = document.querySelectorAll('#screen4Options .choice-item'); const limitNoticeScreen4 = document.getElementById('limitNoticeScreen4'); const interesseButtons = document.querySelectorAll('#interesseGroup .segmented-btn'); const btnNextScreen4 = document.getElementById('btnNextScreen4'); function validateScreen4() { const matCount = surveyState.materiais.length; const hasInteresse = Boolean(surveyState.interesse); btnNextScreen4.disabled = !(matCount >= 1 && matCount <= 3 && hasInteresse); } screen4Options.forEach(item => { const chk = item.querySelector('input[type="checkbox"]'); item.addEventListener('click', (e) => { if (e.target !== chk) { chk.checked = !chk.checked; } const currentlyChecked = Array.from(document.querySelectorAll('#screen4Options input[type="checkbox"]:checked')); if (chk.checked && currentlyChecked.length > 3) { chk.checked = false; limitNoticeScreen4.classList.add('show'); setTimeout(() => { limitNoticeScreen4.classList.remove('show'); }, 3000); return; } if (chk.checked) { item.classList.add('selected'); } else { item.classList.remove('selected'); } surveyState.materiais = Array.from( document.querySelectorAll('#screen4Options input[type="checkbox"]:checked') ).map(c => c.value); validateScreen4(); }); }); ======= /* ======================================================== SCREEN 2 — MOMENTO ATUAL ======================================================== */ const screen2Radios = document.querySelectorAll('#screen2Options input[type="radio"]'); const btnNextScreen2 = document.getElementById('btnNextScreen2'); screen2Radios.forEach(radio => { radio.addEventListener('change', () => { screen2Radios.forEach(r => { const label = r.closest('.choice-item'); if (label) { if (r.checked) { label.classList.add('selected'); } else { label.classList.remove('selected'); } } }); surveyState.momento = radio.value; btnNextScreen2.disabled = false; }); }); btnNextScreen2.addEventListener('click', () => { if (!surveyState.momento) return; surveyState.currentStep = 3; updateProgress(3); goToScreen('screen3'); }); /* ======================================================== SCREEN 3 — PRINCIPAL DIFICULDADE (Max 3, Min 1) ======================================================== */ const screen3Checkboxes = document.querySelectorAll('#screen3Options input[type="checkbox"]'); const checkboxOther = document.getElementById('checkboxOther'); const otherInputBox = document.getElementById('otherInputBox'); const inputOtherText = document.getElementById('inputOtherText'); const limitNoticeScreen3 = document.getElementById('limitNoticeScreen3'); const btnNextScreen3 = document.getElementById('btnNextScreen3'); let toastTimer3 = null; function validateScreen3() { const checkedInputs = Array.from(document.querySelectorAll('#screen3Options input[type="checkbox"]:checked')); surveyState.dificuldades = checkedInputs.map(c => c.value); const count = surveyState.dificuldades.length; const hasOther = surveyState.dificuldades.includes('✍️ Outro'); let isOtherValid = true; if (hasOther) { isOtherValid = inputOtherText.value.trim().length > 0; } btnNextScreen3.disabled = !(count >= 1 && count <= 3 && isOtherValid); } screen3Checkboxes.forEach(chk => { chk.addEventListener('change', () => { const checkedInputs = Array.from(document.querySelectorAll('#screen3Options input[type="checkbox"]:checked')); // Enforce max 3 selection limit if (checkedInputs.length > 3) { chk.checked = false; if (limitNoticeScreen3) { limitNoticeScreen3.classList.add('show'); if (toastTimer3) clearTimeout(toastTimer3); toastTimer3 = setTimeout(() => { limitNoticeScreen3.classList.remove('show'); }, 3000); } } // Update active CSS styles on all labels screen3Checkboxes.forEach(input => { const parentLabel = input.closest('.choice-item'); if (parentLabel) { if (input.checked) { parentLabel.classList.add('selected'); } else { parentLabel.classList.remove('selected'); } } }); // Show/Hide "Outro" text box if (checkboxOther && checkboxOther.checked) { otherInputBox.classList.add('active'); } else { otherInputBox.classList.remove('active'); inputOtherText.value = ''; surveyState.outraDificuldade = ''; } validateScreen3(); }); }); inputOtherText.addEventListener('input', () => { surveyState.outraDificuldade = inputOtherText.value.trim(); validateScreen3(); }); btnNextScreen3.addEventListener('click', () => { if (btnNextScreen3.disabled) return; surveyState.currentStep = 4; updateProgress(4); goToScreen('screen4'); }); /* ======================================================== SCREEN 4 — MATERIAL DE INTERESSE (Max 3, Min 1) & Single-Select ======================================================== */ const screen4Checkboxes = document.querySelectorAll('#screen4Options input[type="checkbox"]'); const limitNoticeScreen4 = document.getElementById('limitNoticeScreen4'); const interesseButtons = document.querySelectorAll('#interesseGroup .segmented-btn'); const btnNextScreen4 = document.getElementById('btnNextScreen4'); let toastTimer4 = null; function validateScreen4() { const matCount = surveyState.materiais.length; const hasInteresse = Boolean(surveyState.interesse); btnNextScreen4.disabled = !(matCount >= 1 && matCount <= 3 && hasInteresse); } screen4Checkboxes.forEach(chk => { chk.addEventListener('change', () => { const checkedInputs = Array.from(document.querySelectorAll('#screen4Options input[type="checkbox"]:checked')); if (checkedInputs.length > 3) { chk.checked = false; if (limitNoticeScreen4) { limitNoticeScreen4.classList.add('show'); if (toastTimer4) clearTimeout(toastTimer4); toastTimer4 = setTimeout(() => { limitNoticeScreen4.classList.remove('show'); }, 3000); } } screen4Checkboxes.forEach(input => { const parentLabel = input.closest('.choice-item'); if (parentLabel) { if (input.checked) { parentLabel.classList.add('selected'); } else { parentLabel.classList.remove('selected'); } } }); surveyState.materiais = Array.from( document.querySelectorAll('#screen4Options input[type="checkbox"]:checked') ).map(c => c.value); validateScreen4(); }); });======================================================== SCREEN 1 — ABERTURA ======================================================== */ document.getElementById('btnStartSurvey').addEventListener('click', () => { surveyState.currentStep = 2; updateProgress(2); goToScreen('screen2'); }); /* ======================================================== SCREEN 2 — MOMENTO ATUAL ======================================================== */ const screen2Options = document.querySelectorAll('#screen2Options .choice-item'); const btnNextScreen2 = document.getElementById('btnNextScreen2'); screen2Options.forEach(item => { item.addEventListener('click', () => { screen2Options.forEach(opt => opt.classList.remove('selected')); item.classList.add('selected'); const radio = item.querySelector('input[type="radio"]'); radio.checked = true; surveyState.momento = radio.value; btnNextScreen2.disabled = false; }); }); btnNextScreen2.addEventListener('click', () => { if (!surveyState.momento) return; surveyState.currentStep = 3; updateProgress(3); goToScreen('screen3'); }); /* ======================================================== SCREEN 3 — PRINCIPAL DIFICULDADE (Max 3, Min 1) ======================================================== */ const screen3Options = document.querySelectorAll('#screen3Options .choice-item'); const checkboxOther = document.getElementById('checkboxOther'); const otherInputBox = document.getElementById('otherInputBox'); const inputOtherText = document.getElementById('inputOtherText'); const limitNoticeScreen3 = document.getElementById('limitNoticeScreen3'); const btnNextScreen3 = document.getElementById('btnNextScreen3'); function validateScreen3() { const checkedCount = surveyState.dificuldades.length; const hasOther = surveyState.dificuldades.includes('✍️ Outro'); let isOtherValid = true; if (hasOther) { isOtherValid = inputOtherText.value.trim().length > 0; } btnNextScreen3.disabled = !(checkedCount >= 1 && checkedCount <= 3 && isOtherValid); } screen3Options.forEach(item => { const chk = item.querySelector('input[type="checkbox"]'); item.addEventListener('click', (e) => { // If clicked input directly, let default run; else toggle if (e.target !== chk) { chk.checked = !chk.checked; } const currentlyChecked = Array.from(document.querySelectorAll('#screen3Options input[type="checkbox"]:checked')); // Prevent > 3 if (chk.checked && currentlyChecked.length > 3) { chk.checked = false; limitNoticeScreen3.classList.add('show'); setTimeout(() => { limitNoticeScreen3.classList.remove('show'); }, 3000); return; } if (chk.checked) { item.classList.add('selected'); } else { item.classList.remove('selected'); } // Handle "Outro" field display if (chk === checkboxOther) { if (chk.checked) { otherInputBox.classList.add('active'); inputOtherText.focus(); } else { otherInputBox.classList.remove('active'); inputOtherText.value = ''; } } // Update surveyState.dificuldades surveyState.dificuldades = Array.from( document.querySelectorAll('#screen3Options input[type="checkbox"]:checked') ).map(c => c.value); validateScreen3(); }); }); inputOtherText.addEventListener('input', () => { surveyState.outraDificuldade = inputOtherText.value.trim(); validateScreen3(); }); btnNextScreen3.addEventListener('click', () => { if (btnNextScreen3.disabled) return; surveyState.currentStep = 4; updateProgress(4); goToScreen('screen4'); }); /* ======================================================== SCREEN 4 — MATERIAL DE INTERESSE (Max 3, Min 1) & Single-Select ======================================================== */ const screen4Options = document.querySelectorAll('#screen4Options .choice-item'); const limitNoticeScreen4 = document.getElementById('limitNoticeScreen4'); const interesseButtons = document.querySelectorAll('#interesseGroup .segmented-btn'); const btnNextScreen4 = document.getElementById('btnNextScreen4'); function validateScreen4() { const matCount = surveyState.materiais.length; const hasInteresse = Boolean(surveyState.interesse); btnNextScreen4.disabled = !(matCount >= 1 && matCount <= 3 && hasInteresse); } screen4Options.forEach(item => { const chk = item.querySelector('input[type="checkbox"]'); item.addEventListener('click', (e) => { if (e.target !== chk) { chk.checked = !chk.checked; } const currentlyChecked = Array.from(document.querySelectorAll('#screen4Options input[type="checkbox"]:checked')); if (chk.checked && currentlyChecked.length > 3) { chk.checked = false; limitNoticeScreen4.classList.add('show'); setTimeout(() => { limitNoticeScreen4.classList.remove('show'); }, 3000); return; } if (chk.checked) { item.classList.add('selected'); } else { item.classList.remove('selected'); } surveyState.materiais = Array.from( document.querySelectorAll('#screen4Options input[type="checkbox"]:checked') ).map(c => c.value); validateScreen4(); }); }); interesseButtons.forEach(btn => { btn.addEventListener('click', () => { interesseButtons.forEach(b => b.classList.remove('selected')); btn.classList.add('selected'); surveyState.interesse = btn.getAttribute('data-value'); validateScreen4(); }); }); btnNextScreen4.addEventListener('click', () => { if (btnNextScreen4.disabled) return; surveyState.currentStep = 5; updateProgress(5); goToScreen('screen5'); }); /* ======================================================== SCREEN 5 — WHATSAPP E FINALIZAÇÃO ======================================================== */ const inputWhatsapp = document.getElementById('inputWhatsapp'); const whatsappError = document.getElementById('whatsappError'); const btnSubmitSurvey = document.getElementById('btnSubmitSurvey'); // Mask helper for BR phone: (99) 99999-9999 or (99) 9999-9999 inputWhatsapp.addEventListener('input', (e) => { whatsappError.style.display = 'none'; let val = e.target.value.replace(/\D/g, ''); if (val.length > 11) val = val.slice(0, 11); if (val.length > 10) { // 11 digits: (XX) XXXXX-XXXX val = val.replace(/^(\d{2})(\d{5})(\d{4})/, '($1) $2-$3'); } else if (val.length > 6) { // 10 digits in progress: (XX) XXXX-XXXX val = val.replace(/^(\d{2})(\d{4})(\d{0,4})/, '($1) $2-$3'); } else if (val.length > 2) { val = val.replace(/^(\d{2})(\d{0,5})/, '($1) $2'); } else if (val.length > 0) { val = val.replace(/^(\d{0,2})/, '($1'); } e.target.value = val; }); function cleanAndValidatePhone(val) { // Strip everything non-numeric let digits = val.replace(/\D/g, ''); // If user typed country code 55 with 12 or 13 digits, extract national portion if ((digits.length === 12 || digits.length === 13) && digits.startsWith('55')) { digits = digits.slice(2); } if (digits.length === 10 || digits.length === 11) { // Format normalized (XX) XXXXX-XXXX or (XX) XXXX-XXXX if (digits.length === 11) { return { valid: true, formatted: `(${digits.slice(0,2)}) ${digits.slice(2,7)}-${digits.slice(7)}`, raw: digits }; } else { return { valid: true, formatted: `(${digits.slice(0,2)}) ${digits.slice(2,6)}-${digits.slice(6)}`, raw: digits }; } } return { valid: false, formatted: '', raw: '' }; } btnSubmitSurvey.addEventListener('click', () => { const phoneValidation = cleanAndValidatePhone(inputWhatsapp.value); if (!phoneValidation.valid) { whatsappError.style.display = 'block'; inputWhatsapp.focus(); return; } whatsappError.style.display = 'none'; surveyState.whatsapp = phoneValidation.formatted; // Build Record const now = new Date(); const dateStr = now.toLocaleDateString('pt-BR', { day: '2-digit', month: '2-digit', year: 'numeric' }); const timeStr = now.toLocaleTimeString('pt-BR', { hour: '2-digit', minute: '2-digit' }); const record = { id: Date.now().toString(), data: dateStr, hora: timeStr, momento: surveyState.momento, dificuldades: surveyState.dificuldades, outraDificuldade: surveyState.outraDificuldade, materiais: surveyState.materiais, interesse: surveyState.interesse, whatsapp: surveyState.whatsapp }; // Save to localStorage try { const currentList = JSON.parse(localStorage.getItem(STORAGE_KEY) || '[]'); currentList.push(record); localStorage.setItem(STORAGE_KEY, JSON.stringify(currentList)); } catch (err) { console.error('Erro ao salvar no localStorage:', err); } // Prepare WhatsApp message let msg = `Oi! Respondi à pesquisa do O Mundo Materno e quero receber o material gratuito para mães de primeira viagem. 🤍\n\n`; msg += `📋 Minhas respostas:\n`; msg += `• Momento atual: ${surveyState.momento}\n`; msg += `• Principais dificuldades: ${surveyState.dificuldades.join(', ')}\n`; if (surveyState.outraDificuldade && surveyState.outraDificuldade.trim().length > 0) { msg += `• Outra dificuldade: ${surveyState.outraDificuldade}\n`; } msg += `• Materiais de interesse: ${surveyState.materiais.join(', ')}\n`; msg += `• Interesse em receber o material: ${surveyState.interesse}\n`; msg += `• WhatsApp: ${surveyState.whatsapp}`; const waUrl = `https://wa.me/5551981064979?text=${encodeURIComponent(msg)}`; document.getElementById('btnWhatsAppDirect').setAttribute('href', waUrl); // Transition to Thank-you Screen surveyState.currentStep = 6; updateProgress(6); goToScreen('screenThanks'); }); /* ======================================================== ADMIN PANEL & CSV EXPORT ======================================================== */ const btnOpenAdmin = document.getElementById('btnOpenAdmin'); const btnCloseAdmin = document.getElementById('btnCloseAdmin'); const adminModal = document.getElementById('adminModal'); const adminTableBody = document.getElementById('adminTableBody'); const adminCountBadge = document.getElementById('adminCountBadge'); const btnExportCsv = document.getElementById('btnExportCsv'); const btnClearData = document.getElementById('btnClearData'); function renderAdminTable() { const list = JSON.parse(localStorage.getItem(STORAGE_KEY) || '[]'); adminCountBadge.textContent = `${list.length} resposta${list.length === 1 ? '' : 's'}`; adminTableBody.innerHTML = ''; if (list.length === 0) { adminTableBody.innerHTML = ` Nenhuma resposta registrada ainda. `; return; } // Sort descending by ID / timestamp const sorted = [...list].reverse(); sorted.forEach(item => { const tr = document.createElement('tr'); const difs = Array.isArray(item.dificuldades) ? item.dificuldades.join(', ') : (item.dificuldades || '-'); const mats = Array.isArray(item.materiais) ? item.materiais.join(', ') : (item.materiais || '-'); tr.innerHTML = ` ${item.id ? item.id.slice(-6) : '-'} ${item.data || '-'} ${item.hora || '-'} ${escapeHtml(item.momento || '')} ${escapeHtml(difs)} ${escapeHtml(item.outraDificuldade || '-')} ${escapeHtml(mats)} ${escapeHtml(item.interesse || '-')} ${escapeHtml(item.whatsapp || '-')} `; adminTableBody.appendChild(tr); }); } function escapeHtml(str) { if (!str) return ''; return String(str) .replace(/&/g, '&') .replace(//g, '>') .replace(/"/g, '"') .replace(/'/g, '''); } btnOpenAdmin.addEventListener('click', (e) => { e.preventDefault(); renderAdminTable(); adminModal.classList.add('active'); }); btnCloseAdmin.addEventListener('click', () => { adminModal.classList.remove('active'); }); adminModal.addEventListener('click', (e) => { if (e.target === adminModal) { adminModal.classList.remove('active'); } }); // Export CSV with UTF-8 BOM and ';' delimiter for seamless Excel pt-BR import btnExportCsv.addEventListener('click', () => { const list = JSON.parse(localStorage.getItem(STORAGE_KEY) || '[]'); if (list.length === 0) { alert('Não há respostas para exportar.'); return; } const headers = [ 'ID da resposta', 'Data', 'Hora', 'Momento atual', 'Principais dificuldades', 'Outra dificuldade', 'Materiais de interesse', 'Interesse em receber o material', 'WhatsApp' ]; function escapeCsvCell(cell) { if (cell === null || cell === undefined) return '""'; const str = String(cell).replace(/"/g, '""'); return `"${str}"`; } const rows = list.map(item => [ item.id || '', item.data || '', item.hora || '', item.momento || '', Array.isArray(item.dificuldades) ? item.dificuldades.join(' | ') : (item.dificuldades || ''), item.outraDificuldade || '', Array.isArray(item.materiais) ? item.materiais.join(' | ') : (item.materiais || ''), item.interesse || '', item.whatsapp || '' ]); let csvContent = '\uFEFF'; // BOM csvContent += headers.map(escapeCsvCell).join(';') + '\r\n'; rows.forEach(r => { csvContent += r.map(escapeCsvCell).join(';') + '\r\n'; }); const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' }); const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = 'respostas_omundomaterno.csv'; document.body.appendChild(a); a.click(); document.body.removeChild(a); URL.revokeObjectURL(url); }); // Clear data with confirm btnClearData.addEventListener('click', () => { const count = JSON.parse(localStorage.getItem(STORAGE_KEY) || '[]').length; if (count === 0) { alert('A lista já está vazia.'); return; } if (confirm(`Tem certeza que deseja apagar todas as ${count} respostas salvas? Esta ação não pode ser desfeita.`)) { localStorage.setItem(STORAGE_KEY, JSON.stringify([])); renderAdminTable(); } }); });