Тут размещается текст важного поста, объявления
или лучшего сообщения. Если текста станет много,
внутри этой области появится вертикальная прокрутка.
Ссылка внизу при этом останется на своём месте.
Читать пост
Хтмл шаблон: Список ролей
Страница: 1
Сообщений 1 страница 2 из 2
Поделиться12026-08-26 12:39:36
- Администратор
- Эдлин Миллер
- Победе грош цена, коль не дает нам радости она. Милей судьбой с убитым поменяться, чем страхами, убив его, терзаться.
- Сообщений: 224
- Уважение: +0
[html]
<div class="tgd-roles fullwidth-template">
<header class="tgd-roles__header">
<div class="tgd-roles__issue">
THE GLORY DAYS · ROLE DATABASE
</div>
<div class="tgd-roles__heading">
<div class="tgd-roles__title">список ролей</div>
<div class="tgd-roles__mark">CHARACTERS</div>
</div>
<div class="tgd-roles__subtitle">
Зарегистрированные персонажи проекта и основная информация о них.
</div>
</header>
<!-- ФИЛЬТРЫ -->
<div class="tgd-roles__filters">
<div class="tgd-roles__filter-group"
data-filter-group="type">
<span class="tgd-roles__filter-title">
<i class="fa-solid fa-dna"></i>
тип
</span>
<button type="button"
class="tgd-roles__filter is-active"
data-value="all">
все
</button>
<button type="button"
class="tgd-roles__filter"
data-value="human">
human
</button>
<button type="button"
class="tgd-roles__filter"
data-value="extra-human">
extra-human
</button>
</div>
<div class="tgd-roles__filter-group"
data-filter-group="gender">
<span class="tgd-roles__filter-title">
<i class="fa-solid fa-venus-mars"></i>
пол
</span>
<button type="button"
class="tgd-roles__filter is-active"
data-value="all">
все
</button>
<button type="button"
class="tgd-roles__filter"
data-value="female">
женщины
</button>
<button type="button"
class="tgd-roles__filter"
data-value="male">
мужчины
</button>
</div>
</div>
<div class="tgd-roles__result">
Показано ролей:
<b class="tgd-roles__count">0</b>
</div>
<!-- СПИСОК КАРТОЧЕК -->
<div class="tgd-roles__grid">
<!-- HUMAN / FEMALE -->
<article class="tgd-role"
data-type="human"
data-gender="female">
<header class="tgd-role__header">
<a class="tgd-role__name"
href="/profile.php?id=1">
Эвелин Миллер
</a>
<span class="tgd-role__gender"
title="женщина">
<i class="fa-solid fa-venus"></i>
</span>
</header>
<div class="tgd-role__badges">
<span class="tgd-role__type">
human
</span>
<span class="tgd-role__age">
32 года
</span>
</div>
<div class="tgd-role__information">
<div class="tgd-role__field">
<b>Принадлежность</b>
<span>Кузница</span>
</div>
<div class="tgd-role__field">
<b>Идентичность</b>
<span>известна властям</span>
</div>
</div>
</article>
<!-- EXTRA-HUMAN / FEMALE -->
<article class="tgd-role"
data-type="extra-human"
data-gender="female">
<header class="tgd-role__header">
<a class="tgd-role__name"
href="/profile.php?id=2">
Диана Харпер
</a>
<span class="tgd-role__gender"
title="женщина">
<i class="fa-solid fa-venus"></i>
</span>
</header>
<div class="tgd-role__badges">
<span class="tgd-role__type">
extra-human
</span>
<span class="tgd-role__age">
19 лет
</span>
</div>
<div class="tgd-role__information">
<div class="tgd-role__field">
<b>Принадлежность</b>
<span>Астра</span>
</div>
<div class="tgd-role__field">
<b>Идентичность</b>
<span>публичная</span>
</div>
</div>
</article>
<!-- HUMAN / MALE -->
<article class="tgd-role"
data-type="human"
data-gender="male">
<header class="tgd-role__header">
<a class="tgd-role__name"
href="/profile.php?id=3">
Джеймс Уокер
</a>
<span class="tgd-role__gender"
title="мужчина">
<i class="fa-solid fa-mars"></i>
</span>
</header>
<div class="tgd-role__badges">
<span class="tgd-role__type">
human
</span>
<span class="tgd-role__age">
41 год
</span>
</div>
<div class="tgd-role__information">
<div class="tgd-role__field">
<b>Принадлежность</b>
<span>одиночка</span>
</div>
<div class="tgd-role__field">
<b>Идентичность</b>
<span>секретная</span>
</div>
</div>
</article>
<!-- EXTRA-HUMAN / MALE -->
<article class="tgd-role"
data-type="extra-human"
data-gender="male">
<header class="tgd-role__header">
<a class="tgd-role__name"
href="/profile.php?id=4">
Майкл Брукс
</a>
<span class="tgd-role__gender"
title="мужчина">
<i class="fa-solid fa-mars"></i>
</span>
</header>
<div class="tgd-role__badges">
<span class="tgd-role__type">
extra-human
</span>
<span class="tgd-role__age">
35 лет
</span>
</div>
<div class="tgd-role__information">
<div class="tgd-role__field">
<b>Принадлежность</b>
<span>Кузница</span>
</div>
<div class="tgd-role__field">
<b>Идентичность</b>
<span>анрег</span>
</div>
</div>
</article>
</div>
<div class="tgd-roles__empty" hidden>
По выбранным критериям персонажей пока нет.
</div>
</div>
<!-- Фильтрация списка ролей -->
<script>
(function () {
function initTgdRoles() {
var pages = document.querySelectorAll('.tgd-roles');
pages.forEach(function (page) {
/*
* Не подключаем обработчики повторно,
* если список уже был инициализирован.
*/
if (page.getAttribute('data-filter-ready') === 'true') {
return;
}
page.setAttribute('data-filter-ready', 'true');
var buttons = page.querySelectorAll(
'.tgd-roles__filter'
);
var cards = page.querySelectorAll(
'.tgd-role'
);
var counter = page.querySelector(
'.tgd-roles__count'
);
var emptyMessage = page.querySelector(
'.tgd-roles__empty'
);
var selectedType = 'all';
var selectedGender = 'all';
function applyFilters() {
var visibleCount = 0;
cards.forEach(function (card) {
var hideCard = false;
var cardType = card.getAttribute(
'data-type'
);
var cardGender = card.getAttribute(
'data-gender'
);
if (selectedType !== 'all') {
if (cardType !== selectedType) {
hideCard = true;
}
}
if (selectedGender !== 'all') {
if (cardGender !== selectedGender) {
hideCard = true;
}
}
if (hideCard) {
card.classList.add('is-hidden');
} else {
card.classList.remove('is-hidden');
visibleCount++;
}
});
if (counter) {
counter.textContent = visibleCount;
}
if (emptyMessage) {
if (visibleCount === 0) {
emptyMessage.hidden = false;
} else {
emptyMessage.hidden = true;
}
}
}
buttons.forEach(function (button) {
button.addEventListener(
'click',
function () {
var group = this.parentNode;
var groupName = group.getAttribute(
'data-filter-group'
);
var filterValue = this.getAttribute(
'data-value'
);
if (groupName === 'type') {
selectedType = filterValue;
}
if (groupName === 'gender') {
selectedGender = filterValue;
}
var groupButtons =
group.querySelectorAll(
'.tgd-roles__filter'
);
groupButtons.forEach(function (item) {
item.classList.remove('is-active');
});
this.classList.add('is-active');
applyFilters();
}
);
});
applyFilters();
});
}
/*
* Если страница ещё загружается — ждём.
* Если скрипт появился позднее — запускаем сразу.
*/
if (document.readyState === 'loading') {
document.addEventListener(
'DOMContentLoaded',
initTgdRoles
);
} else {
initTgdRoles();
}
})();
</script>
[/html]
Поделиться22026-08-26 22:23:21
- Администратор
- Эдлин Миллер
- Победе грош цена, коль не дает нам радости она. Милей судьбой с убитым поменяться, чем страхами, убив его, терзаться.
- Сообщений: 224
- Уважение: +0
Админам!
Женщина обычный человек Код: <!-- HUMAN / FEMALE -->
<article class="tgd-role"
data-type="human"
data-gender="female">
<header class="tgd-role__header">
<a class="tgd-role__name"
href="/ссылка профиля">
Имя и Фамилия
</a>
<span class="tgd-role__gender"
title="женщина">
<i class="fa-solid fa-venus"></i>
</span>
</header>
<div class="tgd-role__badges">
<span class="tgd-role__type">
human
</span>
<span class="tgd-role__age">
цифра
</span>
</div>
<div class="tgd-role__information">
<div class="tgd-role__field">
<b>Принадлежность</b>
<span>ответ</span>
</div>
<div class="tgd-role__field">
<b>Идентичность</b>
<span>ответ</span>
</div>
</div>
</article> | Женщина супер Код: <!-- EXTRA-HUMAN / FEMALE -->
<article class="tgd-role"
data-type="extra-human"
data-gender="female">
<header class="tgd-role__header">
<a class="tgd-role__name"
href="/ссылка профиля">
Диана Харпер
</a>
<span class="tgd-role__gender"
title="женщина">
<i class="fa-solid fa-venus"></i>
</span>
</header>
<div class="tgd-role__badges">
<span class="tgd-role__type">
extra-human
</span>
<span class="tgd-role__age">
цифра
</span>
</div>
<div class="tgd-role__information">
<div class="tgd-role__field">
<b>Принадлежность</b>
<span>ответ</span>
</div>
<div class="tgd-role__field">
<b>Идентичность</b>
<span>ответ</span>
</div>
</div>
</article> |
Мужчина обычный человек Код: <!-- HUMAN / MALE -->
<article class="tgd-role"
data-type="human"
data-gender="male">
<header class="tgd-role__header">
<a class="tgd-role__name"
href="/ссылка профиля">
Имя и фамилия
</a>
<span class="tgd-role__gender"
title="мужчина">
<i class="fa-solid fa-mars"></i>
</span>
</header>
<div class="tgd-role__badges">
<span class="tgd-role__type">
human
</span>
<span class="tgd-role__age">
цифра
</span>
</div>
<div class="tgd-role__information">
<div class="tgd-role__field">
<b>Принадлежность</b>
<span>ответ</span>
</div>
<div class="tgd-role__field">
<b>Идентичность</b>
<span>ответ</span>
</div>
</div>
</article> | Мужчина супер Код: <!-- EXTRA-HUMAN / MALE -->
<article class="tgd-role"
data-type="extra-human"
data-gender="male">
<header class="tgd-role__header">
<a class="tgd-role__name"
href="/ссылка профиля">
Имя и фамилия
</a>
<span class="tgd-role__gender"
title="мужчина">
<i class="fa-solid fa-mars"></i>
</span>
</header>
<div class="tgd-role__badges">
<span class="tgd-role__type">
extra-human
</span>
<span class="tgd-role__age">
цифра
</span>
</div>
<div class="tgd-role__information">
<div class="tgd-role__field">
<b>Принадлежность</b>
<span>ответ</span>
</div>
<div class="tgd-role__field">
<b>Идентичность</b>
<span>ответ</span>
</div>
</div>
</article> |
Страница: 1
