[html]<div class="guide-wrapper rules-mybb-fix">

  <div class="main-box">
    <div class="inner-box">

      <div class="header-box">
        ВНИМАНИЕ!
      </div>

      <div class="guide-block">сгенерированный код нужно вставить в следующем сообщении после анкеты в теме анкеты вашего персонажа.</div>
       </div>

    </div>
  </div>
</div>

<style>
@font-face {
  font-family: 'Cinzel';
  src: url('https://raw.githubusercontent.com/tukiteruamano-a11y/anketa/main/cinzel_regular.ttf') format('truetype');
}

/* FIX MYBB */
.rules-mybb-fix, .rules-mybb-fix * { overflow: visible; box-sizing: border-box; }

/* Основной блок */
.main-box {
  width: 600px;
  margin: 2px auto;
  background: url("https://i.ibb.co/0xP0jH4/6bbf97e48d3c1d7905e6169de8564e74.jpg") repeat;
  border-radius: 20px;
  padding: 5px;
  font-family: 'Cinzel', serif;
}

.main-box a {
  font-family: inherit !important;
}

/* Второй уровень */
.inner-box {
  background: #c7c7c7;
  border-radius: 16px;
  padding: 5px;
}

/* Верхний прямоугольник */
.header-box {
  background: url("https://i.ibb.co/0xP0jH4/6bbf97e48d3c1d7905e6169de8564e74.jpg") repeat;
  border-radius: 12px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  color: #c7c7c7;
}

/* GUIDE BLOCKS */
.guide-block {
position: relative;
padding: 10px;
margin: 10px 5px 5px 5px;
border-radius: 16px;
border: 1px solid #a9a9a9;
font-size: 14px;
text-indent: 25px;
text-align: justify;
}

a {
color: #744D37 !important;
}
a:hover {
color: #AF6F51 !important;
}
</style>
[/html]

