Hugging Face's logo

Spaces:
priom7
/
ecom
Running

App Files Community
priom7 commited on
Commit
c47aef1
·
verified ·
1 Parent(s): 07a343b

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +779 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Ecom
3
- emoji: 👁
4
- colorFrom: pink
5
- colorTo: indigo
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: ecom
3
+ emoji: 🐳
4
+ colorFrom: green
5
+ colorTo: yellow
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,779 @@
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>NexusShop - Premium E-commerce</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 enhancements */
11
+ .product-card:hover {
12
+ transform: translateY(-5px);
13
+ box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
14
+ }
15
+
16
+ .cart-item-enter {
17
+ opacity: 0;
18
+ transform: translateX(20px);
19
+ }
20
+ .cart-item-enter-active {
21
+ opacity: 1;
22
+ transform: translateX(0);
23
+ transition: all 300ms ease-out;
24
+ }
25
+ .cart-item-exit {
26
+ opacity: 1;
27
+ }
28
+ .cart-item-exit-active {
29
+ opacity: 0;
30
+ transform: translateX(20px);
31
+ transition: all 300ms ease-in;
32
+ }
33
+
34
+ @keyframes pulse {
35
+ 0%, 100% {
36
+ transform: scale(1);
37
+ }
38
+ 50% {
39
+ transform: scale(1.05);
40
+ }
41
+ }
42
+ .pulse-animation {
43
+ animation: pulse 1.5s infinite;
44
+ }
45
+ </style>
46
+ </head>
47
+ <body class="bg-gray-50 font-sans">
48
+ <!-- Header/Navigation -->
49
+ <header class="bg-white shadow-sm sticky top-0 z-50">
50
+ <div class="container mx-auto px-4 py-3 flex justify-between items-center">
51
+ <div class="flex items-center space-x-2">
52
+ <i class="fas fa-bolt text-2xl text-indigo-600"></i>
53
+ <h1 class="text-xl font-bold text-gray-800">Nexus<span class="text-indigo-600">Shop</span></h1>
54
+ </div>
55
+
56
+ <div class="hidden md:flex items-center space-x-8">
57
+ <a href="#" class="text-gray-700 hover:text-indigo-600 font-medium">Home</a>
58
+ <a href="#products" class="text-gray-700 hover:text-indigo-600 font-medium">Shop</a>
59
+ <a href="#features" class="text-gray-700 hover:text-indigo-600 font-medium">Features</a>
60
+ <a href="#testimonials" class="text-gray-700 hover:text-indigo-600 font-medium">Reviews</a>
61
+ </div>
62
+
63
+ <div class="flex items-center space-x-4">
64
+ <button id="search-btn" class="p-2 text-gray-600 hover:text-indigo-600">
65
+ <i class="fas fa-search"></i>
66
+ </button>
67
+ <button id="cart-btn" class="relative p-2 text-gray-600 hover:text-indigo-600">
68
+ <i class="fas fa-shopping-cart"></i>
69
+ <span id="cart-count" class="absolute -top-1 -right-1 bg-indigo-600 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">0</span>
70
+ </button>
71
+ <button class="md:hidden p-2 text-gray-600 hover:text-indigo-600" id="mobile-menu-btn">
72
+ <i class="fas fa-bars"></i>
73
+ </button>
74
+ </div>
75
+ </div>
76
+
77
+ <!-- Mobile Menu -->
78
+ <div id="mobile-menu" class="hidden md:hidden bg-white border-t">
79
+ <div class="container mx-auto px-4 py-2 flex flex-col space-y-2">
80
+ <a href="#" class="py-2 text-gray-700 hover:text-indigo-600">Home</a>
81
+ <a href="#products" class="py-2 text-gray-700 hover:text-indigo-600">Shop</a>
82
+ <a href="#features" class="py-2 text-gray-700 hover:text-indigo-600">Features</a>
83
+ <a href="#testimonials" class="py-2 text-gray-700 hover:text-indigo-600">Reviews</a>
84
+ </div>
85
+ </div>
86
+
87
+ <!-- Search Bar -->
88
+ <div id="search-bar" class="hidden bg-white border-t">
89
+ <div class="container mx-auto px-4 py-3">
90
+ <div class="relative">
91
+ <input type="text" placeholder="Search products..." class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
92
+ <button class="absolute right-3 top-2 text-gray-500 hover:text-indigo-600">
93
+ <i class="fas fa-search"></i>
94
+ </button>
95
+ </div>
96
+ </div>
97
+ </div>
98
+ </header>
99
+
100
+ <!-- Hero Section -->
101
+ <section class="bg-gradient-to-r from-indigo-500 to-purple-600 text-white">
102
+ <div class="container mx-auto px-4 py-16 md:py-24 flex flex-col md:flex-row items-center">
103
+ <div class="md:w-1/2 mb-10 md:mb-0">
104
+ <h2 class="text-4xl md:text-5xl font-bold mb-4">Premium Tech for Your Digital Life</h2>
105
+ <p class="text-xl mb-6 opacity-90">Discover the latest gadgets and electronics at unbeatable prices with fast delivery and excellent support.</p>
106
+ <div class="flex space-x-4">
107
+ <a href="#products" class="bg-white text-indigo-600 px-6 py-3 rounded-lg font-medium hover:bg-gray-100 transition duration-300">Shop Now</a>
108
+ <a href="#features" class="border border-white px-6 py-3 rounded-lg font-medium hover:bg-white hover:text-indigo-600 transition duration-300">Learn More</a>
109
+ </div>
110
+ </div>
111
+ <div class="md:w-1/2 flex justify-center">
112
+ <img src="https://images.unsplash.com/photo-1556740738-b6a63e27c4df?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Tech Products" class="rounded-xl shadow-2xl max-h-96 w-auto object-cover">
113
+ </div>
114
+ </div>
115
+ </section>
116
+
117
+ <!-- Features Section -->
118
+ <section id="features" class="py-16 bg-white">
119
+ <div class="container mx-auto px-4">
120
+ <h2 class="text-3xl font-bold text-center mb-12 text-gray-800">Why Choose NexusShop?</h2>
121
+
122
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
123
+ <div class="bg-gray-50 p-6 rounded-xl hover:shadow-md transition duration-300">
124
+ <div class="bg-indigo-100 w-14 h-14 rounded-full flex items-center justify-center mb-4">
125
+ <i class="fas fa-truck text-indigo-600 text-xl"></i>
126
+ </div>
127
+ <h3 class="text-xl font-semibold mb-2 text-gray-800">Fast Delivery</h3>
128
+ <p class="text-gray-600">Get your products delivered within 2-3 business days with our premium shipping partners.</p>
129
+ </div>
130
+
131
+ <div class="bg-gray-50 p-6 rounded-xl hover:shadow-md transition duration-300">
132
+ <div class="bg-indigo-100 w-14 h-14 rounded-full flex items-center justify-center mb-4">
133
+ <i class="fas fa-shield-alt text-indigo-600 text-xl"></i>
134
+ </div>
135
+ <h3 class="text-xl font-semibold mb-2 text-gray-800">Secure Payments</h3>
136
+ <p class="text-gray-600">Shop with confidence using our 256-bit encrypted payment gateway with multiple options.</p>
137
+ </div>
138
+
139
+ <div class="bg-gray-50 p-6 rounded-xl hover:shadow-md transition duration-300">
140
+ <div class="bg-indigo-100 w-14 h-14 rounded-full flex items-center justify-center mb-4">
141
+ <i class="fas fa-headset text-indigo-600 text-xl"></i>
142
+ </div>
143
+ <h3 class="text-xl font-semibold mb-2 text-gray-800">24/7 Support</h3>
144
+ <p class="text-gray-600">Our customer support team is available round the clock to assist you with any queries.</p>
145
+ </div>
146
+ </div>
147
+ </div>
148
+ </section>
149
+
150
+ <!-- Products Section -->
151
+ <section id="products" class="py-16 bg-gray-50">
152
+ <div class="container mx-auto px-4">
153
+ <div class="flex justify-between items-center mb-8">
154
+ <h2 class="text-3xl font-bold text-gray-800">Featured Products</h2>
155
+ <div class="flex space-x-2">
156
+ <button class="category-btn px-4 py-2 rounded-lg bg-indigo-600 text-white" data-category="all">All</button>
157
+ <button class="category-btn px-4 py-2 rounded-lg bg-white text-gray-700 hover:bg-gray-100" data-category="electronics">Electronics</button>
158
+ <button class="category-btn px-4 py-2 rounded-lg bg-white text-gray-700 hover:bg-gray-100" data-category="accessories">Accessories</button>
159
+ </div>
160
+ </div>
161
+
162
+ <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6" id="products-container">
163
+ <!-- Products will be loaded here via JavaScript -->
164
+ </div>
165
+ </div>
166
+ </section>
167
+
168
+ <!-- Testimonials Section -->
169
+ <section id="testimonials" class="py-16 bg-white">
170
+ <div class="container mx-auto px-4">
171
+ <h2 class="text-3xl font-bold text-center mb-12 text-gray-800">What Our Customers Say</h2>
172
+
173
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
174
+ <div class="bg-gray-50 p-6 rounded-xl">
175
+ <div class="flex items-center mb-4">
176
+ <div class="w-12 h-12 rounded-full bg-indigo-100 flex items-center justify-center mr-4">
177
+ <span class="text-indigo-600 font-bold">JD</span>
178
+ </div>
179
+ <div>
180
+ <h4 class="font-semibold">John Doe</h4>
181
+ <div class="flex text-yellow-400">
182
+ <i class="fas fa-star"></i>
183
+ <i class="fas fa-star"></i>
184
+ <i class="fas fa-star"></i>
185
+ <i class="fas fa-star"></i>
186
+ <i class="fas fa-star"></i>
187
+ </div>
188
+ </div>
189
+ </div>
190
+ <p class="text-gray-600">"The delivery was incredibly fast and the product quality exceeded my expectations. Will definitely shop here again!"</p>
191
+ </div>
192
+
193
+ <div class="bg-gray-50 p-6 rounded-xl">
194
+ <div class="flex items-center mb-4">
195
+ <div class="w-12 h-12 rounded-full bg-indigo-100 flex items-center justify-center mr-4">
196
+ <span class="text-indigo-600 font-bold">AS</span>
197
+ </div>
198
+ <div>
199
+ <h4 class="font-semibold">Alice Smith</h4>
200
+ <div class="flex text-yellow-400">
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
+ <i class="fas fa-star-half-alt"></i>
206
+ </div>
207
+ </div>
208
+ </div>
209
+ <p class="text-gray-600">"Excellent customer service! They helped me choose the perfect laptop for my needs and the price was very competitive."</p>
210
+ </div>
211
+
212
+ <div class="bg-gray-50 p-6 rounded-xl">
213
+ <div class="flex items-center mb-4">
214
+ <div class="w-12 h-12 rounded-full bg-indigo-100 flex items-center justify-center mr-4">
215
+ <span class="text-indigo-600 font-bold">RJ</span>
216
+ </div>
217
+ <div>
218
+ <h4 class="font-semibold">Robert Johnson</h4>
219
+ <div class="flex text-yellow-400">
220
+ <i class="fas fa-star"></i>
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
+ </div>
226
+ </div>
227
+ </div>
228
+ <p class="text-gray-600">"I've ordered multiple times from NexusShop and every experience has been flawless. Highly recommended for tech enthusiasts!"</p>
229
+ </div>
230
+ </div>
231
+ </div>
232
+ </section>
233
+
234
+ <!-- Newsletter Section -->
235
+ <section class="py-16 bg-indigo-600 text-white">
236
+ <div class="container mx-auto px-4 text-center">
237
+ <h2 class="text-3xl font-bold mb-4">Stay Updated</h2>
238
+ <p class="text-xl mb-8 max-w-2xl mx-auto opacity-90">Subscribe to our newsletter for exclusive deals, new arrivals, and tech tips.</p>
239
+
240
+ <div class="max-w-md mx-auto flex">
241
+ <input type="email" placeholder="Your email address" class="flex-grow px-4 py-3 rounded-l-lg focus:outline-none text-gray-800">
242
+ <button class="bg-indigo-800 px-6 py-3 rounded-r-lg font-medium hover:bg-indigo-900 transition duration-300">Subscribe</button>
243
+ </div>
244
+ </div>
245
+ </section>
246
+
247
+ <!-- Shopping Cart Sidebar -->
248
+ <div id="cart-sidebar" class="fixed top-0 right-0 h-full w-full md:w-96 bg-white shadow-lg transform translate-x-full transition-transform duration-300 z-50 overflow-y-auto">
249
+ <div class="p-6">
250
+ <div class="flex justify-between items-center mb-6">
251
+ <h3 class="text-xl font-bold text-gray-800">Your Cart</h3>
252
+ <button id="close-cart" class="text-gray-500 hover:text-gray-700">
253
+ <i class="fas fa-times"></i>
254
+ </button>
255
+ </div>
256
+
257
+ <div id="cart-items" class="space-y-4">
258
+ <!-- Cart items will be loaded here -->
259
+ <div class="text-center py-8 text-gray-500" id="empty-cart-message">
260
+ <i class="fas fa-shopping-cart text-4xl mb-4 opacity-30"></i>
261
+ <p>Your cart is empty</p>
262
+ </div>
263
+ </div>
264
+
265
+ <div id="cart-summary" class="border-t mt-6 pt-6 hidden">
266
+ <div class="flex justify-between mb-2">
267
+ <span class="text-gray-600">Subtotal</span>
268
+ <span id="cart-subtotal" class="font-medium">$0.00</span>
269
+ </div>
270
+ <div class="flex justify-between mb-4">
271
+ <span class="text-gray-600">Shipping</span>
272
+ <span class="font-medium">Free</span>
273
+ </div>
274
+ <div class="flex justify-between text-lg font-bold mb-6">
275
+ <span>Total</span>
276
+ <span id="cart-total" class="text-indigo-600">$0.00</span>
277
+ </div>
278
+ <button id="checkout-btn" class="w-full bg-indigo-600 text-white py-3 rounded-lg font-medium hover:bg-indigo-700 transition duration-300">
279
+ Proceed to Checkout
280
+ </button>
281
+ </div>
282
+ </div>
283
+ </div>
284
+ <div id="cart-overlay" class="fixed inset-0 bg-black bg-opacity-50 z-40 hidden"></div>
285
+
286
+ <!-- Footer -->
287
+ <footer class="bg-gray-800 text-white pt-12 pb-6">
288
+ <div class="container mx-auto px-4">
289
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8">
290
+ <div>
291
+ <div class="flex items-center space-x-2 mb-4">
292
+ <i class="fas fa-bolt text-2xl text-indigo-400"></i>
293
+ <h3 class="text-xl font-bold">Nexus<span class="text-indigo-400">Shop</span></h3>
294
+ </div>
295
+ <p class="text-gray-400">Premium e-commerce platform for all your tech needs. Quality products, fast delivery, and excellent support.</p>
296
+ </div>
297
+
298
+ <div>
299
+ <h4 class="text-lg font-semibold mb-4">Shop</h4>
300
+ <ul class="space-y-2">
301
+ <li><a href="#" class="text-gray-400 hover:text-white">All Products</a></li>
302
+ <li><a href="#" class="text-gray-400 hover:text-white">Featured</a></li>
303
+ <li><a href="#" class="text-gray-400 hover:text-white">New Arrivals</a></li>
304
+ <li><a href="#" class="text-gray-400 hover:text-white">Deals</a></li>
305
+ </ul>
306
+ </div>
307
+
308
+ <div>
309
+ <h4 class="text-lg font-semibold mb-4">Support</h4>
310
+ <ul class="space-y-2">
311
+ <li><a href="#" class="text-gray-400 hover:text-white">Contact Us</a></li>
312
+ <li><a href="#" class="text-gray-400 hover:text-white">FAQs</a></li>
313
+ <li><a href="#" class="text-gray-400 hover:text-white">Shipping Policy</a></li>
314
+ <li><a href="#" class="text-gray-400 hover:text-white">Returns & Refunds</a></li>
315
+ </ul>
316
+ </div>
317
+
318
+ <div>
319
+ <h4 class="text-lg font-semibold mb-4">Connect</h4>
320
+ <div class="flex space-x-4 mb-4">
321
+ <a href="#" class="w-10 h-10 rounded-full bg-gray-700 flex items-center justify-center hover:bg-indigo-600">
322
+ <i class="fab fa-facebook-f"></i>
323
+ </a>
324
+ <a href="#" class="w-10 h-10 rounded-full bg-gray-700 flex items-center justify-center hover:bg-indigo-600">
325
+ <i class="fab fa-twitter"></i>
326
+ </a>
327
+ <a href="#" class="w-10 h-10 rounded-full bg-gray-700 flex items-center justify-center hover:bg-indigo-600">
328
+ <i class="fab fa-instagram"></i>
329
+ </a>
330
+ <a href="#" class="w-10 h-10 rounded-full bg-gray-700 flex items-center justify-center hover:bg-indigo-600">
331
+ <i class="fab fa-linkedin-in"></i>
332
+ </a>
333
+ </div>
334
+ <p class="text-gray-400">support@nexusshop.com</p>
335
+ </div>
336
+ </div>
337
+
338
+ <div class="border-t border-gray-700 pt-6 flex flex-col md:flex-row justify-between items-center">
339
+ <p class="text-gray-400 mb-4 md:mb-0">© 2023 NexusShop. All rights reserved.</p>
340
+ <div class="flex space-x-6">
341
+ <a href="#" class="text-gray-400 hover:text-white">Privacy Policy</a>
342
+ <a href="#" class="text-gray-400 hover:text-white">Terms of Service</a>
343
+ </div>
344
+ </div>
345
+ </div>
346
+ </footer>
347
+
348
+ <!-- Product Quick View Modal -->
349
+ <div id="quick-view-modal" class="fixed inset-0 bg-black bg-opacity-50 z-50 hidden flex items-center justify-center p-4">
350
+ <div class="bg-white rounded-xl max-w-4xl w-full max-h-[90vh] overflow-y-auto">
351
+ <div class="p-6">
352
+ <div class="flex justify-between items-start mb-6">
353
+ <h3 id="quick-view-title" class="text-2xl font-bold text-gray-800">Product Name</h3>
354
+ <button id="close-quick-view" class="text-gray-500 hover:text-gray-700">
355
+ <i class="fas fa-times"></i>
356
+ </button>
357
+ </div>
358
+
359
+ <div class="flex flex-col md:flex-row gap-8">
360
+ <div class="md:w-1/2">
361
+ <img id="quick-view-image" src="" alt="Product" class="w-full rounded-lg object-cover">
362
+ </div>
363
+
364
+ <div class="md:w-1/2">
365
+ <div class="flex items-center mb-4">
366
+ <div class="flex text-yellow-400 mr-2">
367
+ <i class="fas fa-star"></i>
368
+ <i class="fas fa-star"></i>
369
+ <i class="fas fa-star"></i>
370
+ <i class="fas fa-star"></i>
371
+ <i class="fas fa-star-half-alt"></i>
372
+ </div>
373
+ <span class="text-gray-600">(24 reviews)</span>
374
+ </div>
375
+
376
+ <p id="quick-view-price" class="text-2xl font-bold text-indigo-600 mb-4">$0.00</p>
377
+
378
+ <p id="quick-view-description" class="text-gray-600 mb-6">Product description goes here with all the details about features and specifications.</p>
379
+
380
+ <div class="flex items-center mb-6">
381
+ <span class="text-gray-700 mr-4">Quantity:</span>
382
+ <div class="flex items-center border rounded-lg">
383
+ <button class="quantity-decrease px-3 py-1 text-gray-600 hover:bg-gray-100">-</button>
384
+ <span class="quantity-value px-4 py-1 border-x">1</span>
385
+ <button class="quantity-increase px-3 py-1 text-gray-600 hover:bg-gray-100">+</button>
386
+ </div>
387
+ </div>
388
+
389
+ <button id="add-to-cart-quick" class="w-full bg-indigo-600 text-white py-3 rounded-lg font-medium hover:bg-indigo-700 transition duration-300 mb-4">
390
+ Add to Cart
391
+ </button>
392
+
393
+ <div class="flex items-center text-gray-600">
394
+ <i class="fas fa-truck mr-2"></i>
395
+ <span>Free shipping on orders over $50</span>
396
+ </div>
397
+ </div>
398
+ </div>
399
+ </div>
400
+ </div>
401
+ </div>
402
+
403
+ <script>
404
+ // Sample product data
405
+ const products = [
406
+ {
407
+ id: 1,
408
+ name: "Wireless Bluetooth Headphones",
409
+ price: 89.99,
410
+ image: "https://images.unsplash.com/photo-1505740420928-5e560c06d30e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80",
411
+ category: "electronics",
412
+ description: "Premium wireless headphones with noise cancellation and 30-hour battery life."
413
+ },
414
+ {
415
+ id: 2,
416
+ name: "Smart Watch Pro",
417
+ price: 199.99,
418
+ image: "https://images.unsplash.com/photo-1523275335684-37898b6baf30?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1399&q=80",
419
+ category: "electronics",
420
+ description: "Advanced smartwatch with health monitoring, GPS, and customizable watch faces."
421
+ },
422
+ {
423
+ id: 3,
424
+ name: "Laptop Backpack",
425
+ price: 49.99,
426
+ image: "https://images.unsplash.com/photo-1553062407-98eeb64c6a62?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80",
427
+ category: "accessories",
428
+ description: "Durable and stylish backpack with padded laptop compartment and USB charging port."
429
+ },
430
+ {
431
+ id: 4,
432
+ name: "4K Ultra HD Smart TV",
433
+ price: 799.99,
434
+ image: "https://images.unsplash.com/photo-1593305841991-05e297cb997d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80",
435
+ category: "electronics",
436
+ description: "65-inch 4K UHD Smart TV with HDR and built-in streaming apps."
437
+ },
438
+ {
439
+ id: 5,
440
+ name: "Wireless Charging Pad",
441
+ price: 29.99,
442
+ image: "https://images.unsplash.com/photo-1583394838336-acd977736f90?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80",
443
+ category: "accessories",
444
+ description: "Fast wireless charging pad compatible with Qi-enabled devices."
445
+ },
446
+ {
447
+ id: 6,
448
+ name: "Bluetooth Speaker",
449
+ price: 59.99,
450
+ image: "https://images.unsplash.com/photo-1572569511254-d8f925fe2cbb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80",
451
+ category: "electronics",
452
+ description: "Portable Bluetooth speaker with 20W output and 15-hour battery life."
453
+ },
454
+ {
455
+ id: 7,
456
+ name: "Phone Mount for Car",
457
+ price: 19.99,
458
+ image: "https://images.unsplash.com/photo-1604977042-6f117a8a9b09?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80",
459
+ category: "accessories",
460
+ description: "Adjustable car phone mount with strong suction cup and 360° rotation."
461
+ },
462
+ {
463
+ id: 8,
464
+ name: "Gaming Keyboard",
465
+ price: 79.99,
466
+ image: "https://images.unsplash.com/photo-1611381079428-a6d7a73237ce?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80",
467
+ category: "electronics",
468
+ description: "Mechanical gaming keyboard with RGB backlighting and anti-ghosting."
469
+ }
470
+ ];
471
+
472
+ // Shopping cart data
473
+ let cart = [];
474
+
475
+ // DOM elements
476
+ const productsContainer = document.getElementById('products-container');
477
+ const cartSidebar = document.getElementById('cart-sidebar');
478
+ const cartOverlay = document.getElementById('cart-overlay');
479
+ const cartBtn = document.getElementById('cart-btn');
480
+ const closeCartBtn = document.getElementById('close-cart');
481
+ const cartItemsContainer = document.getElementById('cart-items');
482
+ const cartCount = document.getElementById('cart-count');
483
+ const emptyCartMessage = document.getElementById('empty-cart-message');
484
+ const cartSummary = document.getElementById('cart-summary');
485
+ const cartSubtotal = document.getElementById('cart-subtotal');
486
+ const cartTotal = document.getElementById('cart-total');
487
+ const checkoutBtn = document.getElementById('checkout-btn');
488
+ const categoryBtns = document.querySelectorAll('.category-btn');
489
+ const quickViewModal = document.getElementById('quick-view-modal');
490
+ const closeQuickViewBtn = document.getElementById('close-quick-view');
491
+ const searchBtn = document.getElementById('search-btn');
492
+ const searchBar = document.getElementById('search-bar');
493
+ const mobileMenuBtn = document.getElementById('mobile-menu-btn');
494
+ const mobileMenu = document.getElementById('mobile-menu');
495
+
496
+ // Initialize the page
497
+ document.addEventListener('DOMContentLoaded', () => {
498
+ renderProducts(products);
499
+ setupEventListeners();
500
+ });
501
+
502
+ // Render products to the page
503
+ function renderProducts(productsToRender) {
504
+ productsContainer.innerHTML = '';
505
+
506
+ productsToRender.forEach(product => {
507
+ const productCard = document.createElement('div');
508
+ productCard.className = 'product-card bg-white rounded-xl overflow-hidden shadow-md hover:shadow-lg transition duration-300';
509
+ productCard.innerHTML = `
510
+ <div class="relative">
511
+ <img src="${product.image}" alt="${product.name}" class="w-full h-48 object-cover">
512
+ <button class="quick-view-btn absolute top-2 right-2 bg-white p-2 rounded-full shadow-md hover:bg-indigo-100 transition duration-200" data-id="${product.id}">
513
+ <i class="fas fa-eye text-gray-700"></i>
514
+ </button>
515
+ </div>
516
+ <div class="p-4">
517
+ <div class="flex justify-between items-start mb-2">
518
+ <h3 class="font-semibold text-gray-800">${product.name}</h3>
519
+ <span class="text-indigo-600 font-bold">$${product.price.toFixed(2)}</span>
520
+ </div>
521
+ <p class="text-sm text-gray-600 mb-4">${product.description.substring(0, 60)}...</p>
522
+ <button class="add-to-cart-btn w-full bg-indigo-600 text-white py-2 rounded-lg font-medium hover:bg-indigo-700 transition duration-300" data-id="${product.id}">
523
+ Add to Cart
524
+ </button>
525
+ </div>
526
+ `;
527
+ productsContainer.appendChild(productCard);
528
+ });
529
+
530
+ // Add event listeners to the newly created buttons
531
+ document.querySelectorAll('.add-to-cart-btn').forEach(btn => {
532
+ btn.addEventListener('click', (e) => {
533
+ const productId = parseInt(e.target.getAttribute('data-id'));
534
+ addToCart(productId);
535
+ });
536
+ });
537
+
538
+ document.querySelectorAll('.quick-view-btn').forEach(btn => {
539
+ btn.addEventListener('click', (e) => {
540
+ const productId = parseInt(e.target.closest('button').getAttribute('data-id'));
541
+ showQuickView(productId);
542
+ });
543
+ });
544
+ }
545
+
546
+ // Set up event listeners
547
+ function setupEventListeners() {
548
+ // Cart toggle
549
+ cartBtn.addEventListener('click', toggleCart);
550
+ closeCartBtn.addEventListener('click', toggleCart);
551
+ cartOverlay.addEventListener('click', toggleCart);
552
+
553
+ // Category filtering
554
+ categoryBtns.forEach(btn => {
555
+ btn.addEventListener('click', (e) => {
556
+ const category = e.target.getAttribute('data-category');
557
+ filterProducts(category);
558
+
559
+ // Update active button
560
+ categoryBtns.forEach(b => b.classList.remove('bg-indigo-600', 'text-white'));
561
+ categoryBtns.forEach(b => b.classList.add('bg-white', 'text-gray-700'));
562
+
563
+ e.target.classList.remove('bg-white', 'text-gray-700');
564
+ e.target.classList.add('bg-indigo-600', 'text-white');
565
+ });
566
+ });
567
+
568
+ // Quick view modal
569
+ closeQuickViewBtn.addEventListener('click', () => {
570
+ quickViewModal.classList.add('hidden');
571
+ });
572
+
573
+ // Search toggle
574
+ searchBtn.addEventListener('click', () => {
575
+ searchBar.classList.toggle('hidden');
576
+ });
577
+
578
+ // Mobile menu toggle
579
+ mobileMenuBtn.addEventListener('click', () => {
580
+ mobileMenu.classList.toggle('hidden');
581
+ });
582
+
583
+ // Checkout button
584
+ checkoutBtn.addEventListener('click', () => {
585
+ alert('Checkout functionality would be implemented here!');
586
+ // In a real app, this would redirect to a checkout page
587
+ });
588
+ }
589
+
590
+ // Filter products by category
591
+ function filterProducts(category) {
592
+ if (category === 'all') {
593
+ renderProducts(products);
594
+ } else {
595
+ const filteredProducts = products.filter(product => product.category === category);
596
+ renderProducts(filteredProducts);
597
+ }
598
+ }
599
+
600
+ // Add product to cart
601
+ function addToCart(productId) {
602
+ const product = products.find(p => p.id === productId);
603
+
604
+ // Check if product is already in cart
605
+ const existingItem = cart.find(item => item.id === productId);
606
+
607
+ if (existingItem) {
608
+ existingItem.quantity += 1;
609
+ } else {
610
+ cart.push({
611
+ ...product,
612
+ quantity: 1
613
+ });
614
+ }
615
+
616
+ updateCart();
617
+
618
+ // Show feedback animation
619
+ const cartIcon = cartBtn.querySelector('i');
620
+ cartIcon.classList.add('pulse-animation');
621
+ setTimeout(() => {
622
+ cartIcon.classList.remove('pulse-animation');
623
+ }, 1500);
624
+ }
625
+
626
+ // Update cart UI
627
+ function updateCart() {
628
+ // Update cart count
629
+ const totalItems = cart.reduce((total, item) => total + item.quantity, 0);
630
+ cartCount.textContent = totalItems;
631
+
632
+ // Update cart items
633
+ cartItemsContainer.innerHTML = '';
634
+
635
+ if (cart.length === 0) {
636
+ emptyCartMessage.classList.remove('hidden');
637
+ cartSummary.classList.add('hidden');
638
+ } else {
639
+ emptyCartMessage.classList.add('hidden');
640
+ cartSummary.classList.remove('hidden');
641
+
642
+ let subtotal = 0;
643
+
644
+ cart.forEach(item => {
645
+ const itemTotal = item.price * item.quantity;
646
+ subtotal += itemTotal;
647
+
648
+ const cartItem = document.createElement('div');
649
+ cartItem.className = 'cart-item flex items-center border-b pb-4';
650
+ cartItem.innerHTML = `
651
+ <div class="w-16 h-16 bg-gray-100 rounded-lg overflow-hidden mr-4">
652
+ <img src="${item.image}" alt="${item.name}" class="w-full h-full object-cover">
653
+ </div>
654
+ <div class="flex-grow">
655
+ <h4 class="font-medium text-gray-800">${item.name}</h4>
656
+ <div class="flex justify-between items-center mt-1">
657
+ <div class="flex items-center border rounded-lg">
658
+ <button class="decrease-quantity px-2 py-1 text-gray-600 hover:bg-gray-100" data-id="${item.id}">-</button>
659
+ <span class="quantity px-3 py-1 border-x">${item.quantity}</span>
660
+ <button class="increase-quantity px-2 py-1 text-gray-600 hover:bg-gray-100" data-id="${item.id}">+</button>
661
+ </div>
662
+ <span class="font-medium">$${itemTotal.toFixed(2)}</span>
663
+ </div>
664
+ </div>
665
+ <button class="remove-item ml-4 text-gray-500 hover:text-red-500" data-id="${item.id}">
666
+ <i class="fas fa-times"></i>
667
+ </button>
668
+ `;
669
+ cartItemsContainer.appendChild(cartItem);
670
+ });
671
+
672
+ // Update totals
673
+ cartSubtotal.textContent = `$${subtotal.toFixed(2)}`;
674
+ cartTotal.textContent = `$${subtotal.toFixed(2)}`;
675
+
676
+ // Add event listeners to quantity buttons
677
+ document.querySelectorAll('.increase-quantity').forEach(btn => {
678
+ btn.addEventListener('click', (e) => {
679
+ const id = parseInt(e.target.getAttribute('data-id'));
680
+ updateCartItemQuantity(id, 1);
681
+ });
682
+ });
683
+
684
+ document.querySelectorAll('.decrease-quantity').forEach(btn => {
685
+ btn.addEventListener('click', (e) => {
686
+ const id = parseInt(e.target.getAttribute('data-id'));
687
+ updateCartItemQuantity(id, -1);
688
+ });
689
+ });
690
+
691
+ document.querySelectorAll('.remove-item').forEach(btn => {
692
+ btn.addEventListener('click', (e) => {
693
+ const id = parseInt(e.target.closest('button').getAttribute('data-id'));
694
+ removeFromCart(id);
695
+ });
696
+ });
697
+ }
698
+ }
699
+
700
+ // Update cart item quantity
701
+ function updateCartItemQuantity(productId, change) {
702
+ const item = cart.find(item => item.id === productId);
703
+
704
+ if (item) {
705
+ item.quantity += change;
706
+
707
+ // Remove item if quantity reaches 0
708
+ if (item.quantity <= 0) {
709
+ cart = cart.filter(item => item.id !== productId);
710
+ }
711
+
712
+ updateCart();
713
+ }
714
+ }
715
+
716
+ // Remove item from cart
717
+ function removeFromCart(productId) {
718
+ cart = cart.filter(item => item.id !== productId);
719
+ updateCart();
720
+ }
721
+
722
+ // Toggle cart visibility
723
+ function toggleCart() {
724
+ cartSidebar.classList.toggle('translate-x-full');
725
+ cartOverlay.classList.toggle('hidden');
726
+
727
+ // Prevent scrolling when cart is open
728
+ if (cartOverlay.classList.contains('hidden')) {
729
+ document.body.style.overflow = 'auto';
730
+ } else {
731
+ document.body.style.overflow = 'hidden';
732
+ }
733
+ }
734
+
735
+ // Show quick view modal
736
+ function showQuickView(productId) {
737
+ const product = products.find(p => p.id === productId);
738
+
739
+ if (product) {
740
+ document.getElementById('quick-view-title').textContent = product.name;
741
+ document.getElementById('quick-view-image').src = product.image;
742
+ document.getElementById('quick-view-price').textContent = `$${product.price.toFixed(2)}`;
743
+ document.getElementById('quick-view-description').textContent = product.description;
744
+
745
+ // Set up quantity controls
746
+ const quantityValue = document.querySelector('.quantity-value');
747
+ const decreaseBtn = document.querySelector('.quantity-decrease');
748
+ const increaseBtn = document.querySelector('.quantity-increase');
749
+
750
+ let quantity = 1;
751
+ quantityValue.textContent = quantity;
752
+
753
+ decreaseBtn.addEventListener('click', () => {
754
+ if (quantity > 1) {
755
+ quantity--;
756
+ quantityValue.textContent = quantity;
757
+ }
758
+ });
759
+
760
+ increaseBtn.addEventListener('click', () => {
761
+ quantity++;
762
+ quantityValue.textContent = quantity;
763
+ });
764
+
765
+ // Set up add to cart button
766
+ const addToCartBtn = document.getElementById('add-to-cart-quick');
767
+ addToCartBtn.onclick = () => {
768
+ for (let i = 0; i < quantity; i++) {
769
+ addToCart(productId);
770
+ }
771
+ quickViewModal.classList.add('hidden');
772
+ };
773
+
774
+ quickViewModal.classList.remove('hidden');
775
+ }
776
+ }
777
+ </script>
778
+ <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=priom7/ecom" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body>
779
+ </html>