[html]
<link id="btb-template-style" rel="stylesheet" type="text/css" href="https://forumstatic.ru/files/001c/8a/8a/76663.css">

<div class="btb-app">

    <!-- =====================================================
         ЗАГОЛОВОК
         ===================================================== -->

    <div class="app-main-title">
        Шаблон анкеты
    </div>

    <div class="app-main-subtitle">
        расскажите нам, кто скрывается за именем вашего персонажа
    </div>

    <div class="app-main-line"></div>

    <!-- =====================================================
         ПАМЯТКА
         ===================================================== -->

    <div class="app-note">

        <div class="app-note-row">
            Анкета создаётся <b>отдельной темой</b>
            в регистрационном разделе.
        </div>

        <div class="app-note-row">
            Анкета — это карточка персонажа, а не литературный пост.
            Расскажите о главных событиях, решениях и качествах,
            которые действительно сформировали героя.
        </div>

        <div class="app-note-row">
            Историю и характер можно оформлять цельным текстом
            или отдельными фактами.
        </div>

        <div class="app-note-row">
            Необычное происхождение, редкие способности,
            значимые должности и другие особенности
            должны быть логично объяснены в анкете.
        </div>

        <div class="app-note-row">
            После принятия вы сможете дополнять историю персонажа
            событиями, произошедшими непосредственно в игре.
        </div>

    </div>

    <div class="app-topic-name">
        Название темы:
        <b>Name Surname — род деятельности</b>
    </div>

    <!-- =====================================================
         ПРИМЕР АНКЕТЫ
         ===================================================== -->

    <div class="app-images">

        <div class="app-image">
            <img src="https://placehold.co/800x500/10232e/87969a?text=IMAGE+01" alt="">
        </div>

        <div class="app-image">
            <img src="https://placehold.co/800x500/10232e/87969a?text=IMAGE+02" alt="">
        </div>

    </div>

    <div class="app-appearance">
        внешность:
        <b>Actor Name</b>
    </div>

    <div class="app-namebox">

        <div class="app-name-en">
            Name Surname
        </div>

        <div class="app-name-ru">
            Имя Фамилия
        </div>

    </div>

    <div class="app-info">

        <div class="app-info-row">
            <span class="app-label">Возраст:</span>
            <span class="app-value">
                21 год • 14 февраля 2006
            </span>
        </div>

        <div class="app-info-row">
            <span class="app-label">Раса / статус крови:</span>
            <span class="app-value">
                чистокровный волшебник
            </span>
        </div>

        <div class="app-info-row">
            <span class="app-label">Образование / школьная деятельность:</span>
            <span class="app-value">
                Слизерин, 2024
            </span>
        </div>

        <div class="app-info-row">
            <span class="app-label">Лояльность:</span>
            <span class="app-value">
                нейтралитет / Лига равных прав / Общество охотников на монстров / Министерство Магии (лояльность не значит принадлежность организации)
            </span>
        </div>

        <div class="app-info-row app-info-wide">
            <span class="app-label">Род деятельности:</span>
            <span class="app-value">
                должность / профессия • место работы / организация
            </span>
        </div>

    </div>

    <!-- =====================================================
         ОПИСАНИЕ ПЕРСОНАЖА
         ===================================================== -->

    <div class="app-section">

        <div class="app-section-title">
            ✦ Описание персонажа ✦
        </div>

        <div class="app-section-body">

            <p>
                Расскажите о происхождении, важных событиях,
                настоящем персонажа, его характере, привычках,
                убеждениях и манере общения.
            </p>

            <p>
                Необязательно делить текст на биографию и характер:
                можно дать цельное описание, которое помогает понять,
                кто этот персонаж, чего он хочет и как действует.
            </p>

            <div class="app-hint">
                Здесь же можно объяснить необычное происхождение,
                редкие способности, важные связи, должности
                и другие обстоятельства, влияющие на игру.
            </div>

        </div>

    </div>

    <!-- =====================================================
         МАГИЯ И ИМУЩЕСТВО
         ===================================================== -->

    <div class="app-section">

        <div class="app-section-title">
            ✦ Магия и имущество ✦
        </div>

        <div class="app-section-body">

            <div class="app-info">

                <div class="app-info-row">
                    <b>Волшебная палочка:</b><br>
                    древесина • сердцевина • длина • гибкость
                </div>

                <div class="app-info-row">
                    <b>Особые способности:</b><br>
                    легилимент, метаморфомаг, зарегистрированный анимаг и т. д. или прочерк
                </div>

                <div class="app-info-row">
                    <b>Патронус:</b><br>
                    форма патронуса или «не умеет вызывать»
                </div>

                <div class="app-info-row">
                    <b>Боггарт:</b><br>
                    главный страх или прочерк
                </div>

                <div class="app-info-row">
                    <b>Артефакты:</b><br>
                    перечисление или прочерк
                </div>

                <div class="app-info-row">
                    <b>Имущество:</b><br>
                    жильё, транспорт, питомцы, значимые вещи или прочерк
                </div>

            </div>

        </div>

    </div>

    <!-- =====================================================
         ОБ ИГРОКЕ
         ===================================================== -->

    <div class="app-section">

        <div class="app-section-title">
            ✦ Об игроке ✦
        </div>

        <div class="app-section-body">

            <div class="app-list-row">
                <b>Связь:</b>
                Telegram / Discord / другой удобный способ
            </div>

            <div class="app-list-row">
                <b>Твинки:</b>
                перечисление или прочерк
            </div>

        </div>

    </div>

    <!-- =====================================================
         ЗАПОЛНЕНИЕ
         ===================================================== -->

    <div class="app-form-divider">
        ✦ Заполнение шаблона ✦
    </div>

    <div class="app-form">

        <div class="app-form-grid">

            <!-- ОФОРМЛЕНИЕ -->

            <div class="app-form-section">
                — оформление —
            </div>

            <div class="app-field">

                <div class="app-field-label">
                    Ссылка на картинку №1
                </div>

                <input
                    id="app-img-1"
                    class="app-input"
                    type="text"
                    placeholder="https://..."
                    autocomplete="off"
                >

            </div>

            <div class="app-field">

                <div class="app-field-label">
                    Ссылка на картинку №2
                </div>

                <input
                    id="app-img-2"
                    class="app-input"
                    type="text"
                    placeholder="https://..."
                    autocomplete="off"
                >

            </div>

            <div class="app-field app-field-wide">

                <div class="app-field-label">
                    Внешность
                    <span>• имя актёра / модели на английском</span>
                </div>

                <input
                    id="app-face"
                    class="app-input"
                    type="text"
                    placeholder="Noah Schnapp"
                    autocomplete="off"
                >

            </div>

            <!-- ОСНОВНЫЕ ДАННЫЕ -->

            <div class="app-form-section">
                — основные данные —
            </div>

            <div class="app-field">

                <div class="app-field-label">
                    Имя и фамилия на английском
                </div>

                <input
                    id="app-name-en"
                    class="app-input"
                    type="text"
                    placeholder="Albus Potter"
                    autocomplete="off"
                >

            </div>

            <div class="app-field">

                <div class="app-field-label">
                    Имя и фамилия на русском
                </div>

                <input
                    id="app-name-ru"
                    class="app-input"
                    type="text"
                    placeholder="Альбус Поттер"
                    autocomplete="off"
                >

            </div>

            <div class="app-field">

                <div class="app-field-label">
                    Возраст
                </div>

                <input
                    id="app-age"
                    class="app-input"
                    type="text"
                    placeholder="21 год"
                    autocomplete="off"
                >

            </div>

            <div class="app-field">

                <div class="app-field-label">
                    Дата рождения
                </div>

                <input
                    id="app-birthday"
                    class="app-input"
                    type="text"
                    placeholder="14 февраля 2006"
                    autocomplete="off"
                >

            </div>

            <div class="app-field">

                <div class="app-field-label">
                    Раса / статус крови
                </div>

                <select
                    id="app-blood"
                    class="app-select"
                >

                    <option value="">выберите вариант</option>
                    <option>чистокровный волшебник</option>
                    <option>полукровный волшебник</option>
                    <option>магглорожденный волшебник</option>
                    <option>сквиб</option>
                    <option>полувампир</option>
                    <option>полувейла</option>
                    <option>полувеликан</option>
                    <option>вампир</option>
                    <option>вейла</option>
                    <option>великан</option>
                    <option>гоблин</option>
                    <option>домовой эльф</option>
                    <option>кентавр</option>
                    <option>оборотень</option>
                    <option>другое</option>

                </select>

            </div>

            <div class="app-field">

                <div class="app-field-label">
                    Лояльность
                </div>

                <select
                    id="app-loyalty"
                    class="app-select"
                >

                    <option>нейтралитет</option>
                    <option>Лига равных прав</option>
                    <option>Общество охотников на монстров</option>
                    <option>Министерство Магии</option>

                </select>

            </div>

            <div class="app-field app-field-wide">

                <div class="app-field-label">
                    Образование / школьная деятельность
                    <span>• школа, факультет / направление, выпуск, староство, команда и другое; прочерк</span>
                </div>

                <input
                    id="app-house"
                    class="app-input"
                    type="text"
                    placeholder="Хогвартс, Слизерин, 2024 • староста школы • ловец"
                    autocomplete="off"
                >

            </div>

            <div class="app-field app-field-wide">

                <div class="app-field-label">
                    Род деятельности
                    <span>• должность / профессия • место работы / организация</span>
                </div>

                <input
                    id="app-job"
                    class="app-input"
                    type="text"
                    placeholder="помощник в аптеке на Косой аллее, сборщик трав"
                    autocomplete="off"
                >

            </div>

            <!-- ОПИСАНИЕ ПЕРСОНАЖА -->

            <div class="app-form-section">
                — описание персонажа —
            </div>

            <div class="app-field app-field-wide">

                <div class="app-field-label">
                    Описание персонажа
                    <span>• биография, характер, привычки, убеждения, важные события и настоящее — в удобной вам форме</span>
                </div>

                <textarea
                    id="app-description"
                    class="app-textarea"
                    placeholder="Расскажите о персонаже цельным текстом или отдельными фактами..."
                ></textarea>

            </div>

            <!-- МАГИЯ И ИМУЩЕСТВО -->

            <div class="app-form-section">
                — магия и имущество —
            </div>

            <div class="app-field">

                <div class="app-field-label">
                    Волшебная палочка
                    <span>• прочерк</span>
                </div>

                <input
                    id="app-wand"
                    class="app-input"
                    type="text"
                    placeholder="древесина • сердцевина • длина • гибкость"
                    autocomplete="off"
                >

            </div>

            <div class="app-field">

                <div class="app-field-label">
                    Особые способности
                </div>

                <input
                    id="app-special"
                    class="app-input"
                    type="text"
                    placeholder="легилимент / метаморфомаг / зарегистрированный анимаг / другое / прочерк"
                    autocomplete="off"
                >

            </div>

            <div class="app-field">

                <div class="app-field-label">
                    Патронус
                </div>

                <input
                    id="app-patronus"
                    class="app-input"
                    type="text"
                    placeholder="форма патронуса / не умеет вызывать"
                    autocomplete="off"
                >

            </div>

            <div class="app-field">

                <div class="app-field-label">
                    Боггарт
                </div>

                <input
                    id="app-boggart"
                    class="app-input"
                    type="text"
                    placeholder="главный страх или прочерк"
                    autocomplete="off"
                >

            </div>

            <div class="app-field">

                <div class="app-field-label">
                    Артефакты
                    <span>• перечисление или прочерк</span>
                </div>

                <textarea
                    id="app-artifacts"
                    class="app-textarea app-textarea-short"
                    placeholder="артефакт, артефакт, артефакт..."
                ></textarea>

            </div>

            <div class="app-field">

                <div class="app-field-label">
                    Имущество
                    <span>• жильё, транспорт, питомцы, значимые вещи или прочерк</span>
                </div>

                <textarea
                    id="app-property"
                    class="app-textarea app-textarea-short"
                    placeholder="перечисление или прочерк"
                ></textarea>

            </div>

            <!-- ОБ ИГРОКЕ -->

            <div class="app-form-section">
                — об игроке —
            </div>

            <div class="app-field">

                <div class="app-field-label">
                    Связь
                </div>

                <input
                    id="app-contact"
                    class="app-input"
                    type="text"
                    placeholder="Telegram / Discord / другое"
                    autocomplete="off"
                >

            </div>

            <div class="app-field">

                <div class="app-field-label">
                    Твинки
                </div>

                <input
                    id="app-twins"
                    class="app-input"
                    type="text"
                    placeholder="перечисление или прочерк"
                    autocomplete="off"
                >

            </div>

        </div>

        <!-- =================================================
             КНОПКА
             ================================================= -->

        <div class="app-copy-wrap">

            <button
                type="button"
                class="btb-copy-button"
                onclick="copyBtbApplication(this); return false;"
            >
                ✦ Скопировать заполненную анкету ✦
            </button>

            <div class="app-copy-caption">
                создайте новую тему и вставьте скопированный шаблон в сообщение
            </div>

        </div>

    </div>

    <div class="app-footer">
        После принятия анкеты персонаж считается допущенным к игре.
        Изменения, затрагивающие биографию, происхождение,
        способности или значимые сюжетные обстоятельства,
        лучше предварительно согласовать с администрацией.
    </div>

