[html]<center><div class="tem"><tem1>
шаблон анкеты
</tem1>
<b>◂</b> Анкета создается в данном подфоруме отдельной темой;
<br>
<b>◂</b> В случае, если вам понадобится какая-либо помощь в заполнении анкеты или её оформлении, можете смело обращаться к любому члену АМС в личные сообщения. <br>
<b>◂</b> У нас Чикаго, поэтому написание имени и фамилии принимается только на европейский лад и вначале идет имя, потом фамилия <br>
<b>◂</b> Анкету заполняете на свое усмотрение: полностью избегая заполнения био (упрощенный вариант), заполняя био текстом, либо в формате нескольких фактов о вашем персонаже. <br>
<b>◂</b> Запрещено добавлять в поле био картинки, тексты песен, и прочий бред, который не относится к анкете. Творчество свободно, но ограничено здравым смыслом. <br>
Желаем вдохновения!
<br>
</div></center>[/html]
[html]
<style>
.anketa-form { max-width: 700px; margin: 0 auto; }
.anketa-row { display: grid; gap: 6px; margin-bottom: 8px; }
.anketa-row.cols-3 { grid-template-columns: 1fr 1fr 1fr; }
.anketa-row.cols-3-strong { grid-template-columns: 1.2fr 1.2fr 1fr; }
.anketa-row.cols-1 { grid-template-columns: 1fr; }
.anketa-form input,
.anketa-form textarea { width: 100%; box-sizing: border-box;font-size: inherit; }
.anketa-form textarea { resize: vertical; }
.error-message { display: none; }
.anketa-submit.memory_button{
display: inline-block;
}
.anketa-preview { margin: 14px auto 0; }
/* строка "по заявке" */
.anketa-inline { display: flex; align-items: center; gap: 10px; margin: 8px 0 10px; flex-wrap: wrap; }
.anketa-inline label { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;}
.anketa-inline input[type="checkbox"] { margin: 0; }
.anketa-inline input[type="text"] { width: 70px; }
/* панель биографии */
textarea#anketa-bio {
border-radius: 0 0 15px 15px;
min-height: 150px;
}
.bio-tools {
background: var(--input-bg);
margin: 10px -2px 0px 0px;
border-radius: 15px 15px 0 0;
border: var(--input-border);
height: auto;
position: relative;
padding: 6px 8px;
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.bio-tools button {
padding: 2px 6px;
cursor: pointer;
background: var(--input-bg);
font-size: 16px;
color: rgb(from var(--controls-contrast) r g b / 80%);
}
.bio-dropdown { position: relative; display: inline-block; }
.bio-dropdown-panel {
display: none;
position: absolute;
left: 0;
top: calc(100% + 6px);
z-index: 50;
background: var(--input-bg);
border: var(--input-border);
border-radius: 10px;
padding: 6px;
min-width: 140px;
}
.bio-dropdown-panel button {
display: block;
width: 100%;
text-align: left;
padding: 4px 6px;
}
.error-message {
color: darkred;
}
</style>
<center>
<div class="anketa-form">
<div class="anketa-row cols-3-strong">
<div>
<input id="anketa-name-ru" placeholder="Имя Фамилия" type="text" />
<div id="error-anketa-name-ru" class="error-message">
Введите имя и фамилию кириллицей (минимум 2 слова)
</div>
</div>
<div>
<input id="anketa-name-en" placeholder="Name Surname" type="text" />
<div id="error-anketa-name-en" class="error-message">
Введите имя и фамилию латиницей (минимум 2 слова)
</div>
</div>
<div>
<input id="anketa-faceclaim" placeholder="Внешность (латиницей)" type="text" />
<div id="error-anketa-faceclaim" class="error-message">
Введите внешность латиницей
</div>
</div>
</div>
<div class="anketa-row cols-3">
<div>
<input id="anketa-hometown" placeholder="Родной город" type="text" />
<div id="error-anketa-hometown" class="error-message">Введите родной город</div>
</div>
<div>
<input id="anketa-birthdate" placeholder="Дата рождения (00.00.0000)" type="text" />
<div id="error-anketa-birthdate" class="error-message">
Введите дату в формате 00.00.0000
</div>
</div>
<div>
<input id="anketa-profession" placeholder="Профессия" type="text" />
<div id="error-anketa-profession" class="error-message">Введите профессию</div>
</div>
</div>
<div class="anketa-row cols-1">
<div>
<input id="anketa-photo" placeholder="Ссылка на фото" type="text" />
<div id="error-anketa-photo" class="error-message">
Введите корректную ссылку на фото (jpg, png, gif)
</div>
</div>
</div>
<div class="anketa-row cols-1">
<div>
<textarea id="anketa-quote" placeholder="Цитата или песня о персонаже"></textarea>
<div id="error-anketa-quote" class="error-message">Введите цитату или песню</div>
</div>
</div>
<!-- панель биографии -->
<div class="bio-tools" id="bio-tools">
<button type="button" data-wrap="b" title="жирный">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-type-bold" viewBox="0 0 16 16">
<path d="M8.21 13c2.106 0 3.412-1.087 3.412-2.823 0-1.306-.984-2.283-2.324-2.386v-.055a2.176 2.176 0 0 0 1.852-2.14c0-1.51-1.162-2.46-3.014-2.46H3.843V13zM5.908 4.674h1.696c.963 0 1.517.451 1.517 1.244 0 .834-.629 1.32-1.73 1.32H5.908V4.673zm0 6.788V8.598h1.73c1.217 0 1.88.492 1.88 1.415 0 .943-.643 1.449-1.832 1.449H5.907z"/>
</svg>
</button>
<button type="button" data-wrap="i" title="курсив">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-type-italic" viewBox="0 0 16 16">
<path d="M7.991 11.674 9.53 4.455c.123-.595.246-.71 1.347-.807l.11-.52H7.211l-.11.52c1.06.096 1.128.212 1.005.807L6.57 11.674c-.123.595-.246.71-1.346.806l-.11.52h3.774l.11-.52c-1.06-.095-1.129-.211-1.006-.806z"/>
</svg>
</button>
<button type="button" data-wrap="u" title="подчеркнутый">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-type-underline" viewBox="0 0 16 16">
<path d="M5.313 3.136h-1.23V9.54c0 2.105 1.47 3.623 3.917 3.623s3.917-1.518 3.917-3.623V3.136h-1.23v6.323c0 1.49-.978 2.57-2.687 2.57s-2.687-1.08-2.687-2.57zM12.5 15h-9v-1h9z"/>
</svg>
</button>
<button type="button" data-wrap="s" title="зачеркнутый">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-type-strikethrough" viewBox="0 0 16 16">
<path d="M6.333 5.686c0 .31.083.581.27.814H5.166a2.8 2.8 0 0 1-.099-.76c0-1.627 1.436-2.768 3.48-2.768 1.969 0 3.39 1.175 3.445 2.85h-1.23c-.11-1.08-.964-1.743-2.25-1.743-1.23 0-2.18.602-2.18 1.607zm2.194 7.478c-2.153 0-3.589-1.107-3.705-2.81h1.23c.144 1.06 1.129 1.703 2.544 1.703 1.34 0 2.31-.705 2.31-1.675 0-.827-.547-1.374-1.914-1.675L8.046 8.5H1v-1h14v1h-3.504c.468.437.675.994.675 1.697 0 1.826-1.436 2.967-3.644 2.967"/>
</svg>
</button>
<button type="button" data-insert="br" title="новая строка">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-paragraph" viewBox="0 0 16 16">
<path d="M10.5 15a.5.5 0 0 1-.5-.5V2H9v12.5a.5.5 0 0 1-1 0V9H7a4 4 0 1 1 0-8h5.5a.5.5 0 0 1 0 1H11v12.5a.5.5 0 0 1-.5.5"/>
</svg>
</button>
<div class="bio-dropdown" id="bio-size-dd">
<button type="button" id="bio-size-btn" title="размер текста">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-type" viewBox="0 0 16 16">
<path d="m2.244 13.081.943-2.803H6.66l.944 2.803H8.86L5.54 3.75H4.322L1 13.081zm2.7-7.923L6.34 9.314H3.51l1.4-4.156zm9.146 7.027h.035v.896h1.128V8.125c0-1.51-1.114-2.345-2.646-2.345-1.736 0-2.59.916-2.666 2.174h1.108c.068-.718.595-1.19 1.517-1.19.971 0 1.518.52 1.518 1.464v.731H12.19c-1.647.007-2.522.8-2.522 2.058 0 1.319.957 2.18 2.345 2.18 1.06 0 1.716-.43 2.078-1.011zm-1.763.035c-.752 0-1.456-.397-1.456-1.244 0-.65.424-1.115 1.408-1.115h1.805v.834c0 .896-.752 1.525-1.757 1.525"/>
</svg>
</button>
<div class="bio-dropdown-panel" id="bio-size-panel">
<button type="button" data-font="1">1</button>
<button type="button" data-font="2">2</button>
<button type="button" data-font="3">3</button>
<button type="button" data-font="4">4</button>
<button type="button" data-font="5">5</button>
<button type="button" data-font="6">6</button>
<button type="button" data-font="7">7</button>
<button type="button" data-font="8">8</button>
<button type="button" data-font="9">9</button>
<button type="button" data-font="10">10</button>
</div>
</div>
</div>
<div class="anketa-row cols-1">
<div>
<textarea id="anketa-bio" placeholder="биография персонажа
(если заполняете упрощенный вариант анкеты, то оставляете поле пустым)"></textarea>
<div id="error-anketa-bio" class="error-message"></div>
</div>
</div>
<div class="anketa-row cols-1">
<div>
<input id="anketa-twinlinks" placeholder="Ссылка на всех твинков" type="text" />
<div id="error-anketa-twinlinks" class="error-message">Введите корректную ссылку</div>
</div>
</div>
<div class="anketa-row cols-1">
<div>
<input id="anketa-payment" placeholder="Ссылка на оплату твинка/смены" type="text" />
<div id="error-anketa-payment" class="error-message">Введите корректную ссылку</div>
</div>
</div>
<!-- по заявке: в одну строку (текст + чекбокс) -->
<div class="anketa-inline">
<label for="anketa-by-request">
Персонаж по заявке
<input id="anketa-by-request" type="checkbox" />
</label>
<input id="anketa-request-number" placeholder="№" type="text" style="display:none;" />
<div id="error-anketa-request-number" class="error-message">Введите номер заявки (только число)</div>
</div>
<a href="javascript:void(0);" class="anketa-submit memory_button">создать анкету</a>
</div>
<div class="anketa-preview" id="anketa-preview">
<div class="anketa">
<anketa1>
<span id="preview-name-ru">Имя Фамилия</span> // <span id="preview-name-en">Name Surname</span>
</anketa1>
<anketa2>
<span id="preview-faceclaim">Внешность</span>
</anketa2>
<anketa3>
<span id="preview-birthdate">01.01.1990</span>, <span id="preview-age">00</span>
</anketa3>
<anketa4>
<span id="preview-hometown">Город</span>
</anketa4>
<anketa5>
<span id="preview-profession">Профессия</span>
</anketa5>
<anketa8>
<img id="preview-photo" src="http://via.placeholder.com/140x140">
</anketa8>
<anketa10>
"<span id="preview-quote">Цитата или песня</span>"
</anketa10>
<anketa9>
<div id="preview-bio">Текст биографии появится здесь</div>
</anketa9>
</div>
</div>
</center>
<script src="https://forumstatic.ru/files/001b/ef/4a/75276.js?v=3"></script>
[/html]
