sdfds

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>

<head>
    <title>FunWeb </title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://fonts.googleapis.com/css?family=Oleo+Script:400,700" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Teko:400,700" rel="stylesheet">
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/lettering.js/0.7.0/jquery.lettering.min.js"> </script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/textillate/0.4.0/jquery.textillate.js"> </script>

    <link href="test.css" rel="stylesheet">
    <style>
        html{
            position: relative;
            min-height: 100%;
        }

        body{
            padding-top: 60px;
            width: 100%;
            height: 100%;
            background: #3a6186;
            background: -webkit-linear-gradient(to left, #3a6186 , #89253e); /* Chrome 10-25, Safari 5.1-6 */
            background: linear-gradient(to left, #3a6186 , #89253e); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

        }

        #login{
            font-family: 'Teko', sans-serif;
            color : #fff;
        }
        .content-header{
            font-family: 'Oleo Script', cursive;
            color:#fcc500;
            font-size: 45px;
        }


        body{
            font-family: 'Teko', sans-serif;
        }

        .items{
            padding-top: 100px;
        }

        .section-content{
            text-align: center;
        }

        label{
            font-size: 1.3em;
            line-height: 1em;
            font-weight: normal;
        }


        textarea.form-control {
            height: 135px;
        }

        #footer{
            position:relative;
            bottom:0;
            top: 80px;
            font-family: 'Teko', sans-serif;
        }
    </style>

</head>

<body>
<div class ="container-fluid" id="login">
    <div class="text-center">
        <h1> <span class="content-header wow fadeIn " data-wow-delay="0.2s" data-wow-duration="2s"> &lt; Fun Web  &#47; &gt;</span></h1>
        <h3 class="bounce">A new and exciting game!</h3>
    </div>


    <form class="items" action="/validateRegistration" method="post">

        <div class="col-md-3"> </div>
        <div class="col-md-6">
            <div class="form-group">
                <label for="email"> E-mail </label>
                <input type="text" class="form-control" id="email" name="email" placeholder=" Enter your e-mail">
            </div>
            <div class="form-group">
                <label for="username">Username</label>
                <input type="text" class="form-control" id="username" name="username" placeholder=" Enter Username">
            </div>
            <div class="form-group">
                <label for="password">Password</label>
                <input type="password" class="form-control" id="password" name="password" placeholder=" Enter password">
            </div>

            <div class="checkbox">
                <label><input type="checkbox"> Remember me</label>
            </div>

            <button type="submit" class="btn btn-success">Register</button>


        </div>
    </form>
</div>

<footer id = "footer">
    <div class="container">
        <p class="text-center">Contact | FunWeb &#9400; 2017 <p>
    </div>
</footer>


<script>
    $(document).ready(function(){
        $('.content-header').textillate({
            in: {
                shuffle: false,
                sync: true
            },
            out: {
                effect: 'FadeOutRightBig',
                shuffle: false,
                sync: true
            }
        });

    })
</script>

<script>
    $(document).ready(function(){
        $('.bounce').textillate({
            loop: true,
            in: {
                effect: 'tada',
                delayScale: 1,
                delay: 150,
                shuffle: true
            },
            out: {
                effect: 'flipOutY',
                reverse: true
            }
        });

    })
</script>

<script type="text/javascript">
    $(document).ready(function() {
        $("#username").change(function () {
            $("#username").tooltip("hide");
            $.post("/checkUsernameAvailable", {
                username: $("#username").val()
            }, function (data) {

                data = JSON.parse(data);

                if (data.status === 'ok') {
                    $("#username").tooltip("hide");
                } else if (data.status === "taken") {
                    $("#username").attr("title",
                        "The username is already taken, what about: " + data.suggestion);
                    $("#username").tooltip("fixTitleda");
                    $("#username").tooltip("show");
                    $("#username").trigger("mouseover");
                }
            });
        });

        $("#password").change(function () {
            $("#password").tooltip("hide");

            $.post("/checkPasswordStrength", {
                password: $("#password").val()
            }, function (data) {
                data = JSON.parse(data);

                var strengthString = null;

                if (data.strength === 0) {
                    strengthString = "weak password";
                } else if (data.strength === 1) {
                    strengthString = "medium password";
                } else {
                    strengthString = "strong password";
                }

                $("#password").attr("title", strengthString);
                $("#password").tooltip("fixTitle");
                $("#password").tooltip("show");
                $("#password").trigger("mouseover");

            })
        });
    });
</script>

</body>
</html>