| <!DOCTYPE html> |
| <html lang="fr"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Boutique en ligne</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
| <style> |
| .fade-enter-active, .fade-leave-active { |
| transition: opacity 0.3s ease; |
| } |
| .fade-enter-from, .fade-leave-to { |
| opacity: 0; |
| } |
| .card-hover { |
| transition: transform 0.2s ease, box-shadow 0.2s ease; |
| } |
| .card-hover:hover { |
| transform: translateY(-2px); |
| box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); |
| } |
| .badge-hover { |
| transition: background-color 0.2s ease; |
| } |
| .badge-hover:hover { |
| background-color: #3b82f6; |
| color: white; |
| } |
| </style> |
| </head> |
| <body class="bg-gray-50 min-h-screen"> |
| <div id="app" class="container mx-auto px-4 py-8"> |
| |
| <header class="flex justify-between items-center mb-8"> |
| <div> |
| <h1 class="text-3xl font-bold text-gray-800">Boutique en ligne</h1> |
| <p class="text-gray-600">Découvrez nos produits exceptionnels</p> |
| </div> |
| <div class="relative"> |
| <button @click="toggleCart" class="flex items-center space-x-2 bg-white px-4 py-2 rounded-lg shadow-sm border border-gray-200 hover:bg-gray-50 transition"> |
| <i class="fas fa-shopping-cart text-gray-700"></i> |
| <span class="font-medium">Panier</span> |
| <span v-if="cart.length > 0" class="absolute -top-2 -right-2 bg-blue-500 text-white text-xs font-bold rounded-full h-5 w-5 flex items-center justify-center"> |
| {{ cart.reduce((acc, item) => acc + item.quantity, 0) }} |
| </span> |
| </button> |
| </div> |
| </header> |
|
|
| |
| <transition name="fade"> |
| <div v-if="showCart" class="absolute right-4 mt-2 w-80 bg-white rounded-lg shadow-lg z-10 border border-gray-200 overflow-hidden"> |
| <div class="p-4 border-b border-gray-200"> |
| <div class="flex justify-between items-center"> |
| <h3 class="font-bold text-lg">Votre panier</h3> |
| <button @click="toggleCart" class="text-gray-500 hover:text-gray-700"> |
| <i class="fas fa-times"></i> |
| </button> |
| </div> |
| </div> |
| <div class="max-h-96 overflow-y-auto"> |
| <div v-if="cart.length === 0" class="p-4 text-center text-gray-500"> |
| Votre panier est vide |
| </div> |
| <div v-for="item in cart" :key="item.id" class="p-4 border-b border-gray-200 last:border-b-0 flex justify-between items-center"> |
| <div class="flex items-center space-x-3"> |
| <div class="w-12 h-12 bg-gray-100 rounded-md flex items-center justify-center"> |
| <i :class="item.icon" class="text-gray-500"></i> |
| </div> |
| <div> |
| <h4 class="font-medium">{{ item.name }}</h4> |
| <p class="text-sm text-gray-500">{{ item.price }} € x {{ item.quantity }}</p> |
| </div> |
| </div> |
| <div class="flex items-center space-x-2"> |
| <button @click="decreaseQuantity(item.id)" class="w-6 h-6 flex items-center justify-center bg-gray-100 rounded hover:bg-gray-200"> |
| <i class="fas fa-minus text-xs"></i> |
| </button> |
| <button @click="increaseQuantity(item.id)" class="w-6 h-6 flex items-center justify-center bg-gray-100 rounded hover:bg-gray-200"> |
| <i class="fas fa-plus text-xs"></i> |
| </button> |
| <button @click="removeFromCart(item.id)" class="w-6 h-6 flex items-center justify-center bg-red-100 rounded hover:bg-red-200 text-red-500"> |
| <i class="fas fa-trash text-xs"></i> |
| </button> |
| </div> |
| </div> |
| </div> |
| <div v-if="cart.length > 0" class="p-4 bg-gray-50"> |
| <div class="flex justify-between mb-2"> |
| <span class="font-medium">Total</span> |
| <span class="font-bold">{{ totalPrice }} €</span> |
| </div> |
| <button class="w-full bg-blue-500 hover:bg-blue-600 text-white py-2 rounded-lg font-medium transition"> |
| Passer la commande |
| </button> |
| </div> |
| </div> |
| </transition> |
|
|
| |
| <div class="mb-8"> |
| <h2 class="text-lg font-medium text-gray-700 mb-3">Filtrer par catégorie</h2> |
| <div class="flex flex-wrap gap-2"> |
| <button |
| v-for="category in categories" |
| :key="category.id" |
| @click="setActiveCategory(category.id)" |
| :class="[ |
| 'px-4 py-2 rounded-full text-sm font-medium border border-gray-200 badge-hover', |
| activeCategory === category.id ? 'bg-blue-500 text-white border-blue-500' : 'bg-white text-gray-700' |
| ]" |
| > |
| {{ category.name }} |
| </button> |
| </div> |
| </div> |
|
|
| |
| <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6"> |
| <div |
| v-for="product in filteredProducts" |
| :key="product.id" |
| class="bg-white rounded-xl overflow-hidden shadow-sm border border-gray-200 card-hover" |
| > |
| <div class="h-48 bg-gray-100 flex items-center justify-center"> |
| <i :class="product.icon" class="text-5xl text-gray-400"></i> |
| </div> |
| <div class="p-4"> |
| <div class="flex justify-between items-start mb-2"> |
| <h3 class="font-bold text-gray-800">{{ product.name }}</h3> |
| <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded-full">{{ product.category }}</span> |
| </div> |
| <p class="text-gray-600 text-sm mb-3">{{ product.description }}</p> |
| <div class="flex justify-between items-center"> |
| <span class="font-bold text-gray-900">{{ product.price }} €</span> |
| <button |
| @click="addToCart(product)" |
| class="px-3 py-1 bg-blue-500 hover:bg-blue-600 text-white rounded-lg text-sm font-medium transition flex items-center space-x-1" |
| > |
| <i class="fas fa-cart-plus text-xs"></i> |
| <span>Ajouter</span> |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div v-if="filteredProducts.length === 0" class="text-center py-12"> |
| <i class="fas fa-box-open text-5xl text-gray-300 mb-4"></i> |
| <h3 class="text-xl font-medium text-gray-700 mb-2">Aucun produit trouvé</h3> |
| <p class="text-gray-500">Essayez de changer vos filtres de recherche</p> |
| </div> |
| </div> |
|
|
| <script> |
| const { createApp, ref, computed } = Vue; |
| |
| createApp({ |
| setup() { |
| const showCart = ref(false); |
| const activeCategory = ref('all'); |
| |
| const categories = ref([ |
| { id: 'all', name: 'Tous les produits' }, |
| { id: 'electronics', name: 'Électronique' }, |
| { id: 'clothing', name: 'Vêtements' }, |
| { id: 'home', name: 'Maison' }, |
| { id: 'sports', name: 'Sports' }, |
| { id: 'books', name: 'Livres' } |
| ]); |
| |
| const products = ref([ |
| { |
| id: 1, |
| name: 'Smartphone Premium', |
| description: 'Écran 6.7", 128Go, triple caméra', |
| price: 799, |
| category: 'electronics', |
| icon: 'fas fa-mobile-alt' |
| }, |
| { |
| id: 2, |
| name: 'Casque sans fil', |
| description: 'Réduction de bruit active, 30h autonomie', |
| price: 199, |
| category: 'electronics', |
| icon: 'fas fa-headphones' |
| }, |
| { |
| id: 3, |
| name: 'T-shirt coton', |
| description: '100% coton bio, plusieurs coloris', |
| price: 29, |
| category: 'clothing', |
| icon: 'fas fa-tshirt' |
| }, |
| { |
| id: 4, |
| name: 'Lampadaire design', |
| description: 'Hauteur 1m80, métal et verre', |
| price: 149, |
| category: 'home', |
| icon: 'fas fa-lightbulb' |
| }, |
| { |
| id: 5, |
| name: 'Vélo de course', |
| description: 'Cadre carbone, 21 vitesses', |
| price: 1299, |
| category: 'sports', |
| icon: 'fas fa-bicycle' |
| }, |
| { |
| id: 6, |
| name: 'Roman best-seller', |
| description: 'Édition limitée, 400 pages', |
| price: 19, |
| category: 'books', |
| icon: 'fas fa-book' |
| }, |
| { |
| id: 7, |
| name: 'Montre connectée', |
| description: 'Suivi santé, écran AMOLED', |
| price: 249, |
| category: 'electronics', |
| icon: 'fas fa-clock' |
| }, |
| { |
| id: 8, |
| name: 'Coussin décoratif', |
| description: '45x45cm, plusieurs motifs', |
| price: 39, |
| category: 'home', |
| icon: 'fas fa-couch' |
| } |
| ]); |
| |
| const cart = ref([]); |
| |
| const filteredProducts = computed(() => { |
| if (activeCategory.value === 'all') { |
| return products.value; |
| } |
| return products.value.filter(product => product.category === activeCategory.value); |
| }); |
| |
| const totalPrice = computed(() => { |
| return cart.value.reduce((total, item) => total + (item.price * item.quantity), 0); |
| }); |
| |
| const toggleCart = () => { |
| showCart.value = !showCart.value; |
| }; |
| |
| const setActiveCategory = (categoryId) => { |
| activeCategory.value = categoryId; |
| }; |
| |
| const addToCart = (product) => { |
| const existingItem = cart.value.find(item => item.id === product.id); |
| |
| if (existingItem) { |
| existingItem.quantity += 1; |
| } else { |
| cart.value.push({ |
| ...product, |
| quantity: 1 |
| }); |
| } |
| |
| |
| const button = event.target.closest('button'); |
| if (button) { |
| button.classList.add('bg-green-500'); |
| setTimeout(() => { |
| button.classList.remove('bg-green-500'); |
| }, 300); |
| } |
| }; |
| |
| const removeFromCart = (productId) => { |
| cart.value = cart.value.filter(item => item.id !== productId); |
| }; |
| |
| const increaseQuantity = (productId) => { |
| const item = cart.value.find(item => item.id === productId); |
| if (item) item.quantity += 1; |
| }; |
| |
| const decreaseQuantity = (productId) => { |
| const item = cart.value.find(item => item.id === productId); |
| if (item) { |
| if (item.quantity > 1) { |
| item.quantity -= 1; |
| } else { |
| removeFromCart(productId); |
| } |
| } |
| }; |
| |
| return { |
| showCart, |
| activeCategory, |
| categories, |
| products, |
| cart, |
| filteredProducts, |
| totalPrice, |
| toggleCart, |
| setActiveCategory, |
| addToCart, |
| removeFromCart, |
| increaseQuantity, |
| decreaseQuantity |
| }; |
| } |
| }).mount('#app'); |
| </script> |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=RadMann/boutique" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
