Для верха страницы:
"Последние N сообщений форума(в несколько столбцов)"  Скрипты от пользователей 3

Для низа страницы:
"Последние 10 сообщений форума, новая версия © Alex_63" Статистика форума, последние 10 сообщений, как добавить под шапку?

Код:

<!--Последние сообщения на главной странице форума--> 
<link rel="stylesheet" href="https://forumstatic.ru/files/001a/f0/7d/58276.css">
<script src="https://forumstatic.ru/files/001a/f0/7d/14613.js"></script>
<!--Последние сообщения на главной странице форума-->

Код:

/* 📊 Стили для таблицы с живыми сообщениями */
.stats {
  table-layout: fixed;       /* 🧱 Фиксированная ширина колонок */
  width: 100%;               /* 📐 Таблица занимает всю ширину контейнера */
  border-collapse: collapse; /* ✂️ Убираем двойные границы */
  padding: 0!important;      /* 🧹 Убираем внутренние отступы */
  border-top: none!important; /* ❌ Без верхней границы */
}

/* 🧾 Стили для ячеек таблицы */
.stats th, .stats td {
  padding: 0.3em 0.5em;      /* 🧩 Отступы внутри ячеек */
  border: 1px solid #ccc;    /* 🌫️ Светло-серая граница */
  vertical-align: middle;    /* ↕️ Выравнивание текста по вертикали */
}

/* 📏 Ширина второй колонки (время) фиксирована */
.stats .tc2 { 
  width: 15% !important;     /* 🔒 Фиксируем ширину */
}

/* 📜 Тело таблицы с сообщениями: делаем скроллируемым блоком */
#live-posts-body {
  display: block;            /* 📦 Отдельный блочный контейнер */
  max-height: 140px;         /* 📏 Максимальная высота с прокруткой */
  overflow-y: auto;          /* ↕️ Вертикальная прокрутка */
  overflow-x: hidden;        /* ↔️ Горизонтальная прокрутка скрыта */
  width: 100%;               /* 📐 Обязательно растягиваем на всю ширину */
}

/* 📝 Каждая строка в теле таблицы — отдельная таблица для корректного отображения */
#live-posts-body tr {
  display: table;            /* 🧱 Возвращаем поведение таблицы */
  width: 100%;               /* 📐 Ширина строки на 100% */
  table-layout: fixed;       /* 🧱 Фиксированная ширина колонок */
  height: 28px;              /* 📏 Высота каждой строки */
}

/* 🧱 Стили для шапки таблицы */
.stats thead tr {
  display: table;            /* 🧱 Отображаем как таблицу */
  width: 100%;               /* 📐 На всю ширину */
  table-layout: fixed;       /* 🧱 Фиксированная ширина колонок */
}

/* ✨ Подсветка новых сообщений с плавным исчезновением */
#live-posts-body tr.new-message {
   background-color: #DBCDF1; /* 🌟 Фиолетово-сиреневый фон */
  transition: background-color 2s ease; /* 🎨 Плавное затухание подсветки */
}

/* 🔘 Стили для маленького toggle switch (переключателя паузы) */

/* Контейнер заголовка, чтобы позиционировать переключатель */
.stats th.tcl {
  position: relative;        /* 📍 Для абсолютного позиционирования потомков */
}

/* Контейнер переключателя */
.switch {
  position: absolute;        /* 📍 Абсолютное позиционирование */
  left: 4px;                 /* ⬅️ Отступ слева */
  display: inline-block;     /* 🔲 Блочный элемент с inline-отображением */
  width: 36px;               /* 📐 Ширина переключателя */
  height: 16px;              /* 📐 Высота переключателя */
}

/* Скрываем сам чекбокс */
.switch input { 
  display: none;             /* 🙈 */
}

/* Ползунок переключателя */
.slider {
  position: absolute;        /* 📍 Абсолютное позиционирование внутри .switch */
  cursor: pointer;           /* 🖱️ Курсор "рука" */
  background-color: #ccc;    /* 🌫️ Серый фон */
  transition: .4s;           /* 🎨 Плавный переход состояния */
  border-radius: 18px;       /* 🔵 Закругленные края */
  top: 0; left: 0; right: 0; bottom: 0; /* 🧭 Заполнение всей области */
}

