Имя активиста Имя активиста Имя активиста Имя активиста
Имя постописца Имя постописца Имя постописца Имя постописца
Glorious × Ник × Bryce × Ник
NC-21 × Супергероика × Реальные внешности × 2030 год
Автор
Тут размещается текст важного поста, объявления или лучшего сообщения. Если текста станет много, внутри этой области появится вертикальная прокрутка. Ссылка внизу при этом останется на своём месте.
Читать пост
Название эпизода
Скоро вернёмся, не теряйтесь <3

The Glory Days

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.

Вы здесь » The Glory Days » гостевая » списки занятых ролей и внешностей

списки занятых ролей и внешностей

Страница: 1
Тема закрыта

Сообщений 1 страница 2 из 2

1

  • Автор: Glorious
  • Ядминистратор
  • Glorious
  • ЛЗ: Злобный админус
  • Цитата:
    помни
    что всегда найдется кто-то
    сильнее
  • Сообщений: 93
  • Уважение: +5

[hideprofile]

[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">

   
        <!-- 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="https://tgd.f-rpg.me/profile.php?id=5">
                    Брайс Брэдшоу
                </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>зарегистрированный, B-класс</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="https://tgd.f-rpg.me/profile.php?id=11">
                   Итан Сикорски
                </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">
                    37
                </span>
            </div>

            <div class="tgd-role__information">

                <div class="tgd-role__field">
                    <b>Принадлежность</b>
                    <span>NASA</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="https://tgd.f-rpg.me/profile.php?id=9">
                Мортимер Бейкер
                </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">
                    25
                </span>
            </div>

            <div class="tgd-role__information">

                <div class="tgd-role__field">
                    <b>Принадлежность</b>
                    <span>Stormcast</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="https://tgd.f-rpg.me/profile.php?id=6">
                    Александра Аркен
                </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">
                    39
                </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="/https://tgd.f-rpg.me/profile.php?id=10">
                    Каролайн Прескотт
                </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>
    <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]

0

2

  • Автор: Glorious
  • Ядминистратор
  • Glorious
  • ЛЗ: Злобный админус
  • Цитата:
    помни
    что всегда найдется кто-то
    сильнее
  • Сообщений: 93
  • Уважение: +5

[hideprofile][html]<div class="tgd-faces fullwidth-template">

    <header class="tgd-faces__header">
        <div class="tgd-faces__issue">THE GLORY DAYS · DATABASE</div>

        <div class="tgd-faces__heading">
            <div class="tgd-faces__title">занятые внешности</div>
            <div class="tgd-faces__mark">FACE CLAIM</div>
        </div>

        <div class="tgd-faces__subtitle">
            Сначала указывается фандом и внешность, затем имя персонажа.
        </div>
    </header>

    <div class="tgd-faces__columns">

        <!-- ЖЕНСКИЕ ВНЕШНОСТИ -->

        <section class="tgd-faces__section tgd-faces__section--female">

            <h3 class="tgd-faces__section-title">
                <i class="fa-solid fa-bolt"></i>
                женские
                <span>female faces</span>
            </h3>

            <div class="tgd-faces__scroll">

                <div class="tgd-faces__group">
                    <div class="tgd-faces__letter">a — d</div>

                    <div class="tgd-faces__list">
                        <div class="tgd-faces__empty">
                            <span>имя внешности</span>
                            <a href="#">игрок</a>
                        </div>
                    </div>
                </div>

                <div class="tgd-faces__group">
                    <div class="tgd-faces__letter">e — h</div>

                    <div class="tgd-faces__list">
                        <div class="tgd-faces__empty">
                            <span>elle fanning</span>
                            <a href="https://tgd.f-rpg.me/profile.php?id=10">wish</a>
                        </div>
                    </div>
                </div>

                <div class="tgd-faces__group">
                    <div class="tgd-faces__letter">i — l</div>

                    <div class="tgd-faces__list">
                        <div class="tgd-faces__empty">
                            <span>имя внешности</span>
                            <a href="#">игрок</a>
                        </div>
                    </div>
                </div>

                <div class="tgd-faces__group">
                    <div class="tgd-faces__letter">m — p</div>

                    <div class="tgd-faces__list">
                        <div class="tgd-faces__empty">
                            <span>имя внешности</span>
                            <a href="#">игрок</a>
                        </div>
                    </div>
                </div>

                <div class="tgd-faces__group">
                    <div class="tgd-faces__letter">q — t</div>

                    <div class="tgd-faces__list">
                        <div class="tgd-faces__empty">
                            <span>имя внешности</span>
                            <a href="#">игрок</a>
                        </div>
                    </div>
                </div>

                <div class="tgd-faces__group">
                    <div class="tgd-faces__letter">u — x</div>

                    <div class="tgd-faces__list">
                       <div class="tgd-faces__empty">
                            <span>vittoria ceretti</span>
                            <a href="https://tgd.f-rpg.me/profile.php?id=6">alexandra arken</a>
                        </div>
                    </div>
                </div>

                <div class="tgd-faces__group">
                    <div class="tgd-faces__letter">y — z</div>

                    <div class="tgd-faces__list">
                        <div class="tgd-faces__empty">
                            <span>имя внешности</span>
                            <a href="#">игрок</a>
                        </div>
                    </div>
                </div>

            </div>
        </section>

        <!-- МУЖСКИЕ ВНЕШНОСТИ -->

        <section class="tgd-faces__section tgd-faces__section--male">

            <h3 class="tgd-faces__section-title">
                <i class="fa-solid fa-bolt"></i>
                мужские
                <span>male faces</span>
            </h3>

            <div class="tgd-faces__scroll">

                <div class="tgd-faces__group">
                    <div class="tgd-faces__letter">a — d</div>

                    <div class="tgd-faces__list">
                        <div class="tgd-faces__empty">
                            <span>alan ritchson</span>
                            <a href="https://tgd.f-rpg.me/profile.php?id=5">bryce bradshow</a>
                        </div>

