Hugging Face's logo

Spaces:
Jaafarsa
/
undefined
Running

App Files Community
Jaafarsa commited on
Commit
ab6d371
·
verified ·
1 Parent(s): d48ed86

- The website will be very similar to Etsy and toogoodtogo together.

Browse files

Add sign in for new register. For seller and buyer
Add log in and log out for seller and buyer
Add feature for seller to upload and remove the image
Add feature for seller to upload the image from their phone or computer
Add a direct chat functionality for buyer for buyer and seller

Files changed (5) hide show
  1. README.md +9 -5
  2. index.html +627 -18
  3. login.html +86 -0
  4. register.html +119 -0
  5. seller-dashboard.html +305 -0
README.md CHANGED
@@ -1,10 +1,14 @@
1
  ---
2
- title: Undefined
3
- emoji: 📉
4
- colorFrom: blue
5
- colorTo: pink
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: undefined
3
+ colorFrom: gray
4
+ colorTo: purple
5
+ emoji: 🐳
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite-v3
10
  ---
11
 
12
+ # Welcome to your new DeepSite project!
13
+ This project was created with [DeepSite](https://deepsite.hf.co).
14
+
index.html CHANGED
@@ -1,19 +1,628 @@
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" class="dark">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>YourHand.co - Handcrafted Marketplace</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
9
+ <script src="https://unpkg.com/feather-icons"></script>
10
+ <script>
11
+ tailwind.config = {
12
+ darkMode: 'class',
13
+ theme: {
14
+ extend: {
15
+ colors: {
16
+ primary: {
17
+ 500: '#d946ef',
18
+ },
19
+ secondary: {
20
+ 500: '#d946ef',
21
+ }
22
+ }
23
+ }
24
+ }
25
+ }
26
+ </script>
27
+ <style>
28
+ .vanta-bg {
29
+ position: absolute;
30
+ z-index: -1;
31
+ top: 0;
32
+ left: 0;
33
+ width: 100%;
34
+ height: 100%;
35
+ opacity: 0.2;
36
+ }
37
+ .gradient-text {
38
+ background: linear-gradient(90deg, #d946ef 0%, #a855f7 100%);
39
+ -webkit-background-clip: text;
40
+ background-clip: text;
41
+ color: transparent;
42
+ }
43
+ .card-hover:hover {
44
+ transform: translateY(-5px);
45
+ box-shadow: 0 25px 50px -12px rgba(216, 70, 239, 0.25);
46
+ }
47
+ </style>
48
+ </head>
49
+ <body class="bg-gray-900 text-gray-100 min-h-screen">
50
+ <!-- Navigation -->
51
+ <nav class="bg-gray-800 border-b border-gray-700 px-4 py-3">
52
+ <div class="max-w-7xl mx-auto flex items-center justify-between">
53
+ <div class="flex items-center space-x-2">
54
+ <i data-feather="hand" class="text-primary-500 w-8 h-8"></i>
55
+ <span class="text-2xl font-bold gradient-text">YourHand.co</span>
56
+ </div>
57
+ <div class="hidden md:flex space-x-6">
58
+ <a href="#" class="hover:text-primary-500 transition">Home</a>
59
+ <a href="#marketplace" class="hover:text-primary-500 transition">Marketplace</a>
60
+ <a href="#food-rescue" class="hover:text-primary-500 transition">Food Rescue</a>
61
+ <a href="#about" class="hover:text-primary-500 transition">About</a>
62
+ <a href="#contact" class="hover:text-primary-500 transition">Contact</a>
63
+ </div>
64
+ <div class="flex items-center space-x-4">
65
+ <a href="#" class="p-2 rounded-full hover:bg-gray-700 transition">
66
+ <i data-feather="shopping-cart" class="w-5 h-5"></i>
67
+ </a>
68
+ <a href="login.html" class="p-2 rounded-full hover:bg-gray-700 transition">
69
+ <i data-feather="user" class="w-5 h-5"></i>
70
+ </a>
71
+ <button id="theme-toggle" class="p-2 rounded-full hover:bg-gray-700 transition">
72
+ <i data-feather="moon" class="w-5 h-5"></i>
73
+ </button>
74
+ <a href="register.html" class="hidden md:block bg-primary-500 hover:bg-primary-600 text-white font-medium py-2 px-4 rounded-lg transition">
75
+ Sign Up
76
+ </a>
77
+ <button class="md:hidden p-2 rounded-full hover:bg-gray-700 transition">
78
+ <i data-feather="menu" class="w-5 h-5"></i>
79
+ </button>
80
+ </div>
81
+ </div>
82
+ </nav>
83
+
84
+ <!-- Hero Section -->
85
+ <section class="relative overflow-hidden py-20 px-4">
86
+ <div class="max-w-7xl mx-auto text-center relative z-10">
87
+ <h1 class="text-5xl md:text-7xl font-bold mb-6">
88
+ <span class="gradient-text">Handmade</span> Meets <span class="gradient-text">Sustainability</span>
89
+ </h1>
90
+ <p class="text-xl md:text-2xl text-gray-300 mb-10 max-w-3xl mx-auto">
91
+ Discover unique handcrafted items and rescue delicious food - all in one place. Support local artisans and reduce food waste.
92
+ </p>
93
+ <div class="flex flex-col sm:flex-row justify-center gap-4">
94
+ <a href="#marketplace" class="bg-primary-500 hover:bg-primary-600 text-white font-bold py-3 px-8 rounded-full transition transform hover:scale-105">
95
+ Shop Handmade
96
+ </a>
97
+ <a href="#food-rescue" class="bg-gray-700 hover:bg-gray-600 text-white font-bold py-3 px-8 rounded-full transition transform hover:scale-105">
98
+ Rescue Food
99
+ </a>
100
+ </div>
101
+ </div>
102
+ </section>
103
+
104
+ <!-- Marketplace Section -->
105
+ <section id="marketplace" class="py-16 px-4 bg-gray-800">
106
+ <div class="max-w-7xl mx-auto">
107
+ <div class="flex items-center justify-between mb-10">
108
+ <h2 class="text-3xl font-bold">
109
+ <span class="gradient-text">Etsy-style</span> Marketplace
110
+ </h2>
111
+ <a href="#" class="flex items-center text-primary-500 hover:text-primary-400 transition">
112
+ View all <i data-feather="chevron-right" class="ml-1 w-5 h-5"></i>
113
+ </a>
114
+ </div>
115
+
116
+ <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
117
+ <!-- Product Card 1 -->
118
+ <div class="bg-gray-700 rounded-xl overflow-hidden shadow-lg transition duration-300 card-hover">
119
+ <div class="relative h-60 overflow-hidden">
120
+ <img src="http://static.photos/craft/640x360/1" alt="Handmade Product" class="w-full h-full object-cover">
121
+ <div class="absolute top-2 right-2 bg-gray-900 text-primary-500 px-2 py-1 rounded-full text-xs font-bold">
122
+ $45
123
+ </div>
124
+ </div>
125
+ <div class="p-4">
126
+ <div class="flex items-center mb-1">
127
+ <div class="w-6 h-6 rounded-full overflow-hidden mr-2">
128
+ <img src="http://static.photos/people/200x200/1" alt="Seller" class="w-full h-full object-cover">
129
+ </div>
130
+ <span class="text-sm text-gray-300">CraftyHands</span>
131
+ </div>
132
+ <h3 class="font-bold mb-2">Handwoven Macrame Wall Hanging</h3>
133
+ <div class="flex items-center justify-between">
134
+ <div class="flex items-center text-yellow-400">
135
+ <i data-feather="star" class="w-4 h-4 fill-current"></i>
136
+ <i data-feather="star" class="w-4 h-4 fill-current"></i>
137
+ <i data-feather="star" class="w-4 h-4 fill-current"></i>
138
+ <i data-feather="star" class="w-4 h-4 fill-current"></i>
139
+ <i data-feather="star" class="w-4 h-4"></i>
140
+ <span class="text-gray-400 text-sm ml-1">(24)</span>
141
+ </div>
142
+ <button class="text-primary-500 hover:text-primary-400 transition">
143
+ <i data-feather="heart" class="w-5 h-5"></i>
144
+ </button>
145
+ </div>
146
+ </div>
147
+ </div>
148
+
149
+ <!-- Product Card 2 -->
150
+ <div class="bg-gray-700 rounded-xl overflow-hidden shadow-lg transition duration-300 card-hover">
151
+ <div class="relative h-60 overflow-hidden">
152
+ <img src="http://static.photos/craft/640x360/2" alt="Handmade Product" class="w-full h-full object-cover">
153
+ <div class="absolute top-2 right-2 bg-gray-900 text-primary-500 px-2 py-1 rounded-full text-xs font-bold">
154
+ $28
155
+ </div>
156
+ </div>
157
+ <div class="p-4">
158
+ <div class="flex items-center mb-1">
159
+ <div class="w-6 h-6 rounded-full overflow-hidden mr-2">
160
+ <img src="http://static.photos/people/200x200/2" alt="Seller" class="w-full h-full object-cover">
161
+ </div>
162
+ <span class="text-sm text-gray-300">EarthCeramics</span>
163
+ </div>
164
+ <h3 class="font-bold mb-2">Hand-thrown Ceramic Mug Set</h3>
165
+ <div class="flex items-center justify-between">
166
+ <div class="flex items-center text-yellow-400">
167
+ <i data-feather="star" class="w-4 h-4 fill-current"></i>
168
+ <i data-feather="star" class="w-4 h-4 fill-current"></i>
169
+ <i data-feather="star" class="w-4 h-4 fill-current"></i>
170
+ <i data-feather="star" class="w-4 h-4 fill-current"></i>
171
+ <i data-feather="star" class="w-4 h-4 fill-current"></i>
172
+ <span class="text-gray-400 text-sm ml-1">(56)</span>
173
+ </div>
174
+ <button class="text-primary-500 hover:text-primary-400 transition">
175
+ <i data-feather="heart" class="w-5 h-5"></i>
176
+ </button>
177
+ </div>
178
+ </div>
179
+ </div>
180
+
181
+ <!-- Product Card 3 -->
182
+ <div class="bg-gray-700 rounded-xl overflow-hidden shadow-lg transition duration-300 card-hover">
183
+ <div class="relative h-60 overflow-hidden">
184
+ <img src="http://static.photos/craft/640x360/3" alt="Handmade Product" class="w-full h-full object-cover">
185
+ <div class="absolute top-2 right-2 bg-gray-900 text-primary-500 px-2 py-1 rounded-full text-xs font-bold">
186
+ $75
187
+ </div>
188
+ </div>
189
+ <div class="p-4">
190
+ <div class="flex items-center mb-1">
191
+ <div class="w-6 h-6 rounded-full overflow-hidden mr-2">
192
+ <img src="http://static.photos/people/200x200/3" alt="Seller" class="w-full h-full object-cover">
193
+ </div>
194
+ <span class="text-sm text-gray-300">LeatherCraft</span>
195
+ </div>
196
+ <h3 class="font-bold mb-2">Hand-stitched Leather Wallet</h3>
197
+ <div class="flex items-center justify-between">
198
+ <div class="flex items-center text-yellow-400">
199
+ <i data-feather="star" class="w-4 h-4 fill-current"></i>
200
+ <i data-feather="star" class="w-4 h-4 fill-current"></i>
201
+ <i data-feather="star" class="w-4 h-4 fill-current"></i>
202
+ <i data-feather="star" class="w-4 h-4 fill-current"></i>
203
+ <i data-feather="star" class="w-4 h-4"></i>
204
+ <span class="text-gray-400 text-sm ml-1">(18)</span>
205
+ </div>
206
+ <button class="text-primary-500 hover:text-primary-400 transition">
207
+ <i data-feather="heart" class="w-5 h-5"></i>
208
+ </button>
209
+ </div>
210
+ </div>
211
+ </div>
212
+
213
+ <!-- Product Card 4 -->
214
+ <div class="bg-gray-700 rounded-xl overflow-hidden shadow-lg transition duration-300 card-hover">
215
+ <div class="relative h-60 overflow-hidden">
216
+ <img src="http://static.photos/craft/640x360/4" alt="Handmade Product" class="w-full h-full object-cover">
217
+ <div class="absolute top-2 right-2 bg-gray-900 text-primary-500 px-2 py-1 rounded-full text-xs font-bold">
218
+ $32
219
+ </div>
220
+ </div>
221
+ <div class="p-4">
222
+ <div class="flex items-center mb-1">
223
+ <div class="w-6 h-6 rounded-full overflow-hidden mr-2">
224
+ <img src="http://static.photos/people/200x200/4" alt="Seller" class="w-full h-full object-cover">
225
+ </div>
226
+ <span class="text-sm text-gray-300">WoodArt</span>
227
+ </div>
228
+ <h3 class="font-bold mb-2">Hand-carved Wooden Spoon Set</h3>
229
+ <div class="flex items-center justify-between">
230
+ <div class="flex items-center text-yellow-400">
231
+ <i data-feather="star" class="w-4 h-4 fill-current"></i>
232
+ <i data-feather="star" class="w-4 h-4 fill-current"></i>
233
+ <i data-feather="star" class="w-4 h-4 fill-current"></i>
234
+ <i data-feather="star" class="w-4 h-4 fill-current"></i>
235
+ <i data-feather="star" class="w-4 h-4"></i>
236
+ <span class="text-gray-400 text-sm ml-1">(32)</span>
237
+ </div>
238
+ <button class="text-primary-500 hover:text-primary-400 transition">
239
+ <i data-feather="heart" class="w-5 h-5"></i>
240
+ </button>
241
+ </div>
242
+ </div>
243
+ </div>
244
+ </div>
245
+ </div>
246
+ </section>
247
+
248
+ <!-- Food Rescue Section -->
249
+ <section id="food-rescue" class="py-16 px-4 bg-gray-900">
250
+ <div class="max-w-7xl mx-auto">
251
+ <div class="flex items-center justify-between mb-10">
252
+ <h2 class="text-3xl font-bold">
253
+ <span class="gradient-text">Too Good To Go</span> Style Food Rescue
254
+ </h2>
255
+ <a href="#" class="flex items-center text-primary-500 hover:text-primary-400 transition">
256
+ View all <i data-feather="chevron-right" class="ml-1 w-5 h-5"></i>
257
+ </a>
258
+ </div>
259
+
260
+ <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
261
+ <!-- Food Rescue Card 1 -->
262
+ <div class="bg-gray-800 rounded-xl overflow-hidden shadow-lg transition duration-300 card-hover">
263
+ <div class="relative h-48 overflow-hidden">
264
+ <img src="http://static.photos/food/640x360/1" alt="Food Rescue" class="w-full h-full object-cover">
265
+ <div class="absolute top-2 right-2 bg-gray-900 text-primary-500 px-2 py-1 rounded-full text-xs font-bold">
266
+ 75% OFF
267
+ </div>
268
+ </div>
269
+ <div class="p-4">
270
+ <h3 class="font-bold mb-1">Fresh Bakery Surprise Bag</h3>
271
+ <p class="text-gray-400 text-sm mb-3">Bakery Delight • 0.3 mi</p>
272
+ <div class="flex items-center justify-between">
273
+ <div>
274
+ <span class="text-gray-400 line-through">$15</span>
275
+ <span class="text-primary-500 font-bold ml-2">$3.99</span>
276
+ </div>
277
+ <div class="flex items-center text-gray-400 text-sm">
278
+ <i data-feather="clock" class="w-4 h-4 mr-1"></i>
279
+ <span>Pickup: 4-5 PM</span>
280
+ </div>
281
+ </div>
282
+ <button class="w-full mt-4 bg-primary-500 hover:bg-primary-600 text-white font-bold py-2 px-4 rounded-lg transition">
283
+ Reserve Now
284
+ </button>
285
+ </div>
286
+ </div>
287
+
288
+ <!-- Food Rescue Card 2 -->
289
+ <div class="bg-gray-800 rounded-xl overflow-hidden shadow-lg transition duration-300 card-hover">
290
+ <div class="relative h-48 overflow-hidden">
291
+ <img src="http://static.photos/food/640x360/2" alt="Food Rescue" class="w-full h-full object-cover">
292
+ <div class="absolute top-2 right-2 bg-gray-900 text-primary-500 px-2 py-1 rounded-full text-xs font-bold">
293
+ 60% OFF
294
+ </div>
295
+ </div>
296
+ <div class="p-4">
297
+ <h3 class="font-bold mb-1">Vegetarian Lunch Box</h3>
298
+ <p class="text-gray-400 text-sm mb-3">GreenEats • 0.7 mi</p>
299
+ <div class="flex items-center justify-between">
300
+ <div>
301
+ <span class="text-gray-400 line-through">$12</span>
302
+ <span class="text-primary-500 font-bold ml-2">$4.80</span>
303
+ </div>
304
+ <div class="flex items-center text-gray-400 text-sm">
305
+ <i data-feather="clock" class="w-4 h-4 mr-1"></i>
306
+ <span>Pickup: 1-2 PM</span>
307
+ </div>
308
+ </div>
309
+ <button class="w-full mt-4 bg-primary-500 hover:bg-primary-600 text-white font-bold py-2 px-4 rounded-lg transition">
310
+ Reserve Now
311
+ </button>
312
+ </div>
313
+ </div>
314
+
315
+ <!-- Food Rescue Card 3 -->
316
+ <div class="bg-gray-800 rounded-xl overflow-hidden shadow-lg transition duration-300 card-hover">
317
+ <div class="relative h-48 overflow-hidden">
318
+ <img src="http://static.photos/food/640x360/3" alt="Food Rescue" class="w-full h-full object-cover">
319
+ <div class="absolute top-2 right-2 bg-gray-900 text-primary-500 px-2 py-1 rounded-full text-xs font-bold">
320
+ 70% OFF
321
+ </div>
322
+ </div>
323
+ <div class="p-4">
324
+ <h3 class="font-bold mb-1">Sushi Surprise Pack</h3>
325
+ <p class="text-gray-400 text-sm mb-3">Ocean Bites • 1.2 mi</p>
326
+ <div class="flex items-center justify-between">
327
+ <div>
328
+ <span class="text-gray-400 line-through">$20</span>
329
+ <span class="text-primary-500 font-bold ml-2">$6.00</span>
330
+ </div>
331
+ <div class="flex items-center text-gray-400 text-sm">
332
+ <i data-feather="clock" class="w-4 h-4 mr-1"></i>
333
+ <span>Pickup: 8-9 PM</span>
334
+ </div>
335
+ </div>
336
+ <button class="w-full mt-4 bg-primary-500 hover:bg-primary-600 text-white font-bold py-2 px-4 rounded-lg transition">
337
+ Reserve Now
338
+ </button>
339
+ </div>
340
+ </div>
341
+ </div>
342
+ </div>
343
+ </section>
344
+
345
+ <!-- Features Section -->
346
+ <section class="py-16 px-4 bg-gray-800">
347
+ <div class="max-w-7xl mx-auto">
348
+ <div class="text-center mb-16">
349
+ <h2 class="text-3xl font-bold mb-4">
350
+ Why Choose <span class="gradient-text">YourHand.co</span>?
351
+ </h2>
352
+ <p class="text-xl text-gray-300 max-w-3xl mx-auto">
353
+ We combine the best of handmade craftsmanship and sustainable food practices in one platform.
354
+ </p>
355
+ </div>
356
+
357
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
358
+ <div class="bg-gray-700 p-6 rounded-xl text-center">
359
+ <div class="w-16 h-16 bg-primary-500 bg-opacity-20 rounded-full flex items-center justify-center mx-auto mb-4">
360
+ <i data-feather="shopping-bag" class="w-8 h-8 text-primary-500"></i>
361
+ </div>
362
+ <h3 class="text-xl font-bold mb-2">Unique Handmade Items</h3>
363
+ <p class="text-gray-400">
364
+ Discover one-of-a-kind pieces crafted with love and care by talented artisans worldwide.
365
+ </p>
366
+ </div>
367
+
368
+ <div class="bg-gray-700 p-6 rounded-xl text-center">
369
+ <div class="w-16 h-16 bg-primary-500 bg-opacity-20 rounded-full flex items-center justify-center mx-auto mb-4">
370
+ <i data-feather="heart" class="w-8 h-8 text-primary-500"></i>
371
+ </div>
372
+ <h3 class="text-xl font-bold mb-2">Support Small Businesses</h3>
373
+ <p class="text-gray-400">
374
+ Your purchases directly support independent creators and their small businesses.
375
+ </p>
376
+ </div>
377
+
378
+ <div class="bg-gray-700 p-6 rounded-xl text-center">
379
+ <div class="w-16 h-16 bg-primary-500 bg-opacity-20 rounded-full flex items-center justify-center mx-auto mb-4">
380
+ <i data-feather="globe" class="w-8 h-8 text-primary-500"></i>
381
+ </div>
382
+ <h3 class="text-xl font-bold mb-2">Reduce Food Waste</h3>
383
+ <p class="text-gray-400">
384
+ Rescue delicious food at discounted prices while helping the environment.
385
+ </p>
386
+ </div>
387
+ </div>
388
+ </div>
389
+ </section>
390
+
391
+ <!-- Testimonials -->
392
+ <section class="py-16 px-4 bg-gray-900">
393
+ <div class="max-w-7xl mx-auto">
394
+ <h2 class="text-3xl font-bold text-center mb-16">
395
+ What Our <span class="gradient-text">Community</span> Says
396
+ </h2>
397
+
398
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
399
+ <div class="bg-gray-800 p-6 rounded-xl">
400
+ <div class="flex items-center mb-4">
401
+ <div class="w-12 h-12 rounded-full overflow-hidden mr-4">
402
+ <img src="http://static.photos/people/200x200/5" alt="User" class="w-full h-full object-cover">
403
+ </div>
404
+ <div>
405
+ <h4 class="font-bold">Jamie L.</h4>
406
+ <div class="flex items-center text-yellow-400">
407
+ <i data-feather="star" class="w-4 h-4 fill-current"></i>
408
+ <i data-feather="star" class="w-4 h-4 fill-current"></i>
409
+ <i data-feather="star" class="w-4 h-4 fill-current"></i>
410
+ <i data-feather="star" class="w-4 h-4 fill-current"></i>
411
+ <i data-feather="star" class="w-4 h-4 fill-current"></i>
412
+ </div>
413
+ </div>
414
+ </div>
415
+ <p class="text-gray-300">
416
+ "I've found the most beautiful handmade jewelry here that I can't find anywhere else. Plus, I love being able to rescue food from my favorite cafes!"
417
+ </p>
418
+ </div>
419
+
420
+ <div class="bg-gray-800 p-6 rounded-xl">
421
+ <div class="flex items-center mb-4">
422
+ <div class="w-12 h-12 rounded-full overflow-hidden mr-4">
423
+ <img src="http://static.photos/people/200x200/6" alt="User" class="w-full h-full object-cover">
424
+ </div>
425
+ <div>
426
+ <h4 class="font-bold">Marcus T.</h4>
427
+ <div class="flex items-center text-yellow-400">
428
+ <i data-feather="star" class="w-4 h-4 fill-current"></i>
429
+ <i data-feather="star" class="w-4 h-4 fill-current"></i>
430
+ <i data-feather="star" class="w-4 h-4 fill-current"></i>
431
+ <i data-feather="star" class="w-4 h-4 fill-current"></i>
432
+ <i data-feather="star" class="w-4 h-4 fill-current"></i>
433
+ </div>
434
+ </div>
435
+ </div>
436
+ <p class="text-gray-300">
437
+ "As a small business owner, YourHand.co has given me the perfect platform to showcase my woodworking. The community is amazing and sales have been great!"
438
+ </p>
439
+ </div>
440
+
441
+ <div class="bg-gray-800 p-6 rounded-xl">
442
+ <div class="flex items-center mb-4">
443
+ <div class="w-12 h-12 rounded-full overflow-hidden mr-4">
444
+ <img src="http://static.photos/people/200x200/7" alt="User" class="w-full h-full object-cover">
445
+ </div>
446
+ <div>
447
+ <h4 class="font-bold">Sophia K.</h4>
448
+ <div class="flex items-center text-yellow-400">
449
+ <i data-feather="star" class="w-4 h-4 fill-current"></i>
450
+ <i data-feather="star" class="w-4 h-4 fill-current"></i>
451
+ <i data-feather="star" class="w-4 h-4 fill-current"></i>
452
+ <i data-feather="star" class="w-4 h-4 fill-current"></i>
453
+ <i data-feather="star" class="w-4 h-4"></i>
454
+ </div>
455
+ </div>
456
+ </div>
457
+ <p class="text-gray-300">
458
+ "The food rescue program has saved me so much money on lunches! I get high-quality meals for a fraction of the price while reducing waste. Win-win!"
459
+ </p>
460
+ </div>
461
+ </div>
462
+ </div>
463
+ </section>
464
+
465
+ <!-- CTA Section -->
466
+ <section class="py-20 px-4 bg-gradient-to-r from-gray-800 to-gray-900">
467
+ <div class="max-w-4xl mx-auto text-center">
468
+ <h2 class="text-3xl md:text-5xl font-bold mb-6">
469
+ Ready to Join the <span class="gradient-text">YourHand.co</span> Community?
470
+ </h2>
471
+ <p class="text-xl text-gray-300 mb-10">
472
+ Whether you're looking for unique handmade items or want to rescue delicious food while saving money, we've got you covered.
473
+ </p>
474
+ <div class="flex flex-col sm:flex-row justify-center gap-4">
475
+ <a href="#" class="bg-primary-500 hover:bg-primary-600 text-white font-bold py-3 px-8 rounded-full transition transform hover:scale-105">
476
+ Shop Now
477
+ </a>
478
+ <a href="#" class="bg-gray-700 hover:bg-gray-600 text-white font-bold py-3 px-8 rounded-full transition transform hover:scale-105">
479
+ Become a Seller
480
+ </a>
481
+ </div>
482
+ </div>
483
+ </section>
484
+
485
+ <!-- Footer -->
486
+ <footer class="bg-gray-900 border-t border-gray-800 py-12 px-4 relative z-10">
487
+ <div class="max-w-7xl mx-auto">
488
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
489
+ <div>
490
+ <div class="flex items-center space-x-2 mb-4">
491
+ <i data-feather="hand" class="text-primary-500 w-8 h-8"></i>
492
+ <span class="text-2xl font-bold gradient-text">YourHand.co</span>
493
+ </div>
494
+ <p class="text-gray-400 mb-4">
495
+ Where handmade meets sustainability. Supporting artisans and reducing food waste.
496
+ </p>
497
+ <div class="flex space-x-4">
498
+ <a href="#" class="text-gray-400 hover:text-primary-500 transition">
499
+ <i data-feather="facebook" class="w-5 h-5"></i>
500
+ </a>
501
+ <a href="#" class="text-gray-400 hover:text-primary-500 transition">
502
+ <i data-feather="instagram" class="w-5 h-5"></i>
503
+ </a>
504
+ <a href="#" class="text-gray-400 hover:text-primary-500 transition">
505
+ <i data-feather="twitter" class="w-5 h-5"></i>
506
+ </a>
507
+ <a href="#" class="text-gray-400 hover:text-primary-500 transition">
508
+ <i data-feather="youtube" class="w-5 h-5"></i>
509
+ </a>
510
+ </div>
511
+ </div>
512
+
513
+ <div>
514
+ <h3 class="text-lg font-bold mb-4">Marketplace</h3>
515
+ <ul class="space-y-2">
516
+ <li><a href="#" class="text-gray-400 hover:text-primary-500 transition">All Categories</a></li>
517
+ <li><a href="#" class="text-gray-400 hover:text-primary-500 transition">New Arrivals</a></li>
518
+ <li><a href="#" class="text-gray-400 hover:text-primary-500 transition">Best Sellers</a></li>
519
+ <li><a href="#" class="text-gray-400 hover:text-primary-500 transition">Gift Ideas</a></li>
520
+ <li><a href="register.html" class="text-gray-400 hover:text-primary-500 transition">Become a Seller</a></li>
521
+ </ul>
522
+ </div>
523
+
524
+ <div>
525
+ <h3 class="text-lg font-bold mb-4">Food Rescue</h3>
526
+ <ul class="space-y-2">
527
+ <li><a href="#" class="text-gray-400 hover:text-primary-500 transition">Nearby Offers</a></li>
528
+ <li><a href="#" class="text-gray-400 hover:text-primary-500 transition">How It Works</a></li>
529
+ <li><a href="#" class="text-gray-400 hover:text-primary-500 transition">For Businesses</a></li>
530
+ <li><a href="#" class="text-gray-400 hover:text-primary-500 transition">Impact</a></li>
531
+ <li><a href="#" class="text-gray-400 hover:text-primary-500 transition">FAQ</a></li>
532
+ </ul>
533
+ </div>
534
+
535
+ <div>
536
+ <h3 class="text-lg font-bold mb-4">Company</h3>
537
+ <ul class="space-y-2">
538
+ <li><a href="#" class="text-gray-400 hover:text-primary-500 transition">About Us</a></li>
539
+ <li><a href="#" class="text-gray-400 hover:text-primary-500 transition">Careers</a></li>
540
+ <li><a href="#" class="text-gray-400 hover:text-primary-500 transition">Blog</a></li>
541
+ <li><a href="#" class="text-gray-400 hover:text-primary-500 transition">Press</a></li>
542
+ <li><a href="#" class="text-gray-400 hover:text-primary-500 transition">Contact</a></li>
543
+ </ul>
544
+ </div>
545
+ </div>
546
+
547
+ <div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
548
+ <p class="text-gray-500 text-sm mb-4 md:mb-0">
549
+ © 2023 YourHand.co. All rights reserved.
550
+ </p>
551
+ <div class="flex space-x-6">
552
+ <a href="#" class="text-gray-500 hover:text-primary-500 text-sm transition">Privacy Policy</a>
553
+ <a href="#" class="text-gray-500 hover:text-primary-500 text-sm transition">Terms of Service</a>
554
+ <a href="#" class="text-gray-500 hover:text-primary-500 text-sm transition">Cookie Policy</a>
555
+ </div>
556
+ </div>
557
+ </div>
558
+ </footer>
559
+
560
+ <script>
561
+ // Toggle dark mode
562
+ const themeToggle = document.getElementById('theme-toggle');
563
+ const html = document.documentElement;
564
+
565
+ themeToggle.addEventListener('click', () => {
566
+ html.classList.toggle('dark');
567
+ const icon = themeToggle.querySelector('i');
568
+ if (html.classList.contains('dark')) {
569
+ icon.setAttribute('data-feather', 'moon');
570
+ } else {
571
+ icon.setAttribute('data-feather', 'sun');
572
+ }
573
+ feather.replace();
574
+ });
575
+ // Initialize feather icons
576
+ feather.replace();
577
+
578
+ // Chat widget
579
+ const chatWidget = document.createElement('div');
580
+ chatWidget.innerHTML = `
581
+ <div class="fixed bottom-6 right-6 z-50">
582
+ <button id="chatToggle" class="w-14 h-14 bg-primary-500 rounded-full shadow-lg flex items-center justify-center text-white hover:bg-primary-600 transition transform hover:scale-110">
583
+ <i data-feather="message-circle" class="w-6 h-6"></i>
584
+ </button>
585
+ <div id="chatWindow" class="hidden absolute bottom-16 right-0 w-80 bg-gray-800 rounded-xl shadow-xl border border-gray-700 overflow-hidden">
586
+ <div class="bg-gray-700 px-4 py-3 flex justify-between items-center border-b border-gray-600">
587
+ <h3 class="font-bold">Chat Support</h3>
588
+ <button id="closeChat" class="text-gray-400 hover:text-white">
589
+ <i data-feather="x" class="w-5 h-5"></i>
590
+ </button>
591
+ </div>
592
+ <div id="chatMessages" class="h-64 overflow-y-auto p-4 space-y-3">
593
+ <div class="bg-gray-700 rounded-lg p-3 text-sm max-w-xs">
594
+ <p>Hello! How can we help you today?</p>
595
+ <span class="text-xs text-gray-400 block mt-1">Just now</span>
596
+ </div>
597
+ </div>
598
+ <div class="border-t border-gray-700 p-3">
599
+ <div class="flex">
600
+ <input type="text" placeholder="Type your message..."
601
+ class="flex-1 bg-gray-700 border border-gray-600 rounded-l-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary-500">
602
+ <button class="bg-primary-500 hover:bg-primary-600 text-white px-4 py-2 rounded-r-lg transition">
603
+ <i data-feather="send" class="w-5 h-5"></i>
604
+ </button>
605
+ </div>
606
+ </div>
607
+ </div>
608
+ </div>
609
+ `;
610
+ document.body.appendChild(chatWidget);
611
+ feather.replace();
612
+
613
+ // Chat functionality
614
+ const chatToggle = document.getElementById('chatToggle');
615
+ const chatWindow = document.getElementById('chatWindow');
616
+ const closeChat = document.getElementById('chatClose');
617
+
618
+ chatToggle.addEventListener('click', () => {
619
+ chatWindow.classList.toggle('hidden');
620
+ feather.replace();
621
+ });
622
+
623
+ closeChat.addEventListener('click', () => {
624
+ chatWindow.classList.add('hidden');
625
+ });
626
+ </script>
627
+ </body>
628
  </html>
login.html ADDED
@@ -0,0 +1,86 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en" class="dark">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Login - CraftyMunch</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
9
+ <style>
10
+ .gradient-text {
11
+ background: linear-gradient(90deg, #d946ef 0%, #a855f7 100%);
12
+ -webkit-background-clip: text;
13
+ background-clip: text;
14
+ color: transparent;
15
+ }
16
+ </style>
17
+ </head>
18
+ <body class="bg-gray-900 text-gray-100 min-h-screen">
19
+ <nav class="bg-gray-800 border-b border-gray-700 px-4 py-3">
20
+ <div class="max-w-7xl mx-auto flex items-center justify-between">
21
+ <div class="flex items-center space-x-2">
22
+ <i data-feather="hand" class="text-primary-500 w-8 h-8"></i>
23
+ <span class="text-2xl font-bold gradient-text">CraftyMunch</span>
24
+ </div>
25
+ <a href="index.html" class="text-primary-500 hover:text-primary-400 transition">
26
+ Back to Home
27
+ </a>
28
+ </div>
29
+ </nav>
30
+
31
+ <section class="max-w-md mx-auto py-16 px-4">
32
+ <div class="bg-gray-800 rounded-xl p-8 shadow-lg">
33
+ <h1 class="text-3xl font-bold mb-6 text-center">Welcome Back</h1>
34
+
35
+ <form id="loginForm" class="space-y-6">
36
+ <div>
37
+ <label for="loginEmail" class="block text-sm font-medium mb-1">Email</label>
38
+ <input type="email" id="loginEmail" name="email" required
39
+ class="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary-500">
40
+ </div>
41
+
42
+ <div>
43
+ <label for="loginPassword" class="block text-sm font-medium mb-1">Password</label>
44
+ <input type="password" id="loginPassword" name="password" required
45
+ class="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary-500">
46
+ </div>
47
+
48
+ <div class="flex items-center justify-between">
49
+ <label class="inline-flex items-center">
50
+ <input type="checkbox" class="text-primary-500 focus:ring-primary-500">
51
+ <span class="ml-2 text-sm">Remember me</span>
52
+ </label>
53
+ <a href="#" class="text-sm text-primary-500 hover:text-primary-400 transition">Forgot password?</a>
54
+ </div>
55
+
56
+ <div class="pt-2">
57
+ <button type="submit"
58
+ class="w-full bg-primary-500 hover:bg-primary-600 text-white font-bold py-3 px-4 rounded-lg transition">
59
+ Log In
60
+ </button>
61
+ </div>
62
+
63
+ <div class="text-center text-sm text-gray-400">
64
+ Don't have an account?
65
+ <a href="register.html" class="text-primary-500 hover:text-primary-400 transition">Sign up</a>
66
+ </div>
67
+ </form>
68
+ </div>
69
+ </section>
70
+
71
+ <script>
72
+ feather.replace();
73
+
74
+ document.getElementById('loginForm').addEventListener('submit', function(e) {
75
+ e.preventDefault();
76
+ // In a real app, you would authenticate with your backend
77
+ alert('Login successful! Redirecting...');
78
+
79
+ // For demo, redirect to home
80
+ setTimeout(() => {
81
+ window.location.href = 'index.html';
82
+ }, 1000);
83
+ });
84
+ </script>
85
+ </body>
86
+ </html>
register.html ADDED
@@ -0,0 +1,119 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en" class="dark">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Register - CraftyMunch</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
9
+ <style>
10
+ .gradient-text {
11
+ background: linear-gradient(90deg, #d946ef 0%, #a855f7 100%);
12
+ -webkit-background-clip: text;
13
+ background-clip: text;
14
+ color: transparent;
15
+ }
16
+ </style>
17
+ </head>
18
+ <body class="bg-gray-900 text-gray-100 min-h-screen">
19
+ <nav class="bg-gray-800 border-b border-gray-700 px-4 py-3">
20
+ <div class="max-w-7xl mx-auto flex items-center justify-between">
21
+ <div class="flex items-center space-x-2">
22
+ <i data-feather="hand" class="text-primary-500 w-8 h-8"></i>
23
+ <span class="text-2xl font-bold gradient-text">CraftyMunch</span>
24
+ </div>
25
+ <a href="index.html" class="text-primary-500 hover:text-primary-400 transition">
26
+ Back to Home
27
+ </a>
28
+ </div>
29
+ </nav>
30
+
31
+ <section class="max-w-md mx-auto py-16 px-4">
32
+ <div class="bg-gray-800 rounded-xl p-8 shadow-lg">
33
+ <h1 class="text-3xl font-bold mb-6 text-center">Create Your Account</h1>
34
+
35
+ <form id="registerForm" class="space-y-6">
36
+ <div class="grid grid-cols-2 gap-4">
37
+ <div>
38
+ <label for="firstName" class="block text-sm font-medium mb-1">First Name</label>
39
+ <input type="text" id="firstName" name="firstName" required
40
+ class="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary-500">
41
+ </div>
42
+ <div>
43
+ <label for="lastName" class="block text-sm font-medium mb-1">Last Name</label>
44
+ <input type="text" id="lastName" name="lastName" required
45
+ class="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary-500">
46
+ </div>
47
+ </div>
48
+
49
+ <div>
50
+ <label for="email" class="block text-sm font-medium mb-1">Email</label>
51
+ <input type="email" id="email" name="email" required
52
+ class="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary-500">
53
+ </div>
54
+
55
+ <div>
56
+ <label for="password" class="block text-sm font-medium mb-1">Password</label>
57
+ <input type="password" id="password" name="password" required
58
+ class="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary-500">
59
+ </div>
60
+
61
+ <div>
62
+ <label for="confirmPassword" class="block text-sm font-medium mb-1">Confirm Password</label>
63
+ <input type="password" id="confirmPassword" name="confirmPassword" required
64
+ class="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary-500">
65
+ </div>
66
+
67
+ <div class="pt-2">
68
+ <label class="inline-flex items-center">
69
+ <input type="radio" name="accountType" value="buyer" checked
70
+ class="text-primary-500 focus:ring-primary-500">
71
+ <span class="ml-2">I'm a Buyer</span>
72
+ </label>
73
+ <label class="inline-flex items-center ml-6">
74
+ <input type="radio" name="accountType" value="seller"
75
+ class="text-primary-500 focus:ring-primary-500">
76
+ <span class="ml-2">I'm a Seller</span>
77
+ </label>
78
+ </div>
79
+
80
+ <div class="pt-4">
81
+ <button type="submit"
82
+ class="w-full bg-primary-500 hover:bg-primary-600 text-white font-bold py-3 px-4 rounded-lg transition">
83
+ Create Account
84
+ </button>
85
+ </div>
86
+
87
+ <div class="text-center text-sm text-gray-400">
88
+ Already have an account?
89
+ <a href="login.html" class="text-primary-500 hover:text-primary-400 transition">Log in</a>
90
+ </div>
91
+ </form>
92
+ </div>
93
+ </section>
94
+
95
+ <script>
96
+ feather.replace();
97
+
98
+ document.getElementById('registerForm').addEventListener('submit', function(e) {
99
+ e.preventDefault();
100
+ const password = document.getElementById('password').value;
101
+ const confirmPassword = document.getElementById('confirmPassword').value;
102
+
103
+ if (password !== confirmPassword) {
104
+ alert('Passwords do not match!');
105
+ return;
106
+ }
107
+
108
+ // In a real app, you would send this data to your backend
109
+ const accountType = document.querySelector('input[name="accountType"]:checked').value;
110
+ alert(`Registration successful! Account type: ${accountType}. Redirecting...`);
111
+
112
+ // Redirect based on account type
113
+ setTimeout(() => {
114
+ window.location.href = accountType === 'seller' ? 'seller-dashboard.html' : 'index.html';
115
+ }, 1500);
116
+ });
117
+ </script>
118
+ </body>
119
+ </html>
seller-dashboard.html ADDED
@@ -0,0 +1,305 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en" class="dark">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Seller Dashboard - CraftyMunch</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
9
+ <style>
10
+ .gradient-text {
11
+ background: linear-gradient(90deg, #d946ef 0%, #a855f7 100%);
12
+ -webkit-background-clip: text;
13
+ background-clip: text;
14
+ color: transparent;
15
+ }
16
+ .card-hover:hover {
17
+ transform: translateY(-5px);
18
+ box-shadow: 0 25px 50px -12px rgba(216, 70, 239, 0.25);
19
+ }
20
+ </style>
21
+ </head>
22
+ <body class="bg-gray-900 text-gray-100 min-h-screen">
23
+ <nav class="bg-gray-800 border-b border-gray-700 px-4 py-3">
24
+ <div class="max-w-7xl mx-auto flex items-center justify-between">
25
+ <div class="flex items-center space-x-2">
26
+ <i data-feather="hand" class="text-primary-500 w-8 h-8"></i>
27
+ <span class="text-2xl font-bold gradient-text">CraftyMunch</span>
28
+ </div>
29
+ <div class="flex items-center space-x-4">
30
+ <button class="p-2 rounded-full hover:bg-gray-700 transition">
31
+ <i data-feather="bell" class="w-5 h-5"></i>
32
+ </button>
33
+ <button class="p-2 rounded-full hover:bg-gray-700 transition">
34
+ <i data-feather="message-circle" class="w-5 h-5"></i>
35
+ </button>
36
+ <button id="logoutBtn" class="bg-gray-700 hover:bg-gray-600 text-white font-bold py-2 px-4 rounded-lg transition">
37
+ Log Out
38
+ </button>
39
+ </div>
40
+ </div>
41
+ </nav>
42
+
43
+ <div class="max-w-7xl mx-auto px-4 py-8">
44
+ <div class="flex flex-col md:flex-row gap-8">
45
+ <!-- Sidebar -->
46
+ <div class="w-full md:w-64 bg-gray-800 rounded-xl p-6">
47
+ <div class="flex items-center space-x-3 mb-8">
48
+ <div class="w-12 h-12 rounded-full bg-primary-500 bg-opacity-20 flex items-center justify-center">
49
+ <i data-feather="user" class="text-primary-500"></i>
50
+ </div>
51
+ <div>
52
+ <h3 class="font-bold">Seller Name</h3>
53
+ <p class="text-xs text-gray-400">Premium Seller</p>
54
+ </div>
55
+ </div>
56
+
57
+ <nav class="space-y-2">
58
+ <a href="seller-dashboard.html" class="flex items-center space-x-3 px-3 py-2 bg-gray-700 rounded-lg text-primary-500">
59
+ <i data-feather="home" class="w-5 h-5"></i>
60
+ <span>Dashboard</span>
61
+ </a>
62
+ <a href="#" class="flex items-center space-x-3 px-3 py-2 hover:bg-gray-700 rounded-lg transition">
63
+ <i data-feather="shopping-bag" class="w-5 h-5"></i>
64
+ <span>Products</span>
65
+ </a>
66
+ <a href="#" class="flex items-center space-x-3 px-3 py-2 hover:bg-gray-700 rounded-lg transition">
67
+ <i data-feather="dollar-sign" class="w-5 h-5"></i>
68
+ <span>Orders</span>
69
+ </a>
70
+ <a href="#" class="flex items-center space-x-3 px-3 py-2 hover:bg-gray-700 rounded-lg transition">
71
+ <i data-feather="message-circle" class="w-5 h-5"></i>
72
+ <span>Messages</span>
73
+ </a>
74
+ <a href="#" class="flex items-center space-x-3 px-3 py-2 hover:bg-gray-700 rounded-lg transition">
75
+ <i data-feather="bar-chart-2" class="w-5 h-5"></i>
76
+ <span>Analytics</span>
77
+ </a>
78
+ <a href="#" class="flex items-center space-x-3 px-3 py-2 hover:bg-gray-700 rounded-lg transition">
79
+ <i data-feather="settings" class="w-5 h-5"></i>
80
+ <span>Settings</span>
81
+ </a>
82
+ </nav>
83
+ </div>
84
+
85
+ <!-- Main Content -->
86
+ <div class="flex-1">
87
+ <div class="bg-gray-800 rounded-xl p-6 mb-6">
88
+ <div class="flex items-center justify-between mb-6">
89
+ <h2 class="text-2xl font-bold">Add New Product</h2>
90
+ <button id="toggleFormBtn" class="text-primary-500 hover:text-primary-400 transition">
91
+ <i data-feather="plus" class="w-5 h-5"></i>
92
+ </button>
93
+ </div>
94
+
95
+ <form id="productForm" class="hidden space-y-6">
96
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
97
+ <div>
98
+ <label class="block text-sm font-medium mb-1">Product Images</label>
99
+ <div class="border-2 border-dashed border-gray-600 rounded-lg p-4 text-center">
100
+ <div class="flex flex-col items-center justify-center py-8">
101
+ <i data-feather="upload" class="w-10 h-10 text-gray-400 mb-3"></i>
102
+ <p class="text-gray-400 mb-2">Drag & drop images here</p>
103
+ <p class="text-gray-500 text-sm">or</p>
104
+ <input type="file" id="productImages" accept="image/*" multiple class="hidden">
105
+ <button type="button" onclick="document.getElementById('productImages').click()"
106
+ class="mt-3 bg-gray-700 hover:bg-gray-600 text-white font-medium py-2 px-4 rounded-lg transition">
107
+ Select from device
108
+ </button>
109
+ </div>
110
+ <div id="imagePreview" class="grid grid-cols-3 gap-2 mt-4 hidden">
111
+ <!-- Image previews will appear here -->
112
+ </div>
113
+ </div>
114
+ </div>
115
+
116
+ <div class="space-y-6">
117
+ <div>
118
+ <label for="productName" class="block text-sm font-medium mb-1">Product Name</label>
119
+ <input type="text" id="productName" required
120
+ class="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary-500">
121
+ </div>
122
+
123
+ <div>
124
+ <label for="productPrice" class="block text-sm font-medium mb-1">Price ($)</label>
125
+ <input type="number" id="productPrice" min="0" step="0.01" required
126
+ class="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary-500">
127
+ </div>
128
+
129
+ <div>
130
+ <label for="productCategory" class="block text-sm font-medium mb-1">Category</label>
131
+ <select id="productCategory"
132
+ class="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary-500">
133
+ <option>Home Decor</option>
134
+ <option>Jewelry</option>
135
+ <option>Clothing</option>
136
+ <option>Art</option>
137
+ <option>Craft Supplies</option>
138
+ </select>
139
+ </div>
140
+ </div>
141
+ </div>
142
+
143
+ <div>
144
+ <label for="productDescription" class="block text-sm font-medium mb-1">Description</label>
145
+ <textarea id="productDescription" rows="4"
146
+ class="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary-500"></textarea>
147
+ </div>
148
+
149
+ <div class="flex justify-end space-x-3 pt-2">
150
+ <button type="button" id="cancelFormBtn"
151
+ class="bg-gray-700 hover:bg-gray-600 text-white font-medium py-2 px-6 rounded-lg transition">
152
+ Cancel
153
+ </button>
154
+ <button type="submit"
155
+ class="bg-primary-500 hover:bg-primary-600 text-white font-medium py-2 px-6 rounded-lg transition">
156
+ Save Product
157
+ </button>
158
+ </div>
159
+ </form>
160
+ </div>
161
+
162
+ <div class="bg-gray-800 rounded-xl p-6">
163
+ <h2 class="text-2xl font-bold mb-6">Your Products</h2>
164
+
165
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
166
+ <!-- Product 1 -->
167
+ <div class="bg-gray-700 rounded-xl overflow-hidden shadow-lg transition duration-300 card-hover">
168
+ <div class="relative h-48 overflow-hidden">
169
+ <img src="http://static.photos/craft/640x360/10" alt="Product" class="w-full h-full object-cover">
170
+ <div class="absolute top-2 right-2 flex space-x-1">
171
+ <button class="p-1 bg-gray-900 bg-opacity-70 rounded-full text-primary-500 hover:text-primary-400 transition">
172
+ <i data-feather="edit" class="w-4 h-4"></i>
173
+ </button>
174
+ <button class="p-1 bg-gray-900 bg-opacity-70 rounded-full text-red-500 hover:text-red-400 transition">
175
+ <i data-feather="trash-2" class="w-4 h-4"></i>
176
+ </button>
177
+ </div>
178
+ </div>
179
+ <div class="p-4">
180
+ <h3 class="font-bold mb-1">Handmade Ceramic Mug</h3>
181
+ <div class="flex items-center justify-between">
182
+ <span class="text-primary-500 font-bold">$28.00</span>
183
+ <div class="text-yellow-400">
184
+ <i data-feather="star" class="w-4 h-4 fill-current"></i>
185
+ <span class="text-gray-400 ml-1">4.8 (56)</span>
186
+ </div>
187
+ </div>
188
+ <div class="mt-3 flex justify-between items-center">
189
+ <span class="text-sm text-gray-400">5 in stock</span>
190
+ <button class="text-gray-400 hover:text-primary-500 transition">
191
+ <i data-feather="message-circle" class="w-5 h-5"></i>
192
+ </button>
193
+ </div>
194
+ </div>
195
+ </div>
196
+
197
+ <!-- Product 2 -->
198
+ <div class="bg-gray-700 rounded-xl overflow-hidden shadow-lg transition duration-300 card-hover">
199
+ <div class="relative h-48 overflow-hidden">
200
+ <img src="http://static.photos/craft/640x360/11" alt="Product" class="w-full h-full object-cover">
201
+ <div class="absolute top-2 right-2 flex space-x-1">
202
+ <button class="p-1 bg-gray-900 bg-opacity-70 rounded-full text-primary-500 hover:text-primary-400 transition">
203
+ <i data-feather="edit" class="w-4 h-4"></i>
204
+ </button>
205
+ <button class="p-1 bg-gray-900 bg-opacity-70 rounded-full text-red-500 hover:text-red-400 transition">
206
+ <i data-feather="trash-2" class="w-4 h-4"></i>
207
+ </button>
208
+ </div>
209
+ </div>
210
+ <div class="p-4">
211
+ <h3 class="font-bold mb-1">Macrame Wall Hanging</h3>
212
+ <div class="flex items-center justify-between">
213
+ <span class="text-primary-500 font-bold">$45.00</span>
214
+ <div class="text-yellow-400">
215
+ <i data-feather="star" class="w-4 h-4 fill-current"></i>
216
+ <span class="text-gray-400 ml-1">4.7 (24)</span>
217
+ </div>
218
+ </div>
219
+ <div class="mt-3 flex justify-between items-center">
220
+ <span class="text-sm text-gray-400">2 in stock</span>
221
+ <button class="text-gray-400 hover:text-primary-500 transition">
222
+ <i data-feather="message-circle" class="w-5 h-5"></i>
223
+ </button>
224
+ </div>
225
+ </div>
226
+ </div>
227
+
228
+ <!-- Empty State -->
229
+ <div class="bg-gray-700 rounded-xl overflow-hidden shadow-lg transition duration-300 border-2 border-dashed border-gray-600 flex flex-col items-center justify-center p-8 text-center">
230
+ <i data-feather="plus-circle" class="w-10 h-10 text-gray-400 mb-4"></i>
231
+ <h3 class="font-bold mb-1">Add New Product</h3>
232
+ <p class="text-gray-400 text-sm mb-4">Start selling your handmade items today</p>
233
+ <button id="addProductBtn" class="bg-primary-500 hover:bg-primary-600 text-white font-medium py-2 px-4 rounded-lg transition">
234
+ Add Product
235
+ </button>
236
+ </div>
237
+ </div>
238
+ </div>
239
+ </div>
240
+ </div>
241
+ </div>
242
+
243
+ <script>
244
+ feather.replace();
245
+
246
+ // Toggle product form
247
+ const toggleFormBtn = document.getElementById('toggleFormBtn');
248
+ const addProductBtn = document.getElementById('addProductBtn');
249
+ const productForm = document.getElementById('productForm');
250
+ const cancelFormBtn = document.getElementById('cancelFormBtn');
251
+
252
+ function toggleForm() {
253
+ productForm.classList.toggle('hidden');
254
+ if (!productForm.classList.contains('hidden')) {
255
+ productForm.scrollIntoView({ behavior: 'smooth' });
256
+ }
257
+ }
258
+
259
+ toggleFormBtn.addEventListener('click', toggleForm);
260
+ addProductBtn.addEventListener('click', toggleForm);
261
+ cancelFormBtn.addEventListener('click', toggleForm);
262
+
263
+ // Image upload preview
264
+ const productImages = document.getElementById('productImages');
265
+ const imagePreview = document.getElementById('imagePreview');
266
+
267
+ productImages.addEventListener('change', function(e) {
268
+ imagePreview.innerHTML = '';
269
+ imagePreview.classList.remove('hidden');
270
+
271
+ const files = e.target.files;
272
+ for (let i = 0; i < files.length; i++) {
273
+ const file = files[i];
274
+ if (!file.type.match('image.*')) continue;
275
+
276
+ const reader = new FileReader();
277
+ reader.onload = function(e) {
278
+ const img = document.createElement('img');
279
+ img.src = e.target.result;
280
+ img.classList.add('w-full', 'h-24', 'object-cover', 'rounded');
281
+ imagePreview.appendChild(img);
282
+ }
283
+ reader.readAsDataURL(file);
284
+ }
285
+ });
286
+
287
+ // Form submission
288
+ productForm.addEventListener('submit', function(e) {
289
+ e.preventDefault();
290
+ alert('Product saved successfully!');
291
+ productForm.reset();
292
+ imagePreview.innerHTML = '';
293
+ imagePreview.classList.add('hidden');
294
+ productForm.classList.add('hidden');
295
+ });
296
+
297
+ // Logout
298
+ document.getElementById('logoutBtn').addEventListener('click', function() {
299
+ if (confirm('Are you sure you want to log out?')) {
300
+ window.location.href = 'index.html';
301
+ }
302
+ });
303
+ </script>
304
+ </body>
305
+ </html>