body { font-family: 'Roboto', sans-serif; background-color: #f0f0f0; color: #333; } h2 { text-align: center; margin-top: 20px; font-weight: bold; color: #C61429; } .filter-container { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; padding: 20px; } .filter { margin-bottom: 10px; } .filter label { font-weight: bold; } .filter select { padding: 8px; border-radius: 5px; border: 1px solid #ccc; outline: none; } .filter button { padding: 10px 20px; border: none; border-radius: 5px; background-color: #C61429; color: #fff; font-weight: bold; cursor: pointer; transition: background-color 0.3s; } .filter button:hover { background-color: #C61429; } #liste_personnel { margin-top: 20px; padding: 20px; background-color: #fff; border-radius: 5px; box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1); } .person { margin-bottom: 20px; display: flex; align-items: center; } .person img { width: 100px; height: auto; margin-right: 10px; cursor: pointer; } .person p { margin: 0; } .modal { display: none; position: fixed; z-index: 1; padding-top: 100px; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgb(0, 0, 0); background-color: rgba(0, 0, 0, 0.9); } .modal-content { margin: auto; display: block; width: 80%; max-width: 700px; position: relative; } .close { position: absolute; top: 15px; right: 35px; color: #f1f1f1; font-size: 40px; font-weight: bold; transition: 0.3s; cursor: pointer; } .close:hover, .close:focus { color: #bbb; text-decoration: none; cursor: pointer; } #modalImage { width: 100%; height: auto; } #modalDescription { text-align: center; padding: 20px; color: white; }

Page Contact

var personnel = [ { nom: "Roxane ARLÉO / Formatrice en Arts appliqués et culture artistiques", role: "formateur", campus: "grafipolis", domaine: "general", classe: "capsdg,bacfpir", photo: "https://grafipolis.fr/wp-content/uploads/2024/05/arleo-1.png" }, { nom: "Laure BACHELIER / Chargé de relation candidats-entreprise", role: "persoadm", campus: "grafipolis", domaine: "administratif", classe: "autre", photo: "https://grafipolis.fr/wp-content/uploads/2024/05/bachellier.png" }, { nom: "Amandine BALLON / Formatrice en Production plurimédia (signalétique)", role: "formateur", campus: "grafipolis", domaine: "pao", classe: "bma", photo: "https://grafipolis.fr/wp-content/uploads/2024/05/ballon-1.png" }, { nom: "Charlotte BECK / Assistante pédagogique", role: "persoadm", campus: "grafipolis", domaine: "administratif", classe: "autre", photo: "https://grafipolis.fr/wp-content/uploads/2024/05/beck.png" }, { nom: "Valérie BÉHAL / Formatrice en Mathématiques", role: "formateur", campus: "grafipolis", domaine: "general", classe: "capsdg,bma,bacfpir,erpcpp,erpcpi", photo: "https://grafipolis.fr/wp-content/uploads/2024/05/behal.png" }, { nom: "Ahmed BERRADA / Formateur en Mathématiques et Sciences physiques et chimiques ", role: "formateur", campus: "grafipolis", domaine: "general", classe: "capsi,bacpg,pabcpi", photo: "https://grafipolis.fr/wp-content/uploads/2024/05/berradaa.png" }, { nom: "Laila BERRADA / Formatrice", role: "formateur", campus: "grafipolis", domaine: "general", classe: "capsdg,bma,bacfpir,erpcpp,erpcpi", photo: "https://grafipolis.fr/wp-content/uploads/2024/05/berradal.png" }, { nom: "Elisabeth BOUGANT / Formatrice en Sciences physiques et chimiques", role: "formateur", campus: "ieqt", domaine: "gdp,ieqt_f", classe: "erpc pp,erpcpi,web+3,qse+3,mqse+5", photo: "https://grafipolis.fr/wp-content/uploads/2024/05/bougant.jpeg" }, { nom: "Sophie BOURGEOIS / Assistante de direction", role: "persoadm", campus: "grafipolis", domaine: "administratif", classe: "autre", photo: "https://grafipolis.fr/wp-content/uploads/2024/05/bourgeois.png" }, { nom: "David BOUVIER / Coordinateur pédagogique", role: "persoadm", campus: "grafipolis,ieqt", domaine: "administratif", classe: "autre", photo: "https://grafipolis.fr/wp-content/uploads/2024/05/bouvier.png" }, { nom: "Célimène CHALAIN / Formatrice en Français et Prévention, santé et environnement", role: "formateur", campus: "grafipolis", domaine: "general", classe: "capsi,capsdg,bma,bacfpir,bacpg,bacpi", photo: "https://grafipolis.fr/wp-content/uploads/2024/05/chalain-1.png" }, { nom: "Jean CHARPENTIER / Formateur en Marketing et Gestion", role: "formateur", campus: "grafipolis", domaine: "general", classe: "erpcpp,erpcpi", photo: "https://grafipolis.fr/wp-content/uploads/2024/05/charpentier.png" }, { nom: "Stéphanie CORIC / Ingénierie de la formation professionnelle continue", role: "persoadm", campus: "grafipolis", domaine: "administratif", classe: "autre", photo: "" }, { nom: "Pascal COHEN / Formateur en Sérigraphie et Production et plurimédia", role: "formateur", campus: "grafipolis", domaine: "sérigraphie", classe: "capsi", photo: "https://grafipolis.fr/wp-content/uploads/2024/05/cohen-1.png" }, { nom: "Camille CUIF / Formatrice en Sérigraphie", role: "formateur", campus: "grafipolis", domaine: "sérigraphie", classe: "capsi", photo: "https://grafipolis.fr/wp-content/uploads/2024/05/cuif.png" }, { nom: "Yannis CURET / Web Designer", role: "persoadm", campus: "grafipolis", domaine: "web,administratif", classe: "autre", photo: "https://grafipolis.fr/wp-content/uploads/2024/05/curet.png" }, { nom: "Thierry DELORME / Formateur en Signalétique et décors graphiques", role: "formateur", campus: "grafipolis", domaine: "signalétique", classe: "bma", photo: "https://grafipolis.fr/wp-content/uploads/2024/05/delorme.png" }, { nom: "Thomas DENIS / Responsable comptabilité-RH", role: "persoadm", campus: "grafipolis", domaine: "administratif", classe: "autre", photo: "https://grafipolis.fr/wp-content/uploads/2024/05/denis-1.png" }, { nom: "Valérie GENEZEAU / Formatrice en PAO et Design graphique", role: "formateur", campus: "grafipolis", domaine: "pao", classe: "bacpg, erpcpp,erpcpi", photo: "https://grafipolis.fr/wp-content/uploads/2024/05/genezeau.png" }, { nom: "Sandrine GUIBERT / Assistante de la vie sociale et professionnelle", role: "persoadm", campus: "grafipolis", domaine: "administratif", classe: "autre", photo: "https://grafipolis.fr/wp-content/uploads/2024/05/guibert.png" }, { nom: "Romain GUIET / Formateur en Éducation physique et sportive", role: "formateur", campus: "grafipolis", domaine: "general", classe: "capsdg,capsi,bacpg,bacpi,bacfpir,bma", photo: "https://grafipolis.fr/wp-content/uploads/2024/05/guiet-1.png" }, { nom: "Céline HAMON / Assistante de la vie sociale et professionnelle", role: "persoadm", campus: "grafipolis", domaine: "administratif", classe: "autre", photo: "https://grafipolis.fr/wp-content/uploads/2024/05/hamon.png" }, { nom: "Philippe HÉlION / Responsable du département post-bac", role: "formateur", campus: "grafipolis,ieqt", domaine: "pao,gdp", classe: "erpcpp,erpcpi,web+3", photo: "https://grafipolis.fr/wp-content/uploads/2024/05/helion.png" }, { nom: "Charline HERBRETEAU / Formatrice en Signalétique et PAO", role: "formateur", campus: "grafipolis", domaine: "signalétique", classe: "capsdg", photo: "https://grafipolis.fr/wp-content/uploads/2024/05/herbreteau.png" }, { nom: "Gaëlle KÉRVEVANT / Chargé de communication", role: "persoadm", campus: "grafipolis", domaine: "administratif", classe: "autre", photo: "https://grafipolis.fr/wp-content/uploads/2024/05/kervevant-1.png" }, { nom: "Daniel LEGRIER / Responsable développement Apprentissage et Formation continue", role: "persoadm", campus: "grafipolis", domaine: "administratif", classe: "autre", photo: "https://grafipolis.fr/wp-content/uploads/2024/05/legrier.png" }, { nom: "Patrick MACHICOT / Formateur en Production plurimédia et Web", role: "formateur", campus: "grafipolis", domaine: "pao,web", classe: "bacpg", photo: "https://grafipolis.fr/wp-content/uploads/2024/05/machicot.png" }, { nom: "Adrien MARRET / Formateur Gestion de projet, Impression et Façonnage", role: "formateur", campus: "grafipolis", domaine: "imprimerie,façonnage,gdp", classe: "bacfpir,erpcpp,erpcpi", photo: "https://grafipolis.fr/wp-content/uploads/2024/05/maret.png" }, { nom: "Pascale MARTIN / Formatrice en Français et Histoire-Géographie", role: "formateur", campus: "grafipolis", domaine: "general", classe: "capsdg,capsi,bma,bacpg,bacpi,bacfpir", photo: "https://grafipolis.fr/wp-content/uploads/2024/05/martin.png" }, { nom: "Sarah MÉNARD / Formatrice en Anglais", role: "formateur", campus: "grafipolis", domaine: "general", classe: "bma,bacfpir,erpcpp,erpcpi,qse+3,mqse+5", photo: "https://grafipolis.fr/wp-content/uploads/2024/05/menard.png" }, { nom: "Valérie MINLOT / Assistante de gestion", role: "persoadm", campus: "grafipolis", domaine: "administratif", classe: "autre", photo: "https://grafipolis.fr/wp-content/uploads/2024/05/minlot.png" }, { nom: "Mickaël PAGEAU / Responsable département infra-bac", role: "formateur", campus: "grafipolis", domaine: "imprimerie,façonnage", classe: "bacpi,erpcpi", photo: "https://grafipolis.fr/wp-content/uploads/2024/05/pageau.png" }, { nom: "John PODLESNIK / Directeur", role: "persoadm", campus: "grafipolis", domaine: "administratif", classe: "autre", photo: "https://grafipolis.fr/wp-content/uploads/2024/05/podlesnik.png" }, { nom: "Anne RENON / Formatrice en Économie gestion et management", role: "formateur", campus: "grafipolis", domaine: "general", classe: "bma,bacfpir,bacpg,bacpi", photo: "https://grafipolis.fr/wp-content/uploads/2024/05/renon.png" }, { nom: "Valérie RIGNAULT / Chargé de relation candidats-entreprise", role: "persoadm", campus: "grafipolis", domaine: "administratif", classe: "autre", photo: "https://grafipolis.fr/wp-content/uploads/2024/05/rignault.png" }, { nom: "Lucas ROUBAUD / Formateur en Expression et culture française", role: "formateur", campus: "grafipolis", domaine: "general", classe: "erpcpp,erpcpi", photo: "https://grafipolis.fr/wp-content/uploads/2024/05/roubaud.png" }, { nom: "Pierre RUIZ / Gestion de projet et PAO", role: "formateur", campus: "grafipolis", domaine: "pao,gdp", classe: "erpcpp,erpcpi,web+3", photo: "https://grafipolis.fr/wp-content/uploads/2024/05/ruiz.png" }, { nom: "Philippe TANGUY / Impression et Gestion de projet", role: "formateur", campus: "grafipolis", domaine: "imprimerie,façonnage", classe: "bacpi,erpcpp,erpcpi", photo: "https://grafipolis.fr/wp-content/uploads/2024/05/tanguy.png" }, { nom: "Adeline TUDEAU / Psychologue et Référente handicap", role: "persoadm", campus: "grafipolis", domaine: "administratif", classe: "autre", photo: "https://grafipolis.fr/wp-content/uploads/2024/05/tudeau.png" }, { nom: "Marine VAILLANT / Assistante pédagogique", role: "persoadm", campus: "grafipolis", domaine: "administratif", classe: "autre", photo: "https://grafipolis.fr/wp-content/uploads/2024/05/vaillant-1.png" }, { nom: "Maïté VANHAESBROUCK / Formatrice en Anglais et en Prévention, santé et environnement", role: "formateur", campus: "grafipolis", domaine: "general", classe: "capsi,capsdg,bacpg", photo: "https://grafipolis.fr/wp-content/uploads/2024/05/vanhaesbrouck.png" }, { nom: "Didier VERDON / Formateur en Français et Histoire-Géographie", role: "formateur", campus: "grafipolis", domaine: "general", classe: "capsdg,capsi,bma,bacpg,bacpi,bacfpir", photo: "https://grafipolis.fr/wp-content/uploads/2024/05/verdon-1.png" }, { nom: "Jacques VIGNERON / Directeur de l'École", role: "persoadm", campus: "grafipolis", domaine: "administratif", classe: "autre", photo: "https://grafipolis.fr/wp-content/uploads/2024/05/vigneron.png" }, { nom: "Sabine VILLIER / Formatrice en Gestion de projet et Gestion", role: "formateur", campus: "grafipolis", domaine: "general", classe: "erpcpp,erpcpi", photo: "https://grafipolis.fr/wp-content/uploads/2024/05/villier.png" }, { nom: "Agnès VINEAU / Assistante pédagogique", role: "persoadm", campus: "grafipolis", domaine: "administratif", classe: "autre", photo: "https://grafipolis.fr/wp-content/uploads/2024/05/vineau.png" } ]; // Function to display personnel function displayPersonnel(personnelList) { var personnelContainer = document.getElementById('liste_personnel'); personnelContainer.innerHTML = ''; personnelList.forEach(function (person) { var personDiv = document.createElement('div'); personDiv.classList.add('person'); var personPhoto = person.photo ? person.photo : 'https://grafipolis.fr/wp-content/uploads/2024/05/default-user-image.png'; personDiv.innerHTML = '' + '

' + person.nom + '

'; personDiv.addEventListener('click', function () { showModal(person); }); personnelContainer.appendChild(personDiv); }); } // Function to filter personnel based on selected criteria function filterPersonnel() { var role = document.getElementById('role').value; var campus = document.getElementById('campus').value; var domaine = document.getElementById('domaine').value; var classe = document.getElementById('classe').value; var filteredPersonnel = personnel.filter(function (person) { return (role === 'tous' || person.role === role) && (campus === 'tous' || person.campus === campus) && (domaine === 'tous' || person.domaine.includes(domaine)) && (classe === 'tous' || person.classe.includes(classe)); }); displayPersonnel(filteredPersonnel); } // Function to show modal with person's details function showModal(person) { var modal = document.getElementById('modal'); var modalImage = document.getElementById('modalImage'); var modalDescription = document.getElementById('modalDescription'); modalImage.src = person.photo ? person.photo : 'https://grafipolis.fr/wp-content/uploads/2024/05/default-user-image.png'; modalDescription.innerHTML = person.nom; modal.style.display = 'block'; var closeBtn = document.getElementsByClassName('close')[0]; closeBtn.onclick = function () { modal.style.display = 'none'; }; window.onclick = function (event) { if (event.target === modal) { modal.style.display = 'none'; } }; } // Initial display of all personnel displayPersonnel(personnel); // Event listeners for filter document.getElementById('role').addEventListener('change', filterPersonnel); document.getElementById('campus').addEventListener('change', filterPersonnel); document.getElementById('domaine').addEventListener('change', filterPersonnel); document.getElementById('classe').addEventListener('change', filterPersonnel);