/* Круглый ползунок внутри слайдера */
.slider:before {
  position: absolute;        /* 📍 Абсолютное позиционирование */
  content: "";               /* 🔤 Псевдоэлемент без текста */
  height: 14px;              /* 📏 Диаметр круга */
  width: 14px;               /* 📏 Диаметр круга */
  left: 2px;                 /* ⬅️ Отступ слева */
  bottom: 2px;               /* ⬇️ Отступ снизу */
  background-color: white;   /* ⚪ Белый цвет */
  transition: .4s;           /* 🎨 Плавный переход */
  border-radius: 50%;        /* ⚪ Круглая форма */
}

/* При включенном переключателе — меняем цвет и позицию ползунка */
input:checked + .slider { 
  background-color: #2196F3; /* 🔵 Синий фон */
}
input:checked + .slider:before { 
  transform: translateX(18px); /* ⬅️ Перемещаем ползунок вправо */
}

/* ✋ Текст "Стоп" рядом с переключателем */
.pause-label {
  display: inline-block;     /* 🔲 Блочный элемент */
  margin-left: 6px;          /* ➡️ Отступ слева */
  font-size: 13px;           /* 🔤 Размер шрифта */
  color: silver;             /* ⚪ Серый цвет */
  user-select: none;         /* 🚫 Запрет выделения текста */
  position: absolute;        /* 📍 Абсолютное позиционирование */
  left: 40px;                /* ⬅️ Позиция слева */
  top: 3px;                  /* ⬆️ Позиция сверху */
}

/* 📱 Скрываем текст "Стоп" на мобильных устройствах */
@media (max-width: 600px) {
  .pause-label { 
    display: none !important; /* 🙈 Скрываем */
  }
}

Код:

