<!DOCTYPE html>
<html lang="ja">
	<head>
		<title>TheDesk</title>
		<meta content="width=device-width,initial-scale=1.0" name="viewport" />
		<link href="./node_modules/materialize-css/dist/css/materialize.css" type="text/css" rel="stylesheet" />
		<link href="./css/font-awesome.css" rel="stylesheet" type="text/css" />
		<link href="./css/themes.css" type="text/css" rel="stylesheet" />
		<link href="./css/master.css" type="text/css" rel="stylesheet" />
		<link href="https://fonts.googleapis.com/icon?family=Material+Icons|Open+Sans:300|Baloo+Bhai" rel="stylesheet" />
		<meta charset="utf-8" />
		<style>
			body {
				font-family: 'Open Sans';
				-webkit-app-region: drag;
				cursor: move;
				padding: 5px;
				padding-top: 15px;
			}

			a,
			button {
				-webkit-app-region: no-drag;
			}

			.container {
				width: 100%;
				display: grid;
				grid-template-columns: 1fr 1fr;
				grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
				grid-template-areas: 'name1 data1' 'name2 data2' 'name3 data3' 'name4 data4' 'name5 data5' 'name6 data6';
				text-align: left;
				margin: 5px;
			}

			.area-name1 {
				grid-area: name1;
			}

			.area-data1 {
				grid-area: data1;
			}

			.area-name2 {
				grid-area: name2;
			}

			.area-data2 {
				grid-area: data2;
			}

			.area-name3 {
				grid-area: name3;
			}

			.area-data3 {
				grid-area: data3;
			}

			.area-name4 {
				grid-area: name4;
			}

			.area-data4 {
				grid-area: data4;
			}

			.area-name5 {
				grid-area: name5;
			}

			.area-data5 {
				grid-area: data5;
			}

			.area-name6 {
				grid-area: name6;
			}

			.area-data6 {
				grid-area: data6;
			}
		</style>
	</head>

	<body class="center" style="overflow: hidden;">
		<script type="text/javascript" src="./node_modules/jquery/dist/jquery.js"></script>
		<script type="text/javascript" src="./js/platform/first-not-view.js"></script>
		<script type="text/javascript" src="./node_modules/materialize-css/dist/js/materialize.js"></script>
		<img src="./img/desk.svg" style="max-width: 62%;" />
		<h5>TheDesk</h5>
		<div class="container">
			<div class="area-name1">Display version</div>
			<div class="area-data1" id="now"></div>
			<div class="area-name2">Internal version</div>
			<div class="area-data2" id="ver"></div>
			<div class="area-name3">Commit(7chars)</div>
			<div class="area-data3" id="hash"></div>
			<div class="area-name4">Chromium</div>
			<div class="area-data4" id="chrome"></div>
			<div class="area-name5">Electron</div>
			<div class="area-data5" id="electron"></div>
			<div class="area-name6">Node.js</div>
			<div class="area-data6" id="node"></div>
		</div>
		<div class="cp">
			Copyright &copy; TheDesk 2018<br />
			Main developer(author): <a href="https://1m.cutls.com/@Cutls" target="_blank">Cutls P</a><br />
			Thanks:<a href="https://minohdon.jp/@toneji" target="_blank">toneji</a>/<a href="https://popon.pptdn.jp/@popn_ja" target="_blank">popn_ja</a>/<a
				href="https://pl.kpherox.dev/kPherox"
				target="_blank"
				>kPherox</a
			>
			and all users
			<img draggable="false" style="width: 0.8rem; top: 1px; margin-left: 1px; position: relative;" alt="❤️" title=":heart:" src="https://twemoji.maxcdn.com/2/72x72/2764.png" />
			<br /><a href="https://thedesk.top" target="_blank">Web site</a>
		</div>
		<button onclick="window.close()" class="btn waves-effect indigo" style="width: calc(100% - 10px);"><i class="material-icons left">close</i>Close</button>
		<script type="text/javascript" src="./js/ui/theme.js"></script>
		<script>
			var about = JSON.parse(localStorage.getItem('about'))
			$('#now').text(localStorage.getItem('ver'))
			$('#node').text(about[0])
			$('#chrome').text(about[1])
			$('#electron').text(about[2])
			if (location.search) {
				var m = location.search.match(/\?ver=([a-zA-Z-0-9.]+)/)
				var ver = m[1]
				$('#ver').text(ver)
			}
			$('#hash').html('<a href="https://github.com/cutls/TheDesk/commits/' + about[3] + '" target="_blank">' + about[3].slice(0, 7) + '</a>')
			$(document).on('click', 'a', (e) => {
				var url = $(e.target).attr('href')
				postMessage(['openUrl', url], '*')
				return false
			})
		</script>
	</body>
</html>