Hugging Face's logo

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

App Files Community
toanly commited on
Commit
bc47dc8
·
verified ·
1 Parent(s): 8b75234

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +6 -4
  2. index.html +754 -19
  3. prompts.txt +1 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Https Vahk Org En
3
- emoji: ⚡
4
- colorFrom: pink
5
  colorTo: purple
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: https-vahk-org-en
3
+ emoji: 🐳
4
+ colorFrom: purple
5
  colorTo: purple
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,754 @@
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>Vietnamese Cultural Association</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ .custom-bg {
11
+ background-image: url('https://images.unsplash.com/photo-1519046904884-53103b34b206?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80');
12
+ background-size: cover;
13
+ background-position: center;
14
+ }
15
+ .admin-panel {
16
+ display: none;
17
+ }
18
+ .show-admin {
19
+ display: block;
20
+ }
21
+ .event-card {
22
+ transition: transform 0.3s ease;
23
+ }
24
+ .event-card:hover {
25
+ transform: translateY(-5px);
26
+ }
27
+ .gallery-item {
28
+ transition: all 0.3s ease;
29
+ }
30
+ .gallery-item:hover {
31
+ transform: scale(1.03);
32
+ box-shadow: 0 10px 20px rgba(0,0,0,0.2);
33
+ }
34
+ .language-option {
35
+ cursor: pointer;
36
+ transition: all 0.3s ease;
37
+ }
38
+ .language-option:hover {
39
+ transform: scale(1.05);
40
+ }
41
+ .active-language {
42
+ font-weight: bold;
43
+ color: #eab308;
44
+ border-bottom: 2px solid #eab308;
45
+ }
46
+ .hidden-language {
47
+ display: none;
48
+ }
49
+ </style>
50
+ </head>
51
+ <body class="font-sans bg-gray-50">
52
+ <!-- Language Selector -->
53
+ <div class="bg-gray-800 text-white py-2 px-4">
54
+ <div class="container mx-auto flex justify-end">
55
+ <div class="flex space-x-4">
56
+ <div id="englishBtn" class="language-option active-language px-2">English</div>
57
+ <div id="vietnameseBtn" class="language-option px-2">Tiếng Việt</div>
58
+ </div>
59
+ </div>
60
+ </div>
61
+
62
+ <!-- Header -->
63
+ <header class="custom-bg text-white">
64
+ <div class="bg-black bg-opacity-60">
65
+ <div class="container mx-auto px-4 py-6">
66
+ <div class="flex justify-between items-center">
67
+ <div class="flex items-center">
68
+ <img src="https://upload.wikimedia.org/wikipedia/commons/2/21/Flag_of_Vietnam.svg" alt="Vietnamese Flag" class="h-12 mr-4">
69
+ <div>
70
+ <h1 class="text-3xl font-bold en">Vietnamese Cultural Association</h1>
71
+ <h1 class="text-3xl font-bold vi hidden-language">Hội Văn Hóa Việt Nam</h1>
72
+ <p class="text-yellow-300 en">Preserving heritage, building community</p>
73
+ <p class="text-yellow-300 vi hidden-language">Gìn giữ di sản, xây dựng cộng đồng</p>
74
+ </div>
75
+ </div>
76
+ <button id="adminLoginBtn" class="bg-yellow-500 hover:bg-yellow-600 text-black px-4 py-2 rounded-lg font-semibold en">
77
+ Admin Login
78
+ </button>
79
+ <button id="adminLoginBtn" class="bg-yellow-500 hover:bg-yellow-600 text-black px-4 py-2 rounded-lg font-semibold vi hidden-language">
80
+ Đăng nhập Quản trị
81
+ </button>
82
+ </div>
83
+ </div>
84
+ </div>
85
+
86
+ <!-- Navigation -->
87
+ <nav class="bg-yellow-600 text-white">
88
+ <div class="container mx-auto px-4">
89
+ <ul class="flex justify-center space-x-8 py-4">
90
+ <li><a href="#home" class="hover:text-yellow-200 font-medium en">Home</a></li>
91
+ <li><a href="#home" class="hover:text-yellow-200 font-medium vi hidden-language">Trang chủ</a></li>
92
+ <li><a href="#about" class="hover:text-yellow-200 font-medium en">About Us</a></li>
93
+ <li><a href="#about" class="hover:text-yellow-200 font-medium vi hidden-language">Về chúng tôi</a></li>
94
+ <li><a href="#events" class="hover:text-yellow-200 font-medium en">Events</a></li>
95
+ <li><a href="#events" class="hover:text-yellow-200 font-medium vi hidden-language">Sự kiện</a></li>
96
+ <li><a href="#gallery" class="hover:text-yellow-200 font-medium en">Gallery</a></li>
97
+ <li><a href="#gallery" class="hover:text-yellow-200 font-medium vi hidden-language">Thư viện ảnh</a></li>
98
+ <li><a href="#membership" class="hover:text-yellow-200 font-medium en">Membership</a></li>
99
+ <li><a href="#membership" class="hover:text-yellow-200 font-medium vi hidden-language">Thành viên</a></li>
100
+ <li><a href="#contact" class="hover:text-yellow-200 font-medium en">Contact</a></li>
101
+ <li><a href="#contact" class="hover:text-yellow-200 font-medium vi hidden-language">Liên hệ</a></li>
102
+ </ul>
103
+ </div>
104
+ </nav>
105
+ </header>
106
+
107
+ <!-- Main Content -->
108
+ <main>
109
+ <!-- Hero Section -->
110
+ <section id="home" class="py-20 custom-bg text-white">
111
+ <div class="bg-black bg-opacity-60 py-16">
112
+ <div class="container mx-auto px-4 text-center">
113
+ <h2 class="text-5xl font-bold mb-6 en">Welcome to Our Community</h2>
114
+ <h2 class="text-5xl font-bold mb-6 vi hidden-language">Chào mừng đến với Cộng đồng</h2>
115
+ <p class="text-xl mb-8 max-w-3xl mx-auto en">Celebrating Vietnamese culture, traditions, and values through events, education, and community engagement.</p>
116
+ <p class="text-xl mb-8 max-w-3xl mx-auto vi hidden-language">Tôn vinh văn hóa, truyền thống và giá trị Việt Nam thông qua các sự kiện, giáo dục và gắn kết cộng đồng.</p>
117
+ <div class="flex justify-center space-x-4">
118
+ <a href="#membership" class="bg-yellow-500 hover:bg-yellow-600 text-black px-6 py-3 rounded-lg font-semibold text-lg en">Join Us</a>
119
+ <a href="#membership" class="bg-yellow-500 hover:bg-yellow-600 text-black px-6 py-3 rounded-lg font-semibold text-lg vi hidden-language">Tham gia</a>
120
+ <a href="#events" class="bg-transparent border-2 border-white hover:bg-white hover:text-black px-6 py-3 rounded-lg font-semibold text-lg en">Upcoming Events</a>
121
+ <a href="#events" class="bg-transparent border-2 border-white hover:bg-white hover:text-black px-6 py-3 rounded-lg font-semibold text-lg vi hidden-language">Sự kiện sắp tới</a>
122
+ </div>
123
+ </div>
124
+ </div>
125
+ </section>
126
+
127
+ <!-- About Us Section -->
128
+ <section id="about" class="py-16 bg-white">
129
+ <div class="container mx-auto px-4">
130
+ <h2 class="text-4xl font-bold text-center mb-12 text-gray-800 en">About Our Association</h2>
131
+ <h2 class="text-4xl font-bold text-center mb-12 text-gray-800 vi hidden-language">Về Hội chúng tôi</h2>
132
+ <div class="flex flex-col md:flex-row items-center">
133
+ <div class="md:w-1/2 mb-8 md:mb-0 md:pr-8">
134
+ <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">
135
+ </div>
136
+ <div class="md:w-1/2">
137
+ <h3 class="text-2xl font-semibold mb-4 text-gray-800 en">Our Mission</h3>
138
+ <h3 class="text-2xl font-semibold mb-4 text-gray-800 vi hidden-language">Sứ mệnh</h3>
139
+ <p class="text-gray-600 mb-4 en">Founded in 1995, the Vietnamese Cultural Association is dedicated to preserving and promoting Vietnamese heritage, language, and traditions among the Vietnamese diaspora and the wider community.</p>
140
+ <p class="text-gray-600 mb-4 vi hidden-language">Được thành lập năm 1995, Hội Văn Hóa Việt Nam cam kết bảo tồn và quảng bá di sản, ngôn ngữ và truyền thống Việt Nam trong cộng đồng người Việt và cộng đồng rộng lớn hơn.</p>
141
+ <p class="text-gray-600 mb-6 en">We organize cultural events, language classes, and community services to foster understanding and appreciation of Vietnamese culture while supporting our members in their personal and professional development.</p>
142
+ <p class="text-gray-600 mb-6 vi hidden-language">Chúng tôi tổ chức các sự kiện văn hóa, lớp học ngôn ngữ và dịch vụ cộng đồng để thúc đẩy sự hiểu biết và trân trọng văn hóa Việt Nam, đồng thời hỗ trợ thành viên phát triển cá nhân và nghề nghiệp.</p>
143
+
144
+ <h3 class="text-2xl font-semibold mb-4 text-gray-800 en">Our Values</h3>
145
+ <h3 class="text-2xl font-semibold mb-4 text-gray-800 vi hidden-language">Giá trị cốt lõi</h3>
146
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
147
+ <div class="flex items-start">
148
+ <div class="bg-yellow-100 p-2 rounded-full mr-3">
149
+ <i class="fas fa-hands-helping text-yellow-600"></i>
150
+ </div>
151
+ <p class="text-gray-600 en">Community</p>
152
+ <p class="text-gray-600 vi hidden-language">Cộng đồng</p>
153
+ </div>
154
+ <div class="flex items-start">
155
+ <div class="bg-yellow-100 p-2 rounded-full mr-3">
156
+ <i class="fas fa-book text-yellow-600"></i>
157
+ </div>
158
+ <p class="text-gray-600 en">Education</p>
159
+ <p class="text-gray-600 vi hidden-language">Giáo dục</p>
160
+ </div>
161
+ <div class="flex items-start">
162
+ <div class="bg-yellow-100 p-2 rounded-full mr-3">
163
+ <i class="fas fa-history text-yellow-600"></i>
164
+ </div>
165
+ <p class="text-gray-600 en">Heritage</p>
166
+ <p class="text-gray-600 vi hidden-language">Di sản</p>
167
+ </div>
168
+ <div class="flex items-start">
169
+ <div class="bg-yellow-100 p-2 rounded-full mr-3">
170
+ <i class="fas fa-handshake text-yellow-600"></i>
171
+ </div>
172
+ <p class="text-gray-600 en">Unity</p>
173
+ <p class="text-gray-600 vi hidden-language">Đoàn kết</p>
174
+ </div>
175
+ </div>
176
+
177
+ <a href="#contact" class="inline-block bg-yellow-500 hover:bg-yellow-600 text-black px-6 py-2 rounded-lg font-semibold en">Contact Us</a>
178
+ <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">Liên hệ</a>
179
+ </div>
180
+ </div>
181
+ </div>
182
+ </section>
183
+
184
+ <!-- Events Section -->
185
+ <section id="events" class="py-16 bg-gray-100">
186
+ <div class="container mx-auto px-4">
187
+ <h2 class="text-4xl font-bold text-center mb-12 text-gray-800 en">Upcoming Events</h2>
188
+ <h2 class="text-4xl font-bold text-center mb-12 text-gray-800 vi hidden-language">Sự kiện sắp tới</h2>
189
+
190
+ <!-- Events Grid -->
191
+ <div id="eventsContainer" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-12">
192
+ <!-- Event cards will be dynamically added here -->
193
+ <div class="event-card bg-white rounded-lg overflow-hidden shadow-lg">
194
+ <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">
195
+ <div class="p-6">
196
+ <div class="flex justify-between items-start mb-2">
197
+ <h3 class="text-xl font-bold text-gray-800 en">Tet Festival 2024</h3>
198
+ <h3 class="text-xl font-bold text-gray-800 vi hidden-language">Tết Nguyên Đán 2024</h3>
199
+ <span class="bg-yellow-100 text-yellow-800 text-xs px-2 py-1 rounded-full en">New</span>
200
+ <span class="bg-yellow-100 text-yellow-800 text-xs px-2 py-1 rounded-full vi hidden-language">Mới</span>
201
+ </div>
202
+ <div class="flex items-center text-gray-600 mb-3">
203
+ <i class="far fa-calendar-alt mr-2"></i>
204
+ <span class="en">Feb 10, 2024 | 10:00 AM</span>
205
+ <span class="vi hidden-language">10/2/2024 | 10:00 sáng</span>
206
+ </div>
207
+ <div class="flex items-center text-gray-600 mb-4">
208
+ <i class="fas fa-map-marker-alt mr-2"></i>
209
+ <span class="en">Central Park, New York</span>
210
+ <span class="vi hidden-language">Công viên Trung tâm, New York</span>
211
+ </div>
212
+ <p class="text-gray-600 mb-4 en">Celebrate the Vietnamese Lunar New Year with traditional performances, food stalls, and family activities.</p>
213
+ <p class="text-gray-600 mb-4 vi hidden-language">Đó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.</p>
214
+ <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">Learn More</a>
215
+ <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">Xem thêm</a>
216
+ </div>
217
+ </div>
218
+
219
+ <div class="event-card bg-white rounded-lg overflow-hidden shadow-lg">
220
+ <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">
221
+ <div class="p-6">
222
+ <h3 class="text-xl font-bold text-gray-800 mb-2 en">Vietnamese Language Class</h3>
223
+ <h3 class="text-xl font-bold text-gray-800 mb-2 vi hidden-language">Lớp học tiếng Việt</h3>
224
+ <div class="flex items-center text-gray-600 mb-3">
225
+ <i class="far fa-calendar-alt mr-2"></i>
226
+ <span class="en">Every Saturday | 2:00 PM</span>
227
+ <span class="vi hidden-language">Mỗi thứ Bảy | 2:00 chiều</span>
228
+ </div>
229
+ <div class="flex items-center text-gray-600 mb-4">
230
+ <i class="fas fa-map-marker-alt mr-2"></i>
231
+ <span class="en">Community Center, Room 203</span>
232
+ <span class="vi hidden-language">Trung tâm Cộng đồng, Phòng 203</span>
233
+ </div>
234
+ <p class="text-gray-600 mb-4 en">Learn Vietnamese language and culture in our weekly classes for all ages and proficiency levels.</p>
235
+ <p class="text-gray-600 mb-4 vi hidden-language">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 độ.</p>
236
+ <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">Register Now</a>
237
+ <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">Đăng ký ngay</a>
238
+ </div>
239
+ </div>
240
+
241
+ <div class="event-card bg-white rounded-lg overflow-hidden shadow-lg">
242
+ <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">
243
+ <div class="p-6">
244
+ <h3 class="text-xl font-bold text-gray-800 mb-2 en">Mid-Autumn Festival</h3>
245
+ <h3 class="text-xl font-bold text-gray-800 mb-2 vi hidden-language">Tết Trung Thu</h3>
246
+ <div class="flex items-center text-gray-600 mb-3">
247
+ <i class="far fa-calendar-alt mr-2"></i>
248
+ <span class="en">Sep 29, 2023 | 6:00 PM</span>
249
+ <span class="vi hidden-language">29/9/2023 | 6:00 tối</span>
250
+ </div>
251
+ <div class="flex items-center text-gray-600 mb-4">
252
+ <i class="fas fa-map-marker-alt mr-2"></i>
253
+ <span class="en">Riverside Park</span>
254
+ <span class="vi hidden-language">Công viên Riverside</span>
255
+ </div>
256
+ <p class="text-gray-600 mb-4 en">Join us for lantern processions, mooncake tasting, and traditional folk games celebrating the harvest moon.</p>
257
+ <p class="text-gray-600 mb-4 vi hidden-language">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.</p>
258
+ <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">View Details</a>
259
+ <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">Chi tiết</a>
260
+ </div>
261
+ </div>
262
+ </div>
263
+
264
+ <div class="text-center">
265
+ <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">View All Events</a>
266
+ <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">Xem tất cả</a>
267
+ </div>
268
+ </div>
269
+ </section>
270
+
271
+ <!-- Gallery Section -->
272
+ <section id="gallery" class="py-16 bg-white">
273
+ <div class="container mx-auto px-4">
274
+ <h2 class="text-4xl font-bold text-center mb-12 text-gray-800 en">Our Gallery</h2>
275
+ <h2 class="text-4xl font-bold text-center mb-12 text-gray-800 vi hidden-language">Thư viện ảnh</h2>
276
+
277
+ <!-- Gallery Grid -->
278
+ <div id="galleryContainer" class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 mb-12">
279
+ <!-- Gallery items will be dynamically added here -->
280
+ <div class="gallery-item overflow-hidden rounded-lg shadow-md">
281
+ <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">
282
+ <div class="p-3 bg-gray-50">
283
+ <p class="text-sm text-gray-600 en">Tet Festival 2023</p>
284
+ <p class="text-sm text-gray-600 vi hidden-language">Tết 2023</p>
285
+ </div>
286
+ </div>
287
+
288
+ <div class="gallery-item overflow-hidden rounded-lg shadow-md">
289
+ <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">
290
+ <div class="p-3 bg-gray-50">
291
+ <p class="text-sm text-gray-600 en">Vietnamese Language Class</p>
292
+ <p class="text-sm text-gray-600 vi hidden-language">Lớp học tiếng Việt</p>
293
+ </div>
294
+ </div>
295
+
296
+ <div class="gallery-item overflow-hidden rounded-lg shadow-md">
297
+ <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">
298
+ <div class="p-3 bg-gray-50">
299
+ <p class="text-sm text-gray-600 en">Monthly Community Dinner</p>
300
+ <p class="text-sm text-gray-600 vi hidden-language">Bữa tối cộng đồng hàng tháng</p>
301
+ </div>
302
+ </div>
303
+
304
+ <div class="gallery-item overflow-hidden rounded-lg shadow-md">
305
+ <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">
306
+ <div class="p-3 bg-gray-50">
307
+ <p class="text-sm text-gray-600 en">Youth Group Activity</p>
308
+ <p class="text-sm text-gray-600 vi hidden-language">Hoạt động nhóm thanh niên</p>
309
+ </div>
310
+ </div>
311
+ </div>
312
+
313
+ <div class="text-center">
314
+ <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">View More Photos</a>
315
+ <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">Xem thêm ảnh</a>
316
+ </div>
317
+ </div>
318
+ </section>
319
+
320
+ <!-- Membership Section -->
321
+ <section id="membership" class="py-16 bg-gray-100">
322
+ <div class="container mx-auto px-4">
323
+ <h2 class="text-4xl font-bold text-center mb-12 text-gray-800 en">Membership Information</h2>
324
+ <h2 class="text-4xl font-bold text-center mb-12 text-gray-800 vi hidden-language">Thông tin thành viên</h2>
325
+
326
+ <div class="max-w-4xl mx-auto mb-12">
327
+ <h3 class="text-2xl font-semibold mb-6 text-gray-800 en">Why Become a Member?</h3>
328
+ <h3 class="text-2xl font-semibold mb-6 text-gray-800 vi hidden-language">Tại sao nên trở thành thành viên?</h3>
329
+ <p class="text-gray-600 mb-6 en">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.</p>
330
+ <p class="text-gray-600 mb-6 vi hidden-language">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.</p>
331
+
332
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
333
+ <div class="bg-white p-6 rounded-lg shadow-md">
334
+ <div class="flex items-center mb-3">
335
+ <div class="bg-yellow-100 p-2 rounded-full mr-3">
336
+ <i class="fas fa-ticket-alt text-yellow-600"></i>
337
+ </div>
338
+ <h4 class="font-semibold text-gray-800 en">Event Discounts</h4>
339
+ <h4 class="font-semibold text-gray-800 vi hidden-language">Giảm giá sự kiện</h4>
340
+ </div>
341
+ <p class="text-gray-600 en">Up to 50% off on all cultural events and festivals organized by the association.</p>
342
+ <p class="text-gray-600 vi hidden-language">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.</p>
343
+ </div>
344
+
345
+ <div class="bg-white p-6 rounded-lg shadow-md">
346
+ <div class="flex items-center mb-3">
347
+ <div class="bg-yellow-100 p-2 rounded-full mr-3">
348
+ <i class="fas fa-book text-yellow-600"></i>
349
+ </div>
350
+ <h4 class="font-semibold text-gray-800 en">Language Classes</h4>
351
+ <h4 class="font-semibold text-gray-800 vi hidden-language">Lớp học ngôn ngữ</h4>
352
+ </div>
353
+ <p class="text-gray-600 en">Priority registration and member-only Vietnamese language classes at all levels.</p>
354
+ <p class="text-gray-600 vi hidden-language">Ư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 độ.</p>
355
+ </div>
356
+
357
+ <div class="bg-white p-6 rounded-lg shadow-md">
358
+ <div class="flex items-center mb-3">
359
+ <div class="bg-yellow-100 p-2 rounded-full mr-3">
360
+ <i class="fas fa-users text-yellow-600"></i>
361
+ </div>
362
+ <h4 class="font-semibold text-gray-800 en">Networking</h4>
363
+ <h4 class="font-semibold text-gray-800 vi hidden-language">Kết nối</h4>
364
+ </div>
365
+ <p class="text-gray-600 en">Access to our professional network and business directory within the Vietnamese community.</p>
366
+ <p class="text-gray-600 vi hidden-language">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.</p>
367
+ </div>
368
+
369
+ <div class="bg-white p-6 rounded-lg shadow-md">
370
+ <div class="flex items-center mb-3">
371
+ <div class="bg-yellow-100 p-2 rounded-full mr-3">
372
+ <i class="fas fa-newspaper text-yellow-600"></i>
373
+ </div>
374
+ <h4 class="font-semibold text-gray-800 en">Newsletter</h4>
375
+ <h4 class="font-semibold text-gray-800 vi hidden-language">Bản tin</h4>
376
+ </div>
377
+ <p class="text-gray-600 en">Exclusive monthly newsletter with cultural insights, recipes, and community updates.</p>
378
+ <p class="text-gray-600 vi hidden-language">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.</p>
379
+ </div>
380
+ </div>
381
+ </div>
382
+
383
+ <h3 class="text-2xl font-semibold mb-6 text-center text-gray-800 en">Membership Types</h3>
384
+ <h3 class="text-2xl font-semibold mb-6 text-center text-gray-800 vi hidden-language">Các loại thành viên</h3>
385
+
386
+ <!-- Membership Table -->
387
+ <div class="overflow-x-auto mb-12">
388
+ <table class="min-w-full bg-white rounded-lg overflow-hidden shadow-md">
389
+ <thead class="bg-yellow-500 text-black">
390
+ <tr>
391
+ <th class="py-3 px-4 text-left en">Membership Type</th>
392
+ <th class="py-3 px-4 text-left vi hidden-language">Loại thành viên</th>
393
+ <th class="py-3 px-4 text-left en">Duration</th>
394
+ <th class="py-3 px-4 text-left vi hidden-language">Thời hạn</th>
395
+ <th class="py-3 px-4 text-left en">Price</th>
396
+ <th class="py-3 px-4 text-left vi hidden-language">Giá</th>
397
+ <th class="py-3 px-4 text-left en">Benefits</th>
398
+ <th class="py-3 px-4 text-left vi hidden-language">Lợi ích</th>
399
+ <th class="py-3 px-4 text-left"></th>
400
+ </tr>
401
+ </thead>
402
+ <tbody class="divide-y divide-gray-200">
403
+ <tr>
404
+ <td class="py-4 px-4 font-medium en">Individual</td>
405
+ <td class="py-4 px-4 font-medium vi hidden-language">Cá nhân</td>
406
+ <td class="py-4 px-4 en">1 Year</td>
407
+ <td class="py-4 px-4 vi hidden-language">1 Năm</td>
408
+ <td class="py-4 px-4">$50</td>
409
+ <td class="py-4 px-4">1,150,000₫</td>
410
+ <td class="py-4 px-4 en">All basic benefits for one person</td>
411
+ <td class="py-4 px-4 vi hidden-language">Tất cả lợi ích cơ bản cho một người</td>
412
+ <td class="py-4 px-4">
413
+ <button class="bg-yellow-500 hover:bg-yellow-600 text-black px-4 py-2 rounded-lg font-semibold text-sm en">Join Now</button>
414
+ <button class="bg-yellow-500 hover:bg-yellow-600 text-black px-4 py-2 rounded-lg font-semibold text-sm vi hidden-language">Tham gia</button>
415
+ </td>
416
+ </tr>
417
+ <tr class="bg-gray-50">
418
+ <td class="py-4 px-4 font-medium en">Family</td>
419
+ <td class="py-4 px-4 font-medium vi hidden-language">Gia đình</td>
420
+ <td class="py-4 px-4 en">1 Year</td>
421
+ <td class="py-4 px-4 vi hidden-language">1 Năm</td>
422
+ <td class="py-4 px-4">$120</td>
423
+ <td class="py-4 px-4">2,760,000₫</td>
424
+ <td class="py-4 px-4 en">All benefits for up to 4 family members</td>
425
+ <td class="py-4 px-4 vi hidden-language">Tất cả lợi ích cho tối đa 4 thành viên gia đình</td>
426
+ <td class="py-4 px-4">
427
+ <button class="bg-yellow-500 hover:bg-yellow-600 text-black px-4 py-2 rounded-lg font-semibold text-sm en">Join Now</button>
428
+ <button class="bg-yellow-500 hover:bg-yellow-600 text-black px-4 py-2 rounded-lg font-semibold text-sm vi hidden-language">Tham gia</button>
429
+ </td>
430
+ </tr>
431
+ <tr>
432
+ <td class="py-4 px-4 font-medium en">Student</td>
433
+ <td class="py-4 px-4 font-medium vi hidden-language">Sinh viên</td>
434
+ <td class="py-4 px-4 en">1 Year</td>
435
+ <td class="py-4 px-4 vi hidden-language">1 Năm</td>
436
+ <td class="py-4 px-4">$30</td>
437
+ <td class="py-4 px-4">690,000₫</td>
438
+ <td class="py-4 px-4 en">Basic benefits with student ID</td>
439
+ <td class="py-4 px-4 vi hidden-language">Lợi ích cơ bản với thẻ sinh viên</td>
440
+ <td class="py-4 px-4">
441
+ <button class="bg-yellow-500 hover:bg-yellow-600 text-black px-4 py-2 rounded-lg font-semibold text-sm en">Join Now</button>
442
+ <button class="bg-yellow-500 hover:bg-yellow-600 text-black px-4 py-2 rounded-lg font-semibold text-sm vi hidden-language">Tham gia</button>
443
+ </td>
444
+ </tr>
445
+ <tr class="bg-gray-50">
446
+ <td class="py-4 px-4 font-medium en">Lifetime</td>
447
+ <td class="py-4 px-4 font-medium vi hidden-language">Trọn đời</td>
448
+ <td class="py-4 px-4 en">Lifetime</td>
449
+ <td class="py-4 px-4 vi hidden-language">Trọn đời</td>
450
+ <td class="py-4 px-4">$500</td>
451
+ <td class="py-4 px-4">11,500,000₫</td>
452
+ <td class="py-4 px-4 en">All benefits plus VIP event invitations</td>
453
+ <td class="py-4 px-4 vi hidden-language">Tất cả lợi ích cộng với lời mời sự kiện VIP</td>
454
+ <td class="py-4 px-4">
455
+ <button class="bg-yellow-500 hover:bg-yellow-600 text-black px-4 py-2 rounded-lg font-semibold text-sm en">Join Now</button>
456
+ <button class="bg-yellow-500 hover:bg-yellow-600 text-black px-4 py-2 rounded-lg font-semibold text-sm vi hidden-language">Tham gia</button>
457
+ </td>
458
+ </tr>
459
+ </tbody>
460
+ </table>
461
+ </div>
462
+
463
+ <div class="bg-white p-8 rounded-lg shadow-lg max-w-3xl mx-auto">
464
+ <h3 class="text-2xl font-semibold mb-4 text-center text-gray-800 en">Frequently Asked Questions</h3>
465
+ <h3 class="text-2xl font-semibold mb-4 text-center text-gray-800 vi hidden-language">Câu hỏi thường gặp</h3>
466
+
467
+ <div class="space-y-4">
468
+ <div class="border-b border-gray-200 pb-4">
469
+ <button class="flex justify-between items-center w-full text-left font-medium text-gray-800">
470
+ <span class="en">How do I renew my membership?</span>
471
+ <span class="vi hidden-language">Làm thế nào để gia hạn tư cách thành viên?</span>
472
+ <i class="fas fa-chevron-down text-yellow-600"></i>
473
+ </button>
474
+ <div class="mt-2 text-gray-600">
475
+ <p class="en">You can renew your membership online through our member portal or in person at any of our events. Renewal notices are sent via email 30 days before expiration.</p>
476
+ <p class="vi hidden-language">Bạn có thể gia hạn tư cách thành viên trực tuyến qua cổng thành viên hoặc trực tiếp tại các sự kiện. Thông báo gia hạn được gửi qua email 30 ngày trước khi hết hạn.</p>
477
+ </div>
478
+ </div>
479
+
480
+ <div class="border-b border-gray-200 pb-4">
481
+ <button class="flex justify-between items-center w-full text-left font-medium text-gray-800">
482
+ <span class="en">Can I upgrade my membership type?</span>
483
+ <span class="vi hidden-language">Tôi có thể nâng cấp loại thành viên không?</span>
484
+ <i class="fas fa-chevron-down text-yellow-600"></i>
485
+ </button>
486
+ <div class="mt-2 text-gray-600">
487
+ <p class="en">Yes, you can upgrade at any time by paying the difference in membership fees. Contact our membership coordinator for assistance.</p>
488
+ <p class="vi hidden-language">Có, bạn có thể nâng cấp bất cứ lúc nào bằng cách thanh toán chênh lệch phí thành viên. Liên hệ với điều phối viên thành viên để được hỗ trợ.</p>
489
+ </div>
490
+ </div>
491
+
492
+ <div class="border-b border-gray-200 pb-4">
493
+ <button class="flex justify-between items-center w-full text-left font-medium text-gray-800">
494
+ <span class="en">Are there volunteer opportunities for members?</span>
495
+ <span class="vi hidden-language">Có cơ hội tình nguyện cho thành viên không?</span>
496
+ <i class="fas fa-chevron-down text-yellow-600"></i>
497
+ </button>
498
+ <div class="mt-2 text-gray-600">
499
+ <p class="en">Absolutely! We welcome member volunteers for events, language classes, and community outreach. Check our volunteer page for current opportunities.</p>
500
+ <p class="vi hidden-language">Chắc chắn! Chúng tôi chào đón tình nguyện viên thành viên cho sự kiện, lớp học ngôn ngữ và hoạt động cộng đồng. Kiểm tra trang tình nguyện để biết cơ hội hiện tại.</p>
501
+ </div>
502
+ </div>
503
+ </div>
504
+ </div>
505
+ </div>
506
+ </section>
507
+
508
+ <!-- Contact Section -->
509
+ <section id="contact" class="py-16 bg-white">
510
+ <div class="container mx-auto px-4">
511
+ <h2 class="text-4xl font-bold text-center mb-12 text-gray-800 en">Contact Us</h2>
512
+ <h2 class="text-4xl font-bold text-center mb-12 text-gray-800 vi hidden-language">Liên hệ</h2>
513
+
514
+ <div class="flex flex-col md:flex-row gap-8 max-w-6xl mx-auto">
515
+ <div class="md:w-1/2">
516
+ <div class="bg-gray-100 p-8 rounded-lg shadow-md h-full">
517
+ <h3 class="text-2xl font-semibold mb-6 text-gray-800 en">Get In Touch</h3>
518
+ <h3 class="text-2xl font-semibold mb-6 text-gray-800 vi hidden-language">Liên lạc</h3>
519
+
520
+ <div class="space-y-6">
521
+ <div class="flex items-start">
522
+ <div class="bg-yellow-100 p-3 rounded-full mr-4">
523
+ <i class="fas fa-map-marker-alt text-yellow-600"></i>
524
+ </div>
525
+ <div>
526
+ <h4 class="font-medium text-gray-800 en">Address</h4>
527
+ <h4 class="font-medium text-gray-800 vi hidden-language">Địa chỉ</h4>
528
+ <p class="text-gray-600">123 Cultural Street, District 1<br>Ho Chi Minh City, Vietnam</p>
529
+ </div>
530
+ </div>
531
+
532
+ <div class="flex items-start">
533
+ <div class="bg-yellow-100 p-3 rounded-full mr-4">
534
+ <i class="fas fa-phone-alt text-yellow-600"></i>
535
+ </div>
536
+ <div>
537
+ <h4 class="font-medium text-gray-800 en">Phone</h4>
538
+ <h4 class="font-medium text-gray-800 vi hidden-language">Điện thoại</h4>
539
+ <p class="text-gray-600 en">+84 123 456 789<br>Monday - Friday, 9am - 5pm</p>
540
+ <p class="text-gray-600 vi hidden-language">+84 123 456 789<br>Thứ Hai - Thứ Sáu, 9h sáng - 5h chiều</p>
541
+ </div>
542
+ </div>
543
+
544
+ <div class="flex items-start">
545
+ <div class="bg-yellow-100 p-3 rounded-full mr-4">
546
+ <i class="fas fa-envelope text-yellow-600"></i>
547
+ </div>
548
+ <div>
549
+ <h4 class="font-medium text-gray-800 en">Email</h4>
550
+ <h4 class="font-medium text-gray-800 vi hidden-language">Thư điện tử</h4>
551
+ <p class="text-gray-600">info@vietcultural.org<br>membership@vietcultural.org</p>
552
+ </div>
553
+ </div>
554
+ </div>
555
+
556
+ <div class="mt-8">
557
+ <h4 class="font-medium text-gray-800 mb-3 en">Follow Us</h4>
558
+ <h4 class="font-medium text-gray-800 mb-3 vi hidden-language">Theo dõi chúng tôi</h4>
559
+ <div class="flex space-x-4">
560
+ <a href="#" class="bg-gray-200 hover:bg-yellow-500 hover:text-white p-3 rounded-full">
561
+ <i class="fab fa-facebook-f"></i>
562
+ </a>
563
+ <a href="#" class="bg-gray-200 hover:bg-yellow-500 hover:text-white p-3 rounded-full">
564
+ <i class="fab fa-instagram"></i>
565
+ </a>
566
+ <a href="#" class="bg-gray-200 hover:bg-yellow-500 hover:text-white p-3 rounded-full">
567
+ <i class="fab fa-youtube"></i>
568
+ </a>
569
+ <a href="#" class="bg-gray-200 hover:bg-yellow-500 hover:text-white p-3 rounded-full">
570
+ <i class="fab fa-linkedin-in"></i>
571
+ </a>
572
+ </div>
573
+ </div>
574
+ </div>
575
+ </div>
576
+
577
+ <div class="md:w-1/2">
578
+ <div class="bg-gray-100 p-8 rounded-lg shadow-md h-full">
579
+ <h3 class="text-2xl font-semibold mb-6 text-gray-800 en">Send Us a Message</h3>
580
+ <h3 class="text-2xl font-semibold mb-6 text-gray-800 vi hidden-language">Gửi tin nhắn</h3>
581
+
582
+ <form class="space-y-4">
583
+ <div>
584
+ <label for="name" class="block text-gray-700 mb-1 en">Full Name</label>
585
+ <label for="name" class="block text-gray-700 mb-1 vi hidden-language">Họ và tên</label>
586
+ <input type="text" id="name" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-yellow-500">
587
+ </div>
588
+
589
+ <div>
590
+ <label for="email" class="block text-gray-700 mb-1 en">Email Address</label>
591
+ <label for="email" class="block text-gray-700 mb-1 vi hidden-language">Địa chỉ email</label>
592
+ <input type="email" id="email" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-yellow-500">
593
+ </div>
594
+
595
+ <div>
596
+ <label for="subject" class="block text-gray-700 mb-1 en">Subject</label>
597
+ <label for="subject" class="block text-gray-700 mb-1 vi hidden-language">Chủ đề</label>
598
+ <input type="text" id="subject" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-yellow-500">
599
+ </div>
600
+
601
+ <div>
602
+ <label for="message" class="block text-gray-700 mb-1 en">Message</label>
603
+ <label for="message" class="block text-gray-700 mb-1 vi hidden-language">Nội dung</label>
604
+ <textarea id="message" rows="4" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-yellow-500"></textarea>
605
+ </div>
606
+
607
+ <button type="submit" class="bg-yellow-500 hover:bg-yellow-600 text-black px-6 py-3 rounded-lg font-semibold w-full en">Send Message</button>
608
+ <button type="submit" class="bg-yellow-500 hover:bg-yellow-600 text-black px-6 py-3 rounded-lg font-semibold w-full vi hidden-language">Gửi tin nhắn</button>
609
+ </form>
610
+ </div>
611
+ </div>
612
+ </div>
613
+ </div>
614
+ </section>
615
+ </main>
616
+
617
+ <!-- Footer -->
618
+ <footer class="bg-gray-800 text-white py-12">
619
+ <div class="container mx-auto px-4">
620
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
621
+ <div>
622
+ <h3 class="text-xl font-semibold mb-4 en">Vietnamese Cultural Association</h3>
623
+ <h3 class="text-xl font-semibold mb-4 vi hidden-language">Hội Văn Hóa Việt Nam</h3>
624
+ <p class="text-gray-400 en">Preserving heritage, building community since 1995.</p>
625
+ <p class="text-gray-400 vi hidden-language">Gìn giữ di sản, xây dựng cộng đồng từ năm 1995.</p>
626
+ </div>
627
+
628
+ <div>
629
+ <h3 class="text-xl font-semibold mb-4 en">Quick Links</h3>
630
+ <h3 class="text-xl font-semibold mb-4 vi hidden-language">Liên kết nhanh</h3>
631
+ <ul class="space-y-2">
632
+ <li><a href="#home" class="text-gray-400 hover:text-yellow-400 en">Home</a></li>
633
+ <li><a href="#home" class="text-gray-400 hover:text-yellow-400 vi hidden-language">Trang chủ</a></li>
634
+ <li><a href="#about" class="text-gray-400 hover:text-yellow-400 en">About Us</a></li>
635
+ <li><a href="#about" class="text-gray-400 hover:text-yellow-400 vi hidden-language">Về chúng tôi</a></li>
636
+ <li><a href="#events" class="text-gray-400 hover:text-yellow-400 en">Events</a></li>
637
+ <li><a href="#events" class="text-gray-400 hover:text-yellow-400 vi hidden-language">Sự kiện</a></li>
638
+ </ul>
639
+ </div>
640
+
641
+ <div>
642
+ <h3 class="text-xl font-semibold mb-4 en">Resources</h3>
643
+ <h3 class="text-xl font-semibold mb-4 vi hidden-language">Tài nguyên</h3>
644
+ <ul class="space-y-2">
645
+ <li><a href="#" class="text-gray-400 hover:text-yellow-400 en">Vietnamese Language Resources</a></li>
646
+ <li><a href="#" class="text-gray-400 hover:text-yellow-400 vi hidden-language">Tài nguyên tiếng Việt</a></li>
647
+ <li><a href="#" class="text-gray-400 hover:text-yellow-400 en">Cultural Guides</a></li>
648
+ <li><a href="#" class="text-gray-400 hover:text-yellow-400 vi hidden-language">Hướng dẫn văn hóa</a></li>
649
+ <li><a href="#" class="text-gray-400 hover:text-yellow-400 en">Community Directory</a></li>
650
+ <li><a href="#" class="text-gray-400 hover:text-yellow-400 vi hidden-language">Danh bạ cộng đồng</a></li>
651
+ </ul>
652
+ </div>
653
+
654
+ <div>
655
+ <h3 class="text-xl font-semibold mb-4 en">Newsletter</h3>
656
+ <h3 class="text-xl font-semibold mb-4 vi hidden-language">Bản tin</h3>
657
+ <p class="text-gray-400 mb-4 en">Subscribe to our newsletter for updates.</p>
658
+ <p class="text-gray-400 mb-4 vi hidden-language">Đăng ký nhận bản tin để cập nhật.</p>
659
+ <form class="flex">
660
+ <input type="email" placeholder="Your email" class="px-4 py-2 rounded-l-lg focus:outline-none text-gray-800 w-full">
661
+ <button class="bg-yellow-500 hover:bg-yellow-600 text-black px-4 py-2 rounded-r-lg font-semibold en">Subscribe</button>
662
+ <button class="bg-yellow-500 hover:bg-yellow-600 text-black px-4 py-2 rounded-r-lg font-semibold vi hidden-language">Đăng ký</button>
663
+ </form>
664
+ </div>
665
+ </div>
666
+
667
+ <div class="border-t border-gray-700 mt-8 pt-8 flex flex-col md:flex-row justify-between items-center">
668
+ <p class="text-gray-400 en">© 2023 Vietnamese Cultural Association. All rights reserved.</p>
669
+ <p class="text-gray-400 vi hidden-language">© 2023 Hội Văn Hóa Việt Nam. Mọi quyền được bảo lưu.</p>
670
+ <div class="flex space-x-6 mt-4 md:mt-0">
671
+ <a href="#" class="text-gray-400 hover:text-yellow-400"><i class="fab fa-facebook-f"></i></a>
672
+ <a href="#" class="text-gray-400 hover:text-yellow-400"><i class="fab fa-twitter"></i></a>
673
+ <a href="#" class="text-gray-400 hover:text-yellow-400"><i class="fab fa-instagram"></i></a>
674
+ <a href="#" class="text-gray-400 hover:text-yellow-400"><i class="fab fa-youtube"></i></a>
675
+ </div>
676
+ </div>
677
+ </div>
678
+ </footer>
679
+
680
+ <!-- Admin Login Modal -->
681
+ <div id="adminModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
682
+ <div class="bg-white rounded-lg p-8 max-w-md w-full">
683
+ <div class="flex justify-between items-center mb-6">
684
+ <h3 class="text-2xl font-bold text-gray-800 en">Admin Login</h3>
685
+ <h3 class="text-2xl font-bold text-gray-800 vi hidden-language">Đăng nhập Quản trị</h3>
686
+ <button id="closeAdminModal" class="text-gray-500 hover:text-gray-700">
687
+ <i class="fas fa-times"></i>
688
+ </button>
689
+ </div>
690
+
691
+ <form class="space-y-4">
692
+ <div>
693
+ <label for="adminEmail" class="block text-gray-700 mb-1 en">Email</label>
694
+ <label for="adminEmail" class="block text-gray-700 mb-1 vi hidden-language">Email</label>
695
+ <input type="email" id="adminEmail" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-yellow-500">
696
+ </div>
697
+
698
+ <div>
699
+ <label for="adminPassword" class="block text-gray-700 mb-1 en">Password</label>
700
+ <label for="adminPassword" class="block text-gray-700 mb-1 vi hidden-language">Mật khẩu</label>
701
+ <input type="password" id="adminPassword" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-yellow-500">
702
+ </div>
703
+
704
+ <button type="submit" class="bg-yellow-500 hover:bg-yellow-600 text-black px-6 py-3 rounded-lg font-semibold w-full en">Login</button>
705
+ <button type="submit" class="bg-yellow-500 hover:bg-yellow-600 text-black px-6 py-3 rounded-lg font-semibold w-full vi hidden-language">Đăng nhập</button>
706
+ </form>
707
+ </div>
708
+ </div>
709
+
710
+ <script>
711
+ // Language Toggle Functionality
712
+ document.getElementById('englishBtn').addEventListener('click', function() {
713
+ document.querySelectorAll('.en').forEach(el => el.classList.remove('hidden-language'));
714
+ document.querySelectorAll('.vi').forEach(el => el.classList.add('hidden-language'));
715
+ document.getElementById('englishBtn').classList.add('active-language');
716
+ document.getElementById('vietnameseBtn').classList.remove('active-language');
717
+ });
718
+
719
+ document.getElementById('vietnameseBtn').addEventListener('click', function() {
720
+ document.querySelectorAll('.vi').forEach(el => el.classList.remove('hidden-language'));
721
+ document.querySelectorAll('.en').forEach(el => el.classList.add('hidden-language'));
722
+ document.getElementById('vietnameseBtn').classList.add('active-language');
723
+ document.getElementById('englishBtn').classList.remove('active-language');
724
+ });
725
+
726
+ // Admin Modal Functionality
727
+ document.getElementById('adminLoginBtn').addEventListener('click', function() {
728
+ document.getElementById('adminModal').classList.remove('hidden');
729
+ });
730
+
731
+ document.getElementById('closeAdminModal').addEventListener('click', function() {
732
+ document.getElementById('adminModal').classList.add('hidden');
733
+ });
734
+
735
+ // FAQ Accordion
736
+ document.querySelectorAll('#membership button').forEach(button => {
737
+ button.addEventListener('click', () => {
738
+ const content = button.nextElementSibling;
739
+ const icon = button.querySelector('i');
740
+
741
+ if (content.style.maxHeight) {
742
+ content.style.maxHeight = null;
743
+ icon.classList.remove('fa-chevron-up');
744
+ icon.classList.add('fa-chevron-down');
745
+ } else {
746
+ content.style.maxHeight = content.scrollHeight + 'px';
747
+ icon.classList.remove('fa-chevron-down');
748
+ icon.classList.add('fa-chevron-up');
749
+ }
750
+ });
751
+ });
752
+ </script>
753
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=toanly/https-vahk-org-en" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
754
+ </html>
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ make the website in 2 languages english and Vietnamese