1 files changed, 55 insertions, 0 deletions
diff --git a/templates/home.html b/templates/home.html
new file mode 100644
index 0000000..88cb567
--- /dev/null
+++ b/templates/home.html
@@ -0,0 +1,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 %}