[html]<div class="char-wrap" id="char-generator">
  <style>
    .char-wrap{display:flex;flex-direction:column;gap:20px;align-items:center;font-family:system-ui,Arial,sans-serif;color:#111ж}
    .char-card{flex:1;min-width:320px;max-width:460px;background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:14px}
    .char-form label{display:block;margin:8px 0 4px;font-size:13px;color:#444;text-transform:lowercase}
    .char-form input,.char-form textarea{width:90%;padding:8px 10px;border:1px solid #d1d5db;border-radius:8px;font-size:13px}
    .char-form textarea{min-height:60px;resize:vertical}
    .char-form .row{display:grid;grid-template-columns:1fr 1fr;gap:8px}
    .char-form small{font-size:11px;color:#888}
    .tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
    .tab{padding:6px 10px;border:1px solid #ccc;border-radius:8px;background:#f3f4f6;cursor:pointer}
    .tab.active{background:#111827;color:#fff}
    pre{white-space:pre-wrap;word-break:break-word;overflow-wrap:anywhere;background:#f9fafb;border:1px solid #e5e7eb;border-radius:10px;padding:10px;max-height:340px;overflow:auto}
    code{font-family:monospace;font-size:12.5px}
    .btn{margin-top:8px;padding:6px 10px;border:1px solid #ccc;background:#f3f4f6;border-radius:8px;cursor:pointer}
  </style>

  <!-- русские слова, которые нужны в шаблонах, храним в data-* -->
  <div id="char-i18n"
       data-age-word="лет"
       data-race-word="раса"
       data-affil-word="принадлежность"
       data-occup-word="деятельность"
       data-twins-title="твины"
       data-roles-header="я: законный маг / вольный маг / магическое существо/ не-маг"
  ></div>

  <!-- левая колонка -->
  <div class="char-card char-form">
    <h3 style="margin-top:0;font-size:16px;text-transform:lowercase;">генератор кода персонажа</h3>

    <div class="row">
      <div><label>имя (ru)</label><input id="charNameRu"></div>
      <div><label>имя (en)</label><input id="charNameEn"></div>
    </div>
    <div class="row">
      <div><label>лет</label><input id="charAge"></div>
      <div><label>внешность</label><input id="faceClaim"></div>
    </div>
    <label>ссылка на профиль</label><input id="profileURL">
    <label>ссылка на анкету</label><input id="sheetURL">
    <label>ссылка на блог <small>(лицокнига)</small></label><input id="blogURL">
    <div class="row">
      <div><label>фото <small>(для списка ролей)</small></label><input id="imgList"></div>
      <div><label>фото <small>(для лз, 180x80)</small></label><input id="imgLZ"></div>
    </div>
    <div class="row">
      <div><label>раса</label><input id="race"></div>
      <div><label>принадлежность</label><input id="affiliation"><small>законный маг / вольный маг / магическое существо/ не-маг</small></div>
    </div>
    <label>деятельность</label><input id="occupation">
    <label>описание <small>(для списка ролей)</small></label><textarea id="descShort"></textarea>
    <label>личное звание <small>(для лз)</small></label><textarea id="descProfile"></textarea>
   <hr>
    <small>опшнл:</small>
    <label>ссылка на профиль твинка</label><input id="twinURL">
    <label>имя твинка (en)</label><input id="twinName">
    <button class="btn" id="resetBtn">сбросить</button>
  </div>

  <!-- правая колонка -->
  <div class="char-card">
    <div class="tabs">
      <button class="tab active" data-key="appearance">внешность</button>
      <button class="tab" data-key="roles">список ролей</button>
      <button class="tab" data-key="lz">лз</button>
      <button class="tab" data-key="profile">личная страница</button>
    </div>
    <pre><code id="out"></code></pre>
    <button class="btn" id="copyBtn">копировать</button>
    <button class="btn" id="copyAllBtn">копировать всё</button>
  </div>
</div>

<!-- подключаем внешний js (ascii-only) -->
<script src="https://forumstatic.ru/files/001c/76/bb/39573.js"></script>
[/html]