[html]<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
<link href="https://fonts.googleapis.com/css2?family=Advent+Pro:wght@600;700&family=Jost:wght@400;500&display=swap" rel="stylesheet">

<div id="pgen">
<style>
#pgen{
  --bg:#16151c; --panel:#201f29; --line:#373543;
  --ink:#e5e3ec; --dim:#8b8899; --red:#8e2233; --redhi:#b32c40; --blue:#6462b5;
  display:block; padding:20px; border-radius:12px;
  background:var(--bg); color:var(--ink);
  font:400 13px/1.5 'Jost',sans-serif; text-align:left;
}
#pgen *{box-sizing:border-box}
#pgen h3{
  font:700 20px/1 'Advent Pro',sans-serif; text-transform:uppercase; letter-spacing:.08em;
  margin:0 0 18px; color:var(--ink);
}
#pgen h4{
  font:600 12px/1 'Advent Pro',sans-serif; text-transform:uppercase; letter-spacing:.1em;
  color:var(--dim); margin:0 0 10px;
}
#pgen .pg-cols{display:flex; gap:20px; align-items:flex-start}
#pgen .pg-form{flex:1 1 auto; min-width:0}
#pgen .pg-out{flex:0 0 340px; position:sticky; top:20px}
@media (max-width:880px){
  #pgen .pg-cols{display:block}
  #pgen .pg-out{width:auto; position:static; margin-top:16px}
}
#pgen .pg-sec{margin:0 0 20px}

#pgen label{display:block; font:400 10px/1.4 'Jost',sans-serif; text-transform:uppercase;
  letter-spacing:.07em; color:var(--dim); margin:0 0 4px}
#pgen input[type=text], #pgen input[type=number], #pgen textarea{
  width:100%; padding:8px 10px; margin:0;
  background:var(--panel); border:1px solid var(--line); border-radius:6px;
  color:var(--ink); font:400 13px 'Jost',sans-serif;
}
#pgen input:focus, #pgen textarea:focus{outline:none; border-color:var(--blue)}
#pgen textarea{resize:vertical; min-height:70px;
  font-family:ui-monospace,Menlo,Consolas,monospace; font-size:11.5px; line-height:1.45}

#pgen .pg-g2{display:grid; grid-template-columns:1fr 1fr; gap:10px}
#pgen .pg-g3{display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px}
#pgen .pg-f{margin:0 0 10px}

#pgen .pg-row{position:relative; padding:0 30px 0 0; margin:0 0 10px}
#pgen .pg-row.pg-main{padding-left:9px; border-left:2px solid var(--redhi)}
#pgen .pg-del{
  position:absolute; top:16px; right:0; width:22px; height:22px;
  border:none; border-radius:5px; background:transparent; color:var(--dim);
  cursor:pointer; font-size:11px; line-height:1; padding:0;
}
#pgen .pg-del:hover{background:var(--red); color:#fff}

#pgen button{font-family:'Jost',sans-serif}
#pgen .pg-add{
  padding:6px 12px; background:transparent; color:var(--dim);
  border:1px solid var(--line); border-radius:6px; cursor:pointer; font-size:11.5px;
}
#pgen .pg-add:hover{border-color:var(--blue); color:var(--ink)}

#pgen #pg-code{min-height:300px; background:#100f16; font-size:11px}
#pgen .pg-btns{display:flex; gap:8px; margin-top:9px}
#pgen .pg-btn{
  flex:1; padding:9px; border:none; border-radius:6px; cursor:pointer;
  font:600 11px 'Advent Pro',sans-serif; text-transform:uppercase; letter-spacing:.09em;
}
#pgen .pg-btn-p{background:var(--red); color:#fff}
#pgen .pg-btn-p:hover{background:var(--redhi)}
#pgen .pg-btn-s{background:transparent; color:var(--dim); border:1px solid var(--line)}
#pgen .pg-btn-s:hover{border-color:var(--blue); color:var(--ink)}

