Einbetten

Server-Monitor-Widget

Setz einen <script>-Tag auf deine Community-Site, dein Forum oder eine WordPress-Seite. Das Widget zeigt deine Server als Live-Karussell und holt sich Hostname, aktuelle Map, Spielerzahl und Länderflagge alle 30 Sekunden von boost.warzonecs.com.

Live-Vorschau — ein Server

Mit einer Adresse rendert das Widget eine einzelne statische Karte — keine Karussell-Steuerung. Die rechte Vorschau übergibt data-lang="lt", sodass die Button-Beschriftungen (Connect, Donate, Boost, Copy address usw.) auf Litauisch zurückkommen.

Breit, Englisch (Standard)

Breit, Litauisch

Schmal (gestapeltes Layout)

Live-Vorschau — mehrere Server

Bei zwei oder mehr Adressen ergänzt das Widget unter der Karte Karussell-Steuerungen und wechselt alle sechs Sekunden automatisch. Du kannst auch mit den Pfeilen ‹ und › oder per Tippen auf die Punkte durchschalten.

Breit (Zeilen-Layout)

Schmal (gestapeltes Layout)

Zum Kopieren

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

Das Widget füllt die Breite seines Containers und wechselt oberhalb von 720 px in das horizontale Zeilen-Layout. Wickel es in ein Element mit fester Breite, um das Layout zu kontrollieren. Änder data-lang auf einen der unterstützten Codes (siehe Optionstabelle unten), um Button-Beschriftungen und Tooltips zu lokalisieren.

Optionen

Attribut	Pflicht	Standard	Beschreibung
data-servers	Ja	—	Kommagetrennte `ip:port`-Liste. Maximal 12 Server.
data-target	Nein	(inline)	CSS-Selektor des Elements, in das gerendert wird. Weglassen, damit direkt neben dem Script-Tag eingefügt wird.
data-interval	Nein	30	Aktualisierungsintervall in Sekunden (mindestens 15).
data-cycle	Nein	6	Automatisches Karussell-Weiterschalten in Sekunden. `0` zum Deaktivieren.
data-lang	Nein	en	UI-Sprache. Unterstützt: `en`, `ru`, `pl`, `lt`, `de`, `fr`, `es`, `tr`, `cs`, `pt`, `ro`. Unbekannte Werte fallen auf Englisch zurück.

Styling

Überschreib jede CSS-Custom-Property auf .wzcs-monitor in deinem eigenen Stylesheet — Änderungen greifen sofort, ohne Widget-Code anzufassen.

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

Vollständige Token-Liste am Anfang von /js/embed/monitor.js dokumentiert — neutrale Palette, Brand-Orange, Smaragd, Rose, Bernstein, dazu --wzcs-radius-* und --wzcs-font{,-mono}.