СПИСОК НУЖНЫХ
••••••••••••••••••••••••••••••••••••••••••••

[html]
<script>
var Tags = {
    Gender: {
        Male: { id: 'Male', name: 'Мужской' },
        Female: { id: 'Female', name: 'Женский' }
    },

    Activities: {
        Politics: { id: 'Politics', name: 'Политики' },
        Warrior: { id: 'Warrior', name: 'Воины' },
        Gods: { id: 'Gods', name: 'Служители богов' },
        Wizard: { id: 'Wizard', name: 'Маги' },
        Kale: { id: 'Kale', name: 'Кале' },
        Criminal: { id: 'Criminal', name: 'Криминал' }
    },

    Races: {
        Human: { id: 'Human', name: 'Люди' },
        Vampire: { id: 'Vampire', name: 'Вампиры' },
        Soulless: { id: 'Soulless', name: 'Бездушники' },
        Aire: { id: 'Aire', name: 'Айре' },
        Werewolf: { id: 'Werewolf', name: 'Перевертыши' },
        Beastman: { id: 'Beastman', name: 'Зверолюди' },
        Daemon: { id: 'Daemin', name: 'Демоны' },
        Fairy: { id: 'Fairy', name: 'Феи' }
    },

    Aim: {
        Family: { id: 'Family', name: 'Семья' },
        Love: { id: 'Love', name: 'Пара' },
        Friend: { id: 'Friend', name: 'Дружба' },
        Enemy: { id: 'Enemy', name: 'Враги' },
        Worker: { id: 'Worker', name: 'Подчиненные' },
        Plot: { id: 'Plot', name: 'Сюжет' }
    }
};

var fullUserlist = [];

var selectedFilters = {
    gender: null,
    activity: null,
    race: null
};

var resultsContainer = null;
var dropdown = null;

var filters = {
    gender: null,
    activity: null,
    race: null
};

var receivedStyle = null;
var receivedFontData = null;
var receivedTheme = 'pink';

var styleRequestInterval = null;
var styleRequestTimeout = null;

var userListReceived = false;
var userListRequestInterval = null;
var userListRequestTimeout = null;

var interfaceInitialized = false;

/* --------- ПРОВЕРКА РОДИТЕЛЯ --------- */

function isAllowedParentOrigin(origin) {
    return (
        /^https?:\/\/oldshadows\.rusff\.me(?::\d+)?$/.test(origin)
    );
}

/* --------- ФИЛЬТРЫ --------- */

function updateFilters() {
    if (!resultsContainer) {
        return;
    }

    var filteredUsers = fullUserlist.filter(function(user) {
        return userMatchesFilters(user);
    });

    displayResults(filteredUsers);
    sendFiltersToParent();
}

function userMatchesFilters(user) {
    var userTags = Array.isArray(user.tags)
        ? user.tags
        : [];

    var matchesGender =
        selectedFilters.gender === null ||
        userTags.indexOf(selectedFilters.gender) !== -1;

    var matchesActivity =
        selectedFilters.activity === null ||
        userTags.indexOf(selectedFilters.activity) !== -1;

    var matchesRace =
        selectedFilters.race === null ||
        userTags.indexOf(selectedFilters.race) !== -1;

    return matchesGender && matchesActivity && matchesRace;
}

function sendFiltersToParent() {
    window.parent.postMessage({
        eventName: 'filterUserPosts',

        filters: {
            gender: selectedFilters.gender,
            activity: selectedFilters.activity,
            race: selectedFilters.race
        }
    }, '*');
}

/* --------- ГРУППИРОВКА --------- */

function splitUsersByGroups(users) {
    return Object.keys(Tags.Aim).map(function(key) {
        var aim = Tags.Aim[key];

        var groupUsers = users.filter(function(user) {
            return (
                Array.isArray(user.tags) &&
                user.tags.indexOf(aim.id) !== -1
            );
        });

        return {
            users: groupUsers,
            aim: aim
        };
    });
}

