🔥 Je te partage le prompt exact que j’ai utilisé pour créer un site e-commerce 100 % fonctionnel avec GPT‑4.1:

### Objectif du projet

Créer un site e-commerce pour vendre des t-shirts, en utilisant HTML, CSS via un CDN (Bootstrap) sur un seul fichier index.html, et JavaScript pour les fonctionnalités interactives telles que la gestion du panier. Le site doit être performant, responsive, et offrir une expérience utilisateur fluide.

### 1. Structure HTML Initiale

Le site doit comporter :

- **Barre de navigation (navbar) :**

- Nom de la marque.

- Liens vers les sections principales (Accueil, Produits, A propos, Contact).

- Compteur de panier mis à jour en temps réel.

- **Section héros :**

- Image de fond avec une résolution minimale de 1920x1080. (images/header.png)

- Appel à l'action Bouton ("Achetez Maintenant").

- **Grille de 6 produits :**

- Chaque produit doit afficher :

- Une image (résolution minimale de 300x300).

- Un nom de produit.

- Un prix.

- Un bouton "Ajouter au Panier".

Url: images/P1.png

Url: images/P2.png

Url: images/P3.png

Url: images/P4.png

Url: images/P5.png

Url: images/P6.png

- **Pied de page :**

- Informations de contact de base (adresse, téléphone, e-mail).

- Liens vers les réseaux sociaux.

### 2. Stylisation (CSS via CDN)

Utilisation de Bootstrap via CDN pour la grille responsive et les composants. Ajout de CSS personnalisé pour :

- **Barre de navigation (navbar)  :** Par défaut noir

ajoutez un soulignement animé, un léger changement de fond, ou un petit déplacement vertical.

Effet : La navbar  sombre commence transparente puis devient opaque (avec une couleur de fond ou un flou) et/ou réduit légèrement sa hauteur lorsque l'utilisateur commence à faire défiler la page.

- **Couleurs :**

- Palette de couleurs définies (ex. : #333 pour le texte, #eee pour le fond, #007bff pour les boutons).

- **Espacements (remplissage/marge) :**

- Utilisation de marges et de paddings spécifiques pour une mise en page cohérente.

- **Image de fond de la section hero :**

- L'image de fond doit couvrir toute la section et être centrée.

Lien: images/header.png

- Overlay de couleur : Ajouter un overlay semi-transparent pour améliorer la lisibilité du texte sur l'image ou

- **Effet survol sur les cartes de produits :**

- Changement de couleur de fond et augmentation de la taille du bouton de 10% lors du survol.

Card avec overlay de texte.

Card avec coins arrondis

- Animation de bouton : Ajouter une animation sur le bouton "Ajouter au Panier" pour le rendre plus attractif au survol

- **Section à propos:**

Citation ou phrase d’accroche

Bloc de texte en italique

### 3. Fonctionnalités JavaScript

Requis pour la fonctionnalité du panier :

- **Ajout au panier :**

Action : Lorsqu'un utilisateur clique sur "Ajouter au Panier", le produit est ajouté au panier et le compteur du panier est mis à jour en temps réel.

Persistance : Les articles doivent être enregistrés dans le localStorage pour persister entre les sessions.

Tableau de stockage : Utiliser un tableau pour stocker les produits dans le panier et mettre à jour le compteur en conséquence.

Suppression des produits du panier :

Action : Permettre aux utilisateurs de supprimer les articles du panier.

Persistance : Mettre à jour le tableau de stockage et le localStorage en conséquence.

Affichage du panier :

Modal : Inclure une section où les utilisateurs peuvent voir les articles ajoutés à leur panier, supprimer des articles et vider le panier.

Composants : Utiliser un Bootstrap modal pour afficher le contenu du panier de manière interactive et conviviale.

- **Mise à jour du compteur :**

- Le compteur dans la barre de navigation doit refléter le nombre total d'articles dans le panier.

### Critères de performance

- **Temps de chargement :**

- Le site doit se charger en moins de 2 secondes sur une connexion 4G.

- **Compatibilité :**

- Le site doit être compatible avec les dernières versions de Chrome, Firefox, Safari et Edge.

- **Accessibilité :**

- Le site doit respecter les normes d'accessibilité WCAG 2.1 niveau AA.

### Conclusion

Je veux le code complet pour créer le site e-commerce de t-shirts