Projetos e Ações de Extensão UnB
Confira abaixo as ações de extensão vigentes ofertadas pela Universidade de Brasília.
Para participar, busque a área de interesse, acesse as informações completas e fale com a Coordenação da atividade para saber como se vincular como bolsista ou voluntário de extensão.
.extensao-wrapper {
font-family: 'Inter', sans-serif;
color: #1e293b;
max-width: 1200px;
margin: 0 auto;
padding: 20px 10px;
}
.extensao-filtros {
background: #ffffff;
padding: 20px;
border-radius: 12px;
border: 1px solid #e2e8f0;
box-shadow: 0 1px 3px rgba(0,0,0,0.05);
margin-bottom: 30px;
display: flex;
flex-direction: column;
gap: 15px;
}
@media (min-width: 768px) {
.extensao-filtros {
flex-direction: row;
justify-content: space-between;
align-items: center;
}
}
.extensao-filtro-grupo {
width: 100%;
}
@media (min-width: 768px) {
.extensao-filtro-grupo {
width: 48%;
}
}
.extensao-label {
display: block;
font-size: 11px;
font-weight: 700;
color: #64748b;
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: 6px;
}
.extensao-input, .extensao-select {
width: 100%;
padding: 10px 14px;
border: 1px solid #cbd5e1;
border-radius: 8px;
font-size: 14px;
outline: none;
box-sizing: border-box;
}
.extensao-input:focus, .extensao-select:focus {
border-color: #009FE3;
box-shadow: 0 0 0 2px rgba(0, 159, 227, 0.2);
}
.extensao-grid {
display: grid;
grid-template-columns: 1fr;
gap: 20px;
}
@media (min-width: 640px) {
.extensao-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
.extensao-grid { grid-template-columns: repeat(3, 1fr); }
}
.extensao-card {
background: #ffffff;
padding: 20px;
border-radius: 12px;
border: 1px solid #e2e8f0;
box-shadow: 0 1px 3px rgba(0,0,0,0.05);
cursor: pointer;
display: flex;
flex-direction: column;
justify-content: space-between;
transition: all 0.25s ease;
}
.extensao-card:hover {
transform: translateY(-3px);
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
border-color: var(--hover-color, #009BA4) !important;
}
.extensao-badge {
display: inline-flex;
align-items: center;
padding: 4px 12px;
border-radius: 20px;
font-size: 11px;
font-weight: 700;
margin-bottom: 12px;
border: 1px solid transparent;
}
.extensao-titulo {
font-size: 15px;
font-weight: 700;
color: #1e293b;
line-height: 1.4;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.extensao-card-footer {
margin-top: 20px;
padding-top: 12px;
border-top: 1px solid #f1f5f9;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 12px;
font-weight: 600;
color: #64748b;
}
.extensao-card-footer span:last-child {
color: #009FE3;
font-size: 16px;
}
.extensao-sem-resultados {
display: none;
text-align: center;
padding: 40px;
background: white;
border-radius: 12px;
border: 1px solid #e2e8f0;
color: #64748b;
}
/* Modal / Pop-up */
.extensao-modal-overlay {
display: none;
position: fixed;
inset: 0;
z-index: 99999;
background: rgba(15, 23, 42, 0.6);
backdrop-filter: blur(2px);
align-items: center;
justify-content: center;
padding: 15px;
}
.extensao-modal-box {
background: white;
border-radius: 14px;
max-width: 550px;
width: 100%;
overflow: hidden;
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2);
}
.extensao-modal-header {
background: #163253;
color: white;
padding: 16px 20px;
display: flex;
justify-content: space-between;
align-items: center;
}
.extensao-modal-codigo {
background: #009BA4;
color: white;
padding: 3px 10px;
border-radius: 20px;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
}
.extensao-modal-close {
background: none;
border: none;
color: #cbd5e1;
font-size: 24px;
cursor: pointer;
}
.extensao-modal-close:hover { color: white; }
.extensao-modal-body {
padding: 20px;
max-height: 70vh;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 15px;
}
.extensao-modal-title {
font-size: 18px;
font-weight: 700;
color: #0f172a;
line-height: 1.3;
}
.extensao-modal-label {
font-size: 11px;
font-weight: 700;
color: #94a3b8;
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: 3px;
}
.extensao-modal-desc {
background: #f8fafc;
padding: 12px;
border-radius: 8px;
border: 1px solid #f1f5f9;
font-size: 13px;
color: #475569;
line-height: 1.5;
}
.extensao-modal-footer {
background: #f8fafc;
padding: 12px 20px;
border-top: 1px solid #f1f5f9;
text-align: right;
}
.extensao-btn-fechar {
background: #e2e8f0;
border: none;
padding: 8px 16px;
border-radius: 8px;
font-size: 13px;
font-weight: 600;
color: #334155;
cursor: pointer;
}
.extensao-btn-fechar:hover { background: #cbd5e1; }
const extPalettes = [
{ bg: '#ecfdf5', color: '#047857', border: '#a7f3d0' },
{ bg: '#f0f9ff', color: '#0369a1', border: '#bae6fd' },
{ bg: '#faf5ff', color: '#7e22ce', border: '#e9d5ff' },
{ bg: '#fffbeb', color: '#b45309', border: '#fde68a' },
{ bg: '#fff1f2', color: '#be123c', border: '#fecdd3' },
{ bg: '#eef2ff', color: '#4338ca', border: '#c7d2fe' },
{ bg: '#f0fdf4', color: '#15803d', border: '#bbf7d0' },
{ bg: '#fff7ed', color: '#c2410c', border: '#fed7aa' },
{ bg: '#ecfeff', color: '#0e7490', border: '#a5f3fc' },
{ bg: '#fdf4ff', color: '#a21caf', border: '#f5d0fe' }
];
const extUnitMap = {};
function getExtStyle(unit) {
if (!unit) return extPalettes[0];
if (!extUnitMap[unit]) {
const count = Object.keys(extUnitMap).length;
extUnitMap[unit] = extPalettes[count % extPalettes.length];
}
return extUnitMap[unit];
}
let extData = [];
const fallbackData = [
{ codigo: "001", titulo: "Programa de Alfabetização Cidadã na EJA", descricao: "Oficinas de leitura crítica e apoio escolar.", unidade: "Faculdade de Educação (FE)", coordenacao: "Profa. Maria", contato: "alfabetizacao@unb.br" }
];
function initExtWidget(data) {
document.getElementById('extLoading').style.display = 'none';
extData = data.map(item => {
const newItem = {};
for (let key in item) {
const cleanKey = key.trim().toLowerCase();
newItem[cleanKey] = item[key];
}
return {
codigo: newItem.codigo || newItem.código || '',
titulo: newItem.titulo || newItem.título || '',
descricao: newItem.descricao || newItem.descrição || '',
unidade: newItem.unidade || 'Geral',
coordenacao: newItem.coordenacao || newItem.coordenação || 'Não informada',
contato: newItem.contato || newItem.contatos || 'Não informado'
};
}).filter(item => item && (item.titulo || item.codigo));
// Ordenar alfabeticamente por Título (A-Z)
extData.sort((a, b) => a.titulo.localeCompare(b.titulo, 'pt-BR', { sensitivity: 'base' }));
populateExtUnits(extData);
renderExtCards(extData);
}
function populateExtUnits(data) {
const select = document.getElementById('extUnit');
select.innerHTML = 'Todas as Unidades';
const units = [...new Set(data.map(i => i.unidade))].filter(Boolean).sort();
units.forEach(unit => {
const opt = document.createElement('option');
opt.value = unit;
opt.textContent = unit;
select.appendChild(opt);
});
}
function renderExtCards(data) {
const grid = document.getElementById('extGrid');
const noRes = document.getElementById('extNoResults');
grid.innerHTML = '';
if (!data || data.length === 0) {
noRes.style.display = 'block';
return;
} else {
noRes.style.display = 'none';
}
data.forEach(item => {
if (!item.titulo) return;
const card = document.createElement('div');
card.className = 'extensao-card';
const st = getExtStyle(item.unidade);
card.style.setProperty('--hover-color', st.color);
card.innerHTML = `
Todas as Unidades
Carregando informações da planilha oficial...
Nenhum projeto encontrado
Tente buscar por outros termos ou limpar os filtros aplicados.
Unidade Acadêmica
Descrição Completa da Ação
Coordenação
Contato Oficial
${item.unidade}
${item.titulo}
Ver detalhes completos
→
`;
card.onclick = () => openExtModal(item);
grid.appendChild(card);
});
}
function openExtModal(item) {
document.getElementById('mCodigo').innerText = item.codigo ? `Cód. ${item.codigo}` : 'Detalhes';
document.getElementById('mTitle').innerText = item.titulo || '';
document.getElementById('mUnit').innerText = item.unidade || '';
document.getElementById('mDesc').innerText = item.descricao || 'Nenhuma descrição informada.';
document.getElementById('mCoord').innerText = item.coordenacao || 'Não informada';
document.getElementById('mContato').innerText = item.contato || 'Não informado';
document.getElementById('extModal').style.display = 'flex';
}
function closeExtModal() {
document.getElementById('extModal').style.display = 'none';
}
document.getElementById('mCloseX').onclick = closeExtModal;
document.getElementById('mCloseBtn').onclick = closeExtModal;
document.getElementById('extModal').onclick = (e) => {
if (e.target.id === 'extModal') closeExtModal();
};
function filterExtData() {
const query = document.getElementById('extSearch').value.toLowerCase();
const unit = document.getElementById('extUnit').value;
const filtered = extData.filter(item => {
const matchesQuery = item.titulo.toLowerCase().includes(query);
const matchesUnit = unit === '' || item.unidade === unit;
return matchesQuery && matchesUnit;
});
renderExtCards(filtered);
}
document.getElementById('extSearch').oninput = filterExtData;
document.getElementById('extUnit').onchange = filterExtData;
// URL oficial do CSV fornecida
const csvUrl = 'https://dex.unb.br/wp-content/uploads/2026/08/Teste-Planilha-Cursos-Extensao-AtividadesExtensao.csv';
Papa.parse(csvUrl, {
download: true,
header: true,
skipEmptyLines: true,
complete: function(results) {
if (results.data && results.data.length > 0) {
initExtWidget(results.data);
} else {
initExtWidget(fallbackData);
}
},
error: function(err) {
console.warn('Aviso: Falha ao carregar link externo, ativando fallback.', err);
initExtWidget(fallbackData);
}
});