refactoring
This commit is contained in:
Quang Khai Nguyen committed
1 parent
69c67976c7
commit
4b5c254e41
10 files changed
+779
-750
No files matched your search
+28
-42
@@ -30,30 +30,11 @@
|
||||
</script>
|
||||
<!-- Tailwind CSS CDN -->
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<script src="js/tailwind.config.js"></script>
|
||||
<!-- FontAwesome Icons -->
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
||||
<!-- Google Fonts -->
|
||||
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=Noto+Sans+SC:wght@400;500;700&display=swap" rel="stylesheet">
|
||||
<script>
|
||||
tailwind.config = {
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
brand: {
|
||||
50: '#eef8ff',
|
||||
100: '#d8effe',
|
||||
500: '#0088cc',
|
||||
600: '#006699',
|
||||
700: '#004d73',
|
||||
}
|
||||
},
|
||||
fontFamily: {
|
||||
sans: ['"Plus Jakarta Sans"', '"Noto Sans SC"', 'sans-serif'],
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<link rel="stylesheet" href="css/styles.css">
|
||||
</head>
|
||||
<body class="bg-gray-50 text-gray-800 font-sans antialiased">
|
||||
@@ -96,12 +77,12 @@
|
||||
<div class="flex items-center space-x-3">
|
||||
<!-- Language Switcher -->
|
||||
<div class="bg-gray-100 p-1 rounded-xl flex items-center shadow-inner text-xs">
|
||||
<button onclick="setLanguage('vi')" id="btn-vi" aria-label="Tiếng Việt" title="Tiếng Việt" class="px-2.5 py-1.5 font-bold rounded-lg transition bg-white text-brand-600 shadow-sm">🇻🇳</button>
|
||||
<button onclick="setLanguage('ru')" id="btn-ru" aria-label="Русский" title="Русский" class="px-2.5 py-1.5 font-bold rounded-lg transition text-gray-600">🇷🇺</button>
|
||||
<button onclick="setLanguage('en')" id="btn-en" aria-label="English" title="English" class="px-2.5 py-1.5 font-bold rounded-lg transition text-gray-600">🇬🇧</button>
|
||||
<button onclick="setLanguage('zh')" id="btn-zh" aria-label="中文" title="中文" class="px-2.5 py-1.5 font-bold rounded-lg transition text-gray-600">🇨🇳</button>
|
||||
<button onclick="setLanguage('de')" id="btn-de" aria-label="Deutsch" title="Deutsch" class="px-2.5 py-1.5 font-bold rounded-lg transition text-gray-600">🇩🇪</button>
|
||||
<button onclick="setLanguage('fr')" id="btn-fr" aria-label="Français" title="Français" class="px-2.5 py-1.5 font-bold rounded-lg transition text-gray-600">🇫🇷</button>
|
||||
<button data-lang="vi" id="btn-vi" aria-label="Tiếng Việt" title="Tiếng Việt" class="px-2.5 py-1.5 font-bold rounded-lg transition bg-white text-brand-600 shadow-sm">🇻🇳</button>
|
||||
<button data-lang="ru" id="btn-ru" aria-label="Русский" title="Русский" class="px-2.5 py-1.5 font-bold rounded-lg transition text-gray-600">🇷🇺</button>
|
||||
<button data-lang="en" id="btn-en" aria-label="English" title="English" class="px-2.5 py-1.5 font-bold rounded-lg transition text-gray-600">🇬🇧</button>
|
||||
<button data-lang="zh" id="btn-zh" aria-label="中文" title="中文" class="px-2.5 py-1.5 font-bold rounded-lg transition text-gray-600">🇨🇳</button>
|
||||
<button data-lang="de" id="btn-de" aria-label="Deutsch" title="Deutsch" class="px-2.5 py-1.5 font-bold rounded-lg transition text-gray-600">🇩🇪</button>
|
||||
<button data-lang="fr" id="btn-fr" aria-label="Français" title="Français" class="px-2.5 py-1.5 font-bold rounded-lg transition text-gray-600">🇫🇷</button>
|
||||
</div>
|
||||
|
||||
<a href="#booking" class="hidden sm:inline-flex items-center justify-center px-4 py-2.5 bg-brand-500 hover:bg-brand-600 text-white text-sm font-semibold rounded-xl shadow-lg shadow-brand-500/25 transition transform hover:-translate-y-0.5" data-i18n="nav_cta">
|
||||
@@ -109,7 +90,7 @@
|
||||
</a>
|
||||
|
||||
<!-- Mobile Menu Button -->
|
||||
<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">
|
||||
<button id="mobile-menu-toggle" 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>
|
||||
@@ -118,11 +99,11 @@
|
||||
|
||||
<!-- Mobile Drawer -->
|
||||
<div id="mobile-menu" class="hidden md:hidden bg-white border-b px-4 pt-2 pb-6 space-y-3 shadow-lg">
|
||||
<a href="#about" onclick="toggleMobileMenu()" class="block py-2 text-gray-600 font-medium" data-i18n="nav_about">Về Nha Trang</a>
|
||||
<a href="#attractions" onclick="toggleMobileMenu()" class="block py-2 text-gray-600 font-medium" data-i18n="nav_attractions">Điểm đến</a>
|
||||
<a href="#weather" onclick="toggleMobileMenu()" class="block py-2 text-gray-600 font-medium" data-i18n="nav_weather">Thời tiết</a>
|
||||
<a href="#food" onclick="toggleMobileMenu()" class="block py-2 text-gray-600 font-medium" data-i18n="nav_food">Ẩm thực</a>
|
||||
<a href="#booking" onclick="toggleMobileMenu()" class="block text-center py-3 bg-brand-500 text-white font-semibold rounded-xl shadow" data-i18n="nav_cta">Đặt tour</a>
|
||||
<a href="#about" class="mobile-nav-link block py-2 text-gray-600 font-medium" data-i18n="nav_about">Về Nha Trang</a>
|
||||
<a href="#attractions" class="mobile-nav-link block py-2 text-gray-600 font-medium" data-i18n="nav_attractions">Điểm đến</a>
|
||||
<a href="#weather" class="mobile-nav-link block py-2 text-gray-600 font-medium" data-i18n="nav_weather">Thời tiết</a>
|
||||
<a href="#food" class="mobile-nav-link block py-2 text-gray-600 font-medium" data-i18n="nav_food">Ẩm thực</a>
|
||||
<a href="#booking" class="mobile-nav-link block text-center py-3 bg-brand-500 text-white font-semibold rounded-xl shadow" data-i18n="nav_cta">Đặt tour</a>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
@@ -203,10 +184,10 @@
|
||||
|
||||
<!-- Filter Buttons -->
|
||||
<div class="flex flex-wrap justify-center gap-2 pt-4">
|
||||
<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>
|
||||
<button data-filter="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 data-filter="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 data-filter="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 data-filter="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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -334,7 +315,7 @@
|
||||
<!-- Item 8 -->
|
||||
<div class="attraction-card bg-white rounded-3xl overflow-hidden shadow-md hover:shadow-2xl transition border border-gray-100 flex flex-col" data-category="culture">
|
||||
<div class="relative h-64 overflow-hidden">
|
||||
<img src="images/ThapBa.png" alt="Cham tower architecture" class="w-full h-full object-cover transform hover:scale-105 transition duration-500">
|
||||
<img src="images/ThapBa.png" alt="Po Klong Garai Cham towers" class="w-full h-full object-cover transform hover:scale-105 transition duration-500">
|
||||
<span class="absolute top-4 right-4 bg-black/60 backdrop-blur-md text-white text-xs px-3 py-1.5 rounded-full font-semibold" data-i18n="cat_culture">Văn hóa</span>
|
||||
</div>
|
||||
<div class="p-6 flex-1 flex flex-col justify-between">
|
||||
@@ -454,14 +435,14 @@
|
||||
</div>
|
||||
<div class="bg-white rounded-3xl p-6 shadow-sm border border-gray-100 space-y-4">
|
||||
<div class="h-48 rounded-2xl overflow-hidden">
|
||||
<img src="images/BunCa.jpg" alt="Pho" class="w-full h-full object-cover">
|
||||
<img src="images/BunCa.jpg" alt="Bun ca Nha Trang fish noodle soup" class="w-full h-full object-cover">
|
||||
</div>
|
||||
<h3 class="text-xl font-bold text-gray-900" data-i18n="food_2_title">Phở & Bún cá Nha Trang</h3>
|
||||
<p class="text-gray-600 text-sm" data-i18n="food_2_desc">Món bún cá chả thanh ngọt đậm đà hương vị biển hoặc phở bò truyền thống chuẩn vị Việt Nam.</p>
|
||||
</div>
|
||||
<div class="bg-white rounded-3xl p-6 shadow-sm border border-gray-100 space-y-4">
|
||||
<div class="h-48 rounded-2xl overflow-hidden">
|
||||
<img src="images/BanhXeoMuc.jpg" alt="Banh Xeo" class="w-full h-full object-cover">
|
||||
<img src="images/BanhXeoMuc.jpg" alt="Banh xeo with squid" class="w-full h-full object-cover">
|
||||
</div>
|
||||
<h3 class="text-xl font-bold text-gray-900" data-i18n="food_3_title">Bánh xèo mực</h3>
|
||||
<p class="text-gray-600 text-sm" data-i18n="food_3_desc">Bánh xèo giòn rụm nhân mực tươi ngọt lịm ăn kèm rau sống và nước mắm chua ngọt đặc chế.</p>
|
||||
@@ -478,7 +459,7 @@
|
||||
<p class="text-brand-100 text-lg" data-i18n="book_desc">Hãy để chúng tôi giúp bạn lên kế hoạch cho chuyến đi hoàn hảo nhất.</p>
|
||||
</div>
|
||||
|
||||
<form action="https://formspree.io/f/YOUR_FORM_ID" method="POST" onsubmit="handleBooking(event)" class="bg-white text-gray-800 p-8 sm:p-12 rounded-3xl shadow-2xl space-y-6">
|
||||
<form action="https://formspree.io/f/YOUR_FORM_ID" method="POST" id="booking-form" 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 for="booking-name" class="block text-sm font-bold text-gray-700 mb-2" data-i18n="form_name">Họ và tên</label>
|
||||
@@ -545,12 +526,17 @@
|
||||
</div>
|
||||
<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>
|
||||
<button id="modal-close-btn" 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>
|
||||
</div>
|
||||
|
||||
<!-- Translations & Script Logic -->
|
||||
<script src="js/translations.js"></script>
|
||||
<script src="js/locales/vi.js"></script>
|
||||
<script src="js/locales/ru.js"></script>
|
||||
<script src="js/locales/en.js"></script>
|
||||
<script src="js/locales/zh.js"></script>
|
||||
<script src="js/locales/de.js"></script>
|
||||
<script src="js/locales/fr.js"></script>
|
||||
<script src="js/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in new issue
Block a user