[html]<style>
@font-face { font-family: 'Dwarven'; src: url('https://raw.githubusercontent.com/flamevector-rusff/fonts/main/DwarvenStonecraftCyrExtended.otf'); }
@font-face { font-family: 'Leotaro'; src: url('https://raw.githubusercontent.com/flamevector-rusff/fonts/main/Leotaro-Regular.otf'); }
.gen-wrapper { width:600px; margin:2px auto; padding:5px; text-transform: lowercase; font-family:'Leotaro';}
.gen-bg { padding:10px; background:url(https://img.freepik.com/premium-photo/s … -18279.jpg) repeat; filter: saturate(70%); border-radius:15px; }
.gen-inner { background:#d6d6d6; padding:20px; border-radius:5px; font-family:'Leotaro';}
.gen-title { text-align:center; font-size:35px; color:#000; margin-bottom:20px; font-family:'Dwarven' !important;}
.gen-inner label { font-size:18px; display:block; font-weight:normal; margin-top:10px; color:#333; font-family:'Leotaro' !important;}
.gen-inner input, .gen-inner textarea { width:100%; padding:8px; border-radius:10px; border:1px solid #a9a9a9; margin-top:5px; font-family:'Leotaro'; font-size:14px; box-sizing:border-box; background:#eee; resize:none; color:#000; }
.gen-inner button { margin-top:15px; padding:10px; width:100%; border:none; border-radius:10px; font-size:25px; cursor:pointer; font-family:'Dwarven' !important; color:#d6d6d6; text-shadow: 1px 1px 2px #000; background:url(https://img.freepik.com/premium-photo/s … -18279.jpg) repeat; filter: saturate(70%); background-size:cover; transition: opacity 0.3s; }
.gen-inner button:hover { opacity:0.8; }
#output { margin-top:15px; font-family:monospace; padding:10px; border-radius:10px; border:1px solid #a9a9a9; resize:none; background:#eee; width:100%; overflow:auto; }
#copyMessage { color: green; font-weight: bold; margin-top:5px; display:none; text-align:center; }
.gen-wrapper::-webkit-scrollbar{width:4px;}
.gen-wrapper::-webkit-scrollbar-track{background:transparent;}
.gen-wrapper::-webkit-scrollbar-thumb{background:#744D37;border-radius:10px;}
.gen-wrapper{scrollbar-width:thin;scrollbar-color:#744D37 transparent;}
input { height: 30px !important;}
</style>
<div class="gen-wrapper">
<div class="gen-bg">
<div class="gen-inner">
<div class="gen-title">АНКЕТИРОВАНИЕ</div>
<p style='text-align:center; font-size:14px;'>Всё максимально просто: вы зполняете форму, генерируете код, копируете и вставляяете - вуаля, аннкета готова!</p>
<p style='text-align:center; font-size:14px;'>Следующим сообщением сразу <strong>до принятия</strong> заполняете коды.</p>
<p style='text-align:center; color:maroon; font-size:14px;'>Пример: <strong><em>theodor killman, vampire, 148</em></strong></p>
</div>
</div>
</div>
<div class="gen-wrapper">
<div class="gen-bg">
<div class="gen-inner">
<div class="gen-title">Генератор анкет</div>
<label>Имя Фамилия, возраст:</label>
<input type="text" id="fullName">
<label>Фото 1 URL:</label>
<input type="text" id="photo1">
<label>Фото 2 URL:</label>
<input type="text" id="photo2">
<label>Прототип внешности:</label>
<input type="text" id="appearance">
<label>Раса: <br><span style='font-size:12px;'>для магов с указанием специализации</span></label>
<input type="text" id="race">
<label>Род занятий:</label>
<input type="text" id="occupation">
<label>Артефакты: <br><span style='font-size:12px;'>название - описание (ENTER = новый артефакт)</span></label>
<textarea id="artifacts" rows="3"></textarea>
<label>Лояльность:</label>
<input type="text" id="loyalty">
<label>Биография: <br><span style='font-size:12px;'>ENTER = новый абзац</span></label>
<textarea id="bio" rows="5"></textarea>
<label>Пример поста: <br><span style='font-size:12px;'>ENTER = новый абзац</span></label>
<textarea id="post" rows="4"></textarea>
<label>Связь с вами:</label>
<input type="text" id="contact">
<button onclick="generateCode()">Сгенерировать код</button>
<button onclick="copyCode()">Скопировать код</button>
<div id="copyMessage">Код успешно скопирован!</div>
<div style='font-size:14px; margin:10px 0 0 0;'>Сгенерированный код:</div>
<textarea id="output" rows="15"></textarea>
</div>
</div>
</div>
<script>
function generateCode() {
const name = document.getElementById('fullName').value.trim();
const photo1 = document.getElementById('photo1').value.trim();
const photo2 = document.getElementById('photo2').value.trim();
const appearance = document.getElementById('appearance').value.trim();
const race = document.getElementById('race').value.trim();
const occupation = document.getElementById('occupation').value.trim();
const artifacts = document.getElementById('artifacts').value.trim().split('\n').map(p => `<p>${p}</p>`).join('\n');
const loyalty = document.getElementById('loyalty').value.trim();
const bio = document.getElementById('bio').value.trim().split('\n').map(p => `<p>${p}</p>`).join('\n');
const post = document.getElementById('post').value.trim().split('\n').map(p => `<p>${p}</p>`).join('\n');
const contact = document.getElementById('contact').value.trim();
// Сгенерированный код НЕ трогаем, вставляем полностью
const template = `[hideprofile][html]
<div class="wrapper">
<div class="anketa-bg">
<div class="anketa-inner">
<div class="top-title">
<div class="top-name-kapsula">${name}</div>
</div>
<div class="images">
<img src="${photo1}">
<img src="${photo2}">
</div>
<div class="title-wrap"><div class="title-text"><span>ВНЕШНОСТЬ</span></div></div>
<div class="text-box">${appearance}</div>
<div class="title-wrap"><div class="title-text"><span>РАСА</span></div></div>
<div class="text-box">${race}</div>
<div class="title-wrap"><div class="title-text"><span>РОД ЗАНЯТИЙ</span></div></div>
<div class="text-box">${occupation}</div>
<div class="title-wrap"><div class="title-text"><span>АРТЕФАКТЫ</span></div></div>
<div class="text-box">${artifacts}</div>
<div class="title-wrap"><div class="title-text"><span>ЛОЯЛЬНОСТЬ</span></div></div>
<div class="text-box">${loyalty}</div>
<div class="razdel"></div>
<div class="title-wrap"><div class="title-text"><span>БИОГРАФИЯ</span></div></div>
<div class="bio-box">${bio}</div>
<div class="title-wrap"><div class="title-text"><span>ПРИМЕР ПОСТА</span></div></div>
<details class="spoiler"><summary>Открыть пост</summary><div class="post-text">${post}</div></details>
<div class="title-wrap"><div class="title-text"><span>СВЯЗЬ С ВАМИ</span></div></div>
<div class="contact">${contact}</div>
</div>
</div>
</div>
<style>
@font-face { font-family: 'Dwarven'; src: url('https://raw.githubusercontent.com/flamevector-rusff/fonts/main/DwarvenStonecraftCyrExtended.otf'); }
@font-face { font-family: 'Leotaro'; src: url('https://raw.githubusercontent.com/flamevector-rusff/fonts/main/Leotaro-Regular.otf'); }
.wrapper { width:850px; margin:auto; font-family:'Leotaro' !important; text-transform: lowercase; }
.anketa-bg { padding:10px; background: url(https://img.freepik.com/premium-photo/s … -18279.jpg) repeat; filter: saturate(70%); border-radius:20px; }
.anketa-inner { background: #d6d6d6; padding:15px; border-radius:15px; }
.top-title { position:relative; border-radius:12px; height:40px; margin:15px 0 8px; background: url(https://img.freepik.com/premium-photo/s … -18279.jpg) repeat; filter: saturate(70%); text-align:center; }
.top-name-kapsula { position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); background: #d6d6d6; padding:0 10px; height:40px; line-height:40px; font-size:30px; color:#000; border-radius:6px; font-family:'Dwarven' !important; }
.images { text-align:center; margin-bottom:25px; }
.images img { width:230px; height:230px; object-fit:cover; border-radius:15px; margin:0 10px; filter: sepia(1) hue-rotate(90deg) brightness(0.95) contrast(1.2) saturate(0.4); }
.title-wrap { position:relative; border-radius:12px; height:32px; margin:30px 0 8px; background: url(https://img.freepik.com/premium-photo/s … -18279.jpg) repeat; filter: saturate(70%); text-align:center; font-family:'Dwarven' !important; }
.title-text { position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); background: #d6d6d6; padding:0 10px; font-size:25px; color:#000; border-radius:6px; height:32px; }
.text-box { border:1px solid #8f8f8f; border-radius:10px; padding:10px; text-align:center; font-size:16px; }
.razdel { height:6px; margin:30px 0; border-radius:10px; background: url(https://img.freepik.com/premium-photo/s … -18279.jpg) repeat; filter: saturate(70%); }
.bio-box { border:1px solid #8f8f8f; border-radius:10px; padding:15px; text-align:justify; font-size:16px; }
.bio-box p { margin:0 0 10px; text-indent:25px; }
.spoiler summary { padding:6px; border-radius:10px; cursor:pointer; color:#ebebeb; text-align:center; font-size:12px; background: url(https://img.freepik.com/premium-photo/s … -18279.jpg) repeat; filter: saturate(70%); }
.post-text { margin-top:8px; border:1px solid #8f8f8f; border-radius:10px; padding:10px; text-align:justify; text-indent:25px; font-size:16px; }
.contact { border:1px solid #8f8f8f; border-radius:10px; padding:8px; text-align:center; font-size:16px; }
.title-text span { position:relative; top:6px; }
</style>
[` + `/html]`;
document.getElementById('output').value = template;
document.getElementById('copyMessage').style.display = 'none';
}
function copyCode() {
const output = document.getElementById('output');
output.select();
output.setSelectionRange(0, output.value.length);
try { document.execCommand('copy'); showMessage(); }
catch { navigator.clipboard.writeText(output.value).then(showMessage).catch(()=>alert('Не удалось скопировать код.')); }
function showMessage() { const msg = document.getElementById('copyMessage'); msg.style.display='block'; setTimeout(()=>msg.style.display='none',3000);}
}
</script>[/html]
Доп. информация по кодам
<b></b> — жирный шрифт;
<i></i> — курсив;
<u></u> — подчёркнутый шрифт;
<center></center> — отцентровка текста;
<br> — для переноса строки, т.к. enter не работает в html кодах;
<a href="ccылка"><b>текст</b></a> — для активных ссылок в лз (код <b></b> не убирать, чтобы работало выделение ссылок в профилях)
I just died
