Для вашего удобства у нас есть формы автозаполнения, которые сами собирают коды для анкеты и личного звания. При желании можете воспользоваться ими.
[html]
<style>
.ca_wrapper {
max-width: 1400px;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
gap: 30px;
background: #f5f5f5;
padding: 28px;
backdrop-filter: blur(0px);
transition: all 0.2s;
}
.ca_form_panel {
flex: 1.5;
min-width: 280px;
background: #f5f5f5;
backdrop-filter: blur(2px);
padding: 22px 24px;
}
.ca_code_panel {
flex: 1;
min-width: 380px;
background: #e9eaea;
padding: 22px 24px;
border: 1px solid #a0b2af;
display: flex;
flex-direction: column;
}
.ca_heading {
font-size: 2rem;
font-weight: 800;
margin-top: 0;
margin-bottom: 28px;
padding-left: 6px;
color: #25252d;
letter-spacing: -0.3px;
}
.ca_subheading {
font-size: 1.5rem;
font-weight: 700;
margin-bottom: 20px;
color: #454561;
letter-spacing: -0.2px;
display: flex;
align-items: center;
gap: 10px;
}
.ca_subheading:before {
content: "✦";
font-size: 1.6rem;
color: #F5B17A;
}
.ca_field {
margin-bottom: 22px;
}
.ca_field label {
display: block;
font-weight: 600;
color: #25252d;
margin-bottom: 8px;
font-size: 0.9rem;
letter-spacing: 0.4px;
font-weight: 600;
}
.ca_field input,
.ca_field textarea {
width: 100%;
padding: 12px 16px;
border: 1.5px solid #a0b2af;
background: #f5f5f5;
font-family: inherit;
font-size: 0.95rem;
color: #25252d;
transition: 0.2s ease;
box-sizing: border-box;
outline: none;
font-weight: 500;
}
.ca_field input:focus,
.ca_field textarea:focus {
border-color: #9e483d;
}
.ca_field textarea {
resize: vertical;
min-height: 70px;
color: #263330;
}
::placeholder {
color: #6A958C;
opacity: 0.7;
font-weight: 400;
}
.ca_button_bar {
display: flex;
gap: 18px;
flex-wrap: wrap;
margin-top: 30px;
margin-bottom: 8px;
}
.ca_button {
background: #9e483d; /* основной акцент — персиковый коралл */
border: none;
padding: 10px 28px;
font-weight: 700;
color: #10211E;
cursor: pointer;
font-size: 0.95rem;
transition: all 0.2s;
letter-spacing: 0.3px;
}
.ca_button_outline {
background: #25252d;
color: #FBC89F;
box-shadow: none;
}
.ca_button_outline:hover {
background: #29675C;
color: #FFF0E0;
transform: translateY(-2px);
}
.ca_button:hover {
transform: translateY(-3px);
filter: brightness(1.05);
background: #dedfe0;
color: #051412;
}
.ca_copy_btn {
background: #3FAA88;
color: #FEF6E8;
}
.ca_copy_btn:hover {
background: #58C7A3;
transform: translateY(-2px);
}
.ca_code_pre {
background: #e9eaea;
padding: 20px;
overflow-x: auto;
font-size: 13px;
white-space: pre-wrap;
word-break: break-word;
max-height: 580px;
border: 1px solid #a0b2af;
color: #252b2b;
font-family: 'SF Mono', 'Fira Code', monospace;
line-height: 1.5;
flex: 1;
}
.ca_note {
font-size: 0.75rem;
color: #8CBDb2;
margin-top: 20px;
border-top: 1px solid #2D655B;
padding-top: 16px;
text-align: center;
font-style: italic;
}
.flex-badge {
display: inline-flex;
align-items: center;
gap: 5px;
}
.ca_code_panel .ca_button:active {
transform: scale(0.97);
}
@media (max-width: 780px) {
.ca_wrapper {
padding: 18px;
gap: 20px;
}
.ca_form_panel, .ca_code_panel {
padding: 18px;
}
.ca_heading {
font-size: 1.7rem;
}
}
.copy-toast {
position: fixed;
bottom: 30px;
left: 50%;
transform: translateX(-50%);
background: #1C4A43;
color: #FEE3C0;
padding: 12px 28px;
font-weight: bold;
font-size: 0.9rem;
z-index: 1000;
backdrop-filter: blur(12px);
border: 1px solid #a0b2af;
pointer-events: none;
animation: fadeUp 0.25s ease forwards;
}
@keyframes fadeUp {
from {
opacity: 0;
transform: translateX(-50%) translateY(20px);
}
to {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
}
</style>
</head>
<body>
<div class="ca_wrapper">
<div class="ca_form_panel">
<div class="ca_heading">Анкета персонажа</div>
<div id="ca_anketa_form">
<div class="ca_field">
<label>Имя и фамилия (лат):</label>
<input type="text" id="ca_latin_name" placeholder="например: John Doe">
</div>
<div class="ca_field">
<label>Внешность (лат):</label>
<input type="text" id="ca_face_latin" placeholder="например: имя выбранной внешности">
</div>
<div class="ca_field">
<label>Цитата:</label>
<input type="text" id="ca_quote" placeholder="короткая фраза или ссылка">
</div>
<div class="ca_field">
<label>Дата рождения:</label>
<input type="text" id="ca_birth_date" placeholder="день/месяц">
</div>
<div class="ca_field">
<label>Место рождения:</label>
<input type="text" id="ca_birth_place" placeholder="город, страна">
</div>
<div class="ca_field">
<label>Фракция:</label>
<input type="text" id="ca_faction" placeholder="фракция">
</div>
<div class="ca_field">
<label>Род занятий:</label>
<input type="text" id="ca_occupation" placeholder="род занятий">
</div>
<div class="ca_field">
<label>Важная информация:</label>
<textarea id="ca_important_info" rows="3" placeholder="связное описание или факты"></textarea>
</div>
<div class="ca_field">
<label>Что вы делали прошлым летом?</label>
<textarea id="ca_summer_spoiler" rows="2" placeholder="причина попадания в Равенхауг"></textarea>
</div>
<div class="ca_field">
<label>Дополнительная информация:</label>
<textarea id="ca_extra_info" rows="2" placeholder="любые доп. заметки"></textarea>
</div>
<div class="ca_field">
<label>Средство связи:</label>
<input type="text" id="ca_contact" placeholder="кроме лс">
</div>
<div class="ca_field">
<label>Пример пробного поста:</label>
<textarea id="ca_post_example" rows="2" placeholder="текст под спойлер"></textarea>
</div>
</div>
<div class="ca_button_bar">
<button id="ca_generateBtn" class="ca_button">✨ Сгенерировать BBCode</button>
<button id="ca_clearBtn" class="ca_button ca_button_outline">🧹 Очистить все поля</button>
</div>
</div>
<div class="ca_code_panel">
<div class="ca_subheading">BBCode для форума</div>
<button id="ca_copyCodeBtn" class="ca_button ca_copy_btn">📋 Скопировать код</button>
<pre id="ca_bbcodeOutput" class="ca_code_pre">// Заполните анкету и нажмите «Сгенерировать»</pre>
</div>
</div>
[/html]
![](https://imgur.com/JJYnRN4.png")
