Hugging Face's logo

Spaces:
toanly
/
https-vahk-org-en
Running

App Files Community
toanly commited on
Commit
5b8037d
·
verified ·
1 Parent(s): 2e5c57c

Add 2 files

Browse files
Files changed (2) hide show
  1. index.html +106 -541
  2. prompts.txt +2 -1
index.html CHANGED
@@ -91,6 +91,35 @@
91
  width: 80%;
92
  max-width: 500px;
93
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
94
  </style>
95
  </head>
96
  <body class="font-sans bg-gray-50">
@@ -116,6 +145,70 @@
116
  </div>
117
  </div>
118
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
119
  <!-- Language Selector -->
120
  <div class="bg-gray-800 text-white py-2 px-4">
121
  <div class="container mx-auto flex justify-end">
@@ -132,7 +225,12 @@
132
  <div class="container mx-auto px-4 py-6">
133
  <div class="flex justify-between items-center">
134
  <div class="flex items-center">
135
- <img src="https://upload.wikimedia.org/wikipedia/commons/2/21/Flag_of_Vietnam.svg" alt="Vietnamese Flag" class="h-12 mr-4">
 
 
 
 
 
136
  <div>
137
  <h1 class="text-3xl font-bold en editable">Vietnamese Cultural Association
138
  <span class="edit-btn" onclick="openEditModal(this, 'header-title-en')"><i class="fas fa-pencil"></i></span>
@@ -250,7 +348,12 @@
250
  </h2>
251
  <div class="flex flex-col md:flex-row items-center">
252
  <div class="md:w-1/2 mb-8 md:mb-0 md:pr-8">
253
- <img src="https://images.unsplash.com/photo-1583417319070-4a69db38a482?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Vietnamese Culture" class="rounded-lg shadow-xl w-full">
 
 
 
 
 
254
  </div>
255
  <div class="md:w-1/2">
256
  <h3 class="text-2xl font-semibold mb-4 text-gray-800 en editable">Our Mission
@@ -331,543 +434,5 @@
331
  <a href="#contact" class="inline-block bg-yellow-500 hover:bg-yellow-600 text-black px-6 py-2 rounded-lg font-semibold vi hidden-language editable">Liên hệ
332
  <span class="edit-btn" onclick="openEditModal(this, 'about-contact-btn-vi')"><i class="fas fa-pencil"></i></span>
333
  </a>
