# Documentation d'Intégration Technique - FreeGive

Ce document regroupe les spécifications et annotations techniques pour faciliter l'intégration de la logique métier dans les écrans HTML/CSS de la plateforme FreeGive.

## 1. Stack Technique
- **Framework CSS** : Tailwind CSS (via CDN ou PostCSS).
- **Icônes** : Material Symbols (Google Fonts).
- **Typographie** : Inter (Sans-serif).

## 2. Écrans Inclus dans le Package
- **Accueil (Bureau)** : `{{DATA:SCREEN:SCREEN_100}}`
- **Tableau de Bord** : `{{DATA:SCREEN:SCREEN_96}}`
- **Catalogue Solidaire** : `{{DATA:SCREEN:SCREEN_99}}`
- **Profil Utilisateur** : `{{DATA:SCREEN:SCREEN_91}}`
- **Version Mobile (Accueil)** : `{{DATA:SCREEN:SCREEN_89}}`

## 3. Points d'Injection de Logique (Annotations)

### Authentification & Session
- Les headers de navigation (`TopNavBar`) contiennent des placeholders pour le nom de l'utilisateur et l'avatar.
- **Variable suggérée** : `user.isAuthenticated`, `user.name`, `user.avatar_url`.

### Flux de Don (Catalogue)
- Chaque carte de don dans le `{{DATA:SCREEN:SCREEN_99}}` doit être bouclée dynamiquement.
- **Modèle de données** : `donations[]` contenant `title`, `description`, `image`, `location`, `urgency_level`.

### Messagerie & Notifications
- Les compteurs de pastilles rouges sur les icônes `notifications` et `chat` sont statiques dans le HTML. 
- **Action** : Lier au backend via un WebSocket ou une requête API périodique.

### Sécurité (Code de Retrait)
- L'écran `{{DATA:SCREEN:SCREEN_92}}` nécessite une logique de génération de QR Code ou de code PIN unique lié à une transaction validée.

## 4. Instructions d'Installation
1. Copiez le code HTML via le bouton **View Code (</>)**.
2. Assurez-vous d'inclure le script Tailwind CSS dans votre `<head>`.
3. Remplacez les placeholders d'images `{{DATA:IMAGE:IMAGE_N}}` par vos chemins d'assets locaux.