Fiche Descriptive Complète : Suivi Budget Emménagement
🔷 INFORMATIONS GÉNÉRALES
Champ Détail
Nom du template Suivi_Budget_Emmenagement_Famille.html
Version 1.0.0
Date de création 19 Mars 2026
Auteur / Designer Refoia Jeremy Tech
Type de page Dashboard de gestion personnelle / Utilitaire Budget
Objectif principal Visualiser l’état du budget familial lors d’un emménagement
🎯 DESCRIPTION FONCTIONNELLE
📌 Que fait ce template ?
Ce template est un tableau de bord de suivi budgétaire simplifié pour une famille. Il permet de :
Visualiser instantanément le budget initial, les dépenses et le solde.
Lister les priorités d’achats avec leur catégorie et leur impact relatif sur le budget total.
Suivre la dégressivité du solde via un graphique linéaire dynamique.
📌 Public cible (Persona)
👤 Familles en transition de logement.
👤 Particuliers souhaitant une interface légère pour prioriser des achats d’équipement.
⚙️ SPÉCIFICATIONS TECHNIQUES
🌐 Environnement & Compatibilité
Élément Valeur
Standard HTML HTML5
Framework CSS CSS Pur (Internal Stylesheet)
Framework JS Vanilla JS + Chart.js
Browsers ciblés Chrome ✅ Firefox ✅ Safari ✅ Edge ✅
Responsive ✅ Oui (Grid-layout adaptatif)
📦 Dépendances / Assets
Chart.js — Bibliothèque de visualisation de données.
HTML
📥 ENTRÉES — CONTENU DYNAMIQUE
⚠️ Variables identifiées dans le script/structure
# Nom de la variable Type Obligatoire Description
1 initialBudget int ✅ Oui Montant total de départ (800 €)
2 aspirateur int ✅ Oui Coût du premier article
3 clim int ✅ Oui Coût du second article
4 total-spent string ✅ Oui Somme injectée dans le DOM via l’ID
📤 INTERACTIONS & SORTIES
🖱️ Événements Utilisateur
Affichage dynamique : Le graphique est généré au chargement de la page via Chart.js.
Responsive Scaling : Le graphique s’adapte à la largeur du conteneur (maintainAspectRatio: false).
🧱 STRUCTURE DU FICHIER — DOM
Suivi_Budget_Emmenagement_Famille.html
│
├── 📌
│ ├── Charset & Viewport
│ └── Styles CSS (Blocs .card, .summary, .priority-list)
│
└── 📌
│
├── 🏗️
│
├── 🏗️
│ │
│ ├── 🧱 Section Summary (3 cards : Initial, Dépenses, Solde)
│ │
│ ├── 🧱 Section Table (Tableau des priorités : Article, Catégorie, Coût, Impact)
│ │
│ └── 🧱 Section Chart (Canvas pour la courbe de tendance)
│
└── 📌
🎨 CHARTE GRAPHIQUE & DESIGN SYSTEM
🎨 Palette de Couleurs
CSS
:root {
–primary-blue: #3498db; /* Bordures, titres, lignes du graphe */
–success-green: #27ae60; /* Solde positif, labels essentiels */
–dark-slate: #34495e; /* En-têtes de tableau */
–bg-light: #f4f7f6; /* Fond de page */
–card-bg: #ecf0f1; /* Fond des cartes de résumé */
}
🔤 Typographie
Famille : ‘Segoe UI’, Tahoma, Geneva, Verdana, sans-serif
Tailles :
H1 : 2em (bleu foncé)
Card Value : 1.4em (bold)
♿ ACCESSIBILITÉ & SEO
Sémantique : Utilisation des balises
Avis
Il n’y a pas encore d’avis.