Примерочная-магазин

Поделиться12026-09-11 10:39:21

<img src='https://forumstatic.ru/files/001c/96/9f/82426.png?v=1' />
Автор: Vandra
Администратор
эйнар фольк,1200 castle rock, coloradoyou be the church, i'll be the people
both are a necessary evil
Сообщений: 44
Уважение: +0
Валюта: 12234
Плашка: <div class="plaque"> <l1>первая строка</l1> <l2>вторая строка</l2> <img src="https://upforme.ru/uploads/001c/c4/83/6/414513.jpg"> </div>
вампир

123

Поделиться22026-09-11 12:26:43

<img src='https://forumstatic.ru/files/001c/96/9f/82426.png?v=1' />
Автор: Vandra
Администратор
эйнар фольк,1200 castle rock, coloradoyou be the church, i'll be the people
both are a necessary evil
Сообщений: 44
Уважение: +0
Валюта: 12234
Плашка: <div class="plaque"> <l1>первая строка</l1> <l2>вторая строка</l2> <img src="https://upforme.ru/uploads/001c/c4/83/6/414513.jpg"> </div>
вампир

[html]<fittingroom>
<div class='fit-header'>
<span>event store</span>
<div>чтобы примерить элемент оформления, необходимо кликнуть по нему!
<br>свои фоны и уголки вы также можете подобрать и примерить.</div>
</div>

<div class="fit-layout">

<fitprofile>
<div class="fitting-room">
<div class='fitting-block-prof'>
<ul>
<li class="pa-fld1 fitting-bg">
<img src='https://forumstatic.ru/files/001c/85/6d/39868.png' />
</li>
<li class="pa-author fitting-author"><a href='#'>username</a></li>
<li class="pa-title">тестовый статус</li>
<li class="pa-fld4"><div>раса персонажа</div></li>
<li class="pa-avatar fitting-avatar"><img src='https://forumstatic.ru/files/001c/85/6d/39868.png' /></li>
<li class="pa-fld3 fitting-lz" style='margin-bottom: 10px;'>
<lz>
<a href="#" class='modal-link'> Name Surname, 00 </a>
<span> местоположение </span>
some text or some quote
</lz>
</li>
<li class="pa-fld2 fitting-plaque">
<div class="plaque">
<l1> i hear god's a good imaginary friend</l1>
<l2>hey coach he's ready put him in</l2>
<img src="https://forumstatic.ru/files/001c/96/9f/76010.png">
</div>
</li>
</ul>
</div>
</div>
</fitprofile>

<fitcont>
<fittingbg data-title='снимки'>
<div class="fit-items-grid">
<div><img src='https://forumstatic.ru/files/001c/96/9f/65219.png' /></div>
<div><img src='https://forumstatic.ru/files/001c/96/9f/40135.png' /></div>
<div> <img src='https://forumstatic.ru/files/001c/96/9f/74618.png' /></div>
<div><img src='https://forumstatic.ru/files/001c/96/9f/87378.png' /></div>
<div><img src='https://forumstatic.ru/files/001c/96/9f/73760.png' /></div>
<div><img src='https://forumstatic.ru/files/001c/96/9f/68906.png' /></div>
<div><img src='https://forumstatic.ru/files/001c/96/9f/30699.png' /></div>
<div><img src='https://forumstatic.ru/files/001c/96/9f/86213.png' /></div>
<div><img src='https://forumstatic.ru/files/001c/96/9f/74838.png' /></div>
<div><img src='https://forumstatic.ru/files/001c/96/9f/25391.png' /></div>
<div><img src='https://forumstatic.ru/files/001c/96/9f/76217.png' /></div>
<div><img src='https://forumstatic.ru/files/001c/96/9f/22827.png' /></div>
<div><img src='https://forumstatic.ru/files/001c/96/9f/17294.png' /></div>
<div><img src='https://forumstatic.ru/files/001c/96/9f/22958.png' /></div>
<div><img src='https://forumstatic.ru/files/001c/96/9f/78111.png' /></div>
<div><img src='https://forumstatic.ru/files/001c/96/9f/52081.png' /></div>
<div><img src='https://forumstatic.ru/files/001c/96/9f/30455.png' /></div>
<div><img src='https://forumstatic.ru/files/001c/96/9f/57245.png' /></div>
<div><img src='https://forumstatic.ru/files/001c/96/9f/98705.png' /></div>
<div><img src='https://forumstatic.ru/files/001c/96/9f/44466.png' /></div>
<div><img src='https://forumstatic.ru/files/001c/96/9f/66167.png' /></div>
<div><img src='https://forumstatic.ru/files/001c/96/9f/73552.png' /></div>
<div><img src='https://forumstatic.ru/files/001c/96/9f/23897.png' /></div>
<div><img src='https://forumstatic.ru/files/001c/96/9f/74740.png' /></div>