<div class="tgd-faces__empty">
                            <span>dylan o'brien</span>
                            <a href="https://tgd.f-rpg.me/profile.php?id=9">mortimer baker</a>
                        </div>

<div class="tgd-faces__empty">
                            <span>имя внешности</span>
                            <a href="#">игрок</a>
                        </div>

                    </div>
                </div>

                <div class="tgd-faces__group">
                    <div class="tgd-faces__letter">e — h</div>

                    <div class="tgd-faces__list">
                        <div class="tgd-faces__empty">
                            <span>имя внешности</span>
                            <a href="#">игрок</a>
                        </div>
                    </div>
                </div>

                <div class="tgd-faces__group">
                    <div class="tgd-faces__letter">i — l</div>

                    <div class="tgd-faces__list">
                        <div class="tgd-faces__empty">
                            <span>joseph gordon-levitt</span>
                            <a href="https://tgd.f-rpg.me/profile.php?id=11">ehtan sikorski</a>
                        </div>
                    </div>
                </div>

                <div class="tgd-faces__group">
                    <div class="tgd-faces__letter">m — p</div>

                    <div class="tgd-faces__list">
                        <div class="tgd-faces__empty">
                            <span>имя внешности</span>
                            <a href="#">игрок</a>
                        </div>
                    </div>
                </div>

                <div class="tgd-faces__group">
                    <div class="tgd-faces__letter">q — t</div>

                    <div class="tgd-faces__list">
                        <div class="tgd-faces__empty">
                            <span>имя внешности</span>
                            <a href="#">игрок</a>
                        </div>
                    </div>
                </div>

                <div class="tgd-faces__group">
                    <div class="tgd-faces__letter">u — x</div>

                    <div class="tgd-faces__list">
                        <div class="tgd-faces__empty">
                            <span>имя внешности</span>
                            <a href="#">игрок</a>
                        </div>
                    </div>
                </div>

                <div class="tgd-faces__group">
                    <div class="tgd-faces__letter">y — z</div>

                    <div class="tgd-faces__list">
                        <div class="tgd-faces__empty">
                            <span>имя внешности</span>
                            <a href="#">игрок</a>
                        </div>
                    </div>
                </div>

            </div>
        </section>

    </div>

</div>

[/html]

0

Тема закрыта
Страница: 1

Вы здесь » The Glory Days » гостевая » списки занятых ролей и внешностей

Рейтинг форумов | Создать форум бесплатно