|
<!DOCTYPE html> |
|
<html lang="fr"> |
|
<head> |
|
<meta charset="UTF-8"> |
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
<title>Artisanat Marocain | Trésors du Maroc</title> |
|
<script src="https://cdn.tailwindcss.com"></script> |
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
<style> |
|
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Poppins:wght@300;400;600&display=swap'); |
|
|
|
body { |
|
font-family: 'Poppins', sans-serif; |
|
background-color: #f8f5f2; |
|
} |
|
|
|
.title-font { |
|
font-family: 'Playfair Display', serif; |
|
} |
|
|
|
.hero-pattern { |
|
background-image: url('https://images.unsplash.com/photo-1552733407-5d5c46c0bb2b?ixlib=rb-4.0.3'); |
|
background-size: cover; |
|
background-position: center; |
|
background-blend-mode: overlay; |
|
} |
|
|
|
.product-card:hover .product-overlay { |
|
opacity: 1; |
|
} |
|
|
|
.product-overlay { |
|
transition: all 0.3s ease; |
|
opacity: 0; |
|
} |
|
|
|
.cart-item { |
|
transition: all 0.3s ease; |
|
} |
|
|
|
.cart-item:hover { |
|
transform: translateY(-3px); |
|
} |
|
|
|
|
|
@keyframes pulse { |
|
0% { transform: scale(1); } |
|
50% { transform: scale(1.1); } |
|
100% { transform: scale(1); } |
|
} |
|
|
|
.pulse { |
|
animation: pulse 1s infinite; |
|
} |
|
</style> |
|
</head> |
|
<body> |
|
|
|
<header class="bg-white shadow-md"> |
|
<div class="container mx-auto px-4 py-3 flex justify-between items-center"> |
|
<div class="flex items-center"> |
|
<div class="w-12 h-12 bg-amber-600 rounded-full flex items-center justify-center mr-3"> |
|
<i class="fas fa-hands text-white text-xl"></i> |
|
</div> |
|
<h1 class="title-font text-2xl font-bold text-amber-800">Trésors du Maroc</h1> |
|
</div> |
|
|
|
<nav class="hidden md:flex space-x-8"> |
|
<a href="#" class="text-amber-900 hover:text-amber-600 font-medium">Accueil</a> |
|
<a href="#" class="text-amber-900 hover:text-amber-600 font-medium">Produits</a> |
|
<a href="#" class="text-amber-900 hover:text-amber-600 font-medium">Artisans</a> |
|
<a href="#" class="text-amber-900 hover:text-amber-600 font-medium">Histoire</a> |
|
<a href="#" class="text-amber-900 hover:text-amber-600 font-medium">Contact</a> |
|
</nav> |
|
|
|
<div class="flex items-center space-x-4"> |
|
<div class="relative"> |
|
<button id="cart-btn" class="text-amber-900 hover:text-amber-600"> |
|
<i class="fas fa-shopping-cart text-xl"></i> |
|
<span id="cart-count" class="absolute -top-2 -right-2 bg-amber-600 text-white text-xs font-bold rounded-full h-5 w-5 flex items-center justify-center hidden">0</span> |
|
</button> |
|
|
|
|
|
<div id="cart-dropdown" class="hidden absolute right-0 mt-2 w-72 bg-white rounded-md shadow-lg z-50 py-2"> |
|
<div class="px-4 py-2 border-b"> |
|
<h3 class="font-bold text-amber-900">Votre Panier</h3> |
|
</div> |
|
<div id="cart-items" class="max-h-60 overflow-y-auto px-2"> |
|
|
|
<p class="text-gray-500 text-center py-4">Votre panier est vide</p> |
|
</div> |
|
<div class="px-4 py-2 border-t"> |
|
<div class="flex justify-between mb-2"> |
|
<span class="font-medium">Total:</span> |
|
<span id="cart-total" class="font-bold">0 MAD</span> |
|
</div> |
|
<button class="w-full bg-amber-600 hover:bg-amber-700 text-white py-2 rounded-md font-medium transition"> |
|
Commander |
|
</button> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<button class="md:hidden text-amber-900" id="mobile-menu-btn"> |
|
<i class="fas fa-bars text-xl"></i> |
|
</button> |
|
</div> |
|
</div> |
|
|
|
|
|
<div id="mobile-menu" class="hidden md:hidden bg-white border-t"> |
|
<div class="container mx-auto px-4 py-3 flex flex-col space-y-3"> |
|
<a href="#" class="text-amber-900 hover:text-amber-600 font-medium py-1">Accueil</a> |
|
<a href="#" class="text-amber-900 hover:text-amber-600 font-medium py-1">Produits</a> |
|
<a href="#" class="text-amber-900 hover:text-amber-600 font-medium py-1">Artisans</a> |
|
<a href="#" class="text-amber-900 hover:text-amber-600 font-medium py-1">Histoire</a> |
|
<a href="#" class="text-amber-900 hover:text-amber-600 font-medium py-1">Contact</a> |
|
</div> |
|
</div> |
|
</header> |
|
|
|
|
|
<section class="hero-pattern bg-amber-800 bg-opacity-90 text-white py-16 md:py-24"> |
|
<div class="container mx-auto px-4 text-center"> |
|
<h2 class="title-font text-4xl md:text-5xl font-bold mb-4">L'Artisanat Marocain Authentique</h2> |
|
<p class="text-xl md:text-2xl mb-8 max-w-2xl mx-auto">Découvrez des pièces uniques façonnées à la main par nos maîtres artisans</p> |
|
<button class="bg-white text-amber-800 hover:bg-amber-100 font-bold py-3 px-8 rounded-full transition duration-300 transform hover:scale-105"> |
|
Explorer la Collection |
|
</button> |
|
</div> |
|
</section> |
|
|
|
|
|
<section class="py-12 bg-white"> |
|
<div class="container mx-auto px-4"> |
|
<h2 class="title-font text-3xl text-center text-amber-900 mb-12">Nos Catégories</h2> |
|
|
|
<div class="grid grid-cols-2 md:grid-cols-4 gap-4 md:gap-8"> |
|
<div class="category-card bg-amber-50 rounded-lg overflow-hidden shadow-md hover:shadow-lg transition"> |
|
<div class="h-40 bg-cover bg-center" style="background-image: url('https://images.unsplash.com/photo-1598300042247-d088f8ab3c91?ixlib=rb-4.0.3');"></div> |
|
<div class="p-4"> |
|
<h3 class="font-bold text-amber-900">Céramique & Poterie</h3> |
|
<p class="text-sm text-gray-600 mt-1">Zellige et tajines artisanaux</p> |
|
</div> |
|
</div> |
|
|
|
<div class="category-card bg-amber-50 rounded-lg overflow-hidden shadow-md hover:shadow-lg transition"> |
|
<div class="h-40 bg-cover bg-center" style="background-image: url('https://images.unsplash.com/photo-1618221195710-dd6b41faaea6?ixlib=rb-4.0.3');"></div> |
|
<div class="p-4"> |
|
<h3 class="font-bold text-amber-900">Textiles & Tapis</h3> |
|
<p class="text-sm text-gray-600 mt-1">Tapis berbères et caftans</p> |
|
</div> |
|
</div> |
|
|
|
<div class="category-card bg-amber-50 rounded-lg overflow-hidden shadow-md hover:shadow-lg transition"> |
|
<div class="h-40 bg-cover bg-center" style="background-image: url('https://images.unsplash.com/photo-1584735429098-c17bf4c1c37f?ixlib=rb-4.0.3');"></div> |
|
<div class="p-4"> |
|
<h3 class="font-bold text-amber-900">Bois Sculpté</h3> |
|
<p class="text-sm text-gray-600 mt-1">Meubles et objets décoratifs</p> |
|
</div> |
|
</div> |
|
|
|
<div class="category-card bg-amber-50 rounded-lg overflow-hidden shadow-md hover:shadow-lg transition"> |
|
<div class="h-40 bg-cover bg-center" style="background-image: url('https://images.unsplash.com/photo-1605000797499-95a51c5269ae?ixlib=rb-4.0.3');"></div> |
|
<div class="p-4"> |
|
<h3 class="font-bold text-amber-900">Cuivre & Métal</h3> |
|
<p class="text-sm text-gray-600 mt-1">Luminaires et ustensiles</p> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</section> |
|
|
|
|
|
<section class="py-16 bg-amber-50"> |
|
<div class="container mx-auto px-4"> |
|
<div class="flex justify-between items-center mb-12"> |
|
<h2 class="title-font text-3xl text-amber-900">Produits Phares</h2> |
|
<a href="#" class="text-amber-700 hover:text-amber-900 font-medium flex items-center"> |
|
Voir tout <i class="fas fa-arrow-right ml-2"></i> |
|
</a> |
|
</div> |
|
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6"> |
|
|
|
<div class="product-card bg-white rounded-lg overflow-hidden shadow-md relative"> |
|
<div class="h-64 bg-cover bg-center" style="background-image: url('https://images.unsplash.com/photo-1605000797499-95a51c5269ae?ixlib=rb-4.0.3');"></div> |
|
<div class="p-4"> |
|
<div class="flex justify-between items-start"> |
|
<div> |
|
<h3 class="font-bold text-amber-900">Lampe en Cuivre</h3> |
|
<p class="text-gray-600 text-sm">Fès</p> |
|
</div> |
|
<span class="bg-amber-100 text-amber-800 text-xs font-bold px-2 py-1 rounded">Nouveau</span> |
|
</div> |
|
<div class="mt-3 flex justify-between items-center"> |
|
<span class="font-bold text-amber-800">450 MAD</span> |
|
<button class="add-to-cart text-amber-700 hover:text-amber-900" data-id="1" data-name="Lampe en Cuivre" data-price="450" data-image="https://images.unsplash.com/photo-1605000797499-95a51c5269ae?ixlib=rb-4.0.3"> |
|
<i class="fas fa-plus-circle text-xl"></i> |
|
</button> |
|
</div> |
|
</div> |
|
<div class="product-overlay absolute inset-0 bg-black bg-opacity-30 flex items-center justify-center"> |
|
<button class="bg-white text-amber-800 font-bold py-2 px-6 rounded-full hover:bg-amber-100 transition"> |
|
Voir Détails |
|
</button> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="product-card bg-white rounded-lg overflow-hidden shadow-md relative"> |
|
<div class="h-64 bg-cover bg-center" style="background-image: url('https://images.unsplash.com/photo-1618221195710-dd6b41faaea6?ixlib=rb-4.0.3');"></div> |
|
<div class="p-4"> |
|
<div class="flex justify-between items-start"> |
|
<div> |
|
<h3 class="font-bold text-amber-900">Tapis Berbère</h3> |
|
<p class="text-gray-600 text-sm">Atlas</p> |
|
</div> |
|
<span class="bg-amber-100 text-amber-800 text-xs font-bold px-2 py-1 rounded">Populaire</span> |
|
</div> |
|
<div class="mt-3 flex justify-between items-center"> |
|
<span class="font-bold text-amber-800">1,200 MAD</span> |
|
<button class="add-to-cart text-amber-700 hover:text-amber-900" data-id="2" data-name="Tapis Berbère" data-price="1200" data-image="https://images.unsplash.com/photo-1618221195710-dd6b41faaea6?ixlib=rb-4.0.3"> |
|
<i class="fas fa-plus-circle text-xl"></i> |
|
</button> |
|
</div> |
|
</div> |
|
<div class="product-overlay absolute inset-0 bg-black bg-opacity-30 flex items-center justify-center"> |
|
<button class="bg-white text-amber-800 font-bold py-2 px-6 rounded-full hover:bg-amber-100 transition"> |
|
Voir Détails |
|
</button> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="product-card bg-white rounded-lg overflow-hidden shadow-md relative"> |
|
<div class="h-64 bg-cover bg-center" style="background-image: url('https://images.unsplash.com/photo-1598300042247-d088f8ab3c91?ixlib=rb-4.0.3');"></div> |
|
<div class="p-4"> |
|
<div class="flex justify-between items-start"> |
|
<div> |
|
<h3 class="font-bold text-amber-900">Assiette Zellige</h3> |
|
<p class="text-gray-600 text-sm">Marrakech</p> |
|
</div> |
|
</div> |
|
<div class="mt-3 flex justify-between items-center"> |
|
<span class="font-bold text-amber-800">280 MAD</span> |
|
<button class="add-to-cart text-amber-700 hover:text-amber-900" data-id="3" data-name="Assiette Zellige" data-price="280" data-image="https://images.unsplash.com/photo-1598300042247-d088f8ab3c91?ixlib=rb-4.0.3"> |
|
<i class="fas fa-plus-circle text-xl"></i> |
|
</button> |
|
</div> |
|
</div> |
|
<div class="product-overlay absolute inset-0 bg-black bg-opacity-30 flex items-center justify-center"> |
|
<button class="bg-white text-amber-800 font-bold py-2 px-6 rounded-full hover:bg-amber-100 transition"> |
|
Voir Détails |
|
</button> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="product-card bg-white rounded-lg overflow-hidden shadow-md relative"> |
|
<div class="h-64 bg-cover bg-center" style="background-image: url('https://images.unsplash.com/photo-1584735429098-c17bf4c1c37f?ixlib=rb-4.0.3');"></div> |
|
<div class="p-4"> |
|
<div class="flex justify-between items-start"> |
|
<div> |
|
<h3 class="font-bold text-amber-900">Boîte en Bois</h3> |
|
<p class="text-gray-600 text-sm">Essaouira</p> |
|
</div> |
|
<span class="bg-amber-100 text-amber-800 text-xs font-bold px-2 py-1 rounded">Édition limitée</span> |
|
</div> |
|
<div class="mt-3 flex justify-between items-center"> |
|
<span class="font-bold text-amber-800">350 MAD</span> |
|
<button class="add-to-cart text-amber-700 hover:text-amber-900" data-id="4" data-name="Boîte en Bois" data-price="350" data-image="https://images.unsplash.com/photo-1584735429098-c17bf4c1c37f?ixlib=rb-4.0.3"> |
|
<i class="fas fa-plus-circle text-xl"></i> |
|
</button> |
|
</div> |
|
</div> |
|
<div class="product-overlay absolute inset-0 bg-black bg-opacity-30 flex items-center justify-center"> |
|
<button class="bg-white text-amber-800 font-bold py-2 px-6 rounded-full hover:bg-amber-100 transition"> |
|
Voir Détails |
|
</button> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</section> |
|
|
|
|
|
<section class="py-16 bg-white"> |
|
<div class="container mx-auto px-4"> |
|
<h2 class="title-font text-3xl text-center text-amber-900 mb-12">Rencontrez Nos Artisans</h2> |
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-8"> |
|
<div class="bg-amber-50 rounded-lg overflow-hidden shadow-md"> |
|
<div class="h-64 bg-cover bg-center" style="background-image: url('https://images.unsplash.com/photo-1589156280159-27698a70f0de?ixlib=rb-4.0.3');"></div> |
|
<div class="p-6"> |
|
<h3 class="font-bold text-xl text-amber-900 mb-2">Mohamed El Fassi</h3> |
|
<p class="text-amber-700 font-medium mb-3">Maître Céramiste</p> |
|
<p class="text-gray-600">Mohamed perpétue la tradition familiale de la céramique de Fès depuis plus de 30 ans. Ses pièces sont reconnues pour leurs motifs géométriques complexes.</p> |
|
</div> |
|
</div> |
|
|
|
<div class="bg-amber-50 rounded-lg overflow-hidden shadow-md"> |
|
<div class="h-64 bg-cover bg-center" style="background-image: url('https://images.unsplash.com/photo-1562787186-13a35b5d2393?ixlib=rb-4.0.3');"></div> |
|
<div class="p-6"> |
|
<h3 class="font-bold text-xl text-amber-900 mb-2">Amina Taznakht</h3> |
|
<p class="text-amber-700 font-medium mb-3">Tisserande Berbère</p> |
|
<p class="text-gray-600">Amina crée des tapis berbères selon des techniques ancestrales transmises de mère en fille. Chaque tapis raconte une histoire à travers ses motifs symboliques.</p> |
|
</div> |
|
</div> |
|
|
|
<div class="bg-amber-50 rounded-lg overflow-hidden shadow-md"> |
|
<div class="h-64 bg-cover bg-center" style="background-image: url('https://images.unsplash.com/photo-1580489944761-15a19d654956?ixlib=rb-4.0.3');"></div> |
|
<div class="p-6"> |
|
<h3 class="font-bold text-xl text-amber-900 mb-2">Youssef Marraki</h3> |
|
<p class="text-amber-700 font-medium mb-3">Maâlem du Cuivre</p> |
|
<p class="text-gray-600">Youssef, maâlem (maître artisan) de la médina de Marrakech, transforme le cuivre en objets d'art depuis 40 ans avec un savoir-faire exceptionnel.</p> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<div class="text-center mt-12"> |
|
<button class="bg-amber-600 hover:bg-amber-700 text-white font-bold py-3 px-8 rounded-full transition"> |
|
Découvrir Tous Nos Artisans |
|
</button> |
|
</div> |
|
</div> |
|
</section> |
|
|
|
|
|
<section class="py-16 bg-amber-100"> |
|
<div class="container mx-auto px-4"> |
|
<h2 class="title-font text-3xl text-center text-amber-900 mb-12">Témoignages</h2> |
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-8"> |
|
<div class="bg-white p-6 rounded-lg shadow-md"> |
|
<div class="flex items-center mb-4"> |
|
<div class="w-12 h-12 bg-amber-200 rounded-full flex items-center justify-center mr-4"> |
|
<i class="fas fa-user text-amber-700"></i> |
|
</div> |
|
<div> |
|
<h4 class="font-bold text-amber-900">Sophie Martin</h4> |
|
<div class="flex text-amber-500"> |
|
<i class="fas fa-star"></i> |
|
<i class="fas fa-star"></i> |
|
<i class="fas fa-star"></i> |
|
<i class="fas fa-star"></i> |
|
<i class="fas fa-star"></i> |
|
</div> |
|
</div> |
|
</div> |
|
<p class="text-gray-600">"La lampe en cuivre que j'ai achetée est magnifique. La qualité du travail est exceptionnelle et elle apporte une touche magique à mon salon."</p> |
|
</div> |
|
|
|
<div class="bg-white p-6 rounded-lg shadow-md"> |
|
<div class="flex items-center mb-4"> |
|
<div class="w-12 h-12 bg-amber-200 rounded-full flex items-center justify-center mr-4"> |
|
<i class="fas fa-user text-amber-700"></i> |
|
</div> |
|
<div> |
|
<h4 class="font-bold text-amber-900">Jean Dupont</h4> |
|
<div class="flex text-amber-500"> |
|
<i class="fas fa-star"></i> |
|
<i class="fas fa-star"></i> |
|
<i class="fas fa-star"></i> |
|
<i class="fas fa-star"></i> |
|
<i class="fas fa-star"></i> |
|
</div> |
|
</div> |
|
</div> |
|
<p class="text-gray-600">"Le tapis berbère est encore plus beau en vrai que sur les photos. Livraison rapide et emballage soigné. Je recommande vivement!"</p> |
|
</div> |
|
|
|
<div class="bg-white p-6 rounded-lg shadow-md"> |
|
<div class="flex items-center mb-4"> |
|
<div class="w-12 h-12 bg-amber-200 rounded-full flex items-center justify-center mr-4"> |
|
<i class="fas fa-user text-amber-700"></i> |
|
</div> |
|
<div> |
|
<h4 class="font-bold text-amber-900">Amélie Leroy</h4> |
|
<div class="flex text-amber-500"> |
|
<i class="fas fa-star"></i> |
|
<i class="fas fa-star"></i> |
|
<i class="fas fa-star"></i> |
|
<i class="fas fa-star"></i> |
|
<i class="fas fa-star-half-alt"></i> |
|
</div> |
|
</div> |
|
</div> |
|
<p class="text-gray-600">"J'ai offert la boîte en bois à ma mère qui collectionne les objets artisanaux. Elle a adoré! Le travail de marqueterie est d'une finesse incroyable."</p> |
|
</div> |
|
</div> |
|
</div> |
|
</section> |
|
|
|
|
|
<section class="py-16 bg-amber-800 text-white"> |
|
<div class="container mx-auto px-4 text-center"> |
|
<h2 class="title-font text-3xl mb-4">Restez Connectés</h2> |
|
<p class="max-w-2xl mx-auto mb-8">Abonnez-vous à notre newsletter pour recevoir nos nouveautés, offres spéciales et histoires d'artisans.</p> |
|
|
|
<form class="max-w-md mx-auto flex"> |
|
<input type="email" placeholder="Votre email" class="flex-grow px-4 py-3 rounded-l-md focus:outline-none text-gray-800"> |
|
<button type="submit" class="bg-amber-600 hover:bg-amber-700 px-6 py-3 rounded-r-md font-medium transition"> |
|
S'abonner |
|
</button> |
|
</form> |
|
</div> |
|
</section> |
|
|
|
|
|
<footer class="bg-amber-900 text-white pt-12 pb-6"> |
|
<div class="container mx-auto px-4"> |
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8"> |
|
<div> |
|
<h3 class="title-font text-xl font-bold mb-4">Trésors du Maroc</h3> |
|
<p class="text-amber-100">Depuis 2010, nous mettons en valeur l'artisanat marocain authentique et soutenons les artisans locaux dans leur travail.</p> |
|
<div class="flex space-x-4 mt-4"> |
|
<a href="#" class="text-amber-200 hover:text-white"><i class="fab fa-facebook-f"></i></a> |
|
<a href="#" class="text-amber-200 hover:text-white"><i class="fab fa-instagram"></i></a> |
|
<a href="#" class="text-amber-200 hover:text-white"><i class="fab fa-pinterest-p"></i></a> |
|
</div> |
|
</div> |
|
|
|
<div> |
|
<h4 class="font-bold mb-4">Navigation</h4> |
|
<ul class="space-y-2"> |
|
<li><a href="#" class="text-amber-200 hover:text-white">Accueil</a></li> |
|
<li><a href="#" class="text-amber-200 hover:text-white">Boutique</a></li> |
|
<li><a href="#" class="text-amber-200 hover:text-white">Artisans</a></li> |
|
<li><a href="#" class="text-amber-200 hover:text-white">Blog</a></li> |
|
<li><a href="#" class="text-amber-200 hover:text-white">Contact</a></li> |
|
</ul> |
|
</div> |
|
|
|
<div> |
|
<h4 class="font-bold mb-4">Service Client</h4> |
|
<ul class="space-y-2"> |
|
<li><a href="#" class="text-amber-200 hover:text-white">Livraison & Retours</a></li> |
|
<li><a href="#" class="text-amber-200 hover:text-white">Paiement Sécurisé</a></li> |
|
<li><a href="#" class="text-amber-200 hover:text-white">FAQ</a></li> |
|
<li><a href="#" class="text-amber-200 hover:text-white">Conditions Générales</a></li> |
|
</ul> |
|
</div> |
|
|
|
<div> |
|
<h4 class="font-bold mb-4">Contact</h4> |
|
<ul class="space-y-2"> |
|
<li class="flex items-center"> |
|
<i class="fas fa-map-marker-alt mr-2 text-amber-300"></i> |
|
<span>123 Rue de l'Artisanat, Marrakech</span> |
|
</li> |
|
<li class="flex items-center"> |
|
<i class="fas fa-phone-alt mr-2 text-amber-300"></i> |
|
<span>+212 6 12 34 56 78</span> |
|
</li> |
|
<li class="flex items-center"> |
|
<i class="fas fa-envelope mr-2 text-amber-300"></i> |
|
<span>[email protected]</span> |
|
</li> |
|
</ul> |
|
</div> |
|
</div> |
|
|
|
<div class="border-t border-amber-800 pt-6 flex flex-col md:flex-row justify-between items-center"> |
|
<p class="text-amber-200 text-sm mb-4 md:mb-0">© 2023 Trésors du Maroc. Tous droits réservés.</p> |
|
<div class="flex space-x-6"> |
|
<img src="https://via.placeholder.com/40x25" alt="Payment Method" class="h-6"> |
|
<img src="https://via.placeholder.com/40x25" alt="Payment Method" class="h-6"> |
|
<img src="https://via.placeholder.com/40x25" alt="Payment Method" class="h-6"> |
|
</div> |
|
</div> |
|
</div> |
|
</footer> |
|
|
|
<script> |
|
|
|
const mobileMenuBtn = document.getElementById('mobile-menu-btn'); |
|
const mobileMenu = document.getElementById('mobile-menu'); |
|
|
|
mobileMenuBtn.addEventListener('click', () => { |
|
mobileMenu.classList.toggle('hidden'); |
|
}); |
|
|
|
|
|
const cartBtn = document.getElementById('cart-btn'); |
|
const cartDropdown = document.getElementById('cart-dropdown'); |
|
const cartCount = document.getElementById('cart-count'); |
|
const cartItems = document.getElementById('cart-items'); |
|
const cartTotal = document.getElementById('cart-total'); |
|
|
|
let cart = []; |
|
|
|
|
|
cartBtn.addEventListener('click', (e) => { |
|
e.stopPropagation(); |
|
cartDropdown.classList.toggle('hidden'); |
|
}); |
|
|
|
|
|
document.addEventListener('click', (e) => { |
|
if (!cartDropdown.contains(e.target) && e.target !== cartBtn) { |
|
cartDropdown.classList.add('hidden'); |
|
} |
|
}); |
|
|
|
|
|
const addToCartButtons = document.querySelectorAll('.add-to-cart'); |
|
|
|
addToCartButtons.forEach(button => { |
|
button.addEventListener('click', (e) => { |
|
e.stopPropagation(); |
|
|
|
const id = button.getAttribute('data-id'); |
|
const name = button.getAttribute('data-name'); |
|
const price = parseFloat(button.getAttribute('data-price')); |
|
const image = button.getAttribute('data-image'); |
|
|
|
|
|
const existingItem = cart.find(item => item.id === id); |
|
|
|
if (existingItem) { |
|
existingItem.quantity += 1; |
|
} else { |
|
cart.push({ |
|
id, |
|
name, |
|
price, |
|
image, |
|
quantity: 1 |
|
}); |
|
} |
|
|
|
updateCart(); |
|
|
|
|
|
cartCount.classList.remove('hidden'); |
|
cartCount.classList.add('pulse'); |
|
setTimeout(() => { |
|
cartCount.classList.remove('pulse'); |
|
}, 1000); |
|
}); |
|
}); |
|
|
|
|
|
function updateCart() { |
|
|
|
const totalItems = cart.reduce((sum, item) => sum + item.quantity, 0); |
|
cartCount.textContent = totalItems; |
|
|
|
|
|
cartItems.innerHTML = ''; |
|
|
|
if (cart.length === 0) { |
|
cartItems.innerHTML = '<p class="text-gray-500 text-center py-4">Votre panier est vide</p>'; |
|
cartTotal.textContent = '0 MAD'; |
|
return; |
|
} |
|
|
|
let total = 0; |
|
|
|
cart.forEach(item => { |
|
total += item.price * item.quantity; |
|
|
|
const itemElement = document.createElement('div'); |
|
itemElement.className = 'cart-item mb-3 p-2 bg-amber-50 rounded-md flex items-center'; |
|
itemElement.innerHTML = ` |
|
<div class="w-12 h-12 bg-cover bg-center mr-3 rounded-md" style="background-image: url('${item.image}')"></div> |
|
<div class="flex-grow"> |
|
<h4 class="font-medium text-amber-900">${item.name}</h4> |
|
<div class="flex justify-between items-center"> |
|
<span class="text-sm text-amber-700">${item.price} MAD x ${item.quantity}</span> |
|
<span class="font-bold text-amber-900">${(item.price * item.quantity).toFixed(2)} MAD</span> |
|
</div> |
|
</div> |
|
<button class="remove-item ml-3 text-amber-700 hover:text-amber-900" data-id="${item.id}"> |
|
<i class="fas fa-times"></i> |
|
</button> |
|
`; |
|
|
|
cartItems.appendChild(itemElement); |
|
}); |
|
|
|
|
|
cartTotal.textContent = `${total.toFixed(2)} MAD`; |
|
|
|
|
|
document.querySelectorAll('.remove-item').forEach(button => { |
|
button.addEventListener('click', (e) => { |
|
e.stopPropagation(); |
|
const id = button.getAttribute('data-id'); |
|
cart = cart.filter(item => item.id !== id); |
|
updateCart(); |
|
}); |
|
}); |
|
} |
|
|
|
|
|
updateCart(); |
|
</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=Bilquar/bilquar" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
</html> |
