Charte graphique SchotzIAD : logo, favicon, palette de couleurs
Intègre l'identité visuelle officielle (planche fournie) : - Assets ajoutés (frontend/src/assets/images/) : logo-icon, logo-carre, logo-horizontal (réservé aux PDF, non encore câblé), favicon. - Favicon : src/favicon.ico régénéré depuis favicon.png (16/32/48, via Pillow) pour remplacer l'icône Angular par défaut ; PNG référencé en priorité dans index.html avec cache-busting (?v=) pour contourner le cache favicon des navigateurs Chromium (Chrome/Brave). - Barre de navigation : logo-icon en tête (fond blanc localisé pour ressortir sur l'anthracite), couleurs de charte (fond anthracite, lien actif bleu IAD, survol orange). - Pages d'authentification (login, register, forgot-password, reset-password) : logo carré centré au-dessus du formulaire, boutons en bleu IAD. - Palette officielle en variables CSS globales (styles.scss) : --couleur-orange, --couleur-bleu, --couleur-anthracite, --couleur-gris-clair (+ déclinaisons de survol). - Harmonisation des boutons d'action à fond bleu (texte) sur toute l'app : survol orange (véhicules, profil, barème, montants réglés, résumés mensuel/ annuel, onboarding, formulaire de trajet, dialog de confirmation, carte). Exclusions volontaires : boutons rouges (suppression), boutons à icône, boutons secondaires à fond blanc, indicateurs d'état sélectionné/actif. Specs : design.md complété (section Charte graphique : palette, convention de survol, rôle de chaque asset).
This commit is contained in:
@@ -46,6 +46,16 @@
|
||||
- **Génération PDF** : côté backend, bibliothèque QuestPDF
|
||||
- **Hébergement** : l'application est packagée et hébergée via **Docker Compose** — un conteneur `frontend` (Angular servi par nginx en interne) publié sur le port hôte **2202**, et un conteneur `backend` (ASP.NET Core API) non exposé à l'hôte. Le fichier SQLite est persisté via un **bind mount** (`./data:/data`) dans le conteneur backend, ce qui rend `data/trajets.db` directement accessible sur l'hôte (inspection et sauvegarde sans entrer dans le conteneur). La terminaison **HTTPS est assurée par un reverse-proxy Caddy externe** (sur une autre machine) qui relaie vers `IP_hôte:2202` ; le backend ne fait donc pas de redirection HTTPS lui-même
|
||||
|
||||
### Charte graphique
|
||||
|
||||
- **Palette officielle** (variables CSS globales dans `styles.scss`) : Orange `--couleur-orange: #F28C28`, Bleu IAD `--couleur-bleu: #0074B8` (couleur primaire), Gris anthracite `--couleur-anthracite: #343A40`, Gris clair `--couleur-gris-clair: #E7E9EA`, avec déclinaisons de survol `--couleur-bleu-fonce` et `--couleur-orange-fonce`.
|
||||
- **Convention d'interaction** : les boutons d'action à fond bleu (texte, ex. `.btn-principal`, `.btn-primaire`, `.btn-confirmer`) passent à l'orange au survol. Cette règle ne s'applique PAS aux boutons à fond différent (rouge pour la suppression, blanc pour les actions secondaires) ni aux boutons à icône. Les indicateurs d'état sélectionné/actif (lien de navigation actif, mois sélectionné, onglet actif) restent en bleu plein, sans changement de teinte au survol.
|
||||
- **Assets graphiques** (`frontend/src/assets/images/`) :
|
||||
- `logo-icon.png` : icône seule, affichée en tête de la barre de navigation (fond blanc localisé pour ressortir sur la barre anthracite).
|
||||
- `logo-carre.png` : logo avec texte vertical, centré au-dessus du formulaire sur les 4 pages d'authentification (connexion, inscription, mot de passe oublié, réinitialisation).
|
||||
- `logo-horizontal.png` : logo avec texte horizontal, réservé à une utilisation future sur les documents PDF (non encore intégré).
|
||||
- `favicon.png` : favicon référencé en priorité (`<link rel="icon" type="image/png">`) ; `src/favicon.ico` régénéré à partir de ce PNG (multi-résolutions 16/32/48) pour remplacer l'icône par défaut d'Angular CLI, avec un paramètre de cache-busting (`?v=`) à incrémenter en cas de remplacement futur du visuel.
|
||||
|
||||
---
|
||||
|
||||
## Architecture
|
||||
|
||||
Reference in New Issue
Block a user