91 lines
4.1 KiB
HTML
91 lines
4.1 KiB
HTML
{{define "stats.html"}}<!doctype html>
|
|
<html lang="pl">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width,initial-scale=1">
|
|
<title>TeamSpeak — statystyki</title>
|
|
<link rel="stylesheet" href="{{asset "app.css"}}">
|
|
<script src="{{asset "app.js"}}" defer></script>
|
|
</head>
|
|
<body>
|
|
{{template "icons" .}}
|
|
<div class="shell">
|
|
<header class="topbar">
|
|
<a class="brand" href="/stats" title="{{if .InfoAvailable}}{{.ServerName}}{{end}}">
|
|
<svg class="icon" width="24" height="24"><use href="#icon-headset"/></svg>
|
|
<span>{{if .InfoAvailable}}{{.ServerName}}{{else}}Serwer TS3{{end}}</span>
|
|
</a>
|
|
<div class="header-online" aria-live="polite">
|
|
<span class="badge ok"><span class="dot"></span>Online</span>
|
|
<strong id="online-count">{{.Current}}</strong>
|
|
<span class="muted" id="refresh-status">Dane aktualne</span>
|
|
</div>
|
|
<nav class="top-actions" aria-label="Nawigacja">
|
|
<a class="btn ghost" href="{{.VoiceURL}}"><svg class="icon"><use href="#icon-zap"/></svg><span class="btn-label">Połącz</span></a>
|
|
<a class="btn primary" href="/channel"><svg class="icon"><use href="#icon-plus-circle"/></svg><span class="btn-label">Utwórz kanał</span></a>
|
|
<button class="theme-toggle" type="button" aria-label="Przełącz jasny/ciemny motyw" title="Jasny / ciemny motyw">
|
|
<svg class="icon ic-sun"><use href="#icon-sun"/></svg>
|
|
<svg class="icon ic-moon"><use href="#icon-moon"/></svg>
|
|
</button>
|
|
</nav>
|
|
<div class="route-progress" id="route-progress" hidden><span></span></div>
|
|
</header>
|
|
|
|
<main class="content">
|
|
<section class="page-head">
|
|
<div>
|
|
<p class="eyebrow">Statystyki serwera</p>
|
|
<h1>Aktywność TeamSpeak 3</h1>
|
|
<p>Historia liczby użytkowników połączonych z serwerem.</p>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="cards" aria-label="Podsumowanie">
|
|
<div class="card">
|
|
<svg class="icon"><use href="#icon-users"/></svg>
|
|
<div><span class="k">Online teraz</span><div class="v">{{.Current}}{{if .InfoAvailable}}{{if gt .MaxClients 0}}<span class="vs muted"> / {{.MaxClients}}</span>{{end}}{{end}}</div></div>
|
|
</div>
|
|
<div class="card">
|
|
<svg class="icon"><use href="#icon-clock"/></svg>
|
|
<div><span class="k">Uptime</span><div class="vs">{{if .InfoAvailable}}{{.Uptime}}{{else}}—{{end}}</div></div>
|
|
</div>
|
|
<div class="card">
|
|
<svg class="icon"><use href="#icon-server"/></svg>
|
|
<div><span class="k">Wersja serwera</span><div class="vs">{{if .InfoAvailable}}{{.ServerVersion}}{{else}}—{{end}}</div></div>
|
|
</div>
|
|
<div class="card">
|
|
<svg class="icon"><use href="#icon-sliders"/></svg>
|
|
<div><span class="k">Platforma</span><div class="vs">{{if .InfoAvailable}}{{.ServerPlatform}}{{else}}—{{end}}</div></div>
|
|
</div>
|
|
</section>
|
|
|
|
<p class="section-title">Użytkownicy online</p>
|
|
<section class="graphs" aria-label="Wykresy statystyk">
|
|
{{range .Ranges}}
|
|
<article class="panel js-chart" data-range="{{.Key}}">
|
|
<div class="panel-head">
|
|
<h2>{{.Title}}</h2>
|
|
</div>
|
|
<button class="graph-chart js-graph-open" type="button" aria-label="Powiększ wykres {{.Title}}">
|
|
<canvas class="js-chart-canvas" aria-hidden="true"></canvas>
|
|
<p class="graph-empty muted" hidden>Wczytywanie…</p>
|
|
</button>
|
|
<p class="graph-stats muted js-graph-stats"></p>
|
|
</article>
|
|
{{end}}
|
|
</section>
|
|
</main>
|
|
</div>
|
|
|
|
<div class="lightbox" id="graph-lightbox" hidden aria-hidden="true">
|
|
<button class="lightbox-backdrop" type="button" data-lightbox-close aria-label="Zamknij podgląd"></button>
|
|
<div class="lightbox-dialog" role="dialog" aria-modal="true" aria-label="Powiększony wykres">
|
|
<button class="btn ghost lightbox-close" type="button" data-lightbox-close><svg class="icon"><use href="#icon-x"/></svg>Zamknij</button>
|
|
<h2 class="lightbox-title" id="lightbox-title"></h2>
|
|
<canvas id="lightbox-canvas" class="lightbox-canvas"></canvas>
|
|
<p class="graph-stats muted" id="lightbox-stats"></p>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>{{end}}
|