[html]
<div class="fc-manager">
  <div class="fc-search">
    <input type="text" id="fcSearchInput" placeholder="Поиск по внешности и имени..." autocomplete="off">
  </div>
  <div class="fc-columns">
    <div class="fc-column">
      <div class="fc-column-title">Male</div>
      <div id="fcMaleList" class="fc-list">
        <a href="https://invincibles.rusff.me/"><faceclaim>James_Smith</faceclaim><charname>John_Doe</charname></a>
        <a href="https://invincibles.rusff.me/"><faceclaim>Jane_Walker</faceclaim><charname>Mike_Ross</charname></a>
        <a href="https://invincibles.rusff.me/"><faceclaim>Janakh_Khan</faceclaim><charname>Alex_Doe</charname></a>
        <a href="https://invincibles.rusff.me/"><faceclaim>Thomas_White</faceclaim><charname>Chris_Evans</charname></a>
        <a href="https://invincibles.rusff.me/"><faceclaim>Oliver_Black</faceclaim><charname>Leo_Scott</charname></a>
      </div>
    </div>
    <div class="fc-column">
      <div class="fc-column-title">Female</div>
      <div id="fcFemaleList" class="fc-list">
        <a href="https://invincibles.rusff.me/"><faceclaim>Jane_Austen</faceclaim><charname>Emma_Wood</charname></a>
        <a href="https://invincibles.rusff.me/"><faceclaim>Janakh_Rose</faceclaim><charname>Lily_Evans</charname></a>
        <a href="https://invincibles.rusff.me/"><faceclaim>Jessica_Jones</faceclaim><charname>Mary_Jane</charname></a>
        <a href="https://invincibles.rusff.me/"><faceclaim>Molly_Hooper</faceclaim><charname>Irene_Adler</charname></a>
        <a href="https://invincibles.rusff.me/"><faceclaim>Natasha_Romanoff</faceclaim><charname>Yelena_Belova</charname></a>
      </div>
    </div>
  </div>
</div>

<style>
.fc-manager {
  max-width: 1200px;
  margin: 0 auto;
  font-family: Geologica, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  background: transparent;
}

.fc-search {
  margin-bottom: 1.5rem;
}

#fcSearchInput {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid #ccc;
  border-radius: 8px;
  background: #fff;
  transition: 0.2s;
  box-sizing: border-box;
}

#fcSearchInput:focus {
  outline: none;
  border-color: #888;
  box-shadow: 0 0 0 2px rgba(0,0,0,0.05);
}

.fc-columns {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
}

.fc-column {
  flex: 1;
  min-width: 240px;
}

.fc-column-title {
  font-weight: 600;
  padding-bottom: 0.5rem;
  margin-bottom: 1rem;
  border-bottom: 2px solid #e2e2e2;
  color: #222;
}

.fc-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* Стили для оригинальных ссылок (скрипт их автоматически преобразует) */
.fc-list a {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 0.5rem 0.75rem;
  border-radius: 8px;
  background: #f9f9f9;
  text-decoration: none;
  transition: 0.1s;
  border: 1px solid #eee;
}

.fc-list a:hover {
  background: #f0f0f0;
  border-color: #ddd;
}

.fc-list a faceclaim {
  font-weight: 600;
  color: #1a1a2e;
  order: 1;
}

.fc-list a charname {
  color: #555;
  background: #eaeef2;
  padding: 0.2rem 0.5rem;
  border-radius: 20px;
  margin-left: 0.75rem;
  order: 2;
  white-space: nowrap;
}

.fc-list a.fc-hidden {
  display: none;
}
</style>

