Skip to content

Instantly share code, notes, and snippets.

@A-J-C

A-J-C/index.html

Created June 1, 2013 21:31
Show Gist options
  • Save A-J-C/5691790 to your computer and use it in GitHub Desktop.
Save A-J-C/5691790 to your computer and use it in GitHub Desktop.
Download ZIP
A CodePen by Alex C. LogIn screen - A simple login in screen to test out css and some jQuery.
Raw
index.html
<body>
<!-- log in box -->
<div id="hint1"><h3>username: master</h3></div>
<div id="hint2"><h3>password: 123456789</h3></div>
<div id="center">
<div id="form_sheet">
<div id="form_title"><h2>Note Book</h2></div>
<div id="message_login"></div>
<input type="text" name="name" id="name" placeholder="username" />
<br>
<input type="password" name="password" id="password" placeholder="password" />
<br>
<button id="login">Log In</button>
</div>
</div>
<!-- End log in box -->
</body>
Raw
script.js
$(document).ready(function() {
// a login check function
var login_check = function() {
var username = $("#name").val();
var password = $("#password").val();
var login_screencheck = false;
if (username === "master" && password === "123456789") {
$("input").hide();
$("button").hide();
$("#message_login").append("<h3>Welcome back master!</h3>");
login_screencheck = true;
} else {
alert("Wrong username or password.");
}
}
// end function
$("#login").click(login_check);
});
Raw
style.css
@import url(http://fonts.googleapis.com/css?family=Geo);
body{
background: #333333;
padding: 50px 50px;
}
#hint1{
background: black;
font-family: 'Geo', sans-serif;
color: white;
position: absolute;
left: 45%;
top: 0%;
padding: 10px;
margin-left: -180px;
}
#hint2{
background: black;
font-family: 'Geo', sans-serif;
color: white;
position: absolute;
left: 45%;
top: 0%;
padding: 10px;
margin-left: 5px;
}
#form_title{
font-family: 'Geo', sans-serif;
color: white;
text-shadow: 1px 1px 5px black;
}
#center {
width: 300px;
height: 300px;
position: absolute;
left: 50%;
top: 300px;
margin-left: -150px;
margin-top: -150px;
}
#form_sheet{
width: 200px;
height: 200px;
background: #222529;
border-bottom-left-radius: 40px 40px;
border-top-right-radius: 40px 40px;
box-shadow: 0px 20px 25px #9ac0ff;
position: absolute;
padding: 30px 30px;
font-family: 'Geo', sans-serif;
color: white;
}
#login{
width: 100px;
height: 50px;
background: #333333;
font-family: 'Geo', sans-serif;
font-size: 16px;
color: white;
border-radius: 5px;
border-color: #333333;
box-shadow: 0px 0px 0px #9ac0ff;
border-bottom-left-radius: 40px;
border-top-right-radius: 40px;
postion: absolute;
margin: 30px 50px;
}
input{
width: 190px;
font-family: 'Geo', sans-serif;
font-size: 16px;
background: #9ac0ff;
border-color: #9ac0ff ;
text-shadow: 1px 1px 5px black;
color: white;
outline-color: white;
}
::-webkit-input-placeholder {
color: white;
}
#message_login{
font-family: 'Geo', sans-serif;
color: white;
position: absolute;
text-shadow: 1px 1px 5px black;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment