!! ВНИМАНИЕ, удалите из полученног кода звездочки в [*html]....[/html*]
[html]
<style>
body{
font-family:"Courier New", monospace;
background:#f4f4f4;
margin:0;
font-size:11px;
}
.tabs{
display:flex;
gap:4px;
max-width:800px;
margin:12px auto 0;
}
.tab{
padding:6px 12px;
background:#cfcfcf;
border-radius:12px 12px 0 0;
cursor:pointer;
font-size:11px;
}
.tab.active{
background:#f9f9f9;
font-weight:bold;
}
.tab-content{
display:none;
background:#f9f9f9;
border-radius:0 12px 12px 12px;
padding:12px;
}
.tab-content.active{
display:block;
}
form{
width:100%;
}
/* строка с полями */
.row{
display:flex;
gap:4px;
align-items:center;
margin-top:4px;
}
.row label{
width:60px;
font-size:10px;
font-weight:bold;
}
.row input{
padding:4px;
font-size:10px;
border:1px solid #ccc;
border-radius:3px;
flex:1;
}
/* фиксированные textarea */
.fullwidth{
display:block; /* важно для ширины */
width:100% !important; /* принудительно */
max-width:100%; /* предотвращает сжатие */
padding:4px;
font-size:10px;
border:1px solid #ccc;
border-radius:3px;
resize:vertical;
box-sizing:border-box;
margin-top:4px;
}
/* заголовки секций */
.section-title{
margin-top:8px;
font-weight:bold;
font-size:11px;
}
/* кнопка строго снизу */
button{
margin-top:15px !important;
padding:4px 10px;
background:#535353;
color:white;
border:none;
border-radius:3px;
cursor:pointer;
display:block;
font-size:11px;
}
button.copied{
background:green;
}
</style>
<div class="tabs">
<div class="tab active" onclick="switchTab(0)">персонаж</div>
<div class="tab" onclick="switchTab(1)">оформление профиля</div>
<div class="tab" onclick="switchTab(2)">личная страница</div>
</div>
<!-- ПЕРСОНАЖ -->
<div class="tab-content active">
<form onsubmit="copyCharacter(); return false;">
<div class="row">
<label>имя</label>
<input id="name_ru" placeholder="рус" required>
<span>//</span>
<input id="name_en" placeholder="eng" required>
</div>
<div class="row">
<label>фандом</label>
<input id="fandom" placeholder="фандом" required>
</div>
<div class="row">
<label>изображение</label>
<input id="img" placeholder="https://..." required>
</div>
<div class="row">
<label>акция</label>
<input id="action" placeholder="https://...">
</div>
<div class="section-title">описание персонажа</div>
<textarea id="desc" class="fullwidth" rows="4" placeholder="описание" required></textarea>
<div class="section-title">пример поста</div>
<textarea id="post" class="fullwidth" rows="4" placeholder="пример поста" required></textarea>
<button type="submit" id="copy-char" data-default="скопировать">скопировать</button>
</form>
</div>
<!-- ПРОФИЛЬ -->
<div class="tab-content">
<form onsubmit="copyProfile(); return false;">
<div class="row">
<label>анкета</label>
<input id="anketa_link" placeholder="ссылка на анкету" required>
</div>
<div class="row">
<label>профиль</label>
<input id="profile_link" placeholder="ссылка на профиль" required>
</div>
<button type="submit" id="copy-prof" data-default="скопировать">скопировать</button>
</form>
</div>
<!-- ЛИЧНАЯ СТРАНИЦА -->
<div class="tab-content">
<form onsubmit="copyPage(); return false;">
<div class="row">
<label>ник</label>
<input id="nick" placeholder="ник персонажа" required>
</div>
<div class="row">
<label>аватар</label>
<input id="avatar" placeholder="https://..." required>
</div>
<div class="row">
<label>эпиграф</label>
<input id="epigraph" placeholder="цитата" required>
</div>
<div class="section-title">хронология</div>
<textarea id="chrono" class="fullwidth" rows="4" placeholder="хронология персонажа" required></textarea>
<button type="submit" id="copy-page" data-default="скопировать">скопировать</button>
</form>
</div>
<script>
function switchTab(i){
document.querySelectorAll('.tab').forEach(t=>t.classList.remove('active'));
document.querySelectorAll('.tab-content').forEach(c=>c.classList.remove('active'));
document.querySelectorAll('.tab')[i].classList.add('active');
document.querySelectorAll('.tab-content')[i].classList.add('active');
}
/* BBCode + таблицы */
function parseText(text){
if(!text) return '';
let parsed=text.replace(/\r?\n/g,'<br>');
parsed=parsed
.replace(/\[b\](.*?)\[\/b\]/gis,'<b>$1</b>')
.replace(/\[i\](.*?)\[\/i\]/gis,'<i>$1</i>')
.replace(/\[u\](.*?)\[\/u\]/gis,'<u>$1</u>')
.replace(/\[s\](.*?)\[\/s\]/gis,'<s>$1</s>')
.replace(/\[url=(.*?)\](.*?)\[\/url\]/gis,'<a href="$1" target="_blank">$2</a>')
.replace(/\[img\](.*?)\[\/img\]/gis,'<img src="$1">')
.replace(/\[quote\](.*?)\[\/quote\]/gis,'<blockquote>$1</blockquote><p class="epp">')
.replace(/\[table([^\]]*)\]/gis,'<table$1>')
.replace(/\[\/table\]/gis,'</table><p class="epp">')
.replace(/\[tr\]/gis,'<tr>')
.replace(/\[\/tr\]/gis,'</tr>')
.replace(/\[td([^\]]*)\]/gis,'<td$1>')
.replace(/\[\/td\]/gis,'</td>');
return parsed;
}
function copyToClipboard(text, btnId){
const temp=document.createElement('textarea');
temp.value=text;
temp.setAttribute('readonly','');
temp.style.position='absolute';
temp.style.left='-9999px';
document.body.appendChild(temp);
temp.select();
document.execCommand('copy');
document.body.removeChild(temp);
const btn=document.getElementById(btnId);
btn.textContent='скопировано';
btn.classList.add('copied');
setTimeout(()=>{ btn.textContent=btn.getAttribute('data-default'); btn.classList.remove('copied'); },2000);
}
/* генерация кода первой вкладки */
function copyCharacter(){
const g=id=>document.getElementById(id).value||'';
const content=`<div class="chr0">
<div class="shpk1"><img src="${g('img')}" alt=""><ul><li>${g('name_en')} / ${g('name_ru')}</li><li>${g('fandom')}${g('action')?` · <a href="${g('action')}" target="_blank">акция</a>`:''}</li></ul></div>
<p class="epp">${parseText(g('desc'))}</p>
<details><summary>пример поста</summary><p>${parseText(g('post'))}</p></details>
</div>`;
copyToClipboard(`[*html]${content}[/html*]`,'copy-char');
}
/* профиль */
function copyProfile(){
const name_en=document.getElementById('name_en').value||'';
const name_ru=document.getElementById('name_ru').value||'';
const fandom=document.getElementById('fandom').value||'';
const profile=document.getElementById('profile_link').value||'#';
const anketa=document.getElementById('anketa_link').value||'#';
const content=`<a href="${profile}">${name_en} » ${name_ru}</a>\n<a href="${anketa}">${fandom}</a>`;
copyToClipboard(content,'copy-prof');
}
/* личная страница */
function copyPage(){
const g=id=>document.getElementById(id).value||'';
const content=`<div class='character'>
<div class="charTab">
<a class="charEdit" title="редактировать" href="/admin_pages.php?edit_page=ares#tinym" target="_blank">редактировать</a>
<div class="LeftBox">
<div class="charPic"><img src="${g('avatar')}"></div>
<div class="nickbox">${g('nick')}</div>
<div class="fandom">${document.getElementById('fandom').value||''}</div>
<div class="quo">${parseText(g('epigraph'))}</div>
<div class="chronobox"><div class="hd">хронология игры</div>
<div class="catalog">${parseText(g('chrono'))}</div></div>
</div>
<div class="RightBox">
<div class="ShapkiPlashki"><div class="hd">шапки и плашки</div><div class="catalog"><img src="https://upforme.ru/uploads/001c/14/5b/334/813771.png" class="igrokFon"><span><img src="https://upforme.ru/uploads/001c/14/5b/334/757528.png" class="plashka"></icnk><wrds style="color:#fff; size:12px;">born to be god of war<br>forced to be babygirl</wrds></span></div></div>
<div class="Achivments"><div class="hd">ачивки</div><div class="catalog"><div class="achivka"><ach><img src="https://upforme.ru/uploads/001c/14/5b/7/376129.png"></ach><span>ПОЧЕТНЫЙ КОТ<p>принёс анкету, молодец какой</p></span></div></div></div>
<div class="Gifts"><div class="hd">подарки</div><div class="catalog"><div class="podarok" title="запасная жизнь"><img src="https://upforme.ru/uploads/001c/14/5b/7/176856.png"></div></div></div>
</div></div>`;
copyToClipboard(content,'copy-page');
}
</script>
[/html]
