donnees_20260325_145807

49,00 

Simuler un panier d’achat de luxe et calculer le reste à vivre budgétaire.

UGS : donnees_20260325_145807 Catégorie :

📋 Fiche Descriptive : Template « L’Archive »

🔷 INFORMATIONS GÉNÉRALES

Champ Détail

Nom du template Mode Luxe Seconde Main.html

Version 1.0.0

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

Type de page Dashboard Interactif / E-commerce Curated

Objectif principal Simuler un panier d’achat de luxe et calculer le reste à vivre budgétaire.

🎯 DESCRIPTION FONCTIONNELLE

📌 Que fait ce template ?

Ce template est une interface de Personal Shopping dédiée au luxe de seconde main. Il utilise un design Glassmorphism (effets de transparence et de flou) pour offrir une expérience utilisateur haut de gamme. L’utilisateur peut sélectionner des pièces iconiques, voir l’impact immédiat sur son budget via un calculateur dynamique, et visualiser sa stratégie d’acquisition sur un calendrier mensuel (« The Drop Calendar »).

📌 Public cible (Persona)

👤 Collectionneurs de mode cherchant des pièces d’archives (ex: Balenciaga 2018).

👤 Acheteurs éco-responsables privilégiant la circularité de luxe.

👤 Utilisateurs soucieux de leur budget souhaitant planifier des achats importants.

⚙️ SPÉCIFICATIONS TECHNIQUES

🌐 Environnement & Compatibilité

Élément Valeur

Standard HTML HTML5 Sémantique

Framework CSS CSS3 Pur (Custom Properties / Variables)

Framework JS Vanilla JS (Navigation DOM & Logique de calcul)

Design Style Glassmorphism & Dark Mode

Responsive ✅ Oui (Breakpoints à 992px et 768px)

📦 Dépendances / Assets

FontAwesome (6.4.0) : Pour l’iconographie technique et luxe.

Google Fonts :

Playfair Display (Titres – Serif luxe).

Inter (Corps de texte – Sans-serif moderne).

📥 ENTRÉES — CONTENU DYNAMIQUE

# Variable Type Obligatoire Description

1 budget int ✅ Budget total de l’utilisateur (Défaut: 2500€).

2 items-table array ✅ Liste des articles (Nom, Prix, État, Icône).

3 exclusivity-index int ❌ Score calculé selon la rareté des pièces choisies.

🧱 STRUCTURE DU FICHIER — DOM

Mode Luxe Seconde Main.html

📌: Configuration des variables CSS (:root) pour le thème Midnight/Gold.

📌:

🏗️

: Logo textuel avec effet de calque + Affichage du budget global.🏗️

:
🧱

Sport & Technique : Tableau des articles avec boutons de sélection interactifs.🧱

Calcul du Reste à Vivre : Module JS calculant Budget – Dépenses = Solde.🧱

The Drop Calendar : Planning hebdomadaire réactif aux achats.🏗️

: Notes sur la circularité et copyright.🎨 CHARTE GRAPHIQUE & DESIGN SYSTEM

🎨 Palette de Couleurs (Tokens)

CSS

:root {

–midnight-blue: #0F172A; /* Fond Profond */

–accent-gold: #D4AF37; /* Luxe & Titres */

–accent-blue: #3B82F6; /* Technique & Boutons */

–glass-white: rgba(255, 255, 255, 0.05); /* Effet Verre */

}

📐 Mise en Page

Layout : Centré (max 1200px) avec un arrière-plan en dégradé radial animé visuellement par CSS.

Cards : backdrop-filter: blur(15px) pour l’effet de profondeur.

🧪 TESTS & VALIDATION (Checklist)

# Cas de test Action Résultat attendu

1 Calculateur Cliquer sur « Sélectionner » Le « Solde Restant » diminue instantanément.

2 Validation Sélectionner la Parka La Semaine 1 du calendrier passe en statut « Achetée ».

3 Overbudget Dépenser > Budget L’indicateur de statut devient rouge (« Limite atteinte »).

4 Responsive Vue Mobile Le tableau devient scrollable horizontalement sans casser le layout.

📝 EXEMPLE D’INTÉGRATION JAVASCRIPT

La logique de mise à jour repose sur une fonction updateBudgetDisplay() qui synchronise le DOM à chaque interaction :

JavaScript

function updateBudgetDisplay() {

totalExpenses = selectedItems.reduce((sum, item) => sum + item.price, 0);

const remaining = budget – totalExpenses;

remainingBudgetElement.textContent = formatCurrency(remaining);

updateStatusIndicator(remaining); // Change la couleur du badge

}

📌 Fiche générée par — Agent IA Refoia Jeremy Tech

Usage : Documentation Front-End / Template L’Archive

Avis

Il n’y a pas encore d’avis.

Soyez le premier à laisser votre avis sur “donnees_20260325_145807”

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *