Fiche Descriptive Complète : Garde-Robe Famille
🔷 INFORMATIONS GÉNÉRALES
Champ Détail
Nom du template Garde_Robe_Famille_Neumorphisme.html
Version 1.0.0
Date de création 19/03/2026
Auteur / Designer Refoia Jeremy Tech
Type de page Dashboard de Gestion Budgétaire / Micro-App
Objectif principal Suivre un budget vestimentaire familial via une interface Neumorphique interactive.
🎯 DESCRIPTION FONCTIONNELLE
📌 Que fait ce template ?
Ce template est une interface de gestion de budget dédiée à la garde-robe familiale. Il utilise le style de design Neumorphisme (Soft UI) pour créer une expérience tactile et moderne. L’utilisateur peut :
Visualiser son budget initial, les dépenses et le reste à vivre en temps réel.
Ajouter des « Packs Famille » prédéfinis (chaussettes, ceintures, etc.) via des boutons interactifs.
Suivre la progression de remplissage de catégories spécifiques (Hiver/Été) via des jauges SVG dynamiques.
📌 Public cible (Persona)
👤 Familles souhaitant organiser leurs achats saisonniers.
👤 Utilisateurs amateurs de design UI moderne et épuré.
👤 Développeurs Front-End cherchant un exemple d’implémentation de composants Neumorphiques en CSS pur.
⚙️ SPÉCIFICATIONS TECHNIQUES
🌐 Environnement & Compatibilité
Standard HTML : HTML5
Framework CSS : Aucun (CSS Pur avec Variables natives :root)
Framework JS : Vanilla JS (Logique de calcul intégrée)
Style Design : Neumorphisme (Ombres portées $9px$, $16px$ et encastrées inset)
Responsive : ✅ Oui (Grid Layout avec auto-fit)
📦 Dépendances / Assets
Polices : ‘Segoe UI’, sans-serif (Système).
Logique : Scripts internes pour la mise à jour du DOM et le calcul budgétaire.
📥 ENTRÉES — CONTENU DYNAMIQUE
# Nom de la variable Type Obligatoire Description
1 totalBudget int ✅ Oui Budget de départ (défaut: 800€)
2 price int ✅ Oui Prix de l’article ajouté via updateBudget()
3 category str ❌ Non Nom de la catégorie pour les logs/alertes
📤 INTERACTIONS & SORTIES
🖱️ Événements Utilisateur
Clic sur [Ajouter] : Déclenche la fonction updateBudget(), déduit le prix du reste à vivre et anime la barre de progression.
Hover/Active sur Boutons : Transition d’ombre (effet d’enfoncement au clic via box-shadow: inset).
Dépassement de budget : Alerte système alert() si la dépense excède le solde restant.
🧱 STRUCTURE DU FICHIER — DOM
Garde_Robe_Famille_Neumorphisme.html
│
├── 📌
(Styles :root, Neumorphic Cards, Gauges)│
└── 📌
│
└── 🏗️
│
├── 🧱
│ └── .budget-info (Initial / Dépensé / Reste)
│
├── 🧱
│ └── .grid
│ └── .item (Boutons : Chaussettes, Ceintures, Bonnets)
│
└── 🧱
├── .gauge-container (Vêtements Hiver – Jauge SVG)
└── .gauge-container (Vêtements Été – Jauge SVG)
🎨 CHARTE GRAPHIQUE & DESIGN SYSTEM
🎨 Palette de Couleurs (Neumorphisme)
CSS
:root {
–bg: #e0e5ec; /* Couleur de fond et des composants */
–shadow-light: #ffffff; /* Ombre claire (haut/gauche) */
–shadow-dark: #a3b1c6; /* Ombre sombre (bas/droite) */
–primary: #6d5dfc; /* Couleur d’accentuation (Violet) */
–accent: #f06d6d; /* Alertes et badges promo (Rouge) */
}
📐 Mise en Page — Layout
Grid : repeat(auto-fit, minmax(200px, 1fr)) pour une adaptation fluide des produits.
Border-radius : $20px$ à $30px$ pour l’effet « soft ».
🧪 TESTS & VALIDATION
# Cas de test Action Résultat attendu Statut
1 Ajout produit Cliquer sur « Ajouter » Budget « Dépensé » augmente, « Reste » diminue ✅
2 Limite Budget Acheter > 800€ Alerte « Budget dépassé ! » s’affiche ✅
3 Animation Cliquer sur Ajouter La barre de progression glisse vers la droite ✅
4 Responsive Réduire la fenêtre Les cards de produits passent à la ligne ✅
📝 EXEMPLE D’INTÉGRATION JAVASCRIPT
JavaScript
function updateBudget(price, category) {
if(currentSpent + price <= totalBudget) { currentSpent += price; // Mise à jour visuelle des montants // Calcul du % pour la jauge SVG let winterProgress = Math.min((currentSpent / totalBudget) * 100, 100); document.getElementById('bar-winter').style.width = winterProgress + "%"; } } 📌 Fiche générée par — Agent IA Refoia Jeremy Tech 🔖 Usage : Documentation interne — Template Neumorphisme V1
Avis
Il n’y a pas encore d’avis.