Incorporar

Widget do monitor de servidor

Cole uma tag <script> no seu site da comunidade, fórum ou página Wordpress. O widget alterna entre os seus servidores como um carrossel ao vivo, buscando hostname, mapa atual, número de jogadores e bandeira do país em boost.warzonecs.com a cada 30 segundos.

Pré-visualização ao vivo — um servidor

Com um endereço, o widget renderiza um único cartão estático — sem controlos de carrossel. A pré-visualização à direita passa data-lang="lt", por isso os rótulos dos botões (Connect, Donate, Boost, Copy address, etc.) voltam em lituano.

Largo, inglês (padrão)

Largo, lituano

Estreito (layout empilhado)

Pré-visualização ao vivo — vários servidores

Com dois ou mais endereços, o widget adiciona controlos de carrossel abaixo do cartão e avança automaticamente a cada seis segundos. Os utilizadores também podem alternar com as setas ‹ e › ou tocando nos pontos.

Largo (layout em linha)

Estreito (layout empilhado)

Trecho para copiar

<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="pt"
        async></script>

O widget preenche a largura do seu contentor e muda para o layout horizontal em linha acima de 720 px. Envolva-o num elemento de tamanho fixo para controlar a disposição. Altere data-lang para qualquer código suportado (ver tabela de opções abaixo) para localizar os rótulos dos botões e tooltips.

Opções

Atributo	Obrigatório	Padrão	Descrição
data-servers	Sim	—	Lista `ip:port` separada por vírgulas. Máx. 12 servidores.
data-target	Não	(inline)	Seletor CSS do elemento onde renderizar. Omita para injetar ao lado da tag script.
data-interval	Não	30	Intervalo de atualização em segundos (mínimo 15).
data-cycle	Não	6	Avanço automático do carrossel em segundos. Defina `0` para desativar.
data-lang	Não	en	Idioma da interface. Suportados: `en`, `ru`, `pl`, `lt`, `de`, `fr`, `es`, `tr`, `cs`, `pt`, `ro`. Valores desconhecidos voltam ao inglês.

Tema

Sobreponha qualquer propriedade CSS custom em .wzcs-monitor na sua própria folha de estilos — aplica-se de imediato, sem tocar no código do widget.

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

Lista completa de tokens documentada no topo de /js/embed/monitor.js — paleta neutra, brand laranja, esmeralda, rosa, âmbar, além de --wzcs-radius-* e --wzcs-font{,-mono}.