:root {
--semuni-primary: #003366;
--semuni-secondary: #006699;
--semuni-accent: #ff6600;
--semuni-bg: #f8f9fa;
--semuni-card-bg: #ffffff;
--semuni-text: #333333;
--semuni-border: #e2e8f0;
}
.semuni-app {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
color: var(--semuni-text);
max-width: 1300px;
margin: 0 auto;
padding: 20px;
background-color: #fff;
}
/* BARRA DE PESQUISA E FILTROS */
.semuni-filters {
background: var(--semuni-bg);
padding: 20px;
border-radius: 12px;
border: 1px solid var(--semuni-border);
margin-bottom: 24px;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 15px;
}
.semuni-filter-group {
display: flex;
flex-direction: column;
}
.semuni-filter-group label {
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
margin-bottom: 6px;
color: var(--semuni-primary);
}
.semuni-filter-group input,
.semuni-filter-group select {
padding: 10px 12px;
border: 1px solid #cbd5e1;
border-radius: 6px;
font-size: 14px;
background-color: #fff;
outline: none;
transition: border-color 0.2s;
}
.semuni-filter-group input:focus,
.semuni-filter-group select:focus {
border-color: var(--semuni-secondary);
}
/* STATUS E CONTAGEM */
.semuni-status-bar {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 15px;
font-size: 14px;
color: #64748b;
}
/* GRID DE CARDS */
.semuni-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 20px;
min-height: 300px;
}
.semuni-card {
background: var(--semuni-card-bg);
border: 1px solid var(--semuni-border);
border-radius: 10px;
padding: 20px;
display: flex;
flex-direction: column;
justify-content: space-between;
transition: transform 0.2s, box-shadow 0.2s;
}
.semuni-card:hover {
transform: translateY(-3px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
}
.semuni-card-badges {
display: flex;
gap: 8px;
flex-wrap: wrap;
margin-bottom: 12px;
}
.semuni-badge {
font-size: 11px;
font-weight: 600;
padding: 4px 8px;
border-radius: 20px;
text-transform: uppercase;
}
.badge-area { background: #e0f2fe; color: #0369a1; }
.badge-unidade { background: #f1f5f9; color: #475569; }
.semuni-card-title {
font-size: 18px;
font-weight: 700;
color: var(--semuni-primary);
margin: 0 0 12px 0;
line-height: 1.4;
}
.semuni-card-info {
font-size: 13px;
color: #475569;
margin-bottom: 6px;
display: flex;
align-items: center;
gap: 6px;
}
.semuni-btn {
margin-top: 15px;
padding: 10px;
background: var(--semuni-primary);
color: #ffffff;
text-align: center;
border: none;
border-radius: 6px;
font-weight: 600;
cursor: pointer;
transition: background 0.2s;
width: 100%;
}
.semuni-btn:hover {
background: var(--semuni-secondary);
}
/* PAGINAÇÃO */
.semuni-pagination {
display: flex;
justify-content: center;
gap: 8px;
margin-top: 30px;
}
.semuni-page-btn {
padding: 8px 14px;
border: 1px solid var(--semuni-border);
background: #fff;
cursor: pointer;
border-radius: 6px;
font-weight: 600;
}
.semuni-page-btn.active {
background: var(--semuni-primary);
color: #fff;
border-color: var(--semuni-primary);
}
/* MODAL (POP-UP) */
.semuni-modal-overlay {
position: fixed;
top: 0; left: 0; width: 100%; height: 100%;
background: rgba(0, 0, 0, 0.6);
display: flex;
justify-content: center;
align-items: center;
z-index: 99999;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s;
padding: 20px;
}
.semuni-modal-overlay.active {
opacity: 1;
pointer-events: auto;
}
.semuni-modal {
background: #fff;
width: 100%;
max-width: 650px;
max-height: 90vh;
border-radius: 12px;
padding: 25px;
overflow-y: auto;
position: relative;
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}
.semuni-modal-close {
position: absolute;
top: 15px; right: 20px;
font-size: 24px;
background: none;
border: none;
cursor: pointer;
color: #64748b;
}
.semuni-modal-desc {
line-height: 1.6;
color: #334155;
margin: 15px 0;
font-size: 15px;
}
/* LOADING SPINNER */
.semuni-loading {
text-align: center;
padding: 50px;
font-size: 18px;
color: var(--semuni-primary);
grid-column: 1 / -1;
}
🔗 Inscrever-se nesta atividade no SIGAA
// Link oficial da sua planilha do Google Sheets (CSV)
const CSV_URL = "https://docs.google.com/spreadsheets/d/e/2PACX-1vS7GJMDLazHUYeGrm5yZ9pedDUrMX3F2ZoFx3cnN6gtu9dOfXPwYzM6V1Gu7S8eKA/pubhtml";
let allEvents = [];
let filteredEvents = [];
let currentPage = 1;
const itemsPerPage = 12;
function getVal(row, possibleNames) {
for (let name of possibleNames) {
if (row[name] !== undefined && row[name] !== null && row[name] !== "") {
return String(row[name]).trim();
}
}
return "";
}
// O PAPAPARSE FAZ O DOWNLOAD DA PLANILHA EM TEMPO REAL SEMPRE QUE A PÁGINA É ABERTA
Papa.parse(CSV_URL, {
download: true,
header: true,
skipEmptyLines: true,
complete: function(results) {
allEvents = results.data.map((row, index) => ({
id: getVal(row, ['Código', 'Codigo', 'ID']) || `EV-${index}`,
titulo: getVal(row, ['Título', 'Titulo', 'Nome']),
desc: getVal(row, ['Descrição', 'Descricao', 'Resumo']),
diaExibicao: getVal(row, ['Dia_Exibicao', 'Dia Exibição', 'Data', 'Dia']),
dataFiltro: getVal(row, ['Data_Filtro', 'Data Filtro', 'Data']),
horario: getVal(row, ['Horário', 'Horario', 'Hora']),
unidade: getVal(row, ['Unidade', 'Setor', 'Faculdade']),
local: getVal(row, ['Local de Realização', 'Local', 'Espaço']),
area: getVal(row, ['Área Temática', 'Area Tematica', 'Área']),
resp: getVal(row, ['Responsável', 'Responsavel', 'Coordenador']),
email: getVal(row, ['E-mail do Responsável', 'E-mail', 'Email'])
})).filter(e => e.titulo !== "");
populateDropdowns();
applyFilters();
},
error: function(err) {
document.getElementById('cardGrid').innerHTML =
`
`;
grid.appendChild(card);
});
renderPagination();
}
function renderPagination() {
const totalPages = Math.ceil(filteredEvents.length / itemsPerPage);
const pagEl = document.getElementById('pagination');
const pageInfo = document.getElementById('pageInfo');
pagEl.innerHTML = "";
if (totalPages 1) {
pagEl.innerHTML += ``;
}
for (let i = Math.max(1, currentPage - 2); i <= Math.min(totalPages, currentPage + 2); i++) {
const active = (i === currentPage) ? 'active' : '';
pagEl.innerHTML += ``;
}
if (currentPage < totalPages) {
pagEl.innerHTML += ``;
}
}
function changePage(page) {
currentPage = page;
renderGrid();
window.scrollTo({ top: document.querySelector('.semuni-filters').offsetTop - 20, behavior: 'smooth' });
}
function openModal(id) {
const event = allEvents.find(e => e.id === id);
if (!event) return;
document.getElementById('modalTitle').innerText = event.titulo;
document.getElementById('modalCode').innerText = event.id;
document.getElementById('modalDesc').innerText = event.desc || 'Nenhuma descrição detalhada informada para esta atividade.';
document.getElementById('modalDate').innerText = event.diaExibicao || event.dataFiltro || 'A confirmar';
document.getElementById('modalTime').innerText = event.horario || 'A confirmar';
document.getElementById('modalLocation').innerText = event.local || 'A confirmar';
document.getElementById('modalResp').innerText = event.resp || 'Equipe DEX';
document.getElementById('modalEmail').innerText = event.email || 'Não informado';
document.getElementById('modalBadges').innerHTML = `
${event.area || 'Geral'}
${event.unidade || 'UnB'}
`;
document.getElementById('modalOverlay').classList.add('active');
}
function closeModal() {
document.getElementById('modalOverlay').classList.remove('active');
}
document.getElementById('modalOverlay').addEventListener('click', function(e) {
if (e.target === this) closeModal();
});
document.getElementById('searchInput').addEventListener('input', applyFilters);
document.getElementById('filterUnidade').addEventListener('change', applyFilters);
document.getElementById('filterArea').addEventListener('change', applyFilters);
document.getElementById('filterData').addEventListener('change', applyFilters);
Todas as Unidades
Todas as Áreas
Qualquer Data
Carregando programação em tempo real...
⏳ Sincronizando dados com a planilha oficial...
Código SIGAA:
📅 Data(s):
⏰ Horário:
📍 Local:
👤 Responsável: ()
🔗 Inscrever-se nesta atividade no SIGAA
❌ Erro ao carregar planilha. Verifique a conexão com o link do Google Sheets.
`;
}
});
function populateDropdowns() {
const unidades = [...new Set(allEvents.map(e => e.unidade).filter(Boolean))].sort();
const areas = [...new Set(allEvents.map(e => e.area).filter(Boolean))].sort();
const datasSet = new Set();
allEvents.forEach(e => {
if (e.dataFiltro) {
e.dataFiltro.split(',').forEach(d => datasSet.add(d.trim()));
}
});
const datas = [...datasSet].sort();
const selUnidade = document.getElementById('filterUnidade');
selUnidade.innerHTML = 'Todas as Unidades';
unidades.forEach(u => selUnidade.innerHTML += `${u}`);
const selArea = document.getElementById('filterArea');
selArea.innerHTML = 'Todas as Áreas';
areas.forEach(a => selArea.innerHTML += `${a}`);
const selData = document.getElementById('filterData');
selData.innerHTML = 'Qualquer Data';
datas.forEach(d => {
if(d) selData.innerHTML += `${d}`;
});
}
function applyFilters() {
const term = document.getElementById('searchInput').value.toLowerCase();
const valUnidade = document.getElementById('filterUnidade').value;
const valArea = document.getElementById('filterArea').value;
const valData = document.getElementById('filterData').value;
filteredEvents = allEvents.filter(event => {
const matchText = !term ||
event.titulo.toLowerCase().includes(term) ||
event.desc.toLowerCase().includes(term) ||
event.id.toLowerCase().includes(term);
const matchUnidade = !valUnidade || event.unidade === valUnidade;
const matchArea = !valArea || event.area === valArea;
const matchData = !valData || (event.dataFiltro && event.dataFiltro.includes(valData));
return matchText && matchUnidade && matchArea && matchData;
});
currentPage = 1;
renderGrid();
}
function renderGrid() {
const grid = document.getElementById('cardGrid');
const countEl = document.getElementById('resultCount');
const pageInfo = document.getElementById('pageInfo');
countEl.innerText = `Encontradas: ${filteredEvents.length} atividades`;
if (filteredEvents.length === 0) {
grid.innerHTML = `Nenhuma atividade encontrada com os filtros selecionados. 😕
`;
document.getElementById('pagination').innerHTML = "";
pageInfo.innerText = "";
return;
}
const startIndex = (currentPage - 1) * itemsPerPage;
const endIndex = startIndex + itemsPerPage;
const paginatedItems = filteredEvents.slice(startIndex, endIndex);
grid.innerHTML = "";
paginatedItems.forEach(event => {
const card = document.createElement('div');
card.className = "semuni-card";
card.innerHTML = `
${event.area || 'Geral'}
${event.unidade || 'UnB'}
${event.titulo}
📅 Dia: ${event.diaExibicao || event.dataFiltro || 'A confirmar'}
⏰ Horário: ${event.horario || 'A confirmar'}
📍 Local: ${event.local || 'Campus'}