Hugging Face's logo

Spaces:
ronalhung
/
earphones
Running

App Files Community
ronalhung commited on
Commit
4a086a1
·
verified ·
1 Parent(s): 2a4b7ce

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +660 -19
  3. prompts.txt +0 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Earphones
3
- emoji: 🏃
4
- colorFrom: red
5
- colorTo: red
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: earphones
3
+ emoji: 🐳
4
+ colorFrom: yellow
5
+ colorTo: gray
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,660 @@
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>Premium Earphones | SonicPulse</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
11
+
12
+ body {
13
+ font-family: 'Poppins', sans-serif;
14
+ background-color: #f8f9fa;
15
+ }
16
+
17
+ .gradient-bg {
18
+ background: linear-gradient(135deg, #6e8efb, #a777e3);
19
+ }
20
+
21
+ .product-card:hover {
22
+ transform: translateY(-5px);
23
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
24
+ }
25
+
26
+ .product-card {
27
+ transition: all 0.3s ease;
28
+ }
29
+
30
+ .color-option {
31
+ width: 30px;
32
+ height: 30px;
33
+ border-radius: 50%;
34
+ cursor: pointer;
35
+ transition: transform 0.2s;
36
+ }
37
+
38
+ .color-option:hover {
39
+ transform: scale(1.1);
40
+ }
41
+
42
+ .color-option.selected {
43
+ border: 2px solid #000;
44
+ transform: scale(1.1);
45
+ }
46
+
47
+ .pulse {
48
+ animation: pulse 2s infinite;
49
+ }
50
+
51
+ @keyframes pulse {
52
+ 0% {
53
+ transform: scale(0.95);
54
+ box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.7);
55
+ }
56
+ 70% {
57
+ transform: scale(1);
58
+ box-shadow: 0 0 0 10px rgba(74, 222, 128, 0);
59
+ }
60
+ 100% {
61
+ transform: scale(0.95);
62
+ box-shadow: 0 0 0 0 rgba(74, 222, 128, 0);
63
+ }
64
+ }
65
+
66
+ .feature-icon {
67
+ width: 50px;
68
+ height: 50px;
69
+ display: flex;
70
+ align-items: center;
71
+ justify-content: center;
72
+ border-radius: 50%;
73
+ background-color: rgba(167, 119, 227, 0.1);
74
+ color: #6e8efb;
75
+ font-size: 20px;
76
+ }
77
+ </style>
78
+ </head>
79
+ <body>
80
+ <!-- Navigation -->
81
+ <nav class="bg-white shadow-sm sticky top-0 z-50">
82
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
83
+ <div class="flex justify-between h-16">
84
+ <div class="flex items-center">
85
+ <div class="flex-shrink-0 flex items-center">
86
+ <i class="fas fa-headphones text-purple-600 text-2xl mr-2"></i>
87
+ <span class="text-xl font-bold text-gray-900">SonicPulse</span>
88
+ </div>
89
+ <div class="hidden sm:ml-6 sm:flex sm:space-x-8">
90
+ <a href="#" class="border-purple-500 text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Home</a>
91
+ <a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Products</a>
92
+ <a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Features</a>
93
+ <a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Support</a>
94
+ </div>
95
+ </div>
96
+ <div class="hidden sm:ml-6 sm:flex sm:items-center">
97
+ <button type="button" class="bg-white p-1 rounded-full text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500">
98
+ <i class="fas fa-search h-6 w-6"></i>
99
+ </button>
100
+ <button type="button" class="ml-3 bg-white p-1 rounded-full text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500">
101
+ <i class="fas fa-shopping-cart h-6 w-6"></i>
102
+ <span class="cart-count absolute top-0 right-0 inline-block w-5 h-5 bg-red-500 text-white text-xs rounded-full flex items-center justify-center">3</span>
103
+ </button>
104
+ </div>
105
+ <div class="-mr-2 flex items-center sm:hidden">
106
+ <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-purple-500" aria-controls="mobile-menu" aria-expanded="false">
107
+ <i class="fas fa-bars h-6 w-6"></i>
108
+ </button>
109
+ </div>
110
+ </div>
111
+ </div>
112
+ </nav>
113
+
114
+ <!-- Hero Section -->
115
+ <div class="gradient-bg text-white">
116
+ <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8 lg:py-24">
117
+ <div class="lg:grid lg:grid-cols-2 lg:gap-8 items-center">
118
+ <div class="mb-8 lg:mb-0">
119
+ <h1 class="text-4xl font-extrabold tracking-tight sm:text-5xl lg:text-6xl mb-4">
120
+ Premium Sound. <br>Unmatched Comfort.
121
+ </h1>
122
+ <p class="text-xl text-purple-100 max-w-3xl">
123
+ Experience crystal clear audio with our noise-cancelling wireless earphones. Designed for music lovers by music lovers.
124
+ </p>
125
+ <div class="mt-8 flex flex-col sm:flex-row gap-4">
126
+ <button class="bg-white text-purple-600 hover:bg-gray-100 px-8 py-3 rounded-full font-medium text-lg shadow-lg transform transition hover:scale-105">
127
+ Shop Now
128
+ </button>
129
+ <button class="border-2 border-white text-white hover:bg-white hover:text-purple-600 px-8 py-3 rounded-full font-medium text-lg transform transition hover:scale-105">
130
+ Learn More
131
+ </button>
132
+ </div>
133
+ </div>
134
+ <div class="relative">
135
+ <img src="https://images.unsplash.com/photo-1590658268037-6bf12165a8df?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Premium Earphones" class="rounded-lg shadow-2xl transform rotate-6">
136
+ <div class="absolute -bottom-6 -left-6 bg-white p-4 rounded-lg shadow-lg">
137
+ <div class="flex items-center">
138
+ <div class="p-2 bg-purple-100 rounded-full mr-3">
139
+ <i class="fas fa-headphones text-purple-600"></i>
140
+ </div>
141
+ <div>
142
+ <p class="text-xs text-gray-500">Best Seller</p>
143
+ <p class="font-bold text-gray-900">SonicPulse Pro</p>
144
+ </div>
145
+ </div>
146
+ </div>
147
+ </div>
148
+ </div>
149
+ </div>
150
+ </div>
151
+
152
+ <!-- Featured Products -->
153
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
154
+ <div class="text-center mb-12">
155
+ <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">
156
+ Our Premium Collection
157
+ </h2>
158
+ <p class="mt-4 max-w-2xl text-xl text-gray-500 mx-auto">
159
+ Choose from our range of high-quality earphones designed for every lifestyle.
160
+ </p>
161
+ </div>
162
+
163
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
164
+ <!-- Product 1 -->
165
+ <div class="product-card bg-white rounded-lg overflow-hidden shadow-md">
166
+ <div class="relative">
167
+ <img src="https://images.unsplash.com/photo-1593784991095-a205069470b6?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Wireless Earphones" class="w-full h-64 object-cover">
168
+ <div class="absolute top-4 right-4">
169
+ <span class="bg-red-500 text-white text-xs font-bold px-2 py-1 rounded-full">SALE</span>
170
+ </div>
171
+ </div>
172
+ <div class="p-6">
173
+ <div class="flex justify-between items-start">
174
+ <div>
175
+ <h3 class="text-lg font-bold text-gray-900">SonicPulse Air</h3>
176
+ <p class="text-gray-500">Wireless Earbuds</p>
177
+ </div>
178
+ <div class="text-right">
179
+ <p class="text-lg font-bold text-purple-600">$129.99</p>
180
+ <p class="text-sm text-gray-400 line-through">$159.99</p>
181
+ </div>
182
+ </div>
183
+ <div class="mt-4 flex space-x-2">
184
+ <div class="color-option bg-black selected" data-color="black"></div>
185
+ <div class="color-option bg-white border border-gray-300" data-color="white"></div>
186
+ <div class="color-option bg-blue-500" data-color="blue"></div>
187
+ <div class="color-option bg-red-500" data-color="red"></div>
188
+ </div>
189
+ <div class="mt-6 flex justify-between">
190
+ <button class="add-to-cart flex-1 bg-gray-900 hover:bg-gray-800 text-white py-2 px-4 rounded-lg font-medium transition">
191
+ Add to Cart
192
+ </button>
193
+ <button class="ml-2 p-2 text-gray-400 hover:text-purple-600 rounded-full border border-gray-300 hover:border-purple-600 transition">
194
+ <i class="far fa-heart"></i>
195
+ </button>
196
+ </div>
197
+ </div>
198
+ </div>
199
+
200
+ <!-- Product 2 -->
201
+ <div class="product-card bg-white rounded-lg overflow-hidden shadow-md">
202
+ <div class="relative">
203
+ <img src="https://images.unsplash.com/photo-1572569511254-d8f925fe2cbb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Noise Cancelling Headphones" class="w-full h-64 object-cover">
204
+ <div class="absolute top-4 right-4">
205
+ <span class="bg-green-500 text-white text-xs font-bold px-2 py-1 rounded-full pulse">NEW</span>
206
+ </div>
207
+ </div>
208
+ <div class="p-6">
209
+ <div class="flex justify-between items-start">
210
+ <div>
211
+ <h3 class="text-lg font-bold text-gray-900">SonicPulse Pro</h3>
212
+ <p class="text-gray-500">Noise Cancelling</p>
213
+ </div>
214
+ <div class="text-right">
215
+ <p class="text-lg font-bold text-purple-600">$199.99</p>
216
+ </div>
217
+ </div>
218
+ <div class="mt-4 flex space-x-2">
219
+ <div class="color-option bg-black selected" data-color="black"></div>
220
+ <div class="color-option bg-gray-400" data-color="gray"></div>
221
+ <div class="color-option bg-blue-800" data-color="navy"></div>
222
+ </div>
223
+ <div class="mt-6 flex justify-between">
224
+ <button class="add-to-cart flex-1 bg-gray-900 hover:bg-gray-800 text-white py-2 px-4 rounded-lg font-medium transition">
225
+ Add to Cart
226
+ </button>
227
+ <button class="ml-2 p-2 text-gray-400 hover:text-purple-600 rounded-full border border-gray-300 hover:border-purple-600 transition">
228
+ <i class="far fa-heart"></i>
229
+ </button>
230
+ </div>
231
+ </div>
232
+ </div>
233
+
234
+ <!-- Product 3 -->
235
+ <div class="product-card bg-white rounded-lg overflow-hidden shadow-md">
236
+ <div class="relative">
237
+ <img src="https://images.unsplash.com/photo-1578319439584-104c94bcdd45?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Sports Earphones" class="w-full h-64 object-cover">
238
+ </div>
239
+ <div class="p-6">
240
+ <div class="flex justify-between items-start">
241
+ <div>
242
+ <h3 class="text-lg font-bold text-gray-900">SonicPulse Sport</h3>
243
+ <p class="text-gray-500">Sweatproof Design</p>
244
+ </div>
245
+ <div class="text-right">
246
+ <p class="text-lg font-bold text-purple-600">$89.99</p>
247
+ </div>
248
+ </div>
249
+ <div class="mt-4 flex space-x-2">
250
+ <div class="color-option bg-black selected" data-color="black"></div>
251
+ <div class="color-option bg-green-500" data-color="green"></div>
252
+ <div class="color-option bg-yellow-400" data-color="yellow"></div>
253
+ </div>
254
+ <div class="mt-6 flex justify-between">
255
+ <button class="add-to-cart flex-1 bg-gray-900 hover:bg-gray-800 text-white py-2 px-4 rounded-lg font-medium transition">
256
+ Add to Cart
257
+ </button>
258
+ <button class="ml-2 p-2 text-gray-400 hover:text-purple-600 rounded-full border border-gray-300 hover:border-purple-600 transition">
259
+ <i class="far fa-heart"></i>
260
+ </button>
261
+ </div>
262
+ </div>
263
+ </div>
264
+ </div>
265
+
266
+ <div class="mt-12 text-center">
267
+ <button class="border-2 border-purple-600 text-purple-600 hover:bg-purple-600 hover:text-white px-8 py-3 rounded-full font-medium text-lg transition">
268
+ View All Products
269
+ </button>
270
+ </div>
271
+ </div>
272
+
273
+ <!-- Features Section -->
274
+ <div class="bg-gray-50 py-16">
275
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
276
+ <div class="text-center mb-12">
277
+ <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">
278
+ Why Choose SonicPulse?
279
+ </h2>
280
+ <p class="mt-4 max-w-2xl text-xl text-gray-500 mx-auto">
281
+ Cutting-edge technology meets exceptional comfort
282
+ </p>
283
+ </div>
284
+
285
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
286
+ <div class="text-center p-6 bg-white rounded-lg shadow-sm">
287
+ <div class="feature-icon mx-auto mb-4">
288
+ <i class="fas fa-volume-up"></i>
289
+ </div>
290
+ <h3 class="text-lg font-bold text-gray-900 mb-2">Premium Sound</h3>
291
+ <p class="text-gray-500">High-fidelity audio with deep bass and crystal clear highs</p>
292
+ </div>
293
+
294
+ <div class="text-center p-6 bg-white rounded-lg shadow-sm">
295
+ <div class="feature-icon mx-auto mb-4">
296
+ <i class="fas fa-wifi"></i>
297
+ </div>
298
+ <h3 class="text-lg font-bold text-gray-900 mb-2">Wireless Freedom</h3>
299
+ <p class="text-gray-500">Bluetooth 5.0 with 30ft range and stable connection</p>
300
+ </div>
301
+
302
+ <div class="text-center p-6 bg-white rounded-lg shadow-sm">
303
+ <div class="feature-icon mx-auto mb-4">
304
+ <i class="fas fa-battery-three-quarters"></i>
305
+ </div>
306
+ <h3 class="text-lg font-bold text-gray-900 mb-2">Long Battery</h3>
307
+ <p class="text-gray-500">Up to 24 hours of playtime with quick charge</p>
308
+ </div>
309
+
310
+ <div class="text-center p-6 bg-white rounded-lg shadow-sm">
311
+ <div class="feature-icon mx-auto mb-4">
312
+ <i class="fas fa-headset"></i>
313
+ </div>
314
+ <h3 class="text-lg font-bold text-gray-900 mb-2">Comfort Fit</h3>
315
+ <p class="text-gray-500">Ergonomic design with multiple ear tip sizes</p>
316
+ </div>
317
+ </div>
318
+ </div>
319
+ </div>
320
+
321
+ <!-- Testimonials -->
322
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
323
+ <div class="text-center mb-12">
324
+ <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">
325
+ What Our Customers Say
326
+ </h2>
327
+ <p class="mt-4 max-w-2xl text-xl text-gray-500 mx-auto">
328
+ Don't just take our word for it
329
+ </p>
330
+ </div>
331
+
332
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
333
+ <div class="bg-white p-8 rounded-lg shadow-sm">
334
+ <div class="flex items-center mb-4">
335
+ <div class="flex-shrink-0">
336
+ <img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
337
+ </div>
338
+ <div class="ml-3">
339
+ <p class="text-sm font-medium text-gray-900">Sarah Johnson</p>
340
+ <div class="flex text-yellow-400">
341
+ <i class="fas fa-star"></i>
342
+ <i class="fas fa-star"></i>
343
+ <i class="fas fa-star"></i>
344
+ <i class="fas fa-star"></i>
345
+ <i class="fas fa-star"></i>
346
+ </div>
347
+ </div>
348
+ </div>
349
+ <p class="text-gray-600 italic">
350
+ "The sound quality is incredible! I've tried many brands but SonicPulse is by far the best. The noise cancellation works perfectly on my commute."
351
+ </p>
352
+ </div>
353
+
354
+ <div class="bg-white p-8 rounded-lg shadow-sm">
355
+ <div class="flex items-center mb-4">
356
+ <div class="flex-shrink-0">
357
+ <img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1519244703995-f4e0f30006d5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
358
+ </div>
359
+ <div class="ml-3">
360
+ <p class="text-sm font-medium text-gray-900">Michael Chen</p>
361
+ <div class="flex text-yellow-400">
362
+ <i class="fas fa-star"></i>
363
+ <i class="fas fa-star"></i>
364
+ <i class="fas fa-star"></i>
365
+ <i class="fas fa-star"></i>
366
+ <i class="fas fa-star-half-alt"></i>
367
+ </div>
368
+ </div>
369
+ </div>
370
+ <p class="text-gray-600 italic">
371
+ "I use these for workouts and they never fall out. The battery lasts through my longest training sessions. Highly recommend for athletes!"
372
+ </p>
373
+ </div>
374
+
375
+ <div class="bg-white p-8 rounded-lg shadow-sm">
376
+ <div class="flex items-center mb-4">
377
+ <div class="flex-shrink-0">
378
+ <img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
379
+ </div>
380
+ <div class="ml-3">
381
+ <p class="text-sm font-medium text-gray-900">David Wilson</p>
382
+ <div class="flex text-yellow-400">
383
+ <i class="fas fa-star"></i>
384
+ <i class="fas fa-star"></i>
385
+ <i class="fas fa-star"></i>
386
+ <i class="fas fa-star"></i>
387
+ <i class="fas fa-star"></i>
388
+ </div>
389
+ </div>
390
+ </div>
391
+ <p class="text-gray-600 italic">
392
+ "The comfort is unmatched. I can wear these all day without any ear fatigue. The sound is crisp and the bass is deep without being overpowering."
393
+ </p>
394
+ </div>
395
+ </div>
396
+ </div>
397
+
398
+ <!-- Newsletter -->
399
+ <div class="gradient-bg text-white py-16">
400
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
401
+ <div class="lg:grid lg:grid-cols-2 lg:gap-8 items-center">
402
+ <div class="mb-8 lg:mb-0">
403
+ <h2 class="text-3xl font-bold mb-4">Stay Updated</h2>
404
+ <p class="text-purple-100 max-w-lg">
405
+ Subscribe to our newsletter for exclusive deals, new product announcements, and audio tips from our experts.
406
+ </p>
407
+ </div>
408
+ <div>
409
+ <form class="sm:flex">
410
+ <input type="email" placeholder="Enter your email" class="flex-1 px-5 py-3 rounded-l-lg text-gray-900 focus:outline-none focus:ring-2 focus:ring-purple-500">
411
+ <button type="submit" class="mt-2 sm:mt-0 sm:ml-2 bg-purple-800 hover:bg-purple-900 px-6 py-3 rounded-r-lg font-medium transition">
412
+ Subscribe
413
+ </button>
414
+ </form>
415
+ <p class="mt-3 text-sm text-purple-200">
416
+ We respect your privacy. Unsubscribe at any time.
417
+ </p>
418
+ </div>
419
+ </div>
420
+ </div>
421
+ </div>
422
+
423
+ <!-- Footer -->
424
+ <footer class="bg-gray-900 text-white pt-12 pb-8">
425
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
426
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-8">
427
+ <div>
428
+ <h3 class="text-lg font-bold mb-4">Products</h3>
429
+ <ul class="space-y-2">
430
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Wireless Earbuds</a></li>
431
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Noise Cancelling</a></li>
432
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Sports Earphones</a></li>
433
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Accessories</a></li>
434
+ </ul>
435
+ </div>
436
+
437
+ <div>
438
+ <h3 class="text-lg font-bold mb-4">Support</h3>
439
+ <ul class="space-y-2">
440
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Help Center</a></li>
441
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Warranty</a></li>
442
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Returns</a></li>
443
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Contact Us</a></li>
444
+ </ul>
445
+ </div>
446
+
447
+ <div>
448
+ <h3 class="text-lg font-bold mb-4">Company</h3>
449
+ <ul class="space-y-2">
450
+ <li><a href="#" class="text-gray-400 hover:text-white transition">About Us</a></li>
451
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Careers</a></li>
452
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Blog</a></li>
453
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Press</a></li>
454
+ </ul>
455
+ </div>
456
+
457
+ <div>
458
+ <h3 class="text-lg font-bold mb-4">Connect</h3>
459
+ <div class="flex space-x-4">
460
+ <a href="#" class="text-gray-400 hover:text-white transition">
461
+ <i class="fab fa-facebook-f"></i>
462
+ </a>
463
+ <a href="#" class="text-gray-400 hover:text-white transition">
464
+ <i class="fab fa-twitter"></i>
465
+ </a>
466
+ <a href="#" class="text-gray-400 hover:text-white transition">
467
+ <i class="fab fa-instagram"></i>
468
+ </a>
469
+ <a href="#" class="text-gray-400 hover:text-white transition">
470
+ <i class="fab fa-youtube"></i>
471
+ </a>
472
+ </div>
473
+ <div class="mt-6">
474
+ <h4 class="text-sm font-bold mb-2">Payment Methods</h4>
475
+ <div class="flex space-x-2">
476
+ <i class="fab fa-cc-visa text-gray-400 text-xl"></i>
477
+ <i class="fab fa-cc-mastercard text-gray-400 text-xl"></i>
478
+ <i class="fab fa-cc-amex text-gray-400 text-xl"></i>
479
+ <i class="fab fa-cc-paypal text-gray-400 text-xl"></i>
480
+ </div>
481
+ </div>
482
+ </div>
483
+ </div>
484
+
485
+ <div class="mt-12 pt-8 border-t border-gray-800 flex flex-col md:flex-row justify-between items-center">
486
+ <div class="flex items-center">
487
+ <i class="fas fa-headphones text-purple-500 text-2xl mr-2"></i>
488
+ <span class="text-xl font-bold">SonicPulse</span>
489
+ </div>
490
+ <div class="mt-4 md:mt-0 text-gray-400 text-sm">
491
+ &copy; 2023 SonicPulse. All rights reserved.
492
+ </div>
493
+ </div>
494
+ </div>
495
+ </footer>
496
+
497
+ <!-- Shopping Cart Sidebar -->
498
+ <div class="fixed inset-0 overflow-hidden z-50 hidden" id="cart-sidebar">
499
+ <div class="absolute inset-0 overflow-hidden">
500
+ <div class="absolute inset-0 bg-gray-500 bg-opacity-75 transition-opacity" id="cart-overlay"></div>
501
+ <div class="fixed inset-y-0 right-0 pl-10 max-w-full flex">
502
+ <div class="w-screen max-w-md">
503
+ <div class="h-full flex flex-col bg-white shadow-xl overflow-y-scroll">
504
+ <div class="flex-1 py-6 overflow-y-auto px-4 sm:px-6">
505
+ <div class="flex items-start justify-between">
506
+ <h2 class="text-lg font-medium text-gray-900">Shopping cart</h2>
507
+ <div class="ml-3 h-7 flex items-center">
508
+ <button type="button" class="-m-2 p-2 text-gray-400 hover:text-gray-500" id="close-cart">
509
+ <i class="fas fa-times"></i>
510
+ </button>
511
+ </div>
512
+ </div>
513
+
514
+ <div class="mt-8">
515
+ <div class="flow-root">
516
+ <ul class="-my-6 divide-y divide-gray-200">
517
+ <li class="py-6 flex">
518
+ <div class="flex-shrink-0 w-24 h-24 border border-gray-200 rounded-md overflow-hidden">
519
+ <img src="https://images.unsplash.com/photo-1593784991095-a205069470b6?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=200&q=80" alt="SonicPulse Air" class="w-full h-full object-cover">
520
+ </div>
521
+
522
+ <div class="ml-4 flex-1 flex flex-col">
523
+ <div>
524
+ <div class="flex justify-between text-base font-medium text-gray-900">
525
+ <h3>SonicPulse Air</h3>
526
+ <p class="ml-4">$129.99</p>
527
+ </div>
528
+ <p class="mt-1 text-sm text-gray-500">Black</p>
529
+ </div>
530
+ <div class="flex-1 flex items-end justify-between text-sm">
531
+ <p class="text-gray-500">Qty 1</p>
532
+ <div class="flex">
533
+ <button type="button" class="font-medium text-purple-600 hover:text-purple-500">Remove</button>
534
+ </div>
535
+ </div>
536
+ </div>
537
+ </li>
538
+
539
+ <li class="py-6 flex">
540
+ <div class="flex-shrink-0 w-24 h-24 border border-gray-200 rounded-md overflow-hidden">
541
+ <img src="https://images.unsplash.com/photo-1572569511254-d8f925fe2cbb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=200&q=80" alt="SonicPulse Pro" class="w-full h-full object-cover">
542
+ </div>
543
+
544
+ <div class="ml-4 flex-1 flex flex-col">
545
+ <div>
546
+ <div class="flex justify-between text-base font-medium text-gray-900">
547
+ <h3>SonicPulse Pro</h3>
548
+ <p class="ml-4">$199.99</p>
549
+ </div>
550
+ <p class="mt-1 text-sm text-gray-500">Black</p>
551
+ </div>
552
+ <div class="flex-1 flex items-end justify-between text-sm">
553
+ <p class="text-gray-500">Qty 2</p>
554
+ <div class="flex">
555
+ <button type="button" class="font-medium text-purple-600 hover:text-purple-500">Remove</button>
556
+ </div>
557
+ </div>
558
+ </div>
559
+ </li>
560
+ </ul>
561
+ </div>
562
+ </div>
563
+ </div>
564
+
565
+ <div class="border-t border-gray-200 py-6 px-4 sm:px-6">
566
+ <div class="flex justify-between text-base font-medium text-gray-900">
567
+ <p>Subtotal</p>
568
+ <p>$529.97</p>
569
+ </div>
570
+ <p class="mt-0.5 text-sm text-gray-500">Shipping and taxes calculated at checkout.</p>
571
+ <div class="mt-6">
572
+ <a href="#" class="flex justify-center items-center px-6 py-3 border border-transparent rounded-md shadow-sm text-base font-medium text-white bg-purple-600 hover:bg-purple-700">
573
+ Checkout
574
+ </a>
575
+ </div>
576
+ <div class="mt-6 flex justify-center text-sm text-center text-gray-500">
577
+ <p>
578
+ or
579
+ <button type="button" class="text-purple-600 font-medium hover:text-purple-500 ml-1" id="continue-shopping">Continue Shopping</button>
580
+ </p>
581
+ </div>
582
+ </div>
583
+ </div>
584
+ </div>
585
+ </div>
586
+ </div>
587
+ </div>
588
+
589
+ <script>
590
+ // Color selection
591
+ document.querySelectorAll('.color-option').forEach(option => {
592
+ option.addEventListener('click', function() {
593
+ // Remove selected class from all options in this group
594
+ this.parentNode.querySelectorAll('.color-option').forEach(opt => {
595
+ opt.classList.remove('selected');
596
+ });
597
+ // Add selected class to clicked option
598
+ this.classList.add('selected');
599
+ });
600
+ });
601
+
602
+ // Add to cart functionality
603
+ document.querySelectorAll('.add-to-cart').forEach(button => {
604
+ button.addEventListener('click', function() {
605
+ const productCard = this.closest('.product-card');
606
+ const productName = productCard.querySelector('h3').textContent;
607
+ const productPrice = productCard.querySelector('.text-purple-600').textContent;
608
+ const selectedColor = productCard.querySelector('.color-option.selected').getAttribute('data-color');
609
+
610
+ // Update cart count
611
+ const cartCount = document.querySelector('.cart-count');
612
+ let currentCount = parseInt(cartCount.textContent);
613
+ cartCount.textContent = currentCount + 1;
614
+
615
+ // Show confirmation
616
+ const confirmation = document.createElement('div');
617
+ confirmation.className = 'fixed bottom-4 right-4 bg-green-500 text-white px-4 py-2 rounded-lg shadow-lg flex items-center';
618
+ confirmation.innerHTML = `
619
+ <i class="fas fa-check-circle mr-2"></i>
620
+ Added ${productName} (${selectedColor}) to cart
621
+ `;
622
+ document.body.appendChild(confirmation);
623
+
624
+ // Remove after 3 seconds
625
+ setTimeout(() => {
626
+ confirmation.remove();
627
+ }, 3000);
628
+ });
629
+ });
630
+
631
+ // Cart sidebar toggle
632
+ const cartButton = document.querySelector('.fa-shopping-cart').closest('button');
633
+ const cartSidebar = document.getElementById('cart-sidebar');
634
+ const cartOverlay = document.getElementById('cart-overlay');
635
+ const closeCart = document.getElementById('close-cart');
636
+ const continueShopping = document.getElementById('continue-shopping');
637
+
638
+ cartButton.addEventListener('click', function() {
639
+ cartSidebar.classList.remove('hidden');
640
+ });
641
+
642
+ closeCart.addEventListener('click', function() {
643
+ cartSidebar.classList.add('hidden');
644
+ });
645
+
646
+ continueShopping.addEventListener('click', function() {
647
+ cartSidebar.classList.add('hidden');
648
+ });
649
+
650
+ cartOverlay.addEventListener('click', function() {
651
+ cartSidebar.classList.add('hidden');
652
+ });
653
+
654
+ // Mobile menu toggle (placeholder functionality)
655
+ document.querySelector('.fa-bars').closest('button').addEventListener('click', function() {
656
+ alert('Mobile menu would open here');
657
+ });
658
+ </script>
659
+ <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=ronalhung/earphones" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
660
+ </html>
prompts.txt ADDED
File without changes