peux-tu ajouter un bouton à la fin pour envoyer le questionnaire par mail à l'adresse club.cnoc@gmail.com - Initial Deployment
9c0ffdb verified | <html lang="fr"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Questionnaire de satisfaction - Atelier Économies d'Énergie</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 { | |
| height: 6px; | |
| background-color: #e0e0e0; | |
| border-radius: 3px; | |
| overflow: hidden; | |
| } | |
| .progress { | |
| height: 100%; | |
| background-color: #4CAF50; | |
| transition: width 0.3s ease; | |
| } | |
| .section { | |
| display: none; | |
| animation: fadeIn 0.5s ease; | |
| } | |
| .section.active { | |
| display: block; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(20px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| .rating-option:hover { | |
| transform: scale(1.05); | |
| } | |
| .rating-option.selected { | |
| border-color: #4CAF50; | |
| background-color: #E8F5E9; | |
| } | |
| textarea { | |
| min-height: 100px; | |
| transition: border-color 0.3s; | |
| } | |
| textarea:focus { | |
| border-color: #4CAF50; | |
| outline: none; | |
| box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.2); | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 font-sans"> | |
| <div class="container mx-auto px-4 py-8 max-w-4xl"> | |
| <!-- Header --> | |
| <header class="text-center mb-8"> | |
| <h1 class="text-3xl font-bold text-green-700 mb-2"> | |
| <i class="fas fa-leaf mr-2"></i>Questionnaire de Satisfaction | |
| </h1> | |
| <p class="text-gray-600">Atelier de médiation sur les économies d'énergie</p> | |
| </header> | |
| <!-- Progress Bar --> | |
| <div class="mb-8"> | |
| <div class="flex justify-between mb-2"> | |
| <span class="text-sm font-medium text-green-700">Progression</span> | |
| <span id="progress-text" class="text-sm font-medium">1/5</span> | |
| </div> | |
| <div class="progress-bar"> | |
| <div id="progress" class="progress" style="width: 20%"></div> | |
| </div> | |
| </div> | |
| <!-- Introduction Section --> | |
| <div id="intro" class="section active bg-white rounded-lg shadow-md p-6 mb-6"> | |
| <div class="text-center mb-6"> | |
| <i class="fas fa-comments text-5xl text-green-500 mb-4"></i> | |
| <h2 class="text-2xl font-bold text-gray-800 mb-4">Merci pour votre participation !</h2> | |
| </div> | |
| <p class="text-gray-700 mb-4"> | |
| Merci d'avoir participé à notre atelier de médiation sur les économies d'énergie. Votre feedback est essentiel pour nous aider à améliorer nos futurs ateliers. | |
| </p> | |
| <p class="text-gray-700 mb-6"> | |
| Ce questionnaire vise à évaluer votre satisfaction, votre compréhension et votre rétention des éco-gestes présentés pendant l'atelier. Vos réponses seront anonymes et confidentielles. | |
| </p> | |
| <div class="flex justify-center"> | |
| <button onclick="nextSection()" class="bg-green-600 hover:bg-green-700 text-white font-bold py-3 px-6 rounded-lg transition duration-300 transform hover:scale-105"> | |
| Commencer le questionnaire <i class="fas fa-arrow-right ml-2"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Section 1: Satisfaction générale --> | |
| <div id="section1" class="section bg-white rounded-lg shadow-md p-6 mb-6"> | |
| <h2 class="text-xl font-bold text-gray-800 mb-6 border-b pb-2 flex items-center"> | |
| <span class="bg-green-100 text-green-800 rounded-full w-8 h-8 flex items-center justify-center mr-3">1</span> | |
| Satisfaction générale | |
| </h2> | |
| <div class="mb-8"> | |
| <label class="block text-gray-700 font-medium mb-3">1. Dans quelle mesure avez-vous apprécié l'atelier de médiation sur les économies d'énergie ?</label> | |
| <div class="grid grid-cols-5 gap-2"> | |
| <div class="rating-option p-3 border rounded-lg text-center cursor-pointer transition" onclick="selectRating(this, 'satisfaction')"> | |
| <i class="far fa-laugh-beam text-2xl mb-1 text-green-600"></i> | |
| <p class="text-sm">Très satisfait</p> | |
| </div> | |
| <div class="rating-option p-3 border rounded-lg text-center cursor-pointer transition" onclick="selectRating(this, 'satisfaction')"> | |
| <i class="far fa-smile text-2xl mb-1 text-green-500"></i> | |
| <p class="text-sm">Satisfait</p> | |
| </div> | |
| <div class="rating-option p-3 border rounded-lg text-center cursor-pointer transition" onclick="selectRating(this, 'satisfaction')"> | |
| <i class="far fa-meh text-2xl mb-1 text-yellow-500"></i> | |
| <p class="text-sm">Neutre</p> | |
| </div> | |
| <div class="rating-option p-3 border rounded-lg text-center cursor-pointer transition" onclick="selectRating(this, 'satisfaction')"> | |
| <i class="far fa-frown text-2xl mb-1 text-orange-500"></i> | |
| <p class="text-sm">Insatisfait</p> | |
| </div> | |
| <div class="rating-option p-3 border rounded-lg text-center cursor-pointer transition" onclick="selectRating(this, 'satisfaction')"> | |
| <i class="far fa-sad-tear text-2xl mb-1 text-red-500"></i> | |
| <p class="text-sm">Très insatisfait</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mb-8"> | |
| <label class="block text-gray-700 font-medium mb-3">2. Comment évaluez-vous la qualité des informations présentées pendant l'atelier ?</label> | |
| <div class="grid grid-cols-5 gap-2"> | |
| <div class="rating-option p-3 border rounded-lg text-center cursor-pointer transition" onclick="selectRating(this, 'quality')"> | |
| <i class="fas fa-star text-2xl mb-1 text-green-600"></i> | |
| <p class="text-sm">Excellente</p> | |
| </div> | |
| <div class="rating-option p-3 border rounded-lg text-center cursor-pointer transition" onclick="selectRating(this, 'quality')"> | |
| <i class="fas fa-star-half-alt text-2xl mb-1 text-green-500"></i> | |
| <p class="text-sm">Bonne</p> | |
| </div> | |
| <div class="rating-option p-3 border rounded-lg text-center cursor-pointer transition" onclick="selectRating(this, 'quality')"> | |
| <i class="far fa-star text-2xl mb-1 text-yellow-500"></i> | |
| <p class="text-sm">Moyenne</p> | |
| </div> | |
| <div class="rating-option p-3 border rounded-lg text-center cursor-pointer transition" onclick="selectRating(this, 'quality')"> | |
| <i class="fas fa-star text-2xl mb-1 text-orange-500 opacity-50"></i> | |
| <p class="text-sm">Médiocre</p> | |
| </div> | |
| <div class="rating-option p-3 border rounded-lg text-center cursor-pointer transition" onclick="selectRating(this, 'quality')"> | |
| <i class="fas fa-star text-2xl mb-1 text-red-500 opacity-30"></i> | |
| <p class="text-sm">Mauvaise</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <label class="block text-gray-700 font-medium mb-3">3. Les activités et les discussions pendant l'atelier étaient-elles engageantes et utiles ?</label> | |
| <div class="grid grid-cols-5 gap-2"> | |
| <div class="rating-option p-3 border rounded-lg text-center cursor-pointer transition" onclick="selectRating(this, 'engagement')"> | |
| <i class="fas fa-bullhorn text-2xl mb-1 text-green-600"></i> | |
| <p class="text-sm">Très engageantes</p> | |
| </div> | |
| <div class="rating-option p-3 border rounded-lg text-center cursor-pointer transition" onclick="selectRating(this, 'engagement')"> | |
| <i class="fas fa-comments text-2xl mb-1 text-green-500"></i> | |
| <p class="text-sm">Engageantes</p> | |
| </div> | |
| <div class="rating-option p-3 border rounded-lg text-center cursor-pointer transition" onclick="selectRating(this, 'engagement')"> | |
| <i class="fas fa-exchange-alt text-2xl mb-1 text-yellow-500"></i> | |
| <p class="text-sm">Neutre</p> | |
| </div> | |
| <div class="rating-option p-3 border rounded-lg text-center cursor-pointer transition" onclick="selectRating(this, 'engagement')"> | |
| <i class="fas fa-comment-slash text-2xl mb-1 text-orange-500"></i> | |
| <p class="text-sm">Peu engageantes</p> | |
| </div> | |
| <div class="rating-option p-3 border rounded-lg text-center cursor-pointer transition" onclick="selectRating(this, 'engagement')"> | |
| <i class="fas fa-comment-dots text-2xl mb-1 text-red-500 opacity-50"></i> | |
| <p class="text-sm">Pas engageantes</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex justify-between mt-8"> | |
| <button onclick="prevSection()" class="bg-gray-200 hover:bg-gray-300 text-gray-800 font-bold py-2 px-4 rounded-lg transition"> | |
| <i class="fas fa-arrow-left mr-2"></i> Retour | |
| </button> | |
| <button onclick="nextSection()" class="bg-green-600 hover:bg-green-700 text-white font-bold py-2 px-6 rounded-lg transition"> | |
| Suivant <i class="fas fa-arrow-right ml-2"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Section 2: Compréhension des éco-gestes --> | |
| <div id="section2" class="section bg-white rounded-lg shadow-md p-6 mb-6"> | |
| <h2 class="text-xl font-bold text-gray-800 mb-6 border-b pb-2 flex items-center"> | |
| <span class="bg-green-100 text-green-800 rounded-full w-8 h-8 flex items-center justify-center mr-3">2</span> | |
| Compréhension des éco-gestes | |
| </h2> | |
| <div class="mb-8"> | |
| <label class="block text-gray-700 font-medium mb-3">1. À quel point avez-vous compris les éco-gestes présentés pendant l'atelier ?</label> | |
| <div class="grid grid-cols-5 gap-2"> | |
| <div class="rating-option p-3 border rounded-lg text-center cursor-pointer transition" onclick="selectRating(this, 'comprehension')"> | |
| <i class="fas fa-lightbulb text-2xl mb-1 text-green-600"></i> | |
| <p class="text-sm">Très bien compris</p> | |
| </div> | |
| <div class="rating-option p-3 border rounded-lg text-center cursor-pointer transition" onclick="selectRating(this, 'comprehension')"> | |
| <i class="far fa-lightbulb text-2xl mb-1 text-green-500"></i> | |
| <p class="text-sm">Bien compris</p> | |
| </div> | |
| <div class="rating-option p-3 border rounded-lg text-center cursor-pointer transition" onclick="selectRating(this, 'comprehension')"> | |
| <i class="fas fa-brain text-2xl mb-1 text-yellow-500"></i> | |
| <p class="text-sm">Moyennement compris</p> | |
| </div> | |
| <div class="rating-option p-3 border rounded-lg text-center cursor-pointer transition" onclick="selectRating(this, 'comprehension')"> | |
| <i class="fas fa-question-circle text-2xl mb-1 text-orange-500"></i> | |
| <p class="text-sm">Peu compris</p> | |
| </div> | |
| <div class="rating-option p-3 border rounded-lg text-center cursor-pointer transition" onclick="selectRating(this, 'comprehension')"> | |
| <i class="fas fa-question text-2xl mb-1 text-red-500"></i> | |
| <p class="text-sm">Pas compris</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <label class="block text-gray-700 font-medium mb-3">2. Quels éco-gestes avez-vous trouvés les plus faciles à comprendre et à appliquer ?</label> | |
| <textarea class="w-full p-3 border rounded-lg focus:border-green-500 transition" placeholder="Votre réponse..."></textarea> | |
| </div> | |
| <div class="mb-6"> | |
| <label class="block text-gray-700 font-medium mb-3">3. Quels éco-gestes avez-vous trouvés les plus difficiles à comprendre ou à appliquer ?</label> | |
| <textarea class="w-full p-3 border rounded-lg focus:border-green-500 transition" placeholder="Votre réponse..."></textarea> | |
| </div> | |
| <div class="flex justify-between mt-8"> | |
| <button onclick="prevSection()" class="bg-gray-200 hover:bg-gray-300 text-gray-800 font-bold py-2 px-4 rounded-lg transition"> | |
| <i class="fas fa-arrow-left mr-2"></i> Retour | |
| </button> | |
| <button onclick="nextSection()" class="bg-green-600 hover:bg-green-700 text-white font-bold py-2 px-6 rounded-lg transition"> | |
| Suivant <i class="fas fa-arrow-right ml-2"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Section 3: Rétention des éco-gestes --> | |
| <div id="section3" class="section bg-white rounded-lg shadow-md p-6 mb-6"> | |
| <h2 class="text-xl font-bold text-gray-800 mb-6 border-b pb-2 flex items-center"> | |
| <span class="bg-green-100 text-green-800 rounded-full w-8 h-8 flex items-center justify-center mr-3">3</span> | |
| Rétention des éco-gestes | |
| </h2> | |
| <div class="mb-8"> | |
| <label class="block text-gray-700 font-medium mb-3">1. Pensez-vous retenir et appliquer les éco-gestes présentés dans votre vie quotidienne ?</label> | |
| <div class="grid grid-cols-5 gap-2"> | |
| <div class="rating-option p-3 border rounded-lg text-center cursor-pointer transition" onclick="selectRating(this, 'retention')"> | |
| <i class="fas fa-check-circle text-2xl mb-1 text-green-600"></i> | |
| <p class="text-sm">Oui, certainement</p> | |
| </div> | |
| <div class="rating-option p-3 border rounded-lg text-center cursor-pointer transition" onclick="selectRating(this, 'retention')"> | |
| <i class="fas fa-thumbs-up text-2xl mb-1 text-green-500"></i> | |
| <p class="text-sm">Probablement</p> | |
| </div> | |
| <div class="rating-option p-3 border rounded-lg text-center cursor-pointer transition" onclick="selectRating(this, 'retention')"> | |
| <i class="fas fa-question-circle text-2xl mb-1 text-yellow-500"></i> | |
| <p class="text-sm">Peut-être</p> | |
| </div> | |
| <div class="rating-option p-3 border rounded-lg text-center cursor-pointer transition" onclick="selectRating(this, 'retention')"> | |
| <i class="fas fa-thumbs-down text-2xl mb-1 text-orange-500"></i> | |
| <p class="text-sm">Probablement pas</p> | |
| </div> | |
| <div class="rating-option p-3 border rounded-lg text-center cursor-pointer transition" onclick="selectRating(this, 'retention')"> | |
| <i class="fas fa-times-circle text-2xl mb-1 text-red-500"></i> | |
| <p class="text-sm">Non, certainement pas</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <label class="block text-gray-700 font-medium mb-3">2. Quels éco-gestes avez-vous l'intention d'appliquer immédiatement ?</label> | |
| <textarea class="w-full p-3 border rounded-lg focus:border-green-500 transition" placeholder="Votre réponse..."></textarea> | |
| </div> | |
| <div class="mb-6"> | |
| <label class="block text-gray-700 font-medium mb-3">3. Quels obstacles pourriez-vous rencontrer lors de l'application des éco-gestes ?</label> | |
| <textarea class="w-full p-3 border rounded-lg focus:border-green-500 transition" placeholder="Votre réponse..."></textarea> | |
| </div> | |
| <div class="flex justify-between mt-8"> | |
| <button onclick="prevSection()" class="bg-gray-200 hover:bg-gray-300 text-gray-800 font-bold py-2 px-4 rounded-lg transition"> | |
| <i class="fas fa-arrow-left mr-2"></i> Retour | |
| </button> | |
| <button onclick="nextSection()" class="bg-green-600 hover:bg-green-700 text-white font-bold py-2 px-6 rounded-lg transition"> | |
| Suivant <i class="fas fa-arrow-right ml-2"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Section 4: Suggestions et améliorations --> | |
| <div id="section4" class="section bg-white rounded-lg shadow-md p-6 mb-6"> | |
| <h2 class="text-xl font-bold text-gray-800 mb-6 border-b pb-2 flex items-center"> | |
| <span class="bg-green-100 text-green-800 rounded-full w-8 h-8 flex items-center justify-center mr-3">4</span> | |
| Suggestions et améliorations | |
| </h2> | |
| <div class="mb-6"> | |
| <label class="block text-gray-700 font-medium mb-3">1. Avez-vous des suggestions pour améliorer les futurs ateliers de médiation sur les économies d'énergie ?</label> | |
| <textarea class="w-full p-3 border rounded-lg focus:border-green-500 transition" placeholder="Votre réponse..."></textarea> | |
| </div> | |
| <div class="mb-6"> | |
| <label class="block text-gray-700 font-medium mb-3">2. Y a-t-il d'autres sujets liés aux économies d'énergie que vous aimeriez voir abordés dans de futurs ateliers ?</label> | |
| <textarea class="w-full p-3 border rounded-lg focus:border-green-500 transition" placeholder="Votre réponse..."></textarea> | |
| </div> | |
| <div class="mb-8"> | |
| <label class="block text-gray-700 font-medium mb-3">3. Aimeriez-vous participer à d'autres ateliers similaires à l'avenir ?</label> | |
| <div class="grid grid-cols-3 gap-4"> | |
| <div class="rating-option p-4 border rounded-lg text-center cursor-pointer transition" onclick="selectRating(this, 'future')"> | |
| <i class="fas fa-check text-2xl mb-1 text-green-600"></i> | |
| <p class="text-sm">Oui</p> | |
| </div> | |
| <div class="rating-option p-4 border rounded-lg text-center cursor-pointer transition" onclick="selectRating(this, 'future')"> | |
| <i class="fas fa-question text-2xl mb-1 text-yellow-500"></i> | |
| <p class="text-sm">Peut-être</p> | |
| </div> | |
| <div class="rating-option p-4 border rounded-lg text-center cursor-pointer transition" onclick="selectRating(this, 'future')"> | |
| <i class="fas fa-times text-2xl mb-1 text-red-500"></i> | |
| <p class="text-sm">Non</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex justify-between mt-8"> | |
| <button onclick="prevSection()" class="bg-gray-200 hover:bg-gray-300 text-gray-800 font-bold py-2 px-4 rounded-lg transition"> | |
| <i class="fas fa-arrow-left mr-2"></i> Retour | |
| </button> | |
| <button onclick="nextSection()" class="bg-green-600 hover:bg-green-700 text-white font-bold py-2 px-6 rounded-lg transition"> | |
| Suivant <i class="fas fa-arrow-right ml-2"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Conclusion Section --> | |
| <div id="conclusion" class="section bg-white rounded-lg shadow-md p-6 mb-6"> | |
| <div class="text-center mb-6"> | |
| <i class="fas fa-check-circle text-5xl text-green-500 mb-4"></i> | |
| <h2 class="text-2xl font-bold text-gray-800 mb-4">Merci pour votre participation !</h2> | |
| </div> | |
| <p class="text-gray-700 mb-6 text-center"> | |
| Merci d'avoir pris le temps de remplir ce questionnaire. Votre feedback est très important pour nous et nous aidera à améliorer nos futurs ateliers. | |
| </p> | |
| <p class="text-gray-700 mb-6 text-center"> | |
| Si vous avez des questions ou des commentaires supplémentaires, n'hésitez pas à nous contacter. | |
| </p> | |
| <div class="flex flex-col items-center space-y-4"> | |
| <button onclick="submitForm()" class="bg-green-600 hover:bg-green-700 text-white font-bold py-3 px-6 rounded-lg transition duration-300 transform hover:scale-105"> | |
| <i class="fas fa-paper-plane mr-2"></i> Soumettre le questionnaire | |
| </button> | |
| <p class="text-gray-500 text-sm">ou</p> | |
| <a href="mailto:club.cnoc@gmail.com?subject=Questionnaire de satisfaction&body=Voici mes réponses au questionnaire :" | |
| class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-6 rounded-lg transition duration-300 transform hover:scale-105"> | |
| <i class="fas fa-envelope mr-2"></i> Envoyer par email | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| let currentSection = 0; | |
| const sections = ['intro', 'section1', 'section2', 'section3', 'section4', 'conclusion']; | |
| function updateProgress() { | |
| const progress = (currentSection / (sections.length - 1)) * 100; | |
| document.getElementById('progress').style.width = `${progress}%`; | |
| document.getElementById('progress-text').textContent = `${currentSection}/${sections.length - 1}`; | |
| } | |
| function showSection(index) { | |
| sections.forEach((section, i) => { | |
| const element = document.getElementById(section); | |
| if (i === index) { | |
| element.classList.add('active'); | |
| } else { | |
| element.classList.remove('active'); | |
| } | |
| }); | |
| currentSection = index; | |
| updateProgress(); | |
| // Scroll to top of section | |
| window.scrollTo({ top: 0, behavior: 'smooth' }); | |
| } | |
| function nextSection() { | |
| if (currentSection < sections.length - 1) { | |
| showSection(currentSection + 1); | |
| } | |
| } | |
| function prevSection() { | |
| if (currentSection > 0) { | |
| showSection(currentSection - 1); | |
| } | |
| } | |
| function selectRating(element, type) { | |
| // Remove selected class from all siblings | |
| const parent = element.parentElement; | |
| const siblings = parent.querySelectorAll('.rating-option'); | |
| siblings.forEach(sib => sib.classList.remove('selected')); | |
| // Add selected class to clicked element | |
| element.classList.add('selected'); | |
| } | |
| function submitForm() { | |
| // Here you would normally submit the form data to a server | |
| alert('Merci ! Votre questionnaire a été soumis avec succès.'); | |
| // Reset form | |
| showSection(0); | |
| document.querySelectorAll('.rating-option').forEach(el => el.classList.remove('selected')); | |
| document.querySelectorAll('textarea').forEach(el => el.value = ''); | |
| } | |
| function collectAnswers() { | |
| let answers = "Réponses au questionnaire de satisfaction :\n\n"; | |
| // Collect selected ratings | |
| document.querySelectorAll('.rating-option.selected').forEach(el => { | |
| const question = el.closest('.mb-8, .mb-6').querySelector('label').textContent.trim(); | |
| const answer = el.querySelector('p').textContent.trim(); | |
| answers += `${question}\n- ${answer}\n\n`; | |
| }); | |
| // Collect textarea responses | |
| document.querySelectorAll('textarea').forEach(el => { | |
| const question = el.previousElementSibling.textContent.trim(); | |
| if (el.value) { | |
| answers += `${question}\n- ${el.value}\n\n`; | |
| } | |
| }); | |
| return answers; | |
| } | |
| // Update mailto link with collected answers | |
| document.querySelector('a[href^="mailto"]').addEventListener('click', function(e) { | |
| this.href = `mailto:club.cnoc@gmail.com?subject=Questionnaire de satisfaction&body=${encodeURIComponent(collectAnswers())}`; | |
| }); | |
| // Initialize | |
| updateProgress(); | |
| </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=philpelerin/questionnaire-satisfaction" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |