uc-reporting / cna-matriculas.html
BlackMonsterMedia's picture
não me aparece nada - Follow Up Deployment
2b9417c verified
<!DOCTYPE html>
<html lang="pt-PT">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>CNA – Matrículas · Relatórios UC</title>
<!-- Tailwind -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- AOS -->
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet"/>
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<!-- Feather Icons -->
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
<!-- Chart.js -->
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
<style>
.bg-uc-blue { background-color: #003366; }
.text-uc-gold { color: #FFD700; }
.border-uc-gold { border-color: #FFD700; }
.card { transition: all .25s ease; }
.card:hover { transform: translateY(-3px); box-shadow: 0 14px 28px rgba(0,0,0,.08), 0 10px 10px rgba(0,0,0,.04); }
.metrics { font-variant-numeric: tabular-nums; }
</style>
</head>
<body class="bg-gray-50 text-gray-900">
<!-- Header -->
<header class="bg-uc-blue text-white shadow-lg">
<div class="container mx-auto px-6 py-6">
<div class="flex justify-between items-center">
<div>
<h1 class="text-xl font-bold">Universidade de Coimbra</h1>
<p class="text-gray-300 text-sm">Relatórios de Advertising 2025 - Black Monster Media</p>
</div>
<a href="index.html" class="text-uc-gold hover:text-yellow-400 font-medium flex items-center">
<i data-feather="home" class="mr-2"></i> Voltar ao Início
</a>
</div>
</div>
</header>
<!-- Hero -->
<section class="relative bg-gradient-to-br from-blue-500 via-blue-600 to-uc-blue text-white py-16">
<div class="absolute inset-0">
<div class="absolute inset-0 bg-gradient-to-r from-blue-500/20 to-blue-700/30"></div>
<div class="absolute inset-0 bg-[url('http://static.photos/education/1200x630/2')] bg-cover bg-center mix-blend-overlay opacity-10"></div>
</div>
<div class="container mx-auto px-6 relative z-10 text-center">
<div class="flex items-center justify-center mb-4">
<div class="bg-white/20 p-3 rounded-full mr-3">
<i data-feather="edit-3"></i>
</div>
<h2 class="text-3xl md:text-4xl font-bold">CNA – Matrículas</h2>
</div>
<p class="text-lg md:text-xl opacity-90 max-w-3xl mx-auto" data-aos="fade-up">
Enfoque na <strong>comparação nacional</strong> e na <strong>taxa de matrícula</strong> da UC (1.ª fase, 2025).
</p>
</div>
</section>
<!-- KPIs topo -->
<section class="py-12 bg-white">
<div class="container mx-auto px-6">
<div class="grid grid-cols-1 md:grid-cols-4 gap-6">
<div class="card rounded-xl shadow-md border border-gray-100 p-6" data-aos="fade-up">
<div class="text-gray-500 text-sm">Candidatos/as (PT)</div>
<div class="text-3xl font-bold metrics" id="kpi-candidatos">55 292</div>
<div class="text-gray-400 text-xs mt-1">1.ª fase · total nacional</div>
</div>
<div class="card rounded-xl shadow-md border border-gray-100 p-6" data-aos="fade-up" data-aos-delay="100">
<div class="text-gray-500 text-sm">Vagas (PT)</div>
<div class="text-3xl font-bold metrics" id="kpi-vagas">48 718</div>
<div class="text-gray-400 text-xs mt-1">1.ª fase · total nacional</div>
</div>
<div class="card rounded-xl shadow-md border border-gray-100 p-6" data-aos="fade-up" data-aos-delay="200">
<div class="text-gray-500 text-sm">Colocados/as na UC</div>
<div class="text-3xl font-bold metrics" id="kpi-colocados-uc">3 475</div>
<div class="text-gray-400 text-xs mt-1">1.ª fase (2025)</div>
</div>
<div class="card rounded-xl shadow-md border border-gray-100 p-6" data-aos="fade-up" data-aos-delay="300">
<div class="text-gray-500 text-sm">Posição nacional</div>
<div class="text-3xl font-bold metrics">#3</div>
<div class="text-gray-400 text-xs mt-1">por total de colocados/as</div>
</div>
</div>
</div>
</section>
<!-- Destaque -->
<section class="container mx-auto px-6">
<div class="bg-white rounded-xl shadow-md border border-gray-100 p-6 mb-8" data-aos="fade-up">
<div class="flex flex-col md:flex-row items-start md:items-center justify-between gap-4">
<div>
<div class="text-gray-500 text-sm">Comparação nacional</div>
<div class="text-2xl md:text-3xl font-bold leading-snug">
Consolidámos a <u>3.ª maior universidade do país</u>
</div>
<div class="text-gray-400 text-xs mt-1">Critério: total de colocados/as na 1.ª fase (CNA 2025).</div>
</div>
<div class="flex gap-2 flex-wrap">
<span class="inline-flex items-center gap-2 px-3 py-1 rounded-full border text-sm"><i data-feather="hash"></i>#3 nacional</span>
<span class="inline-flex items-center gap-2 px-3 py-1 rounded-full border text-sm"><i data-feather="check-circle"></i>1.ª fase · colocados/as</span>
</div>
</div>
</div>
</section>
<!-- Gráfico ranking -->
<section class="container mx-auto px-6">
<div class="bg-white rounded-xl shadow-md border border-gray-100 p-6 mb-8" data-aos="fade-up">
<h3 class="text-lg font-semibold mb-3">Ranking nacional (1.ª fase · colocados/as)</h3>
<div class="h-80"><canvas id="chart-ranking"></canvas></div>
<p class="text-gray-400 text-xs mt-3">Fonte: DGES / NONIO · Valores confirmados CNA 2025.</p>
</div>
</section>
<!-- Distribuição por opção -->
<section class="container mx-auto px-6">
<div class="bg-white rounded-xl shadow-md border border-gray-100 p-6 mb-8" data-aos="fade-up">
<h3 class="text-lg font-semibold mb-3">Distribuição de colocação por opção (PT)</h3>
<div class="h-64"><canvas id="chart-opcoes"></canvas></div>
<p class="mt-4"> <strong>63,1%</strong> dos/as estudantes foram colocados/as na <strong>1.ª opção</strong>.</p>
</div>
</section>
<!-- Triplas -->
<section class="container mx-auto px-6">
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
<div class="bg-white rounded-xl shadow-md border border-gray-100 p-6 card" data-aos="fade-up">
<h3 class="font-semibold mb-2">Candidaturas à UC</h3>
<div class="text-3xl font-bold metrics">19 334</div>
<div class="text-gray-400 text-xs mt-1">1.ª fase (2025)</div>
<p class="text-gray-600 mt-3">A UC mantém-se entre as mais procuradas, com volume elevado e consistente de candidaturas.</p>
</div>
<div class="bg-white rounded-xl shadow-md border border-gray-100 p-6 card" data-aos="fade-up" data-aos-delay="100">
<h3 class="font-semibold mb-2">Perfil de colocados/as na UC</h3>
<div class="h-60"><canvas id="chart-sexo"></canvas></div>
<p class="text-gray-500 text-sm mt-3">63,3% feminino · 36,7% masculino.</p>
</div>
<div class="bg-white rounded-xl shadow-md border border-gray-100 p-6 card" data-aos="fade-up" data-aos-delay="200">
<h3 class="font-semibold mb-2">Matrículas (UC)</h3>
<div class="text-2xl font-bold metrics">3 256 / 3 475</div>
<div class="text-gray-400 text-xs mt-1">Matriculados/as / Colocados/as</div>
<p class="text-gray-600 mt-3">Taxa global de matrícula: <span id="taxa-matricula" class="font-semibold"></span>.</p>
</div>
</div>
</section>
<!-- % 1.ª opção por Faculdade -->
<section class="container mx-auto px-6">
<div class="bg-white rounded-xl shadow-md border border-gray-100 p-6 mb-8" data-aos="fade-up">
<h3 class="text-lg font-semibold mb-3">% de colocados/as em 1.ª opção por Faculdade</h3>
<div class="h-80"><canvas id="chart-primeira-opcao"></canvas></div>
<p class="text-gray-400 text-xs mt-3">Números absolutos: FLUC 330/540 · FDUC 273/383 · FMUC 199/347 · FCTUC 735/1005 · FFUC 177/258 · FEUC 187/334 · FPCEUC 134/238 · FCDEFUC 89/96 · ESEUC 152/274.</p>
</div>
</section>
<!-- Taxa de matrícula por Faculdade -->
<section class="container mx-auto px-6">
<div class="bg-white rounded-xl shadow-md border border-gray-100 p-6 mb-8" data-aos="fade-up">
<h3 class="text-lg font-semibold mb-3">Taxa de matrícula por Faculdade</h3>
<div class="h-80"><canvas id="chart-matriculas"></canvas></div>
<p class="text-gray-400 text-xs mt-3">Números absolutos: FLUC 494/540 · FDUC 345/383 · FMUC 344/347 · FCTUC 967/1005 · FFUC 246/258 · FEUC 303/334 · FPCEUC 220/238 · FCDEFUC 93/96 · ESEUC 244/274.</p>
</div>
</section>
<!-- Distribuição por nota de candidatura -->
<section class="container mx-auto px-6">
<div class="bg-white rounded-xl shadow-md border border-gray-100 p-6 mb-10" data-aos="fade-up">
<h3 class="text-lg font-semibold mb-3">Distribuição de matriculados/as por nota de candidatura</h3>
<div class="h-80"><canvas id="chart-notas"></canvas></div>
<p class="text-gray-400 text-xs mt-3">Destaque para os intervalos ]16;18] e ]14;16]; há <strong>427</strong> alunos/as com nota ≥18 valores.</p>
</div>
</section>
<!-- 2.ª fase -->
<section class="container mx-auto px-6">
<div class="bg-white rounded-xl shadow-md border border-gray-100 p-6 mb-16" data-aos="fade-up">
<h3 class="text-lg font-semibold mb-2">2.ª fase – Candidaturas UC</h3>
<div class="text-2xl font-bold">3.484</div>
<div class="text-gray-500 text-sm">Candidaturas (2025)</div>
</div>
</section>
<!-- Footer -->
<footer class="bg-gray-800 text-white py-12">
<div class="container mx-auto px-6">
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<div class="md:col-span-2">
<h3 class="text-xl font-bold mb-4">Universidade de Coimbra</h3>
<p class="text-gray-400">Análise de dados e relatórios de marketing institucional.</p>
</div>
<div>
<h3 class="text-xl font-bold mb-4">Contactos</h3>
<address class="text-gray-400 not-italic">
<p>Rua Pedro Nunes, Instituto Pedro Nunes, Bloco C - 3030-792</p>
<p>Email: info@blackmonstermedia.com</p>
<p>Telefone: 914251472</p>
</address>
</div>
</div>
<div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400">
<p>&copy; 2025 Black Monster Media. Todos os direitos reservados.</p>
</div>
</div>
</footer>
<script>
AOS.init({ duration: 800, easing: 'ease-in-out', once: true });
feather.replace();
// =======================
// Dados (limpos)
// =======================
const numerosGerais = { candidatos: 55292, vagas: 48718 };
const uc = { candidaturas: 19334, colocados: 3475, sexo: [{label: 'Feminino', value: 63.3},{label: 'Masculino', value: 36.7}] };
const totalMatriculados = 3256;
const rankingColocados = [
{ universidade: 'UL', colocados: 4246 },
{ universidade: 'UP', colocados: 4202 },
{ universidade: 'UC', colocados: 3475 },
{ universidade: 'UM', colocados: 3431 },
{ universidade: 'UNL', colocados: 3388 },
{ universidade: 'UA', colocados: 3352 },
{ universidade: 'UÉ', colocados: 3452 },
{ universidade: 'ISCTE-IUL', colocados: 3396 },
{ universidade: 'UBI', colocados: 3296 },
{ universidade: 'UTAD', colocados: 3302 },
{ universidade: 'UAç', colocados: 3341 },
{ universidade: 'UAlg', colocados: 1959 },
{ universidade: 'UMa', colocados: 2012 },
];
const procuraOpcoes = [
{ opcao: '1.ª', percent: 63.1 },
{ opcao: '2.ª', percent: 18.5 },
{ opcao: '3.ª', percent: 9.3 },
{ opcao: '4.ª', percent: 5.0 },
{ opcao: '5.ª', percent: 2.6 },
{ opcao: '6.ª', percent: 1.4 },
];
const colocacaoPrimeiraOpcao = [
{ faculdade: 'FLUC', valor: 330, total: 540 },
{ faculdade: 'FDUC', valor: 273, total: 383 },
{ faculdade: 'FMUC', valor: 199, total: 347 },
{ faculdade: 'FCTUC', valor: 735, total: 1005 },
{ faculdade: 'FFUC', valor: 177, total: 258 },
{ faculdade: 'FEUC', valor: 187, total: 334 },
{ faculdade: 'FPCEUC', valor: 134, total: 238 },
{ faculdade: 'FCDEFUC', valor: 89, total: 96 },
{ faculdade: 'ESEUC', valor: 152, total: 274 },
];
const matriculas = [
{ faculdade: 'FLUC', matriculados: 494, colocados: 540 },
{ faculdade: 'FDUC', matriculados: 345, colocados: 383 },
{ faculdade: 'FMUC', matriculados: 344, colocados: 347 },
{ faculdade: 'FCTUC', matriculados: 967, colocados: 1005 },
{ faculdade: 'FFUC', matriculados: 246, colocados: 258 },
{ faculdade: 'FEUC', matriculados: 303, colocados: 334 },
{ faculdade: 'FPCEUC', matriculados: 220, colocados: 238 },
{ faculdade: 'FCDEFUC', matriculados: 93, colocados: 96 },
{ faculdade: 'ESEUC', matriculados: 244, colocados: 274 },
];
const notas = [
{ intervalo: ']18;20]', qtd: 427 },
{ intervalo: ']16;18]', qtd: 1188 },
{ intervalo: ']14;16]', qtd: 1162 },
{ intervalo: ']12;14]', qtd: 455 },
{ intervalo: '[10;12]', qtd: 24 },
];
// Util
const pct = (a,b) => b === 0 ? 0 : Math.round((a/b)*1000)/10; // 1 casa decimal
document.getElementById('kpi-candidatos').textContent = numerosGerais.candidatos.toLocaleString('pt-PT');
document.getElementById('kpi-vagas').textContent = numerosGerais.vagas.toLocaleString('pt-PT');
document.getElementById('kpi-colocados-uc').textContent = uc.colocados.toLocaleString('pt-PT');
document.getElementById('taxa-matricula').textContent = pct(totalMatriculados, uc.colocados) + '%';
// Gráficos (cores deixam o Chart.js escolher por defeito)
// Ranking
new Chart(document.getElementById('chart-ranking'), {
type: 'bar',
data: {
labels: rankingColocados.map(r => r.universidade),
datasets: [{ label: 'Colocados/as', data: rankingColocados.map(r => r.colocados), borderWidth: 1 }]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: { tooltip: { callbacks: { label: ctx => ctx.parsed.y.toLocaleString('pt-PT') } } },
scales: { y: { beginAtZero: true } }
}
});
// Opções
new Chart(document.getElementById('chart-opcoes'), {
type: 'bar',
data: {
labels: procuraOpcoes.map(o => o.opcao),
datasets: [{ label: '%', data: procuraOpcoes.map(o => o.percent), borderWidth: 1 }]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: { tooltip: { callbacks: { label: ctx => ctx.parsed.y + '%' } } },
scales: { y: { beginAtZero: true, ticks: { callback: v => v + '%' } } }
}
});
// Sexo
new Chart(document.getElementById('chart-sexo'), {
type: 'pie',
data: {
labels: uc.sexo.map(s => s.label),
datasets: [{ data: uc.sexo.map(s => s.value) }]
},
options: { responsive: true, maintainAspectRatio: false }
});
// 1.ª opção por Faculdade
new Chart(document.getElementById('chart-primeira-opcao'), {
type: 'bar',
data: {
labels: colocacaoPrimeiraOpcao.map(f => f.faculdade),
datasets: [{
label: '% 1.ª opção',
data: colocacaoPrimeiraOpcao.map(f => pct(f.valor, f.total)),
borderWidth: 1
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: { tooltip: { callbacks: { label: ctx => ctx.parsed.y + '%' } } },
scales: { y: { beginAtZero: true, ticks: { callback: v => v + '%' } } }
}
});
// Matrículas por Faculdade
new Chart(document.getElementById('chart-matriculas'), {
type: 'bar',
data: {
labels: matriculas.map(m => m.faculdade),
datasets: [{
label: 'Taxa de matrícula (%)',
data: matriculas.map(m => pct(m.matriculados, m.colocados)),
borderWidth: 1
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: { tooltip: { callbacks: { label: ctx => ctx.parsed.y + '%' } } },
scales: { y: { beginAtZero: true, ticks: { callback: v => v + '%' } } }
}
});
// Notas
new Chart(document.getElementById('chart-notas'), {
type: 'bar',
data: {
labels: notas.map(n => n.intervalo),
datasets: [{ label: 'Matriculados/as', data: notas.map(n => n.qtd), borderWidth: 1 }]
},
options: { responsive: true, maintainAspectRatio: false, scales: { y: { beginAtZero: true } } }
});
</script>
</body>
</html>