Hugging Face's logo

Spaces:
spanexx
/
ebayalt
Running

App Files Community
spanexx commited on
Commit
cd9f0b2
·
verified ·
1 Parent(s): f4701ba

undefined - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +1052 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Ebayalt
3
- emoji: 🔥
4
- colorFrom: blue
5
- colorTo: yellow
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: ebayalt
3
+ emoji: 🐳
4
+ colorFrom: red
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,1052 @@
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>MarketBay - Online Marketplace</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 styles that can't be done with Tailwind */
11
+ .gradient-bg {
12
+ background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
13
+ }
14
+ .product-card:hover {
15
+ transform: translateY(-5px);
16
+ box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
17
+ }
18
+ .auction-timer {
19
+ font-family: 'Courier New', monospace;
20
+ }
21
+ .image-gallery-thumbnail.active {
22
+ border: 2px solid #3b82f6;
23
+ }
24
+ .chat-message:hover {
25
+ background-color: #f3f4f6;
26
+ }
27
+ /* Smooth transitions */
28
+ .transition-all {
29
+ transition: all 0.3s ease;
30
+ }
31
+ </style>
32
+ </head>
33
+ <body class="bg-gray-50 font-sans">
34
+ <!-- Navigation -->
35
+ <nav class="bg-white shadow-md sticky top-0 z-50">
36
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
37
+ <div class="flex justify-between h-16">
38
+ <div class="flex items-center">
39
+ <a href="#" class="flex-shrink-0 flex items-center">
40
+ <i class="fas fa-store text-blue-600 text-2xl mr-2"></i>
41
+ <span class="text-xl font-bold text-gray-800">MarketBay</span>
42
+ </a>
43
+ <div class="hidden sm:ml-6 sm:flex sm:space-x-8">
44
+ <a href="#" class="border-blue-500 text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Home</a>
45
+ <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">Categories</a>
46
+ <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">Deals</a>
47
+ <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">Sell</a>
48
+ </div>
49
+ </div>
50
+ <div class="hidden sm:ml-6 sm:flex sm:items-center">
51
+ <div class="relative mx-4">
52
+ <input type="text" placeholder="Search for anything..." class="w-64 px-4 py-2 rounded-full border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
53
+ <button class="absolute right-0 top-0 h-full px-4 text-gray-500 hover:text-blue-600">
54
+ <i class="fas fa-search"></i>
55
+ </button>
56
+ </div>
57
+ <button class="p-1 rounded-full text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
58
+ <i class="fas fa-heart text-xl"></i>
59
+ </button>
60
+ <button class="ml-3 p-1 rounded-full text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
61
+ <i class="fas fa-bell text-xl"></i>
62
+ </button>
63
+ <button class="ml-3 p-1 rounded-full text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
64
+ <i class="fas fa-shopping-cart text-xl"></i>
65
+ </button>
66
+ <div class="ml-3 relative">
67
+ <div>
68
+ <button id="user-menu" class="flex text-sm rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
69
+ <img class="h-8 w-8 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
70
+ </button>
71
+ </div>
72
+ <div id="user-dropdown" class="hidden origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg py-1 bg-white ring-1 ring-black ring-opacity-5 focus:outline-none">
73
+ <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Your Profile</a>
74
+ <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Settings</a>
75
+ <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Sign out</a>
76
+ </div>
77
+ </div>
78
+ </div>
79
+ <div class="-mr-2 flex items-center sm:hidden">
80
+ <button id="mobile-menu-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-blue-500">
81
+ <i class="fas fa-bars"></i>
82
+ </button>
83
+ </div>
84
+ </div>
85
+ </div>
86
+
87
+ <!-- Mobile menu -->
88
+ <div id="mobile-menu" class="hidden sm:hidden">
89
+ <div class="pt-2 pb-3 space-y-1">
90
+ <a href="#" class="bg-blue-50 border-blue-500 text-blue-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Home</a>
91
+ <a href="#" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Categories</a>
92
+ <a href="#" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Deals</a>
93
+ <a href="#" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Sell</a>
94
+ </div>
95
+ <div class="pt-4 pb-3 border-t border-gray-200">
96
+ <div class="flex items-center px-4">
97
+ <div class="flex-shrink-0">
98
+ <img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
99
+ </div>
100
+ <div class="ml-3">
101
+ <div class="text-base font-medium text-gray-800">John Doe</div>
102
+ <div class="text-sm font-medium text-gray-500">john@example.com</div>
103
+ </div>
104
+ <button class="ml-auto flex-shrink-0 p-1 rounded-full text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
105
+ <i class="fas fa-heart"></i>
106
+ </button>
107
+ <button class="ml-2 flex-shrink-0 p-1 rounded-full text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
108
+ <i class="fas fa-shopping-cart"></i>
109
+ </button>
110
+ </div>
111
+ <div class="mt-3 space-y-1">
112
+ <a href="#" class="block px-4 py-2 text-base font-medium text-gray-500 hover:text-gray-800 hover:bg-gray-100">Your Profile</a>
113
+ <a href="#" class="block px-4 py-2 text-base font-medium text-gray-500 hover:text-gray-800 hover:bg-gray-100">Settings</a>
114
+ <a href="#" class="block px-4 py-2 text-base font-medium text-gray-500 hover:text-gray-800 hover:bg-gray-100">Sign out</a>
115
+ </div>
116
+ </div>
117
+ </div>
118
+ </nav>
119
+
120
+ <!-- Main Content - Dynamic based on page -->
121
+ <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
122
+ <!-- Landing Page -->
123
+ <div id="landing-page">
124
+ <!-- Hero Section -->
125
+ <section class="gradient-bg rounded-xl p-8 mb-8">
126
+ <div class="max-w-3xl mx-auto text-center">
127
+ <h1 class="text-4xl font-bold text-gray-900 mb-4">Find great deals on everything you love</h1>
128
+ <p class="text-xl text-gray-600 mb-6">Buy, sell, and bid on millions of items. Join millions of happy customers.</p>
129
+ <div class="relative max-w-xl mx-auto">
130
+ <input type="text" placeholder="Search for anything..." class="w-full px-6 py-4 rounded-full border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent shadow-lg">
131
+ <button class="absolute right-0 top-0 h-full px-6 bg-blue-600 text-white rounded-r-full hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
132
+ <i class="fas fa-search"></i> Search
133
+ </button>
134
+ </div>
135
+ <div class="mt-4 flex justify-center space-x-4">
136
+ <button class="px-6 py-2 bg-white text-blue-600 rounded-full border border-blue-600 hover:bg-blue-50 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">Popular</button>
137
+ <button class="px-6 py-2 bg-white text-blue-600 rounded-full border border-blue-600 hover:bg-blue-50 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">Electronics</button>
138
+ <button class="px-6 py-2 bg-white text-blue-600 rounded-full border border-blue-600 hover:bg-blue-50 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">Fashion</button>
139
+ <button class="px-6 py-2 bg-white text-blue-600 rounded-full border border-blue-600 hover:bg-blue-50 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">Home & Garden</button>
140
+ </div>
141
+ </div>
142
+ </section>
143
+
144
+ <!-- Featured Listings -->
145
+ <section class="mb-12">
146
+ <div class="flex justify-between items-center mb-6">
147
+ <h2 class="text-2xl font-bold text-gray-900">Featured Listings</h2>
148
+ <a href="#" class="text-blue-600 hover:text-blue-800 font-medium">View all</a>
149
+ </div>
150
+ <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
151
+ <!-- Product Card 1 -->
152
+ <div class="product-card bg-white rounded-lg shadow-md overflow-hidden transition-all">
153
+ <div class="relative pb-3/4 h-48">
154
+ <img class="absolute h-full w-full object-cover" src="https://images.unsplash.com/photo-1542291026-7eec264c27ff?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="Product image">
155
+ <div class="absolute top-2 left-2 bg-blue-600 text-white text-xs font-bold px-2 py-1 rounded">NEW</div>
156
+ <div class="absolute top-2 right-2 bg-white rounded-full p-2 shadow-md">
157
+ <i class="far fa-heart text-gray-400 hover:text-red-500 cursor-pointer"></i>
158
+ </div>
159
+ </div>
160
+ <div class="p-4">
161
+ <div class="flex justify-between items-start">
162
+ <div>
163
+ <h3 class="text-lg font-semibold text-gray-900 mb-1">Premium Headphones</h3>
164
+ <p class="text-gray-500 text-sm">Electronics</p>
165
+ </div>
166
+ <div class="text-right">
167
+ <p class="text-lg font-bold text-blue-600">$129.99</p>
168
+ <p class="text-xs text-gray-500 line-through">$199.99</p>
169
+ </div>
170
+ </div>
171
+ <div class="mt-3 flex items-center">
172
+ <div class="flex items-center">
173
+ <i class="fas fa-star text-yellow-400"></i>
174
+ <span class="text-gray-700 ml-1">4.8</span>
175
+ <span class="text-gray-500 text-xs ml-1">(124)</span>
176
+ </div>
177
+ <div class="ml-auto">
178
+ <span class="text-green-600 text-sm font-medium">Free shipping</span>
179
+ </div>
180
+ </div>
181
+ <button class="mt-4 w-full bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-md transition-colors">Buy Now</button>
182
+ </div>
183
+ </div>
184
+
185
+ <!-- Product Card 2 (Auction) -->
186
+ <div class="product-card bg-white rounded-lg shadow-md overflow-hidden transition-all">
187
+ <div class="relative pb-3/4 h-48">
188
+ <img class="absolute h-full w-full object-cover" src="https://images.unsplash.com/photo-1523275335684-37898b6baf30?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="Product image">
189
+ <div class="absolute top-2 right-2 bg-white rounded-full p-2 shadow-md">
190
+ <i class="far fa-heart text-gray-400 hover:text-red-500 cursor-pointer"></i>
191
+ </div>
192
+ <div class="absolute bottom-2 left-2 bg-red-600 text-white text-xs font-bold px-2 py-1 rounded auction-timer" data-end="2023-12-31T23:59:59">
193
+ 2d 4h 32m left
194
+ </div>
195
+ </div>
196
+ <div class="p-4">
197
+ <div class="flex justify-between items-start">
198
+ <div>
199
+ <h3 class="text-lg font-semibold text-gray-900 mb-1">Smart Watch Series 5</h3>
200
+ <p class="text-gray-500 text-sm">Electronics</p>
201
+ </div>
202
+ <div class="text-right">
203
+ <p class="text-lg font-bold text-blue-600">$175.50</p>
204
+ <p class="text-xs text-gray-500">Current bid</p>
205
+ </div>
206
+ </div>
207
+ <div class="mt-3 flex items-center">
208
+ <div class="flex items-center">
209
+ <i class="fas fa-star text-yellow-400"></i>
210
+ <span class="text-gray-700 ml-1">4.5</span>
211
+ <span class="text-gray-500 text-xs ml-1">(89)</span>
212
+ </div>
213
+ <div class="ml-auto">
214
+ <span class="text-gray-600 text-sm font-medium">+$5.99 shipping</span>
215
+ </div>
216
+ </div>
217
+ <button class="mt-4 w-full bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-md transition-colors">Place Bid</button>
218
+ </div>
219
+ </div>
220
+
221
+ <!-- Product Card 3 -->
222
+ <div class="product-card bg-white rounded-lg shadow-md overflow-hidden transition-all">
223
+ <div class="relative pb-3/4 h-48">
224
+ <img class="absolute h-full w-full object-cover" src="https://images.unsplash.com/photo-1546868871-7041f2a55e12?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="Product image">
225
+ <div class="absolute top-2 right-2 bg-white rounded-full p-2 shadow-md">
226
+ <i class="far fa-heart text-gray-400 hover:text-red-500 cursor-pointer"></i>
227
+ </div>
228
+ </div>
229
+ <div class="p-4">
230
+ <div class="flex justify-between items-start">
231
+ <div>
232
+ <h3 class="text-lg font-semibold text-gray-900 mb-1">Leather Wallet</h3>
233
+ <p class="text-gray-500 text-sm">Fashion</p>
234
+ </div>
235
+ <div class="text-right">
236
+ <p class="text-lg font-bold text-blue-600">$29.99</p>
237
+ <p class="text-xs text-gray-500 line-through">$39.99</p>
238
+ </div>
239
+ </div>
240
+ <div class="mt-3 flex items-center">
241
+ <div class="flex items-center">
242
+ <i class="fas fa-star text-yellow-400"></i>
243
+ <span class="text-gray-700 ml-1">4.2</span>
244
+ <span class="text-gray-500 text-xs ml-1">(42)</span>
245
+ </div>
246
+ <div class="ml-auto">
247
+ <span class="text-green-600 text-sm font-medium">Free shipping</span>
248
+ </div>
249
+ </div>
250
+ <button class="mt-4 w-full bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-md transition-colors">Buy Now</button>
251
+ </div>
252
+ </div>
253
+
254
+ <!-- Product Card 4 -->
255
+ <div class="product-card bg-white rounded-lg shadow-md overflow-hidden transition-all">
256
+ <div class="relative pb-3/4 h-48">
257
+ <img class="absolute h-full w-full object-cover" src="https://images.unsplash.com/photo-1592921870789-04563d55041c?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="Product image">
258
+ <div class="absolute top-2 right-2 bg-white rounded-full p-2 shadow-md">
259
+ <i class="far fa-heart text-gray-400 hover:text-red-500 cursor-pointer"></i>
260
+ </div>
261
+ </div>
262
+ <div class="p-4">
263
+ <div class="flex justify-between items-start">
264
+ <div>
265
+ <h3 class="text-lg font-semibold text-gray-900 mb-1">Vintage Camera</h3>
266
+ <p class="text-gray-500 text-sm">Collectibles</p>
267
+ </div>
268
+ <div class="text-right">
269
+ <p class="text-lg font-bold text-blue-600">$89.99</p>
270
+ <p class="text-xs text-gray-500">Buy It Now</p>
271
+ </div>
272
+ </div>
273
+ <div class="mt-3 flex items-center">
274
+ <div class="flex items-center">
275
+ <i class="fas fa-star text-yellow-400"></i>
276
+ <span class="text-gray-700 ml-1">4.9</span>
277
+ <span class="text-gray-500 text-xs ml-1">(156)</span>
278
+ </div>
279
+ <div class="ml-auto">
280
+ <span class="text-gray-600 text-sm font-medium">+$8.99 shipping</span>
281
+ </div>
282
+ </div>
283
+ <button class="mt-4 w-full bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-md transition-colors">Buy Now</button>
284
+ </div>
285
+ </div>
286
+ </div>
287
+ </section>
288
+
289
+ <!-- Categories Section -->
290
+ <section class="mb-12">
291
+ <h2 class="text-2xl font-bold text-gray-900 mb-6">Shop by Category</h2>
292
+ <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-4">
293
+ <a href="#" class="bg-white rounded-lg shadow-sm p-4 text-center hover:shadow-md transition-shadow">
294
+ <div class="bg-blue-100 rounded-full p-3 inline-block mb-2">
295
+ <i class="fas fa-mobile-alt text-blue-600 text-xl"></i>
296
+ </div>
297
+ <h3 class="font-medium text-gray-900">Electronics</h3>
298
+ <p class="text-gray-500 text-sm">1,234 items</p>
299
+ </a>
300
+ <a href="#" class="bg-white rounded-lg shadow-sm p-4 text-center hover:shadow-md transition-shadow">
301
+ <div class="bg-pink-100 rounded-full p-3 inline-block mb-2">
302
+ <i class="fas fa-tshirt text-pink-600 text-xl"></i>
303
+ </div>
304
+ <h3 class="font-medium text-gray-900">Fashion</h3>
305
+ <p class="text-gray-500 text-sm">3,456 items</p>
306
+ </a>
307
+ <a href="#" class="bg-white rounded-lg shadow-sm p-4 text-center hover:shadow-md transition-shadow">
308
+ <div class="bg-green-100 rounded-full p-3 inline-block mb-2">
309
+ <i class="fas fa-home text-green-600 text-xl"></i>
310
+ </div>
311
+ <h3 class="font-medium text-gray-900">Home & Garden</h3>
312
+ <p class="text-gray-500 text-sm">2,789 items</p>
313
+ </a>
314
+ <a href="#" class="bg-white rounded-lg shadow-sm p-4 text-center hover:shadow-md transition-shadow">
315
+ <div class="bg-yellow-100 rounded-full p-3 inline-block mb-2">
316
+ <i class="fas fa-gamepad text-yellow-600 text-xl"></i>
317
+ </div>
318
+ <h3 class="font-medium text-gray-900">Toys & Games</h3>
319
+ <p class="text-gray-500 text-sm">1,023 items</p>
320
+ </a>
321
+ <a href="#" class="bg-white rounded-lg shadow-sm p-4 text-center hover:shadow-md transition-shadow">
322
+ <div class="bg-purple-100 rounded-full p-3 inline-block mb-2">
323
+ <i class="fas fa-book text-purple-600 text-xl"></i>
324
+ </div>
325
+ <h3 class="font-medium text-gray-900">Books</h3>
326
+ <p class="text-gray-500 text-sm">876 items</p>
327
+ </a>
328
+ <a href="#" class="bg-white rounded-lg shadow-sm p-4 text-center hover:shadow-md transition-shadow">
329
+ <div class="bg-red-100 rounded-full p-3 inline-block mb-2">
330
+ <i class="fas fa-car text-red-600 text-xl"></i>
331
+ </div>
332
+ <h3 class="font-medium text-gray-900">Vehicles</h3>
333
+ <p class="text-gray-500 text-sm">342 items</p>
334
+ </a>
335
+ </div>
336
+ </section>
337
+
338
+ <!-- Ending Soon Section -->
339
+ <section class="mb-12">
340
+ <div class="flex justify-between items-center mb-6">
341
+ <h2 class="text-2xl font-bold text-gray-900">Ending Soon</h2>
342
+ <a href="#" class="text-blue-600 hover:text-blue-800 font-medium">View all</a>
343
+ </div>
344
+ <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
345
+ <!-- Product Card 5 (Auction) -->
346
+ <div class="product-card bg-white rounded-lg shadow-md overflow-hidden transition-all">
347
+ <div class="relative pb-3/4 h-48">
348
+ <img class="absolute h-full w-full object-cover" src="https://images.unsplash.com/photo-1505740420928-5e560c06d30e?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="Product image">
349
+ <div class="absolute top-2 right-2 bg-white rounded-full p-2 shadow-md">
350
+ <i class="far fa-heart text-gray-400 hover:text-red-500 cursor-pointer"></i>
351
+ </div>
352
+ <div class="absolute bottom-2 left-2 bg-red-600 text-white text-xs font-bold px-2 py-1 rounded auction-timer" data-end="2023-12-15T18:30:00">
353
+ 1h 23m left
354
+ </div>
355
+ </div>
356
+ <div class="p-4">
357
+ <div class="flex justify-between items-start">
358
+ <div>
359
+ <h3 class="text-lg font-semibold text-gray-900 mb-1">Wireless Earbuds</h3>
360
+ <p class="text-gray-500 text-sm">Electronics</p>
361
+ </div>
362
+ <div class="text-right">
363
+ <p class="text-lg font-bold text-blue-600">$45.99</p>
364
+ <p class="text-xs text-gray-500">Current bid</p>
365
+ </div>
366
+ </div>
367
+ <div class="mt-3 flex items-center">
368
+ <div class="flex items-center">
369
+ <i class="fas fa-star text-yellow-400"></i>
370
+ <span class="text-gray-700 ml-1">4.3</span>
371
+ <span class="text-gray-500 text-xs ml-1">(67)</span>
372
+ </div>
373
+ <div class="ml-auto">
374
+ <span class="text-gray-600 text-sm font-medium">+$3.99 shipping</span>
375
+ </div>
376
+ </div>
377
+ <button class="mt-4 w-full bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-md transition-colors">Place Bid</button>
378
+ </div>
379
+ </div>
380
+
381
+ <!-- Product Card 6 (Auction) -->
382
+ <div class="product-card bg-white rounded-lg shadow-md overflow-hidden transition-all">
383
+ <div class="relative pb-3/4 h-48">
384
+ <img class="absolute h-full w-full object-cover" src="https://images.unsplash.com/photo-1526170375885-4d8ecf77b99f?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="Product image">
385
+ <div class="absolute top-2 right-2 bg-white rounded-full p-2 shadow-md">
386
+ <i class="far fa-heart text-gray-400 hover:text-red-500 cursor-pointer"></i>
387
+ </div>
388
+ <div class="absolute bottom-2 left-2 bg-red-600 text-white text-xs font-bold px-2 py-1 rounded auction-timer" data-end="2023-12-15T19:45:00">
389
+ 2h 38m left
390
+ </div>
391
+ </div>
392
+ <div class="p-4">
393
+ <div class="flex justify-between items-start">
394
+ <div>
395
+ <h3 class="text-lg font-semibold text-gray-900 mb-1">Vintage Camera</h3>
396
+ <p class="text-gray-500 text-sm">Collectibles</p>
397
+ </div>
398
+ <div class="text-right">
399
+ <p class="text-lg font-bold text-blue-600">$78.25</p>
400
+ <p class="text-xs text-gray-500">Current bid</p>
401
+ </div>
402
+ </div>
403
+ <div class="mt-3 flex items-center">
404
+ <div class="flex items-center">
405
+ <i class="fas fa-star text-yellow-400"></i>
406
+ <span class="text-gray-700 ml-1">4.7</span>
407
+ <span class="text-gray-500 text-xs ml-1">(92)</span>
408
+ </div>
409
+ <div class="ml-auto">
410
+ <span class="text-gray-600 text-sm font-medium">+$6.99 shipping</span>
411
+ </div>
412
+ </div>
413
+ <button class="mt-4 w-full bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-md transition-colors">Place Bid</button>
414
+ </div>
415
+ </div>
416
+
417
+ <!-- Product Card 7 (Auction) -->
418
+ <div class="product-card bg-white rounded-lg shadow-md overflow-hidden transition-all">
419
+ <div class="relative pb-3/4 h-48">
420
+ <img class="absolute h-full w-full object-cover" src="https://images.unsplash.com/photo-1546868871-7041f2a55e12?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="Product image">
421
+ <div class="absolute top-2 right-2 bg-white rounded-full p-2 shadow-md">
422
+ <i class="far fa-heart text-gray-400 hover:text-red-500 cursor-pointer"></i>
423
+ </div>
424
+ <div class="absolute bottom-2 left-2 bg-red-600 text-white text-xs font-bold px-2 py-1 rounded auction-timer" data-end="2023-12-15T21:15:00">
425
+ 4h 8m left
426
+ </div>
427
+ </div>
428
+ <div class="p-4">
429
+ <div class="flex justify-between items-start">
430
+ <div>
431
+ <h3 class="text-lg font-semibold text-gray-900 mb-1">Designer Watch</h3>
432
+ <p class="text-gray-500 text-sm">Jewelry</p>
433
+ </div>
434
+ <div class="text-right">
435
+ <p class="text-lg font-bold text-blue-600">$210.00</p>
436
+ <p class="text-xs text-gray-500">Current bid</p>
437
+ </div>
438
+ </div>
439
+ <div class="mt-3 flex items-center">
440
+ <div class="flex items-center">
441
+ <i class="fas fa-star text-yellow-400"></i>
442
+ <span class="text-gray-700 ml-1">4.9</span>
443
+ <span class="text-gray-500 text-xs ml-1">(143)</span>
444
+ </div>
445
+ <div class="ml-auto">
446
+ <span class="text-gray-600 text-sm font-medium">+$8.99 shipping</span>
447
+ </div>
448
+ </div>
449
+ <button class="mt-4 w-full bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-md transition-colors">Place Bid</button>
450
+ </div>
451
+ </div>
452
+
453
+ <!-- Product Card 8 (Auction) -->
454
+ <div class="product-card bg-white rounded-lg shadow-md overflow-hidden transition-all">
455
+ <div class="relative pb-3/4 h-48">
456
+ <img class="absolute h-full w-full object-cover" src="https://images.unsplash.com/photo-1585386959984-a4155224a1ad?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="Product image">
457
+ <div class="absolute top-2 right-2 bg-white rounded-full p-2 shadow-md">
458
+ <i class="far fa-heart text-gray-400 hover:text-red-500 cursor-pointer"></i>
459
+ </div>
460
+ <div class="absolute bottom-2 left-2 bg-red-600 text-white text-xs font-bold px-2 py-1 rounded auction-timer" data-end="2023-12-15T22:30:00">
461
+ 5h 23m left
462
+ </div>
463
+ </div>
464
+ <div class="p-4">
465
+ <div class="flex justify-between items-start">
466
+ <div>
467
+ <h3 class="text-lg font-semibold text-gray-900 mb-1">Perfume Set</h3>
468
+ <p class="text-gray-500 text-sm">Beauty</p>
469
+ </div>
470
+ <div class="text-right">
471
+ <p class="text-lg font-bold text-blue-600">$32.50</p>
472
+ <p class="text-xs text-gray-500">Current bid</p>
473
+ </div>
474
+ </div>
475
+ <div class="mt-3 flex items-center">
476
+ <div class="flex items-center">
477
+ <i class="fas fa-star text-yellow-400"></i>
478
+ <span class="text-gray-700 ml-1">4.5</span>
479
+ <span class="text-gray-500 text-xs ml-1">(56)</span>
480
+ </div>
481
+ <div class="ml-auto">
482
+ <span class="text-gray-600 text-sm font-medium">+$4.99 shipping</span>
483
+ </div>
484
+ </div>
485
+ <button class="mt-4 w-full bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-md transition-colors">Place Bid</button>
486
+ </div>
487
+ </div>
488
+ </div>
489
+ </section>
490
+ </div>
491
+
492
+ <!-- Product Details Page (Hidden by default) -->
493
+ <div id="product-details-page" class="hidden">
494
+ <div class="bg-white rounded-lg shadow-md overflow-hidden">
495
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
496
+ <!-- Product Images -->
497
+ <div class="p-4">
498
+ <div class="relative h-96 mb-4 bg-gray-100 rounded-lg overflow-hidden">
499
+ <img id="main-product-image" class="absolute h-full w-full object-contain" src="https://images.unsplash.com/photo-1542291026-7eec264c27ff?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="Main product image">
500
+ <div class="absolute top-2 right-2 bg-white rounded-full p-2 shadow-md">
501
+ <i class="far fa-heart text-gray-400 hover:text-red-500 cursor-pointer"></i>
502
+ </div>
503
+ <div class="absolute bottom-2 left-2 bg-blue-600 text-white text-xs font-bold px-2 py-1 rounded">NEW</div>
504
+ </div>
505
+ <div class="grid grid-cols-4 gap-2">
506
+ <div class="image-gallery-thumbnail cursor-pointer border border-gray-200 rounded p-1 hover:border-blue-500">
507
+ <img class="h-20 w-full object-contain" src="https://images.unsplash.com/photo-1542291026-7eec264c27ff?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="Product thumbnail 1">
508
+ </div>
509
+ <div class="image-gallery-thumbnail cursor-pointer border border-gray-200 rounded p-1 hover:border-blue-500">
510
+ <img class="h-20 w-full object-contain" src="https://images.unsplash.com/photo-1505740420928-5e560c06d30e?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="Product thumbnail 2">
511
+ </div>
512
+ <div class="image-gallery-thumbnail cursor-pointer border border-gray-200 rounded p-1 hover:border-blue-500">
513
+ <img class="h-20 w-full object-contain" src="https://images.unsplash.com/photo-1523275335684-37898b6baf30?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="Product thumbnail 3">
514
+ </div>
515
+ <div class="image-gallery-thumbnail cursor-pointer border border-gray-200 rounded p-1 hover:border-blue-500">
516
+ <img class="h-20 w-full object-contain" src="https://images.unsplash.com/photo-1546868871-7041f2a55e12?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="Product thumbnail 4">
517
+ </div>
518
+ </div>
519
+ </div>
520
+
521
+ <!-- Product Info -->
522
+ <div class="p-6">
523
+ <h1 class="text-3xl font-bold text-gray-900 mb-2">Premium Wireless Headphones with Noise Cancellation</h1>
524
+ <div class="flex items-center mb-4">
525
+ <div class="flex items-center mr-4">
526
+ <i class="fas fa-star text-yellow-400"></i>
527
+ <i class="fas fa-star text-yellow-400"></i>
528
+ <i class="fas fa-star text-yellow-400"></i>
529
+ <i class="fas fa-star text-yellow-400"></i>
530
+ <i class="fas fa-star-half-alt text-yellow-400"></i>
531
+ <span class="text-gray-700 ml-1">4.8</span>
532
+ <span class="text-gray-500 text-sm ml-1">(124 reviews)</span>
533
+ </div>
534
+ <span class="text-blue-600 text-sm font-medium">123 sold</span>
535
+ </div>
536
+
537
+ <div class="bg-gray-50 p-4 rounded-lg mb-6">
538
+ <div class="flex items-center mb-2">
539
+ <span class="text-3xl font-bold text-gray-900">$129.99</span>
540
+ <span class="ml-2 text-sm text-gray-500 line-through">$199.99</span>
541
+ <span class="ml-2 bg-red-100 text-red-800 text-xs font-semibold px-2 py-0.5 rounded">35% OFF</span>
542
+ </div>
543
+ <div class="text-green-600 font-medium mb-2">
544
+ <i class="fas fa-truck"></i> Free shipping
545
+ </div>
546
+ <div class="text-gray-600 text-sm">
547
+ <i class="fas fa-map-marker-alt"></i> Ships from United States
548
+ </div>
549
+ </div>
550
+
551
+ <div class="mb-6">
552
+ <h3 class="text-lg font-semibold text-gray-900 mb-2">Description</h3>
553
+ <p class="text-gray-700 mb-4">
554
+ Experience premium sound quality with these wireless headphones featuring active noise cancellation technology.
555
+ Perfect for music lovers and frequent travelers. Includes 30-hour battery life, touch controls, and built-in microphone.
556
+ </p>
557
+ <ul class="list-disc list-inside text-gray-700">
558
+ <li>Active Noise Cancellation</li>
559
+ <li>30-hour battery life</li>
560
+ <li>Bluetooth 5.0</li>
561
+ <li>Built-in microphone</li>
562
+ <li>Touch controls</li>
563
+ <li>Comfortable over-ear design</li>
564
+ </ul>
565
+ </div>
566
+
567
+ <div class="mb-6">
568
+ <h3 class="text-lg font-semibold text-gray-900 mb-2">Shipping & Returns</h3>
569
+ <div class="grid grid-cols-2 gap-4 text-sm text-gray-700">
570
+ <div>
571
+ <div class="font-medium">Shipping:</div>
572
+ <p>Free standard shipping</p>
573
+ <p>Estimated delivery: Dec 20-24</p>
574
+ </div>
575
+ <div>
576
+ <div class="font-medium">Returns:</div>
577
+ <p>30-day return policy</p>
578
+ <p>Buyer pays for return shipping</p>
579
+ </div>
580
+ </div>
581
+ </div>
582
+
583
+ <div class="flex space-x-4">
584
+ <button class="flex-1 bg-blue-600 hover:bg-blue-700 text-white py-3 px-6 rounded-lg font-medium transition-colors">
585
+ <i class="fas fa-shopping-cart mr-2"></i> Add to Cart
586
+ </button>
587
+ <button class="flex-1 bg-yellow-500 hover:bg-yellow-600 text-white py-3 px-6 rounded-lg font-medium transition-colors">
588
+ Buy Now
589
+ </button>
590
+ </div>
591
+ </div>
592
+ </div>
593
+
594
+ <!-- Product Tabs -->
595
+ <div class="border-t border-gray-200 mt-8">
596
+ <div class="flex border-b border-gray-200">
597
+ <button class="product-tab active py-4 px-6 font-medium text-blue-600 border-b-2 border-blue-500">Details</button>
598
+ <button class="product-tab py-4 px-6 font-medium text-gray-500 hover:text-gray-700">Shipping & Policies</button>
599
+ <button class="product-tab py-4 px-6 font-medium text-gray-500 hover:text-gray-700">Seller Information</button>
600
+ <button class="product-tab py-4 px-6 font-medium text-gray-500 hover:text-gray-700">Reviews (124)</button>
601
+ </div>
602
+ <div class="p-6">
603
+ <div id="details-tab" class="product-tab-content">
604
+ <h3 class="text-lg font-semibold text-gray-900 mb-4">Product Details</h3>
605
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
606
+ <div>
607
+ <h4 class="font-medium text-gray-900 mb-2">Specifications</h4>
608
+ <table class="w-full text-sm text-gray-700">
609
+ <tr class="border-b border-gray-200">
610
+ <td class="py-2 font-medium">Brand</td>
611
+ <td class="py-2">SoundMaster</td>
612
+ </tr>
613
+ <tr class="border-b border-gray-200">
614
+ <td class="py-2 font-medium">Model</td>
615
+ <td class="py-2">SM-4500</td>
616
+ </tr>
617
+ <tr class="border-b border-gray-200">
618
+ <td class="py-2 font-medium">Color</td>
619
+ <td class="py-2">Black</td>
620
+ </tr>
621
+ <tr class="border-b border-gray-200">
622
+ <td class="py-2 font-medium">Connectivity</td>
623
+ <td class="py-2">Bluetooth 5.0</td>
624
+ </tr>
625
+ <tr class="border-b border-gray-200">
626
+ <td class="py-2 font-medium">Battery Life</td>
627
+ <td class="py-2">30 hours</td>
628
+ </tr>
629
+ </table>
630
+ </div>
631
+ <div>
632
+ <h4 class="font-medium text-gray-900 mb-2">What's in the box</h4>
633
+ <ul class="list-disc list-inside text-gray-700">
634
+ <li>Wireless Headphones</li>
635
+ <li>USB-C Charging Cable</li>
636
+ <li>3.5mm Audio Cable</li>
637
+ <li>Carrying Case</li>
638
+ <li>Quick Start Guide</li>
639
+ </ul>
640
+ </div>
641
+ </div>
642
+ </div>
643
+ <div id="shipping-tab" class="product-tab-content hidden">
644
+ <h3 class="text-lg font-semibold text-gray-900 mb-4">Shipping & Policies</h3>
645
+ <div class="space-y-4">
646
+ <div>
647
+ <h4 class="font-medium text-gray-900">Shipping</h4>
648
+ <p class="text-gray-700">Free standard shipping on all orders. Expedited shipping options available at checkout.</p>
649
+ </div>
650
+ <div>
651
+ <h4 class="font-medium text-gray-900">Returns</h4>
652
+ <p class="text-gray-700">30-day return policy. Item must be in original condition with all accessories included. Buyer is responsible for return shipping costs unless item is defective or incorrect.</p>
653
+ </div>
654
+ <div>
655
+ <h4 class="font-medium text-gray-900">Payments</h4>
656
+ <p class="text-gray-700">We accept all major credit cards, PayPal, and MarketBay Pay.</p>
657
+ </div>
658
+ </div>
659
+ </div>
660
+ <div id="seller-tab" class="product-tab-content hidden">
661
+ <h3 class="text-lg font-semibold text-gray-900 mb-4">Seller Information</h3>
662
+ <div class="flex items-start mb-6">
663
+ <img class="h-16 w-16 rounded-full mr-4" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="Seller profile">
664
+ <div>
665
+ <h4 class="font-bold text-gray-900">TechGadgetsStore</h4>
666
+ <div class="flex items-center mb-1">
667
+ <i class="fas fa-star text-yellow-400"></i>
668
+ <i class="fas fa-star text-yellow-400"></i>
669
+ <i class="fas fa-star text-yellow-400"></i>
670
+ <i class="fas fa-star text-yellow-400"></i>
671
+ <i class="fas fa-star text-yellow-400"></i>
672
+ <span class="text-gray-700 ml-1">4.9</span>
673
+ <span class="text-gray-500 text-sm ml-1">(1,234 reviews)</span>
674
+ </div>
675
+ <p class="text-gray-700 text-sm">Member since 2018</p>
676
+ </div>
677
+ </div>
678
+ <div class="grid grid-cols-2 gap-4 text-sm">
679
+ <div>
680
+ <div class="font-medium text-gray-900">Response Rate:</div>
681
+ <p class="text-gray-700">98%</p>
682
+ </div>
683
+ <div>
684
+ <div class="font-medium text-gray-900">Response Time:</div>
685
+ <p class="text-gray-700">Within 1 hour</p>
686
+ </div>
687
+ <div>
688
+ <div class="font-medium text-gray-900">Items Sold:</div>
689
+ <p class="text-gray-700">5,678</p>
690
+ </div>
691
+ <div>
692
+ <div class="font-medium text-gray-900">Followers:</div>
693
+ <p class="text-gray-700">12,345</p>
694
+ </div>
695
+ </div>
696
+ <button class="mt-6 bg-blue-600 hover:bg-blue-700 text-white py-2 px-6 rounded-md transition-colors">
697
+ Contact Seller
698
+ </button>
699
+ </div>
700
+ <div id="reviews-tab" class="product-tab-content hidden">
701
+ <h3 class="text-lg font-semibold text-gray-900 mb-4">Customer Reviews (124)</h3>
702
+ <div class="flex items-center mb-6">
703
+ <div class="text-4xl font-bold mr-4">4.8</div>
704
+ <div class="mr-6">
705
+ <div class="flex items-center mb-1">
706
+ <span class="w-16 text-sm text-gray-600">5 stars</span>
707
+ <div class="w-32 bg-gray-200 rounded-full h-2.5 mx-2">
708
+ <div class="bg-yellow-400 h-2.5 rounded-full" style="width: 85%"></div>
709
+ </div>
710
+ <span class="text-sm text-gray-600">105</span>
711
+ </div>
712
+ <div class="flex items-center mb-1">
713
+ <span class="w-16 text-sm text-gray-600">4 stars</span>
714
+ <div class="w-32 bg-gray-200 rounded-full h-2.5 mx-2">
715
+ <div class="bg-yellow-400 h-2.5 rounded-full" style="width: 10%"></div>
716
+ </div>
717
+ <span class="text-sm text-gray-600">12</span>
718
+ </div>
719
+ <div class="flex items-center mb-1">
720
+ <span class="w-16 text-sm text-gray-600">3 stars</span>
721
+ <div class="w-32 bg-gray-200 rounded-full h-2.5 mx-2">
722
+ <div class="bg-yellow-400 h-2.5 rounded-full" style="width: 3%"></div>
723
+ </div>
724
+ <span class="text-sm text-gray-600">4</span>
725
+ </div>
726
+ <div class="flex items-center mb-1">
727
+ <span class="w-16 text-sm text-gray-600">2 stars</span>
728
+ <div class="w-32 bg-gray-200 rounded-full h-2.5 mx-2">
729
+ <div class="bg-yellow-400 h-2.5 rounded-full" style="width: 1%"></div>
730
+ </div>
731
+ <span class="text-sm text-gray-600">1</span>
732
+ </div>
733
+ <div class="flex items-center">
734
+ <span class="w-16 text-sm text-gray-600">1 star</span>
735
+ <div class="w-32 bg-gray-200 rounded-full h-2.5 mx-2">
736
+ <div class="bg-yellow-400 h-2.5 rounded-full" style="width: 1%"></div>
737
+ </div>
738
+ <span class="text-sm text-gray-600">2</span>
739
+ </div>
740
+ </div>
741
+ <button class="ml-auto bg-blue-600 hover:bg-blue-700 text-white py-2 px-6 rounded-md transition-colors">
742
+ Write a Review
743
+ </button>
744
+ </div>
745
+
746
+ <div class="space-y-6">
747
+ <!-- Review 1 -->
748
+ <div class="border-b border-gray-200 pb-6">
749
+ <div class="flex items-center mb-2">
750
+ <div class="flex items-center mr-4">
751
+ <i class="fas fa-star text-yellow-400"></i>
752
+ <i class="fas fa-star text-yellow-400"></i>
753
+ <i class="fas fa-star text-yellow-400"></i>
754
+ <i class="fas fa-star text-yellow-400"></i>
755
+ <i class="fas fa-star text-yellow-400"></i>
756
+ </div>
757
+ <div class="text-gray-900 font-medium">Excellent sound quality!</div>
758
+ </div>
759
+ <div class="text-sm text-gray-500 mb-3">By John D. on November 15, 2023</div>
760
+ <p class="text-gray-700 mb-3">
761
+ These headphones exceeded my expectations. The noise cancellation is incredible and the sound quality is crisp and clear.
762
+ Very comfortable for long listening sessions. Battery life is as advertised.
763
+ </p>
764
+ <div class="flex items-center text-sm text-gray-500">
765
+ <span class="mr-4">Was this review helpful?</span>
766
+ <button class="mr-2 text-blue-600 hover:text-blue-800">Yes (24)</button>
767
+ <button class="text-blue-600 hover:text-blue-800">No (2)</button>
768
+ </div>
769
+ </div>
770
+
771
+ <!-- Review 2 -->
772
+ <div class="border-b border-gray-200 pb-6">
773
+ <div class="flex items-center mb-2">
774
+ <div class="flex items-center mr-4">
775
+ <i class="fas fa-star text-yellow-400"></i>
776
+ <i class="fas fa-star text-yellow-400"></i>
777
+ <i class="fas fa-star text-yellow-400"></i>
778
+ <i class="fas fa-star text-yellow-400"></i>
779
+ <i class="far fa-star text-yellow-400"></i>
780
+ </div>
781
+ <div class="text-gray-900 font-medium">Great headphones, minor issues</div>
782
+ </div>
783
+ <div class="text-sm text-gray-500 mb-3">By Sarah M. on November 8, 2023</div>
784
+ <p class="text-gray-700 mb-3">
785
+ Overall very happy with these headphones. Sound quality is excellent and they're comfortable to wear.
786
+ My only complaint is that the touch controls can be a bit too sensitive at times.
787
+ Would definitely recommend though!
788
+ </p>
789
+ <div class="flex items-center text-sm text-gray-500">
790
+ <span class="mr-4">Was this review helpful?</span>
791
+ <button class="mr-2 text-blue-600 hover:text-blue-800">Yes (18)</button>
792
+ <button class="text-blue-600 hover:text-blue-800">No (1)</button>
793
+ </div>
794
+ </div>
795
+
796
+ <!-- Review 3 -->
797
+ <div class="pb-6">
798
+ <div class="flex items-center mb-2">
799
+ <div class="flex items-center mr-4">
800
+ <i class="fas fa-star text-yellow-400"></i>
801
+ <i class="fas fa-star text-yellow-400"></i>
802
+ <i class="fas fa-star text-yellow-400"></i>
803
+ <i class="fas fa-star text-yellow-400"></i>
804
+ <i class="fas fa-star-half-alt text-yellow-400"></i>
805
+ </div>
806
+ <div class="text-gray-900 font-medium">Almost perfect</div>
807
+ </div>
808
+ <div class="text-sm text-gray-500 mb-3">By Michael T. on October 30, 2023</div>
809
+ <p class="text-gray-700 mb-3">
810
+ These are fantastic headphones for the price. Noise cancellation works well, sound is balanced, and they're comfortable.
811
+ Battery life is excellent. My only minor complaint is that the ear cups could be a bit larger for people with bigger ears.
812
+ </p>
813
+ <div class="flex items-center text-sm text-gray-500">
814
+ <span class="mr-4">Was this review helpful?</span>
815
+ <button class="mr-2 text-blue-600 hover:text-blue-800">Yes (15)</button>
816
+ <button class="text-blue-600 hover:text-blue-800">No (0)</button>
817
+ </div>
818
+ </div>
819
+ </div>
820
+
821
+ <button class="mt-6 bg-white border border-gray-300 text-gray-700 hover:bg-gray-50 py-2 px-6 rounded-md transition-colors">
822
+ Load More Reviews
823
+ </button>
824
+ </div>
825
+ </div>
826
+ </div>
827
+ </div>
828
+ </div>
829
+
830
+ <!-- User Dashboard (Hidden by default) -->
831
+ <div id="user-dashboard" class="hidden">
832
+ <div class="flex flex-col md:flex-row gap-6">
833
+ <!-- Sidebar -->
834
+ <div class="w-full md:w-64 bg-white rounded-lg shadow-md p-4 h-fit">
835
+ <div class="flex items-center mb-6">
836
+ <img class="h-12 w-12 rounded-full mr-3" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="User profile">
837
+ <div>
838
+ <h3 class="font-bold text-gray-900">John Doe</h3>
839
+ <p class="text-sm text-gray-500">Member since 2022</p>
840
+ </div>
841
+ </div>
842
+ <div class="space-y-1">
843
+ <a href="#" class="dashboard-tab active flex items-center px-3 py-2 text-sm font-medium rounded-md bg-blue-50 text-blue-700">
844
+ <i class="fas fa-user-circle mr-3 text-blue-600"></i>
845
+ Profile
846
+ </a>
847
+ <a href="#" class="dashboard-tab flex items-center px-3 py-2 text-sm font-medium rounded-md text-gray-600 hover:bg-gray-50 hover:text-gray-900">
848
+ <i class="fas fa-list mr-3 text-gray-400"></i>
849
+ My Listings
850
+ </a>
851
+ <a href="#" class="dashboard-tab flex items-center px-3 py-2 text-sm font-medium rounded-md text-gray-600 hover:bg-gray-50 hover:text-gray-900">
852
+ <i class="fas fa-gavel mr-3 text-gray-400"></i>
853
+ Bids Made
854
+ </a>
855
+ <a href="#" class="dashboard-tab flex items-center px-3 py-2 text-sm font-medium rounded-md text-gray-600 hover:bg-gray-50 hover:text-gray-900">
856
+ <i class="fas fa-shopping-bag mr-3 text-gray-400"></i>
857
+ Orders
858
+ </a>
859
+ <a href="#" class="dashboard-tab flex items-center px-3 py-2 text-sm font-medium rounded-md text-gray-600 hover:bg-gray-50 hover:text-gray-900">
860
+ <i class="fas fa-heart mr-3 text-gray-400"></i>
861
+ Wishlist
862
+ </a>
863
+ <a href="#" class="dashboard-tab flex items-center px-3 py-2 text-sm font-medium rounded-md text-gray-600 hover:bg-gray-50 hover:text-gray-900">
864
+ <i class="fas fa-envelope mr-3 text-gray-400"></i>
865
+ Messages
866
+ <span class="ml-auto bg-blue-600 text-white text-xs px-2 py-0.5 rounded-full">3</span>
867
+ </a>
868
+ <a href="#" class="dashboard-tab flex items-center px-3 py-2 text-sm font-medium rounded-md text-gray-600 hover:bg-gray-50 hover:text-gray-900">
869
+ <i class="fas fa-cog mr-3 text-gray-400"></i>
870
+ Settings
871
+ </a>
872
+ </div>
873
+ </div>
874
+
875
+ <!-- Main Content -->
876
+ <div class="flex-1 bg-white rounded-lg shadow-md p-6">
877
+ <div class="flex justify-between items-center mb-6">
878
+ <h2 class="text-2xl font-bold text-gray-900">My Profile</h2>
879
+ <button class="bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-md transition-colors">
880
+ Edit Profile
881
+ </button>
882
+ </div>
883
+
884
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
885
+ <div class="col-span-2">
886
+ <div class="mb-4">
887
+ <label class="block text-sm font-medium text-gray-700 mb-1">Full Name</label>
888
+ <p class="text-gray-900">John Doe</p>
889
+ </div>
890
+ <div class="mb-4">
891
+ <label class="block text-sm font-medium text-gray-700 mb-1">Email</label>
892
+ <p class="text-gray-900">john.doe@example.com</p>
893
+ </div>
894
+ <div class="mb-4">
895
+ <label class="block text-sm font-medium text-gray-700 mb-1">Phone Number</label>
896
+ <p class="text-gray-900">(555) 123-4567</p>
897
+ </div>
898
+ <div>
899
+ <label class="block text-sm font-medium text-gray-700 mb-1">Address</label>
900
+ <p class="text-gray-900">123 Main St, Apt 4B<br>New York, NY 10001<br>United States</p>
901
+ </div>
902
+ </div>
903
+ <div class="flex flex-col items-center">
904
+ <div class="relative mb-4">
905
+ <img class="h-32 w-32 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="User profile">
906
+ <button class="absolute bottom-0 right-0 bg-white rounded-full p-2 shadow-md">
907
+ <i class="fas fa-camera text-blue-600"></i>
908
+ </button>
909
+ </div>
910
+ <div class="text-center">
911
+ <h3 class="font-bold text-gray-900">John Doe</h3>
912
+ <p class="text-sm text-gray-500">Member since June 2022</p>
913
+ <div class="mt-2 flex justify-center">
914
+ <i class="fas fa-star text-yellow-400"></i>
915
+ <i class="fas fa-star text-yellow-400"></i>
916
+ <i class="fas fa-star text-yellow-400"></i>
917
+ <i class="fas fa-star text-yellow-400"></i>
918
+ <i class="fas fa-star-half-alt text-yellow-400"></i>
919
+ <span class="ml-1 text-gray-700">4.7</span>
920
+ </div>
921
+ </div>
922
+ </div>
923
+ </div>
924
+
925
+ <div class="border-t border-gray-200 pt-6">
926
+ <h3 class="text-lg font-semibold text-gray-900 mb-4">Account Verification</h3>
927
+ <div class="space-y-4">
928
+ <div class="flex items-center justify-between p-4 bg-gray-50 rounded-lg">
929
+ <div>
930
+ <h4 class="font-medium text-gray-900">Email Verification</h4>
931
+ <p class="text-sm text-gray-500">Verify your email address to secure your account</p>
932
+ </div>
933
+ <span class="bg-green-100 text-green-800 text-xs font-medium px-2.5 py-0.5 rounded-full">Verified</span>
934
+ </div>
935
+ <div class="flex items-center justify-between p-4 bg-gray-50 rounded-lg">
936
+ <div>
937
+ <h4 class="font-medium text-gray-900">Phone Verification</h4>
938
+ <p class="text-sm text-gray-500">Verify your phone number for additional security</p>
939
+ </div>
940
+ <button class="bg-blue-600 hover:bg-blue-700 text-white text-sm py-1 px-3 rounded-md transition-colors">
941
+ Verify Now
942
+ </button>
943
+ </div>
944
+ <div class="flex items-center justify-between p-4 bg-gray-50 rounded-lg">
945
+ <div>
946
+ <h4 class="font-medium text-gray-900">ID Verification</h4>
947
+ <p class="text-sm text-gray-500">Required to become a verified seller</p>
948
+ </div>
949
+ <button class="bg-blue-600 hover:bg-blue-700 text-white text-sm py-1 px-3 rounded-md transition-colors">
950
+ Start Verification
951
+ </button>
952
+ </div>
953
+ </div>
954
+ </div>
955
+
956
+ <div class="border-t border-gray-200 pt-6 mt-6">
957
+ <h3 class="text-lg font-semibold text-gray-900 mb-4">Account Activity</h3>
958
+ <div class="overflow-x-auto">
959
+ <table class="min-w-full divide-y divide-gray-200">
960
+ <thead class="bg-gray-50">
961
+ <tr>
962
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th>
963
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Activity</th>
964
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Details</th>
965
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">IP Address</th>
966
+ </tr>
967
+ </thead>
968
+ <tbody class="bg-white divide-y divide-gray-200">
969
+ <tr>
970
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Today, 10:45 AM</td>
971
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Login</td>
972
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Successful login</td>
973
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">192.168.1.1</td>
974
+ </tr>
975
+ <tr>
976
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Yesterday, 8:30 PM</td>
977
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Listing Created</td>
978
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">"Vintage Camera"</td>
979
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">192.168.1.1</td>
980
+ </tr>
981
+ <tr>
982
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Dec 10, 3:15 PM</td>
983
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Order Placed</td>
984
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Order #MB-45678</td>
985
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">192.168.1.1</td>
986
+ </tr>
987
+ <tr>
988
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Dec 8, 11:20 AM</td>
989
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Password Changed</td>
990
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Password updated</td>
991
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">192.168.1.1</td>
992
+ </tr>
993
+ </tbody>
994
+ </table>
995
+ </div>
996
+ <button class="mt-4 bg-white border border-gray-300 text-gray-700 hover:bg-gray-50 py-2 px-4 rounded-md transition-colors">
997
+ View All Activity
998
+ </button>
999
+ </div>
1000
+ </div>
1001
+ </div>
1002
+ </div>
1003
+
1004
+ <!-- Create Listing Page (Hidden by default) -->
1005
+ <div id="create-listing-page" class="hidden">
1006
+ <div class="bg-white rounded-lg shadow-md overflow-hidden p-6">
1007
+ <h1 class="text-2xl font-bold text-gray-900 mb-6">Create New Listing</h1>
1008
+
1009
+ <form>
1010
+ <div class="grid grid-cols-1 gap-6 mb-8">
1011
+ <!-- Listing Title -->
1012
+ <div>
1013
+ <label for="listing-title" class="block text-sm font-medium text-gray-700 mb-1">Listing Title*</label>
1014
+ <input type="text" id="listing-title" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500" placeholder="What are you selling?">
1015
+ <p class="mt-1 text-sm text-gray-500">Be specific and include keywords that buyers would search for.</p>
1016
+ </div>
1017
+
1018
+ <!-- Description -->
1019
+ <div>
1020
+ <label for="listing-description" class="block text-sm font-medium text-gray-700 mb-1">Description*</label>
1021
+ <textarea id="listing-description" rows="5" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500" placeholder="Describe your item in detail"></textarea>
1022
+ <p class="mt-1 text-sm text-gray-500">Include condition, features, dimensions, and any flaws.</p>
1023
+ </div>
1024
+
1025
+ <!-- Images -->
1026
+ <div>
1027
+ <label class="block text-sm font-medium text-gray-700 mb-1">Photos*</label>
1028
+ <div class="mt-1 flex justify-center px-6 pt-5 pb-6 border-2 border-gray-300 border-dashed rounded-md">
1029
+ <div class="space-y-1 text-center">
1030
+ <div class="flex text-sm text-gray-600">
1031
+ <label for="file-upload" class="relative cursor-pointer bg-white rounded-md font-medium text-blue-600 hover:text-blue-500 focus-within:outline-none">
1032
+ <span>Upload files</span>
1033
+ <input id="file-upload" name="file-upload" type="file" class="sr-only" multiple>
1034
+ </label>
1035
+ <p class="pl-1">or drag and drop</p>
1036
+ </div>
1037
+ <p class="text-xs text-gray-500">PNG, JPG up to 10MB</p>
1038
+ </div>
1039
+ </div>
1040
+ <div class="grid grid-cols-4 gap-2 mt-4">
1041
+ <div class="relative h-24 border rounded-md overflow-hidden">
1042
+ <img src="https://images.unsplash.com/photo-1542291026-7eec264c27ff?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="Preview" class="h-full w-full object-cover">
1043
+ <button class="absolute top-1 right-1 bg-white rounded-full p-1 shadow-sm">
1044
+ <i class="fas fa-times text-red-500 text-xs"></i>
1045
+ </button>
1046
+ </div>
1047
+ <div class="relative h-24 border rounded-md overflow-hidden">
1048
+ <img src="https://images.unsplash.com/photo-1505740420928-5e560c06d30e?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="Preview" class="h-full w-full object-cover">
1049
+ <button class="absolute top-1 right-1 bg-white rounded-full p-1 shadow-sm">
1050
+ <i class="fas fa
1051
+ <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=spanexx/ebayalt" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
1052
+ </html>