Fiche Descriptive Complète : Digital Nomad – Modernisation Hiver
🔷 INFORMATIONS GÉNÉRALES
Champ Détail
Nom du template Digital_Nomad_Modernisation_Hiver.html
Version 1.0.0
Date de création 19 Mars 2026
Auteur / Designer Refoia Jeremy Tech
Type de page Dashboard de suivi budgétaire / Page de planification
Objectif principal Visualiser la répartition d’un budget de 600€ pour l’achat d’équipement hivernal.
🎯 DESCRIPTION FONCTIONNELLE
📌 Que fait ce template ?
Ce template propose un tableau de bord minimaliste et élégant permettant de suivre les dépenses liées à la modernisation d’équipement pour un « Digital Nomad ». Il affiche :
Un résumé financier (Budget, Dépenses, Économies) via des cartes de score.
Un tableau détaillé des acquisitions prévues.
Une visualisation graphique (Histogramme) pour comparer les coûts entre les articles.
📌 Public cible (Persona)
👤 Digital Nomads souhaitant planifier leurs investissements matériels.
👤 Freelances gérant un budget de bureau mobile.
👤 Étudiants/Voyageurs ayant besoin d’un outil de suivi de dépenses simple et visuel.
⚙️ SPÉCIFICATIONS TECHNIQUES
🌐 Environnement & Compatibilité
Standard HTML : HTML5
Framework CSS : Tailwind CSS (via CDN)
Framework JS : Chart.js (via CDN) pour la data-viz
Browsers ciblés : Chrome ✅ Firefox ✅ Safari ✅ Edge ✅
Responsive : ✅ Oui — Adapté via les classes md:grid-cols-3.
📦 Dépendances / Assets
HTML
📥 ENTRÉES — CONTENU DYNAMIQUE
# Nom de la variable Type Obligatoire Description
1 total_budget float ✅ Oui Montant total alloué (ex: 600.00).
2 items_list array ✅ Oui Liste des équipements (Nom, Coût, Couleur).
3 chart_data array ✅ Oui Valeurs numériques pour alimenter le graphique Chart.js.
🧱 STRUCTURE DU FICHIER — DOM
Digital_Nomad_Modernisation_Hiver.html
📌
: Configuration Meta et imports CDN (Tailwind, Chart.js).📌
(Classe: bg-slate-50)🏗️
🏗️
🧱 Section Stats : 3 colonnes affichant Budget, Dépenses et Reste.
🧱 Section Tableau : Liste sémantique des équipements avec indicateurs de couleur.
🧱 Section Graphique : Conteneur
🏗️