| <!DOCTYPE html> |
| <html lang="de" class="dark"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>{% block title %}FireTracker{% endblock %}</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <script src="https://unpkg.com/htmx.org@2.0.0"></script> |
| <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0"></script> |
| <script> |
| tailwind.config = { |
| darkMode: 'class', |
| theme: { |
| extend: { |
| colors: { |
| fire: { green: '#22c55e', yellow: '#eab308', red: '#ef4444' } |
| } |
| } |
| } |
| } |
| </script> |
| <style> |
| body { font-family: 'Inter', system-ui, -apple-system, sans-serif; } |
| .fire-gradient { background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%); } |
| .card { @apply bg-slate-800 rounded-xl p-6 border border-slate-700; } |
| .progress-bar { transition: width 1s ease-in-out; } |
| </style> |
| </head> |
| <body class="bg-slate-900 text-slate-100 min-h-screen"> |
| <div class="flex min-h-screen"> |
| |
| <nav class="w-64 bg-slate-800 border-r border-slate-700 p-6 hidden md:block"> |
| <div class="mb-8"> |
| <h1 class="text-2xl font-bold text-green-400">FireTracker</h1> |
| <p class="text-sm text-slate-400 mt-1">Financial Independence</p> |
| </div> |
| <ul class="space-y-2"> |
| <li> |
| <a href="/" class="flex items-center gap-3 px-4 py-2.5 rounded-lg transition {% if page == 'dashboard' %}bg-slate-700 text-green-400{% else %}text-slate-300 hover:bg-slate-700/50{% endif %}"> |
| <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zm10 0a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zm10 0a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z"></path></svg> |
| Dashboard |
| </a> |
| </li> |
| <li> |
| <a href="/assets" class="flex items-center gap-3 px-4 py-2.5 rounded-lg transition {% if page == 'assets' %}bg-slate-700 text-green-400{% else %}text-slate-300 hover:bg-slate-700/50{% endif %}"> |
| <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"></path></svg> |
| Assets |
| </a> |
| </li> |
| <li> |
| <a href="/settings" class="flex items-center gap-3 px-4 py-2.5 rounded-lg transition {% if page == 'settings' %}bg-slate-700 text-green-400{% else %}text-slate-300 hover:bg-slate-700/50{% endif %}"> |
| <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.066 2.573c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.573 1.066c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.066-2.573c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path></svg> |
| Einstellungen |
| </a> |
| </li> |
| <li> |
| <a href="/import" class="flex items-center gap-3 px-4 py-2.5 rounded-lg transition {% if page == 'import' %}bg-slate-700 text-green-400{% else %}text-slate-300 hover:bg-slate-700/50{% endif %}"> |
| <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"></path></svg> |
| Import |
| </a> |
| </li> |
| </ul> |
| </nav> |
|
|
| |
| <div class="md:hidden fixed bottom-0 left-0 right-0 bg-slate-800 border-t border-slate-700 z-50"> |
| <div class="flex justify-around py-3"> |
| <a href="/" class="flex flex-col items-center text-xs {% if page == 'dashboard' %}text-green-400{% else %}text-slate-400{% endif %}"> |
| <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6z"></path></svg> |
| Dashboard |
| </a> |
| <a href="/assets" class="flex flex-col items-center text-xs {% if page == 'assets' %}text-green-400{% else %}text-slate-400{% endif %}"> |
| <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2"></path></svg> |
| Assets |
| </a> |
| <a href="/settings" class="flex flex-col items-center text-xs {% if page == 'settings' %}text-green-400{% else %}text-slate-400{% endif %}"> |
| <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0"></path></svg> |
| Settings |
| </a> |
| <a href="/import" class="flex flex-col items-center text-xs {% if page == 'import' %}text-green-400{% else %}text-slate-400{% endif %}"> |
| <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"></path></svg> |
| Import |
| </a> |
| </div> |
| </div> |
|
|
| |
| <main class="flex-1 p-6 md:p-8 overflow-y-auto pb-20 md:pb-8"> |
| {% block content %}{% endblock %} |
| </main> |
| </div> |
|
|
| {% block scripts %}{% endblock %} |
| </body> |
| </html> |
|
|
