Formul\u00e1rio de Extens\u00e3o<\/title>\n <link rel=\"stylesheet\" href=\"https:\/\/unpkg.com\/leaflet\/dist\/leaflet.css\" \/>\n <link rel=\"stylesheet\" href=\"https:\/\/unpkg.com\/leaflet-control-geocoder\/dist\/Control.Geocoder.css\" \/>\n <style>\n \/* Estilos b\u00e1sicos para o formul\u00e1rio *\/\n #form-extensao {\n max-width: 600px;\n margin: 20px auto;\n padding: 20px;\n border: 1px solid #ccc;\n border-radius: 10px;\n background-color: #f9f9f9;\n font-family: Arial, sans-serif;\n }\n\n #form-extensao p {\n margin: -5px 0 0 0;\n }\n\n \/* Estilos para os r\u00f3tulos *\/\n #form-extensao label {\n display: block;\n margin-bottom: 8px;\n font-weight: bold;\n color: #00753b;\n margin-top: 15px;\n }\n\n \/* Estilos para os campos de entrada *\/\n #form-extensao input[type=\"text\"],\n #form-extensao input[type=\"number\"],\n #form-extensao input[type=\"date\"],\n #form-extensao select,\n #form-extensao textarea {\n width: 100%;\n padding: 10px;\n border: 1px solid #ccc;\n border-radius: 5px;\n font-size: 14px;\n background-color: #fff;\n color: #333;\n }\n\n #form-extensao input[type=\"date\"] {\n width: auto;\n }\n\n \/* Estilos espec\u00edficos para textarea *\/\n #form-extensao textarea {\n resize: vertical;\n min-height: 100px;\n }\n\n \/* Estilos para o bot\u00e3o *\/\n #form-extensao button[type=\"submit\"] {\n width: 100%;\n padding: 12px;\n background-color: #00753b;\n color: white;\n border: none;\n border-radius: 5px;\n font-size: 16px;\n cursor: pointer;\n transition: background-color 0.3s ease;\n margin-top: 25px;\n }\n\n #form-extensao button[type=\"submit\"]:hover {\n background-color: #005c2f;\n }\n\n \/* Estilos para os inputs de r\u00e1dio *\/\n #form-extensao input[type=\"radio\"] {\n margin-right: 10px;\n }\n\n \/* Alinhamento do campo Modalidade *\/\n #modalidade-section {\n margin-bottom: 20px;\n }\n\n \/* Estilos para o mapa *\/\n #map {\n height: 300px;\n width: 100%;\n border: 1px solid #ccc;\n }\n\n #limpar-imagens {\n display: block;\n margin-top: 10px;\n padding: 8px;\n background-color: #ff0000;\n color: white;\n border: none;\n border-radius: 5px;\n font-size: 12px;\n cursor: pointer;\n transition: background-color 0.3s ease;\n }\n #limpar-imagens:hover {\n background-color: #cc0000;\n }\n\n #imagens{\n font-size: 12px;\n }\n .removeBtn {\n position: absolute;\n top: 0;\n right: 0;\n background: #ff0000;\n color: white;\n border: none;\n border-radius: 50%;\n cursor: pointer;\n padding: 1px 6px;\n font-size: 12px;\n }\n\n \/* Responsividade para telas menores *\/\n @media (max-width: 768px) {\n #form-extensao {\n padding: 15px;\n }\n\n #form-extensao button[type=\"submit\"] {\n font-size: 14px;\n }\n }\n\n @media (min-width: 992px) {\n .pagina ul,\n .noticia ul,\n .pagina ol,\n .noticia ol {\n padding: 0;\n }\n }\n .erro {\n color: red;\n font-size: 0.9em;\n }\n\n <\/style>\n<\/head>\n\n<body>\n <script src=\"https:\/\/unpkg.com\/leaflet\/dist\/leaflet.js\"><\/script>\n <script src=\"https:\/\/unpkg.com\/leaflet-control-geocoder\/dist\/Control.Geocoder.js\"><\/script>\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/dayjs@1\/dayjs.min.js\"><\/script>\n\n <script>\n let map;\n let markers = [];\n let locations = [];\n\n let arquivosSelecionados = []; \/\/ Vari\u00e1vel global para armazenar os arquivos\n\n \/\/ Fun\u00e7\u00e3o para obter os arquivos selecionados\n function getArquivosSelecionados() {\n return arquivosSelecionados;\n }\n\n \/\/ Fun\u00e7\u00e3o para atualizar os arquivos selecionados\n function setArquivosSelecionados(novosArquivos) {\n arquivosSelecionados = novosArquivos;\n }\n\n \/\/ Fun\u00e7\u00f5es de inicializa\u00e7\u00e3o\n document.addEventListener('DOMContentLoaded', function () {\n \/\/ Inicializa a fun\u00e7\u00e3o para o PAS-PEPE\n pasPepe();\n \/\/ Inicializa a fun\u00e7\u00e3o para formatar o telefone\n telefoneFormat();\n \/\/ Inicializa a fun\u00e7\u00e3o para formatar a descri\u00e7\u00e3o\n descricaoFormat();\n \/\/ Inicializa a fun\u00e7\u00e3o para submeter o formul\u00e1rio\n submeterFormulario();\n \/\/ Inicializa o mapa\n initMap();\n\n imagensPreview();\n });\n\n function pasPepe(){\n \/\/ Mostra ou esconde as op\u00e7\u00f5es de modalidade para PAS-PEPE\n var tipoExtensao = document.getElementById('tipo-extensao');\n var modalidadeSection = document.getElementById('modalidade-section');\n var modalidadeInputs = document.getElementsByName('modalidade');\n\n tipoExtensao.addEventListener('change', function () {\n if (tipoExtensao.value === 'PAS-PEPE') {\n modalidadeSection.style.display = 'block';\n } else {\n modalidadeSection.style.display = 'none';\n modalidadeInputs.forEach(input => input.checked = false);\n }\n });\n }\n\n function telefoneFormat(){\n \/\/ Formata o telefone no padr\u00e3o (XX) XXXXX-XXXX\n const telefoneInput = document.getElementById('telefone');\n\n telefoneInput.addEventListener('input', function (event) {\n let input = telefoneInput.value;\n\n \/\/ Remove tudo que n\u00e3o seja n\u00famero\n input = input.replace(\/\\D\/g, '');\n\n \/\/ Aplica a m\u00e1scara (XX) XXXXX-XXXX\n if (input.length <= 10) {\n \/\/ Formato para 10 d\u00edgitos (fixo antigo) - (XX) XXXX-XXXX\n input = input.replace(\/(\\d{2})(\\d{4})(\\d{0,4})\/, '($1) $2-$3');\n } else {\n \/\/ Formato para 11 d\u00edgitos (celular) - (XX) XXXXX-XXXX\n input = input.replace(\/(\\d{2})(\\d{5})(\\d{0,4})\/, '($1) $2-$3');\n }\n\n \/\/ Atualiza o valor do input\n telefoneInput.value = input;\n });\n }\n\n function descricaoFormat(){\n \/\/ Contador de caracteres para a descri\u00e7\u00e3o\n document.addEventListener('input', function (event) {\n const descricaoInput = document.getElementById('descricao');\n const contador = document.getElementById('contador');\n const maxLength = descricaoInput.maxLength;\n const currentLength = descricaoInput.value.length;\n const remaining = maxLength - currentLength;\n\n contador.textContent = `(${remaining} restantes)`;\n });\n }\n\n function submeterFormulario() {\n \/\/ Fun\u00e7\u00e3o para submeter o formul\u00e1rio\n const form = document.getElementById('form-extensao');\n\n form.addEventListener('submit', async function (event) {\n event.preventDefault();\n\n \/\/ Limpa mensagens de erro anteriores\n document.querySelectorAll('.erro').forEach(el => el.textContent = '');\n\n let hasError = false;\n\n \/\/ Verifica o t\u00edtulo\n const titulo = document.getElementById('titulo').value.trim();\n if (titulo.toLowerCase() === 't\u00edtulo') {\n document.getElementById('titulo-erro').textContent = 'O t\u00edtulo n\u00e3o pode ser \"T\u00edtulo\". Por favor, insira um t\u00edtulo v\u00e1lido.';\n hasError = true;\n }\n\n \/\/ Verifica se o telefone foi preenchido corretamente\n const telefone = document.getElementById('telefone').value;\n if (telefone.length < 13) {\n document.getElementById('telefone-erro').textContent = 'Por favor, preencha o campo de telefone corretamente.';\n hasError = true;\n }\n\n \/\/ verifica e formata as datas\n const dataInicio = document.getElementById('data_inicio').value;\n const dataFim = document.getElementById('data_fim').value;\n\n const dataInicioObj = dayjs(dataInicio);\n const dataFimObj = dayjs(dataFim);\n\n if (dataFimObj.isBefore(dataInicioObj)) {\n document.getElementById('data_fim-erro').textContent = 'A data de fim deve ser posterior \u00e0 data de in\u00edcio.';\n hasError = true;\n }\n\n let periodo = '';\n if (!dataFim) {\n periodo = `De ${dataInicioObj.format('DD\/MM\/YYYY')} at\u00e9 o momento atual`;\n } else if (dataInicioObj.isSame(dataFimObj)) {\n periodo = dataInicioObj.format('DD\/MM\/YYYY');\n } else {\n periodo = `${dataInicioObj.format('DD\/MM\/YYYY')} a ${dataFimObj.format('DD\/MM\/YYYY')}`;\n }\n\n \/\/ Verifica que os campos num\u00e9ricos t\u00eam valores positivos\n const publico = document.getElementById('publico').value;\n const estudantesGraduacao = document.getElementById('estudantes-graduacao').value;\n const estudantesPosGraduacao = document.getElementById('estudantes-posgraduacao').value;\n\n if (publico <= 0) {\n document.getElementById('publico-erro').textContent = 'Por favor, insira um valor positivo.';\n hasError = true;\n }\n if (estudantesGraduacao < 0) {\n document.getElementById('estudantes-graduacao-erro').textContent = 'Por favor, insira um valor positivo.';\n hasError = true;\n }\n if (estudantesPosGraduacao < 0) {\n document.getElementById('estudantes-posgraduacao-erro').textContent = 'Por favor, insira um valor positivo.';\n hasError = true;\n }\n\n \/\/ Verifica se \"PAS-PEPE\" foi selecionado sem escolher uma modalidade\n const tipoExtensao = document.getElementById('tipo-extensao').value;\n const modalidadeInputs = document.getElementsByName('modalidade');\n const modalidadeSelecionada = Array.from(modalidadeInputs).some(input => input.checked);\n\n if (tipoExtensao === 'PAS-PEPE' && !modalidadeSelecionada) {\n document.getElementById('modalidade-erro').textContent = 'Por favor, escolha uma das op\u00e7\u00f5es de modalidade.';\n hasError = true;\n }\n\n \/\/ verifica se tem alguma localiza\u00e7\u00e3o selecionada\n if (locations.length === 0) {\n document.getElementById('map-erro').textContent = 'Por favor, selecione uma localiza\u00e7\u00e3o no mapa.';\n hasError = true;\n }\n\n if (hasError) {\n alert('Por favor, corrija os erros no formul\u00e1rio antes de submeter.');\n return;\n }\n\n \/\/ Adiciona as imagens ao FormData\n const imagensFiles = getArquivosSelecionados();\n \n const imagensBase64 = await Promise.all(\n Array.from(imagensFiles).map(file => converterParaBase64(file).then(base64 => ({\n mimeType: file.type,\n base64,\n })))\n );\n\n \/\/ console.log(\"numero de imagens: \" + imagensFiles.length);\n\n \/\/ cria uma linha para cada latitude e longitude\n locations.forEach((location) => {\n const formData = new FormData(form);\n formData.append(`latitude`, location.latitude);\n formData.append(`longitude`, location.longitude);\n formData.append(`periodo`, periodo);\n \n \/\/ verifica se tem imagem\n if (getArquivosSelecionados().length > 0 && locations.indexOf(location) === 0)\n formData.append('IMG', JSON.stringify(imagensBase64));\n\n \/\/log dos dados\n \/*\n for (var pair of formData.entries()) {\n console.log(pair[0]+ ', ' + pair[1]); \n }\n console.log(formData);\n *\/\n\n \/\/ envia os dados\n enviarDados(formData); \n });\n\n alert('Formul\u00e1rio enviado com sucesso, obrigado por contribuir!');\n });\n }\n\n \/\/ Converte arquivo para Base64\n function converterParaBase64(file) {\n return new Promise((resolve, reject) => {\n const reader = new FileReader();\n reader.onload = () => resolve(reader.result.split(',')[1]);\n reader.onerror = error => reject(error);\n reader.readAsDataURL(file);\n });\n }\n\n \/\/ Fun\u00e7\u00e3o que envia dados para o Google Sheets via Google Apps Script\n function enviarDados(formData) {\n const url = 'https:\/\/script.google.com\/macros\/s\/AKfycbz-vPtgys9tj4xx3SdN-xv-6irfQw4tHhcTcxp42DzmbG6sCOSx-oVkPwdlXr-TTlli\/exec';\n\n const formBody = new URLSearchParams();\n formData.forEach((value, key) => {\n formBody.append(key, value);\n });\n\n fetch(url, {\n method: 'POST',\n headers: {\n 'Content-Type': 'application\/x-www-form-urlencoded',\n },\n body: formBody.toString(),\n })\n .then(response => response.text())\n .then(result => {\n console.log('Sucesso:', result);\n })\n .catch(error => {\n console.error('Erro:', error);\n });\n }\n\n function initMap() {\n map = L.map('map').setView([-23.2927, -51.1732], 12); \/\/ Londrina\n \n L.tileLayer('https:\/\/{s}.tile.openstreetmap.org\/{z}\/{x}\/{y}.png', {\n maxZoom: 19\n }).addTo(map);\n\n \/\/ Adiciona a funcionalidade de pesquisa\n L.Control.geocoder({\n defaultMarkGeocode: false\n }).on('markgeocode', function (e) {\n const latlng = e.geocode.center;\n let latitude = latlng.lat;\n let longitude = latlng.lng;\n selecionarLocalizacao(latitude, longitude, map);\n }).addTo(map);\n\n \/\/ Adiciona um listener para capturar o clique no mapa e adicionar o marcador\n map.on('click', (event) => {\n let latitude = event.latlng.lat;\n let longitude = event.latlng.lng;\n selecionarLocalizacao(latitude, longitude, map);\n });\n }\n\n function selecionarLocalizacao(latitude, longitude, map) {\n \/\/ Ajusta as latitudes e longitudes para 8 casas decimais\n latitude = latitude.toFixed(8);\n longitude = longitude.toFixed(8);\n\n map.setView([latitude, longitude], 14);\n\n \/\/ Adiciona um marcador no mapa\n const marker = L.marker([latitude, longitude]).addTo(map)\n .bindPopup(`\n <div style=\"text-align: center; gap: 5px; display: grid;\">\n <p>Localiza\u00e7\u00e3o selecionada<\/p>\n <button onclick=\"cancelarLocalizacao(event, ${latitude}, ${longitude}, this)\">Remover<\/button>\n <\/div>\n `)\n .openPopup();\n\n markers.push(marker);\n locations.push({ latitude, longitude });\n }\n\n \/\/ Fun\u00e7\u00e3o para cancelar a localiza\u00e7\u00e3o\n function cancelarLocalizacao(event, latitude, longitude, button) {\n \/\/ Impede o comportamento padr\u00e3o do bot\u00e3o\n event.preventDefault(); \n \n const markerIndex = locations.findIndex(loc => loc.latitude == latitude && loc.longitude == longitude);\n if (markerIndex !== -1) {\n map.removeLayer(markers[markerIndex]);\n markers.splice(markerIndex, 1);\n locations.splice(markerIndex, 1);\n }\n }\n \n function imagensPreview() {\n const imagensInput = document.getElementById('imagens');\n const imagensPreview = document.getElementById('imagens-preview');\n const limparImagensButton = document.getElementById('limpar-imagens');\n \n if (imagensInput && imagensPreview) {\n imagensInput.addEventListener('change', function (event) {\n const newFiles = Array.from(event.target.files); \/\/ Novos arquivos selecionados\n \n \/\/ Adicione os novos arquivos ao array existente\n arquivosAtualizados = [...getArquivosSelecionados(), ...newFiles];\n \n \/\/ Remove duplicatas com base no nome e tamanho do arquivo\n arquivosFiltrados = arquivosAtualizados.filter(\n (file, index, self) =>\n index === self.findIndex(f => f.name === file.name && f.size === file.size)\n );\n \n \/\/ Console log de todos os nomes dos arquivos\n arquivosFiltrados.forEach((file) => {\n console.log(file.name);\n });\n \n \/\/ Atualize a lista de arquivos selecionados\n setArquivosSelecionados(arquivosFiltrados);\n\n \/\/ Atualize a pr\u00e9-visualiza\u00e7\u00e3o\n atualizarPreview(getArquivosSelecionados());\n });\n \n \/\/ Limpar todas as imagens\n limparImagensButton.addEventListener('click', function () {\n setArquivosSelecionados([]); \/\/ Limpe a lista de arquivos selecionados\n imagensPreview.innerHTML = ''; \/\/ Limpe a pr\u00e9-visualiza\u00e7\u00e3o\n imagensInput.value = ''; \/\/ Reseta o valor do input para limpar os arquivos selecionados\n atualizarPreview(getArquivosSelecionados()); \/\/ Atualize a pr\u00e9-visualiza\u00e7\u00e3o\n });\n } else {\n console.error('Elementos de imagem n\u00e3o encontrados.');\n }\n \n \/\/ Fun\u00e7\u00e3o para atualizar a pr\u00e9-visualiza\u00e7\u00e3o\n function atualizarPreview(arquivos) {\n imagensPreview.innerHTML = ''; \/\/ Limpe a pr\u00e9-visualiza\u00e7\u00e3o atual\n \n arquivos.forEach((file) => {\n const reader = new FileReader();\n reader.onload = function (e) {\n const previewContainer = document.createElement('div');\n previewContainer.style.position = 'relative';\n previewContainer.style.display = 'inline-block';\n previewContainer.style.margin = '5px';\n \n const img = document.createElement('img');\n img.src = e.target.result;\n img.style.maxWidth = '100px';\n \n const removeBtn = document.createElement('button');\n removeBtn.type = 'button';\n removeBtn.textContent = 'X';\n removeBtn.className = 'removeBtn';\n \n \/\/ Remover uma imagem espec\u00edfica\n removeBtn.addEventListener('click', function () {\n arquivosFiltrados = getArquivosSelecionados().filter(\n (item) => item !== file\n ); \/\/ Remova o arquivo da lista original\n setArquivosSelecionados(arquivosFiltrados); \/\/ Atualize a lista de arquivos selecionados\n atualizarPreview(getArquivosSelecionados()); \/\/ Atualize a pr\u00e9-visualiza\u00e7\u00e3o\n });\n \n previewContainer.appendChild(img);\n previewContainer.appendChild(removeBtn);\n imagensPreview.appendChild(previewContainer);\n };\n reader.readAsDataURL(file);\n });\n }\n }\n \n <\/script>\n\n <form action=\"#\" method=\"post\" id=\"form-extensao\" enctype=\"multipart\/form-data\">\n\n <label for=\"tipo-extensao\">Tipo de Extens\u00e3o<\/label>\n <select id=\"tipo-extensao\" name=\"tipo-de-extensao\" required>\n <option value=\"Programa de Extens\u00e3o\">Programa de Extens\u00e3o<\/option>\n <option value=\"Projeto de Extens\u00e3o\">Projeto de Extens\u00e3o<\/option>\n <option value=\"PAS-PEPE\">PAS ou PEPE<\/option>\n <option value=\"Curso de Extens\u00e3o\">Curso de Extens\u00e3o<\/option>\n <option value=\"Evento de Extens\u00e3o\">Evento de Extens\u00e3o<\/option>\n <\/select>\n\n <label for=\"titulo\">T\u00edtulo<\/label>\n <input type=\"text\" id=\"titulo\" name=\"titulo\" required\n oninvalid=\"this.setCustomValidity('Por favor, preencha esse campo')\" oninput=\"this.setCustomValidity('')\">\n <div id=\"titulo-erro\" class=\"erro\"><\/div>\n \n <label for=\"acao\">A\u00e7\u00e3o<\/label>\n <input type=\"text\" id=\"acao\" name=\"acao\" required\n oninvalid=\"this.setCustomValidity('Por favor, preencha esse campo')\" oninput=\"this.setCustomValidity('')\">\n\n <label for=\"docentes\">Docente ou t\u00e9cnico respons\u00e1vel pela a\u00e7\u00e3o<\/label>\n <input type=\"text\" id=\"docentes\" name=\"docentes\" required\n oninvalid=\"this.setCustomValidity('Por favor, preencha esse campo')\" oninput=\"this.setCustomValidity('')\">\n\n <label for=\"telefone\">Telefone Respons\u00e1vel<\/label>\n <p>OBS: Ser\u00e1 usado apenas para confirma\u00e7\u00e3o e n\u00e3o aparecer\u00e1 no mapa<\/p>\n <input type=\"text\" id=\"telefone\" name=\"telefone\" required\n oninvalid=\"this.setCustomValidity('Por favor, preencha esse campo')\" oninput=\"this.setCustomValidity('')\"\n placeholder=\"(XX) XXXXX-XXXX\" maxlength=\"15\">\n <div id=\"telefone-erro\" class=\"erro\"><\/div>\n\n <label for=\"publico\">Benef\u00edcios compartilhados<\/label>\n <p>Quantidade de pessoas atendidas ou participantes da a\u00e7\u00e3o<\/p>\n <input type=\"number\" id=\"publico\" name=\"publico\" required\n oninvalid=\"this.setCustomValidity('Por favor, preencha esse campo')\" oninput=\"this.setCustomValidity('')\">\n <div id=\"publico-erro\" class=\"erro\"><\/div>\n\n <label for=\"estudantes-graduacao\">N\u00famero de estudantes de gradua\u00e7\u00e3o envolvidos<\/label>\n <input type=\"number\" id=\"estudantes-graduacao\" name=\"estudantes-graduacao\" required\n oninvalid=\"this.setCustomValidity('Por favor, preencha esse campo')\" oninput=\"this.setCustomValidity('')\">\n <div id=\"estudantes-graduacao-erro\" class=\"erro\"><\/div>\n\n <label for=\"estudantes-posgraduacao\">N\u00famero de estudantes de p\u00f3s-gradua\u00e7\u00e3o envolvidos<\/label>\n <input type=\"number\" id=\"estudantes-posgraduacao\" name=\"estudantes-posgraduacao\" required\n oninvalid=\"this.setCustomValidity('Por favor, preencha esse campo')\" oninput=\"this.setCustomValidity('')\">\n <div id=\"estudantes-posgraduacao-erro\" class=\"erro\"><\/div>\n\n <label for=\"descricao\">Descri\u00e7\u00e3o da A\u00e7\u00e3o<\/label>\n <p>Limite de 300 caracteres <span id=\"contador\">(300 restantes)<\/span><\/p> \n <textarea id=\"descricao\" name=\"descricao\" maxlength=\"300\" required\n oninvalid=\"this.setCustomValidity('Por favor, preencha esse campo')\"\n oninput=\"this.setCustomValidity('')\"><\/textarea>\n\n <label for=\"data_inicio\">Data de In\u00edcio<\/label>\n <input type=\"date\" id=\"data_inicio\" name=\"data_inicio\" required\n oninvalid=\"this.setCustomValidity('Por favor, selecione uma data de in\u00edcio')\"\n oninput=\"this.setCustomValidity('')\">\n\n <label for=\"data_fim\">Data de Fim<\/label>\n <p>OBS: Coloque se houver a previs\u00e3o de t\u00e9rmino ou se j\u00e1 tiver sido concluido, caso contr\u00e1rio, deixe em branco.<\/p>\n <input type=\"date\" id=\"data_fim\" name=\"data_fim\">\n <div id=\"data_fim-erro\" class=\"erro\"><\/div>\n\n <div id=\"modalidade-section\" style=\"display:none;\">\n <label for=\"modalidade\">Modalidade<\/label>\n <input type=\"radio\" name=\"modalidade\" value=\"PAS\"> PAS\n <input type=\"radio\" name=\"modalidade\" value=\"PEPE\"> PEPE\n <\/div>\n <div id=\"tipo-extensao-erro\" class=\"erro\"><\/div>\n\n\n <label>Selecione os locais no mapa onde a A\u00e7\u00e3o ocorre ou ocorreu:<\/label>\n <p>OBS: A pesquisa por CEP \u00e9 mais precisa.<\/p>\n <div id=\"map\"><\/div>\n <div id=\"map-erro\" class=\"erro\"><\/div>\n\n <label for=\"imagens\">Anexar Imagens (opcional)<\/label>\n <input type=\"file\" id=\"imagens\" name=\"imagens\" accept=\"image\/*\" multiple>\n <div id=\"imagens-preview\"><\/div>\n <button id=\"limpar-imagens\" type=\"button\">Limpar Todas as Imagens<\/button> \n\n <button type=\"submit\">Enviar Formul\u00e1rio<\/button>\n \n\n <\/form>\n<\/body>\n\n<\/html>\n\n\n\n<p><strong>Aten\u00e7\u00e3o:<\/strong> As informa\u00e7\u00f5es enviadas passar\u00e3o por um processo de aprova\u00e7\u00e3o que pode demorar at\u00e9 7 dias antes de serem adicionadas ao mapa. Obrigado por sua contribui\u00e7\u00e3o!<\/p>\n\n\n\n<div class=\"wp-block-buttons ticss-9ec05957 is-horizontal is-content-justification-center is-layout-flex wp-container-core-buttons-is-layout-29bd5dc9 wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button is-style-outline is-style-outline--1\"><a class=\"wp-block-button__link has-cinza-claro-color has-verde-background-color has-text-color has-background has-link-color has-text-align-left wp-element-button\" href=\"https:\/\/sites.uel.br\/proex\/mapa-de-extensao\/\">Ver mapa<\/a><\/div>\n<\/div>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Este formul\u00e1rio foi desenvolvido para facilitar o registro e o acompanhamento das atividades de extens\u00e3o. Aqui, voc\u00ea pode cadastrar novas iniciativas, fornecendo detalhes como t\u00edtulo, descri\u00e7\u00e3o, p\u00fablico, datas, localiza\u00e7\u00e3o e imagens. Nosso objetivo \u00e9 tornar o processo mais \u00e1gil e acess\u00edvel para todos os envolvidos. Preencha os campos com aten\u00e7\u00e3o e envie sua contribui\u00e7\u00e3o. Agradecemos […]<\/p>\n","protected":false},"author":23,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"_themeisle_gutenberg_block_has_review":false,"footnotes":""},"class_list":["post-4944","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/sites.uel.br\/proex\/wp-json\/wp\/v2\/pages\/4944","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sites.uel.br\/proex\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sites.uel.br\/proex\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sites.uel.br\/proex\/wp-json\/wp\/v2\/users\/23"}],"replies":[{"embeddable":true,"href":"https:\/\/sites.uel.br\/proex\/wp-json\/wp\/v2\/comments?post=4944"}],"version-history":[{"count":91,"href":"https:\/\/sites.uel.br\/proex\/wp-json\/wp\/v2\/pages\/4944\/revisions"}],"predecessor-version":[{"id":5620,"href":"https:\/\/sites.uel.br\/proex\/wp-json\/wp\/v2\/pages\/4944\/revisions\/5620"}],"wp:attachment":[{"href":"https:\/\/sites.uel.br\/proex\/wp-json\/wp\/v2\/media?parent=4944"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":4944,"date":"2025-03-12T13:51:18","date_gmt":"2025-03-12T16:51:18","guid":{"rendered":"https:\/\/sites.uel.br\/proex\/?page_id=4944"},"modified":"2025-03-12T13:51:18","modified_gmt":"2025-03-12T16:51:18","slug":"formulario-mapa-de-extensao","status":"publish","type":"page","link":"https:\/\/sites.uel.br\/proex\/formulario-mapa-de-extensao\/","title":{"rendered":"Formul\u00e1rio Mapa de Extens\u00e3o"},"content":{"rendered":"\n

Este formul\u00e1rio foi desenvolvido para facilitar o registro e o acompanhamento das atividades de extens\u00e3o. Aqui, voc\u00ea pode cadastrar novas iniciativas, fornecendo detalhes como t\u00edtulo, descri\u00e7\u00e3o, p\u00fablico, datas, localiza\u00e7\u00e3o e imagens. Nosso objetivo \u00e9 tornar o processo mais \u00e1gil e acess\u00edvel para todos os envolvidos.<\/p>\n\n\n\n

Preencha os campos com aten\u00e7\u00e3o e envie sua contribui\u00e7\u00e3o. Agradecemos sua participa\u00e7\u00e3o!<\/p>\n\n\n\n\n\n\n\n \n \n Formul\u00e1rio de Extens\u00e3o<\/title>\n <link rel=\"stylesheet\" href=\"https:\/\/unpkg.com\/leaflet\/dist\/leaflet.css\" \/>\n <link rel=\"stylesheet\" href=\"https:\/\/unpkg.com\/leaflet-control-geocoder\/dist\/Control.Geocoder.css\" \/>\n <style>\n \/* Estilos b\u00e1sicos para o formul\u00e1rio *\/\n #form-extensao {\n max-width: 600px;\n margin: 20px auto;\n padding: 20px;\n border: 1px solid #ccc;\n border-radius: 10px;\n background-color: #f9f9f9;\n font-family: Arial, sans-serif;\n }\n\n #form-extensao p {\n margin: -5px 0 0 0;\n }\n\n \/* Estilos para os r\u00f3tulos *\/\n #form-extensao label {\n display: block;\n margin-bottom: 8px;\n font-weight: bold;\n color: #00753b;\n margin-top: 15px;\n }\n\n \/* Estilos para os campos de entrada *\/\n #form-extensao input[type=\"text\"],\n #form-extensao input[type=\"number\"],\n #form-extensao input[type=\"date\"],\n #form-extensao select,\n #form-extensao textarea {\n width: 100%;\n padding: 10px;\n border: 1px solid #ccc;\n border-radius: 5px;\n font-size: 14px;\n background-color: #fff;\n color: #333;\n }\n\n #form-extensao input[type=\"date\"] {\n width: auto;\n }\n\n \/* Estilos espec\u00edficos para textarea *\/\n #form-extensao textarea {\n resize: vertical;\n min-height: 100px;\n }\n\n \/* Estilos para o bot\u00e3o *\/\n #form-extensao button[type=\"submit\"] {\n width: 100%;\n padding: 12px;\n background-color: #00753b;\n color: white;\n border: none;\n border-radius: 5px;\n font-size: 16px;\n cursor: pointer;\n transition: background-color 0.3s ease;\n margin-top: 25px;\n }\n\n #form-extensao button[type=\"submit\"]:hover {\n background-color: #005c2f;\n }\n\n \/* Estilos para os inputs de r\u00e1dio *\/\n #form-extensao input[type=\"radio\"] {\n margin-right: 10px;\n }\n\n \/* Alinhamento do campo Modalidade *\/\n #modalidade-section {\n margin-bottom: 20px;\n }\n\n \/* Estilos para o mapa *\/\n #map {\n height: 300px;\n width: 100%;\n border: 1px solid #ccc;\n }\n\n #limpar-imagens {\n display: block;\n margin-top: 10px;\n padding: 8px;\n background-color: #ff0000;\n color: white;\n border: none;\n border-radius: 5px;\n font-size: 12px;\n cursor: pointer;\n transition: background-color 0.3s ease;\n }\n #limpar-imagens:hover {\n background-color: #cc0000;\n }\n\n #imagens{\n font-size: 12px;\n }\n .removeBtn {\n position: absolute;\n top: 0;\n right: 0;\n background: #ff0000;\n color: white;\n border: none;\n border-radius: 50%;\n cursor: pointer;\n padding: 1px 6px;\n font-size: 12px;\n }\n\n \/* Responsividade para telas menores *\/\n @media (max-width: 768px) {\n #form-extensao {\n padding: 15px;\n }\n\n #form-extensao button[type=\"submit\"] {\n font-size: 14px;\n }\n }\n\n @media (min-width: 992px) {\n .pagina ul,\n .noticia ul,\n .pagina ol,\n .noticia ol {\n padding: 0;\n }\n }\n .erro {\n color: red;\n font-size: 0.9em;\n }\n\n <\/style>\n<\/head>\n\n<body>\n <script src=\"https:\/\/unpkg.com\/leaflet\/dist\/leaflet.js\"><\/script>\n <script src=\"https:\/\/unpkg.com\/leaflet-control-geocoder\/dist\/Control.Geocoder.js\"><\/script>\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/dayjs@1\/dayjs.min.js\"><\/script>\n\n <script>\n let map;\n let markers = [];\n let locations = [];\n\n let arquivosSelecionados = []; \/\/ Vari\u00e1vel global para armazenar os arquivos\n\n \/\/ Fun\u00e7\u00e3o para obter os arquivos selecionados\n function getArquivosSelecionados() {\n return arquivosSelecionados;\n }\n\n \/\/ Fun\u00e7\u00e3o para atualizar os arquivos selecionados\n function setArquivosSelecionados(novosArquivos) {\n arquivosSelecionados = novosArquivos;\n }\n\n \/\/ Fun\u00e7\u00f5es de inicializa\u00e7\u00e3o\n document.addEventListener('DOMContentLoaded', function () {\n \/\/ Inicializa a fun\u00e7\u00e3o para o PAS-PEPE\n pasPepe();\n \/\/ Inicializa a fun\u00e7\u00e3o para formatar o telefone\n telefoneFormat();\n \/\/ Inicializa a fun\u00e7\u00e3o para formatar a descri\u00e7\u00e3o\n descricaoFormat();\n \/\/ Inicializa a fun\u00e7\u00e3o para submeter o formul\u00e1rio\n submeterFormulario();\n \/\/ Inicializa o mapa\n initMap();\n\n imagensPreview();\n });\n\n function pasPepe(){\n \/\/ Mostra ou esconde as op\u00e7\u00f5es de modalidade para PAS-PEPE\n var tipoExtensao = document.getElementById('tipo-extensao');\n var modalidadeSection = document.getElementById('modalidade-section');\n var modalidadeInputs = document.getElementsByName('modalidade');\n\n tipoExtensao.addEventListener('change', function () {\n if (tipoExtensao.value === 'PAS-PEPE') {\n modalidadeSection.style.display = 'block';\n } else {\n modalidadeSection.style.display = 'none';\n modalidadeInputs.forEach(input => input.checked = false);\n }\n });\n }\n\n function telefoneFormat(){\n \/\/ Formata o telefone no padr\u00e3o (XX) XXXXX-XXXX\n const telefoneInput = document.getElementById('telefone');\n\n telefoneInput.addEventListener('input', function (event) {\n let input = telefoneInput.value;\n\n \/\/ Remove tudo que n\u00e3o seja n\u00famero\n input = input.replace(\/\\D\/g, '');\n\n \/\/ Aplica a m\u00e1scara (XX) XXXXX-XXXX\n if (input.length <= 10) {\n \/\/ Formato para 10 d\u00edgitos (fixo antigo) - (XX) XXXX-XXXX\n input = input.replace(\/(\\d{2})(\\d{4})(\\d{0,4})\/, '($1) $2-$3');\n } else {\n \/\/ Formato para 11 d\u00edgitos (celular) - (XX) XXXXX-XXXX\n input = input.replace(\/(\\d{2})(\\d{5})(\\d{0,4})\/, '($1) $2-$3');\n }\n\n \/\/ Atualiza o valor do input\n telefoneInput.value = input;\n });\n }\n\n function descricaoFormat(){\n \/\/ Contador de caracteres para a descri\u00e7\u00e3o\n document.addEventListener('input', function (event) {\n const descricaoInput = document.getElementById('descricao');\n const contador = document.getElementById('contador');\n const maxLength = descricaoInput.maxLength;\n const currentLength = descricaoInput.value.length;\n const remaining = maxLength - currentLength;\n\n contador.textContent = `(${remaining} restantes)`;\n });\n }\n\n function submeterFormulario() {\n \/\/ Fun\u00e7\u00e3o para submeter o formul\u00e1rio\n const form = document.getElementById('form-extensao');\n\n form.addEventListener('submit', async function (event) {\n event.preventDefault();\n\n \/\/ Limpa mensagens de erro anteriores\n document.querySelectorAll('.erro').forEach(el => el.textContent = '');\n\n let hasError = false;\n\n \/\/ Verifica o t\u00edtulo\n const titulo = document.getElementById('titulo').value.trim();\n if (titulo.toLowerCase() === 't\u00edtulo') {\n document.getElementById('titulo-erro').textContent = 'O t\u00edtulo n\u00e3o pode ser \"T\u00edtulo\". Por favor, insira um t\u00edtulo v\u00e1lido.';\n hasError = true;\n }\n\n \/\/ Verifica se o telefone foi preenchido corretamente\n const telefone = document.getElementById('telefone').value;\n if (telefone.length < 13) {\n document.getElementById('telefone-erro').textContent = 'Por favor, preencha o campo de telefone corretamente.';\n hasError = true;\n }\n\n \/\/ verifica e formata as datas\n const dataInicio = document.getElementById('data_inicio').value;\n const dataFim = document.getElementById('data_fim').value;\n\n const dataInicioObj = dayjs(dataInicio);\n const dataFimObj = dayjs(dataFim);\n\n if (dataFimObj.isBefore(dataInicioObj)) {\n document.getElementById('data_fim-erro').textContent = 'A data de fim deve ser posterior \u00e0 data de in\u00edcio.';\n hasError = true;\n }\n\n let periodo = '';\n if (!dataFim) {\n periodo = `De ${dataInicioObj.format('DD\/MM\/YYYY')} at\u00e9 o momento atual`;\n } else if (dataInicioObj.isSame(dataFimObj)) {\n periodo = dataInicioObj.format('DD\/MM\/YYYY');\n } else {\n periodo = `${dataInicioObj.format('DD\/MM\/YYYY')} a ${dataFimObj.format('DD\/MM\/YYYY')}`;\n }\n\n \/\/ Verifica que os campos num\u00e9ricos t\u00eam valores positivos\n const publico = document.getElementById('publico').value;\n const estudantesGraduacao = document.getElementById('estudantes-graduacao').value;\n const estudantesPosGraduacao = document.getElementById('estudantes-posgraduacao').value;\n\n if (publico <= 0) {\n document.getElementById('publico-erro').textContent = 'Por favor, insira um valor positivo.';\n hasError = true;\n }\n if (estudantesGraduacao < 0) {\n document.getElementById('estudantes-graduacao-erro').textContent = 'Por favor, insira um valor positivo.';\n hasError = true;\n }\n if (estudantesPosGraduacao < 0) {\n document.getElementById('estudantes-posgraduacao-erro').textContent = 'Por favor, insira um valor positivo.';\n hasError = true;\n }\n\n \/\/ Verifica se \"PAS-PEPE\" foi selecionado sem escolher uma modalidade\n const tipoExtensao = document.getElementById('tipo-extensao').value;\n const modalidadeInputs = document.getElementsByName('modalidade');\n const modalidadeSelecionada = Array.from(modalidadeInputs).some(input => input.checked);\n\n if (tipoExtensao === 'PAS-PEPE' && !modalidadeSelecionada) {\n document.getElementById('modalidade-erro').textContent = 'Por favor, escolha uma das op\u00e7\u00f5es de modalidade.';\n hasError = true;\n }\n\n \/\/ verifica se tem alguma localiza\u00e7\u00e3o selecionada\n if (locations.length === 0) {\n document.getElementById('map-erro').textContent = 'Por favor, selecione uma localiza\u00e7\u00e3o no mapa.';\n hasError = true;\n }\n\n if (hasError) {\n alert('Por favor, corrija os erros no formul\u00e1rio antes de submeter.');\n return;\n }\n\n \/\/ Adiciona as imagens ao FormData\n const imagensFiles = getArquivosSelecionados();\n \n const imagensBase64 = await Promise.all(\n Array.from(imagensFiles).map(file => converterParaBase64(file).then(base64 => ({\n mimeType: file.type,\n base64,\n })))\n );\n\n \/\/ console.log(\"numero de imagens: \" + imagensFiles.length);\n\n \/\/ cria uma linha para cada latitude e longitude\n locations.forEach((location) => {\n const formData = new FormData(form);\n formData.append(`latitude`, location.latitude);\n formData.append(`longitude`, location.longitude);\n formData.append(`periodo`, periodo);\n \n \/\/ verifica se tem imagem\n if (getArquivosSelecionados().length > 0 && locations.indexOf(location) === 0)\n formData.append('IMG', JSON.stringify(imagensBase64));\n\n \/\/log dos dados\n \/*\n for (var pair of formData.entries()) {\n console.log(pair[0]+ ', ' + pair[1]); \n }\n console.log(formData);\n *\/\n\n \/\/ envia os dados\n enviarDados(formData); \n });\n\n alert('Formul\u00e1rio enviado com sucesso, obrigado por contribuir!');\n });\n }\n\n \/\/ Converte arquivo para Base64\n function converterParaBase64(file) {\n return new Promise((resolve, reject) => {\n const reader = new FileReader();\n reader.onload = () => resolve(reader.result.split(',')[1]);\n reader.onerror = error => reject(error);\n reader.readAsDataURL(file);\n });\n }\n\n \/\/ Fun\u00e7\u00e3o que envia dados para o Google Sheets via Google Apps Script\n function enviarDados(formData) {\n const url = 'https:\/\/script.google.com\/macros\/s\/AKfycbz-vPtgys9tj4xx3SdN-xv-6irfQw4tHhcTcxp42DzmbG6sCOSx-oVkPwdlXr-TTlli\/exec';\n\n const formBody = new URLSearchParams();\n formData.forEach((value, key) => {\n formBody.append(key, value);\n });\n\n fetch(url, {\n method: 'POST',\n headers: {\n 'Content-Type': 'application\/x-www-form-urlencoded',\n },\n body: formBody.toString(),\n })\n .then(response => response.text())\n .then(result => {\n console.log('Sucesso:', result);\n })\n .catch(error => {\n console.error('Erro:', error);\n });\n }\n\n function initMap() {\n map = L.map('map').setView([-23.2927, -51.1732], 12); \/\/ Londrina\n \n L.tileLayer('https:\/\/{s}.tile.openstreetmap.org\/{z}\/{x}\/{y}.png', {\n maxZoom: 19\n }).addTo(map);\n\n \/\/ Adiciona a funcionalidade de pesquisa\n L.Control.geocoder({\n defaultMarkGeocode: false\n }).on('markgeocode', function (e) {\n const latlng = e.geocode.center;\n let latitude = latlng.lat;\n let longitude = latlng.lng;\n selecionarLocalizacao(latitude, longitude, map);\n }).addTo(map);\n\n \/\/ Adiciona um listener para capturar o clique no mapa e adicionar o marcador\n map.on('click', (event) => {\n let latitude = event.latlng.lat;\n let longitude = event.latlng.lng;\n selecionarLocalizacao(latitude, longitude, map);\n });\n }\n\n function selecionarLocalizacao(latitude, longitude, map) {\n \/\/ Ajusta as latitudes e longitudes para 8 casas decimais\n latitude = latitude.toFixed(8);\n longitude = longitude.toFixed(8);\n\n map.setView([latitude, longitude], 14);\n\n \/\/ Adiciona um marcador no mapa\n const marker = L.marker([latitude, longitude]).addTo(map)\n .bindPopup(`\n <div style=\"text-align: center; gap: 5px; display: grid;\">\n <p>Localiza\u00e7\u00e3o selecionada<\/p>\n <button onclick=\"cancelarLocalizacao(event, ${latitude}, ${longitude}, this)\">Remover<\/button>\n <\/div>\n `)\n .openPopup();\n\n markers.push(marker);\n locations.push({ latitude, longitude });\n }\n\n \/\/ Fun\u00e7\u00e3o para cancelar a localiza\u00e7\u00e3o\n function cancelarLocalizacao(event, latitude, longitude, button) {\n \/\/ Impede o comportamento padr\u00e3o do bot\u00e3o\n event.preventDefault(); \n \n const markerIndex = locations.findIndex(loc => loc.latitude == latitude && loc.longitude == longitude);\n if (markerIndex !== -1) {\n map.removeLayer(markers[markerIndex]);\n markers.splice(markerIndex, 1);\n locations.splice(markerIndex, 1);\n }\n }\n \n function imagensPreview() {\n const imagensInput = document.getElementById('imagens');\n const imagensPreview = document.getElementById('imagens-preview');\n const limparImagensButton = document.getElementById('limpar-imagens');\n \n if (imagensInput && imagensPreview) {\n imagensInput.addEventListener('change', function (event) {\n const newFiles = Array.from(event.target.files); \/\/ Novos arquivos selecionados\n \n \/\/ Adicione os novos arquivos ao array existente\n arquivosAtualizados = [...getArquivosSelecionados(), ...newFiles];\n \n \/\/ Remove duplicatas com base no nome e tamanho do arquivo\n arquivosFiltrados = arquivosAtualizados.filter(\n (file, index, self) =>\n index === self.findIndex(f => f.name === file.name && f.size === file.size)\n );\n \n \/\/ Console log de todos os nomes dos arquivos\n arquivosFiltrados.forEach((file) => {\n console.log(file.name);\n });\n \n \/\/ Atualize a lista de arquivos selecionados\n setArquivosSelecionados(arquivosFiltrados);\n\n \/\/ Atualize a pr\u00e9-visualiza\u00e7\u00e3o\n atualizarPreview(getArquivosSelecionados());\n });\n \n \/\/ Limpar todas as imagens\n limparImagensButton.addEventListener('click', function () {\n setArquivosSelecionados([]); \/\/ Limpe a lista de arquivos selecionados\n imagensPreview.innerHTML = ''; \/\/ Limpe a pr\u00e9-visualiza\u00e7\u00e3o\n imagensInput.value = ''; \/\/ Reseta o valor do input para limpar os arquivos selecionados\n atualizarPreview(getArquivosSelecionados()); \/\/ Atualize a pr\u00e9-visualiza\u00e7\u00e3o\n });\n } else {\n console.error('Elementos de imagem n\u00e3o encontrados.');\n }\n \n \/\/ Fun\u00e7\u00e3o para atualizar a pr\u00e9-visualiza\u00e7\u00e3o\n function atualizarPreview(arquivos) {\n imagensPreview.innerHTML = ''; \/\/ Limpe a pr\u00e9-visualiza\u00e7\u00e3o atual\n \n arquivos.forEach((file) => {\n const reader = new FileReader();\n reader.onload = function (e) {\n const previewContainer = document.createElement('div');\n previewContainer.style.position = 'relative';\n previewContainer.style.display = 'inline-block';\n previewContainer.style.margin = '5px';\n \n const img = document.createElement('img');\n img.src = e.target.result;\n img.style.maxWidth = '100px';\n \n const removeBtn = document.createElement('button');\n removeBtn.type = 'button';\n removeBtn.textContent = 'X';\n removeBtn.className = 'removeBtn';\n \n \/\/ Remover uma imagem espec\u00edfica\n removeBtn.addEventListener('click', function () {\n arquivosFiltrados = getArquivosSelecionados().filter(\n (item) => item !== file\n ); \/\/ Remova o arquivo da lista original\n setArquivosSelecionados(arquivosFiltrados); \/\/ Atualize a lista de arquivos selecionados\n atualizarPreview(getArquivosSelecionados()); \/\/ Atualize a pr\u00e9-visualiza\u00e7\u00e3o\n });\n \n previewContainer.appendChild(img);\n previewContainer.appendChild(removeBtn);\n imagensPreview.appendChild(previewContainer);\n };\n reader.readAsDataURL(file);\n });\n }\n }\n \n <\/script>\n\n <form action=\"#\" method=\"post\" id=\"form-extensao\" enctype=\"multipart\/form-data\">\n\n <label for=\"tipo-extensao\">Tipo de Extens\u00e3o<\/label>\n <select id=\"tipo-extensao\" name=\"tipo-de-extensao\" required>\n <option value=\"Programa de Extens\u00e3o\">Programa de Extens\u00e3o<\/option>\n <option value=\"Projeto de Extens\u00e3o\">Projeto de Extens\u00e3o<\/option>\n <option value=\"PAS-PEPE\">PAS ou PEPE<\/option>\n <option value=\"Curso de Extens\u00e3o\">Curso de Extens\u00e3o<\/option>\n <option value=\"Evento de Extens\u00e3o\">Evento de Extens\u00e3o<\/option>\n <\/select>\n\n <label for=\"titulo\">T\u00edtulo<\/label>\n <input type=\"text\" id=\"titulo\" name=\"titulo\" required\n oninvalid=\"this.setCustomValidity('Por favor, preencha esse campo')\" oninput=\"this.setCustomValidity('')\">\n <div id=\"titulo-erro\" class=\"erro\"><\/div>\n \n <label for=\"acao\">A\u00e7\u00e3o<\/label>\n <input type=\"text\" id=\"acao\" name=\"acao\" required\n oninvalid=\"this.setCustomValidity('Por favor, preencha esse campo')\" oninput=\"this.setCustomValidity('')\">\n\n <label for=\"docentes\">Docente ou t\u00e9cnico respons\u00e1vel pela a\u00e7\u00e3o<\/label>\n <input type=\"text\" id=\"docentes\" name=\"docentes\" required\n oninvalid=\"this.setCustomValidity('Por favor, preencha esse campo')\" oninput=\"this.setCustomValidity('')\">\n\n <label for=\"telefone\">Telefone Respons\u00e1vel<\/label>\n <p>OBS: Ser\u00e1 usado apenas para confirma\u00e7\u00e3o e n\u00e3o aparecer\u00e1 no mapa<\/p>\n <input type=\"text\" id=\"telefone\" name=\"telefone\" required\n oninvalid=\"this.setCustomValidity('Por favor, preencha esse campo')\" oninput=\"this.setCustomValidity('')\"\n placeholder=\"(XX) XXXXX-XXXX\" maxlength=\"15\">\n <div id=\"telefone-erro\" class=\"erro\"><\/div>\n\n <label for=\"publico\">Benef\u00edcios compartilhados<\/label>\n <p>Quantidade de pessoas atendidas ou participantes da a\u00e7\u00e3o<\/p>\n <input type=\"number\" id=\"publico\" name=\"publico\" required\n oninvalid=\"this.setCustomValidity('Por favor, preencha esse campo')\" oninput=\"this.setCustomValidity('')\">\n <div id=\"publico-erro\" class=\"erro\"><\/div>\n\n <label for=\"estudantes-graduacao\">N\u00famero de estudantes de gradua\u00e7\u00e3o envolvidos<\/label>\n <input type=\"number\" id=\"estudantes-graduacao\" name=\"estudantes-graduacao\" required\n oninvalid=\"this.setCustomValidity('Por favor, preencha esse campo')\" oninput=\"this.setCustomValidity('')\">\n <div id=\"estudantes-graduacao-erro\" class=\"erro\"><\/div>\n\n <label for=\"estudantes-posgraduacao\">N\u00famero de estudantes de p\u00f3s-gradua\u00e7\u00e3o envolvidos<\/label>\n <input type=\"number\" id=\"estudantes-posgraduacao\" name=\"estudantes-posgraduacao\" required\n oninvalid=\"this.setCustomValidity('Por favor, preencha esse campo')\" oninput=\"this.setCustomValidity('')\">\n <div id=\"estudantes-posgraduacao-erro\" class=\"erro\"><\/div>\n\n <label for=\"descricao\">Descri\u00e7\u00e3o da A\u00e7\u00e3o<\/label>\n <p>Limite de 300 caracteres <span id=\"contador\">(300 restantes)<\/span><\/p> \n <textarea id=\"descricao\" name=\"descricao\" maxlength=\"300\" required\n oninvalid=\"this.setCustomValidity('Por favor, preencha esse campo')\"\n oninput=\"this.setCustomValidity('')\"><\/textarea>\n\n <label for=\"data_inicio\">Data de In\u00edcio<\/label>\n <input type=\"date\" id=\"data_inicio\" name=\"data_inicio\" required\n oninvalid=\"this.setCustomValidity('Por favor, selecione uma data de in\u00edcio')\"\n oninput=\"this.setCustomValidity('')\">\n\n <label for=\"data_fim\">Data de Fim<\/label>\n <p>OBS: Coloque se houver a previs\u00e3o de t\u00e9rmino ou se j\u00e1 tiver sido concluido, caso contr\u00e1rio, deixe em branco.<\/p>\n <input type=\"date\" id=\"data_fim\" name=\"data_fim\">\n <div id=\"data_fim-erro\" class=\"erro\"><\/div>\n\n <div id=\"modalidade-section\" style=\"display:none;\">\n <label for=\"modalidade\">Modalidade<\/label>\n <input type=\"radio\" name=\"modalidade\" value=\"PAS\"> PAS\n <input type=\"radio\" name=\"modalidade\" value=\"PEPE\"> PEPE\n <\/div>\n <div id=\"tipo-extensao-erro\" class=\"erro\"><\/div>\n\n\n <label>Selecione os locais no mapa onde a A\u00e7\u00e3o ocorre ou ocorreu:<\/label>\n <p>OBS: A pesquisa por CEP \u00e9 mais precisa.<\/p>\n <div id=\"map\"><\/div>\n <div id=\"map-erro\" class=\"erro\"><\/div>\n\n <label for=\"imagens\">Anexar Imagens (opcional)<\/label>\n <input type=\"file\" id=\"imagens\" name=\"imagens\" accept=\"image\/*\" multiple>\n <div id=\"imagens-preview\"><\/div>\n <button id=\"limpar-imagens\" type=\"button\">Limpar Todas as Imagens<\/button> \n\n <button type=\"submit\">Enviar Formul\u00e1rio<\/button>\n \n\n <\/form>\n<\/body>\n\n<\/html>\n\n\n\n<p><strong>Aten\u00e7\u00e3o:<\/strong> As informa\u00e7\u00f5es enviadas passar\u00e3o por um processo de aprova\u00e7\u00e3o que pode demorar at\u00e9 7 dias antes de serem adicionadas ao mapa. Obrigado por sua contribui\u00e7\u00e3o!<\/p>\n\n\n\n<div class=\"wp-block-buttons ticss-9ec05957 is-horizontal is-content-justification-center is-layout-flex wp-container-core-buttons-is-layout-29bd5dc9 wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button is-style-outline is-style-outline--1\"><a class=\"wp-block-button__link has-cinza-claro-color has-verde-background-color has-text-color has-background has-link-color has-text-align-left wp-element-button\" href=\"https:\/\/sites.uel.br\/proex\/mapa-de-extensao\/\">Ver mapa<\/a><\/div>\n<\/div>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Este formul\u00e1rio foi desenvolvido para facilitar o registro e o acompanhamento das atividades de extens\u00e3o. Aqui, voc\u00ea pode cadastrar novas iniciativas, fornecendo detalhes como t\u00edtulo, descri\u00e7\u00e3o, p\u00fablico, datas, localiza\u00e7\u00e3o e imagens. Nosso objetivo \u00e9 tornar o processo mais \u00e1gil e acess\u00edvel para todos os envolvidos. Preencha os campos com aten\u00e7\u00e3o e envie sua contribui\u00e7\u00e3o. Agradecemos […]<\/p>\n","protected":false},"author":23,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"_themeisle_gutenberg_block_has_review":false,"footnotes":""},"class_list":["post-4944","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/sites.uel.br\/proex\/wp-json\/wp\/v2\/pages\/4944","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sites.uel.br\/proex\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sites.uel.br\/proex\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sites.uel.br\/proex\/wp-json\/wp\/v2\/users\/23"}],"replies":[{"embeddable":true,"href":"https:\/\/sites.uel.br\/proex\/wp-json\/wp\/v2\/comments?post=4944"}],"version-history":[{"count":91,"href":"https:\/\/sites.uel.br\/proex\/wp-json\/wp\/v2\/pages\/4944\/revisions"}],"predecessor-version":[{"id":5620,"href":"https:\/\/sites.uel.br\/proex\/wp-json\/wp\/v2\/pages\/4944\/revisions\/5620"}],"wp:attachment":[{"href":"https:\/\/sites.uel.br\/proex\/wp-json\/wp\/v2\/media?parent=4944"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}