https://pocket-rd.com/js/pages/about.js

1(function(){
2  var filterBtns = document.querySelectorAll('.members .filter-btn');
3  var cards = document.querySelectorAll('.member-card');
4  filterBtns.forEach(function(btn){
5    btn.addEventListener('click', function(){
6      filterBtns.forEach(function(b){ b.classList.remove('active'); });
7      btn.classList.add('active');
8      var filter = btn.getAttribute('data-filter');
9      cards.forEach(function(card){
10        var show = (filter === 'ALL' || card.getAttribute('data-category') === filter);
11        card.style.display = show ? '' : 'none';
12      });
13    });
14  });
15})();
16
17(function(){
18  var overlay = document.getElementById('member-modal-overlay');
19  var modal = document.getElementById('member-modal');
20  var closeBtn = document.getElementById('member-modal-close');
21  var modalPhoto = document.getElementById('member-modal-photo');
22  var modalDept = document.getElementById('member-modal-dept');
23  var modalRole = document.getElementById('member-modal-role');
24  var modalName = document.getElementById('member-modal-name');
25  var modalBio = document.getElementById('member-modal-bio');
26  if(!overlay) return;
27
28  function openModal(card){
29    var photoImg = card.querySelector('.member-photo img');
30    var dept = card.querySelector('.dept');
31    var role = card.querySelector('.member-role');
32    var name = card.querySelector('.member-name');
33    var bio = card.querySelector('.member-bio');
34    var photoStyle = photoImg ? photoImg.getAttribute('style') : '';
35    modalPhoto.innerHTML = photoImg ? '<img src="' + photoImg.getAttribute('src') + '" alt="' + photoImg.getAttribute('alt') + '"' + (photoStyle ? ' style="' + photoStyle + '"' : '') + '>' : '👤';
36    modalDept.textContent = dept ? dept.textContent : '';
37    modalRole.textContent = role ? role.textContent : '';
38    modalName.textContent = name ? name.textContent : '';
39    modalBio.innerHTML = bio ? bio.innerHTML : '';
40    modal.setAttribute('data-category', card.getAttribute('data-category') || '');
41    overlay.classList.add('active');
42    document.body.classList.add('modal-open');
43  }
44
45  function closeModal(){
46    overlay.classList.remove('active');
47    document.body.classList.remove('modal-open');
48  }
49
50  document.querySelectorAll('.member-card').forEach(function(card){
51    card.addEventListener('click', function(){ openModal(card); });
52  });
53
54  closeBtn.addEventListener('click', closeModal);
55  overlay.addEventListener('click', function(e){
56    if(e.target === overlay) closeModal();
57  });
58  document.addEventListener('keydown', function(e){
59    if(e.key === 'Escape') closeModal();
60  });
61})();