Tailwind Css
E Commerce
Template
Responsive
Promotions
Badges
Interactif
Boutique
Html
Css
Troisième variante Tailwind CSS pour boutique en ligne avec grille avancée, badges promotions, skeleton loader et composants interactifs.
<!DOCTYPE html>
<html lang="fr" class="scroll-smooth">
<head>
<meta charset="UTF-8" />
<meta name="copyright" content="AngularForAll" />
<meta name="author" content="AngularForAll" />
<meta name="robots" content="noindex, nofollow" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="Cache-Control" content="public, max-age=604800" />
<title>Template E Commerce Tailwindcss 2026 04291705 | AngularForAll</title>
<!-- Tailwind CSS CDN -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- Configuration Tailwind personnalisée -->
<script>
tailwind.config = {
theme: {
extend: {
animation: {
'float': 'float 6s ease-in-out infinite',
'glow': 'glow 2s ease-in-out infinite alternate',
'slide-up': 'slideUp 0.5s ease-out',
'fade-in': 'fadeIn 0.5s ease-out',
'bounce-slow': 'bounce 3s infinite',
'pulse-soft': 'pulseSoft 2s cubic-bezier(0.4, 0, 0.6, 1) infinite',
},
keyframes: {
float: {
'0%, 100%': { transform: 'translateY(0px)' },
'50%': { transform: 'translateY(-20px)' },
},
glow: {
'0%': { boxShadow: '0 0 5px rgba(168, 85, 247, 0.5)' },
'100%': { boxShadow: '0 0 20px rgba(168, 85, 247, 0.8)' },
},
slideUp: {
'0%': { transform: 'translateY(30px)', opacity: '0' },
'100%': { transform: 'translateY(0)', opacity: '1' },
},
fadeIn: {
'0%': { opacity: '0' },
'100%': { opacity: '1' },
},
pulseSoft: {
'0%, 100%': { opacity: '1' },
'50%': { opacity: '0.7' },
},
}
}
}
}
</script>
<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
</head>
<body class="bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900 min-h-screen text-gray-100">
<!-- Navigation Glassmorphism -->
<nav class="sticky top-0 z-50 backdrop-blur-lg bg-white/10 border-b border-white/10">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex items-center justify-between h-16">
<!-- Logo -->
<div class="flex items-center space-x-3">
<div class="w-10 h-10 bg-gradient-to-br from-purple-500 to-pink-500 rounded-xl flex items-center justify-center animate-glow">
<i class="fas fa-cube text-white text-xl"></i>
</div>
<span class="text-2xl font-bold bg-gradient-to-r from-purple-400 to-pink-400 bg-clip-text text-transparent">
AetherStore
</span>
</div>
<!-- Desktop Menu -->
<div class="hidden md:flex items-center space-x-8">
<a href="#" class="text-gray-300 hover:text-purple-400 transition-colors duration-300 font-medium">Accueil</a>
<a href="#products" class="text-gray-300 hover:text-purple-400 transition-colors duration-300 font-medium">Produits</a>
<a href="#" class="text-gray-300 hover:text-purple-400 transition-colors duration-300 font-medium">Collections</a>
<a href="#" class="text-gray-300 hover:text-purple-400 transition-colors duration-300 font-medium">À propos</a>
</div>
<!-- Actions -->
<div class="flex items-center space-x-4">
<!-- Search -->
<div class="hidden lg:flex items-center bg-white/10 rounded-full px-4 py-2 border border-white/10 focus-within:border-purple-500 transition-all">
<i class="fas fa-search text-gray-400 mr-2"></i>
<input type="text" id="searchInput" placeholder="Rechercher..."
class="bg-transparent border-none outline-none text-white placeholder-gray-400 w-40 focus:w-60 transition-all duration-300">
</div>
<!-- Wishlist -->
<button class="relative text-gray-300 hover:text-purple-400 transition-colors">
<i class="fas fa-heart text-xl"></i>
<span class="absolute -top-2 -right-2 bg-pink-500 text-white text-xs rounded-full w-5 h-5 flex items-center justify-center">3</span>
</button>
<!-- Cart -->
<button onclick="openCart()" class="relative text-gray-300 hover:text-purple-400 transition-colors">
<i class="fas fa-shopping-bag text-xl"></i>
<span id="cartCount" class="absolute -top-2 -right-2 bg-purple-500 text-white text-xs rounded-full w-5 h-5 flex items-center justify-center">0</span>
</button>
<!-- Mobile Menu Toggle -->
<button id="mobileMenuToggle" class="md:hidden text-gray-300 hover:text-white" aria-label="Toggle Mobile Menu">
<i class="fas fa-bars text-xl"></i>
</button>
</div>
</div>
<!-- Mobile Menu -->
<div id="mobileMenu" class="hidden md:hidden pb-4 space-y-2">
<a href="#" class="block py-2 text-gray-300 hover:text-purple-400">Accueil</a>
<a href="#products" class="block py-2 text-gray-300 hover:text-purple-400">Produits</a>
<a href="#" class="block py-2 text-gray-300 hover:text-purple-400">Collections</a>
<a href="#" class="block py-2 text-gray-300 hover:text-purple-400">À propos</a>
<div class="flex items-center bg-white/10 rounded-full px-4 py-2 border border-white/10">
<i class="fas fa-search text-gray-400 mr-2"></i>
<input type="text" placeholder="Rechercher..." class="bg-transparent border-none outline-none text-white placeholder-gray-400 w-full">
</div>
</div>
</div>
</nav>
<!-- Hero Section avec géométrie -->
<section class="relative overflow-hidden py-20 lg:py-32">
<!-- Formes géométriques d'arrière-plan -->
<div class="absolute inset-0 overflow-hidden">
<div class="absolute -top-40 -right-40 w-80 h-80 bg-purple-500/20 rounded-full blur-3xl animate-float"></div>
<div class="absolute -bottom-40 -left-40 w-96 h-96 bg-pink-500/20 rounded-full blur-3xl animate-float" style="animation-delay: 2s;"></div>
<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-64 h-64 bg-blue-500/10 rounded-full blur-3xl animate-pulse-soft"></div>
</div>
<div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid lg:grid-cols-2 gap-12 items-center">
<!-- Texte -->
<div class="animate-slide-up">
<div class="inline-flex items-center bg-purple-500/20 rounded-full px-4 py-2 mb-6 border border-purple-500/30">
<span class="w-2 h-2 bg-green-400 rounded-full mr-2 animate-pulse"></span>
<span class="text-purple-300 text-sm">Nouvelle Collection Holographique</span>
</div>
<h1 class="text-5xl lg:text-7xl font-bold mb-6 leading-tight">
<span class="bg-gradient-to-r from-purple-400 via-pink-400 to-purple-400 bg-clip-text text-transparent">
Futur du Shopping
</span>
<br>
<span class="text-white">Est Arrivé</span>
</h1>
<p class="text-gray-300 text-lg mb-8 leading-relaxed">
Plongez dans une expérience d'achat immersive avec notre collection
de produits high-tech. Design innovant et qualité exceptionnelle.
</p>
<div class="flex flex-wrap gap-4">
<button onclick="document.getElementById('products').scrollIntoView({behavior: 'smooth'})"
class="group relative px-8 py-4 bg-gradient-to-r from-purple-600 to-pink-600 rounded-full font-semibold text-white overflow-hidden transition-all duration-300 hover:scale-105 hover:shadow-lg hover:shadow-purple-500/50">
<span class="relative z-10">Explorer la Collection</span>
<div class="absolute inset-0 bg-gradient-to-r from-pink-600 to-purple-600 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
</button>
<button class="px-8 py-4 border-2 border-purple-500/50 rounded-full font-semibold text-purple-300 hover:bg-purple-500/20 transition-all duration-300 backdrop-blur-sm">
<i class="fas fa-play mr-2"></i> Voir la Démo
</button>
</div>
<!-- Stats -->
<div class="grid grid-cols-3 gap-6 mt-12">
<div class="text-center">
<div class="text-3xl font-bold text-purple-400">50K+</div>
<div class="text-gray-400 text-sm">Clients</div>
</div>
<div class="text-center">
<div class="text-3xl font-bold text-pink-400">120+</div>
<div class="text-gray-400 text-sm">Produits</div>
</div>
<div class="text-center">
<div class="text-3xl font-bold text-blue-400">4.9</div>
<div class="text-gray-400 text-sm">Note Moyenne</div>
</div>
</div>
</div>
<!-- Image/Illustration -->
<div class="relative animate-float">
<div class="relative w-full h-96 lg:h-[500px] bg-gradient-to-br from-purple-600/30 to-pink-600/30 rounded-3xl border border-purple-500/30 backdrop-blur-sm flex items-center justify-center">
<i class="fas fa-shopping-bag text-9xl text-purple-400/50"></i>
<div class="absolute -top-4 -right-4 w-24 h-24 bg-yellow-400/20 rounded-full blur-xl animate-pulse-soft"></div>
<div class="absolute -bottom-4 -left-4 w-32 h-32 bg-pink-400/20 rounded-full blur-xl animate-pulse-soft" style="animation-delay: 1s;"></div>
</div>
</div>
</div>
</div>
</section>
<!-- Features en grille -->
<section class="py-12 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<div class="group bg-white/5 backdrop-blur-sm rounded-2xl p-6 border border-white/10 hover:border-purple-500/50 transition-all duration-500 hover:bg-white/10">
<div class="w-12 h-12 bg-gradient-to-br from-purple-500 to-pink-500 rounded-xl flex items-center justify-center mb-4 group-hover:scale-110 transition-transform duration-300">
<i class="fas fa-rocket text-white"></i>
</div>
<h3 class="text-lg font-semibold text-white mb-2">Livraison Express</h3>
<p class="text-gray-400">Livraison en 24h avec suivi en temps réel</p>
</div>
<div class="group bg-white/5 backdrop-blur-sm rounded-2xl p-6 border border-white/10 hover:border-purple-500/50 transition-all duration-500 hover:bg-white/10">
<div class="w-12 h-12 bg-gradient-to-br from-blue-500 to-cyan-500 rounded-xl flex items-center justify-center mb-4 group-hover:scale-110 transition-transform duration-300">
<i class="fas fa-shield-haltered text-white"></i>
</div>
<h3 class="text-lg font-semibold text-white mb-2">Paiement Sécurisé</h3>
<p class="text-gray-400">Transactions cryptées et protection avancée</p>
</div>
<div class="group bg-white/5 backdrop-blur-sm rounded-2xl p-6 border border-white/10 hover:border-purple-500/50 transition-all duration-500 hover:bg-white/10">
<div class="w-12 h-12 bg-gradient-to-br from-green-500 to-emerald-500 rounded-xl flex items-center justify-center mb-4 group-hover:scale-110 transition-transform duration-300">
<i class="fas fa-undo text-white"></i>
</div>
<h3 class="text-lg font-semibold text-white mb-2">Retour Gratuit</h3>
<p class="text-gray-400">30 jours pour changer d'avis, sans frais</p>
</div>
</div>
</section>
<!-- Section Produits -->
<section id="products" class="py-16 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<!-- Header -->
<div class="text-center mb-12">
<h2 class="text-4xl font-bold bg-gradient-to-r from-purple-400 to-pink-400 bg-clip-text text-transparent mb-4">
Produits Tendance
</h2>
<p class="text-gray-400 text-lg">Découvrez notre sélection exclusive</p>
</div>
<!-- Filtres -->
<div class="flex flex-wrap gap-4 mb-8 justify-center">
<button onclick="filterProducts('all')"
class="filter-btn px-6 py-2 rounded-full bg-purple-600 text-white font-medium hover:bg-purple-700 transition-all duration-300 transform hover:scale-105">
<i class="fas fa-th-large mr-2"></i>Tout
</button>
<button onclick="filterProducts('electronique')"
class="filter-btn px-6 py-2 rounded-full bg-white/10 text-gray-300 font-medium hover:bg-purple-600 hover:text-white transition-all duration-300 border border-white/10 hover:border-purple-500 transform hover:scale-105">
<i class="fas fa-microchip mr-2"></i>Électronique
</button>
<button onclick="filterProducts('mode')"
class="filter-btn px-6 py-2 rounded-full bg-white/10 text-gray-300 font-medium hover:bg-purple-600 hover:text-white transition-all duration-300 border border-white/10 hover:border-purple-500 transform hover:scale-105">
<i class="fas fa-tshirt mr-2"></i>Mode
</button>
<button onclick="filterProducts('maison')"
class="filter-btn px-6 py-2 rounded-full bg-white/10 text-gray-300 font-medium hover:bg-purple-600 hover:text-white transition-all duration-300 border border-white/10 hover:border-purple-500 transform hover:scale-105">
<i class="fas fa-home mr-2"></i>Maison
</button>
<button onclick="filterProducts('gaming')"
class="filter-btn px-6 py-2 rounded-full bg-white/10 text-gray-300 font-medium hover:bg-purple-600 hover:text-white transition-all duration-300 border border-white/10 hover:border-purple-500 transform hover:scale-105">
<i class="fas fa-gamepad mr-2"></i>Gaming
</button>
</div>
<!-- Grille de produits -->
<div id="productsGrid" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
<!-- Généré par JavaScript -->
</div>
</section>
<!-- Bannière promotionnelle -->
<section class="py-16 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="relative overflow-hidden rounded-3xl bg-gradient-to-r from-purple-600 via-pink-600 to-purple-600 p-8 lg:p-12">
<div class="absolute inset-0 bg-black/20"></div>
<div class="relative z-10 flex flex-col lg:flex-row items-center justify-between">
<div class="text-white mb-6 lg:mb-0">
<span class="inline-block bg-yellow-400 text-purple-900 px-3 py-1 rounded-full text-sm font-bold mb-4">OFFRE LIMITÉE</span>
<h3 class="text-3xl lg:text-4xl font-bold mb-2">-30% sur tout le site</h3>
<p class="text-purple-100">Utilisez le code <span class="bg-white/20 px-2 py-1 rounded font-mono">AETHER30</span></p>
</div>
<button class="px-8 py-4 bg-white text-purple-600 rounded-full font-bold hover:bg-gray-100 transition-all duration-300 transform hover:scale-105">
En Profiter
</button>
</div>
</div>
</section>
<!-- Footer -->
<footer class="border-t border-white/10 mt-16">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
<div class="grid grid-cols-1 md:grid-cols-4 gap-8">
<div>
<div class="flex items-center space-x-2 mb-4">
<div class="w-8 h-8 bg-gradient-to-br from-purple-500 to-pink-500 rounded-lg flex items-center justify-center">
<i class="fas fa-cube text-white text-sm"></i>
</div>
<span class="text-xl font-bold text-white">AetherStore</span>
</div>
<p class="text-gray-400 text-sm">Votre destination pour les produits innovants et tendance.</p>
</div>
<div>
<h4 class="text-white font-semibold mb-4">Liens Rapides</h4>
<ul class="space-y-2 text-gray-400 text-sm">
<li><a href="#" class="hover:text-purple-400 transition-colors">Accueil</a></li>
<li><a href="#" class="hover:text-purple-400 transition-colors">Produits</a></li>
<li><a href="#" class="hover:text-purple-400 transition-colors">Contact</a></li>
</ul>
</div>
<div>
<h4 class="text-white font-semibold mb-4">Support</h4>
<ul class="space-y-2 text-gray-400 text-sm">
<li><a href="#" class="hover:text-purple-400 transition-colors">FAQ</a></li>
<li><a href="#" class="hover:text-purple-400 transition-colors">Livraison</a></li>
<li><a href="#" class="hover:text-purple-400 transition-colors">Retours</a></li>
</ul>
</div>
<div>
<h4 class="text-white font-semibold mb-4">Newsletter</h4>
<div class="flex">
<input type="email" placeholder="Votre email" class="flex-1 bg-white/10 border border-white/10 rounded-l-lg px-4 py-2 text-white placeholder-gray-400 focus:outline-none focus:border-purple-500">
<button aria-label="Subscribe to newsletter"
class="bg-purple-600 text-white px-4 py-2 rounded-r-lg hover:bg-purple-700 transition-colors">
<i class="fas fa-paper-plane"></i>
</button>
</div>
</div>
</div>
<div class="border-t border-white/10 mt-8 pt-8 text-center text-gray-400 text-sm">
© 2024 AetherStore. Tous droits réservés.
</div>
</div>
</footer>
<!-- Modal Panier -->
<div id="cartModal" class="fixed inset-0 z-50 hidden">
<div class="absolute inset-0 bg-black/60 backdrop-blur-sm" onclick="closeCart()"></div>
<div class="absolute right-0 top-0 h-full w-full max-w-md bg-slate-900 border-l border-white/10 shadow-2xl animate-slide-up">
<div class="flex flex-col h-full">
<!-- Header -->
<div class="flex items-center justify-between p-6 border-b border-white/10">
<h2 class="text-xl font-bold text-white">
<i class="fas fa-shopping-bag mr-2 text-purple-400"></i>Panier
</h2>
<button onclick="closeCart()" class="text-gray-400 hover:text-white transition-colors"
aria-label="Close Cart Modal">
<i class="fas fa-times text-xl"></i>
</button>
</div>
<!-- Items -->
<div id="cartItems" class="flex-1 overflow-y-auto p-6">
<div class="text-center text-gray-400 py-12">
<i class="fas fa-shopping-cart text-5xl mb-4 opacity-50"></i>
<p>Votre panier est vide</p>
</div>
</div>
<!-- Footer -->
<div class="border-t border-white/10 p-6">
<div class="flex justify-between items-center mb-4">
<span class="text-gray-300">Total</span>
<span id="cartTotal" class="text-2xl font-bold text-purple-400">0.00€</span>
</div>
<button onclick="checkout()" class="w-full py-3 bg-gradient-to-r from-purple-600 to-pink-600 text-white rounded-xl font-semibold hover:from-purple-700 hover:to-pink-700 transition-all duration-300 transform hover:scale-105">
<i class="fas fa-lock mr-2"></i>Commander
</button>
</div>
</div>
</div>
</div>
<!-- Toast Notification -->
<div id="toast" class="fixed top-4 right-4 z-50 transform translate-x-full transition-transform duration-300">
<div class="bg-gradient-to-r from-green-500 to-emerald-500 text-white px-6 py-4 rounded-xl shadow-2xl flex items-center space-x-3">
<i class="fas fa-check-circle text-xl"></i>
<span id="toastMessage">Produit ajouté au panier</span>
</div>
</div>
<script>
// Données des produits
const products = [
{
id: 1,
name: "Casque Holographique",
category: "electronique",
price: 299.99,
rating: 4.8,
reviews: 234,
description: "Son 3D spatial avec réduction de bruit quantique",
badge: "Best Seller",
badgeColor: "bg-yellow-500",
emoji: "🎧"
},
{
id: 2,
name: "Bague Connectée Néo",
category: "electronique",
price: 199.99,
rating: 4.6,
reviews: 187,
description: "Paiement sans contact et suivi santé intégré",
badge: "Premium",
badgeColor: "bg-purple-500",
emoji: "💍"
},
{
id: 3,
name: "Veste Luminescente",
category: "mode",
price: 249.99,
rating: 4.7,
reviews: 156,
description: "Tissu intelligent qui s'illumine dans le noir",
badge: "Innovation",
badgeColor: "bg-cyan-500",
emoji: "🧥"
},
{
id: 4,
name: "Console Portal X",
category: "gaming",
price: 599.99,
rating: 4.9,
reviews: 423,
description: "Console nouvelle génération avec réalité augmentée",
badge: "Tendance",
badgeColor: "bg-red-500",
emoji: "🎮"
},
{
id: 5,
name: "Miroir Intelligent",
category: "maison",
price: 449.99,
rating: 4.5,
reviews: 98,
description: "Assistant IA intégré avec affichage holographique",
badge: "Smart Home",
badgeColor: "bg-blue-500",
emoji: "🪞"
},
{
id: 6,
name: "Drone Nano Photon",
category: "electronique",
price: 179.99,
rating: 4.4,
reviews: 312,
description: "Drone miniature avec caméra 8K et suivi AI",
badge: "Populaire",
badgeColor: "bg-green-500",
emoji: "🛸"
},
{
id: 7,
name: "Basket Auto-Laçantes",
category: "mode",
price: 329.99,
rating: 4.8,
reviews: 267,
description: "Chaussures futuristes avec laçage automatique",
badge: "Futuriste",
badgeColor: "bg-pink-500",
emoji: "👟"
},
{
id: 8,
name: "Projecteur Galaxie",
category: "maison",
price: 89.99,
rating: 4.3,
reviews: 145,
description: "Créez une ambiance cosmique dans votre chambre",
badge: "Relax",
badgeColor: "bg-indigo-500",
emoji: "🌌"
},
{
id: 9,
name: "Tablette Hologramme",
category: "electronique",
price: 899.99,
rating: 4.7,
reviews: 178,
description: "Affichage holographique 3D sans lunettes",
badge: "Révolution",
badgeColor: "bg-orange-500",
emoji: "📱"
},
{
id: 10,
name: "Casque VR Ultime",
category: "gaming",
price: 499.99,
rating: 4.6,
reviews: 234,
description: "Immersion totale avec retour haptique complet",
badge: "Gamer Pro",
badgeColor: "bg-red-600",
emoji: "🥽"
},
{
id: 11,
name: "Montre Chronos",
category: "mode",
price: 399.99,
rating: 4.9,
reviews: 189,
description: "Design luxe avec technologie de projection temporelle",
badge: "Luxe",
badgeColor: "bg-yellow-600",
emoji: "⌚"
},
{
id: 12,
name: "Enceinte Gravité",
category: "maison",
price: 159.99,
rating: 4.5,
reviews: 156,
description: "Enceinte flottante à lévitation magnétique",
badge: "Unique",
badgeColor: "bg-teal-500",
emoji: "🔮"
}
];
let cart = [];
let currentFilter = 'all';
// Initialisation
function init() {
displayProducts(products);
setupEventListeners();
}
// Affichage des produits avec animation stagger
function displayProducts(productsToShow) {
const grid = document.getElementById('productsGrid');
if (productsToShow.length === 0) {
grid.innerHTML = `
<div class="col-span-full text-center py-20">
<i class="fas fa-search text-6xl text-gray-600 mb-4"></i>
<h3 class="text-2xl text-gray-400 font-semibold mb-2">Aucun produit trouvé</h3>
<p class="text-gray-500">Essayez de modifier vos critères de recherche</p>
</div>
`;
return;
}
grid.innerHTML = productsToShow.map((product, index) => `
<div class="group animate-fade-in" style="animation-delay: ${index * 100}ms">
<div class="relative bg-gradient-to-br from-white/10 to-white/5 backdrop-blur-sm rounded-2xl border border-white/10 overflow-hidden transition-all duration-500 hover:border-purple-500/50 hover:shadow-2xl hover:shadow-purple-500/20 hover:-translate-y-2">
<!-- Badge -->
${product.badge ? `
<div class="absolute top-3 left-3 z-10">
<span class="${product.badgeColor} text-white text-xs font-bold px-3 py-1 rounded-full">
${product.badge}
</span>
</div>
` : ''}
<!-- Image/Emoji -->
<div class="h-48 bg-gradient-to-br from-purple-900/50 to-pink-900/50 flex items-center justify-center text-7xl relative overflow-hidden">
${product.emoji}
<div class="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
</div>
<!-- Contenu -->
<div class="p-5">
<div class="flex items-center justify-between mb-2">
<span class="text-xs text-purple-400 font-medium bg-purple-500/20 px-2 py-1 rounded">${product.category}</span>
<div class="flex items-center text-yellow-400">
<i class="fas fa-star text-xs"></i>
<span class="text-white text-sm ml-1">${product.rating}</span>
</div>
</div>
<h3 class="text-white font-bold text-lg mb-2 group-hover:text-purple-400 transition-colors">${product.name}</h3>
<p class="text-gray-400 text-sm mb-4 line-clamp-2">${product.description}</p>
<div class="flex items-center justify-between">
<span class="text-2xl font-bold bg-gradient-to-r from-purple-400 to-pink-400 bg-clip-text text-transparent">
${product.price.toFixed(2)}€
</span>
<button onclick="addToCart(${product.id})"
class="px-4 py-2 bg-gradient-to-r from-purple-600 to-pink-600 text-white rounded-xl font-medium hover:from-purple-700 hover:to-pink-700 transition-all duration-300 transform hover:scale-110 active:scale-95">
<i class="fas fa-cart-plus"></i>
</button>
</div>
</div>
</div>
</div>
`).join('');
}
// Gestion du panier
function addToCart(productId) {
const product = products.find(p => p.id === productId);
const existingItem = cart.find(item => item.id === productId);
if (existingItem) {
existingItem.quantity++;
} else {
cart.push({ ...product, quantity: 1 });
}
updateCartCount();
showToast(`${product.emoji} ${product.name} ajouté au panier !`);
// Animation du compteur
const cartCount = document.getElementById('cartCount');
cartCount.classList.add('animate-ping');
setTimeout(() => cartCount.classList.remove('animate-ping'), 1000);
}
function updateCartCount() {
const totalItems = cart.reduce((sum, item) => sum + item.quantity, 0);
document.getElementById('cartCount').textContent = totalItems;
}
function displayCart() {
const cartItems = document.getElementById('cartItems');
if (cart.length === 0) {
cartItems.innerHTML = `
<div class="text-center text-gray-400 py-12">
<i class="fas fa-shopping-cart text-5xl mb-4 opacity-50"></i>
<p>Votre panier est vide</p>
</div>
`;
} else {
cartItems.innerHTML = cart.map(item => `
<div class="flex items-center space-x-4 bg-white/5 rounded-xl p-4 mb-3 border border-white/5 hover:border-purple-500/30 transition-all">
<div class="text-3xl">${item.emoji}</div>
<div class="flex-1">
<h4 class="text-white font-medium">${item.name}</h4>
<div class="flex items-center space-x-4 mt-2">
<button onclick="updateQuantity(${item.id}, -1)" class="w-8 h-8 bg-white/10 rounded-full text-white hover:bg-purple-600 transition-colors">-</button>
<span class="text-white font-bold">${item.quantity}</span>
<button onclick="updateQuantity(${item.id}, 1)" class="w-8 h-8 bg-white/10 rounded-full text-white hover:bg-purple-600 transition-colors">+</button>
</div>
</div>
<div class="text-right">
<p class="text-purple-400 font-bold">${(item.price * item.quantity).toFixed(2)}€</p>
<button onclick="removeFromCart(${item.id})" class="text-red-400 hover:text-red-300 text-sm mt-1">
<i class="fas fa-trash"></i>
</button>
</div>
</div>
`).join('');
}
const total = cart.reduce((sum, item) => sum + (item.price * item.quantity), 0);
document.getElementById('cartTotal').textContent = `${total.toFixed(2)}€`;
}
function updateQuantity(productId, change) {
const item = cart.find(item => item.id === productId);
if (item) {
item.quantity += change;
if (item.quantity <= 0) {
removeFromCart(productId);
} else {
displayCart();
updateCartCount();
}
}
}
function removeFromCart(productId) {
cart = cart.filter(item => item.id !== productId);
updateCartCount();
displayCart();
showToast('Produit retiré du panier');
}
function checkout() {
if (cart.length === 0) {
showToast('Votre panier est vide !');
return;
}
showToast('🎉 Commande validée avec succès !');
cart = [];
updateCartCount();
displayCart();
closeCart();
}
// Modal panier
function openCart() {
document.getElementById('cartModal').classList.remove('hidden');
displayCart();
}
function closeCart() {
document.getElementById('cartModal').classList.add('hidden');
}
// Toast
function showToast(message) {
const toast = document.getElementById('toast');
document.getElementById('toastMessage').textContent = message;
toast.classList.remove('translate-x-full');
setTimeout(() => {
toast.classList.add('translate-x-full');
}, 3000);
}
// Filtrage
function filterProducts(category) {
currentFilter = category;
// Update active button
document.querySelectorAll('.filter-btn').forEach((btn, index) => {
const categories = ['all', 'electronique', 'mode', 'maison', 'gaming'];
if (categories[index] === category) {
btn.className = 'filter-btn px-6 py-2 rounded-full bg-purple-600 text-white font-medium hover:bg-purple-700 transition-all duration-300 transform hover:scale-105';
} else {
btn.className = 'filter-btn px-6 py-2 rounded-full bg-white/10 text-gray-300 font-medium hover:bg-purple-600 hover:text-white transition-all duration-300 border border-white/10 hover:border-purple-500 transform hover:scale-105';
}
});
const searchTerm = document.getElementById('searchInput').value.toLowerCase();
let filtered = category === 'all' ? [...products] : products.filter(p => p.category === category);
if (searchTerm) {
filtered = filtered.filter(p =>
p.name.toLowerCase().includes(searchTerm) ||
p.description.toLowerCase().includes(searchTerm)
);
}
displayProducts(filtered);
}
// Event Listeners
function setupEventListeners() {
// Mobile menu
document.getElementById('mobileMenuToggle').addEventListener('click', () => {
const menu = document.getElementById('mobileMenu');
menu.classList.toggle('hidden');
});
// Search
document.getElementById('searchInput').addEventListener('input', (e) => {
filterProducts(currentFilter);
});
// Close cart on escape
document.addEventListener('keydown', (e) => {
if (e.key === 'Escape') {
closeCart();
}
});
}
// Démarrage
document.addEventListener('DOMContentLoaded', init);
</script>
</body>
</html>
Télécharger le fichier source