monopyly 1.4.7__py3-none-any.whl → 1.5.0__py3-none-any.whl

monopyly/templates/core/index.html

@@ -1,6 +1,7 @@
 {% extends "layout.html" %}
 
 {% block content %}
+
   {% if session["show_homepage_block"] %}
     <div id="homepage-block">
       <div class="buttons">
@@ -147,7 +148,16 @@
       </div>
 
     </div>
+  {% else %}
+    <div id="homepage-suggestion">
+      <p class="login">
+        <a href="{{ url_for('auth.login') }}">Login</a> to get started.
+      </p>
+      <p class="register">
+        Not yet registered? <a href="{{ url_for('auth.register') }}">Create an account</a> to begin using the app.
+      </p>
   {% endif %}
+
 {% endblock %}
 
 {% block javascript %}

monopyly/templates/core/profile.html

@@ -41,7 +41,7 @@
         <div class="bank-list box-table">
           {% for bank in banks %}
 
-            <div class="bank-block box-row update-db-widget" data-bank-id="{{ bank.id }}">
+            <div class="bank-block box-row action update-db-widget" data-bank-id="{{ bank.id }}">
 
               <div class="widget-text">
                 <div class="bank widget-display">{{ bank.bank_name }}</div>

monopyly/templates/core/story.html

@@ -10,36 +10,51 @@
 
 {% block content %}
   <div id="story" class="about">
