<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>下载旁路电缆监测</title>
    <script type="text/javascript">
		 var resetWin=1;
		 (function (doc, win) {
				var docEl = doc.documentElement,
					resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
					recalc = function () {
						var clientWidth = docEl.clientWidth;
						if (!clientWidth) return;
						if(clientWidth>=640){
							docEl.style.fontSize = '100px';
						}else{
							docEl.style.fontSize = 100 * (clientWidth / 640) + 'px';
						}
					};
				resetWin=recalc;
				if (!doc.addEventListener) return;
				win.addEventListener(resizeEvt, recalc, false);
				doc.addEventListener('DOMContentLoaded', recalc, false);
			})(document, window);
	</script>
    <style>
    		body{
	    		width:100%;
			    font-weight:400;
				color:rgb(153,153,153);
				position:relative;
				font-family: 'PingFangSC-Regular','微软雅黑',"Microsoft YaHei";
	    	}
			 img{width: 100%}
			 body,div,p,img{padding: 0;margin: 0;}
			.images{
				width: 1024px;
				margin: 0 auto;
				position:relative
			}   
			
	    	.title{
	    	    position: absolute;
			    top: 210px;
			    width: 100%;
			    text-align: center;
			    font-size: 60px;
			    color: rgb(246,46,59);
	    	}
			.content{
				font-size: 28px;
		   		text-align: center;
		    	padding: 0 0 20px;
				color:#999;
			}
			.contentFirst{
				font-size: 42px;
		   		text-align: center;
		    	padding: 0 ;
				color:#333;
			}
			.download{
			    width: 1024px;
			    margin:0 -512px;
				left: 50%; 
			 }
			.confing{
			    width: 48%;
				margin: 0 0 20px;
				background: linear-gradient( 145deg, #ffac23 10%, #ffca48 100%);
				background-size: 100%;
				height: 65px;
				line-height: 65px;
				text-align: center;
				border-radius: 30px;
				font-size:36px;
				color: #fff;
				float: left
			}
			.confingRight{
			   float: right
			}
	@media screen and (min-width:600px) and (max-width:1024px){	/*当屏幕宽度在600~1024px*/
		   .images{
	    		width: 80%;
				margin: 0 auto;
				position:relative
	    	}
	    	.title{
	    	    position: absolute;
			    top: 110px;
			    width: 100%;
			    text-align: center;
			    font-size: 40px;
			    color:rgb(246,46,59);
	    	}
			.download{
	    		width: 76%;
	    		padding:0 12%;
			 }  
			.content{
				font-size: 28px;
		   		text-align: center;
		    	padding: 0 0 10px;
				color:#999;
			}
			.contentFirst{
				font-size: 42px;
		   		text-align: center;
		    	padding: 0;
				color:#333;
			}
			.confing{
			    width: 48%;
				margin: 0 0 20px;
				background: linear-gradient( 145deg, #ffac23 10%, #ffca48 100%);
				background-size: 100%;
				height: 50px;
				line-height: 50px;
				text-align: center;
				border-radius: 30px;
				font-size:28px;
				color: #fff;
				float: left
			}
			.confingRight{
			   float: right
			   }
	}
    @media screen and (max-width:600px){	/*屏幕宽度在小于等于600px*/
	    	.images{
	    		margin: 0rem 0 0;
	    		width: 100%;
				position:relative;
	    		float: left
	    	}
	    	.title{
	    	    position: absolute;
			    top: 1.5rem;
			    width: 100%;
			    text-align: center;
			    font-size: 0.5rem;
			    color: rgb(246,46,59);
	    	}
	    	.download{
	    		width: 76%;
	    		padding:0 12%;
	    		float: left;
	    		margin:0 auto;
				left: 0; 
	    	}
	    	.confing{
	    	    width: 48%;
			    margin: 0 0 0.2rem;
			    background: linear-gradient( 145deg, #ffac23 10%, #ffca48 100%);
				background-size: 100%;
				height: 0.7rem;
			    line-height: 0.7rem;
			    text-align: center;
			    font-size: 0.28rem;
			    border-radius: 0.5rem;
			    color: #fff;
			    float: left;
			   }
			.confingRight{
			   float: right
			   }
			.content{
			   	width: 93%;
			   	float: left;
			   	font-size: 0.28rem;
			   	padding: 0 3.5% 0.2rem;
			   	text-align: center;
				color:#999;
			   	line-height:0.5rem;
			   }
			.contentFirst{
			   	width: 93%;
			   	float: left;
				font-size: 0.42rem;
		   		text-align: center;
			   	padding: 0 3.5% ;
				color:#333;
			}
		   }
    </style>
	<link rel="stylesheet" href="buttonLoading/ladda-themeless.min.css">
</head>
<body>
	<div class="images">
		<img src="static/cover.png" style="display:block">
		<?php if(!empty($_REQUEST["code"])&&isset($_REQUEST["code"])){?>
		<p class="contentFirst">邀请码:  <?php echo $_REQUEST["code"];?></p>
		<p class="content">安装登录后注册请填写以上邀请码，该app请无视</p>
		<?php  } ?>
	</div>
	<div class="download" style="position:fixed;bottom:10px;">
		<div id="ios" style="display:none;float:none;margin:0px auto;width:80%;" class="confing" onclick="alert('ios还未上架');return;location.href='https://itunes.apple.com/us/app/%E5%A4%A9%E5%A4%A9%E5%90%91%E5%B0%9A/id1375914709?l=zh&ls=1&mt=8'">下载APP</div>
		<div id="android" style="display:none;float:none;margin:0px auto;width:80%;" class="confing confingRight ladda-button"  onclick="location.href='cable.apk'" data-style="expand-left">下载APP</div>
	</div>
</body>
<script src="buttonLoading/spin.min.js"></script>
<script src="buttonLoading/ladda.min.js"></script>
<script type="text/javascript">
var u = navigator.userAgent
var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
document.getElementsByTagName('img')[0].style.height=document.documentElement.clientHeight+'px';
if(isiOS){
	document.getElementById('ios').style.display="block";
}
else{
	document.getElementById('android').style.display="block";
}
Ladda.bind( '#android', {
				callback: function( instance ) {

					setTimeout( function() {
instance.stop();
}, 2000 );
				}
			} );
</script>
</html>