[html]
<script>
// --------- FILL STRIPES ------------

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

function fillStripes(stripes, userId) {
    document.getElementById('stripeContainer').innerHTML = stripes
        .filter(stripe => (stripe.allowed.includes("all") || stripe.allowed.includes(userId)))
        .map(stripe => labelStripe("profileStripeLabel", "profileStripe", stripe.src, stripe.descr)).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, event.data.userId);
});
window.parent.postMessage({ eventName: 'profileFillingRequest' }, "*");

function copyResults() {
    let copyContent = '';
   
    // -- форма плашки --
    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)}`;
    }

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

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

// --------- post user profile update ------------
function updateProfilePreview() {
    const stripeForm = Array.from(document.getElementsByName('profileStripe'))
        .filter(element => element.checked)
        .map(element => element.id)
        .join('');

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

updateProfilePreview();
</script>

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

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

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

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

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

.profileStripeLabel img { border-radius: 3px; }

.profileStripeLabel input { display: none; }

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

.stripeDescr {
    color: rgb(0 0 0 / 51%);
    padding: 0px 0px 3px 0px;
}

div#stripeContainer {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
}

</style>
[/html]