ВАЖНО: Заполняете шаблон и генерируете код, затем создаете новую тему и полученный код помещаете в теги [хтмл].....[/хтмл]
[html]
<link href="https://fonts.googleapis.com/css2?family=Oswald:wght@400;600&display=swap" rel="stylesheet">
<style>
body {font-family: Tahoma, sans-serif; background:#f7f7f7; margin:20px;}
form.gen-form {
background:#d7d9c4; border:1px solid #ccc; padding:15px 20px; border-radius:8px; max-width:700px; margin:auto;
}
form.gen-form h2 {font-family:'Oswald'; font-size:18px; margin-bottom:10px; color:#333;}
form.gen-form label {display:block; margin-top:10px; font-weight:bold;}
form.gen-form input, form.gen-form textarea {
width:100%; padding:8px; border:1px solid #ccc; border-radius:6px; font-size:12px;
}
form.gen-form button {
margin-top:15px; padding:10px 20px; background:#7e8474; border:none; color:#fff;
border-radius:6px; cursor:pointer; font-family:'Oswald'; letter-spacing:0.05em;
}
#result {margin-top:30px;}
#result textarea {
width:100%; height:450px; padding:10px; font-size:11px; font-family:monospace;
border:1px solid #aaa; border-radius:6px;
}
</style>
<form class="gen-form" onsubmit="generateTemplate(); return false;">
<h2>🐾 Создание анкеты персонажа</h2>
<label>Имя персонажа:</label>
<input id="name" required>
<label>Цепь имён:</label>
<input id="names">
<label>Ссылка на аватар:</label>
<input id="avatar" placeholder="https://...">
<label>Возраст:</label>
<input id="age">
<label>Пол:</label>
<input id="gender">
<label>Племя:</label>
<input id="clan">
<label>Статус в племени:</label>
<input id="rank">
<label>Приверженность:</label>
<input id="faith">
<label>Личный статус:</label>
<input id="status">
<label>Характер:</label>
<textarea id="char" rows="3"></textarea>
<label>Внешность:</label>
<textarea id="look" rows="3"></textarea>
<label>Биография:</label>
<textarea id="bio" rows="3"></textarea>
<label>Как часто будете писать посты:</label>
<input id="freq">
<label>Контакты:</label>
<input id="contacts">
<label>Что делать при исчезновении:</label>
<input id="gone">
<label>Пробный пост:</label>
<textarea id="sample" rows="4"></textarea>
<button type="submit">Сгенерировать анкету</button>
</form>
<div id="result"></div>
<script>
function generateTemplate() {
const v = id => document.getElementById(id).value || '';
const html = `
<div class="chr0">
<div class="shpk1">
<img src="${v('avatar')}" decoding="async">
<ul>
<li>${v('name')}</li>
<li>Цепь имён: ${v('names')}</li>
</ul>
</div>
<p class="epp">
<zag>ОСНОВНАЯ ИНФОРМАЦИЯ</zag>
<em>
Возраст: ${v('age')}<br>
Пол: ${v('gender')}<br>
Племя: ${v('clan')}<br>
Статус в племени: ${v('rank')}<br>
Приверженность персонажа: ${v('faith')}<br>
Личный статус: ${v('status')}
</em>
</p>
<p class="epp"><zag>ХАРАКТЕР</zag>${v('char')}</p>
<p class="epp"><zag>ВНЕШНОСТЬ</zag>${v('look')}</p>
<p class="epp"><zag>БИОГРАФИЯ</zag>${v('bio')}</p>
<p class="epp">
<zag>ДОПОЛНИТЕЛЬНАЯ ИНФОРМАЦИЯ</zag>
<em>
Как часто Вы готовы писать игровые посты: ${v('freq')}<br>
Контакты: ${v('contacts')}<br>
Что делать с персонажем в случае Вашего исчезновения: ${v('gone')}
</em>
</p>
<details>
<summary>Пробный пост</summary>
<p>${v('sample')}</p>
</details>
</div>`;
document.getElementById('result').innerHTML = `
<h2>💾 Скопируйте готовую анкету ниже:</h2>
<textarea readonly>${html}</textarea>`;
}
</script>
[/html]