334
- </div>
335
- </div>
336
- </div>
337
- </section>
338
-
339
- <!-- Events Section -->
340
- <section id="events" class="py-16 bg-gray-100">
341
- <div class="container mx-auto px-4">
342
- <h2 class="text-4xl font-bold text-center mb-12 text-gray-800 en editable">Upcoming Events
343
- <span class="edit-btn" onclick="openEditModal(this, 'events-title-en')"><i class="fas fa-pencil"></i></span>
344
- </h2>
345
- <h2 class="text-4xl font-bold text-center mb-12 text-gray-800 vi hidden-language editable">Sự kiện sắp tới
346
- <span class="edit-btn" onclick="openEditModal(this, 'events-title-vi')"><i class="fas fa-pencil"></i></span>
347
- </h2>
348
-
349
- <!-- Events Grid -->
350
- <div id="eventsContainer" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-12">
351
- <!-- Event cards will be dynamically added here -->
352
- <div class="event-card bg-white rounded-lg overflow-hidden shadow-lg">
353
- <img src="https://images.unsplash.com/photo-1519817650390-64e93eb3e722?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Tet Festival" class="w-full h-48 object-cover">
354
- <div class="p-6">
355
- <div class="flex justify-between items-start mb-2">
356
- <h3 class="text-xl font-bold text-gray-800 en editable">Tet Festival 2024
357
- <span class="edit-btn" onclick="openEditModal(this, 'event1-title-en')"><i class="fas fa-pencil"></i></span>
358
- </h3>
359
- <h3 class="text-xl font-bold text-gray-800 vi hidden-language editable">Tết Nguyên Đán 2024
360
- <span class="edit-btn" onclick="openEditModal(this, 'event1-title-vi')"><i class="fas fa-pencil"></i></span>
361
- </h3>
362
- <span class="bg-yellow-100 text-yellow-800 text-xs px-2 py-1 rounded-full en editable">New
363
- <span class="edit-btn" onclick="openEditModal(this, 'event1-tag-en')"><i class="fas fa-pencil"></i></span>
364
- </span>
365
- <span class="bg-yellow-100 text-yellow-800 text-xs px-2 py-1 rounded-full vi hidden-language editable">Mới
366
- <span class="edit-btn" onclick="openEditModal(this, 'event1-tag-vi')"><i class="fas fa-pencil"></i></span>
367
- </span>
368
- </div>
369
- <div class="flex items-center text-gray-600 mb-3">
370
- <i class="far fa-calendar-alt mr-2"></i>
371
- <span class="en editable">Feb 10, 2024 | 10:00 AM
372
- <span class="edit-btn" onclick="openEditModal(this, 'event1-date-en')"><i class="fas fa-pencil"></i></span>
373
- </span>
374
- <span class="vi hidden-language editable">10/2/2024 | 10:00 sáng
375
- <span class="edit-btn" onclick="openEditModal(this, 'event1-date-vi')"><i class="fas fa-pencil"></i></span>
376
- </span>
377
- </div>
378
- <div class="flex items-center text-gray-600 mb-4">
379
- <i class="fas fa-map-marker-alt mr-2"></i>
380
- <span class="en editable">Central Park, New York
381
- <span class="edit-btn" onclick="openEditModal(this, 'event1-location-en')"><i class="fas fa-pencil"></i></span>
382
- </span>
383
- <span class="vi hidden-language editable">Công viên Trung tâm, New York
384
- <span class="edit-btn" onclick="openEditModal(this, 'event1-location-vi')"><i class="fas fa-pencil"></i></span>
385
- </span>
386
- </div>
387
- <p class="text-gray-600 mb-4 en editable">Celebrate the Vietnamese Lunar New Year with traditional performances, food stalls, and family activities.
388
- <span class="edit-btn" onclick="openEditModal(this, 'event1-desc-en')"><i class="fas fa-pencil"></i></span>
389
- </p>
390
- <p class="text-gray-600 mb-4 vi hidden-language editable">Đón năm mới Âm lịch với các tiết mục biểu diễn truyền thống, gian hàng ẩm thực và hoạt động gia đình.
391
- <span class="edit-btn" onclick="openEditModal(this, 'event1-desc-vi')"><i class="fas fa-pencil"></i></span>
392
- </p>
393
- <a href="#" class="inline-block bg-yellow-500 hover:bg-yellow-600 text-black px-4 py-2 rounded-lg font-semibold text-sm en editable">Learn More
394
- <span class="edit-btn" onclick="openEditModal(this, 'event1-btn-en')"><i class="fas fa-pencil"></i></span>
395
- </a>
396
- <a href="#" class="inline-block bg-yellow-500 hover:bg-yellow-600 text-black px-4 py-2 rounded-lg font-semibold text-sm vi hidden-language editable">Xem thêm
397
- <span class="edit-btn" onclick="openEditModal(this, 'event1-btn-vi')"><i class="fas fa-pencil"></i></span>
398
- </a>
399
- </div>
400
- </div>
401
-
402
- <div class="event-card bg-white rounded-lg overflow-hidden shadow-lg">
403
- <img src="https://images.unsplash.com/photo-1519817650390-64e93eb3e722?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Vietnamese Language Class" class="w-full h-48 object-cover">
404
- <div class="p-6">
405
- <h3 class="text-xl font-bold text-gray-800 mb-2 en editable">Vietnamese Language Class
406
- <span class="edit-btn" onclick="openEditModal(this, 'event2-title-en')"><i class="fas fa-pencil"></i></span>
407
- </h3>
408
- <h3 class="text-xl font-bold text-gray-800 mb-2 vi hidden-language editable">Lớp học tiếng Việt
409
- <span class="edit-btn" onclick="openEditModal(this, 'event2-title-vi')"><i class="fas fa-pencil"></i></span>
410
- </h3>
411
- <div class="flex items-center text-gray-600 mb-3">
412
- <i class="far fa-calendar-alt mr-2"></i>
413
- <span class="en editable">Every Saturday | 2:00 PM
414
- <span class="edit-btn" onclick="openEditModal(this, 'event2-date-en')"><i class="fas fa-pencil"></i></span>
415
- </span>
416
- <span class="vi hidden-language editable">Mỗi thứ Bảy | 2:00 chiều
417
- <span class="edit-btn" onclick="openEditModal(this, 'event2-date-vi')"><i class="fas fa-pencil"></i></span>
418
- </span>
419
- </div>
420
- <div class="flex items-center text-gray-600 mb-4">
421
- <i class="fas fa-map-marker-alt mr-2"></i>
422
- <span class="en editable">Community Center, Room 203
423
- <span class="edit-btn" onclick="openEditModal(this, 'event2-location-en')"><i class="fas fa-pencil"></i></span>
424
- </span>
425
- <span class="vi hidden-language editable">Trung tâm Cộng đồng, Phòng 203
426
- <span class="edit-btn" onclick="openEditModal(this, 'event2-location-vi')"><i class="fas fa-pencil"></i></span>
427
- </span>
428
- </div>
429
- <p class="text-gray-600 mb-4 en editable">Learn Vietnamese language and culture in our weekly classes for all ages and proficiency levels.
430
- <span class="edit-btn" onclick="openEditModal(this, 'event2-desc-en')"><i class="fas fa-pencil"></i></span>
431
- </p>
432
- <p class="text-gray-600 mb-4 vi hidden-language editable">Học tiếng Việt và văn hóa trong các lớp học hàng tuần dành cho mọi lứa tuổi và trình độ.
433
- <span class="edit-btn" onclick="openEditModal(this, 'event2-desc-vi')"><i class="fas fa-pencil"></i></span>
434
- </p>
435
- <a href="#" class="inline-block bg-yellow-500 hover:bg-yellow-600 text-black px-4 py-2 rounded-lg font-semibold text-sm en editable">Register Now
436
- <span class="edit-btn" onclick="openEditModal(this, 'event2-btn-en')"><i class="fas fa-pencil"></i></span>
437
- </a>
438
- <a href="#" class="inline-block bg-yellow-500 hover:bg-yellow-600 text-black px-4 py-2 rounded-lg font-semibold text-sm vi hidden-language editable">Đăng ký ngay
439
- <span class="edit-btn" onclick="openEditModal(this, 'event2-btn-vi')"><i class="fas fa-pencil"></i></span>
440
- </a>
441
- </div>
442
- </div>
443
-
444
- <div class="event-card bg-white rounded-lg overflow-hidden shadow-lg">
445
- <img src="https://images.unsplash.com/photo-1519817650390-64e93eb3e722?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Mid-Autumn Festival" class="w-full h-48 object-cover">
446
- <div class="p-6">
447
- <h3 class="text-xl font-bold text-gray-800 mb-2 en editable">Mid-Autumn Festival
448
- <span class="edit-btn" onclick="openEditModal(this, 'event3-title-en')"><i class="fas fa-pencil"></i></span>
449
- </h3>
450
- <h3 class="text-xl font-bold text-gray-800 mb-2 vi hidden-language editable">Tết Trung Thu
451
- <span class="edit-btn" onclick="openEditModal(this, 'event3-title-vi')"><i class="fas fa-pencil"></i></span>
452
- </h3>
453
- <div class="flex items-center text-gray-600 mb-3">
454
- <i class="far fa-calendar-alt mr-2"></i>
455
- <span class="en editable">Sep 29, 2023 | 6:00 PM
456
- <span class="edit-btn" onclick="openEditModal(this, 'event3-date-en')"><i class="fas fa-pencil"></i></span>
457
- </span>
458
- <span class="vi hidden-language editable">29/9/2023 | 6:00 tối
459
- <span class="edit-btn" onclick="openEditModal(this, 'event3-date-vi')"><i class="fas fa-pencil"></i></span>
460
- </span>
461
- </div>
462
- <div class="flex items-center text-gray-600 mb-4">
463
- <i class="fas fa-map-marker-alt mr-2"></i>
464
- <span class="en editable">Riverside Park
465
- <span class="edit-btn" onclick="openEditModal(this, 'event3-location-en')"><i class="fas fa-pencil"></i></span>
466
- </span>
467
- <span class="vi hidden-language editable">Công viên Riverside
468
- <span class="edit-btn" onclick="openEditModal(this, 'event3-location-vi')"><i class="fas fa-pencil"></i></span>
469
- </span>
470
- </div>
471
- <p class="text-gray-600 mb-4 en editable">Join us for lantern processions, mooncake tasting, and traditional folk games celebrating the harvest moon.
472
- <span class="edit-btn" onclick="openEditModal(this, 'event3-desc-en')"><i class="fas fa-pencil"></i></span>
473
- </p>
474
- <p class="text-gray-600 mb-4 vi hidden-language editable">Tham gia rước đèn, thưởng thức bánh trung thu và các trò chơi dân gian truyền thống mừng trăng rằm.
475
- <span class="edit-btn" onclick="openEditModal(this, 'event3-desc-vi')"><i class="fas fa-pencil"></i></span>
476
- </p>
477
- <a href="#" class="inline-block bg-yellow-500 hover:bg-yellow-600 text-black px-4 py-2 rounded-lg font-semibold text-sm en editable">View Details
478
- <span class="edit-btn" onclick="openEditModal(this, 'event3-btn-en')"><i class="fas fa-pencil"></i></span>
479
- </a>
480
- <a href="#" class="inline-block bg-yellow-500 hover:bg-yellow-600 text-black px-4 py-2 rounded-lg font-semibold text-sm vi hidden-language editable">Chi tiết
481
- <span class="edit-btn" onclick="openEditModal(this, 'event3-btn-vi')"><i class="fas fa-pencil"></i></span>
482
- </a>
483
- </div>
484
- </div>
485
- </div>
486
-
487
- <div class="text-center">
488
- <a href="#" class="inline-block border-2 border-yellow-500 text-yellow-600 hover:bg-yellow-500 hover:text-white px-6 py-3 rounded-lg font-semibold en editable">View All Events
489
- <span class="edit-btn" onclick="openEditModal(this, 'events-viewall-en')"><i class="fas fa-pencil"></i></span>
490
- </a>
491
- <a href="#" class="inline-block border-2 border-yellow-500 text-yellow-600 hover:bg-yellow-500 hover:text-white px-6 py-3 rounded-lg font-semibold vi hidden-language editable">Xem tất cả
492
- <span class="edit-btn" onclick="openEditModal(this, 'events-viewall-vi')"><i class="fas fa-pencil"></i></span>
493
- </a>
494
- </div>
495
- </div>
496
- </section>
497
-
498
- <!-- Gallery Section -->
499
- <section id="gallery" class="py-16 bg-white">
500
- <div class="container mx-auto px-4">
501
- <h2 class="text-4xl font-bold text-center mb-12 text-gray-800 en editable">Our Gallery
502
- <span class="edit-btn" onclick="openEditModal(this, 'gallery-title-en')"><i class="fas fa-pencil"></i></span>
503
- </h2>
504
- <h2 class="text-4xl font-bold text-center mb-12 text-gray-800 vi hidden-language editable">Thư viện ảnh
505
- <span class="edit-btn" onclick="openEditModal(this, 'gallery-title-vi')"><i class="fas fa-pencil"></i></span>
506
- </h2>
507
-
508
- <!-- Gallery Grid -->
509
- <div id="galleryContainer" class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 mb-12">
510
- <!-- Gallery items will be dynamically added here -->
511
- <div class="gallery-item overflow-hidden rounded-lg shadow-md">
512
- <img src="https://images.unsplash.com/photo-1519817650390-64e93eb3e722?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Cultural Performance" class="w-full h-48 object-cover">
513
- <div class="p-3 bg-gray-50">
514
- <p class="text-sm text-gray-600 en editable">Tet Festival 2023
515
- <span class="edit-btn" onclick="openEditModal(this, 'gallery1-caption-en')"><i class="fas fa-pencil"></i></span>
516
- </p>
517
- <p class="text-sm text-gray-600 vi hidden-language editable">Tết 2023
518
- <span class="edit-btn" onclick="openEditModal(this, 'gallery1-caption-vi')"><i class="fas fa-pencil"></i></span>
519
- </p>
520
- </div>
521
- </div>
522
-
523
- <div class="gallery-item overflow-hidden rounded-lg shadow-md">
524
- <img src="https://images.unsplash.com/photo-1519817650390-64e93eb3e722?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Language Class" class="w-full h-48 object-cover">
525
- <div class="p-3 bg-gray-50">
526
- <p class="text-sm text-gray-600 en editable">Vietnamese Language Class
527
- <span class="edit-btn" onclick="openEditModal(this, 'gallery2-caption-en')"><i class="fas fa-pencil"></i></span>
528
- </p>
529
- <p class="text-sm text-gray-600 vi hidden-language editable">Lớp học tiếng Việt
530
- <span class="edit-btn" onclick="openEditModal(this, 'gallery2-caption-vi')"><i class="fas fa-pencil"></i></span>
531
- </p>
532
- </div>
533
- </div>
534
-
535
- <div class="gallery-item overflow-hidden rounded-lg shadow-md">
536
- <img src="https://images.unsplash.com/photo-1519817650390-64e93eb3e722?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Community Dinner" class="w-full h-48 object-cover">
537
- <div class="p-3 bg-gray-50">
538
- <p class="text-sm text-gray-600 en editable">Monthly Community Dinner
539
- <span class="edit-btn" onclick="openEditModal(this, 'gallery3-caption-en')"><i class="fas fa-pencil"></i></span>
540
- </p>
541
- <p class="text-sm text-gray-600 vi hidden-language editable">Bữa tối cộng đồng hàng tháng
542
- <span class="edit-btn" onclick="openEditModal(this, 'gallery3-caption-vi')"><i class="fas fa-pencil"></i></span>
543
- </p>
544
- </div>
545
- </div>
546
-
547
- <div class="gallery-item overflow-hidden rounded-lg shadow-md">
548
- <img src="https://images.unsplash.com/photo-1519817650390-64e93eb3e722?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Youth Group" class="w-full h-48 object-cover">
549
- <div class="p-3 bg-gray-50">
550
- <p class="text-sm text-gray-600 en editable">Youth Group Activity
551
- <span class="edit-btn" onclick="openEditModal(this, 'gallery4-caption-en')"><i class="fas fa-pencil"></i></span>
552
- </p>
553
- <p class="text-sm text-gray-600 vi hidden-language editable">Hoạt động nhóm thanh niên
554
- <span class="edit-btn" onclick="openEditModal(this, 'gallery4-caption-vi')"><i class="fas fa-pencil"></i></span>
555
- </p>
556
- </div>
557
- </div>
558
- </div>
559
-
560
- <div class="text-center">
561
- <a href="#" class="inline-block border-2 border-yellow-500 text-yellow-600 hover:bg-yellow-500 hover:text-white px-6 py-3 rounded-lg font-semibold en editable">View More Photos
562
- <span class="edit-btn" onclick="openEditModal(this, 'gallery-viewmore-en')"><i class="fas fa-pencil"></i></span>
563
- </a>
564
- <a href="#" class="inline-block border-2 border-yellow-500 text-yellow-600 hover:bg-yellow-500 hover:text-white px-6 py-3 rounded-lg font-semibold vi hidden-language editable">Xem thêm ảnh
565
- <span class="edit-btn" onclick="openEditModal(this, 'gallery-viewmore-vi')"><i class="fas fa-pencil"></i></span>
566
- </a>
567
- </div>
568
- </div>
569
- </section>
570
-
571
- <!-- Membership Section -->
572
- <section id="membership" class="py-16 bg-gray-100">
573
- <div class="container mx-auto px-4">
574
- <h2 class="text-4xl font-bold text-center mb-12 text-gray-800 en editable">Membership Information
575
- <span class="edit-btn" onclick="openEditModal(this, 'membership-title-en')"><i class="fas fa-pencil"></i></span>
576
- </h2>
577
- <h2 class="text-4xl font-bold text-center mb-12 text-gray-800 vi hidden-language editable">Thông tin thành viên
578
- <span class="edit-btn" onclick="openEditModal(this, 'membership-title-vi')"><i class="fas fa-pencil"></i></span>
579
- </h2>
580
-
581
- <div class="max-w-4xl mx-auto mb-12">
582
- <h3 class="text-2xl font-semibold mb-6 text-gray-800 en editable">Why Become a Member?
583
- <span class="edit-btn" onclick="openEditModal(this, 'membership-why-title-en')"><i class="fas fa-pencil"></i></span>
584
- </h3>
585
- <h3 class="text-2xl font-semibold mb-6 text-gray-800 vi hidden-language editable">Tại sao nên trở thành thành viên?
586
- <span class="edit-btn" onclick="openEditModal(this, 'membership-why-title-vi')"><i class="fas fa-pencil"></i></span>
587
- </h3>
588
- <p class="text-gray-600 mb-6 en editable">Joining our association connects you with a vibrant community of Vietnamese expatriates and culture enthusiasts. Members enjoy exclusive benefits including event discounts, language class priority, cultural workshops, and networking opportunities.
589
- <span class="edit-btn" onclick="openEditModal(this, 'membership-why-p1-en')"><i class="fas fa-pencil"></i></span>
590
- </p>
591
- <p class="text-gray-600 mb-6 vi hidden-language editable">Tham gia hội kết nối bạn với cộng đồng người Việt và những người yêu văn hóa Việt Nam. Thành viên được hưởng nhiều lợi ích như giảm giá sự kiện, ưu tiên lớp học ngôn ngữ, hội thảo văn hóa và cơ hội kết nối.
592
- <span class="edit-btn" onclick="openEditModal(this, 'membership-why-p1-vi')"><i class="fas fa-pencil"></i></span>
593
- </p>
594
-
595
- <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
596
- <div class="bg-white p-6 rounded-lg shadow-md">
597
- <div class="flex items-center mb-3">
598
- <div class="bg-yellow-100 p-2 rounded-full mr-3">
599
- <i class="fas fa-ticket-alt text-yellow-600"></i>
600
- </div>
601
- <h4 class="font-semibold text-gray-800 en editable">Event Discounts
602
- <span class="edit-btn" onclick="openEditModal(this, 'membership-benefit1-title-en')"><i class="fas fa-pencil"></i></span>
603
- </h4>
604
- <h4 class="font-semibold text-gray-800 vi hidden-language editable">Giảm giá sự kiện
605
- <span class="edit-btn" onclick="openEditModal(this, 'membership-benefit1-title-vi')"><i class="fas fa-pencil"></i></span>
606
- </h4>
607
- </div>
608
- <p class="text-gray-600 en editable">Up to 50% off on all cultural events and festivals organized by the association.
609
- <span class="edit-btn" onclick="openEditModal(this, 'membership-benefit1-desc-en')"><i class="fas fa-pencil"></i></span>
610
- </p>
611
- <p class="text-gray-600 vi hidden-language editable">Giảm đến 50% cho tất cả sự kiện văn hóa và lễ hội do hội tổ chức.
612
- <span class="edit-btn" onclick="openEditModal(this, 'membership-benefit1-desc-vi')"><i class="fas fa-pencil"></i></span>
613
- </p>
614
- </div>
615
-
616
- <div class="bg-white p-6 rounded-lg shadow-md">
617
- <div class="flex items-center mb-3">
618
- <div class="bg-yellow-100 p-2 rounded-full mr-3">
619
- <i class="fas fa-book text-yellow-600"></i>
620
- </div>
621
- <h4 class="font-semibold text-gray-800 en editable">Language Classes
622
- <span class="edit-btn" onclick="openEditModal(this, 'membership-benefit2-title-en')"><i class="fas fa-pencil"></i></span>
623
- </h4>
624
- <h4 class="font-semibold text-gray-800 vi hidden-language editable">Lớp học ngôn ngữ
625
- <span class="edit-btn" onclick="openEditModal(this, 'membership-benefit2-title-vi')"><i class="fas fa-pencil"></i></span>
626
- </h4>
627
- </div>
628
- <p class="text-gray-600 en editable">Priority registration and member-only Vietnamese language classes at all levels.
629
- <span class="edit-btn" onclick="openEditModal(this, 'membership-benefit2-desc-en')"><i class="fas fa-pencil"></i></span>
630
- </p>
631
- <p class="text-gray-600 vi hidden-language editable">Ưu tiên đăng ký và lớp học tiếng Việt dành riêng cho thành viên ở mọi trình độ.
632
- <span class="edit-btn" onclick="openEditModal(this, 'membership-benefit2-desc-vi')"><i class="fas fa-pencil"></i></span>
633
- </p>
634
- </div>
635
-
636
- <div class="bg-white p-6 rounded-lg shadow-md">
637
- <div class="flex items-center mb-3">
638
- <div class="bg-yellow-100 p-2 rounded-full mr-3">
639
- <i class="fas fa-users text-yellow-600"></i>
640
- </div>
641
- <h4 class="font-semibold text-gray-800 en editable">Networking
642
- <span class="edit-btn" onclick="openEditModal(this, 'membership-benefit3-title-en')"><i class="fas fa-pencil"></i></span>
643
- </h4>
644
- <h4 class="font-semibold text-gray-800 vi hidden-language editable">Kết nối
645
- <span class="edit-btn" onclick="openEditModal(this, 'membership-benefit3-title-vi')"><i class="fas fa-pencil"></i></span>
646
- </h4>
647
- </div>
648
- <p class="text-gray-600 en editable">Access to our professional network and business directory within the Vietnamese community.
649
- <span class="edit-btn" onclick="openEditModal(this, 'membership-benefit3-desc-en')"><i class="fas fa-pencil"></i></span>
650
- </p>
651
- <p class="text-gray-600 vi hidden-language editable">Truy cập mạng lưới chuyên nghiệp và danh bạ doanh nghiệp trong cộng đồng người Việt.
652
- <span class="edit-btn" onclick="openEditModal(this, 'membership-benefit3-desc-vi')"><i class="fas fa-pencil"></i></span>
653
- </p>
654
- </div>
655
-
656
- <div class="bg-white p-6 rounded-lg shadow-md">
657
- <div class="flex items-center mb-3">
658
- <div class="bg-yellow-100 p-2 rounded-full mr-3">
659
- <i class="fas fa-newspaper text-yellow-600"></i>
660
- </div>
661
- <h4 class="font-semibold text-gray-800 en editable">Newsletter
662
- <span class="edit-btn" onclick="openEditModal(this, 'membership-benefit4-title-en')"><i class="fas fa-pencil"></i></span>
663
- </h4>
664
- <h4 class="font-semibold text-gray-800 vi hidden-language editable">Bản tin
665
- <span class="edit-btn" onclick="openEditModal(this, 'membership-benefit4-title-vi')"><i class="fas fa-pencil"></i></span>
666
- </h4>
667
- </div>
668
- <p class="text-gray-600 en editable">Exclusive monthly newsletter with cultural insights, recipes, and community updates.
669
- <span class="edit-btn" onclick="openEditModal(this, 'membership-benefit4-desc-en')"><i class="fas fa-pencil"></i></span>
670
- </p>
671
- <p class="text-gray-600 vi hidden-language editable">Bản tin hàng tháng độc quyền với thông tin văn hóa, công thức nấu ăn và cập nhật cộng đồng.
672
- <span class="edit-btn" onclick="openEditModal(this, 'membership-benefit4-desc-vi')"><i class="fas fa-pencil"></i></span>
673
- </p>
674
- </div>
675
- </div>
676
- </div>
677
-
678
- <h3 class="text-2xl font-semibold mb-6 text-center text-gray-800 en editable">Membership Types
679
- <span class="edit-btn" onclick="openEditModal(this, 'membership-types-title-en')"><i class="fas fa-pencil"></i></span>
680
- </h3>
681
- <h3 class="text-2xl font-semibold mb-6 text-center text-gray-800 vi hidden-language editable">Các loại thành viên
682
- <span class="edit-btn" onclick="openEditModal(this, 'membership-types-title-vi')"><i class="fas fa-pencil"></i></span>
683
- </h3>
684
-
685
- <!-- Membership Table -->
686
- <div class="overflow-x-auto mb-12">
687
- <table class="min-w-full bg-white rounded-lg overflow-hidden shadow-md">
688
- <thead class="bg-yellow-500 text-black">
689
- <tr>
690
- <th class="py-3 px-4 text-left en editable">Membership Type
691
- <span class="edit-btn" onclick="openEditModal(this, 'membership-table-header1-en')"><i class="fas fa-pencil"></i></span>
692
- </th>
693
- <th class="py-3 px-4 text-left vi hidden-language editable">Loại thành viên
694
- <span class="edit-btn" onclick="openEditModal(this, 'membership-table-header1-vi')"><i class="fas fa-pencil"></i></span>
695
- </th>
696
- <th class="py-3 px-4 text-left en editable">Duration
697
- <span class="edit-btn" onclick="openEditModal(this, 'membership-table-header2-en')"><i class="fas fa-pencil"></i></span>
698
- </th>
699
- <th class="py-3 px-4 text-left vi hidden-language editable">Thời hạn
700
- <span class="edit-btn" onclick="openEditModal(this, 'membership-table-header2-vi')"><i class="fas fa-pencil"></i></span>
701
- </th>
702
- <th class="py-3 px-4 text-left en editable">Price
703
- <span class="edit-btn" onclick="openEditModal(this, 'membership-table-header3-en')"><i class="fas fa-pencil"></i></span>
704
- </th>
705
- <th class="py-3 px-4 text-left vi hidden-language editable">Giá
706
- <span class="edit-btn" onclick="openEditModal(this, 'membership-table-header3-vi')"><i class="fas fa-pencil"></i></span>
707
- </th>
708
- <th class="py-3 px-4 text-left en editable">Benefits
709
- <span class="edit-btn" onclick="openEditModal(this, 'membership-table-header4-en')"><i class="fas fa-pencil"></i></span>
710
- </th>
711
- <th class="py-3 px-4 text-left vi hidden-language editable">Lợi ích
712
- <span class="edit-btn" onclick="openEditModal(this, 'membership-table-header4-vi')"><i class="fas fa-pencil"></i></span>
713
- </th>
714
- <th class="py-3 px-4 text-left"></th>
715
- </tr>
716
- </thead>
717
- <tbody class="divide-y divide-gray-200">
718
- <tr>
719
- <td class="py-4 px-4 font-medium en editable">Individual
720
- <span class="edit-btn" onclick="openEditModal(this, 'membership-type1-name-en')"><i class="fas fa-pencil"></i></span>
721
- </td>
722
- <td class="py-4 px-4 font-medium vi hidden-language editable">Cá nhân
723
- <span class="edit-btn" onclick="openEditModal(this, 'membership-type1-name-vi')"><i class="fas fa-pencil"></i></span>
724
- </td>
725
- <td class="py-4 px-4 en editable">1 Year
726
- <span class="edit-btn" onclick="openEditModal(this, 'membership-type1-duration-en')"><i class="fas fa-pencil"></i></span>
727
- </td>
728
- <td class="py-4 px-4 vi hidden-language editable">1 Năm
729
- <span class="edit-btn" onclick="openEditModal(this, 'membership-type1-duration-vi')"><i class="fas fa-pencil"></i></span>
730
- </td>
731
- <td class="py-4 px-4 editable">$50
732
- <span class="edit-btn" onclick="openEditModal(this, 'membership-type1-price')"><i class="fas fa-pencil"></i></span>
733
- </td>
734
- <td class="py-4 px-4 editable">1,150,000₫
735
- <span class="edit-btn" onclick="openEditModal(this, 'membership-type1-price-vnd')"><i class="fas fa-pencil"></i></span>
736
- </td>
737
- <td class="py-4 px-4 en editable">All basic benefits for one person
738
- <span class="edit-btn" onclick="openEditModal(this, 'membership-type1-benefits-en')"><i class="fas fa-pencil"></i></span>
739
- </td>
740
- <td class="py-4 px-4 vi hidden-language editable">Tất cả lợi ích cơ bản cho một người
741
- <span class="edit-btn" onclick="openEditModal(this, 'membership-type1-benefits-vi')"><i class="fas fa-pencil"></i></span>
742
- </td>
743
- <td class="py-4 px-4">
744
- <button class="bg-yellow-500 hover:bg-yellow-600 text-black px-4 py-2 rounded-lg font-semibold text-sm en editable">Join Now
745
- <span class="edit-btn" onclick="openEditModal(this, 'membership-type1-btn-en')"><i class="fas fa-pencil"></i></span>
746
- </button>
747
- <button class="bg-yellow-500 hover:bg-yellow-600 text-black px-4 py-2 rounded-lg font-semibold text-sm vi hidden-language editable">Tham gia
748
- <span class="edit-btn" onclick="openEditModal(this, 'membership-type1-btn-vi')"><i class="fas fa-pencil"></i></span>
749
- </button>
750
- </td>
751
- </tr>
752
- <tr class="bg-gray-50">
753
- <td class="py-4 px-4 font-medium en editable">Family
754
- <span class="edit-btn" onclick="openEditModal(this, 'membership-type2-name-en')"><i class="fas fa-pencil"></i></span>
755
- </td>
756
- <td class="py-4 px-4 font-medium vi hidden-language editable">Gia đình
757
- <span class="edit-btn" onclick="openEditModal(this, 'membership-type2-name-vi')"><i class="fas fa-pencil"></i></span>
758
- </td>
759
- <td class="py-4 px-4 en editable">1 Year
760
- <span class="edit-btn" onclick="openEditModal(this, 'membership-type2-duration-en')"><i class="fas fa-pencil"></i></span>
761
- </td>
762
- <td class="py-4 px-4 vi hidden-language editable">1 Năm
763
- <span class="edit-btn" onclick="openEditModal(this, 'membership-type2-duration-vi')"><i class="fas fa-pencil"></i></span>
764
- </td>
765
- <td class="py-4 px-4 editable">$120
766
- <span class="edit-btn" onclick="openEditModal(this, 'membership-type2-price')"><i class="fas fa-pencil"></i></span>
767
- </td>
768
- <td class="py-4 px-4 editable">2,760,000₫
769
- <span class="edit-btn" onclick="openEditModal(this, 'membership-type2-price-vnd')"><i class="fas fa-pencil"></i></span>
770
- </td>
771
- <td class="py-4 px-4 en editable">All benefits for up to 4 family members
772
- <span class="edit-btn" onclick="openEditModal(this, 'membership-type2-benefits-en')"><i class="fas fa-pencil"></i></span>
773
- </td>
774
- <td class="py-4 px-4 vi hidden-language editable">Tất cả lợi ích cho tối đa 4 thành viên gia đình
775
- <span class="edit-btn" onclick="openEditModal(this, 'membership-type2-benefits-vi')"><i class="fas fa-pencil"></i></span>
776
- </td>
777
- <td class="py-4 px-4">
778
- <button class="bg-yellow-500 hover:bg-yellow-600 text-black px-4 py-2 rounded-lg font-semibold text-sm en editable">Join Now
779
- <span class="edit-btn" onclick="openEditModal(this, 'membership-type2-btn-en')"><i class="fas fa-pencil"></i></span>
780
- </button>
781
- <button class="bg-yellow-500 hover:bg-yellow-600 text-black px-4 py-2 rounded-lg font-semibold text-sm vi hidden-language editable">Tham gia
782
- <span class="edit-btn" onclick="openEditModal(this, 'membership-type2-btn-vi')"><i class="fas fa-pencil"></i></span>
783
- </button>
784
- </td>
785
- </tr>
786
- <tr>
787
- <td class="py-4 px-4 font-medium en editable">Student
788
- <span class="edit-btn" onclick="openEditModal(this, 'membership-type3-name-en')"><i class="fas fa-pencil"></i></span>
789
- </td>
790
- <td class="py-4 px-4 font-medium vi hidden-language editable">Sinh viên
791
- <span class="edit-btn" onclick="openEditModal(this, 'membership-type3-name-vi')"><i class="fas fa-pencil"></i></span>
792
- </td>
793
- <td class="py-4 px-4 en editable">1 Year
794
- <span class="edit-btn" onclick="openEditModal(this, 'membership-type3-duration-en')"><i class="fas fa-pencil"></i></span>
795
- </td>
796
- <td class="py-4 px-4 vi hidden-language editable">1 Năm
797
- <span class="edit-btn" onclick="openEditModal(this, 'membership-type3-duration-vi')"><i class="fas fa-pencil"></i></span>
798
- </td>
799
- <td class="py-4 px-4 editable">$30
800
- <span class="edit-btn" onclick="openEditModal(this, 'membership-type3-price')"><i class="fas fa-pencil"></i></span>
801
- </td>
802
- <td class="py-4 px-4 editable">690,000₫
803
- <span class="edit-btn" onclick="openEditModal(this, 'membership-type3-price-vnd')"><i class="fas fa-pencil"></i></span>
804
- </td>
805
- <td class="py-4 px-4 en editable">Basic benefits with student ID
806
- <span class="edit-btn" onclick="openEditModal(this, 'membership-type3-benefits-en')"><i class="fas fa-pencil"></i></span>
807
- </td>
808
- <td class="py-4 px-4 vi hidden-language editable">Lợi ích cơ bản với thẻ sinh viên
809
- <span class="edit-btn" onclick="openEditModal(this, 'membership-type3-benefits-vi')"><i class="fas fa-pencil"></i></span>
810
- </td>
811
- <td class="py-4 px-4">
812
- <button class="bg-yellow-500 hover:bg-yellow-600 text-black px-4 py-2 rounded-lg font-semibold text-sm en editable">Join Now
813
- <span class="edit-btn" onclick="openEditModal(this, 'membership-type3-btn-en')"><i class="fas fa-pencil"></i></span>
814
- </button>
815
- <button class="bg-yellow-500 hover:bg-yellow-600 text-black px-4 py-2 rounded-lg font-semibold text-sm vi hidden-language editable">Tham gia
816
- <span class="edit-btn" onclick="openEditModal(this, 'membership-type3-btn-vi')"><i class="fas fa-pencil"></i></span>
817
- </button>
818
- </td>
819
- </tr>
820
- <tr class="bg-gray-50">
821
- <td class="py-4 px-4 font-medium en editable">Lifetime
822
- <span class="edit-btn" onclick="openEditModal(this, 'membership-type4-name-en')"><i class="fas fa-pencil"></i></span>
823
- </td>
824
- <td class="py-4 px-4 font-medium vi hidden-language editable">Trọn đời
825
- <span class="edit-btn" onclick="openEditModal(this, 'membership-type4-name-vi')"><i class="fas fa-pencil"></i></span>
826
- </td>
827
- <td class="py-4 px-4 en editable">Lifetime
828
- <span class="edit-btn" onclick="openEditModal(this, 'membership-type4-duration-en')"><i class="fas fa-pencil"></i></span>
829
- </td>
830
- <td class="py-4 px-4 vi hidden-language editable">Trọn đời
831
- <span class="edit-btn" onclick="openEditModal(this, 'membership-type4-duration-vi')"><i class="fas fa-pencil"></i></span>
832
- </td>
833
- <td class="py-4 px-4 editable">$500
834
- <span class="edit-btn" onclick="openEditModal(this, 'membership-type4-price')"><i class="fas fa-pencil"></i></span>
835
- </td>
836
- <td class="py-4 px-4 editable">11,500,000₫
837
- <span class="edit-btn" onclick="openEditModal(this, 'membership-type4-price-vnd')"><i class="fas fa-pencil"></i></span>
838
- </td>
839
- <td class="py-4 px-4 en editable">All benefits plus VIP event invitations
840
- <span class="edit-btn" onclick="openEditModal(this, 'membership-type4-benefits-en')"><i class="fas fa-pencil"></i></span>
841
- </td>
842
- <td class="py-4 px-4 vi hidden-language editable">Tất cả lợi ích cộng với lời mời sự kiện VIP
843
- <span class="edit-btn" onclick="openEditModal(this, 'membership-type4-benefits-vi')"><i class="fas fa-pencil"></i></span>
844
- </td>
845
- <td class="py-4 px-4">
846
- <button class="bg-yellow-500 hover:bg-yellow-600 text-black px-4 py-2 rounded-lg font-semibold text-sm en editable">Join Now
847
- <span class="edit-btn" onclick="openEditModal(this, 'membership-type4-btn-en')"><i class="fas fa-pencil"></i></span>
848
- </button>
849
- <button class="bg-yellow-500 hover:bg-yellow-600 text-black px-4 py-2 rounded-lg font-semibold text-sm vi hidden-language editable">Tham gia
850
- <span class="edit-btn" onclick="openEditModal(this, 'membership-type4-btn-vi')"><i class="fas fa-pencil"></i></span>
851
- </button>
852
- </td>
853
- </tr>
854
- </tbody>
855
- </table>
856
- </div>
857
-
858
- <div class="bg-white p-8 rounded-lg shadow-lg max-w-3xl mx-auto">
859
- <h3 class="text-2xl font-semibold mb-4 text-center text-gray-800 en editable">Frequently Asked Questions
860
- <span class="edit-btn" onclick="openEditModal(this, 'faq-title-en')"><i class="fas fa-pencil"></i></span>
861
- </h3>
862
- <h3 class="text-2xl font-semibold mb-4 text-center text-gray-800 vi hidden-language editable">Câu hỏi thường gặp
863
- <span class="edit-btn" onclick="openEditModal(this, 'faq-title-vi')"><i class="fas fa-pencil"></i></span>
864
- </h3>
865
-
866
- <div class="space-y-4">
867
- <div class="border-b border-gray-200 pb-4">
868
- <button class="flex justify-between items-center w-full text-left font-medium text-gray-800">
869
- <span class="en editable">How do I renew my membership?
870
- <span class="edit-btn" onclick="openEditModal(this, 'faq1-question-en')"><i class="fas fa-pencil"></i></span>
871
- </span>
872
-
873
  </html>
 