function getGroupContent(group) {
    if (
        !Array.isArray(group.users) ||
        group.users.length === 0
    ) {
        return '';
    }

    var result = '';

    result +=
        '<span class="groupTitle">' +
        escapeHtml(group.aim.name) +
        '</span>';

    result += '<div class="groupContainer">';

    group.users.forEach(function(user) {
        var name = escapeHtml(user.name || '');
        var description = escapeHtml(user.descr || '');
        var displayName;

        if (user.url) {
            displayName =
                '<a href="' +
                escapeHtml(user.url) +
                '" target="_top">' +
                name +
                '</a>';
        } else {
            displayName = name;
        }

        result +=
            '<span class="user">' +
            '<b>' +
            displayName +
            '</b> - ' +
            description +
            '</span>';
    });

    result += '</div>';

    return result;
}

function displayResults(users) {
    if (!resultsContainer) {
        return;
    }

    var groups = splitUsersByGroups(users);
    var result = '';

    groups.forEach(function(group) {
        result += getGroupContent(group);
    });

    if (!result) {
        result =
            '<span class="loading">' +
            'По выбранным фильтрам ничего не найдено' +
            '</span>';
    }

    resultsContainer.innerHTML = result;
}

/* --------- ВЫПАДАЮЩИЙ СПИСОК --------- */

function openDropdown(category, items, filterElement) {
    if (!dropdown || !filterElement) {
        return;
    }

    var result =
        '<div class="all ' +
        category +
        ' selectable" ' +
        'data-id="all" ' +
        'data-category="' +
        category +
        '">' +
        'Все' +
        '</div>';

    Object.keys(items).forEach(function(key) {
        var item = items[key];

        result +=
            '<div class="' +
            item.id +
            ' ' +
            category +
            ' selectable" ' +
            'data-id="' +
            item.id +
            '" ' +
            'data-category="' +
            category +
            '">' +
            escapeHtml(item.name) +
            '</div>';
    });

    dropdown.innerHTML = result;

    positionDropdown(filterElement);

    dropdown.style.display = 'inline-block';
}

function positionDropdown(filterElement) {
    if (!dropdown || !filterElement) {
        return;
    }

    var rect = filterElement.getBoundingClientRect();

    dropdown.style.left = rect.left + 'px';
    dropdown.style.top = (rect.bottom - 1) + 'px';
}

function selectFilter(category, selectedId) {
    var normalizedId =
        selectedId === 'all'
            ? null
            : selectedId;

    selectedFilters[category] = normalizedId;

    if (category === 'gender' && filters.gender) {
        filters.gender.textContent = getSelectedName(
            Tags.Gender,
            normalizedId
        );
    }

    if (category === 'activity' && filters.activity) {
        filters.activity.textContent = getSelectedName(
            Tags.Activities,
            normalizedId
        );
    }

    if (category === 'race' && filters.race) {
        filters.race.textContent = getSelectedName(
            Tags.Races,
            normalizedId
        );
    }

    if (dropdown) {
        dropdown.style.display = 'none';
    }

    updateFilters();
}

function getSelectedName(items, selectedId) {
    if (selectedId === null) {
        return 'Все';
    }

    var result = 'Все';

    Object.keys(items).some(function(key) {
        var item = items[key];

        if (item.id === selectedId) {
            result = item.name;
            return true;
        }

        return false;
    });

    return result;
}

/* --------- ТЕМА --------- */

function normalizeStyle(style) {
    if (style === 'system') {
        return window.matchMedia(
            '(prefers-color-scheme: dark)'
        ).matches
            ? 'dark'
            : 'light';
    }

    return style === 'dark'
        ? 'dark'
        : 'light';
}

function applyIframeStyle(style, theme) {
    receivedStyle = normalizeStyle(style);

    if (typeof theme === 'string' && theme) {
        receivedTheme = theme;
    }

    if (!document.body) {
        return false;
    }

    document.body.classList.remove('light');
    document.body.classList.remove('dark');
    document.body.classList.add(receivedStyle);

    document.body.classList.remove('pink');
    document.body.classList.remove('green');
    document.body.classList.add(receivedTheme);

    return true;
}

function requestParentStyle() {
    window.parent.postMessage({
        eventName: 'askStyle'
    }, '*');
}

function stopStyleRequesting() {
    if (styleRequestInterval !== null) {
        clearInterval(styleRequestInterval);
        styleRequestInterval = null;
    }

    if (styleRequestTimeout !== null) {
        clearTimeout(styleRequestTimeout);
        styleRequestTimeout = null;
    }
}

