From cf9d8399e0eaf409993745e5d2933f6b2fcd1a0e Mon Sep 17 00:00:00 2001
From: Quang Khai Nguyen <quang_khai.nguyen2@sbb.ch>
Date: Mon, 12 Oct 2026 09:58:43 +0200
Subject: [PATCH] AI cleaned up

---
 index.html | 39 ++++++++++++++++++++-------------------
 1 file changed, 20 insertions(+), 19 deletions(-)

diff --git a/index.html b/index.html
index 8205481..59a8b22 100755
--- a/index.html
+++ b/index.html
@@ -78,7 +78,7 @@
                     </a>
 
                     <!-- Mobile Menu Button -->
-                    <button onclick="toggleMobileMenu()" class="md:hidden text-gray-700 p-2 focus:outline-none">
+                    <button onclick="toggleMobileMenu()" aria-label="Toggle navigation" aria-controls="mobile-menu" aria-expanded="false" class="md:hidden text-gray-700 p-2 focus:outline-none">
                         <i class="fa-solid fa-bars text-2xl"></i>
                     </button>
                 </div>
@@ -172,10 +172,10 @@
                 
                 <!-- Filter Buttons -->
                 <div class="flex flex-wrap justify-center gap-2 pt-4">
-                    <button onclick="filterAttractions('all')" class="filter-btn active px-5 py-2 rounded-xl text-sm font-bold bg-brand-500 text-white shadow" data-i18n="filter_all">Tất cả</button>
-                    <button onclick="filterAttractions('culture')" class="filter-btn px-5 py-2 rounded-xl text-sm font-bold bg-white text-gray-600 hover:bg-gray-100 shadow-sm" data-i18n="filter_culture">Văn hóa</button>
-                    <button onclick="filterAttractions('fun')" class="filter-btn px-5 py-2 rounded-xl text-sm font-bold bg-white text-gray-600 hover:bg-gray-100 shadow-sm" data-i18n="filter_fun">Giải trí</button>
-                    <button onclick="filterAttractions('nature')" class="filter-btn px-5 py-2 rounded-xl text-sm font-bold bg-white text-gray-600 hover:bg-gray-100 shadow-sm" data-i18n="filter_nature">Thiên nhiên</button>
+                    <button onclick="filterAttractions('all', event)" class="filter-btn active px-5 py-2 rounded-xl text-sm font-bold bg-brand-500 text-white shadow" data-i18n="filter_all">Tất cả</button>
+                    <button onclick="filterAttractions('culture', event)" class="filter-btn px-5 py-2 rounded-xl text-sm font-bold bg-white text-gray-600 hover:bg-gray-100 shadow-sm" data-i18n="filter_culture">Văn hóa</button>
+                    <button onclick="filterAttractions('fun', event)" class="filter-btn px-5 py-2 rounded-xl text-sm font-bold bg-white text-gray-600 hover:bg-gray-100 shadow-sm" data-i18n="filter_fun">Giải trí</button>
+                    <button onclick="filterAttractions('nature', event)" class="filter-btn px-5 py-2 rounded-xl text-sm font-bold bg-white text-gray-600 hover:bg-gray-100 shadow-sm" data-i18n="filter_nature">Thiên nhiên</button>
                 </div>
             </div>
 
@@ -316,23 +316,23 @@
             <form onsubmit="handleBooking(event)" class="bg-white text-gray-800 p-8 sm:p-12 rounded-3xl shadow-2xl space-y-6">
                 <div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
                     <div>
-                        <label class="block text-sm font-bold text-gray-700 mb-2" data-i18n="form_name">Họ và tên</label>
-                        <input type="text" required class="w-full px-4 py-3 rounded-xl border border-gray-200 focus:outline-none focus:border-brand-500 transition" placeholder="John / 张伟 / Alexey / Nguyen Van A">
+                        <label for="booking-name" class="block text-sm font-bold text-gray-700 mb-2" data-i18n="form_name">Họ và tên</label>
+                        <input id="booking-name" name="name" type="text" autocomplete="name" required class="w-full px-4 py-3 rounded-xl border border-gray-200 focus:outline-none focus:border-brand-500 transition" placeholder="John / 张伟 / Alexey / Nguyen Van A">
                     </div>
                     <div>
-                        <label class="block text-sm font-bold text-gray-700 mb-2" data-i18n="form_email">Email</label>
-                        <input type="email" required class="w-full px-4 py-3 rounded-xl border border-gray-200 focus:outline-none focus:border-brand-500 transition" placeholder="example@mail.com">
+                        <label for="booking-email" class="block text-sm font-bold text-gray-700 mb-2" data-i18n="form_email">Email</label>
+                        <input id="booking-email" name="email" type="email" autocomplete="email" required class="w-full px-4 py-3 rounded-xl border border-gray-200 focus:outline-none focus:border-brand-500 transition" placeholder="example@mail.com">
                     </div>
                 </div>
 
                 <div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
                     <div>
