nngo/Personal-Finance-Management
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

05/31 Fix template

Browse Source
This commit is contained in:
nngo
2026-05-31 23:11:13 -04:00
parent 6f74f38304
commit cf82f200a5
1 changed files with 295 additions and 218 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/templates/base.html
+119 -42
View File
@@ -1,12 +1,21 @@
<!DOCTYPE html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>{% block title %}PFM{% endblock %} — Personal Finance</title> <title>{% block title %}PFM{% endblock %} — Personal Finance</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"> <link
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" rel="stylesheet"> href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,300;0,400;0,500;0,600;1,400&family=DM+Mono:wght@400;500&display=swap" rel="stylesheet"> rel="stylesheet"
/>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css"
rel="stylesheet"
/>
<link
href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,300;0,400;0,500;0,600;1,400&family=DM+Mono:wght@400;500&display=swap"
rel="stylesheet"
/>
<style> <style>
:root { :root {
--sidebar-width: 240px; --sidebar-width: 240px;
@@ -161,7 +170,6 @@
</style> </style>
</head> </head>
<body> <body>
<div class="sb-overlay" id="sbOverlay"></div> <div class="sb-overlay" id="sbOverlay"></div>
<!-- SIDEBAR --> <!-- SIDEBAR -->
@@ -171,50 +179,91 @@
<span class="b-text">PFM</span> <span class="b-text">PFM</span>
</div> </div>
<div class="sb-nav"> <div class="sb-nav">
<a href="{{ url_for('dashboard.index') }}" class="sb-link {% if request.endpoint == 'dashboard.index' %}active{% endif %}"> <a
href="{{ url_for('dashboard.index') }}"
class="sb-link {% if request.endpoint == 'dashboard.index' %}active{% endif %}"
>
<i class="bi bi-grid-1x2"></i><span class="lt">Dashboard</span> <i class="bi bi-grid-1x2"></i><span class="lt">Dashboard</span>
</a> </a>
<div class="sb-section">Money</div> <div class="sb-section">Money</div>
<a href="{{ url_for('transactions.index') }}" class="sb-link {% if request.blueprint == 'transactions' %}active{% endif %}"> <a
<i class="bi bi-arrow-left-right"></i><span class="lt">Transactions</span> href="{{ url_for('transactions.index') }}"
class="sb-link {% if request.blueprint == 'transactions' %}active{% endif %}"
>
<i class="bi bi-arrow-left-right"></i
><span class="lt">Transactions</span>
</a> </a>
<a href="{{ url_for('transactions.new', type='income') }}" class="sb-link"> <a
<i class="bi bi-arrow-down-circle"></i><span class="lt">Add Income</span> href="{{ url_for('transactions.new', type='income') }}"
class="sb-link"
>
<i class="bi bi-arrow-down-circle"></i
><span class="lt">Add Income</span>
</a> </a>
<a href="{{ url_for('transactions.new', type='expense') }}" class="sb-link"> <a
<i class="bi bi-arrow-up-circle"></i><span class="lt">Add Expense</span> href="{{ url_for('transactions.new', type='expense') }}"
class="sb-link"
>
<i class="bi bi-arrow-up-circle"></i
><span class="lt">Add Expense</span>
</a> </a>
<a href="{{ url_for('accounts.index') }}" class="sb-link {% if request.blueprint == 'accounts' %}active{% endif %}"> <a
href="{{ url_for('accounts.index') }}"
class="sb-link {% if request.blueprint == 'accounts' %}active{% endif %}"
>
<i class="bi bi-wallet2"></i><span class="lt">Accounts</span> <i class="bi bi-wallet2"></i><span class="lt">Accounts</span>
</a> </a>
<div class="sb-section">Planning</div> <div class="sb-section">Planning</div>
<a href="{{ url_for('budgets.index') }}" class="sb-link {% if request.blueprint == 'budgets' %}active{% endif %}"> <a
href="{{ url_for('budgets.index') }}"
class="sb-link {% if request.blueprint == 'budgets' %}active{% endif %}"
>
<i class="bi bi-pie-chart"></i><span class="lt">Budgets</span> <i class="bi bi-pie-chart"></i><span class="lt">Budgets</span>
</a> </a>
<a href="{{ url_for('goals.index') }}" class="sb-link {% if request.blueprint == 'goals' %}active{% endif %}"> <a
href="{{ url_for('goals.index') }}"
class="sb-link {% if request.blueprint == 'goals' %}active{% endif %}"
>
<i class="bi bi-bullseye"></i><span class="lt">Goals</span> <i class="bi bi-bullseye"></i><span class="lt">Goals</span>
</a> </a>
<div class="sb-section">Growth</div> <div class="sb-section">Growth</div>
<a href="{{ url_for('investments.index') }}" class="sb-link {% if request.blueprint == 'investments' %}active{% endif %}"> <a
<i class="bi bi-graph-up-arrow"></i><span class="lt">Investments</span> href="{{ url_for('investments.index') }}"
class="sb-link {% if request.blueprint == 'investments' %}active{% endif %}"
>
<i class="bi bi-graph-up-arrow"></i
><span class="lt">Investments</span>
</a> </a>
<a href="{{ url_for('reports.index') }}" class="sb-link {% if request.blueprint == 'reports' %}active{% endif %}"> <a
<i class="bi bi-file-earmark-bar-graph"></i><span class="lt">Reports</span> href="{{ url_for('reports.index') }}"
class="sb-link {% if request.blueprint == 'reports' %}active{% endif %}"
>
<i class="bi bi-file-earmark-bar-graph"></i
><span class="lt">Reports</span>
</a> </a>
<div class="sb-section">AI</div> <div class="sb-section">AI</div>
<a href="{{ url_for('ai.index') }}" class="sb-link {% if request.blueprint == 'ai' %}active{% endif %}"> <a
href="{{ url_for('ai.index') }}"
class="sb-link {% if request.blueprint == 'ai' %}active{% endif %}"
>
<i class="bi bi-stars"></i><span class="lt">AI Assistant</span> <i class="bi bi-stars"></i><span class="lt">AI Assistant</span>
</a> </a>
</div> </div>
<div class="sb-footer"> <div class="sb-footer">
<a href="{{ url_for('categories.index') }}" class="sb-link {% if request.blueprint == 'categories' %}active{% endif %}"> <a
href="{{ url_for('categories.index') }}"
class="sb-link {% if request.blueprint == 'categories' %}active{% endif %}"
>
<i class="bi bi-tags"></i><span class="lt">Categories</span> <i class="bi bi-tags"></i><span class="lt">Categories</span>
</a> </a>
<a href="{{ url_for('settings.profile') }}" class="sb-link {% if request.blueprint == 'settings' %}active{% endif %}"> <a
href="{{ url_for('settings.index') }}"
class="sb-link {% if request.blueprint == 'settings' %}active{% endif %}"
>
<i class="bi bi-gear"></i><span class="lt">Settings</span> <i class="bi bi-gear"></i><span class="lt">Settings</span>
</a> </a>
<a href="{{ url_for('auth.logout') }}" class="sb-link"> <a href="{{ url_for('auth.logout') }}" class="sb-link">
@@ -225,23 +274,35 @@
<!-- TOPBAR --> <!-- TOPBAR -->
<header id="topbar"> <header id="topbar">
<button class="tb-toggle" id="sbToggle"><i class="bi bi-list"></i></button> <button class="tb-toggle" id="sbToggle">
<i class="bi bi-list"></i>
</button>
<span class="tb-title">{% block page_title %}{% endblock %}</span> <span class="tb-title">{% block page_title %}{% endblock %}</span>
<div class="tb-right"> <div class="tb-right">
{% block topbar_actions %}{% endblock %} {% block topbar_actions %}{% endblock %}
<span class="d-none d-sm-inline small text-muted mono">{{ current_user.display_name or current_user.username }}</span> <span class="d-none d-sm-inline small text-muted mono"
>{{ current_user.display_name or current_user.username }}</span
>
</div> </div>
</header> </header>
<!-- FLASH --> <!-- FLASH -->
<div class="flash-wrap"> <div class="flash-wrap">
{% with messages = get_flashed_messages(with_categories=true) %} {% with messages = get_flashed_messages(with_categories=true) %} {% for
{% for cat, msg in messages %} cat, msg in messages %}
<div class="alert alert-{{ 'danger' if cat == 'error' else cat }} alert-dismissible fade show shadow-sm mb-0 py-2 px-3" style="font-size:13px;border-radius:8px;" role="alert"> <div
{{ msg }}<button type="button" class="btn-close" style="padding:.4rem;" data-bs-dismiss="alert"></button> class="alert alert-{{ 'danger' if cat == 'error' else cat }} alert-dismissible fade show shadow-sm mb-0 py-2 px-3"
style="font-size: 13px; border-radius: 8px"
role="alert"
>
{{ msg }}<button
type="button"
class="btn-close"
style="padding: 0.4rem"
data-bs-dismiss="alert"
></button>
</div> </div>
{% endfor %} {% endfor %} {% endwith %}
{% endwith %}
</div> </div>
<!-- MAIN --> <!-- MAIN -->
@@ -250,18 +311,34 @@
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<script> <script>
(function () { (function () {
const sb = document.getElementById('sidebar'); const sb = document.getElementById("sidebar");
const overlay = document.getElementById('sbOverlay'); const overlay = document.getElementById("sbOverlay");
const KEY = 'pfm_sb'; const KEY = "pfm_sb";
const mob = () => window.innerWidth < 769; const mob = () => window.innerWidth < 769;
if (!mob() && localStorage.getItem(KEY)==='1') sb.classList.add('collapsed'); if (!mob() && localStorage.getItem(KEY) === "1")
document.getElementById('sbToggle').addEventListener('click', function(){ sb.classList.add("collapsed");
if (mob()) { sb.classList.toggle('mob-open'); overlay.classList.toggle('on'); } document
else { sb.classList.toggle('collapsed'); localStorage.setItem(KEY, sb.classList.contains('collapsed')?'1':'0'); } .getElementById("sbToggle")
.addEventListener("click", function () {
if (mob()) {
sb.classList.toggle("mob-open");
overlay.classList.toggle("on");
} else {
sb.classList.toggle("collapsed");
localStorage.setItem(
KEY,
sb.classList.contains("collapsed") ? "1" : "0",
);
}
}); });
overlay.addEventListener('click', function(){ sb.classList.remove('mob-open'); overlay.classList.remove('on'); }); overlay.addEventListener("click", function () {
document.querySelectorAll('.flash-wrap .alert').forEach(function(el){ sb.classList.remove("mob-open");
setTimeout(function(){ bootstrap.Alert.getOrCreateInstance(el).close(); }, 4500); overlay.classList.remove("on");
});
document.querySelectorAll(".flash-wrap .alert").forEach(function (el) {
setTimeout(function () {
bootstrap.Alert.getOrCreateInstance(el).close();
}, 4500);
}); });
})(); })();
</script> </script>