Spaces:
Running
Running
| <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> |