149 lines
5.7 KiB
HTML
149 lines
5.7 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<meta name="description" content="FINA - Track your expenses, manage your finances">
|
||
|
|
<meta name="theme-color" content="#111a22">
|
||
|
|
<title>{% block title %}FINA - Personal Finance Tracker{% endblock %}</title>
|
||
|
|
|
||
|
|
<!-- PWA Manifest -->
|
||
|
|
<link rel="manifest" href="{{ url_for('static', filename='manifest.json') }}">
|
||
|
|
|
||
|
|
<!-- Icons -->
|
||
|
|
<link rel="icon" type="image/png" href="{{ url_for('static', filename='icons/favicon.png') }}">
|
||
|
|
<link rel="icon" type="image/png" sizes="96x96" href="{{ url_for('static', filename='icons/icon-96x96.png') }}">
|
||
|
|
<link rel="icon" type="image/png" sizes="192x192" href="{{ url_for('static', filename='icons/icon-192x192.png') }}">
|
||
|
|
<link rel="icon" type="image/png" sizes="512x512" href="{{ url_for('static', filename='icons/icon-512x512.png') }}">
|
||
|
|
<link rel="apple-touch-icon" sizes="180x180" href="{{ url_for('static', filename='icons/apple-touch-icon.png') }}">
|
||
|
|
|
||
|
|
<!-- Preconnect for faster resource loading -->
|
||
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||
|
|
<link rel="preconnect" href="https://cdn.tailwindcss.com">
|
||
|
|
|
||
|
|
<!-- Fonts -->
|
||
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||
|
|
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet">
|
||
|
|
|
||
|
|
<!-- Tailwind CSS -->
|
||
|
|
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||
|
|
<script>
|
||
|
|
tailwind.config = {
|
||
|
|
darkMode: "class",
|
||
|
|
theme: {
|
||
|
|
extend: {
|
||
|
|
colors: {
|
||
|
|
"primary": "#2b8cee",
|
||
|
|
"background-light": "#f6f7f8",
|
||
|
|
"background-dark": "#111a22",
|
||
|
|
"card-dark": "#1a2632",
|
||
|
|
"card-light": "#ffffff",
|
||
|
|
"sidebar-light": "#ffffff",
|
||
|
|
"border-light": "#e2e8f0",
|
||
|
|
"text-main": "#0f172a",
|
||
|
|
"text-muted": "#64748b",
|
||
|
|
},
|
||
|
|
fontFamily: {
|
||
|
|
"display": ["Inter", "sans-serif"]
|
||
|
|
},
|
||
|
|
borderRadius: {
|
||
|
|
"DEFAULT": "0.25rem",
|
||
|
|
"lg": "0.5rem",
|
||
|
|
"xl": "0.75rem",
|
||
|
|
"2xl": "1rem",
|
||
|
|
"full": "9999px"
|
||
|
|
},
|
||
|
|
},
|
||
|
|
},
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
/* Dark theme scrollbar */
|
||
|
|
.dark ::-webkit-scrollbar {
|
||
|
|
width: 8px;
|
||
|
|
height: 8px;
|
||
|
|
}
|
||
|
|
.dark ::-webkit-scrollbar-track {
|
||
|
|
background: transparent;
|
||
|
|
}
|
||
|
|
.dark ::-webkit-scrollbar-thumb {
|
||
|
|
background: #324d67;
|
||
|
|
border-radius: 4px;
|
||
|
|
}
|
||
|
|
.dark ::-webkit-scrollbar-thumb:hover {
|
||
|
|
background: #4b6a88;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Light theme scrollbar */
|
||
|
|
::-webkit-scrollbar {
|
||
|
|
width: 8px;
|
||
|
|
height: 8px;
|
||
|
|
}
|
||
|
|
::-webkit-scrollbar-track {
|
||
|
|
background: transparent;
|
||
|
|
}
|
||
|
|
::-webkit-scrollbar-thumb {
|
||
|
|
background: #cbd5e1;
|
||
|
|
border-radius: 4px;
|
||
|
|
}
|
||
|
|
::-webkit-scrollbarlight dark:bg-background-dark text-text-main dark:text-white font-display overflow-hidden transition-colors duration-200
|
||
|
|
background: #94a3b8;
|
||
|
|
}
|
||
|
|
|
||
|
|
.material-symbols-outlined {
|
||
|
|
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||
|
|
}
|
||
|
|
|
||
|
|
.glass {
|
||
|
|
background: rgba(26, 38, 50, 0.7);
|
||
|
|
backdrop-filter: blur(10px);
|
||
|
|
border: 1px solid rgba(35, 54, 72, 0.5);
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Optimize rendering */
|
||
|
|
* {
|
||
|
|
-webkit-font-smoothing: antialiased;
|
||
|
|
-moz-osx-font-smoothing: grayscale;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
|
||
|
|
{% block extra_css %}{% endblock %}
|
||
|
|
|
||
|
|
<!-- Prevent theme flashing by applying theme before page render -->
|
||
|
|
<script>
|
||
|
|
(function() {
|
||
|
|
const theme = localStorage.getItem('theme') || 'dark';
|
||
|
|
if (theme === 'dark') {
|
||
|
|
document.documentElement.classList.add('dark');
|
||
|
|
} else {
|
||
|
|
document.documentElement.classList.remove('dark');
|
||
|
|
}
|
||
|
|
|
||
|
|
{% if current_user.is_authenticated %}
|
||
|
|
// Sync user language preference from database to localStorage
|
||
|
|
const dbLanguage = '{{ current_user.language }}';
|
||
|
|
const storedLanguage = localStorage.getItem('language');
|
||
|
|
|
||
|
|
// Always use database language as source of truth
|
||
|
|
if (dbLanguage && dbLanguage !== storedLanguage) {
|
||
|
|
localStorage.setItem('language', dbLanguage);
|
||
|
|
}
|
||
|
|
{% endif %}
|
||
|
|
})();
|
||
|
|
</script>
|
||
|
|
</head>
|
||
|
|
<body class="bg-background-light dark:bg-background-dark text-text-main dark:text-white font-display overflow-hidden">
|
||
|
|
{% block body %}{% endblock %}
|
||
|
|
|
||
|
|
<!-- Toast Notification Container -->
|
||
|
|
<div id="toast-container" class="fixed top-4 right-4 z-50 space-y-2"></div>
|
||
|
|
|
||
|
|
<script src="{{ url_for('static', filename='js/i18n.js') }}"></script>
|
||
|
|
<script src="{{ url_for('static', filename='js/app.js') }}"></script>
|
||
|
|
<script src="{{ url_for('static', filename='js/pwa.js') }}"></script>
|
||
|
|
{% block extra_js %}{% endblock %}
|
||
|
|
</body>
|
||
|
|
</html>
|