GARR participates in the Trusted Certificate Service (TCS) promoted by Géant for the benefit of European research networks
/* body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
min-height: 100vh;
}
*/
.header {
text-align: center;
margin-bottom: 3rem;
color: black;
}
.header h1 {
font-size: 2.5rem;
font-weight: 300;
margin-bottom: 0.5rem;
}
.header p {
font-size: 1.1rem;
opacity: 0.9;
margin-top: 0.5rem;
}
.chart-card {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
border-radius: 20px;
padding: 2rem;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
transition: transform 0.3s ease, box-shadow 0.3s ease;
margin-bottom: 2rem;
}
.chart-card:hover {
transform: translateY(-5px);
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}
.chart-header {
text-align: center;
margin-bottom: 1.5rem;
}
.chart-title {
font-size: 1.3rem;
font-weight: 600;
color: #2d3748;
margin-bottom: 0.3rem;
}
.chart-subtitle {
font-size: 0.85rem;
color: #383b40;
line-height: 1.4;
}
.chart-container {
position: relative;
height: 400px;
margin-bottom: 1rem;
}
.controls {
display: flex;
justify-content: center;
align-items: center;
gap: 1rem;
flex-wrap: wrap;
margin-top: 1rem;
}
.download-btn {
background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
color: white;
border: none;
padding: 0.6rem 1.2rem;
border-radius: 8px;
font-size: 0.9rem;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(30, 60, 114, 0.3);
}
.download-btn:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(30, 60, 114, 0.4);
}
.stats-summary {
background: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(10px);
border-radius: 15px;
padding: 1.5rem;
}
.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1rem;
}
.stat-item {
text-align: center;
padding: 1rem;
border-radius: 10px;
background: linear-gradient(135deg, #f7fafc 0%, #edf2f7 100%);
}
.stat-number {
font-size: 1.8rem;
font-weight: 700;
color: #2d3748;
}
.stat-label {
font-size: 0.9rem;
color: #718096;
margin-top: 0.25rem;
}
@media (max-width: 768px) {
.header h1 {
font-size: 2rem;
}
.chart-container {
height: 300px;
}
body {
padding: 1rem;
}
}
// Color palette
const colors = {
primary: [
'#667eea', '#764ba2', '#f093fb', '#f5576c',
'#4facfe', '#00f2fe', '#43e97b', '#38f9d7',
'#ffecd2', '#fcb69f', '#a8edea', '#fed6e3'
]
};
// Chart.js default options
const defaultOptions = {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
labels: {
font: { size: 12, weight: '500' },
color: '#4a5568',
padding: 15
}
},
tooltip: {
backgroundColor: 'rgba(0, 0, 0, 0.8)',
titleColor: 'white',
bodyColor: 'white',
borderColor: 'rgba(255, 255, 255, 0.2)',
borderWidth: 1,
cornerRadius: 8,
padding: 12
}
}
};
// Data definitions
const certificatesData = {
labels: ['2019', '2020', '2021', '2022', '2023', '2024'],
data: [7288, 6664, 58182, 37753, 35307, 107252]
};
// Chart instance
let certificatesChart;
// Initialize Certificates Chart
function createCertificatesChart() {
const ctx = document.getElementById('certificatesChart').getContext('2d');
certificatesChart = new Chart(ctx, {
type: 'line',
data: {
labels: certificatesData.labels,
datasets: [{
label: 'Digital Certificates Issued',
data: certificatesData.data,
borderColor: colors.primary[3],
backgroundColor: colors.primary[3] + '20',
borderWidth: 3,
fill: true,
tension: 0.4,
pointRadius: 6,
pointHoverRadius: 8,
pointBackgroundColor: colors.primary[3],
pointBorderColor: '#ffffff',
pointBorderWidth: 2
}]
},
options: {
...defaultOptions,
scales: {
y: {
beginAtZero: true,
title: { display: true, text: 'Certificates' },
ticks: {
callback: function(value) {
if (value >= 1000) {
return (value / 1000) + 'K';
}
return value.toLocaleString();
}
}
},
x: { title: { display: true, text: 'Year' } }
}
}
});
}
// Download handler
document.getElementById('downloadCertificates').addEventListener('click', () => {
const link = document.createElement('a');
link.download = 'cs-digital-certificates-issued.png';
link.href = certificatesChart.toBase64Image();
link.click();
});
// Update stats
function updateStats() {
const totalCertificates = certificatesData.data.reduce((a, b) => a + b, 0);
const maxYear = certificatesData.labels[certificatesData.data.indexOf(Math.max(...certificatesData.data))];
const maxValue = Math.max(...certificatesData.data);
const growth2024 = ((certificatesData.data[5] - certificatesData.data[4]) / certificatesData.data[4] * 100).toFixed(1);
const avgPerYear = Math.round(totalCertificates / certificatesData.data.length);
const stats = [
{ label: 'Total Certificates (2019-2024)', value: totalCertificates.toLocaleString() },
{ label: 'Certificates 2024', value: certificatesData.data[5].toLocaleString() },
{ label: 'Peak Year', value: maxYear + ' (' + maxValue.toLocaleString() + ')' },
{ label: '2024 Growth', value: '+' + growth2024 + '%' },
{ label: 'Annual Average', value: avgPerYear.toLocaleString() },
{ label: 'Minimum (2020)', value: certificatesData.data[1].toLocaleString() }
];
document.getElementById('statsGrid').innerHTML = stats.map(stat =>
`
${stat.value}
${stat.label}
`
).join('');
}
// Initialize chart
createCertificatesChart();
updateStats();
// Add hover effects
document.querySelector('.chart-card').addEventListener('mouseenter', function() {
this.style.transform = 'translateY(-8px)';
});
document.querySelector('.chart-card').addEventListener('mouseleave', function() {
this.style.transform = 'translateY(0)';
});
