<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!--START LIGHTBOXES--> <div class="lightbox-info-popup"> <div id="UserEmailLightbox" class="modal fade"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h3 class="modal-title color-light-blue noto-sans">User Email Requirements</h3> </div> <div class="modal-body"> <p class="font-size-fourtheen-px noto-sans">Your account email must fullfil the following requirements:</p> <div class="display-block"> <ol class="segoe font-size-fourtheen-px"> <li>It must unique</li> <li>It must be a valid email account</li> <li>Some other reason</li> <li>...</li> </ol> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-danger" data-dismiss="modal"><i class="fa fa-close padding-right-five-px"></i>Close</button> </div> </div> </div> </div> <div id="ForgotPasswordLightbox" class="modal fade"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h3 class="modal-title color-light-blue noto-sans">Forgot Password?</h3> </div> <div class="modal-body"> <p class="font-size-fourtheen-px noto-sans">How to reset access to your account:</p> <div class="display-block"> <ol class="segoe font-size-fourtheen-px"> <li>Provide your account's email address</li> <li>It must be a valid email account</li> <li>Some other reason</li> <li>...</li> </ol> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-danger" data-dismiss="modal"><i class="fa fa-close padding-right-five-px"></i>Close</button> </div> </div> </div> </div> <div id="CVVLightbox" class="modal fade"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h3 class="modal-title color-light-blue noto-sans">Password Requirements</h3> </div> <div class="modal-body"> <p class="font-size-fourtheen-px noto-sans">Help make your ProPay account more secure by following there requirements:</p> <div class="display-block"> <ol class="segoe font-size-fourtheen-px"> <li>At least 1 upper-case letter (A-Z)</li> <li>At least 1 lower-case letter (a-z)</li> <li>At least 1 number (0-9)</li> <li>Must be between 8-19 characters</li> <li>Optional: Spaces and keyword symbols (! @ # $ % ^ & * _)</li> </ol> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-danger" data-dismiss="modal"><i class="fa fa-close padding-right-five-px"></i>Close</button> </div> </div> </div> </div> </div> <!--END LIGHTBOXES--> <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"> <div id="SignUpForm" class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h3 class="modal-title" id="myModalLabel"><i class="fa fa-user"></i> Setup Your New Account</h3> </div> <div class="modal-body"> <div class="row"> <div class="col-xs-6"> <div class="well"> <div class="padding-top-and-bottom-fiftheen-px align-text-center hidden-sm hidden-xs"> <i class="fa fa-user" style="width: 65px; height: 65px; font-size: 45px; margin: 0 auto 8px; padding-top: 7px; padding-left: 13px; display: block; border: solid 1px #CDCDCD; color: #CECECE; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%;"></i> </div> <form id="NewAccountForm" method="POST" action="/submit/" novalidate="novalidate"> <div class="form-group"> <div class="input-group"> <span class="input-group-addon" id="UserEmail"><i class="fa fa-user" title="Enter Your Email"></i></span> <input type="email" class="form-control" id="username" name="username" value="" required title="Please enter you username" placeholder="example@gmail.com" /> <span class="input-group-addon" id="PasswordLockAltHelp"><a href="#UserEmailLightbox" data-toggle="modal"><i class="fa fa-question-circle"></i></a></span> </div> <span class="help-block"></span> </div> <div class="form-group"> <div class="input-group"> <span class="input-group-addon" id="UserPassword"><i class="fa fa-unlock-alt" title="Choose password"></i></span> <input type="password" class="form-control" id="password" name="password" value="" required title="Choose password" placeholder="Choose a password" /> <span class="input-group-addon" id="PasswordLockAltHelp"><a href="#CVVLightbox" data-toggle="modal"><i class="fa fa-question-circle"></i></a></span> </div> <span class="help-block"></span> </div> <div class="form-group"> <div class="input-group"> <span class="input-group-addon" id="UserPasswordMatch"><i class="fa fa-lock" title="Choose password"></i></span> <input type="password" class="form-control" id="passwordmatch" name="passwordmatch" value="" required title="Re-enter password" placeholder="Re-enter password" /> <span class="input-group-addon" id="PasswordLockAltHelp"><a href="#CVVLightbox" data-toggle="modal"><i class="fa fa-question-circle"></i></a></span> </div> </div> <button type="submit" class="btn btn-success btn-block">Submit</button> </form> </div> </div> <div class="col-xs-6"> <p class="lead">New Account Requirements</p> <ul class="list-unstyled small" style="line-height: 2"> <li><span class="fa fa-check text-success"></span> Provide a valid email account</li> <li><span class="fa fa-check text-success"></span> Password must have 1 upper-case letter (A-Z)</li> <li><span class="fa fa-check text-success"></span> It must have 1 lower-case letter (a-z)</li> <li><span class="fa fa-check text-success"></span> Be at least 1 number (0-9)</li> <li><span class="fa fa-check text-success"></span> It must be between 8-19 characters</li> <li><span class="fa fa-check text-success"></span> Spaces & symbols (! @ # $ % ^ & * _)</span></li> </ul> </div> </div> </div> </div> </div> <div id="SignInForm" class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h3 class="modal-title" id="myModalLabel"><i class="fa fa-lock"></i> Secure Account Login</h3> </div> <div class="modal-body"> <div class="row"> <div class="col-sm-12"> <p>Enter must enter a registered Email & Password combination to access your account:</p> <div class="well"> <form id="loginForm" method="POST" action="/login/" novalidate="novalidate"> <div class="form-group"> <div class="input-group"> <span class="input-group-addon" id="UserEmail"><i class="fa fa-user" title="Enter Your Email"></i></span> <input type="email" class="form-control" id="username" name="username" value="" required title="Please enter you username" placeholder="example@gmail.com" /> </div> <span class="help-block"></span> </div> <div class="form-group"> <div class="input-group"> <span class="input-group-addon" id="UserPasswordMatch"><i class="fa fa-lock" title="Choose password"></i></span> <input type="password" class="form-control" id="passwordmatch" name="passwordmatch" value="" required title="Enter your password" placeholder="Enter password" /> </div> </div> <button type="submit" class="btn btn-success btn-block">Login</button> </form> </div> <p style="text-align: center;"><a href="#" title="Forgot password?">Forgot password?</a></p> </div> </div> </div> </div> </div> <div id="SignInForm" class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h3 class="modal-title" id="myModalLabel"><i class="fa fa-lock"></i> Reset Account Password</h3> </div> <div class="modal-body"> <div class="row"> <div class="col-sm-12"> <p>To reset your password you must enter a valid email address below:</p> <div class="well"> <form id="loginForm" method="POST" action="/login/" novalidate="novalidate"> <div class="form-group"> <div class="input-group"> <span class="input-group-addon" id="UserEmail"><i class="fa fa-user" title="Enter Your Email"></i></span> <input type="email" class="form-control" id="username" name="username" value="" required title="Please enter you username" placeholder="example@gmail.com" /> </div> <span class="help-block"></span> </div> <button type="submit" class="btn btn-success btn-block">Reset</button> </form> </div> </div> </div> </div> </div> </div>