Fiche Descriptive Complète : Budget Shopping Rentrée Scolaire
🔷 INFORMATIONS GÉNÉRALES
Champ Détail
Nom du template budget_shopping_rentree_scolaire.html
Version 1.0.0
Date de création 19 Mars 2026
Auteur / Designer Gemini (Inspiré par Refoia Jeremy Tech)
Type de page Dashboard de suivi budgétaire personnel
Objectif principal Visualiser l’état des dépenses de rentrée par rapport à un budget annuel via un indicateur visuel (thermomètre).
🎯 DESCRIPTION FONCTIONNELLE
📌 Que fait ce template ?
Ce template est un outil de suivi financier minimaliste. Il permet d’afficher :
Le montant total d’un budget annuel (600€).
Une liste détaillée des achats effectués (Veste, sous-vêtements, manteau).
Une visualisation dynamique via un « thermomètre » en CSS/JS qui se remplit proportionnellement aux dépenses.
Un calcul automatique du pourcentage de consommation du budget.
📌 Public cible (Persona)
👤 Particuliers (Célibataires) gérant leur budget de rentrée.
👤 Étudiants souhaitant suivre leurs dépenses vestimentaires.
👤 Développeurs cherchant un exemple simple d’intégration d’animation de jauge en Vanilla JS.
⚙️ SPÉCIFICATIONS TECHNIQUES
🌐 Environnement & Compatibilité
Standard HTML : HTML5
Framework CSS : Aucun (CSS Pur / Custom Properties)
Framework JS : Vanilla JS (ES6+)
Browsers ciblés : Chrome ✅ Firefox ✅ Safari ✅ Edge ✅
Responsive : ✅ Oui (Centrage Flexbox et Max-width 500px)
📦 Dépendances / Assets
Polices : ‘Segoe UI’, Tahoma, Geneva, Verdana, sans-serif (Polices système).
Icônes : Aucune (Stylisation CSS pure).
📥 ENTRÉES — CONTENU DYNAMIQUE
# Nom de la variable Type Obligatoire Description
1 annualBudget int ✅ Oui Le plafond budgétaire total (ex: 600).
2 totalSpent int ✅ Oui Somme totale des dépenses à comparer.
3 item-list array ✅ Oui Liste des articles (libellé + prix).
🧱 STRUCTURE DU FICHIER — DOM
budget_shopping_rentree_scolaire.html
│
└── 📌
│
└── 🏗️
├──
(Titre du budget)
├──
│
├── 🧪
│ ├── .glass-tube (Conteneur du mercure)
│ │ └── #mercury-fill (Élément animé en hauteur)
│ └── .bulb (Base du thermomètre avec l’objectif de prix)
│
├── 📋
- (Liste des articles
- )
└──
(Note de conseil en épargne mensuelle)
🎨 CHARTE GRAPHIQUE & DESIGN SYSTEM
🎨 Palette de Couleurs (CSS Variables)
CSS
:root {
–primary-color: #2c3e50; /* Bleu nuit : Texte et bordures */
–accent-color: #e74c3c; /* Rouge : Mercure et prix total */
–bg-color: #f4f7f6; /* Gris clair : Fond de page */
–card-bg: #ffffff; /* Blanc : Fond du conteneur */
}
📐 Mise en Page — Layout
Alignement : Flexbox (justify-content: center) pour le centrage vertical/horizontal.
Animation : Transition de 1s (ease-out) sur la propriété height du mercure.
Thermomètre : Design sur mesure utilisant des arrondis (border-radius) et des bordures épaisses.
🧪 TESTS & VALIDATION
# Cas de test Action Résultat attendu
1 Chargement initial Ouvrir la page Le thermomètre monte de 0 à 38% en 500ms.
2 Calcul du % Vérifier 227/600 Le texte affiche « 38% du budget annuel ».
3 Responsive Réduire la fenêtre Le conteneur s’adapte sans dépasser 500px.
4 Accessibilité Lecteur d’écran Les balises
- et
- structurent bien la liste.
📝 EXEMPLE D’OPTIMISATION JS
JavaScript
// Pour rendre le template dynamique, on pourrait injecter les données ainsi :
const items = [
{ name: « Veste », price: 95 },
{ name: « Manteau », price: 120 }
];
// Le script actuel calcule le ratio : (totalSpent / annualBudget) * 100
- structurent bien la liste.
Avis
Il n’y a pas encore d’avis.