Fiche Descriptive Complète
🔷 INFORMATIONS GÉNÉRALES
Champ Détail
Nom du template dashboard_budget_accessoires_style.html
Version 1.0.0
Date de création 19/03/2026
Auteur / Designer Refoia Jeremy Tech
Type de page Dashboard de Simulation Financière / E-commerce
Objectif principal Permettre la simulation d’achats d’accessoires de mode et le suivi du budget en temps réel.
🎯 DESCRIPTION FONCTIONNELLE
📌 Que fait ce template ?
Ce template propose une interface de gestion de budget « Garde-Robe ». Il affiche une sélection d’accessoires (chaussettes, ceinture, bonnet) sous forme de cartes interactives. L’utilisateur peut ajouter des articles à son panier virtuel, ce qui met à jour instantanément un bloc de simulation financière (Total dépensé et Reste à vivre) situé sur le côté droit de l’écran.
📌 Public cible (Persona)
👤 Utilisateurs particuliers souhaitant planifier leurs dépenses mode.
👤 Clients E-commerce pour une expérience de « Personal Shopping » budgétisée.
👤 Développeurs Front-end cherchant une structure de dashboard minimaliste et élégante.
⚙️ SPÉCIFICATIONS TECHNIQUES
🌐 Environnement & Compatibilité
Standard HTML : HTML5
Framework CSS : Bootstrap 5.3.0 (via CDN)
Framework JS : Vanilla JS (Script natif)
Browsers ciblés : Chrome ✅ Firefox ✅ Safari ✅ Edge ✅
Responsive : ✅ Oui — Utilisation des classes de grille Bootstrap (col-lg-8, col-md-6, etc.)
📦 Dépendances / Assets
HTML
📥 ENTRÉES — CONTENU DYNAMIQUE
# Nom de la variable Type Obligatoire Description
1 initialBudget int ✅ Oui Budget de départ (Défini à 1200€ par défaut)
2 card-title str ✅ Oui Nom de l’accessoire (ex: « Pack Chaussettes »)
3 price-new float ✅ Oui Prix de vente final utilisé pour le calcul
4 price-old float ❌ Non Prix avant remise pour affichage marketing
📤 INTERACTIONS & SORTIES
🖱️ Événements Utilisateur
✅ Clic sur [.buy-btn] → Calcule le nouveau total, met à jour le DOM, désactive le bouton et change son style en « Ajouté ».
✅ Survol des Cards → Effet de translation verticale (translateY(-5px)) pour un feedback visuel premium.
✅ Dépassement de seuil → Si le « Reste à vivre » descend en dessous de 200€, la couleur du texte passe du vert à l’orange (text-warning).
✅ Bouton Réinitialiser → Recharge la page pour remettre les compteurs à zéro.
🧱 STRUCTURE DU FICHIER — DOM
dashboard_budget_accessoires_style.html
📌
: Métadonnées, polices élégantes (serif/sans-serif) et styles personnalisés (Sticky budget, styles de prix).📌
🏗️ En-tête : Titre principal « Garde-Robe Annuelle » et rappel du budget.
🏗️ Section Gauche (.col-lg-8) : Grille de produits (.card) contenant badges de soldes, prix barrés et boutons d’action.
🏗️ Section Droite (.col-lg-4) : Panneau de simulation financière avec position sticky (reste visible au défilement).
📌