Dashboard_Shopping_Premium_Soldes_2026

Fiche Descriptive Complète

🔷 INFORMATIONS GÉNÉRALES

Champ Détail

Nom du template Dashboard_Shopping_Premium_Soldes_2026.html

Version 1.0.0

Date de création 19 Mars 2026

Auteur / Designer Refoia Jeremy Tech (Analyse par Gemini)

Type de page Dashboard de Personal Shopping / E-commerce Privé

Objectif principal Visualiser une sélection d’articles soldés et gérer un budget restant (« Reste à Vivre »).

🎯 DESCRIPTION FONCTIONNELLE

📌 Que fait ce template ?

Ce template est un tableau de bord d’achat premium au design minimaliste et élégant. Il permet à un utilisateur privilégié de consulter une sélection de produits de luxe (Derbies, Manteau, Montre) bénéficiant d’une remise uniforme de -54%. L’interface calcule dynamiquement (visuellement) l’impact des achats sur un budget initial de 1 200,00€, affichant un reliquat précis pour guider la décision d’achat finale.

📌 Public cible (Persona)

👤 Client VIP/Privilège : Souhaitant une expérience d’achat épurée et exclusive.

👤 Analyste de style : Utilisant l’outil pour présenter des sélections budgétées.

👤 Acheteur compulsif raisonné : Ayant besoin de voir son « reste à vivre » avant de valider un panier.

⚙️ SPÉCIFICATIONS TECHNIQUES

🌐 Environnement & Compatibilité

Standard HTML : HTML5

Framework CSS : Bootstrap 5.3.0 (via CDN)

Typographie : Google Fonts (Playfair Display pour le luxe, Inter pour la lisibilité).

Responsive : ✅ Oui (Grille Bootstrap col-lg-8, col-md-4).

📦 Dépendances / Assets

HTML

📥 ENTRÉES — CONTENU DYNAMIQUE

# Nom de la variable Type Obligatoire Description

1 discount_rate string ✅ Oui Taux de solde affiché (ex: « -54% »).

2 product_list array ✅ Oui Liste des articles (Nom, image, prix initial, prix soldé).

3 budget_initial float ✅ Oui Budget total alloué (ex: 1200.00).

4 total_spent float ✅ Oui Somme des articles sélectionnés.

5 quality_index int ❌ Non Valeur de la barre de progression (0-100).

🧱 STRUCTURE DU FICHIER — DOM

Dashboard_Shopping_Premium_Soldes_2026.html

: Configuration SEO, styles personnalisés (classes .premium-card, .text-gold, .bg-dark-premium).

(Header implicite) : Titre « Sélection Privilège » avec typographie Serif.

(Row principale)

Section Gauche (8 col) : Grille de cards produits (Image, Badge, Titre, Prix barré).

Section Droite (4 col) :

Card « Reste à Vivre » : Graphique circulaire SVG (Progress ring) + Récapitulatif financier.

Card « Priorités » : Indicateurs de qualité via barres de progression Bootstrap.

🎨 CHARTE GRAPHIQUE

Couleurs Clés :

#b08d57 (Gold) : Utilisé pour les prix et les éléments d’accentuation luxe.

#1a1a1a (Dark Premium) : Fond du module de paiement/récapitulatif.

#d63384 (Pink Sale) : Badge de réduction pour attirer l’œil.

Effets :

Transitions transform: translateY(-5px) au survol des produits.

Ombres portées douces (box-shadow: 0 10px 30px rgba(0,0,0,0.05)).

🧪 TESTS & VALIDATION

# Cas de test Action Résultat attendu

1 Responsive Mobile Largeur < 768px Les cards produits s'empilent verticalement. 2 Calcul Budget Somme des prix 207,00 + 409,40 + 552,00 = 1 168,40€ (Correct). 3 Visibilité SVG Charger la page Le cercle de progression "Reste à vivre" est visible. 4 Accessibilité Lecteur d'écran Les images possèdent des attributs alt (Derbies, Manteau, Montre). 📌 INSTRUCTIONS SPÉCIALES POUR L'IA Maintenance : Pour modifier le taux de remise, mettre à jour la variable CSS/Texte -54% et recalculer les spans text-gold. SVG Progress : Le stroke-dashoffset du cercle (actuellement 244) doit être lié dynamiquement au ratio (Reste à vivre / Budget initial).