<style type="text/css">div.main{font-size:0;position:absolute;top:0;left:0;right:0;margin:auto;bottom:160px;text-align:center}div.main-con{display:inline-block;vertical-align:middle;margin:auto}div.main:after{content:'';display:inline-block;vertical-align:middle;height:100%}div.center-logo{margin:40px auto;width:219px;height:32px;background:url(/luci-static/images/phicomm.png?_=20191016014108) no-repeat center;background-size:contain}h1.router-name{color:#909396;text-align:center;margin-top:30px;margin-bottom:40px}span.router{font-size:20px}span.router-model{margin-left:10px;font-size:16px}div.center-router{margin:60px auto;width:140px;height:102px;background:url(/luci-static/images/router.svg?_=20191016014108) no-repeat;background-size:contain}div.bg-map{position:absolute;left:0;right:0;top:50%;margin:-130px auto 0;width:771px;height:371px;background:url(/luci-static/images/bg_map.jpg?_=20191016014108) no-repeat center;background-size:contain;z-index:-10}div.login-con{height:130px}li.login-con{width:200px;border-radius:18px 0 0 18px;border-width:1px;border-right-width:0;border:1px solid #DDD}li.text-con input.text-eye{width:99px}li.login-con i.icon{display:inline-block;color:#909396;font-size:24px;line-height:24px;width:34px;border-right:1px solid #DDD;vertical-align:middle}li.text-con-focus i.icon{border-color:#ffbe62}li.login-con input.text{line-height:32px;height:32px;border-width:0}input.login-btn{cursor:pointer;border:0;height:34px;width:79px;line-height:34px;vertical-align:middle;background:url(/luci-static/images/bg_botton.png?_=20191016014108) no-repeat;background-size:contain;background:none\9;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='./luci-static/images/bg_botton.png',sizingMethod='scale')!important}li.remember-pwd{margin:60px auto 20px}i.check-icon{cursor:pointer;font-size:32px;line-height:32px;color:#b2b2b2;vertical-align:middle}i.checked{color:#0fd245}li.remember-pwd span{color:#4f5356;font-size:15px;line-height:32px;vertical-align:middle}div.err-note{text-align:left;margin:10px auto 0;position:absolute}div.footer{width:100%;min-width:980px;height:160px;position:absolute;bottom:0;font-size:14px;color:#909396;background-color:#2a2c32;text-align:center}div.separate-line{height:2px;background:url(/luci-static/images/color_line.png?_=20191016014108) repeat}div.download-app{color:#FFF;font-size:12px;position:absolute;top:30px;right:0}div.pic-code{margin:0 auto 10px;width:87px;height:87px;background:url(/luci-static/images/pic_code.png?_=20191016014108) no-repeat center;background-size:contain}div.hotline{display:inline-block;width:240px;text-align:left}i.phone-img{font-size:28px;color:#ff8000}span.phone-tip{font-size:14px;line-height:28px;vertical-align:top;color:#767d82;margin-top:3px;margin-left:5px}p.phone-num{font-size:24px;color:#ff8000;margin-top:10px}p.copyright{margin-top:30px}div.route-info{display:inline-block;text-align:left}.items{display:inline-block;width:230px;text-align:center}div.info{position:relative;padding-top:50px;margin:auto}div.info a{color:#909396;margin-right:45px}ul.set-con{margin:20px 0 10px 0}i.err-icon{margin-left:0}p.note-str{width:254px}div.download-small{color:#919293;font-size:12px;position:fixed;bottom:26px;right:44px;display:none}@media screen and (max-height:520px) and (min-height:20px){div.footer{display:none}div.main{bottom:0}div.center-router{margin:40px auto}div.download-small{display:block}}</style>
<%-
	local para = {device = {info = {}}, welcome = {config = {}}}
	local result = tpl_get_data(para)
	local dev_mac = result[K_MODULE].device.info.mac
	local model = result[K_MODULE].device.info.model
	local factory = result[K_MODULE].welcome.config.factory
-%>
<script type="text/javascript">
	(function () {
		var checked = "checked";
		var PWD_KEY = "loginPwd";

		if (1 == <%= factory %>) {
			stateman.emit("reset");
			return;
		}

		if (ROUTER.footerType == 1) {
			$("#Hotline").hide();
			$("#SwVersion").show();
			$("#ShowAgreement").addClass("items");
			$("#DevMac").addClass("items");
		} else {
			$("#Hotline").show();
			$("#SwVersion").hide();
		}

		//解决ie8,9在查看用户协议后，密码显示明文问题
		if ((!isIE) || (isIE && IEver > 9)) {
			$("#Pwd").attr("placeholder", "{%label.inputPwd%}");
		}

		(function () {	// 尝试从本地读取密码
			var pwd = null;
			var check = $("#Check");

			try {
				pwd = localStorage.getItem(PWD_KEY);
			} catch (e) { };

			if (pwd != null && pwd.length > 0) {
				check.addClass(checked);
				$("#Pwd").val(pwd);
			} else {
				check.removeClass(checked);
			}

			check.click(function () {
				if ($(this).hasClass(checked)) {
					$(this).removeClass(checked);
				} else {
					$(this).addClass(checked);
				}
			});

			try {	// fix Bug KB-440
				sessionLS.removeItem("upgradeWgt");
			} catch (e) { }
		})();

		$("#Pwd").bind("keyup", function (event) {
			if (event.keyCode == 13) {
				$("#Save").click();
			}
		});

		function checkPwd(password) {
			if ("" == password) {
				return E_LOGIN_PWD_BLANK;
			}

			return E_NONE;
		}

		function refreshLogin(guide) {
			if ($("#Check").hasClass(checked)) {
				try {
					localStorage.setItem(PWD_KEY, $("#Pwd").val());
				} catch (e) { };
			}

			if (1 == guide) {
				stateman.go(ROUTER.guideList[1], { replace: true });
			} else {
				if ("" == stateman.previous.name || stateman.current.name == stateman.previous.name || "login" == stateman.previous.name) {
					stateman.go("pc.netState", { replace: true });
				} else {
					stateman.go(stateman.previous.name, { replace: true });
				}
			}
		}

		$("#Save").click(function () {
			if (false == $("#Check").hasClass(checked)) {
				try {
					localStorage.removeItem(PWD_KEY);
				} catch (e) { };
			}

			var pwd = $("#Pwd").val();

			if (handleError(checkPwd(pwd))) {
				return;
			}

			var pwdEncoded = new Base64().base64encode(pwd);
			var data = {};

			data.username = "admin";
			data.password = pwdEncoded;

			apiLogin(data, function (ret) {
				var code = ret[ERR_CODE];
				if (code == 0) {
					var goGuide = ret[K_MODULE].security.login.guide;
					handleError(code, showNote) ? closeLoading() : refreshLogin(goGuide);
				} else {
					handleError(code);
				}
			});
		});

		var contentScroll = new NiceScroll("Main");
		contentScroll.init();
	})();
</script>
<%+language%>
<div id="Main" class="main center-con">
	<div class="main-con">
		<div class="center-logo"></div>
		<h1 class="router-name">
			<span class="router">{%label.phicommRouter%}</span>
			<span class="router-model"><%=model%></span>
		</h1>
		<div class="center-router"></div>
		<div class="login-con">
			<ul class="set-con">
				<li class="text-con login-con">
					<i class="icon icon_lock"></i>
					<input class="text hover text-eye" type="password" autocomplete="new-password" maxLength="63"
						id="Pwd" />
					<i class="tip icon-eye" data-value="0"></i>
				</li>
				<input id="Save" class="login-btn" type="button" />
				<div class="err-note hidden">
					<i class="err-icon icon_remind_line"></i>
					<p class="note-str"></p>
				</div>
				<li class="remember-pwd">
					<i id="Check" class="check-icon icon_select_on"></i><span>{%label.rememberPwd%}</span>
				</li>
			</ul>
		</div>
	</div>
	<div class="download-small">
		<div class="pic-code"></div>
		<p>{%label.scanDownloadApp%}</p>
	</div>
	<div class="bg-map"></div>
</div>
<div class="footer">
	<div class="separate-line"></div>
	<div class="info center-con">
		<!--
		<div id="Hotline" class="hotline hidden">
			<i class="icon icon_phone phone-img"></i><span class="phone-tip">{%label.hotline%}</span>
			<p class="phone-num">4007-567-567</p>
		</div>
	-->
		<div class="route-info">
			<span id="SwVersion" class="items hidden">{%label.swVersion%}{%label.colon%}<span><%=sw_ver%></span></span>
			<!--<a href="javascript:showUserAgreement();" id="ShowAgreement" class="user-agreement">{%label.userAgreement%}</a> -->
			<span id="DevMac">{%label.macAddr%}{%label.colon%}<span id="RouterMac"><%=dev_mac%></span></span>
			<!--<p class="company copyright">{%label.phicommTechnologyCoLtd%}</p> -->
		</div>
		<!--
		<div class="download-app">
			<div class="pic-code"></div>
			<p>{%label.scanDownloadApp%}</p>
		</div>
	-->
	</div>
</div>