[html]
<style>
.guestbook{width:800px;margin:0 auto;padding:24px;box-sizing:border-box;position:relative;background:url(https://upforme.ru/uploads/001c/be/8c/2/747272.png) center/cover no-repeat;border-radius:35px;overflow:hidden}
.gb-header{display:flex;justify-content:flex-end;align-items:flex-start;gap:14px;margin-bottom:8px}
.gb-title{color:#fff;font:500 75px 'Druzhok';text-transform:lowercase}
.gb-admins{
    display: flex;
    gap: 8px;
    margin-top: 4px;
    margin-right: 55px;
    width: 200px;
    flex-wrap: wrap;
    justify-content: center;}

.gb-admin{
    text-transform: lowercase;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 13px;
    font: 600 11px / 160% 'Noto Sans Mono', sans-serif;
    height: 30px;
    border-radius: 15px;
    background: #000000;
    color: #fff !important;
    position: relative;}

.gb-admin:after{
    content:attr(data-title);
    position:absolute;
    top:38px;
    left:50%;
    transform:translateX(-50%);
    width:150px;
    padding:5px;
    border-radius:10px;
    background:#222;
    color:#fff;
    font:11px/160% 'Noto Sans Mono', monospace;
    text-align:center;
    opacity:0;
    pointer-events:none;
    transition:.2s;
    z-index:99999;}
.gb-admin:hover:after{opacity:1}
.gb-top{display:flex;justify-content:flex-end;gap:20px}
.gb-left,.gb-right{background:rgba(35,35,35,.65);backdrop-filter:blur(5px);border-radius:18px;box-sizing:border-box}
.gb-left{width:180px;height:258px;padding:15px}
.gb-right{width:427px;height:258px;padding:15px}
.gb-bottom{width:427px;margin:18px 0 0 auto}
.gb-copy{width:427px;height:34px;border:0;border-radius:10px;background:#222;color:#fff;cursor:pointer;margin-bottom:8px}
.gb-code{width:427px;height:51px;border:0;border-radius:12px;padding:15px;box-sizing:border-box;resize:none}

.gb-left{
    width:180px;
    height:258px;
    padding:0;
    background:rgba(35,35,35,.65);
    backdrop-filter:blur(5px);
    border-radius:18px;
    box-sizing:border-box;
    overflow:hidden;
}

.gb-right{
    width:427px;
    height:258px;
    padding:0;
    background:rgba(35,35,35,.65);
    backdrop-filter:blur(5px);
    border-radius:18px;
    box-sizing:border-box;
    overflow:hidden;
}

/* ---------------- ЛЕВЫЙ ТЕКСТ ---------------- */

.gb-left-text{
    width: 159px;
    height: 220px;
    margin: 10px 0 0 10px;
    overflow: auto;
    color: #ececec;
    font: 300 11px / 160% 'Noto Sans Mono', sans-serif;
    white-space: normal;
    word-break: break-word;
}

/* ---------------- ПРАВЫЙ ТЕКСТ ---------------- */

.gb-right-text{
    width: 395px;
    padding-right: 6px;
    height: 223px;
    margin: 13px 0 0 18px;
    overflow: auto;
    color: #ececec;
    font: 300 11px / 160% 'Noto Sans Mono', sans-serif;
    text-align: justify;
    white-space: normal;
    word-break: break-word;
}
</style>

<div class="guestbook">
<div class="gb-header">
<div class="gb-admins">
<a href="#" class="gb-admin" data-title="дизайнер и графин">саша</a>
<a href="#" class="gb-admin" data-title="лоровед">руся</a>
<a href="#" class="gb-admin" data-title="питомец амс">наташа</a>
<a href="#" class="gb-admin" data-title="организатор">айлин</a>
<a href="#" class="gb-admin" data-title="техподдержка">лера</a>
</div>
<div class="gb-title">гостевая</div>
</div>

<div class="gb-top">
<div class="gb-left">

    <div class="gb-left-text">
<b>до открытия:</b><br>
biba bobina — <a href="ссылка на профиль">gugu</a><br>
biba bobina — <a href="ссылка на профиль">gugu</a><br>
biba bobina — <a href="ссылка на профиль">gugu</a><br>
biba bobina — <a href="ссылка на профиль">gugu</a><br>
biba bobina — <a href="ссылка на профиль">gugu</a><br>
<br>

<b>до 13.07:</b><br>
biba bobina — <a href="ссылка на профиль">gugu</a><br>
biba bobina — <a href="ссылка на профиль">gugu</a><br>

    </div>

</div>

<div class="gb-right">
<div class="gb-right-text">
добро пожаловать на ФРПГ в жанре мистика (с вплетением рас и кельтской мифологии). проходите, располагайтесь, переобувайтесь в тапочки, выбирайте любимые лица и создавайте уникальные истории.<br>
<br>
если коротко о нас, то мы располагаемся на британском архипелаге и занимаем всю территорию ирландии и британии. здесь пытаются ужиться между собой вампиры, оборотни, банши, ведьмы, призраки, фейри, мэрроу и обычные люди (в будущем планируем пополнение рас). проблемы экономического кризиса и престолонаследия давно уже не волнуют всех этих существ, в отличие от выживания под взором разгневанных богов.<br>
<br>
божества, что раньше покровительствовали всем этим расам, обернулись против них и поставили под вопрос само существование своих подопечных. теперь им предстоит следить за своим поведением, зарабатывать очки милости или получать дебаффы гнева богов. помните, что любое решение будет иметь последствие.<br>
<br>
подробнее ознакомиться с матчастью форума, узнать нас поближе и просто понять, что вообще здесь происходит, можно в специальных темах по навигации в подфорумах или шапке форума.<br>
<br>
внешности для зарегистрированных держим 3 дня (плюс два продления по 2 дня), а гостям, друзьям и на подумать — сутки.</div>
</div></div>

<div class="gb-bottom">

</div>
</div>
[/html]
[hideprofile]

внешность — <a href="ссылка на профиль">ник</a><br>

[html]
<!-- HTML банка приколов. CSS лежит отдельно в prikoly-bank-css.txt -->
<div class="coin-bank" data-coin-bank>
  <div class="coin-bank__head">
    <h2 class="coin-bank__title">банк приколов</h2>
    <p class="coin-bank__intro">
      здесь можно накопить или спустить на всяческие плюшки всю свою валюту, зачисление и снятие происходит через заполнение кода, ожидание составляет от одного до трех дней.
    </p>
  </div>

  <div class="coin-bank__columns">
    <section class="coin-bank__column" aria-label="получить монеты">
      <h3 class="coin-bank__subtitle">получить монеты</h3>

      <div class="coin-bank__item" data-item data-kind="earn" data-name="каждый написанный пост" data-price="10" data-count="1">
        <label class="coin-bank__line"><input class="coin-bank__check" type="checkbox"><span class="coin-bank__name">каждый написанный пост</span><span class="coin-bank__price">10</span></label>
      </div>
      <div class="coin-bank__item" data-item data-kind="earn" data-name="написал 5 постов" data-price="50" data-count="1">
        <label class="coin-bank__line"><input class="coin-bank__check" type="checkbox"><span class="coin-bank__name">написал 5 постов</span><span class="coin-bank__price">50</span></label>
      </div>
      <div class="coin-bank__item" data-item data-kind="earn" data-name="написал 20 постов" data-price="250" data-count="1">
        <label class="coin-bank__line"><input class="coin-bank__check" type="checkbox"><span class="coin-bank__name">написал 20 постов</span><span class="coin-bank__price">250</span></label>
      </div>
      <div class="coin-bank__item" data-item data-kind="earn" data-name="за закрытый эпизод" data-price="50" data-count="1">
        <label class="coin-bank__line"><input class="coin-bank__check" type="checkbox"><span class="coin-bank__name">за закрытый эпизод <small class="coin-bank__hint">каждому</small></span><span class="coin-bank__price">50</span></label>
      </div>
      <div class="coin-bank__item" data-item data-kind="earn" data-name="попадание в таблицу" data-price="30" data-count="1">
        <label class="coin-bank__line"><input class="coin-bank__check" type="checkbox"><span class="coin-bank__name">попадание в таблицу</span><span class="coin-bank__price">30</span></label>
      </div>
      <div class="coin-bank__item" data-item data-kind="earn" data-name="каждые 100 сообщений" data-price="20" data-count="1">
        <label class="coin-bank__line"><input class="coin-bank__check" type="checkbox"><span class="coin-bank__name">каждые 100 сообщений</span><span class="coin-bank__price">20</span></label>
      </div>
      <div class="coin-bank__item" data-item data-kind="earn" data-name="каждые 100 плюсов репутации" data-price="15" data-count="1">
        <label class="coin-bank__line"><input class="coin-bank__check" type="checkbox"><span class="coin-bank__name">каждые 100 плюсов репутации</span><span class="coin-bank__price">15</span></label>
      </div>
      <div class="coin-bank__item" data-item data-kind="earn" data-name="каждые 1000 сообщений" data-price="75" data-count="1">
        <label class="coin-bank__line"><input class="coin-bank__check" type="checkbox"><span class="coin-bank__name">каждые 1000 сообщений</span><span class="coin-bank__price">75</span></label>
      </div>
      <div class="coin-bank__item" data-item data-kind="earn" data-name="каждые 1000 плюсов" data-price="45" data-count="1">
        <label class="coin-bank__line"><input class="coin-bank__check" type="checkbox"><span class="coin-bank__name">каждые 1000 плюсов</span><span class="coin-bank__price">45</span></label>
      </div>
      <div class="coin-bank__item" data-item data-kind="earn" data-name="каждые 200 поставленных плюсов" data-price="10" data-count="1">
        <label class="coin-bank__line"><input class="coin-bank__check" type="checkbox"><span class="coin-bank__name">каждые 200 поставленных плюсов</span><span class="coin-bank__price">10</span></label>
      </div>
      <div class="coin-bank__item" data-item data-kind="earn" data-name="заявка в нужные" data-price="20" data-count="1">
        <label class="coin-bank__line"><input class="coin-bank__check" type="checkbox"><span class="coin-bank__name">заявка в нужные</span><span class="coin-bank__price">20</span></label>
      </div>
      <div class="coin-bank__item" data-item data-kind="earn" data-name="заявка в хочу видеть" data-price="3" data-count="1">
        <label class="coin-bank__line"><input class="coin-bank__check" type="checkbox"><span class="coin-bank__name">заявка в хочу видеть</span><span class="coin-bank__price">3</span></label>
      </div>
      <div class="coin-bank__item" data-item data-kind="earn" data-name="привести друга" data-price="30" data-count="1">
        <label class="coin-bank__line"><input class="coin-bank__check" type="checkbox"><span class="coin-bank__name">привести друга <small class="coin-bank__hint">обоим после принятия</small></span><span class="coin-bank__price">30</span></label>
      </div>
      <div class="coin-bank__item" data-item data-kind="earn" data-name="взять персонажа из нужных" data-price="30" data-count="1">
        <label class="coin-bank__line"><input class="coin-bank__check" type="checkbox"><span class="coin-bank__name">взять персонажа из нужных</span><span class="coin-bank__price">30</span></label>
      </div>
      <div class="coin-bank__item" data-item data-kind="earn" data-name="одна реклама" data-price="2" data-count="1">
        <label class="coin-bank__line"><input class="coin-bank__check" type="checkbox"><span class="coin-bank__name">одна реклама</span><span class="coin-bank__price">2</span></label>
      </div>
    </section>

    <section class="coin-bank__column" aria-label="потратить на приколы">
      <h3 class="coin-bank__subtitle">потратить на приколы</h3>

      <div class="coin-bank__item" data-item data-kind="spend" data-name="твинк" data-price="100" data-options="0:0:первый бесплатно|100:100:последующий твинк">
        <label class="coin-bank__line"><input class="coin-bank__check" type="checkbox"><span class="coin-bank__name">твинк <small class="coin-bank__hint">последующие: 100 + 2 игровых поста с каждого аккаунта</small></span><span class="coin-bank__price">0 / 100</span></label>
      </div>
      <div class="coin-bank__item" data-item data-kind="spend" data-name="аватар от амс" data-price="350">
        <label class="coin-bank__line"><input class="coin-bank__check" type="checkbox"><span class="coin-bank__name">аватар от амс</span><span class="coin-bank__price">350</span></label>
      </div>
      <div class="coin-bank__item" data-item data-kind="spend" data-name="эпиграф от амс" data-price="500">
        <label class="coin-bank__line"><input class="coin-bank__check" type="checkbox"><span class="coin-bank__name">эпиграф от амс</span><span class="coin-bank__price">500</span></label>
      </div>
      <div class="coin-bank__item" data-item data-kind="spend" data-name="закладка в профиль из коллекций" data-price="100">
        <label class="coin-bank__line"><input class="coin-bank__check" type="checkbox"><span class="coin-bank__name">закладка в профиль из коллекций</span><span class="coin-bank__price">100</span></label>
      </div>
      <div class="coin-bank__item" data-item data-kind="spend" data-name="закладка в профиль на ваш вкус" data-price="300">
        <label class="coin-bank__line"><input class="coin-bank__check" type="checkbox"><span class="coin-bank__name">закладка в профиль на ваш вкус</span><span class="coin-bank__price">300</span></label>
      </div>
      <div class="coin-bank__item" data-item data-kind="spend" data-name="фон на личную страницу из коллекции" data-price="100">
        <label class="coin-bank__line"><input class="coin-bank__check" type="checkbox"><span class="coin-bank__name">фон на личную страницу из коллекции</span><span class="coin-bank__price">100</span></label>
      </div>
      <div class="coin-bank__item" data-item data-kind="spend" data-name="фон на личную страницу на ваш выбор" data-price="200">
        <label class="coin-bank__line"><input class="coin-bank__check" type="checkbox"><span class="coin-bank__name">фон на личную страницу на ваш выбор</span><span class="coin-bank__price">200</span></label>
      </div>
      <div class="coin-bank__item" data-item data-kind="spend" data-name="амс придумывает вам лз на свой вкус" data-price="100">
        <label class="coin-bank__line"><input class="coin-bank__check" type="checkbox"><span class="coin-bank__name">амс придумывает вам лз на свой вкус</span><span class="coin-bank__price">100</span></label>
      </div>
      <div class="coin-bank__item" data-item data-kind="spend" data-name="амс верстает ваше лз в чате джипити" data-price="500">
        <label class="coin-bank__line"><input class="coin-bank__check" type="checkbox"><span class="coin-bank__name">амс верстает ваше лз в чате джипити</span><span class="coin-bank__price">500</span></label>
      </div>
      <div class="coin-bank__item" data-item data-kind="spend" data-name="амс сами делают вам красивое лз" data-price="700">
        <label class="coin-bank__line"><input class="coin-bank__check" type="checkbox"><span class="coin-bank__name">амс сами делают вам красивое лз</span><span class="coin-bank__price">700</span></label>
      </div>
      <div class="coin-bank__item" data-item data-kind="spend" data-name="выкуп внешности на 2 недели" data-price="300" data-options="300:300:300 монет|0:100:100 реклам">
        <label class="coin-bank__line"><input class="coin-bank__check" type="checkbox"><span class="coin-bank__name">выкуп внешности на 2 недели</span><span class="coin-bank__price">300 / 100</span></label>
      </div>
      <div class="coin-bank__item" data-item data-kind="spend" data-name="шаблон рекламы с нужным персонажем" data-price="250">
        <label class="coin-bank__line"><input class="coin-bank__check" type="checkbox"><span class="coin-bank__name">шаблон рекламы с нужным персонажем</span><span class="coin-bank__price">250</span></label>
      </div>
      <div class="coin-bank__item" data-item data-kind="spend" data-name="сильвер блайнд бокс" data-price="333">
        <label class="coin-bank__line"><input class="coin-bank__check" type="checkbox"><span class="coin-bank__name">сильвер блайнд бокс <small class="coin-bank__hint">простенький артефакт, лимитированная закладка, верстка лз в чате джипити, аватар от амс или другой прикол</small></span><span class="coin-bank__price">333</span></label>
      </div>
      <div class="coin-bank__item" data-item data-kind="spend" data-name="голден блайнд бокс" data-price="555">
        <label class="coin-bank__line"><input class="coin-bank__check" type="checkbox"><span class="coin-bank__name">голден блайнд бокс <small class="coin-bank__hint">артефакт покруче, плашка/картина на лс, выкуп из чистки, реклама с нужным, бесплатный твинк или другой прикол</small></span><span class="coin-bank__price">555</span></label>
      </div>
    </section>
  </div>

  <section class="coin-bank__tools" aria-label="корзина">
    <b>корзина</b>
    <div class="coin-bank__cart" data-cart>корзина пока пустая</div>

    <div class="coin-bank__summary">
      <label>монет сейчас <input class="coin-bank__field coin-bank__balance" data-balance type="number" value="0"></label>
      <span>получить <b data-earn>0</b></span>
      <span>потратить <b data-spend>0</b></span>
      <span>остаток <b data-final>0</b></span>
      <span class="coin-bank__total">итого: <b data-total>0</b></span>
      <button class="coin-bank__button" type="button" data-copy>код</button>
      <button class="coin-bank__button" type="button" data-clear>очистить все</button>
    </div>

    <textarea class="coin-bank__code" data-code readonly></textarea>
    <div class="coin-bank__status" data-status></div>
  </section>
</div>

<script>
(function () {
  function clean(text) {
    return String(text || "").replace(/[&<>]/g, function (char) {
      return char === "&" ? "&amp;" : char === "<" ? "&lt;" : "&gt;";
    });
  }

  function number(value) {
    return Number(value || 0) || 0;
  }

  function optionData(option) {
    var parts = String(option || "").split(":");
    return {
      value: number(parts[0]),
      badge: parts[1] || parts[0] || "0",
      label: parts.slice(2).join(":") || parts[0] || "0"
    };
  }

  document.querySelectorAll("[data-coin-bank]").forEach(function (bank) {
    var rows = Array.prototype.slice.call(bank.querySelectorAll("[data-item]"));
    var cart = bank.querySelector("[data-cart]");
    var code = bank.querySelector("[data-code]");
    var status = bank.querySelector("[data-status]");

    rows.forEach(function (row) {
      var controls = document.createElement("div");
      controls.className = "coin-bank__controls";

      var note = document.createElement("input");
      note.className = "coin-bank__field";
      note.setAttribute("data-note", "");
      note.placeholder = "ссылка / комментарий";
      controls.appendChild(note);

      if (row.dataset.options) {
        var select = document.createElement("select");
        select.className = "coin-bank__select";
        select.setAttribute("data-option", "");
        row.dataset.options.split("|").forEach(function (raw) {
          var data = optionData(raw);
          var option = document.createElement("option");
          option.value = data.value;
          option.textContent = data.label;
          option.setAttribute("data-badge", data.badge);
          select.appendChild(option);
        });
        controls.appendChild(select);
      }

      if (row.dataset.count) {
        var qty = document.createElement("input");
        qty.className = "coin-bank__qty";
        qty.setAttribute("data-qty", "");
        qty.type = "number";
        qty.min = "1";
        qty.value = "1";
        controls.appendChild(qty);
      }

      row.appendChild(controls);
    });

    function getPrice(row) {
      var select = row.querySelector("[data-option]");
      if (!select) {
        return {
          value: number(row.dataset.price),
          label: row.dataset.price || "0",
          badge: row.dataset.price || "0"
        };
      }
      var option = select.options[select.selectedIndex];
      return {
        value: number(option.value),
        label: option.textContent,
        badge: option.getAttribute("data-badge") || option.value
      };
    }

    function update() {
      var earn = 0;
      var spend = 0;
      var lines = [];
      var cartRows = [];
      var left = String.fromCharCode(91);
      var right = String.fromCharCode(93);
      var tagI = left + "i" + right;
      var tagEndI = left + "/i" + right;
      var tagB = left + "b" + right;
      var tagEndB = left + "/b" + right;

      rows.forEach(function (row) {
        var checked = row.querySelector(".coin-bank__check").checked;
        row.classList.toggle("is-active", checked);
        if (!checked) return;

        var price = getPrice(row);
        var qtyInput = row.querySelector("[data-qty]");
        var qty = qtyInput ? Math.max(1, number(qtyInput.value)) : 1;
        var total = price.value * qty;
        var note = (row.querySelector("[data-note]") || {}).value || "";
        var name = row.dataset.name;

        if (row.dataset.kind === "earn") earn += total;
        if (row.dataset.kind === "spend") spend += total;

        var priceText = price.label + (qty > 1 ? " x " + qty : "");
        var line = "- " + tagI + name + " (" + priceText + ")" + tagEndI + (price.value ? " = " + total : "");
        if (note) line += "\n  " + note;
        lines.push(line);

        cartRows.push(
          '<div class="coin-bank__cart-row"><span class="coin-bank__cart-price">' +
          clean(total || price.badge) +
          '</span><span class="coin-bank__cart-name">' +
          clean(name) +
          (note ? '<small class="coin-bank__cart-note">' + clean(note) + '</small>' : "") +
          "</span></div>"
        );
      });

      var balance = number(bank.querySelector("[data-balance]").value);
      var finalBalance = balance + earn - spend;
      var totalMove = earn + spend;

      bank.querySelector("[data-earn]").textContent = earn;
      bank.querySelector("[data-spend]").textContent = spend;
      bank.querySelector("[data-final]").textContent = finalBalance;
      bank.querySelector("[data-total]").textContent = totalMove;
      cart.innerHTML = cartRows.length ? cartRows.join("") : "корзина пока пустая";

      code.value =
        left + "quote" + right +
        tagB + left + "size=13" + right + "банк приколов" + left + "/size" + right + tagEndB + "\n\n" +
        lines.join("\n\n") +
        (lines.length ? "\n\n" : "") +
        tagB + "монет сейчас:" + tagEndB + " " + balance + "\n" +
        (earn ? tagB + "получить:" + tagEndB + " " + earn + "\n" : "") +
        (spend ? tagB + "потратить:" + tagEndB + " " + spend + "\n" : "") +
        tagB + "остаток:" + tagEndB + " " + finalBalance +
        "\n" + left + "/quote" + right;
    }

    bank.addEventListener("change", update);
    bank.addEventListener("input", update);

    bank.querySelector("[data-copy]").addEventListener("click", function () {
      update();
      code.focus();
      code.select();
      try {
        document.execCommand("copy");
        status.textContent = "код скопирован";
      } catch (error) {
        status.textContent = "выдели поле и нажми Ctrl+C";
      }
    });

    bank.querySelector("[data-clear]").addEventListener("click", function () {
      rows.forEach(function (row) {
        row.querySelector(".coin-bank__check").checked = false;
        row.classList.remove("is-active");
        var note = row.querySelector("[data-note]");
        var qty = row.querySelector("[data-qty]");
        var select = row.querySelector("[data-option]");
        if (note) note.value = "";
        if (qty) qty.value = "1";
        if (select) select.selectedIndex = 0;
      });
      bank.querySelector("[data-balance]").value = "0";
      status.textContent = "";
      update();
    });

    update();
  });
})();
</script>
[/html]

[hideprofile]