</div>
</fittingbg>

<fittingtext data-title='текст плашки'>
<div class="plaque-inputs-col">
<input type="text" id="ctrl-text1" class="plaque-input" placeholder="текст первого порядка" maxlength="50">
<input type="text" id="ctrl-text2" class="plaque-input" placeholder="текст второго порядка" maxlength="60">
</div>
<div class="plaque-buttons-col">
<button type="button" class="fit-copy">скопировать код</button>
<button type="button" class="fit-cleardata">очистить</button>
</div>
</fittingtext>
</fitcont>
</div>
</fittingroom>

fittingroom {
display: flex;
flex-direction: column;
background: url(https://forumstatic.ru/files/001c/97/3a/57005.png) repeat top / 200px;
border-radius: 4px;
padding: 20px;
width: 875px;
margin: 5px auto 0 !important;
}

.fit-layout {
display: flex;
gap: 0px;
align-items: flex-start;
padding: 26px 26px 13px;
background: rgba(244, 244, 244, 1);
box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.5);
}

fittingroom li.pa-title {
padding: 0 !important;
}

.fit-header {
width: 100%;
display: flex;
background: rgba(233, 233, 233, 1);
border-radius: var(--bradius-minor, 4px);
position: relative;
border: 1px solid rgba(174, 174, 174, 0.5);
padding: 45px 20px 20px;
align-items: center;
margin-bottom: 25px;
}

.fit-header span {
background-color: rgba(233, 231, 224, 1);
padding: 5px 15px;
font-family: Instrument Serif;
font-weight: 600;
color: rgba(55, 55, 55, 1);
font-size: 28px;
text-transform: uppercase;
box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.5);
position: absolute;
left: 50%;
transform: translateX(-50%);
top: -15px;
}

.fit-header div {
color: rgb(var(--text-secondary));
font-size: 11px;
text-align: center;
width: 100%;
}

/* ----- ЛЕВАЯ КОЛОНКА (С ПРОФИЛЕМ) ----- */
fitprofile {
width: 260px;
flex-shrink: 0;
}

fitprofile .plaque {
margin-left: -3px;
}

fitprofile ul {
padding: 0 !important;
}

.fitting-room {
width: 100%;
position: sticky;
top: 0;
height: min-content;
}

.fitting-block-prof {
width: 100%;
border-radius: 5px;
padding-bottom: 11px;
}

.fitting-block-prof ul {
width: 212px;
margin: auto;
background: rgb(var(--bg-profile));
list-style: none;
border-radius: 10px;
display: flex;
flex-wrap: wrap;
justify-content: center;
border: 1px solid rgba(177, 183, 200, 1);
border-radius: 0 0 5px 5px;
align-items: center;
padding: 8px 0 0 !important;
background: rgba(233, 233, 233, 1);
margin-top: 8px;
}

.fitting-block-prof li.pa-fld1 img {
margin-left: -1px;
}

.fitting-author a { border-bottom: none !important; }
.fitting-room #tuser { display: none !important; }
.fitting-room li.pa-fld4 > div { left: 6px; height: 19px; }

/* ----- ПРАВАЯ КОЛОНКА ----- */
fitcont {
display: flex;
flex-direction: column;
gap: 25px;
flex-grow: 1;
width: calc(100% - 280px);
}

