Untitled

<!DOCTYPE html>
<html>
<head>
    <title> BroCialize </title>


<script>

var count = 0;

function validate()
{
    var username = document.login.username.value;
    var password = document.login.password.value;
    var valid = false;
    var usernameArray = ["Gdp", "Hekman", "Koning", "ErikHekman", "ThijsWaardenburg", "Ronald", "RonaldVanEssen" ];
    var passwordArray = ["Gdp123", "Hekman123", "Koning123", "ErikHekman123", "ThijsWaardenburg123", "Ronald123", "RonaldVanEssen123"];

    for (var i = 0; i < usernameArray.length; i++)
	{

    if ((username == usernameArray[i]) && (password == passwordArray[i]))
		{
        valid = true;
        break;
		}
	};

    if (valid==true)
    {
        alert("Log in was succesfull!")
        window.location = "timeline.html";

    };

    if (count >= 2 )
    {
        alert("Too many attempts");
        document.login.username.value = "You are now blocked";
        document.login.password.value = "You are now blocked";
        document.login.username.disabled = true;
        document.login.password.disabled = true;
		return false;

    };

    if (valid == false)
    {

		alert("Wrong password or username " + count);
		count++
		return false;
    } ;

};

function registersend()
{
    if (valid==true)
        window.location = "register.html";

}


</script>

<style>
html {
    font-family: Arial, Helvetica, sans-serif;
    color: #333;
}
body {
    background: #CCC;
    margin: 0;
}
#container {
    width: 900px;
    margin: 0 auto;
    background: #FFF;
}
#header {
    width: 100%;
    height: 60px;
    border-bottom: 1px solid #c7c7c7;
    background: #3f0b04;
    text-align: center;
}
#header h1 {
    color: #e7c321;
}
#logo {
    float: left;
    width: 40px;
    height: 40px;
    margin: 10px;
    background: #CCC;
}
#navbar {
    height: 36px;
    clear: both;
    background-color: #e7c321;
}
#navbar ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}
#navbar ul li {
    padding: 10px;
    float: left;
}
#navbar ul li a {
    font size: 12px;
    float: left;
    padding: 0 0 0 20px;
    display: block;
}
#banner {
    background: #3f0b04;
    heigth: 120px;
    clear: both;
    padding: 20px;
    text-align: center;
    color: #FFF;
    margin: 10px 0 2px 0;
}
#middle-collum {
    float: left;
    width: 858px;
    height: 500px;
    border: 1px solid #333;
    color: #000;
    background: #bcbab4;
    padding: 20px;
    text-align: center;
}
#login-logo {
    width: 100%;
    ;
    height: 200px;
    float: center;
}
#login {
    float: center;
    width: 175px;
}
#submit {
    width: 170px;
    float: center;
}
#register {
    width: 170px;
    float: center;
}
#footer {
    padding: 20px;
    clear: both;
    color: #FFF;
    background-color: #3f0b04;
    text-align: center;
}

#login ul {
    list-style-type:none !important;
}


</style>

</head>


<body>

<!-- CONTAINER -->
<div id="container">
    <!-- HEADER -->
    <div id="header">
        <div id="logo"><img src="http://imgur.com/578H3e8.png"></img></div>
        <h1>BroCialize</h1>
        <div id="navbar">
            <ul>
                <li><a href="url"></a></li>
                <li><a href="url"></a></li>
                <li><a href="url"></a></li>
            </ul>
        </div>
    </div>
    <!-- CONTENT AREA -->
    <div id="content-area">
        <div id="banner">This site is Legen...wait for it...Dary</div>
        <div id="middle-collum">
            <div id="login-logo"><img src="http://imgur.com/uelX4ie.png></img></div>
            <div id="login">
                <form name="login" onsubmit="return validateForm() ;" method="post">
                    <ul>
                        <li>username: <input class="username" type="text" name="username"></li>
                        <li>password: <input class="password" type="password" name="password"></li>
                    </ul>
                <input type="button" class="submit" value="Log In" name="submit" onclick="validate()">
                <button onclick="registersend()">Register</button>
                </form>
            </div>

        </div>
    </div>
    <!--FOOTER -->
    <div id="footer">Copyright by BroCialize - 2016</div>
</div> <!-- END CONTAINER -->
</body>

    </html>