Hugging Face's logo

Spaces:
ajitbilLINORE121
/
anycoder-c892924b
Running

App Files Community
ajitbilLINORE121 commited on
Commit
660600a
·
verified ·
1 Parent(s): f6b4ff0

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +974 -19
index.html CHANGED
@@ -1,19 +1,974 @@
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 Marketplace</title>
7
+
8
+ <!-- Icons -->
9
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
10
+
11
+ <!-- Google Fonts -->
12
+ <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
13
+
14
+ <style>
15
+ /* --- CSS VARIABLES & RESET --- */
16
+ :root {
17
+ --primary: #0f172a; /* Deep Navy */
18
+ --primary-light: #1e293b;
19
+ --accent: #f59e0b; /* Gold/Amber for Trust & Trade */
20
+ --accent-hover: #d97706;
21
+ --bg-body: #f8fafc;
22
+ --bg-card: #ffffff;
23
+ --text-main: #334155;
24
+ --text-light: #64748b;
25
+ --success: #10b981;
26
+ --danger: #ef4444;
27
+ --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
28
+ --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
29
+ --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
30
+ --radius: 12px;
31
+ --nav-height: 70px;
32
+ }
33
+
34
+ * {
35
+ margin: 0;
36
+ padding: 0;
37
+ box-sizing: border-box;
38
+ font-family: 'Outfit', sans-serif;
39
+ }
40
+
41
+ body {
42
+ background-color: var(--bg-body);
43
+ color: var(--text-main);
44
+ overflow-x: hidden;
45
+ padding-top: var(--nav-height);
46
+ }
47
+
48
+ a { text-decoration: none; color: inherit; }
49
+ ul { list-style: none; }
50
+ button { cursor: pointer; border: none; outline: none; transition: all 0.3s ease; }
51
+
52
+ /* --- HEADER & NAVIGATION --- */
53
+ header {
54
+ position: fixed;
55
+ top: 0;
56
+ left: 0;
57
+ width: 100%;
58
+ height: var(--nav-height);
59
+ background: rgba(255, 255, 255, 0.95);
60
+ backdrop-filter: blur(10px);
61
+ border-bottom: 1px solid #e2e8f0;
62
+ z-index: 1000;
63
+ display: flex;
64
+ align-items: center;
65
+ justify-content: space-between;
66
+ padding: 0 5%;
67
+ box-shadow: var(--shadow-sm);
68
+ }
69
+
70
+ .logo {
71
+ font-size: 1.8rem;
72
+ font-weight: 800;
73
+ color: var(--primary);
74
+ display: flex;
75
+ align-items: center;
76
+ gap: 10px;
77
+ }
78
+
79
+ .logo span { color: var(--accent); }
80
+
81
+ .nav-links {
82
+ display: flex;
83
+ gap: 30px;
84
+ }
85
+
86
+ .nav-links a {
87
+ font-weight: 500;
88
+ color: var(--text-main);
89
+ position: relative;
90
+ }
91
+
92
+ .nav-links a:hover, .nav-links a.active {
93
+ color: var(--accent);
94
+ }
95
+
96
+ .nav-links a::after {
97
+ content: '';
98
+ position: absolute;
99
+ width: 0;
100
+ height: 2px;
101
+ bottom: -5px;
102
+ left: 0;
103
+ background-color: var(--accent);
104
+ transition: width 0.3s;
105
+ }
106
+
107
+ .nav-links a:hover::after { width: 100%; }
108
+
109
+ .user-actions {
110
+ display: flex;
111
+ align-items: center;
112
+ gap: 15px;
113
+ }
114
+
115
+ .btn-primary {
116
+ background-color: var(--accent);
117
+ color: white;
118
+ padding: 10px 24px;
119
+ border-radius: 50px;
120
+ font-weight: 600;
121
+ display: flex;
122
+ align-items: center;
123
+ gap: 8px;
124
+ }
125
+
126
+ .btn-primary:hover {
127
+ background-color: var(--accent-hover);
128
+ transform: translateY(-2px);
129
+ box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4);
130
+ }
131
+
132
+ .btn-outline {
133
+ border: 2px solid var(--primary);
134
+ color: var(--primary);
135
+ padding: 8px 20px;
136
+ border-radius: 50px;
137
+ font-weight: 600;
138
+ background: transparent;
139
+ }
140
+
141
+ .btn-outline:hover {
142
+ background: var(--primary);
143
+ color: white;
144
+ }
145
+
146
+ .cart-icon {
147
+ position: relative;
148
+ font-size: 1.2rem;
149
+ color: var(--primary);
150
+ }
151
+
152
+ .cart-badge {
153
+ position: absolute;
154
+ top: -8px;
155
+ right: -8px;
156
+ background: var(--danger);
157
+ color: white;
158
+ font-size: 0.7rem;
159
+ width: 18px;
160
+ height: 18px;
161
+ border-radius: 50%;
162
+ display: flex;
163
+ align-items: center;
164
+ justify-content: center;
165
+ font-weight: bold;
166
+ }
167
+
168
+ /* --- HERO SECTION --- */
169
+ .hero {
170
+ position: relative;
171
+ height: 500px;
172
+ background: linear-gradient(135deg, var(--primary) 0%, #0f172a 100%);
173
+ color: white;
174
+ display: flex;
175
+ align-items: center;
176
+ padding: 0 5%;
177
+ overflow: hidden;
178
+ }
179
+
180
+ .hero::before {
181
+ content: '';
182
+ position: absolute;
183
+ top: 0; left: 0; width: 100%; height: 100%;
184
+ background: url('https://picsum.photos/seed/trade/1920/1080') center/cover no-repeat;
185
+ opacity: 0.2;
186
+ mix-blend-mode: overlay;
187
+ }
188
+
189
+ .hero-content {
190
+ position: relative;
191
+ z-index: 1;
192
+ max-width: 600px;
193
+ }
194
+
195
+ .hero h1 {
196
+ font-size: 3.5rem;
197
+ line-height: 1.1;
198
+ margin-bottom: 20px;
199
+ font-weight: 800;
200
+ }
201
+
202
+ .hero p {
203
+ font-size: 1.1rem;
204
+ color: #cbd5e1;
205
+ margin-bottom: 30px;
206
+ line-height: 1.6;
207
+ }
208
+
209
+ .hero-stats {
210
+ display: flex;
211
+ gap: 40px;
212
+ margin-top: 40px;
213
+ border-top: 1px solid rgba(255,255,255,0.2);
214
+ padding-top: 20px;
215
+ }
216
+
217
+ .stat h3 { font-size: 1.5rem; color: var(--accent); }
218
+ .stat span { font-size: 0.9rem; color: #94a3b8; }
219
+
220
+ /* --- MARKETPLACE SECTION --- */
221
+ .section-container {
222
+ padding: 60px 5%;
223
+ max-width: 1400px;
224
+ margin: 0 auto;
225
+ }
226
+
227
+ .section-header {
228
+ display: flex;
229
+ justify-content: space-between;
230
+ align-items: center;
231
+ margin-bottom: 40px;
232
+ flex-wrap: wrap;
233
+ gap: 20px;
234
+ }
235
+
236
+ .section-title h2 {
237
+ font-size: 2rem;
238
+ color: var(--primary);
239
+ margin-bottom: 10px;
240
+ }
241
+
242
+ .filters {
243
+ display: flex;
244
+ gap: 10px;
245
+ background: white;
246
+ padding: 5px;
247
+ border-radius: 50px;
248
+ box-shadow: var(--shadow-sm);
249
+ }
250
+
251
+ .filter-btn {
252
+ padding: 8px 20px;
253
+ border-radius: 40px;
254
+ font-size: 0.9rem;
255
+ font-weight: 500;
256
+ color: var(--text-light);
257
+ background: transparent;
258
+ }
259
+
260
+ .filter-btn.active {
261
+ background: var(--primary);
262
+ color: white;
263
+ box-shadow: var(--shadow-sm);
264
+ }
265
+
266
+ /* --- PRODUCT GRID --- */
267
+ .product-grid {
268
+ display: grid;
269
+ grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
270
+ gap: 30px;
271
+ }
272
+
273
+ .product-card {
274
+ background: var(--bg-card);
275
+ border-radius: var(--radius);
276
+ overflow: hidden;
277
+ box-shadow: var(--shadow-md);
278
+ transition: all 0.3s ease;
279
+ position: relative;
280
+ display: flex;
281
+ flex-direction: column;
282
+ }
283
+
284
+ .product-card:hover {
285
+ transform: translateY(-10px);
286
+ box-shadow: var(--shadow-lg);
287
+ }
288
+
289
+ .badge-ad {
290
+ position: absolute;
291
+ top: 15px;
292
+ left: 15px;
293
+ background: var(--accent);
294
+ color: white;
295
+ padding: 4px 10px;
296
+ border-radius: 4px;
297
+ font-size: 0.75rem;
298
+ font-weight: 700;
299
+ z-index: 10;
300
+ box-shadow: 0 2px 4px rgba(0,0,0,0.2);
301
+ }
302
+
303
+ .badge-wholesale {
304
+ position: absolute;
305
+ top: 15px;
306
+ right: 15px;
307
+ background: var(--primary);
308
+ color: white;
309
+ padding: 4px 10px;
310
+ border-radius: 4px;
311
+ font-size: 0.75rem;
312
+ font-weight: 700;
313
+ z-index: 10;
314
+ }
315
+
316
+ .product-img {
317
+ width: 100%;
318
+ height: 200px;
319
+ object-fit: cover;
320
+ background: #e2e8f0;
321
+ }
322
+
323
+ .product-info {
324
+ padding: 20px;
325
+ flex-grow: 1;
326
+ display: flex;
327
+ flex-direction: column;
328
+ }
329
+
330
+ .product-category {
331
+ font-size: 0.8rem;
332
+ color: var(--text-light);
333
+ text-transform: uppercase;
334
+ letter-spacing: 1px;
335
+ margin-bottom: 5px;
336
+ }
337
+
338
+ .product-title {
339
+ font-size: 1.1rem;
340
+ font-weight: 700;
341
+ color: var(--primary);
342
+ margin-bottom: 10px;
343
+ line-height: 1.4;
344
+ }
345
+
346
+ .product-meta {
347
+ display: flex;
348
+ justify-content: space-between;
349
+ align-items: center;
350
+ margin-bottom: 15px;
351
+ font-size: 0.9rem;
352
+ color: var(--text-light);
353
+ }
354
+
355
+ .seller-info {
356
+ display: flex;
357
+ align-items: center;
358
+ gap: 8px;
359
+ }
360
+
361
+ .seller-avatar {
362
+ width: 24px;
363
+ height: 24px;
364
+ border-radius: 50%;
365
+ }
366
+
367
+ .price-row {
368
+ margin-top: auto;
369
+ display: flex;
370
+ justify-content: space-between;
371
+ align-items: center;
372
+ padding-top: 15px;
373
+ border-top: 1px solid #f1f5f9;
374
+ }
375
+
376
+ .price {
377
+ font-size: 1.25rem;
378
+ font-weight: 700;
379
+ color: var(--primary);
380
+ }
381
+
382
+ .btn-buy {
383
+ background: var(--primary);
384
+ color: white;
385
+ padding: 8px 16px;
386
+ border-radius: 8px;
387
+ font-size: 0.9rem;
388
+ font-weight: 500;
389
+ }
390
+
391
+ .btn-buy:hover {
392
+ background: var(--primary-light);
393
+ }
394
+
395
+ /* --- BANK INTEGRATION SECTION --- */
396
+ .bank-section {
397
+ background: white;
398
+ padding: 60px 5%;
399
+ margin-top: 40px;
400
+ border-top: 1px solid #e2e8f0;
401
+ }
402
+
403
+ .bank-grid {
404
+ display: grid;
405
+ grid-template-columns: 1fr 1fr;
406
+ gap: 50px;
407
+ max-width: 1200px;
408
+ margin: 0 auto;
409
+ align-items: center;
410
+ }
411
+
412
+ .bank-visual {
413
+ background: linear-gradient(45deg, #f8fafc, #e2e8f0);
414
+ border-radius: 20px;
415
+ padding: 40px;
416
+ text-align: center;
417
+ position: relative;
418
+ }
419
+
420
+ .bank-card {
421
+ background: linear-gradient(135deg, var(--primary) 0%, #1e293b 100%);
422
+ color: white;
423
+ width: 100%;
424
+ max-width: 350px;
425
+ margin: 30px auto;
426
+ padding: 25px;
427
+ border-radius: 15px;
428
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
429
+ position: relative;
430
+ overflow: hidden;
431
+ }
432
+
433
+ .bank-card::before {
434
+ content: '';
435
+ position: absolute;
436
+ top: -50%;
437
+ left: -50%;
438
+ width: 200%;
439
+ height: 200%;
440
+ background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 60%);
441
+ animation: rotate 10s linear infinite;
442
+ }
443
+
444
+ @keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
445
+
446
+ .card-chip {
447
+ width: 50px;
448
+ height: 35px;
449
+ background: linear-gradient(135deg, #fbbf24, #d97706);
450
+ border-radius: 6px;
451
+ margin-bottom: 20px;
452
+ position: relative;
453
+ z-index: 2;
454
+ }
455
+
456
+ .card-number {
457
+ font-size: 1.2rem;
458
+ letter-spacing: 3px;
459
+ margin-bottom: 20px;
460
+ position: relative;
461
+ z-index: 2;
462
+ font-family: monospace;
463
+ }
464
+
465
+ .card-details {
466
+ display: flex;
467
+ justify-content: space-between;
468
+ font-size: 0.85rem;
469
+ position: relative;
470
+ z-index: 2;
471
+ }
472
+
473
+ .bank-features li {
474
+ margin-bottom: 15px;
475
+ display: flex;
476
+ align-items: center;
477
+ gap: 10px;
478
+ font-size: 1.1rem;
479
+ color: var(--text-main);
480
+ }
481
+
482
+ .bank-features i { color: var(--success); }
483
+
484
+ /* --- FOOTER --- */
485
+ footer {
486
+ background: var(--primary);
487
+ color: white;
488
+ padding: 60px 5% 20px;
489
+ }
490
+
491
+ .footer-content {
492
+ display: grid;
493
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
494
+ gap: 40px;
495
+ max-width: 1200px;
496
+ margin: 0 auto 40px;
497
+ }
498
+
499
+ .footer-col h4 {
500
+ font-size: 1.2rem;
501
+ margin-bottom: 20px;
502
+ color: var(--accent);
503
+ }
504
+
505
+ .footer-col ul li { margin-bottom: 10px; }
506
+ .footer-col ul li a { color: #94a3b8; transition: color 0.3s; }
507
+ .footer-col ul li a:hover { color: white; }
508
+
509
+ .copyright {
510
+ text-align: center;
511
+ padding-top: 20px;
512
+ border-top: 1px solid rgba(255,255,255,0.1);
513
+ color: #64748b;
514
+ font-size: 0.9rem;
515
+ }
516
+
517
+ .built-with {
518
+ color: var(--accent);
519
+ font-weight: bold;
520
+ }
521
+
522
+ /* --- MODAL --- */
523
+ .modal-overlay {
524
+ position: fixed;
525
+ top: 0; left: 0; width: 100%; height: 100%;
526
+ background: rgba(15, 23, 42, 0.8);
527
+ backdrop-filter: blur(5px);
528
+ z-index: 2000;
529
+ display: flex;
530
+ align-items: center;
531
+ justify-content: center;
532
+ opacity: 0;
533
+ visibility: hidden;
534
+ transition: all 0.3s ease;
535
+ }
536
+
537
+ .modal-overlay.active {
538
+ opacity: 1;
539
+ visibility: visible;
540
+ }
541
+
542
+ .modal {
543
+ background: white;
544
+ width: 90%;
545
+ max-width: 500px;
546
+ border-radius: 16px;
547
+ padding: 30px;
548
+ transform: translateY(20px);
549
+ transition: transform 0.3s ease;
550
+ position: relative;
551
+ }
552
+
553
+ .modal-overlay.active .modal { transform: translateY(0); }
554
+
555
+ .modal-header {
556
+ display: flex;
557
+ justify-content: space-between;
558
+ align-items: center;
559
+ margin-bottom: 25px;
560
+ }
561
+
562
+ .close-modal {
563
+ background: transparent;
564
+ font-size: 1.5rem;
565
+ color: var(--text-light);
566
+ }
567
+
568
+ .form-group { margin-bottom: 20px; }
569
+ .form-group label { display: block; margin-bottom: 8px; font-weight: 500; font-size: 0.9rem; }
570
+ .form-group input, .form-group select {
571
+ width: 100%;
572
+ padding: 12px;
573
+ border: 1px solid #cbd5e1;
574
+ border-radius: 8px;
575
+ font-size: 1rem;
576
+ transition: border-color 0.3s;
577
+ }
578
+
579
+ .form-group input:focus { border-color: var(--accent); outline: none; }
580
+
581
+ .bank-logos {
582
+ display: flex;
583
+ gap: 10px;
584
+ margin-top: 10px;
585
+ }
586
+
587
+ .bank-logo {
588
+ flex: 1;
589
+ height: 40px;
590
+ background: #f1f5f9;
591
+ border-radius: 6px;
592
+ display: flex;
593
+ align-items: center;
594
+ justify-content: center;
595
+ font-size: 0.8rem;
596
+ font-weight: bold;
597
+ color: var(--text-light);
598
+ cursor: pointer;
599
+ transition: background 0.2s;
600
+ }
601
+
602
+ .bank-logo:hover { background: #e2e8f0; }
603
+
604
+ /* --- TOAST NOTIFICATION --- */
605
+ .toast-container {
606
+ position: fixed;
607
+ bottom: 20px;
608
+ right: 20px;
609
+ z-index: 3000;
610
+ display: flex;
611
+ flex-direction: column;
612
+ gap: 10px;
613
+ }
614
+
615
+ .toast {
616
+ background: white;
617
+ padding: 15px 20px;
618
+ border-radius: 8px;
619
+ box-shadow: var(--shadow-lg);
620
+ border-left: 5px solid var(--primary);
621
+ display: flex;
622
+ align-items: center;
623
+ gap: 12px;
624
+ min-width: 300px;
625
+ animation: slideIn 0.3s ease;
626
+ }
627
+
628
+ .toast.success { border-left-color: var(--success); }
629
+ .toast.error { border-left-color: var(--danger); }
630
+
631
+ @keyframes slideIn {
632
+ from { transform: translateX(100%); opacity: 0; }
633
+ to { transform: translateX(0); opacity: 1; }
634
+ }
635
+
636
+ /* --- RESPONSIVE --- */
637
+ @media (max-width: 768px) {
638
+ .hero h1 { font-size: 2.5rem; }
639
+ .nav-links { display: none; } /* Simplified for demo */
640
+ .bank-grid { grid-template-columns: 1fr; }
641
+ .hero { height: auto; padding: 100px 5% 60px; }
642
+ .hero-stats { flex-wrap: wrap; }
643
+ }
644
+ </style>
645
+ </head>
646
+ <body>
647
+
648
+ <!-- NAVIGATION -->
649
+ <header>
650
+ <div class="logo">
651
+ <i class="fa-solid fa-earth-americas"></i>
652
+ GYNX<span>TRADE</span>
653
+ </div>
654
+ <nav class="nav-links">
655
+ <a href="#" class="active">Home</a>
656
+ <a href="#marketplace">Marketplace</a>
657
+ <a href="#wholesale">Wholesale</a>
658
+ <a href="#bank">Banking</a>
659
+ </nav>
660
+ <div class="user-actions">
661
+ <button class="cart-icon" onclick="showToast('Cart is currently empty', 'info')">
662
+ <i class="fa-solid fa-cart-shopping"></i>
663
+ <span class="cart-badge" id="cart-count">0</span>
664
+ </button>
665
+ <button class="btn-outline" onclick="openModal('login')">Login</button>
666
+ <button class="btn-primary" onclick="openModal('register')">Sell Now</button>
667
+ </div>
668
+ </header>
669
+
670
+ <!-- HERO SECTION -->
671
+ <section class="hero">
672
+ <div class="hero-content">
673
+ <h1>Connect Globally.<br>Trade Fairly.</h1>
674
+ <p>The world's largest B2B & B2C marketplace integrated with a secure global banking system. From wholesaler to retailer, experience transparent trade.</p>
675
+ <div style="display: flex; gap: 15px;">
676
+ <button class="btn-primary" onclick="scrollToMarket()">Explore Products</button>
677
+ <button class="btn-outline" style="border-color: white; color: white;" onclick="openModal('register')">Start Selling</button>
678
+ </div>
679
+ <div class="hero-stats">
680
+ <div class="stat">
681
+ <h3>50k+</h3>
682
+ <span>Global Sellers</span>
683
+ </div>
684
+ <div class="stat">
685
+ <h3>120+</h3>
686
+ <span>Countries</span>
687
+ </div>
688
+ <div class="stat">
689
+ <h3>24/7</h3>
690
+ <span>Banking Support</span>
691
+ </div>
692
+ </div>
693
+ </div>
694
+ </section>
695
+
696
+ <!-- MARKETPLACE SECTION -->
697
+ <section id="marketplace" class="section-container">
698
+ <div class="section-header">
699
+ <div class="section-title">
700
+ <h2>Featured Products</h2>
701
+ <p>Top-rated items advertised by verified sellers worldwide</p>
702
+ </div>
703
+ <div class="filters">
704
+ <button class="filter-btn active" onclick="filterProducts('all')">All</button>
705
+ <button class="filter-btn" onclick="filterProducts('retail')">Retail</button>
706
+ <button class="filter-btn" onclick="filterProducts('wholesale')">Wholesale</button>
707
+ </div>
708
+ </div>
709
+
710
+ <div class="product-grid" id="product-grid">
711
+ <!-- Products will be injected here via JS -->
712
+ </div>
713
+ </section>
714
+
715
+ <!-- BANKING SECTION -->
716
+ <section id="bank" class="bank-section">
717
+ <div class="bank-grid">
718
+ <div class="bank-visual">
719
+ <h3 style="margin-bottom: 20px; color: var(--primary);">Integrated Banking System</h3>
720
+ <p style="color: var(--text-light); margin-bottom: 30px;">Secure global transactions with instant verification and fair trade guarantees.</p>
721
+
722
+ <div class="bank-card">
723
+ <div class="card-chip"></div>
724
+ <div class="card-number">**** **** **** 4289</div>
725
+ <div class="card-details">
726
+ <span>CARD HOLDER</span>
727
+ <span>VALID THRU 12/28</span>
728
+ </div>
729
+ </div>
730
+
731
+ <div class="bank-logos">
732
+ <div class="bank-logo"><i class="fa-brands fa-cc-visa"></i> VISA</div>
733
+ <div class="bank-logo"><i class="fa-brands fa-cc-mastercard"></i> MC</div>
734
+ <div class="bank-logo"><i class="fa-solid fa-building-columns"></i> SWIFT</div>
735
+ </div>
736
+ </div>
737
+ <div class="bank-content">
738
+ <h2 style="font-size: 2.2rem; color: var(--primary); margin-bottom: 20px;">Fair Transaction Guarantee</h2>
739
+ <p style="margin-bottom: 30px; line-height: 1.6; color: var(--text-main);">
740
+ GYNX Trade integrates directly with global banking systems to ensure every transaction is secure.
741
+ Our smart escrow system holds funds until you confirm receipt of goods, guaranteeing fair trade for everyone.
742
+ </p>
743
+ <ul class="bank-features">
744
+ <li><i class="fa-solid fa-shield-halved"></i> Bank-level SSL Encryption</li>
745
+ <li><i class="fa-solid fa-clock"></i> Instant International Transfers</li>
746
+ <li><i class="fa-solid fa-scale-balanced"></i> Smart Escrow Protection</li>
747
+ <li><i class="fa-solid fa-file-contract"></i> Digital Contract Signing</li>
748
+ </ul>
749
+ </div>
750
+ </div>
751
+ </section>
752
+
753
+ <!-- FOOTER -->
754
+ <footer>
755
+ <div class="footer-content">
756
+ <div class="footer-col">
757
+ <div class="logo" style="color: white; margin-bottom: 20px;">
758
+ <i class="fa-solid fa-earth-americas"></i> GYNX<span>TRADE</span>
759
+ </div>
760
+ <p style="color: #94a3b8; font-size: 0.9rem;">
761
+ The ultimate platform for global trade. Connecting wholesalers, retailers, and consumers with fair, secure banking solutions.
762
+ </p>
763
+ </div>
764
+ <div class="footer-col">
765
+ <h4>Marketplace</h4>
766
+ <ul>
767
+ <li><a href="#">Electronics</a></li>
768
+ <li><a href="#">Fashion</a></li>
769
+ <li><a href="#">Home & Living</a></li>
770
+ <li><a href="#">Industrial</a></li>
771
+ </ul>
772
+ </div>
773
+ <div class="footer-col">
774
+ <h4>For Sellers</h4>
775
+ <ul>
776
+ <li><a href="#">Start Selling</a></li>
777
+ <li><a href="#">Advertise Here</a></li>
778
+ <li><a href="#">Pricing</a></li>
779
+ <li><a href="#">Seller Dashboard</a></li>
780
+ </ul>
781
+ </div>
782
+ <div class="footer-col">
783
+ <h4>Support</h4>
784
+ <ul>
785
+ <li><a href="#">Help Center</a></li>
786
+ <li><a href="#">Banking Support</a></li>
787
+ <li><a href="#">Terms of Service</a></li>
788
+ <li><a href="#">Privacy Policy</a></li>
789
+ </ul>
790
+ </div>
791
+ </div>
792
+ <div class="copyright">
793
+ &copy; 2023 GYNX TRADE Inc. All rights reserved.
794
+ <br>
795
+ Built with <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="built-with">anycoder</a>
796
+ </div>
797
+ </footer>
798
+
799
+ <!-- MODAL: BANK PAYMENT -->
800
+ <div class="modal-overlay" id="payment-modal">
801
+ <div class="modal">
802
+ <div class="modal-header">
803
+ <h3>Secure Global Payment</h3>
804
+ <button class="close-modal" onclick="closeModal('payment-modal')">&times;</button>
805
+ </div>
806
+ <div class="form-group">
807
+ <label>Transaction Amount</label>
808
+ <input type="text" id="pay-amount" value="$0.00" readonly style="background: #f1f5f9;">
809
+ </div>
810
+ <div class="form-group">
811
+ <label>Select Bank / Method</label>
812
+ <select id="bank-method">
813
+ <option value="swift">SWIFT Transfer (Global)</option>
814
+ <option value="visa">Visa Card</option>
815
+ <option value="master">MasterCard</option>
816
+ </select>
817
+ </div>
818
+ <div class="form-group">
819
+ <label>Account Details (Simulation)</label>
820
+ <input type="text" value="**** 4289" readonly style="background: #f1f5f9;">
821
+ </div>
822
+ <button class="btn-primary" style="width: 100%; justify-content: center;" onclick="processPayment()">
823
+ <i class="fa-solid fa-lock"></i> Process Secure Transaction
824
+ </button>
825
+ <p style="text-align: center; font-size: 0.8rem; color: var(--text-light); margin-top: 15px;">
826
+ <i class="fa-solid fa-circle-check" style="color: var(--success);"></i> Bank Level Security
827
+ </p>
828
+ </div>
829
+ </div>
830
+
831
+ <!-- TOAST CONTAINER -->
832
+ <div class="toast-container" id="toast-container"></div>
833
+
834
+ <script>
835
+ // --- DATA ---
836
+ const products = [
837
+ { id: 1, title: "Premium Organic Coffee Beans", category: "Food & Beverage", price: 45.00, type: "retail", seller: "Global Roasters", image: "https://picsum.photos/seed/coffee/400/300", ad: true },
838
+ { id: 2, title: "Industrial CNC Machine", category: "Industrial", price: 12500.00, type: "wholesale", seller: "TechMachinery Ltd", image: "https://picsum.photos/seed/machine/400/300", ad: true },
839
+ { id: 3, title: "Handmade Silk Sarees", category: "Fashion", price: 120.00, type: "retail", seller: "India Crafts", image: "https://picsum.photos/seed/saree/400/300", ad: false },
840
+ { id: 4, title: "Bulk Cotton Fabric Roll", category: "Textile", price: 500.00, type: "wholesale", seller: "TextileWorld", image: "https://picsum.photos/seed/fabric/400/300", ad: true },
841
+ { id: 5, title: "Wireless Noise Cancelling Headphones", category: "Electronics", price: 299.00, type: "retail", seller: "AudioPro", image: "https://picsum.photos/seed/headphone/400/300", ad: false },
842
+ { id: 6, title: "Sustainable Bamboo Furniture", category: "Home", price: 850.00, type: "wholesale", seller: "EcoLiving", image: "https://picsum.photos/seed/furniture/400/300", ad: true },
843
+ { id: 7, title: "Organic Tea Sets", category: "Food & Beverage", price: 35.00, type: "retail", seller: "Zen Garden", image: "https://picsum.photos/seed/tea/400/300", ad: false },
844
+ { id: 8, title: "Automotive Parts Kit", category: "Industrial", price: 450.00, type: "wholesale", seller: "AutoParts Inc", image: "https://picsum.photos/seed/car/400/300", ad: false },
845
+ ];
846
+
847
+ let cartCount = 0;
848
+
849
+ // --- RENDER PRODUCTS ---
850
+ function renderProducts(filter = 'all') {
851
+ const grid = document.getElementById('product-grid');
852
+ grid.innerHTML = '';
853
+
854
+ const filtered = filter === 'all'
855
+ ? products
856
+ : products.filter(p => p.type === filter);
857
+
858
+ filtered.forEach(p => {
859
+ const card = document.createElement('div');
860
+ card.className = 'product-card';
861
+ card.innerHTML = `
862
+ ${p.ad ? '<span class="badge-ad">FEATURED</span>' : ''}
863
+ <span class="badge-wholesale">${p.type.toUpperCase()}</span>
864
+ <img src="${p.image}" alt="${p.title}" class="product-img">
865
+ <div class="product-info">
866
+ <div class="product-category">${p.category}</div>
867
+ <h3 class="product-title">${p.title}</h3>
868
+ <div class="product-meta">
869
+ <div class="seller-info">
870
+ <img src="https://ui-avatars.com/api/?name=${p.seller}&background=random" class="seller-avatar" alt="${p.seller}">
871
+ <span>${p.seller}</span>
872
+ </div>
873
+ <span><i class="fa-solid fa-star" style="color: var(--accent);"></i> 4.8</span>
874
+ </div>
875
+ <div class="price-row">
876
+ <div class="price">$${p.price.toFixed(2)}</div>
877
+ <button class="btn-buy" onclick="initiateBuy('${p.title}', ${p.price})">
878
+ <i class="fa-solid fa-cart-plus"></i> Buy
879
+ </button>
880
+ </div>
881
+ </div>
882
+ `;
883
+ grid.appendChild(card);
884
+ });
885
+ }
886
+
887
+ // --- FILTER LOGIC ---
888
+ function filterProducts(type) {
889
+ // Update buttons
890
+ document.querySelectorAll('.filter-btn').forEach(btn => btn.classList.remove('active'));
891
+ event.target.classList.add('active');
892
+ renderProducts(type);
893
+ }
894
+
895
+ // --- BUY / PAYMENT LOGIC ---
896
+ function initiateBuy(title, price) {
897
+ document.getElementById('pay-amount').value = `$${price.toFixed(2)} (${title})`;
898
+ openModal('payment-modal');
899
+ }
900
+
901
+ function processPayment() {
902
+ const btn = document.querySelector('#payment-modal .btn-primary');
903
+ const originalText = btn.innerHTML;
904
+
905
+ // Simulate Loading
906
+ btn.innerHTML = '<i class="fa-solid fa-circle-notch fa-spin"></i> Processing...';
907
+ btn.disabled = true;
908
+
909
+ setTimeout(() => {
910
+ closeModal('payment-modal');
911
+ btn.innerHTML = originalText;
912
+ btn.disabled = false;
913
+
914
+ // Add to cart logic
915
+ cartCount++;
916
+ document.getElementById('cart-count').innerText = cartCount;
917
+
918
+ showToast('Transaction Successful! Item added to cart.', 'success');
919
+ }, 2000);
920
+ }
921
+
922
+ // --- MODAL SYSTEM ---
923
+ function openModal(type) {
924
+ const modalId = type === 'payment-modal' ? 'payment-modal' : 'payment-modal'; // Reusing generic modal for demo
925
+ document.getElementById(modalId).classList.add('active');
926
+ }
927
+
928
+ function closeModal(id) {
929
+ document.getElementById(id).classList.remove('active');
930
+ }
931
+
932
+ // Close modal on outside click
933
+ document.querySelectorAll('.modal-overlay').forEach(overlay => {
934
+ overlay.addEventListener('click', (e) => {
935
+ if (e.target === overlay) {
936
+ overlay.classList.remove('active');
937
+ }
938
+ });
939
+ });
940
+
941
+ // --- TOAST NOTIFICATIONS ---
942
+ function showToast(message, type = 'info') {
943
+ const container = document.getElementById('toast-container');
944
+ const toast = document.createElement('div');
945
+ toast.className = `toast ${type}`;
946
+
947
+ let icon = 'fa-info-circle';
948
+ if (type === 'success') icon = 'fa-check-circle';
949
+ if (type === 'error') icon = 'fa-exclamation-circle';
950
+
951
+ toast.innerHTML = `<i class="fa-solid ${icon}"></i> <span>${message}</span>`;
952
+
953
+ container.appendChild(toast);
954
+
955
+ // Remove after 3 seconds
956
+ setTimeout(() => {
957
+ toast.style.opacity = '0';
958
+ setTimeout(() => toast.remove(), 300);
959
+ }, 3000);
960
+ }
961
+
962
+ // --- SCROLL HELPERS ---
963
+ function scrollToMarket() {
964
+ document.getElementById('marketplace').scrollIntoView({ behavior: 'smooth' });
965
+ }
966
+
967
+ // --- INITIALIZATION ---
968
+ document.addEventListener('DOMContentLoaded', () => {
969
+ renderProducts();
970
+ });
971
+
972
+ </script>
973
+ </body>
974
+ </html>