[html]<div id="pulse-monument-header"></div>

<script>
(function () {
  const REFRESH_MS = 30 * 1000;

  const UI = {
    ice:  "#5fd8ff",
    fire: "#ff6a00",
    fire2:"#ff2d2d",
    text: "#d8ecff",
    mut:  "rgba(216,236,255,.65)",
    bg:   "rgba(6,9,13,.92)",
    bg2:  "rgba(255,255,255,.035)"
  };

  const RIGHT_IMAGE_URL = "https://upforme.ru/uploads/001c/84/76/2/446867.png";

  function esc(s){
    return String(s ?? "").replace(/[&<>"']/g, m => ({
      "&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;","'":"'"
    }[m]));
  }
  function clamp(n,a,b){ return Math.max(a, Math.min(b,n)); }

  function requestParent(action) {
    return new Promise((resolve, reject) => {
      try {
        if (window.PulseMonumentParent && typeof window.PulseMonumentParent[action] === "function") {
          window.PulseMonumentParent[action]().then(resolve).catch(reject);
          return;
        }
      } catch (e) {}

      const requestId = "pm_" + Math.random().toString(16).slice(2);
      const timer = setTimeout(() => {
        window.removeEventListener("message", onMsg);
        reject(new Error("Parent timeout / not available"));
      }, 2500);

      function onMsg(ev) {
        const d = ev.data;
        if (!d?._pulseMonument || d.type !== "response" || d.requestId !== requestId) return;
        clearTimeout(timer);
        window.removeEventListener("message", onMsg);
        if (d.result && d.result.error) reject(new Error(d.result.message || "Parent error"));
        else resolve(d.result);
      }

      window.addEventListener("message", onMsg);
      window.postMessage({ _pulseMonument:true, type:"request", action, requestId }, "*");
    });
  }

  // ✅ БЕЗ <script> внутри innerHTML: даём data-pct и анимируем после render()
  function barRow(title, have, need, extraClass) {
    const safeNeed = Math.max(1, Number(need) || 1);
    const safeHave = Number(have) || 0;
    const shownHave = Math.min(safeHave, safeNeed);
    const pct = clamp(Math.floor((shownHave / safeNeed) * 100), 0, 100);

    return `
      <div class="pm-barRow ${extraClass||""}">
        <div class="pm-barTop">
          <div class="pm-barTitle">${esc(title)}</div>
          <div class="pm-barNums">${shownHave}/${safeNeed} <span class="pm-muted">(${pct}%)</span></div>
        </div>
        <div class="pm-barTrack">
          <div class="pm-barFill" data-pct="${pct}" style="width:0%"></div>
        </div>
      </div>
    `;
  }

  function animateBars(root){
    const fills = root.querySelectorAll(".pm-barFill[data-pct]");
    requestAnimationFrame(() => {
      fills.forEach(el => el.style.width = (el.getAttribute("data-pct") || "0") + "%");
    });
  }

  function buildTopFromLogs(logs){
    const map = {};
    (logs||[]).forEach(x=>{
      const u = (x && x.user) ? String(x.user) : "";
      if(!u) return;
      const q = Number(x.qty)||1;
      map[u] = (map[u]||0) + q;
    });
    return Object.entries(map)
      .sort((a,b)=>b[1]-a[1])
      .slice(0, 10)
      .map(([user,total])=>({user,total}));
  }

  function render(payload) {
    const root = document.getElementById("pulse-monument-header");
    if (!root) return;

    const has = payload && payload.data && payload.data.stages && payload.data.total;
    const updatedAt = has ? (payload.updatedAt || "") : "";
    const stages = has ? payload.data.stages : null;
    const total  = has ? payload.data.total  : { have:0, need:2000, pct:0 };
    const logs   = has ? (payload.data.lastLogs || []) : [];

    const topPlayersRaw = has ? (payload.data.topPlayers || null) : null;
    const topPlayers = Array.isArray(topPlayersRaw) && topPlayersRaw.length
      ? topPlayersRaw.slice(0, 10).map(x => ({
          user: x.user ?? x.name ?? "—",
          total: Number(x.total ?? x.qty ?? x.sum ?? 0) || 0
        }))
      : buildTopFromLogs(logs);

    const stagesHtml = stages
      ? Object.entries(stages).map(([k,v]) => barRow(k, v.have||0, v.need||1, "")).join("")
      : [
          barRow("Основание", 0, 600, ""),
          barRow("Фракции", 0, 300, ""),
          barRow("Логотип PULSE", 0, 300, ""),
          barRow("Подсветка", 0, 350, ""),
          barRow("Символ", 0, 450, ""),
        ].join("");

    const totalHtml = barRow("Общий прогресс", total.have||0, total.need||1, "pm-totalBar");

    const logsHtml = logs.length
      ? logs.slice(0, 50).map(x => (
          `<div class="pm-logLine">• <b>${esc(x.user||"—")}</b>: +${Number(x.qty)||1} <i>${esc(x.item||"")}</i> → <span class="pm-accentText">${esc(x.stage||"")}</span> <span class="pm-muted">(${esc(x.time||"")})</span></div>`
        )).join("")
      : `<div class="pm-muted">Пока нет записей. Нужен запуск пересчёта из кабинета.</div>`;

    const topHtml = topPlayers && topPlayers.length
      ? topPlayers.map((x, i) => {
          const n = i+1;
          return `
            <div class="pm-topLine">
              <span class="pm-rank">${n}</span>
              <span class="pm-topUser">${esc(x.user||"—")}</span>
              <span class="pm-topScore">+${Number(x.total)||0}</span>
            </div>
          `;
        }).join("")
      : `<div class="pm-muted">Пока нет данных по топу.</div>`;

    root.innerHTML = `
      <style>
        :root{
          --panelH: 420px;   /* высота трёх верхних блоков */
          --barW: 72%;       /* ширина обычных шкал */
          --totalW: 100%;    /* ширина общего прогресса */
        }

        /* ====== ОБЩАЯ РАМКА (камень+неон+огонь) ====== */
        .pm-wrap{
          max-width:1100px;
          margin:0 auto;
          padding:14px;
          border-radius:16px;
          border:2px solid rgba(95,216,255,.55);
          background:
            radial-gradient(1200px 520px at 50% -8%, rgba(95,216,255,.18), transparent 55%),
            radial-gradient(900px 520px at 12% 30%, rgba(255,106,0,.14), transparent 55%),
            linear-gradient(180deg, rgba(10,16,22,.92), ${UI.bg});
          color:${UI.text};
          font-family:"Segoe UI",Arial,sans-serif;
          box-shadow: 0 0 24px rgba(0,180,255,.18), 0 0 18px rgba(255,106,0,.10), inset 0 0 0 1px rgba(255,255,255,.05);
          position:relative;
          overflow:hidden;
        }
        .pm-wrap:before{
          content:"";
          position:absolute; inset:-2px;
          background: linear-gradient(90deg, transparent, rgba(255,150,80,.10), transparent);
          pointer-events:none;
        }

        /* ====== ЗАГОЛОВОК (по центру как у тебя) ====== */
        .pm-head{
          display:flex;
          justify-content:center;
          align-items:center;
          flex-wrap:wrap;
          gap:10px;
          margin-bottom:10px;
          text-align:center;
        }
        .pm-title{
          font-size:18px;
          font-weight:900;
          letter-spacing:.3px;
          text-shadow: 0 0 14px rgba(95,216,255,.25), 0 0 14px rgba(255,106,0,.18);
        }
        .pm-updated{font-size:12px;color:${UI.mut}}

        /* ====== 3 КОЛОНКИ (расположение сохраняем) ====== */
        .pm-grid3{
          display:grid;
          grid-template-columns: 1fr 1.35fr 1fr;
          gap:12px;
          align-items:stretch;
        }
        @media (max-width:850px){
          .pm-grid3{grid-template-columns:1fr;}
        }

        /* ====== ПАНЕЛИ ====== */
        .pm-box{
          border:1px solid rgba(255,255,255,.10);
          border-radius:14px;
          background:
            radial-gradient(800px 220px at 30% 0%, rgba(255,150,80,.10), transparent 55%),
            rgba(255,255,255,.035);
          overflow:hidden;
          box-shadow: inset 0 0 0 1px rgba(0,0,0,.25);
        }

        .pm-panel{
          height:var(--panelH);
          display:flex;
          flex-direction:column;
        }
        @media (max-width:850px){
          .pm-panel{height:auto;}
        }

        .pm-panelHead{
          padding:10px 12px;
          display:flex;justify-content:space-between;align-items:baseline;gap:10px;
          border-bottom:1px solid rgba(255,255,255,.08);
          background: linear-gradient(90deg, rgba(95,216,255,.14), rgba(255,106,0,.10), rgba(0,0,0,.10));
        }
        .pm-panelHead b{font-size:13px}

        .pm-panelBody{
          padding:10px 12px;
          overflow:auto;
          line-height:1.3;
          flex:1;
        }
        .pm-panelBody::-webkit-scrollbar{width:8px}
        .pm-panelBody::-webkit-scrollbar-thumb{background:rgba(95,216,255,.16);border-radius:10px}

        /* ====== ЦЕНТРАЛЬНАЯ КАРТИНКА (contain, как у тебя) ====== */
        .pm-centerImg{
          height:var(--panelH);
          border-radius:14px;
          background:
            radial-gradient(600px 260px at 50% 10%, rgba(95,216,255,.20), transparent 60%),
            radial-gradient(600px 260px at 50% 18%, rgba(255,106,0,.14), transparent 62%),
            url('${RIGHT_IMAGE_URL}') center/contain no-repeat;
          border:1px solid rgba(255,255,255,.10);
          box-shadow: 0 0 22px rgba(0,0,0,.35), 0 0 16px rgba(95,216,255,.12);
          background-color: rgba(0,0,0,.10);
        }

        /* ====== ТОП ====== */
        .pm-topLine{
          display:grid;
          grid-template-columns: 26px 1fr auto;
          gap:8px;
          align-items:center;
          padding:6px 8px;
          border:1px solid rgba(255,255,255,.08);
          border-radius:10px;
          background:rgba(0,0,0,.16);
          margin-bottom:7px;
        }
        .pm-rank{
          width:24px;height:24px;border-radius:8px;
          display:flex;align-items:center;justify-content:center;
          background:rgba(255,106,0,.14);
          border:1px solid rgba(255,106,0,.42);
          color:#ffd0a1;
          font-weight:900;
          font-size:12px;
          text-shadow:0 0 12px rgba(255,106,0,.25);
        }
        .pm-topUser{font-weight:800;font-size:13px}
        .pm-topScore{font-weight:900;color:${UI.fire}}

        /* ====== НИЖНИЙ БЛОК ПРОГРЕССА ====== */
        .pm-bottom{
          margin-top:12px;
          border:1px solid rgba(255,255,255,.10);
          border-radius:14px;
          background:
            radial-gradient(900px 260px at 50% 0%, rgba(95,216,255,.10), transparent 60%),
            radial-gradient(900px 260px at 15% 20%, rgba(255,106,0,.10), transparent 60%),
            ${UI.bg2};
          padding:12px;
          box-shadow: inset 0 0 0 1px rgba(0,0,0,.25);
        }

        /* ====== ШКАЛЫ (как у тебя по размерам/логике) ====== */
        .pm-barRow{
          border:1px solid rgba(255,255,255,.10);
          border-radius:12px;
          padding:8px;
          background:rgba(0,0,0,.18);
          margin-bottom:8px;
        }
        .pm-barTop{
          display:flex;justify-content:space-between;gap:10px;
          align-items:baseline;margin-bottom:6px;
        }
        .pm-barTitle{font-weight:900;font-size:12.5px}
        .pm-barNums{font-size:11.5px;color:rgba(216,236,255,.78)}

        .pm-barTrack{
          height:10px;
          border-radius:999px;
          background:rgba(255,255,255,.08);
          overflow:hidden;
          box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
        }

        .pm-barRow:not(.pm-totalBar){
          width:var(--barW);
          margin-left:auto;
          margin-right:auto;
        }

        .pm-barFill{
          height:100%;
          width:0%;
          border-radius:999px;
          background: linear-gradient(90deg, ${UI.fire}, ${UI.fire2}, ${UI.ice});
          box-shadow: 0 0 14px rgba(95,216,255,.18), 0 0 14px rgba(255,106,0,.18);
          transition:width 700ms ease;
        }

        .pm-totalBar{
          width:var(--totalW);
          border:1px solid rgba(255,106,0,.42);
          background: linear-gradient(180deg, rgba(255,106,0,.16), rgba(0,0,0,.18));
          box-shadow: 0 0 18px rgba(255,106,0,.10);
        }
        .pm-totalBar .pm-barTitle{font-size:14px}
        .pm-totalBar .pm-barTrack{height:16px}
        .pm-totalBar .pm-barFill{
          background: linear-gradient(90deg, ${UI.fire}, ${UI.fire2});
          box-shadow:0 0 14px rgba(255,106,0,.30);
        }

        .pm-bars{
          display:grid;
          grid-template-columns:1fr;
          gap:8px;
        }

        .pm-muted{color:${UI.mut}}
        .pm-accentText{color:${UI.ice}; text-shadow:0 0 10px rgba(95,216,255,.28)}
        .pm-logLine{margin-bottom:6px}
      </style>

      <div class="pm-wrap">
        <div class="pm-head">
          <div class="pm-title">Восстановление памятника PULSE</div>
          <div class="pm-updated">Обновлено: ${esc(updatedAt)}</div>
        </div>

        <div class="pm-grid3">
          <div class="pm-box pm-panel">
            <div class="pm-panelHead">
              <b>Топ игроков</b><span class="pm-muted">топ-10</span>
            </div>
            <div class="pm-panelBody">${topHtml}</div>
          </div>

          <div class="pm-centerImg"></div>

          <div class="pm-box pm-panel">
            <div class="pm-panelHead">
              <b>Журнал вкладов</b><span class="pm-muted">последние ${Math.min(50, logs.length||0)}</span>
            </div>
            <div class="pm-panelBody">${logsHtml}</div>
          </div>
        </div>

        <div class="pm-bottom">
          <div style="font-weight:900;margin-bottom:8px;text-shadow:0 0 12px rgba(95,216,255,.18),0 0 12px rgba(255,106,0,.12);">Прогресс</div>
          ${totalHtml}
          <div class="pm-bars">${stagesHtml}</div>
        </div>
      </div>
    `;

    animateBars(root);
  }

  async function tick() {
    try {
      const payload = await requestParent("getStatus");
      render(payload || null);
    } catch (e) {
      // чтобы блок был виден даже при ошибке родителя:
      render(null);
      console.warn("PULSE header:", e.message);
    }
  }

  tick();
  setInterval(tick, REFRESH_MS);
})();
</script>
[/html]
[hideprofile]

