Optimiseur_de_Budget_Soldes_Famille

Fiche Descriptive Complète

🔷 INFORMATIONS GÉNÉRALES

Champ Détail

Nom du template Optimiseur_de_Budget_Soldes_Famille.html

Version 1.0.0

Date de création 19/03/2026

Auteur / Designer Gemini (Refoia Jeremy Tech Style)

Type de page Dashboard Interactif / Calculateur de Budget

Objectif principal Simuler des achats durant les soldes en gérant un budget fixe de 450€

🎯 DESCRIPTION FONCTIONNELLE

📌 Que fait ce template ?

Ce template est un outil de simulation budgétaire « Single Page ». Il permet à l’utilisateur de visualiser une sélection de produits « Premium » avec des réductions appliquées (-28%). L’interface interactive calcule en temps réel le total du panier et le « Reste à Vivre », avec une barre de progression visuelle changeant de couleur selon l’épuisement du budget.

📌 Public cible (Persona)

👤 Familles cherchant à optimiser leurs achats durant les soldes.

👤 Utilisateurs soucieux de leur budget souhaitant éviter les dépassements.

👤 Acheteurs « Qualité » privilégiant la durabilité (cuir, laine, acier).

⚙️ SPÉCIFICATIONS TECHNIQUES

🌐 Environnement & Compatibilité

Élément Valeur

Standard HTML HTML5

Framework CSS Bootstrap 5.3.0 (via CDN)

Framework JS Vanilla JS (ES6+)

Responsive ✅ Oui — Grille Bootstrap native (Col-lg-8 / Col-lg-4)

📦 Dépendances / Assets

HTML

📥 ENTRÉES — CONTENU DYNAMIQUE

# Nom de la variable Type Obligatoire Description

1 budgetInitial float ✅ Oui Valeur de départ (par défaut 450.00)

2 data-price float ✅ Oui Attribut HTML stockant le prix remisé par article

3 totalActuel float ✅ Oui Accumulateur JS pour le panier

📤 INTERACTIONS & SORTIES

🖱️ Événements Utilisateur

✅ Clic sur [Ajouter] : Ajoute le prix au total, désactive le bouton, change le style en « success » et met à jour l’UI.

✅ Calcul Temps Réel : Mise à jour immédiate du « Reste à Vivre ».

✅ Feedback Visuel : La barre de progression passe du vert au orange (<50%) puis au rouge (<20%). ✅ Réinitialisation : Fonction resetBudget() rechargeant la page pour vider le panier. 🧱 STRUCTURE DU FICHIER — DOM Optimiseur_de_Budget_Soldes_Famille.html 📌 : Configuration Meta, Styles personnalisés (CSS Variables pour –bs-primary et –bs-accent).

📌

🏗️