function startStyleRequesting() {
    stopStyleRequesting();

    requestParentStyle();

    styleRequestInterval = setInterval(function() {
        if (
            receivedStyle !== null &&
            document.body &&
            document.body.classList.contains(receivedStyle)
        ) {
            stopStyleRequesting();
            return;
        }

        requestParentStyle();
    }, 300);

    styleRequestTimeout = setTimeout(function() {
        stopStyleRequesting();
    }, 10000);
}

/* --------- ШРИФТ --------- */

function applyIframeFont(data) {
    receivedFontData = data;

    var fontSize = Number(data.fontsize);

    if (!isFinite(fontSize)) {
        fontSize = Number(data.fontSize);
    }

    if (!isFinite(fontSize)) {
        return;
    }

    var elements = document.querySelectorAll(
        '.post-content p, ' +
        '.post-content div, ' +
        '.htmlPost, ' +
        '.filters, ' +
        '.results'
    );

    Array.prototype.forEach.call(
        elements,
        function(element) {
            element.style.fontSize = fontSize + 'px';
        }
    );
}

/* --------- СПИСОК НУЖНЫХ --------- */

function requestUserList() {
    window.parent.postMessage({
        eventName: 'getUserAction'
    }, '*');
}

function stopUserListRequesting() {
    if (userListRequestInterval !== null) {
        clearInterval(userListRequestInterval);
        userListRequestInterval = null;
    }

    if (userListRequestTimeout !== null) {
        clearTimeout(userListRequestTimeout);
        userListRequestTimeout = null;
    }
}

function startUserListRequesting() {
    stopUserListRequesting();

    requestUserList();

    userListRequestInterval = setInterval(function() {
        if (userListReceived) {
            stopUserListRequesting();
            return;
        }

        requestUserList();
    }, 1000);

    userListRequestTimeout = setTimeout(function() {
        stopUserListRequesting();
    }, 15000);
}

/* --------- СООБЩЕНИЯ ОТ РОДИТЕЛЯ --------- */

window.addEventListener('message', function(event) {
    if (event.source !== window.parent) {
        return;
    }

    if (!event.data || typeof event.data !== 'object') {
        return;
    }

    if (!isAllowedParentOrigin(event.origin)) {
        return;
    }

    if (event.data.eventName === 'postUserAction') {
        userListReceived = true;
        stopUserListRequesting();

        fullUserlist = Array.isArray(event.data.userList)
            ? event.data.userList
            : [];

        updateFilters();
        return;
    }

    if (event.data.eventName === 'styleChange') {
        if (applyIframeStyle(event.data.style, event.data.theme)) {
            stopStyleRequesting();
        }

        return;
    }

    if (event.data.eventName === 'fontChange') {
        applyIframeFont(event.data);
    }
});

/* --------- ВСПОМОГАТЕЛЬНЫЕ ФУНКЦИИ --------- */

