плашки

[html]

function labelStripe(className, nameCategory, src, index) {
return `<label class="${className}"><input type="radio" name="${nameCategory}" id="${src}" onchange="updateProfilePreview()"> <div class="bgDescr">${index+1}</div> <img src="${src}"> </label>`;
}
function fillBgs(allImages) {
document.getElementById('bgContainer').innerHTML = allImages
.map((bgImage, index) => labelStripe("profileBgLabel", "profileBg", bgImage, index)).join('');
}

// Вызываем функцию с массивом изображений
fillBgs(allImages);

// --------- post user profile update ------------
function updateProfilePreview() {
const bgForm = Array.from(document.getElementsByName('profileBg'))
.filter(element => element.checked)
.map(element => element.id)
.join('');
console.log(bgForm);
window.parent.postMessage({
eventName: 'profileDemo',
stripe: bgForm
}, "*");
}

</script>

<style>

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

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

.profileBgLabel input { display: none; }

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

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

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

label.profileBgLabel img {
width: 150px;
height: 30px;
object-fit: cover;
}

</style>
[/html]

слухи и события

избранная цитата

нужны игрокам

Шрифт в постах

Стиль оформления

Дополнительно

azzt test

Меню навигации

Пользовательские ссылки

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

плашки

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

Поделиться12025-11-28 00:25:52

Поделиться22025-11-28 00:26:05