Catálogo de 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: 1350px; margin: 0 auto; padding: 20px; display: flex; gap: 30px; }
.extensao-coluna-filtros { width: 300px; flex-shrink: 0; }
.extensao-coluna-cards { flex-grow: 1; }
.extensao-filtros { background: #ffffff; padding: 20px; border-radius: 12px; border: 1px solid #e2e8f0; display: flex; flex-direction: column; gap: 20px; position: sticky; top: 20px; }
.extensao-label { font-size: 12px; font-weight: 700; color: #646363; text-transform: uppercase; margin-bottom: 4px; display: block; }
.extensao-input, .extensao-select { width: 100%; padding: 8px 12px; border: 1px solid #9D9D9C; border-radius: 8px; box-sizing: border-box; color: #646363; font-size: 13px; }
.extensao-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
/* Card */
.extensao-card { background: #ffffff; padding: 20px; border-radius: 12px; border: 1px solid #e2e8f0; cursor: pointer; transition: 0.2s; display: flex; flex-direction: column; justify-content: space-between; text-align: left; }
.extensao-card:hover { border-color: var(--card-color); box-shadow: 0 5px 15px rgba(0,0,0,0.08); }
.extensao-badge-container { display: flex; justify-content: flex-start; width: 100%; }
.extensao-badge { display: inline-block; padding: 4px 10px; border-radius: 6px; font-size: 10px; font-weight: 700; }
.extensao-titulo { font-size: 16px; font-weight: 700; line-height: 1.35; margin: 15px 0; text-align: left; }
.extensao-footer-card { display: flex; justify-content: flex-end; width: 100%; }
.extensao-saiba-mais { font-size: 12px; font-weight: 700; color: #009FE3; cursor: pointer; display: inline-block; }
/* Pop-up */
.extensao-modal-overlay { display: none; position: fixed; inset: 0; z-index: 99999; background: rgba(0,0,0,0.6); align-items: center; justify-content: center; padding: 20px; }
.extensao-modal-box { background: white; border-radius: 14px; max-width: 850px; width: 100%; max-height: 90vh; overflow-y: auto; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); }
.extensao-modal-header { padding: 20px 25px; color: white; display: flex; justify-content: space-between; align-items: center; }
.extensao-modal-title { margin: 0; font-size: 22px; line-height: 1.3; font-weight: 700; }
.social-icon-link { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; font-weight: 600; font-size: 13px; color: #009FE3; }
.social-icon-link:hover { text-decoration: underline; }
const csvUrl = 'https://dex.unb.br/wp-content/uploads/2026/08/Teste-Planilha-Cursos-Extensao4.csv';
const areaColors = {
'Educação': '#047857',
'Saúde': '#be123c',
'Cultura': '#7e22ce',
'Tecnologia': '#0369a1',
'Tecnologia da Informação': '#0284c7',
'Justiça e Direitos Humanos': '#b45309',
'Comunicação': '#4338ca',
'Meio Ambiente': '#15803d',
'Direitos Humanos e Justiça': '#b45309',
'Trabalho': '#c2410c',
'Produção': '#0e7490',
'Geral': '#009BA4'
};
function getAreaColor(area) {
return areaColors[area] || '#009BA4';
}
function formatSocialLink(url) {
if (!url || url.trim() === '' || url.trim() === '-') return 'Não informado';
let cleanUrl = url.trim();
if (!cleanUrl.startsWith('http://') && !cleanUrl.startsWith('https://')) {
cleanUrl = 'https://' + cleanUrl;
}
let lowerUrl = cleanUrl.toLowerCase();
if (lowerUrl.includes('instagram.com')) {
return `
Instagram`;
} else if (lowerUrl.includes('facebook.com')) {
return `
Facebook`;
} else {
return `🔗 Acessar Link`;
}
}
Papa.parse(csvUrl, {
download: true,
header: true,
skipEmptyLines: true,
delimiter: ';',
complete: (res) => {
extData = res.data.map(i => ({
codigo: i['Código'] || '',
titulo: i['Título'] || '',
unidade: i['Unidade'] || 'Geral',
area: i['Área Temática'] || 'Geral',
descricao: i['Descrição'] || '',
local: i['Local de Realização'] || 'Não informado',
ods: i['ODS'] || 'N/A',
redes: i['Redes Sociais'] || '',
coordenacao: i['Coordenador'] || 'Não informada',
contato: i['E-mail'] || 'Não informado'
}));
['Area', 'Unit', 'Ods'].forEach(f => {
const key = f.toLowerCase() === 'area' ? 'area' : f.toLowerCase() === 'unit' ? 'unidade' : 'ods';
const list = [...new Set(extData.map(i => i[key]))].sort();
const select = document.getElementById('ext'+f);
select.innerHTML = 'Todas';
list.forEach(v => select.innerHTML += `${v}`);
});
render(extData);
}
});
function render(data) {
const grid = document.getElementById('extGrid'); grid.innerHTML = '';
data.forEach(item => {
const color = getAreaColor(item.area);
const card = document.createElement('div');
card.className = 'extensao-card';
card.style.setProperty('--card-color', color);
card.innerHTML = `
`;
card.onclick = () => {
document.getElementById('mHeader').style.background = color;
document.getElementById('mCodigo').innerText = 'Cód: ' + item.codigo;
document.getElementById('mHeaderArea').innerText = item.area;
document.getElementById('mTitle').innerText = item.titulo;
document.getElementById('mDesc').innerText = item.descricao;
document.getElementById('mCoord').innerText = item.coordenacao;
document.getElementById('mContato').innerText = item.contato;
document.getElementById('mUnit').innerText = item.unidade;
document.getElementById('mLocal').innerText = item.local;
document.getElementById('mOds').innerText = item.ods;
document.getElementById('mRedes').innerHTML = formatSocialLink(item.redes);
document.getElementById('extModal').style.display = 'flex';
};
grid.appendChild(card);
});
}
function filter() {
const s = document.getElementById('extSearch').value.toLowerCase();
const u = document.getElementById('extUnit').value;
const a = document.getElementById('extArea').value;
const o = document.getElementById('extOds').value;
render(extData.filter(i => i.titulo.toLowerCase().includes(s) && (u==='' || i.unidade===u) && (a==='' || i.area===a) && (o==='' || i.ods===o)));
}
document.querySelectorAll('input, select').forEach(el => el.oninput = filter);
Todas
Todas
Todas
Coordenação:
Contato (E-mail):
Unidade:
Local:
ODS:
Redes Sociais:
${item.area}
${item.titulo}
Saiba mais →