function escapeHtml(value) {
    return String(value)
        .replace(/&/g, '&amp;')
        .replace(/</g, '&lt;')
        .replace(/>/g, '&gt;')
        .replace(/"/g, '&quot;')
        .replace(/'/g, '\'');
}

/* --------- ИНИЦИАЛИЗАЦИЯ ИНТЕРФЕЙСА --------- */

function initializeInterface() {
    if (interfaceInitialized) {
        return;
    }

    resultsContainer =
        document.querySelector('.resultsContainer');

    filters.gender =
        document.querySelector('.gender.filter');

    filters.activity =
        document.querySelector('.activity.filter');

    filters.race =
        document.querySelector('.race.filter');

    dropdown =
        document.querySelector('.filterDropdown');

    if (
        !resultsContainer ||
        !filters.gender ||
        !filters.activity ||
        !filters.race ||
        !dropdown
    ) {
        return;
    }

    interfaceInitialized = true;

    filters.gender.addEventListener('click', function() {
        openDropdown(
            'gender',
            Tags.Gender,
            filters.gender
        );
    });

    filters.activity.addEventListener('click', function() {
        openDropdown(
            'activity',
            Tags.Activities,
            filters.activity
        );
    });

    filters.race.addEventListener('click', function() {
        openDropdown(
            'race',
            Tags.Races,
            filters.race
        );
    });

    dropdown.addEventListener('click', function(event) {
        var selectedElement =
            event.target.closest('.selectable');

        if (!selectedElement) {
            return;
        }

        var selectedId =
            selectedElement.getAttribute('data-id');

        var category =
            selectedElement.getAttribute('data-category');

        if (!selectedId || !category) {
            return;
        }

        if (
            category !== 'gender' &&
            category !== 'activity' &&
            category !== 'race'
        ) {
            return;
        }

        selectFilter(category, selectedId);
    });

    dropdown.addEventListener('mouseleave', function() {
        dropdown.style.display = 'none';
    });

    document.addEventListener('click', function(event) {
        var clickedFilter =
            event.target.closest('.filter');

        var clickedDropdown =
            event.target.closest('.filterDropdown');

        if (!clickedFilter && !clickedDropdown) {
            dropdown.style.display = 'none';
        }
    });

    window.addEventListener('resize', function() {
        dropdown.style.display = 'none';
    });

    window.addEventListener('scroll', function() {
        dropdown.style.display = 'none';
    });

    if (receivedStyle !== null) {
        applyIframeStyle(receivedStyle);
    }

    if (receivedFontData !== null) {
        applyIframeFont(receivedFontData);
    }

    if (fullUserlist.length > 0) {
        updateFilters();
    }
}

/* --------- ЗАПУСК --------- */

startStyleRequesting();
startUserListRequesting();

if (document.readyState === 'loading') {
    document.addEventListener(
        'DOMContentLoaded',
        function() {
            initializeInterface();

            if (receivedStyle !== null) {
                applyIframeStyle(receivedStyle);
            }
        }
    );
} else {
    initializeInterface();

    if (receivedStyle !== null) {
        applyIframeStyle(receivedStyle);
    }
}
</script>

<div class="htmlPost">
    <div class="filters">
        <h3 class="rolesHeading">Фильтры</h3>
        <div class="location filterCategory">
            <span>Пол:</span>
            <div class="gender filter">Все</div>
        </div>

        <div class="activities filterCategory">
            <span>Род деятельности:</span>
            <div class="activity filter">Все</div>
        </div>

        <div class="races filterCategory">
            <span>Раса:</span>
            <div class="race filter">Все</div>
        </div>
    </div>

    <div class="filterDropdown" style="display: none"></div>

    <div class="results">
        <div class="resultsContainer"><span class="loading">Загружаем...<span/></div>
    </div>
</div>

<style>

body {
    color: var(--text1);
}

.loading {
    text-align: center;
    margin-top: 12px;
    display: block;
}
.rolesHeading {
    margin: 8px 0px 4px 0px;
    font-weight: bold !important;
    font-size: 1.2em !important;
    color: var(--text1);
}

.filters, .results {
    border-radius: 4px;
    border: 1px solid var(--borders);
    background: var(--beg300);
    padding: 0px 10px 10px 10px;
}

.filters {
    margin-bottom: 10px;
}

.filters .filterCategory {
    display: flex;
    gap: 4px;
    margin-bottom: 4px;
    align-items: anchor-center;
}

.filters .filter {
    border-radius: 16px;
    border: 1px solid var(--borders);
    background: var(--beg300);
    padding: 4px 8px;
    transition: ease-in-out 0.1s background, ease-in-out 0.1s color;
}

.filters .filter:hover {
    background: var(--borders);
    color: var(--text);
}

.filterDropdown {
    border-radius: 4px;
    border: 1px solid var(--borders);
    background: var(--beg300);
    padding: 10px 0px;
    position: fixed;
}

.selectable {
    padding: 3px 10px;
}

.selectable:hover {
    background: var(--pinkBorder);
    color: var(--accent);
}

.resultsContainer span.user {
    margin-bottom: 1px;
    line-height: 150% !important;
    color: var(--text1);
    display: block;
    font-size: var(--font11);
}

span.groupTitle {
    font-size: 18px;
    margin-top: 16px;
    margin-bottom: 8px;
    font-family: Palatino Linotype;
    font-weight: 700;
    text-align: center;
    display: block;
    color: var(--text1);
}

.selectable, .filter {
    cursor: pointer;
}

.results { margin-bottom: 80px; }

</style>
[/html]

ДЛЯ ВСЕХ НУЖНЫХ ДЕЙСТВУЕТ АКЦИЯ УПРОЩЕННЫЙ ПРИЕМ (если не указано обратное)