Skip to content

Commit

Permalink
Finished signup/login page
Browse files Browse the repository at this point in the history
  • Loading branch information
award28 committed Apr 1, 2016
1 parent 4646cfb commit 06c6507
Show file tree
Hide file tree
Showing 5 changed files with 308 additions and 73 deletions.
74 changes: 74 additions & 0 deletions public/css/form-elements.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,74 @@

input[type="text"],
input[type="password"],
textarea,
textarea.form-control {
height: 50px;
margin: 0;
padding: 0 20px;
vertical-align: middle;
background: #fff;
border: 3px solid #fff;
font-family: 'Roboto', sans-serif;
font-size: 16px;
font-weight: 300;
line-height: 50px;
color: #888;
-moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px;
-moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none;
-o-transition: all .3s; -moz-transition: all .3s; -webkit-transition: all .3s; -ms-transition: all .3s; transition: all .3s;
}

textarea,
textarea.form-control {
padding-top: 10px;
padding-bottom: 10px;
line-height: 30px;
}

input[type="text"]:focus,
input[type="password"]:focus,
textarea:focus,
textarea.form-control:focus {
outline: 0;
background: #fff;
border: 3px solid #fff;
-moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none;
}

input[type="text"]:-moz-placeholder, input[type="password"]:-moz-placeholder,
textarea:-moz-placeholder, textarea.form-control:-moz-placeholder { color: #888; }

input[type="text"]:-ms-input-placeholder, input[type="password"]:-ms-input-placeholder,
textarea:-ms-input-placeholder, textarea.form-control:-ms-input-placeholder { color: #888; }

input[type="text"]::-webkit-input-placeholder, input[type="password"]::-webkit-input-placeholder,
textarea::-webkit-input-placeholder, textarea.form-control::-webkit-input-placeholder { color: #888; }



button.btn {
height: 50px;
margin: 0;
padding: 0 20px;
vertical-align: middle;
background: #19b9e7;
border: 0;
font-family: 'Roboto', sans-serif;
font-size: 16px;
font-weight: 300;
line-height: 50px;
color: #fff;
-moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px;
text-shadow: none;
-moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none;
-o-transition: all .3s; -moz-transition: all .3s; -webkit-transition: all .3s; -ms-transition: all .3s; transition: all .3s;
}

button.btn:hover { opacity: 0.6; color: #fff; }

button.btn:active { outline: 0; opacity: 0.6; color: #fff; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; }

button.btn:focus { outline: 0; opacity: 0.6; background: #19b9e7; color: #fff; }

button.btn:active:focus, button.btn.active:focus { outline: 0; opacity: 0.6; background: #19b9e7; color: #fff; }
4 changes: 4 additions & 0 deletions public/js/jquery.backstretch.min.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

52 changes: 52 additions & 0 deletions public/js/scripts.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@

jQuery(document).ready(function() {

/*
Fullscreen background
*/
$.backstretch("../img/vessel.jpg");

/*
Login form validation
*/
$('.login-form input[type="text"], .login-form input[type="password"], .login-form textarea').on('focus', function() {
$(this).removeClass('input-error');
});

$('.login-form').on('submit', function(e) {

$(this).find('input[type="text"], input[type="password"], textarea').each(function(){
if( $(this).val() == "" ) {
e.preventDefault();
$(this).addClass('input-error');
}
else {
$(this).removeClass('input-error');
}
});

});

/*
Registration form validation
*/
$('.registration-form input[type="text"], .registration-form textarea').on('focus', function() {
$(this).removeClass('input-error');
});

$('.registration-form').on('submit', function(e) {

$(this).find('input[type="text"], textarea').each(function(){
if( $(this).val() == "" ) {
e.preventDefault();
$(this).addClass('input-error');
}
else {
$(this).removeClass('input-error');
}
});

});


});
153 changes: 83 additions & 70 deletions views/index.ejs
Original file line number Diff line number Diff line change
Expand Up @@ -16,10 +16,10 @@

<!-- Custom CSS -->
<link href="css/grayscale.css" rel="stylesheet">

<!--Animate CSS-->
<link href="css/animate.css" rel="stylesheet">

<!-- Custom Fonts -->
<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic" rel="stylesheet" type="text/css">
Expand Down Expand Up @@ -48,39 +48,56 @@
.navbar-custom .navbar-nav .open .dropdown-menu>li>a,.navbar-custom .navbar-nav .open .dropdown-menu {
color:#ffffff;
}
.dropdown-menu {
width: 300px !important;
}
.text-shadow {
text-shadow: 2px 2px 4px #000000;
}
.dropdown-menu {
width: 300px !important;
}
.text-shadow {
text-shadow: 2px 2px 4px #000000;
}
.vesselFade {
-webkit-animation-delay: 0.3s; /* Chrome, Safari, Opera */
animation-delay: 0.3s;
}
.vesselFade {
-webkit-animation-delay: 0.3s; /* Chrome, Safari, Opera */
animation-delay: 0.3s;
}
.firstFade {
-webkit-animation-delay: 1s; /* Chrome, Safari, Opera */
animation-delay: 1s;
}
.secondFade {
-webkit-animation-delay: 2s; /* Chrome, Safari, Opera */
animation-delay: 2s;
.firstFade {
-webkit-animation-delay: 1s; /* Chrome, Safari, Opera */
animation-delay: 1s;
}
.secondFade {
-webkit-animation-delay: 1.7s; /* Chrome, Safari, Opera */
animation-delay: 1.7s;
}
.thirdFade {
-webkit-animation-delay: 2.7s; /* Chrome, Safari, Opera */
animation-delay: 2.7s;
}
.secondPulse {
-webkit-animation-delay: 2.7s; /* Chrome, Safari, Opera */
animation-delay: 2.7s;
-webkit-animation-duration: 2s; /* Chrome, Safari, Opera */
animation-duration: 2s;
-webkit-animation-iteration-count: 20; /* Chrome, Safari, Opera */
animation-iteration-count: 20;
}
input.transparent-input{
background-color:transparent !important;
border:none !important;
}
.btn-signUp {
border: 2px solid white;
color: white;
background-color: transparent;
}
.secondPulse {
-webkit-animation-delay: 2.5s; /* Chrome, Safari, Opera */
animation-delay: 2.5s;
-webkit-animation-duration: 2s; /* Chrome, Safari, Opera */
animation-duration: 2s;
-webkit-animation-iteration-count: 20; /* Chrome, Safari, Opera */
animation-iteration-count: 20;
.btn-signUp:hover,
.btn-signUp:focus {
border: 2px solid white;
outline: none;
color: white;
background-color: rgba(255, 255, 255, 0.2) ;
}
input.transparent-input{
background-color:transparent !important;
border:none !important;
}
</style>
</style>
<body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top">

<!-- Navigation -->
Expand All @@ -105,37 +122,37 @@ input.transparent-input{
<li>
<a class="page-scroll" href="#about">About</a>
</li>
<li>
<a class="page-scroll" href="#contact">Contact</a>
</li>
<li>
<a class="page-scroll" href="#contact">Contact</a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Sign Up<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>
<div class="form-group">
<input type="email" class="form-control transparent-input" id="email" placeholder="Email">
</div>
</li>
<li>
<div class="form-group">
<input type="keybase" class="form-control transparent-input" id="Keybase" placeholder="Keybase Username">
</div>
</li>
<li>
<div class="form-group">
<input type="password" class="form-control transparent-input" id="exampleInputPassword1" placeholder="Password">
</div>
</li>
<li>
<div class="form-group">
<input type="password" class="form-control transparent-input" id="exampleInputPassword1" placeholder="Confirm Password">
</div>
</li>
<li role="separator" class="divider"></li>
<li>
<button type="submit" class="btn btn-default">Submit</button>
</li>
</ul>
<ul class="dropdown-menu">
<li>
<div class="form-group">
<input type="email" class="form-control transparent-input" id="email" placeholder="Email">
</div>
</li>
<li>
<div class="form-group">
<input type="keybase" class="form-control transparent-input" id="Keybase" placeholder="Keybase Username">
</div>
</li>
<li>
<div class="form-group">
<input type="password" class="form-control transparent-input" id="exampleInputPassword1" placeholder="Password">
</div>
</li>
<li>
<div class="form-group">
<input type="password" class="form-control transparent-input" id="exampleInputPassword1" placeholder="Confirm Password">
</div>
</li>
<li role="separator" class="divider"></li>
<li>
<button type="submit" class="btn btn-default">Submit</button>
</li>
</ul>

</li>
<li>
Expand Down Expand Up @@ -173,7 +190,9 @@ input.transparent-input{
<div class="col-md-8 col-md-offset-2">
<h1 style="font-family: 'Lobster', cursive;" class="brand-heading vesselFade animated fadeIn">Vessel</h1>
<p class="intro-text text-shadow firstFade animated fadeIn">Encrypt your conversations.</p>
<a href="#about" class="btn btn-circle page-scroll secondFade animated fadeIn">
<a href="/signUp" class="btn btn-signUp btn-lg secondFade animated fadeIn">Sign Up/Login</a>
<br>
<a href="#about" class="btn btn-circle page-scroll thirdFade animated fadeIn">
<i class="fa fa-angle-double-down secondPulse animated pulse"></i>
</a>
</div>
Expand All @@ -187,7 +206,7 @@ input.transparent-input{
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<h2>About Vessel</h2>
<p>Grayscale is a free Bootstrap 3 theme created by Start Bootstrap. It can be yours right now, simply download the template on <a href="http://startbootstrap.com/template-overviews/grayscale/">the preview page</a>. The theme is open source, and you can use it for any purpose, personal or commercial.</p>
<p>Vessel is a free Bootstrap 3 theme created by Start Bootstrap. It can be yours right now, simply download the template on <a href="http://startbootstrap.com/template-overviews/grayscale/">the preview page</a>. The theme is open source, and you can use it for any purpose, personal or commercial.</p>
<p>This theme features stock photos by <a href="http://gratisography.com/">Gratisography</a> along with a custom Google Maps skin courtesy of <a href="http://snazzymaps.com/">Snazzy Maps</a>.</p>
<p>Grayscale includes full HTML, CSS, and custom JavaScript files along with LESS files for easy customization.</p>
</div>
Expand All @@ -201,20 +220,14 @@ input.transparent-input{
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<h2>Contact Us</h2>
<p class=text-shadow>Feel free to email us to provide some feedback on our templates, give us suggestions for new templates and themes, or to just say hello!</p>
<p class=text-shadow>If you have any feedback for us at Vessel, feel free to fill out a contact form, and we'll be happy to get in touch with you.</p>
<br>
<p><a href="mailto:feedback@startbootstrap.com" class=text-shadow>feedback@startbootstrap.com</a>
<a href="#contactForm" class="btn btn-default btn-lg"></i>Contact Form</a>
</p>
<ul class="list-inline banner-social-buttons">
<li>
<a href="https://twitter.com/SBootstrap" class="btn btn-default btn-lg"><i class="fa fa-twitter fa-fw"></i> <span class="network-name">Twitter</span></a>
</li>
<li>
<a href="https://github.com/wijagels/gpgchat-server" class="btn btn-default btn-lg"><i class="fa fa-github fa-fw"></i> <span class="network-name">Github</span></a>
</li>
<li>
<a href="https://plus.google.com/+Startbootstrap/posts" class="btn btn-default btn-lg"><i class="fa fa-google-plus fa-fw"></i> <span class="network-name">Google+</span></a>
</li>
</ul>
</div>
</div>
Expand Down
Loading

0 comments on commit 06c6507

Please sign in to comment.