<style type="text/css">div.guide{top:0}div.center-logo{margin:40px auto 10px;width:219px;height:32px;background:url(/luci-static/images/phicomm.png?_=20191016014108) no-repeat center;background-size:contain}p.web-site{margin:30px auto 60px;font-size:17px;color:#909396}h1.router-name{margin:90px auto;color:#909396}span.router{font-size:22px}span.router-model{margin-left:10px;font-size:16px}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}input.login-btn{color:#FFF;font-size:16px;cursor:pointer;border:0;height:40px;width:236px;line-height:34px;vertical-align:middle;background:url(/luci-static/images/button.png?_=20191016014108) no-repeat center;background-size:contain;background:none\9;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='./luci-static/images/button.png',sizingMethod='scale')!important}span.desc-lbl a{color:#4f5356;text-decoration:none}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:40px 50px 40px}@media screen and (max-height:520px) and (min-height:20px){div.footer{display:none}div.guide{bottom:0}h1.router-name{margin:60px auto}}</style>
<script type="text/javascript">
	(function () {
		if (ROUTER.footerType == 1) {
			$("#Hotline").hide();
			$("#SwVersion").show();
			$("#ShowAgreement").addClass("items");
			$("#DevMac").addClass("items");
		} else {
			$("#Hotline").show();
			$("#SwVersion").hide();
		}

		$("#Start").click(function () {
			stateman.go("setLgPwd");
		});

		$("i.icon-check").click(function () {
			var val = parseInt($(this).attr("data-value"));
			if (0 == val) {
				$(this).attr("data-value", "1").css("color", "#1DD34D").removeClass("icon_select_off").addClass("icon_select_on");
			} else {
				$(this).attr("data-value", "0").css("color", "#4F5356").removeClass("icon_select_on").addClass("icon_select_off");
			}

			var btn = $(this).attr("data-toggle-btn");
			if (btn) {
				var $btn = $("#" + btn);
				var bg = $btn.css("backgroundImage");

				if (1 == val) {
					bg = bg.replace("button", "button_disable");
					$btn.attr("disabled", "disabled").css("backgroundImage", bg);
				} else {
					bg = bg.replace("button_disable", "button");
					$btn.removeAttr("disabled").css("backgroundImage", bg);
				}
			}
		}).each(function () {
			var val = $(this).attr("data-value") || 0;
			if (1 == val) {
				$(this).attr("data-value", "1").css("color", "#1DD34D").removeClass("icon_select_off").addClass("icon_select_on");
			} else {
				$(this).attr("data-value", "0").css("color", "#4F5356").removeClass("icon_select_on").addClass("icon_select_off");
			}

			var btn = $(this).attr("data-toggle-btn");
			if (btn) {
				var $btn = $("#" + btn);
				var bg = $btn.css("backgroundImage");

				if (0 == val) {
					bg = bg.replace("button", "button_disable");
					$btn.attr("disabled", "disabled").css("backgroundImage", bg);
				} else {
					bg = bg.replace("button_disable", "button");
					$btn.removeAttr("disabled").css("backgroundImage", bg);
				}
			}
		});

		var contentScroll = new NiceScroll("Main");
		contentScroll.init();
	})();
</script>
<%
	local para = {device = {info = {}}, welcome = {config = {}}}
	local result = tpl_get_data(para)
	local sw_ver = result[K_MODULE].device.info.sw_ver
	local dev_mac = result[K_MODULE].device.info.mac
	local agreement = result[K_MODULE].welcome.config.agreement
-%>
<%+language%>
<div id="Main" class="guide center-container">
	<div class="vertical-center">
		<div class="center-logo"></div>
		<p class="web-site">{%label.phicommWebSite%}</p>
		<h1 class="router-name">
			<span class="router">{%label.welcome%}</span>
		</h1>
		<div class="login-con">
			<ul class="set-con">
				<input id="Start" class="login-btn" type="button" value="{%btn.start%}" />
			</ul>
			<ul class="set-con">
				<i class="tip-l icon-check" data-value='<%=agreement%>' data-toggle-btn="Start"></i>
				<span class="desc-lbl">
					<!--{%label.readAndagree%}&nbsp;<a href="javascript:showUserAgreement();"
						class="user-agreement">{%label.theUserAgreement%}</a>-->
				</span>
			</ul>
		</div>
	</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>
