Spaces:
Running
Running
| <html lang="fr"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>EduVaud Explorer - Catalogue des formations</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> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 font-['Inter']"> | |
| <custom-navbar></custom-navbar> | |
| <main class="container mx-auto px-4 py-8"> | |
| <!-- Hero Section --> | |
| <section class="bg-gradient-to-r from-blue-600 to-indigo-700 rounded-xl p-8 mb-12 text-white"> | |
| <div class="max-w-3xl mx-auto text-center"> | |
| <h1 class="text-4xl font-bold mb-4">Catalogue des Formations Numériques</h1> | |
| <p class="text-xl mb-6">Découvrez l'offre de formation continue en éducation numérique du Canton de Vaud et de la Romandie</p> | |
| <div class="flex justify-center gap-4"> | |
| <a href="#formations" class="bg-white text-blue-600 px-6 py-3 rounded-lg font-medium hover:bg-blue-50 transition">Explorer les formations</a> | |
| <a href="#filters" class="bg-blue-500 bg-opacity-20 px-6 py-3 rounded-lg font-medium hover:bg-opacity-30 transition">Filtrer</a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Stats Section --> | |
| <section class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-12"> | |
| <div class="bg-white p-6 rounded-xl shadow-sm border border-gray-100"> | |
| <div class="text-blue-600 mb-2"> | |
| <i data-feather="book-open" class="w-8 h-8"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold mb-1" id="total-trainings">7</h3> | |
| <p class="text-gray-500">Formations disponibles</p> | |
| </div> | |
| <div class="bg-white p-6 rounded-xl shadow-sm border border-gray-100"> | |
| <div class="text-indigo-600 mb-2"> | |
| <i data-feather="award" class="w-8 h-8"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold mb-1">3</h3> | |
| <p class="text-gray-500">Certifications</p> | |
| </div> | |
| <div class="bg-white p-6 rounded-xl shadow-sm border border-gray-100"> | |
| <div class="text-purple-600 mb-2"> | |
| <i data-feather="users" class="w-8 h-8"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold mb-1">5+</h3> | |
| <p class="text-gray-500">Publics cibles</p> | |
| </div> | |
| <div class="bg-white p-6 rounded-xl shadow-sm border border-gray-100"> | |
| <div class="text-green-600 mb-2"> | |
| <i data-feather="map-pin" class="w-8 h-8"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold mb-1">4</h3> | |
| <p class="text-gray-500">Cantons couverts</p> | |
| </div> | |
| </section> | |
| <!-- Filters Section --> | |
| <section id="filters" class="mb-12"> | |
| <div class="bg-white p-6 rounded-xl shadow-sm border border-gray-100"> | |
| <h2 class="text-2xl font-bold mb-6">Filtrer les formations</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-2">Type de formation</label> | |
| <select class="filter-select w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> | |
| <option value="all">Tous les types</option> | |
| <option value="formation continue">Formation continue</option> | |
| <option value="CAS">CAS</option> | |
| <option value="DAS">DAS</option> | |
| <option value="modules de formation initiale et continue">Modules</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-2">Niveau scolaire</label> | |
| <select class="filter-select w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> | |
| <option value="all">Tous niveaux</option> | |
| <option value="obligatoire">Obligatoire</option> | |
| <option value="post-obligatoire">Post-obligatoire</option> | |
| <option value="direction / coordination">Direction/Coordination</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-2">Compétences ciblées</label> | |
| <select class="filter-select w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> | |
| <option value="all">Toutes compétences</option> | |
| <option value="Usages pédagogiques">Usages pédagogiques</option> | |
| <option value="Citoyenneté numérique">Citoyenneté numérique</option> | |
| <option value="Didactique">Didactique</option> | |
| </select> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Trainings Section --> | |
| <section id="formations" class="mb-12"> | |
| <h2 class="text-3xl font-bold mb-8">Nos formations</h2> | |
| <div id="trainings-container" class="grid grid-cols-1 gap-6"> | |
| <card-loader></card-loader> | |
| </div> | |
| </section> | |
| <!-- Info Section --> | |
| <section class="bg-white rounded-xl shadow-sm border border-gray-100 p-8 mb-12"> | |
| <div class="max-w-3xl mx-auto text-center"> | |
| <h2 class="text-2xl font-bold mb-4">Besoin d'aide pour choisir ?</h2> | |
| <p class="text-gray-600 mb-6">Notre équipe peut vous orienter vers la formation la plus adaptée à votre situation professionnelle et à vos objectifs.</p> | |
| <a href="contact.html" class="bg-blue-600 text-white px-6 py-3 rounded-lg font-medium hover:bg-blue-700 transition inline-flex items-center"> | |
| <i data-feather="mail" class="mr-2"></i> | |
| Contactez-nous | |
| </a> | |
| </div> | |
| </section> | |
| </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(); | |
| // Initialize trainings data and render | |
| document.addEventListener('DOMContentLoaded', async function() { | |
| const trainingsData = await fetchTrainings(); | |
| document.getElementById('total-trainings').textContent = trainingsData.length; | |
| renderTrainings(trainingsData); | |
| // Filter functionality | |
| document.querySelectorAll('.filter-select').forEach(select => { | |
| select.addEventListener('change', function() { | |
| const filterType = this.dataset.filter; | |
| const value = this.value; | |
| const filteredTrainings = value === 'all' | |
| ? trainingsData | |
| : trainingsData.filter(training => { | |
| if (filterType === 'type') return training.type === value; | |
| if (filterType === 'level') return training.level === value; | |
| if (filterType === 'skill') return training.skills_focus.includes(value); | |
| return true; | |
| }); | |
| renderTrainings(filteredTrainings); | |
| }); | |
| }); | |
| }); | |
| </script> | |
| <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> | |
| </body> | |
| </html> |