#pgen .pg-note{margin:8px 0 0; font-size:11.5px; color:#c9909c; display:none}
#pgen .pg-note.pg-show{display:block}

#pgen .pg-check{display:flex; align-items:center; gap:7px; font-size:12px;
  color:var(--dim); cursor:pointer; margin:0; text-transform:none; letter-spacing:0}
#pgen .pg-check input{width:14px; height:14px; accent-color:var(--redhi); margin:0}
</style>

<h3>Генератор личной страницы</h3>

<div class="pg-cols">
<div class="pg-form">

  <div class="pg-sec">
    <h4>Готовый код страницы</h4>
    <textarea id="pg-import" placeholder="вставь код существующей страницы, чтобы заполнить поля"></textarea>
    <div class="pg-btns"><button class="pg-btn pg-btn-s" id="pg-doimport">Разобрать</button></div>
  </div>

  <div class="pg-sec">
    <h4>Оформление</h4>
    <div class="pg-g2">
      <div class="pg-f"><label>Фон</label><input type="text" id="pg-bg"></div>
      <div class="pg-f"><label>Аватарка</label><input type="text" id="pg-ava"></div>
    </div>
    <div class="pg-g2">
      <div class="pg-f"><label>Милость</label><input type="number" id="pg-mercy" value="0"></div>
      <div class="pg-f"><label>Гнев</label><input type="number" id="pg-wrath" value="0"></div>
    </div>
  </div>

  <div class="pg-sec">
    <h4>Персонажи</h4>
    <div id="pg-chars"></div>
    <button class="pg-add" id="pg-addchar">+ персонаж</button>
  </div>

  <div class="pg-sec">
    <h4>Хронология</h4>
    <div id="pg-eps"></div>
    <button class="pg-add" id="pg-addep">+ эпизод</button>
  </div>

  <div class="pg-sec">
    <h4>Коллекция</h4>
    <div id="pg-coll"></div>
    <button class="pg-add" id="pg-addcoll">+ карточка</button>
  </div>

  <div class="pg-sec">
    <h4>Закладки</h4>
    <div id="pg-bm"></div>
    <button class="pg-add" id="pg-addbm">+ закладка</button>
  </div>

  <div class="pg-sec">
    <h4>Фоны</h4>
    <div id="pg-bgs"></div>
    <button class="pg-add" id="pg-addbg">+ фон</button>
  </div>

</div>

<div class="pg-out">
  <h4>Код</h4>
  <textarea id="pg-code" readonly></textarea>
  <div class="pg-btns">
    <button class="pg-btn pg-btn-p" id="pg-copy">Скопировать</button>
    <button class="pg-btn pg-btn-s" id="pg-reset">Очистить</button>
  </div>
  <p class="pg-note" id="pg-note"></p>
</div>

</div>
</div>

