магазин

[hideprofile]
[html]
<style>
.post-author-store {
width: 230px;
height: 100%;
padding: 0px 10px 10px;
position: relative;
border-radius: 10px;
text-align: left;
background: #f1f1f1;
}
.dark .post-author-store {
width: 230px;
height: 100%;
padding: 0px 10px 10px;
position: relative;
border-radius: 10px;
text-align: left;
background: #26201c;
}
.post-author-store::before {
content: '';
position: absolute;
top: 25px;
left: 0px;
width: 230px;
height: 80px;
background: url(https://upforme.ru/uploads/001c/b6/66/2/613216.png);
}

.post-author-store .online::after{
content: '';
position: absolute;
top: 10px;
left: -5px;
width: 10px;
height: 10px;
z-index: 10;
background: rgb(var(--c_blue));
border-radius: 50%;
border: 1px solid rgb(var(--c_lightgray));
box-shadow: 0 0 1px 1px #0000002b;
}

.post-author-store > ul {
padding: 0px !important;
list-style: none !important;
}

.post-author-store .pa-statprof {
display: flex;
gap: 15px;
width: 100%;
justify-content: center;
padding: 0px 20px;
margin: 5px auto 10px;
box-sizing: border-box;
font-size: 10px;
color: #b5b5b5;
text-align: center;
}

.post-author-store .pa-avatar { margin-bottom: 65px;}
.post-author-store .pa-author { padding-top: 5px;}
.post-author-store .pa-fld4 { width: 230px;margin: 0;}
.post-author-store .pa-fld1 {padding: 5px 0 10px;}

.shop {
width: 100%;
max-width: 920px;
margin: 0 auto;
background: #fbfbfb;
border-radius: 30px;
padding: 20px;
box-sizing: border-box;
display: flex;
gap: 20px;
box-shadow: 1px 3px 3px 0px rgb(0 0 0 / 7%);
}
.dark .shop {
width:100%;
max-width:920px;
margin:0 auto;
background: rgb(var(--dark_c_lightgray));
border-radius:30px;
padding:20px;
box-sizing:border-box;
display:flex;
gap:20px;
}
.shop-search{
margin: 30px 0 20px;
width: 500px;
height: 30px;
margin: 0 auto 20px;
background: #f9f9f9;
border-radius: 19px;
display: flex;
align-items: center;
padding: 0 18px;
gap: 12px;
border: 1px solid rgb(var(--br_light_grey));
}
.shop-search-icon{
width:15px;height:15px;color:#999;}
.shop-search-input{
width:100%;font-size:10px;color: rgb(var(--c_lightbrown));text-align: center;
}

.dark .shop-search{
margin:30px 0 20px;
width:500px;
height:30px;
margin:0 auto 20px;
background: rgb(var(--dark_c_lightgray));
border: 1px solid rgb(var(--c_lightbrown));
border-radius:19px;
display:flex;
align-items:center;
padding:0 18px;
gap:12px;
}
.dark .shop-search-icon{
width:15px;height:15px; color: rgb(var(--c_lightbrown));}
.dark .shop-search-input{
width:100%;font-size:10px;color: rgb(var(--c_lightbrown));text-align: center;
}

.shop-left{
width:240px;
display:flex;
flex-direction:column;
align-items:center;
gap:15px;
}

.shop .shop-reset-btn,.shop-copy-btn{
background: #fff;
padding: 4px 16px;
border-radius: 20px;
cursor: pointer;
border: 3px solid rgb(166 184 200);
color: rgb(166 184 200);
font-size: 10px;
font-weight: 600;
}

.shop .shop-right{
flex:1;
display:flex;
flex-direction:column;
gap:20px;
}

.shop .shop-block{
background: #f8f8f8;
border-radius: 25px;
padding: 25px 20px 20px;
position: relative;
border: 1px solid #ebebeb;
}

.dark .shop .shop-block{
background: rgb(var(--dark_c_darkgray));
border-radius:25px;
padding:25px 20px 20px;
position:relative;
}

.shop .shop-tab{
position: absolute;
top: -12px;
left: 50%;
transform: translateX(-50%);
background: #f8f8f8;
padding: 4px 24px;
border-radius: 12px;
font-size: 12px;
font-weight: bold;
color: rgb(var(--c_lightbrown));
border: 1px solid #ebebeb;
box-shadow: 1px 3px 3px 0px rgb(0 0 0 / 5%);
}

.dark .shop .shop-tab{
position:absolute;
top:-12px;
left:50%;
transform:translateX(-50%);
background:rgb(var(--dark_c_lightgray));
padding:4px 24px;
border-radius:12px;
font-size:12px;
font-weight:bold;
color:#d6d5d5;
}

.shop .shop-box {
width: 100%;
height: 200px;
background: #ffffff00;
display: flex;
flex-wrap: wrap;
align-items: flex-start;
align-content: flex-start;
justify-content: center;
overflow-y: auto;
gap:5px;
}

.dark .shop .shop-box {
width: 100%;
height: 200px;
background: rgb(var(--dark_c_darkgray));
display: flex;
flex-wrap: wrap;
align-items: flex-start;
align-content: flex-start;
justify-content: center;
overflow-y: auto;
gap: 5px;
}

.shop .shop-box .pl { width: 180px; height:auto;position: relative;}
.shop .shop-box .pl img {
border-radius: 21px;
}
.shop .shop-box .bg { width: 130px; height:auto;position: relative;}
.shop .shop-box .bg img { border-radius: 7px;}
.shop .shop-box .active {opacity:.5;}

.dark .shop .shop-reset-btn, .dark .shop-copy-btn {
border: 2px solid rgb(var(--c_lightbrown));
background: rgb(var(--dark_c_lightgray));
color: rgb(var(--c_blue));
font-size: 10px;
padding: 6px 16px;
border-radius: 20px;
cursor: pointer;
}

.post-author-store li.pa-fld2 img[src]:not([src=""]) {
border-radius: 21px;
border: 3px solid rgb(var(--c_lightgray));
box-shadow: 0 0 5px 1px #00000026;
cursor: pointer;
height: 43px;
width: 180px;
object-fit: cover;
}

.tool-block {padding: 10px 0 0 30px;
margin: 10px auto;
background: #fbfbfb;
border-radius: 30px;
box-shadow: 1px 3px 3px 0px rgb(0 0 0 / 7%);
color: rgb(var(--c_lightbrown));}
.dark .tool-block {padding:10px 0 0 30px;margin:10px auto; background: rgb(var(--dark_c_lightgray)); border-radius:30px;}

.post-author-store li.pa-fld2 {
height: 42px;
border-radius: 21px;
width: 186px;
}

.shop-item.bg::before {
content: "50%";
position: absolute;
top: 0px;
margin-left: 90px;
background: #e74d3d;
color: #fff;
font-weight: 700;
font-size: 11px;
padding: 4px 7px 2px 7px;
border-radius: 7px;
z-index: 2;
pointer-events: none;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Опционально: скрываем бейдж, если нет класса .sale */
.shop-item.bg:not(.sale)::before {
display: none;
}

.shop-item.pl::before {
content: "50%";
position: absolute;
top: 0px;
margin-left: 140px;
background: #e74d3d;
color: #fff;
font-weight: 700;
font-size: 11px;
padding: 4px 7px 2px 7px;
border-radius: 7px;
z-index: 2;
pointer-events: none;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Опционально: скрываем бейдж, если нет класса .sale */
.shop-item.pl:not(.sale)::before {
display: none;
}

</style>

<div class="shop-search">
<div class="shop-search-icon"><i class="fa-solid fa-magnifying-glass"></i></div>
<div class="shop-search-input">kakaotalk.rusff.me/shop</div>
</div>

<div class="shop-preview">
<div class="post-author-store">
<ul>
<li class="pa-author"><a rel="nofollow" id="UserLogin"></a></li>
<li class="pa-fld4"></li>
<li class="pa-avatar item2"><img id="UserAvatar" alt="avatar"></li>
<li class="pa-title">online</li>
<li class="pa-fld1"></li>
<li class="pa-fld2"></li>
</ul>
</div>

</div>

<div class="shop-copy-btn">скопировать коды профиля</div><div class="shop-reset-btn" onclick="resetProfile()">сбросить профиль</div>

</div>

<div class="shop-right" style="position: relative;">
<a href="https://kakaotalk.rusff.me/pages/shop_maker" onclick="loadForumContent(this.href); return false;" style="position: absolute; top:-35px;right:15px; ">РЕДАКТОР</a>
<div class="shop-block">

</div>

<div class="shop-tab">плашки - 600 <i class="fa-solid fa-splotch" style="color:rgb(166 184 200);"></i></i></div>
<div class="shop-box">

</div>

<div class="tool-block">
<strong>Свой дизайн профиля — стоимость комплекта 2000 звёзд</strong><br>
<p style='margin:10px 30px 0 0;'>NEW Теперь вы можете создавать свое оформление с помощью редактора (над магазином в правом верхнем углу)! Все что нужно - это оставить здесь сообщение с ссылкой на списание подписки "Индивидуальный фон" или "Индивидуальная плашка", и приложить созданные картинки. <br>
<br>Из редактора вы можете кликнуть "Применить", чтобы ваши плашка и фон отобразились на предпросмотре. После нажать "скопировать коды профиля" и получить коды в формате base64 (длинный и пугающий, но это окей!), которые можете скинуть в эту тему. Мы сохраним для вас картинки сами.<br>
<br>Картинки так же сохраняются на компьютер из редактора, поэтому загрузите их на форум в вашем профиле или на любой хостинг изображений. Проверить, как будет выглядеть ваше оформление, вы можете здесь, указав ссылки на изображения.</p>

<input type="text" id="customBg" placeholder="ссылка на фон" style='margin:5px;'><br>

<input type="text" id="customPlaqueImg" placeholder="ссылка на картинку плашки" style='margin:5px;'>
<p style='font-size:10px;color:darkgray;'>* сбрасывается через кнопку "сбросить профиль"</p>
</div>

[/html]

Код:

1. что покупаете?
2. сразу в профиль?
3. ваши звезды на счету - стоимость покупок = [b]остаток[/b]

testilishe

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

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

Объявление

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

магазин

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

Поделиться12026-06-19 16:22:32