Skip to content

Instantly share code, notes, and snippets.

@AndrewDonelson

AndrewDonelson/All-In-One-Sign-In-Page.markdown

Created August 31, 2014 05:43
Show Gist options
  • Save AndrewDonelson/81f6bc69a72ca6e53db4 to your computer and use it in GitHub Desktop.
Save AndrewDonelson/81f6bc69a72ca6e53db4 to your computer and use it in GitHub Desktop.
Download ZIP
A Pen by Andrew Donelson.
Raw
All-In-One-Sign-In-Page.markdown

All In One Sign In Page

One stop shopping. this single page Sign-in page can handle Sign-in, Quick register and recover password. It's ready for HybridAuth (social Login) and a Simple PHP script on the back-end and your off. Enjoy.

A Pen by Andrew Donelson on CodePen.

License.

Raw
index.html
<html lang=en>
<head>
<meta charset="utf-8">
<title></title>
<meta name="apple-mobile-web-app-capable" content="yes">
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="apple-touch-fullscreen" content="yes">
<meta name="HandheldFriendly" content="true"/>
<meta name="MobileOptimized" content="320"/>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Calligraffitti' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Source+Code+Pro:300' rel='stylesheet' type='text/css'>
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<style>
</style>
</head>
<body>
<div id="container">
<h1 class="company-name">Your Company</h1>
<p class="company-tagline center-block">This amazing Sign In page will absolutely blow your mind!</p>
<div class="loginbox isobox center-block">
<div class="row">
<div class="col-md-12">
<div class="pr-wrap">
<h4 class="form-title">Recovery</h4>
<form method="post" action="?route=users/recover">
<div class="pass-reset">
<span class="text-danger" style="margin-left:38px">Enter the email you signed up with</span>
<div class="control-group">
<div class="controls">
<div class="input-group input-group-sm">
<span class="input-group-addon"><i class="fa fa-envelope"></i></span>
<input type="text" name="email" class="form-control" placeholder="enter email">
</div>
</div>
</div>
<div class="control-group">
<label class="control-label"></label>
<div class="controls text-center">
<button type="button" value="Cancel" class="btn btn-danger btn-md" onclick="location.href='?route/users/signin'">Cancel</button>
<button type="submit" value="Submit" class="pass-reset-submit btn btn-success">Send Email</button>
</div>
</div>
</form>
</div>
</div>
<div class="re-wrap">
<h4 class="form-title">Registration</h4>
<form id="signup" method="post" action="?route=users/register">
<div class="control-group">
<div class="controls">
<div class="input-group input-group-sm">
<span class="input-group-addon"><i class="fa fa-envelope"></i></span>
<input type="text" name="email" class="form-control" placeholder="enter email">
</div>
</div>
</div>
<div class="control-group">
<div class="controls">
<div class="input-group input-group-sm">
<span class="input-group-addon"><i class="fa fa-key"></i></span>
<input type="password" name="passwd" class="form-control" placeholder="Password" title="Password">
</div>
</div>
</div>
<div class="control-group">
<div class="controls">
<div class="input-group input-group-sm">
<span class="input-group-addon"><i class="fa fa-key"></i></span>
<input type="password" name="conpasswd" class="form-control" placeholder="Re-enter Password" title="Re-enter Password">
</div>
</div>
</div>
<div class="control-group">
<div class="controls">
<div class="input-group input-group-sm select2-bootstrap-prepend">
<span class="input-group-addon"><i class="fa fa-users"></i></span>
<div class="select2-container form-control select2" id="s2id_single-with-icon">
<a href="javascript:void(0)" onclick="return false;" class="select2-choice select2-default" tabindex="-1">
<span class="select2-chosen">Account Type</span>
<abbr class="select2-search-choice-close"></abbr>
<span class="select2-arrow"><b></b></span>
</a>
<input class="select2-focusser select2-offscreen" type="text" id="s2id_autogen5">
</div>
<select id="single-with-icon" class="form-control select2 select2-offscreen" tabindex="-1">
<option></option>
<option value="A">Publisher</option>
<option value="B">Advertiser</option>
</select>
</div>
</div>
</div>
<div class="control-group">
<label class="control-label"></label>
<div class="controls text-center">
<button type="button" value="Cancel" class="btn btn-danger btn-md" onclick="location.href='?route/users/signin'">Cancel</button>
<button type="submit" class="btn btn-success">Register</button>
</div>
</div>
</form>
</div>
<div class="wrap" style="text-align:center">
<h4 class="form-title">Sign In</h4>
<form class="login" method="post" action="?route=users/signin">
<input type="hidden" name="provider" value="i2tmlabs">
<div class="input-group input-group-md">
<span class="input-group-addon"><i class="fa fa-user"></i></span>
<input type="text" name="login" class="form-control" placeholder="Username">
</div>
<div class="input-group input-group-md">
<span class="input-group-addon"><i class="fa fa-key"></i></span>
<input type="password" name="passwd" class="form-control" placeholder="Password" title="Password">
</div>
<div class="control-group">
<div class="controls">
<div class="btn-group" style="margin-left:16px">
<button type="button" value="Cancel" class="btn btn-danger btn-xs" onclick="location.href='?route/core/home'">Cancel</button>
<button onclick="return false;" class="btn btn-info btn-xs register">Register</button>
<button onclick="return false;" class="btn btn-warning btn-xs forgot-pass">Recover</button>
<button type="submit" value="Sign In" class="btn btn-success btn-xs">Login</button>
</div>
</div>
</div>
<div class="remember-forgot">
<div class="row">
<div class="col-md-12">
<div class="form-group" style="text-align: center">
<div class="custom-checkbox">
<label>
<input name="remeber" type="checkbox">
<span>&nbsp;Remember</span>
</label>
</div>
</div>
</div>
</div>
</div>
</form>
<div class="social">
<div class="row">
<div class="col-md-12">
<button class="btn btn btn-facebook" title="Facebook" href="?provider=Facebook" style="border-radius: 45px 0 0"><i class="fa fa-facebook fa-3x"></i></button>
<button class="btn btn-twitter" title="Twitter" href="provider=Twitter"><i class="fa fa-twitter fa-3x"></i></button>
<button class="btn btn-google" title="Google" href="provider=Google"><i class="fa fa-google-plus fa-3x"></i></button>
<button class="btn btn-linkedin" title="LinkedIn" href="provider=LinkedIn" style="border-radius: 0 45px 0 0;"><i class="fa fa-linkedin fa-3x"></i></button>
</div>
</div>
<div class="row">
<div class="col-md-12" style="margin-top: 5px">
<button class="btn btn-bitcoin" title="Bitcoin" style="border-radius: 0 0 0 45px"><i class="fa fa-bitcoin fa-3x"></i></button>
<button class="btn btn-windows" title="Windows"><i class="fa fa-windows fa-3x"></i></button>
<button class="btn btn-apple" title="Apple"><i class="fa fa-apple fa-3x"></i></button>
<button class="btn btn-tumblr" title="Tumblr" href="?route=users/signin&provider=Tumblr" style="border-radius: 0 0 45px 0"><i class="fa fa-tumblr fa-3x"></i></button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="tail">
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script>
</script>
</div>
</body>
</html>
Raw
script.js
$(document).ready(function () {
$('.forgot-pass').click(function(event) {
$(".pr-wrap").show();$(".wrap").hide();
});
$('.pass-reset-submit').click(function(event) {
$(".pr-wrap").hide();$(".wrap").show();
});
$('.register').click(function(event) {
$(".re-wrap").show();$(".wrap").hide();
});
$('.pass-reset-submit').click(function(event) {
$(".re-wrap").hide();$(".wrap").show();
});
});
Raw
style.css
.loginbox {
position:relative;
width: 300px;
height: 360px;
border: 1px solid rgba(14, 131, 205, 1);
/*shadow*/
-webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, .3);
-moz-box-shadow: 5px 5px 5px rgba(0, 0, 0, .3);
box-shadow: 5px 5px 5px rgba(0, 0, 0, .3);
/*corners*/
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
background-color: rgba(100,150,200, .25);
box-shadow: inset 0 50px rgba(255,255,255,0.2),
inset 0 -15px 30px rgba(0,0,0,0.4),
0 5px 10px rgba(0,0,0,0.5);
}
html,body {
width: 100%;
height: 100%;
-webkit-font-smoothing: antialiased;
background: #000222;
background: -moz-linear-gradient(top, #000222 0%, #4b637c 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#000222), color-stop(100%,#4b637c));
background: -webkit-linear-gradient(top, #000222 0%,#4b637c 100%);
background: -o-linear-gradient(top, #000222 0%,#4b637c 100%);
background: -ms-linear-gradient(top, #000222 0%,#4b637c 100%);
background: linear-gradient(top, #000222 0%,#4b637c 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000222', endColorstr='#4b637c',GradientType=0 );
padding: 0;
margin: 0;
}
.company-name{
font-family:Calligraffitti;
color: #000222;
font-size: 6em;
text-shadow: -1px -1px 1px rgba(14, 131, 205, 1), 1px 1px 1px rgba(14, 131, 205, 0.25),0 0 8px white
}
.company-tagline{
margin-top:2em;
font-family: 'Source Code Pro';
color: rgba(195, 197, 228, 0.8);
text-shadow: -1px -1px 1px rgba(14, 131, 205, 1), 1px 1px 1px rgba(14, 131, 205, 0.25)
}
.social{margin:0 auto}
.social button { transition: color 0.5s ease;width:64px;height:64px}
.social button:hover{color: #2ecc71}
.btn-facebook{background-color:rgb(50,100,250);color:#ddd;text-shadow:0px 0px 4px black}
.btn-twitter{background-color:rgb(50,200,250);color:#fff;text-shadow:0px 0px 4px black}
.btn-google{background-color:rgb(250,100,50);color:#eee;text-shadow:0px 0px 4px black}
.btn-linkedin{background-color:rgb(75,75,175);color:#fff;text-shadow:0px 0px 4px black}
.btn-bitcoin{background-color:rgb(200,175,25);color:#666;text-shadow:0px 0px 2px black}
.btn-windows{background-color:rgb(220,220,240);color:#369;text-shadow:0px 0px 2px black}
.btn-apple{background-color:rgb(240,220,200);color:#a33;text-shadow:0px 0px 2px black}
.btn-tumblr{background-color:rgb(75,125,175);color:#aaa;text-shadow:0px 0px 2px black}
#container {
position: fixed;
width: 500px;
height: 500px;
top: 30%;
left: 50%;
margin-top: -250px;
margin-left: -250px;
text-align: center;
-webkit-animation-name: bounceInDown;
-webkit-animation-fill-mode: both;
-webkit-animation-duration: 1.5s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: linear;
-moz-animation-name: bounceInDown;
-moz-animation-fill-mode: both;
-moz-animation-duration: 1.5s;
-moz-animation-iteration-count: 1;
-moz-animation-timing-function: linear;
animation-name: bounceInDown;
animation-fill-mode: both;
animation-duration: 1.5s;
animation-iteration-count: 1;
animation-timing-function: linear;
}
p {
width: 80%;
font-size: 23px;
line-height: 1.3em;
color: #fff;
margin: 1.1em auto;
text-align: center;
text-shadow: 0 0 2px rgba(0, 0, 0, 0.9);
}
p a {
color: #fff;
border-bottom: 2px solid #2da1ec;
-webkit-transition: all .4s ease;
-moz-transition: all .4s ease;
-o-transition: all .4s ease;
transition: all .4s ease;
}
ul.data-rel-attributes {margin-top: 10px; margin-bottom: 10px;}
/* 5 columns by default */
. {width:60px;height:60px;margin:5px;font-size: 300%}
.isobox {
-moz-box-shadow: rgba(32,32,32,1) 0 4px 30px;
-webkit-box-shadow: rgba(32,32,32,1) 0 4px 30px;
-khtml-box-shadow: rgba(32,32,32,1) 0 4px 30px;
box-shadow: rgba(32,32,32,1) 0 4px 30px;
}
@media screen and (min-width:320px){
.navbar-dark{font-size:10px}
.navbar-text{margin-left: auto;margin-right: auto}
}
/*
@media screen and (max-width:1600px){. { font-size: 500%}}
@media screen and (max-width:1440px){. { font-size: 475%}}
@media screen and (max-width:1366px){. { font-size: 450%}}
@media screen and (max-width:1280px){. { font-size: 425%}}
@media screen and (max-width:1024px){. { font-size: 400%}}
@media screen and (max-width:768px){. { font-size: 375%}}
@media screen and (max-width:480px){. { font-size: 350%}. {width:70px;height:70px}}
@media screen and (max-width:320px){. { font-size: 250%}. {width:70px;height:70px}}
*/
body.signin .navbar-fixed-top {
display:none;
visibility:hidden;
}
form small {float:left;}
.wrap
{
width: 100%;
height: 100%;
min-height: 100%;
position: relative;
top: 0;
left: 0;
z-index: 99;
}
h4.form-title
{
font-family: Calligraffitti;
font-size: 15px;
font-weight: 600;
text-align: center;
color: ghostwhite;
margin-top: 5%;
text-transform: uppercase;
letter-spacing: 5px;
}
form{margin: 0 auto;text-align:left;width: 240px}
form .input-group {width: 200px;left: 20px;margin-bottom:5px}
form.login .input-group-addon{font-size: 27px;line-height: 20px;width: 60px}
form.login input:-webkit-autofill,form.login input:-webkit-autofill{-webkit-box-shadow: 0 0 0px 1000px rgba(244, 164, 96, 0.8) inset;border:none}
form.login input[type="submit"]
{
width: 220px;
left: 30px;
position: relative;
font-size: 14px;
text-transform: uppercase;
font-weight: 500;
margin-top: 16px;
outline: 0;
cursor: pointer;
letter-spacing: 1px;
}
form.login input[type="submit"]:hover
{
transition: background-color 0.5s ease;
}
form.login .remember-forgot
{
float: left;
width: 100%;
margin: 10px 0 0 0;
}
form.login .form-control{height:41px}
form.login .forgot-pass-content
{
min-height: 20px;
margin-top: 10px;
margin-bottom: 10px;
}
form.login label, form.login a
{
font-size: 12px;
font-weight: 400;
color: #FFFFFF;
}
.pr-wrap
{
width: 100%;
height: 100%;
min-height: 100%;
position: relative;
top: 0;
left: 0;
z-index: 999;
display: none;
}
.re-wrap
{
width: 100%;
height: 100%;
min-height: 100%;
position: relative;
top: 0;
left: 0;
z-index: 999;
display: none;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment