Zero_Gaspillage_Budget_Famille

Fiche Descriptive Complète : Zéro Gaspillage

🔷 INFORMATIONS GÉNÉRALES

Champ Détail

Nom du template Zero_Gaspillage_Budget_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 Sensibiliser à la consommation durable (seconde main) et simuler l’impact sur le budget familial.

🎯 DESCRIPTION FONCTIONNELLE

📌 Que fait ce template ?

Ce template est un outil de gestion budgétaire orienté « éco-responsabilité ». Il permet à l’utilisateur de :

Visualiser une sélection de produits premium issus de la seconde main (chaussures, manteau, montre).

Consulter un calendrier d’achat structuré pour éviter les achats impulsifs.

Simuler en temps réel ses dépenses grâce à un widget interactif « Budget Famille » qui calcule le « Reste à Vivre ».

📌 Public cible (Persona)

👤 Familles soucieuses de leur budget cherchant à optimiser leurs dépenses.

👤 Consommateurs éco-responsables privilégiant la qualité et la durabilité (cuir, laine, acier).

👤 Utilisateurs en quête d’organisation via une planification temporelle des achats.

⚙️ SPÉCIFICATIONS TECHNIQUES

🌐 Environnement & Compatibilité

Élément Valeur

Standard HTML HTML5

Framework CSS Bootstrap 5.3.0

Framework JS Vanilla JS (ES6+)

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 Le montant total alloué (défini à 450€ par défaut).

2 data-price int ✅ Oui Prix de l’article rattaché à chaque checkbox.

3 badge-essential str ❌ Non Label de qualité/matière (ex: « Laine Vierge »).

📤 INTERACTIONS & SORTIES

🖱️ Événements Utilisateur

✅ Check/Uncheck Article → Mise à jour instantanée du montant dépensé et du solde restant.

✅ Seuil de vigilance → Le texte du « Reste à Vivre » passe en rouge (text-danger) si le solde tombe en dessous de 50€.

✅ Hover sur Cards → Effet d’élévation (translateY(-5px)) et assombrissement de la bordure.

📂 Sorties de données

Affichage dynamique : #spent-amount (Somme des articles cochés).

Calcul de solde : #remaining-life (Budget Initial – Dépenses).

🧱 STRUCTURE DU FICHIER — DOM

Zero_Gaspillage_Budget_Famille.html

📌 : Métadonnées, Google Fonts, Bootstrap CDN, Styles personnalisés (CSS interne).

📌

🏗️

: Titre principal avec mise en évidence « Zéro Gaspillage ».

🏗️

(row g-4)

🧱 Section Articles (col-lg-8) :

Grid de Cards Bootstrap (Articles Premium).

Table responsive (Calendrier d’achats).

🧱 Sidebar Budget (col-lg-4) :

Widget .budget-tracker (sticky top) contenant les compteurs JS.

📌 : Logique de calcul en Vanilla JS avec écouteurs d’événements change.

🎨 CHARTE GRAPHIQUE

🎨 Palette de Couleurs

Primary (Text/Background) : #000000 (Noir pur pour le tracker et les titres).

Secondary : #6c757d (Gris pour les sous-titres).

Alert : #dc3545 (Rouge Bootstrap pour le budget faible).

Background : #f8f9fa (Gris très clair pour le fond de page).

🔤 Typographie

Famille : ‘Inter’, sans-serif.

Style : Minimaliste, moderne, focus sur la lisibilité des chiffres.

🧪 TESTS & VALIDATION

# Cas de test Résultat attendu Statut

1 Sélection article Le montant dépensé s’incrémente de la valeur data-price. ✅ Validé

2 Désélection article Le montant décroît et le reste à vivre remonte. ✅ Validé

3 Alerte budget Le texte devient rouge si reste < 50€. ✅ Validé 4 Responsive Le tracker de budget passe sous la liste sur mobile. ✅ Validé 📌 INSTRUCTIONS SPÉCIALES Sticky Sidebar : Le widget de budget utilise position: sticky, il reste donc visible lors du défilement de la liste d'articles sur desktop. Sémantique : Utilisation de pour les prix et de pour les étapes clés du calendrier.

Performance : Aucun framework lourd (React/Vue), le script JS fait moins de 20 lignes pour une rapidité d’exécution maximale.