Spaces:
Running
Running
File size: 4,647 Bytes
f493344 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 | // Shared JavaScript across all pages
console.log('EduVaud Explorer loaded');
async function fetchTrainings() {
try {
const response = await fetch('https://raw.githubusercontent.com/yourusername/eduvaud-data/main/trainings.json');
if (!response.ok) throw new Error('Network response was not ok');
return await response.json();
} catch (error) {
console.error('Error fetching trainings:', error);
return []; // Return empty array if fetch fails
}
}
function renderTrainings(trainings) {
const container = document.getElementById('trainings-container');
container.innerHTML = '';
trainings.forEach(training => {
const card = document.createElement('div');
card.className = 'training-card bg-white rounded-xl shadow-lg border border-gray-100 overflow-hidden transition-all duration-300 hover:shadow-xl';
const tags = training.certification
? `<span class="tag bg-gradient-to-r from-green-400 to-green-600 text-white mr-2">
<i data-feather="award" class="w-3 h-3 mr-1"></i>Certifié
</span>`
: '';
const typeColors = {
'formation continue': 'from-blue-400 to-blue-600',
'CAS': 'from-purple-400 to-purple-600',
'DAS': 'from-indigo-400 to-indigo-600',
'modules': 'from-teal-400 to-teal-600'
};
const typeTag = `
<span class="tag bg-gradient-to-r ${typeColors[training.type] || 'from-gray-400 to-gray-600'} text-white">
${training.type}
</span>`;
card.innerHTML = `
<div class="p-6">
<div class="flex justify-between items-start mb-4">
<div>
<h3 class="text-xl font-bold mb-2 text-gray-800 group-hover:text-blue-600 transition">${training.title}</h3>
<p class="text-gray-500 mb-3 flex items-center">
<i data-feather="home" class="w-4 h-4 mr-1"></i>
${training.provider}
</p>
</div>
<div class="flex gap-2">
${tags}
${typeTag}
</div>
</div>
<p class="text-gray-700 mb-4 line-clamp-2">${training.description}</p>
<div class="flex flex-wrap gap-2 mb-4">
${training.skills_focus.map(skill =>
`<span class="tag bg-indigo-100 text-indigo-800 border border-indigo-200">
<i data-feather="check-circle" class="w-3 h-3 mr-1"></i>${skill}
</span>`
).join('')}
</div>
<div class="flex flex-wrap gap-4 mb-4 text-sm">
<span class="flex items-center text-gray-600 bg-gray-50 px-3 py-1 rounded-full">
<i data-feather="users" class="w-4 h-4 mr-1 text-gray-500"></i>
${training.target_audience.join(', ')}
</span>
<span class="flex items-center text-gray-600 bg-gray-50 px-3 py-1 rounded-full">
<i data-feather="map-pin" class="w-4 h-4 mr-1 text-gray-500"></i>
${training.location}
</span>
<span class="flex items-center text-gray-600 bg-gray-50 px-3 py-1 rounded-full">
<i data-feather="clock" class="w-4 h-4 mr-1 text-gray-500"></i>
${training.duration || 'Variable'}
</span>
</div>
<div class="flex justify-between items-center">
<span class="text-gray-500 text-sm">
${training.start_date ? `Début: ${new Date(training.start_date).toLocaleDateString()}` : 'Dates flexibles'}
</span>
<a href="formation.html?id=${training.id}" class="btn-primary">
En savoir plus <i data-feather="arrow-right" class="w-4 h-4 ml-1"></i>
</a>
</div>
</div>
`;
container.appendChild(card);
});
feather.replace();
}
// Filter functionality
document.querySelectorAll('.filter-select').forEach(select => {
select.addEventListener('change', function() {
// Implement filter logic here
console.log('Filter changed:', this.value);
});
}); |