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 - Détails Formation</title> | |
| <link rel="stylesheet" href="style.css"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: '#4f46e5', | |
| secondary: '#10b981' | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| </head> | |
| <body class="bg-gray-50 min-h-screen flex flex-col"> | |
| <custom-navbar></custom-navbar> | |
| <main class="container mx-auto px-4 py-8 flex-grow"> | |
| <div class="max-w-4xl mx-auto bg-white rounded-xl shadow-md overflow-hidden"> | |
| <div id="training-header" class="bg-gradient-to-r from-primary-600 to-primary-400 p-8 text-white"> | |
| <div class="flex justify-between items-start mb-4"> | |
| <span id="training-type" class="inline-block bg-white/20 text-white text-xs px-2 py-1 rounded-full uppercase font-semibold"></span> | |
| <span id="training-certification" class="inline-block bg-white/20 text-white text-xs px-2 py-1 rounded-full font-semibold hidden">Certifiante</span> | |
| </div> | |
| <h1 id="training-title" class="text-3xl font-bold mb-2"></h1> | |
| <p id="training-provider" class="text-lg opacity-90"></p> | |
| </div> | |
| <div class="p-8"> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8"> | |
| <div class="bg-gray-50 p-4 rounded-lg"> | |
| <h3 class="font-semibold text-gray-700 mb-2 flex items-center"> | |
| <i data-feather="users" class="mr-2 w-4 h-4"></i> Public cible | |
| </h3> | |
| <div id="training-audience" class="flex flex-wrap gap-2"></div> | |
| </div> | |
| <div class="bg-gray-50 p-4 rounded-lg"> | |
| <h3 class="font-semibold text-gray-700 mb-2 flex items-center"> | |
| <i data-feather="map-pin" class="mr-2 w-4 h-4"></i> Localisation | |
| </h3> | |
| <p id="training-location" class="text-gray-600"></p> | |
| </div> | |
| <div class="bg-gray-50 p-4 rounded-lg"> | |
| <h3 class="font-semibold text-gray-700 mb-2 flex items-center"> | |
| <i data-feather="book-open" class="mr-2 w-4 h-4"></i> Niveau | |
| </h3> | |
| <p id="training-level" class="text-gray-600"></p> | |
| </div> | |
| </div> | |
| <div class="mb-8"> | |
| <h2 class="text-xl font-bold text-gray-900 mb-4 flex items-center"> | |
| <i data-feather="info" class="mr-2 text-primary-600"></i> Description | |
| </h2> | |
| <p id="training-description" class="text-gray-700"></p> | |
| </div> | |
| <div class="mb-8"> | |
| <h2 class="text-xl font-bold text-gray-900 mb-4 flex items-center"> | |
| <i data-feather="award" class="mr-2 text-primary-600"></i> Compétences visées | |
| </h2> | |
| <div id="training-skills" class="grid grid-cols-1 md:grid-cols-2 gap-4"></div> | |
| </div> | |
| <div class="mb-8"> | |
| <h2 class="text-xl font-bold text-gray-900 mb-4 flex items-center"> | |
| <i data-feather="calendar" class="mr-2 text-primary-600"></i> Modalités | |
| </h2> | |
| <div id="training-modality" class="flex flex-wrap gap-2"></div> | |
| </div> | |
| <div class="mb-8" id="training-notes-container"> | |
| <h2 class="text-xl font-bold text-gray-900 mb-4 flex items-center"> | |
| <i data-feather="file-text" class="mr-2 text-primary-600"></i> Notes | |
| </h2> | |
| <p id="training-notes" class="text-gray-700"></p> | |
| </div> | |
| <div> | |
| <h2 class="text-xl font-bold text-gray-900 mb-4 flex items-center"> | |
| <i data-feather="link" class="mr-2 text-primary-600"></i> Liens utiles | |
| </h2> | |
| <div id="training-links" class="space-y-2"></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(); | |
| // Get training ID from URL | |
| const urlParams = new URLSearchParams(window.location.search); | |
| const trainingId = urlParams.get('id'); | |
| // Load training data | |
| if (trainingId) { | |
| fetch('data.json') | |
| .then(response => response.json()) | |
| .then(data => { | |
| const training = data.trainings.find(t => t.id === trainingId); | |
| if (training) { | |
| // Set training data | |
| document.title = `EduVaud Explorer - ${training.title}`; | |
| document.getElementById('training-title').textContent = training.title; | |
| document.getElementById('training-provider').textContent = training.provider; | |
| document.getElementById('training-type').textContent = training.type; | |
| document.getElementById('training-description').textContent = training.description; | |
| document.getElementById('training-location').textContent = training.location; | |
| document.getElementById('training-level').textContent = training.level; | |
| // Certification badge | |
| if (training.certification) { | |
| document.getElementById('training-certification').classList.remove('hidden'); | |
| } | |
| // Target audience | |
| const audienceEl = document.getElementById('training-audience'); | |
| training.target_audience.forEach(audience => { | |
| const span = document.createElement('span'); | |
| span.className = 'inline-block bg-gray-100 text-gray-800 text-xs px-2 py-1 rounded-full'; | |
| span.textContent = audience; | |
| audienceEl.appendChild(span); | |
| }); | |
| // Skills | |
| const skillsEl = document.getElementById('training-skills'); | |
| training.skills_focus.forEach(skill => { | |
| const div = document.createElement('div'); | |
| div.className = 'flex items-start'; | |
| div.innerHTML = ` | |
| <i data-feather="check" class="mr-2 mt-1 text-secondary-500 flex-shrink-0"></i> | |
| <span class="text-gray-700">${skill}</span> | |
| `; | |
| skillsEl.appendChild(div); | |
| }); | |
| // Modality | |
| const modalityEl = document.getElementById('training-modality'); | |
| training.modality.forEach(mod => { | |
| const span = document.createElement('span'); | |
| span.className = 'inline-block bg-primary-100 text-primary-800 text-xs px-2 py-1 rounded-full'; | |
| span.textContent = mod; | |
| modalityEl.appendChild(span); | |
| }); | |
| // Notes (if exists) | |
| if (training.notes) { | |
| document.getElementById('training-notes').textContent = training.notes; | |
| } else { | |
| document.getElementById('training-notes-container').classList.add('hidden'); | |
| } | |
| // Links | |
| const linksEl = document.getElementById('training-links'); | |
| training.links.forEach(link => { | |
| const a = document.createElement('a'); | |
| a.href = link; | |
| a.target = '_blank'; | |
| a.rel = 'noopener noreferrer'; | |
| a.className = 'inline-flex items-center text-primary-600 hover:underline'; | |
| a.innerHTML = ` | |
| <i data-feather="external-link" class="mr-2 w-4 h-4"></i> | |
| ${link} | |
| `; | |
| linksEl.appendChild(a); | |
| }); | |
| feather.replace(); | |
| } | |
| }); | |
| } | |
| </script> | |
| </body> | |
| </html> |