Hugging Face's logo

Spaces:
DhruvinDI
/
deepsite
Running

App Files Community
DhruvinDI commited on
Commit
2e529e9
·
verified ·
1 Parent(s): aafeaa4

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +597 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Deepsite
3
- emoji: 📊
4
- colorFrom: yellow
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: deepsite
3
+ emoji: 🐳
4
+ colorFrom: pink
5
+ colorTo: purple
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,597 @@
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>ShopEase - Modern Shopping UI</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 scrollbar */
11
+ ::-webkit-scrollbar {
12
+ width: 8px;
13
+ }
14
+ ::-webkit-scrollbar-track {
15
+ background: #f1f1f1;
16
+ }
17
+ ::-webkit-scrollbar-thumb {
18
+ background: #888;
19
+ border-radius: 4px;
20
+ }
21
+ ::-webkit-scrollbar-thumb:hover {
22
+ background: #555;
23
+ }
24
+
25
+ /* Pulse animation for cart */
26
+ @keyframes pulse {
27
+ 0% { transform: scale(1); }
28
+ 50% { transform: scale(1.1); }
29
+ 100% { transform: scale(1); }
30
+ }
31
+ .pulse {
32
+ animation: pulse 0.5s ease;
33
+ }
34
+
35
+ /* Slide-in animation for cart */
36
+ @keyframes slideIn {
37
+ from { transform: translateX(100%); }
38
+ to { transform: translateX(0); }
39
+ }
40
+ .slide-in {
41
+ animation: slideIn 0.3s ease-out;
42
+ }
43
+ </style>
44
+ </head>
45
+ <body class="bg-gray-50 font-sans">
46
+ <!-- Header/Navigation -->
47
+ <header class="bg-white shadow-sm sticky top-0 z-10">
48
+ <div class="container mx-auto px-4 py-3 flex justify-between items-center">
49
+ <div class="flex items-center space-x-2">
50
+ <i class="fas fa-shopping-bag text-2xl text-indigo-600"></i>
51
+ <h1 class="text-xl font-bold text-gray-800">ShopEase</h1>
52
+ </div>
53
+
54
+ <div class="hidden md:flex space-x-6">
55
+ <a href="#" class="text-gray-700 hover:text-indigo-600 transition">Home</a>
56
+ <a href="#" class="text-gray-700 hover:text-indigo-600 transition">Products</a>
57
+ <a href="#" class="text-gray-700 hover:text-indigo-600 transition">Categories</a>
58
+ <a href="#" class="text-gray-700 hover:text-indigo-600 transition">About</a>
59
+ </div>
60
+
61
+ <div class="flex items-center space-x-4">
62
+ <div class="relative">
63
+ <button id="searchBtn" class="text-gray-600 hover:text-indigo-600">
64
+ <i class="fas fa-search"></i>
65
+ </button>
66
+ <div id="searchBar" class="hidden absolute right-0 mt-2 w-64 bg-white p-2 rounded shadow-lg">
67
+ <input type="text" placeholder="Search products..." class="w-full px-3 py-1 border rounded focus:outline-none focus:ring-1 focus:ring-indigo-500">
68
+ </div>
69
+ </div>
70
+
71
+ <button id="cartBtn" class="relative text-gray-600 hover:text-indigo-600">
72
+ <i class="fas fa-shopping-cart text-xl"></i>
73
+ <span id="cartCount" class="absolute -top-2 -right-2 bg-indigo-600 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">0</span>
74
+ </button>
75
+
76
+ <button class="md:hidden text-gray-600 hover:text-indigo-600">
77
+ <i class="fas fa-bars text-xl"></i>
78
+ </button>
79
+ </div>
80
+ </div>
81
+ </header>
82
+
83
+ <!-- Hero Section -->
84
+ <section class="bg-gradient-to-r from-indigo-500 to-purple-600 text-white py-12">
85
+ <div class="container mx-auto px-4 text-center">
86
+ <h2 class="text-4xl font-bold mb-4">Summer Collection 2023</h2>
87
+ <p class="text-xl mb-8 max-w-2xl mx-auto">Discover our latest arrivals with up to 30% off on selected items</p>
88
+ <button class="bg-white text-indigo-600 px-6 py-2 rounded-full font-medium hover:bg-gray-100 transition shadow-lg">Shop Now</button>
89
+ </div>
90
+ </section>
91
+
92
+ <!-- Main Content -->
93
+ <main class="container mx-auto px-4 py-8">
94
+ <!-- Categories -->
95
+ <div class="mb-8">
96
+ <h2 class="text-2xl font-bold text-gray-800 mb-4">Shop by Category</h2>
97
+ <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4">
98
+ <div class="bg-white rounded-lg shadow p-4 text-center hover:shadow-md transition cursor-pointer">
99
+ <div class="bg-indigo-100 rounded-full p-3 inline-block mb-2">
100
+ <i class="fas fa-tshirt text-indigo-600 text-xl"></i>
101
+ </div>
102
+ <p class="font-medium">Clothing</p>
103
+ </div>
104
+ <div class="bg-white rounded-lg shadow p-4 text-center hover:shadow-md transition cursor-pointer">
105
+ <div class="bg-green-100 rounded-full p-3 inline-block mb-2">
106
+ <i class="fas fa-laptop text-green-600 text-xl"></i>
107
+ </div>
108
+ <p class="font-medium">Electronics</p>
109
+ </div>
110
+ <div class="bg-white rounded-lg shadow p-4 text-center hover:shadow-md transition cursor-pointer">
111
+ <div class="bg-yellow-100 rounded-full p-3 inline-block mb-2">
112
+ <i class="fas fa-home text-yellow-600 text-xl"></i>
113
+ </div>
114
+ <p class="font-medium">Home</p>
115
+ </div>
116
+ <div class="bg-white rounded-lg shadow p-4 text-center hover:shadow-md transition cursor-pointer">
117
+ <div class="bg-red-100 rounded-full p-3 inline-block mb-2">
118
+ <i class="fas fa-utensils text-red-600 text-xl"></i>
119
+ </div>
120
+ <p class="font-medium">Kitchen</p>
121
+ </div>
122
+ <div class="bg-white rounded-lg shadow p-4 text-center hover:shadow-md transition cursor-pointer">
123
+ <div class="bg-blue-100 rounded-full p-3 inline-block mb-2">
124
+ <i class="fas fa-book text-blue-600 text-xl"></i>
125
+ </div>
126
+ <p class="font-medium">Books</p>
127
+ </div>
128
+ <div class="bg-white rounded-lg shadow p-4 text-center hover:shadow-md transition cursor-pointer">
129
+ <div class="bg-purple-100 rounded-full p-3 inline-block mb-2">
130
+ <i class="fas fa-dumbbell text-purple-600 text-xl"></i>
131
+ </div>
132
+ <p class="font-medium">Fitness</p>
133
+ </div>
134
+ </div>
135
+ </div>
136
+
137
+ <!-- Products -->
138
+ <div>
139
+ <div class="flex justify-between items-center mb-6">
140
+ <h2 class="text-2xl font-bold text-gray-800">Featured Products</h2>
141
+ <div class="flex space-x-2">
142
+ <button class="px-3 py-1 bg-gray-200 rounded hover:bg-gray-300 transition">All</button>
143
+ <button class="px-3 py-1 bg-gray-200 rounded hover:bg-gray-300 transition">New</button>
144
+ <button class="px-3 py-1 bg-indigo-600 text-white rounded hover:bg-indigo-700 transition">Popular</button>
145
+ <button class="px-3 py-1 bg-gray-200 rounded hover:bg-gray-300 transition">Sale</button>
146
+ </div>
147
+ </div>
148
+
149
+ <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
150
+ <!-- Product 1 -->
151
+ <div class="bg-white rounded-lg shadow overflow-hidden hover:shadow-lg transition">
152
+ <div class="relative">
153
+ <img src="https://images.unsplash.com/photo-1542291026-7eec264c27ff?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="Running Shoes" class="w-full h-48 object-cover">
154
+ <div class="absolute top-2 right-2 bg-red-500 text-white text-xs font-bold px-2 py-1 rounded">SALE</div>
155
+ </div>
156
+ <div class="p-4">
157
+ <h3 class="font-bold text-gray-800 mb-1">Nike Air Max</h3>
158
+ <p class="text-gray-600 text-sm mb-2">Premium running shoes with air cushioning</p>
159
+ <div class="flex justify-between items-center">
160
+ <div>
161
+ <span class="font-bold text-indigo-600">$89.99</span>
162
+ <span class="text-gray-400 text-sm line-through ml-2">$120.00</span>
163
+ </div>
164
+ <button class="add-to-cart bg-indigo-600 text-white p-2 rounded-full hover:bg-indigo-700 transition" data-id="1" data-name="Nike Air Max" data-price="89.99" data-image="https://images.unsplash.com/photo-1542291026-7eec264c27ff?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80">
165
+ <i class="fas fa-cart-plus"></i>
166
+ </button>
167
+ </div>
168
+ </div>
169
+ </div>
170
+
171
+ <!-- Product 2 -->
172
+ <div class="bg-white rounded-lg shadow overflow-hidden hover:shadow-lg transition">
173
+ <div class="relative">
174
+ <img src="https://images.unsplash.com/photo-1523275335684-37898b6baf30?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1099&q=80" alt="Smart Watch" class="w-full h-48 object-cover">
175
+ </div>
176
+ <div class="p-4">
177
+ <h3 class="font-bold text-gray-800 mb-1">Smart Watch Pro</h3>
178
+ <p class="text-gray-600 text-sm mb-2">Track your fitness with this advanced smartwatch</p>
179
+ <div class="flex justify-between items-center">
180
+ <div>
181
+ <span class="font-bold text-indigo-600">$199.99</span>
182
+ </div>
183
+ <button class="add-to-cart bg-indigo-600 text-white p-2 rounded-full hover:bg-indigo-700 transition" data-id="2" data-name="Smart Watch Pro" data-price="199.99" data-image="https://images.unsplash.com/photo-1523275335684-37898b6baf30?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1099&q=80">
184
+ <i class="fas fa-cart-plus"></i>
185
+ </button>
186
+ </div>
187
+ </div>
188
+ </div>
189
+
190
+ <!-- Product 3 -->
191
+ <div class="bg-white rounded-lg shadow overflow-hidden hover:shadow-lg transition">
192
+ <div class="relative">
193
+ <img src="https://images.unsplash.com/photo-1505740420928-5e560c06d30e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="Headphones" class="w-full h-48 object-cover">
194
+ <div class="absolute top-2 right-2 bg-green-500 text-white text-xs font-bold px-2 py-1 rounded">NEW</div>
195
+ </div>
196
+ <div class="p-4">
197
+ <h3 class="font-bold text-gray-800 mb-1">Wireless Headphones</h3>
198
+ <p class="text-gray-600 text-sm mb-2">Noise cancelling with 30hr battery life</p>
199
+ <div class="flex justify-between items-center">
200
+ <div>
201
+ <span class="font-bold text-indigo-600">$149.99</span>
202
+ </div>
203
+ <button class="add-to-cart bg-indigo-600 text-white p-2 rounded-full hover:bg-indigo-700 transition" data-id="3" data-name="Wireless Headphones" data-price="149.99" data-image="https://images.unsplash.com/photo-1505740420928-5e560c06d30e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80">
204
+ <i class="fas fa-cart-plus"></i>
205
+ </button>
206
+ </div>
207
+ </div>
208
+ </div>
209
+
210
+ <!-- Product 4 -->
211
+ <div class="bg-white rounded-lg shadow overflow-hidden hover:shadow-lg transition">
212
+ <div class="relative">
213
+ <img src="https://images.unsplash.com/photo-1546868871-7041f2a55e12?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1064&q=80" alt="Backpack" class="w-full h-48 object-cover">
214
+ </div>
215
+ <div class="p-4">
216
+ <h3 class="font-bold text-gray-800 mb-1">Travel Backpack</h3>
217
+ <p class="text-gray-600 text-sm mb-2">Waterproof with USB charging port</p>
218
+ <div class="flex justify-between items-center">
219
+ <div>
220
+ <span class="font-bold text-indigo-600">$59.99</span>
221
+ <span class="text-gray-400 text-sm line-through ml-2">$75.00</span>
222
+ </div>
223
+ <button class="add-to-cart bg-indigo-600 text-white p-2 rounded-full hover:bg-indigo-700 transition" data-id="4" data-name="Travel Backpack" data-price="59.99" data-image="https://images.unsplash.com/photo-1546868871-7041f2a55e12?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1064&q=80">
224
+ <i class="fas fa-cart-plus"></i>
225
+ </button>
226
+ </div>
227
+ </div>
228
+ </div>
229
+
230
+ <!-- Product 5 -->
231
+ <div class="bg-white rounded-lg shadow overflow-hidden hover:shadow-lg transition">
232
+ <div class="relative">
233
+ <img src="https://images.unsplash.com/photo-1560343090-f0409e92791a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1128&q=80" alt="T-Shirt" class="w-full h-48 object-cover">
234
+ </div>
235
+ <div class="p-4">
236
+ <h3 class="font-bold text-gray-800 mb-1">Cotton T-Shirt</h3>
237
+ <p class="text-gray-600 text-sm mb-2">Premium quality 100% cotton</p>
238
+ <div class="flex justify-between items-center">
239
+ <div>
240
+ <span class="font-bold text-indigo-600">$24.99</span>
241
+ </div>
242
+ <button class="add-to-cart bg-indigo-600 text-white p-2 rounded-full hover:bg-indigo-700 transition" data-id="5" data-name="Cotton T-Shirt" data-price="24.99" data-image="https://images.unsplash.com/photo-1560343090-f0409e92791a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1128&q=80">
243
+ <i class="fas fa-cart-plus"></i>
244
+ </button>
245
+ </div>
246
+ </div>
247
+ </div>
248
+
249
+ <!-- Product 6 -->
250
+ <div class="bg-white rounded-lg shadow overflow-hidden hover:shadow-lg transition">
251
+ <div class="relative">
252
+ <img src="https://images.unsplash.com/photo-1526170375885-4d8ecf77b99f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="Camera" class="w-full h-48 object-cover">
253
+ <div class="absolute top-2 right-2 bg-blue-500 text-white text-xs font-bold px-2 py-1 rounded">BEST</div>
254
+ </div>
255
+ <div class="p-4">
256
+ <h3 class="font-bold text-gray-800 mb-1">Digital Camera</h3>
257
+ <p class="text-gray-600 text-sm mb-2">24MP with 4K video recording</p>
258
+ <div class="flex justify-between items-center">
259
+ <div>
260
+ <span class="font-bold text-indigo-600">$349.99</span>
261
+ </div>
262
+ <button class="add-to-cart bg-indigo-600 text-white p-2 rounded-full hover:bg-indigo-700 transition" data-id="6" data-name="Digital Camera" data-price="349.99" data-image="https://images.unsplash.com/photo-1526170375885-4d8ecf77b99f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80">
263
+ <i class="fas fa-cart-plus"></i>
264
+ </button>
265
+ </div>
266
+ </div>
267
+ </div>
268
+
269
+ <!-- Product 7 -->
270
+ <div class="bg-white rounded-lg shadow overflow-hidden hover:shadow-lg transition">
271
+ <div class="relative">
272
+ <img src="https://images.unsplash.com/photo-1585386959984-a4155224a1ad?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1074&q=80" alt="Perfume" class="w-full h-48 object-cover">
273
+ </div>
274
+ <div class="p-4">
275
+ <h3 class="font-bold text-gray-800 mb-1">Eau de Parfum</h3>
276
+ <p class="text-gray-600 text-sm mb-2">Luxury fragrance with long lasting scent</p>
277
+ <div class="flex justify-between items-center">
278
+ <div>
279
+ <span class="font-bold text-indigo-600">$79.99</span>
280
+ </div>
281
+ <button class="add-to-cart bg-indigo-600 text-white p-2 rounded-full hover:bg-indigo-700 transition" data-id="7" data-name="Eau de Parfum" data-price="79.99" data-image="https://images.unsplash.com/photo-1585386959984-a4155224a1ad?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1074&q=80">
282
+ <i class="fas fa-cart-plus"></i>
283
+ </button>
284
+ </div>
285
+ </div>
286
+ </div>
287
+
288
+ <!-- Product 8 -->
289
+ <div class="bg-white rounded-lg shadow overflow-hidden hover:shadow-lg transition">
290
+ <div class="relative">
291
+ <img src="https://images.unsplash.com/photo-1591047139829-d91aecb6caea?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1136&q=80" alt="Smartphone" class="w-full h-48 object-cover">
292
+ <div class="absolute top-2 right-2 bg-purple-500 text-white text-xs font-bold px-2 py-1 rounded">HOT</div>
293
+ </div>
294
+ <div class="p-4">
295
+ <h3 class="font-bold text-gray-800 mb-1">Smartphone Pro</h3>
296
+ <p class="text-gray-600 text-sm mb-2">Latest model with 128GB storage</p>
297
+ <div class="flex justify-between items-center">
298
+ <div>
299
+ <span class="font-bold text-indigo-600">$799.99</span>
300
+ </div>
301
+ <button class="add-to-cart bg-indigo-600 text-white p-2 rounded-full hover:bg-indigo-700 transition" data-id="8" data-name="Smartphone Pro" data-price="799.99" data-image="https://images.unsplash.com/photo-1591047139829-d91aecb6caea?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1136&q=80">
302
+ <i class="fas fa-cart-plus"></i>
303
+ </button>
304
+ </div>
305
+ </div>
306
+ </div>
307
+ </div>
308
+ </div>
309
+ </main>
310
+
311
+ <!-- Newsletter -->
312
+ <section class="bg-gray-100 py-12">
313
+ <div class="container mx-auto px-4 text-center">
314
+ <h2 class="text-2xl font-bold text-gray-800 mb-2">Subscribe to Our Newsletter</h2>
315
+ <p class="text-gray-600 mb-6 max-w-2xl mx-auto">Get the latest updates on new products and upcoming sales</p>
316
+ <div class="max-w-md mx-auto flex">
317
+ <input type="email" placeholder="Your email address" class="flex-grow px-4 py-2 border rounded-l focus:outline-none focus:ring-1 focus:ring-indigo-500">
318
+ <button class="bg-indigo-600 text-white px-6 py-2 rounded-r hover:bg-indigo-700 transition">Subscribe</button>
319
+ </div>
320
+ </div>
321
+ </section>
322
+
323
+ <!-- Footer -->
324
+ <footer class="bg-gray-800 text-white py-8">
325
+ <div class="container mx-auto px-4">
326
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
327
+ <div>
328
+ <h3 class="text-xl font-bold mb-4">ShopEase</h3>
329
+ <p class="text-gray-400">Your one-stop shop for all your needs. Quality products at affordable prices.</p>
330
+ </div>
331
+ <div>
332
+ <h4 class="font-bold mb-4">Shop</h4>
333
+ <ul class="space-y-2">
334
+ <li><a href="#" class="text-gray-400 hover:text-white transition">All Products</a></li>
335
+ <li><a href="#" class="text-gray-400 hover:text-white transition">New Arrivals</a></li>
336
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Featured</a></li>
337
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Discounts</a></li>
338
+ </ul>
339
+ </div>
340
+ <div>
341
+ <h4 class="font-bold mb-4">Customer Service</h4>
342
+ <ul class="space-y-2">
343
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Contact Us</a></li>
344
+ <li><a href="#" class="text-gray-400 hover:text-white transition">FAQs</a></li>
345
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Shipping & Returns</a></li>
346
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Privacy Policy</a></li>
347
+ </ul>
348
+ </div>
349
+ <div>
350
+ <h4 class="font-bold mb-4">Connect With Us</h4>
351
+ <div class="flex space-x-4">
352
+ <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-facebook-f"></i></a>
353
+ <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-twitter"></i></a>
354
+ <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-instagram"></i></a>
355
+ <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-pinterest"></i></a>
356
+ </div>
357
+ <p class="text-gray-400 mt-4">support@shopease.com</p>
358
+ <p class="text-gray-400">+1 (555) 123-4567</p>
359
+ </div>
360
+ </div>
361
+ <div class="border-t border-gray-700 mt-8 pt-6 text-center text-gray-400">
362
+ <p>&copy; 2023 ShopEase. All rights reserved.</p>
363
+ </div>
364
+ </div>
365
+ </footer>
366
+
367
+ <!-- Shopping Cart Sidebar -->
368
+ <div id="cartSidebar" class="fixed top-0 right-0 h-full w-full md:w-96 bg-white shadow-lg transform translate-x-full z-20 transition duration-300 ease-in-out overflow-y-auto">
369
+ <div class="p-4 border-b">
370
+ <div class="flex justify-between items-center">
371
+ <h3 class="text-xl font-bold">Your Cart (<span id="sidebarCartCount">0</span>)</h3>
372
+ <button id="closeCart" class="text-gray-500 hover:text-gray-700">
373
+ <i class="fas fa-times"></i>
374
+ </button>
375
+ </div>
376
+ </div>
377
+
378
+ <div id="cartItems" class="p-4 space-y-4">
379
+ <!-- Cart items will be added here dynamically -->
380
+ <div class="text-center py-8 text-gray-500">
381
+ <i class="fas fa-shopping-cart text-4xl mb-2"></i>
382
+ <p>Your cart is empty</p>
383
+ </div>
384
+ </div>
385
+
386
+ <div class="p-4 border-t">
387
+ <div class="flex justify-between mb-2">
388
+ <span>Subtotal:</span>
389
+ <span id="cartSubtotal">$0.00</span>
390
+ </div>
391
+ <div class="flex justify-between mb-4">
392
+ <span>Shipping:</span>
393
+ <span>Calculated at checkout</span>
394
+ </div>
395
+ <button id="checkoutBtn" class="w-full bg-indigo-600 text-white py-2 rounded hover:bg-indigo-700 transition">Proceed to Checkout</button>
396
+ <p class="text-center text-sm text-gray-500 mt-2">or <a href="#" class="text-indigo-600 hover:underline">continue shopping</a></p>
397
+ </div>
398
+ </div>
399
+
400
+ <!-- Overlay -->
401
+ <div id="overlay" class="fixed inset-0 bg-black bg-opacity-50 z-10 hidden"></div>
402
+
403
+ <!-- Toast Notification -->
404
+ <div id="toast" class="fixed bottom-4 right-4 bg-green-500 text-white px-4 py-2 rounded shadow-lg hidden z-30">
405
+ <div class="flex items-center">
406
+ <i class="fas fa-check-circle mr-2"></i>
407
+ <span id="toastMessage">Item added to cart!</span>
408
+ </div>
409
+ </div>
410
+
411
+ <script>
412
+ // DOM Elements
413
+ const cartBtn = document.getElementById('cartBtn');
414
+ const closeCart = document.getElementById('closeCart');
415
+ const cartSidebar = document.getElementById('cartSidebar');
416
+ const overlay = document.getElementById('overlay');
417
+ const addToCartButtons = document.querySelectorAll('.add-to-cart');
418
+ const cartItemsContainer = document.getElementById('cartItems');
419
+ const cartCount = document.getElementById('cartCount');
420
+ const sidebarCartCount = document.getElementById('sidebarCartCount');
421
+ const cartSubtotal = document.getElementById('cartSubtotal');
422
+ const checkoutBtn = document.getElementById('checkoutBtn');
423
+ const searchBtn = document.getElementById('searchBtn');
424
+ const searchBar = document.getElementById('searchBar');
425
+ const toast = document.getElementById('toast');
426
+ const toastMessage = document.getElementById('toastMessage');
427
+
428
+ // Cart state
429
+ let cart = JSON.parse(localStorage.getItem('cart')) || [];
430
+
431
+ // Initialize cart
432
+ updateCart();
433
+
434
+ // Event Listeners
435
+ cartBtn.addEventListener('click', toggleCart);
436
+ closeCart.addEventListener('click', toggleCart);
437
+ overlay.addEventListener('click', toggleCart);
438
+ checkoutBtn.addEventListener('click', proceedToCheckout);
439
+ searchBtn.addEventListener('click', toggleSearch);
440
+
441
+ // Add to cart functionality
442
+ addToCartButtons.forEach(button => {
443
+ button.addEventListener('click', () => {
444
+ const id = button.dataset.id;
445
+ const name = button.dataset.name;
446
+ const price = parseFloat(button.dataset.price);
447
+ const image = button.dataset.image;
448
+
449
+ addToCart(id, name, price, image);
450
+ showToast(`${name} added to cart!`);
451
+ });
452
+ });
453
+
454
+ // Functions
455
+ function toggleCart() {
456
+ cartSidebar.classList.toggle('translate-x-full');
457
+ overlay.classList.toggle('hidden');
458
+ document.body.classList.toggle('overflow-hidden');
459
+ }
460
+
461
+ function toggleSearch() {
462
+ searchBar.classList.toggle('hidden');
463
+ }
464
+
465
+ function addToCart(id, name, price, image) {
466
+ const existingItem = cart.find(item => item.id === id);
467
+
468
+ if (existingItem) {
469
+ existingItem.quantity += 1;
470
+ } else {
471
+ cart.push({ id, name, price, image, quantity: 1 });
472
+ }
473
+
474
+ updateCart();
475
+ saveCartToLocalStorage();
476
+
477
+ // Add pulse animation to cart icon
478
+ cartCount.classList.add('pulse');
479
+ setTimeout(() => cartCount.classList.remove('pulse'), 500);
480
+ }
481
+
482
+ function updateCart() {
483
+ // Update cart count
484
+ const totalItems = cart.reduce((total, item) => total + item.quantity, 0);
485
+ cartCount.textContent = totalItems;
486
+ sidebarCartCount.textContent = totalItems;
487
+
488
+ // Update cart items in sidebar
489
+ if (cart.length === 0) {
490
+ cartItemsContainer.innerHTML = `
491
+ <div class="text-center py-8 text-gray-500">
492
+ <i class="fas fa-shopping-cart text-4xl mb-2"></i>
493
+ <p>Your cart is empty</p>
494
+ </div>
495
+ `;
496
+ cartSubtotal.textContent = '$0.00';
497
+ return;
498
+ }
499
+
500
+ cartItemsContainer.innerHTML = cart.map(item => `
501
+ <div class="flex items-center border-b pb-4" data-id="${item.id}">
502
+ <img src="${item.image}" alt="${item.name}" class="w-16 h-16 object-cover rounded">
503
+ <div class="ml-4 flex-grow">
504
+ <h4 class="font-medium">${item.name}</h4>
505
+ <p class="text-gray-600">$${item.price.toFixed(2)}</p>
506
+ <div class="flex items-center mt-1">
507
+ <button class="decrease-quantity text-gray-500 hover:text-indigo-600" data-id="${item.id}">
508
+ <i class="fas fa-minus text-xs"></i>
509
+ </button>
510
+ <span class="quantity mx-2">${item.quantity}</span>
511
+ <button class="increase-quantity text-gray-500 hover:text-indigo-600" data-id="${item.id}">
512
+ <i class="fas fa-plus text-xs"></i>
513
+ </button>
514
+ </div>
515
+ </div>
516
+ <button class="remove-item text-gray-400 hover:text-red-500 ml-2" data-id="${item.id}">
517
+ <i class="fas fa-trash"></i>
518
+ </button>
519
+ </div>
520
+ `).join('');
521
+
522
+ // Update subtotal
523
+ const subtotal = cart.reduce((total, item) => total + (item.price * item.quantity), 0);
524
+ cartSubtotal.textContent = `$${subtotal.toFixed(2)}`;
525
+
526
+ // Add event listeners to new buttons
527
+ document.querySelectorAll('.decrease-quantity').forEach(button => {
528
+ button.addEventListener('click', (e) => {
529
+ const id = e.target.closest('button').dataset.id;
530
+ updateQuantity(id, -1);
531
+ });
532
+ });
533
+
534
+ document.querySelectorAll('.increase-quantity').forEach(button => {
535
+ button.addEventListener('click', (e) => {
536
+ const id = e.target.closest('button').dataset.id;
537
+ updateQuantity(id, 1);
538
+ });
539
+ });
540
+
541
+ document.querySelectorAll('.remove-item').forEach(button => {
542
+ button.addEventListener('click', (e) => {
543
+ const id = e.target.closest('button').dataset.id;
544
+ removeFromCart(id);
545
+ showToast('Item removed from cart');
546
+ });
547
+ });
548
+ }
549
+
550
+ function updateQuantity(id, change) {
551
+ const item = cart.find(item => item.id === id);
552
+
553
+ if (item) {
554
+ item.quantity += change;
555
+
556
+ if (item.quantity <= 0) {
557
+ cart = cart.filter(item => item.id !== id);
558
+ }
559
+
560
+ updateCart();
561
+ saveCartToLocalStorage();
562
+ }
563
+ }
564
+
565
+ function removeFromCart(id) {
566
+ cart = cart.filter(item => item.id !== id);
567
+ updateCart();
568
+ saveCartToLocalStorage();
569
+ }
570
+
571
+ function saveCartToLocalStorage() {
572
+ localStorage.setItem('cart', JSON.stringify(cart));
573
+ }
574
+
575
+ function proceedToCheckout() {
576
+ if (cart.length === 0) {
577
+ showToast('Your cart is empty!');
578
+ return;
579
+ }
580
+ showToast('Proceeding to checkout...');
581
+ // In a real app, you would redirect to checkout page
582
+ setTimeout(() => {
583
+ toggleCart();
584
+ }, 1000);
585
+ }
586
+
587
+ function showToast(message) {
588
+ toastMessage.textContent = message;
589
+ toast.classList.remove('hidden');
590
+
591
+ setTimeout(() => {
592
+ toast.classList.add('hidden');
593
+ }, 3000);
594
+ }
595
+ </script>
596
+ <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=DhruvinDI/deepsite" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
597
+ </html>