(function () {
  // 📦 URL для загрузки jQuery, если ещё не подключён
  const jQueryUrl = "https://code.jquery.com/jquery-3.6.0.min.js";
  const maxJQueryRetries = 50; // 🔁 Максимальное количество попыток загрузки jQuery
  let retryCount = 0;

  // ⏱ Задержка между попытками загрузки данных при сетевой ошибке (в мс)
  // Изменяя эту переменную, можно регулировать, через сколько появится "Ошибка загрузки сообщений"
  const retryDelay = 1500; // 1.5 секунды по умолчанию

  // ⚙️ Основная функция инициализации панели живых сообщений
  function initLivePanel($) {
    $(function () {
      // 🌍 Проверяем, что мы на главной странице
      if (window.location.pathname === "/" || window.location.pathname.endsWith("index.php")) {

        // 🔢 Настройки
        const maxBuffer = 10;      // Максимальное количество сообщений в таблице
        const seenIds = new Set(); // 🗂️ Храним уникальные ID сообщений
        let firstLoad = true;      // ⏳ Флаг первой загрузки (без подсветки)
        let paused = false;        // ⏸️ Флаг паузы автообновления
        let isTabActive = true;    // 👀 Флаг активности вкладки
        let inactiveTime = 0;      // ⏱ Время неактивности вкладки
        const inactiveCheckInterval = 5000; // Интервал проверки активности (мс)
        let hasError = false;      // ❌ Флаг ошибки загрузки
        let isFetching = false;    // ⚡ Флаг текущего запроса, чтобы не дублировать

        // 👀 Событие смены видимости вкладки
        document.addEventListener("visibilitychange", function () {
          isTabActive = document.visibilityState === "visible";
          if (isTabActive) {
            fetchLatestPosts(); // 🔄 Сразу пробуем загрузку при активации вкладки
            inactiveTime = 0;   // Сбрасываем таймер неактивности
          }
        });

        // 💾 Читаем состояние паузы из localStorage
        const storedPaused = localStorage.getItem('livePaused');
        if (storedPaused !== null) paused = storedPaused === 'true';

        // 🧱 Формируем HTML-контейнер таблицы с живыми сообщениями
        const html = `
          <div id="live-posts" class="stats section">
            <table class="container stats">
              <thead>
                <tr>
                  <th class="tcl" style="position:relative; white-space:nowrap;">
                    <label class="switch">
                      <input type="checkbox" id="pause-updates">
                      <span class="slider"></span>
                    </label>
                    <span class="pause-label">Стоп</span>
                    🧑‍💻 Автор
                  </th>
                  <th class="tc2">🕒 Время</th>
                  <th class="tcr">💬 Последнее сообщение</th>
                </tr>
              </thead>
              <tbody class="hasicon" id="live-posts-body">
                <tr><td colspan="3">Загрузка сообщений...</td></tr>
              </tbody>
            </table>
          </div>
        `;

        // 📍 Вставка контейнера в страницу
        if ($('#pun-debug').length) $('#pun-debug').replaceWith(html);
        else if ($('#pun-ulinks').length) $('#pun-ulinks').after(html);
        else $('body').prepend(html);

        let $tbody = $('#live-posts-body'); // 🔗 Ссылка на tbody для удобства

        // 🛑 Инициализация состояния чекбокса "Пауза"
        $('#pause-updates').prop('checked', paused);
        $('#pause-updates').on('change', function () {
          paused = this.checked;
          localStorage.setItem('livePaused', paused); // 💾 Сохраняем состояние
        });

        // ❌ Функция отображения ошибки загрузки сообщений
        function showError() {
          hasError = true;
          $tbody.html('<tr><td colspan="3">❌ Ошибка загрузки сообщений.</td></tr>');
        }

        // ✅ Функция очистки ошибок и сообщений "Идёт соединение"
        function clearError() {
          hasError = false;
          $tbody.find('tr:contains("Ошибка загрузки сообщений.")').remove();
          $tbody.find('tr:contains("Идёт соединение")').remove();
        }

        // 🔄 Функция загрузки последних сообщений
        function fetchLatestPosts(retryCountAjax = 0) {
          if (paused || isFetching) return; // ⏸️ Если на паузе или уже выполняется запрос

          isFetching = true; // ⚡ Помечаем запрос как активный

          // 📡 Загружаем скрипт с данными
          $.getScript("/export.php?type=js&max=10&_=" + new Date().getTime())
            .done(function () {
              isFetching = false;

              // ❓ Проверка, есть ли данные
              if (typeof content === "undefined") {
                if (retryCountAjax < 3) {
                  // 🔁 Пытаемся повторить запрос
                  if (!hasError && $tbody.find('tr:contains("Идёт соединение")').length === 0) {
                    $tbody.html('<tr><td colspan="3">🔄 Идёт соединение...</td></tr>');
                  }
                  setTimeout(() => fetchLatestPosts(retryCountAjax + 1), retryDelay); // ⏱ Повтор через retryDelay
                } else {
                  showError(); // ❌ После 3 неудач показываем ошибку
                }
                return;
              }

              clearError(); // ✅ Очистка сообщений об ошибке

              // 🔢 Сортируем сообщения по времени
              content.sort((a, b) => a[0] - b[0]);

              content.forEach(item => {
                const uniqueId = item[0] + '_' + item[1] + '_' + item[3];
                if (!item[3].includes('·') && !item[3].includes('¬') && !seenIds.has(uniqueId)) {

                  // ⏰ Форматируем дату и время
                  const ts = new Date(1000 * item[0]);
                  const mo = String(ts.getMonth() + 1).padStart(2, '0');
                  const dd = String(ts.getDate()).padStart(2, '0');
                  const hh = String(ts.getHours()).padStart(2, '0');
                  const mm = String(ts.getMinutes()).padStart(2, '0');
                  const timeStr = `${dd}.${mo} ${hh}:${mm}`;
                  const rowClass = firstLoad ? "" : "new-message"; // 🎨 Подсветка новых сообщений

                  // 🏗️ Создаём HTML-строку сообщения
                  const $row = $(`
                    <tr class="${rowClass}" style="display:none;">
                      <td class="tcl">🧑‍💻 ${item[1]}</td>
                      <td class="tc2">🕒 ${timeStr}</td>
                      <td class="tcr">💬 <a href="${item[2]}" target="_blank">${item[3]}</a></td>
                    </tr>
                  `);

                  $tbody.append($row);
                  $row.fadeIn(400, function () {
                    if (!firstLoad) {
                      setTimeout(() => {
                        $row.animate({ backgroundColor: "transparent" }, 2000, function () {
                          $row.removeClass('new-message'); // ✨ Убираем подсветку
                        });
                      }, 500);
                    }
                  });

                  seenIds.add(uniqueId); // ✅ Добавляем ID в множество
                  if ($tbody.children('tr').length > maxBuffer) {
                    $tbody.children('tr').first().fadeOut(400, function () { $(this).remove(); }); // 🧹 Удаляем старые
                  }

                  // 📜 Прокручиваем таблицу вниз
                  $tbody.stop().animate({ scrollTop: $tbody[0].scrollHeight }, 600);
                }
              });

              firstLoad = false; // ⏳ Флаг первой загрузки снят
            })
            .fail(function () {
              isFetching = false;
              if (retryCountAjax < 3) {
                if (!hasError && $tbody.find('tr:contains("Идёт соединение")').length === 0) {
                  $tbody.html('<tr><td colspan="3">🔄 Идёт соединение...</td></tr>');
                }
                setTimeout(() => fetchLatestPosts(retryCountAjax + 1), retryDelay); // ⏱ Повтор через retryDelay
              } else {
                showError(); // ❌ После 3 неудачных попыток
              }
            });
        }

        // ⏰ Основной таймер проверки активности вкладки и автообновления
        setInterval(() => {
          if (isTabActive) {
            fetchLatestPosts();
            inactiveTime = 0;
          } else {
            inactiveTime += inactiveCheckInterval;
            const interval = inactiveTime < 60000 ? 15000 : inactiveTime < 180000 ? 30000 : 60000;
            if (inactiveTime % interval === 0) fetchLatestPosts();
          }
        }, inactiveCheckInterval);

        // 🔌 Событие восстановления соединения
        window.addEventListener("online", () => {
          console.log("[Live] Соединение восстановлено. Перезапуск...");
          setTimeout(() => {
            hasError = false;  // ❌ Сбрасываем ошибку
            seenIds.clear();   // 🗑 Сбрасываем старые ID сообщений
            fetchLatestPosts(0); // 🔄 Мгновенно пробуем загрузить свежие сообщения
          }, 200); // ⏱ Минимальная пауза
        });

        // 🚀 Первая загрузка сообщений
        fetchLatestPosts();
      }
    });
  }

  // 🔄 Функция динамической загрузки jQuery, если ещё не подключён
  function loadjQuery() {
    if (typeof jQuery !== "undefined") { initLivePanel(jQuery); return; }
    if (retryCount >= maxJQueryRetries) {
      const errorDiv = document.createElement("div");
      errorDiv.style.color = "red";
      errorDiv.style.fontWeight = "bold";
      errorDiv.style.padding = "10px";
      errorDiv.textContent = "Ошибка загрузки jQuery";
      document.body.prepend(errorDiv);
      return;
    }
    retryCount++;
    const script = document.createElement("script");
    script.src = jQueryUrl;
    script.onload = function () { initLivePanel(jQuery); };
    script.onerror = function () { setTimeout(loadjQuery, 100); };
    document.head.appendChild(script);
  }

  // 🚀 Запуск
  loadjQuery();
})();