[html]<style>
@font-face { font-family:'Cinzel'; src:url('https://raw.githubusercontent.com/tukiteruamano-a11y/anketa/main/cinzel_regular.ttf'); }
.gen-wrapper { width:600px; margin:2px auto; padding:5px; }
.gen-bg { padding:5px; background:url(https://i.ibb.co/0xP0jH4/6bbf97e48d3c1d … 564e74.jpg) repeat; border-radius:15px; }
.gen-inner { background:#c7c7c7; padding:20px; border-radius:10px; font-family:'Cinzel', serif; }
.gen-title { text-align:center; font-size:18px; margin-bottom:20px; }
.gen-inner label{display:block;margin-top:10px;font-weight:bold;font-size:14px;}
.gen-inner input,.gen-inner textarea{width:100%;padding:8px;margin-top:5px;border-radius:10px;border:1px solid #a9a9a9;font-family:'Cinzel', serif;font-size:14px;box-sizing:border-box;background:#eee;resize: none;}
.gen-inner button{margin-top:15px;width:100%;padding:10px;border:none;border-radius:10px;font-family:'Cinzel', serif;cursor:pointer;
color:#fff;text-shadow:1px 1px 2px #000;background:url(https://i.ibb.co/0xP0jH4/6bbf97e48d3c1d … 564e74.jpg) repeat;}
#output, #rank{margin-top:15px;height:120px;background:#eee;font-family:'Cinzel';resize: none;}
#copyMessage{color:green;font-weight:bold;display:none;text-align:center;margin-top:5px;}

/* Стили для кнопок заражения */
.switch-wrapper { display:flex; gap:10px; margin-top:5px; user-select:none; }
.switch-wrapper .switch-btn {
  flex:1; text-align:center; padding:10px; border-radius:10px; cursor:pointer;
  transition: all 0.2s ease; background: #ddd; color: #444;
  user-select:none; /* отключаем выделение текста */
}
.switch-wrapper .switch-btn.active {
  background: url('https://i.ibb.co/0xP0jH4/6bbf97e48d3c1d7905e6169de8564e74.jpg') repeat; /* фон при активной кнопке */
  color:#fff;
}
</style>

<div class="gen-wrapper">
  <div class="gen-bg">
    <div class="gen-inner">

      <div class="gen-title"><strong>Генератор кодов</strong></div>

      <label>Ссылка на профиль</label>
      <input id="profile">

      <label>Ссылка на анкету</label>
      <input id="sheet">

      <label>Имя персонажа на русском, возраст</label>
      <input id="rus">

      <label>Имя персонажа на английском</label>
      <input id="eng">

      <label>Имя внешности на английском</label>
      <input id="face">

      <label>Занятость</label>
      <input id="job">

      <label>Фракция<br><span style='font-size:10px;'>если нет — оставить пустым</span></label>
      <input id="faction">

      <label>Заражение</label>
      <div class="switch-wrapper">
        <div class="switch-btn" data-value="yes">ДА</div>
        <div class="switch-btn" data-value="no">НЕТ</div>
      </div>

      <label>Текст личного звания<br><span style='font-size:10px;'>чтобы накинуть на слово/фразу ссылку, сделайте так: текст [слово/фраза](ссылка)</span></label>
      <textarea id="rank"></textarea>

      <label>Занять имя и фамилию<br><span style='font-size:10px;'>на английском языке, через пробел. Допускается только такой порядок: ИМЯ пробел ФАМИЛИЯ</span></label>
      <input id="name" placeholder="Имя Фамилия">

      <button onclick="generate()">Сгенерировать код</button>

      <textarea id="output" readonly></textarea>

      <button onclick="copyAll()">Скопировать код</button>

      <div id="copyMessage">КОД УСПЕШНО СКОПИРОВАН</div>

    </div>
  </div>
</div>

<script>
// Логика переключателя заражения
const switchBtns = document.querySelectorAll('.switch-wrapper .switch-btn');
let infectionValue = null;

switchBtns.forEach(btn=>{
  btn.addEventListener('click', ()=>{
    switchBtns.forEach(b=>b.classList.remove('active'));
    btn.classList.add('active');
    infectionValue = btn.dataset.value;
  });
});

function generate(){
  let profile=document.getElementById("profile").value.trim();
  let sheet=document.getElementById("sheet").value.trim();
  let rus=document.getElementById("rus").value.trim();
  let eng=document.getElementById("eng").value.trim();
  let face=document.getElementById("face").value.trim();
  let job=document.getElementById("job").value.trim();
  let faction=document.getElementById("faction").value.trim();
  let rank=document.getElementById("rank").value.trim();
  let name=document.getElementById("name").value.trim();

  rank = rank.replace(/\[([^\]]+)\]\(([^)]+)\)/g,"<a href='$2'>$1</a>");

  let appearance=`<div class="name-item"><strong><em>${face}</em></strong><br><a href="${profile}">${eng}</a></div><div class="gradient-line"></div>`;
  let work=`<hr> <strong>${job}</strong><em><a href="${profile}">${eng}</a></em>`;
  let factionCode = faction ? `<hr> <strong>${faction}</strong><em><a href="${profile}">${eng}</a></em>` : '';
  let infectionCode = infectionValue === "yes" ? `<hr><em><a href="${profile}">${eng}</a></em>` : '';
  let rankCode=`<div class="lz"><a href="${sheet}">${rus}</a></div><div class="lznam">${rank}</div>`;

  let nameParts=name.split(/\s+/);
  let first=nameParts[0] || '';
  let last=nameParts[1] || '';
  let nameCode=`<div class="name-item">${first}</div><div class="gradient-line"></div>`;
  let surnameCode=`<div class="name-item">${last}</div><div class="gradient-line"></div>`;

  let blocks=[{title:'ВНЕШНОСТЬ',code:appearance},{title:'ЗАНЯТОСТЬ',code:work}];
  if(factionCode) blocks.push({title:'ФРАКЦИЯ',code:factionCode});
  if(infectionCode) blocks.push({title:'ЗАРАЖЕНИЕ',code:infectionCode});
  blocks.push({title:'ЛИЧНОЕ ЗВАНИЕ',code:rankCode},{title:'ИМЯ',code:nameCode},{title:'ФАМИЛИЯ',code:surnameCode});

  let result=`<style>
@font-face { font-family:'Cinzel'; src:url('https://raw.githubusercontent.com/tukiteruamano-a11y/anketa/main/cinzel_regular.ttf'); }
.gen2-wrapper{width:600px;margin:auto;padding:5px;}
.gen2-bg{padding:5px;background:url(https://i.ibb.co/0xP0jH4/6bbf97e48d3c1d … 564e74.jpg) repeat;border-radius:15px;}
.gen2-inner{background:#c7c7c7;padding:10px;border-radius:15px;font-family:'Cinzel',serif;}
.block{margin-bottom:15px;}
.block-title{font-weight:bold;margin-bottom:5px;}
.block textarea{width:100%;height:90px;padding:8px;margin-top:5px;border-radius:10px;border:1px solid #a9a9a9;font-size:14px;box-sizing:border-box;background:#eee;resize: none;font-family:monospace;}
.block button{margin-top:5px;padding:8px;width:100%;border:none;border-radius:10px;font-family:'Cinzel',serif;cursor:pointer;color:#fff;text-shadow:1px 1px 2px #000;background:url(https://i.ibb.co/0xP0jH4/6bbf97e48d3c1d … 564e74.jpg) repeat;}
.copy-msg{color:green;font-weight:bold;display:none;margin:5px 0; text-align:center;}
.gen-wrapper2::-webkit-scrollbar{width:4px;}
.gen-wrapper2::-webkit-scrollbar-track{background:transparent;}
.gen-wrapper2::-webkit-scrollbar-thumb{background:#744D37;border-radius:10px;}
.gen-wrapper2{scrollbar-width:thin;scrollbar-color:#744D37 transparent;}
</style>
<div class="gen2-wrapper"><div class="gen2-bg"><div class="gen2-inner">
  ${blocks.map(b=>`
  <div class="block">
  <div class="block-title">${b.title}</div>
  <textarea readonly>${b.code}</textarea>
  <div class="copy-msg">Код успешно скопирован</div>
  <button onclick="copyBlock(this)">Скопировать</button>
  </div>`).join('')}
  </div></div></div>

  <script>
  function copyBlock(btn){
    let textarea=btn.previousElementSibling.previousElementSibling;
    textarea.select();
    document.execCommand('copy');
    let msg=btn.previousElementSibling;
    msg.style.display='block';
    setTimeout(()=>{msg.style.display='none'},2000);
  }
  <` + `/script>`;

  document.getElementById("output").value=`[html]\n${result}\n[` + `/html]`;
  document.getElementById("copyMessage").style.display="none";
}

function copyAll(){
  let t=document.getElementById("output");
  t.select();
  document.execCommand("copy");
  let m=document.getElementById("copyMessage");
  m.style.display="block";
  setTimeout(()=>m.style.display="none",3000);
}
</script>[/html]