<script>
(function() {
  function init() {
    var searchInput = document.getElementById('fcSearchInput');
    var maleContainer = document.getElementById('fcMaleList');
    var femaleContainer = document.getElementById('fcFemaleList');

    if (!searchInput || !maleContainer || !femaleContainer) return;

    // Функция для получения данных из простой ссылки
    function getItemData(link) {
      var fcElement = link.querySelector('faceclaim');
      var cnElement = link.querySelector('charname');
     
      var fc = fcElement ? fcElement.textContent.trim() : '';
      var cn = cnElement ? cnElement.textContent.trim() : '';
     
      return { fc: fc, cn: cn };
    }

    function getAllItems() {
      var maleItems = Array.from(maleContainer.querySelectorAll('a:not(.fc-processed)'));
      var femaleItems = Array.from(femaleContainer.querySelectorAll('a:not(.fc-processed)'));
     
      // Помечаем обработанные ссылки, чтобы не преобразовывать их повторно
      maleItems.forEach(function(item) {
        var data = getItemData(item);
        // Сохраняем оригинальные данные в атрибуты для быстрого поиска
        item.setAttribute('data-fc', data.fc);
        item.setAttribute('data-cn', data.cn);
        item.classList.add('fc-processed');
      });
     
      femaleItems.forEach(function(item) {
        var data = getItemData(item);
        item.setAttribute('data-fc', data.fc);
        item.setAttribute('data-cn', data.cn);
        item.classList.add('fc-processed');
      });
     
      return {
        maleItems: Array.from(maleContainer.querySelectorAll('.fc-processed')),
        femaleItems: Array.from(femaleContainer.querySelectorAll('.fc-processed'))
      };
    }

    function filterItems(query) {
      var items = getAllItems();
      var lowerQuery = query.toLowerCase().trim();
     
      function shouldShow(item) {
        if (lowerQuery === '') return true;
       
        var fc = (item.getAttribute('data-fc') || '').toLowerCase();
        var cn = (item.getAttribute('data-cn') || '').toLowerCase();
       
        return fc.indexOf(lowerQuery) !== -1 || cn.indexOf(lowerQuery) !== -1;
      }
     
      items.maleItems.forEach(function(item) {
        if (shouldShow(item)) {
          item.classList.remove('fc-hidden');
        } else {
          item.classList.add('fc-hidden');
        }
      });
     
      items.femaleItems.forEach(function(item) {
        if (shouldShow(item)) {
          item.classList.remove('fc-hidden');
        } else {
          item.classList.add('fc-hidden');
        }
      });
    }
   
    searchInput.addEventListener('input', function(e) {
      filterItems(e.target.value);
    });
   
    // Инициализация
    getAllItems(); // Преобразуем все ссылки
    filterItems('');
   
    // Если на форуме ссылки добавляются динамически (через AJAX), можно добавить MutationObserver
    var observer = new MutationObserver(function(mutations) {
      mutations.forEach(function(mutation) {
        if (mutation.addedNodes.length) {
          // Если появились новые ссылки, обрабатываем их
          var newMaleLinks = maleContainer.querySelectorAll('a:not(.fc-processed)');
          var newFemaleLinks = femaleContainer.querySelectorAll('a:not(.fc-processed)');
         
          if (newMaleLinks.length || newFemaleLinks.length) {
            newMaleLinks.forEach(function(link) {
              var data = getItemData(link);
              link.setAttribute('data-fc', data.fc);
              link.setAttribute('data-cn', data.cn);
              link.classList.add('fc-processed');
            });
            newFemaleLinks.forEach(function(link) {
              var data = getItemData(link);
              link.setAttribute('data-fc', data.fc);
              link.setAttribute('data-cn', data.cn);
              link.classList.add('fc-processed');
            });
            // Обновляем фильтр, если есть активный поиск
            if (searchInput.value.trim() !== '') {
              filterItems(searchInput.value);
            }
          }
        }
      });
    });
   
    observer.observe(maleContainer, { childList: true, subtree: true });
    observer.observe(femaleContainer, { childList: true, subtree: true });
  }
 
  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', init);
  } else {
    init();
  }
})();
</script>
[/html][hideprofile]