вверх
вниз
Код:
<!--HTML-->
<div class="wardrobe__wrapper">
<h5>Примерочная</h5>
<div class="wardrobe__inner">
<div class="wardrobe__preview-profile">
<span class="preview-online">offline</span>
<li class="preview-fld4">
<img src="https://forumstatic.ru/files/0012/14/e8/20343.png">
</li>
<ul>
<li class="preview-author">Yadomaru Lisa</li>
<li class="preview-title">Та еще стрекоза</li>
<li class="preview-avatar">
<img src="https://forumavatars.ru/img/avatars/0012/14/e8/2-1750513146.gif">
</li>
<div class="preview-field_wrap2">
<li class="preview-respect">
<span class="preview-fld-name">Уважение</span>
<span class="preview-fld-value">11105</span>
</li>
<li class="preview-fld1">
<span class="preview-fld-name">Посты</span>
<span class="preview-fld-value">87</span>
</li>
</div>
<li class="preview-fld3">
<lz_info>Нагината — оружие массового подчинения</lz_info>
</li>
</ul>
<li class="preview-fld2">
<img src="https://forumstatic.ru/files/0012/14/e8/34517.png">
</li>
</div>
<div class="wardrobe__content-wrapper">
<div class="wardrobe__content-sections">
<div class="wardrobe__section">
<h6>Аватар</h6>
<label class="wardrobe__section-checkbox">
<input type="checkbox" id="save-for-copy" />
<span></span>
Сохранять для копирования кода
</label>
<input type="url" class="wardrobe-input input-link" placeholder="Ссылка на картинку">
</div>
<div class="wardrobe__section">
<h6>Личное звание</h6>
<label class="wardrobe__section-checkbox">
<input type="checkbox" id="save-for-copy" />
<span></span>
Сохранять для копирования кода
</label>
<textarea class="wardrobe-textarea" placeholder="Личное звание, допустим HTML"></textarea>
</div>
<div class="wardrobe__section wardrobe-spoiler">
<h6 class="spoiler-toggle">Уникальная плашка</h6>
<div class="wardrobe-spoiler-content">
<label class="wardrobe__section-checkbox">
<input type="checkbox" id="save-for-copy" />
<span></span>
Сохранять для копирования кода
</label>
<input type="url" class="wardrobe-input input-link" placeholder="Ссылка на верхнюю картинку">
<input type="url" class="wardrobe-input input-link" placeholder="Ссылка на нижнюю картинку">
</div>
</div>
<div class="wardrobe__section wardrobe-spoiler">
<h6 class="spoiler-toggle">Стандартная плашка</h6>
<div class="wardrobe-spoiler-content">
<label class="wardrobe__section-checkbox">
<input type="checkbox" id="save-for-copy" />
<span></span>
Сохранять для копирования кода
</label>
<ul class="wardrobe__section-bgs">
<li class="wardrobe__section-bgs-item">
<span class="wardrobe__bgs-numb">#1</span>
<label class="wardrobe__bgs-option">
<input type="radio" name="bgs-choice" value="bgs-choice" />
<span class="bgs-choice-checked">выбрано</span>
<img src="https://forumstatic.ru/files/0012/14/e8/34517.png">
</label>
</li>
<li class="wardrobe__section-bgs-item">
<span class="wardrobe__bgs-numb">#2</span>
<label class="wardrobe__bgs-option">
<input type="radio" name="bgs-choice" value="bgs-choice" />
<span class="bgs-choice-checked">выбрано</span>
<img src="https://forumstatic.ru/files/0012/14/e8/34517.png">
</label>
</li>
<li class="wardrobe__section-bgs-item">
<span class="wardrobe__bgs-numb">#3</span>
<label class="wardrobe__bgs-option">
<input type="radio" name="bgs-choice" value="bgs-choice" />
<span class="bgs-choice-checked">выбрано</span>
<img src="https://forumstatic.ru/files/0012/14/e8/34517.png">
</label>
</li>
<li class="wardrobe__section-bgs-item">
<span class="wardrobe__bgs-numb">#4</span>
<label class="wardrobe__bgs-option">
<input type="radio" name="bgs-choice" value="bgs-choice" />
<span class="bgs-choice-checked">выбрано</span>
<img src="https://forumstatic.ru/files/0012/14/e8/34517.png">
</label>
</li>
<li class="wardrobe__section-bgs-item">
<span class="wardrobe__bgs-numb">#5</span>
<label class="wardrobe__bgs-option">
<input type="radio" name="bgs-choice" value="bgs-choice" />
<span class="bgs-choice-checked">выбрано</span>
<img src="https://forumstatic.ru/files/0012/14/e8/34517.png">
</label>
</li>
<li class="wardrobe__section-bgs-item">
<span class="wardrobe__bgs-numb">#6</span>
<label class="wardrobe__bgs-option">
<input type="radio" name="bgs-choice" value="bgs-choice" />
<span class="bgs-choice-checked">выбрано</span>
<img src="https://forumstatic.ru/files/0012/14/e8/34517.png">
</label>
</li>
<li class="wardrobe__section-bgs-item">
<span class="wardrobe__bgs-numb">#7</span>
<label class="wardrobe__bgs-option">
<input type="radio" name="bgs-choice" value="bgs-choice" />
<span class="bgs-choice-checked">выбрано</span>
<img src="https://forumstatic.ru/files/0012/14/e8/34517.png">
</label>
</li>
<li class="wardrobe__section-bgs-item">
<span class="wardrobe__bgs-numb">#8</span>
<label class="wardrobe__bgs-option">
<input type="radio" name="bgs-choice" value="bgs-choice" />
<span class="bgs-choice-checked">выбрано</span>
<img src="https://forumstatic.ru/files/0012/14/e8/34517.png">
</label>
</li>
<li class="wardrobe__section-bgs-item">
<span class="wardrobe__bgs-numb">#9</span>
<label class="wardrobe__bgs-option">
<input type="radio" name="bgs-choice" value="bgs-choice" />
<span class="bgs-choice-checked">выбрано</span>
<img src="https://forumstatic.ru/files/0012/14/e8/34517.png">
</label>
</li>
</ul>
</div>
</div>
</div>
<div class="wardrobe__content-buttons">
<button class="wardrobe-button submit" name="preview-submit">
Примерить
</button>
<button class="wardrobe-button getcode" name="preview-getcode">
Получить код
</button>
</div>
</div>
</div>
</div>
<style>
.wardrobe__wrapper {
width: auto;
background: var(--dark600);
border: 1px solid var(--borders);
padding: 15px;
border-radius: 15px;
display: flex;
flex-direction: column;
gap: 15px;
}
.wardrobe__wrapper h5 {
padding: 0 0 15px;
margin: 0;
font: 600 14px var(--font-accent);
text-align: center;
border-bottom: 1px solid var(--borders);
}
.wardrobe__inner {
display: flex;
gap: 20px;
align-items: flex-start;
}
.wardrobe__preview-profile {
width: 220px;
font: 400 11px/140% var(--font);
box-sizing: border-box;
margin:0 0 45px !important;
padding: 10px;
position: relative;
z-index: 1;
background:
var(--dark200);
overflow: visible;
border-radius: 15px;
}
.wardrobe__preview-profile ul {
box-sizing: border-box;
text-align: center;
padding: 10px;
color: var(--beg100);
display: flex;
flex-direction: column;
gap: 10px;
position: relative;
background: var(--fill);
backdrop-filter: blur(20px);
border-radius: 14px;
z-index: 1;
list-style: none;
}
.preview-online {
background: var(--accent);
font: 300 8px var(--font);
padding:0 3px 1px;
border-radius: 10px;
color: var(--beg500);
display: inline-flex;
position: relative;
z-index: 1
}
.preview-author {
font: 500 12px var(--font-accent) !important;
text-align: center !important;
padding: 0px !important;
margin: 0px 0 -8px !important;
position: relative;
color: var(--beg500);
}
.preview-title {
font-size: 11px;
text-align: center;
font-weight: 200 !important;
}
.preview-avatar {
line-height: 0;
display: inline-block;
position: relative;
z-index: 1
}
.preview-avatar img {
max-width: 180px;
border-radius: 7px
}
.preview-field_wrap2 {
display: flex;
justify-content: center;
align-items: center;
gap: 20px;
flex-wrap: wrap;
}
.preview-respect, .preview-fld1 {
display: inline-flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
text-align: center;
font-size:11px;
line-height: 120%;
box-sizing: border-box;
font-weight: 300;
gap:
}
.preview-respect .preview-fld-name, .preview-fld1 .preview-fld-name {
font-size: 0;
}
.preview-fld1 .preview-fld-name:before {
content: "\f075";
font: 10px FOntAwesome;
}
.preview-respect .preview-fld-name:before {
content: "\f005";
font: 10px FOntAwesome;
}
.preview-respect .preview-fld-name, .preview-fld1 .preview-fld-name {
display: flex !important;
justify-content: center;
align-items: center;
margin-right: 5px !important;
color: var(--text1)
}
.preview-fld3 {
border-top: 1px solid var(--borders);
padding-top: 10px !important;
font-size: 12px;
}
.preview-fld3 a {
color: var(--accent) !important;
font-weight: 600
}
.preview-fld3 a:hover {
color: var(--beg100) !important;
}
.preview-fld4 {
line-height: 0;
mask: linear-gradient(to bottom, #000 20%, rgba(0, 0, 0, 0) 100%);
-webkit-mask: linear-gradient(to bottom, #000 20%, rgba(0, 0, 0, 0) 100%);
-webkit-mask-repeat: no-repeat;
-webkit-mask-size: contain;
overflow: hidden;
border-radius: 15px 15px 0 0;
position: absolute;
top: 0;
left: 0;
z-index: 0
}
.preview-fld2 {
line-height: 0;
mask: linear-gradient(to top, #000 20%, rgba(0, 0, 0, 0) 100%);
-webkit-mask: linear-gradient(to top, #000 20%, rgba(0, 0, 0, 0) 100%);
-webkit-mask-repeat: no-repeat;
-webkit-mask-size: contain;
overflow: hidden;
border-radius: 0 0 15px 15px;
margin: -20px -10px -10px !important;
position: relative;
z-index: 0
}
.wardrobe__content-wrapper {
display: flex;
flex-direction: column;
gap: 15px;
flex: 1;
}
.wardrobe__content-buttons {
display: flex;
gap: 5px;
}
.wardrobe__content-buttons .wardrobe-button {
background: var(--dark200);
border: none !important;
color: var(--text1);
font-family: var(--font) !important;
font-size: 11px !important;
font-weight: 700 !important;
margin: 0px !important;
padding: 10px 20px !important;
transition: all 0.3s ease-in-out 0s;
border-radius: 8px;
text-transform: uppercase;
}
.wardrobe__content-buttons .wardrobe-button:hover {
cursor: pointer;
background: var(--accent);
color: var(--text3);
}
.wardrobe__content-buttons .wardrobe-button.getcode {
display: flex;
align-items: center;
gap: 10px;
}
.wardrobe__content-buttons .wardrobe-button.getcode:before {
content: "\f00c";
font: 10px FontAwesome;
display: none; /* block когда код скопирован в буфер */
}
.wardrobe__content-sections {
display: flex;
flex-direction: column;
gap: 10px;
}
.wardrobe__section {
background: var(--dark400);
padding: 15px;
display: flex;
flex-direction: column;
gap: 10px;
border-radius: 15px
}
.wardrobe__section h6 {
padding: 0;
margin: 0;
font: 500 12px var(--font-accent);
color: var(--beg100)
}
.wardrobe__section-checkbox {
display: inline-flex;
align-items: center;
font-size: 12px;
cursor: pointer;
user-select: none;
gap: 5px;
}
.wardrobe__section-checkbox input {
display: none;
}
.wardrobe__section-checkbox span {
width: 15px;
height: 15px;
border: 1px solid var(--borders);
border-radius: 100%;
display: flex;
justify-content: center;
align-items: center;
box-sizing: border-box;
position: relative;
transition: 0.2s ease;
}
.wardrobe__section-checkbox input:checked + span::after {
content: "\f00c";
font: 7px FontAwesome;
color: var(--beg100)
}
.wardrobe-input {
padding: 4px 10px !important;
color: var(--text2);
background: var(--fill);
border: 1px solid var(--borders) !important;
border-radius: 7px;
font: 300 11px var(--font), arial !important;
box-sizing: border-box;
apperance: none;
transition: border .6s cubic-bezier(0.25, 1, 0.5, 1) 0s;
}
.wardrobe-input:focus {
outline: none;
border: 1px solid var(--beg100) !important;
}
.wardrobe-input::placeholder {
color: var(--text1);
}
.wardrobe-textarea {
width: 100%;
min-height: 90px;
padding: 4px 10px !important;
color: var(--text2);
background: var(--fill);
border: 1px solid var(--borders) !important;
border-radius: 7px;
font: 300 11px var(--font), arial !important;
box-sizing: border-box;
apperance: none;
transition: border .6s cubic-bezier(0.25, 1, 0.5, 1) 0s;
resize: vertical;
}
.wardrobe-textarea::placeholder {
color: var(--text1);
}
.wardrobe-textarea:focus {
outline: none;
border: 1px solid var(--beg100) !important;
}
.wardrobe-spoiler-content {
height: 0;
overflow: hidden;
transition: all 0.4s ease;
display: flex;
flex-direction: column;
gap: 10px;
}
.wardrobe-spoiler.open .wardrobe-spoiler-content {
height: auto;
}
.wardrobe-spoiler h6 {
display: flex;
align-items: center;
justify-content: space-between;
cursor: pointer;
margin: 0 0 -10px;
}
.wardrobe-spoiler.open h6 {
margin: 0;
}
.wardrobe-spoiler h6:after {
content: "\f078";
font: 12px FontAwesome;
color: var(--text2);
transition: transform .6s cubic-bezier(0.25, 1, 0.5, 1) 0s;
}
.wardrobe-spoiler.open h6:after {
transform: rotate(180deg);
color: var(--text1)
}
.wardrobe__section-bgs {
display: flex;
flex-wrap: wrap;
gap: 10px;
list-style: none;
padding: 0 !important;
margin: 0;
}
.wardrobe__section-bgs-item {
background: var(--fill);
padding: 10px !important;
display: flex;
flex-direction: column;
gap: 10px;
align-items: center;
border-radius: 7px;
flex: 1;
min-width: 25%;
}
.wardrobe__bgs-numb {
font-size: 11px;
}
.wardrobe__bgs-option {
position: relative;
cursor: pointer;
border: 2px solid transparent;
border-radius: 8px;
overflow: hidden;
transition: border-color 0.3s;
display: flex;
align-items: center;
justify-content: center;
}
.wardrobe__bgs-option img {
width: 100%;
border-radius: 7px;
transition: all .6s cubic-bezier(0.25, 1, 0.5, 1) 0s;
}
.wardrobe__bgs-option input[type="radio"] {
display: none;
}
.bgs-choice-checked {
position: absolute;
z-index: 1;
padding: 3px 10px;
border-radius: 7px;
background: var(--dark200);
display: flex;
align-items: center;
color: var(--beg100);
text-transform: uppercase;
font-size: 11px;
gap: 10px;
opacity: 0;
transform: scale(0);
transition: all .6s cubic-bezier(0.25, 1, 0.5, 1) 0s;
}
.bgs-choice-checked:before {
content: "\f00c";
font-family: FontAwesome;
font-size: 8px;
}
.wardrobe__bgs-option:has(input[type="radio"]:checked) img {
opacity: 0.55;
}
.wardrobe__bgs-option:has(input[type="radio"]:checked) span {
opacity: 1;
transform: scale(1)
}
</style>
<script>
document.querySelectorAll('.spoiler-toggle').forEach(toggle => {
toggle.addEventListener('click', () => {
const spoilerSection = toggle.closest('.wardrobe-spoiler');
spoilerSection.classList.toggle('open');
});
});
</script>
[hideprofile]
