Untitled

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        .spinner {
            margin: 0;
            width: 70px;
            height: 18px;
            margin: -35px 0 0 -9px;
            position: absolute;
            top: 50%;
            left: 50%;
            text-align: center
        }

        .spinner > div {
            width: 18px;
            height: 18px;
            background-color: #333;
            border-radius: 100%;
            display: inline-block;
            -webkit-animation: bouncedelay 1.4s infinite ease-in-out;
            animation: bouncedelay 1.4s infinite ease-in-out;
            -webkit-animation-fill-mode: both;
            animation-fill-mode: both
        }

        .spinner .bounce1 {
            -webkit-animation-delay: -.32s;
            animation-delay: -.32s
        }

        .spinner .bounce2 {
            -webkit-animation-delay: -.16s;
            animation-delay: -.16s
        }

        @-webkit-keyframes bouncedelay {
            0%, 80%, 100% {
                -webkit-transform: scale(0.0)
            }
            40% {
                -webkit-transform: scale(1.0)
            }
        }
        @keyframes bouncedelay {
            0%, 80%, 100% {
                transform: scale(0.0);
                -webkit-transform: scale(0.0)
            }
            40% {
                transform: scale(1.0);
                -webkit-transform: scale(1.0)
            }
        }
@media only screen and (max-width: 600px) {
  .mx-30 {
    margin-left: 8px!important;
    margin-right: 8px!important;
}
}

    </style>


    <meta charset="UTF-8">
    <!--[if IE]><meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'><![endif]-->
    <title> Login - Jorbox </title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <!-- Favicons -->
    {% load static %}

    <link rel="stylesheet" type="text/css" href="{% static 'baseTemplate/assets/finalLoginPageCSS/allCss.css' %}">

    <!-- HELPERS -->

    <!-- ELEMENTS -->

    <!-- ICONS -->

    <!-- Admin theme -->

    <!-- Components theme -->

    <!-- JS Core -->

    <script type="text/javascript" src="{% static 'baseTemplate/assets/js-core/jquery-core.min.js' %}"></script>

    <script type="text/javascript">
        $(window).load(function () {
            setTimeout(function () {
                $('#loading').fadeOut(400, "linear");
            }, 300);
        });
    </script>

    <!-- JS Ends -->

    <style type="text/css">

        html, body {
            height: 100%;
            background: #F0EFF0;
        }

    </style>

</head>
<body>
<div id="loading">
    <div class="spinner">
        <div class="bounce1"></div>
        <div class="bounce2"></div>
        <div class="bounce3"></div>
    </div>
</div>

<div ng-app="loginSystem" ng-controller="loginSystem" class="col-md-12 col-sm-12" style="background: #F0EFF0;">
    <br/>
    <div>
        <form id="loginForm" action="/" class="col-md-4 col-md-offset-4">
            <h1 class="text-transform-upr text-center panel-body text-bold"
                style="padding-bottom: 0px; color: #33CCCC;">
                <img class="center-block text-center my-20" src="{% static 'images/logo.png' %}" style="width: 240px;margin-bottom: 10px;">
            </h1>
            <h4 class="text-muted text-center mb-10">Web Hosting Control Panel</h4>
            <div class="">
                <div class="mx-30">
                    <div class="content-box-wrapper panel-body my-10 mx-30">
                        <div class="form-group">
                            <div class="input-group" style=" border: 2px solid #d0d0d0; border-radius: 6px; ">
<span class="input-group-addon bg-blue">
                                            <i class="glyph-icon icon-envelope-o"></i>
                                            </span>
<input ng-model="username" type="text" class="form-control" name="username"
                                       placeholder="Enter your username." required style="height: 36px;">

                            </div>
                        </div>
                        <div class="form-group" style=" border: 2px solid #d0d0d0; border-radius: 6px; ">
                            <div class="input-group">

<span class="input-group-addon bg-blue">
                                            <i class="glyph-icon icon-unlock-alt"></i>
                                        </span>
<input ng-keypress="initiateLogin($event)" ng-model="password" type="password"
                                       class="form-control" id="password" placeholder="Enter your password." required
                                       name="password">

                            </div>
                            <img id="verifyingLogin" class="center-block"
                                 src="{% static 'images/loading.gif' %}">
                        </div>


                        <div class="form-group" style=" border: 2px solid #d0d0d0; border-radius: 6px; ">
                            <div class="input-group">
                                <select ng-model="languageSelection" ng-init="languageSelection='english'"
                                        class="form-control">
                                    <option value="english">English</option>
                                    <option>Chinese</option>
                                    <option>Italian</option>
                                    <option>French</option>
                                    <option>Bulgarian</option>
                                    <option>Portuguese</option>
                                    <option>Japanese</option>
                                    <option>Bosnian</option>
                                    <option>Greek</option>
                                    <option>Russian</option>
                                    <option>Turkish</option>
                                    <option>Spanish</option>
                                    <option>Polish</option>
                                    <option>Vietnamese</option>
                                    <option>German</option>
                                </select>
                            </div>
                        </div>


                        <button type="button" ng-click="verifyLoginCredentials()"
                                class="btn btn-success btn-block" style=" background-color: #179bd7; width: 100%; font-size: 13px; font-family: &quot;Open Sans&quot;,sans-serif; font-weight: 600; padding-top: 0px; padding-bottom: 7px; text-align: center; text-decoration: none; border: 1px solid #095779; -khtml-border-radius: 4px; border-radius: 4px; color: #fff; cursor: pointer; ">Log In
                        </button>
                    </div>
                </div>
            </div>
<div class="copyright" style="
    display: block;
    text-align: center;
">
<img class="center-block text-center" src="{% static 'images/img.png' %}" style="
    width: 20px;
    margin-bottom: 9px;
">
Copyright©&nbsp;2020 Jorbox, Inc
    <br><a href="https://www.jorbox.com/privacy-policy/" target="_blank">Privacy Policy</a></div>
        </form>
        <div id="loginFailed" class="alert alert-danger">
            <p>Could Not Login, Error message: {$ errorMessage $}</p>
        </div>
    </div>
</div>
</div>
<script src="https://code.angularjs.org/1.6.5/angular.min.js"></script>
<script src="https://code.angularjs.org/1.6.5/angular-route.min.js"></script>
<script src="{% static 'loginSystem/login-systen.js' %}"></script>

</body>
</html>