budget_equipement_locataire

Fiche Descriptive Complète : Budget Équipement Locataire

🔷 INFORMATIONS GÉNÉRALES

Champ Détail

Nom du template budget_equipement_locataire.html

Version 1.0.0

Date de création 19/03/2026

Auteur / Designer Refoia Jeremy Tech

Type de page Dashboard de suivi budgétaire / Calculateur simple

Objectif principal Visualiser la répartition des coûts d’équipement et planifier le temps d’acquisition.

🎯 DESCRIPTION FONCTIONNELLE

📌 Que fait ce template ?

Ce template permet à un locataire de visualiser le budget nécessaire pour l’achat de trois équipements majeurs (imprimante, grille-pain, réfrigérateur). Il calcule automatiquement le total et projette une durée d’acquisition basée sur une épargne mensuelle fixe de 100 €. L’interface est scindée en deux : une liste détaillée des prix et une représentation graphique (Camembert) pour la répartition.

📌 Public cible (Persona)

👤 Locataires souhaitant organiser leurs finances pour un emménagement ou un renouvellement.

👤 Étudiants gérant un budget serré pour l’équipement de leur premier studio.

⚙️ SPÉCIFICATIONS TECHNIQUES

🌐 Environnement & Compatibilité

Standard HTML : HTML5

Framework CSS : Tailwind CSS (via CDN)

Framework JS : Chart.js (via CDN) pour la visualisation de données

Responsive : ✅ Oui (Layout Grid adaptatif md:grid-cols-2)

📦 Dépendances / Assets

HTML

📥 ENTRÉES — CONTENU DYNAMIQUE

# Nom de la variable Type Obligatoire Description

1 monthly_budget int ✅ Oui Montant alloué par mois (ex: 100)

2 items_list array ✅ Oui Objets contenant le nom, l’icône et le prix

3 total_cost int ✅ Oui Somme totale calculée des équipements

4 acquisition_duration int ✅ Oui Nombre de mois estimés (Total / Budget mensuel)

📤 INTERACTIONS & SORTIES

🖱️ Événements Utilisateur

Hover sur le graphique : Chart.js affiche les tooltips avec les valeurs exactes de chaque catégorie.

Adaptation d’écran : Le graphique est configuré avec responsive: true pour s’ajuster à la taille du conteneur.

🧱 STRUCTURE DU FICHIER — DOM

budget_equipement_locataire.html

│

├── 📌 (Meta, Tailwind, Chart.js)

│

└── 📌 (.bg-gray-50)

│

├── 🏗️