Spaces:
Running
Running
File size: 12,464 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 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 | <!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Détail de la formation - EduVaud Explorer</title>
<link rel="stylesheet" href="style.css">
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://unpkg.com/feather-icons"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
</head>
<body class="bg-gray-50 font-['Inter']">
<custom-navbar></custom-navbar>
<main class="container mx-auto px-4 py-8">
<div class="max-w-4xl mx-auto">
<!-- Back button -->
<a href="index.html" class="inline-flex items-center text-blue-600 hover:text-blue-800 mb-6">
<i data-feather="arrow-left" class="w-4 h-4 mr-2"></i>
Retour au catalogue
</a>
<!-- Training header -->
<div class="bg-white rounded-xl shadow-sm border border-gray-100 p-8 mb-8">
<div class="flex flex-col md:flex-row md:justify-between md:items-start gap-6">
<div>
<span class="inline-block bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm font-medium mb-3">
Formation continue
</span>
<h1 class="text-3xl font-bold mb-2" id="training-title">Programme de formation EduNum</h1>
<p class="text-xl text-gray-600 mb-4" id="training-provider">HEP Vaud</p>
<div class="flex flex-wrap gap-2 mb-4">
<span class="inline-flex items-center bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm">
<i data-feather="map-pin" class="w-3 h-3 mr-1"></i>
<span id="training-location">Canton de Vaud</span>
</span>
<span class="inline-flex items-center bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm">
<i data-feather="users" class="w-3 h-3 mr-1"></i>
<span id="training-audience">Enseignant·e·s, Directions d'établissement, Médiateurs</span>
</span>
</div>
</div>
<div class="bg-blue-50 p-4 rounded-lg md:w-64">
<h3 class="font-bold text-lg mb-3">Informations clés</h3>
<ul class="space-y-2">
<li class="flex items-center">
<i data-feather="bookmark" class="w-4 h-4 text-blue-600 mr-2"></i>
<span id="training-type">Formation continue</span>
</li>
<li class="flex items-center">
<i data-feather="clock" class="w-4 h-4 text-blue-600 mr-2"></i>
<span id="training-modality">Ateliers, accompagnement</span>
</li>
<li class="flex items-center">
<i data-feather="award" class="w-4 h-4 text-blue-600 mr-2"></i>
<span id="training-certification">Non certifiant</span>
</li>
<li class="flex items-center">
<i data-feather="calendar" class="w-4 h-4 text-blue-600 mr-2"></i>
<span>Sur demande</span>
</li>
</ul>
</div>
</div>
</div>
<!-- Training content -->
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
<div class="lg:col-span-2">
<!-- Description -->
<div class="bg-white rounded-xl shadow-sm border border-gray-100 p-8 mb-8">
<h2 class="text-2xl font-bold mb-4">Description</h2>
<div class="prose max-w-none" id="training-description">
<p>Accompagnement à la transition numérique dans les écoles vaudoises, incluant l'usage pédagogique des outils numériques, la citoyenneté numérique et l'intégration du numérique dans les disciplines.</p>
<p>Programme en partenariat avec EPFL et UNIL pour soutenir la stratégie cantonale d'éducation numérique.</p>
</div>
</div>
<!-- Skills -->
<div class="bg-white rounded-xl shadow-sm border border-gray-100 p-8 mb-8">
<h2 class="text-2xl font-bold mb-4">Compétences développées</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4" id="training-skills">
<div class="bg-indigo-50 p-4 rounded-lg">
<h3 class="font-bold text-indigo-700 mb-2 flex items-center">
<i data-feather="zap" class="w-4 h-4 mr-2"></i>
Intégration du numérique
</h3>
<p class="text-gray-700">Apprendre à intégrer efficacement les outils numériques dans les pratiques pédagogiques.</p>
</div>
<!-- More skills... -->
</div>
</div>
</div>
<!-- Sidebar -->
<div class="space-y-6">
<!-- Registration -->
<div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
<h3 class="font-bold text-lg mb-4">S'inscrire</h3>
<p class="text-gray-600 mb-4">Pour vous inscrire à cette formation, veuillez contacter directement le prestataire.</p>
<a href="https://www.hepl.ch/formation-continue" target="_blank" class="w-full bg-blue-600 text-white text-center px-4 py-3 rounded-lg font-medium hover:bg-blue-700 transition flex items-center justify-center">
<i data-feather="external-link" class="w-4 h-4 mr-2"></i>
Site de la HEP Vaud
</a>
</div>
<!-- Similar trainings -->
<div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
<h3 class="font-bold text-lg mb-4">Formations similaires</h3>
<div class="space-y-4">
<a href="#" class="block p-3 hover:bg-gray-50 rounded-lg transition">
<h4 class="font-medium">CAS Éducation numérique</h4>
<p class="text-sm text-gray-500">Université de Genève</p>
</a>
<!-- More similar trainings... -->
</div>
</div>
<!-- Contact -->
<div class="bg-blue-50 rounded-xl shadow-sm border border-blue-100 p-6">
<h3 class="font-bold text-lg mb-2">Questions ?</h3>
<p class="text-gray-600 mb-4">Notre équipe peut vous aider à choisir la formation la plus adaptée.</p>
<a href="contact.html" class="text-blue-600 font-medium hover:text-blue-800 inline-flex items-center">
Contactez-nous <i data-feather="arrow-right" class="w-4 h-4 ml-1"></i>
</a>
</div>
</div>
</div>
</div>
</main>
<custom-footer></custom-footer>
<script src="components/navbar.js"></script>
<script src="components/footer.js"></script>
<script src="script.js"></script>
<script>
feather.replace();
// Load training data based on URL parameter
document.addEventListener('DOMContentLoaded', function() {
const urlParams = new URLSearchParams(window.location.search);
const trainingId = urlParams.get('id');
if (trainingId) {
// In a real app, you would fetch this data from an API
// For now we'll simulate it with the first training
const training = {
id: "hepvaud-edunum",
title: "Programme de formation EduNum",
provider: "HEP Vaud",
type: "formation continue",
certification: false,
target_audience: ["Enseignant·e·s", "Directions d'établissement", "Médiateurs / référent·e·s numériques"],
description: "Accompagnement à la transition numérique dans les écoles vaudoises, incluant l'usage pédagogique des outils numériques, la citoyenneté numérique et l'intégration du numérique dans les disciplines.<br><br>Programme en partenariat avec EPFL et UNIL pour soutenir la stratégie cantonale d'éducation numérique.",
skills_focus: [
{
title: "Intégration du numérique",
description: "Apprendre à intégrer efficacement les outils numériques dans les pratiques pédagogiques."
},
{
title: "Citoyenneté numérique",
description: "Développer les compétences des élèves en matière d'éthique et de sécurité numérique."
},
{
title: "Outils pédagogiques",
description: "Découvrir et maîtriser les outils numériques adaptés à chaque discipline."
},
{
title: "Transition numérique",
description: "Accompagner le changement dans les établissements scolaires."
}
],
modality: ["ateliers", "accompagnement sur le terrain", "modules thématiques"],
location: "Canton de Vaud",
level: "obligatoire et post-obligatoire",
links: ["https://www.hepl.ch/formation-continue"]
};
// Update the page with the training data
document.getElementById('training-title').textContent = training.title;
document.getElementById('training-provider').textContent = training.provider;
document.getElementById('training-location').textContent = training.location;
document.getElementById('training-audience').textContent = training.target_audience.join(', ');
document.getElementById('training-type').textContent = training.type;
document.getElementById('training-modality').textContent = training.modality.join(', ');
document.getElementById('training-certification').textContent = training.certification ? 'Certifiant' : 'Non certifiant';
document.getElementById('training-description').innerHTML = training.description;
// Render skills
const skillsContainer = document.getElementById('training-skills');
skillsContainer.innerHTML = '';
training.skills_focus.forEach(skill => {
const skillElement = document.createElement('div');
skillElement.className = 'bg-indigo-50 p-4 rounded-lg';
skillElement.innerHTML = `
<h3 class="font-bold text-indigo-700 mb-2 flex items-center">
<i data-feather="zap" class="w-4 h-4 mr-2"></i>
${skill.title}
</h3>
<p class="text-gray-700">${skill.description}</p>
`;
skillsContainer.appendChild(skillElement);
});
feather.replace();
}
});
</script>
</body>
</html> |