шаблон анкеты

[html]
<script type="application/json" id="pp-plashki-config">
{
"ONE": { "style": "background-color:#a8b8d1;", "label": "голубая" },
"TWO": { "style": "background-color:#a5515a;", "label": "красная" },
"UNIVERSAL": { "style": "background-color:#ddd2d1;", "label": "универсальная" }
}
</script>

.anketa-form { max-width: 700px; margin: 0 auto; width: 100%; }
.anketa-row { display: grid; gap: 8px; margin-bottom: 10px; }
.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-2 { grid-template-columns: 1fr 1fr; }
.anketa-row.cols-1 { grid-template-columns: 1fr; }
@media (max-width: 640px){
.anketa-row.cols-3,
.anketa-row.cols-3-strong,
.anketa-row.cols-2 { grid-template-columns: 1fr; }
}

/* ВАЖНО: width:100% только текстовым полям, НЕ radio/checkbox */
.anketa-form input[type="text"],
.anketa-form input[type="search"],
.anketa-form input[type="url"],
.anketa-form input[type="number"],
.anketa-form input:not([type]),
.anketa-form textarea,
.anketa-form select{
width: 100%;
max-width: 100%;
box-sizing: border-box;
font-size: inherit;
font-family: inherit;
}

.anketa-form input[type="radio"],
.anketa-form input[type="checkbox"]{
-webkit-appearance: auto;
appearance: auto;
width: auto !important;
min-width: 0 !important;
max-width: none !important;
height: auto !important;
margin: 0 !important;
padding: 0 !important;
flex: 0 0 auto !important;
display: inline-block !important;
position: static !important;
float: none !important;
vertical-align: middle;
accent-color: #8bb1ac;
}

.anketa-form textarea { resize: vertical; }
.error-message { display: none; color: darkred; font-size: 12px; margin-top: 4px; }
.anketa-submit.memory_button{ display: inline-block; margin-top: 6px; }

.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: 8px;
white-space: nowrap;
}
.anketa-inline input[type="text"]{ width: 70px; max-width: 30vw; }

/* ===== чипы: пол / клеймы ===== */
.anketa-seg{
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 4px 0 12px;
}
.anketa-seg__item{
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0;
margin: 0;
padding: 9px 14px;
min-height: 38px;
border-radius: 999px;
background: var(--input-bg, #f3eeeb);
border: 1px solid rgba(0,0,0,.06);
cursor: pointer;
user-select: none;
-webkit-user-select: none;
line-height: 1.15;
transition: background .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.anketa-seg__item > span{
line-height: 1.2;
white-space: nowrap;
pointer-events: none;
}
/* прячем натив, кликабельна вся «таблетка» */
.anketa-seg__item > input[type="radio"],
.anketa-seg__item > input[type="checkbox"]{
position: absolute !important;
opacity: 0 !important;
width: 1px !important;
height: 1px !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
clip: rect(0 0 0 0);
clip-path: inset(50%);
overflow: hidden;
pointer-events: none;
}
.anketa-seg__item:has(input:checked){
background: rgba(139,177,172,.22);
border-color: rgba(139,177,172,.55);
box-shadow: inset 0 0 0 1px rgba(139,177,172,.35);
}
.anketa-seg__item:has(input:focus-visible){
outline: 2px solid #8bb1ac;
outline-offset: 2px;
}
/* fallback, если :has вдруг нет */
.anketa-seg__item.is-on{
background: rgba(139,177,172,.22);
border-color: rgba(139,177,172,.55);
}

.anketa-seg--soft .anketa-seg__item{
border-radius: 12px;
padding: 8px 12px;
}
.anketa-seg__hint{
display:block;
font-size: 11px;
opacity: .65;
margin-top: 2px;
white-space: nowrap;
}

.prof-row{
display: grid;
grid-template-columns: 1fr 1fr auto;
gap: 6px;
margin-bottom: 6px;
align-items: start;
}
@media (max-width: 640px){
.prof-row{ grid-template-columns: 1fr; }
}

textarea#anketa-bio, textarea#anketa-lz {
border-radius: 0 0 15px 15px;
min-height: 120px;
}
.anketa-editor{
width: 100%;
max-width: 100%;
margin: 10px 0 0;
display: flex;
flex-direction: column;
box-sizing: border-box;
}

.bio-tools,
.lz-tools{
width: 100%;
max-width: 100%;
margin: 0;
padding: 6px 10px;
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
box-sizing: border-box;
background: var(--input-bg);
border: var(--input-border);
border-bottom: none;
border-radius: 15px 15px 0 0;
}
.bio-tools button,
.lz-tools button{
padding: 2px 6px;
cursor: pointer;
background: transparent;
font-size: 16px;
color: rgb(from var(--controls-contrast) r g b / 80%);
border: none;
line-height: 1;
flex: 0 0 auto;
}
.anketa-editor textarea#anketa-bio,
.anketa-editor textarea#anketa-lz,
textarea#anketa-bio,
textarea#anketa-lz{
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
min-height: 120px;
resize: vertical;
box-sizing: border-box;
background: var(--input-bg);
border: var(--input-border);
border-radius: 0 0 15px 15px;
}
.bio-dropdown,
.pp-dd{
position: relative;
display: inline-block;
flex: 0 0 auto;
}
.bio-dropdown-panel,
.pp-dd-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;
max-height: 220px;
overflow: auto;
box-sizing: border-box;
}
.bio-dropdown-panel button,
.pp-dd-panel button{
display: block;
width: 100%;
text-align: left;
padding: 4px 6px;
}
.pp-dd.open .pp-dd-panel{ display: block; }