fittingbg,
fittingplaqueimg,
fittingtext {
border-radius: var(--bradius-minor, 4px);
position: relative;
padding: 25px 15px 15px;
background: rgba(233, 233, 233, 1);
border: 1px solid rgba(174, 174, 174, 0.3);
width: 100%;
}

fittingbg::before,
fittingplaqueimg::before,
fittingtext::before {
content: attr(data-title);
position: absolute;
top: -12px;
left: 20px;
display: flex;
justify-content: center;
align-items: center;
font-family: 'Playfair Display', serif;
font-weight: 600;
font-size: 12px;
color: black !important;
padding: 3px 15px 2px;
background-color: rgba(233, 231, 224, 1);
box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.5);
text-transform: lowercase;
}

.fit-items-grid {
display: flex;
gap: 10px;
overflow-y: auto;
height: 210px;
scrollbar-gutter: stable;
flex-wrap: nowrap;
scroll-behavior: smooth;
}

.fit-items-grid div {
position: relative;
}

fittingbg .fit-items-grid div {
width: 230px;
height: 200px;
border-radius: 6px;
overflow: auto;
flex-shrink: 0;
}

fittingbg .fit-items-grid img {
width: 100%;
height: 100%;
object-fit: cover;
cursor: pointer;
}

fittingplaqueimg .fit-items-grid {
height: 55px;
}

fittingplaqueimg .fit-items-grid div {
width: 90px;
height: 45px;
flex-shrink: 0;
}

fittingplaqueimg .fit-items-grid img {
width: 99px;
height: 45px;
border-radius: 50% 0 5px 0;
border-top-left-radius: 46% 100%;
object-fit: cover;
cursor: pointer;
}

img.fit-selected {
outline: 2px solid rgb(var(--accent, 13, 108, 91));
opacity: 0.8;
}

/* ----- БЛОК ИНПУТОВ И КНОПОК ----- */
fittingtext {
display: flex;
gap: 15px;
align-items: stretch;
}

.plaque-inputs-col {
display: flex;
flex-direction: column;
gap: 10px;
flex-grow: 1;
}

.plaque-buttons-col {
display: flex;
flex-direction: column;
gap: 10px;
width: 180px;
}

.plaque-inputs-col input {
width: 100%;
height: 35px !important;
padding: 0 15px;
border-radius: 4px !important;
background: rgb(var(--text-primary), 0.05) !important;
border: 1px solid rgba(174, 174, 174, 0.4);
box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
margin: 0 !important;
}

.plaque-buttons-col button {
width: 100%;
height: 35px;
padding: 0 15px !important;
border: none;
cursor: pointer;
font: 400 12px var(--font-cat-title, 'Roboto');
font-style: italic;
color: rgb(var(--canvas-primary, 255, 255, 255)) !important;
border-radius: 50px;
background: rgb(var(--accent, 13, 108, 91));
transition: 0.2s ease;
margin: 0 !important;
}

.plaque-buttons-col button.fit-cleardata {
background: #e6e6e6;
color: #333 !important;
border: 1px solid #ccc;
}

.plaque-buttons-col button:hover {
opacity: 0.9;
transform: translateY(-1px);
}

/* ----- КОРЗИНА ----- */
.fit-cart {
margin-top: 15px;
background: rgba(233, 233, 233, 1);
border: 1px solid rgba(174, 174, 174, 0.3);
border-radius: var(--bradius-minor, 4px);
padding: 25px 20px 20px;
box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.5);
position: relative;
width: 100%;
box-sizing: border-box;
}

.fit-cart::before {
content: "ваша корзина";
position: absolute;
top: -12px;
left: 20px;
display: flex;
justify-content: center;
align-items: center;
font-family: 'Playfair Display', serif;
font-weight: 600;
font-size: 12px;
color: black !important;
padding: 3px 15px 2px;
background-color: rgba(233, 231, 224, 1);
box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.5);
text-transform: lowercase;
}

