Upload to web repoHEADmaster

11 files changed, 604 insertions, 0 deletions

diff --git a/templates/account.html b/templates/account.html
new file mode 100644
index 0000000..68b1abf
--- /dev/null
+++ b/templates/account.html
@@ -0,0 +1,62 @@
+{% extends "layout.html"%}
+
+{% block title %}
+    Account
+{% endblock %}
+
+{% block main %}
+<div class="row row-cols-2">
+  <!-- Username -->
+  <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12 float-start">
+    <div class="card text-white bg-success mb-3 float-start w-100" style="max-width: 18rem;">
+    <div class="card-header">
+      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-file-person" viewBox="0 0 16 16">
+        <path d="M12 1a1 1 0 0 1 1 1v10.755S12 11 8 11s-5 1.755-5 1.755V2a1 1 0 0 1 1-1h8zM4 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H4z"/>
+        <path d="M8 10a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"/>
+      </svg>   Username</div>
+    <div class="card-body">
+      <h5 class="card-title">{{ name }}</h5>
+    </div>
+    </div>
+
+    <!-- Budget -->
+    <div class="card text-white bg-success mb-3 float-start w-100" style="max-width: 18rem;">
+    <div class="card-header">
+      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-cash" viewBox="0 0 16 16">
+        <path d="M8 10a2 2 0 1 0 0-4 2 2 0 0 0 0 4z"/>
+        <path d="M0 4a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1V4zm3 0a2 2 0 0 1-2 2v4a2 2 0 0 1 2 2h10a2 2 0 0 1 2-2V6a2 2 0 0 1-2-2H3z"/>
+      </svg>   Budget</div>
+    <div class="card-body">
+      <h5 class="card-title">{{ budget | usd }}</h5>
+    </div>
+    </div>
+
+    <!-- Choose new password -->
+    <div class="card text-white bg-success mb-3 float-start w-100" style="max-width: 18rem;">
+    <div class="card-header">
+      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-key-fill" viewBox="0 0 16 16">
+        <path d="M3.5 11.5a3.5 3.5 0 1 1 3.163-5H14L15.5 8 14 9.5l-1-1-1 1-1-1-1 1-1-1-1 1H6.663a3.5 3.5 0 0 1-3.163 2zM2.5 9a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"/>
+      </svg>   Reset Password</div>
+    <div class="card-body">
+        <form action="/account" method="post">
+          <label for="pw_old">Current Password</label>
+          <input name="pw_old" autocomplete="off" class="form-control" placeholder="Current Password" type="password" required>
+
+          <label for="pw_new">New Password</label><br>
+          <input name="pw_new" autocomplete="off" class="form-control" placeholder="New Password" type="password" required>
+          <p class="footnote">* Password must be between 6-25 characters long and contain at least one number and one letter</p>
+
+          <label for="confirmation">Confirm New Password</label>
+          <input class="form-control" autocomplete="off" name="confirmation" placeholder="Confirm New Password" type="password" required>
+          <p class="footnote">* Your input must match the password above</p>
+          <button class="btn btn-dark" type="submit">Change Password</button>
+        </form>
+    </div>
+    </div>
+  </div>
+
+  <div class="col float-end" style="margin-top: 20px;">
+    <img src="/static/piggy_laptop.png" class="float-end">
+  </div>
+</div>
+{% endblock %}
diff --git a/templates/apology.html b/templates/apology.html
new file mode 100644
index 0000000..f8b22b6
--- /dev/null
+++ b/templates/apology.html
@@ -0,0 +1,12 @@
+{% extends "layout.html" %}
+
+{% block title %}
+    Apology
+{% endblock %}
+
+{% block main %}
+    <!-- alternative image bouncer: https://t3.ftcdn.net/jpg/01/18/77/66/240_F_118776660_d6FDZKGs2tnFLn50wyHG87yfeZQhWhU0.jpg -->
+    <img alt="{{ top }}" class="border" src="http://memegen.link/custom/{{ top | urlencode }}/{{ bottom | urlencode }}.jpg?alt=https://image.freepik.com/vektoren-kostenlos/realistisches-design-des-insolvenzkonzepts_52683-36058.jpg" title="{{ top }}">
+    <br>
+    <a button href="/" class="btn btn-success" role="button" style="margin-top: 20px">Return to Main Page</a>
+{% endblock %}
\ No newline at end of file
diff --git a/templates/bargain.html b/templates/bargain.html
new file mode 100644
index 0000000..50abde7
--- /dev/null
+++ b/templates/bargain.html
@@ -0,0 +1,53 @@
+{% extends "layout.html"%}
+
+{% block title %}
+    Bargain Finder
+{% endblock %}
+
+{% block main %}
+<!-- Search for item -->
+<div>
+    <form action="/bargain" method="post">
+        <div class="form-group">
+            <label for="product-search" class="text">What item are you looking for?</label>
+        </div>
+        <br>
+        <div class="form-group">
+            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16" style="margin-right: 5px;">
+              <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/>
+            </svg>
+            <input autocomplete="off" autofocus class="form-control" name="product-search" placeholder="Search for..." type="text" required>
+        </div>
+        <br>
+        <button class="btn btn-success" type="submit">
+            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-piggy-bank" viewBox="0 0 16 16">
+              <path d="M5 6.25a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0zm1.138-1.496A6.613 6.613 0 0 1 7.964 4.5c.666 0 1.303.097 1.893.273a.5.5 0 0 0 .286-.958A7.602 7.602 0 0 0 7.964 3.5c-.734 0-1.441.103-2.102.292a.5.5 0 1 0 .276.962z"/>
+              <path fill-rule="evenodd" d="M7.964 1.527c-2.977 0-5.571 1.704-6.32 4.125h-.55A1 1 0 0 0 .11 6.824l.254 1.46a1.5 1.5 0 0 0 1.478 1.243h.263c.3.513.688.978 1.145 1.382l-.729 2.477a.5.5 0 0 0 .48.641h2a.5.5 0 0 0 .471-.332l.482-1.351c.635.173 1.31.267 2.011.267.707 0 1.388-.095 2.028-.272l.543 1.372a.5.5 0 0 0 .465.316h2a.5.5 0 0 0 .478-.645l-.761-2.506C13.81 9.895 14.5 8.559 14.5 7.069c0-.145-.007-.29-.02-.431.261-.11.508-.266.705-.444.315.306.815.306.815-.417 0 .223-.5.223-.461-.026a.95.95 0 0 0 .09-.255.7.7 0 0 0-.202-.645.58.58 0 0 0-.707-.098.735.735 0 0 0-.375.562c-.024.243.082.48.32.654a2.112 2.112 0 0 1-.259.153c-.534-2.664-3.284-4.595-6.442-4.595zM2.516 6.26c.455-2.066 2.667-3.733 5.448-3.733 3.146 0 5.536 2.114 5.536 4.542 0 1.254-.624 2.41-1.67 3.248a.5.5 0 0 0-.165.535l.66 2.175h-.985l-.59-1.487a.5.5 0 0 0-.629-.288c-.661.23-1.39.359-2.157.359a6.558 6.558 0 0 1-2.157-.359.5.5 0 0 0-.635.304l-.525 1.471h-.979l.633-2.15a.5.5 0 0 0-.17-.534 4.649 4.649 0 0 1-1.284-1.541.5.5 0 0 0-.446-.275h-.56a.5.5 0 0 1-.492-.414l-.254-1.46h.933a.5.5 0 0 0 .488-.393zm12.621-.857a.565.565 0 0 1-.098.21.704.704 0 0 1-.044-.025c-.146-.09-.157-.175-.152-.223a.236.236 0 0 1 .117-.173c.049-.027.08-.021.113.012a.202.202 0 0 1 .064.199z"/>
+            </svg>   Find me the best deals!</button>
+    </form>
+</div>
+<br>
+
+<!-- Display search results from web scraper -->
+<div>
+    <ol>
+        {% for item in deals %}
+        <li>
+            <div class="card border-dark mb-3" style="background-color: #fffde6;">
+                <div class="card-body text-dark">
+                    <h6 class="card-title">{{ item[0] }}</h6>
+                    <p class="card-text">
+                        <span class="bargain-price">{{ item[1]['price'] | usd }}</span>
+                        <a href="{{ item[1]['link'] }}" class="btn btn-primary float-end" target="_blank">Go to Deal</a>
+                    </p>
+                </div>
+            </div>
+        </li>
+        {% endfor %}
+    </ol>
+</div>
+
+<div>
+    <img src="/static/piggy_increase.png" alt="Increase your savings!">
+</div>
+{% endblock %}
diff --git a/templates/budget.html b/templates/budget.html
new file mode 100644
index 0000000..82fbbad
--- /dev/null
+++ b/templates/budget.html
@@ -0,0 +1,52 @@
+{% extends "layout.html"%}
+
+{% block title %}
+    Budget
+{% endblock %}
+
+{% block main %}
+<div class="row align-items-start row-cols-2">
+    <!-- Display current budget-->
+    <div class="col" style="margin-top: 120px;">
+        <p style="font-size: 20px; font-weight: bold;">Your budget:</p>
+        <div class="container-money">
+            <img id="dollar" src="/static/red_dollar.jpg" alt="dollar bill">
+            <div class="centered-money">
+                <span id="budget">{{ budget | usd }}</span>
+            </div>
+        </div><br>
+        <!-- Set new budget -->
+        <div>
+            <form action="/budget" method="post">
+                <div class="mb-3">
+                    <label for="add_budget" style="margin-top: 30px; font-weight: bold;">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-cash-stack" viewBox="0 0 16 16">
+                            <path d="M1 3a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1H1zm7 8a2 2 0 1 0 0-4 2 2 0 0 0 0 4z"/>
+                            <path d="M0 5a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1V5zm3 0a2 2 0 0 1-2 2v4a2 2 0 0 1 2 2h10a2 2 0 0 1 2-2V7a2 2 0 0 1-2-2H3z"/>
+                        </svg>   Set your budget
+                    </label><br>
+
+                    <span style="font-size: 20px; margin-right: 5px;">&#36;</span>
+                    <input name="add_budget" autocomplete="off" autofocus class="form-control" placeholder="Add Budget..." type="number" min="1.00" step="0.01" required>
+                </div>
+                <button class="btn btn-success" type="submit">Update Budget</button>
+            </form>
+        </div>
+    </div>
+    <div class="col">
+        <img src="/static/piggy_green.png"><br>
+    </div>
+</div>
+
+<!-- Change budget background image depending on budget balance -->
+<script>
+    document.addEventListener('DOMContentLoaded', function() {
+        let budget = document.getElementById('budget').innerHTML.split('$').pop();
+        if (parseFloat(budget) <= 0) {
+            document.getElementById('dollar').setAttribute('src', '/static/red_dollar.jpg');
+        } else {
+            document.getElementById('dollar').setAttribute('src', '/static/green_dollar.jpg');
+        }
+    });
+</script>
+{% endblock %}
diff --git a/templates/history.html b/templates/history.html
new file mode 100644
index 0000000..e461269
--- /dev/null
+++ b/templates/history.html
@@ -0,0 +1,51 @@
+{% extends "layout.html" %}
+
+{% block title %}
+    Spending History
+{% endblock %}
+
+{% block main %}
+    <!-- Option to search & filter the table -->
+    <div class="mb-4">
+        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16" style="margin-right: 5px;">
+          <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/>
+        </svg>
+        <input type="text" id="search_history" onkeyup="filter()" placeholder="Filter for:">
+
+        <input type="radio" id="expense" name="select" value="0" checked>
+        <label for="expense">Expense</label>
+        <input type="radio" id="category" name="select" value="1">
+        <label for="category">Category</label>
+        <input type="radio" id="amount" name="select" value="2">
+        <label for="amount">Amount</label>
+        <input type="radio" id="date" name="select" value="3">
+        <label for="date">Date</label><br>
+    </div>
+
+    <!-- Table displaying details of all user-submitted expenses, sorted by date -->
+    <div class="table-responsive">
+        <table class="table table-success table-striped table-hover" id="history">
+            <thead class="table-dark">
+                <tr>
+                    <th>Expense</th>
+                    <th>Category</th>
+                    <th>Amount</th>
+                    <th>Date</th>
+                </tr>
+            </thead>
+            <tbody>
+                {% for item in record %}
+                <tr>
+                    <td>{{ item.comment }}</td>
+                    <td>{{ item.category }}</td>
+                    <td><strong>- {{ item.amount | usd }}</strong></td>
+                    <td>{{ item.date }}</td>
+                </tr>
+                {% endfor %}
+            </tbody>
+        </table>
+    </div>
+
+    <!-- Implements search & filters -->
+    <script src="/static/filter.js"></script>
+{% endblock %}
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 %}
diff --git a/templates/layout.html b/templates/layout.html
new file mode 100644
index 0000000..89eb716
--- /dev/null
+++ b/templates/layout.html
@@ -0,0 +1,115 @@
+<!DOCTYPE html>
+
+<html lang="en">
+    <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="initial-scale=1, width=device-width">
+
+        <!-- Bootstrap: https://getbootstrap.com/docs/5.1/getting-started/introduction/ -->
+        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
+        <!-- Google Fonts: https://fonts.google.com/ -->
+        <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap" rel="stylesheet">
+
+        <!-- https://www.flaticon.com/de/kostenloses-icon/sparschwein_1787030 -->
+        <link href="/static/Sparschwein.png" rel="icon">
+        <link href="/static/styles.css" rel="stylesheet">
+
+        <!-- Bootstrap's JavaScript Bundle with Popper -->
+        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
+
+        <title>Total Expense: {% block title %}{% endblock %}</title>
+    </head>
+
+    <body>
+        <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
+            <a class="navbar-brand" href="/"><img src="/static/Sparschwein.png" width="100" height="100"><span class="navbar-title">Total Expense</span></a>
+            <button aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler" data-target="#navbar" data-toggle="collapse" type="button">
+                <span class="navbar-toggler-icon"></span>
+            </button>
+
+            <div class="collapse navbar-collapse" id="navbar">
+                <!-- Nav tabs on the left for logged-in-user -->
+                {% if session.user_id %}
+                    <ul class="navbar-nav me-auto mt-2">
+                        <li class="nav-item">
+                            <!-- Check for each nav link if currently active, add id for different display if so -->
+                            <a class="nav-link" {% if request.path == '/' %}id="active-nav"{% endif %} href="/">
+                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-piggy-bank-fill" viewBox="0 0 16 16">
+                                  <path fill-rule="evenodd" d="M7.964 1.527c-2.977 0-5.571 1.704-6.32 4.125h-.55A1 1 0 0 0 .11 6.824l.254 1.46a1.5 1.5 0 0 0 1.478 1.243h.263c.3.513.688.978 1.145 1.382l-.729 2.477a.5.5 0 0 0 .48.641h2a.5.5 0 0 0 .471-.332l.482-1.351c.635.173 1.31.267 2.011.267.707 0 1.388-.095 2.028-.272l.543 1.372a.5.5 0 0 0 .465.316h2a.5.5 0 0 0 .478-.645l-.761-2.506C13.81 9.895 14.5 8.559 14.5 7.069c0-.145-.007-.29-.02-.431.261-.11.508-.266.705-.444.315.306.815.306.815-.417 0 .223-.5.223-.461-.026a.95.95 0 0 0 .09-.255.7.7 0 0 0-.202-.645.58.58 0 0 0-.707-.098.735.735 0 0 0-.375.562c-.024.243.082.48.32.654a2.112 2.112 0 0 1-.259.153c-.534-2.664-3.284-4.595-6.442-4.595zm7.173 3.876a.565.565 0 0 1-.098.21.704.704 0 0 1-.044-.025c-.146-.09-.157-.175-.152-.223a.236.236 0 0 1 .117-.173c.049-.027.08-.021.113.012a.202.202 0 0 1 .064.199zm-8.999-.65A6.613 6.613 0 0 1 7.964 4.5c.666 0 1.303.097 1.893.273a.5.5 0 1 0 .286-.958A7.601 7.601 0 0 0 7.964 3.5c-.734 0-1.441.103-2.102.292a.5.5 0 1 0 .276.962zM5 6.25a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0z"/>
+                                </svg>   Home</a>
+                        </li>
+                        <li class="nav-item">
+                            <a class="nav-link" {% if request.path == '/budget' %}id="active-nav"{% endif %} href="/budget">
+                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-wallet2" viewBox="0 0 16 16">
+                                  <path d="M12.136.326A1.5 1.5 0 0 1 14 1.78V3h.5A1.5 1.5 0 0 1 16 4.5v9a1.5 1.5 0 0 1-1.5 1.5h-13A1.5 1.5 0 0 1 0 13.5v-9a1.5 1.5 0 0 1 1.432-1.499L12.136.326zM5.562 3H13V1.78a.5.5 0 0 0-.621-.484L5.562 3zM1.5 4a.5.5 0 0 0-.5.5v9a.5.5 0 0 0 .5.5h13a.5.5 0 0 0 .5-.5v-9a.5.5 0 0 0-.5-.5h-13z"/>
+                                </svg>   Set Budget</a>
+                        </li>
+                        <li class="nav-item">
+                            <a class="nav-link" {% if request.path == '/tracker' %}id="active-nav"{% endif %} href="/tracker">
+                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-calculator-fill" viewBox="0 0 16 16">
+                                  <path d="M2 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V2zm2 .5v2a.5.5 0 0 0 .5.5h7a.5.5 0 0 0 .5-.5v-2a.5.5 0 0 0-.5-.5h-7a.5.5 0 0 0-.5.5zm0 4v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5zM4.5 9a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1zM4 12.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5zM7.5 6a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1zM7 9.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5zm.5 2.5a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1zM10 6.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5zm.5 2.5a.5.5 0 0 0-.5.5v4a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-4a.5.5 0 0 0-.5-.5h-1z"/>
+                                </svg>   Expense Tracker</a>
+                        </li>
+                        <li class="nav-item">
+                            <a class="nav-link" {% if request.path == '/history' %}id="active-nav"{% endif %} href="/history">
+                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-journal-text" viewBox="0 0 16 16">
+                                  <path d="M5 10.5a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5zm0-2a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5zm0-2a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5zm0-2a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5z"/>
+                                  <path d="M3 0h10a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2v-1h1v1a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H3a1 1 0 0 0-1 1v1H1V2a2 2 0 0 1 2-2z"/>
+                                  <path d="M1 5v-.5a.5.5 0 0 1 1 0V5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H1zm0 3v-.5a.5.5 0 0 1 1 0V8h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H1zm0 3v-.5a.5.5 0 0 1 1 0v.5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H1z"/>
+                                </svg>   Spending History</a>
+                        </li>
+                        <li class="nav-item">
+                            <a class="nav-link" {% if request.path == '/bargain' %}id="active-nav"{% endif %} href="/bargain">
+                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-cash-coin" viewBox="0 0 16 16">
+                                  <path fill-rule="evenodd" d="M11 15a4 4 0 1 0 0-8 4 4 0 0 0 0 8zm5-4a5 5 0 1 1-10 0 5 5 0 0 1 10 0z"/>
+                                  <path d="M9.438 11.944c.047.596.518 1.06 1.363 1.116v.44h.375v-.443c.875-.061 1.386-.529 1.386-1.207 0-.618-.39-.936-1.09-1.1l-.296-.07v-1.2c.376.043.614.248.671.532h.658c-.047-.575-.54-1.024-1.329-1.073V8.5h-.375v.45c-.747.073-1.255.522-1.255 1.158 0 .562.378.92 1.007 1.066l.248.061v1.272c-.384-.058-.639-.27-.696-.563h-.668zm1.36-1.354c-.369-.085-.569-.26-.569-.522 0-.294.216-.514.572-.578v1.1h-.003zm.432.746c.449.104.655.272.655.569 0 .339-.257.571-.709.614v-1.195l.054.012z"/>
+                                  <path d="M1 0a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h4.083c.058-.344.145-.678.258-1H3a2 2 0 0 0-2-2V3a2 2 0 0 0 2-2h10a2 2 0 0 0 2 2v3.528c.38.34.717.728 1 1.154V1a1 1 0 0 0-1-1H1z"/>
+                                  <path d="M9.998 5.083 10 5a2 2 0 1 0-3.132 1.65 5.982 5.982 0 0 1 3.13-1.567z"/>
+                                </svg>   Bargain Finder</a>
+                        </li>
+                    </ul>
+                    <!-- nav tabs on the right for logged-in user -->
+                    <ul class="navbar-nav ms-auto mt-2">
+                        <li class="nav-item">
+                            <a class="nav-link" {% if request.path == '/account' %}id="active-nav"{% endif %} href="/account">
+                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-person-circle" viewBox="0 0 16 16">
+                                  <path d="M11 6a3 3 0 1 1-6 0 3 3 0 0 1 6 0z"/>
+                                  <path fill-rule="evenodd" d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm8-7a7 7 0 0 0-5.468 11.37C3.242 11.226 4.805 10 8 10s4.757 1.225 5.468 2.37A7 7 0 0 0 8 1z"/>
+                                </svg>   Account</a>
+                        </li>
+                        <li class="nav-item">
+                            <a class="nav-link" href="/logout">
+                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-power" viewBox="0 0 16 16">
+                                  <path d="M7.5 1v7h1V1h-1z"/>
+                                  <path d="M3 8.812a4.999 4.999 0 0 1 2.578-4.375l-.485-.874A6 6 0 1 0 11 3.616l-.501.865A5 5 0 1 1 3 8.812z"/>
+                                </svg>   Log Out</a>
+                        </li>
+                    </ul>
+
+                <!-- Nav tabs on the right for visting guest -->
+                {% else %}
+                    <ul class="navbar-nav ms-auto mt-2">
+                        <li class="nav-item"><a class="nav-link" {% if request.path == '/register' %}id="active-nav"{% endif %} href="/register">Register</a></li>
+                        <li class="nav-item"><a class="nav-link" {% if request.path == '/login' %}id="active-nav"{% endif %} href="/login">Log In</a></li>
+                    </ul>
+                {% endif %}
+            </div>
+        </nav>
+
+        {% if get_flashed_messages() %}
+            <header>
+                <div class="alert alert-warning border text-center" role="alert">
+                    {{ get_flashed_messages() | join(" ") }}
+                </div>
+            </header>
+        {% endif %}
+
+        <main class="container p-5">
+            {% block main %}{% endblock %}
+        </main>
+
+        <footer class="small text-center text-muted">
+            <p><i>Feel free to <a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ" class="link-success" target="_blank">contact us</a> anytime if you have questions or feedback!</i></p>
+        </footer>
+    </body>
+</html>
diff --git a/templates/login.html b/templates/login.html
new file mode 100644
index 0000000..52d453a
--- /dev/null
+++ b/templates/login.html
@@ -0,0 +1,19 @@
+{% extends "layout.html" %}
+
+{% block title %}
+    Log In
+{% endblock %}
+
+{% block main %}
+    <form action="/login" method="post">
+        <div class="mb-3">
+            <input autocomplete="off" autocomplete="off" autofocus class="form-control" name="username" placeholder="Username" type="text">
+        </div>
+        <div class="mb-3">
+            <input class="form-control" autocomplete="off" name="password" placeholder="Password" type="password">
+        </div>
+        <button class="btn btn-success" type="submit">Log In</button>
+    </form>
+    <br>
+    <p>New here? <a href="/register" class="link-success">Register</a> for a free account!</p>
+{% endblock %}
\ No newline at end of file
diff --git a/templates/register.html b/templates/register.html
new file mode 100644
index 0000000..e7d105e
--- /dev/null
+++ b/templates/register.html
@@ -0,0 +1,25 @@
+{% extends "layout.html" %}
+
+{% block title %}
+    Register
+{% endblock %}
+
+{% block main %}
+    <form action="/register" method="post">
+        <div class="form-group">
+            <input autocomplete="off" autocomplete="off" autofocus class="form-control" name="username" placeholder="Username" type="text">
+        </div>
+        <br>
+        <div class="form-group">
+            <input class="form-control" autocomplete="off" name="password" placeholder="Password" type="password">
+            <p class="footnote">* Password must be between 6-25 characters long and contain at least one number and one letter</p>
+        </div>
+        <div class="form-group">
+            <input class="form-control" autocomplete="off" name="confirmation" placeholder="Confirm Password" type="password">
+            <p class="footnote">* Your input must match the password above</p>
+        </div>
+        <button class="btn btn-success" type="submit">Register</button>
+    </form>
+    <br>
+    <p>You already have an account? <a href="/login" class="link-success">Sign in!</a></p>
+{% endblock %}
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="&#x1F3E0; Rent">
+                <label for="rent"><span class="text">&#x1F3E0; Rent & Bills</span></label><br>
+
+                <input type="radio" id="maintenance" name="category" value="&#x1F6E0; Maintenance">
+                <label for="maintenance"><span class="text">&#x1F6E0; Maintenance</span></label><br>
+
+                <input type="radio" id="food" name="category" value="&#x1F96A; Food">
+                <label for="food"><span class="text">&#x1F96A; Food</span></label><br>
+
+                <input type="radio" id="family" name="category" value="&#x1F46A; Family">
+                <label for="family"><span class="text">&#x1F46A; Family</span></label><br>
+
+                <input type="radio" id="pets" name="category" value="&#x1F407; Pets">
+                <label for="pets"><span class="text">&#x1F407; Pets</span></label><br>
+
+                <input type="radio" id="clothes" name="category" value="&#x1F455; Clothes">
+                <label for="clothes"><span class="text">&#x1F455; Clothes</span></label><br>
+
+                <input type="radio" id="hobbies" name="category" value="&#127944; Hobbies">
+                <label for="hobbies"><span class="text">&#127944; Hobbies & Entertainment</span></label><br>
+
+                <input type="radio" id="investing" name="category" value="&#x1F4C8; Investing">
+                <label for="investing"><span class="text">&#x1F4C8; Investing</span></label><br>
+
+                <input type="radio" id="other" name="category" value="&#x2753; Other" checked>
+                <label for="other"><span class="text">&#x2753; Other/Unspecified</span></label><br>
+        </div><br>
+        <button class="btn btn-success" type="submit">Submit</button>
+    </form>
+{% endblock %}
diff --git a/templates/welcome.html b/templates/welcome.html
new file mode 100644
index 0000000..86f4ac6
--- /dev/null
+++ b/templates/welcome.html
@@ -0,0 +1,86 @@
+{% extends "layout.html" %}
+
+{% block title %}
+    Welcome
+{% endblock %}
+
+{% block main %}
+<section>
+  <h1 id="header-main">Welcome to Total Expense!</h1><br>
+  <h3>Your personal money saving assistant</h3><br>
+</section>
+
+<section>
+  <div id="CarouselWelcome" class="carousel carousel-dark slide" data-bs-ride="carousel">
+    <div class="carousel-indicators">
+      <button type="button" data-bs-target="#CarouselWelcome" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
+      <button type="button" data-bs-target="#CarouselWelcome" data-bs-slide-to="1" aria-label="Slide 2"></button>
+      <button type="button" data-bs-target="#CarouselWelcome" data-bs-slide-to="2" aria-label="Slide 3"></button>
+      <button type="button" data-bs-target="#CarouselWelcome" data-bs-slide-to="3" aria-label="Slide 4"></button>
+    </div>
+    <div class="carousel-inner">
+      <div class="carousel-item active" data-bs-interval="5000">
+        <img src="/static/couple_piggy.png" class="border border-secondary rounded" alt="...">
+        <div class="carousel-caption d-none d-md-block">
+          <h5 style="color: #910700;">Take charge of your savings with our digital financial helper!</h5>
+          <p style="color: #910700;" class="carousel-text">Create an account today and leave debts behind forever.</p>
+        </div>
+      </div>
+      <div class="carousel-item" data-bs-interval="5000">
+        <img src="/static/happy_piggy.png" class="border border-secondary rounded carousel-img" alt="...">
+        <div class="carousel-caption d-none d-md-block">
+          <h5 style="color: #15627d;">Keep your piggy bank - and yourself - happy!</h5>
+          <p style="color: #15627d" class="carousel-text">Even small change can make a big change.</p>
+        </div>
+      </div>
+      <div class="carousel-item" data-bs-interval="5000">
+        <img src="/static/piggy_categories.png" class="border border-secondary rounded carousel-img" alt="...">
+        <div class="carousel-caption d-none d-md-block">
+          <h5 style="color: white;">Use personalized spending categories!</h5>
+          <p style="color: white;" class="carousel-text">Keep detailed track of your individual spending habits.</p>
+        </div>
+      </div>
+      <div class="carousel-item" data-bs-interval="5000">
+        <img src="/static/piggy_house.png" class="border border-secondary rounded carousel-img" alt="...">
+        <div class="carousel-caption d-none d-md-block">
+          <h5 style="color: #fae682;">Fulfill your dreams!</h5>
+          <p style="color: #fae682;" class="carousel-text">Start saving today and achieve your financial goals tomorrow.</p>
+        </div>
+      </div>
+    </div>
+    <button class="carousel-control-prev" type="button" data-bs-target="#CarouselWelcome" data-bs-slide="prev">
+      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
+      <span class="visually-hidden">Previous</span>
+    </button>
+    <button class="carousel-control-next" type="button" data-bs-target="#CarouselWelcome" data-bs-slide="next">
+      <span class="carousel-control-next-icon" aria-hidden="true"></span>
+      <span class="visually-hidden">Next</span>
+    </button>
+  </div>
+</section>
+
+<section>
+  <div class="row align-items-start row-cols-2" style="margin-top: 60px;">
+    <div class="col card border-dark mb-3" style="background-color: #d1e7dd;">
+      <article id="text-welcome">
+        <p style="margin-top: 10px;">Are you tired of relying on financial experts? You do not know how to finance your big dreams but you want to make a change?<br></p>
+        <p>Then you have come to the right place: here you can easily keep track of your spending habits and monitor your individual budget.<br></p>
+        <p>And a special highlight to meet your online shopping needs: we will help you to find the best deals!<br></p>
+        <p>This way you will never run the risk of spending more than you can afford.<br></p>
+        <p>Instead, you can build financial funds step by step, coming closer to fulfilling your dreams!<br></p>
+        <p>So what are you waiting for? Sign up today and create your account! It is <u>totally free</u>!</p>
+      </article>
+    </div>
+
+    <div class="col card border-dark mb-3" style="background-color: #d1e7dd; margin-top: 50px;">
+      <ul>
+        <li class="text-bullet">Create a free account!</li>
+        <li class="text-bullet">Set your personal budget!</li>
+        <li class="text-bullet">Track your every expense!</li>
+        <li class="text-bullet">Review your spending history in detail!</li>
+        <li class="text-bullet">Find the cheapest online deals!</li>
+      </ul>
+    </div>
+  </div>
+</section>
+{% endblock %}