<!DOCTYPE html>
<html>
    <head>
        <title>Halaman Signup</title>
        <link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet">
        <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
        <link rel="stylesheet" href="css/auth.css">

    </head>
    <body>
        <div class="apps">
            <div class="form-heading">
                <div class="heading-left">
                    <hr>
                </div>
                <div class="heading-title">
                    SIGNUP
                </div>
                <div class="heading-right">
                    <hr>
                </div>
            </div>
            <div class="form-signup">
                <form action="createuser.php" method="POST" autocomplete="off">
                    <div class="form-group">
                        <label for="name">Your Name</label>                            
                        <input id="name" type="text" name="name" placeholder="your name" required>
                    </div>
                    <div class="form-group">
                        <label for="username">Username</label>                            
                        <input id="username" type="text" name="username" placeholder="your username" onfocusout="getUsernameValidation()" required> <span><i class="material-icons" id="checkUsername">check</i><i class="material-icons" id="wrongUsername">info</i></span>
                    </div>
                    <div class="form-group">
                        <label for="email">Email</label>                            
                        <input id="email" type="text" name="email" placeholder="your email" onfocusout="getEmailValidation()" required><span><i class="material-icons" id="checkEmail">check</i><i class="material-icons" id="wrongEmail">info</i></span>
                    </div>
                    <div class="form-group">
                        <label for="password">Password</label>                            
                        <input id="password" type="password" name="password" placeholder="your password" pattern=".{5,10}" title="5 to 10 characters" required>
                    </div>
                    <div class="form-group">
                        <label for="password_conf">Password Confirm</label>                            
                        <input id="password_conf" type="password" name="password_conf" placeholder="your password again" pattern=".{5,10}" title="5 to 10 characters" required>
                    </div>
                    <div class="form-group">
                        <label for="phone">Phone Number</label>                            
                        <input id="phone" type="text" name="phone" placeholder="your phone" required>
                    </div>
                    <input type="checkbox" name="driver" value="True"> Also sign me up as a driver!
                    <div class="action">
                        <div class="login">
                            <a href="#">Already have an account ?</a>
                        </div>
                        <div class="submit">
                            <input type="submit" value="REGISTER">                            
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <script src="js/validation.js"></script>
    </body>
</html>