Вы приняты, добро пожаловать!

Коды для заполнения (следующим сообщением в теме анкеты):
Заполните поля во вкладках "Основа", "Профиль", "Плашка", "Фон" и нажмите на кнопку "Скопировать код" ниже, чтобы скопировать заполненные шаблоны.
[html]
<script>
// --------- FILL BACKGROUNDS ------------

function labelBg(className, nameCategory, src) {
    return `<label class="${className}"><input type="radio" name="${nameCategory}" id="${src}" onchange="updateProfilePreview()"><img src="${src}" loading="lazy"> </label>`;
}

function fillBgs(bgs) {
    document.getElementById('bgContainer').innerHTML = bgs
        .map(bg => labelBg("profileBgLabel", "profileBg", bg)).join('');
}

// --------- FILL STRIPES ------------

function labelStripe(className, nameCategory, src) {
    return `<label class="${className}"><input type="radio" name="${nameCategory}" id="${src}" onchange="updateProfilePreview()"><img src="${src}"> </label>`;
}

function fillStripes(stripes) {
    document.getElementById('stripeContainer').innerHTML = stripes
        .map(stripe => labelStripe("profileStripeLabel", "profileStripe", stripe)).join('');
}

// --------- USER DATA ------------

let userLatinName = '';
let userProfileUrl = '';
let userApplicationFormUrl = '';

window.addEventListener("message", (event) => {
    if (!event.origin.match(/oldshadows\.rusff\.me$/)) return;
    if (event.data.eventName != 'profileFillingResponce') return;
    userLatinName = event.data.userLatinName;
    userProfileUrl = event.data.userProfileUrl;
    userApplicationFormUrl = event.data.userApplicationFormUrl;
    fillStripes(event.data.stripes);
    fillBgs(event.data.backgrounds);
});

window.addEventListener("message", (event) => {
    if (!event.origin.match(/oldshadows\.rusff\.me$/)) return;
    if (event.data.eventName != 'fontChange') return;
    $('.post-content p, .post-content div').css('font-size', event.data.fontSize + 'px');
});

const sendProfileRequest = () => {
    window.parent.postMessage({ eventName: 'profileFillingRequest' }, "*");
};
sendProfileRequest();
const intervalId = setInterval(sendProfileRequest, 1000);
window.addEventListener("message", (event) => {
    if (!event.origin.match(/oldshadows\.rusff\.me$/)) return;
    if (event.data.eventName === 'profileFillingResponce') {
        clearInterval(intervalId);
    }
});

function copyResults() {
    let copyContent = '';
   
    // -- форма внешности --
    const actorName = document.getElementById('actor').value;
    if (actorName) {
        const actorForm = `${actorName} — ${String.fromCharCode(91)}url=${userProfileUrl}${String.fromCharCode(93)}${userLatinName}${String.fromCharCode(91)}/url${String.fromCharCode(93)}`;
        copyContent += `Форма внешности: 
${String.fromCharCode(91)}code${String.fromCharCode(93)}${actorForm}${String.fromCharCode(91)}/code${String.fromCharCode(93)}`;
    }

    // -- форма заполнения профиля --
    const cyrillicName = document.getElementById('cyrillicName').value;
    if (cyrillicName) {
        const profileDescrName = document.getElementById('mainDescr').value;
        let profileForm = `<a href='${userApplicationFormUrl}'>${cyrillicName}</a>, ${profileDescrName}`;
       
        if (document.getElementById('hrAdd').checked) {
            profileForm += '<hr>';
        } else {
            profileForm += '<br>';
        }
       
        const profileAdd = document.getElementById('addDescr').value;
        const profileAddNotFilled = profileAdd == '' || profileAdd == `любое описание на ваш вкус <a href='ссылка на анкету персонажа'>имя на кириллице</a>`;
        if (!profileAddNotFilled) {
            profileForm += profileAdd;
        }
       
        copyContent += `\n\nФорма профиля:
${String.fromCharCode(91)}code${String.fromCharCode(93)}${profileForm}${String.fromCharCode(91)}/code${String.fromCharCode(93)}\n\n`;
    }

    // -- форма плашки --
    const stripeForm = Array.from(document.getElementsByName('profileStripe'))
        .filter(element => element.checked)
        .map(element => element.id)
        .join('');

    if (stripeForm) {
        copyContent += `Плашка:
${String.fromCharCode(91)}img${String.fromCharCode(93)}${stripeForm}${String.fromCharCode(91)}/img${String.fromCharCode(93)}\n\n`;
    }

        // -- форма фона --
    const bgForm = Array.from(document.getElementsByName('profileBg'))
        .filter(element => element.checked)
        .map(element => element.id)
        .join('');

    if (bgForm) {
        copyContent += `Фон:
${String.fromCharCode(91)}img${String.fromCharCode(93)}${bgForm}${String.fromCharCode(91)}/img${String.fromCharCode(93)}\n\n`;
    }

    // -- форма списка ролей --
    const listsDescription = document.getElementById('listsDescription').value;
    if (cyrillicName && listsDescription) {
        const listsForm = `${String.fromCharCode(91)}url=${userProfileUrl}${String.fromCharCode(93)}${cyrillicName}${String.fromCharCode(91)}/url${String.fromCharCode(93)} — ${listsDescription}`;
        copyContent += `Список ролей:
${String.fromCharCode(91)}code${String.fromCharCode(93)}${listsForm}${String.fromCharCode(91)}/code${String.fromCharCode(93)}\n\n`;
    }

    window.parent.postMessage({
        eventName: 'profileCopyInfoRequest',
        copyData: copyContent.trim() // Удаляем лишние переносы в конце
    }, "*");
};

