Zero_Gaspi_Achats_Groupes

Fiche Descriptive Complète : Zéro Gaspi

🔷 INFORMATIONS GÉNÉRALES

Champ Détail

Nom du template Zero_Gaspi_Achats_Groupes.html

Version 1.0.0

Date de création 19 Mars 2026

Auteur / Designer Gemini (Refoia Jeremy Tech Style)

Type de page Dashboard d’Achat Solidaire / Boutique Seconde Main

Objectif principal Permettre aux familles de visualiser et valider un panier d’achats groupés pour réduire le gaspillage.

🎯 DESCRIPTION FONCTIONNELLE

📌 Que fait ce template ?

Ce template propose une interface de gestion d’achats groupés focalisée sur la seconde main. Il permet de suivre un budget en temps réel via une barre de progression dynamique, de sélectionner des lots de produits (accessoires) via des cartes interactives et de visualiser l’état d’avancement des besoins par catégorie (Vêtements, Linge de maison).

📌 Public cible (Persona)

👤 Familles nombreuses cherchant à optimiser leur budget.

👤 Associations éco-responsables organisant des groupements d’achats.

👤 Utilisateurs mobiles effectuant des achats rapides en déplacement.

⚙️ SPÉCIFICATIONS TECHNIQUES

🌐 Environnement & Compatibilité

Standard HTML : HTML5 sémantique.

Framework CSS : Tailwind CSS (via CDN).

Framework JS : Vanilla JS (Logique de progression intégrée en attributs de style).

Responsive : ✅ Oui — Optimisé avec des grilles adaptatives (grid-cols-1 md:grid-cols-3).

📦 Dépendances / Assets

HTML

📥 ENTRÉES — CONTENU DYNAMIQUE

# Nom de la variable Type Obligatoire Description

1 budget_total int ✅ Oui Budget max alloué (ex: 800€)

2 budget_restant int ✅ Oui Montant restant après calcul

3 items_packs array ✅ Oui Liste des lots (Chaussettes, Ceintures, etc.)

4 progress_needs object ✅ Oui Pourcentages d’atteinte des objectifs par rayon

📤 INTERACTIONS & SORTIES

🖱️ Événements Utilisateur

Sélection de lot : Checkbox pour inclure/exclure un pack.

Ajout rapide : Bouton « + Ajouter » sur chaque carte produit.

Validation : Bouton principal « Valider le panier » avec effet de survol et scale.

🧱 STRUCTURE DU FICHIER — DOM

Zero_Gaspi_Achats_Groupes.html

📌 : Configuration UTF-8, Viewport et injection Tailwind.

📌 : Fond gris clair (bg-gray-50).

🏗️

: Sticky, contient le titre et le Widget Budget (barre de progression jaune sur fond émeraude).

🏗️

:

🧱

(Rayon Accessoires) : Grille de cards avec bordures pointillées (border-dashed) et badges « PRIX GROS » animés.

🧱

(Récapitulatif) : Card blanche massive contenant des barres de progression horizontales pour les besoins spécifiques (Vêtements/Linge).

🏗️