Osadzanie

Widget monitorowania serwera

Wklej jeden tag <script> na swoją stronę społeczności, forum lub Wordpress. Widget przewija Twoje serwery jak żywą karuzelę, co 30 sekund pobierając nazwę hosta, aktualną mapę, liczbę graczy i flagę kraju z boost.warzonecs.com.

Podgląd na żywo — jeden serwer

Z jednym adresem widget renderuje jedną statyczną kartę — bez kontrolek karuzeli. Podgląd po prawej przekazuje data-lang="lt", więc etykiety przycisków (Connect, Donate, Boost, Copy address itd.) wracają po litewsku.

Szeroki, angielski (domyślnie)

Szeroki, litewski

Wąski (układ pionowy)

Podgląd na żywo — wiele serwerów

Z dwoma lub więcej adresami widget dodaje pod kartą kontrolki karuzeli i automatycznie przewija co sześć sekund. Użytkownicy mogą też przełączać się strzałkami ‹ i › lub dotykając kropek.

Szeroki (układ poziomy)

Wąski (układ pionowy)

Fragment do skopiowania

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

Widget wypełnia szerokość swojego kontenera i powyżej 720 px przełącza się na poziomy układ w wierszu. Owiń go elementem o określonej szerokości, żeby kontrolować rozmieszczenie. Zmień data-lang na dowolny obsługiwany kod (patrz tabela opcji poniżej), żeby zlokalizować etykiety przycisków i tooltipy.

Opcje

Atrybut	Wymagane	Domyślnie	Opis
data-servers	Tak	—	Lista `ip:port` oddzielona przecinkami. Maks. 12 serwerów.
data-target	Nie	(obok)	Selektor CSS elementu do renderowania. Pomiń, żeby wstawić obok tagu script.
data-interval	Nie	30	Interwał odświeżania w sekundach (minimum 15).
data-cycle	Nie	6	Automatyczne przewijanie karuzeli w sekundach. Ustaw `0`, żeby wyłączyć.
data-lang	Nie	en	Język interfejsu. Obsługiwane: `en`, `ru`, `pl`, `lt`, `de`, `fr`, `es`, `tr`, `cs`, `pt`, `ro`. Nieznane wartości cofają się do angielskiego.

Motyw

Nadpisz dowolną właściwość CSS custom na .wzcs-monitor we własnym arkuszu — zmiany działają natychmiast, bez ruszania kodu widgetu.

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

Pełna lista tokenów udokumentowana na początku /js/embed/monitor.js — neutralna paleta, brand-pomarańczowy, szmaragdowy, różany, bursztynowy, plus --wzcs-radius-* i --wzcs-font{,-mono}.