Все купленные иконки и фоны остаются в коллекции на личной странице игрока.
• Вы также можете предложить свою собственную иконку - она не должна превышать размера 35х35 и иметь прозрачный фон. Принимается как статичный формат, так и анимированный. Вы сами решаете, отдать свою иконку в пользование другим участникам или же оставить ее эксклюзивной. Стоимость установки собственной иконки - 300 монет.
• Также обращаем ваше внимание на то, что все предложенные игроками иконки проходят модерацию и при несоответствии с установленными стандартами могут быть отклонены администрацией.
[html] <style>
/* Общие стили для секций */
.profile-section {
background: transparent;
padding: 20px;
text-align: center;
margin: 15px 0;
}
/* Стили для заголовков */
.profile-section .profile-section-title,
.profile-section-title {
color: #000 !important;
margin: 0 0 20px 0 !important;
font-size: 1.17em !important;
font-weight: bold !important;
background: none !important;
text-align: center !important;
width: 100% !important;
display: block !important;
border: none !important;
border-bottom: none !important;
border-top: none !important;
border-left: none !important;
border-right: none !important;
outline: none !important;
box-shadow: none !important;
text-decoration: none !important;
text-decoration-line: none !important;
position: relative;
}
/* Убираем псевдоэлементы */
.profile-section .profile-section-title::before,
.profile-section .profile-section-title::after,
.profile-section-title::before,
.profile-section-title::after {
display: none !important;
content: none !important;
}
/* Подзаголовки с ценами */
.price-subtitle {
color: #000;
margin: 0 0 15px 0;
font-size: 0.9em;
font-weight: normal;
text-align: center;
display: block;
}
/* Блок для категорий с тонкой рамочкой */
.category-block {
border: 1px solid #e0e0e0;
border-radius: 16px;
padding: 20px 15px 15px 15px;
margin-bottom: 25px;
background: rgba(255, 255, 255, 0.3);
}
/* Контейнер для превью */
.preview-container {
display: flex;
gap: 12px;
justify-content: center;
flex-wrap: wrap;
}
/* Базовые стили для всех превью */
.preview-bg, .preview-icon {
cursor: pointer;
position: relative;
background-size: 140% auto;
background-position: top;
border: 2px solid #ddd;
}
/* Стили для превью фонов */
.preview-bg {
width: 85px;
height: 85px;
border-radius: 12px;
}
/* Стили для превью иконок */
.preview-icon {
width: 45px;
height: 45px;
border-radius: 50%;
background-size: 35px 35px;
background-repeat: no-repeat;
background-position: center;
}
/* Эффект наложения */
.bg-overlay, .icon-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0.6);
pointer-events: none;
}
.bg-overlay {
border-radius: 12px;
}
.icon-overlay {
border-radius: 50%;
}
</style>
<!-- ========== РАЗДЕЛ ФОНОВ ПРОФИЛЯ ========== -->
<div class="profile-section">
<h3 class="profile-section-title">Фоны профиля</h3>
<!-- Подраздел: Средневековые котята -->
<div class="category-block">
<div class="price-subtitle"><strong>Средневековые котята - 700 монет</strong></div>
<div class="preview-container">
<div onclick="changeProfileBg(this, 'https://upforme.ru/uploads/001c/99/a1/2/261723.png')" class="preview-bg" style="background-image: url(https://upforme.ru/uploads/001c/99/a1/2/261723.png);"></div>
<div onclick="changeProfileBg(this, 'https://upforme.ru/uploads/001c/99/a1/2/367075.png')" class="preview-bg" style="background-image: url(https://upforme.ru/uploads/001c/99/a1/2/367075.png);"></div>
<div onclick="changeProfileBg(this, 'https://upforme.ru/uploads/001c/99/a1/2/848840.png')" class="preview-bg" style="background-image: url(https://upforme.ru/uploads/001c/99/a1/2/848840.png);"></div>
<div onclick="changeProfileBg(this, 'https://upforme.ru/uploads/001c/99/a1/2/758442.png')" class="preview-bg" style="background-image: url(https://upforme.ru/uploads/001c/99/a1/2/758442.png);"></div>
</div>
</div>
<!-- Подраздел: Дракончики -->
<div class="category-block">
<div class="price-subtitle"><strong>Дракончики - 700 монет</strong></div>
<div class="preview-container">
<div onclick="changeProfileBg(this, 'https://upforme.ru/uploads/001c/99/a1/2/261723.png')" class="preview-bg" style="background-image: url(https://upforme.ru/uploads/001c/99/a1/2/261723.png);"></div>
<div onclick="changeProfileBg(this, 'https://upforme.ru/uploads/001c/99/a1/2/367075.png')" class="preview-bg" style="background-image: url(https://upforme.ru/uploads/001c/99/a1/2/367075.png);"></div>
<div onclick="changeProfileBg(this, 'https://upforme.ru/uploads/001c/99/a1/2/848840.png')" class="preview-bg" style="background-image: url(https://upforme.ru/uploads/001c/99/a1/2/848840.png);"></div>
<div onclick="changeProfileBg(this, 'https://upforme.ru/uploads/001c/99/a1/2/758442.png')" class="preview-bg" style="background-image: url(https://upforme.ru/uploads/001c/99/a1/2/758442.png);"></div>
</div>
</div>
<!-- Подраздел: Весеннее -->
<div class="category-block">
<div class="price-subtitle"><strong>Весеннее - 700 монет</strong></div>
<div class="preview-container">
<div onclick="changeProfileBg(this, 'https://upforme.ru/uploads/001c/99/a1/2/261723.png')" class="preview-bg" style="background-image: url(https://upforme.ru/uploads/001c/99/a1/2/261723.png);"></div>
<div onclick="changeProfileBg(this, 'https://upforme.ru/uploads/001c/99/a1/2/367075.png')" class="preview-bg" style="background-image: url(https://upforme.ru/uploads/001c/99/a1/2/367075.png);"></div>
<div onclick="changeProfileBg(this, 'https://upforme.ru/uploads/001c/99/a1/2/848840.png')" class="preview-bg" style="background-image: url(https://upforme.ru/uploads/001c/99/a1/2/848840.png);"></div>
<div onclick="changeProfileBg(this, 'https://upforme.ru/uploads/001c/99/a1/2/758442.png')" class="preview-bg" style="background-image: url(https://upforme.ru/uploads/001c/99/a1/2/758442.png);"></div>
</div>
</div>
<!-- Подраздел: Морское -->
<div class="category-block">
<div class="price-subtitle"><strong>Морское - 700 монет</strong></div>
<div class="preview-container">
<div onclick="changeProfileBg(this, 'https://upforme.ru/uploads/001c/99/a1/2/261723.png')" class="preview-bg" style="background-image: url(https://upforme.ru/uploads/001c/99/a1/2/261723.png);"></div>
<div onclick="changeProfileBg(this, 'https://upforme.ru/uploads/001c/99/a1/2/367075.png')" class="preview-bg" style="background-image: url(https://upforme.ru/uploads/001c/99/a1/2/367075.png);"></div>
<div onclick="changeProfileBg(this, 'https://upforme.ru/uploads/001c/99/a1/2/848840.png')" class="preview-bg" style="background-image: url(https://upforme.ru/uploads/001c/99/a1/2/848840.png);"></div>
<div onclick="changeProfileBg(this, 'https://upforme.ru/uploads/001c/99/a1/2/758442.png')" class="preview-bg" style="background-image: url(https://upforme.ru/uploads/001c/99/a1/2/758442.png);"></div>
</div>
</div>
<!-- Подраздел: Анимированные фоны -->
<div class="category-block">
<div class="price-subtitle"><strong>Анимированные - 1300 монет</strong></div>
<div class="preview-container">
<div onclick="changeProfileBg(this, 'https://64.media.tumblr.com/72efee7f2d1fe681b19623cda85ab630/2ce11bf0c6f290df-73/s640x960/081611a8df4593706fa936ba0ed364253d4fed1b.gif')" class="preview-bg" style="background-image: url(https://64.media.tumblr.com/72efee7f2d1 … 4fed1b.gif);"></div>
<div onclick="changeProfileBg(this, 'https://i8.imageban.ru/out/2025/09/22/df3043fccc2c544ffa00d6527fbe6e15.gif')" class="preview-bg" style="background-image: url(https://i8.imageban.ru/out/2025/09/22/d … be6e15.gif);"></div>
<div onclick="changeProfileBg(this, 'https://i8.imageban.ru/out/2025/09/22/2c4b1e093ab2df1b6431a23a72436daa.gif')" class="preview-bg" style="background-image: url(https://i8.imageban.ru/out/2025/09/22/2 … 436daa.gif);"></div>
<div onclick="changeProfileBg(this, 'https://i1.imageban.ru/out/2025/09/22/d20535779762a349d897a2dad987edc5.gif')" class="preview-bg" style="background-image: url(https://i1.imageban.ru/out/2025/09/22/d … 87edc5.gif);"></div>
<div onclick="changeProfileBg(this, 'https://i1.imageban.ru/out/2025/09/22/91706b02c2e27513b3fc5b88597e0f68.gif')" class="preview-bg" style="background-image: url(https://i1.imageban.ru/out/2025/09/22/9 … 7e0f68.gif);"></div>
<div onclick="changeProfileBg(this, 'https://i8.imageban.ru/out/2025/09/22/7e4094d4dc2c88817d29e74363beb26a.gif')" class="preview-bg" style="background-image: url(https://i8.imageban.ru/out/2025/09/22/7 … beb26a.gif);"></div>
<div onclick="changeProfileBg(this, 'https://i3.imageban.ru/out/2025/09/22/90de841abad7f8f5c7d4e04cfb6336f1.gif')" class="preview-bg" style="background-image: url(https://i3.imageban.ru/out/2025/09/22/9 … 6336f1.gif);"></div>
<div onclick="changeProfileBg(this, 'https://i3.imageban.ru/out/2025/09/22/93ac8093b69e4ce7e35a7c631dbc274b.gif')" class="preview-bg" style="background-image: url(https://i3.imageban.ru/out/2025/09/22/9 … bc274b.gif);"></div>
<div onclick="changeProfileBg(this, 'https://i6.imageban.ru/out/2025/09/22/dd9d3e77cc6e78981e83cd692858a78c.gif')" class="preview-bg" style="background-image: url(https://i6.imageban.ru/out/2025/09/22/d … 58a78c.gif);"></div>
<div onclick="changeProfileBg(this, 'https://i3.imageban.ru/out/2025/09/22/18ac8bfb1ab1826dd113bc7c2b5a2e1e.gif')" class="preview-bg" style="background-image: url(https://i3.imageban.ru/out/2025/09/22/1 … 5a2e1e.gif);"></div>
<div onclick="changeProfileBg(this, 'https://i3.imageban.ru/out/2025/09/22/1fa0a2d70661570eebb840bbb2a64509.gif')" class="preview-bg" style="background-image: url(https://i3.imageban.ru/out/2025/09/22/1 … a64509.gif);"></div>
<div onclick="changeProfileBg(this, 'https://i4.imageban.ru/out/2025/09/22/2822e7d9a82097ac600849cc0d48b3c2.gif')" class="preview-bg" style="background-image: url(https://i4.imageban.ru/out/2025/09/22/2 … 48b3c2.gif);"></div>
<div onclick="changeProfileBg(this, 'https://i6.imageban.ru/out/2025/09/22/b34030d4095d4649cb85879bace4cb6b.gif')" class="preview-bg" style="background-image: url(https://i6.imageban.ru/out/2025/09/22/b … e4cb6b.gif);"></div>
<div onclick="changeProfileBg(this, 'https://i3.imageban.ru/out/2025/09/22/4e8b06dd4fe9b0c33c289e24147ead87.gif')" class="preview-bg" style="background-image: url(https://i3.imageban.ru/out/2025/09/22/4 … 7ead87.gif);"></div>
<div onclick="changeProfileBg(this, 'https://i3.imageban.ru/out/2025/09/22/9bd56dfc007d456c1ab0ea5e7ef9e2e1.gif')" class="preview-bg" style="background-image: url(https://i3.imageban.ru/out/2025/09/22/9 … f9e2e1.gif);"></div>
</div>
</div>
</div>
<!-- ========== РАЗДЕЛ ИКОНОК ПРОФИЛЯ ========== -->
<div class="profile-section">
<h3 class="profile-section-title">Иконки профиля</h3>
<!-- Подраздел: Анимированные - 1000 монет -->
<div class="category-block">
<div class="price-subtitle"><strong>Анимированные - 1000 монет</strong></div>
<div class="preview-container">
<div onclick="changeProfileIcon(this, 'https://i3.imageban.ru/out/2025/09/13/2a6a518626fd837da3d4c7b422699969.webp')" class="preview-icon" style="background-image: url(https://i3.imageban.ru/out/2025/09/13/2 … 99969.webp);"></div>
<div onclick="changeProfileIcon(this, 'https://upforme.ru/uploads/001c/52/36/19/29205.webp')" class="preview-icon" style="background-image: url(https://upforme.ru/uploads/001c/52/36/19/29205.webp);"></div>
<div onclick="changeProfileIcon(this, 'https://upforme.ru/uploads/001c/52/36/19/960996.webp')" class="preview-icon" style="background-image: url(https://upforme.ru/uploads/001c/52/36/19/960996.webp);"></div>
<div onclick="changeProfileIcon(this, 'https://upforme.ru/uploads/001c/52/36/19/725129.webp')" class="preview-icon" style="background-image: url(https://upforme.ru/uploads/001c/52/36/19/725129.webp);"></div>
<div onclick="changeProfileIcon(this, 'https://upforme.ru/uploads/001c/52/36/19/124952.webp')" class="preview-icon" style="background-image: url(https://upforme.ru/uploads/001c/52/36/19/124952.webp);"></div>
<div onclick="changeProfileIcon(this, 'https://upforme.ru/uploads/001c/52/36/19/50836.webp')" class="preview-icon" style="background-image: url(https://upforme.ru/uploads/001c/52/36/19/50836.webp);"></div>
<div onclick="changeProfileIcon(this, 'https://upforme.ru/uploads/001c/52/36/19/427544.webp')" class="preview-icon" style="background-image: url(https://upforme.ru/uploads/001c/52/36/19/427544.webp);"></div>
<div onclick="changeProfileIcon(this, 'https://upforme.ru/uploads/001c/52/36/19/659754.webp')" class="preview-icon" style="background-image: url(https://upforme.ru/uploads/001c/52/36/19/659754.webp);"></div>
<div onclick="changeProfileIcon(this, 'https://upforme.ru/uploads/001c/52/36/19/493074.webp')" class="preview-icon" style="background-image: url(https://upforme.ru/uploads/001c/52/36/19/493074.webp);"></div>
<div onclick="changeProfileIcon(this, 'https://upforme.ru/uploads/001c/52/36/19/495844.webp')" class="preview-icon" style="background-image: url(https://upforme.ru/uploads/001c/52/36/19/495844.webp);"></div>
<div onclick="changeProfileIcon(this, 'https://upforme.ru/uploads/001c/52/36/19/366464.webp')" class="preview-icon" style="background-image: url(https://upforme.ru/uploads/001c/52/36/19/366464.webp);"></div>
<div onclick="changeProfileIcon(this, 'https://upforme.ru/uploads/001c/52/36/19/905358.webp')" class="preview-icon" style="background-image: url(https://upforme.ru/uploads/001c/52/36/19/905358.webp);"></div>
<div onclick="changeProfileIcon(this, 'https://upforme.ru/uploads/001c/52/36/19/284124.webp')" class="preview-icon" style="background-image: url(https://upforme.ru/uploads/001c/52/36/19/284124.webp);"></div>
</div>
</div>
<!-- Подраздел: Страдающее средневековье - 300 монет -->
<div class="category-block">
<div class="price-subtitle"><strong>Страдающее средневековье - 300 монет</strong></div>
<div class="preview-container">
<div onclick="changeProfileIcon(this, 'https://upforme.ru/uploads/001c/52/36/19/74527.png')" class="preview-icon" style="background-image: url(https://upforme.ru/uploads/001c/52/36/19/74527.png);"></div>
<div onclick="changeProfileIcon(this, 'https://upforme.ru/uploads/001c/52/36/19/553651.png')" class="preview-icon" style="background-image: url(https://upforme.ru/uploads/001c/52/36/19/553651.png);"></div>
<div onclick="changeProfileIcon(this, 'https://upforme.ru/uploads/001c/52/36/19/412691.png')" class="preview-icon" style="background-image: url(https://upforme.ru/uploads/001c/52/36/19/412691.png);"></div>
<div onclick="changeProfileIcon(this, 'https://upforme.ru/uploads/001c/52/36/19/428867.png')" class="preview-icon" style="background-image: url(https://upforme.ru/uploads/001c/52/36/19/428867.png);"></div>
<div onclick="changeProfileIcon(this, 'https://upforme.ru/uploads/001c/52/36/19/597651.png')" class="preview-icon" style="background-image: url(https://upforme.ru/uploads/001c/52/36/19/597651.png);"></div>
<div onclick="changeProfileIcon(this, 'https://upforme.ru/uploads/001c/52/36/19/107915.png')" class="preview-icon" style="background-image: url(https://upforme.ru/uploads/001c/52/36/19/107915.png);"></div>
<div onclick="changeProfileIcon(this, 'https://upforme.ru/uploads/001c/52/36/19/358016.png')" class="preview-icon" style="background-image: url(https://upforme.ru/uploads/001c/52/36/19/358016.png);"></div>
<div onclick="changeProfileIcon(this, 'https://upforme.ru/uploads/001c/52/36/19/403825.png')" class="preview-icon" style="background-image: url(https://upforme.ru/uploads/001c/52/36/19/403825.png);"></div>
<div onclick="changeProfileIcon(this, 'https://upforme.ru/uploads/001c/52/36/19/858714.png')" class="preview-icon" style="background-image: url(https://upforme.ru/uploads/001c/52/36/19/858714.png);"></div>
<div onclick="changeProfileIcon(this, 'https://upforme.ru/uploads/001c/52/36/19/344419.png')" class="preview-icon" style="background-image: url(https://upforme.ru/uploads/001c/52/36/19/344419.png);"></div>
<div onclick="changeProfileIcon(this, 'https://upforme.ru/uploads/001c/52/36/19/137863.png')" class="preview-icon" style="background-image: url(https://upforme.ru/uploads/001c/52/36/19/137863.png);"></div>
<div onclick="changeProfileIcon(this, 'https://upforme.ru/uploads/001c/52/36/19/182386.png')" class="preview-icon" style="background-image: url(https://upforme.ru/uploads/001c/52/36/19/182386.png);"></div>
<div onclick="changeProfileIcon(this, 'https://upforme.ru/uploads/001c/52/36/19/159338.png')" class="preview-icon" style="background-image: url(https://upforme.ru/uploads/001c/52/36/19/159338.png);"></div>
<div onclick="changeProfileIcon(this, 'https://upforme.ru/uploads/001c/52/36/19/594877.png')" class="preview-icon" style="background-image: url(https://upforme.ru/uploads/001c/52/36/19/594877.png);"></div>
<div onclick="changeProfileIcon(this, 'https://upforme.ru/uploads/001c/52/36/19/787414.png')" class="preview-icon" style="background-image: url(https://upforme.ru/uploads/001c/52/36/19/787414.png);"></div>
<div onclick="changeProfileIcon(this, 'https://upforme.ru/uploads/001c/52/36/19/680993.png')" class="preview-icon" style="background-image: url(https://upforme.ru/uploads/001c/52/36/19/680993.png);"></div>
<div onclick="changeProfileIcon(this, 'https://upforme.ru/uploads/001c/52/36/19/454634.png')" class="preview-icon" style="background-image: url(https://upforme.ru/uploads/001c/52/36/19/454634.png);"></div>
<div onclick="changeProfileIcon(this, 'https://upforme.ru/uploads/001c/52/36/19/502913.png')" class="preview-icon" style="background-image: url(https://upforme.ru/uploads/001c/52/36/19/502913.png);"></div>
<div onclick="changeProfileIcon(this, 'https://upforme.ru/uploads/001c/52/36/19/398804.png')" class="preview-icon" style="background-image: url(https://upforme.ru/uploads/001c/52/36/19/398804.png);"></div>
<div onclick="changeProfileIcon(this, 'https://upforme.ru/uploads/001c/52/36/19/506555.png')" class="preview-icon" style="background-image: url(https://upforme.ru/uploads/001c/52/36/19/506555.png);"></div>
<div onclick="changeProfileIcon(this, 'https://upforme.ru/uploads/001c/52/36/19/977189.png')" class="preview-icon" style="background-image: url(https://upforme.ru/uploads/001c/52/36/19/977189.png);"></div>
<div onclick="changeProfileIcon(this, 'https://upforme.ru/uploads/001c/52/36/19/521122.png')" class="preview-icon" style="background-image: url(https://upforme.ru/uploads/001c/52/36/19/521122.png);"></div>
<div onclick="changeProfileIcon(this, 'https://upforme.ru/uploads/001c/52/36/19/262474.png')" class="preview-icon" style="background-image: url(https://upforme.ru/uploads/001c/52/36/19/262474.png);"></div>
<div onclick="changeProfileIcon(this, 'https://upforme.ru/uploads/001c/52/36/19/194589.png')" class="preview-icon" style="background-image: url(https://upforme.ru/uploads/001c/52/36/19/194589.png);"></div>
<div onclick="changeProfileIcon(this, 'https://upforme.ru/uploads/001c/52/36/19/704570.png')" class="preview-icon" style="background-image: url(https://upforme.ru/uploads/001c/52/36/19/704570.png);"></div>
<div onclick="changeProfileIcon(this, 'https://upforme.ru/uploads/001c/52/36/19/120565.png')" class="preview-icon" style="background-image: url(https://upforme.ru/uploads/001c/52/36/19/120565.png);"></div>
</div>
</div>
<!-- Подраздел: Темное фентези - 600 монет -->
<div class="category-block">
<div class="price-subtitle"><strong>Темное фентези - 600 монет</strong></div>
<div class="preview-container">
<div onclick="changeProfileIcon(this, 'https://i4.imageban.ru/out/2025/09/22/b426212b9d94db958919dc42805bc752.png')" class="preview-icon" style="background-image: url(https://i4.imageban.ru/out/2025/09/22/b … 5bc752.png);"></div>
<div onclick="changeProfileIcon(this, 'https://i2.imageban.ru/out/2025/09/22/ed98b02dc72ffc026c3d9eb9f2c9ef98.png')" class="preview-icon" style="background-image: url(https://i2.imageban.ru/out/2025/09/22/e … c9ef98.png);"></div>
<div onclick="changeProfileIcon(this, 'https://i1.imageban.ru/out/2025/09/22/9c32e1cfc76c6ec4dc55181c1ca45e88.png')" class="preview-icon" style="background-image: url(https://i1.imageban.ru/out/2025/09/22/9 … a45e88.png);"></div>
<div onclick="changeProfileIcon(this, 'https://i6.imageban.ru/out/2025/09/22/93a97bdd91cdbd1e16ee7e738859f869.png')" class="preview-icon" style="background-image: url(https://i6.imageban.ru/out/2025/09/22/9 … 59f869.png);"></div>
<div onclick="changeProfileIcon(this, 'https://i4.imageban.ru/out/2025/09/22/746b27323312cff798554dfc13c96513.png')" class="preview-icon" style="background-image: url(https://i4.imageban.ru/out/2025/09/22/7 … c96513.png);"></div>
<div onclick="changeProfileIcon(this, 'https://i2.imageban.ru/out/2025/09/22/331877bddb3d0ea0e98e9a4f36fadb58.png')" class="preview-icon" style="background-image: url(https://i2.imageban.ru/out/2025/09/22/3 … fadb58.png);"></div>
<div onclick="changeProfileIcon(this, 'https://i2.imageban.ru/out/2025/09/22/b29f3d4300be6c1ffa69df635036ae43.png')" class="preview-icon" style="background-image: url(https://i2.imageban.ru/out/2025/09/22/b … 36ae43.png);"></div>
<div onclick="changeProfileIcon(this, 'https://i5.imageban.ru/out/2025/09/22/f589e38e7030e63965b2c42bc1cc8f9a.png')" class="preview-icon" style="background-image: url(https://i5.imageban.ru/out/2025/09/22/f … cc8f9a.png);"></div>
<div onclick="changeProfileIcon(this, 'https://i7.imageban.ru/out/2025/09/22/8425c19af8f73beb91fb7325d45f1180.png')" class="preview-icon" style="background-image: url(https://i7.imageban.ru/out/2025/09/22/8 … 5f1180.png);"></div>
<div onclick="changeProfileIcon(this, 'https://i8.imageban.ru/out/2025/09/22/f5e832f31694605bd9ad72fc42b3ee4a.png')" class="preview-icon" style="background-image: url(https://i8.imageban.ru/out/2025/09/22/f … b3ee4a.png);"></div>
<div onclick="changeProfileIcon(this, 'https://i1.imageban.ru/out/2025/09/22/48ff87160d21f27d5db17bf954baf30f.png')" class="preview-icon" style="background-image: url(https://i1.imageban.ru/out/2025/09/22/4 … baf30f.png);"></div>
<div onclick="changeProfileIcon(this, 'https://i3.imageban.ru/out/2025/09/22/aa4b53aa245b07e2df486a4c7311809b.png')" class="preview-icon" style="background-image: url(https://i3.imageban.ru/out/2025/09/22/a … 11809b.png);"></div>
</div>
</div>
<!-- Подраздел: Милые животные - 500 монет -->
<div class="category-block">
<div class="price-subtitle"><strong>Милые животные - 500 монет</strong></div>
<div class="preview-container">
<div onclick="changeProfileIcon(this, 'https://i1.imageban.ru/out/2025/09/22/873a1bf7a70fd57fc9fa14c8ee130ae6.png')" class="preview-icon" style="background-image: url(https://i1.imageban.ru/out/2025/09/22/8 … 130ae6.png);"></div>
<div onclick="changeProfileIcon(this, 'https://i8.imageban.ru/out/2025/09/22/30a5e912344e13ba0c6fc3de1298b315.png')" class="preview-icon" style="background-image: url(https://i8.imageban.ru/out/2025/09/22/3 … 98b315.png);"></div>
<div onclick="changeProfileIcon(this, 'https://i6.imageban.ru/out/2025/09/22/d9a6d2ff05b49bbb28975f7d834b71c7.png')" class="preview-icon" style="background-image: url(https://i6.imageban.ru/out/2025/09/22/d … 4b71c7.png);"></div>
<div onclick="changeProfileIcon(this, 'https://i1.imageban.ru/out/2025/09/22/37fa37d631c43033e78207c8095ec512.png')" class="preview-icon" style="background-image: url(https://i1.imageban.ru/out/2025/09/22/3 … 5ec512.png);"></div>
<div onclick="changeProfileIcon(this, 'https://i1.imageban.ru/out/2025/09/22/4f11731889f07013b426024f384339b0.png')" class="preview-icon" style="background-image: url(https://i1.imageban.ru/out/2025/09/22/4 … 4339b0.png);"></div>
<div onclick="changeProfileIcon(this, 'https://i5.imageban.ru/out/2025/09/22/300201dc134c981cea5e4b46d4aa39f3.png')" class="preview-icon" style="background-image: url(https://i5.imageban.ru/out/2025/09/22/3 … aa39f3.png);"></div>
<div onclick="changeProfileIcon(this, 'https://i8.imageban.ru/out/2025/09/22/11acc79a97bbac05080481d30597b6c9.png')" class="preview-icon" style="background-image: url(https://i8.imageban.ru/out/2025/09/22/1 … 97b6c9.png);"></div>
<div onclick="changeProfileIcon(this, 'https://i1.imageban.ru/out/2025/09/22/1e2cb1ef9d5d6b4a20aa991a6177b8ab.png')" class="preview-icon" style="background-image: url(https://i1.imageban.ru/out/2025/09/22/1 … 77b8ab.png);"></div>
<div onclick="changeProfileIcon(this, 'https://i8.imageban.ru/out/2025/09/22/5ea659f5a079526e365e04ee660b8367.png')" class="preview-icon" style="background-image: url(https://i8.imageban.ru/out/2025/09/22/5 … 0b8367.png);"></div>
<div onclick="changeProfileIcon(this, 'https://i4.imageban.ru/out/2025/09/22/82d8ca3afc3a2f42bbb4039764462b59.png')" class="preview-icon" style="background-image: url(https://i4.imageban.ru/out/2025/09/22/8 … 462b59.png);"></div>
<div onclick="changeProfileIcon(this, 'https://i5.imageban.ru/out/2025/09/22/5f0cbe62a642dfc47a6099705b6782c6.png')" class="preview-icon" style="background-image: url(https://i5.imageban.ru/out/2025/09/22/5 … 6782c6.png);"></div>
<div onclick="changeProfileIcon(this, 'https://i1.imageban.ru/out/2025/09/22/d752d9066f519bf7abdc6258a135eb61.png')" class="preview-icon" style="background-image: url(https://i1.imageban.ru/out/2025/09/22/d … 35eb61.png);"></div>
<div onclick="changeProfileIcon(this, 'https://i2.imageban.ru/out/2025/09/22/d1271911b6a1ada23b609b5aef6f68f8.png')" class="preview-icon" style="background-image: url(https://i2.imageban.ru/out/2025/09/22/d … 6f68f8.png);"></div>
<div onclick="changeProfileIcon(this, 'https://i5.imageban.ru/out/2025/09/22/3ff1dc0a86b4584ec2e3bc3b722b3522.png')" class="preview-icon" style="background-image: url(https://i5.imageban.ru/out/2025/09/22/3 … 2b3522.png);"></div>
<div onclick="changeProfileIcon(this, 'https://i7.imageban.ru/out/2025/09/22/1d2f9bfbd549a193d964bcccff7ab808.png')" class="preview-icon" style="background-image: url(https://i7.imageban.ru/out/2025/09/22/1 … 7ab808.png);"></div>
<div onclick="changeProfileIcon(this, 'https://i8.imageban.ru/out/2025/09/22/fa9cbe2554f1f9a8a15bcacff6b7eef3.png')" class="preview-icon" style="background-image: url(https://i8.imageban.ru/out/2025/09/22/f … b7eef3.png);"></div>
<div onclick="changeProfileIcon(this, 'https://i5.imageban.ru/out/2025/09/22/b356fe8c98dbc6c496ef4b9970ba3a55.png')" class="preview-icon" style="background-image: url(https://i5.imageban.ru/out/2025/09/22/b … ba3a55.png);"></div>
<div onclick="changeProfileIcon(this, 'https://i6.imageban.ru/out/2025/09/22/c1ab518fccac4d0079ab70a6b9acc069.png')" class="preview-icon" style="background-image: url(https://i6.imageban.ru/out/2025/09/22/c … acc069.png);"></div>
<div onclick="changeProfileIcon(this, 'https://i3.imageban.ru/out/2025/09/22/697b7e76d8f77974069a6b9d3b28cca5.png')" class="preview-icon" style="background-image: url(https://i3.imageban.ru/out/2025/09/22/6 … 28cca5.png);"></div>
<div onclick="changeProfileIcon(this, 'https://i8.imageban.ru/out/2025/09/22/02c5f0c317a6aa2fa5187ed2f851030b.png')" class="preview-icon" style="background-image: url(https://i8.imageban.ru/out/2025/09/22/0 … 51030b.png);"></div>
<div onclick="changeProfileIcon(this, 'https://i.imgur.com/GFhnBWb.png')" class="preview-icon" style="background-image: url(https://i.imgur.com/GFhnBWb.png);"></div>
</div>
</div>
<!-- Подраздел: Дракончики - 600 монет -->
<div class="category-block">
<div class="price-subtitle"><strong>Дракончики - 600 монет</strong></div>
<div class="preview-container">
<div onclick="changeProfileIcon(this, 'https://i3.imageban.ru/out/2025/09/22/bd1b7904b5559f5542ba696d823000a7.png')" class="preview-icon" style="background-image: url(https://i3.imageban.ru/out/2025/09/22/b … 3000a7.png);"></div>
<div onclick="changeProfileIcon(this, 'https://i6.imageban.ru/out/2025/09/22/2345b0786f17c3bd5dbf79d252e1afd4.png')" class="preview-icon" style="background-image: url(https://i6.imageban.ru/out/2025/09/22/2 … e1afd4.png);"></div>
<div onclick="changeProfileIcon(this, 'https://i2.imageban.ru/out/2025/09/22/cfb03fd79da1e62669c4a5009a2c95ca.png')" class="preview-icon" style="background-image: url(https://i2.imageban.ru/out/2025/09/22/c … 2c95ca.png);"></div>
<div onclick="changeProfileIcon(this, 'https://i4.imageban.ru/out/2025/09/22/64f520668606983d142a52010407fc80.png')" class="preview-icon" style="background-image: url(https://i4.imageban.ru/out/2025/09/22/6 … 07fc80.png);"></div>
<div onclick="changeProfileIcon(this, 'https://i3.imageban.ru/out/2025/09/22/2a2fa12085886becdcca23188e44aa8c.png')" class="preview-icon" style="background-image: url(https://i3.imageban.ru/out/2025/09/22/2 … 44aa8c.png);"></div>
<div onclick="changeProfileIcon(this, 'https://i6.imageban.ru/out/2025/09/22/2feff91b853a4614591dee424072506b.png')" class="preview-icon" style="background-image: url(https://i6.imageban.ru/out/2025/09/22/2 … 72506b.png);"></div>
<div onclick="changeProfileIcon(this, 'https://i6.imageban.ru/out/2025/09/22/17564bcbd393898be34358ee5f02ec45.png')" class="preview-icon" style="background-image: url(https://i6.imageban.ru/out/2025/09/22/1 … 02ec45.png);"></div>
<div onclick="changeProfileIcon(this, 'https://i8.imageban.ru/out/2025/09/22/29049304319bd95229d4ed539313622f.png')" class="preview-icon" style="background-image: url(https://i8.imageban.ru/out/2025/09/22/2 … 13622f.png);"></div>
<div onclick="changeProfileIcon(this, 'https://i4.imageban.ru/out/2025/09/22/008b299664d0b21d5c5871d1898d65b1.png')" class="preview-icon" style="background-image: url(https://i4.imageban.ru/out/2025/09/22/0 … 8d65b1.png);"></div>
<div onclick="changeProfileIcon(this, 'https://i2.imageban.ru/out/2025/09/22/d1cc91f3be8ad6fc58438cf58e4ddfea.png')" class="preview-icon" style="background-image: url(https://i2.imageban.ru/out/2025/09/22/d … 4ddfea.png);"></div>
<div onclick="changeProfileIcon(this, 'https://i7.imageban.ru/out/2025/09/22/ec2745ed3ddf27bd683d077f27998b64.png')" class="preview-icon" style="background-image: url(https://i7.imageban.ru/out/2025/09/22/e … 998b64.png);"></div>
<div onclick="changeProfileIcon(this, 'https://i5.imageban.ru/out/2025/09/22/20307c44fd6f2bb24b1bd13e3f176854.png')" class="preview-icon" style="background-image: url(https://i5.imageban.ru/out/2025/09/22/2 … 176854.png);"></div>
<div onclick="changeProfileIcon(this, 'https://i2.imageban.ru/out/2025/09/22/6b4e48af23a74e3bbf4a94fedf3ebdea.png')" class="preview-icon" style="background-image: url(https://i2.imageban.ru/out/2025/09/22/6 … 3ebdea.png);"></div>
</div>
</div>
</div>
<script>
// Функция для снятия эффекта бледности с превью фонов
function resetBgPreviews() {
var previews = document.querySelectorAll('.bg-overlay');
previews.forEach(function(overlay) {
if (overlay) overlay.remove();
});
}
// Функция для снятия эффекта бледности с превью иконок
function resetIconPreviews() {
var previews = document.querySelectorAll('.icon-overlay');
previews.forEach(function(overlay) {
if (overlay) overlay.remove();
});
}
// Функция для применения бледности к превью фона
function applyPaleEffectBg(element) {
// Снимаем бледность только с фонов
resetBgPreviews();
// Добавляем полупрозрачный белый слой поверх выбранной картинки
var overlay = document.createElement('div');
overlay.className = 'bg-overlay';
overlay.style.position = 'absolute';
overlay.style.top = '0';
overlay.style.left = '0';
overlay.style.width = '100%';
overlay.style.height = '100%';
overlay.style.backgroundColor = 'rgba(255, 255, 255, 0.6)';
overlay.style.borderRadius = '12px';
overlay.style.pointerEvents = 'none';
element.style.position = 'relative';
element.appendChild(overlay);
}
// Функция для применения бледности к превью иконки
function applyPaleEffectIcon(element) {
// Снимаем бледность только с иконок
resetIconPreviews();
var overlay = document.createElement('div');
overlay.className = 'icon-overlay';
overlay.style.position = 'absolute';
overlay.style.top = '0';
overlay.style.left = '0';
overlay.style.width = '100%';
overlay.style.height = '100%';
overlay.style.backgroundColor = 'rgba(255, 255, 255, 0.6)';
overlay.style.borderRadius = '50%';
overlay.style.pointerEvents = 'none';
element.style.position = 'relative';
element.appendChild(overlay);
}
function changeProfileBg(element, imageUrl) {
// Применяем эффект бледности к нажатой картинке фона
applyPaleEffectBg(element);
// Меняем фон профиля
var field = document.querySelector('.pa-fld5');
if (field) {
var img = field.querySelector('img');
if (img) {
img.src = imageUrl;
} else {
field.style.backgroundImage = 'url(' + imageUrl + ')';
field.style.backgroundSize = 'cover';
field.style.backgroundPosition = 'center';
}
}
}
// Функция для смены иконки профиля
function changeProfileIcon(element, imageUrl) {
// Применяем эффект бледности к нажатой иконке
applyPaleEffectIcon(element);
// Ищем иконку профиля внутри .perspage1
var persPage = document.querySelector('.perspage1');
if (persPage) {
var iconImg = persPage.querySelector('img');
if (iconImg) {
iconImg.src = imageUrl;
}
}
}
</script>[/html]
