blob: 88cb5673fcf3fd335d829402b33e3b074a605561 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
|
{% extends "layout.html"%}
{% block title %}
Home
{% endblock %}
{% block main %}
<!-- Budget & spending statistics -->
<div class="container-md">
<p style="font-size: 24px;">Hi there, <span id="name">{{ name }}</span> !</p>
<h5>Your budget:</h5>
<div class="container-money">
<img id="dollar" src="/static/red_dollar.jpg" alt="dollar bill">
<div class="centered-money">
<span id="budget">{{ cash | usd }}</span>
</div>
</div>
</div>
<!-- Data used to implement pie chart, div itself not meant to be displayed -->
<div id="hidden_data" style="display: none;">
<p>{{ rent }}</p>
<p>{{ maintain }}</p>
<p>{{ food }}</p>
<p>{{ family }}</p>
<p>{{ pets }}</p>
<p>{{ clothes }}</p>
<p>{{ hobbies }}</p>
<p>{{ invest }}</p>
<p>{{ other }}</p>
</div>
<div class="row align-items-start row-cols-2" style="margin-top: 100px;">
<div class="col">
<div class="pie-wrapper">
<label for="piechart"><h5>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-bar-chart-fill" viewBox="0 0 16 16">
<path d="M1 11a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1v-3zm5-4a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v7a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V7zm5-5a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1V2z"/>
</svg> Your total expenses</h5></label>
<canvas id="piechart"></canvas>
</div>
</div>
<div class="col" style="margin-top: 210px;">
<img src="/static/piggy_main.jpg" alt="Increase your savings!">
</div>
</div>
<!-- https://www.chartjs.org/docs/latest/ -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.6.2/chart.min.js" integrity="sha512-tMabqarPtykgDtdtSqCL3uLVM0gS1ZkUAVhRFu1vSEFgvB73niFQWJuvviDyBGBH22Lcau4rHB5p2K2T0Xvr6Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<!-- https://chartjs-plugin-datalabels.netlify.app/guide/getting-started.html#installation -->
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.0.0"></script>
<script src="/static/piechart.js"></script>
{% endblock %}
|