91
  width: 80%;
92
  max-width: 500px;
93
  }
94
+ .image-editable {
95
+ position: relative;
96
+ }
97
+ .image-editable:hover .edit-btn {
98
+ display: flex;
99
+ }
100
+ .image-upload-btn {
101
+ position: absolute;
102
+ bottom: 10px;
103
+ right: 10px;
104
+ background: #eab308;
105
+ color: white;
106
+ border-radius: 50%;
107
+ width: 30px;
108
+ height: 30px;
109
+ display: flex;
110
+ align-items: center;
111
+ justify-content: center;
112
+ cursor: pointer;
113
+ font-size: 14px;
114
+ z-index: 10;
115
+ display: none;
116
+ }
117
+ .image-editable:hover .image-upload-btn {
118
+ display: flex;
119
+ }
120
+ .hidden {
121
+ display: none;
122
+ }
123
  </style>
124
  </head>
125
  <body class="font-sans bg-gray-50">
 
145
  </div>
146
  </div>
147
 
148
+ <!-- Login Modal -->
149
+ <div id="loginModal" class="edit-modal hidden">
150
+ <div class="edit-modal-content">
151
+ <h3 class="text-xl font-bold mb-4 en">Admin Login</h3>
152
+ <h3 class="text-xl font-bold mb-4 vi hidden-language">Đăng nhập Quản trị</h3>
153
+ <div class="mb-4">
154
+ <label class="block text-gray-700 mb-2 en">Username</label>
155
+ <label class="block text-gray-700 mb-2 vi hidden-language">Tên đăng nhập</label>
156
+ <input type="text" id="adminUsername" class="w-full px-3 py-2 border rounded">
157
+ </div>
158
+ <div class="mb-6">
159
+ <label class="block text-gray-700 mb-2 en">Password</label>
160
+ <label class="block text-gray-700 mb-2 vi hidden-language">Mật khẩu</label>
161
+ <input type="password" id="adminPassword" class="w-full px-3 py-2 border rounded">
162
+ </div>
163
+ <div class="flex justify-between">
164
+ <button id="cancelLoginBtn" class="bg-gray-500 hover:bg-gray-600 text-white px-4 py-2 rounded en">
165
+ Cancel
166
+ </button>
167
+ <button id="cancelLoginBtn" class="bg-gray-500 hover:bg-gray-600 text-white px-4 py-2 rounded vi hidden-language">
168
+ Hủy
169
+ </button>
170
+ <button id="confirmLoginBtn" class="bg-yellow-500 hover:bg-yellow-600 text-black px-4 py-2 rounded en">
171
+ Login
172
+ </button>
173
+ <button id="confirmLoginBtn" class="bg-yellow-500 hover:bg-yellow-600 text-black px-4 py-2 rounded vi hidden-language">
174
+ Đăng nhập
175
+ </button>
176
+ </div>
177
+ </div>
178
+ </div>
179
+
180
+ <!-- Image Upload Modal -->
181
+ <div id="imageUploadModal" class="edit-modal hidden">
182
+ <div class="edit-modal-content">
183
+ <h3 class="text-xl font-bold mb-4 en">Change Image</h3>
184
+ <h3 class="text-xl font-bold mb-4 vi hidden-language">Thay đổi ảnh</h3>
185
+ <div class="mb-4">
186
+ <label class="block text-gray-700 mb-2 en">Image URL</label>
187
+ <label class="block text-gray-700 mb-2 vi hidden-language">Đường dẫn ảnh</label>
188
+ <input type="text" id="imageUrlInput" class="w-full px-3 py-2 border rounded" placeholder="https://example.com/image.jpg">
189
+ </div>
190
+ <div class="mb-4">
191
+ <label class="block text-gray-700 mb-2 en">Or upload file</label>
192
+ <label class="block text-gray-700 mb-2 vi hidden-language">Hoặc tải lên</label>
193
+ <input type="file" id="imageFileInput" class="w-full px-3 py-2 border rounded" accept="image/*">
194
+ </div>
195
+ <div class="flex justify-between">
196
+ <button id="cancelImageUploadBtn" class="bg-gray-500 hover:bg-gray-600 text-white px-4 py-2 rounded en">
197
+ Cancel
198
+ </button>
199
+ <button id="cancelImageUploadBtn" class="bg-gray-500 hover:bg-gray-600 text-white px-4 py-2 rounded vi hidden-language">
200
+ Hủy
201
+ </button>
202
+ <button id="confirmImageUploadBtn" class="bg-yellow-500 hover:bg-yellow-600 text-black px-4 py-2 rounded en">
203
+ Update Image
204
+ </button>
205
+ <button id="confirmImageUploadBtn" class="bg-yellow-500 hover:bg-yellow-600 text-black px-4 py-2 rounded vi hidden-language">
206
+ Cập nhật ảnh
207
+ </button>
208
+ </div>
209
+ </div>
210
+ </div>
211
+
212
  <!-- Language Selector -->
