{"id":4945,"date":"2025-03-12T13:54:10","date_gmt":"2025-03-12T16:54:10","guid":{"rendered":"https:\/\/sites.uel.br\/proex\/?page_id=4945"},"modified":"2025-03-12T13:54:10","modified_gmt":"2025-03-12T16:54:10","slug":"mapa-de-extensao","status":"publish","type":"page","link":"https:\/\/sites.uel.br\/proex\/mapa-de-extensao\/","title":{"rendered":"Mapa de Extens\u00e3o"},"content":{"rendered":"\n<p>Encontre aqui as atividades de Extens\u00e3o da PROEX UEL, que conectam a universidade \u00e0 comunidade por meio de projetos, cursos, eventos e a\u00e7\u00f5es voltadas ao desenvolvimento social, cultural e educacional. A extens\u00e3o universit\u00e1ria \u00e9 um espa\u00e7o de aprendizado e troca de conhecimento, proporcionando experi\u00eancias enriquecedoras para estudantes, professores e a sociedade. <\/p>\n\n\n\n<div class=\"containercod\">\n    <div class=\"content\"><\/div>\n            <iframe loading=\"lazy\" src=\"https:\/\/www.google.com\/maps\/d\/u\/0\/embed?mid=1bXxmvRVvpkk4Ez5YtDHdaE0arUVCBf8&#038;ehbc=2E312F&#038;noprof=1\" width=\"100%\" height=\"480\"><\/iframe>\n\n            <h1>Quer saber um pouco mais sobre algum lugar? Voc\u00ea pode pesquisar por T\u00edtulo ou clicar em um dos dispon\u00edveis abaixo para ver suas fotos!<\/h1>\n            <div class=\"containerFotos\">\n                <div id=\"search\">\n                    <form id=\"searchForm\">\n                            <input type=\"text\" id=\"searchTitle\" name=\"searchTitle\" required>\n                            <input type=\"submit\" value=\"Pesquisar\">\n                    <\/form>\n                    <ul id=\"searchList\">\n                            <!-- Lista de nomes pesquis\u00e1veis ser\u00e1 inserida aqui -->\n                    <\/ul>\n                <\/div>  \n                <div id=\"results\" class=\"carousel-container\">\n                        <!-- As imagens ser\u00e3o inseridas aqui -->\n                <\/div>\n            <\/div>\n    <\/div>\n<\/div>\n<script>\n    document.addEventListener('DOMContentLoaded', function () {\n        let allFolders = [];\n    \n        const webAppUrl = 'https:\/\/script.google.com\/macros\/s\/AKfycbz-vPtgys9tj4xx3SdN-xv-6irfQw4tHhcTcxp42DzmbG6sCOSx-oVkPwdlXr-TTlli\/exec';\n    \n        const searchInput = document.getElementById('searchTitle');\n        const searchList = document.getElementById('searchList');\n        const searchForm = document.getElementById('searchForm');\n    \n        function updateSearchList(folders) {\n            searchList.innerHTML = '';\n            folders.forEach(function(name) {\n                const listItem = document.createElement('li');\n                listItem.textContent = name;\n                listItem.addEventListener('click', function() {\n                    searchInput.value = name;\n                    performSearch(name);\n                });\n                searchList.appendChild(listItem);\n            });\n        }\n    \n        fetch(webAppUrl + '?action=getFoldersList')\n            .then(response => response.json())\n            .then(folderNames => {\n                allFolders = folderNames;\n                updateSearchList(allFolders);\n            })\n            .catch(error => console.error('Erro ao buscar as pastas:', error));\n    \n        searchInput.addEventListener('input', function() {\n            const searchTerm = this.value.toLowerCase();\n            const filteredFolders = allFolders.filter(name => name.toLowerCase().includes(searchTerm));\n            updateSearchList(filteredFolders);\n        });\n    \n        searchForm.addEventListener('submit', function(event) {\n            event.preventDefault();\n            const searchTitle = searchInput.value;\n            \n            const resultsDiv = document.getElementById('results');\n            resultsDiv.innerHTML = '<p>Pesquisando...<\/p><img decoding=\"async\" src=\"https:\/\/i.gifer.com\/ZZ5H.gif\" alt=\"Loading\" style=\"width:50px;height:50px;\">';\n            \n            const script = document.createElement('script');\n            script.src = webAppUrl + '?searchTitle=' + encodeURIComponent(searchTitle) + '&callback=displayResults';\n            document.body.appendChild(script);\n        });\n    });\n    \n    function displayResults(results) {\n        const resultsDiv = document.getElementById('results');\n        resultsDiv.innerHTML = '';\n    \n        if (results.length === 0) {\n            resultsDiv.innerHTML = '<p>Nenhuma foto encontrada.<\/p>';\n        } else {\n            const carousel = document.createElement('div');\n            carousel.classList.add('carousel-images');\n            \n            results.forEach(function(photo) {\n                const img = document.createElement('img');\n                img.src = photo.url;\n                img.alt = photo.name;\n                carousel.appendChild(img);\n            });\n    \n            const prevButton = document.createElement('button');\n            prevButton.classList.add('carousel-arrow', 'prev');\n            prevButton.textContent = '\u2190';\n            prevButton.onclick = function() { moveCarousel('prev'); };\n    \n            const nextButton = document.createElement('button');\n            nextButton.classList.add('carousel-arrow', 'next');\n            nextButton.textContent = '\u2192';\n            nextButton.onclick = function() { moveCarousel('next'); };\n    \n            resultsDiv.appendChild(prevButton);\n            resultsDiv.appendChild(carousel);\n            resultsDiv.appendChild(nextButton);\n        }\n    }\n    \n    let currentIndex = 0;\n    function moveCarousel(direction) {\n        const carousel = document.querySelector('.carousel-images');\n        const totalImages = carousel.children.length;\n        if (direction === 'next') {\n            currentIndex = (currentIndex + 1) % totalImages;\n        } else {\n            currentIndex = (currentIndex - 1 + totalImages) % totalImages;\n        }\n        carousel.style.transform = 'translateX(' + (-currentIndex * 100) + '%)';\n    }\n<\/script>\n\n<style>\n    \/* Estilo geral *\/\n    body {\n            font-family: Arial, sans-serif;\n            margin: 0;\n            padding: 0;\n            background-color: #f4f4f9;\n            color: #333;\n    }\n\n    \/* Container para manter o layout *\/\n    .containercod {\n            display: flex;\n            flex-direction: column;\n            align-items: center;\n            max-width: 1200px;\n            margin: 20px auto;\n            padding: 20px;\n            background-color: #fff;\n            border-radius: 8px;\n\n    }\n\n    \/* Cabe\u00e7alho *\/\n    h1 {\n            font-size: 24px;\n            color: #333;\n            text-align: center;\n            margin-bottom: 20px;\n            padding: 20px 100px;\n    }\n\n    .containerFotos {\n        display: flex;\n        justify-content: center;\n        width: 100%;\n        min-height: 240px;\n        gap: 70px;\n    }\n    \n    .containerFotos > div {\n        width: 50%;\n        box-sizing: border-box;\n        gap:50px\n    }  \n    \n    .containerFotos > div > p {\n        margin-bottom: 0;\n    }  \n\n    \/* Estilo do formul\u00e1rio *\/\n    #search{\n        margin-top: 30px;\n        width: 40%;\n    }\n\n    #searchForm {\n        display: flex;\n        margin: 0;\n    }\n\n    #searchForm label {\n            font-size: 16px;\n            color: #555;\n            margin-bottom: 0;\n    }\n\n    #searchForm input[type=\"text\"] {\n            padding: 10px;\n            border: 1px solid #ccc;\n            font-size: 16px;\n            width: 300px; \n            background-color: #bbf4be;\n            border-radius: 0;\n    }\n\n    #searchForm input[type=\"submit\"] {\n            width: 100px;\n            background-color: #498b4c;\n            color: white;\n            border: none;\n            font-size: 17px;\n            cursor: pointer;\n            transition: background-color 0.3s ease;\n    }\n\n    #searchForm input[type=\"submit\"]:hover {\n            background-color: #3b6e3b;\n    }\n\n    \/* Estilo da lista de nomes pesquis\u00e1veis *\/\n    #searchList {\n        max-height: 400px;\n        overflow-y: auto;\n        list-style-type: none;\n        padding: 0;\n        text-align: center;\n        width: 100%;\n        display: flex;\n        flex-direction: column;\n        margin: 0;\n        border: 1px solid #ccc;\n    }\n    \n    #searchList li {\n        font-size: 16px;\n        color: #555;\n        padding: 10px 0;\n        border-bottom: 1px solid #ccc;\n        width: 100%;\n        text-align: center;\n        background-color: #fff;\n        cursor: pointer;\n        transition: background-color 0.3s ease;\n    }\n    \n    #searchList li:hover {\n        background-color: #f0f0f0;\n    }\n    \n\n    \/* Estilo do carrossel *\/\n    .carousel-container {\n            position: relative;\n            width: 100%;\n            max-width: 500px;\n            overflow: hidden;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n    }\n\n    .carousel-images {\n            display: flex;\n            align-items: center;\n            transition: transform 0.5s ease;\n    }\n\n    .carousel-images img {\n            width: 100%;\n            height: 100%;\n            flex-shrink: 0; \/* Impede que as imagens encolham *\/\n            border-radius: 5px;\n            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);\n    }\n\n    .carousel-arrow {\n        position: absolute;\n        top: 50%;\n        transform: translateY(-50%);\n        background-color: rgb(255, 255, 255);\n        color: black;\n        cursor: pointer;\n        font-size: 25px;\n        z-index: 10;\n        border: 1px solid black;\n        border-radius: 25px;\n        padding: 0px 10px;\n    }\n\n    .prev {\n            left: 5px;\n    }\n\n    .next {\n            right: 5px;\n    }\n\n    @media (max-width: 992px) {\n        .containerFotos {\n            flex-direction: column;\n            align-items: center;\n            gap: 15px;\n            justify-content: start;\n        }\n        .containerFotos > div {\n            width: 100%;\n        }\n        h1 {\n            padding: 20px 0;\n        }\n        #search {\n            width: 100%;\n        }\n        #searchForm input[type=\"text\"] {\n            width: 70%;\n        }\n        #searchForm input[type=\"submit\"] {\n            width: 30%;\n        }\n        #searchList {\n            max-height: 235px;\n        }\n    }\n<\/style>\n\n\n\n\n<p><\/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\/formulario-mapa-de-extensao\/\">Adicionar extens\u00e3o<\/a><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-group is-nowrap is-layout-flex wp-container-core-group-is-layout-ad2f72ca wp-block-group-is-layout-flex\">\n<div style=\"height:100px;width:0px\" aria-hidden=\"true\" class=\"wp-block-spacer wp-container-content-6388d5dc\"><\/div>\n<\/div>\n\n\n\n<p class=\"has-text-align-left\"><\/p>\n\n\n\n<p>A PROEX UEL integra a universidade com a comunidade, promovendo o conhecimento acad\u00eamico e atendendo \u00e0s necessidades sociais e culturais da regi\u00e3o. Suas a\u00e7\u00f5es extensionistas ampliam a forma\u00e7\u00e3o dos estudantes e contribuem para o desenvolvimento da sociedade.<\/p>\n\n\n\n<p>As atividades da PROEX s\u00e3o organizadas em v\u00e1rias modalidades, como:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Programa de Extens\u00e3o<\/strong>: Focado em a\u00e7\u00f5es comunit\u00e1rias que unem o conhecimento acad\u00eamico \u00e0s necessidades sociais.<\/li>\n\n\n\n<li><strong>Projeto de Extens\u00e3o<\/strong>: Iniciativas espec\u00edficas e tempor\u00e1rias, com objetivos claros, para atender demandas da comunidade.<\/li>\n\n\n\n<li><strong>PAS ou PEPE<\/strong>: Programas que oferecem educa\u00e7\u00e3o permanente, com foco em aprendizado cont\u00ednuo e capacita\u00e7\u00e3o.<\/li>\n\n\n\n<li><strong>Curso de Extens\u00e3o<\/strong>: Cursos livres para o p\u00fablico em geral, complementando o aprendizado acad\u00eamico.<\/li>\n\n\n\n<li><strong>Evento de Extens\u00e3o<\/strong>: Palestras, semin\u00e1rios e workshops que promovem o compartilhamento de conhecimentos.<\/li>\n<\/ol>\n\n\n\n<p>Essas modalidades fortalecem a miss\u00e3o da UEL de expandir o conhecimento e engajar a comunidade em diversas \u00e1reas.<\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Encontre aqui as atividades de Extens\u00e3o da PROEX UEL, que conectam a universidade \u00e0 comunidade por meio de projetos, cursos, eventos e a\u00e7\u00f5es voltadas ao desenvolvimento social, cultural e educacional. A extens\u00e3o universit\u00e1ria \u00e9 um espa\u00e7o de aprendizado e troca de conhecimento, proporcionando experi\u00eancias enriquecedoras para estudantes, professores e a sociedade. Quer saber um pouco [&hellip;]<\/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-4945","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/sites.uel.br\/proex\/wp-json\/wp\/v2\/pages\/4945","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=4945"}],"version-history":[{"count":48,"href":"https:\/\/sites.uel.br\/proex\/wp-json\/wp\/v2\/pages\/4945\/revisions"}],"predecessor-version":[{"id":5510,"href":"https:\/\/sites.uel.br\/proex\/wp-json\/wp\/v2\/pages\/4945\/revisions\/5510"}],"wp:attachment":[{"href":"https:\/\/sites.uel.br\/proex\/wp-json\/wp\/v2\/media?parent=4945"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}