42 lines
1.2 KiB
Plaintext
42 lines
1.2 KiB
Plaintext
---
|
|
description:
|
|
globs:
|
|
alwaysApply: false
|
|
---
|
|
# Frontend-Struktur
|
|
|
|
Die Anwendung verwendet ein Flask-Jinja2-Template-System mit JavaScript-Erweiterungen:
|
|
|
|
## Template-Struktur
|
|
- `/templates`: Hauptverzeichnis für Jinja2-Templates
|
|
- `/templates/errors`: Fehlerseiten (404, 500, etc.)
|
|
- Layout-Templates für einheitliches Design
|
|
|
|
## Frontend-Assets
|
|
- `/static/css`: CSS-Dateien (mit Tailwind)
|
|
- `/static/css/src`: Quell-CSS-Dateien
|
|
- `/static/js`: JavaScript-Dateien
|
|
- `/static/js/modules`: Modulare JS-Komponenten
|
|
- `/static/img`: Bilder und grafische Elemente
|
|
|
|
## JavaScript-Funktionalität
|
|
- API-Integration: Asynchrone Kommunikation mit Backend
|
|
- Mindmap-Visualisierung: Interaktive Darstellung von Konzepten
|
|
- Benutzeroberflächen-Interaktivität: Drag & Drop, Tooltips, Modals
|
|
|
|
## CSS-Framework
|
|
- Tailwind CSS für responsive Design-Elemente
|
|
- TAILWIND CDN verwenden, nicht manuell build!
|
|
|
|
## Responsive Design
|
|
- Mobile-first Ansatz für verschiedene Gerätetypen
|
|
- Anpassungsfähiges Layout für verschiedene Bildschirmgrößen
|
|
|
|
## Zugänglichkeit
|
|
- Semantisches HTML für bessere Zugänglichkeit
|
|
- ARIA-Attribute für Screenreader-Unterstützung
|
|
|
|
## Internationalisierung
|
|
- Deutsche Benutzeroberfläche als Standard
|
|
- Vorbereitet für mehrsprachige Unterstützung
|