<html>
<head>
	<meta charset="UTF-8">
	<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
	<script src="bower_components/jquery/dist/jquery.min.js"></script>
	<title>HandyHost</title>
	<link rel="stylesheet" type="text/css" href="./intro/css/appVersionMeta.css" />
	<style>
		body,html{
			background:#111;
			padding:0;
			margin:0;
			font-family: Helvetica, Arial, Sans-serif;
		}
		#handyhost{
			float:left;
			width: 100%;
			height: 80%;
			text-align: center;
		}
		#handyhost img{
			height: 80%;
		}
		#icons{
			float:left;
			width: 100%;
			height: 20%;
		}
		#icons a{
			float:left;
			width: 33%;
			height: 100%;
			text-align:center;
		}
		.sia img{
			max-width: 90%;
			max-height: 60%;
		}
		.dvpn img{
			max-width: 80%;
			max-height: 90%;
		}
		.akt img{
			max-width:80%;
			height: 50%;
		}
		#icons a:hover{
			background:rgba(200,200,200,0.1);
		}
		@media (orientation: portrait) {
			#handyhost{
				height: 60%;
			}
			#icons{
				height: 40%;
			}
			#icons a{
				width: 100%;
				height: 33%;
			}
		}
	</style>
	<script src="/socket.io/socket.io.js"></script>
</head>
<body>
	<div id="appVersionMeta">
		<ul class="versionInfo">
			<li class="HandyHost">
				HandyHost 
				<span class="version"> ---</span>
			</li>
			<li class="Akash">
				Akash 
				<span class="version"> ---</span>
			</li>
			<li class="Sia">
				Sia 
				<span class="version"> ---</span>
			</li>
			<li class="DVPN">
				DVPN 
				<span class="version"> ---</span>
			</li>
			<li class="lowres">
				<label for="fancyAnimations">Fancy Animations</label> 
				<input type="checkbox" id="fancyAnimations" />
			</li>
		</ul>
	</div>
	
	<div id="handyhost">
		<img src="./intro/svg/HandyHost.svg" />
	</div>
	<div id="icons">
		<a class="dvpn" href="./dvpn.html">
			<img src="./intro/svg/sentinel.svg" />
		</a>
		<a class="akt" href="./akt.html">
			<img src="./intro/svg/akash.svg" />
		</a>
		<a class="sia" href="./sia.html">
			<img src="./intro/svg/sia.svg" />
		</a>

	</div>
	<script>
		function doResize($this,target){
			const h = $(target).height();
			const imgH = $this.height();
			const marginTop = Math.abs(h - imgH);
			$this.css('margin-top',marginTop / 2);
		}
		
		$('#icons img').on('load',function(){
			doResize($(this),'#icons a');
		})
		$('#handyhost img').on('load',function(){
			doResize($(this),'#handyhost');
			
		})
		$(window).on('resize',()=>{
			$('#icons img').each(function(){
				doResize($(this),'#icons a');
			})
			doResize($('#handyhost img'),'#handyhost');
		})
	</script>
	<script type="module">
		import {CommonUtils} from './js/CommonUtils.js';
		const utils = new CommonUtils();
		let doFancyAnimations = window.localStorage.getItem('fancyAnimations');
		if(doFancyAnimations == 'true'){
			$('#fancyAnimations').prop('checked',true);
		}
		else{
			$('#fancyAnimations').prop('checked',false);
		}
		$('#fancyAnimations').off('change').on('change',()=>{
			const val = $('#fancyAnimations').is(':checked');
			window.localStorage.setItem('fancyAnimations',val);
			if(!val){
				window.location.href = 'lowres.html';
			}
			else{
				window.location.href = 'index.html'
			}
		})
		utils.getIntroVersionInfo();
	</script>
</body>
</html>