div#anketa-plashka-root { text-align: center; }
#anketa-plashka-root .plashka { width: 100%; }

.pp-plashka {
margin: 10px 0;
display: grid;
grid-template-columns: repeat(3, minmax(0,1fr));
gap: 10px;
}
.pp-plashka-item {
display: block;
border-radius: 10px;
padding: 5px;
cursor: pointer;
}
@media (max-width: 540px){
.pp-plashka { grid-template-columns: 1fr; }
}

/* превью профиля слева */
.anketa-preview-col .post-author { display:block !important; }
.anketa-preview-col .pa-author #tuser { display:none; }
#anketa-profile-preview a { pointer-events: none; cursor: default; }
.anketa-preview-col .post-author ul { padding: 0; }
.anketa-card-preview { margin: 18px auto 0; max-width: 700px; }
.anketa-sys { display:none !important; }
.anketa-create-wrap .pp-ams-profile-edit-btn { display: none;}

/* чуть плотнее на узких «десктопных» ширинах телефона */
@media (max-width: 980px) and (min-width: 821px){
.anketa-create-wrap{
grid-template-columns: minmax(180px, 220px) minmax(0, 1fr);
gap: 14px 16px;
}
}
</style>

<center>
<div class="tem"><tem1>шаблон анкеты</tem1>
<b>◂</b> Анкета создается в данном подфоруме отдельной темой автоматически, просто заполнив поля ниже;<br>
<b>◂</b> В случае, если вам понадобится какая-либо помощь в заполнении анкеты или её оформлении, можете смело обращаться к любому члену АМС в личные сообщения.<br>
<b>◂</b> У нас Чикаго, поэтому написание имени и фамилии принимается только на европейский лад и вначале идет имя, потом фамилия<br>
<b>◂</b> Анкету заполняете на свое усмотрение: полностью избегая заполнения био (упрощенный вариант), заполняя био текстом, либо в формате нескольких фактов о вашем персонаже.<br>
<b>◂</b> Запрещено добавлять в поле био картинки, тексты песен, и прочий бред, который не относится к анкете. Творчество свободно, но ограничено здравым смыслом.<br>
<b>◂</b> Пол, фото личной страницы, личное звание и плашка обязательны — они нужны для автоматического оформления при принятии. В карточке анкеты этого не видно.<br>
Желаем вдохновения!<br>
</div>
</center>
<br><br>
<div class="anketa-create-wrap">

