[html]<!--HTML-->
<style>
.gf-widget{--gf-header:#211e1c;--gf-dark:#191715;--gf-light:#e9e2d6;--gf-text:#f2ede2;--gf-text-dark:#3c362e;--gf-border:rgba(255,255,255,.14);--gf-red:#6d1f28;--gf-green:#34332a;--gf-admin-bg:#f4f0e6;--gf-radius:10px;
width:967px;height:534px;border-radius:var(--gf-radius);overflow:hidden;display:flex;flex-direction:column;background:color-mix(in srgb, var(--pun-light) 70%, transparent);font-family:Georgia,'Times New Roman',serif;box-shadow:0 6px 24px rgba(0,0,0,.35);box-sizing:border-box}
.gf-widget *{box-sizing:border-box}
.gf-widget.gf-widget.gf-widget p{margin:0;padding:0;line-height:inherit;overflow-wrap:normal}
.gf-head{flex:0 0 auto;background:var(--h2-back);color:var(--pun-light);text-align:center;padding:14px 20px 12px}
.gf-widget.gf-widget.gf-widget .gf-title{font-family:var(--big-font,Georgia,'Times New Roman',serif);font-weight:600;font-size:21px;line-height:1.25;letter-spacing:2px;text-transform:uppercase;margin:0 0 4px}
.gf-widget.gf-widget.gf-widget .gf-sub{font-family:'Playfair Display',Georgia,serif;font-size:12px;opacity:.75;margin:0;line-height:1.3}
.gf-body{flex:1 1 auto;display:flex;min-height:0}

/* левая колонка: панели с независимыми размером/отступом */
.gf-left{flex:0 0 330px;background:url(https://forumstatic.ru/files/001c/c8/87/48104.jpg) var(--gf-dark);padding:14px;display:flex;flex-direction:column;min-height:0}
.gf-panel-wrap{position:relative;flex:0 0 260px;margin-top:20px}
.gf-panel-wrap-roles{flex: 0 0 110px;
    margin-top: -30px;}

/* окно "внешности": своя картинка, рамка, стекло */
.gf-panel-outfits{    position: relative;
    height: 69%;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--gf-border);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05), 0 4px 12px rgba(0, 0, 0, .4);}
.gf-panel-outfits::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);background:rgba(20,18,16,.08)}

/* окно "роли": своя картинка, рамка, стекло */
.gf-panel-roles{position:relative;height:100%;border-radius:8px;overflow:hidden;border:1px solid var(--gf-border);box-shadow:inset 0 0 0 1px rgba(255,255,255,.05),0 4px 12px rgba(0,0,0,.4);}
.gf-panel-roles::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);background:rgba(20,18,16,.08)}

/* текстовый список поверх картинки/стекла */
.gf-panel-scroll{position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    font: 11px / 1 var(--small-font);
    padding: 20px 7px 9px 7px;}
.gf-panel-list{display:flex;flex-direction:column;gap:6px}
.gf-panel-list span{color:var(--gf-text);line-height:1.4}
.gf-panel-list b{background: #dbd2c9d1;
    color: var(--basic-grey);
    font-size: 11px;
    padding: 0 2px;}
