АВТОР: @heartofarenegade (ДС)
Featured · 3 показывает первых трёх персонажей в виде компактной витрины, тогда как All Characters открывает полную галерею активной страницы, вместе со строкой поиска, фильтрами, счётчиком персонажей и пагинацией.
Вкладки работают через таргетинг по URL-хэшу, не требуют JavaScript и включают адаптивные стили для десктопных и мобильных профилей. Активные вкладки получают светящееся тематическое оформление, а полная галерея открывается с плавной анимацией появления.
Вкладки персонажей с фильтрацией по тегам (настраивается под ваши нужды)
Ещё одна система для профиля JanitorAI на чистом CSS, которая сортирует видимые карточки персонажей по кликабельным категориям на основе тегов.
Панель вкладок включает:
All — показывает всех загруженных персонажей
Avatar — показывает карточки с тегом Avatar
Witcher — показывает карточки с поддерживаемыми вариациями тега Witcher
Prompts — показывает персонажей, связанных с промптами
Female — показывает персонажей с тегом Female
Каждая вкладка использует таргетинг по URL-хэшу и CSS-селекторы :has() для обнаружения соответствующих тег-классов внутри карточек персонажей. Активная вкладка получает светящийся выделенный стиль, а несовпадающие карточки скрываются. При переключении категорий проигрывается плавная анимация появления, а раскладка адаптируется под мобильные экраны.
Система не требует JavaScript и фильтрует только персонажей, загруженных на текущей странице пагинации. Названия тег-классов должны совпадать с нормализованными классами тегов JanitorAI, чтобы каждый фильтр работал корректно.
Небольшой гайд: добавление ещё одной вкладки с тегом
Пример: добавляем фильтр Vampire.
1. Добавьте якорь
<a id="vega-tag-vampire"></a>
2. Добавьте кнопку вкладки
Внутри
.vega-tag-tabs:<a href="#vega-tag-vampire">Vampire</a>
3. Добавьте селектор активной вкладки
Добавьте это перед общим стилем активной вкладки:
body:has(#vega-tag-vampire:target)
.vega-tag-tabs a[href="#vega-tag-vampire"],
4. Добавьте правило фильтрации
body:has(#vega-tag-vampire:target)
:is(.pp-cc-wrapper, .profile-character-card-wrapper)
:not(:has(.pp-tag-vampire)) {
display: none !important;
}
Также добавьте
#vega-tag-vampire:target в списки селекторов для вкладки All и анимации.Теговые классы JanitorAI обычно пишутся в нижнем регистре, без пробелов и знаков препинания:
Vampire → .pp-tag-vampire
Female Vampire → .pp-tag-femalevampire
Sci-Fi → .pp-tag-scifi
Original Character → .pp-tag-originalcharacter
Единого полного списка тегов не существует, так как JanitorAI поддерживает пользовательские теги, созданные авторами. Теги карточек персонажей используют формат .pp-tag-[название], а пользовательские названия отображаются в нижнем регистре.
Дополнение к дисклеймеру для ясности: даже если вы настроите отображение так, чтобы показывались только карточки персонажей с определённым тегом или элементом, будут показаны только совпадения на текущей активной странице. Каждая страница может показывать максимум 34 бота одновременно, и это контролируется JavaScript, поэтому скрытие остальных персонажей не заставит показать больше персонажей.
Уточняю это, чтобы было ясно: это не будет работать как настоящий фильтр по тегам. А вот поиск пользовательского тега через строку поиска — работает.
#css@janitorAiCF//Кинуть тейк