Hugging Face's logo

Spaces:
Mubin01
/
anycoder-816ec577
Running

App Files Community
Mubin01 commited on
Commit
11a02d3
·
verified ·
1 Parent(s): 182acdf

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +703 -19
index.html CHANGED
@@ -1,19 +1,703 @@
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>Sylhet Match | Find Your Life Partner</title>
7
+ <link rel="preconnect" href="https://fonts.googleapis.com">
8
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
9
+ <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&family=Playfair+Display:wght@600&display=swap" rel="stylesheet">
10
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
11
+
12
+ <style>
13
+ :root {
14
+ --primary: #2E7D32; /* Sylhet Green */
15
+ --primary-dark: #1B5E20;
16
+ --accent: #FFD700; /* Gold */
17
+ --bg-light: #F1F8E9;
18
+ --text-dark: #1a1a1a;
19
+ --text-light: #555;
20
+ --white: #ffffff;
21
+ --shadow: 0 10px 30px rgba(0,0,0,0.1);
22
+ --radius: 12px;
23
+ }
24
+
25
+ * {
26
+ margin: 0;
27
+ padding: 0;
28
+ box-sizing: border-box;
29
+ }
30
+
31
+ body {
32
+ font-family: 'Poppins', sans-serif;
33
+ background-color: var(--bg-light);
34
+ color: var(--text-dark);
35
+ line-height: 1.6;
36
+ overflow-x: hidden;
37
+ }
38
+
39
+ h1, h2, h3 {
40
+ font-family: 'Playfair Display', serif;
41
+ }
42
+
43
+ /* Utilities */
44
+ .container {
45
+ max-width: 1200px;
46
+ margin: 0 auto;
47
+ padding: 0 20px;
48
+ }
49
+
50
+ .btn {
51
+ display: inline-block;
52
+ padding: 12px 30px;
53
+ border-radius: 50px;
54
+ text-decoration: none;
55
+ font-weight: 600;
56
+ transition: all 0.3s ease;
57
+ cursor: pointer;
58
+ border: none;
59
+ }
60
+
61
+ .btn-primary {
62
+ background-color: var(--primary);
63
+ color: var(--white);
64
+ box-shadow: 0 4px 15px rgba(46, 125, 50, 0.3);
65
+ }
66
+
67
+ .btn-primary:hover {
68
+ background-color: var(--primary-dark);
69
+ transform: translateY(-2px);
70
+ }
71
+
72
+ .btn-outline {
73
+ border: 2px solid var(--primary);
74
+ color: var(--primary);
75
+ background: transparent;
76
+ }
77
+
78
+ .btn-outline:hover {
79
+ background-color: var(--primary);
80
+ color: var(--white);
81
+ }
82
+
83
+ /* Header */
84
+ header {
85
+ background-color: var(--white);
86
+ box-shadow: 0 2px 10px rgba(0,0,0,0.05);
87
+ position: sticky;
88
+ top: 0;
89
+ z-index: 1000;
90
+ }
91
+
92
+ .nav-wrapper {
93
+ display: flex;
94
+ justify-content: space-between;
95
+ align-items: center;
96
+ height: 80px;
97
+ }
98
+
99
+ .logo {
100
+ font-size: 1.5rem;
101
+ font-weight: 700;
102
+ color: var(--primary);
103
+ display: flex;
104
+ align-items: center;
105
+ gap: 10px;
106
+ }
107
+
108
+ .logo i {
109
+ color: var(--accent);
110
+ }
111
+
112
+ .anycoder-link {
113
+ font-size: 0.9rem;
114
+ color: var(--text-light);
115
+ text-decoration: none;
116
+ font-weight: 500;
117
+ transition: color 0.3s;
118
+ }
119
+
120
+ .anycoder-link:hover {
121
+ color: var(--primary);
122
+ }
123
+
124
+ /* Hero Section (Main Version) */
125
+ .hero {
126
+ background: linear-gradient(135deg, #e8f5e9 0%, #ffffff 100%);
127
+ padding: 80px 0;
128
+ position: relative;
129
+ overflow: hidden;
130
+ }
131
+
132
+ .hero::before {
133
+ content: '';
134
+ position: absolute;
135
+ top: -50%;
136
+ right: -10%;
137
+ width: 600px;
138
+ height: 600px;
139
+ background: radial-gradient(circle, rgba(46, 125, 50, 0.1) 0%, rgba(255,255,255,0) 70%);
140
+ border-radius: 50%;
141
+ }
142
+
143
+ .hero-content {
144
+ display: grid;
145
+ grid-template-columns: 1fr 1fr;
146
+ gap: 50px;
147
+ align-items: center;
148
+ }
149
+
150
+ .hero-text h1 {
151
+ font-size: 3.5rem;
152
+ color: var(--text-dark);
153
+ margin-bottom: 20px;
154
+ line-height: 1.2;
155
+ }
156
+
157
+ .hero-text p {
158
+ font-size: 1.1rem;
159
+ color: var(--text-light);
160
+ margin-bottom: 30px;
161
+ max-width: 500px;
162
+ }
163
+
164
+ .hero-badges {
165
+ display: flex;
166
+ gap: 15px;
167
+ margin-bottom: 30px;
168
+ flex-wrap: wrap;
169
+ }
170
+
171
+ .badge {
172
+ background: rgba(46, 125, 50, 0.1);
173
+ color: var(--primary-dark);
174
+ padding: 8px 16px;
175
+ border-radius: 20px;
176
+ font-size: 0.9rem;
177
+ font-weight: 600;
178
+ display: flex;
179
+ align-items: center;
180
+ gap: 8px;
181
+ }
182
+
183
+ .hero-buttons {
184
+ display: flex;
185
+ gap: 15px;
186
+ }
187
+
188
+ .hero-image {
189
+ position: relative;
190
+ display: flex;
191
+ justify-content: center;
192
+ }
193
+
194
+ .image-card {
195
+ background: var(--white);
196
+ padding: 20px;
197
+ border-radius: var(--radius);
198
+ box-shadow: var(--shadow);
199
+ transform: rotate(-3deg);
200
+ transition: transform 0.5s ease;
201
+ }
202
+
203
+ .image-card:hover {
204
+ transform: rotate(0deg);
205
+ }
206
+
207
+ .image-card img {
208
+ width: 100%;
209
+ max-width: 400px;
210
+ border-radius: 8px;
211
+ object-fit: cover;
212
+ }
213
+
214
+ /* Placeholder visual for the hero image */
215
+ .visual-placeholder {
216
+ width: 350px;
217
+ height: 400px;
218
+ background: linear-gradient(45deg, var(--primary), var(--primary-dark));
219
+ border-radius: var(--radius);
220
+ display: flex;
221
+ align-items: center;
222
+ justify-content: center;
223
+ color: white;
224
+ font-size: 5rem;
225
+ box-shadow: var(--shadow);
226
+ flex-direction: column;
227
+ text-align: center;
228
+ padding: 20px;
229
+ }
230
+
231
+ .visual-placeholder i {
232
+ margin-bottom: 20px;
233
+ color: var(--accent);
234
+ }
235
+
236
+ .visual-placeholder span {
237
+ font-family: 'Playfair Display', serif;
238
+ font-size: 2rem;
239
+ }
240
+
241
+ /* Features Section */
242
+ .features {
243
+ padding: 80px 0;
244
+ background-color: var(--white);
245
+ }
246
+
247
+ .section-title {
248
+ text-align: center;
249
+ margin-bottom: 60px;
250
+ }
251
+
252
+ .section-title h2 {
253
+ font-size: 2.5rem;
254
+ color: var(--text-dark);
255
+ margin-bottom: 15px;
256
+ }
257
+
258
+ .section-title p {
259
+ color: var(--text-light);
260
+ }
261
+
262
+ .features-grid {
263
+ display: grid;
264
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
265
+ gap: 30px;
266
+ }
267
+
268
+ .feature-card {
269
+ padding: 30px;
270
+ border-radius: var(--radius);
271
+ background-color: var(--bg-light);
272
+ transition: all 0.3s ease;
273
+ border: 1px solid transparent;
274
+ }
275
+
276
+ .feature-card:hover {
277
+ transform: translateY(-10px);
278
+ box-shadow: var(--shadow);
279
+ border-color: var(--primary);
280
+ background-color: var(--white);
281
+ }
282
+
283
+ .feature-icon {
284
+ width: 60px;
285
+ height: 60px;
286
+ background-color: rgba(46, 125, 50, 0.1);
287
+ border-radius: 50%;
288
+ display: flex;
289
+ align-items: center;
290
+ justify-content: center;
291
+ color: var(--primary);
292
+ font-size: 1.5rem;
293
+ margin-bottom: 20px;
294
+ }
295
+
296
+ .feature-card h3 {
297
+ font-size: 1.3rem;
298
+ margin-bottom: 10px;
299
+ }
300
+
301
+ /* Short Versions Section */
302
+ .variations {
303
+ padding: 80px 0;
304
+ background-color: #fafafa;
305
+ }
306
+
307
+ .variation-grid {
308
+ display: grid;
309
+ grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
310
+ gap: 30px;
311
+ }
312
+
313
+ .variation-card {
314
+ background: var(--white);
315
+ padding: 40px;
316
+ border-radius: var(--radius);
317
+ box-shadow: 0 5px 20px rgba(0,0,0,0.05);
318
+ position: relative;
319
+ overflow: hidden;
320
+ transition: all 0.3s ease;
321
+ }
322
+
323
+ .variation-card:hover {
324
+ transform: translateY(-5px);
325
+ box-shadow: var(--shadow);
326
+ }
327
+
328
+ /* Style variations for different tones */
329
+ .var-catchy {
330
+ border-top: 5px solid #E91E63;
331
+ }
332
+
333
+ .var-emotional {
334
+ border-top: 5px solid #FF5252;
335
+ }
336
+
337
+ .var-simple {
338
+ border-top: 5px solid #2196F3;
339
+ }
340
+
341
+ .variation-card h3 {
342
+ font-size: 1.5rem;
343
+ margin-bottom: 15px;
344
+ }
345
+
346
+ .variation-card p {
347
+ color: var(--text-light);
348
+ margin-bottom: 25px;
349
+ }
350
+
351
+ .tag {
352
+ position: absolute;
353
+ top: 20px;
354
+ right: 20px;
355
+ font-size: 0.8rem;
356
+ padding: 4px 10px;
357
+ border-radius: 4px;
358
+ background: #eee;
359
+ color: #777;
360
+ }
361
+
362
+ /* Footer */
363
+ footer {
364
+ background-color: var(--text-dark);
365
+ color: var(--white);
366
+ padding: 60px 0 20px;
367
+ }
368
+
369
+ .footer-grid {
370
+ display: grid;
371
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
372
+ gap: 40px;
373
+ margin-bottom: 40px;
374
+ }
375
+
376
+ .footer-col h4 {
377
+ font-size: 1.2rem;
378
+ margin-bottom: 20px;
379
+ color: var(--accent);
380
+ }
381
+
382
+ .footer-col ul {
383
+ list-style: none;
384
+ }
385
+
386
+ .footer-col ul li {
387
+ margin-bottom: 10px;
388
+ }
389
+
390
+ .footer-col ul li a {
391
+ color: #bbb;
392
+ text-decoration: none;
393
+ transition: color 0.3s;
394
+ }
395
+
396
+ .footer-col ul li a:hover {
397
+ color: var(--white);
398
+ }
399
+
400
+ .footer-bottom {
401
+ text-align: center;
402
+ padding-top: 20px;
403
+ border-top: 1px solid rgba(255,255,255,0.1);
404
+ font-size: 0.9rem;
405
+ color: #bbb;
406
+ }
407
+
408
+ .anycoder-footer {
409
+ margin-top: 10px;
410
+ display: inline-block;
411
+ }
412
+
413
+ .anycoder-footer a {
414
+ color: var(--accent);
415
+ text-decoration: none;
416
+ }
417
+
418
+ /* Modal */
419
+ .modal {
420
+ display: none;
421
+ position: fixed;
422
+ top: 0;
423
+ left: 0;
424
+ width: 100%;
425
+ height: 100%;
426
+ background-color: rgba(0,0,0,0.5);
427
+ z-index: 2000;
428
+ align-items: center;
429
+ justify-content: center;
430
+ }
431
+
432
+ .modal-content {
433
+ background: var(--white);
434
+ padding: 40px;
435
+ border-radius: var(--radius);
436
+ max-width: 500px;
437
+ width: 90%;
438
+ text-align: center;
439
+ animation: slideIn 0.3s ease;
440
+ }
441
+
442
+ @keyframes slideIn {
443
+ from { transform: translateY(-50px); opacity: 0; }
444
+ to { transform: translateY(0); opacity: 1; }
445
+ }
446
+
447
+ .close-modal {
448
+ float: right;
449
+ cursor: pointer;
450
+ font-size: 1.5rem;
451
+ color: #aaa;
452
+ }
453
+
454
+ /* Responsive */
455
+ @media (max-width: 768px) {
456
+ .hero-content {
457
+ grid-template-columns: 1fr;
458
+ text-align: center;
459
+ }
460
+
461
+ .hero-text h1 {
462
+ font-size: 2.5rem;
463
+ }
464
+
465
+ .hero-badges {
466
+ justify-content: center;
467
+ }
468
+
469
+ .hero-buttons {
470
+ justify-content: center;
471
+ }
472
+
473
+ .visual-placeholder {
474
+ width: 100%;
475
+ height: 300px;
476
+ margin-top: 30px;
477
+ }
478
+ }
479
+ </style>
480
+ </head>
481
+ <body>
482
+
483
+ <!-- Header -->
484
+ <header>
485
+ <div class="container">
486
+ <div class="nav-wrapper">
487
+ <div class="logo">
488
+ <i class="fas fa-heart"></i>
489
+ Sylhet Match
490
+ </div>
491
+ <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="anycoder-link">
492
+ Built with <span style="font-weight:700;">anycoder</span>
493
+ </a>
494
+ </div>
495
+ </div>
496
+ </header>
497
+
498
+ <!-- Main Hero Section -->
499
+ <section class="hero">
500
+ <div class="container">
501
+ <div class="hero-content">
502
+ <div class="hero-text">
503
+ <h1>Find Your Life Partner in Sylhet District</h1>
504
+ <p>Welcome to a trusted matchmaking platform created exclusively for people from Sylhet District. Connect with genuine profiles, shared cultural values, and people who truly understand your background.</p>
505
+
506
+ <div class="hero-badges">
507
+ <div class="badge"><i class="fas fa-map-marker-alt"></i> Only Sylhet District</div>
508
+ <div class="badge"><i class="fas fa-check-circle"></i> Verified Profiles</div>
509
+ <div class="badge"><i class="fas fa-ring"></i> Serious Marriage</div>
510
+ </div>
511
+
512
+ <div class="hero-buttons">
513
+ <button class="btn btn-primary" onclick="openModal('Create Profile')">Create Profile</button>
514
+ <button class="btn btn-outline" onclick="openModal('Find Match')">Find Match</button>
515
+ </div>
516
+ </div>
517
+
518
+ <div class="hero-image">
519
+ <!-- Abstract representation of connection -->
520
+ <div class="visual-placeholder">
521
+ <i class="fas fa-tea-leaf"></i>
522
+ <span>Sylhet<br>Ties</span>
523
+ </div>
524
+ </div>
525
+ </div>
526
+ </div>
527
+ </section>
528
+
529
+ <!-- Why Choose Us / Features -->
530
+ <section class="features">
531
+ <div class="container">
532
+ <div class="section-title">
533
+ <h2>Why Choose Sylhet Match?</h2>
534
+ <p>Building bridges between hearts in the land of tea gardens.</p>
535
+ </div>
536
+
537
+ <div class="features-grid">
538
+ <div class="feature-card">
539
+ <div class="feature-icon">
540
+ <i class="fas fa-shield-alt"></i>
541
+ </div>
542
+ <h3>Verified & Trustworthy</h3>
543
+ <p>We verify every profile manually to ensure safety and authenticity for our community members.</p>
544
+ </div>
545
+ <div class="feature-card">
546
+ <div class="feature-icon">
547
+ <i class="fas fa-users"></i>
548
+ </div>
549
+ <h3>Local Community</h3>
550
+ <p>Connect with people who share your specific Sylheti dialect, customs, and family values.</p>
551
+ </div>
552
+ <div class="feature-card">
553
+ <div class="feature-icon">
554
+ <i class="fas fa-heart"></i>
555
+ </div>
556
+ <h3>Marriage Focused</h3>
557
+ <p>Our platform is dedicated to finding serious, long-term commitments leading to marriage.</p>
558
+ </div>
559
+ </div>
560
+ </div>
561
+ </section>
562
+
563
+ <!-- Alternative Versions Showcase -->
564
+ <section class="variations">
565
+ <div class="container">
566
+ <div class="section-title">
567
+ <h2>Our Philosophy</h2>
568
+ <p>We speak your language and understand your needs.</p>
569
+ </div>
570
+
571
+ <div class="variation-grid">
572
+ <!-- Version 1: Catchy -->
573
+ <div class="variation-card var-catchy">
574
+ <span class="tag">Catchy</span>
575
+ <h3>🌸 Sylhet District Matchmaking</h3>
576
+ <p>Where True Connections Begin. Meet your life partner from Sylhet, built on trust, culture, and compatibility.</p>
577
+ <button class="btn btn-primary" onclick="openModal('Join Now')">Join Now</button>
578
+ </div>
579
+
580
+ <!-- Version 2: Emotional -->
581
+ <div class="variation-card var-emotional">
582
+ <span class="tag">Emotional</span>
583
+ <h3>❤️ Looking for a Life Partner?</h3>
584
+ <p>You’re in the right place. Real people. Real intentions. Real matches — only from Sylhet District.</p>
585
+ <button class="btn btn-primary" style="background-color: #FF5252;" onclick="openModal('Get Started')">Get Started</button>
586
+ </div>
587
+
588
+ <!-- Version 3: Simple -->
589
+ <div class="variation-card var-simple">
590
+ <span class="tag">Simple</span>
591
+ <h3>✨ Find a Life Partner</h3>
592
+ <p>This platform is only for people living in or connected to Sylhet District. Create your profile and find a serious marriage match.</p>
593
+ <button class="btn btn-primary" style="background-color: #2196F3;" onclick="openModal('Join Today')">Join Today</button>
594
+ </div>
595
+ </div>
596
+ </div>
597
+ </section>
598
+
599
+ <!-- Final CTA -->
600
+ <section style="padding: 80px 0; background: var(--primary); text-align: center; color: white;">
601
+ <div class="container">
602
+ <h2 style="font-size: 2.5rem; margin-bottom: 20px;">Your perfect match from Sylhet is waiting.</h2>
603
+ <p style="margin-bottom: 30px; font-size: 1.1rem; opacity: 0.9;">Join thousands of verified profiles today.</p>
604
+ <button class="btn" style="background-color: white; color: var(--primary); font-weight: bold;" onclick="openModal('Create Free Profile')">Create Free Profile</button>
605
+ </div>
606
+ </section>
607
+
608
+ <!-- Footer -->
609
+ <footer>
610
+ <div class="container">
611
+ <div class="footer-grid">
612
+ <div class="footer-col">
613
+ <h4>Sylhet Match</h4>
614
+ <p style="color: #bbb; font-size: 0.9rem;">Connecting hearts in the Sylhet region with respect, privacy, and cultural understanding.</p>
615
+ </div>
616
+ <div class="footer-col">
617
+ <h4>Company</h4>
618
+ <ul>
619
+ <li><a href="#">About Us</a></li>
620
+ <li><a href="#">Success Stories</a></li>
621
+ <li><a href="#">Contact</a></li>
622
+ </ul>
623
+ </div>
624
+ <div class="footer-col">
625
+ <h4>Support</h4>
626
+ <ul>
627
+ <li><a href="#">Help Center</a></li>
628
+ <li><a href="#">Safety Guidelines</a></li>
629
+ <li><a href="#">Privacy Policy</a></li>
630
+ </ul>
631
+ </div>
632
+ </div>
633
+ <div class="footer-bottom">
634
+ <p>&copy; 2023 Sylhet Match. All rights reserved.</p>
635
+ <div class="anycoder-footer">
636
+ Powered by <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank">anycoder</a>
637
+ </div>
638
+ </div>
639
+ </div>
640
+ </footer>
641
+
642
+ <!-- Interactive Modal -->
643
+ <div id="actionModal" class="modal">
644
+ <div class="modal-content">
645
+ <span class="close-modal" onclick="closeModal()">&times;</span>
646
+ <div style="font-size: 3rem; color: var(--primary); margin-bottom: 20px;">
647
+ <i class="fas fa-user-plus"></i>
648
+ </div>
649
+ <h2 id="modalTitle" style="margin-bottom: 15px;">Join Now</h2>
650
+ <p style="margin-bottom: 30px; color: var(--text-light);">
651
+ Thank you for your interest in <strong>Sylhet Match</strong>. <br>
652
+ This is a demo UI. In a real application, you would be redirected to the registration form for the action: <br>
653
+ <span id="modalActionText" style="font-weight: bold; color: var(--primary);"></span>.
654
+ </p>
655
+ <button class="btn btn-primary" onclick="closeModal()">Close</button>
656
+ </div>
657
+ </div>
658
+
659
+ <script>
660
+ // Modal Logic
661
+ const modal = document.getElementById('actionModal');
662
+ const modalTitle = document.getElementById('modalTitle');
663
+ const modalActionText = document.getElementById('modalActionText');
664
+
665
+ function openModal(actionName) {
666
+ modal.style.display = 'flex';
667
+ modalTitle.innerText = actionName;
668
+ modalActionText.innerText = actionName;
669
+ }
670
+
671
+ function closeModal() {
672
+ modal.style.display = 'none';
673
+ }
674
+
675
+ // Close modal if clicking outside content
676
+ window.onclick = function(event) {
677
+ if (event.target == modal) {
678
+ closeModal();
679
+ }
680
+ }
681
+
682
+ // Add a simple animation to badges on scroll
683
+ const badges = document.querySelectorAll('.badge');
684
+
685
+ const observer = new IntersectionObserver((entries) => {
686
+ entries.forEach(entry => {
687
+ if(entry.isIntersecting) {
688
+ entry.target.style.opacity = '1';
689
+ entry.target.style.transform = 'translateY(0)';
690
+ }
691
+ });
692
+ }, { threshold: 0.1 });
693
+
694
+ badges.forEach(badge => {
695
+ badge.style.opacity = '0';
696
+ badge.style.transform = 'translateY(20px)';
697
+ badge.style.transition = 'all 0.5s ease';
698
+ observer.observe(badge);
699
+ });
700
+ </script>
701
+
702
+ </body>
703
+ </html>