mirror of
https://github.com/liudf0716/apfree_wifidog.git
synced 2025-01-07 03:16:37 +08:00
186 lines
5.7 KiB
HTML
186 lines
5.7 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Auth Server Offline</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">
|
|
Auth Server
|
|
</h1>
|
|
<p class="error">
|
|
Offline
|
|
</p>
|
|
<hr style="width:200px;margin:30px auto 10px;border-bottom:1px solid #3e4042;"/>
|
|
<h5 class="hder">www.kunteng.org.cn</h5>
|
|
</article>
|
|
</section>
|
|
</body>
|
|
</html>
|