Fiche Descriptive du Code
Nom du Projet : Catalogue de Produits – FootFashion
Type : Page Web HTML/CSS/JavaScript
Technologies Utilisées : HTML5, Tailwind CSS, Font Awesome, JavaScript (Vanilla)
Objectif : Créer un catalogue interactif de produits de mode (chaussures, baskets, chaussettes) avec filtres, tri, mode sombre, et affichage des détails des produits dans une modale.
Type : Page Web HTML/CSS/JavaScript
Technologies Utilisées : HTML5, Tailwind CSS, Font Awesome, JavaScript (Vanilla)
Objectif : Créer un catalogue interactif de produits de mode (chaussures, baskets, chaussettes) avec filtres, tri, mode sombre, et affichage des détails des produits dans une modale.
Structure et Fonctionnalités Principales
-
Structure HTML :
-
En-tête (Header) : Contient le logo (icône de chaussure) et le nom « FootFashion ».
-
Contenu Principal (Main) :
-
Filtres : Panneau de filtres (type de produit, marque, taille, couleur, prix) avec une version mobile (bouton toggle).
-
Grille de Produits : Affichage des produits en grille (responsive : 1 à 4 colonnes selon la taille de l’écran).
-
Tri : Options de tri par prix (croissant/décroissant) et nom (A-Z/Z-A).
-
-
Modale de Détails : Affiche les détails d’un produit (images, description, couleurs, tailles, vidéo si disponible) avec zoom sur l’image principale.
-
Mode Sombre : Détection automatique du thème sombre via prefers-color-scheme et bascule dynamique des styles.
-
-
Styles (Tailwind CSS) :
-
Utilisation de Tailwind CSS via CDN pour un design responsive et moderne.
-
Configuration personnalisée avec des couleurs primaires (#5D5CDE, #4847B8) et prise en charge du mode sombre (darkMode: ‘class’).
-
Classes utilitaires pour les layouts (flex, grid), espacements, ombres, transitions, et bordures.
-
Icônes stylisées avec Font Awesome (ex. : icônes de filtre, vidéo, fermeture).
-
-
JavaScript :
-
Données des Produits : Tableau statique products contenant 12 produits (baskets, chaussures, chaussettes) avec leurs attributs (nom, type, marque, prix, tailles, couleurs, description, images, vidéo).
-
Filtres :
-
Filtres par type, marque, taille, couleur (checkboxes) et prix (sliders).
-
Gestion des filtres actifs via l’objet activeFilters.
-
Mise à jour dynamique de la grille après chaque modification des filtres.
-
-
Tri : Tri des produits selon les critères sélectionnés dans une liste déroulante.
-
Affichage des Produits :
-
Génération dynamique des cartes de produits avec image principale, marque, nom, prix, et aperçu des couleurs.
-
Images générées via une fonction generateImage utilisant Canvas pour créer des placeholders (simulant des images réelles).
-
Vidéos simulées via generateVideoPlaceholder.
-
-
Modale de Détails :
-
Affichage des images (avec miniatures cliquables), description, prix, couleurs et tailles.
-
Fonctionnalité de zoom sur l’image principale.
-
Gestion des sélections de couleur et taille avec mise à jour visuelle.
-
-
Interactivité :
-
Gestion des événements pour les filtres, le tri, l’affichage des filtres sur mobile, et la fermeture des modales.
-
Réinitialisation des filtres via un bouton dédié.
-
-
Mode Sombre : Bascule automatique des classes CSS en fonction du thème système.
-
-
Responsive Design :
-
Grille de produits adaptative (1 colonne sur mobile, jusqu’à 4 sur grand écran).
-
Filtres masqués par défaut sur mobile, affichés via un bouton toggle.
-
Modale scrollable avec hauteur maximale de 90vh pour éviter les débordements.
-
- En licence MIT
Avis
Il n’y a pas encore d’avis.