.gf-panel-list a{color: var(--pun-light) !important;
    padding: 0 7px;
    background: var(--basic-grey);
    font-size: 11px;
    text-shadow: 1px 0px 0px #ffffff3d;}
.gf-panel-list .gf-date{opacity: .85;
    background: var(--color-soft);
    padding: 0 2px;
    border-radius: 3px;
box-shadow: 1px 1px 1px #0000004a;}

/* заголовки панелей: без стекла, свободно двигаются top/left */
.gf-panel-label{position: absolute;
    top: -10px;
    left: 10px;
    z-index: 3;
    background: var(--basic-grey);
    color: var(--pun-light);
    font: 13px Playfair Display;
    text-transform: lowercase;
    padding: 3px 7px;
    border-radius: 5px;
    transform: rotate(-1deg);
    box-shadow: 0 2px 6px rgba(0, 0, 0, .25);}

.gf-right{flex:1;min-width:0;padding:16px 20px;display:flex;flex-direction:column;gap:10px;color:var(--gf-text-dark)}

/* кнопки админов */
.gf-admins{flex:0 0 auto;display:flex;gap:10px;justify-content:center}
.gf-admins a{font-family:'Playfair Display',Georgia,serif;font-weight:600;font-size:14px;line-height:1;flex:0 0 auto;padding:8px 22px;background:var(--gf-admin-bg);color:var(--gf-text-dark);text-decoration:none;box-shadow:0px 2px 1px #0000004a}

.gf-widget.gf-widget.gf-widget .gf-text{flex:0 0 auto;font:500 12px 'Playfair Display',Georgia,serif;line-height:1.5;text-align:center}

.gf-badge{flex:0 0 auto;align-self:center;font-family:'Playfair Display',Georgia,serif;font-size:13px;padding:2px 9px;border-radius:5px;color:var(--pun-light,var(--gf-text));text-transform:lowercase}
/* наезжает на .gf-rules: сдвигается вниз через top, двигать можно им же */
.gf-badge-red{background:var(--acc-color,var(--gf-red));position:relative;top:19px;z-index:2;transform:rotate(1deg)}
.gf-badge-green{background:var(--gf-green)}

/* без прокрутки, иконки FontAwesome перед пунктами */
.gf-rules{flex:1 1 auto;min-height:0;background:rgba(0,0,0,.04);border:1px solid rgba(0,0,0,.08);border-radius:8px;padding:12px 14px 8px}
.gf-rules ul{margin:0;padding-left:0;list-style:none}
.gf-rules li{position:relative;padding-left:14px;font-family:'Playfair Display',Georgia,serif;font-weight:500;font-size:12px;line-height:1.3;margin:4px 0}
.gf-rules li::before{content:"\f6f6";font-family:"Font Awesome 6 Pro","Font Awesome 6 Free","Font Awesome 5 Free",FontAwesome;font-weight:600;font-size:7px;position:absolute;left:-2px;top:5px;color:var(--color-soft,var(--gf-text-dark))}

.gf-form{flex:0 0 auto;display:flex;gap:8px}
.gf-input{flex:1;min-width:0;padding:8px 10px;border-radius:6px;border:1px solid rgba(0,0,0,.15);background:rgba(255,255,255,.65);font-size:11.5px;font-family:inherit;color:var(--gf-text-dark)}
.gf-input::placeholder{color:rgba(60,54,46,.5)}
.gf-copy{flex:0 0 auto;padding:5px 10px;border:none;border-radius:6px;background:var(--gf-header);font: 12px / 1 Playfair Display;color:var(--gf-text);letter-spacing:.5px;cursor:pointer}
.gf-copy:hover{opacity:.85}
.gf-output{position:absolute;left:-9999px;top:-9999px;width:1px;height:1px;overflow:hidden}
.gf-panel-scroll::-webkit-scrollbar{width:6px}
.gf-panel-scroll::-webkit-scrollbar-thumb{background:rgba(0,0,0,.25);border-radius:3px}
</style>

<div class="gf-widget" data-role="root">
  <div class="gf-head">
    <p class="gf-title">Добро пожаловать на Голиаф!</p>
    <p class="gf-sub">Рейтинг форума — 18+, время в игре — лето 1492 года.</p>
  </div>
  <div class="gf-body">
    <div class="gf-left">
      <div class="gf-panel-wrap">
        <div class="gf-panel-label">внешности</div>
        <div class="gf-panel-outfits">
          <div class="gf-panel-scroll">
            <div class="gf-panel-list">
             
<span style="font-size:10px"><span class="gf-date">24.10</span> <b>kit harington</b> — <a href="https://worldofgoliath.ru/profile.php?id=315">aethelwulf brandt</a></span>
<span style="font-size:10px"><span class="gf-date">25.10</span> <b>george blagden</b> — <a href="https://worldofgoliath.ru/profile.php?id=290">genevieve clifford</a></span>
<br>
<span style="font-size:10px"><span class="gf-date">02.11</span> <b>emilia clarke</b> — <a href="https://worldofgoliath.ru/profile.php?id=300">vellyna of calandor</a></span>
<span style="font-size:10px"><span class="gf-date">02.11</span> <b>harry gilby</b> — <a href="https://worldofgoliath.ru/profile.php?id=282">keerin dupre</a></span>
<span style="font-size:10px"><span class="gf-date">04.11</span> <b>travis fimmel</b> — <a href="https://worldofgoliath.ru/profile.php?id=290">genevieve clifford</a></span>
<br>
<span style="font-size:10px"><span class="gf-date">12.11</span> <b>dónal finn</b> — ash</span>
<span style="font-size:10px"><span class="gf-date">12.11</span> <b>tomer capone</b> — <a href="https://worldofgoliath.ru/profile.php?id=5">дракон</a></span>

            </div>
          </div>
        </div>
      </div>
      <div class="gf-panel-wrap gf-panel-wrap-roles">
        <div class="gf-panel-label">должности и роли</div>
        <div class="gf-panel-roles">
          <div class="gf-panel-scroll">
            <div class="gf-panel-list">
<span style="font-size:10px"><span class="gf-date">23.10</span> <b>драконица эйра</b> — <a href="https://worldofgoliath.ru/profile.php?id=313">адель</a></span>

<span style="font-size:10px"><span class="gf-date">00.00</span> <b>кого или что придерживаем</b> — <a href="https://worldofgoliath.ru/">ваш ник</a></span>

            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="gf-right">
      <div class="gf-admins" data-role="admins">
        <a href="https://worldofgoliath.ru/profile.php?id=4" target="_blank" rel="noopener">Тессалия</a>
        <a href="https://worldofgoliath.ru/profile.php?id=5" target="_blank" rel="noopener">Тарен</a>
        <a href="https://worldofgoliath.ru/profile.php?id=91" target="_blank" rel="noopener">Нейтан</a>
        <a href="https://worldofgoliath.ru/profile.php?id=19" target="_blank" rel="noopener">Тами</a>
      </div>
      <p class="gf-text">Здесь вы найдёте как борющихся за власть лордов, так и людей-драконов, живущих бок о бок с альфами и дварфами, гигантскими песчаными червями, бронированными полярными медведями, мстительными призраками и аномальными зонами, в сравнении с которыми Изнанка из «Очень странных дел» покажется безобидным Диснейлендом. А заночевав в лесу в полнолуние, вы можете проснуться от того, что голодный оборотень доедает вашу ногу, потому что так ему велит его родовое проклятие… Но, вероятно, даже это лучше, чем угодить в загадочный Туман, из которого ещё никто не возвращается живым.</p>
      <div class="gf-badge gf-badge-red">правила придержания</div>
      <div class="gf-rules">
        <ul>
          <li>За зарегистрированными профилями держим внешности и роли на трое суток. За гостями и «на подумать» бронь сохраняется не более суток.</li>
          <li>Внешности в акциях не являются придержанными. Вы можете занимать любую из них, если они не указаны в гостевой или в списке занятых внешностей. Выкупленные имена находятся там же.</li>
          <li>Придержанные заявки в гостевой не фиксируются, заказчики сами отмечают статус заявки в своём сообщении.</li>
        </ul>
      </div>
      <div class="gf-badge gf-badge-green">придержать роль</div>
      <div class="gf-form">
        <input type="text" class="gf-input" data-field="role" placeholder="внешность/роль">
        <input type="text" class="gf-input" data-field="nick" placeholder="ваш ник">
        <input type="text" class="gf-input" data-field="link" placeholder="ссылка на профиль">
        <button type="button" class="gf-copy" data-action="copy">копировать</button>
      </div>
    </div>
  </div>
  <div class="gf-output" contenteditable="true" data-role="output" aria-hidden="true"></div>
</div>

<script>
(function () {
  "use strict";

  function byAttr(root, attr, val) {
    return root.querySelector("[" + attr + '="' + val + '"]');
  }

  function closestButton(el, root) {
    while (el && el !== root) {
      if (el.getAttribute && el.getAttribute("data-action")) return el;
      el = el.parentNode;
    }
    return null;
  }

  function pad2(n) {
    return (n < 10 ? "0" : "") + n;
  }

  function formatTime(d) {
    return pad2(d.getHours()) + "." + pad2(d.getMinutes());
  }

function buildOutput(role, nick, link) {
    var time = "00.00";
    var roleText = role || "—";
    var nickText = nick || "—";
    var nickPart = link ? '<a href="' + link + '">' + nickText + '</a>' : nickText;
    return '<span style="font-size:10px"><span class="gf-date">' + time + '</span> <b>' + roleText + '</b> — ' + nickPart + '</span>';
}

  function fallbackCopy(output) {
    var range = document.createRange();
    range.selectNodeContents(output);
    var sel = window.getSelection();
    sel.removeAllRanges();
    sel.addRange(range);
    try {
      document.execCommand("copy");
    } catch (e) {}
    sel.removeAllRanges();
  }

  function copyText(text, output) {
    output.textContent = text;
    if (navigator.clipboard && navigator.clipboard.writeText) {
      navigator.clipboard.writeText(text).catch(function () {
        fallbackCopy(output);
      });
    } else {
      fallbackCopy(output);
    }
  }

  function initWidget(root) {
    if (!root || root.getAttribute("data-ready") === "true") return;

    var roleInput = byAttr(root, "data-field", "role");
    var nickInput = byAttr(root, "data-field", "nick");
    var linkInput = byAttr(root, "data-field", "link");
    var output = byAttr(root, "data-role", "output");
    var copyBtn = byAttr(root, "data-action", "copy");

    if (!roleInput || !nickInput || !linkInput || !output || !copyBtn) return;

    root.setAttribute("data-ready", "true");

    root.addEventListener("click", function (e) {
      var target = closestButton(e.target, root);
      if (!target) return;
      if (target.getAttribute("data-action") === "copy") {
        var out = buildOutput(roleInput.value, nickInput.value, linkInput.value);
        copyText(out, output);
        var old = target.textContent;
        target.textContent = "скопировано!";
        setTimeout(function () {
          target.textContent = old;
        }, 1500);
      }
    });
  }

  function tryInit() {
    var roots = document.querySelectorAll('.gf-widget[data-role="root"]');
    for (var i = 0; i < roots.length; i++) {
      initWidget(roots[i]);
    }
  }

  tryInit();
  document.addEventListener("DOMContentLoaded", tryInit);
  setTimeout(tryInit, 300);
  setTimeout(tryInit, 800);
  setTimeout(tryInit, 1500);
})();
</script>
[/html]
[hideprofile]

Подпись автора