213
  <div class="bg-gray-800 text-white py-2 px-4">
214
  <div class="container mx-auto flex justify-end">
 
225
  <div class="container mx-auto px-4 py-6">
226
  <div class="flex justify-between items-center">
227
  <div class="flex items-center">
228
+ <div class="image-editable mr-4">
229
+ <img src="https://upload.wikimedia.org/wikipedia/commons/2/21/Flag_of_Vietnam.svg" alt="Vietnamese Flag" class="h-12">
230
+ <div class="image-upload-btn" onclick="openImageUploadModal(this, 'header-flag')">
231
+ <i class="fas fa-camera"></i>
232
+ </div>
233
+ </div>
234
  <div>
235
  <h1 class="text-3xl font-bold en editable">Vietnamese Cultural Association
236
  <span class="edit-btn" onclick="openEditModal(this, 'header-title-en')"><i class="fas fa-pencil"></i></span>
 
348
  </h2>
349
  <div class="flex flex-col md:flex-row items-center">
350
  <div class="md:w-1/2 mb-8 md:mb-0 md:pr-8">
351
+ <div class="image-editable">
352
+ <img src="https://images.unsplash.com/photo-1583417319070-4a69db38a482?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Vietnamese Culture" class="rounded-lg shadow-xl w-full">
353
+ <div class="image-upload-btn" onclick="openImageUploadModal(this, 'about-image')">
354
+ <i class="fas fa-camera"></i>
355
+ </div>
356
+ </div>
357
  </div>
358
  <div class="md:w-1/2">
359
  <h3 class="text-2xl font-semibold mb-4 text-gray-800 en editable">Our Mission
 
434
  <a href="#contact" class="inline-block bg-yellow-500 hover:bg-yellow-600 text-black px-6 py-2 rounded-lg font-semibold vi hidden-language editable">Liên hệ
435
  <span class="edit-btn" onclick="openEditModal(this, 'about-contact-btn-vi')"><i class="fas fa-pencil"></i></span>
436
  </a>
437
+ </极
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
438
  </html>
prompts.txt CHANGED
@@ -1,2 +1,3 @@
1
  make the website in 2 languages english and Vietnamese
2
- what is the admin login to edit the website
 
 
1
  make the website in 2 languages english and Vietnamese
2
+ what is the admin login to edit the website
3
+ update to be able to edit upload change images