-                        <label class="block text-sm font-bold text-gray-700 mb-2" data-i18n="form_phone">Số điện thoại</label>
-                        <input type="tel" required class="w-full px-4 py-3 rounded-xl border border-gray-200 focus:outline-none focus:border-brand-500 transition" placeholder="+84 / +86 / +7 / +1 ...">
+                        <label for="booking-phone" class="block text-sm font-bold text-gray-700 mb-2" data-i18n="form_phone">Số điện thoại</label>
+                        <input id="booking-phone" name="phone" type="tel" autocomplete="tel" required class="w-full px-4 py-3 rounded-xl border border-gray-200 focus:outline-none focus:border-brand-500 transition" placeholder="+84 / +86 / +7 / +1 ...">
                     </div>
                     <div>
-                        <label class="block text-sm font-bold text-gray-700 mb-2" data-i18n="form_package">Lựa chọn gói tour</label>
-                        <select class="w-full px-4 py-3 rounded-xl border border-gray-200 focus:outline-none focus:border-brand-500 transition bg-white">
+                        <label for="booking-package" class="block text-sm font-bold text-gray-700 mb-2" data-i18n="form_package">Lựa chọn gói tour</label>
+                        <select id="booking-package" name="package" class="w-full px-4 py-3 rounded-xl border border-gray-200 focus:outline-none focus:border-brand-500 transition bg-white">
                             <option value="standard" data-i18n="pkg_1">Khám phá thành phố & VinWonders</option>
                             <option value="island" data-i18n="pkg_2">Tour lặn biển & Các đảo</option>
                             <option value="relax" data-i18n="pkg_3">Nghỉ dưỡng & Tắm bùn khoáng</option>
@@ -341,8 +341,8 @@
                 </div>
 
                 <div>
-                    <label class="block text-sm font-bold text-gray-700 mb-2" data-i18n="form_notes">Yêu cầu đặc biệt</label>
-                    <textarea rows="3" class="w-full px-4 py-3 rounded-xl border border-gray-200 focus:outline-none focus:border-brand-500 transition" placeholder="..."></textarea>
+                    <label for="booking-notes" class="block text-sm font-bold text-gray-700 mb-2" data-i18n="form_notes">Yêu cầu đặc biệt</label>
+                    <textarea id="booking-notes" name="notes" rows="3" class="w-full px-4 py-3 rounded-xl border border-gray-200 focus:outline-none focus:border-brand-500 transition" placeholder="..."></textarea>
                 </div>
 
                 <button type="submit" class="w-full py-4 bg-brand-500 hover:bg-brand-600 text-white font-bold rounded-xl shadow-lg shadow-brand-500/30 transition text-lg" data-i18n="form_submit">
@@ -372,12 +372,12 @@
     </footer>
 
     <!-- Success Modal -->
-    <div id="success-modal" class="hidden fixed inset-0 z-50 bg-black/60 backdrop-blur-sm flex items-center justify-center p-4">
+    <div id="success-modal" role="dialog" aria-modal="true" aria-labelledby="modal-title" class="hidden fixed inset-0 z-50 bg-black/60 backdrop-blur-sm flex items-center justify-center p-4">
         <div class="bg-white rounded-3xl max-w-md w-full p-8 text-center space-y-4 shadow-2xl">
             <div class="w-16 h-16 bg-green-100 text-green-500 rounded-full flex items-center justify-center text-3xl mx-auto">
                 <i class="fa-solid fa-check"></i>
             </div>
-            <h3 class="text-2xl font-bold text-gray-900" data-i18n="modal_title">Thành công!</h3>
+            <h3 id="modal-title" class="text-2xl font-bold text-gray-900" data-i18n="modal_title">Thành công!</h3>
             <p class="text-gray-600 text-sm" data-i18n="modal_desc">Yêu cầu của bạn đã được gửi. Chúng tôi sẽ liên hệ lại sớm nhất.</p>
             <button onclick="closeModal()" class="w-full py-3 bg-brand-500 text-white font-bold rounded-xl shadow hover:bg-brand-600 transition" data-i18n="modal_btn">Đóng</button>
         </div>
@@ -710,13 +710,14 @@
         function toggleMobileMenu() {
             const menu = document.getElementById('mobile-menu');
             menu.classList.toggle('hidden');
+            document.querySelector('[aria-controls="mobile-menu"]').setAttribute('aria-expanded', !menu.classList.contains('hidden'));
         }
 
-        function filterAttractions(category) {
+        function filterAttractions(category, event) {
             document.querySelectorAll('.filter-btn').forEach(btn => {
                 btn.className = "filter-btn px-5 py-2 rounded-xl text-sm font-bold bg-white text-gray-600 hover:bg-gray-100 shadow-sm";
             });
-            event.target.className = "filter-btn active px-5 py-2 rounded-xl text-sm font-bold bg-brand-500 text-white shadow";
+            event.currentTarget.className = "filter-btn active px-5 py-2 rounded-xl text-sm font-bold bg-brand-500 text-white shadow";
 
             document.querySelectorAll('.attraction-card').forEach(card => {
                 if (category === 'all' || card.getAttribute('data-category') === category) {