</div>

<script>
(function () {
    "use strict";

    function rawValue(id) {
        var el = document.getElementById(id);
        if (!el) return "";
        return String(el.value || "").trim();
    }

    function escapeText(value) {
        return String(value || "")
            .replace(/&/g, "&")
            .replace(/</g, "<")
            .replace(/>/g, ">");
    }

    function textValue(id, fallback) {
        var value = rawValue(id);
        return value ? escapeText(value) : fallback;
    }

    function longValue(id, fallback) {
        var value = rawValue(id);
        if (!value) return fallback;

        value = value
            .replace(/<br\s*\/?>/gi, "\n")
            .replace(/\r\n?/g, "\n");

        return escapeText(value);
    }

    function imageValue(id) {
        var value = rawValue(id);
        return value
            .replace(/[\r\n]/g, "")
            .replace(/\[/g, "%5B")
            .replace(/\]/g, "%5D")
            .trim();
    }

    function bbOpen(tag) {
        return "[" + tag + "]";
    }

    function bbClose(tag) {
        return "[/" + tag + "]";
    }

    function blockOpen(className) {
        return "[" + "block=" + className + "]";
    }

    function blockClose() {
        return "[/" + "block]";
    }

    function buildBtbApplication() {
        var img1 = imageValue("app-img-1");
        var img2 = imageValue("app-img-2");

        var face = textValue("app-face", "Actor Name");
        var nameEn = textValue("app-name-en", "Name Surname");
        var nameRu = textValue("app-name-ru", "Имя Фамилия");

        var age = textValue("app-age", "—");
        var birthday = textValue("app-birthday", "—");
        var blood = textValue("app-blood", "—");
        var house = textValue("app-house", "—");
        var job = textValue("app-job", "—");
        var loyalty = textValue("app-loyalty", "нейтралитет");

        var description = longValue(
            "app-description",
            "Краткое описание персонажа."
        );

        var wand = textValue("app-wand", "—");
        var artifacts = longValue("app-artifacts", "—");
        var property = longValue("app-property", "—");

        var special = longValue(
            "app-special",
            "—"
        );

        var patronus = textValue("app-patronus", "—");
        var boggart = textValue("app-boggart", "—");
        var contact = textValue("app-contact", "—");
        var twins = textValue("app-twins", "—");

        var b = bbOpen("b");
        var eb = bbClose("b");
        var img = bbOpen("img");
        var eimg = bbClose("img");

        var lines = [];

        lines.push(blockOpen("btb-character-card"));

        if (img1 || img2) {
            lines.push(blockOpen("app-images"));

            if (img1) {
                lines.push(
                    blockOpen("app-image") +
                    img + img1 + eimg +
                    blockClose()
                );
            }

            if (img2) {
                lines.push(
                    blockOpen("app-image") +
                    img + img2 + eimg +
                    blockClose()
                );
            }

            lines.push(blockClose());
        }

        lines.push(
            blockOpen("app-appearance") +
            "внешность: " + b + face + eb +
            blockClose()
        );

        lines.push(blockOpen("app-namebox"));
        lines.push(
            blockOpen("app-name-en") +
            nameEn +
            blockClose()
        );
        lines.push(
            blockOpen("app-name-ru") +
            nameRu +
            blockClose()
        );
        lines.push(blockClose());

        lines.push(blockOpen("app-info"));

        lines.push(
            blockOpen("app-info-row") +
            b + "Возраст:" + eb + " " +
            age + " • " + birthday +
            blockClose()
        );

        lines.push(
            blockOpen("app-info-row") +
            b + "Раса / статус крови:" + eb + " " +
            blood +
            blockClose()
        );

        lines.push(
            blockOpen("app-info-row") +
            b + "Образование / школьная деятельность:" + eb + " " +
            house +
            blockClose()
        );

        lines.push(
            blockOpen("app-info-row") +
            b + "Лояльность:" + eb + " " +
            loyalty +
            blockClose()
        );

        lines.push(
            blockOpen("app-info-wide") +
            b + "Род деятельности:" + eb + " " +
            job +
            blockClose()
        );

        lines.push(blockClose());

        lines.push(blockOpen("app-section"));
        lines.push(
            blockOpen("app-section-title") +
            "✦ Описание персонажа ✦" +
            blockClose()
        );
        lines.push(blockOpen("app-section-body"));
        lines.push(description);
        lines.push(blockClose());
        lines.push(blockClose());

        lines.push(blockOpen("app-section"));
        lines.push(
            blockOpen("app-section-title") +
            "✦ Магия и имущество ✦" +
            blockClose()
        );
        lines.push(blockOpen("app-section-body"));
        lines.push(blockOpen("app-info"));

        lines.push(
            blockOpen("app-info-row") +
            b + "Волшебная палочка:" + eb + " " +
            wand +
            blockClose()
        );

        lines.push(
            blockOpen("app-info-row") +
            b + "Особые способности:" + eb + " " +
            special +
            blockClose()
        );

        lines.push(
            blockOpen("app-info-row") +
            b + "Патронус:" + eb + " " +
            patronus +
            blockClose()
        );

        lines.push(
            blockOpen("app-info-row") +
            b + "Боггарт:" + eb + " " +
            boggart +
            blockClose()
        );

        lines.push(
            blockOpen("app-info-row") +
            b + "Артефакты:" + eb + " " +
            artifacts +
            blockClose()
        );

        lines.push(
            blockOpen("app-info-row") +
            b + "Имущество:" + eb + " " +
            property +
            blockClose()
        );

        lines.push(blockClose());
        lines.push(blockClose());
        lines.push(blockClose());

        lines.push(blockOpen("app-section"));
        lines.push(
            blockOpen("app-section-title") +
            "✦ Об игроке ✦" +
            blockClose()
        );
        lines.push(blockOpen("app-section-body"));

        lines.push(
            blockOpen("app-list-row") +
            b + "Связь:" + eb + " " +
            contact +
            blockClose()
        );

        lines.push(
            blockOpen("app-list-row") +
            b + "Твинки:" + eb + " " +
            twins +
            blockClose()
        );

        lines.push(blockClose());
        lines.push(blockClose());

        lines.push(blockClose());

        return lines.join("\n");
    }

    function showSuccess(button) {
        var original = button.innerHTML;
        button.innerHTML = "✓ Анкета скопирована";
        button.classList.add("btb-copy-success");
        window.setTimeout(function () {
            button.innerHTML = original;
            button.classList.remove("btb-copy-success");
        }, 2200);
    }

    function fallbackCopy(text, button) {
        var scrollX = window.pageXOffset || document.documentElement.scrollLeft || 0;
        var scrollY = window.pageYOffset || document.documentElement.scrollTop || 0;
        var textarea = document.createElement("textarea");
        textarea.value = text;
        textarea.setAttribute("readonly", "readonly");
        textarea.style.position = "fixed";
        textarea.style.left = "50%";
        textarea.style.top = "50%";
        textarea.style.width = "1px";
        textarea.style.height = "1px";
        textarea.style.opacity = "0";
        textarea.style.pointerEvents = "none";
        document.body.appendChild(textarea);
        try {
            textarea.focus({ preventScroll: true });
        } catch (error) {
            textarea.focus();
        }
        textarea.select();
        textarea.setSelectionRange(0, textarea.value.length);
        var copied = false;
        try {
            copied = document.execCommand("copy");
        } catch (error) {
            copied = false;
        }
        document.body.removeChild(textarea);
        window.scrollTo(scrollX, scrollY);
        if (copied) {
            showSuccess(button);
        } else {
            window.prompt("Автоматическое копирование не сработало. Нажмите Ctrl+C:", text);
        }
    }

    window.copyBtbApplication = function (button) {
        var text = buildBtbApplication();
        if (navigator.clipboard && window.isSecureContext) {
            navigator.clipboard.writeText(text)
                .then(function () { showSuccess(button); })
                .catch(function () { fallbackCopy(text, button); });
        } else {
            fallbackCopy(text, button);
        }
    };
})();

(function () {
    "use strict";

    var root =
        document.querySelector(".btb-app");

    if (!root) return;

    function hasOwnText(element) {

        var tag =
            (element.tagName || "")
            .toLowerCase();

        if (
            tag === "input" ||
            tag === "textarea" ||
            tag === "select" ||
            tag === "option" ||
            tag === "button"
        ) {
            return true;
        }

        for (
            var i = 0;
            i < element.childNodes.length;
            i++
        ) {

            var node =
                element.childNodes[i];

            if (
                node.nodeType === 3 &&
                /\S/.test(
                    node.nodeValue || ""
                )
            ) {
                return true;
            }
        }

        return false;
    }

    function rememberSizes() {

        var elements =
            root.querySelectorAll("*");

        for (
            var i = 0;
            i < elements.length;
            i++
        ) {

            var el = elements[i];

            if (!hasOwnText(el)) {
                continue;
            }

            if (
                el.dataset.btbBaseFont
            ) {
                continue;
            }

            var size =
                parseFloat(
                    window
                        .getComputedStyle(el)
                        .fontSize
                );

            if (
                !isNaN(size) &&
                size > 0
            ) {

                el.dataset.btbBaseFont =
                    String(size);
            }
        }
    }

    function applyScale(scale) {

        scale =
            parseFloat(scale);

        if (isNaN(scale)) {
            scale = 1;
        }

        rememberSizes();

        var elements =
            root.querySelectorAll("*");

        for (
            var i = 0;
            i < elements.length;
            i++
        ) {

            var el =
                elements[i];

            var base =
                parseFloat(
                    el.dataset.btbBaseFont
                );

            if (isNaN(base)) {
                continue;
            }

            el.style.setProperty(
                "font-size",
                (
                    base *
                    scale
                ).toFixed(2) +
                "px",
                "important"
            );
        }
    }

    window.addEventListener(
        "message",
        function (event) {

            if (
                !event.data ||
                event.data.type !==
                "BTB_FONT_SCALE"
            ) {
                return;
            }

            applyScale(
                event.data.scale
            );
        }
    );

    /*
     * При загрузке анкета сама спрашивает
     * у форума текущий размер.
     */

    try {

        parent.postMessage(
            {
                type:
                    "BTB_FONT_REQUEST"
            },
            "*"
        );

    } catch (error) {}

})();
</script>
[/html]