.fit-cart-header {
display: flex;
justify-content: flex-end;
align-items: center;
border-bottom: 1px solid rgba(174, 174, 174, 0.3);
padding-bottom: 10px;
margin-bottom: 15px;
}

.fit-cart-title {
display: none;
}

.fit-cart-count {
background: rgb(var(--accent, 13, 108, 91));
color: rgb(var(--canvas-primary, 255, 255, 255));
padding: 2px 10px;
border-radius: 10px;
font-size: 11px;
font-family: var(--font-cat-title, 'Roboto');
font-weight: 500;
}

.fit-cart-items {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 12px;
}

.fit-cart-empty {
grid-column: 1 / -1;
text-align: center;
color: rgba(70, 70, 70, 0.6);
padding: 15px 0;
font: 400 12px var(--font-cat-title, 'Roboto');
font-style: italic;
}

.fit-cart-item {
display: flex;
align-items: center;
background: rgb(var(--text-primary), 0.05);
border: 1px solid rgba(174, 174, 174, 0.4);
border-radius: 4px;
padding: 8px;
box-shadow: inset 0 1px 3px rgba(0,0,0,0.05);
}

.fit-cart-preview img {
width: 40px;
height: 40px;
object-fit: cover;
border-radius: 4px;
margin-right: 12px;
border: 1px solid rgba(174, 174, 174, 0.5);
}

.fit-cart-info {
flex-grow: 1;
font-family: var(--font-cat-title, 'Roboto');
}

.fit-cart-name {
font-size: 11px;
font-weight: 600;
color: rgba(70, 70, 70, 1);
text-transform: uppercase;
}

.fit-cart-price {
font-size: 12px;
color: rgb(var(--accent, 13, 108, 91));
font-style: italic;
}

.fit-cart-remove {
background: none;
border: none;
font-size: 14px;
color: rgba(174, 174, 174, 1);
cursor: pointer;
padding: 0 5px;
transition: 0.2s ease;
}

.fit-cart-remove:hover {
color: #d9534f;
}

.fit-cart-footer {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 15px;
padding-top: 15px;
border-top: 1px solid rgba(174, 174, 174, 0.3);
}

.fit-cart-total {
font-size: 12px;
font-family: 'Playfair Display', serif;
text-transform: uppercase;
font-weight: 600;
color: rgba(70, 70, 70, 1);
}

.fit-cart-total span {
font-size: 16px;
font-family: var(--font-cat-title, 'Roboto');
color: rgb(var(--accent, 13, 108, 91));
}

.fit-cart-actions {
display: flex;
gap: 10px;
}

.fit-cart-actions button {
height: 35px;
padding: 0 15px;
border: none;
cursor: pointer;
font: 400 12px var(--font-cat-title, 'Roboto');
font-style: italic;
border-radius: 50px;
transition: 0.2s ease;
}

.fit-add-cart {
background: #793c2c5c;
color: #793c2c;
}

.fit-add-cart:hover {
opacity: 0.9;
transform: translateY(-1px);
}

.fit-clear-cart {
background: #e6e6e6;
color: #333;
border: 1px solid rgba(174, 174, 174, 0.4) !important;
}

.fit-clear-cart:hover {
opacity: 0.8;
}

.fit-cart-confirm {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(233, 233, 233, 0.95);
display: none;
flex-direction: column;
align-items: center;
justify-content: center;
z-index: 10;
border-radius: var(--bradius-minor, 4px);
}

.fit-cart-confirm span {
font-family: 'Playfair Display', serif;
font-size: 16px;
font-weight: 600;
margin-bottom: 15px;
color: rgba(70, 70, 70, 1);
text-transform: uppercase;
}

.fit-cart-confirm button {
height: 35px;
padding: 0 20px;
margin: 0 5px;
border-radius: 50px;
font: 400 12px var(--font-cat-title, 'Roboto');
font-style: italic;
cursor: pointer;
border: none;
}

.fit-cart-confirm-yes {
background: #d9534f;
color: #fff;
}

.fit-cart-confirm-no {
background: #e6e6e6;
color: #333;
border: 1px solid rgba(174, 174, 174, 0.4);
}

