Daniel Krähenbühl
1a7ef09805
Dashboard: - ApexCharts bar chart (income vs fixed costs vs expenses) and donut chart - KPI cards: income, fixed costs, savings rate with configurable goal - Greeting with time-of-day and locale-aware date/time display Authentication & security: - Email-based login (no username), case-insensitive lookup - JWT access/refresh tokens with rotation and blacklist - TOTP 2FA with QR code, backup codes (copy + PDF export) - 2FA recovery via email code - Cloudflare Turnstile CAPTCHA on login and register Email flows: - Email verification on registration (24h token) - Password reset flow (15min token, anti-enumeration) - Brevo SMTP integration with HTML + plaintext email templates - Notification emails: 2FA recovery, password changed, email changed Settings page: - 2FA management (enable/disable, QR, backup codes) - Active sessions list with per-device revoke - Data export: ZIP with 6 PDFs via fpdf2 - Notification preferences (3 toggles) - Danger zone: account deletion with mandatory export + confirmation phrase UI & layout: - Sidebar with collapsible/flyout mode, Angular signal-based dropdowns - Dark mode (class-based), language switcher (DE/FR/IT/EN) - Mobile-responsive layout with touch-friendly targets - Roboto font via @fontsource (GDPR-compliant, no Google CDN) - Pure Tailwind CSS v3 Infrastructure: - Forgejo Actions CI/CD pipeline (auto-deploy on push to main) - Gunicorn + Nginx + PostgreSQL production setup - Rate limiting, HSTS, secure cookies, CSRF protection
36 lines
1.4 KiB
Markdown
36 lines
1.4 KiB
Markdown
# Armarium — Claude Code Instructions
|
|
|
|
## Icons
|
|
|
|
**Immer inline SVG verwenden — kein Flowbite, kein fb-icon, keine externe Icon-Komponente.**
|
|
|
|
SVG-Icons direkt aus [Flowbite Icons](https://flowbite.com/icons/) oder ähnlichen Quellen kopieren und inline einbetten:
|
|
|
|
```html
|
|
<!-- Beispiel: Search-Icon -->
|
|
<svg class="w-5 h-5 text-gray-400" fill="none" viewBox="0 0 24 24">
|
|
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
|
|
</svg>
|
|
|
|
<!-- Beispiel: Trash-Icon in rot -->
|
|
<svg class="w-4 h-4 text-red-500 flex-shrink-0" fill="none" viewBox="0 0 24 24">
|
|
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M5 7h14m-9 3v8m4-8v8M10 3h4a1 1 0 0 1 1 1v3H9V4a1 1 0 0 1 1-1ZM6 7h12v13a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V7Z"/>
|
|
</svg>
|
|
```
|
|
|
|
- Farbe via Tailwind-Klassen: `text-gray-400`, `text-red-500`, etc.
|
|
- Grösse via `w-X h-X` Klassen
|
|
- `fill="none"` + `stroke="currentColor"` für Outline-Icons
|
|
- `fill="currentColor"` für Solid-Icons
|
|
|
|
---
|
|
|
|
## Stack
|
|
|
|
- **Frontend:** Angular 21, Standalone Components, Signals, Tailwind CSS v3, ngx-translate
|
|
- **Backend:** Django 5, DRF, PostgreSQL
|
|
- **i18n:** DE / FR / IT / EN — immer alle 4 Sprachen gleichzeitig aktualisieren
|
|
- **CSS:** Reines Tailwind v3 — kein Flowbite, kein @tailwindcss/postcss
|