diff options
Diffstat (limited to 'templates/tracker.html')
| -rw-r--r-- | templates/tracker.html | 74 |
1 files changed, 74 insertions, 0 deletions
diff --git a/templates/tracker.html b/templates/tracker.html new file mode 100644 index 0000000..f0edfb8 --- /dev/null +++ b/templates/tracker.html @@ -0,0 +1,74 @@ +{% extends "layout.html" %} + +{% block title %} + Expense Tracker +{% endblock %} + +{% block main %} + <!-- Register the specifics of a new expense --> + <form action="/tracker" method="post"> + <div class="form-group"> + <label for="comment"><b>Specify the expense</b> (optional)</label><br> + <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-cart-check" viewBox="0 0 16 16"> + <path d="M11.354 6.354a.5.5 0 0 0-.708-.708L8 8.293 6.854 7.146a.5.5 0 1 0-.708.708l1.5 1.5a.5.5 0 0 0 .708 0l3-3z"/> + <path d="M.5 1a.5.5 0 0 0 0 1h1.11l.401 1.607 1.498 7.985A.5.5 0 0 0 4 12h1a2 2 0 1 0 0 4 2 2 0 0 0 0-4h7a2 2 0 1 0 0 4 2 2 0 0 0 0-4h1a.5.5 0 0 0 .491-.408l1.5-8A.5.5 0 0 0 14.5 3H2.89l-.405-1.621A.5.5 0 0 0 2 1H.5zm3.915 10L3.102 4h10.796l-1.313 7h-8.17zM6 14a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm7 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"/> + </svg> + <input autocomplete="off" autofocus class="form-control" name="comment" placeholder="Unspecified" type="text"> + </div> + <br> + + <div class="form-group"> + <label for="amount"><b>Amount</b></label><br> + <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-coin" viewBox="0 0 16 16"> + <path d="M5.5 9.511c.076.954.83 1.697 2.182 1.785V12h.6v-.709c1.4-.098 2.218-.846 2.218-1.932 0-.987-.626-1.496-1.745-1.76l-.473-.112V5.57c.6.068.982.396 1.074.85h1.052c-.076-.919-.864-1.638-2.126-1.716V4h-.6v.719c-1.195.117-2.01.836-2.01 1.853 0 .9.606 1.472 1.613 1.707l.397.098v2.034c-.615-.093-1.022-.43-1.114-.9H5.5zm2.177-2.166c-.59-.137-.91-.416-.91-.836 0-.47.345-.822.915-.925v1.76h-.005zm.692 1.193c.717.166 1.048.435 1.048.91 0 .542-.412.914-1.135.982V8.518l.087.02z"/> + <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/> + <path d="M8 13.5a5.5 5.5 0 1 1 0-11 5.5 5.5 0 0 1 0 11zm0 .5A6 6 0 1 0 8 2a6 6 0 0 0 0 12z"/> + </svg> + <input autocomplete="off" class="form-control" name="amount" placeholder="1.00" type="number" min="1.00" step="0.01" required><br> + <p class="footnote">* Must be at least $1.00</p> + </div> + <br> + + <div class="form-group"> + <label for="date"><b>Date</b></label><br> + <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="currentColor" class="bi bi-calendar3" viewBox="0 0 16 16"> + <path d="M14 0H2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2zM1 3.857C1 3.384 1.448 3 2 3h12c.552 0 1 .384 1 .857v10.286c0 .473-.448.857-1 .857H2c-.552 0-1-.384-1-.857V3.857z"/> + <path d="M6.5 7a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm-9 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm-9 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"/> + </svg> + <input type="date" name="date" required> + </div> + <br> + + <div class="form-group"> + <!-- "name" must be identical for group if only one option should be selectable; different names = all selecatble! --> + <label for="category"><b>Category</b></label><br> + <input type="radio" id="rent" name="category" value="🏠 Rent"> + <label for="rent"><span class="text">🏠 Rent & Bills</span></label><br> + + <input type="radio" id="maintenance" name="category" value="🛠 Maintenance"> + <label for="maintenance"><span class="text">🛠 Maintenance</span></label><br> + + <input type="radio" id="food" name="category" value="🥪 Food"> + <label for="food"><span class="text">🥪 Food</span></label><br> + + <input type="radio" id="family" name="category" value="👪 Family"> + <label for="family"><span class="text">👪 Family</span></label><br> + + <input type="radio" id="pets" name="category" value="🐇 Pets"> + <label for="pets"><span class="text">🐇 Pets</span></label><br> + + <input type="radio" id="clothes" name="category" value="👕 Clothes"> + <label for="clothes"><span class="text">👕 Clothes</span></label><br> + + <input type="radio" id="hobbies" name="category" value="🏈 Hobbies"> + <label for="hobbies"><span class="text">🏈 Hobbies & Entertainment</span></label><br> + + <input type="radio" id="investing" name="category" value="📈 Investing"> + <label for="investing"><span class="text">📈 Investing</span></label><br> + + <input type="radio" id="other" name="category" value="❓ Other" checked> + <label for="other"><span class="text">❓ Other/Unspecified</span></label><br> + </div><br> + <button class="btn btn-success" type="submit">Submit</button> + </form> +{% endblock %} |