donnees_20260325_150717

📋 Fiche Descriptive : Planification Annuelle – Famille Nombreuse

🔷 INFORMATIONS GÉNÉRALES

Champ Détail

Nom du template planification_annuelle_famille_nombreuse.html

Version 1.0.0

Date de création 25/03/2026

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

Type de page Dashboard de Calcul Budgétaire / Interface E-commerce

Objectif principal Simuler des achats groupés et suivre un budget annuel de 800€

🎯 DESCRIPTION FONCTIONNELLE

📌 Que fait ce template ?

Ce template est un outil interactif de gestion budgétaire. Il permet à une famille de visualiser des promotions sur des articles de sport et techniques, de saisir des quantités, et de voir instantanément l’impact sur leur budget annuel restant via une barre de progression dynamique.

📌 Public cible (Persona)

👤 Familles nombreuses cherchant à optimiser leurs achats de gros.

👤 Gestionnaires de budget domestique privilégiant les remises par lot.

👤 Utilisateurs souhaitant un comparatif entre prix public et prix négocié.

⚙️ SPÉCIFICATIONS TECHNIQUES

🌐 Environnement & Compatibilité

Standard HTML : HTML5

Framework CSS : Bootstrap 5.3.0

Framework JS : Vanilla JS (Logique de calcul temps réel)

Responsive : ✅ Oui (Grille Bootstrap col-lg-8 / col-lg-4)

📦 Dépendances / Assets

HTML

 

📥 ENTRÉES — CONTENU DYNAMIQUE

# Nom de la variable Type Obligatoire Description

1 INITIAL_BUDGET int ✅ Oui Capital de départ (fixé à 800€ dans le script)

2 data-price float ✅ Oui Prix unitaire après remise stocké dans les inputs

3 qty int ❌ Non Quantité saisie par l’utilisateur pour chaque article

📤 INTERACTIONS & SORTIES

🖱️ Événements Utilisateur

✅ Saisie (input) sur les champs quantité → Recalcul automatique du total.

✅ Update UI → Changement de couleur de la barre de budget (Vert > Orange > Rouge).

✅ Calcul du « Reste à vivre » → Soustraction dynamique : Budget−∑(Prix×Quantiteˊ).

🧱 STRUCTURE DU FICHIER — DOM

planification_annuelle_famille_nombreuse.html

📌: Meta, liens Bootstrap et styles personnalisés (CSS Variables).

📌

🏗️

: Titre principal et rappel du budget global.🏗️

(Row)

🧱 Section Sport & Technique (col-lg-8)

Cards « Promo » (Baskets, Parka, Legging).

Table de comparaison (Prix Public vs Négocié).

🧱 Sidebar Budget (col-lg-4)

card-sticky : Simulateur de budget flottant.

Progress Bar dynamique.

📌