[html]<div class="generator-instruction">
<div class="instruction-icon">i</div>
<div class="instruction-text">
<strong>Как заполнить анкету</strong>
<p>
Заполните основные поля персонажа, добавьте изображение,
биографию и необходимые навыки.
</p>
<p>
Для нового абзаца в биографии используйте кнопку
<b>«+ Новый абзац»</b>.
</p>
<p>
В разделе <b>«Навыки»</b> укажите название навыка
и его уровень от 0 до 100%.
</p>
<p>
<b>«Способности»</b> можно не заполнять — если оставить
их пустыми, этот раздел не появится в готовой анкете.
</p>
<p class="instruction-final">
Когда всё готово, нажмите
<b>«Сгенерировать анкету»</b>, затем скопируйте полученный
HTML-код и вставьте его в сообщение на форуме в тег html
</p>
</div>
</div>
<div class="anketa-generator">
<div class="generator-title">
АНКЕТА ПЕРСОНАЖА
<span>Заполните поля и получите готовую анкету</span>
</div>
<!-- ИМЯ -->
<div class="generator-field">
<label>Имя персонажа</label>
<input
type="text"
id="a-name"
placeholder="Например: Камилла"
>
</div>
<!-- ТИТУЛ -->
<div class="generator-field">
<label>Титул / короткая фраза</label>
<input
type="text"
id="a-title"
placeholder="Например: Официантка придорожного бистро"
>
</div>
<!-- КАРТИНКА -->
<div class="generator-field">
<label>Ссылка на изображение</label>
<input
type="text"
id="a-image"
placeholder="https://..."
>
<small>
Рекомендуемый размер: 740 x 240 px
</small>
</div>
<!-- ОСНОВНАЯ ИНФОРМАЦИЯ -->
<div class="generator-grid">
<div class="generator-field">
<label>Внешность</label>
<input
type="text"
id="a-appearance"
placeholder="Имя актера на кириллице"
>
</div>
<div class="generator-field">
<label>Дата рождения</label>
<input
type="text"
id="a-birth"
placeholder="14 октября 1854"
>
</div>
<div class="generator-field">
<label>Раса</label>
<input
type="text"
id="a-race"
placeholder="Человек"
>
</div>
<div class="generator-field">
<label>Социальный статус</label>
<input
type="text"
id="a-status"
placeholder="Дворянин"
>
</div>
</div>
<!-- БИОГРАФИЯ -->
<div class="generator-field">
<label>Биография</label>
<textarea
id="a-bio"
rows="10"
placeholder="Напишите биографию персонажа..."
></textarea>
<button
type="button"
id="add-paragraph"
class="add-paragraph"
>
+ Новый абзац
</button>
</div>
<!-- НАВЫКИ -->
<div class="generator-subtitle">
НАВЫКИ
</div>
<div id="skills-generator">
<div class="generator-skill">
<input
type="text"
class="skill-title"
placeholder="Название навыка"
>
<input
type="number"
class="skill-value"
min="0"
max="100"
placeholder="85"
>
<span>%</span>
<button
type="button"
class="remove-skill"
aria-label="Удалить"
></button>
</div>
<div class="generator-skill">
<input
type="text"
class="skill-title"
placeholder="Название навыка"
>
<input
type="number"
class="skill-value"
min="0"
max="100"
placeholder="70"
>
<span>%</span>
<button
type="button"
class="remove-skill"
aria-label="Удалить"
></button>
</div>
</div>
<button
type="button"
class="add-skill"
id="add-skill"
>
+ Добавить навык
</button>
<!-- =========================
СПОСОБНОСТИ
========================= -->
<div class="generator-subtitle">
СПОСОБНОСТИ
<span class="optional-label">необязательно</span>
</div>
<div id="abilities-generator">
<div class="generator-ability">
<input
type="text"
class="ability-title"
placeholder="Название способности"
>
<input
type="text"
class="ability-level"
placeholder="Уровень"
>
<button
type="button"
class="remove-ability"
aria-label="Удалить"
></button>
</div>
</div>
<button
type="button"
class="add-ability"
id="add-ability"
>
+ Добавить способность
</button>
<!-- ГЕНЕРАЦИЯ -->
<button
type="button"
class="generate-anketa"
id="generate-anketa"
>
Сгенерировать анкету
</button>
<!-- РЕЗУЛЬТАТ -->
<div
id="result-block"
style="display:none;"
>
<div class="generator-subtitle">
ГОТОВЫЙ HTML
</div>
<div class="result-description">
Скопируйте код ниже и вставьте его в сообщение на форуме.
</div>
<textarea
id="anketa-result"
readonly
></textarea>
<button
type="button"
class="copy-anketa"
id="copy-anketa"
>
Скопировать HTML
</button>
<div id="copy-message"></div>
</div>
</div>
<style>
/* =========================
ГЕНЕРАТОР
========================= */
.anketa-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;
}
/* ЗАГОЛОВОК */
.generator-title {
margin-bottom: 25px;
font-size: 22px;
letter-spacing: 3px;
text-transform: uppercase;
color: #5b4a32;
}
.generator-title span {
display: block;
margin-top: 6px;
font-size: 10px;
letter-spacing: 1px;
text-transform: none;
color: #8a7657;
}
/* ПОЛЯ */
.generator-field {
margin-bottom: 18px;
}
.generator-field label {
display: block;
margin-bottom: 7px;
font-size: 10px;
text-transform: uppercase;
letter-spacing: 1.5px;
color: #806b48;
}
.generator-field small {
display: block;
margin-top: 5px;
font-size: 10px;
color: #9a8a70;
}
.generator-field input,
.generator-field textarea,
.generator-skill input,
.generator-ability input {
width: 100%;
box-sizing: border-box;
padding: 10px 12px;
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;
}
.generator-field textarea {
resize: vertical;
line-height: 1.6;
}
.generator-field input:focus,
.generator-field textarea:focus,
.generator-skill input:focus,
.generator-ability input:focus {
border-color: #806b48;
background: #fffdf8;
}
/* СЕТКА */
.generator-grid {
display: grid;
grid-template-columns:
1fr 1fr;
gap: 0 15px;
}
/* ЗАГОЛОВОК РАЗДЕЛА */
.generator-subtitle {
margin: 28px 0 15px;
padding-bottom: 8px;
border-bottom:
1px solid rgba(70,55,35,.2);
font-size: 14px;
letter-spacing: 2px;
color: #5b4a32;
}
.optional-label {
font-size: 9px;
letter-spacing: 1px;
text-transform: lowercase;
color: #9a8a70;
}
/* НОВЫЙ АБЗАЦ */
.add-paragraph {
margin-top: 8px;
padding: 8px 12px;
border: 1px solid
rgba(70,55,35,.25);
background: transparent;
color: #806b48;
font-family: Georgia, serif;
font-size: 10px;
cursor: pointer;
}
.add-paragraph:hover {
background:
rgba(128,107,72,.08);
}
/* НАВЫК */
.generator-skill {
display: grid;
grid-template-columns:
1fr 70px 20px 30px;
align-items: center;
gap: 7px;
margin-bottom: 9px;
}
.generator-skill .skill-value {
text-align: center;
}
.generator-skill > span {
font-size: 12px;
color: #806b48;
}
/* СПОСОБНОСТЬ */
.generator-ability {
display: grid;
grid-template-columns:
1fr 140px 30px;
align-items: center;
gap: 7px;
margin-bottom: 9px;
}
.generator-ability .ability-level {
text-align: center;
}
/* КНОПКИ УДАЛЕНИЯ */
.remove-skill,
.remove-ability {
width: 28px;
height: 28px;
border: 0;
background: transparent;
font-size: 20px;
color: #927c5b;
cursor: pointer;
}
.remove-skill:hover,
.remove-ability:hover {
color: #6b4d2c;
}
/* КНОПКИ */
.add-skill,
.add-ability,
.generate-anketa,
.copy-anketa {
border:
1px solid rgba(70,55,35,.3);
padding: 11px 18px;
font-family: Georgia, serif;
font-size: 11px;
letter-spacing: 1px;
text-transform: uppercase;
cursor: pointer;
transition: .2s;
}
/* ДОБАВИТЬ */
.add-skill,
.add-ability {
margin-top: 5px;
background: transparent;
color: #806b48;
}
.add-skill:hover,
.add-ability:hover {
background:
rgba(128,107,72,.08);
}
/* ГЕНЕРИРОВАТЬ */
.generate-anketa {
display: block;
width: 100%;
margin-top: 30px;
background: #806b48;
color: #fff;
border-color: #806b48;
}
.generate-anketa:hover {
background: #665338;
}
/* РЕЗУЛЬТАТ */
#anketa-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;
}
.copy-anketa {
width: 100%;
margin-top: 10px;
background: #5f523d;
color: white;
}
.copy-anketa:hover {
background: #473d2e;
}
#copy-message {
display: none;
margin-top: 10px;
text-align: center;
font-size: 11px;
color: #806b48;
}
.remove-skill,
.remove-ability {
position: relative;
width: 28px;
height: 28px;
border: 0;
background: transparent;
cursor: pointer;
}
.remove-skill::before,
.remove-skill::after,
.remove-ability::before,
.remove-ability::after {
content: "";
position: absolute;
width: 15px;
height: 1px;
background: #927c5b;
left: 50%;
top: 50%;
}
.remove-skill::before,
.remove-ability::before {
transform: translate(-50%, -50%) rotate(45deg);
}
.remove-skill::after,
.remove-ability::after {
transform: translate(-50%, -50%) rotate(-45deg);
}
.remove-skill:hover::before,
.remove-skill:hover::after,
.remove-ability:hover::before,
.remove-ability:hover::after {
background: #6b4d2c;
}
.generator-instruction {
display: flex;
gap: 15px;
margin: 0 0 28px;
padding: 17px 18px;
background: rgba(128,107,72,.07);
border: 1px solid rgba(70,55,35,.18);
border-left: 3px solid #806b48;
box-sizing: border-box;
}
.instruction-icon {
flex: 0 0 27px;
width: 27px;
height: 27px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid #806b48;
border-radius: 50%;
color: #806b48;
font-family: Georgia, serif;
font-size: 15px;
font-style: italic;
}
.instruction-text {
flex: 1;
font-family: Georgia, serif;
font-size: 12px;
line-height: 1.65;
color: #665b4b;
}
.instruction-text strong {
display: block;
margin-bottom: 7px;
color: #5b4a32;
font-size: 13px;
letter-spacing: 1px;
text-transform: uppercase;
}
.instruction-text p {
margin: 0 0 6px;
}
.instruction-text p:last-child {
margin-bottom: 0;
}
.instruction-text b {
color: #705b3b;
font-weight: normal;
}
.instruction-final {
margin-top: 10px !important;
padding-top: 9px;
border-top: 1px solid rgba(70,55,35,.12);
}
</style>
<script type="text/javascript" src="https://forumstatic.ru/files/0011/93/3d/28085.js"></script>[/html]
