File size: 6,860 Bytes
f91bd05 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 | <!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">
<!-- Sidebar -->
<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>
<!-- Mobile 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 content -->
<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>
|