SimpleTimeTracker/app/templates/home.html

{% extends 'layout.html' %}

{% block content %}
    <form action="" method="post">
        {% csrf_token %}
        <div class="row mb-3 justify-content-center">
            <div class="col-sm-12 col-md-6">
                <input type="password" class="form-control form-control-lg p-4 text-center" id="pin" placeholder="Account PIN">
            </div>
        </div>
        <div class="row mb-3">
            <div  class="col-4 d-grid gap-2 mx-auto"><button data-value="1" class="btn btn-lg btn-light border keypad-button"><span class="display-5">1</span></button></div>
            <div  class="col-4 d-grid gap-2 mx-auto"><button data-value="2" class="btn btn-lg btn-light border keypad-button"><span class="display-5">2</span></button></div>
            <div  class="col-4 d-grid gap-2 mx-auto"><button data-value="3" class="btn btn-lg btn-light border keypad-button"><span class="display-5">3</span></button></div>
        </div>
        <div class="row mb-3">
            <div  class="col-4 d-grid gap-2 mx-auto"><button data-value="4" class="btn btn-lg btn-light border keypad-button"><span class="display-5">4</span></button></div>
            <div  class="col-4 d-grid gap-2 mx-auto"><button data-value="5" class="btn btn-lg btn-light border keypad-button"><span class="display-5">5</span></button></div>
            <div  class="col-4 d-grid gap-2 mx-auto"><button data-value="6" class="btn btn-lg btn-light border keypad-button"><span class="display-5">6</span></button></div>
        </div>
        <div class="row mb-3">
            <div  class="col-4 d-grid gap-2 mx-auto"><button data-value="7" class="btn btn-lg btn-light border keypad-button"><span class="display-5">7</span></button></div>
            <div  class="col-4 d-grid gap-2 mx-auto"><button data-value="8" class="btn btn-lg btn-light border keypad-button"><span class="display-5">8</span></button></div>
            <div  class="col-4 d-grid gap-2 mx-auto"><button data-value="9" class="btn btn-lg btn-light border keypad-button"><span class="display-5">9</span></button></div>
        </div>
        <div class="row mb-5">
            <div  class="col-6 d-grid gap-2 mx-auto"><button data-value="0" class="btn btn-lg btn-light border keypad-button"><span class="display-5">0</span></button></div>
            <div  class="col-6 d-grid gap-2 mx-auto"><button data-value="x" class="btn btn-lg btn-light border keypad-button pt-3"><span class="oi display-5" data-glyph="delete"></span></button></div>
        </div>
        <div class="row mb-3">
            <div  class="col-sm-12 col-md-6 d-grid gap-2 mx-auto"><input type="submit" class="btn btn-lg btn-success pt-3 pb-3 btn-dark" value="LOGIN"></div>
        </div>
    </form>
{% endblock %}