<!DOCTYPE html>

<html>

<head>

	<link rel="stylesheet" type="text/css" href="../css/main.css">

	<link rel="icon" type="image/svg+xml" href="../images/logo.svg">

	<meta charset="UTF-8">

	<script defer src="../js/main.js"></script>

	<title>Minetrack</title>

</head>

<body>

	<div id="tooltip"></div>

	<div id="status-overlay">
		<img class="logo-image" src="../images/logo.svg">
		<h1 class="logo-text">Minetrack</h1>
		<div id="status-text">Connecting...</div>
	</div>

	<div id="push">

		<div id="perc-bar"></div>

		<header>
			<div class="header-possible-row-break column-left">
				<img class="logo-image" src="../images/logo.svg">
				<h1 class="logo-text">Minetrack</h1>
				<p class="logo-status">Counting <span class="global-stat" id="stat_totalPlayers">0</span> players on <span class="global-stat" id="stat_networks">0</span> Minecraft servers.</p>
			</div>

			<div class="header-possible-row-break column-right">
				<div id="sort-by" class="header-button header-button-single"><span class="icon-sort-amount-desc"></span> Sort By<br><strong id="sort-by-text">...</strong></div>
				
				<div id="settings-toggle" class="header-button header-button-single"><span class="icon-gears"></span> Graph Controls</div>

				<div class="header-button header-button-group" title="Sessions" id="mojang-status_Sessions">
					<span class="icon-globe"></span><strong>Sessions</strong>
					<p class="mojang-status-text" id="mojang-status-text_Sessions">...</p>
				</div>
				<div class="header-button header-button-group" title="Skins" id="mojang-status_Skins">
					<span class="icon-street-view"></span><strong>Skins</strong>
					<p class="mojang-status-text" id="mojang-status-text_Skins">...</p>
				</div>
				<div class="header-button header-button-group" title="Auth" id="mojang-status_Auth">
					<span class="icon-lock"></span><strong>Auth</strong>
					<p class="mojang-status-text" id="mojang-status-text_Auth">...</p>
				</div>
				<div class="header-button header-button-group" title="API" id="mojang-status_API">
					<span class="icon-code"></span><strong>API</strong>
					<p class="mojang-status-text" id="mojang-status-text_API">...</p>
				</div>
			</div>
		</header>

		<div id="big-graph"></div>

		<div id="big-graph-controls">
			<div id="big-graph-controls-drawer">
				<div id="big-graph-checkboxes"></div>

				<span class="graph-controls-setall">
					<a minetrack-show-type="all" class="button graph-controls-show"><span class="icon-eye"></span> Show All</a>
					<a minetrack-show-type="none" class="button graph-controls-show"><span class="icon-eye-slash"></span> Hide All</a>
					<a minetrack-show-type="favorites" class="button graph-controls-show"><span class="icon-star"></span> Only Favorites</a>
				</span>
			</div>
		</div>

		<div id="server-list"></div>

	</div>

	<footer id="footer">
		<span class="icon-code"></span> Powered by open source software - <a href="https://github.com/Cryptkeeper/Minetrack">make it your own!</a>
	</footer>

</body>

</html>