104 lines
4.7 KiB
HTML
104 lines
4.7 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">
|
|
<svg class="icon" width="24" height="24"><use href="#icon-headset"/></svg>
|
|
<span>Panel serwera</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>Połącz</a>
|
|
<a class="btn primary" href="/channel"><svg class="icon"><use href="#icon-plus-circle"/></svg>Utwórz kanał</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>
|
|
|
|
<div class="body">
|
|
<aside class="sidebar">
|
|
<nav class="nav">
|
|
<a class="active" href="/stats"><svg class="icon"><use href="#icon-activity"/></svg>Statystyki</a>
|
|
<a href="/channel"><svg class="icon"><use href="#icon-plus-circle"/></svg>Utwórz kanał</a>
|
|
<a href="{{.VoiceURL}}"><svg class="icon"><use href="#icon-zap"/></svg>Połącz z TS3</a>
|
|
</nav>
|
|
<p class="nav-section">Serwer</p>
|
|
<div class="nav-server" title="{{if .InfoAvailable}}{{.ServerName}}{{end}}">
|
|
<svg class="icon"><use href="#icon-server"/></svg><span class="mono">{{if .InfoAvailable}}{{.ServerName}}{{else}}—{{end}}</span>
|
|
</div>
|
|
</aside>
|
|
|
|
<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">Wykresy obecności</p>
|
|
<section class="graphs" aria-label="Wykresy statystyk">
|
|
{{range .Ranges}}
|
|
<article class="panel">
|
|
<div class="panel-head">
|
|
<div>
|
|
<h2>{{.Title}}</h2>
|
|
<p>Liczba użytkowników online</p>
|
|
</div>
|
|
</div>
|
|
<button class="graph-image-button js-graph-open" type="button" data-full="/graph/{{.Key}}.png" data-full-light="/graph/{{.Key}}-light.png" aria-label="Powiększ wykres {{.Title}}">
|
|
<img class="js-live-graph" loading="lazy" src="/graph/{{.Key}}.png" data-src="/graph/{{.Key}}.png" data-src-light="/graph/{{.Key}}-light.png" alt="{{.Title}}">
|
|
</button>
|
|
</article>
|
|
{{end}}
|
|
</section>
|
|
</main>
|
|
</div>
|
|
</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>
|
|
<img id="lightbox-image" src="" alt="Powiększony wykres">
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>{{end}}
|