<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Ingress verification failed</title>
		<style>
			* {
				margin: 0;
				padding: 0;
				box-sizing: border-box;
			}

			html,
			body {
				height: 100%;
				width: 100%;
			}

			body {
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.container {
				text-align: center;
				padding: 80px 50px 100px 50px;
				/* background-color: #f5f5f5; */
				border-radius: 10px;
			}

			.content {
				margin: 20px 0;
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.content input {
				height: 40px;
				line-height: 40px;
				width: 420px;
				padding: 0 8px;
				outline: none;
				border: #dcdfe6 1px solid;
				color: #666;
				font-size: 14px;
				border-top-left-radius: 4px;
				border-bottom-left-radius: 4px;
			}

			.content input:focus {
				border: #20a43a 1px solid;
			}

			.content button {
				background-color: #20a43a;
				border: none;
				height: 40px;
				line-height: 40px;
				width: 100px;
				color: #fff;
				cursor: pointer;
				border-top-right-radius: 4px;
				border-bottom-right-radius: 4px;
			}

			.content button:hover {
				background-color: #18842d;
			}

			.desc,
			.footer {
				font-size: 12px;
				color: #666;
			}
			.desc {
				margin-bottom: 10px;
				text-align: left;
				margin-left: 12px;
			}
			.btlink {
				color: #20a53a;
			}
			.jump-input {
				border-color: #dcdfe6;
				color: #999;
			}
			.help li {
				color: #999;
				margin-top: 5px;
			}

			code {
				background-color: #dcdfe699;
				font-weight: 600;
				padding: 4px 6px;
				border-radius: 2px;
				color: #666;
			}

			.logo {
				cursor: pointer;
			}
		</style>
	</head>

	<body>
		<div class="container">
			<div class="logo">
				<img
					style="width: 200px"
					src="data:image/png;base64,[encoded data, 11776 characters]"/>
			</div>
			<div class="title" style="font-size: 22px; margin-top: 16px; color: black">Safety entrance error!</div>
			<div class="content"><input class="jump-input" type="text" /><button class="btlink" type="">Access panel</button></div>
			<div class="desc">
				<ul class="help">
					<li>The safe entrance can effectively protect the panels from risks such as malicious scanning and brute.</li>
					<li>Please fill in the correct security entrance at the end of the URL in the input box, and then click the "Click to Jump" button</li>
					<li>If you forget the safe entrance, log in to SSH and execute the command <code>bt default</code>, View the correct panel login information</li>
				</ul>
			</div>
		</div>
		<script type="text/javascript">
			var input = document.querySelector('input');
			var button = document.querySelector('button');
			var skipHref = function () {
				window.location.href = input.value;
			};
			input.onkeydown = function (e) {
				if (e.keyCode === 13) skipHref();
			};
			button.onclick = skipHref;
			input.value = location.origin + '/';
			input.focus();

			var logo = document.querySelector('.logo');
			logo.onclick = function () {
				window.open('https://www.aapanel.com/new/download.html?invite_code=aapanellogin');
			};
		</script>
	</body>
</html>
