|
|
<!DOCTYPE html> |
|
|
<html lang="ar" dir="rtl"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>كوزمتك - متجر مستحضرات التجميل</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=Tajawal:wght@400;500;700;900&display=swap'); |
|
|
|
|
|
body { |
|
|
font-family: 'Tajawal', sans-serif; |
|
|
background-color: #fef6f6; |
|
|
} |
|
|
|
|
|
.hero-section { |
|
|
background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('https://images.unsplash.com/photo-1522335789203-aabd1fc54bc9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1887&q=80'); |
|
|
background-size: cover; |
|
|
background-position: center; |
|
|
} |
|
|
|
|
|
.product-card:hover { |
|
|
transform: translateY(-5px); |
|
|
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); |
|
|
} |
|
|
|
|
|
.category-btn.active { |
|
|
background-color: #f472b6; |
|
|
color: white; |
|
|
} |
|
|
|
|
|
.cart-item { |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.cart-item:hover { |
|
|
background-color: #fef2f2; |
|
|
} |
|
|
|
|
|
.dropdown:hover .dropdown-menu { |
|
|
display: block; |
|
|
} |
|
|
|
|
|
|
|
|
@keyframes slideIn { |
|
|
from { transform: translateX(100%); opacity: 0; } |
|
|
to { transform: translateX(0); opacity: 1; } |
|
|
} |
|
|
|
|
|
@keyframes slideOut { |
|
|
from { transform: translateX(0); opacity: 1; } |
|
|
to { transform: translateX(100%); opacity: 0; } |
|
|
} |
|
|
|
|
|
.notification { |
|
|
animation: slideIn 0.5s forwards; |
|
|
} |
|
|
|
|
|
.notification.hide { |
|
|
animation: slideOut 0.5s forwards; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="text-gray-800"> |
|
|
|
|
|
<nav class="bg-white shadow-lg sticky top-0 z-50"> |
|
|
<div class="container mx-auto px-4 py-3 flex justify-between items-center"> |
|
|
|
|
|
<div class="flex items-center"> |
|
|
<a href="#" class="text-2xl font-bold text-pink-500">كوزمتك</a> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="hidden md:flex space-x-6 space-x-reverse"> |
|
|
<a href="#" class="text-gray-700 hover:text-pink-500 font-medium">الرئيسية</a> |
|
|
<a href="#products" class="text-gray-700 hover:text-pink-500 font-medium">المنتجات</a> |
|
|
<a href="#categories" class="text-gray-700 hover:text-pink-500 font-medium">الأقسام</a> |
|
|
<a href="#offers" class="text-gray-700 hover:text-pink-500 font-medium">العروض</a> |
|
|
<a href="#about" class="text-gray-700 hover:text-pink-500 font-medium">من نحن</a> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="flex items-center space-x-4 space-x-reverse"> |
|
|
<a href="#" class="text-gray-700 hover:text-pink-500"> |
|
|
<i class="fas fa-user text-xl"></i> |
|
|
</a> |
|
|
<div class="relative"> |
|
|
<button id="cart-btn" class="text-gray-700 hover:text-pink-500 relative"> |
|
|
<i class="fas fa-shopping-cart text-xl"></i> |
|
|
<span id="cart-count" class="absolute -top-2 -right-2 bg-pink-500 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">0</span> |
|
|
</button> |
|
|
|
|
|
<div id="cart-dropdown" class="hidden absolute right-0 mt-2 w-72 bg-white rounded-md shadow-lg py-2 z-50"> |
|
|
<div id="cart-items" class="max-h-60 overflow-y-auto px-4 py-2"> |
|
|
<p class="text-center text-gray-500 py-4">سلة التسوق فارغة</p> |
|
|
</div> |
|
|
<div class="border-t px-4 py-2"> |
|
|
<div class="flex justify-between mb-2"> |
|
|
<span>المجموع:</span> |
|
|
<span id="cart-total" class="font-bold">0 ر.س</span> |
|
|
</div> |
|
|
<a href="checkout.html" class="block w-full bg-pink-500 text-white text-center py-2 rounded hover:bg-pink-600">الدفع</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<button id="mobile-menu-btn" class="md:hidden text-gray-700"> |
|
|
<i class="fas fa-bars text-xl"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="mobile-menu" class="hidden md:hidden bg-white py-2 px-4"> |
|
|
<a href="#" class="block py-2 text-gray-700 hover:text-pink-500">الرئيسية</a> |
|
|
<a href="#products" class="block py-2 text-gray-700 hover:text-pink-500">المنتجات</a> |
|
|
<a href="#categories" class="block py-2 text-gray-700 hover:text-pink-500">الأقسام</a> |
|
|
<a href="#offers" class="block py-2 text-gray-700 hover:text-pink-500">العروض</a> |
|
|
<a href="#about" class="block py-2 text-gray-700 hover:text-pink-500">من نحن</a> |
|
|
</div> |
|
|
</nav> |
|
|
|
|
|
|
|
|
<div id="notification" class="fixed bottom-4 right-4 bg-green-500 text-white px-4 py-2 rounded shadow-lg hidden z-50"> |
|
|
<div class="flex items-center"> |
|
|
<i class="fas fa-check-circle mr-2"></i> |
|
|
<span>تمت إضافة المنتج إلى سلة التسوق</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<section class="hero-section text-white py-20"> |
|
|
<div class="container mx-auto px-4 text-center"> |
|
|
<h1 class="text-4xl md:text-5xl font-bold mb-4">اكتشف جمالك مع كوزمتك</h1> |
|
|
<p class="text-xl mb-8">أفضل مستحضرات التجميل والعناية بالبشرة من أشهر الماركات العالمية</p> |
|
|
<a href="#products" class="bg-pink-500 hover:bg-pink-600 text-white font-bold py-3 px-8 rounded-full">تسوق الآن</a> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="offers" class="py-12 bg-white"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<h2 class="text-3xl font-bold text-center mb-10">عروض خاصة</h2> |
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6"> |
|
|
|
|
|
<div class="bg-pink-50 rounded-lg p-6 flex flex-col md:flex-row items-center"> |
|
|
<div class="md:mr-4 mb-4 md:mb-0"> |
|
|
<img src="https://images.unsplash.com/photo-1596755094514-f87e34085b2c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=688&q=80" alt="عرض" class="w-32 h-32 object-cover rounded-full"> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-xl font-bold mb-2">خصم 30% على المكياج</h3> |
|
|
<p class="text-gray-600 mb-3">احصل على خصم 30% على جميع منتجات المكياج لمدة محدودة</p> |
|
|
<a href="#" class="text-pink-500 font-medium">تسوق الآن <i class="fas fa-arrow-left mr-1"></i></a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-pink-50 rounded-lg p-6 flex flex-col md:flex-row items-center"> |
|
|
<div class="md:mr-4 mb-4 md:mb-0"> |
|
|
<img src="https://images.unsplash.com/photo-1625772452859-1c03d5bf1137?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="عرض" class="w-32 h-32 object-cover rounded-full"> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-xl font-bold mb-2">مجموعة العناية بالبشرة</h3> |
|
|
<p class="text-gray-600 mb-3">اشترِ 3 منتجات واحصل على الرابع مجانًا من منتجات العناية بالبشرة</p> |
|
|
<a href="#" class="text-pink-500 font-medium">تسوق الآن <i class="fas fa-arrow-left mr-1"></i></a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-pink-50 rounded-lg p-6 flex flex-col md:flex-row items-center"> |
|
|
<div class="md:mr-4 mb-4 md:mb-0"> |
|
|
<img src="https://images.unsplash.com/photo-1596462502278-27bfdc403348?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="عرض" class="w-32 h-32 object-cover rounded-full"> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-xl font-bold mb-2">شحن مجاني</h3> |
|
|
<p class="text-gray-600 mb-3">احصل على شحن مجاني لجميع الطلبات فوق 200 ريال</p> |
|
|
<a href="#" class="text-pink-500 font-medium">تسوق الآن <i class="fas fa-arrow-left mr-1"></i></a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="categories" class="py-12 bg-gray-50"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<h2 class="text-3xl font-bold text-center mb-10">تصفح حسب الأقسام</h2> |
|
|
<div class="flex flex-wrap justify-center gap-4 mb-10"> |
|
|
<button class="category-btn active px-4 py-2 rounded-full bg-pink-100 text-pink-600 font-medium" data-category="all">الكل</button> |
|
|
<button class="category-btn px-4 py-2 rounded-full bg-gray-200 text-gray-700 font-medium" data-category="makeup">المكياج</button> |
|
|
<button class="category-btn px-4 py-2 rounded-full bg-gray-200 text-gray-700 font-medium" data-category="skincare">العناية بالبشرة</button> |
|
|
<button class="category-btn px-4 py-2 rounded-full bg-gray-200 text-gray-700 font-medium" data-category="hair">العناية بالشعر</button> |
|
|
<button class="category-btn px-4 py-2 rounded-full bg-gray-200 text-gray-700 font-medium" data-category="fragrance">العطور</button> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="products" class="py-12 bg-white"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<h2 class="text-3xl font-bold text-center mb-10">منتجاتنا</h2> |
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-8"> |
|
|
|
|
|
<div class="product-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300" data-category="makeup"> |
|
|
<div class="relative"> |
|
|
<img src="https://images.unsplash.com/photo-1522335789203-aabd1fc54bc9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1887&q=80" alt="أحمر شفاه" class="w-full h-64 object-cover"> |
|
|
<span class="absolute top-2 right-2 bg-pink-500 text-white text-xs px-2 py-1 rounded">جديد</span> |
|
|
</div> |
|
|
<div class="p-4"> |
|
|
<h3 class="text-lg font-bold mb-2">أحمر شفاه مات</h3> |
|
|
<p class="text-gray-600 text-sm mb-3">لون طبيعي يدوم طويلاً</p> |
|
|
<div class="flex justify-between items-center"> |
|
|
<span class="text-pink-500 font-bold">45 ر.س</span> |
|
|
<button class="add-to-cart bg-pink-500 hover:bg-pink-600 text-white px-3 py-1 rounded text-sm" data-id="1" data-name="أحمر شفاه مات" data-price="45" data-image="https://images.unsplash.com/photo-1522335789203-aabd1fc54bc9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1887&q=80"> |
|
|
<i class="fas fa-cart-plus mr-1"></i> إضافة |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="product-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300" data-category="skincare"> |
|
|
<div class="relative"> |
|
|
<img src="https://images.unsplash.com/photo-1571781926291-c477ebfd024b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=688&q=80" alt="مرطب للبشرة" class="w-full h-64 object-cover"> |
|
|
<span class="absolute top-2 right-2 bg-red-500 text-white text-xs px-2 py-1 rounded">عرض</span> |
|
|
</div> |
|
|
<div class="p-4"> |
|
|
<h3 class="text-lg font-bold mb-2">مرطب يومي للبشرة</h3> |
|
|
<p class="text-gray-600 text-sm mb-3">للحصول على بشرة ناعمة ورطبة</p> |
|
|
<div class="flex justify-between items-center"> |
|
|
<span class="text-pink-500 font-bold">85 ر.س</span> |
|
|
<button class="add-to-cart bg-pink-500 hover:bg-pink-600 text-white px-3 py-1 rounded text-sm" data-id="2" data-name="مرطب يومي للبشرة" data-price="85" data-image="https://images.unsplash.com/photo-1571781926291-c477ebfd024b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=688&q=80"> |
|
|
<i class="fas fa-cart-plus mr-1"></i> إضافة |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="product-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300" data-category="makeup"> |
|
|
<div class="relative"> |
|
|
<img src="https://images.unsplash.com/photo-1625772452859-1c03d5bf1137?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="ظل عيون" class="w-full h-64 object-cover"> |
|
|
</div> |
|
|
<div class="p-4"> |
|
|
<h3 class="text-lg font-bold mb-2">ظل عيون بألوان متعددة</h3> |
|
|
<p class="text-gray-600 text-sm mb-3">مجموعة من 12 لون</p> |
|
|
<div class="flex justify-between items-center"> |
|
|
<span class="text-pink-500 font-bold">120 ر.س</span> |
|
|
<button class="add-to-cart bg-pink-500 hover:bg-pink-600 text-white px-3 py-1 rounded text-sm" data-id="3" data-name="ظل عيون بألوان متعددة" data-price="120" data-image="https://images.unsplash.com/photo-1625772452859-1c03d5bf1137?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"> |
|
|
<i class="fas fa-cart-plus mr-1"></i> إضافة |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="product-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300" data-category="hair"> |
|
|
<div class="relative"> |
|
|
<img src="https://images.unsplash.com/photo-1596703265002-68840d3e7063?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="شامبو للشعر" class="w-full h-64 object-cover"> |
|
|
</div> |
|
|
<div class="p-4"> |
|
|
<h3 class="text-lg font-bold mb-2">شامبو للشعر الجاف</h3> |
|
|
<p class="text-gray-600 text-sm mb-3">يغذي ويرطب الشعر</p> |
|
|
<div class="flex justify-between items-center"> |
|
|
<span class="text-pink-500 font-bold">65 ر.س</span> |
|
|
<button class="add-to-cart bg-pink-500 hover:bg-pink-600 text-white px-3 py-1 rounded text-sm" data-id="4" data-name="شامبو للشعر الجاف" data-price="65" data-image="https://images.unsplash.com/photo-1596703265002-68840d3e7063?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"> |
|
|
<i class="fas fa-cart-plus mr-1"></i> إضافة |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="product-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300" data-category="fragrance"> |
|
|
<div class="relative"> |
|
|
<img src="https://images.unsplash.com/photo-1594035910387-fea47794261f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=880&q=80" alt="عطر نسائي" class="w-full h-64 object-cover"> |
|
|
<span class="absolute top-2 right-2 bg-green-500 text-white text-xs px-2 py-1 rounded">الأكثر مبيعاً</span> |
|
|
</div> |
|
|
<div class="p-4"> |
|
|
<h3 class="text-lg font-bold mb-2">عطر نسائي فاخر</h3> |
|
|
<p class="text-gray-600 text-sm mb-3">رائحة تدوم طوال اليوم</p> |
|
|
<div class="flex justify-between items-center"> |
|
|
<span class="text-pink-500 font-bold">250 ر.س</span> |
|
|
<button class="add-to-cart bg-pink-500 hover:bg-pink-600 text-white px-3 py-1 rounded text-sm" data-id="5" data-name="عطر نسائي فاخر" data-price="250" data-image="https://images.unsplash.com/photo-1594035910387-fea47794261f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=880&q=80"> |
|
|
<i class="fas fa-cart-plus mr-1"></i> إضافة |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="product-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300" data-category="skincare"> |
|
|
<div class="relative"> |
|
|
<img src="https://images.unsplash.com/photo-1570172619644-dfd03ed5d881?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="مقشر للبشرة" class="w-full h-64 object-cover"> |
|
|
</div> |
|
|
<div class="p-4"> |
|
|
<h3 class="text-lg font-bold mb-2">مقشر للبشرة</h3> |
|
|
<p class="text-gray-600 text-sm mb-3">لإزالة الخلايا الميتة</p> |
|
|
<div class="flex justify-between items-center"> |
|
|
<span class="text-pink-500 font-bold">75 ر.س</span> |
|
|
<button class="add-to-cart bg-pink-500 hover:bg-pink-600 text-white px-3 py-1 rounded text-sm" data-id="6" data-name="مقشر للبشرة" data-price="75" data-image="https://images.unsplash.com/photo-1570172619644-dfd03ed5d881?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"> |
|
|
<i class="fas fa-cart-plus mr-1"></i> إضافة |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="product-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300" data-category="makeup"> |
|
|
<div class="relative"> |
|
|
<img src="https://images.unsplash.com/photo-1596462502278-27bfdc403348?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="كونسيلر" class="w-full h-64 object-cover"> |
|
|
</div> |
|
|
<div class="p-4"> |
|
|
<h3 class="text-lg font-bold mb-2">كونسيلر عالي التغطية</h3> |
|
|
<p class="text-gray-600 text-sm mb-3">يخفي العيوب والهالات</p> |
|
|
<div class="flex justify-between items-center"> |
|
|
<span class="text-pink-500 font-bold">55 ر.س</span> |
|
|
<button class="add-to-cart bg-pink-500 hover:bg-pink-600 text-white px-3 py-1 rounded text-sm" data-id="7" data-name="كونسيلر عالي التغطية" data-price="55" data-image="https://images.unsplash.com/photo-1596462502278-27bfdc403348?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"> |
|
|
<i class="fas fa-cart-plus mr-1"></i> إضافة |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="product-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300" data-category="hair"> |
|
|
<div class="relative"> |
|
|
<img src="https://images.unsplash.com/photo-1608248543803-ba0a8def4a5e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="بلسم للشعر" class="w-full h-64 object-cover"> |
|
|
</div> |
|
|
<div class="p-4"> |
|
|
<h3 class="text-lg font-bold mb-2">بلسم للشعر التالف</h3> |
|
|
<p class="text-gray-600 text-sm mb-3">يصلح الشعر ويجعله لامعاً</p> |
|
|
<div class="flex justify-between items-center"> |
|
|
<span class="text-pink-500 font-bold">70 ر.س</span> |
|
|
<button class="add-to-cart bg-pink-500 hover:bg-pink-600 text-white px-3 py-1 rounded text-sm" data-id="8" data-name="بلسم للشعر التالف" data-price="70" data-image="https://images.unsplash.com/photo-1608248543803-ba0a8def4a5e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"> |
|
|
<i class="fas fa-cart-plus mr-1"></i> إضافة |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="text-center mt-10"> |
|
|
<a href="#" class="inline-block bg-pink-500 hover:bg-pink-600 text-white font-bold py-3 px-8 rounded-full">عرض المزيد</a> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="about" class="py-16 bg-gray-50"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<h2 class="text-3xl font-bold text-center mb-12">لماذا تختار كوزمتك؟</h2> |
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-8"> |
|
|
<div class="text-center"> |
|
|
<div class="bg-pink-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4"> |
|
|
<i class="fas fa-check-circle text-pink-500 text-2xl"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold mb-2">منتجات أصلية</h3> |
|
|
<p class="text-gray-600">جميع منتجاتنا أصلية وذات جودة عالية من أشهر الماركات العالمية</p> |
|
|
</div> |
|
|
|
|
|
<div class="text-center"> |
|
|
<div class="bg-pink-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4"> |
|
|
<i class="fas fa-truck text-pink-500 text-2xl"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold mb-2">شحن سريع</h3> |
|
|
<p class="text-gray-600">نوفر خدمة توصيل سريعة وآمنة لجميع أنحاء المملكة</p> |
|
|
</div> |
|
|
|
|
|
<div class="text-center"> |
|
|
<div class="bg-pink-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4"> |
|
|
<i class="fas fa-headset text-pink-500 text-2xl"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold mb-2">دعم فني</h3> |
|
|
<p class="text-gray-600">فريق دعم فني متاح على مدار الساعة لمساعدتك في أي استفسار</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-16 bg-white"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<h2 class="text-3xl font-bold text-center mb-12">آراء عملائنا</h2> |
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-8"> |
|
|
|
|
|
<div class="bg-gray-50 p-6 rounded-lg"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<img src="https://randomuser.me/api/portraits/women/32.jpg" alt="عميلة" class="w-12 h-12 rounded-full mr-4"> |
|
|
<div> |
|
|
<h4 class="font-bold">سارة محمد</h4> |
|
|
<div class="flex text-yellow-400"> |
|
|
<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">"أحب المنتجات في كوزمتك، جودتها ممتازة والتوصيل سريع جداً. أنصح الجميع بالتسوق من هنا"</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-50 p-6 rounded-lg"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<img src="https://randomuser.me/api/portraits/women/44.jpg" alt="عميلة" class="w-12 h-12 rounded-full mr-4"> |
|
|
<div> |
|
|
<h4 class="font-bold">نورا أحمد</h4> |
|
|
<div class="flex text-yellow-400"> |
|
|
<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">"تجربة تسوق رائعة، المنتجات أصلية تماماً كما وصفوها. شكراً كوزمتك على الخدمة المميزة"</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-50 p-6 rounded-lg"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<img src="https://randomuser.me/api/portraits/women/68.jpg" alt="عميلة" class="w-12 h-12 rounded-full mr-4"> |
|
|
<div> |
|
|
<h4 class="font-bold">لمى عبدالله</h4> |
|
|
<div class="flex text-yellow-400"> |
|
|
<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">"اشتريت عدة مرات من الموقع وكل مرة أكون أكثر إعجاباً. فريق العمل محترف جداً والمنتجات ممتازة"</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-16 bg-pink-50"> |
|
|
<div class="container mx-auto px-4 text-center"> |
|
|
<h2 class="text-3xl font-bold mb-4">اشترك في نشرتنا البريدية</h2> |
|
|
<p class="text-gray-600 mb-8 max-w-2xl mx-auto">احصل على آخر العروض والتخفيضات مباشرة إلى بريدك الإلكتروني</p> |
|
|
<form class="flex flex-col sm:flex-row justify-center max-w-md mx-auto"> |
|
|
<input type="email" placeholder="بريدك الإلكتروني" class="px-4 py-3 rounded-full mb-2 sm:mb-0 sm:mr-2 flex-grow border border-gray-300 focus:outline-none focus:ring-2 focus:ring-pink-500"> |
|
|
<button type="submit" class="bg-pink-500 hover:bg-pink-600 text-white font-bold px-6 py-3 rounded-full">اشترك الآن</button> |
|
|
</form> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<footer class="bg-gray-900 text-white py-12"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-8"> |
|
|
<div> |
|
|
<h3 class="text-xl font-bold mb-4">كوزمتك</h3> |
|
|
<p class="text-gray-400">متجرك الأول لمستحضرات التجميل والعناية بالبشرة والشعر. نقدم أفضل المنتجات العالمية بأسعار تنافسية.</p> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h3 class="text-xl font-bold mb-4">روابط سريعة</h3> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">الرئيسية</a></li> |
|
|
<li><a href="#products" class="text-gray-400 hover:text-white">المنتجات</a></li> |
|
|
<li><a href="#categories" class="text-gray-400 hover:text-white">الأقسام</a></li> |
|
|
<li><a href="#offers" class="text-gray-400 hover:text-white">العروض</a></li> |
|
|
<li><a href="#about" class="text-gray-400 hover:text-white">من نحن</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h3 class="text-xl font-bold mb-4">خدمة العملاء</h3> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">اتصل بنا</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">الأسئلة الشائعة</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">سياسة الإرجاع</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">شروط الاستخدام</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">سياسة الخصوصية</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h3 class="text-xl font-bold mb-4">تواصل معنا</h3> |
|
|
<div class="flex space-x-4 space-x-reverse mb-4"> |
|
|
<a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-facebook-f text-xl"></i></a> |
|
|
<a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-twitter text-xl"></i></a> |
|
|
<a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-instagram text-xl"></i></a> |
|
|
<a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-snapchat text-xl"></i></a> |
|
|
</div> |
|
|
<p class="text-gray-400"><i class="fas fa-phone-alt mr-2"></i> 920000000</p> |
|
|
<p class="text-gray-400 mt-2"><i class="fas fa-envelope mr-2"></i> info@cosmetek.com</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-400"> |
|
|
<p>© 2023 كوزمتك. جميع الحقوق محفوظة.</p> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
<script> |
|
|
|
|
|
document.getElementById('mobile-menu-btn').addEventListener('click', function() { |
|
|
const menu = document.getElementById('mobile-menu'); |
|
|
menu.classList.toggle('hidden'); |
|
|
}); |
|
|
|
|
|
|
|
|
document.getElementById('cart-btn').addEventListener('click', function() { |
|
|
const dropdown = document.getElementById('cart-dropdown'); |
|
|
dropdown.classList.toggle('hidden'); |
|
|
}); |
|
|
|
|
|
|
|
|
document.addEventListener('click', function(event) { |
|
|
const cartBtn = document.getElementById('cart-btn'); |
|
|
const cartDropdown = document.getElementById('cart-dropdown'); |
|
|
|
|
|
if (!cartBtn.contains(event.target) && !cartDropdown.contains(event.target)) { |
|
|
cartDropdown.classList.add('hidden'); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
const categoryBtns = document.querySelectorAll('.category-btn'); |
|
|
const productCards = document.querySelectorAll('.product-card'); |
|
|
|
|
|
categoryBtns.forEach(btn => { |
|
|
btn.addEventListener('click', function() { |
|
|
|
|
|
categoryBtns.forEach(b => b.classList.remove('active', 'bg-pink-100', 'text-pink-600')); |
|
|
categoryBtns.forEach(b => b.classList.add('bg-gray-200', 'text-gray-700')); |
|
|
|
|
|
|
|
|
this.classList.add('active', 'bg-pink-100', 'text-pink-600'); |
|
|
this.classList.remove('bg-gray-200', 'text-gray-700'); |
|
|
|
|
|
const category = this.dataset.category; |
|
|
|
|
|
|
|
|
productCards.forEach(card => { |
|
|
if (category === 'all' || card.dataset.category === category) { |
|
|
card.style.display = 'block'; |
|
|
} else { |
|
|
card.style.display = 'none'; |
|
|
} |
|
|
}); |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
let cart = []; |
|
|
|
|
|
|
|
|
if (localStorage.getItem('cart')) { |
|
|
cart = JSON.parse(localStorage.getItem('cart')); |
|
|
updateCartUI(); |
|
|
} |
|
|
|
|
|
|
|
|
document.querySelectorAll('.add-to-cart').forEach(button => { |
|
|
button.addEventListener('click', function() { |
|
|
const id = this.dataset.id; |
|
|
const name = this.dataset.name; |
|
|
const price = parseFloat(this.dataset.price); |
|
|
const image = this.dataset.image; |
|
|
|
|
|
|
|
|
const existingItem = cart.find(item => item.id === id); |
|
|
|
|
|
if (existingItem) { |
|
|
existingItem.quantity += 1; |
|
|
} else { |
|
|
cart.push({ |
|
|
id, |
|
|
name, |
|
|
price, |
|
|
image, |
|
|
quantity: 1 |
|
|
}); |
|
|
} |
|
|
|
|
|
|
|
|
localStorage.setItem('cart', JSON.stringify(cart)); |
|
|
|
|
|
|
|
|
updateCartUI(); |
|
|
|
|
|
|
|
|
showNotification(); |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
function updateCartUI() { |
|
|
const cartItemsContainer = document.getElementById('cart-items'); |
|
|
const cartCount = document.getElementById('cart-count'); |
|
|
const cartTotal = document.getElementById('cart-total'); |
|
|
|
|
|
|
|
|
const totalItems = cart.reduce((sum, item) => sum + item.quantity, 0); |
|
|
cartCount.textContent = totalItems; |
|
|
|
|
|
|
|
|
if (cart.length === 0) { |
|
|
cartItemsContainer.innerHTML = '<p class="text-center text-gray-500 py-4">سلة التسوق فارغة</p>'; |
|
|
cartTotal.textContent = '0 ر.س'; |
|
|
} else { |
|
|
let itemsHTML = ''; |
|
|
let total = 0; |
|
|
|
|
|
cart.forEach(item => { |
|
|
const itemTotal = item.price * item.quantity; |
|
|
total += itemTotal; |
|
|
|
|
|
itemsHTML += ` |
|
|
<div class="cart-item flex items-center py-3 border-b"> |
|
|
<img src="${item.image}" alt="${item.name}" class="w-12 h-12 object-cover rounded mr-3"> |
|
|
<div class="flex-grow"> |
|
|
<h4 class="font-medium">${item.name}</h4> |
|
|
<div class="flex justify-between text-sm text-gray-500"> |
|
|
<span>${item.price} ر.س × ${item.quantity}</span> |
|
|
<span>${itemTotal} ر.س</span> |
|
|
</div> |
|
|
</div> |
|
|
<button class="remove-item text-red-500 ml-2" data-id="${item.id}"> |
|
|
<i class="fas fa-times"></i> |
|
|
</button> |
|
|
</div> |
|
|
`; |
|
|
}); |
|
|
|
|
|
cartItemsContainer.innerHTML = itemsHTML; |
|
|
cartTotal.textContent = `${total} ر.س`; |
|
|
|
|
|
|
|
|
document.querySelectorAll('.remove-item').forEach(button => { |
|
|
button.addEventListener('click', function() { |
|
|
const itemId = this.dataset.id; |
|
|
removeFromCart(itemId); |
|
|
}); |
|
|
}); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
function removeFromCart(id) { |
|
|
cart = cart.filter(item => item.id !== id); |
|
|
localStorage.setItem('cart', JSON.stringify(cart)); |
|
|
updateCartUI(); |
|
|
} |
|
|
|
|
|
|
|
|
function showNotification() { |
|
|
const notification = document.getElementById('notification'); |
|
|
notification.classList.remove('hidden'); |
|
|
notification.classList.add('notification'); |
|
|
|
|
|
setTimeout(() => { |
|
|
notification.classList.add('hide'); |
|
|
setTimeout(() => { |
|
|
notification.classList.remove('notification', 'hide'); |
|
|
notification.classList.add('hidden'); |
|
|
}, 500); |
|
|
}, 3000); |
|
|
} |
|
|
</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=aaboode/cosmetics" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
