Hugging Face's logo

Spaces:
ajitbilLINORE121
/
anycoder-9a7714a2
Running

App Files Community
ajitbilLINORE121 commited on
Commit
23638ae
·
verified ·
1 Parent(s): 99f4cb8

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +980 -19
index.html CHANGED
@@ -1,19 +1,980 @@
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>GYNX TRADE - Global Wholesale & Retail Platform</title>
7
+ <!-- FontAwesome for Icons -->
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <!-- Google Fonts -->
10
+ <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
11
+
12
+ <style>
13
+ :root {
14
+ /* Palette: Dark Mode with Gold Accents (Premium Trade Look) */
15
+ --bg-dark: #0f1115;
16
+ --bg-card: #1a1d24;
17
+ --bg-card-hover: #232730;
18
+ --primary: #D4AF37; /* Gold */
19
+ --primary-glow: rgba(212, 175, 55, 0.4);
20
+ --accent: #00bcd4; /* Cyan for Tech/Banking feel */
21
+ --text-main: #ffffff;
22
+ --text-muted: #a0a3b1;
23
+ --success: #00e676;
24
+ --danger: #ff5252;
25
+ --border: #2c3038;
26
+ --radius: 12px;
27
+ --shadow: 0 10px 30px rgba(0,0,0,0.5);
28
+ --font-main: 'Outfit', sans-serif;
29
+ --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
30
+ }
31
+
32
+ * {
33
+ box-sizing: border-box;
34
+ margin: 0;
35
+ padding: 0;
36
+ outline: none;
37
+ }
38
+
39
+ body {
40
+ font-family: var(--font-main);
41
+ background-color: var(--bg-dark);
42
+ color: var(--text-main);
43
+ overflow-x: hidden;
44
+ line-height: 1.6;
45
+ }
46
+
47
+ /* --- Scrollbar --- */
48
+ ::-webkit-scrollbar {
49
+ width: 8px;
50
+ }
51
+ ::-webkit-scrollbar-track {
52
+ background: var(--bg-dark);
53
+ }
54
+ ::-webkit-scrollbar-thumb {
55
+ background: var(--border);
56
+ border-radius: 4px;
57
+ }
58
+ ::-webkit-scrollbar-thumb:hover {
59
+ background: var(--primary);
60
+ }
61
+
62
+ /* --- Animations --- */
63
+ @keyframes fadeIn {
64
+ from { opacity: 0; transform: translateY(20px); }
65
+ to { opacity: 1; transform: translateY(0); }
66
+ }
67
+
68
+ @keyframes pulseGold {
69
+ 0% { box-shadow: 0 0 0 0 var(--primary-glow); }
70
+ 70% { box-shadow: 0 0 0 10px rgba(0,0,0,0); }
71
+ 100% { box-shadow: 0 0 0 0 rgba(0,0,0,0); }
72
+ }
73
+
74
+ @keyframes slideInRight {
75
+ from { transform: translateX(100%); }
76
+ to { transform: translateX(0); }
77
+ }
78
+
79
+ /* --- Header --- */
80
+ header {
81
+ position: sticky;
82
+ top: 0;
83
+ z-index: 1000;
84
+ background: rgba(15, 17, 21, 0.9);
85
+ backdrop-filter: blur(12px);
86
+ border-bottom: 1px solid var(--border);
87
+ padding: 1rem 2rem;
88
+ display: flex;
89
+ justify-content: space-between;
90
+ align-items: center;
91
+ }
92
+
93
+ .logo {
94
+ font-size: 1.8rem;
95
+ font-weight: 800;
96
+ color: var(--text-main);
97
+ display: flex;
98
+ align-items: center;
99
+ gap: 10px;
100
+ text-decoration: none;
101
+ }
102
+
103
+ .logo span {
104
+ color: var(--primary);
105
+ }
106
+
107
+ .logo i {
108
+ font-size: 1.5rem;
109
+ color: var(--primary);
110
+ }
111
+
112
+ .nav-links {
113
+ display: flex;
114
+ gap: 2rem;
115
+ }
116
+
117
+ .nav-links a {
118
+ color: var(--text-muted);
119
+ text-decoration: none;
120
+ font-weight: 500;
121
+ transition: var(--transition);
122
+ position: relative;
123
+ }
124
+
125
+ .nav-links a:hover, .nav-links a.active {
126
+ color: var(--primary);
127
+ }
128
+
129
+ .nav-links a::after {
130
+ content: '';
131
+ position: absolute;
132
+ bottom: -5px;
133
+ left: 0;
134
+ width: 0;
135
+ height: 2px;
136
+ background: var(--primary);
137
+ transition: var(--transition);
138
+ }
139
+
140
+ .nav-links a:hover::after {
141
+ width: 100%;
142
+ }
143
+
144
+ .header-actions {
145
+ display: flex;
146
+ gap: 1rem;
147
+ }
148
+
149
+ .btn {
150
+ padding: 0.6rem 1.2rem;
151
+ border-radius: 50px;
152
+ border: none;
153
+ cursor: pointer;
154
+ font-weight: 600;
155
+ font-family: inherit;
156
+ transition: var(--transition);
157
+ display: flex;
158
+ align-items: center;
159
+ gap: 8px;
160
+ text-decoration: none;
161
+ }
162
+
163
+ .btn-outline {
164
+ background: transparent;
165
+ border: 1px solid var(--border);
166
+ color: var(--text-main);
167
+ }
168
+
169
+ .btn-outline:hover {
170
+ border-color: var(--primary);
171
+ color: var(--primary);
172
+ }
173
+
174
+ .btn-primary {
175
+ background: linear-gradient(135deg, var(--primary), #b8860b);
176
+ color: #000;
177
+ box-shadow: 0 4px 15px var(--primary-glow);
178
+ }
179
+
180
+ .btn-primary:hover {
181
+ transform: translateY(-2px);
182
+ box-shadow: 0 6px 20px var(--primary-glow);
183
+ }
184
+
185
+ .btn-block {
186
+ width: 100%;
187
+ justify-content: center;
188
+ }
189
+
190
+ /* --- Hero Section --- */
191
+ .hero {
192
+ padding: 4rem 2rem;
193
+ text-align: center;
194
+ background: radial-gradient(circle at center, rgba(212, 175, 55, 0.1) 0%, transparent 70%);
195
+ position: relative;
196
+ overflow: hidden;
197
+ }
198
+
199
+ .hero::before {
200
+ content: '';
201
+ position: absolute;
202
+ top: 0;
203
+ left: 0;
204
+ width: 100%;
205
+ height: 100%;
206
+ background: url('https://www.transparenttextures.com/patterns/cubes.png');
207
+ opacity: 0.05;
208
+ pointer-events: none;
209
+ }
210
+
211
+ .hero h1 {
212
+ font-size: 3.5rem;
213
+ margin-bottom: 1rem;
214
+ line-height: 1.1;
215
+ }
216
+
217
+ .hero h1 span {
218
+ background: linear-gradient(to right, var(--primary), var(--accent));
219
+ -webkit-background-clip: text;
220
+ -webkit-text-fill-color: transparent;
221
+ }
222
+
223
+ .hero p {
224
+ font-size: 1.2rem;
225
+ color: var(--text-muted);
226
+ max-width: 600px;
227
+ margin: 0 auto 2.5rem;
228
+ }
229
+
230
+ .hero-stats {
231
+ display: flex;
232
+ justify-content: center;
233
+ gap: 3rem;
234
+ margin-top: 3rem;
235
+ flex-wrap: wrap;
236
+ }
237
+
238
+ .stat-item h3 {
239
+ font-size: 2rem;
240
+ color: var(--text-main);
241
+ }
242
+
243
+ .stat-item p {
244
+ font-size: 0.9rem;
245
+ margin: 0;
246
+ text-transform: uppercase;
247
+ letter-spacing: 1px;
248
+ }
249
+
250
+ /* --- Banking System Integration Banner --- */
251
+ .banking-banner {
252
+ background: linear-gradient(90deg, #1a1d24, #0f1115);
253
+ border: 1px solid var(--border);
254
+ border-radius: var(--radius);
255
+ padding: 1.5rem;
256
+ display: flex;
257
+ align-items: center;
258
+ justify-content: space-between;
259
+ margin: 2rem auto;
260
+ max-width: 1200px;
261
+ position: relative;
262
+ overflow: hidden;
263
+ }
264
+
265
+ .banking-banner::after {
266
+ content: '';
267
+ position: absolute;
268
+ right: 0;
269
+ top: 0;
270
+ height: 100%;
271
+ width: 5px;
272
+ background: var(--accent);
273
+ box-shadow: 0 0 15px var(--accent);
274
+ }
275
+
276
+ .banking-info h2 {
277
+ font-size: 1.5rem;
278
+ margin-bottom: 0.5rem;
279
+ display: flex;
280
+ align-items: center;
281
+ gap: 10px;
282
+ }
283
+
284
+ .banking-info p {
285
+ color: var(--text-muted);
286
+ font-size: 0.95rem;
287
+ }
288
+
289
+ .bank-icons {
290
+ display: flex;
291
+ gap: 1rem;
292
+ }
293
+
294
+ .bank-icon {
295
+ width: 50px;
296
+ height: 50px;
297
+ background: var(--bg-card);
298
+ border-radius: 50%;
299
+ display: flex;
300
+ align-items: center;
301
+ justify-content: center;
302
+ color: var(--accent);
303
+ font-size: 1.5rem;
304
+ border: 1px solid var(--border);
305
+ transition: var(--transition);
306
+ }
307
+
308
+ .bank-icon:hover {
309
+ border-color: var(--accent);
310
+ background: var(--accent);
311
+ color: #fff;
312
+ }
313
+
314
+ /* --- Marketplace Grid --- */
315
+ .container {
316
+ max-width: 1400px;
317
+ margin: 0 auto;
318
+ padding: 2rem;
319
+ }
320
+
321
+ .section-header {
322
+ display: flex;
323
+ justify-content: space-between;
324
+ align-items: flex-end;
325
+ margin-bottom: 2rem;
326
+ flex-wrap: wrap;
327
+ gap: 1rem;
328
+ }
329
+
330
+ .section-title h2 {
331
+ font-size: 2rem;
332
+ margin-bottom: 0.5rem;
333
+ }
334
+
335
+ .section-title p {
336
+ color: var(--text-muted);
337
+ }
338
+
339
+ .filters {
340
+ display: flex;
341
+ gap: 1rem;
342
+ background: var(--bg-card);
343
+ padding: 0.5rem;
344
+ border-radius: 50px;
345
+ border: 1px solid var(--border);
346
+ }
347
+
348
+ .filter-btn {
349
+ background: none;
350
+ border: none;
351
+ color: var(--text-muted);
352
+ padding: 0.5rem 1.2rem;
353
+ border-radius: 40px;
354
+ cursor: pointer;
355
+ transition: var(--transition);
356
+ font-family: inherit;
357
+ font-weight: 500;
358
+ }
359
+
360
+ .filter-btn.active, .filter-btn:hover {
361
+ background: var(--border);
362
+ color: var(--text-main);
363
+ }
364
+
365
+ .products-grid {
366
+ display: grid;
367
+ grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
368
+ gap: 2rem;
369
+ }
370
+
371
+ .product-card {
372
+ background: var(--bg-card);
373
+ border-radius: var(--radius);
374
+ overflow: hidden;
375
+ border: 1px solid var(--border);
376
+ transition: var(--transition);
377
+ position: relative;
378
+ display: flex;
379
+ flex-direction: column;
380
+ }
381
+
382
+ .product-card:hover {
383
+ transform: translateY(-8px);
384
+ border-color: var(--primary);
385
+ box-shadow: 0 10px 30px rgba(0,0,0,0.3);
386
+ }
387
+
388
+ .badge-ad {
389
+ position: absolute;
390
+ top: 10px;
391
+ left: 10px;
392
+ background: linear-gradient(135deg, #ff9800, #ff5722);
393
+ color: white;
394
+ padding: 4px 10px;
395
+ border-radius: 4px;
396
+ font-size: 0.75rem;
397
+ font-weight: 700;
398
+ z-index: 2;
399
+ box-shadow: 0 2px 10px rgba(255, 87, 34, 0.4);
400
+ }
401
+
402
+ .product-image {
403
+ width: 100%;
404
+ height: 200px;
405
+ object-fit: cover;
406
+ background: #2a2e35;
407
+ }
408
+
409
+ .product-info {
410
+ padding: 1.5rem;
411
+ flex-grow: 1;
412
+ display: flex;
413
+ flex-direction: column;
414
+ }
415
+
416
+ .product-category {
417
+ font-size: 0.8rem;
418
+ color: var(--primary);
419
+ text-transform: uppercase;
420
+ letter-spacing: 1px;
421
+ margin-bottom: 0.5rem;
422
+ }
423
+
424
+ .product-title {
425
+ font-size: 1.1rem;
426
+ font-weight: 600;
427
+ margin-bottom: 0.5rem;
428
+ line-height: 1.4;
429
+ }
430
+
431
+ .product-meta {
432
+ display: flex;
433
+ justify-content: space-between;
434
+ font-size: 0.9rem;
435
+ color: var(--text-muted);
436
+ margin-bottom: 1rem;
437
+ }
438
+
439
+ .product-price {
440
+ font-size: 1.4rem;
441
+ font-weight: 700;
442
+ color: var(--text-main);
443
+ margin-top: auto;
444
+ margin-bottom: 1rem;
445
+ }
446
+
447
+ .product-actions {
448
+ display: grid;
449
+ grid-template-columns: 1fr 1fr;
450
+ gap: 10px;
451
+ }
452
+
453
+ .btn-sm {
454
+ padding: 0.5rem;
455
+ font-size: 0.9rem;
456
+ }
457
+
458
+ /* --- Advertiser Section --- */
459
+ .advertiser-section {
460
+ background: linear-gradient(rgba(15, 17, 21, 0.9), rgba(15, 17, 21, 0.9)), url('https://images.unsplash.com/photo-1556761175-5973dc0f32e7?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=80');
461
+ background-size: cover;
462
+ background-attachment: fixed;
463
+ padding: 5rem 2rem;
464
+ text-align: center;
465
+ border-top: 1px solid var(--border);
466
+ border-bottom: 1px solid var(--border);
467
+ }
468
+
469
+ .advertiser-content {
470
+ max-width: 800px;
471
+ margin: 0 auto;
472
+ }
473
+
474
+ .advertiser-content h2 {
475
+ font-size: 2.5rem;
476
+ margin-bottom: 1rem;
477
+ }
478
+
479
+ .advertiser-content p {
480
+ font-size: 1.1rem;
481
+ color: #ccc;
482
+ margin-bottom: 2rem;
483
+ }
484
+
485
+ /* --- Footer --- */
486
+ footer {
487
+ background: #0b0d10;
488
+ padding: 4rem 2rem 1rem;
489
+ border-top: 1px solid var(--border);
490
+ }
491
+
492
+ .footer-grid {
493
+ display: grid;
494
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
495
+ gap: 3rem;
496
+ max-width: 1400px;
497
+ margin: 0 auto;
498
+ margin-bottom: 3rem;
499
+ }
500
+
501
+ .footer-col h4 {
502
+ color: var(--text-main);
503
+ margin-bottom: 1.5rem;
504
+ font-size: 1.1rem;
505
+ }
506
+
507
+ .footer-col ul {
508
+ list-style: none;
509
+ }
510
+
511
+ .footer-col ul li {
512
+ margin-bottom: 0.8rem;
513
+ }
514
+
515
+ .footer-col ul li a {
516
+ color: var(--text-muted);
517
+ text-decoration: none;
518
+ transition: var(--transition);
519
+ }
520
+
521
+ .footer-col ul li a:hover {
522
+ color: var(--primary);
523
+ padding-left: 5px;
524
+ }
525
+
526
+ .footer-bottom {
527
+ text-align: center;
528
+ padding-top: 2rem;
529
+ border-top: 1px solid var(--border);
530
+ color: var(--text-muted);
531
+ font-size: 0.9rem;
532
+ }
533
+
534
+ .footer-bottom a {
535
+ color: var(--primary);
536
+ text-decoration: none;
537
+ }
538
+
539
+ /* --- Modal --- */
540
+ .modal-overlay {
541
+ position: fixed;
542
+ top: 0;
543
+ left: 0;
544
+ width: 100%;
545
+ height: 100%;
546
+ background: rgba(0,0,0,0.8);
547
+ z-index: 2000;
548
+ display: none;
549
+ justify-content: center;
550
+ align-items: center;
551
+ backdrop-filter: blur(5px);
552
+ opacity: 0;
553
+ transition: opacity 0.3s ease;
554
+ }
555
+
556
+ .modal-overlay.active {
557
+ display: flex;
558
+ opacity: 1;
559
+ }
560
+
561
+ .modal {
562
+ background: var(--bg-card);
563
+ width: 90%;
564
+ max-width: 500px;
565
+ border-radius: var(--radius);
566
+ border: 1px solid var(--border);
567
+ padding: 2rem;
568
+ position: relative;
569
+ transform: scale(0.9);
570
+ transition: transform 0.3s ease;
571
+ }
572
+
573
+ .modal-overlay.active .modal {
574
+ transform: scale(1);
575
+ }
576
+
577
+ .close-modal {
578
+ position: absolute;
579
+ top: 1rem;
580
+ right: 1rem;
581
+ background: none;
582
+ border: none;
583
+ color: var(--text-muted);
584
+ font-size: 1.5rem;
585
+ cursor: pointer;
586
+ }
587
+
588
+ .form-group {
589
+ margin-bottom: 1.5rem;
590
+ }
591
+
592
+ .form-group label {
593
+ display: block;
594
+ margin-bottom: 0.5rem;
595
+ color: var(--text-muted);
596
+ font-size: 0.9rem;
597
+ }
598
+
599
+ .form-control {
600
+ width: 100%;
601
+ padding: 0.8rem;
602
+ background: var(--bg-dark);
603
+ border: 1px solid var(--border);
604
+ border-radius: 8px;
605
+ color: var(--text-main);
606
+ font-family: inherit;
607
+ }
608
+
609
+ .form-control:focus {
610
+ border-color: var(--primary);
611
+ }
612
+
613
+ /* --- Toast Notification --- */
614
+ .toast-container {
615
+ position: fixed;
616
+ bottom: 2rem;
617
+ right: 2rem;
618
+ z-index: 3000;
619
+ display: flex;
620
+ flex-direction: column;
621
+ gap: 1rem;
622
+ }
623
+
624
+ .toast {
625
+ background: var(--bg-card);
626
+ border-left: 4px solid var(--primary);
627
+ padding: 1rem 1.5rem;
628
+ border-radius: 4px;
629
+ box-shadow: var(--shadow);
630
+ display: flex;
631
+ align-items: center;
632
+ gap: 1rem;
633
+ min-width: 300px;
634
+ animation: slideInRight 0.3s ease;
635
+ }
636
+
637
+ .toast.success { border-color: var(--success); }
638
+ .toast.error { border-color: var(--danger); }
639
+
640
+ .toast i { font-size: 1.2rem; }
641
+ .toast.success i { color: var(--success); }
642
+ .toast.error i { color: var(--danger); }
643
+
644
+ /* --- Responsive --- */
645
+ @media (max-width: 768px) {
646
+ .hero h1 { font-size: 2.5rem; }
647
+ .nav-links { display: none; } /* Simplified for mobile */
648
+ .section-header { flex-direction: column; align-items: flex-start; }
649
+ .filters { width: 100%; overflow-x: auto; }
650
+ .banking-banner { flex-direction: column; text-align: center; gap: 1.5rem; }
651
+ .bank-icons { justify-content: center; }
652
+ }
653
+ </style>
654
+ </head>
655
+ <body>
656
+
657
+ <!-- Header -->
658
+ <header>
659
+ <a href="#" class="logo">
660
+ <i class="fa-solid fa-earth-americas"></i>
661
+ GYNX<span>TRADE</span>
662
+ </a>
663
+ <nav class="nav-links">
664
+ <a href="#" class="active">Marketplace</a>
665
+ <a href="#wholesale">Wholesale</a>
666
+ <a href="#retail">Retail</a>
667
+ <a href="#advertising">Advertise</a>
668
+ </nav>
669
+ <div class="header-actions">
670
+ <button class="btn btn-outline" onclick="openModal('loginModal')">
671
+ <i class="fa-regular fa-user"></i> Sign In
672
+ </button>
673
+ <button class="btn btn-primary" onclick="openModal('sellModal')">
674
+ <i class="fa-solid fa-plus"></i> List Item
675
+ </button>
676
+ </div>
677
+ </header>
678
+
679
+ <!-- Hero Section -->
680
+ <section class="hero">
681
+ <h1>The Global Trade <br><span>Platform of India</span></h1>
682
+ <p>Connecting Wholesalers, Retailers, and Consumers worldwide. Secure banking integration for fair, transparent, and instant transactions.</p>
683
+
684
+ <div class="hero-stats">
685
+ <div class="stat-item">
686
+ <h3>50k+</h3>
687
+ <p>Products</p>
688
+ </div>
689
+ <div class="stat-item">
690
+ <h3>120+</h3>
691
+ <p>Countries</p>
692
+ </div>
693
+ <div class="stat-item">
694
+ <h3>100%</h3>
695
+ <p>Secure</p>
696
+ </div>
697
+ </div>
698
+ </section>
699
+
700
+ <!-- Banking Integration Banner -->
701
+ <div class="container">
702
+ <div class="banking-banner">
703
+ <div class="banking-info">
704
+ <h2><i class="fa-solid fa-shield-halved"></i> World-Wide Banking Integration</h2>
705
+ <p>Direct integration with top global banks for secure, verified, and fair transactions. No middlemen, just direct trade.</p>
706
+ </div>
707
+ <div class="bank-icons">
708
+ <div class="bank-icon" title="SBI"><i class="fa-solid fa-building-columns"></i></div>
709
+ <div class="bank-icon" title="HSBC"><i class="fa-solid fa-university"></i></div>
710
+ <div class="bank-icon" title="Deutsche Bank"><i class="fa-solid fa-money-bill-transfer"></i></div>
711
+ <div class="bank-icon" title="Wise"><i class="fa-solid fa-money-bill-wave"></i></div>
712
+ </div>
713
+ </div>
714
+ </div>
715
+
716
+ <!-- Marketplace Section -->
717
+ <main class="container" id="marketplace">
718
+ <div class="section-header">
719
+ <div class="section-title">
720
+ <h2>Trending Products</h2>
721
+ <p>Discover items from top sellers globally</p>
722
+ </div>
723
+ <div class="filters">
724
+ <button class="filter-btn active" onclick="filterProducts('all')">All</button>
725
+ <button class="filter-btn" onclick="filterProducts('electronics')">Electronics</button>
726
+ <button class="filter-btn" onclick="filterProducts('textiles')">Textiles</button>
727
+ <button class="filter-btn" onclick="filterProducts('agriculture')">Agriculture</button>
728
+ </div>
729
+ </div>
730
+
731
+ <div class="products-grid" id="productsGrid">
732
+ <!-- Products injected via JS -->
733
+ </div>
734
+ </main>
735
+
736
+ <!-- Advertiser Section -->
737
+ <section class="advertiser-section" id="advertising">
738
+ <div class="advertiser-content">
739
+ <h2><i class="fa-solid fa-bullhorn"></i> Advertise Your Product</h2>
740
+ <p>Want to reach millions of buyers? Get your product featured at the top of the GYNX TRADE marketplace with our premium advertising slots.</p>
741
+ <button class="btn btn-primary" onclick="openModal('adModal')">Start Advertising</button>
742
+ </div>
743
+ </section>
744
+
745
+ <!-- Footer -->
746
+ <footer>
747
+ <div class="footer-grid">
748
+ <div class="footer-col">
749
+ <a href="#" class="logo" style="margin-bottom: 1rem; display: inline-block;">
750
+ <i class="fa-solid fa-earth-americas"></i> GYNX<span>TRADE</span>
751
+ </a>
752
+ <p style="color: var(--text-muted); font-size: 0.9rem;">
753
+ The world's largest wholesale and retail platform connecting India to the globe.
754
+ </p>
755
+ </div>
756
+ <div class="footer-col">
757
+ <h4>Company</h4>
758
+ <ul>
759
+ <li><a href="#">About Us</a></li>
760
+ <li><a href="#">Careers</a></li>
761
+ <li><a href="#">Press</a></li>
762
+ </ul>
763
+ </div>
764
+ <div class="footer-col">
765
+ <h4>Support</h4>
766
+ <ul>
767
+ <li><a href="#">Help Center</a></li>
768
+ <li><a href="#">Banking FAQ</a></li>
769
+ <li><a href="#">Trust & Safety</a></li>
770
+ </ul>
771
+ </div>
772
+ <div class="footer-col">
773
+ <h4>Connect</h4>
774
+ <div style="display: flex; gap: 1rem;">
775
+ <a href="#" style="color: var(--text-muted); font-size: 1.2rem;"><i class="fa-brands fa-twitter"></i></a>
776
+ <a href="#" style="color: var(--text-muted); font-size: 1.2rem;"><i class="fa-brands fa-linkedin"></i></a>
777
+ <a href="#" style="color: var(--text-muted); font-size: 1.2rem;"><i class="fa-brands fa-instagram"></i></a>
778
+ </div>
779
+ </div>
780
+ </div>
781
+ <div class="footer-bottom">
782
+ <p>&copy; 2023 GYNX TRADE Inc. All rights reserved.</p>
783
+ <p style="margin-top: 0.5rem; font-size: 0.8rem;">
784
+ Built with <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank">anycoder</a>
785
+ </p>
786
+ </div>
787
+ </footer>
788
+
789
+ <!-- Modals -->
790
+
791
+ <!-- Login Modal -->
792
+ <div class="modal-overlay" id="loginModal">
793
+ <div class="modal">
794
+ <button class="close-modal" onclick="closeModal('loginModal')">&times;</button>
795
+ <h2 style="margin-bottom: 1.5rem;">Welcome Back</h2>
796
+ <form onsubmit="handleLogin(event)">
797
+ <div class="form-group">
798
+ <label>Email Address</label>
799
+ <input type="email" class="form-control" placeholder="name@example.com" required>
800
+ </div>
801
+ <div class="form-group">
802
+ <label>Password</label>
803
+ <input type="password" class="form-control" placeholder="••••••••" required>
804
+ </div>
805
+ <button type="submit" class="btn btn-primary btn-block">Sign In</button>
806
+ <p style="text-align: center; margin-top: 1rem; color: var(--text-muted); font-size: 0.9rem;">
807
+ Don't have an account? <a href="#" style="color: var(--primary);">Sign Up</a>
808
+ </p>
809
+ </form>
810
+ </div>
811
+ </div>
812
+
813
+ <!-- Sell Item Modal -->
814
+ <div class="modal-overlay" id="sellModal">
815
+ <div class="modal">
816
+ <button class="close-modal" onclick="closeModal('sellModal')">&times;</button>
817
+ <h2 style="margin-bottom: 1.5rem;">List Your Product</h2>
818
+ <form onsubmit="handleSell(event)">
819
+ <div class="form-group">
820
+ <label>Product Name</label>
821
+ <input type="text" class="form-control" placeholder="e.g. Premium Cotton Saree" required>
822
+ </div>
823
+ <div class="form-group">
824
+ <label>Category</label>
825
+ <select class="form-control">
826
+ <option>Electronics</option>
827
+ <option>Textiles</option>
828
+ <option>Home Goods</option>
829
+ <option>Industrial</option>
830
+ </select>
831
+ </div>
832
+ <div class="form-group">
833
+ <label>Price (INR)</label>
834
+ <input type="number" class="form-control" placeholder="5000" required>
835
+ </div>
836
+ <button type="submit" class="btn btn-primary btn-block">Publish to GYNX</button>
837
+ </form>
838
+ </div>
839
+ </div>
840
+
841
+ <!-- Advertise Modal -->
842
+ <div class="modal-overlay" id="adModal">
843
+ <div class="modal">
844
+ <button class="close-modal" onclick="closeModal('adModal')">&times;</button>
845
+ <h2 style="margin-bottom: 1rem; color: var(--primary);">Promote Your Product</h2>
846
+ <p style="margin-bottom: 1.5rem; color: var(--text-muted);">Get your product to the top of the search results instantly.</p>
847
+ <form onsubmit="handleAdvertise(event)">
848
+ <div class="form-group">
849
+ <label>Product URL (Optional)</label>
850
+ <input type="text" class="form-control" placeholder="https://gynxtrade.com/product/...">
851
+ </div>
852
+ <div class="form-group">
853
+ <label>Budget (USD)</label>
854
+ <input type="number" class="form-control" placeholder="50" required>
855
+ </div>
856
+ <button type="submit" class="btn btn-primary btn-block">Proceed to Payment</button>
857
+ </form>
858
+ </div>
859
+ </div>
860
+
861
+ <!-- Toast Container -->
862
+ <div class="toast-container" id="toastContainer"></div>
863
+
864
+ <script>
865
+ // --- Data ---
866
+ const products = [
867
+ { id: 1, title: "Premium Handwoven Silk Saree", category: "textiles", price: 4500, location: "Kanchipuram, India", image: "https://images.unsplash.com/photo-1610030469983-98e550d6193c?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80", isAd: true },
868
+ { id: 2, title: "Industrial LED Street Lights", category: "electronics", price: 12000, location: "Mumbai, India", image: "https://images.unsplash.com/photo-1513506003901-1e6a229e2d15?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80", isAd: false },
869
+ { id: 3, title: "Organic Basmati Rice (50kg)", category: "agriculture", price: 8500, location: "Punjab, India", image: "https://images.unsplash.com/photo-1586201375761-83865001e31c?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80", isAd: false },
870
+ { id: 4, title: "Smart Fitness Tracker Pro", category: "electronics", price: 2999, location: "Delhi, India", image: "https://images.unsplash.com/photo-1575311373937-040b8e1fd5b6?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80", isAd: true },
871
+ { id: 5, title: "Bulk Cotton Fabric Roll", category: "textiles", price: 5500, location: "Ahmedabad, India", image: "https://images.unsplash.com/photo-1523381210434-271e8be1f52b?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80", isAd: false },
872
+ { id: 6, title: "Green Tea Extract Powder", category: "agriculture", price: 1500, location: "Kerala, India", image: "https://images.unsplash.com/photo-1556679343-c7306c1976bc?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80", isAd: false },
873
+ { id: 7, title: "Wireless Bluetooth Earbuds", category: "electronics", price: 1999, location: "Bangalore, India", image: "https://images.unsplash.com/photo-1590658268037-6bf12165a8df?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80", isAd: false },
874
+ { id: 8, title: "Handcrafted Marble Statues", category: "textiles", price: 8500, location: "Rajasthan, India", image: "https://images.unsplash.com/photo-1610701596007-11502861dcfa?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80", isAd: false },
875
+ ];
876
+
877
+ // --- Functions ---
878
+
879
+ function renderProducts(filter = 'all') {
880
+ const grid = document.getElementById('productsGrid');
881
+ grid.innerHTML = '';
882
+
883
+ const filtered = filter === 'all'
884
+ ? products
885
+ : products.filter(p => p.category === filter);
886
+
887
+ filtered.forEach(product => {
888
+ const card = document.createElement('div');
889
+ card.className = 'product-card';
890
+ card.innerHTML = `
891
+ ${product.isAd ? '<span class="badge-ad">FEATURED</span>' : ''}
892
+ <img src="${product.image}" alt="${product.title}" class="product-image">
893
+ <div class="product-info">
894
+ <span class="product-category">${product.category}</span>
895
+ <h3 class="product-title">${product.title}</h3>
896
+ <div class="product-meta">
897
+ <span><i class="fa-solid fa-location-dot"></i> ${product.location}</span>
898
+ </div>
899
+ <div class="product-price">₹${product.price.toLocaleString('en-IN')}</div>
900
+ <div class="product-actions">
901
+ <button class="btn btn-outline btn-sm" onclick="addToCart(${product.id})">Buy Now</button>
902
+ <button class="btn btn-outline btn-sm" onclick="showToast('Product added to wishlist', 'success')"><i class="fa-regular fa-heart"></i></button>
903
+ </div>
904
+ </div>
905
+ `;
906
+ grid.appendChild(card);
907
+ });
908
+ }
909
+
910
+ function filterProducts(category) {
911
+ // Update active button state
912
+ document.querySelectorAll('.filter-btn').forEach(btn => btn.classList.remove('active'));
913
+ event.target.classList.add('active');
914
+
915
+ // Re-render
916
+ renderProducts(category);
917
+ }
918
+
919
+ function openModal(id) {
920
+ const modal = document.getElementById(id);
921
+ modal.classList.add('active');
922
+ }
923
+
924
+ function closeModal(id) {
925
+ document.getElementById(id).classList.remove('active');
926
+ }
927
+
928
+ function showToast(message, type = 'success') {
929
+ const container = document.getElementById('toastContainer');
930
+ const toast = document.createElement('div');
931
+ toast.className = `toast ${type}`;
932
+ toast.innerHTML = `
933
+ <i class="fa-solid ${type === 'success' ? 'fa-circle-check' : 'fa-circle-exclamation'}"></i>
934
+ <span>${message}</span>
935
+ `;
936
+ container.appendChild(toast);
937
+
938
+ // Remove after 3 seconds
939
+ setTimeout(() => {
940
+ toast.style.animation = 'slideInRight 0.3s ease reverse';
941
+ setTimeout(() => toast.remove(), 300);
942
+ }, 3000);
943
+ }
944
+
945
+ function handleLogin(e) {
946
+ e.preventDefault();
947
+ closeModal('loginModal');
948
+ showToast('Successfully logged in!', 'success');
949
+ }
950
+
951
+ function handleSell(e) {
952
+ e.preventDefault();
953
+ closeModal('sellModal');
954
+ showToast('Product listed successfully on GYNX Trade!', 'success');
955
+ }
956
+
957
+ function handleAdvertise(e) {
958
+ e.preventDefault();
959
+ closeModal('adModal');
960
+ showToast('Advertising package activated. Redirecting to payment...', 'success');
961
+ }
962
+
963
+ function addToCart(id) {
964
+ showToast('Added to cart successfully!', 'success');
965
+ }
966
+
967
+ // --- Init ---
968
+ document.addEventListener('DOMContentLoaded', () => {
969
+ renderProducts();
970
+ });
971
+
972
+ // Close modal when clicking outside
973
+ window.onclick = function(event) {
974
+ if (event.target.classList.contains('modal-overlay')) {
975
+ event.target.classList.remove('active');
976
+ }
977
+ }
978
+ </script>
979
+ </body>
980
+ </html>