create.html

{% extends 'base.html' %}

<!-- TITLE -->
{% block title %} Create Account {% endblock %}

<!-- JS -->
{% block basejs %}
{% endblock %}

<!-- CSS -->
{% block basecss %}
<link href="{{ url_for('static', filename='css/login/create.css') }}" rel="stylesheet" />
{% endblock %}

<!-- BODY -->
{% block basebody %}
<div class="container">
    <div class="container_box">
        <div class="title">
            <p class="title_text shadow">Trackmaster</p>
        </div>
        <div class="create">
            <p class="create_text">Create Account</p>
        </div>
        <div class="form">
            <form action="{{url_for('login.create_account')}}" method="POST">
                <div class="form_inside">
                    <div class="username">
                        <p class="username_text">ID:</p><br>
                        <input type="text" name="username">
                        {% if status == 'no_id' %}
                        <p class="error_text">Wrong ID</p>
                        {% elif status == 'empty_id' %}
                        <p class="error_text">Empty ID</p>
                        {% elif status == 'user_exists' %}
                        <p class="error_text">User exists</p>
                        {% endif %}
                    </div>
                    <div class="realname">
                        <p class="realname_text">Name:</p><br>
                        <input type="text" name="realname">
                        {% if status == 'empty_name' %}
                        <p class="error_text">Empty Name</p>
                        {% endif %}
                    </div>
                    <div class="dob">
                        <p class="dob_text">Birthday:</p><br>
                        <div>
                            <select name="day" id="day">
                                <option value="0" selected>Day</option>
                                {% for day in days %}
                                <option value="{{day}}">{{day}}</option>
                                {% endfor %}
                            </select>
                            <select name="month" id="month">
                                <option value="0" selected>Month</option>
                                {% for month in months %}
                                <option value="{{month.1}}">{{month.0}}</option>
                                {% endfor %}
                            </select>
                            <select name="year" id="year">
                                <option value="0" selected>Year</option>
                                {% for year in years %}
                                <option value="{{year}}">{{year}}</option>
                                {% endfor %}
                            </select>
                        </div>
                        {% if status == 'wrong_date' %}
                        <p class="error_text">Wrong Date</p>
                        {% elif status == 'empty_bday' %}
                        <p class="error_text">Empty Date</p>
                        {% endif %}
                    </div>
                    <div class="gender">
                        <p class="gender_text">Gender:</p><br>
                        <div class="male">
                            <input type="radio" id="male" name="gender" value="male" checked="checked">
                            <p>Male</p>
                        </div>
                        <div class="female">
                            <input type="radio" id="female" name="gender" value="female">
                            <p>Female</p>
                        </div>
                        {% if status == 'empty_gender' %}
                        <p class="error_text">Empty Height</p>
                        {% endif %}
                    </div>
                    <div class="height">
                        <p class="height_text">Height (cm):</p><br>
                        <input type="text" name="height">
                        {% if status == 'empty_height' %}
                        <p class="error_text">Empty Height</p>
                        {% endif %}
                    </div>
                    <div class="weight">
                        <p class="weight_text">Weight (kg):</p><br>
                        <input type="text" name="weight">
                        {% if status == 'empty_weight' %}
                        <p class="error_text">Empty Weight</p>
                        {% endif %}
                    </div>
                    <div class="password">
                        <p class="password_text">Password:</p><br>
                        <input type="password" name="password">
                        {% if status == 'empty_pass' %}
                        <p class="error_text">Empty Password</p>
                        {% endif %}
                    </div>
                    <div class="r_password">
                        <input type="password" name="r_password">
                        {% if status == 'empty_rpass' %}
                        <p class="error_text">Empty Repeat Password</p>
                        {% elif status == 'pass_no_match' %}
                        <p class="error_text">Passwords don't match</p>
                        {% endif %}
                    </div>
                    <div class="create_button_area">
                        <button class="create_button" type="submit">Create Account</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
{% endblock %}