Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Vietnamese Cultural Association</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| .custom-bg { | |
| 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; | |
| } | |
| .show-admin { | |
| display: block; | |
| } | |
| .event-card { | |
| transition: transform 0.3s ease; | |
| } | |
| .event-card:hover { | |
| transform: translateY(-5px); | |
| } | |
| .gallery-item { | |
| transition: all 0.3s ease; | |
| } | |
| .gallery-item:hover { | |
| transform: scale(1.03); | |
| box-shadow: 0 10px 20px rgba(0,0,0,0.2); | |
| } | |
| .language-option { | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| } | |
| .language-option:hover { | |
| transform: scale(1.05); | |
| } | |
| .active-language { | |
| font-weight: bold; | |
| color: #eab308; | |
| border-bottom: 2px solid #eab308; | |
| } | |
| .hidden-language { | |
| display: none; | |
| } | |
| .editable { | |
| position: relative; | |
| } | |
| .editable:hover { | |
| outline: 2px dashed #eab308; | |
| } | |
| .edit-btn { | |
| position: absolute; | |
| top: -10px; | |
| right: -10px; | |
| background: #eab308; | |
| color: white; | |
| border-radius: 50%; | |
| width: 25px; | |
| height: 25px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| cursor: pointer; | |
| font-size: 12px; | |
| z-index: 10; | |
| display: none; | |
| } | |
| .editable:hover .edit-btn { | |
| display: flex; | |
| } | |
| .edit-modal { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| background: rgba(0,0,0,0.5); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| z-index: 1000; | |
| } | |
| .edit-modal-content { | |
| background: white; | |
| padding: 20px; | |
| border-radius: 8px; | |
| width: 80%; | |
| max-width: 500px; | |
| } | |
| .image-editable { | |
| position: relative; | |
| } | |
| .image-editable:hover .edit-btn { | |
| display: flex; | |
| } | |
| .image-upload-btn { | |
| position: absolute; | |
| bottom: 10px; | |
| right: 10px; | |
| background: #eab308; | |
| color: white; | |
| border-radius: 50%; | |
| width: 30px; | |
| height: 30px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| cursor: pointer; | |
| font-size: 14px; | |
| z-index: 10; | |
| display: none; | |
| } | |
| .image-editable:hover .image-upload-btn { | |
| display: flex; | |
| } | |
| .hidden { | |
| display: none; | |
| } | |
| </style> | |
| </head> | |
| <body class="font-sans bg-gray-50"> | |
| <!-- Admin Panel (Hidden by default) --> | |
| <div id="adminPanel" class="admin-panel bg-gray-800 text-white py-2 px-4"> | |
| <div class="container mx-auto flex justify-between items-center"> | |
| <span class="en">Admin Panel</span> | |
| <span class="vi hidden-language">Bảng điều khiển</span> | |
| <div class="flex space-x-4"> | |
| <button id="saveChangesBtn" class="bg-green-500 hover:bg-green-600 text-white px-4 py-1 rounded text-sm en"> | |
| Save Changes | |
| </button> | |
| <button id="saveChangesBtn" class="bg-green-500 hover:bg-green-600 text-white px-4 py-1 rounded text-sm vi hidden-language"> | |
| Lưu thay đổi | |
| </button> | |
| <button id="logoutBtn" class="bg-red-500 hover:bg-red-600 text-white px-4 py-1 rounded text-sm en"> | |
| Logout | |
| </button> | |
| <button id="logoutBtn" class="bg-red-500 hover:bg-red-600 text-white px-4 py-1 rounded text-sm vi hidden-language"> | |
| Đăng xuất | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Login Modal --> | |
| <div id="loginModal" class="edit-modal hidden"> | |
| <div class="edit-modal-content"> | |
| <h3 class="text-xl font-bold mb-4 en">Admin Login</h3> | |
| <h3 class="text-xl font-bold mb-4 vi hidden-language">Đăng nhập Quản trị</h3> | |
| <div class="mb-4"> | |
| <label class="block text-gray-700 mb-2 en">Username</label> | |
| <label class="block text-gray-700 mb-2 vi hidden-language">Tên đăng nhập</label> | |
| <input type="text" id="adminUsername" class="w-full px-3 py-2 border rounded"> | |
| </div> | |
| <div class="mb-6"> | |
| <label class="block text-gray-700 mb-2 en">Password</label> | |
| <label class="block text-gray-700 mb-2 vi hidden-language">Mật khẩu</label> | |
| <input type="password" id="adminPassword" class="w-full px-3 py-2 border rounded"> | |
| </div> | |
| <div class="flex justify-between"> | |
| <button id="cancelLoginBtn" class="bg-gray-500 hover:bg-gray-600 text-white px-4 py-2 rounded en"> | |
| Cancel | |
| </button> | |
| <button id="cancelLoginBtn" class="bg-gray-500 hover:bg-gray-600 text-white px-4 py-2 rounded vi hidden-language"> | |
| Hủy | |
| </button> | |
| <button id="confirmLoginBtn" class="bg-yellow-500 hover:bg-yellow-600 text-black px-4 py-2 rounded en"> | |
| Login | |
| </button> | |
| <button id="confirmLoginBtn" class="bg-yellow-500 hover:bg-yellow-600 text-black px-4 py-2 rounded vi hidden-language"> | |
| Đăng nhập | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Image Upload Modal --> | |
| <div id="imageUploadModal" class="edit-modal hidden"> | |
| <div class="edit-modal-content"> | |
| <h3 class="text-xl font-bold mb-4 en">Change Image</h3> | |
| <h3 class="text-xl font-bold mb-4 vi hidden-language">Thay đổi ảnh</h3> | |
| <div class="mb-4"> | |
| <label class="block text-gray-700 mb-2 en">Image URL</label> | |
| <label class="block text-gray-700 mb-2 vi hidden-language">Đường dẫn ảnh</label> | |
| <input type="text" id="imageUrlInput" class="w-full px-3 py-2 border rounded" placeholder="https://example.com/image.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="imageFileInput" class="w-full px-3 py-2 border rounded" accept="image/*"> | |
| </div> | |
| <div class="flex justify-between"> | |
| <button id="cancelImageUploadBtn" class="bg-gray-500 hover:bg-gray-600 text-white px-4 py-2 rounded en"> | |
| Cancel | |
| </button> | |
| <button id="cancelImageUploadBtn" class="bg-gray-500 hover:bg-gray-600 text-white px-4 py-2 rounded vi hidden-language"> | |
| Hủy | |
| </button> | |
| <button id="confirmImageUploadBtn" class="bg-yellow-500 hover:bg-yellow-600 text-black px-4 py-2 rounded en"> | |
| Update Image | |
| </button> | |
| <button id="confirmImageUploadBtn" class="bg-yellow-500 hover:bg-yellow-600 text-black px-4 py-2 rounded vi hidden-language"> | |
| Cập nhật ảnh | |
| </button> | |
| </div> | |
| </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"> | |
| <div class="flex space-x-4"> | |
| <div id="englishBtn" class="language-option active-language px-2">English</div> | |
| <div id="vietnameseBtn" class="language-option px-2">Tiếng Việt</div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Header --> | |
| <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"> | |
| <div class="flex items-center"> | |
| <div class="image-editable mr-4"> | |
| <img src="https://upload.wikimedia.org/wikipedia/commons/2/21/Flag_of_Vietnam.svg" alt="Vietnamese Flag" class="h-12"> | |
| <div class="image-upload-btn" onclick="openImageUploadModal(this, 'header-flag')"> | |
| <i class="fas fa-camera"></i> | |
| </div> | |
| </div> | |
| <div> | |
| <h1 class="text-3xl font-bold en editable">Vietnamese Cultural Association | |
| <span class="edit-btn" onclick="openEditModal(this, 'header-title-en')"><i class="fas fa-pencil"></i></span> | |
| </h1> | |
| <h1 class="text-3xl font-bold vi hidden-language editable">Hội Văn Hóa Việt Nam | |
| <span class="edit-btn" onclick="openEditModal(this, 'header-title-vi')"><i class="fas fa-pencil"></i></span> | |
| </h1> | |
| <p class="text-yellow-300 en editable">Preserving heritage, building community | |
| <span class="edit-btn" onclick="openEditModal(this, 'header-subtitle-en')"><i class="fas fa-pencil"></i></span> | |
| </p> | |
| <p class="text-yellow-300 vi hidden-language editable">Gìn giữ di sản, xây dựng cộng đồng | |
| <span class="edit-btn" onclick="openEditModal(this, 'header-subtitle-vi')"><i class="fas fa-pencil"></i></span> | |
| </p> | |
| </div> | |
| </div> | |
| <button id="adminLoginBtn" class="bg-yellow-500 hover:bg-yellow-600 text-black px-4 py-2 rounded-lg font-semibold en"> | |
| Admin Login | |
| </button> | |
| <button id="adminLoginBtn" class="bg-yellow-500 hover:bg-yellow-600 text-black px-4 py-2 rounded-lg font-semibold vi hidden-language"> | |
| Đăng nhập Quản trị | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Navigation --> | |
| <nav class="bg-yellow-600 text-white"> | |
| <div class="container mx-auto px-4"> | |
| <ul class="flex justify-center space-x-8 py-4"> | |
| <li><a href="#home" class="hover:text-yellow-200 font-medium en editable">Home | |
| <span class="edit-btn" onclick="openEditModal(this, 'nav-home-en')"><i class="fas fa-pencil"></i></span> | |
| </a></li> | |
| <li><a href="#home" class="hover:text-yellow-200 font-medium vi hidden-language editable">Trang chủ | |
| <span class="edit-btn" onclick="openEditModal(this, 'nav-home-vi')"><i class="fas fa-pencil"></i></span> | |
| </a></li> | |
| <li><a href="#about" class="hover:text-yellow-200 font-medium en editable">About Us | |
| <span class="edit-btn" onclick="openEditModal(this, 'nav-about-en')"><i class="fas fa-pencil"></i></span> | |
| </a></li> | |
| <li><a href="#about" class="hover:text-yellow-200 font-medium vi hidden-language editable">Về chúng tôi | |
| <span class="edit-btn" onclick="openEditModal(this, 'nav-about-vi')"><i class="fas fa-pencil"></i></span> | |
| </a></li> | |
| <li><a href="#events" class="hover:text-yellow-200 font-medium en editable">Events | |
| <span class="edit-btn" onclick="openEditModal(this, 'nav-events-en')"><i class="fas fa-pencil"></i></span> | |
| </a></li> | |
| <li><a href="#events" class="hover:text-yellow-200 font-medium vi hidden-language editable">Sự kiện | |
| <span class="edit-btn" onclick="openEditModal(this, 'nav-events-vi')"><i class="fas fa-pencil"></i></span> | |
| </a></li> | |
| <li><a href="#gallery" class="hover:text-yellow-200 font-medium en editable">Gallery | |
| <span class="edit-btn" onclick="openEditModal(this, 'nav-gallery-en')"><i class="fas fa-pencil"></i></span> | |
| </a></li> | |
| <li><a href="#gallery" class="hover:text-yellow-200 font-medium vi hidden-language editable">Thư viện ảnh | |
| <span class="edit-btn" onclick="openEditModal(this, 'nav-gallery-vi')"><i class="fas fa-pencil"></i></span> | |
| </a></li> | |
| <li><a href="#membership" class="hover:text-yellow-200 font-medium en editable">Membership | |
| <span class="edit-btn" onclick="openEditModal(this, 'nav-membership-en')"><i class="fas fa-pencil"></i></span> | |
| </a></li> | |
| <li><a href="#membership" class="hover:text-yellow-200 font-medium vi hidden-language editable">Thành viên | |
| <span class="edit-btn" onclick="openEditModal(this, 'nav-membership-vi')"><i class="fas fa-pencil"></i></span> | |
| </a></li> | |
| <li><a href="#contact" class="hover:text-yellow-200 font-medium en editable">Contact | |
| <span class="edit-btn" onclick="openEditModal(this, 'nav-contact-en')"><i class="fas fa-pencil"></i></span> | |
| </a></li> | |
| <li><a href="#contact" class="hover:text-yellow-200 font-medium vi hidden-language editable">Liên hệ | |
| <span class="edit-btn" onclick="openEditModal(this, 'nav-contact-vi')"><i class="fas fa-pencil"></i></span> | |
| </a></li> | |
| </ul> | |
| </div> | |
| </nav> | |
| </header> | |
| <!-- Main Content --> | |
| <main> | |
| <!-- Hero Section --> | |
| <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 | |
| <span class="edit-btn" onclick="openEditModal(this, 'hero-title-en')"><i class="fas fa-pencil"></i></span> | |
| </h2> | |
| <h2 class="text-5xl font-bold mb-6 vi hidden-language editable">Chào mừng đến với Cộng đồng | |
| <span class="edit-btn" onclick="openEditModal(this, 'hero-title-vi')"><i class="fas fa-pencil"></i></span> | |
| </h2> | |
| <p class="text-xl mb-8 max-w-3xl mx-auto en editable">Celebrating Vietnamese culture, traditions, and values through events, education, and community engagement. | |
| <span class="edit-btn" onclick="openEditModal(this, 'hero-desc-en')"><i class="fas fa-pencil"></i></span> | |
| </p> | |
| <p class="text-xl mb-8 max-w-3xl mx-auto vi hidden-language editable">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. | |
| <span class="edit-btn" onclick="openEditModal(this, 'hero-desc-vi')"><i class="fas fa-pencil"></i></span> | |
| </p> | |
| <div class="flex justify-center space-x-4"> | |
| <a href="#membership" class="bg-yellow-500 hover:bg-yellow-600 text-black px-6 py-3 rounded-lg font-semibold text-lg en editable">Join Us | |
| <span class="edit-btn" onclick="openEditModal(this, 'hero-join-en')"><i class="fas fa-pencil"></i></span> | |
| </a> | |
| <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 editable">Tham gia | |
| <span class="edit-btn" onclick="openEditModal(this, 'hero-join-vi')"><i class="fas fa-pencil"></i></span> | |
| </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 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> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- About Us Section --> | |
| <section id="about" class="py-16 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-4xl font-bold text-center mb-12 text-gray-800 en editable">About Our Association | |
| <span class="edit-btn" onclick="openEditModal(this, 'about-title-en')"><i class="fas fa-pencil"></i></span> | |
| </h2> | |
| <h2 class="text-4xl font-bold text-center mb-12 text-gray-800 vi hidden-language editable">Về Hội chúng tôi | |
| <span class="edit-btn" onclick="openEditModal(this, 'about-title-vi')"><i class="fas fa-pencil"></i></span> | |
| </h2> | |
| <div class="flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/2 mb-8 md:mb-0 md:pr-8"> | |
| <div class="image-editable"> | |
| <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"> | |
| <div class="image-upload-btn" onclick="openImageUploadModal(this, 'about-image')"> | |
| <i class="fas fa-camera"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="md:w-极 | |
| </html> |