<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="LoginValidation.aspx.cs" Inherits="ICDAS_3_0_Web_App.LoginValidation" %>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style>
        body {
            background: #fff;
        }

        .bg_load {
            position: fixed;
            left: 0px;
            top: 0px;
            width: 100%;
            height: 100%;
            background: #fff;
        }

        .wrapper {
            /* Size and position */
            font-size: 25px; /* 1em */
            width: 10em;
            height: 10em;
            position: fixed;
            left: 50%;
            top: 50%;
            margin-top: -200px;
            margin-left: -200px;
            /* Styles */
            border-radius: 50%;
            background: rgba(255,255,255,0.3);
            border: 1em dashed rgba(138,189,195,0.5);
            box-shadow: inset 0 0 2em rgba(0,255,255,0.3), 0 0 0 0.7em rgba(255,255,255,0.3);
            animation: rota 3.5s linear infinite;
            /* Font styles */
            font-family: Verdana, sans-serif;
            color: #000;
            text-align: center;
            text-transform: uppercase;
            text-shadow: 0 .04em rgba(255,255,255,0.9);
            line-height: 6em;
        }

            .wrapper:before,
            .wrapper:after {
                content: "";
                position: absolute;
                z-index: -1;
                border-radius: inherit;
                box-shadow: inset 0 0 2em rgba(255,255,255,0.3);
                border: 1em dashed;
            }

            .wrapper:before {
                border-color: rgba(138,189,195,0.2);
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;
            }

            .wrapper:after {
                border-color: rgba(138,189,195,0.4);
                top: 1em;
                right: 1em;
                bottom: 1em;
                left: 1em;
            }

            .wrapper .inner {
                width: 100%;
                height: 100%;
                animation: rota 3.5s linear reverse infinite;
            }

            .wrapper span {
                display: inline-block;
                animation: placeholder 1.5s ease-out infinite;
            }

                .wrapper span:nth-child(1) {
                    animation-name: loading-1;
                }

                .wrapper span:nth-child(2) {
                    animation-name: loading-2;
                }

                .wrapper span:nth-child(3) {
                    animation-name: loading-3;
                }

                .wrapper span:nth-child(4) {
                    animation-name: loading-4;
                }

                .wrapper span:nth-child(5) {
                    animation-name: loading-5;
                }

                .wrapper span:nth-child(6) {
                    animation-name: loading-6;
                }

                .wrapper span:nth-child(7) {
                    animation-name: loading-7;
                }

                .wrapper span:nth-child(8) {
                    animation-name: loading-8;
                }

                .wrapper span:nth-child(9) {
                    animation-name: loading-9;
                }

                .wrapper span:nth-child(9) {
                    animation-name: loading-9;
                }

                .wrapper span:nth-child(10) {
                    animation-name: loading-10;
                }

                .wrapper span:nth-child(11) {
                    animation-name: loading-11;
                }

                .wrapper span:nth-child(12) {
                    animation-name: loading-12;
                }

                .wrapper span:nth-child(13) {
                    animation-name: loading-13;
                }

                .wrapper span:nth-child(14) {
                    animation-name: loading-14;
                }

        @keyframes rota {
            to {
                transform: rotate(360deg);
            }
        }

        @keyframes loading-1 {
            7.14% {
                opacity: 0.3;
            }
        }

        @keyframes loading-2 {
            14.28% {
                opacity: 0.3;
            }
        }

        @keyframes loading-3 {
            21.43% {
                opacity: 0.3;
            }
        }

        @keyframes loading-4 {
            28.57% {
                opacity: 0.3;
            }
        }

        @keyframes loading-5 {
            35.72% {
                opacity: 0.3;
            }
        }

        @keyframes loading-6 {
            42.86% {
                opacity: 0.3;
            }
        }

        @keyframes loading-7 {
            50.00% {
                opacity: 0.3;
            }
        }

        @keyframes loading-8 {
            57.14% {
                opacity: 0.3;
            }
        }

        @keyframes loading-9 {
            64.28% {
                opacity: 0.3;
            }
        }

        @keyframes loading-10 {
            71.42% {
                opacity: 0.3;
            }
        }

        @keyframes loading-11 {
            78.56% {
                opacity: 0.3;
            }
        }

        @keyframes loading-12 {
            85.7% {
                opacity: 0.3;
            }
        }

        @keyframes loading-13 {
            92.846% {
                opacity: 0.3;
            }
        }

        @keyframes loading-14 {
            100% {
                opacity: 0.3;
            }
        }
    </style>
    <!--LOADING IMAGE SCRIPT-->

    <!-- LOADING IMAGE SCRIPT-->
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server" />
        <asp:UpdatePanel ID="upPanel" UpdateMode="Always" runat="server">
            <ContentTemplate>
                <asp:Timer runat="server" ID="tmrValidation" Interval="1000" OnTick="tmrValidation_Tick"></asp:Timer>
            </ContentTemplate>
        </asp:UpdatePanel>
        <!-- LOADING DIV-->
        <div class="bg_load" id="bg_load"></div>
        <div class="wrapper" id="wrapper">
            <div class="inner">
                <span>V</span>
                <span>A</span>
                <span>L</span>
                <span>I</span>
                <span>D</span>
                <span>A</span>
                <span>T</span>
                <span>I</span>
                <span>N</span>
                <span>G</span>
                <span>U</span>
                <span>S</span>
                <span>E</span>
                <span>R</span>
            </div>
        </div>
        <!-- LOADING DIV-->
        <asp:Button runat="server" ID="btnRedirect" Text="" Style="display: none;" OnClick="btnRedirect_Click"/>
    </form>
</body>
</html>
