Untitled

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>melon.pw | login</title>
    <link href="https://fonts.googleapis.com/css?family=Dosis" rel="stylesheet">
    <script src="/jquery.js"></script>
    <script src="/jquery-ui.js"></script>
</head>
<body>
<div class="site">
<div class="header">
    <div class="link" style="float: left;">melon.pw</div>
    <?php
        if (isset($_SESSION['username'])) {
    ?>
    <p style="float: right;" id="username"></p>
    <?php
        } else {
    ?>
    <div class="link" style="float: right;" id="register">Register</div>
    <div class="link" style="float: right;" id="login">Login</div>
    <?php
        }
    ?>
</div>

<br>
<div class="message">
</div>

<div class="authentication">
    <div class="webheader">
        <span style="margin: 3px 0 0 10px; display:inline-block;">Authentication</span>
        <div id="exit" class="link exit">x</div>
    </div>
    <form method="post" action="login.php">
        <table>
            <tr>
                <td>Username: </td>
                <td>
                    <input type="text" name="username">
                </td>
            </tr>
            <tr>
                <td>Password: </td>
                <td>
                    <input type="password" name="password">
                </td>
            </tr>
            <tr>
                <td></td>
                <td>
                    <input type="submit" name="login" value="Login">
                </td>
            </tr>
        </table>
    </form>
    <br>
    <div class="link" id="pass" style="margin-left: 15px; font-size: 15px">Request a new password?</div>
</div>
</div>
</body>
<style>

    @keyframes hover {
        from {color: #eee;}
        to   {color: lightblue;}
    }

    @keyframes bottomGlow {
        0% {border-bottom: solid 1px #5D21C4;}
        25% {border-bottom: solid 1px #000ED1;}
        50% {border-bottom: solid 1px #005BD1;}
        75% {border-bottom: solid 1px #00A0D1;}
        100% {border-bottom: solid 1px #00D1C7;}
    }

    @keyframes leftGlow {
        0% {border-left: solid 1px #5D21C4;}
        25% {border-left: solid 1px #000ED1;}
        50% {border-left: solid 1px #005BD1;}
        75% {border-left: solid 1px #00A0D1;}
        100% {border-left: solid 1px #00D1C7;}
    }

    @keyframes textGlow {
        0% {color: #5D21C4;}
        25% {color: #000ED1;}
        50% {color: #005BD1;}
        75% {color: #00A0D1;}
        100% {color: #00D1C7;}
    }

    @keyframes backgroundGlow {
        0% {background-color: #5D21C4;}
        25% {background-color: #000ED1;}
        50% {background-color: #005BD1;}
        75% {background-color: #00A0D1;}
        100% {background-color: #00D1C7;}
    }

    html, body {
        font-family: "Dosis", sans-serif;
        background-color: #222;
        color: #eee;
        margin: 0;
        overflow: hidden;
        height: 100%;
    }

    table {
        margin: 20px;
        width: 100%;
    }

    input[type=text], input[type=password] {
        border: none;
        color: #eee;
        background-color: #222;
        border-radius: 7px;
    }

    input[type=submit] {
        animation-name: backgroundGlow;
        animation-duration: 12s;
        animation-iteration-count: infinite;
        animation-direction: alternate;
        background-color: green;
        border: none;
        color: #eee;
        padding: 0 15px 0 15px;
        font-family: "Dosis", sans-serif;
        font-size: 13px;
    }

    .link {
        text-decoration: none;
        color: #eee;
        font-size: 18px;
        padding: 2px 4px 0 4px;
    }

    .link:hover {
        animation-name: hover;
        animation-duration: 1s;
        color: lightblue;
    }

    .exit:hover {
        animation-name: textGlow, leftGlow;
        animation-duration: 2s;
        animation-iteration-count: infinite;
        animation-direction: alternate;
    }

    .exit {
        animation-name: textGlow, leftGlow;
        animation-duration: 12s;
        animation-iteration-count: infinite;
        animation-direction: alternate;
        float: right;
        color: lightblue;
        height: 100%;
        border-left: 1px solid lightblue;
        padding: 0 12px 0 12px;
    }

    .header, .webheader {
        animation-name: bottomGlow;
        animation-duration: 12s;
        animation-iteration-count: infinite;
        animation-direction: alternate;
        height: 30px;
        width: 100%;
        background-color: #111;
        border-bottom: 1px solid lightblue;
    }

    .authentication {
        position: absolute;
        height: 210px;
        width: 350px;
        background-color: #111;
        border: 1px solid lightblue;
        top: calc(50% - 105px);
        left: calc(50% - 175px);
    }

</style>
<script>

    $(document).ready(function() {
        $(".authentication").hide();
    });

    $("#login").click(function() {
        $(".authentication").show("drop", 1000);
        $(".authentication").html('<div class="webheader"><span style="margin: 3px 0 0 10px; display:inline-block;">Authentication</span><div id="exit" class="link exit">x</div></div><form method="post" action="login.php"><table><tr><td>Username: </td><td><input type="text" name="username"></td></tr><tr><td>Password: </td><td><input type="password" name="password"></td></tr><tr><td></td><td><input type="submit" name="login" value="Login"></td></tr></table></form><br><div class="link" id="pass" style="margin-left: 15px; font-size: 15px">Request a new password?</div></div>');
    });

    $("#register").click(function() {
        $(".authentication").show("drop", 1000);
        $(".authentication").html('<div class="webheader"><span style="margin: 3px 0 0 10px; display:inline-block;">Authentication</span><div id="exit" class="link exit">x</div></div><form method="post" action="register.php"><table><tr><td>Username: </td><td><input type="text" name="username"></td></tr><tr><td>Password: </td><td><input type="password" name="password"></td></tr><tr><td>Confirm Password: </td><td><input type="password" name="confirmPassword"></td></tr><tr><td></td><td><input type="submit" name="register" value="Register"></td></tr></table></form></div>');

        $.ajax({
            type: "post",
            url: "melon.pw/register.php",
            cache: false,
            data: {
                username: username,
                password: password
            },
            success: function(data) {
                if (data != "none") {
                    $(".message").text(data);
                }
            }
        });
    });

    $("body").on("click", 'div.exit', function() {
        $(".authentication").hide("drop", 1000);
    });

    $(".authentication").draggable({
        handle: ".webheader",
        snap: false
    });
</script>
</html>