HTML - Quikship

An example of a landing/login page.

Notice

I do not recommend making a login using Javascript because the client can view the Javascript source. Login was only used in a college assignment to demonstrate how functions and variables work.

HTML

<!DOCTYPE html>
<head>
<title>Assignment #2</title>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<script type="text/javascript" src="js/main.js"></script>
</head>
<body>
<div id="wrapper">
    <div id="landing_header">
    </div>
    <div id="login">
        <form name="login" action="woo.html" onsubmit="return checkData();">
        <input type="text" name="cardNumber" class="textbox" onclick="clearCard();" value="Access Card Number"/>
        <input type="text" name="password" class="textbox" onclick="clearPass();" value="Password"/>
        <input type="submit" name="submit" class="loginbutton" value="Login"/>
        </form>
    </div>
    <div id="footer">
    &#169; QuikShip 2013 / Terms / Privacy / Jobs / Other
    <div>
</div>
</body>
</html>

CSS

body
{
    background-color:#EEEEEE;
    font-family:Verdana;
    font-size:14px;
    color:#666666;
}

a:link, a:visited
{
    color:#EEEEEE;
    text-decoration:none;
}

#wrapper
{
    margin:auto;
    width:340px;
}

#landing_header
{
    margin-top:150px;
    height:150px;
    width:340px;
    background-image:url('../images/logo.png');
    background-repeat:no-repeat;
    background-position:20px, 150px;
}

#login
{
    width:300px;
    padding:20px;
    border-radius:4px;
    background-image:url('images/form_background.png');
    background-repeat:repeat;
    color:#DEDEDE;
}

.textbox
{
    background-color:#F3F3F3;
    color:#999999;
    padding:10px;
    width:278px;
    border:1px solid #D3D3D3;
    margin-top:3px;
    margin-bottom:10px;
}

.loginbutton
{
    -webkit-appearance: none;
    padding:5px;
    width:300px;
    height:40px;
    border:1px solid #009966;
    border-bottom:3px solid #009966;
    background-color:#22BB88;
    color:#FFFFFF;
}

.registerbutton
{
    padding:5px;
    width:160px;
    height:40px;
    font-weight:none;
    border:1px solid #992222;
    border-bottom:3px solid #992222;
    background-color:#BB4444;
    color:#FFFFFF;
}

#footer
{
    position:absolute;
    right:30px;
    bottom:50px;
    color:#333333;
    font-size:10px;
    background-color:#DDDDDD;
    padding:5px;
    border:0px;
    border-radius:4px;
    z-index:-200;
}

Javascript

var state = false;
var textClear = false;
var cardState = false;
var passState = false;

function checkData()
{
    if(document.login.cardNumber.value.length == 7)
    {
        cardState = true;
    }
    else
    {
        cardState = false;
        document.login.cardNumber.style.borderColor = "#992222";
        document.login.cardNumber.style.backgroundColor = "#BB4444";
        document.login.cardNumber.style.color = "#FFFFFF";
        document.login.cardNumber.value = "Invalid access card number"
    }

    if(document.login.password.value != "")
    {
        passState = true;
    }
    else
    {
        passState = false;
        document.login.password.type = "text";
        document.login.password.style.borderColor = "#992222";
        document.login.password.style.backgroundColor = "#BB4444";
        document.login.password.style.color = "#FFFFFF";
        document.login.password.value = "Password cannot be left blank"
    }

    if(cardState == true && passState == true)
    {
        state = true;
    }

    return state;
}

function clearCard()
{
    if(cardState == false || textClear == false)
    {
        document.login.cardNumber.style.borderColor = "#D3D3D3";
        document.login.cardNumber.style.backgroundColor = "#F3F3F3";
        document.login.cardNumber.style.color = "#999999";
        document.login.cardNumber.value = "";
        textClear = true;
    }
}

function clearPass()
{
    if(passState == false || textClear == false)
    {       
        document.login.password.type = "password";
        document.login.password.style.borderColor = "#D3D3D3";
        document.login.password.style.backgroundColor = "#F3F3F3";
        document.login.password.style.color = "#999999";
        document.login.password.value = "";
        textClear = true;
    }

}

I could have used variables to determine preset hex colors. An example would be var primaryColor = "D3D3D3"; or simply var GREY = "D3D3D3";.

Results

Quikship