From 11723199b864d4f4b166d1a4d69f1f5732767a3c Mon Sep 17 00:00:00 2001
From: Dengfeng Liu <liudf0716@gmail.com>
Date: Fri, 25 Nov 2016 13:29:53 +0800
Subject: [PATCH] Update wifidog-redir.html.front

---
 wifidog-redir.html.front | 242 +++++++++++++++++++++++++--------------
 1 file changed, 155 insertions(+), 87 deletions(-)
diff --git a/wifidog-redir.html.front b/wifidog-redir.html.front
index c405a97..1068078 100644
--- a/wifidog-redir.html.front
+++ b/wifidog-redir.html.front
@@ -2,107 +2,175 @@
 <html>
 <head>
 	<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]>-->
     <title>正在为您加载，请稍候...</title>
     <style>
-        /* general styling */
-        body {
-        text-align: center;
+        body{
+            background-color:#1f2228;
         }
-        .bar1 {
-            -moz-transform:rotate(0deg) translate(0, -40px);
-            -webkit-transform:rotate(0deg) translate(0, -40px);opacity:0.12;
-        }
-        .bar2 {
-            -moz-transform:rotate(45deg) translate(0, -40px);
-            -webkit-transform:rotate(45deg) translate(0, -40px);opacity:0.25;
-        }
-        .bar3 {
-            -moz-transform:rotate(90deg) translate(0, -40px);
-            -webkit-transform:rotate(90deg) translate(0, -40px);opacity:0.37;
-        }
-        .bar4 {
-            -moz-transform:rotate(135deg) translate(0, -40px);
-            -webkit-transform:rotate(135deg) translate(0, -40px);opacity:0.50;
-        }
-        .bar5 {
-            -moz-transform:rotate(180deg) translate(0, -40px);
-            -webkit-transform:rotate(180deg) translate(0, -40px);opacity:0.62;
-        }
-        .bar6 {
-            -moz-transform:rotate(225deg) translate(0, -40px);
-            -webkit-transform:rotate(225deg) translate(0, -40px);opacity:0.75;
-        }
-        .bar7 {
-            -moz-transform:rotate(270deg) translate(0, -40px);
-            -webkit-transform:rotate(270deg) translate(0, -40px);opacity:0.87;
-        }
-        .bar8 {
-            -moz-transform:rotate(315deg) translate(0, -40px);
-            -webkit-transform:rotate(315deg) translate(0, -40px);opacity:1;
-        }
-         #div2 {
-            position:relative;
+        .icon-cont{
             width:100px;
             height:100px;
-            margin:25px auto;
-            -moz-border-radius:100px;
-            -moz-transform:scale(0.5);
-            -webkit-transform:scale(0.5);
-            /* not used right now: */
-            -webkit-animation-name: rotateThis;
-            -webkit-animation-duration:2s;
-            -webkit-animation-iteration-count:infinite;
-            -webkit-animation-timing-function:linear;
+            margin:160px auto 50px;
+            padding-left:100px;
         }
-        #div2 div
-        {
-            width:10px;
-            height:30px;
-            background:#000;
-            position:absolute;
-            top:35px;
-            left:45px;
+        .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;
+            width:200px;
+            height:40px;
+            line-height: 40px;;
+
+            background-image: -webkit-linear-gradient(left, #0abcdf, #073064 25%, #0abcdf 50%, #073064 75%, #0abcdf);
+            -webkit-text-fill-color: transparent;
+            -webkit-background-clip: text;
+            -webkit-background-size: 200% 100%;
+            -webkit-animation: masked-animation 4s infinite linear;
+            text-fill-color: transparent;
+            background-clip: text;
+            background-size: 200% 100%;
+            animation: masked-animation 4s infinite linear;
         }
-        #div2 div {
-            -moz-border-radius-topleft:10px;
-            -moz-border-radius-topright:10px;
-            -webkit-border-top-left-radius:10px;
-            -webkit-border-top-right-radius:10px;
+        .footer{
+            position: fixed;
+            bottom:20px;
+            text-align:center;
+            width:100%;
+            font-size:16px;
         }
-        /* uncomment this to use css animation in webkit browsers */
-        /* @-webkit-keyframes rotateThis {
-          from {-webkit-transform:scale(0.5) rotate(0deg);}
-          to {-webkit-transform:scale(0.5) rotate(360deg);}
-        } */
-        .text{ display: block; text-align: center;}
+        .text{
+            font-size:18px;
+            text-align:center;
+            font-family: "Microsoft YaHei";
+            color:#0abcdf;
+            width:350px;
+            margin:0 auto;
+
+            background-image: -webkit-linear-gradient(left, #0abcdf, #073064 25%, #0abcdf 50%, #073064 75%, #0abcdf);
+            -webkit-text-fill-color: transparent;
+            -webkit-background-clip: text;
+            -webkit-background-size: 200% 100%;
+            -webkit-animation: masked-animation 4s infinite linear;
+            text-fill-color: transparent;
+            background-clip: text;
+            background-size: 200% 100%;
+            animation: masked-animation 4s infinite linear;
+        }
+        @-webkit-keyframes masked-animation {
+            0%  { background-position: 0 0;}
+            100% { background-position: -100% 0;}
+        }
+
+        @-webkit-keyframes ball-spin-fade-loader {
+            50% {
+                opacity: 0.3;
+                -webkit-transform: scale(0.4);
+                transform: scale(0.4); }
+
+            100% {
+                opacity: 1;
+                -webkit-transform: scale(1);
+                transform: scale(1); } }
+
+        @keyframes ball-spin-fade-loader {
+            50% {
+                opacity: 0.3;
+                -webkit-transform: scale(0.4);
+                transform: scale(0.4); }
+
+            100% {
+                opacity: 1;
+                -webkit-transform: scale(1);
+                transform: scale(1); } }
+
+        .ball-spin-fade-loader {
+            position: relative; }
+        .ball-spin-fade-loader > div:nth-child(1) {
+            top: 25px;
+            left: 0;
+            -webkit-animation: ball-spin-fade-loader 1s 0s infinite linear;
+            animation: ball-spin-fade-loader 1s 0s infinite linear; }
+        .ball-spin-fade-loader > div:nth-child(2) {
+            top: 17.04545px;
+            left: 17.04545px;
+            -webkit-animation: ball-spin-fade-loader 1s 0.12s infinite linear;
+            animation: ball-spin-fade-loader 1s 0.12s infinite linear; }
+        .ball-spin-fade-loader > div:nth-child(3) {
+            top: 0;
+            left: 25px;
+            -webkit-animation: ball-spin-fade-loader 1s 0.24s infinite linear;
+            animation: ball-spin-fade-loader 1s 0.24s infinite linear; }
+        .ball-spin-fade-loader > div:nth-child(4) {
+            top: -17.04545px;
+            left: 17.04545px;
+            -webkit-animation: ball-spin-fade-loader 1s 0.36s infinite linear;
+            animation: ball-spin-fade-loader 1s 0.36s infinite linear; }
+        .ball-spin-fade-loader > div:nth-child(5) {
+            top: -25px;
+            left: 0;
+            -webkit-animation: ball-spin-fade-loader 1s 0.48s infinite linear;
+            animation: ball-spin-fade-loader 1s 0.48s infinite linear; }
+        .ball-spin-fade-loader > div:nth-child(6) {
+            top: -17.04545px;
+            left: -17.04545px;
+            -webkit-animation: ball-spin-fade-loader 1s 0.6s infinite linear;
+            animation: ball-spin-fade-loader 1s 0.6s infinite linear; }
+        .ball-spin-fade-loader > div:nth-child(7) {
+            top: 0;
+            left: -25px;
+            -webkit-animation: ball-spin-fade-loader 1s 0.72s infinite linear;
+            animation: ball-spin-fade-loader 1s 0.72s infinite linear; }
+        .ball-spin-fade-loader > div:nth-child(8) {
+            top: 17.04545px;
+            left: -17.04545px;
+            -webkit-animation: ball-spin-fade-loader 1s 0.84s infinite linear;
+            animation: ball-spin-fade-loader 1s 0.84s infinite linear; }
+        .ball-spin-fade-loader > div {
+            /*background-color: #279fcf;*/
+            background-color:#0abcdf;
+            width: 15px;
+            height: 15px;
+            border-radius: 100%;
+            margin: 2px;
+            -webkit-animation-fill-mode: both;
+            animation-fill-mode: both;
+            position: absolute; }
     </style>
-    <script>
-        var count = 0;
-        function rotate() {
-            var elem2 = document.getElementById('div2');
-            elem2.style.MozTransform = 'scale(0.5) rotate('+count+'deg)';
-            elem2.style.WebkitTransform = 'scale(0.5) rotate('+count+'deg)';
-            if (count==360) { count = 0 }
-            count+=45;
-            window.setTimeout(rotate, 100);
-        }
-        window.setTimeout(rotate, 100);
-    </script>
 
 </head>
 
 <body>
-<div id="div2">
-    <div class="bar1"></div>
-    <div class="bar2"></div>
-    <div class="bar3"></div>
-    <div class="bar4"></div>
-    <div class="bar5"></div>
-    <div class="bar6"></div>
-    <div class="bar7"></div>
-    <div class="bar8"></div>
+<div class="icon-cont">
+    <div class="loader">
+        <div class="loader-inner ball-spin-fade-loader">
+            <div></div>
+            <div></div>
+            <div></div>
+            <div></div>
+            <div></div>
+            <div></div>
+            <div></div>
+            <div></div>
+        </div>
+    </div>
 </div>
-<div class="text" style="font-size:24px">正在为您加载，请稍候...</div>
+<div class="text" style="font-size:24px;position: relative;">
+    <p>正在为您加载，请稍候...</p>
+    <!--<hr style="width:300px;margin:30px auto 10px;border-bottom:1px solid #77839b;border-top:1px solid #1f2228"/>-->
+</div>
+    <h5 class="hder footer">坤腾畅联</h5>
 </body>
 
 <script type="text/javascript">