document.getElementById('instructionResult').onclick = copyResults;

// --------- post user profile update ------------
function updateProfilePreview() {
    const cyrillicName = document.getElementById('cyrillicName').value ?? userLatinName;
    const profileDescrName = document.getElementById('mainDescr').value;
    let profileForm = `<a href='${userApplicationFormUrl}'>${cyrillicName}</a>, ${profileDescrName}`;
   
    if (document.getElementById('hrAdd').checked) {
        profileForm += '<hr>';
        } else {
            profileForm += '<br>';
        }   
    const profileAdd = document.getElementById('addDescr').value;
    const profileAddNotFilled = profileAdd == '' || profileAdd == `любое описание на ваш вкус <a href='ссылка на анкету персонажа'>имя на кириллице</a>`;
    if (!profileAddNotFilled) {
        profileForm += profileAdd;
    }

    const stripeForm = Array.from(document.getElementsByName('profileStripe'))
        .filter(element => element.checked)
        .map(element => element.id)
        .join('');

    const bgForm = Array.from(document.getElementsByName('profileBg'))
        .filter(element => element.checked)
        .map(element => element.id)
        .join('');

    window.parent.postMessage({
        eventName: 'profileDemo',
        profileDescr: profileForm,
        stripe: stripeForm,
        background: bgForm
    }, "*");
}

updateProfilePreview();

window.addEventListener("message", (event) => {
    if (!event.origin.match(/oldshadows\.rusff\.me$/)) return;
    if (event.data.eventName != 'fontChange') return;
    $('.post-content p, .post-content div').css('font-size', event.data.fontSize + 'px');
});

window.addEventListener("message", (event) => {
    if (!event.origin.match(/oldshadows\.rusff\.me$/)) return;
    if (event.data.eventName != 'styleChange') return;
    $("body").attr("class", event.data.style);
});
</script>

<div class="fillingForm">
<label class="fillingCategoryRadio"><input type="radio" id="main" name="fillingCategoryRadio" checked /> <span>Основа</span></label>
<label class="fillingCategoryRadio"><input type="radio" id="profileF" name="fillingCategoryRadio" /> <span>Профиль</span></label>
<label class="fillingCategoryRadio"><input type="radio" id="stripesF" name="fillingCategoryRadio" /> <span>Плашка</span></label>
<label class="fillingCategoryRadio"><input type="radio" id="bgsF" name="fillingCategoryRadio" /> <span>Фон</span></label>

<div class="instructionBlock mainInstruction">
<h2 class="instructionHeading">Основа</h2>
<label for="cyrillicName" class="labelDescr">Имя (кирилица):</label>
<input type="text" id="cyrillicName" name="cyrillicName" placeholder="кириллица" oninput="updateProfilePreview()">

<label for="actor" class="labelDescr">Внешность (латиница):</label>
<input type="text" id="actor" name="actor" placeholder="если не нужно, оставьте поле пустым">

