Value Chain New User

Shows the screen for creating a new user.

by Erik Bartlow

HTML

<link rel="stylesheet" href="http://www.thebartlows.com/scripts/vcv/css/vc-theme-main.css">
<link rel="stylesheet" href="http://www.thebartlows.com/scripts/vcv/css/vc-viewer.css">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="http://www.thebartlows.com/scripts/vcv/scripts/jquery.validationEngine.js"></script>
<div class="vc-overlay vc-flex vc-flex-center">
    <div class="vc-app-new-user">
        <div id="newUserHeader" class="vc-flex vc-flex-center">Create Account</div>
        <div id="newUserContent">
            <form id="newUser"class="vc-flex-vertical vc-flex-center" method="post">
            <div class="vc-app-information">It appears this is the first time you visted the Value Chain application.  Please fill out the short form below so you can keep track of your models and share them with others.</div>
            <input id="firstName" type="text" class="validate[required]"
                data-errormessage-value-missing="First name is required!"
             placeholder="First Name"></input>
            <input id="lastName" type="text" class="validate[required]"
                data-errormessage-value-missing="Last name is required!"
             placeholder="Last Name"></input>
            <input id="email" type="text" class="validate[required,custom[email]]"
                data-errormessage-value-missing="Email is required!"            
                data-errormessage-value-custom-error="The format of your email addess is invalid."
             placeholder="Email Address"></input>
            <input id="createAccount" type="button" value="Create Account"></input>
            </form>
        </div>
    </div>
</div>

CSS

.vc-overlay{
    position: absolute;
    top:0px;
    left: 0px;
    z-index: 600;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: rgba(64,64,64, 0.8);
}
.vc-app-new-user{
    position: relative;
    height: 350px;
    width: 450px;
    background-color: #F1F1F1;
    border: 1px solid #000000;
    border-radius: 10px;
}
.vc-app-new-user > div:nth-child(1){
    position: inherit;
    top: 0;
    left: 0;
    height: 50px;
    width: 100%;
    background-color: #0096D6;
    font-size: 1.5em;
    color: #FFFFFF;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}
.vc-app-new-user > div:nth-child(2){
    position: inherit;
    height: 100%;
    width: 100%;
    background-color: #EDEDED;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    margin-top: 20px;
}
.vc-app-new-user input[type="text"]{
    width: 300px;
}
.vc-app-information{
    width: 90%;
    margin-bottom: 2em;
}

JavaScript

$("#newUser").validationEngine();