Hugging Face's logo

Spaces:
aaboode
/
cosmetics
Running

App Files Community
aaboode commited on
Commit
6368485
·
verified ·
1 Parent(s): a1c0df6

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +6 -4
  2. index.html +673 -19
  3. prompts.txt +1 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Cosmetics
3
- emoji: 🐠
4
  colorFrom: purple
5
- colorTo: gray
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: cosmetics
3
+ emoji: 🐳
4
  colorFrom: purple
5
+ colorTo: pink
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,673 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="ar" dir="rtl">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>كوزمتك - متجر مستحضرات التجميل</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ @import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;900&display=swap');
11
+
12
+ body {
13
+ font-family: 'Tajawal', sans-serif;
14
+ background-color: #fef6f6;
15
+ }
16
+
17
+ .hero-section {
18
+ 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');
19
+ background-size: cover;
20
+ background-position: center;
21
+ }
22
+
23
+ .product-card:hover {
24
+ transform: translateY(-5px);
25
+ box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
26
+ }
27
+
28
+ .category-btn.active {
29
+ background-color: #f472b6;
30
+ color: white;
31
+ }
32
+
33
+ .cart-item {
34
+ transition: all 0.3s ease;
35
+ }
36
+
37
+ .cart-item:hover {
38
+ background-color: #fef2f2;
39
+ }
40
+
41
+ .dropdown:hover .dropdown-menu {
42
+ display: block;
43
+ }
44
+
45
+ /* Animation for notification */
46
+ @keyframes slideIn {
47
+ from { transform: translateX(100%); opacity: 0; }
48
+ to { transform: translateX(0); opacity: 1; }
49
+ }
50
+
51
+ @keyframes slideOut {
52
+ from { transform: translateX(0); opacity: 1; }
53
+ to { transform: translateX(100%); opacity: 0; }
54
+ }
55
+
56
+ .notification {
57
+ animation: slideIn 0.5s forwards;
58
+ }
59
+
60
+ .notification.hide {
61
+ animation: slideOut 0.5s forwards;
62
+ }
63
+ </style>
64
+ </head>
65
+ <body class="text-gray-800">
66
+ <!-- شريط التنقل العلوي -->
67
+ <nav class="bg-white shadow-lg sticky top-0 z-50">
68
+ <div class="container mx-auto px-4 py-3 flex justify-between items-center">
69
+ <!-- الشعار -->
70
+ <div class="flex items-center">
71
+ <a href="#" class="text-2xl font-bold text-pink-500">كوزمتك</a>
72
+ </div>
73
+
74
+ <!-- روابط التنقل -->
75
+ <div class="hidden md:flex space-x-6 space-x-reverse">
76
+ <a href="#" class="text-gray-700 hover:text-pink-500 font-medium">الرئيسية</a>
77
+ <a href="#products" class="text-gray-700 hover:text-pink-500 font-medium">المنتجات</a>
78
+ <a href="#categories" class="text-gray-700 hover:text-pink-500 font-medium">الأقسام</a>
79
+ <a href="#offers" class="text-gray-700 hover:text-pink-500 font-medium">العروض</a>
80
+ <a href="#about" class="text-gray-700 hover:text-pink-500 font-medium">من نحن</a>
81
+ </div>
82
+
83
+ <!-- أيقونات المستخدم والسلة -->
84
+ <div class="flex items-center space-x-4 space-x-reverse">
85
+ <a href="#" class="text-gray-700 hover:text-pink-500">
86
+ <i class="fas fa-user text-xl"></i>
87
+ </a>
88
+ <div class="relative">
89
+ <button id="cart-btn" class="text-gray-700 hover:text-pink-500 relative">
90
+ <i class="fas fa-shopping-cart text-xl"></i>
91
+ <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>
92
+ </button>
93
+ <!-- سلة التسوق المنبثقة -->
94
+ <div id="cart-dropdown" class="hidden absolute right-0 mt-2 w-72 bg-white rounded-md shadow-lg py-2 z-50">
95
+ <div id="cart-items" class="max-h-60 overflow-y-auto px-4 py-2">
96
+ <p class="text-center text-gray-500 py-4">سلة التسوق فارغة</p>
97
+ </div>
98
+ <div class="border-t px-4 py-2">
99
+ <div class="flex justify-between mb-2">
100
+ <span>المجموع:</span>
101
+ <span id="cart-total" class="font-bold">0 ر.س</span>
102
+ </div>
103
+ <a href="checkout.html" class="block w-full bg-pink-500 text-white text-center py-2 rounded hover:bg-pink-600">الدفع</a>
104
+ </div>
105
+ </div>
106
+ </div>
107
+ <button id="mobile-menu-btn" class="md:hidden text-gray-700">
108
+ <i class="fas fa-bars text-xl"></i>
109
+ </button>
110
+ </div>
111
+ </div>
112
+
113
+ <!-- قائمة الجوال -->
114
+ <div id="mobile-menu" class="hidden md:hidden bg-white py-2 px-4">
115
+ <a href="#" class="block py-2 text-gray-700 hover:text-pink-500">الرئيسية</a>
116
+ <a href="#products" class="block py-2 text-gray-700 hover:text-pink-500">المنتجات</a>
117
+ <a href="#categories" class="block py-2 text-gray-700 hover:text-pink-500">الأقسام</a>
118
+ <a href="#offers" class="block py-2 text-gray-700 hover:text-pink-500">العروض</a>
119
+ <a href="#about" class="block py-2 text-gray-700 hover:text-pink-500">من نحن</a>
120
+ </div>
121
+ </nav>
122
+
123
+ <!-- إشعار الإضافة للسلة -->
124
+ <div id="notification" class="fixed bottom-4 right-4 bg-green-500 text-white px-4 py-2 rounded shadow-lg hidden z-50">
125
+ <div class="flex items-center">
126
+ <i class="fas fa-check-circle mr-2"></i>
127
+ <span>تمت إضافة المنتج إلى سلة التسوق</span>
128
+ </div>
129
+ </div>
130
+
131
+ <!-- قسم البطل -->
132
+ <section class="hero-section text-white py-20">
133
+ <div class="container mx-auto px-4 text-center">
134
+ <h1 class="text-4xl md:text-5xl font-bold mb-4">اكتشف جمالك مع كوزمتك</h1>
135
+ <p class="text-xl mb-8">أفضل مستحضرات التجميل والعناية بالبشرة من أشهر الماركات العالمية</p>
136
+ <a href="#products" class="bg-pink-500 hover:bg-pink-600 text-white font-bold py-3 px-8 rounded-full">تسوق الآن</a>
137
+ </div>
138
+ </section>
139
+
140
+ <!-- قسم العروض الخاصة -->
141
+ <section id="offers" class="py-12 bg-white">
142
+ <div class="container mx-auto px-4">
143
+ <h2 class="text-3xl font-bold text-center mb-10">عروض خاصة</h2>
144
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
145
+ <!-- عرض 1 -->
146
+ <div class="bg-pink-50 rounded-lg p-6 flex flex-col md:flex-row items-center">
147
+ <div class="md:mr-4 mb-4 md:mb-0">
148
+ <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">
149
+ </div>
150
+ <div>
151
+ <h3 class="text-xl font-bold mb-2">خصم 30% على المكياج</h3>
152
+ <p class="text-gray-600 mb-3">احصل على خصم 30% على جميع منتجات المكياج لمدة محدودة</p>
153
+ <a href="#" class="text-pink-500 font-medium">تسوق الآن <i class="fas fa-arrow-left mr-1"></i></a>
154
+ </div>
155
+ </div>
156
+
157
+ <!-- عرض 2 -->
158
+ <div class="bg-pink-50 rounded-lg p-6 flex flex-col md:flex-row items-center">
159
+ <div class="md:mr-4 mb-4 md:mb-0">
160
+ <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">
161
+ </div>
162
+ <div>
163
+ <h3 class="text-xl font-bold mb-2">مجموعة العناية بالبشرة</h3>
164
+ <p class="text-gray-600 mb-3">اشترِ 3 منتجات واحصل على الرابع مجانًا من منتجات العناية بالبشرة</p>
165
+ <a href="#" class="text-pink-500 font-medium">تسوق الآن <i class="fas fa-arrow-left mr-1"></i></a>
166
+ </div>
167
+ </div>
168
+
169
+ <!-- عرض 3 -->
170
+ <div class="bg-pink-50 rounded-lg p-6 flex flex-col md:flex-row items-center">
171
+ <div class="md:mr-4 mb-4 md:mb-0">
172
+ <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">
173
+ </div>
174
+ <div>
175
+ <h3 class="text-xl font-bold mb-2">شحن مجاني</h3>
176
+ <p class="text-gray-600 mb-3">احصل على شحن مجاني لجميع الطلبات فوق 200 ريال</p>
177
+ <a href="#" class="text-pink-500 font-medium">تسوق الآن <i class="fas fa-arrow-left mr-1"></i></a>
178
+ </div>
179
+ </div>
180
+ </div>
181
+ </div>
182
+ </section>
183
+
184
+ <!-- قسم الأقسام -->
185
+ <section id="categories" class="py-12 bg-gray-50">
186
+ <div class="container mx-auto px-4">
187
+ <h2 class="text-3xl font-bold text-center mb-10">تصفح حسب الأقسام</h2>
188
+ <div class="flex flex-wrap justify-center gap-4 mb-10">
189
+ <button class="category-btn active px-4 py-2 rounded-full bg-pink-100 text-pink-600 font-medium" data-category="all">الكل</button>
190
+ <button class="category-btn px-4 py-2 rounded-full bg-gray-200 text-gray-700 font-medium" data-category="makeup">المكياج</button>
191
+ <button class="category-btn px-4 py-2 rounded-full bg-gray-200 text-gray-700 font-medium" data-category="skincare">العناية بالبشرة</button>
192
+ <button class="category-btn px-4 py-2 rounded-full bg-gray-200 text-gray-700 font-medium" data-category="hair">العناية بالشعر</button>
193
+ <button class="category-btn px-4 py-2 rounded-full bg-gray-200 text-gray-700 font-medium" data-category="fragrance">العطور</button>
194
+ </div>
195
+ </div>
196
+ </section>
197
+
198
+ <!-- قسم المنتجات -->
199
+ <section id="products" class="py-12 bg-white">
200
+ <div class="container mx-auto px-4">
201
+ <h2 class="text-3xl font-bold text-center mb-10">منتجاتنا</h2>
202
+ <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-8">
203
+ <!-- منتج 1 -->
204
+ <div class="product-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300" data-category="makeup">
205
+ <div class="relative">
206
+ <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">
207
+ <span class="absolute top-2 right-2 bg-pink-500 text-white text-xs px-2 py-1 rounded">جديد</span>
208
+ </div>
209
+ <div class="p-4">
210
+ <h3 class="text-lg font-bold mb-2">أحمر شفاه مات</h3>
211
+ <p class="text-gray-600 text-sm mb-3">لون طبيعي يدوم طويلاً</p>
212
+ <div class="flex justify-between items-center">
213
+ <span class="text-pink-500 font-bold">45 ر.س</span>
214
+ <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">
215
+ <i class="fas fa-cart-plus mr-1"></i> إضافة
216
+ </button>
217
+ </div>
218
+ </div>
219
+ </div>
220
+
221
+ <!-- منتج 2 -->
222
+ <div class="product-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300" data-category="skincare">
223
+ <div class="relative">
224
+ <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">
225
+ <span class="absolute top-2 right-2 bg-red-500 text-white text-xs px-2 py-1 rounded">عرض</span>
226
+ </div>
227
+ <div class="p-4">
228
+ <h3 class="text-lg font-bold mb-2">مرطب يومي للبشرة</h3>
229
+ <p class="text-gray-600 text-sm mb-3">للحصول على بشرة ناعمة ورطبة</p>
230
+ <div class="flex justify-between items-center">
231
+ <span class="text-pink-500 font-bold">85 ر.س</span>
232
+ <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">
233
+ <i class="fas fa-cart-plus mr-1"></i> إضافة
234
+ </button>
235
+ </div>
236
+ </div>
237
+ </div>
238
+
239
+ <!-- منتج 3 -->
240
+ <div class="product-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300" data-category="makeup">
241
+ <div class="relative">
242
+ <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">
243
+ </div>
244
+ <div class="p-4">
245
+ <h3 class="text-lg font-bold mb-2">ظل عيون بألوان متعددة</h3>
246
+ <p class="text-gray-600 text-sm mb-3">مجموعة من 12 لون</p>
247
+ <div class="flex justify-between items-center">
248
+ <span class="text-pink-500 font-bold">120 ر.س</span>
249
+ <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">
250
+ <i class="fas fa-cart-plus mr-1"></i> إضافة
251
+ </button>
252
+ </div>
253
+ </div>
254
+ </div>
255
+
256
+ <!-- منتج 4 -->
257
+ <div class="product-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300" data-category="hair">
258
+ <div class="relative">
259
+ <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">
260
+ </div>
261
+ <div class="p-4">
262
+ <h3 class="text-lg font-bold mb-2">شامبو للشعر الجاف</h3>
263
+ <p class="text-gray-600 text-sm mb-3">يغذي ويرطب الشعر</p>
264
+ <div class="flex justify-between items-center">
265
+ <span class="text-pink-500 font-bold">65 ر.س</span>
266
+ <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">
267
+ <i class="fas fa-cart-plus mr-1"></i> إضافة
268
+ </button>
269
+ </div>
270
+ </div>
271
+ </div>
272
+
273
+ <!-- منتج 5 -->
274
+ <div class="product-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300" data-category="fragrance">
275
+ <div class="relative">
276
+ <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">
277
+ <span class="absolute top-2 right-2 bg-green-500 text-white text-xs px-2 py-1 rounded">الأكثر مبيعاً</span>
278
+ </div>
279
+ <div class="p-4">
280
+ <h3 class="text-lg font-bold mb-2">عطر نسائي فاخر</h3>
281
+ <p class="text-gray-600 text-sm mb-3">رائحة تدوم طوال اليوم</p>
282
+ <div class="flex justify-between items-center">
283
+ <span class="text-pink-500 font-bold">250 ر.س</span>
284
+ <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">
285
+ <i class="fas fa-cart-plus mr-1"></i> إضافة
286
+ </button>
287
+ </div>
288
+ </div>
289
+ </div>
290
+
291
+ <!-- منتج 6 -->
292
+ <div class="product-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300" data-category="skincare">
293
+ <div class="relative">
294
+ <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">
295
+ </div>
296
+ <div class="p-4">
297
+ <h3 class="text-lg font-bold mb-2">مقشر للبشرة</h3>
298
+ <p class="text-gray-600 text-sm mb-3">لإزالة الخلايا الميتة</p>
299
+ <div class="flex justify-between items-center">
300
+ <span class="text-pink-500 font-bold">75 ر.س</span>
301
+ <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">
302
+ <i class="fas fa-cart-plus mr-1"></i> إضافة
303
+ </button>
304
+ </div>
305
+ </div>
306
+ </div>
307
+
308
+ <!-- منتج 7 -->
309
+ <div class="product-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300" data-category="makeup">
310
+ <div class="relative">
311
+ <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">
312
+ </div>
313
+ <div class="p-4">
314
+ <h3 class="text-lg font-bold mb-2">كونسيلر عالي التغطية</h3>
315
+ <p class="text-gray-600 text-sm mb-3">يخفي العيوب والهالات</p>
316
+ <div class="flex justify-between items-center">
317
+ <span class="text-pink-500 font-bold">55 ر.س</span>
318
+ <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">
319
+ <i class="fas fa-cart-plus mr-1"></i> إضافة
320
+ </button>
321
+ </div>
322
+ </div>
323
+ </div>
324
+
325
+ <!-- منتج 8 -->
326
+ <div class="product-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300" data-category="hair">
327
+ <div class="relative">
328
+ <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">
329
+ </div>
330
+ <div class="p-4">
331
+ <h3 class="text-lg font-bold mb-2">بلسم للشعر التالف</h3>
332
+ <p class="text-gray-600 text-sm mb-3">يصلح الشعر ويجعله لامعاً</p>
333
+ <div class="flex justify-between items-center">
334
+ <span class="text-pink-500 font-bold">70 ر.س</span>
335
+ <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">
336
+ <i class="fas fa-cart-plus mr-1"></i> إضافة
337
+ </button>
338
+ </div>
339
+ </div>
340
+ </div>
341
+ </div>
342
+
343
+ <div class="text-center mt-10">
344
+ <a href="#" class="inline-block bg-pink-500 hover:bg-pink-600 text-white font-bold py-3 px-8 rounded-full">عرض المزيد</a>
345
+ </div>
346
+ </div>
347
+ </section>
348
+
349
+ <!-- قسم لماذا نحن -->
350
+ <section id="about" class="py-16 bg-gray-50">
351
+ <div class="container mx-auto px-4">
352
+ <h2 class="text-3xl font-bold text-center mb-12">لماذا تختار كوزمتك؟</h2>
353
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
354
+ <div class="text-center">
355
+ <div class="bg-pink-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
356
+ <i class="fas fa-check-circle text-pink-500 text-2xl"></i>
357
+ </div>
358
+ <h3 class="text-xl font-bold mb-2">منتجات أصلية</h3>
359
+ <p class="text-gray-600">جميع منتجاتنا أصلية وذات جودة عالية من أشهر الماركات العالمية</p>
360
+ </div>
361
+
362
+ <div class="text-center">
363
+ <div class="bg-pink-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
364
+ <i class="fas fa-truck text-pink-500 text-2xl"></i>
365
+ </div>
366
+ <h3 class="text-xl font-bold mb-2">شحن سريع</h3>
367
+ <p class="text-gray-600">نوفر خدمة توصيل سريعة وآمنة لجميع أنحاء المملكة</p>
368
+ </div>
369
+
370
+ <div class="text-center">
371
+ <div class="bg-pink-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
372
+ <i class="fas fa-headset text-pink-500 text-2xl"></i>
373
+ </div>
374
+ <h3 class="text-xl font-bold mb-2">دعم فني</h3>
375
+ <p class="text-gray-600">فريق دعم فني متاح على مدار الساعة لمساعدتك في أي استفسار</p>
376
+ </div>
377
+ </div>
378
+ </div>
379
+ </section>
380
+
381
+ <!-- قسم آراء العملاء -->
382
+ <section class="py-16 bg-white">
383
+ <div class="container mx-auto px-4">
384
+ <h2 class="text-3xl font-bold text-center mb-12">آراء عملائنا</h2>
385
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
386
+ <!-- رأي 1 -->
387
+ <div class="bg-gray-50 p-6 rounded-lg">
388
+ <div class="flex items-center mb-4">
389
+ <img src="https://randomuser.me/api/portraits/women/32.jpg" alt="عميلة" class="w-12 h-12 rounded-full mr-4">
390
+ <div>
391
+ <h4 class="font-bold">سارة محمد</h4>
392
+ <div class="flex text-yellow-400">
393
+ <i class="fas fa-star"></i>
394
+ <i class="fas fa-star"></i>
395
+ <i class="fas fa-star"></i>
396
+ <i class="fas fa-star"></i>
397
+ <i class="fas fa-star"></i>
398
+ </div>
399
+ </div>
400
+ </div>
401
+ <p class="text-gray-600">"أحب المنتجات في كوزمتك، جودتها ممتازة والتوصيل سريع جداً. أنصح الجميع بالتسوق من هنا"</p>
402
+ </div>
403
+
404
+ <!-- رأي 2 -->
405
+ <div class="bg-gray-50 p-6 rounded-lg">
406
+ <div class="flex items-center mb-4">
407
+ <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="عميلة" class="w-12 h-12 rounded-full mr-4">
408
+ <div>
409
+ <h4 class="font-bold">نورا أحمد</h4>
410
+ <div class="flex text-yellow-400">
411
+ <i class="fas fa-star"></i>
412
+ <i class="fas fa-star"></i>
413
+ <i class="fas fa-star"></i>
414
+ <i class="fas fa-star"></i>
415
+ <i class="fas fa-star-half-alt"></i>
416
+ </div>
417
+ </div>
418
+ </div>
419
+ <p class="text-gray-600">"تجربة تسوق رائعة، المنتجات أصلية تماماً كما وصفوها. شكراً كوزمتك على الخدمة المميزة"</p>
420
+ </div>
421
+
422
+ <!-- رأي 3 -->
423
+ <div class="bg-gray-50 p-6 rounded-lg">
424
+ <div class="flex items-center mb-4">
425
+ <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="عميلة" class="w-12 h-12 rounded-full mr-4">
426
+ <div>
427
+ <h4 class="font-bold">لمى عبدالله</h4>
428
+ <div class="flex text-yellow-400">
429
+ <i class="fas fa-star"></i>
430
+ <i class="fas fa-star"></i>
431
+ <i class="fas fa-star"></i>
432
+ <i class="fas fa-star"></i>
433
+ <i class="fas fa-star"></i>
434
+ </div>
435
+ </div>
436
+ </div>
437
+ <p class="text-gray-600">"اشتريت عدة مرات من الموقع وكل مرة أكون أكثر إعجاباً. فريق العمل محترف جداً والمنتجات ممتازة"</p>
438
+ </div>
439
+ </div>
440
+ </div>
441
+ </section>
442
+
443
+ <!-- قسم النشرة البريدية -->
444
+ <section class="py-16 bg-pink-50">
445
+ <div class="container mx-auto px-4 text-center">
446
+ <h2 class="text-3xl font-bold mb-4">اشترك في نشرتنا البريدية</h2>
447
+ <p class="text-gray-600 mb-8 max-w-2xl mx-auto">احصل ��لى آخر العروض والتخفيضات مباشرة إلى بريدك الإلكتروني</p>
448
+ <form class="flex flex-col sm:flex-row justify-center max-w-md mx-auto">
449
+ <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">
450
+ <button type="submit" class="bg-pink-500 hover:bg-pink-600 text-white font-bold px-6 py-3 rounded-full">اشترك الآن</button>
451
+ </form>
452
+ </div>
453
+ </section>
454
+
455
+ <!-- تذييل الصفحة -->
456
+ <footer class="bg-gray-900 text-white py-12">
457
+ <div class="container mx-auto px-4">
458
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
459
+ <div>
460
+ <h3 class="text-xl font-bold mb-4">كوزمتك</h3>
461
+ <p class="text-gray-400">متجرك الأول لمستحضرات التجميل والعناية بالبشرة والشعر. نقدم أفضل المنتجات العالمية بأسعار تنافسية.</p>
462
+ </div>
463
+
464
+ <div>
465
+ <h3 class="text-xl font-bold mb-4">روابط سريعة</h3>
466
+ <ul class="space-y-2">
467
+ <li><a href="#" class="text-gray-400 hover:text-white">الرئيسية</a></li>
468
+ <li><a href="#products" class="text-gray-400 hover:text-white">المنتجات</a></li>
469
+ <li><a href="#categories" class="text-gray-400 hover:text-white">الأقسام</a></li>
470
+ <li><a href="#offers" class="text-gray-400 hover:text-white">العروض</a></li>
471
+ <li><a href="#about" class="text-gray-400 hover:text-white">من نحن</a></li>
472
+ </ul>
473
+ </div>
474
+
475
+ <div>
476
+ <h3 class="text-xl font-bold mb-4">خدمة العملاء</h3>
477
+ <ul class="space-y-2">
478
+ <li><a href="#" class="text-gray-400 hover:text-white">اتصل بنا</a></li>
479
+ <li><a href="#" class="text-gray-400 hover:text-white">الأسئلة الشائعة</a></li>
480
+ <li><a href="#" class="text-gray-400 hover:text-white">سياسة الإرجاع</a></li>
481
+ <li><a href="#" class="text-gray-400 hover:text-white">شروط الاستخدام</a></li>
482
+ <li><a href="#" class="text-gray-400 hover:text-white">سياسة الخصوصية</a></li>
483
+ </ul>
484
+ </div>
485
+
486
+ <div>
487
+ <h3 class="text-xl font-bold mb-4">تواصل معنا</h3>
488
+ <div class="flex space-x-4 space-x-reverse mb-4">
489
+ <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-facebook-f text-xl"></i></a>
490
+ <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-twitter text-xl"></i></a>
491
+ <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-instagram text-xl"></i></a>
492
+ <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-snapchat text-xl"></i></a>
493
+ </div>
494
+ <p class="text-gray-400"><i class="fas fa-phone-alt mr-2"></i> 920000000</p>
495
+ <p class="text-gray-400 mt-2"><i class="fas fa-envelope mr-2"></i> info@cosmetek.com</p>
496
+ </div>
497
+ </div>
498
+
499
+ <div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-400">
500
+ <p>© 2023 كوزمتك. جميع الحقوق محفوظة.</p>
501
+ </div>
502
+ </div>
503
+ </footer>
504
+
505
+ <script>
506
+ // تفعيل القائمة المتنقلة
507
+ document.getElementById('mobile-menu-btn').addEventListener('click', function() {
508
+ const menu = document.getElementById('mobile-menu');
509
+ menu.classList.toggle('hidden');
510
+ });
511
+
512
+ // تفعيل سلة التسوق المنبثقة
513
+ document.getElementById('cart-btn').addEventListener('click', function() {
514
+ const dropdown = document.getElementById('cart-dropdown');
515
+ dropdown.classList.toggle('hidden');
516
+ });
517
+
518
+ // إغلاق السلة عند النقر خارجها
519
+ document.addEventListener('click', function(event) {
520
+ const cartBtn = document.getElementById('cart-btn');
521
+ const cartDropdown = document.getElementById('cart-dropdown');
522
+
523
+ if (!cartBtn.contains(event.target) && !cartDropdown.contains(event.target)) {
524
+ cartDropdown.classList.add('hidden');
525
+ }
526
+ });
527
+
528
+ // تصفية المنتجات حسب الأقسام
529
+ const categoryBtns = document.querySelectorAll('.category-btn');
530
+ const productCards = document.querySelectorAll('.product-card');
531
+
532
+ categoryBtns.forEach(btn => {
533
+ btn.addEventListener('click', function() {
534
+ // إزالة التنشيط من جميع الأزرار
535
+ categoryBtns.forEach(b => b.classList.remove('active', 'bg-pink-100', 'text-pink-600'));
536
+ categoryBtns.forEach(b => b.classList.add('bg-gray-200', 'text-gray-700'));
537
+
538
+ // تنشيط الزر المحدد
539
+ this.classList.add('active', 'bg-pink-100', 'text-pink-600');
540
+ this.classList.remove('bg-gray-200', 'text-gray-700');
541
+
542
+ const category = this.dataset.category;
543
+
544
+ // تصفية المنتجات
545
+ productCards.forEach(card => {
546
+ if (category === 'all' || card.dataset.category === category) {
547
+ card.style.display = 'block';
548
+ } else {
549
+ card.style.display = 'none';
550
+ }
551
+ });
552
+ });
553
+ });
554
+
555
+ // سلة التسوق
556
+ let cart = [];
557
+
558
+ // تحميل السلة من localStorage إذا كانت موجودة
559
+ if (localStorage.getItem('cart')) {
560
+ cart = JSON.parse(localStorage.getItem('cart'));
561
+ updateCartUI();
562
+ }
563
+
564
+ // إضافة منتج إلى السلة
565
+ document.querySelectorAll('.add-to-cart').forEach(button => {
566
+ button.addEventListener('click', function() {
567
+ const id = this.dataset.id;
568
+ const name = this.dataset.name;
569
+ const price = parseFloat(this.dataset.price);
570
+ const image = this.dataset.image;
571
+
572
+ // التحقق مما إذا كان المنتج موجودًا بالفعل في السلة
573
+ const existingItem = cart.find(item => item.id === id);
574
+
575
+ if (existingItem) {
576
+ existingItem.quantity += 1;
577
+ } else {
578
+ cart.push({
579
+ id,
580
+ name,
581
+ price,
582
+ image,
583
+ quantity: 1
584
+ });
585
+ }
586
+
587
+ // حفظ السلة في localStorage
588
+ localStorage.setItem('cart', JSON.stringify(cart));
589
+
590
+ // تحديث واجهة المستخدم
591
+ updateCartUI();
592
+
593
+ // عرض إشعار
594
+ showNotification();
595
+ });
596
+ });
597
+
598
+ // تحديث واجهة سلة التسوق
599
+ function updateCartUI() {
600
+ const cartItemsContainer = document.getElementById('cart-items');
601
+ const cartCount = document.getElementById('cart-count');
602
+ const cartTotal = document.getElementById('cart-total');
603
+
604
+ // تحديث عدد العناصر
605
+ const totalItems = cart.reduce((sum, item) => sum + item.quantity, 0);
606
+ cartCount.textContent = totalItems;
607
+
608
+ // تحديث قائمة العناصر
609
+ if (cart.length === 0) {
610
+ cartItemsContainer.innerHTML = '<p class="text-center text-gray-500 py-4">سلة التسوق فارغة</p>';
611
+ cartTotal.textContent = '0 ر.س';
612
+ } else {
613
+ let itemsHTML = '';
614
+ let total = 0;
615
+
616
+ cart.forEach(item => {
617
+ const itemTotal = item.price * item.quantity;
618
+ total += itemTotal;
619
+
620
+ itemsHTML += `
621
+ <div class="cart-item flex items-center py-3 border-b">
622
+ <img src="${item.image}" alt="${item.name}" class="w-12 h-12 object-cover rounded mr-3">
623
+ <div class="flex-grow">
624
+ <h4 class="font-medium">${item.name}</h4>
625
+ <div class="flex justify-between text-sm text-gray-500">
626
+ <span>${item.price} ر.س × ${item.quantity}</span>
627
+ <span>${itemTotal} ر.س</span>
628
+ </div>
629
+ </div>
630
+ <button class="remove-item text-red-500 ml-2" data-id="${item.id}">
631
+ <i class="fas fa-times"></i>
632
+ </button>
633
+ </div>
634
+ `;
635
+ });
636
+
637
+ cartItemsContainer.innerHTML = itemsHTML;
638
+ cartTotal.textContent = `${total} ر.س`;
639
+
640
+ // إضافة معالجات الأحداث لأزرار الحذف
641
+ document.querySelectorAll('.remove-item').forEach(button => {
642
+ button.addEventListener('click', function() {
643
+ const itemId = this.dataset.id;
644
+ removeFromCart(itemId);
645
+ });
646
+ });
647
+ }
648
+ }
649
+
650
+ // إزالة منتج من السلة
651
+ function removeFromCart(id) {
652
+ cart = cart.filter(item => item.id !== id);
653
+ localStorage.setItem('cart', JSON.stringify(cart));
654
+ updateCartUI();
655
+ }
656
+
657
+ // عرض إشعار الإضافة للسلة
658
+ function showNotification() {
659
+ const notification = document.getElementById('notification');
660
+ notification.classList.remove('hidden');
661
+ notification.classList.add('notification');
662
+
663
+ setTimeout(() => {
664
+ notification.classList.add('hide');
665
+ setTimeout(() => {
666
+ notification.classList.remove('notification', 'hide');
667
+ notification.classList.add('hidden');
668
+ }, 500);
669
+ }, 3000);
670
+ }
671
+ </script>
672
+ <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>
673
+ </html>
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ صمم موقع لكوزمتك لبيع مستحضرات التجميل مع تفعيل كامل الصفحات والأقسام والمميزات