-    <p>It started with Microsoft Excel. </p>
-    <p>When I got my first bank account, my dad taught me how to keep track of all my finances in an Excel workbook.
-    It worked for a while, and as I acquired a handful of credit cards, investments, and other types of bank accounts, I kept adding sheets to that file.
-    Of course, since I was tracking all that data, I wanted to wring as much information out of it as I possibly could—and so I started working rudimentary analytics into the spreadsheet.
+    <p>
+      It started with Microsoft Excel.
+    </p>
+    <p>
+      When I got my first bank account, my dad taught me how to keep track of all my finances in an Excel workbook.
+      It worked for a while, and as I acquired a handful of credit cards, investments, and other types of bank accounts, I kept adding sheets to that file.
+      Of course, since I was tracking all that data, I wanted to wring as much information out of it as I possibly could—and so I started working rudimentary analytics into the spreadsheet.
+    </p>
+
+    <p>
+      This all kept me satisfied until about halfway through college when I began learning Python.
+      Excel was getting cumbersome, and I wanted to be able to sort and tag types of transactions, link credit card payments with bank withdrawals, and create spending reports.
+      Seeing the potential ways I could use a standalone programming language to up my game, I realized that what I really needed was a database.
+      As I transitioned to graduate school, I also transitioned to tracking my finances in a MySQL database, accessed with Python through a set of Jupyter notebooks.
+    That approach gave me so much more power and flexibilty, but it still felt a little clunky.
+    </p>
+
+    <p>
+      My ideal situation?
+    </p>
+
+    <p>
+      I ultimately wanted a system that keep track of everything—credit card transactions, bank accounts, investments, retirement accounts, all that $—in one place.
+      Obviously there are mega-apps that already do all this, but I never wanted to go that route.
+      I'd always managed my finances independently, and had zero interest in ceding that control.
+      For one, I wanted to maintain some privacy regarding my financial data, because who knows how those apps are using that information.
+      Two, I didn't want <em>all</em> the bells and whistles (and advertisements) that those mega-apps would force upon me, but I also wanted something I could customize when I didn't like a feature... or when I wanted more.
+      And three, most importantly, it seemed like a fun challenge that would keep me deeply engaged in managing my own financial picture.
+    </p>
+
+    <p>
+      That's how this app came about.
+      I started by trying to just create a GUI for my Python database interface, but that didn't offer the graphic flexibility of a web app.
+      Why fight to build a nice Tkinter GUI if I'd eventually get sick of that too?
+      (Tkinter is also a bit of a pain to code, and a bigger pain to test, and <em>that</em> certainly wouldn't do.)
+      Anyway, I'd always wanted to create an app, and I figured this was as good a chance as any to get started.
+      Win-win.
     </p>
 
+    <p>
+      If you're reading this, I suppose it means you've stumbled across the program out of interest (or maybe you're just curious what the hell this nutjob is wasting his time on).
+      If the former, cool!
+      Feel free to look around or take it for a spin.
+      I intend to always keep the basic concept open source, so play around as much as you'd like!
     </p>
-    This all kept me satisfied until about halfway through college when I began learning Python.
-    Excel was getting cumbersome, and I wanted to be able to sort and tag types of transactions, link credit card payments with bank withdrawals, and create spending reports.
-    Seeing the potential ways I could use a standalone programming language to up my game, I realized that what I really needed was a database.
-    As I transitioned to graduate school, I also transitioned to tracking my finances in a MySQL database, accessed with Python through a set of Jupyter notebooks.
-    That approach gave me so much more power and flexibilty, but it still felt a little clunky.</p>
-
-    <p>My ideal situation?</p>
-
-    <p>I ultimately wanted a system that keep track of everything—credit card transactions, bank accounts, investments, retirement accounts, all that $—in one place.
-    Obviously there are mega-apps that already do all this, but I never wanted to go that route.
-    I'd always managed my finances independently, and had zero interest in ceding that control.
-    For one, I wanted to maintain some privacy regarding my financial data, because who knows how those apps are using that information.
-    Two, I didn't want <em>all</em> the bells and whistles (and advertisements) that those mega-apps would force upon me, but I also wanted something I could customize when I didn't like a feature... or when I wanted more.
-    And three, most importantly, it seemed like a fun challenge that would keep me deeply engaged in managing my own financial picture.
-
-    <p>That's how this app came about.
-    I started by trying to just create a GUI for my Python database interface, but that didn't offer the graphic flexibility of a web app.
-    Why fight to build a nice Tkinter GUI if I'd eventually get sick of that too?
-    (Tkinter is also a bit of a pain to code, and a bigger pain to test, and <em>that</em> certainly wouldn't do.)
-    Anyway, I'd always wanted to create an app, and I figured this was as good a chance as any to get started.
-    Win-win.</p>
-
-    <p>If you're reading this, I suppose it means you've stumbled across the program out of interest (or maybe you're just curious what the hell this nutjob is wasting his time on). If the former, cool! Feel free to look around or take it for a spin. I intend to always keep the basic concept open source, so play around as much as you'd like!</p>
 
     <p class="signature">-Mitch</p>
   </div>

monopyly/templates/credit/statement_page.html

@@ -28,8 +28,13 @@
         {% endwith %}
       </div>
 
+      <div id="category-chart-container">
+        <div id="category-chart" class="ct-chart ct-octave"></div>
+      </div>
+
     </div>
 
+
   </div>
 
 {% endblock %}
@@ -44,6 +49,11 @@
           <img class="icon" src="{{ url_for('static', filename='img/icons/plus.png') }}" />
         </a>
       </div>
+      <div class="button">
+        <div class="action">
+          <img id="reconciliation-button" class="icon" src="{{ url_for('static', filename='img/icons/statement-pair.png') }}" />
+        </div>
+      </div>
 
     </div>
 
@@ -53,11 +63,32 @@
 {% block javascript %}
 
   <script>
+    const CREDIT_ACTIVITY_RECONCILIATION_ENDPOINT = "{{ url_for('credit.reconcile_activity', statement_id=statement.id) }}";
     const UPDATE_STATEMENT_DUE_DATE_ENDPOINT = "{{ url_for('credit.update_statement_due_date', statement_id=statement.id) }}";
     const MAKE_PAYMENT_ENDPOINT = "{{ url_for('credit.pay_credit_card', card_id=statement.card_id, statement_id=statement.id) }}";
     const EXPAND_TRANSACTION_ENDPOINT = "{{ url_for('credit.expand_transaction') }}";
     const LINKED_TRANSACTION_ENDPOINT = "{{ url_for('credit.show_linked_transaction') }}";
   </script>
+  <script>
+    const CATEGORY_CHART_DATA = {
+      labels: [
+        {% for label in chart_data['labels'] %}
+          {% if label == '' %}
+            "Other",
+          {% else %}
+            "{{ label }}",
+          {% endif %}
+        {% endfor %}
+      ],
+      series: [
+        {% for subtotal in chart_data['subtotals'] %}
+          {{ subtotal }},
+        {% endfor %}
+      ],
+    };
+  </script>
+  <script type="module" src="{{ url_for('static', filename='js/show-credit-activity-loader.js') }}">
+  </script>
   <script type="module" src="{{ url_for('static', filename='js/update-statement-parameters.js') }}">
   </script>
   <script type="module" src="{{ url_for('static', filename='js/make-payment.js') }}">
@@ -66,6 +97,8 @@
   </script>
   <script type="module" src="{{ url_for('static', filename='js/show-linked-transaction.js') }}">
   </script>
+  <script type="module" src="{{ url_for('static', filename='js/create-category-chart.js') }}">
+  </script>
 
 {% endblock %}
 

monopyly/templates/credit/statement_reconciliation/discrepant_records.html

@@ -0,0 +1,25 @@
+<div class="discrepant-activities transactions-table">
+
+  {% for transaction, activity in discrepant_records.items() %}
+
+    <div class="reconciliation-activity discrepant-activity" data-transaction-id="{{ transaction.id }}">
+
+      <div class="activity-info">
+        <div class="date">{{ activity.transaction_date }}</div>
+        <div class="text">{{ activity.description }}</div>
+        <div class="amount">
+          <span class="dollar-sign">$</span>
+          {{ activity.total|currency }}
+        </div>
+      </div>
+
+      <a class="button" href="{{ url_for('credit.update_transaction', transaction_id=transaction.id, transaction_date=activity.transaction_date, total=activity.total) }}">
+        <img class="icon" src="{{ url_for('static', filename='img/icons/edit.png') }}" />
+      </a>
+
+    </div>
+
+  {% endfor %}
+
+</div>
+

monopyly/templates/credit/statement_reconciliation/statement_reconciliation_inquiry.html

@@ -0,0 +1,23 @@
+<div class="overlay">
+  <div id="statement-reconciliation" class="modal">
+
+    <div class="modal-box">
+
+      <div class="buttons">
+        <img class="close button" src="/static/img/icons/x-thick.png">
+      </div>
+
+      <p class="instructions">
+        Load a CSV file containing credit activity for comparison against this statement. The CSV file must be located in the <code>Downloads</code> directory on the machine running the Monopyly app.
+      </p>
+
+      <form action="{{ url_for('credit.load_statement_reconciliation_details', statement_id=statement_id) }}" method="post" enctype="multipart/form-data">
+        <label for="activity-file-upload">Activity Filename</label>
+        <input id="activity-file-upload" type="file" name="activity-file" accept="text/csv" />
+        <input class="button" type="submit" value="Reconcile Activity" />
+      </form>
+
+    </div>
+
+  </div>
+</div>

monopyly/templates/credit/statement_reconciliation/statement_reconciliation_page.html

@@ -0,0 +1,86 @@
+{% extends 'layout.html' %}
+
+
+{% block header %}
+
+  <h1>
+    {% block title %}
+      Statement Reconciliation
+    {% endblock %}
+  </h1>
+
+{% endblock %}
+
+
+{% block content %}
+  {% set highlighted_transactions = statement_transactions|selectattr("highlight")|first %}
+
+  <div id="credit-statement-reconciliation-details" class="details">
+
+    <div id="credit-statement-reconciliation-info" class="primary-info">
+
+      <div id="statement-reconciliation-summary-container" class="summary-container">
+        {% include 'credit/statement_reconciliation/summary.html' %}
+      </div>
+
+      <div id="statement-transactions-container" class="transactions-container">
+        {% if highlighted_transactions %}
+          <p class="note">
+            <span class="highlight">Highlighted</span> transactions indicate that the transaction was not identified in the reported activity file.
+          </p>
+        {% endif %}
+
+        {% with transactions = statement_transactions, full_view = False %}
+          {% include 'credit/transactions_table/transactions.html' %}
+        {% endwith %}
+      </div>
+
+    </div>
+
+  </div>
+
+{% endblock %}
+
+
+{% block right_sidebar %}
+
+    <div class="sidebar-menu">
+
+      <div class="button">
+        <a class="action" href="{{ url_for('credit.add_transaction', card_id=statement.card_id, statement_id=statement.id) }}">
+          <img class="icon" src="{{ url_for('static', filename='img/icons/plus.png') }}" />
+        </a>
+      </div>
+      <div class="button">
+        <a class="action" href="{{ url_for('credit.load_statement_details', statement_id=statement.id) }}">
+          <img class="icon" src="{{ url_for('static', filename='img/icons/statement.png') }}" />
+        </a>
+      </div>
+      <div class="button">
+        <div class="action">
+          <img id="reconciliation-button" class="icon" src="{{ url_for('static', filename='img/icons/statement-pair.png') }}" />
+        </div>
+      </div>
+
+    </div>
+
+{% endblock %}
+
+
+{% block javascript %}
+
+  <script>
+    const CREDIT_ACTIVITY_RECONCILIATION_ENDPOINT = "{{ url_for('credit.reconcile_activity', statement_id=statement.id) }}";
+    const EXPAND_TRANSACTION_ENDPOINT = "{{ url_for('credit.expand_transaction') }}";
+    const LINKED_TRANSACTION_ENDPOINT = "{{ url_for('credit.show_linked_transaction') }}";
+  </script>
+  <script type="module" src="{{ url_for('static', filename='js/show-credit-activity-loader.js') }}">
+  </script>
+  <script type="module" src="{{ url_for('static', filename='js/highlight-discrepant-transactions.js') }}">
+  </script>
+  <script type="module" src="{{ url_for('static', filename='js/expand-transaction.js') }}">
+  </script>
+  <script type="module" src="{{ url_for('static', filename='js/show-linked-transaction.js') }}">
+  </script>
+
+{% endblock %}

monopyly/templates/credit/statement_reconciliation/summary.html

@@ -0,0 +1,45 @@
+<div id="statement-reconciliation-summary" class="summary-box">
+
+  {% if not (highlighted_transactions or discrepant_records or unrecorded_activities) %}
+
+    <img class="reconciliation-indicator" src="{{ url_for('static', filename='img/icons/checkmark.png') }}" />
+
+  {% else %}
+
+    {% if highlighted_transactions or discrepant_records or unrecorded_activities %}
+      <div id="statement-discrepancies-container">
+        <h2>Discrepancies</h3>
+
+        <div class="balance">
+          <div class="dollar-sign">$</div>
+          <div>{{ discrepant_amount|currency }}</div>
+        </div>
+
+        {% if discrepant_records %}
+          <div class="discrepancy-category">
+            <h3>Discrepant Records</h3>
+            <p class="note">
+              {% set plural = discrepant_records|length != 1 %}
+              The following {% if plural %}activities were{% else %}activity was{% endif %} reported in the credit activity file and matched in the database, but the charge amount{%if plural %}s do{% else %} does{% endif %} not match:
+            </p>
+            {% include 'credit/statement_reconciliation/discrepant_records.html' %}
+          </div>
+        {% endif %}
+
+        {% if unrecorded_activities %}
+          <div class="discrepancy-category">
+            <h3>Unrecorded Activity</h3>
+            <p class="note">
+            {% set plural = unrecorded_activities|length != 1 %}
+            The following {% if plural %}activities were{% else %}activity was{% endif %} reported in the credit activity file, but {% if plural %}do{% else %}does{% endif %} not exist in the Monopyly database:
+            </p>
+            {% include 'credit/statement_reconciliation/unrecorded_activities.html' %}
+          </div>
+        {% endif %}
+
+      </div>
+    {% endif %}
+
+  {% endif %}
+
+</div>

monopyly/templates/credit/statement_reconciliation/unrecorded_activities.html

@@ -0,0 +1,24 @@
+<div class="unrecorded-activities transactions-table">
+
+  {% for activity in unrecorded_activities %}
+
+    <div class="reconciliation-activity unrecorded-activity">
+
+      <div class=" activity-info">
+        <div class="date">{{ activity.transaction_date }}</div>
+        <div class="text">{{ activity.description }}</div>
+        <div class="amount">
+          <span class="dollar-sign">$</span>
+          {{ activity.total|currency }}
+        </div>
+      </div>
+
+      <a class="button" href="{{ url_for('credit.add_transaction', card_id=statement.card.id, statement_id=statement.id, transaction_date=activity.transaction_date, total=activity.total, description=activity.description) }}">
+        <img class="icon" src="{{ url_for('static', filename='img/icons/plus-thick.png') }}" />
+      </a>
+
+    </div>
+
+  {% endfor %}
+
+</div>

monopyly/templates/credit/statement_summary.html

@@ -52,8 +52,8 @@
 
           <div class="form-line">
             <div class="dollar-sign">$</div>
-            <input id="pay-amount" type="text" name="pay_amount" value="{{ statement.balance|currency }}" maxlength="8" />
-            <input id="pay-date" type="text" name="pay_date" value="{{ date_today }}" maxlength="10" />
+            <input id="pay-amount" type="number" name="pay_amount" value="{{ statement.balance }}" />
+            <input id="pay-date" type="date" name="pay_date" value="{{ date_today }}" />
           </div>
 
           <div class="form-line">

monopyly/templates/credit/statements.html

@@ -9,7 +9,7 @@
         <span class="stack-title-info">{{ card.last_four_digits }}</span>
       </h2>
 
-      <div class="statement-blocks">
+      <div class="statement-blocks stack-buttons">
         {% for statement in statements %}
           {% if statement.balance is not none %}
 

monopyly/templates/credit/transaction_form/transaction_form.html

@@ -23,9 +23,17 @@
       {{ form.transaction_date }}
     </div>
 
-    <div class="form-field merchant-field autocomplete">
+    <div class="form-field merchant-field autocomplete suggestable">
       {{ form.merchant.label }}
       {{ form.merchant }}
+
+      {% if form.suggestions.get('merchant') %}
+        <div class="form-suggestion merchant-suggestion">
+          <span>Suggested: </span>
+          <span class="suggested-value merchant">{{ form.suggestions['merchant'] }}</span>
+        </div>
+      {% endif %}
+
     </div>
 
   </div>

monopyly/templates/credit/transaction_form/transaction_form_page.html

@@ -13,6 +13,8 @@
   </script>
   <script type="module" src="{{ url_for('static', filename='js/infer-statement.js') }}">
   </script>
+  <script type="module" src="{{ url_for('static', filename='js/use-suggested-merchant.js') }}">
+  </script>
   {{ super() }}
 
 {% endblock %}

monopyly/templates/credit/transaction_form/transaction_form_page_update.html

@@ -13,3 +13,12 @@
   {% endwith %}
 
 {% endblock %}
+
+
+{% block javascript %}
+
+  {{ super() }}
+  <script type="module" src="{{ url_for('static', filename='js/use-suggested-amount.js') }}">
+  </script>
+
+{% endblock %}

monopyly/templates/credit/transaction_submission_page.html

@@ -81,6 +81,14 @@
       <a href="{{ url_for('credit.add_transaction', card_id=transaction.statement.card_id, statement_id=transaction.statement_id) }}">
         Create a new transaction on this statement
       </a>
+      {% with reconciliation_info = session.get('reconciliation_info', None) %}
+        {% if reconciliation_info %}
+          <br>
+          <a href="{{ url_for('credit.load_statement_reconciliation_details', statement_id=reconciliation_info[0]) }}">
+            Return to the in-progress statement reconciliation
+          </a>
+        {% endif %}
+      {% endwith %}
     {% endif %}
 
   </div>

monopyly/templates/credit/transactions_table/expanded_row_content.html

@@ -1,21 +1,25 @@
-<div class="setting">
+<div class="setting column">
 
   <div class="date column">
-    <div class="month">
-      {{ transaction.transaction_date.strftime('%b')|upper }}
-    </div>
-    <div class="day">
-      {{ transaction.transaction_date.strftime('%d')|upper }}
-    </div>
-    <div class="year">
-      {{ transaction.transaction_date.year }}
+
+    <div class="stacked-date">
+      <div class="month">
+        {{ transaction.transaction_date.strftime('%b')|upper }}
+      </div>
+      <div class="day">
+        {{ transaction.transaction_date.strftime('%d')|upper }}
+      </div>
+      <div class="year">
+        {{ transaction.transaction_date.year }}
+      </div>
     </div>
-    <div class="full">
+    <div class="full-date">
       {{ transaction.transaction_date }}
     </div>
+
   </div>
 
-  <div class="description">
+  <div class="description column">
 
     <div class="description-header">
       <div class="merchant">
@@ -31,9 +35,11 @@
     </div>
 
   </div>
+
 </div>
 
-<div class="payment">
+
+<div class="payment column">
 
   {% if full_view %}
     <div class="statement">

monopyly/templates/layout.html

@@ -7,34 +7,36 @@
       {% if request.path != '/' %} – {% endif %}
       Monopyly
     </title>
-    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}" />
+    <!-- Ensure emulators also display the page properly -->
+    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />
     <!-- ****** faviconit.com favicons ****** -->
-    <link rel="shortcut icon" href="{{ url_for('static', filename='favicon/favicon.ico') }}">
-    <link rel="icon" sizes="16x16 32x32 64x64" href="{{ url_for('static', filename='favicon/favicon.ico') }}">
-    <link rel="icon" type="image/png" sizes="196x196" href="{{ url_for('static', filename='favicon/favicon-192.png') }}">
-    <link rel="icon" type="image/png" sizes="160x160" href="{{ url_for('static', filename='favicon/favicon-160.png') }}">
-    <link rel="icon" type="image/png" sizes="96x96" href="{{ url_for('static', filename='favicon/favicon-96.png') }}">
-    <link rel="icon" type="image/png" sizes="64x64" href="{{ url_for('static', filename='favicon/favicon-64.png') }}">
-    <link rel="icon" type="image/png" sizes="32x32" href="{{ url_for('static', filename='favicon/favicon-32.png') }}">
-    <link rel="icon" type="image/png" sizes="16x16" href="{{ url_for('static', filename='favicon/favicon-16.png') }}">
-    <link rel="apple-touch-icon" href="{{ url_for('static', filename='favicon/favicon-57.png') }}">
-    <link rel="apple-touch-icon" sizes="114x114" href="{{ url_for('static', filename='favicon/favicon-114.png') }}">
-    <link rel="apple-touch-icon" sizes="72x72" href="{{ url_for('static', filename='favicon/favicon-72.png') }}">
-    <link rel="apple-touch-icon" sizes="144x144" href="{{ url_for('static', filename='favicon/favicon-144.png') }}">
-    <link rel="apple-touch-icon" sizes="60x60" href="{{ url_for('static', filename='favicon/favicon-60.png') }}">
-    <link rel="apple-touch-icon" sizes="120x120" href="{{ url_for('static', filename='favicon/favicon-120.png') }}">
-    <link rel="apple-touch-icon" sizes="76x76" href="{{ url_for('static', filename='favicon/favicon-76.png') }}">
-    <link rel="apple-touch-icon" sizes="152x152" href="{{ url_for('static', filename='favicon/favicon-152.png') }}">
-    <link rel="apple-touch-icon" sizes="180x180" href="{{ url_for('static', filename='favicon/favicon-180.png') }}">
-    <meta name="msapplication-TileColor" content="#FFFFFF">
-    <meta name="msapplication-TileImage" content="{{ url_for('static', filename='favicon/favicon-144.png') }}">
-    <meta name="msapplication-config" content="{{ url_for('static', filename='favicon/browserconfig.xml') }}">
+    <link rel="shortcut icon" href="{{ url_for('static', filename='favicon/favicon.ico') }}" />
+    <link rel="icon" sizes="16x16 32x32 64x64" href="{{ url_for('static', filename='favicon/favicon.ico') }}" />
+    <link rel="icon" type="image/png" sizes="196x196" href="{{ url_for('static', filename='favicon/favicon-192.png') }}" />
+    <link rel="icon" type="image/png" sizes="160x160" href="{{ url_for('static', filename='favicon/favicon-160.png') }}" />
+    <link rel="icon" type="image/png" sizes="96x96" href="{{ url_for('static', filename='favicon/favicon-96.png') }}" />
+    <link rel="icon" type="image/png" sizes="64x64" href="{{ url_for('static', filename='favicon/favicon-64.png') }}" />
+    <link rel="icon" type="image/png" sizes="32x32" href="{{ url_for('static', filename='favicon/favicon-32.png') }}" />
+    <link rel="icon" type="image/png" sizes="16x16" href="{{ url_for('static', filename='favicon/favicon-16.png') }}" />
+    <link rel="apple-touch-icon" href="{{ url_for('static', filename='favicon/favicon-57.png') }}" />
+    <link rel="apple-touch-icon" sizes="114x114" href="{{ url_for('static', filename='favicon/favicon-114.png') }}" />
+    <link rel="apple-touch-icon" sizes="72x72" href="{{ url_for('static', filename='favicon/favicon-72.png') }}" />
+    <link rel="apple-touch-icon" sizes="144x144" href="{{ url_for('static', filename='favicon/favicon-144.png') }}" />
+    <link rel="apple-touch-icon" sizes="60x60" href="{{ url_for('static', filename='favicon/favicon-60.png') }}" />
+    <link rel="apple-touch-icon" sizes="120x120" href="{{ url_for('static', filename='favicon/favicon-120.png') }}" />
+    <link rel="apple-touch-icon" sizes="76x76" href="{{ url_for('static', filename='favicon/favicon-76.png') }}" />
+    <link rel="apple-touch-icon" sizes="152x152" href="{{ url_for('static', filename='favicon/favicon-152.png') }}" />
+    <link rel="apple-touch-icon" sizes="180x180" href="{{ url_for('static', filename='favicon/favicon-180.png') }}" />
+    <meta name="msapplication-TileColor" content="#FFFFFF" />
+    <meta name="msapplication-TileImage" content="{{ url_for('static', filename='favicon/favicon-144.png') }}" />
+    <meta name="msapplication-config" content="{{ url_for('static', filename='favicon/browserconfig.xml') }}" />
     <!-- ****** faviconit.com favicons ****** -->
     <!-- Use Google JQuery CDN -->
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
     <script>window.jQuery || document.write('<script src="{{ url_for('static', filename='jquery-3.7.0.min.js') }}"><\/script>')</script>
     <!-- Use Chartist via CDN -->
-    <link rel="stylesheet" href="//cdn.jsdelivr.net/chartist.js/latest/chartist.min.css">
+    <link rel="stylesheet" href="//cdn.jsdelivr.net/chartist.js/latest/chartist.min.css" />
     <script src="//cdn.jsdelivr.net/chartist.js/latest/chartist.min.js"></script>
   </head>
   <body>
@@ -43,22 +45,34 @@
       <div class="container">
 
         <a href="{{ url_for('core.index') }}">
-          <h1 class="monopyly-logo">Monopyly</h1>
+          <h1 class="monopyly-logo">
+            Monopyly
+            {%- if config['DEBUG'] -%}
+              <span class="development-mode">.dev</span>
+            {%- endif -%}
+          </h1>
         </a>
 
-        <nav id="nav-menu">
-          <ul></strong>
-
+        <nav id="header-menu">
+          <svg class="mobile-menu mobile-menu-rotate toggle-button" viewBox="0 0 100 100">
+            <path class="line top" d="m 30,33 h 40 c 3.722839,0 7.5,3.126468 7.5,8.578427 0,5.451959 -2.727029,8.421573 -7.5,8.421573 h -20" />
+            <path class="line middle" d="m 30,50 h 40" />
+            <path class="line bottom" d="m 70,67 h -40 c 0,0 -7.5,-0.802118 -7.5,-8.365747 0,-7.563629 7.5,-8.634253 7.5,-8.634253 h 20" />
+          </svg>
+          <ul class="menu-links"></strong>
             <li><a href="{{ url_for('core.index') }}">Home</a></li>
             <li><a href="{{ url_for('core.about') }}">About</a></li>
             {% if g.user %}
-              <li><a href="{{url_for('core.load_profile') }}" class="username">{{ g.user.username }}</a></li>
+              <li>
+                <a href="{{url_for('core.load_profile') }}" class="username">
+                  {{ g.user.username }}
+                </a>
+              </li>
               <li><a href="{{ url_for('auth.logout') }}">Log Out</a></li>
             {% else %}
               <li><a href="{{ url_for('auth.register') }}">Register</a></li>
               <li><a href="{{ url_for('auth.login') }}">Log In</a></li>
             {% endif %}
-
           </ul></strong>
         </nav>
 
@@ -98,7 +112,10 @@
         </p>
     </footer>
 
-    {% block javascript %}{% endblock %}
+    <script type="module" src="{{ url_for('static', filename='js/toggle-navigation.js') }}">
+    </script>
+    {% block javascript %}
+    {% endblock %}
 
   </body>
 </html>