<div class='content-wrapper' id='user-registration'> <h1>Registration</h1> <form autocomplete='off'> <div class='input'> <ul> <li> {{textInput text='User name' id='user-name' name='user-name' placeholder='letters, digits, _, -' required=true pattern=this.userNamePattern}} </li> <li> {{passwordInput text='Password' id='user-password' name='user-password' placeholder='5+ characters' required=true pattern=this.passwordPattern}} </li> <li> {{emailInput text='Email' id='user-email' name='user-email' placeholder='optional'}} <p class='hint'>Used for password reminder and to show a <a href='http://gravatar.com/'>Gravatar</a>. Leave blank for random Gravatar.</p> </li> </ul> </div> <div class='messages'></div> <div class='buttons'> <input type='submit' value='Create an account'/> </div> </form> <div class='info'> <p>Registered users can:</p> <ul> <li><i class='fa fa-upload'></i> upload new posts</li> <li><i class='fa fa-heart'></i> mark them as favorite</li> <li><i class='fa fa-commenting-o'></i> add comments</li> <li><i class='fa fa-star-half-o'></i> vote up/down on posts and comments</li> </ul> <hr/> <p>By creating an account, you are agreeing to the <a href='/help/tos'>Terms of Service</a>.</p> </div> </div>