mirror of
https://github.com/liudf0716/apfree_wifidog.git
synced 2025-01-07 03:16:37 +08:00
dos2unix html file
Signed-off-by: Dengfeng Liu <liudengfeng@kunteng.org.cn>
This commit is contained in:
Dengfeng Liu
parent
c99ed45c72
commit
7b0fbdeaf9
@ -1,185 +1,185 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>连接错误</title>
|
||||
<meta http-equiv="pragma" content="no-cache" />
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
||||
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
|
||||
<meta http-equiv="X-UA-COMPATIBLE" content="IE=edge,chrome=1"/>
|
||||
<!--[if lt IE 9]
|
||||
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
|
||||
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
|
||||
<![endif]>-->
|
||||
<style class="cp-pen-styles">
|
||||
body{
|
||||
/*color: #f54f59;*/
|
||||
/*background-color:#585656;*/
|
||||
/*color:#0abcdf;*/
|
||||
background-color:#1f2228;
|
||||
color:#fff;
|
||||
font-family: Helvetica, Arial, sans-serif;
|
||||
font-size: 1.8rem;
|
||||
font-weight: 300;
|
||||
/*background: -webkit-linear-gradient(#fff, #ccc);*/
|
||||
/*background: linear-gradient(#fff, #ccc);*/
|
||||
height:100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
.hder{
|
||||
font-family: "Microsoft YaHei";
|
||||
font-weight:normal;
|
||||
color:#77839b;
|
||||
/*background: linear-gradient(#444, #222);*/
|
||||
padding:10px 0;
|
||||
text-align:center;
|
||||
margin:0;
|
||||
font-size:18px;
|
||||
}
|
||||
.center{
|
||||
text-align: center;
|
||||
margin-top:320px;
|
||||
}
|
||||
|
||||
.circle{
|
||||
position:absolute;
|
||||
border:0.3rem solid #FFF;
|
||||
width:80px;
|
||||
height:80px;
|
||||
border-radius:50px ;
|
||||
margin:1.4rem auto;
|
||||
}
|
||||
.circle span{
|
||||
width:100%;
|
||||
height:100%;
|
||||
line-height: 78px;
|
||||
font-size:60px;
|
||||
}
|
||||
.header{
|
||||
width:100%;
|
||||
font-size: 2rem;
|
||||
font-weight: 700;
|
||||
margin:10px auto;
|
||||
/*text-shadow:0 3px 0px #404853, 0 4px 0px #333333;*/
|
||||
}
|
||||
.error{
|
||||
width:100%;
|
||||
font-family: "Microsoft YaHei";
|
||||
margin: 0 auto;
|
||||
font-size: 1.6rem;
|
||||
/*text-shadow:0 3px 0px #404853, 0 4px 0px #333333;*/
|
||||
font-weight: 100;
|
||||
}
|
||||
.wrap {
|
||||
top: 160px;
|
||||
margin-left: -70px;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
}
|
||||
.red{left: 70px;}
|
||||
.ball,.shadow {
|
||||
border-radius:100%;
|
||||
left: 0;
|
||||
margin: auto;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
}
|
||||
.ball {
|
||||
-webkit-animation: ball 600ms cubic-bezier(0.165, 0.840, 0.440, 1.000) infinite alternate;
|
||||
animation: ball 600ms cubic-bezier(0.165, 0.840, 0.440, 1.000) infinite alternate;
|
||||
height: 80px;
|
||||
width: 80px;
|
||||
text-align: center;
|
||||
line-height: 80px;
|
||||
font-size: 50px;
|
||||
color:#f8dddd;
|
||||
}
|
||||
/*#e55 #b00*/
|
||||
.red .ball{
|
||||
background: -webkit-gradient(linear, left top, left bottom, from(#0abcdf), to(#2573fe));
|
||||
background: -webkit-linear-gradient(#0abcdf, #2573fe);
|
||||
background: linear-gradient(#0abcdf, #2573fe);
|
||||
}
|
||||
.shadow {
|
||||
-webkit-animation: shadow 600ms cubic-bezier(0.165, 0.840, 0.440, 1.000) infinite alternate;
|
||||
animation: shadow 600ms cubic-bezier(0.165, 0.840, 0.440, 1.000) infinite alternate;
|
||||
background: #000;
|
||||
bottom: -160px;
|
||||
height: 25px;
|
||||
width: 75px;
|
||||
}
|
||||
.red .ball,.red .shadow { -webkit-animation-delay: -200ms; animation-delay: -200ms; }
|
||||
@-webkit-keyframes ball {
|
||||
0% {
|
||||
-webkit-transform: translateY( 0 );
|
||||
transform: translateY( 0 );
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: translateY( -80px );
|
||||
transform: translateY( -80px );
|
||||
}
|
||||
}
|
||||
@keyframes ball {
|
||||
0% {
|
||||
-webkit-transform: translateY( 0 );
|
||||
transform: translateY( 0 );
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: translateY( -80px );
|
||||
transform: translateY( -80px );
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes shadow {
|
||||
0% {
|
||||
opacity: 0.2;
|
||||
-webkit-transform: scale( 0.75 );
|
||||
transform: scale( 0.75 );
|
||||
}
|
||||
100% {
|
||||
opacity: 0.05;
|
||||
-webkit-transform: scale( 1 );
|
||||
transform: scale( 1 );
|
||||
}
|
||||
}
|
||||
@keyframes shadow {
|
||||
0% {
|
||||
opacity: 0.2;
|
||||
-webkit-transform: scale( 0.75 );
|
||||
transform: scale( 0.75 );
|
||||
}
|
||||
100% {
|
||||
opacity: 0.05;
|
||||
-webkit-transform: scale( 1 );
|
||||
transform: scale( 1 );
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="wrap red">
|
||||
<div class="shadow"></div>
|
||||
<div class="ball">!</div>
|
||||
</div>
|
||||
|
||||
<section class="center">
|
||||
<!--<div class="wrap red">-->
|
||||
<!--<div class="shadow circle">-->
|
||||
<!--<span>!</span>-->
|
||||
<!--</div>-->
|
||||
<!--<div class="ball"></div>-->
|
||||
<!--</div>-->
|
||||
<article>
|
||||
<h1 class="header">
|
||||
认证服务器
|
||||
</h1>
|
||||
<p class="error">
|
||||
不在线
|
||||
</p>
|
||||
<hr style="width:200px;margin:30px auto 10px;border-bottom:1px solid #3e4042;"/>
|
||||
<h5 class="hder">坤腾畅联</h5>
|
||||
</article>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>连接错误</title>
|
||||
<meta http-equiv="pragma" content="no-cache" />
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
||||
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
|
||||
<meta http-equiv="X-UA-COMPATIBLE" content="IE=edge,chrome=1"/>
|
||||
<!--[if lt IE 9]
|
||||
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
|
||||
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
|
||||
<![endif]>-->
|
||||
<style class="cp-pen-styles">
|
||||
body{
|
||||
/*color: #f54f59;*/
|
||||
/*background-color:#585656;*/
|
||||
/*color:#0abcdf;*/
|
||||
background-color:#1f2228;
|
||||
color:#fff;
|
||||
font-family: Helvetica, Arial, sans-serif;
|
||||
font-size: 1.8rem;
|
||||
font-weight: 300;
|
||||
/*background: -webkit-linear-gradient(#fff, #ccc);*/
|
||||
/*background: linear-gradient(#fff, #ccc);*/
|
||||
height:100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
.hder{
|
||||
font-family: "Microsoft YaHei";
|
||||
font-weight:normal;
|
||||
color:#77839b;
|
||||
/*background: linear-gradient(#444, #222);*/
|
||||
padding:10px 0;
|
||||
text-align:center;
|
||||
margin:0;
|
||||
font-size:18px;
|
||||
}
|
||||
.center{
|
||||
text-align: center;
|
||||
margin-top:320px;
|
||||
}
|
||||
|
||||
.circle{
|
||||
position:absolute;
|
||||
border:0.3rem solid #FFF;
|
||||
width:80px;
|
||||
height:80px;
|
||||
border-radius:50px ;
|
||||
margin:1.4rem auto;
|
||||
}
|
||||
.circle span{
|
||||
width:100%;
|
||||
height:100%;
|
||||
line-height: 78px;
|
||||
font-size:60px;
|
||||
}
|
||||
.header{
|
||||
width:100%;
|
||||
font-size: 2rem;
|
||||
font-weight: 700;
|
||||
margin:10px auto;
|
||||
/*text-shadow:0 3px 0px #404853, 0 4px 0px #333333;*/
|
||||
}
|
||||
.error{
|
||||
width:100%;
|
||||
font-family: "Microsoft YaHei";
|
||||
margin: 0 auto;
|
||||
font-size: 1.6rem;
|
||||
/*text-shadow:0 3px 0px #404853, 0 4px 0px #333333;*/
|
||||
font-weight: 100;
|
||||
}
|
||||
.wrap {
|
||||
top: 160px;
|
||||
margin-left: -70px;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
}
|
||||
.red{left: 70px;}
|
||||
.ball,.shadow {
|
||||
border-radius:100%;
|
||||
left: 0;
|
||||
margin: auto;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
}
|
||||
.ball {
|
||||
-webkit-animation: ball 600ms cubic-bezier(0.165, 0.840, 0.440, 1.000) infinite alternate;
|
||||
animation: ball 600ms cubic-bezier(0.165, 0.840, 0.440, 1.000) infinite alternate;
|
||||
height: 80px;
|
||||
width: 80px;
|
||||
text-align: center;
|
||||
line-height: 80px;
|
||||
font-size: 50px;
|
||||
color:#f8dddd;
|
||||
}
|
||||
/*#e55 #b00*/
|
||||
.red .ball{
|
||||
background: -webkit-gradient(linear, left top, left bottom, from(#0abcdf), to(#2573fe));
|
||||
background: -webkit-linear-gradient(#0abcdf, #2573fe);
|
||||
background: linear-gradient(#0abcdf, #2573fe);
|
||||
}
|
||||
.shadow {
|
||||
-webkit-animation: shadow 600ms cubic-bezier(0.165, 0.840, 0.440, 1.000) infinite alternate;
|
||||
animation: shadow 600ms cubic-bezier(0.165, 0.840, 0.440, 1.000) infinite alternate;
|
||||
background: #000;
|
||||
bottom: -160px;
|
||||
height: 25px;
|
||||
width: 75px;
|
||||
}
|
||||
.red .ball,.red .shadow { -webkit-animation-delay: -200ms; animation-delay: -200ms; }
|
||||
@-webkit-keyframes ball {
|
||||
0% {
|
||||
-webkit-transform: translateY( 0 );
|
||||
transform: translateY( 0 );
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: translateY( -80px );
|
||||
transform: translateY( -80px );
|
||||
}
|
||||
}
|
||||
@keyframes ball {
|
||||
0% {
|
||||
-webkit-transform: translateY( 0 );
|
||||
transform: translateY( 0 );
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: translateY( -80px );
|
||||
transform: translateY( -80px );
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes shadow {
|
||||
0% {
|
||||
opacity: 0.2;
|
||||
-webkit-transform: scale( 0.75 );
|
||||
transform: scale( 0.75 );
|
||||
}
|
||||
100% {
|
||||
opacity: 0.05;
|
||||
-webkit-transform: scale( 1 );
|
||||
transform: scale( 1 );
|
||||
}
|
||||
}
|
||||
@keyframes shadow {
|
||||
0% {
|
||||
opacity: 0.2;
|
||||
-webkit-transform: scale( 0.75 );
|
||||
transform: scale( 0.75 );
|
||||
}
|
||||
100% {
|
||||
opacity: 0.05;
|
||||
-webkit-transform: scale( 1 );
|
||||
transform: scale( 1 );
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="wrap red">
|
||||
<div class="shadow"></div>
|
||||
<div class="ball">!</div>
|
||||
</div>
|
||||
|
||||
<section class="center">
|
||||
<!--<div class="wrap red">-->
|
||||
<!--<div class="shadow circle">-->
|
||||
<!--<span>!</span>-->
|
||||
<!--</div>-->
|
||||
<!--<div class="ball"></div>-->
|
||||
<!--</div>-->
|
||||
<article>
|
||||
<h1 class="header">
|
||||
认证服务器
|
||||
</h1>
|
||||
<p class="error">
|
||||
不在线
|
||||
</p>
|
||||
<hr style="width:200px;margin:30px auto 10px;border-bottom:1px solid #3e4042;"/>
|
||||
<h5 class="hder">坤腾畅联</h5>
|
||||
</article>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,206 +1,206 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>连接错误</title>
|
||||
<meta http-equiv="pragma" content="no-cache" />
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
||||
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
|
||||
<meta http-equiv="X-UA-COMPATIBLE" content="IE=edge,chrome=1"/>
|
||||
<!--[if lt IE 9]
|
||||
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
|
||||
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
|
||||
<![endif]>-->
|
||||
<style class="cp-pen-styles">
|
||||
body{
|
||||
/*color: #f54f59;*/
|
||||
/*background-color:#585656;*/
|
||||
/*color:#0abcdf;*/
|
||||
background-color:#1f2228;
|
||||
color:#fff;
|
||||
font-family: Helvetica, Arial, sans-serif;
|
||||
font-size: 1.8rem;
|
||||
font-weight: 300;
|
||||
/*background: -webkit-linear-gradient(#fff, #ccc);*/
|
||||
/*background: linear-gradient(#fff, #ccc);*/
|
||||
height:100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
.hder{
|
||||
font-family: "Microsoft YaHei";
|
||||
font-weight:normal;
|
||||
color:#77839b;
|
||||
/*background: linear-gradient(#444, #222);*/
|
||||
padding:10px 0;
|
||||
text-align:center;
|
||||
margin:0;
|
||||
font-size:18px;
|
||||
}
|
||||
.center{
|
||||
text-align: center;
|
||||
margin-top:320px;
|
||||
}
|
||||
|
||||
.circle{
|
||||
position:absolute;
|
||||
border:0.3rem solid #FFF;
|
||||
width:80px;
|
||||
height:80px;
|
||||
border-radius:50px ;
|
||||
margin:1.4rem auto;
|
||||
}
|
||||
.circle span{
|
||||
width:100%;
|
||||
height:100%;
|
||||
line-height: 78px;
|
||||
font-size:60px;
|
||||
}
|
||||
.header{
|
||||
width:100%;
|
||||
font-size: 2rem;
|
||||
font-weight: 700;
|
||||
margin:10px auto;
|
||||
/*text-shadow:0 3px 0px #404853, 0 4px 0px #333333;*/
|
||||
}
|
||||
.wrap {
|
||||
top: 160px;
|
||||
margin-left: -70px;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
}
|
||||
.red{left: 70px;}
|
||||
.ball,.shadow {
|
||||
border-radius:100%;
|
||||
left: 0;
|
||||
margin: auto;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
}
|
||||
.ball {
|
||||
-webkit-animation: ball 600ms cubic-bezier(0.165, 0.840, 0.440, 1.000) infinite alternate;
|
||||
animation: ball 600ms cubic-bezier(0.165, 0.840, 0.440, 1.000) infinite alternate;
|
||||
height: 80px;
|
||||
width: 80px;
|
||||
text-align: center;
|
||||
line-height: 80px;
|
||||
font-size: 50px;
|
||||
color:#f8dddd;
|
||||
}
|
||||
/*#e55 #b00*/
|
||||
.red .ball{
|
||||
background: -webkit-gradient(linear, left top, left bottom, from(#0abcdf), to(#2573fe));
|
||||
background: -webkit-linear-gradient(#0abcdf, #2573fe);
|
||||
background: linear-gradient(#0abcdf, #2573fe);
|
||||
}
|
||||
.shadow {
|
||||
-webkit-animation: shadow 600ms cubic-bezier(0.165, 0.840, 0.440, 1.000) infinite alternate;
|
||||
animation: shadow 600ms cubic-bezier(0.165, 0.840, 0.440, 1.000) infinite alternate;
|
||||
background: #000;
|
||||
bottom: -160px;
|
||||
height: 25px;
|
||||
width: 75px;
|
||||
}
|
||||
.red .ball,.red .shadow { -webkit-animation-delay: -200ms; animation-delay: -200ms; }
|
||||
@-webkit-keyframes ball {
|
||||
0% {
|
||||
-webkit-transform: translateY( 0 );
|
||||
transform: translateY( 0 );
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: translateY( -80px );
|
||||
transform: translateY( -80px );
|
||||
}
|
||||
}
|
||||
@keyframes ball {
|
||||
0% {
|
||||
-webkit-transform: translateY( 0 );
|
||||
transform: translateY( 0 );
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: translateY( -80px );
|
||||
transform: translateY( -80px );
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes shadow {
|
||||
0% {
|
||||
opacity: 0.2;
|
||||
-webkit-transform: scale( 0.75 );
|
||||
transform: scale( 0.75 );
|
||||
}
|
||||
100% {
|
||||
opacity: 0.05;
|
||||
-webkit-transform: scale( 1 );
|
||||
transform: scale( 1 );
|
||||
}
|
||||
}
|
||||
@keyframes shadow {
|
||||
0% {
|
||||
opacity: 0.2;
|
||||
-webkit-transform: scale( 0.75 );
|
||||
transform: scale( 0.75 );
|
||||
}
|
||||
100% {
|
||||
opacity: 0.05;
|
||||
-webkit-transform: scale( 1 );
|
||||
transform: scale( 1 );
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
<style type="text/css">
|
||||
.span_cont{
|
||||
position:relative;
|
||||
top:-34px;
|
||||
left:-20px;
|
||||
width:60px;
|
||||
height:60px;
|
||||
font-size:14px;
|
||||
margin:40px;
|
||||
transform:rotate(-90deg); -ms-transform:rotate(-90deg); /* IE 9 */-moz-transform:rotate(-90deg); /* Firefox */-webkit-transform:rotate(-90deg); /* Safari 和 Chrome */-o-transform:rotate(-90deg);
|
||||
font-weight: bold;
|
||||
}
|
||||
span{height:40px; width:40px; display:block; position:relative;}
|
||||
.demoSpan1{position:relative;}
|
||||
.demoSpan1:before{content:''; height:8px; width:8px;border-radius: 4px; display:block; background:#fff; position:absolute; top:17px; left:11px;}
|
||||
.demoSpan2{position:absolute; top:0; left:0;}
|
||||
.demoSpan2:before{content:''; height:40px; width:40px; display:block; border:4px solid transparent; border-right:4px solid #fff; border-radius:40px;-webkit-border-radius:40px;-moz-border-radius:40px; position:absolute; top:-3px; left:-6px; }
|
||||
.demoSpan2:after{content:''; height:30px; width:30px; display:block; border:4px solid transparent; border-right:4px solid #fff; border-radius:20px;-webkit-border-radius:20px;-moz-border-radius:20px; position:absolute; top:2px; left:-4px; }
|
||||
|
||||
.demoSpan3{position:absolute; top:0; left:0;}
|
||||
.demoSpan3:before{content:''; height:20px; width:20px; display:block; border:4px solid transparent; border-right:4px solid #fff; border-radius:20px;-webkit-border-radius:20px;-moz-border-radius:20px; position:absolute; top:7px; left:-1px; }
|
||||
.demoSpan4{
|
||||
transform:rotate(45deg); -ms-transform:rotate(45deg);-moz-transform:rotate(45deg);-webkit-transform:rotate(45deg);-o-transform:rotate(45deg);
|
||||
}
|
||||
.demoSpan4:before{content:''; height:4px; width:16px; display:block; background:#333; position:absolute; top:36px; left:15px;}
|
||||
.demoSpan4:after{content:''; height:16px; width:4px; display:block; background:#333; position:absolute; top:30px; left:21px;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="wrap red">
|
||||
<div class="shadow"></div>
|
||||
<div class="ball">
|
||||
<div class="span_cont">
|
||||
<span class="demoSpan1">
|
||||
<span class="demoSpan2">
|
||||
<span class="demoSpan3">
|
||||
<span class="demoSpan4"></span>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section class="center">
|
||||
<article>
|
||||
<h1 class="header">
|
||||
网络不在线
|
||||
</h1>
|
||||
<hr style="width:200px;margin:30px auto 10px;border-bottom:1px solid #3e4042;"/>
|
||||
<h5 class="hder">坤腾畅联</h5>
|
||||
</article>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>连接错误</title>
|
||||
<meta http-equiv="pragma" content="no-cache" />
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
||||
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
|
||||
<meta http-equiv="X-UA-COMPATIBLE" content="IE=edge,chrome=1"/>
|
||||
<!--[if lt IE 9]
|
||||
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
|
||||
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
|
||||
<![endif]>-->
|
||||
<style class="cp-pen-styles">
|
||||
body{
|
||||
/*color: #f54f59;*/
|
||||
/*background-color:#585656;*/
|
||||
/*color:#0abcdf;*/
|
||||
background-color:#1f2228;
|
||||
color:#fff;
|
||||
font-family: Helvetica, Arial, sans-serif;
|
||||
font-size: 1.8rem;
|
||||
font-weight: 300;
|
||||
/*background: -webkit-linear-gradient(#fff, #ccc);*/
|
||||
/*background: linear-gradient(#fff, #ccc);*/
|
||||
height:100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
.hder{
|
||||
font-family: "Microsoft YaHei";
|
||||
font-weight:normal;
|
||||
color:#77839b;
|
||||
/*background: linear-gradient(#444, #222);*/
|
||||
padding:10px 0;
|
||||
text-align:center;
|
||||
margin:0;
|
||||
font-size:18px;
|
||||
}
|
||||
.center{
|
||||
text-align: center;
|
||||
margin-top:320px;
|
||||
}
|
||||
|
||||
.circle{
|
||||
position:absolute;
|
||||
border:0.3rem solid #FFF;
|
||||
width:80px;
|
||||
height:80px;
|
||||
border-radius:50px ;
|
||||
margin:1.4rem auto;
|
||||
}
|
||||
.circle span{
|
||||
width:100%;
|
||||
height:100%;
|
||||
line-height: 78px;
|
||||
font-size:60px;
|
||||
}
|
||||
.header{
|
||||
width:100%;
|
||||
font-size: 2rem;
|
||||
font-weight: 700;
|
||||
margin:10px auto;
|
||||
/*text-shadow:0 3px 0px #404853, 0 4px 0px #333333;*/
|
||||
}
|
||||
.wrap {
|
||||
top: 160px;
|
||||
margin-left: -70px;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
}
|
||||
.red{left: 70px;}
|
||||
.ball,.shadow {
|
||||
border-radius:100%;
|
||||
left: 0;
|
||||
margin: auto;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
}
|
||||
.ball {
|
||||
-webkit-animation: ball 600ms cubic-bezier(0.165, 0.840, 0.440, 1.000) infinite alternate;
|
||||
animation: ball 600ms cubic-bezier(0.165, 0.840, 0.440, 1.000) infinite alternate;
|
||||
height: 80px;
|
||||
width: 80px;
|
||||
text-align: center;
|
||||
line-height: 80px;
|
||||
font-size: 50px;
|
||||
color:#f8dddd;
|
||||
}
|
||||
/*#e55 #b00*/
|
||||
.red .ball{
|
||||
background: -webkit-gradient(linear, left top, left bottom, from(#0abcdf), to(#2573fe));
|
||||
background: -webkit-linear-gradient(#0abcdf, #2573fe);
|
||||
background: linear-gradient(#0abcdf, #2573fe);
|
||||
}
|
||||
.shadow {
|
||||
-webkit-animation: shadow 600ms cubic-bezier(0.165, 0.840, 0.440, 1.000) infinite alternate;
|
||||
animation: shadow 600ms cubic-bezier(0.165, 0.840, 0.440, 1.000) infinite alternate;
|
||||
background: #000;
|
||||
bottom: -160px;
|
||||
height: 25px;
|
||||
width: 75px;
|
||||
}
|
||||
.red .ball,.red .shadow { -webkit-animation-delay: -200ms; animation-delay: -200ms; }
|
||||
@-webkit-keyframes ball {
|
||||
0% {
|
||||
-webkit-transform: translateY( 0 );
|
||||
transform: translateY( 0 );
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: translateY( -80px );
|
||||
transform: translateY( -80px );
|
||||
}
|
||||
}
|
||||
@keyframes ball {
|
||||
0% {
|
||||
-webkit-transform: translateY( 0 );
|
||||
transform: translateY( 0 );
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: translateY( -80px );
|
||||
transform: translateY( -80px );
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes shadow {
|
||||
0% {
|
||||
opacity: 0.2;
|
||||
-webkit-transform: scale( 0.75 );
|
||||
transform: scale( 0.75 );
|
||||
}
|
||||
100% {
|
||||
opacity: 0.05;
|
||||
-webkit-transform: scale( 1 );
|
||||
transform: scale( 1 );
|
||||
}
|
||||
}
|
||||
@keyframes shadow {
|
||||
0% {
|
||||
opacity: 0.2;
|
||||
-webkit-transform: scale( 0.75 );
|
||||
transform: scale( 0.75 );
|
||||
}
|
||||
100% {
|
||||
opacity: 0.05;
|
||||
-webkit-transform: scale( 1 );
|
||||
transform: scale( 1 );
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
<style type="text/css">
|
||||
.span_cont{
|
||||
position:relative;
|
||||
top:-34px;
|
||||
left:-20px;
|
||||
width:60px;
|
||||
height:60px;
|
||||
font-size:14px;
|
||||
margin:40px;
|
||||
transform:rotate(-90deg); -ms-transform:rotate(-90deg); /* IE 9 */-moz-transform:rotate(-90deg); /* Firefox */-webkit-transform:rotate(-90deg); /* Safari 和 Chrome */-o-transform:rotate(-90deg);
|
||||
font-weight: bold;
|
||||
}
|
||||
span{height:40px; width:40px; display:block; position:relative;}
|
||||
.demoSpan1{position:relative;}
|
||||
.demoSpan1:before{content:''; height:8px; width:8px;border-radius: 4px; display:block; background:#fff; position:absolute; top:17px; left:11px;}
|
||||
.demoSpan2{position:absolute; top:0; left:0;}
|
||||
.demoSpan2:before{content:''; height:40px; width:40px; display:block; border:4px solid transparent; border-right:4px solid #fff; border-radius:40px;-webkit-border-radius:40px;-moz-border-radius:40px; position:absolute; top:-3px; left:-6px; }
|
||||
.demoSpan2:after{content:''; height:30px; width:30px; display:block; border:4px solid transparent; border-right:4px solid #fff; border-radius:20px;-webkit-border-radius:20px;-moz-border-radius:20px; position:absolute; top:2px; left:-4px; }
|
||||
|
||||
.demoSpan3{position:absolute; top:0; left:0;}
|
||||
.demoSpan3:before{content:''; height:20px; width:20px; display:block; border:4px solid transparent; border-right:4px solid #fff; border-radius:20px;-webkit-border-radius:20px;-moz-border-radius:20px; position:absolute; top:7px; left:-1px; }
|
||||
.demoSpan4{
|
||||
transform:rotate(45deg); -ms-transform:rotate(45deg);-moz-transform:rotate(45deg);-webkit-transform:rotate(45deg);-o-transform:rotate(45deg);
|
||||
}
|
||||
.demoSpan4:before{content:''; height:4px; width:16px; display:block; background:#333; position:absolute; top:36px; left:15px;}
|
||||
.demoSpan4:after{content:''; height:16px; width:4px; display:block; background:#333; position:absolute; top:30px; left:21px;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="wrap red">
|
||||
<div class="shadow"></div>
|
||||
<div class="ball">
|
||||
<div class="span_cont">
|
||||
<span class="demoSpan1">
|
||||
<span class="demoSpan2">
|
||||
<span class="demoSpan3">
|
||||
<span class="demoSpan4"></span>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section class="center">
|
||||
<article>
|
||||
<h1 class="header">
|
||||
网络不在线
|
||||
</h1>
|
||||
<hr style="width:200px;margin:30px auto 10px;border-bottom:1px solid #3e4042;"/>
|
||||
<h5 class="hder">坤腾畅联</h5>
|
||||
</article>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
308
login.html
308
login.html
@ -1,154 +1,154 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head lang="en">
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
|
||||
<meta http-equiv="X-UA-COMPATIBLE" content="IE=edge,chrome=1"/>
|
||||
<!--[if lt IE 9]
|
||||
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
|
||||
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
|
||||
<![endif]>-->
|
||||
<!-- Place this tag in your head or just before your close body tag. -->
|
||||
<script async defer src="https://buttons.github.io/buttons.js"></script>
|
||||
<title></title>
|
||||
</head>
|
||||
<style>
|
||||
body{
|
||||
margin:0;
|
||||
padding:0;
|
||||
overflow: hidden;
|
||||
background-color:#26bbc1;
|
||||
}
|
||||
.wrap{
|
||||
width:100%;
|
||||
height:100%;
|
||||
background: -webkit-gradient(linear, left top, left bottom, from(#0367f9), to(#26bbc1));
|
||||
background: -webkit-linear-gradient(#0367f9, #26bbc1);
|
||||
background: linear-gradient(#0367f9, #26bbc1);
|
||||
background-color:#0367f9;
|
||||
position: absolute;
|
||||
}
|
||||
.cont{
|
||||
/*width:74%;*/
|
||||
width:320px;
|
||||
margin:0 auto;
|
||||
}
|
||||
.logo{width:100px;height:100px;margin:80px auto 50px;border-radius:4px;/*background-color:rgba(255,255,255,0.1);*/}
|
||||
.title{width:80px;height:80px;line-height: 80px;font-size:18px;font-weight:normal;display:inline-block;text-align:center;color:#fff;margin:10px;padding:0;/*background-color:rgba(255,255,255,0.1);border-radius: 40px;*/}
|
||||
.item{width:100%;height:40px;border-radius:4px;margin:20px auto 0;outline: none;}
|
||||
.btncont{width:100%;margin:0px auto;}
|
||||
.btn{background-color:#0cc455;color:#fff;font-weight: bold;border:none;}
|
||||
.btn:hover{background-color:#5ed18c;}
|
||||
.inp{width:90%;padding:0 5%;height:40px;border:none;line-height:40px;color:#666;text-align: center;}
|
||||
/*input-placeholder { /!* WebKit browsers *!/*/
|
||||
/*color: #999;*/
|
||||
/*}*/
|
||||
|
||||
.tipcont{width:74%;margin:0 auto;text-align: center;}
|
||||
.url{color:#fff;display: inline-block;margin-top:30px;}
|
||||
@media screen and (min-width: 360px) and (max-width: 988px){
|
||||
.cont{width:320px;}
|
||||
}
|
||||
@media screen and (max-width: 359px) {
|
||||
.cont{width:76%;}
|
||||
.tipcont{width:100%;}
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<div class="wrap">
|
||||
<div class="cont">
|
||||
<div class="logo">
|
||||
<!--<img src="" alt=""/>-->
|
||||
<h3 class="title">欢迎登录</h3>
|
||||
</div>
|
||||
<div class="inpcont">
|
||||
<input type="password" class="inp item" id="pwd" placeholder="请输入密码"/>
|
||||
</div>
|
||||
<div class="btncont">
|
||||
<button class="item btn" id="btn">登 录</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tipcont">
|
||||
<div class="input-info">
|
||||
<a class="url" target="_blank" href="https://github.com/liudf0716/apfree_wifidog">Power by ApFree WiFiDog</a>
|
||||
<p class="adbyby-p" style="margin-top:30px;margin-bottom:10px;">
|
||||
<!-- Place this tag where you want the button to render. -->
|
||||
<a class="github-button" href="https://github.com/liudf0716/apfree_wifidog/subscription" data-icon="octicon-eye" data-size="large" data-show-count="true" aria-label="Watch liudf0716/apfree_wifidog on GitHub">Watch</a>
|
||||
<!-- Place this tag where you want the button to render. -->
|
||||
<a class="github-button" href="https://github.com/liudf0716/apfree_wifidog" data-icon="octicon-star" data-size="large" data-show-count="true" aria-label="Star liudf0716/apfree_wifidog on GitHub">Star</a>
|
||||
<!-- Place this tag where you want the button to render. -->
|
||||
<a class="github-button" href="https://github.com/liudf0716/apfree_wifidog/fork" data-icon="octicon-repo-forked" data-size="large" data-show-count="true" aria-label="Fork liudf0716/apfree_wifidog on GitHub">Fork</a>
|
||||
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
/* 封装ajax函数
|
||||
* @param {string}opt.type http连接的方式，包括POST和GET两种方式
|
||||
* @param {string}opt.url 发送请求的url
|
||||
* @param {boolean}opt.async 是否为异步请求，true为异步的，false为同步的
|
||||
* @param {object}opt.data 发送的参数，格式为对象类型
|
||||
* @param {function}opt.success ajax发送并接收成功调用的回调函数
|
||||
*/
|
||||
function ajax(opt) {
|
||||
opt = opt || {};
|
||||
opt.method = opt.method.toUpperCase() || 'POST';
|
||||
opt.url = opt.url || '';
|
||||
opt.async = opt.async || true;
|
||||
opt.data = opt.data || null;
|
||||
opt.success = opt.success || function () {};
|
||||
var xmlHttp = null;
|
||||
if (XMLHttpRequest) {
|
||||
xmlHttp = new XMLHttpRequest();
|
||||
}
|
||||
else {
|
||||
xmlHttp = new ActiveXObject('Microsoft.XMLHTTP');
|
||||
}var params = [];
|
||||
for (var key in opt.data){
|
||||
params.push(key + '=' + opt.data[key]);
|
||||
}
|
||||
var postData = params.join('&');
|
||||
if (opt.method.toUpperCase() === 'POST') {
|
||||
xmlHttp.open(opt.method, opt.url, opt.async);
|
||||
xmlHttp.setRequestHeader('Content-Type', 'application/json');
|
||||
// xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded;charset=utf-8');
|
||||
xmlHttp.send(postData);
|
||||
}
|
||||
else if (opt.method.toUpperCase() === 'GET') {
|
||||
xmlHttp.open(opt.method, opt.url + '?' + postData, opt.async);
|
||||
xmlHttp.send(null);
|
||||
}
|
||||
xmlHttp.onreadystatechange = function () {
|
||||
if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
|
||||
opt.success(xmlHttp.responseText);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
window.onload = function(){
|
||||
var btn = document.getElementById('btn');
|
||||
btn.onclick = function(){
|
||||
var pwd = document.getElementById('pwd').value;
|
||||
if(pwd == ''){
|
||||
alert('输入不能为空');
|
||||
return false;
|
||||
}
|
||||
ajax({
|
||||
method:'GET',
|
||||
url:'',
|
||||
data:{
|
||||
// user:user,
|
||||
// pwd:pwd
|
||||
},
|
||||
success: function(response){
|
||||
console.log(response);
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head lang="en">
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
|
||||
<meta http-equiv="X-UA-COMPATIBLE" content="IE=edge,chrome=1"/>
|
||||
<!--[if lt IE 9]
|
||||
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
|
||||
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
|
||||
<![endif]>-->
|
||||
<!-- Place this tag in your head or just before your close body tag. -->
|
||||
<script async defer src="https://buttons.github.io/buttons.js"></script>
|
||||
<title></title>
|
||||
</head>
|
||||
<style>
|
||||
body{
|
||||
margin:0;
|
||||
padding:0;
|
||||
overflow: hidden;
|
||||
background-color:#26bbc1;
|
||||
}
|
||||
.wrap{
|
||||
width:100%;
|
||||
height:100%;
|
||||
background: -webkit-gradient(linear, left top, left bottom, from(#0367f9), to(#26bbc1));
|
||||
background: -webkit-linear-gradient(#0367f9, #26bbc1);
|
||||
background: linear-gradient(#0367f9, #26bbc1);
|
||||
background-color:#0367f9;
|
||||
position: absolute;
|
||||
}
|
||||
.cont{
|
||||
/*width:74%;*/
|
||||
width:320px;
|
||||
margin:0 auto;
|
||||
}
|
||||
.logo{width:100px;height:100px;margin:80px auto 50px;border-radius:4px;/*background-color:rgba(255,255,255,0.1);*/}
|
||||
.title{width:80px;height:80px;line-height: 80px;font-size:18px;font-weight:normal;display:inline-block;text-align:center;color:#fff;margin:10px;padding:0;/*background-color:rgba(255,255,255,0.1);border-radius: 40px;*/}
|
||||
.item{width:100%;height:40px;border-radius:4px;margin:20px auto 0;outline: none;}
|
||||
.btncont{width:100%;margin:0px auto;}
|
||||
.btn{background-color:#0cc455;color:#fff;font-weight: bold;border:none;}
|
||||
.btn:hover{background-color:#5ed18c;}
|
||||
.inp{width:90%;padding:0 5%;height:40px;border:none;line-height:40px;color:#666;text-align: center;}
|
||||
/*input-placeholder { /!* WebKit browsers *!/*/
|
||||
/*color: #999;*/
|
||||
/*}*/
|
||||
|
||||
.tipcont{width:74%;margin:0 auto;text-align: center;}
|
||||
.url{color:#fff;display: inline-block;margin-top:30px;}
|
||||
@media screen and (min-width: 360px) and (max-width: 988px){
|
||||
.cont{width:320px;}
|
||||
}
|
||||
@media screen and (max-width: 359px) {
|
||||
.cont{width:76%;}
|
||||
.tipcont{width:100%;}
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<div class="wrap">
|
||||
<div class="cont">
|
||||
<div class="logo">
|
||||
<!--<img src="" alt=""/>-->
|
||||
<h3 class="title">欢迎登录</h3>
|
||||
</div>
|
||||
<div class="inpcont">
|
||||
<input type="password" class="inp item" id="pwd" placeholder="请输入密码"/>
|
||||
</div>
|
||||
<div class="btncont">
|
||||
<button class="item btn" id="btn">登 录</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tipcont">
|
||||
<div class="input-info">
|
||||
<a class="url" target="_blank" href="https://github.com/liudf0716/apfree_wifidog">Power by ApFree WiFiDog</a>
|
||||
<p class="adbyby-p" style="margin-top:30px;margin-bottom:10px;">
|
||||
<!-- Place this tag where you want the button to render. -->
|
||||
<a class="github-button" href="https://github.com/liudf0716/apfree_wifidog/subscription" data-icon="octicon-eye" data-size="large" data-show-count="true" aria-label="Watch liudf0716/apfree_wifidog on GitHub">Watch</a>
|
||||
<!-- Place this tag where you want the button to render. -->
|
||||
<a class="github-button" href="https://github.com/liudf0716/apfree_wifidog" data-icon="octicon-star" data-size="large" data-show-count="true" aria-label="Star liudf0716/apfree_wifidog on GitHub">Star</a>
|
||||
<!-- Place this tag where you want the button to render. -->
|
||||
<a class="github-button" href="https://github.com/liudf0716/apfree_wifidog/fork" data-icon="octicon-repo-forked" data-size="large" data-show-count="true" aria-label="Fork liudf0716/apfree_wifidog on GitHub">Fork</a>
|
||||
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
/* 封装ajax函数
|
||||
* @param {string}opt.type http连接的方式，包括POST和GET两种方式
|
||||
* @param {string}opt.url 发送请求的url
|
||||
* @param {boolean}opt.async 是否为异步请求，true为异步的，false为同步的
|
||||
* @param {object}opt.data 发送的参数，格式为对象类型
|
||||
* @param {function}opt.success ajax发送并接收成功调用的回调函数
|
||||
*/
|
||||
function ajax(opt) {
|
||||
opt = opt || {};
|
||||
opt.method = opt.method.toUpperCase() || 'POST';
|
||||
opt.url = opt.url || '';
|
||||
opt.async = opt.async || true;
|
||||
opt.data = opt.data || null;
|
||||
opt.success = opt.success || function () {};
|
||||
var xmlHttp = null;
|
||||
if (XMLHttpRequest) {
|
||||
xmlHttp = new XMLHttpRequest();
|
||||
}
|
||||
else {
|
||||
xmlHttp = new ActiveXObject('Microsoft.XMLHTTP');
|
||||
}var params = [];
|
||||
for (var key in opt.data){
|
||||
params.push(key + '=' + opt.data[key]);
|
||||
}
|
||||
var postData = params.join('&');
|
||||
if (opt.method.toUpperCase() === 'POST') {
|
||||
xmlHttp.open(opt.method, opt.url, opt.async);
|
||||
xmlHttp.setRequestHeader('Content-Type', 'application/json');
|
||||
// xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded;charset=utf-8');
|
||||
xmlHttp.send(postData);
|
||||
}
|
||||
else if (opt.method.toUpperCase() === 'GET') {
|
||||
xmlHttp.open(opt.method, opt.url + '?' + postData, opt.async);
|
||||
xmlHttp.send(null);
|
||||
}
|
||||
xmlHttp.onreadystatechange = function () {
|
||||
if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
|
||||
opt.success(xmlHttp.responseText);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
window.onload = function(){
|
||||
var btn = document.getElementById('btn');
|
||||
btn.onclick = function(){
|
||||
var pwd = document.getElementById('pwd').value;
|
||||
if(pwd == ''){
|
||||
alert('输入不能为空');
|
||||
return false;
|
||||
}
|
||||
ajax({
|
||||
method:'GET',
|
||||
url:'',
|
||||
data:{
|
||||
// user:user,
|
||||
// pwd:pwd
|
||||
},
|
||||
success: function(response){
|
||||
console.log(response);
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user