### 🧩 Подробное описание JS и CSS файлов

Оба файла работают вместе как единое целое и реализуют панель "живых сообщений" — динамически обновляемую таблицу с последними сообщениями с сайта. Она вставляется на главную страницу, отображает последние сообщения с подсветкой новых, возможностью поставить обновления на паузу, а также адаптивным переключателем и стилями для удобного отображения.

---

## 🧠 JavaScript: Основная логика

### 📌 Назначение:
- Автоматически загружает и отображает последние сообщения с сервера.
- Проверяет, подключён ли jQuery — и, если нет, подключает его.
- Обновляет сообщения с интервалом, учитывая активность вкладки.
- Позволяет приостановить обновления с помощью переключателя.
- Обрабатывает ошибки загрузки, повторяет запросы при неудачах.
- Сохраняет состояние паузы в localStorage.

---

### 🔧 Ключевые функции:

#### 1. `loadjQuery()`
- Проверяет наличие jQuery.
- Если не найден — загружает из CDN с повторными попытками.
- Если не удалось загрузить — выводит ошибку.

#### 2. `initLivePanel($)`
- Инициализирует панель на главной странице (/ или index.php).
- Создаёт HTML-структуру таблицы.
- Вставляет её в нужное место на странице (например, после #pun-ulinks или в body).
- Управляет состоянием паузы и активности вкладки.

#### 3. `fetchLatestPosts()`
- Загружает данные из /export.php?type=js&max=10 с помощью $.getScript().
- Обрабатывает ошибки и повторяет запрос при необходимости.
- Добавляет новые сообщения в таблицу, удаляет старые, если превышено maxBuffer.
- Подсвечивает новые сообщения, если это не первая загрузка.
- Прокручивает таблицу вниз.

#### 4. `pause-updates (чекбокс)`
- Переключатель "Стоп" для остановки/запуска обновлений.
- Состояние сохраняется в localStorage.

#### 5. `visibilitychange / online`
- При возвращении на вкладку или восстановлении соединения — обновляет данные.
- При неактивности вкладки — увеличивает интервал обновления.

---

## 🎨 CSS: Стили и оформление

### 📌 Назначение:
- Стилизует таблицу с живыми сообщениями.
- Обеспечивает удобное отображение, фиксированную ширину колонок, прокрутку.
- Добавляет анимацию подсветки новых сообщений.
- Реализует стили для переключателя "Стоп".

---

### 🔧 Основные стили:

#### 1. `.stats (таблица)`
- table-layout: fixed — фиксированная ширина колонок.
- Без верхней границы, без внутренних отступов.
- Полностью растянута по ширине.

#### 2. `.stats .tc2 (колонка времени)`
- Фиксированная ширина 15%.

#### 3. `#live-posts-body (тело таблицы)`
- max-height: 140px, overflow-y: auto — прокрутка, если много сообщений.
- Каждая строка (tr) — отдельный table, чтобы сохранить ширину колонок.

#### 4. `.new-message`
- Подсветка новых строк: background-color: #DBCDF1.
- Плавное исчезновение подсветки за 2 секунды.

#### 5. `.switch (переключатель)`
- Кастомный стиль для чекбокса.
- Круглый слайдер, меняющий цвет при активации.
- Позиционируется рядом с заголовком таблицы.

#### 6. `.pause-label (надпись "Стоп")`
- Текст рядом с переключателем.
- Скрыта на мобильных устройствах (max-width: 600px).

---

## 🧩 Взаимодействие JS и CSS

- JS создаёт HTML-структуру, CSS её оформляет.
- Переключатель, созданный в JS, стилизуется с помощью CSS-классов .switch, .slider.
- Анимация новых сообщений реализована через CSS-переходы (transition) и JS-классы (new-message).
- Стили адаптированы под мобильные устройства.

---

## 🧪 Как использовать

1. Подключите оба файла на страницу (например, через <script> и <style> или внешние файлы).
2. Убедитесь, что /export.php?type=js&max=10 возвращает данные в нужном формате:
   content = [
     [timestamp, username, link, message],
     ...
   ];
3. Панель будет отображаться на главной странице сайта.

---

## 📌 Особенности

- Автоматическая загрузка jQuery, если отсутствует.
- Умная загрузка: при неактивной вкладке — увеличенный интервал.
- Сохранение состояния паузы между сессиями.
- Адаптивный дизайн и поддержка мобильных устройств.