<script>
(function(){
  var root = document.getElementById('pgen');
  if(!root || root.dataset.ready) return;
  root.dataset.ready = '1';

  var DEF_BG = 'https://forumstatic.ru/files/001c/bd/d1/23353.png';

  var q = function(id){ return document.getElementById(id); };
  var v = function(id){ return q(id).value.trim(); };
  var all = function(s){ return Array.prototype.slice.call(root.querySelectorAll(s)); };
  function esc(s){
    return String(s==null?'':s).replace(/&/g,'&amp;').replace(/</g,'&lt;')
      .replace(/>/g,'&gt;').replace(/"/g,'&quot;');
  }
  function set(el,sel,val){ var i=el.querySelector(sel); if(i && val!=null) i.value=val; }

  function charRow(d,isMain){
    d = d || {};
    var el = document.createElement('div');
    el.className = 'pg-row pg-char' + (isMain ? ' pg-main' : '');
    var base =
      '<div class="pg-g3">'+
        '<div class="pg-f"><label>Имя</label><input type="text" class="c-name"></div>'+
        '<div class="pg-f"><label>Раса</label><input type="text" class="c-race"></div>'+
        '<div class="pg-f"><label>Профиль</label><input type="text" class="c-url"></div>'+
      '</div>';
    el.innerHTML = isMain ? base :
      '<button class="pg-del" title="Удалить">✕</button>' + base +
      '<div class="pg-g3">'+
        '<div class="pg-f"><label>Аватарка</label><input type="text" class="c-ava"></div>'+
        '<div class="pg-f"><label>Милость</label><input type="number" class="c-mercy" value="0"></div>'+
        '<div class="pg-f"><label>Гнев</label><input type="number" class="c-wrath" value="0"></div>'+
      '</div>';
    set(el,'.c-name',d.name); set(el,'.c-race',d.race); set(el,'.c-url',d.url);
    if(!isMain){ set(el,'.c-ava',d.ava); set(el,'.c-mercy',d.mercy||0); set(el,'.c-wrath',d.wrath||0); }
    return el;
  }

  function epRow(d){
    d = d || {};
    var el = document.createElement('div');
    el.className = 'pg-row pg-ep';
    el.innerHTML =
      '<button class="pg-del" title="Удалить">✕</button>'+
      '<div class="pg-g3">'+
        '<div class="pg-f"><label>Название</label><input type="text" class="e-title"></div>'+
        '<div class="pg-f"><label>Соигроки</label><input type="text" class="e-who"></div>'+
        '<div class="pg-f"><label>Ссылка</label><input type="text" class="e-url"></div>'+
      '</div>'+
      '<label class="pg-check"><input type="checkbox" class="e-closed"> завершён</label>';
    set(el,'.e-title',d.title); set(el,'.e-who',d.who); set(el,'.e-url',d.url);
    if(d.closed) el.querySelector('.e-closed').checked = true;
    return el;
  }

  function imgRow(src){
    var el = document.createElement('div');
    el.className = 'pg-row pg-img';
    el.innerHTML =
      '<button class="pg-del" title="Удалить">✕</button>'+
      '<div class="pg-f"><label>Картинка</label><input type="text" class="i-src"></div>';
    set(el,'.i-src',src);
    return el;
  }

  function build(){
    var chars = all('#pg-chars .pg-char').map(function(r,i){
      var g = function(s){ var e=r.querySelector(s); return e ? e.value.trim() : ''; };
      return { main:i===0, name:g('.c-name'), race:g('.c-race'), url:g('.c-url'),
               ava:g('.c-ava'), mercy:g('.c-mercy'), wrath:g('.c-wrath') };
    });

    var charsHtml = chars.map(function(c){
      var link = '  <a class="ch-go" href="'+esc(c.url)+'" title="в профиль"><i class="fa-solid fa-address-card"></i></a>\n'+
                 '  <b>'+esc(c.name)+'</b><i>'+esc(c.race)+'</i>';
      return c.main
        ? '<div class="ch-char main on">\n'+link+'\n</div>'
        : '<div class="ch-char"\n     data-ava="'+esc(c.ava)+'"\n'+
          '     data-mercy="'+esc(c.mercy)+'" data-wrath="'+esc(c.wrath)+'">\n'+link+'\n</div>';
    }).join('\n\n');

    var eps = all('#pg-eps .pg-ep').map(function(r){
      var g = function(s){ return r.querySelector(s).value.trim(); };
      var x = r.querySelector('.e-closed').checked ? '<span class="x">[x]</span>' : '';
      var w = g('.e-who');
      return '<a href="'+esc(g('.e-url'))+'" class="ch-ep">'+x+esc(g('.e-title'))+
             (w ? ' <i>('+esc(w)+')</i>' : '')+'</a>';
    }).join('\n');

    function pics(sel){
      return all(sel+' .i-src').map(function(i){ return i.value.trim(); })
             .filter(function(s){ return s; });
    }
    var coll = pics('#pg-coll').map(function(s){ return '<img src="'+esc(s)+'">'; }).join('\n');
    var th = function(s){ return '<div class="ch-thumb"><img src="'+esc(s)+'"></div>'; };
    var bms = pics('#pg-bm').map(th).join('\n');
    var bgs = pics('#pg-bgs').map(th).join('\n');

    q('pg-code').value =
"<div class='character'>\n"+
'<div class="ch-photo"><img src="'+esc(v('pg-bg') || DEF_BG)+'"></div>\n\n'+
'<div class="ch-side">\n\n'+
'<div class="ch-ava">\n<img src="'+esc(v('pg-ava'))+'">\n</div>\n\n'+
'<div class="ch-stat"><img src="https://forumstatic.ru/files/001c/bd/d1/28034.png"><b>милость:</b><span class="ch-mercy">'+esc(v('pg-mercy'))+'</span></div>\n'+
'<div class="ch-stat"><img src="https://forumstatic.ru/files/001c/bd/d1/66823.png"><b>гнев:</b><span class="ch-wrath">'+esc(v('pg-wrath'))+'</span></div>\n\n'+
'<div class="ch-chars">\n\n'+charsHtml+'\n\n'+
'</div><!-- /.ch-chars -->\n'+
'</div><!-- /.ch-side -->\n\n'+
'<div class="menu">\n<div class="menu-links">\n'+
"<span alt=\"sm1\" class=\"tabactive\" onclick='showTab(this);'>игровое</span>\n"+
"<span alt=\"sm2\" onclick='showTab(this);'>профиль</span>\n"+
'</div>\n</div>\n\n'+
'<div id="submenu">\n<div class="sm1 submenutext" style="display:block;">\n\n'+
'<div class="ch-box tall">\n<div class="ch-box-t">коллекция</div>\n<div class="ch-grid g3">\n'+coll+'\n</div>\n</div>\n\n'+
'<div class="ch-box short">\n<div class="ch-box-t">хронология</div>\n'+eps+'\n</div>\n\n'+
'</div>\n\n'+
'<div class="sm2 submenutext">\n\n'+
'<div class="ch-box tall">\n<div class="ch-box-t">коллекция закладок</div>\n<div class="ch-grid g5">\n'+bms+'\n</div>\n</div>\n\n'+
'<div class="ch-box short">\n<div class="ch-box-t">коллекция фонов</div>\n<div class="ch-grid g5">\n'+bgs+'\n</div>\n</div>\n\n'+
'</div>\n</div>\n</div>';

    note(chars);
  }

  function note(chars){
    var w = [];
    if(!v('pg-ava')) w.push('нет аватарки');
    chars.forEach(function(c,i){
      var who = c.name || ('персонаж '+(i+1));
      if(!c.url) w.push(who+' — без ссылки на профиль');
      if(!c.main && !c.ava) w.push(who+' — без аватарки');
    });
    var urls = chars.map(function(c){ return c.url; }).filter(function(u){ return u; });
    var uniq = urls.filter(function(u,i){ return urls.indexOf(u)===i; });
    if(uniq.length !== urls.length) w.push('одинаковые ссылки на профиль');

    var n = q('pg-note');
    n.className = w.length ? 'pg-note pg-show' : 'pg-note';
    n.textContent = w.length ? 'Проверь: ' + w.join('; ') : '';
  }

  function doImport(){
    var raw = q('pg-import').value.trim();
    if(!raw) return;
    var doc = new DOMParser().parseFromString(raw,'text/html');
    var one = function(s){ return doc.querySelector(s); };
    var src = function(s){ var e=one(s); return e ? (e.getAttribute('src')||'') : ''; };
    var txt = function(s){ var e=one(s); return e ? e.textContent.trim() : ''; };
    var list = function(s){ return Array.prototype.slice.call(doc.querySelectorAll(s)); };

    q('pg-bg').value    = src('.ch-photo img') || DEF_BG;
    q('pg-ava').value   = src('.ch-ava img');
    q('pg-mercy').value = txt('.ch-mercy') || 0;
    q('pg-wrath').value = txt('.ch-wrath') || 0;

    var host = q('pg-chars'); host.innerHTML = '';
    list('.ch-char').forEach(function(c,i){
      var a = c.querySelector('.ch-go');
      var b = c.querySelector('b');
      var race = '';
      Array.prototype.slice.call(c.children).forEach(function(n){
        if(n.tagName === 'I') race = n.textContent.trim();
      });
      host.appendChild(charRow({
        name: b ? b.textContent.trim() : '',
        race: race,
        url:  a ? a.getAttribute('href') : '',
        ava:  c.getAttribute('data-ava') || '',
        mercy:c.getAttribute('data-mercy') || 0,
        wrath:c.getAttribute('data-wrath') || 0
      }, i===0));
    });
    if(!host.children.length) host.appendChild(charRow({},true));

    var eh = q('pg-eps'); eh.innerHTML = '';
    list('.ch-ep').forEach(function(e){
      var who = e.querySelector('i');
      var closed = !!e.querySelector('.x');
      var clone = e.cloneNode(true);
      Array.prototype.slice.call(clone.querySelectorAll('i,.x')).forEach(function(n){ n.remove(); });
      eh.appendChild(epRow({
        title: clone.textContent.trim(),
        who: who ? who.textContent.replace(/^\(|\)$/g,'').trim() : '',
        url: e.getAttribute('href') || '',
        closed: closed
      }));
    });

    function fill(hostId, grid){
      var h = q(hostId); h.innerHTML = '';
      if(!grid) return;
      Array.prototype.slice.call(grid.querySelectorAll('img')).forEach(function(im){
        h.appendChild(imgRow(im.getAttribute('src')));
      });
    }
    var g5 = list('.ch-grid.g5');
    fill('pg-coll', one('.ch-grid.g3'));
    fill('pg-bm',  g5[0]);
    fill('pg-bgs', g5[1]);

    q('pg-import').value = '';
    build();
  }

  root.addEventListener('input', function(e){
    if(e.target.id === 'pg-import' || e.target.id === 'pg-code') return;
    build();
  });
  root.addEventListener('change', function(e){
    if(e.target.type === 'checkbox') build();
  });
  root.addEventListener('click', function(e){
    var d = e.target.closest ? e.target.closest('.pg-del') : null;
    if(d){ d.parentNode.remove(); build(); }
  });

  q('pg-addchar').onclick = function(){ q('pg-chars').appendChild(charRow()); build(); };
  q('pg-addep').onclick   = function(){ q('pg-eps').appendChild(epRow()); build(); };
  q('pg-addcoll').onclick = function(){ q('pg-coll').appendChild(imgRow()); build(); };
  q('pg-addbm').onclick   = function(){ q('pg-bm').appendChild(imgRow()); build(); };
  q('pg-addbg').onclick   = function(){ q('pg-bgs').appendChild(imgRow()); build(); };
  q('pg-doimport').onclick = doImport;

  q('pg-copy').onclick = function(){
    var t = q('pg-code'), b = q('pg-copy');
    t.select(); t.setSelectionRange(0, 999999);
    var done = function(){ b.textContent = 'Скопировано'; setTimeout(function(){ b.textContent='Скопировать'; }, 1500); };
    if(navigator.clipboard) navigator.clipboard.writeText(t.value).then(done, function(){ document.execCommand('copy'); done(); });
    else { document.execCommand('copy'); done(); }
  };

  q('pg-reset').onclick = function(){
    if(!confirm('Очистить все поля?')) return;
    q('pg-bg').value = DEF_BG; q('pg-ava').value = '';
    q('pg-mercy').value = 0; q('pg-wrath').value = 0;
    q('pg-chars').innerHTML = ''; q('pg-chars').appendChild(charRow({},true));
    q('pg-eps').innerHTML = ''; q('pg-eps').appendChild(epRow());
    q('pg-coll').innerHTML = ''; q('pg-bm').innerHTML = ''; q('pg-bgs').innerHTML = '';
    build();
  };

  q('pg-bg').value = DEF_BG;
  q('pg-chars').appendChild(charRow({},true));
  q('pg-eps').appendChild(epRow());
  build();
})();
</script>[/html]
[hideprofile]