05/31 Fix template
This commit is contained in:
+141
-64
@@ -1,12 +1,21 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<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 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">
|
||||
<link
|
||||
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
|
||||
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>
|
||||
:root {
|
||||
--sidebar-width: 240px;
|
||||
@@ -159,112 +168,180 @@
|
||||
@keyframes spin { to { transform: rotate(360deg); } }
|
||||
{% block extra_css %}{% endblock %}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
</head>
|
||||
<body>
|
||||
<div class="sb-overlay" id="sbOverlay"></div>
|
||||
|
||||
<div class="sb-overlay" id="sbOverlay"></div>
|
||||
|
||||
<!-- SIDEBAR -->
|
||||
<nav id="sidebar">
|
||||
<!-- SIDEBAR -->
|
||||
<nav id="sidebar">
|
||||
<div class="sb-brand">
|
||||
<div class="b-icon"><i class="bi bi-currency-exchange"></i></div>
|
||||
<span class="b-text">PFM</span>
|
||||
</div>
|
||||
<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>
|
||||
</a>
|
||||
|
||||
<div class="sb-section">Money</div>
|
||||
<a 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
|
||||
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 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
|
||||
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 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
|
||||
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 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>
|
||||
</a>
|
||||
|
||||
<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>
|
||||
</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>
|
||||
</a>
|
||||
|
||||
<div class="sb-section">Growth</div>
|
||||
<a 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
|
||||
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 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
|
||||
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>
|
||||
|
||||
<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>
|
||||
</a>
|
||||
</div>
|
||||
<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>
|
||||
</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>
|
||||
</a>
|
||||
<a href="{{ url_for('auth.logout') }}" class="sb-link">
|
||||
<i class="bi bi-box-arrow-right"></i><span class="lt">Logout</span>
|
||||
</a>
|
||||
</div>
|
||||
</nav>
|
||||
</nav>
|
||||
|
||||
<!-- TOPBAR -->
|
||||
<header id="topbar">
|
||||
<button class="tb-toggle" id="sbToggle"><i class="bi bi-list"></i></button>
|
||||
<!-- TOPBAR -->
|
||||
<header id="topbar">
|
||||
<button class="tb-toggle" id="sbToggle">
|
||||
<i class="bi bi-list"></i>
|
||||
</button>
|
||||
<span class="tb-title">{% block page_title %}{% endblock %}</span>
|
||||
<div class="tb-right">
|
||||
{% 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>
|
||||
</header>
|
||||
</header>
|
||||
|
||||
<!-- FLASH -->
|
||||
<div class="flash-wrap">
|
||||
{% with messages = get_flashed_messages(with_categories=true) %}
|
||||
{% for 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">
|
||||
{{ msg }}<button type="button" class="btn-close" style="padding:.4rem;" data-bs-dismiss="alert"></button>
|
||||
<!-- FLASH -->
|
||||
<div class="flash-wrap">
|
||||
{% with messages = get_flashed_messages(with_categories=true) %} {% for
|
||||
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"
|
||||
>
|
||||
{{ msg }}<button
|
||||
type="button"
|
||||
class="btn-close"
|
||||
style="padding: 0.4rem"
|
||||
data-bs-dismiss="alert"
|
||||
></button>
|
||||
</div>
|
||||
{% endfor %} {% endwith %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
{% endwith %}
|
||||
</div>
|
||||
|
||||
<!-- MAIN -->
|
||||
<main id="main">{% block content %}{% endblock %}</main>
|
||||
<!-- MAIN -->
|
||||
<main id="main">{% block content %}{% endblock %}</main>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
|
||||
<script>
|
||||
(function(){
|
||||
const sb = document.getElementById('sidebar');
|
||||
const overlay = document.getElementById('sbOverlay');
|
||||
const KEY = 'pfm_sb';
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
|
||||
<script>
|
||||
(function () {
|
||||
const sb = document.getElementById("sidebar");
|
||||
const overlay = document.getElementById("sbOverlay");
|
||||
const KEY = "pfm_sb";
|
||||
const mob = () => window.innerWidth < 769;
|
||||
if (!mob() && localStorage.getItem(KEY)==='1') sb.classList.add('collapsed');
|
||||
document.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'); }
|
||||
if (!mob() && localStorage.getItem(KEY) === "1")
|
||||
sb.classList.add("collapsed");
|
||||
document
|
||||
.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'); });
|
||||
document.querySelectorAll('.flash-wrap .alert').forEach(function(el){
|
||||
setTimeout(function(){ bootstrap.Alert.getOrCreateInstance(el).close(); }, 4500);
|
||||
overlay.addEventListener("click", function () {
|
||||
sb.classList.remove("mob-open");
|
||||
overlay.classList.remove("on");
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
{% block extra_js %}{% endblock %}
|
||||
</body>
|
||||
document.querySelectorAll(".flash-wrap .alert").forEach(function (el) {
|
||||
setTimeout(function () {
|
||||
bootstrap.Alert.getOrCreateInstance(el).close();
|
||||
}, 4500);
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
{% block extra_js %}{% endblock %}
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user