Name: Plan_Epargne_Bricoleur_Dashboard
SKU: Plan_Epargne_Bricoleur_Dashboard
Availability: InStock

Fiche Descriptive Complète

🔷 INFORMATIONS GÉNÉRALES

Champ Détail

Nom du template Plan_Epargne_Bricoleur_Dashboard.html

Version 1.0.0

Date de création 19/03/2026

Auteur / Designer Gemini (Inspiré par Refoia Jeremy Tech)

Type de page Dashboard Financier / Suivi de Projet

Objectif principal Visualiser une stratégie d’épargne et d’achat de matériel sur 31 mois.

🎯 DESCRIPTION FONCTIONNELLE

📌 Que fait ce template ?

Ce template propose une interface de tableau de bord (dashboard) pour un projet d’équipement informatique. Il permet de suivre un budget mensuel fixe (50€), d’identifier les moments clés d’achat (périphériques vs unité centrale) et de visualiser l’impact des promotions (soldes) sur l’épargne globale.

📌 Public cible (Persona)

👤 Particuliers souhaitant planifier un achat important sur le long terme.

👤 Bricoleurs/Geeks ayant un petit budget mensuel nécessitant une optimisation rigoureuse.

👤 Étudiants ou jeunes actifs en phase de constitution de « setup ».

⚙️ SPÉCIFICATIONS TECHNIQUES

🌐 Environnement & Compatibilité

Élément Valeur

Standard HTML HTML5

Framework CSS Tailwind CSS (via CDN)

Framework JS Chart.js (via CDN)

Browsers ciblés Chrome ✅ Firefox ✅ Safari ✅ Edge ✅

Responsive ✅ Oui (Grille adaptative md: et lg:)

📦 Dépendances / Assets

HTML

📥 ENTRÉES — CONTENU DYNAMIQUE

# Nom de la variable Type Obligatoire Description

1 savingsData array ✅ Oui Tableau des valeurs de l’épargne mensuelle.

2 spendingData array ✅ Oui Tableau des pics de dépenses par mois.

3 budget_mensuel float ✅ Oui Valeur fixe de l’épargne (ex: 50.00 €).

📤 INTERACTIONS & SORTIES

🖱️ Événements Utilisateur

✅ Survol du graphique (Tooltip) → Affiche le montant exact de l’épargne ou de la dépense au mois M.

✅ Adaptation au scroll → Header collant virtuellement via ombre portée (shadow-lg).

✅ Lecture séquentielle → Liste ordonnée des priorités d’achat avec badges de couleur.

📂 Sorties de données

Graphique combiné : Une courbe (line) pour l’épargne et des barres (bar) pour les dépenses ponctuelles.

🧱 STRUCTURE DU FICHIER — DOM

Plan_Epargne_Bricoleur_Dashboard.html

📌 : Meta viewport, titre, scripts Tailwind et Chart.js, gradient personnalisé en CSS.

📌 :

🏗️

: Titre du projet et description de la stratégie.

🏗️

🧱 Section Stats : 3 cards (Budget, Total investi, Durée).

🧱 Section Graphique : Conteneur canvas pour l’évolution financière.

🧱 Section Roadmap : Liste

🧱 Section Journal : Tableau

📌