Add 2 files

index.html

@@ -11,6 +11,22 @@
             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');
             background-size: cover;
             background-position: center;
+            position: relative;
+        }
+        .bg-editor {
+            position: absolute;
+            bottom: 20px;
+            right: 20px;
+            background: rgba(0,0,0,0.7);
+            color: white;
+            padding: 5px 10px;
+            border-radius: 4px;
+            cursor: pointer;
+            display: none;
+            z-index: 10;
+        }
+        .custom-bg:hover .bg-editor {
+            display: block;
         }
         .admin-panel {
             display: none;
@@ -209,6 +225,49 @@
         </div>
     </div>
 
+    <!-- Background Image Upload Modal -->
+    <div id="bgImageUploadModal" class="edit-modal hidden">
+        <div class="edit-modal-content">
+            <h3 class="text-xl font-bold mb-4 en">Change Background Image</h3>
+            <h3 class="text-xl font-bold mb-4 vi hidden-language">Thay đổi ảnh nền</h3>
+            <div class="mb-4">
+                <label class="block text-gray-700 mb-2 en">Background Image URL</label>
+                <label class="block text-gray-700 mb-2 vi hidden-language">Đường dẫn ảnh nền</label>
+                <input type="text" id="bgImageUrlInput" class="w-full px-3 py-2 border rounded" placeholder="https://example.com/background.jpg">
+            </div>
+            <div class="mb-4">
+                <label class="block text-gray-700 mb-2 en">Or upload file</label>
+                <label class="block text-gray-700 mb-2 vi hidden-language">Hoặc tải lên</label>
+                <input type="file" id="bgImageFileInput" class="w-full px-3 py-2 border rounded" accept="image/*">
+            </div>
+            <div class="mb-4">
+                <label class="block text-gray-700 mb-2 en">Background Position</label>
+                <label class="block text-gray-700 mb-2 vi hidden-language">Vị trí ảnh nền</label>
+                <select id="bgPositionSelect" class="w-full px-3 py-2 border rounded">
+                    <option value="center">Center</option>
+                    <option value="top">Top</option>
+                    <option value="bottom">Bottom</option>
+                    <option value="left">Left</option>
+                    <option value="right">Right</option>
+                </select>
+            </div>
+            <div class="flex justify-between">
+                <button id="cancelBgImageUploadBtn" class="bg-gray-500 hover:bg-gray-600 text-white px-4 py-2 rounded en">
+                    Cancel
+                </button>
+                <button id="cancelBgImageUploadBtn" class="bg-gray-500 hover:bg-gray-600 text-white px-4 py-2 rounded vi hidden-language">
+                    Hủy
+                </button>
+                <button id="confirmBgImageUploadBtn" class="bg-yellow-500 hover:bg-yellow-600 text-black px-4 py-2 rounded en">
+                    Update Background
+                </button>
+                <button id="confirmBgImageUploadBtn" class="bg-yellow-500 hover:bg-yellow-600 text-black px-4 py-2 rounded vi hidden-language">
+                    Cập nhật nền
+                </button>
+            </div>
+        </div>
+    </div>
+
     <!-- Language Selector -->
     <div class="bg-gray-800 text-white py-2 px-4">
         <div class="container mx-auto flex justify-end">
@@ -220,7 +279,12 @@
     </div>
 
     <!-- Header -->
-    <header class="custom-bg text-white">
+    <header class="custom-bg text-white" id="headerBg">
+        <div class="bg-editor" onclick="openBgImageUploadModal('headerBg')">
+            <i class="fas fa-image mr-1"></i>
+            <span class="en">Edit Background</span>
+            <span class="vi hidden-language">Sửa nền</span>
+        </div>
         <div class="bg-black bg-opacity-60">
             <div class="container mx-auto px-4 py-6">
                 <div class="flex justify-between items-center">
@@ -304,7 +368,12 @@
     <!-- Main Content -->
     <main>
         <!-- Hero Section -->
-        <section id="home" class="py-20 custom-bg text-white">
+        <section id="home" class="py-20 custom-bg text-white" id="heroBg">
+            <div class="bg-editor" onclick="openBgImageUploadModal('heroBg')">
+                <i class="fas fa-image mr-1"></i>
+                <span class="en">Edit Background</span>
+                <span class="vi hidden-language">Sửa nền</span>
+            </div>
             <div class="bg-black bg-opacity-60 py-16">
                 <div class="container mx-auto px-4 text-center">
                     <h2 class="text-5xl font-bold mb-6 en editable">Welcome to Our Community
@@ -328,7 +397,7 @@
                         </a>
                         <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 editable">Upcoming Events
                             <span class="edit-btn" onclick="openEditModal(this, 'hero-events-en')"><i class="fas fa-pencil"></i></span>
-                        </a>
+        </a>
                         <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 editable">Sự kiện sắp tới
                             <span class="edit-btn" onclick="openEditModal(this, 'hero-events-vi')"><i class="fas fa-pencil"></i></span>
                         </a>
@@ -355,84 +424,5 @@
                             </div>
                         </div>
                     </div>
-                    <div class="md:w-1/2">
-                        <h3 class="text-2xl font-semibold mb-4 text-gray-800 en editable">Our Mission
-                            <span class="edit-btn" onclick="openEditModal(this, 'about-mission-title-en')"><i class="fas fa-pencil"></i></span>
-                        </h3>
-                        <h3 class="text-2xl font-semibold mb-4 text-gray-800 vi hidden-language editable">Sứ mệnh
-                            <span class="edit-btn" onclick="openEditModal(this, 'about-mission-title-vi')"><i class="fas fa-pencil"></i></span>
-                        </h3>
-                        <p class="text-gray-600 mb-4 en editable">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.
-                            <span class="edit-btn" onclick="openEditModal(this, 'about-mission-p1-en')"><i class="fas fa-pencil"></i></span>
-                        </p>
-                        <p class="text-gray-600 mb-4 vi hidden-language editable">Đượ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.
-                            <span class="edit-btn" onclick="openEditModal(this, 'about-mission-p1-vi')"><i class="fas fa-pencil"></i></span>
-                        </p>
-                        <p class="text-gray-600 mb-6 en editable">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.
-                            <span class="edit-btn" onclick="openEditModal(this, 'about-mission-p2-en')"><i class="fas fa-pencil"></i></span>
-                        </p>
-                        <p class="text-gray-600 mb-6 vi hidden-language editable">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.
-                            <span class="edit-btn" onclick="openEditModal(this, 'about-mission-p2-vi')"><i class="fas fa-pencil"></i></span>
-                        </p>
-                        
-                        <h3 class="text-2xl font-semibold mb-4 text-gray-800 en editable">Our Values
-                            <span class="edit-btn" onclick="openEditModal(this, 'about-values-title-en')"><i class="fas fa-pencil"></i></span>
-                        </h3>
-                        <h3 class="text-2xl font-semibold mb-4 text-gray-800 vi hidden-language editable">Giá trị cốt lõi
-                            <span class="edit-btn" onclick="openEditModal(this, 'about-values-title-vi')"><i class="fas fa-pencil"></i></span>
-                        </h3>
-                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
-                            <div class="flex items-start">
-                                <div class="bg-yellow-100 p-2 rounded-full mr-3">
-                                    <i class="fas fa-hands-helping text-yellow-600"></i>
-                                </div>
-                                <p class="text-gray-600 en editable">Community
-                                    <span class="edit-btn" onclick="openEditModal(this, 'about-value1-en')"><i class="fas fa-pencil"></i></span>
-                                </p>
-                                <p class="text-gray-600 vi hidden-language editable">Cộng đồng
-                                    <span class="edit-btn" onclick="openEditModal(this, 'about-value1-vi')"><i class="fas fa-pencil"></i></span>
-                                </p>
-                            </div>
-                            <div class="flex items-start">
-                                <div class="bg-yellow-100 p-2 rounded-full mr-3">
-                                    <i class="fas fa-book text-yellow-600"></i>
-                                </div>
-                                <p class="text-gray-600 en editable">Education
-                                    <span class="edit-btn" onclick="openEditModal(this, 'about-value2-en')"><i class="fas fa-pencil"></i></span>
-                                </p>
-                                <p class="text-gray-600 vi hidden-language editable">Giáo dục
-                                    <span class="edit-btn" onclick="openEditModal(this, 'about-value2-vi')"><i class="fas fa-pencil"></i></span>
-                                </p>
-                            </div>
-                            <div class="flex items-start">
-                                <div class="bg-yellow-100 p-2 rounded-full mr-3">
-                                    <i class="fas fa-history text-yellow-600"></i>
-                                </div>
-                                <p class="text-gray-600 en editable">Heritage
-                                    <span class="edit-btn" onclick="openEditModal(this, 'about-value3-en')"><i class="fas fa-pencil"></i></span>
-                                </p>
-                                <p class="text-gray-600 vi hidden-language editable">Di sản
-                                    <span class="edit-btn" onclick="openEditModal(this, 'about-value3-vi')"><i class="fas fa-pencil"></i></span>
-                                </p>
-                            </div>
-                            <div class="flex items-start">
-                                <div class="bg-yellow-100 p-2 rounded-full mr-3">
-                                    <i class="fas fa-handshake text-yellow-600"></i>
-                                </div>
-                                <p class="text-gray-600 en editable">Unity
-                                    <span class="edit-btn" onclick="openEditModal(this, 'about-value4-en')"><i class="fas fa-pencil"></i></span>
-                                </p>
-                                <p class="text-gray-600 vi hidden-language editable">Đoàn kết
-                                    <span class="edit-btn" onclick="openEditModal(this, 'about-value4-vi')"><i class="fas fa-pencil"></i></span>
-                                </p>
-                            </div>
-                        </div>
-                        
-                        <a href="#contact" class="inline-block bg-yellow-500 hover:bg-yellow-600 text-black px-6 py-2 rounded-lg font-semibold en editable">Contact Us
-                            <span class="edit-btn" onclick="openEditModal(this, 'about-contact-btn-en')"><i class="fas fa-pencil"></i></span>
-                        </a>
-                        <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ệ
-                            <span class="edit-btn" onclick="openEditModal(this, 'about-contact-btn-vi')"><i class="fas fa-pencil"></i></span>
-                        </a>
-                    </极
+                    <div class="md:w-极
 </html>

prompts.txt

@@ -1,3 +1,4 @@
 make the website in 2 languages english and Vietnamese
 what is the admin login to edit the website
-update to be able to edit upload change images
+update to be able to edit upload change images
+also update to be able to edit background images