Hugging Face's logo

Spaces:
Mishak
/
e-commerce
Running

App Files Community
Mishak commited on
Commit
1cea404
·
verified ·
1 Parent(s): 158921b

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +574 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: E Commerce
3
- emoji: 🐠
4
- colorFrom: indigo
5
- colorTo: yellow
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: e-commerce
3
+ emoji: 🐳
4
+ colorFrom: blue
5
+ colorTo: blue
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,574 @@
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="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>ShopSphere - Modern E-commerce Store</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
+ /* Custom CSS for elements that need more styling than Tailwind provides */
11
+ .product-card:hover {
12
+ transform: translateY(-5px);
13
+ box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
14
+ }
15
+ .cart-item:hover {
16
+ background-color: #f8fafc;
17
+ }
18
+ .checkout-step.active {
19
+ border-color: #3b82f6;
20
+ color: #3b82f6;
21
+ }
22
+ .checkout-step.completed {
23
+ border-color: #10b981;
24
+ color: #10b981;
25
+ }
26
+ .dropdown:hover .dropdown-menu {
27
+ display: block;
28
+ }
29
+ .product-image {
30
+ transition: transform 0.3s ease;
31
+ }
32
+ .product-image:hover {
33
+ transform: scale(1.05);
34
+ }
35
+ @keyframes fadeIn {
36
+ from { opacity: 0; }
37
+ to { opacity: 1; }
38
+ }
39
+ .fade-in {
40
+ animation: fadeIn 0.5s ease-in;
41
+ }
42
+ </style>
43
+ </head>
44
+ <body class="bg-gray-50 font-sans">
45
+ <!-- Navigation -->
46
+ <nav class="bg-white shadow-md sticky top-0 z-50">
47
+ <div class="container mx-auto px-4 py-3 flex justify-between items-center">
48
+ <div class="flex items-center space-x-4">
49
+ <button onclick="showPage('home')" class="text-2xl font-bold text-blue-600 flex items-center">
50
+ <i class="fas fa-shopping-bag mr-2"></i> ShopSphere
51
+ </button>
52
+ <div class="hidden md:flex space-x-6">
53
+ <button onclick="showPage('home')" class="text-gray-700 hover:text-blue-600">Home</button>
54
+ <div class="dropdown relative">
55
+ <button class="text-gray-700 hover:text-blue-600 flex items-center">
56
+ Shop <i class="fas fa-chevron-down ml-1 text-xs"></i>
57
+ </button>
58
+ <div class="dropdown-menu absolute hidden bg-white shadow-lg rounded-md mt-2 py-2 w-48">
59
+ <button onclick="showPage('products')" class="block px-4 py-2 text-gray-700 hover:bg-gray-100 w-full text-left">All Products</button>
60
+ <button onclick="filterProducts('electronics')" class="block px-4 py-2 text-gray-700 hover:bg-gray-100 w-full text-left">Electronics</button>
61
+ <button onclick="filterProducts('clothing')" class="block px-4 py-2 text-gray-700 hover:bg-gray-100 w-full text-left">Clothing</button>
62
+ <button onclick="filterProducts('home')" class="block px-4 py-2 text-gray-700 hover:bg-gray-100 w-full text-left">Home & Garden</button>
63
+ </div>
64
+ </div>
65
+ <button onclick="showPage('about')" class="text-gray-700 hover:text-blue-600">About</button>
66
+ <button onclick="showPage('contact')" class="text-gray-700 hover:text-blue-600">Contact</button>
67
+ </div>
68
+ </div>
69
+ <div class="flex items-center space-x-4">
70
+ <button onclick="showPage('search')" class="text-gray-600 hover:text-blue-600">
71
+ <i class="fas fa-search"></i>
72
+ </button>
73
+ <button onclick="showPage('account')" class="text-gray-600 hover:text-blue-600">
74
+ <i class="fas fa-user"></i>
75
+ </button>
76
+ <button onclick="showPage('cart')" class="text-gray-600 hover:text-blue-600 relative">
77
+ <i class="fas fa-shopping-cart"></i>
78
+ <span id="cart-count" class="absolute -top-2 -right-2 bg-blue-600 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">0</span>
79
+ </button>
80
+ <button onclick="toggleMobileMenu()" class="md:hidden text-gray-600">
81
+ <i class="fas fa-bars text-xl"></i>
82
+ </button>
83
+ </div>
84
+ </div>
85
+ <!-- Mobile menu -->
86
+ <div id="mobile-menu" class="hidden md:hidden bg-white border-t">
87
+ <div class="container mx-auto px-4 py-2 flex flex-col space-y-2">
88
+ <button onclick="showPage('home')" class="text-gray-700 hover:text-blue-600 py-2">Home</button>
89
+ <button onclick="showPage('products')" class="text-gray-700 hover:text-blue-600 py-2">Shop</button>
90
+ <button onclick="showPage('about')" class="text-gray-700 hover:text-blue-600 py-2">About</button>
91
+ <button onclick="showPage('contact')" class="text-gray-700 hover:text-blue-600 py-2">Contact</button>
92
+ <button onclick="showPage('account')" class="text-gray-700 hover:text-blue-600 py-2">Account</button>
93
+ </div>
94
+ </div>
95
+ </nav>
96
+
97
+ <!-- Page Content -->
98
+ <div id="page-content" class="container mx-auto px-4 py-8 fade-in">
99
+ <!-- Home Page (default) -->
100
+ <div id="home-page">
101
+ <!-- Hero Section -->
102
+ <section class="bg-gradient-to-r from-blue-500 to-purple-600 text-white rounded-xl p-8 mb-12">
103
+ <div class="max-w-2xl mx-auto text-center">
104
+ <h1 class="text-4xl md:text-5xl font-bold mb-4">Summer Sale is Here!</h1>
105
+ <p class="text-xl mb-6">Up to 50% off on selected items. Limited time offer.</p>
106
+ <button onclick="showPage('products')" class="bg-white text-blue-600 font-bold py-3 px-8 rounded-full hover:bg-gray-100 transition duration-300">
107
+ Shop Now
108
+ </button>
109
+ </div>
110
+ </section>
111
+
112
+ <!-- Featured Categories -->
113
+ <section class="mb-12">
114
+ <h2 class="text-2xl font-bold mb-6">Shop by Category</h2>
115
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
116
+ <button onclick="filterProducts('electronics')" class="bg-white rounded-lg shadow-sm p-4 text-center hover:shadow-md transition duration-300">
117
+ <div class="bg-blue-100 w-16 h-16 mx-auto rounded-full flex items-center justify-center mb-3">
118
+ <i class="fas fa-laptop text-blue-600 text-2xl"></i>
119
+ </div>
120
+ <h3 class="font-medium">Electronics</h3>
121
+ </button>
122
+ <button onclick="filterProducts('clothing')" class="bg-white rounded-lg shadow-sm p-4 text-center hover:shadow-md transition duration-300">
123
+ <div class="bg-pink-100 w-16 h-16 mx-auto rounded-full flex items-center justify-center mb-3">
124
+ <i class="fas fa-tshirt text-pink-600 text-2xl"></i>
125
+ </div>
126
+ <h3 class="font-medium">Clothing</h3>
127
+ </button>
128
+ <button onclick="filterProducts('home')" class="bg-white rounded-lg shadow-sm p-4 text-center hover:shadow-md transition duration-300">
129
+ <div class="bg-green-100 w-16 h-16 mx-auto rounded-full flex items-center justify-center mb-3">
130
+ <i class="fas fa-home text-green-600 text-2xl"></i>
131
+ </div>
132
+ <h3 class="font-medium">Home & Garden</h3>
133
+ </button>
134
+ <button onclick="filterProducts('accessories')" class="bg-white rounded-lg shadow-sm p-4 text-center hover:shadow-md transition duration-300">
135
+ <div class="bg-yellow-100 w-16 h-16 mx-auto rounded-full flex items-center justify-center mb-3">
136
+ <i class="fas fa-watch text-yellow-600 text-2xl"></i>
137
+ </div>
138
+ <h3 class="font-medium">Accessories</h3>
139
+ </button>
140
+ </div>
141
+ </section>
142
+
143
+ <!-- Featured Products -->
144
+ <section class="mb-12">
145
+ <div class="flex justify-between items-center mb-6">
146
+ <h2 class="text-2xl font-bold">Featured Products</h2>
147
+ <button onclick="showPage('products')" class="text-blue-600 hover:underline">View All</button>
148
+ </div>
149
+ <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
150
+ <!-- Product cards will be dynamically inserted here -->
151
+ </div>
152
+ </section>
153
+
154
+ <!-- Promo Banner -->
155
+ <section class="mb-12">
156
+ <div class="bg-gray-900 text-white rounded-xl overflow-hidden">
157
+ <div class="flex flex-col md:flex-row">
158
+ <div class="md:w-1/2 p-8 md:p-12 flex flex-col justify-center">
159
+ <h2 class="text-2xl md:text-3xl font-bold mb-4">New Arrivals</h2>
160
+ <p class="text-gray-300 mb-6">Discover our latest collection of premium products designed for modern living.</p>
161
+ <button onclick="showPage('products')" class="bg-white text-gray-900 font-bold py-2 px-6 rounded-full hover:bg-gray-200 transition duration-300 self-start">
162
+ Explore Now
163
+ </button>
164
+ </div>
165
+ <div class="md:w-1/2">
166
+ <img src="https://images.unsplash.com/photo-1555529669-e69e7aa0ba9a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80" alt="Promo" class="w-full h-full object-cover">
167
+ </div>
168
+ </div>
169
+ </div>
170
+ </section>
171
+
172
+ <!-- Testimonials -->
173
+ <section class="mb-12">
174
+ <h2 class="text-2xl font-bold mb-8 text-center">What Our Customers Say</h2>
175
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
176
+ <div class="bg-white p-6 rounded-lg shadow-sm">
177
+ <div class="flex items-center mb-4">
178
+ <div class="text-yellow-400 mr-2">
179
+ <i class="fas fa-star"></i>
180
+ <i class="fas fa-star"></i>
181
+ <i class="fas fa-star"></i>
182
+ <i class="fas fa-star"></i>
183
+ <i class="fas fa-star"></i>
184
+ </div>
185
+ </div>
186
+ <p class="text-gray-600 mb-4">"The quality of products is exceptional and the delivery was super fast. Will definitely shop here again!"</p>
187
+ <div class="flex items-center">
188
+ <div class="w-10 h-10 rounded-full bg-gray-300 mr-3 overflow-hidden">
189
+ <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Customer" class="w-full h-full object-cover">
190
+ </div>
191
+ <div>
192
+ <h4 class="font-medium">Sarah Johnson</h4>
193
+ <p class="text-gray-500 text-sm">Verified Buyer</p>
194
+ </div>
195
+ </div>
196
+ </div>
197
+ <div class="bg-white p-6 rounded-lg shadow-sm">
198
+ <div class="flex items-center mb-4">
199
+ <div class="text-yellow-400 mr-2">
200
+ <i class="fas fa-star"></i>
201
+ <i class="fas fa-star"></i>
202
+ <i class="fas fa-star"></i>
203
+ <i class="fas fa-star"></i>
204
+ <i class="fas fa-star"></i>
205
+ </div>
206
+ </div>
207
+ <p class="text-gray-600 mb-4">"Excellent customer service! They helped me choose the perfect gift for my wife's birthday."</p>
208
+ <div class="flex items-center">
209
+ <div class="w-10 h-10 rounded-full bg-gray-300 mr-3 overflow-hidden">
210
+ <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Customer" class="w-full h-full object-cover">
211
+ </div>
212
+ <div>
213
+ <h4 class="font-medium">Michael Chen</h4>
214
+ <p class="text-gray-500 text-sm">Verified Buyer</p>
215
+ </div>
216
+ </div>
217
+ </div>
218
+ <div class="bg-white p-6 rounded-lg shadow-sm">
219
+ <div class="flex items-center mb-4">
220
+ <div class="text-yellow-400 mr-2">
221
+ <i class="fas fa-star"></i>
222
+ <i class="fas fa-star"></i>
223
+ <i class="fas fa-star"></i>
224
+ <i class="fas fa-star"></i>
225
+ <i class="fas fa-star-half-alt"></i>
226
+ </div>
227
+ </div>
228
+ <p class="text-gray-600 mb-4">"Great selection of products at competitive prices. The mobile app makes shopping so convenient."</p>
229
+ <div class="flex items-center">
230
+ <div class="w-10 h-10 rounded-full bg-gray-300 mr-3 overflow-hidden">
231
+ <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Customer" class="w-full h-full object-cover">
232
+ </div>
233
+ <div>
234
+ <h4 class="font-medium">Emily Rodriguez</h4>
235
+ <p class="text-gray-500 text-sm">Verified Buyer</p>
236
+ </div>
237
+ </div>
238
+ </div>
239
+ </div>
240
+ </section>
241
+ </div>
242
+
243
+ <!-- Products Page -->
244
+ <div id="products-page" class="hidden">
245
+ <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-8">
246
+ <h1 class="text-2xl font-bold mb-4 md:mb-0">All Products</h1>
247
+ <div class="flex flex-col sm:flex-row space-y-2 sm:space-y-0 sm:space-x-4 w-full md:w-auto">
248
+ <div class="relative">
249
+ <select id="category-filter" onchange="filterProducts(this.value)" class="appearance-none bg-white border border-gray-300 rounded-md pl-3 pr-8 py-2 text-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 w-full">
250
+ <option value="all">All Categories</option>
251
+ <option value="electronics">Electronics</option>
252
+ <option value="clothing">Clothing</option>
253
+ <option value="home">Home & Garden</option>
254
+ <option value="accessories">Accessories</option>
255
+ </select>
256
+ <div class="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
257
+ <i class="fas fa-chevron-down text-gray-400"></i>
258
+ </div>
259
+ </div>
260
+ <div class="relative">
261
+ <select id="sort-by" onchange="sortProducts(this.value)" class="appearance-none bg-white border border-gray-300 rounded-md pl-3 pr-8 py-2 text-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 w-full">
262
+ <option value="featured">Featured</option>
263
+ <option value="price-low">Price: Low to High</option>
264
+ <option value="price-high">Price: High to Low</option>
265
+ <option value="newest">Newest Arrivals</option>
266
+ <option value="rating">Highest Rated</option>
267
+ </select>
268
+ <div class="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
269
+ <i class="fas fa-chevron-down text-gray-400"></i>
270
+ </div>
271
+ </div>
272
+ </div>
273
+ </div>
274
+
275
+ <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
276
+ <!-- Product cards will be dynamically inserted here -->
277
+ </div>
278
+
279
+ <div class="flex justify-center mt-12">
280
+ <nav class="inline-flex rounded-md shadow">
281
+ <button onclick="changePage('prev')" class="px-3 py-2 rounded-l-md border border-gray-300 bg-white text-gray-500 hover:bg-gray-50">
282
+ <i class="fas fa-chevron-left"></i>
283
+ </button>
284
+ <button onclick="changePage(1)" class="px-4 py-2 border-t border-b border-gray-300 bg-white text-blue-600 font-medium">1</button>
285
+ <button onclick="changePage(2)" class="px-4 py-2 border-t border-b border-gray-300 bg-white text-gray-500 hover:bg-gray-50">2</button>
286
+ <button onclick="changePage(3)" class="px-4 py-2 border-t border-b border-gray-300 bg-white text-gray-500 hover:bg-gray-50">3</button>
287
+ <span class="px-4 py-2 border-t border-b border-gray-300 bg-white text-gray-500">...</span>
288
+ <button onclick="changePage(8)" class="px-4 py-2 border-t border-b border-gray-300 bg-white text-gray-500 hover:bg-gray-50">8</button>
289
+ <button onclick="changePage('next')" class="px-3 py-2 rounded-r-md border border-gray-300 bg-white text-gray-500 hover:bg-gray-50">
290
+ <i class="fas fa-chevron-right"></i>
291
+ </button>
292
+ </nav>
293
+ </div>
294
+ </div>
295
+
296
+ <!-- Product Detail Page -->
297
+ <div id="product-detail-page" class="hidden">
298
+ <button onclick="showPage('products')" class="text-blue-600 hover:underline mb-4 flex items-center">
299
+ <i class="fas fa-arrow-left mr-2"></i> Back to Products
300
+ </button>
301
+
302
+ <div class="bg-white rounded-lg shadow-sm overflow-hidden">
303
+ <div class="flex flex-col md:flex-row">
304
+ <div class="md:w-1/2 p-4">
305
+ <div class="mb-4">
306
+ <img id="product-main-image" src="" alt="Product" class="w-full h-80 object-contain rounded-lg product-image">
307
+ </div>
308
+ <div class="grid grid-cols-4 gap-2">
309
+ <button onclick="changeProductImage('1')" class="border rounded-md p-1 hover:border-blue-500">
310
+ <img id="product-thumb-1" src="" alt="Thumbnail" class="w-full h-16 object-contain">
311
+ </button>
312
+ <button onclick="changeProductImage('2')" class="border rounded-md p-1 hover:border-blue-500">
313
+ <img id="product-thumb-2" src="" alt="Thumbnail" class="w-full h-16 object-contain">
314
+ </button>
315
+ <button onclick="changeProductImage('3')" class="border rounded-md p-1 hover:border-blue-500">
316
+ <img id="product-thumb-3" src="" alt="Thumbnail" class="w-full h-16 object-contain">
317
+ </button>
318
+ <button onclick="changeProductImage('4')" class="border rounded-md p-1 hover:border-blue-500">
319
+ <img id="product-thumb-4" src="" alt="Thumbnail" class="w-full h-16 object-contain">
320
+ </button>
321
+ </div>
322
+ </div>
323
+ <div class="md:w-1/2 p-6">
324
+ <h1 id="product-title" class="text-2xl font-bold mb-2"></h1>
325
+ <div class="flex items-center mb-4">
326
+ <div class="text-yellow-400 mr-2">
327
+ <i class="fas fa-star"></i>
328
+ <i class="fas fa-star"></i>
329
+ <i class="fas fa-star"></i>
330
+ <i class="fas fa-star"></i>
331
+ <i class="fas fa-star-half-alt"></i>
332
+ </div>
333
+ <span id="product-rating" class="text-gray-600 text-sm">(42 reviews)</span>
334
+ </div>
335
+ <div class="mb-6">
336
+ <span id="product-price" class="text-2xl font-bold text-gray-900"></span>
337
+ <span id="product-original-price" class="text-lg text-gray-500 line-through ml-2"></span>
338
+ <span id="product-discount" class="bg-red-100 text-red-800 text-sm font-medium ml-2 px-2 py-0.5 rounded"></span>
339
+ </div>
340
+ <p id="product-description" class="text-gray-700 mb-6"></p>
341
+
342
+ <div class="mb-6">
343
+ <h3 class="text-sm font-medium text-gray-900 mb-2">Color</h3>
344
+ <div class="flex space-x-2">
345
+ <button class="w-8 h-8 rounded-full bg-black border-2 border-gray-300 focus:ring-2 focus:ring-blue-500"></button>
346
+ <button class="w-8 h-8 rounded-full bg-blue-600 border-2 border-gray-300 focus:ring-2 focus:ring-blue-500"></button>
347
+ <button class="w-8 h-8 rounded-full bg-gray-200 border-2 border-gray-300 focus:ring-2 focus:ring-blue-500"></button>
348
+ <button class="w-8 h-8 rounded-full bg-red-600 border-2 border-gray-300 focus:ring-2 focus:ring-blue-500"></button>
349
+ </div>
350
+ </div>
351
+
352
+ <div class="mb-6">
353
+ <h3 class="text-sm font-medium text-gray-900 mb-2">Size</h3>
354
+ <div class="flex flex-wrap gap-2">
355
+ <button class="px-3 py-1 border rounded-md text-sm hover:bg-gray-100 focus:bg-gray-100 focus:ring-2 focus:ring-blue-500">XS</button>
356
+ <button class="px-3 py-1 border rounded-md text-sm hover:bg-gray-100 focus:bg-gray-100 focus:ring-2 focus:ring-blue-500">S</button>
357
+ <button class="px-3 py-1 border rounded-md text-sm bg-gray-100 font-medium ring-2 ring-blue-500">M</button>
358
+ <button class="px-3 py-1 border rounded-md text-sm hover:bg-gray-100 focus:bg-gray-100 focus:ring-2 focus:ring-blue-500">L</button>
359
+ <button class="px-3 py-1 border rounded-md text-sm hover:bg-gray-100 focus:bg-gray-100 focus:ring-2 focus:ring-blue-500">XL</button>
360
+ </div>
361
+ </div>
362
+
363
+ <div class="flex items-center mb-8">
364
+ <div class="flex items-center border rounded-md">
365
+ <button onclick="decrementQuantity()" class="px-3 py-2 text-gray-600 hover:bg-gray-100">
366
+ <i class="fas fa-minus"></i>
367
+ </button>
368
+ <span id="product-quantity" class="px-4 py-2 border-x w-12 text-center">1</span>
369
+ <button onclick="incrementQuantity()" class="px-3 py-2 text-gray-600 hover:bg-gray-100">
370
+ <i class="fas fa-plus"></i>
371
+ </button>
372
+ </div>
373
+ <span class="text-sm text-gray-500 ml-3">Only <span id="product-stock" class="font-medium">12</span> left in stock</span>
374
+ </div>
375
+
376
+ <div class="flex flex-col sm:flex-row gap-3">
377
+ <button onclick="addToCart(currentProduct)" class="flex-1 bg-blue-600 hover:bg-blue-700 text-white font-medium py-3 px-6 rounded-md flex items-center justify-center">
378
+ <i class="fas fa-shopping-cart mr-2"></i> Add to Cart
379
+ </button>
380
+ <button onclick="buyNow(currentProduct)" class="flex-1 bg-gray-900 hover:bg-gray-800 text-white font-medium py-3 px-6 rounded-md flex items-center justify-center">
381
+ Buy Now
382
+ </button>
383
+ <button class="w-12 h-12 border rounded-md flex items-center justify-center text-gray-600 hover:bg-gray-100">
384
+ <i class="far fa-heart text-xl"></i>
385
+ </button>
386
+ </div>
387
+
388
+ <div class="mt-6 pt-6 border-t">
389
+ <div class="flex items-center text-sm text-gray-500 mb-2">
390
+ <i class="fas fa-truck mr-2"></i>
391
+ <span>Free shipping on orders over $50</span>
392
+ </div>
393
+ <div class="flex items-center text-sm text-gray-500">
394
+ <i class="fas fa-undo mr-2"></i>
395
+ <span>30-day return policy</span>
396
+ </div>
397
+ </div>
398
+ </div>
399
+ </div>
400
+
401
+ <div class="border-t mt-8">
402
+ <div class="p-6">
403
+ <h2 class="text-xl font-bold mb-4">Product Details</h2>
404
+ <div id="product-details" class="prose max-w-none text-gray-700">
405
+ <!-- Details will be inserted here -->
406
+ </div>
407
+ </div>
408
+ </div>
409
+
410
+ <div class="border-t">
411
+ <div class="p-6">
412
+ <h2 class="text-xl font-bold mb-6">Customer Reviews</h2>
413
+ <div class="flex flex-col md:flex-row md:items-center justify-between mb-8">
414
+ <div>
415
+ <h3 class="text-2xl font-bold mb-1">4.6 <span class="text-lg font-normal text-gray-600">out of 5</span></h3>
416
+ <div class="flex items-center mb-2">
417
+ <div class="text-yellow-400 mr-2">
418
+ <i class="fas fa-star"></i>
419
+ <i class="fas fa-star"></i>
420
+ <i class="fas fa-star"></i>
421
+ <i class="fas fa-star"></i>
422
+ <i class="fas fa-star-half-alt"></i>
423
+ </div>
424
+ <span class="text-gray-600 text-sm">Based on 42 reviews</span>
425
+ </div>
426
+ </div>
427
+ <button class="bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-6 rounded-md">
428
+ Write a Review
429
+ </button>
430
+ </div>
431
+
432
+ <div class="space-y-6">
433
+ <!-- Review 1 -->
434
+ <div class="border-b pb-6">
435
+ <div class="flex items-center mb-3">
436
+ <div class="w-10 h-10 rounded-full bg-gray-300 mr-3 overflow-hidden">
437
+ <img src="https://randomuser.me/api/portraits/women/12.jpg" alt="Reviewer" class="w-full h-full object-cover">
438
+ </div>
439
+ <div>
440
+ <h4 class="font-medium">Jessica Miller</h4>
441
+ <div class="flex items-center">
442
+ <div class="text-yellow-400 mr-2 text-sm">
443
+ <i class="fas fa-star"></i>
444
+ <i class="fas fa-star"></i>
445
+ <i class="fas fa-star"></i>
446
+ <i class="fas fa-star"></i>
447
+ <i class="fas fa-star"></i>
448
+ </div>
449
+ <span class="text-gray-500 text-sm">2 days ago</span>
450
+ </div>
451
+ </div>
452
+ </div>
453
+ <h5 class="font-medium mb-1">Perfect fit and comfortable</h5>
454
+ <p class="text-gray-700">I love this product! It fits perfectly and is very comfortable to wear all day. The quality is excellent and it looks just like the picture. Highly recommend!</p>
455
+ </div>
456
+
457
+ <!-- Review 2 -->
458
+ <div class="border-b pb-6">
459
+ <div class="flex items-center mb-3">
460
+ <div class="w-10 h-10 rounded-full bg-gray-300 mr-3 overflow-hidden">
461
+ <img src="https://randomuser.me/api/portraits/men/45.jpg" alt="Reviewer" class="w-full h-full object-cover">
462
+ </div>
463
+ <div>
464
+ <h4 class="font-medium">David Wilson</h4>
465
+ <div class="flex items-center">
466
+ <div class="text-yellow-400 mr-2 text-sm">
467
+ <i class="fas fa-star"></i>
468
+ <i class="fas fa-star"></i>
469
+ <i class="fas fa-star"></i>
470
+ <i class="fas fa-star"></i>
471
+ <i class="far fa-star"></i>
472
+ </div>
473
+ <span class="text-gray-500 text-sm">1 week ago</span>
474
+ </div>
475
+ </div>
476
+ </div>
477
+ <h5 class="font-medium mb-1">Great product but shipping took longer</h5>
478
+ <p class="text-gray-700">The product itself is great, exactly as described. My only complaint is that shipping took longer than expected. Otherwise, very satisfied with my purchase.</p>
479
+ </div>
480
+ </div>
481
+
482
+ <button class="mt-6 text-blue-600 hover:underline font-medium">
483
+ See all reviews <i class="fas fa-chevron-down ml-1"></i>
484
+ </button>
485
+ </div>
486
+ </div>
487
+ </div>
488
+
489
+ <!-- Related Products -->
490
+ <div class="mt-12">
491
+ <h2 class="text-xl font-bold mb-6">You May Also Like</h2>
492
+ <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
493
+ <!-- Related products will be inserted here -->
494
+ </div>
495
+ </div>
496
+ </div>
497
+
498
+ <!-- Cart Page -->
499
+ <div id="cart-page" class="hidden">
500
+ <h1 class="text-2xl font-bold mb-6">Your Shopping Cart</h1>
501
+
502
+ <div class="flex flex-col lg:flex-row gap-8">
503
+ <div class="lg:w-2/3">
504
+ <div id="cart-items" class="bg-white rounded-lg shadow-sm divide-y divide-gray-200">
505
+ <!-- Cart items will be inserted here -->
506
+ <div class="p-6 text-center">
507
+ <i class="fas fa-shopping-cart text-4xl text-gray-300 mb-4"></i>
508
+ <h3 class="text-lg font-medium text-gray-900 mb-2">Your cart is empty</h3>
509
+ <p class="text-gray-500 mb-4">Looks like you haven't added anything to your cart yet</p>
510
+ <button onclick="showPage('products')" class="bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-6 rounded-md">
511
+ Continue Shopping
512
+ </button>
513
+ </div>
514
+ </div>
515
+ </div>
516
+
517
+ <div class="lg:w-1/3">
518
+ <div class="bg-white rounded-lg shadow-sm p-6 sticky top-4">
519
+ <h2 class="text-lg font-bold mb-4">Order Summary</h2>
520
+
521
+ <div class="space-y-3 mb-6">
522
+ <div class="flex justify-between">
523
+ <span class="text-gray-600">Subtotal</span>
524
+ <span id="cart-subtotal" class="font-medium">$0.00</span>
525
+ </div>
526
+ <div class="flex justify-between">
527
+ <span class="text-gray-600">Shipping</span>
528
+ <span id="cart-shipping" class="font-medium">$0.00</span>
529
+ </div>
530
+ <div class="flex justify-between">
531
+ <span class="text-gray-600">Tax</span>
532
+ <span id="cart-tax" class="font-medium">$0.00</span>
533
+ </div>
534
+ <div class="flex justify-between border-t pt-3">
535
+ <span class="text-gray-900 font-bold">Total</span>
536
+ <span id="cart-total" class="text-gray-900 font-bold text-lg">$0.00</span>
537
+ </div>
538
+ </div>
539
+
540
+ <button onclick="showPage('checkout')" id="checkout-btn" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-medium py-3 px-6 rounded-md disabled:opacity-50 disabled:cursor-not-allowed" disabled>
541
+ Proceed to Checkout
542
+ </button>
543
+
544
+ <div class="mt-4 text-center text-sm text-gray-500">
545
+ or <button onclick="showPage('products')" class="text-blue-600 hover:underline">Continue Shopping</button>
546
+ </div>
547
+
548
+ <div class="mt-6 pt-6 border-t">
549
+ <h3 class="text-sm font-medium text-gray-900 mb-3">We Accept</h3>
550
+ <div class="flex space-x-4">
551
+ <i class="fab fa-cc-visa text-3xl text-gray-400"></i>
552
+ <i class="fab fa-cc-mastercard text-3xl text-gray-400"></i>
553
+ <i class="fab fa-cc-amex text-3xl text-gray-400"></i>
554
+ <i class="fab fa-cc-discover text-3xl text-gray-400"></i>
555
+ <i class="fab fa-cc-paypal text-3xl text-gray-400"></i>
556
+ </div>
557
+ </div>
558
+ </div>
559
+ </div>
560
+ </div>
561
+ </div>
562
+
563
+ <!-- Checkout Page -->
564
+ <div id="checkout-page" class="hidden">
565
+ <h1 class="text-2xl font-bold mb-6">Checkout</h1>
566
+
567
+ <div class="flex flex-col lg:flex-row gap-8">
568
+ <div class="lg:w-2/3">
569
+ <div class="bg-white rounded-lg shadow-sm p-6 mb-6">
570
+ <div class="flex justify-between items-center mb-6">
571
+ <h2 class="text-lg font-bold">Contact Information</h2>
572
+ <div class="text-sm">
573
+ <
574
+ </html>