Оформление твинков
[indent] Администрация не будет вести список твинков и принуждать вас афишировать их, но если вы хотите, чтобы ваши твинки стали известны всем, то можете оставить здесь заявку на их включение.
[indent] Если у вас есть персональная страница, то ваш твинк также будет внесен в неё.
[html]
<div class="twinks-generator">
<div class="twinks-generator-title">
Генератор персонажей
</div>
<div class="twinks-generator-subtitle">
Добавьте персонажей и получите готовый код для форума.
</div>
<div id="twinks-list">
<!-- ПЕРСОНАЖ 1 -->
<div class="twink-form">
<div class="twink-form-number">
Персонаж <span>1</span>
</div>
<div class="twink-fields">
<label>
Ссылка на профиль
<input
type="text"
class="twink-link"
placeholder="https://..."
>
</label>
<label>
Имя персонажа
<input
type="text"
class="twink-name"
placeholder="Имя персонажа"
>
</label>
<label>
Ссылка на фото
<input
type="text"
class="twink-photo"
placeholder="https://..."
>
</label>
<label>
Роль / положение
<input
type="text"
class="twink-role"
placeholder="Например: Герцог • Северные земли"
>
</label>
<label>
Статус
<select class="twink-status">
<option value="online">
В игре
</option>
<option value="offline">
Неактивен
</option>
</select>
</label>
</div>
<button
type="button"
class="remove-twink"
>
Удалить персонажа
</button>
</div>
</div>
<!-- КНОПКИ -->
<div class="twinks-generator-buttons">
<button
type="button"
id="add-twink"
class="twink-button twink-button-add"
>
+ Добавить персонажа
</button>
<button
type="button"
id="generate-twinks"
class="twink-button twink-button-generate"
>
Сгенерировать код
</button>
</div>
<!-- РЕЗУЛЬТАТ -->
<div
id="twinks-result-block"
class="twinks-result-block"
>
<div class="twinks-result-title">
Готовый код
</div>
<textarea
id="twinks-result"
readonly
spellcheck="false"
></textarea>
<button
type="button"
id="copy-twinks"
class="twink-copy-button"
>
Скопировать код
</button>
</div>
</div>
<style>/* =========================
ГЕНЕРАТОР
========================= */
.twinks-generator {
width: 740px;
margin: 30px auto;
padding: 30px;
box-sizing: border-box;
background: #f1efed;
border: 1px solid rgba(70,55,35,.25);
box-shadow:
0 8px 25px rgba(0,0,0,.12);
font-family: Georgia, serif;
color: #40382d;
}
/* =========================
ЗАГОЛОВОК
========================= */
.twinks-generator-title {
margin-bottom: 6px;
font-size: 22px;
letter-spacing: 3px;
text-transform: uppercase;
color: #5b4a32;
}
.twinks-generator-subtitle {
margin-bottom: 28px;
font-size: 10px;
letter-spacing: 1px;
color: #8a7657;
}
/* =========================
ФОРМА ПЕРСОНАЖА
========================= */
.twink-form {
margin-bottom: 18px;
padding: 20px;
box-sizing: border-box;
background: rgba(255,255,255,.35);
border: 1px solid rgba(70,55,35,.18);
}
/* =========================
НОМЕР ПЕРСОНАЖА
========================= */
.twink-form-number {
margin-bottom: 18px;
padding-bottom: 9px;
border-bottom:
1px solid rgba(70,55,35,.15);
font-size: 11px;
letter-spacing: 1.5px;
text-transform: uppercase;
color: #806b48;
}
.twink-form-number span {
color: #5b4a32;
}
/* =========================
СЕТКА ПОЛЕЙ
========================= */
.twink-fields {
display: grid;
grid-template-columns:
1fr 1fr;
gap: 0 15px;
}
/* =========================
LABEL
========================= */
.twink-fields label {
display: block;
margin-bottom: 15px;
font-size: 10px;
text-transform: uppercase;
letter-spacing: 1.5px;
color: #806b48;
}
/*
Ссылка на профиль занимает
всю ширину
*/
.twink-fields label:first-child {
grid-column: 1 / -1;
}
/* =========================
INPUT
========================= */
.twink-fields input,
.twink-fields select {
display: block;
width: 100%;
margin-top: 7px;
padding: 10px 12px;
box-sizing: border-box;
border:
1px solid rgba(70,55,35,.22);
background: rgba(255,255,255,.55);
font-family: Georgia, serif;
font-size: 13px;
color: #40382d;
outline: none;
}
/* =========================
FOCUS
========================= */
.twink-fields input:focus,
.twink-fields select:focus {
border-color: #806b48;
background: #fffdf8;
}
/* =========================
SELECT
========================= */
.twink-fields select {
cursor: pointer;
}
/* =========================
УДАЛИТЬ ПЕРСОНАЖА
========================= */
.remove-twink {
margin-top: 2px;
padding: 7px 12px;
border:
1px solid rgba(70,55,35,.25);
background: transparent;
color: #927c5b;
font-family: Georgia, serif;
font-size: 10px;
letter-spacing: 1px;
text-transform: uppercase;
cursor: pointer;
transition: .2s;
}
.remove-twink:hover {
background:
rgba(128,107,72,.08);
color: #6b4d2c;
border-color: #806b48;
}
/* =========================
КНОПКИ
========================= */
.twinks-generator-buttons {
display: flex;
gap: 10px;
margin-top: 25px;
}
.twink-button {
flex: 1;
padding: 11px 18px;
border:
1px solid rgba(70,55,35,.3);
font-family: Georgia, serif;
font-size: 11px;
letter-spacing: 1px;
text-transform: uppercase;
cursor: pointer;
transition: .2s;
}
/* =========================
ДОБАВИТЬ
========================= */
.twink-button-add {
background: transparent;
color: #806b48;
}
.twink-button-add:hover {
background:
rgba(128,107,72,.08);
}
/* =========================
ГЕНЕРИРОВАТЬ
========================= */
.twink-button-generate {
background: #806b48;
color: #fff;
border-color: #806b48;
}
.twink-button-generate:hover {
background: #665338;
border-color: #665338;
}
/* =========================
РЕЗУЛЬТАТ
========================= */
.twinks-result-block {
display: none;
margin-top: 28px;
padding-top: 25px;
border-top:
1px solid rgba(70,55,35,.2);
}
.twinks-result-block.active {
display: block;
}
/* =========================
ЗАГОЛОВОК РЕЗУЛЬТАТА
========================= */
.twinks-result-title {
margin-bottom: 10px;
font-size: 14px;
letter-spacing: 2px;
color: #5b4a32;
}
/* =========================
ГОТОВЫЙ КОД
========================= */
#twinks-result {
width: 100%;
height: 350px;
box-sizing: border-box;
padding: 12px;
resize: vertical;
background: #292720;
color: #e8dfcf;
border:
1px solid #5c503c;
font-family: Consolas, monospace;
font-size: 11px;
line-height: 1.5;
outline: none;
}
/* =========================
КОПИРОВАТЬ
========================= */
.twink-copy-button {
width: 100%;
margin-top: 10px;
padding: 11px 18px;
border:
1px solid rgba(70,55,35,.3);
background: #5f523d;
color: white;
font-family: Georgia, serif;
font-size: 11px;
letter-spacing: 1px;
text-transform: uppercase;
cursor: pointer;
transition: .2s;
}
.twink-copy-button:hover {
background: #473d2e;
}
/* =========================
МОБИЛЬНАЯ ВЕРСИЯ
========================= */
@media (max-width: 650px) {
.twinks-generator {
width: calc(100% - 20px);
padding: 20px;
}
.twink-fields {
grid-template-columns: 1fr;
}
.twink-fields label:first-child {
grid-column: auto;
}
.twinks-generator-buttons {
flex-direction: column;
}
}</style>
<script type="text/javascript" src="https://forumstatic.ru/files/0011/93/3d/82670.js"></script>
[/html]
