v0.4.1
This commit is contained in:
Mateusz Gruszczyński committed
1 parent
439cc20dcf
commit
722a49f6bc
14 files changed
+564
-283
No files matched your search
@@ -11,9 +11,9 @@
|
||||
{{template "icons" .}}
|
||||
<div class="shell">
|
||||
<header class="topbar">
|
||||
<a class="brand" href="/stats">
|
||||
<a class="brand" href="/stats" title="{{if .InfoAvailable}}{{.ServerName}}{{end}}">
|
||||
<svg class="icon" width="24" height="24"><use href="#icon-headset"/></svg>
|
||||
<span>Panel serwera</span>
|
||||
<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>
|
||||
@@ -21,8 +21,8 @@
|
||||
<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>
|
||||
<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>
|
||||
@@ -31,72 +31,59 @@
|
||||
<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>
|
||||
<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>
|
||||
</aside>
|
||||
</section>
|
||||
|
||||
<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>
|
||||
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<img id="lightbox-image" src="" alt="Powiększony wykres">
|
||||
<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>
|
||||
|
||||
Reference in new issue
Block a user