/* ----- ИКОНКА ДОБАВЛЕНИЯ ----- */
.quick-add-cart {
position: absolute;
top: 5px;
right: 5px;
width: 28px;
height: 28px;
background: rgba(255, 255, 255, 0.9);
border: 1px solid rgba(174, 174, 174, 0.5);
border-radius: 4px;
color: rgb(var(--accent, 13, 108, 91));
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
opacity: 0;
transition: all 0.2s ease;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.fit-items-grid div:hover .quick-add-cart {
opacity: 1;
}

.quick-add-cart:hover {
background: rgb(var(--accent, 13, 108, 91));
color: #fff;
}

.fit-copy-cart {
background: rgb(var(--accent, 13, 108, 91));
color: rgb(var(--canvas-primary, 255, 255, 255));
}

.fit-copy-cart:hover {
opacity: 0.9;
}
</style>[/html][hideprofile]

0

Поделиться32026-09-12 14:50:39

<img src='https://forumstatic.ru/files/001c/96/9f/82426.png?v=1' />
Автор: Vandra
Администратор
эйнар фольк,1200 castle rock, coloradoyou be the church, i'll be the people
both are a necessary evil
Сообщений: 44
Уважение: +0
Валюта: 12234
Плашка: <div class="plaque"> <l1>первая строка</l1> <l2>вторая строка</l2> <img src="https://upforme.ru/uploads/001c/c4/83/6/414513.jpg"> </div>
вампир

плашка:

Код:

<div class="plaque">
<l1>авпывпав</l1>
<l2>выпывапывапвапывап</l2>
<img src="https://upforme.ru/uploads/001c/c4/83/6/510793.jpg">
</div>

0

Поделиться42026-09-12 14:51:51

<img src='https://forumstatic.ru/files/001c/96/9f/82426.png?v=1' />
Автор: Vandra
Администратор
эйнар фольк,1200 castle rock, coloradoyou be the church, i'll be the people
both are a necessary evil
Сообщений: 44
Уважение: +0
Валюта: 12234
Плашка: <div class="plaque"> <l1>первая строка</l1> <l2>вторая строка</l2> <img src="https://upforme.ru/uploads/001c/c4/83/6/414513.jpg"> </div>
вампир

Уголки:

Код:

<img src="https://upforme.ru/uploads/001c/c4/83/6/414513.jpg">

<img src="https://upforme.ru/uploads/001c/c4/83/6/611119.jpg">

<img src="https://upforme.ru/uploads/001c/c4/83/6/510793.jpg">

Фоны:

Код:

<img src="https://upforme.ru/uploads/001c/c4/83/6/707362.jpg">

<img src="https://upforme.ru/uploads/001c/c4/83/6/171606.jpg">

<img src="https://upforme.ru/uploads/001c/c4/83/6/189003.png">

Итого к списанию: 1800

0

Поделиться52026-09-12 18:21:04

<img src='https://forumstatic.ru/files/001c/96/9f/82426.png?v=1' />
Автор: Vandra
Администратор
эйнар фольк,1200 castle rock, coloradoyou be the church, i'll be the people
both are a necessary evil
Сообщений: 44
Уважение: +0
Валюта: 12234
Плашка: <div class="plaque"> <l1>первая строка</l1> <l2>вторая строка</l2> <img src="https://upforme.ru/uploads/001c/c4/83/6/414513.jpg"> </div>
вампир

плашка:

Код:

<div class="plaque">
<l1>первая строка</l1>
<l2>вторая строка</l2>
<img src="https://upforme.ru/uploads/001c/c4/83/6/414513.jpg">
</div>

0

Поделиться62026-09-12 23:25:55

Автор: BugHunter
Администратор
Сообщений: 8
Уважение: +2

123

0

Test

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

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

Объявление

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

Примерочная-магазин

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

Поделиться12026-09-11 10:39:21

Поделиться22026-09-11 12:26:43

Поделиться32026-09-12 14:50:39

Поделиться42026-09-12 14:51:51

Поделиться52026-09-12 18:21:04

Поделиться62026-09-12 23:25:55