Создал интересную фишку, которая подсвечивает, сколько людей находится в каждом разделе. Используется небольшой скрипт и CSS-стили.

CSS

Код

<style>
/* Никого нет */
.viewers-none {
  background: transparent;
  color: #777;
  padding: 2px 6px;
  border-radius: 6px;
  border: 1px solid transparent;
}

/* Активный (когда есть просмотры) */
.viewers-active {
  color: #fff;               /* белый текст */
  padding: 1px 1px;          /* меньше, чтобы текст не давило */
  border-radius: 1px;
  border: 1px solid #800000; /* тонкая обводка */
  animation: pulseBg 3s infinite ease-in-out;
}

/* Анимация фона */
@keyframes pulseBg {
  0%, 100% {
    background-color: #800000; /* бордовый фон */
    border-color: #800000;
  }
  50% {
    background-color: #ff0000; /* ярко-красный фон */
    border-color: #ff0000;
  }
}

</style>

Скрипт....

Код

<script>
(function() {
  // Попытки найти элемент по часто встречающимся селекторам + поиск по тексту
  function findBlock() {
    const selectors = [
      '#forum_viewers', '.forum-viewers', '.viewers', '.forumstat', '.forum-views', '.views-count'
    ];
    for (const s of selectors) {
      const el = document.querySelector(s);
      if (el) return el;
    }
    // fallback: ищем элемент, содержащий слово "просматри" (чаще текстовый)
    const all = document.querySelectorAll('body *');
    for (const el of all) {
      try {
        if (el.children.length === 0 && el.textContent && /просматри/i.test(el.textContent)) return el;
      } catch(e){}
    }
    return null;
  }

  function parseCount(text) {
    if (!text) return 0;
    text = text.replace(/\u00A0/g, ' '); // NBSP -> space
    // Если есть число перед скобкой: "2 (гостей: 1, пользователей: 1)"
    let m = text.match(/(\d+)\s*\(/);
    if (m) return parseInt(m[1], 10);

    // Если есть подписи "гостей" / "пользователей" — суммируем
    let guests = 0, users = 0;
    let mg = text.match(/гост[еи]\s*[:\-]?\s*(\d+)/i);
    if (mg) guests = parseInt(mg[1],10);
    let mu = text.match(/пользовател(?:ей|и)\s*[:\-]?\s*(\d+)/i);
    if (mu) users = parseInt(mu[1],10);
    if (mg || mu) return guests + users;

    // Иначе — берём первое найденное число
    const nums = text.match(/\d+/g);
    if (nums && nums.length) return parseInt(nums[0], 10);
    return 0;
  }

  function applyClass(el, count) {
    el.classList.remove('viewers-none','viewers-low','viewers-medium','viewers-high','viewers-active');
    if (count === 0) {
      el.classList.add('viewers-none');
    } else if (count <= 2) {
      el.classList.add('viewers-low','viewers-active');
    } else if (count <= 5) {
      el.classList.add('viewers-medium','viewers-active');
    } else {
      el.classList.add('viewers-high','viewers-active');
    }
    console.info('[viewers] count =', count);
  }

  function update(el) {
    const txt = el.textContent.trim();
    const count = parseCount(txt);
    applyClass(el, count);
  }

  function observe(el) {
    // слежение за изменениями текста
    const mo = new MutationObserver(() => update(el));
    mo.observe(el, { childList: true, characterData: true, subtree: true });
    // fallback: периодически обновляем (если скрипт форума подгружает цифры)
    setInterval(() => update(el), 2000);
  }

  function init() {
    const el = findBlock();
    if (!el) {
      console.warn('[viewers] не найден блок. Будем следить за DOM на появление такого блока.');
      // следим за появлением блока в DOM (например, он подгружается позже)
      const bodyObserver = new MutationObserver((mutations, obs) => {
        const f = findBlock();
        if (f) { update(f); observe(f); obs.disconnect(); }
      });
      bodyObserver.observe(document.body, { childList: true, subtree: true });
      return;
    }
    update(el);
    observe(el);
  }

  if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', init);
  else init();
})();
</script>

Да , он просто меняет цвет , сами можетет в стилях выставить нужным фам фон.

Мурчанн

1