Spaces:
Running
Running
| <html lang="fr"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Questionnaire d'Auto-Positionnement</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| .progress-bar { | |
| transition: width 0.5s ease-in-out; | |
| } | |
| .atelier-card { | |
| transition: all 0.3s ease; | |
| } | |
| .atelier-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); | |
| } | |
| .question-box { | |
| background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%); | |
| } | |
| .submit-btn { | |
| background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%); | |
| } | |
| .submit-btn:hover { | |
| background: linear-gradient(135deg, #1d4ed8 0%, #1e40af 100%); | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 min-h-screen"> | |
| <div class="container mx-auto px-4 py-8 max-w-6xl"> | |
| <!-- Header --> | |
| <header class="text-center mb-12"> | |
| <h1 class="text-3xl md:text-4xl font-bold text-gray-800 mb-3">Questionnaire d'Auto-Positionnement</h1> | |
| <p class="text-lg text-gray-600 max-w-2xl mx-auto"> | |
| Évaluez votre progression après chaque atelier de formation pour mesurer votre développement professionnel. | |
| </p> | |
| <div class="mt-6 flex flex-col sm:flex-row justify-center gap-4 max-w-md mx-auto"> | |
| <div class="w-full"> | |
| <label for="nom" class="block text-sm font-medium text-gray-700 text-left mb-1">Nom</label> | |
| <input type="text" id="nom" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500"> | |
| </div> | |
| <div class="w-full"> | |
| <label for="prenom" class="block text-sm font-medium text-gray-700 text-left mb-1">Prénom</label> | |
| <input type="text" id="prenom" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500"> | |
| </div> | |
| </div> | |
| <div class="mt-6 w-full bg-gray-200 rounded-full h-3"> | |
| <div id="global-progress" class="progress-bar h-3 rounded-full bg-blue-600" style="width: 0%"></div> | |
| </div> | |
| </header> | |
| <!-- Ateliers Selection --> | |
| <div class="mb-10"> | |
| <h2 class="text-xl font-semibold text-gray-700 mb-4">Sélectionnez un atelier</h2> | |
| <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-4"> | |
| <div id="atelier-1" class="atelier-card bg-white p-4 rounded-lg shadow cursor-pointer border-2 border-blue-200" onclick="selectAtelier(1)"> | |
| <div class="flex items-center"> | |
| <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center mr-3"> | |
| <span class="text-blue-600 font-bold">1</span> | |
| </div> | |
| <h3 class="font-medium text-gray-800">Atelier 1</h3> | |
| </div> | |
| </div> | |
| <div id="atelier-2" class="atelier-card bg-white p-4 rounded-lg shadow cursor-pointer border-2 border-gray-200" onclick="selectAtelier(2)"> | |
| <div class="flex items-center"> | |
| <div class="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center mr-3"> | |
| <span class="text-gray-600 font-bold">2</span> | |
| </div> | |
| <h3 class="font-medium text-gray-800">Atelier 2</h3> | |
| </div> | |
| </div> | |
| <div id="atelier-3" class="atelier-card bg-white p-4 rounded-lg shadow cursor-pointer border-2 border-gray-200" onclick="selectAtelier(3)"> | |
| <div class="flex items-center"> | |
| <div class="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center mr-3"> | |
| <span class="text-gray-600 font-bold">3</span> | |
| </div> | |
| <h3 class="font-medium text-gray-800">Atelier 3</h3> | |
| </div> | |
| </div> | |
| <div id="atelier-4" class="atelier-card bg-white p-4 rounded-lg shadow cursor-pointer border-2 border-gray-200" onclick="selectAtelier(4)"> | |
| <div class="flex items-center"> | |
| <div class="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center mr-3"> | |
| <span class="text-gray-600 font-bold">4</span> | |
| </div> | |
| <h3 class="font-medium text-gray-800">Atelier 4</h3> | |
| </div> | |
| </div> | |
| <div id="atelier-5" class="atelier-card bg-white p-4 rounded-lg shadow cursor-pointer border-2 border-gray-200" onclick="selectAtelier(5)"> | |
| <div class="flex items-center"> | |
| <div class="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center mr-3"> | |
| <span class="text-gray-600 font-bold">5</span> | |
| </div> | |
| <h3 class="font-medium text-gray-800">Atelier 5</h3> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Questionnaire Form --> | |
| <div id="questionnaire-form" class="bg-white rounded-xl shadow-lg p-6 mb-8 hidden"> | |
| <h2 id="atelier-title" class="text-2xl font-bold text-gray-800 mb-6"></h2> | |
| <div class="space-y-8"> | |
| <!-- Question 1 --> | |
| <div class="question-box p-5 rounded-lg border border-gray-100"> | |
| <h3 class="text-lg font-semibold text-gray-700 mb-3 flex items-center"> | |
| <span class="w-8 h-8 bg-blue-100 text-blue-600 rounded-full flex items-center justify-center mr-3">1</span> | |
| Êtes-vous satisfait de cet atelier ? | |
| </h3> | |
| <div class="flex flex-wrap gap-3 mt-4"> | |
| <label class="flex items-center"> | |
| <input type="radio" name="satisfaction" value="oui" class="h-4 w-4 text-blue-600 focus:ring-blue-500"> | |
| <span class="ml-2 text-gray-700">Oui</span> | |
| </label> | |
| <label class="flex items-center"> | |
| <input type="radio" name="satisfaction" value="moyennement" class="h-4 w-4 text-blue-600 focus:ring-blue-500"> | |
| <span class="ml-2 text-gray-700">Moyennement</span> | |
| </label> | |
| <label class="flex items-center"> | |
| <input type="radio" name="satisfaction" value="non" class="h-4 w-4 text-blue-600 focus:ring-blue-500"> | |
| <span class="ml-2 text-gray-700">Non</span> | |
| </label> | |
| </div> | |
| </div> | |
| <!-- Question 2 --> | |
| <div class="question-box p-5 rounded-lg border border-gray-100"> | |
| <h3 class="text-lg font-semibold text-gray-700 mb-3 flex items-center"> | |
| <span class="w-8 h-8 bg-blue-100 text-blue-600 rounded-full flex items-center justify-center mr-3">2</span> | |
| Diriez-vous que vous avez capitalisé des outils de travail ? | |
| </h3> | |
| <div class="flex flex-wrap gap-3 mt-4"> | |
| <label class="flex items-center"> | |
| <input type="radio" name="outils" value="tout_a_fait" class="h-4 w-4 text-blue-600 focus:ring-blue-500"> | |
| <span class="ml-2 text-gray-700">Tout à fait</span> | |
| </label> | |
| <label class="flex items-center"> | |
| <input type="radio" name="outils" value="quelques_uns" class="h-4 w-4 text-blue-600 focus:ring-blue-500"> | |
| <span class="ml-2 text-gray-700">Quelques uns</span> | |
| </label> | |
| <label class="flex items-center"> | |
| <input type="radio" name="outils" value="pas_assez" class="h-4 w-4 text-blue-600 focus:ring-blue-500"> | |
| <span class="ml-2 text-gray-700">Pas assez</span> | |
| </label> | |
| </div> | |
| </div> | |
| <!-- Question 3 --> | |
| <div class="question-box p-5 rounded-lg border border-gray-100"> | |
| <h3 class="text-lg font-semibold text-gray-700 mb-3 flex items-center"> | |
| <span class="w-8 h-8 bg-blue-100 text-blue-600 rounded-full flex items-center justify-center mr-3">3</span> | |
| Êtes-vous plus en capacité de résoudre les problèmes liés à l'accompagnement des situations complexes ? | |
| </h3> | |
| <div class="flex flex-wrap gap-3 mt-4"> | |
| <label class="flex items-center"> | |
| <input type="radio" name="capacite" value="oui_tout_a_fait" class="h-4 w-4 text-blue-600 focus:ring-blue-500"> | |
| <span class="ml-2 text-gray-700">Oui, tout à fait</span> | |
| </label> | |
| <label class="flex items-center"> | |
| <input type="radio" name="capacite" value="un_peu_mieux" class="h-4 w-4 text-blue-600 focus:ring-blue-500"> | |
| <span class="ml-2 text-gray-700">Un peu mieux</span> | |
| </label> | |
| <label class="flex items-center"> | |
| <input type="radio" name="capacite" value="pas_du_tout" class="h-4 w-4 text-blue-600 focus:ring-blue-500"> | |
| <span class="ml-2 text-gray-700">Pas du tout</span> | |
| </label> | |
| </div> | |
| </div> | |
| <!-- Question 4 --> | |
| <div class="question-box p-5 rounded-lg border border-gray-100"> | |
| <h3 class="text-lg font-semibold text-gray-700 mb-3 flex items-center"> | |
| <span class="w-8 h-8 bg-blue-100 text-blue-600 rounded-full flex items-center justify-center mr-3">4</span> | |
| Diriez-vous que vous sentez une dynamique d'équipe évoluer ? | |
| </h3> | |
| <div class="flex flex-wrap gap-3 mt-4"> | |
| <label class="flex items-center"> | |
| <input type="radio" name="dynamique" value="oui" class="h-4 w-4 text-blue-600 focus:ring-blue-500"> | |
| <span class="ml-2 text-gray-700">Oui</span> | |
| </label> | |
| <label class="flex items-center"> | |
| <input type="radio" name="dynamique" value="un_peu" class="h-4 w-4 text-blue-600 focus:ring-blue-500"> | |
| <span class="ml-2 text-gray-700">Un peu</span> | |
| </label> | |
| <label class="flex items-center"> | |
| <input type="radio" name="dynamique" value="non" class="h-4 w-4 text-blue-600 focus:ring-blue-500"> | |
| <span class="ml-2 text-gray-700">Non</span> | |
| </label> | |
| </div> | |
| </div> | |
| <!-- Question 5 --> | |
| <div class="question-box p-5 rounded-lg border border-gray-100"> | |
| <h3 class="text-lg font-semibold text-gray-700 mb-3 flex items-center"> | |
| <span class="w-8 h-8 bg-blue-100 text-blue-600 rounded-full flex items-center justify-center mr-3">5</span> | |
| Parvenez-vous à mieux comprendre et analyser les situations problèmes ? | |
| </h3> | |
| <div class="flex flex-wrap gap-3 mt-4"> | |
| <label class="flex items-center"> | |
| <input type="radio" name="analyse" value="oui" class="h-4 w-4 text-blue-600 focus:ring-blue-500"> | |
| <span class="ml-2 text-gray-700">Oui, nettement</span> | |
| </label> | |
| <label class="flex items-center"> | |
| <input type="radio" name="analyse" value="quelque_peu" class="h-4 w-4 text-blue-600 focus:ring-blue-500"> | |
| <span class="ml-2 text-gray-700">Quelque peu</span> | |
| </label> | |
| <label class="flex items-center"> | |
| <input type="radio" name="analyse" value="non" class="h-4 w-4 text-blue-600 focus:ring-blue-500"> | |
| <span class="ml-2 text-gray-700">Non, pas vraiment</span> | |
| </label> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-10 flex justify-between items-center"> | |
| <button id="reset-btn" class="px-6 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50 transition"> | |
| <i class="fas fa-redo mr-2"></i> Réinitialiser | |
| </button> | |
| <button id="submit-btn" class="submit-btn px-8 py-3 rounded-md text-white font-medium hover:shadow-lg transition"> | |
| <i class="fas fa-check-circle mr-2"></i> Enregistrer mes réponses | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Summary Section --> | |
| <div id="summary-section" class="bg-white rounded-xl shadow-lg p-6 hidden"> | |
| <h2 class="text-2xl font-bold text-gray-800 mb-6">Récapitulatif de vos réponses</h2> | |
| <div class="overflow-x-auto"> | |
| <table class="min-w-full divide-y divide-gray-200"> | |
| <thead class="bg-gray-50"> | |
| <tr> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Atelier</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Satisfaction</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Outils capitalisés</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Capacité à résoudre</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Dynamique d'équipe</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Analyse des problèmes</th> | |
| </tr> | |
| </thead> | |
| <tbody id="summary-body" class="bg-white divide-y divide-gray-200"> | |
| <!-- Les réponses seront ajoutées dynamiquement ici --> | |
| </tbody> | |
| </table> | |
| </div> | |
| <div class="mt-8"> | |
| <button id="export-btn" class="bg-green-600 hover:bg-green-700 text-white px-6 py-2 rounded-md font-medium"> | |
| <i class="fas fa-file-export mr-2"></i> Exporter les résultats | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Confirmation Modal --> | |
| <div id="confirmation-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden"> | |
| <div class="bg-white rounded-lg p-6 max-w-md w-full"> | |
| <div class="text-center"> | |
| <div class="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-green-100"> | |
| <i class="fas fa-check text-green-600"></i> | |
| </div> | |
| <h3 class="text-lg font-medium text-gray-900 mt-3">Réponses enregistrées !</h3> | |
| <div class="mt-2 text-sm text-gray-500"> | |
| Vos réponses pour cet atelier ont été sauvegardées avec succès. | |
| </div> | |
| <div class="mt-4"> | |
| <button id="modal-close-btn" type="button" class="inline-flex justify-center px-4 py-2 text-sm font-medium text-white bg-blue-600 border border-transparent rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"> | |
| Fermer | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Variables globales | |
| let currentAtelier = 0; | |
| const responses = { | |
| 1: {}, | |
| 2: {}, | |
| 3: {}, | |
| 4: {}, | |
| 5: {} | |
| }; | |
| const completedAteliers = new Set(); | |
| // Sélectionner un atelier | |
| function selectAtelier(num) { | |
| currentAtelier = num; | |
| // Mettre à jour l'interface | |
| document.querySelectorAll('.atelier-card').forEach(card => { | |
| card.classList.remove('border-blue-200', 'bg-blue-50'); | |
| card.classList.add('border-gray-200'); | |
| card.querySelector('div > span').classList.remove('text-blue-600'); | |
| card.querySelector('div > span').classList.add('text-gray-600'); | |
| card.querySelector('div').classList.remove('bg-blue-100'); | |
| card.querySelector('div').classList.add('bg-gray-100'); | |
| }); | |
| const selectedCard = document.getElementById(`atelier-${num}`); | |
| selectedCard.classList.remove('border-gray-200'); | |
| selectedCard.classList.add('border-blue-200', 'bg-blue-50'); | |
| selectedCard.querySelector('div > span').classList.remove('text-gray-600'); | |
| selectedCard.querySelector('div > span').classList.add('text-blue-600'); | |
| selectedCard.querySelector('div').classList.remove('bg-gray-100'); | |
| selectedCard.querySelector('div').classList.add('bg-blue-100'); | |
| // Afficher le formulaire | |
| document.getElementById('atelier-title').textContent = `Atelier ${num} - Auto-positionnement`; | |
| document.getElementById('questionnaire-form').classList.remove('hidden'); | |
| // Charger les réponses existantes si elles existent | |
| if (responses[num].satisfaction) { | |
| document.querySelector(`input[name="satisfaction"][value="${responses[num].satisfaction}"]`).checked = true; | |
| } | |
| if (responses[num].outils) { | |
| document.querySelector(`input[name="outils"][value="${responses[num].outils}"]`).checked = true; | |
| } | |
| if (responses[num].capacite) { | |
| document.querySelector(`input[name="capacite"][value="${responses[num].capacite}"]`).checked = true; | |
| } | |
| if (responses[num].dynamique) { | |
| document.querySelector(`input[name="dynamique"][value="${responses[num].dynamique}"]`).checked = true; | |
| } | |
| if (responses[num].analyse) { | |
| document.querySelector(`input[name="analyse"][value="${responses[num].analyse}"]`).checked = true; | |
| } | |
| // Mettre à jour le résumé si des réponses existent | |
| updateSummary(); | |
| } | |
| // Réinitialiser le formulaire | |
| document.getElementById('reset-btn').addEventListener('click', function() { | |
| document.querySelectorAll('input[type="radio"]').forEach(radio => { | |
| radio.checked = false; | |
| }); | |
| }); | |
| // Soumettre le formulaire | |
| document.getElementById('submit-btn').addEventListener('click', function() { | |
| // Vérifier que toutes les questions ont une réponse | |
| const satisfaction = document.querySelector('input[name="satisfaction"]:checked'); | |
| const outils = document.querySelector('input[name="outils"]:checked'); | |
| const capacite = document.querySelector('input[name="capacite"]:checked'); | |
| const dynamique = document.querySelector('input[name="dynamique"]:checked'); | |
| const analyse = document.querySelector('input[name="analyse"]:checked'); | |
| if (!satisfaction || !outils || !capacite || !dynamique || !analyse) { | |
| alert('Veuillez répondre à toutes les questions avant de soumettre.'); | |
| return; | |
| } | |
| // Enregistrer les réponses | |
| responses[currentAtelier] = { | |
| satisfaction: satisfaction.value, | |
| outils: outils.value, | |
| capacite: capacite.value, | |
| dynamique: dynamique.value, | |
| analyse: analyse.value | |
| }; | |
| // Marquer l'atelier comme complété | |
| completedAteliers.add(currentAtelier); | |
| updateProgressBar(); | |
| // Afficher la modal de confirmation | |
| document.getElementById('confirmation-modal').classList.remove('hidden'); | |
| // Mettre à jour le résumé | |
| updateSummary(); | |
| }); | |
| // Fermer la modal | |
| document.getElementById('modal-close-btn').addEventListener('click', function() { | |
| document.getElementById('confirmation-modal').classList.add('hidden'); | |
| }); | |
| // Mettre à jour la barre de progression | |
| function updateProgressBar() { | |
| const progress = (completedAteliers.size / 5) * 100; | |
| document.getElementById('global-progress').style.width = `${progress}%`; | |
| } | |
| // Mettre à jour le résumé | |
| function updateSummary() { | |
| const summaryBody = document.getElementById('summary-body'); | |
| summaryBody.innerHTML = ''; | |
| let hasResponses = false; | |
| for (let i = 1; i <= 5; i++) { | |
| if (Object.keys(responses[i]).length > 0) { | |
| hasResponses = true; | |
| const tr = document.createElement('tr'); | |
| tr.className = completedAteliers.has(i) ? 'bg-blue-50' : ''; | |
| const atelierTd = document.createElement('td'); | |
| atelierTd.className = 'px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900'; | |
| atelierTd.textContent = `Atelier ${i}`; | |
| tr.appendChild(atelierTd); | |
| const satisfactionTd = document.createElement('td'); | |
| satisfactionTd.className = 'px-6 py-4 whitespace-nowrap text-sm text-gray-500'; | |
| satisfactionTd.textContent = formatResponse(responses[i].satisfaction); | |
| tr.appendChild(satisfactionTd); | |
| const outilsTd = document.createElement('td'); | |
| outilsTd.className = 'px-6 py-4 whitespace-nowrap text-sm text-gray-500'; | |
| outilsTd.textContent = formatResponse(responses[i].outils); | |
| tr.appendChild(outilsTd); | |
| const capaciteTd = document.createElement('td'); | |
| capaciteTd.className = 'px-6 py-4 whitespace-nowrap text-sm text-gray-500'; | |
| capaciteTd.textContent = formatResponse(responses[i].capacite); | |
| tr.appendChild(capaciteTd); | |
| const dynamiqueTd = document.createElement('td'); | |
| dynamiqueTd.className = 'px-6 py-4 whitespace-nowrap text-sm text-gray-500'; | |
| dynamiqueTd.textContent = formatResponse(responses[i].dynamique); | |
| tr.appendChild(dynamiqueTd); | |
| const analyseTd = document.createElement('td'); | |
| analyseTd.className = 'px-6 py-4 whitespace-nowrap text-sm text-gray-500'; | |
| analyseTd.textContent = formatResponse(responses[i].analyse); | |
| tr.appendChild(analyseTd); | |
| summaryBody.appendChild(tr); | |
| } | |
| } | |
| if (hasResponses) { | |
| document.getElementById('summary-section').classList.remove('hidden'); | |
| } else { | |
| document.getElementById('summary-section').classList.add('hidden'); | |
| } | |
| } | |
| // Formater les réponses pour l'affichage | |
| function formatResponse(value) { | |
| if (!value) return '-'; | |
| const mappings = { | |
| 'oui': 'Oui', | |
| 'moyennement': 'Moyennement', | |
| 'non': 'Non', | |
| 'tout_a_fait': 'Tout à fait', | |
| 'quelques_uns': 'Quelques uns', | |
| 'pas_assez': 'Pas assez', | |
| 'oui_tout_a_fait': 'Oui, tout à fait', | |
| 'un_peu_mieux': 'Un peu mieux', | |
| 'pas_du_tout': 'Pas du tout', | |
| 'un_peu': 'Un peu', | |
| 'quelque_peu': 'Quelque peu' | |
| }; | |
| return mappings[value] || value; | |
| } | |
| // Exporter les résultats | |
| document.getElementById('export-btn').addEventListener('click', function() { | |
| const nom = document.getElementById('nom').value || 'Non renseigné'; | |
| const prenom = document.getElementById('prenom').value || 'Non renseigné'; | |
| let csvContent = `Nom,${nom}\nPrénom,${prenom}\n\nAtelier,Satisfaction,Outils capitalisés,Capacité à résoudre,Dynamique d'équipe,Analyse des problèmes\n`; | |
| for (let i = 1; i <= 5; i++) { | |
| if (Object.keys(responses[i]).length > 0) { | |
| csvContent += `Atelier ${i},${formatResponse(responses[i].satisfaction)},${formatResponse(responses[i].outils)},${formatResponse(responses[i].capacite)},${formatResponse(responses[i].dynamique)},${formatResponse(responses[i].analyse)}\n`; | |
| } else { | |
| csvContent += `Atelier ${i},Non complété,Non complété,Non complété,Non complété,Non complété\n`; | |
| } | |
| } | |
| const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' }); | |
| const url = URL.createObjectURL(blob); | |
| const link = document.createElement('a'); | |
| link.setAttribute('href', url); | |
| link.setAttribute('download', 'auto-positionnement.csv'); | |
| link.style.visibility = 'hidden'; | |
| document.body.appendChild(link); | |
| link.click(); | |
| document.body.removeChild(link); | |
| }); | |
| // Sélectionner le premier atelier par défaut | |
| selectAtelier(1); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=guyot/eval-passerelle" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |