[html]
<link rel="stylesheet" href="https://forumstatic.ru/files/001c/c9/97/78262.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="return btbCopyApplication(this);"
            >
                ✦ Скопировать заполненную анкету ✦
            </button>

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

        </div>

    </div>

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

</div>

<script>
function btbCopyApplication(button) {
    var root = button.closest(".btb-app");
    if (!root) return false;

    function val(id, fallback) {
        var el = root.querySelector("#" + id);
        var v = el ? String(el.value || "").trim() : "";
        return v || fallback;
    }

    function imgVal(id) {
        var el = root.querySelector("#" + id);
        var v = el ? String(el.value || "").trim() : "";
        return v.replace(/[\r\n]/g, "")
                .replace(/\[/g, "%5B")
                .replace(/\]/g, "%5D");
    }

    function B(tag) { return "[" + tag + "]"; }
    function E(tag) { return "[/" + tag + "]"; }
    function BO(cls) { return "[block=" + cls + "]"; }
    function BC() { return "[/block]"; }

    var lines = [];
    var img1 = imgVal("app-img-1");
    var img2 = imgVal("app-img-2");

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

    if (img1 || img2) {
        lines.push(BO("app-images"));
        if (img1) lines.push(BO("app-image") + B("img") + img1 + E("img") + BC());
        if (img2) lines.push(BO("app-image") + B("img") + img2 + E("img") + BC());
        lines.push(BC());
    }

    lines.push(
        BO("app-appearance") +
        "внешность: " + B("b") + val("app-face", "Actor Name") + E("b") +
        BC()
    );

    lines.push(BO("app-namebox"));
    lines.push(BO("app-name-en") + val("app-name-en", "Name Surname") + BC());
    lines.push(BO("app-name-ru") + val("app-name-ru", "Имя Фамилия") + BC());
    lines.push(BC());

    lines.push(BO("app-info"));
    lines.push(BO("app-info-row") + B("b") + "Возраст:" + E("b") + " " + val("app-age", "—") + " • " + val("app-birthday", "—") + BC());
    lines.push(BO("app-info-row") + B("b") + "Раса / статус крови:" + E("b") + " " + val("app-blood", "—") + BC());
    lines.push(BO("app-info-row") + B("b") + "Образование / школьная деятельность:" + E("b") + " " + val("app-house", "—") + BC());
    lines.push(BO("app-info-row") + B("b") + "Лояльность:" + E("b") + " " + val("app-loyalty", "нейтралитет") + BC());
    lines.push(BO("app-info-wide") + B("b") + "Род деятельности:" + E("b") + " " + val("app-job", "—") + BC());
    lines.push(BC());

    lines.push(BO("app-section"));
    lines.push(BO("app-section-title") + "✦ Описание персонажа ✦" + BC());
    lines.push(BO("app-section-body"));
    lines.push(val("app-description", "Краткое описание персонажа."));
    lines.push(BC());
    lines.push(BC());

    lines.push(BO("app-section"));
    lines.push(BO("app-section-title") + "✦ Магия и имущество ✦" + BC());
    lines.push(BO("app-section-body"));
    lines.push(BO("app-info"));
    lines.push(BO("app-info-row") + B("b") + "Волшебная палочка:" + E("b") + " " + val("app-wand", "—") + BC());
    lines.push(BO("app-info-row") + B("b") + "Особые способности:" + E("b") + " " + val("app-special", "—") + BC());
    lines.push(BO("app-info-row") + B("b") + "Патронус:" + E("b") + " " + val("app-patronus", "—") + BC());
    lines.push(BO("app-info-row") + B("b") + "Боггарт:" + E("b") + " " + val("app-boggart", "—") + BC());
    lines.push(BO("app-info-row") + B("b") + "Артефакты:" + E("b") + " " + val("app-artifacts", "—") + BC());
    lines.push(BO("app-info-row") + B("b") + "Имущество:" + E("b") + " " + val("app-property", "—") + BC());
    lines.push(BC());
    lines.push(BC());
    lines.push(BC());

    lines.push(BO("app-section"));
    lines.push(BO("app-section-title") + "✦ Об игроке ✦" + BC());
    lines.push(BO("app-section-body"));
    lines.push(BO("app-list-row") + B("b") + "Связь:" + E("b") + " " + val("app-contact", "—") + BC());
    lines.push(BO("app-list-row") + B("b") + "Твинки:" + E("b") + " " + val("app-twins", "—") + BC());
    lines.push(BC());
    lines.push(BC());

    lines.push(BC());

    var text = lines.join("\n");

    var ta = document.createElement("textarea");
    ta.value = text;
    ta.setAttribute("readonly", "readonly");
    ta.style.position = "fixed";
    ta.style.left = "-9999px";
    ta.style.top = "0";
    document.body.appendChild(ta);

    ta.focus();
    ta.select();
    ta.setSelectionRange(0, ta.value.length);

    var ok = false;
    try {
        ok = document.execCommand("copy");
    } catch (e) {}

    document.body.removeChild(ta);

    if (ok) {
        var oldText = button.innerHTML;
        button.innerHTML = "✓ Анкета скопирована";
        setTimeout(function () {
            button.innerHTML = oldText;
        }, 1600);
    } else {
        window.prompt("Скопируйте анкету:", text);
    }

    return false;
}
</script>

[/html]