<label for="listsDescription" class="labelDescr">Описание для списка ролей:</label>
<input type="text" id="listsDescription" name="listsDescription" placeholder="род деятельности, занятость">
</div>

<div class="instructionBlock profileInstruction">
<h2 class="instructionHeading">Описание в профиль</h2>
<label for="mainDescr" class="labelDescr">Описание в профиль:</label>
<input type="text" id="mainDescr" name="mainDescr" value="возраст, раса, род деятельности" oninput="updateProfilePreview()">

<label for="hrAdd" class="hrAdd">
<input type="checkbox" id="hrAdd" name="hrAdd" onchange="updateProfilePreview()" />
<span>Добавить полосу между секциями</span>
</label>

<label for="addDescr" class="labelDescr">При желании можете добавить в профиль пару, красивую цитату, важного родственника, врага и тому подобное через это поле. Если не нужно, оставьте его пустым или не меняйте:</label>
<textarea id="addDescr" oninput="updateProfilePreview()" name="addDescr" rows="4">любое описание на ваш вкус <a href='ссылка на анкету персонажа'>имя на кириллице</a></textarea>
</div>

<div class="instructionBlock stripeInstruction">
<h2 class="instructionHeading">Плашки</h2>
<div id="stripeContainer"></div>
</div>

<div class="instructionBlock bgInstruction">
<h2 class="instructionHeading">Фоны</h2>
<div id="bgContainer"></div>
</div>

<div class="formButtons">
<input type="button" id="instructionResult" value="Скопировать код">
</div>
</div>

<style>
body { color: var(--text1); }

h2.instructionHeading {
    font-size: 16px;
    font-family: 'Palatino Linotype';
    font-weight: bold;
    letter-spacing: 1px;
}

.labelDescr {
    display: block;
    margin: 9px 0px 1px 0px;
}

.fillingForm { text-align: center; }

.instructionBlock {
    text-align: left;
    margin: 10px 0 !important;
    padding: 14px 14px 12px 14px !important;
    border: 1px solid var(--borders);
    background: var(--qBG);
    border-radius: 4px;
}

.instructionBlock input[type="text"] {
    width: calc(100% - 10px);
}

label.hrAdd {
    margin: 10px 0 0 0;
    display: block;
}

input#hrAdd  {
    accent-color: var(--darkpinkText);
}

label.fillingCategoryRadio {
    border-radius: 16px;
    border: 1px solid var(--borders);
    background: var(--beg300);
    padding: 2px 6px;
    display: inline-block;
    margin: 0px 4px 5px 0px;
}

.instructionBlock textarea {
    width: calc(100% - 10px);
    resize: vertical;
}

label.fillingCategoryRadio:has(input:checked) {
    background: var(--borders);
    color: var(--text1);
}

.fillingCategoryRadio input[type="radio"] {
    display: none;
}

label.fillingCategoryRadio {
    cursor: pointer;
}

.mainInstruction, .profileInstruction, .stripeInstruction, .bgInstruction { display: none; }
.fillingCategoryRadio:has(#main:checked) ~ .mainInstruction { display: block !important; }
.fillingCategoryRadio:has(#profileF:checked) ~ .profileInstruction { display: block !important; }
.fillingCategoryRadio:has(#stripesF:checked) ~ .stripeInstruction { display: block !important; }
.fillingCategoryRadio:has(#bgsF:checked) ~ .bgInstruction { display: block !important; }

.profileStripeLabel, .profileBgLabel {
    margin: 5px 5px;
    display: inline-block;
    width: 180px;
    border-radius: 5px;
    padding: 5px;
    background: rgb(255 255 255 / 17%);
}

.profileStripeLabel img, .profileBgLabel img { border-radius: 3px; }
.profileBgLabel img {
    width: 180px;
    height: 40px;
    object-fit: cover;
    object-position: top;
}

.profileStripeLabel input, .profileBgLabel input { display: none; }

.profileStripeLabel:has(input:checked), .profileBgLabel:has(input:checked) {
    background: rgb(0 0 0 / 12%);
}

div#stripeContainer, div#bgContainer  {
    align-items: baseline;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: flex-start;
    height: 190px;
    overflow-x: auto;
    overflow-y: hidden;
}

</style>
[/html]