<div class="anketa-preview-col">
<div class="post-author online topic-starter" id="anketa-profile-preview">
<ul>
<li class="pa-fld5">
<a id="ap-icon-link"><img id="ap-icon" src="https://i.imgur.com/pk83blX.png"></a>
</li>
<li class="pa-author">
<a href="#" class="online" id="ap-username">Username</a>
</li>
<li class="pa-title" id="ap-title">мемчанин</li>
<li class="pa-avatar item2">
<img id="ap-avatar" src="https://i.imgur.com/gRrvciX.png" alt="avatar">
</li>
<li class="pa-fld1">
<div class="lz"><a href="#" id="ap-anketa-line">ИМЯ ФАМИЛИЯ, 99</a></div><br>
<span id="ap-lz-text">текст личного звания</span>
</li>
<li class="pa-posts" title="Сообщения">
<span class="fld-name"><img src="https://forumstatic.ru/files/001b/ef/4a/29130.png">:<br></span>
<span>000</span>
</li>
<li class="pa-respect" title="Репутация">
<span class="fld-name">Репутация:</span> <span>+0</span>
</li>
<li class="pa-fld3" title="Посты">
<span class="fld-name"><img src="https://forumstatic.ru/files/001b/ef/4a/90665.png">:<br></span>
<span>000</span>
</li>
<li class="pa-fld2" title="Звезды">
<span class="fld-name"><img src="https://forumstatic.ru/files/001b/ef/4a/75212.png">:<br></span>
<span>000</span>
</li>
<li class="pa-fld4">
<span class="fld-name">Плашка:</span>
<a href="#">
<div class="plashka" id="ap-plashka" style="--bg:#bcb2af !important;">
пишу свою историю
<pltwo id="ap-plashka-line2">на улицах чикаго</pltwo>
</div>
</a>
</li>
</ul>
</div>
</div>

<div class="anketa-form-col">
<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-seg" role="radiogroup" aria-label="Пол внешности">
<label class="anketa-seg__item">
<input type="radio" name="anketa-gender" value="M" />
<span>мужская внешность</span>
</label>
<label class="anketa-seg__item">
<input type="radio" name="anketa-gender" value="F" />
<span>женская внешность</span>
</label>
</div>
<div id="error-anketa-gender" class="error-message">Выберите пол внешности</div>

<div class="anketa-seg anketa-seg--soft" aria-label="Клеймы">
<label class="anketa-seg__item">
<input type="checkbox" id="anketa-claim-name" />
<span>занять имя</span>
</label>
<label class="anketa-seg__item">
<input type="checkbox" id="anketa-claim-surname" />
<span>занять фамилию</span>
</label>
<label class="anketa-seg__item">
<input type="checkbox" id="anketa-doppel" />
<span>возможен дубль (+)</span>
</label>
</div>

<div class="anketa-row cols-2">
<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>

<div id="anketa-prof-list"></div>
<div class="anketa-inline">
<a href="javascript:void(0)" class="memory_button" id="anketa-prof-add">+ профессия</a>
</div>
<div id="error-anketa-profession" class="error-message">Добавьте хотя бы одну профессию</div>

<div class="anketa-row cols-2">
<div>
<input id="anketa-photo" placeholder="Ссылка на фото анкеты (jpg/png/gif/webp)" type="text" />
<div id="error-anketa-photo" class="error-message">Корректная ссылка на фото анкеты</div>
</div>
<div>
<input id="anketa-ls-photo" placeholder="Ссылка на фото личной страницы" type="text" />
<div id="error-anketa-ls-photo" class="error-message">Корректная ссылка на фото ЛС</div>
</div>
</div>

<div class="anketa-row cols-1">
<textarea id="anketa-quote" placeholder="Цитата или песня о персонаже"></textarea>
<div id="error-anketa-quote" class="error-message">Введите цитату или песню</div>
</div>

<div class="anketa-editor">
<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" 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" 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" 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" 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" 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="anketa-editor">
<div class="lz-tools" id="lz-tools" data-target="anketa-lz">
<button type="button" data-wrap="b" title="жирный"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" 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" 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" 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" 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" 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>

<textarea id="anketa-lz" placeholder="Текст ЛЗ. Нельзя span/p/div и color/style"></textarea>
<div id="error-anketa-lz" class="error-message">Заполните личное звание</div>
</div>

<div class="pp-plashka" id="anketa-plashka-root"></div>
<div id="error-anketa-plashka" class="error-message">Выберите плашку</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>
</div>

<div class="anketa-card-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="https://via.placeholder.com/140x140"></anketa8>
<anketa10>"<span id="preview-quote">Цитата или песня</span>"</anketa10>
<anketa9><div id="preview-bio">Текст биографии появится здесь</div></anketa9>
</div>
</div>

[/html]
[hideprofile]

+14