Инвентарь пользователя
[html]
<style>
  .usr_inv {display: grid;gap: 10px;margin-top: 10px;grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));}
  .inv_item {border: 1px solid #ddd;border-radius: 4px;padding: 10px;text-align: center;}
  .item-image {width: 64px;height: 64px;object-fit: cover;border-radius: 4px;}
  .item-description {display: none;}
  #detailed-view-mkok7oha2madsm60p68:checked ~ .usr_inv {grid-template-columns: 1fr;}
  #detailed-view-mkok7oha2madsm60p68:checked ~ .usr_inv .inv_item {display: flex;align-items: center;text-align: left;gap: 15px;padding: 15px;}
  #detailed-view-mkok7oha2madsm60p68:checked ~ .usr_inv .item-image {width: 50px;height: 50px;flex-shrink: 0;}
  #detailed-view-mkok7oha2madsm60p68:checked ~ .usr_inv .item-description {display: block;flex: 1;}
</style>

<div>
  <div class="usr_inv">
   
    <div class="inv_item">
      <img src="https://upforme.ru/uploads/001c/84/76/2/270961.png?sec=DQ0+QTpQQEYtMiEAUWcCRz42OVcHeTwMJx49AzpUfV8uJjpCeVp3Rz42OVYvRAIMJR49BT5+alo5DzINfllBST8xMlAoeiBTJSA9GRVrEhI=" title="Титановый лист" alt="Титановый лист" class="item-image">
    </div>
 
  </div>
</div>
[/html]
Последнее обновление: 22.01.2026, 00:53:15