Встраивание

Виджет мониторинга серверов

Вставь один тег <script> на свой сайт сообщества, форум или страницу Wordpress. Виджет прокручивает твои серверы как живую карусель, каждые 30 секунд подтягивая имя, текущую карту, количество игроков и флаг страны с boost.warzonecs.com.

Живое превью — один сервер

С одним адресом виджет показывает одну статичную карточку — без элементов карусели. Правое превью передаёт data-lang="lt", поэтому подписи кнопок (Connect, Donate, Boost, Copy address и т.д.) возвращаются на литовском.

Широкий, английский (по умолчанию)

Широкий, литовский

Узкий (вертикальный макет)

Живое превью — несколько серверов

С двумя и более адресами виджет добавляет под карточкой элементы карусели и автоматически перелистывает каждые шесть секунд. Пользователи также могут переключаться стрелками ‹ и › или касаясь точек.

Широкий (горизонтальный)

Узкий (вертикальный макет)

Готовый код для вставки

<div id="wzcs-monitor" style="width: 820px; max-width: 100%;"></div>
<script src="https://boost.warzonecs.com/js/embed/monitor.js"
        data-servers="91.211.247.155:27015"
        data-target="#wzcs-monitor"
        data-lang="ru"
        async></script>

Виджет заполняет ширину своего контейнера и выше 720 px переключается на горизонтальный макет. Оберни его в элемент фиксированной ширины, чтобы контролировать компоновку. Смени data-lang на любой поддерживаемый код (см. таблицу параметров ниже), чтобы локализовать подписи кнопок и подсказки.

Параметры

Атрибут	Обязателен	По умолчанию	Описание
data-servers	Да	—	Список `ip:port` через запятую. Максимум 12 серверов.
data-target	Нет	(рядом)	CSS-селектор элемента для отрисовки. Опусти, чтобы вставилось рядом с тегом script.
data-interval	Нет	30	Интервал обновления в секундах (минимум 15).
data-cycle	Нет	6	Автоперелистывание карусели в секундах. Установи `0`, чтобы отключить.
data-lang	Нет	en	Язык интерфейса. Поддерживаются: `en`, `ru`, `pl`, `lt`, `de`, `fr`, `es`, `tr`, `cs`, `pt`, `ro`. Неизвестные значения откатываются к английскому.

Оформление

Переопредели любое CSS-свойство на .wzcs-monitor в своём стиле — изменения применяются мгновенно, не трогая код виджета.

.wzcs-monitor {
    --wzcs-neutral-900-60: #0a0e1a;
    --wzcs-brand-500: #22d3ee;
    --wzcs-radius-xl: 4px;
    --wzcs-font: "Fira Sans", sans-serif;
}

Полный список токенов задокументирован в начале /js/embed/monitor.js — нейтральная палитра, brand-оранжевый, изумрудный, розовый, янтарный, плюс --wzcs-radius-* и --wzcs-font{,-mono}.