Files
dulichnhatrang/index.html
T
2026-10-14 06:30:30 +02:00

1186 lines
84 KiB
HTML
Executable File
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title data-i18n="page_title">Nha Trang — Thiên đường du lịch biển Việt Nam | 芽庄 | Nha Trang | Нячанг</title>
<meta id="meta-description" name="description" content="Khám phá Nha Trang, Phan Rang và vịnh Vĩnh Hy: điểm tham quan, thời tiết, ẩm thực địa phương và tour du lịch.">
<link id="canonical-url" rel="canonical" href="https://kyduyen.duckdns.org/?lang=vi">
<link rel="alternate" hreflang="vi" href="https://kyduyen.duckdns.org/?lang=vi">
<link rel="alternate" hreflang="ru" href="https://kyduyen.duckdns.org/?lang=ru">
<link rel="alternate" hreflang="en" href="https://kyduyen.duckdns.org/?lang=en">
<link rel="alternate" hreflang="zh" href="https://kyduyen.duckdns.org/?lang=zh">
<link rel="alternate" hreflang="de" href="https://kyduyen.duckdns.org/?lang=de">
<link rel="alternate" hreflang="fr" href="https://kyduyen.duckdns.org/?lang=fr">
<link rel="alternate" hreflang="x-default" href="https://kyduyen.duckdns.org/?lang=vi">
<meta property="og:type" content="website">
<meta id="og-title" property="og:title" content="Nha Trang — Thiên đường du lịch biển Việt Nam">
<meta id="og-description" property="og:description" content="Khám phá Nha Trang, Phan Rang và vịnh Vĩnh Hy: điểm tham quan, thời tiết, ẩm thực địa phương và tour du lịch.">
<meta id="og-url" property="og:url" content="https://kyduyen.duckdns.org/?lang=vi">
<meta id="og-locale" property="og:locale" content="vi_VN">
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "WebSite",
"name": "Nha Trang Travel Guide",
"url": "https://kyduyen.duckdns.org/",
"description": "A travel guide to Nha Trang, Phan Rang, and Vĩnh Hy Bay, with attractions, seasonal weather, local cuisine, and tours.",
"inLanguage": ["vi", "ru", "en", "zh", "de", "fr"]
}
</script>
<!-- Tailwind CSS CDN -->
<script src="https://cdn.tailwindcss.com"></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>
<style>
.hero-bg {
background: linear-gradient(rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.55)), url('https://images.unsplash.com/photo-1507525428034-b723cf961d3e?auto=format&fit=crop&w=1920&q=80');
background-size: cover;
background-position: center;
}
</style>
</head>
<body class="bg-gray-50 text-gray-800 font-sans antialiased">
<!-- Top Bar / Navigation -->
<header class="sticky top-0 z-50 bg-white/95 backdrop-blur-md shadow-sm transition-all">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between items-center h-20">
<!-- Logo -->
<div class="flex items-center space-x-3">
<div class="bg-brand-500 text-white p-2.5 rounded-xl shadow-md">
<i class="fa-solid fa-umbrella-beach text-xl"></i>
</div>
<div>
<span class="text-xl font-bold tracking-tight text-gray-900 block leading-none">Nha Trang</span>
<span class="text-xs font-semibold text-brand-600 tracking-wider uppercase" data-i18n="logo_sub">Paradise Bay</span>
</div>
</div>
<!-- Desktop Menu -->
<nav class="hidden md:flex items-center space-x-6 lg:space-x-8 font-medium text-sm lg:text-base">
<a href="#about" class="text-gray-600 hover:text-brand-600 transition" data-i18n="nav_about">Về Nha Trang</a>
<a href="#attractions" class="text-gray-600 hover:text-brand-600 transition" data-i18n="nav_attractions">Điểm đến</a>
<a href="#weather" class="text-gray-600 hover:text-brand-600 transition" data-i18n="nav_weather">Thời tiết</a>
<a href="#food" class="text-gray-600 hover:text-brand-600 transition" data-i18n="nav_food">Ẩm thực</a>
</nav>
<div class="hidden xl:flex items-center gap-2.5 border-l border-gray-200 pl-5" role="status" aria-live="polite" aria-label="Nha Trang weather">
<i id="weather-icon" class="fa-solid fa-cloud-sun text-2xl text-amber-500" aria-hidden="true"></i>
<div class="leading-tight">
<div class="flex items-baseline gap-1.5">
<span id="weather-temperature" class="text-lg font-bold text-gray-900">--°C</span>
<span id="weather-location" class="text-xs font-semibold text-gray-500">Nha Trang</span>
</div>
<span id="weather-condition" class="text-xs text-gray-500" data-i18n="weather_loading">Đang tải thời tiết...</span>
</div>
</div>
<!-- Action & Language Toggle -->
<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>
</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">
Đặt tour
</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">
<i class="fa-solid fa-bars text-2xl"></i>
</button>
</div>
</div>
</div>
<!-- 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>
</div>
</header>
<!-- Hero Section -->
<section class="hero-bg min-h-[85vh] flex items-center justify-center text-center px-4 relative">
<div class="max-w-4xl mx-auto text-white space-y-6">
<span class="inline-block px-4 py-1.5 bg-white/20 backdrop-blur-md rounded-full text-sm font-semibold tracking-wide uppercase border border-white/30" data-i18n="hero_badge">
🇻🇳 Thiên đường biển Việt Nam
</span>
<h1 class="text-4xl sm:text-6xl lg:text-7xl font-extrabold tracking-tight leading-tight" data-i18n="hero_title">
Khám phá vẻ đẹp kỳ diệu Nha Trang
</h1>
<p class="text-lg sm:text-xl text-gray-200 max-w-2xl mx-auto font-light" data-i18n="hero_subtitle">
Tận hưởng làn nước biếc, bãi cát trắng mịn, ánh nắng nhiệt đới rực rỡ và những trải nghiệm khó quên.
</p>
<div class="pt-4 flex flex-col sm:flex-row justify-center gap-4">
<a href="#attractions" class="px-8 py-4 bg-brand-500 hover:bg-brand-600 text-white font-bold rounded-2xl shadow-xl shadow-brand-500/30 transition text-lg" data-i18n="hero_btn_explore">
Khám phá ngay
</a>
<a href="#booking" class="px-8 py-4 bg-white/10 hover:bg-white/20 text-white font-bold rounded-2xl backdrop-blur-md border border-white/30 transition text-lg" data-i18n="hero_btn_book">
Đặt tour
</a>
</div>
</div>
</section>
<!-- Why Visit Section -->
<section id="about" class="py-20 bg-white">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center max-w-3xl mx-auto mb-16 space-y-4">
<h2 class="text-3xl sm:text-4xl font-extrabold text-gray-900" data-i18n="why_title">Tại sao nên chọn Nha Trang?</h2>
<p class="text-gray-600 text-lg" data-i18n="why_desc">Điểm đến hàng đầu cho kỳ nghỉ hoàn hảo của gia đình và bạn bè.</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
<!-- Card 1 -->
<div class="bg-gray-50 p-8 rounded-3xl border border-gray-100 hover:shadow-xl transition group">
<div class="w-14 h-14 bg-brand-50 text-brand-500 rounded-2xl flex items-center justify-center text-2xl font-bold mb-6 group-hover:bg-brand-500 group-hover:text-white transition">
<i class="fa-solid fa-sun"></i>
</div>
<h3 class="text-xl font-bold text-gray-900 mb-3" data-i18n="feature_1_title">Khí hậu tuyệt vời</h3>
<p class="text-gray-600 leading-relaxed text-sm" data-i18n="feature_1_desc">Hơn 300 ngày nắng ấm trong năm, bầu trời trong xanh và không khí biển trong lành.</p>
</div>
<!-- Card 2 -->
<div class="bg-gray-50 p-8 rounded-3xl border border-gray-100 hover:shadow-xl transition group">
<div class="w-14 h-14 bg-brand-50 text-brand-500 rounded-2xl flex items-center justify-center text-2xl font-bold mb-6 group-hover:bg-brand-500 group-hover:text-white transition">
<i class="fa-solid fa-water"></i>
</div>
<h3 class="text-xl font-bold text-gray-900 mb-3" data-i18n="feature_2_title">Bãi biển thiên đường</h3>
<p class="text-gray-600 leading-relaxed text-sm" data-i18n="feature_2_desc">Hàng kilômét bờ cát trắng mịn màng cùng làn nước biển màu ngọc lam tuyệt đẹp.</p>
</div>
<!-- Card 3 -->
<div class="bg-gray-50 p-8 rounded-3xl border border-gray-100 hover:shadow-xl transition group">
<div class="w-14 h-14 bg-brand-50 text-brand-500 rounded-2xl flex items-center justify-center text-2xl font-bold mb-6 group-hover:bg-brand-500 group-hover:text-white transition">
<i class="fa-solid fa-landmark"></i>
</div>
<h3 class="text-xl font-bold text-gray-900 mb-3" data-i18n="feature_3_title">Di sản văn hóa</h3>
<p class="text-gray-600 leading-relaxed text-sm" data-i18n="feature_3_desc">Khám phá Tháp Bà Ponagar cổ kính, chùa chiền linh thiêng và văn hóa Champa độc đáo.</p>
</div>
<!-- Card 4 -->
<div class="bg-gray-50 p-8 rounded-3xl border border-gray-100 hover:shadow-xl transition group">
<div class="w-14 h-14 bg-brand-50 text-brand-500 rounded-2xl flex items-center justify-center text-2xl font-bold mb-6 group-hover:bg-brand-500 group-hover:text-white transition">
<i class="fa-solid fa-utensils"></i>
</div>
<h3 class="text-xl font-bold text-gray-900 mb-3" data-i18n="feature_4_title">Ẩm thực hải sản</h3>
<p class="text-gray-600 leading-relaxed text-sm" data-i18n="feature_4_desc">Thưởng thức hải sản tươi sống đánh bắt trực tiếp từ vịnh và các món đặc sản trứ danh.</p>
</div>
</div>
</div>
</section>
<!-- Attractions Section -->
<section id="attractions" class="py-20 bg-gray-50">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center max-w-3xl mx-auto mb-12 space-y-4">
<h2 class="text-3xl sm:text-4xl font-extrabold text-gray-900" data-i18n="attr_title">Điểm đến nổi bật</h2>
<p class="text-gray-600 text-lg" data-i18n="attr_desc">Những địa danh không thể bỏ lỡ khi ghé thăm thành phố biển.</p>
<!-- 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>
</div>
</div>
<!-- Attractions Grid -->
<div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-8" id="attractions-grid">
<!-- Item 1 -->
<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="Ponagar" 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">
<div>
<h3 class="text-xl font-bold text-gray-900 mb-2" data-i18n="attr_1_title">Tháp Bà Ponagar</h3>
<p class="text-gray-600 text-sm leading-relaxed mb-4" data-i18n="attr_1_desc">Quần thể kiến trúc đền tháp Champa cổ kính xây dựng từ thế kỷ thứ VIII, nằm trên đồi cao hướng ra sông Cái.</p>
</div>
<div class="flex items-center text-brand-600 font-semibold text-sm">
<i class="fa-solid fa-location-dot mr-2"></i> <span data-i18n="attr_1_loc">Đường 2 Tháng 4, Vĩnh Phước</span>
</div>
</div>
</div>
<!-- Item 2 -->
<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="fun">
<div class="relative h-64 overflow-hidden">
<img src="images/VinWonders.jpg" alt="VinWonders" 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_fun">Giải trí</span>
</div>
<div class="p-6 flex-1 flex flex-col justify-between">
<div>
<h3 class="text-xl font-bold text-gray-900 mb-2" data-i18n="attr_2_title">VinWonders Nha Trang</h3>
<p class="text-gray-600 text-sm leading-relaxed mb-4" data-i18n="attr_2_desc">Công viên giải trí của những kỷ lục trên đảo Hòn Tre với cáp treo vượt biển, công viên nước và thủy cung hiện đại.</p>
</div>
<div class="flex items-center text-brand-600 font-semibold text-sm">
<i class="fa-solid fa-location-dot mr-2"></i> <span data-i18n="attr_2_loc">Đảo Hòn Tre, Vĩnh Nguyên</span>
</div>
</div>
</div>
<!-- Item 3 -->
<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="nature">
<div class="relative h-64 overflow-hidden">
<img src="https://images.unsplash.com/photo-1512343879784-a960bf40e7f2?auto=format&fit=crop&w=800&q=80" alt="Mud Bath" 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_nature">Thiên nhiên</span>
</div>
<div class="p-6 flex-1 flex flex-col justify-between">
<div>
<h3 class="text-xl font-bold text-gray-900 mb-2" data-i18n="attr_3_title">Suối khoáng & Tắm bùn</h3>
<p class="text-gray-600 text-sm leading-relaxed mb-4" data-i18n="attr_3_desc">Trải nghiệm dịch vụ tắm bùn khoáng nóng tự nhiên giúp thư giãn cơ thể, phục hồi sức khỏe và làm đẹp da.</p>
</div>
<div class="flex items-center text-brand-600 font-semibold text-sm">
<i class="fa-solid fa-location-dot mr-2"></i> <span data-i18n="attr_3_loc">Tháp Bà / I-Resort Nha Trang</span>
</div>
</div>
</div>
<!-- Item 4 -->
<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="nature">
<div class="relative h-64 overflow-hidden">
<img src="https://images.unsplash.com/photo-1544551763-46a013bb70d5?auto=format&fit=crop&w=800&q=80" alt="Coral reef snorkeling" 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_nature">Thiên nhiên</span>
</div>
<div class="p-6 flex-1 flex flex-col justify-between">
<div>
<h3 class="text-xl font-bold text-gray-900 mb-2" data-i18n="attr_4_title">Tour lặn biển ngắm san hô</h3>
<p class="text-gray-600 text-sm leading-relaxed mb-4" data-i18n="attr_4_desc">Khám phá những rạn san hô rực rỡ trong làn nước trong xanh của vịnh Nha Trang cùng hướng dẫn viên và thiết bị lặn.</p>
</div>
<div class="flex items-center text-brand-600 font-semibold text-sm">
<i class="fa-solid fa-location-dot mr-2"></i> <span data-i18n="attr_4_loc">Vịnh Nha Trang, Khánh Hòa</span>
</div>
</div>
</div>
<!-- Item 5 -->
<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="nature">
<div class="relative h-64 overflow-hidden">
<img src="https://images.unsplash.com/photo-1507525428034-b723cf961d3e?auto=format&fit=crop&w=800&q=80" alt="Vĩnh Hy Bay coastline" 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_nature">Thiên nhiên</span>
</div>
<div class="p-6 flex-1 flex flex-col justify-between">
<div>
<h3 class="text-xl font-bold text-gray-900 mb-2" data-i18n="attr_5_title">Phan Rang và Vịnh Vĩnh Hy</h3>
<p class="text-gray-600 text-sm leading-relaxed mb-4" data-i18n="attr_5_desc">Khám phá cung đường ven biển tuyệt đẹp, làn nước trong xanh của vịnh Vĩnh Hy và cảnh quan thiên nhiên hoang sơ gần Phan Rang.</p>
</div>
<div class="flex items-center text-brand-600 font-semibold text-sm">
<i class="fa-solid fa-location-dot mr-2"></i> <span data-i18n="attr_5_loc">Phan Rang – Tháp Chàm, Ninh Thuận</span>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Weather & Season Guide -->
<section id="weather" class="py-20 bg-white">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center max-w-3xl mx-auto mb-16 space-y-4">
<h2 class="text-3xl sm:text-4xl font-extrabold text-gray-900" data-i18n="weather_title">Thời điểm lý tưởng du lịch</h2>
<p class="text-gray-600 text-lg" data-i18n="weather_desc">Lên kế hoạch cho chuyến đi của bạn với thông tin thời tiết chính xác.</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-4xl mx-auto">
<!-- Dry Season -->
<div class="bg-gradient-to-br from-amber-50 to-orange-50 border border-amber-200/60 p-8 rounded-3xl shadow-sm space-y-4">
<div class="flex items-center space-x-3 text-amber-600">
<i class="fa-solid fa-sun text-3xl"></i>
<span class="font-extrabold text-lg" data-i18n="season_dry_title">Tháng 1 — Tháng 8 (Mùa khô)</span>
</div>
<p class="text-gray-700 text-sm leading-relaxed" data-i18n="season_dry_desc">
Thời kỳ hoàn hảo nhất cho du lịch biển. Trời nắng rực rỡ, biển êm, nước trong vắt, cực kỳ thích hợp cho các hoạt động lặn ngắm san hô, tắm biển và tham quan đảo.
</p>
<div class="pt-2 text-xs font-bold text-amber-700 uppercase tracking-wider" data-i18n="season_dry_tag">✨ Khuyên dùng cho nghỉ dưỡng</div>
</div>
<!-- Rainy Season -->
<div class="bg-gradient-to-br from-blue-50 to-sky-50 border border-blue-200/60 p-8 rounded-3xl shadow-sm space-y-4">
<div class="flex items-center space-x-3 text-blue-600">
<i class="fa-solid fa-cloud-rain text-3xl"></i>
<span class="font-extrabold text-lg" data-i18n="season_rain_title">Tháng 9 — Tháng 12 (Mùa mưa)</span>
</div>
<p class="text-gray-700 text-sm leading-relaxed" data-i18n="season_rain_desc">
Mùa mưa ngắn, thỉnh thoảng có mưa rào nhưng nhiệt độ vẫn ấm áp. Đây là giai đoạn lý tưởng để nghỉ dưỡng tiết kiệm, thưởng thức ẩm thực ấm cúng và trải nghiệm dịch vụ spa.
</p>
<div class="pt-2 text-xs font-bold text-blue-700 uppercase tracking-wider" data-i18n="season_rain_tag">💡 Chi phí tiết kiệm</div>
</div>
</div>
</div>
</section>
<!-- Food Section -->
<section id="food" class="py-20 bg-gray-50">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center max-w-3xl mx-auto mb-16 space-y-4">
<h2 class="text-3xl sm:text-4xl font-extrabold text-gray-900" data-i18n="food_title">Ẩm thực Nha Trang</h2>
<p class="text-gray-600 text-lg" data-i18n="food_desc">Hương vị biển cả đậm đà khó quên.</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<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/seafood.jpg" alt="Seafood" class="w-full h-full object-cover">
</div>
<h3 class="text-xl font-bold text-gray-900" data-i18n="food_1_title">Hải sản tươi sống</h3>
<p class="text-gray-600 text-sm" data-i18n="food_1_desc">Tôm hùm, mực nướng, ốc các loại chế biến trực tiếp tại các nhà hàng ven biển với gia vị đặc trưng.</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/BunCa.jpg" alt="Pho" 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">
</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>
</div>
</div>
</div>
</section>
<!-- Booking Section / Contact Form -->
<section id="booking" class="py-20 bg-brand-700 text-white relative overflow-hidden">
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
<div class="text-center space-y-4 mb-12">
<h2 class="text-3xl sm:text-4xl font-extrabold" data-i18n="book_title">Đặt tour & Tư vấn miễn phí</h2>
<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">
<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>
<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 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 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 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>
</select>
</div>
</div>
<div>
<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">
Gửi yêu cầu đặt tour
</button>
<p id="form-status" role="alert" class="hidden text-sm text-red-600" data-i18n="form_error"></p>
</form>
</div>
</section>
<!-- Footer -->
<footer class="bg-gray-900 text-gray-400 py-12 border-t border-gray-800">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex flex-col md:flex-row justify-between items-center gap-6">
<div class="flex items-center space-x-3">
<div class="bg-brand-500 text-white p-2 rounded-xl">
<i class="fa-solid fa-umbrella-beach"></i>
</div>
<span class="text-white font-bold text-lg">Nha Trang Tourism</span>
</div>
<p class="text-sm text-center md:text-left" data-i18n="footer_copy">© 2026 Nha Trang Travel Guide. All rights reserved.</p>
<div class="flex space-x-4 text-xl">
<a href="#" class="hover:text-white transition"><i class="fa-brands fa-telegram"></i></a>
<a href="#" class="hover:text-white transition"><i class="fa-brands fa-whatsapp"></i></a>
<a href="#" class="hover:text-white transition"><i class="fa-brands fa-weixin"></i></a>
<a href="#" class="hover:text-white transition"><i class="fa-brands fa-instagram"></i></a>
</div>
</div>
</footer>
<!-- Success Modal -->
<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 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>
</div>
<!-- Translations & Script Logic -->
<script>
const translations = {
vi: {
page_title: "Nha Trang — Thiên đường du lịch biển Việt Nam",
meta_description: "Khám phá Nha Trang, Phan Rang và vịnh Vĩnh Hy: điểm tham quan, thời tiết, ẩm thực địa phương và tour du lịch.",
logo_sub: "Paradise Bay",
nav_about: "Về Nha Trang",
nav_attractions: "Điểm đến",
nav_weather: "Thời tiết",
nav_food: "Ẩm thực",
nav_cta: "Đặt tour",
hero_badge: "🇻🇳 Thiên đường biển Việt Nam",
hero_title: "Khám phá vẻ đẹp kỳ diệu Nha Trang",
hero_subtitle: "Tận hưởng làn nước biếc, bãi cát trắng mịn, ánh nắng nhiệt đới rực rỡ và những trải nghiệm khó quên.",
hero_btn_explore: "Khám phá ngay",
hero_btn_book: "Đặt tour",
why_title: "Tại sao nên chọn Nha Trang?",
why_desc: "Điểm đến hàng đầu cho kỳ nghỉ hoàn hảo của gia đình và bạn bè.",
feature_1_title: "Khí hậu tuyệt vời",
feature_1_desc: "Hơn 300 ngày nắng ấm trong năm, bầu trời trong xanh và không khí biển trong lành.",
feature_2_title: "Bãi biển thiên đường",
feature_2_desc: "Hàng kilômét bờ cát trắng mịn màng cùng làn nước biển màu ngọc lam tuyệt đẹp.",
feature_3_title: "Di sản văn hóa",
feature_3_desc: "Khám phá Tháp Bà Ponagar cổ kính, chùa chiền linh thiêng và văn hóa Champa độc đáo.",
feature_4_title: "Ẩm thực hải sản",
feature_4_desc: "Thưởng thức hải sản tươi sống đánh bắt trực tiếp từ vịnh và các món đặc sản trứ danh.",
attr_title: "Điểm đến nổi bật",
attr_desc: "Những địa danh không thể bỏ lỡ khi ghé thăm thành phố biển.",
filter_all: "Tất cả",
filter_culture: "Văn hóa",
filter_fun: "Giải trí",
filter_nature: "Thiên nhiên",
cat_culture: "Văn hóa",
cat_fun: "Giải trí",
cat_nature: "Thiên nhiên",
attr_1_title: "Tháp Bà Ponagar",
attr_1_desc: "Quần thể kiến trúc đền tháp Champa cổ kính xây dựng từ thế kỷ thứ VIII, nằm trên đồi cao hướng ra sông Cái.",
attr_1_loc: "Đường 2 Tháng 4, Vĩnh Phước",
attr_2_title: "VinWonders Nha Trang",
attr_2_desc: "Công viên giải trí của những kỷ lục trên đảo Hòn Tre với cáp treo vượt biển, công viên nước và thủy cung hiện đại.",
attr_2_loc: "Đảo Hòn Tre, Vĩnh Nguyên",
attr_3_title: "Suối khoáng & Tắm bùn",
attr_3_desc: "Trải nghiệm dịch vụ tắm bùn khoáng nóng tự nhiên giúp thư giãn cơ thể, phục hồi sức khỏe và làm đẹp da.",
attr_3_loc: "Tháp Bà / I-Resort Nha Trang",
attr_4_title: "Tour lặn biển ngắm san hô",
attr_4_desc: "Khám phá những rạn san hô rực rỡ trong làn nước trong xanh của vịnh Nha Trang cùng hướng dẫn viên và thiết bị lặn.",
attr_4_loc: "Vịnh Nha Trang, Khánh Hòa",
attr_5_title: "Phan Rang và Vịnh Vĩnh Hy",
attr_5_desc: "Khám phá cung đường ven biển tuyệt đẹp, làn nước trong xanh của vịnh Vĩnh Hy và cảnh quan thiên nhiên hoang sơ gần Phan Rang.",
attr_5_loc: "Phan Rang – Tháp Chàm, Ninh Thuận",
weather_title: "Thời điểm lý tưởng du lịch",
weather_desc: "Lên kế hoạch cho chuyến đi của bạn với thông tin thời tiết chính xác.",
weather_loading: "Đang tải thời tiết...",
weather_unavailable: "Không có dữ liệu",
weather_clear: "Trời quang",
weather_mainly_clear: "Ít mây",
weather_partly_cloudy: "Có mây rải rác",
weather_overcast: "Nhiều mây",
weather_fog: "Sương mù",
weather_drizzle: "Mưa phùn",
weather_rain: "Mưa",
weather_snow: "Tuyết",
weather_showers: "Mưa rào",
weather_thunderstorm: "Dông",
season_dry_title: "Tháng 1 — Tháng 8 (Mùa khô)",
season_dry_desc: "Thời kỳ hoàn hảo nhất cho du lịch biển. Trời nắng rực rỡ, biển êm, nước trong vắt, cực kỳ thích hợp cho các hoạt động lặn ngắm san hô, tắm biển và tham quan đảo.",
season_dry_tag: "✨ Khuyên dùng cho nghỉ dưỡng",
season_rain_title: "Tháng 9 — Tháng 12 (Mùa mưa)",
season_rain_desc: "Mùa mưa ngắn, thỉnh thoảng có mưa rào nhưng nhiệt độ vẫn ấm áp. Đây là giai đoạn lý tưởng để nghỉ dưỡng tiết kiệm, thưởng thức ẩm thực ấm cúng và trải nghiệm dịch vụ spa.",
season_rain_tag: "💡 Chi phí tiết kiệm",
food_title: "Ẩm thực Nha Trang",
food_desc: "Hương vị biển cả đậm đà khó quên.",
food_1_title: "Hải sản tươi sống",
food_1_desc: "Tôm hùm, mực nướng, ốc các loại chế biến trực tiếp tại các nhà hàng ven biển với gia vị đặc trưng.",
food_2_title: "Phở & Bún cá Nha Trang",
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.",
food_3_title: "Bánh xèo mực",
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ế.",
book_title: "Đặt tour & Tư vấn miễn phí",
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.",
form_name: "Họ và tên",
form_email: "Email",
form_phone: "Số điện thoại",
form_package: "Lựa chọn gói tour",
pkg_1: "Khám phá thành phố & VinWonders",
pkg_2: "Tour lặn biển & Các đảo",
pkg_3: "Nghỉ dưỡng & Tắm bùn khoáng",
form_notes: "Yêu cầu đặc biệt",
form_submit: "Gửi yêu cầu đặt tour",
form_error: "Không thể gửi yêu cầu lúc này. Vui lòng thử lại sau.",
footer_copy: "© 2026 Nha Trang Travel Guide. All rights reserved.",
modal_title: "Thành công!",
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.",
modal_btn: "Đóng"
},
ru: {
page_title: "Нячанг — Жемчужина Вьетнама",
meta_description: "Откройте для себя Нячанг, Фанранг и залив Виньхи: достопримечательности, погода, местная кухня и экскурсии.",
logo_sub: "Paradise Bay",
nav_about: "О Нячанге",
nav_attractions: "Достопримечательности",
nav_weather: "Погода",
nav_food: "Кухня",
nav_cta: "Бронировать",
hero_badge: "🇻🇳 Жемчужина Южно-Китайского моря",
hero_title: "Откройте для себя магию Нячанга",
hero_subtitle: "Белоснежные пляжи, бирюзовая вода, тропическое солнце и незабываемые приключения во Вьетнаме.",
hero_btn_explore: "Исследовать",
hero_btn_book: "Забронировать",
why_title: "Почему стоит посетить Нячанг?",
why_desc: "Идеальное направление для отдыха всей семьей и с друзьями.",
feature_1_title: "Идеальный климат",
feature_1_desc: "Более 300 солнечных дней в году, ясное небо и освежающий морской бриз.",
feature_2_title: "Роскошные пляжи",
feature_2_desc: "Километры белоснежного побережья, омываемого чистейшей бирюзовой водой.",
feature_3_title: "Богатое наследие",
feature_3_desc: "Древние Чамские башни Понагар, древние пагоды и уникальная культура Тямпы.",
feature_4_title: "Гастрономический рай",
feature_4_desc: "Свежайшие морепродукты прямо из залива и изысканные блюда вьетнамской кухни.",
attr_title: "Лучшие достопримечательности",
attr_desc: "Места, которые обязательно стоит посетить в прибрежном городе.",
filter_all: "Все",
filter_culture: "Культура",
filter_fun: "Развлечения",
filter_nature: "Природа",
cat_culture: "Культура",
cat_fun: "Развлечения",
cat_nature: "Природа",
attr_1_title: "Башни Понагар",
attr_1_desc: "Древний индуистский храмовый комплекс VIII века, возвышающийся на холме с живописным видом на реку Кай.",
attr_1_loc: "Ул. 2 Февраля, Винь Фыок",
attr_2_title: "VinWonders Nha Trang",
attr_2_desc: "Легендарный парк развлечений на острове Хон Тре с канатной дорогой над морем, аквапарком и океанариумом.",
attr_2_loc: "Остров Хон Тре, Винь Нгуен",
attr_3_title: "Минеральные источники и грязи",
attr_3_desc: "Расслабляющие оздоровительные процедуры в целебных термальных источниках и грязелечебницах.",
attr_3_loc: "Комплексы Tháp Bà / I-Resort",
attr_4_title: "Тур с погружением и наблюдением за кораллами",
attr_4_desc: "Исследуйте яркие коралловые рифы в прозрачных водах залива Нячанг с гидом и необходимым снаряжением.",
attr_4_loc: "Залив Нячанг, Кханьхоа",
attr_5_title: "Фанранг и залив Виньхи",
attr_5_desc: "Откройте для себя живописную прибрежную дорогу, прозрачные воды залива Виньхи и нетронутые пейзажи недалеко от Фанранга.",
attr_5_loc: "Фанранг — Тхапчам, Ниньтхуан",
weather_title: "Лучшее время для поездки",
weather_desc: "Спланируйте свою поездку на основе точных метеорологических данных.",
weather_loading: "Загрузка погоды...",
weather_unavailable: "Нет данных",
weather_clear: "Ясно",
weather_mainly_clear: "Преимущественно ясно",
weather_partly_cloudy: "Переменная облачность",
weather_overcast: "Пасмурно",
weather_fog: "Туман",
weather_drizzle: "Морось",
weather_rain: "Дождь",
weather_snow: "Снег",
weather_showers: "Ливень",
weather_thunderstorm: "Гроза",
season_dry_title: "Январь — Август (Сухой сезон)",
season_dry_desc: "Идеальный период для пляжного отдыха. Ясное солнце, спокойное море, прозрачная вода — лучшее время для дайвинга и морских прогулок.",
season_dry_tag: "✨ Рекомендуется для отдыха",
season_rain_title: "Сентябрь — Декабрь (Сезон дождей)",
season_rain_desc: "Короткие тропические дожди при комфортной температуре воздуха. Отличная возможность отдохнуть по выгодным ценам и насладиться уютом.",
season_rain_tag: "💡 Экономичный вариант",
food_title: "Кулинарный путеводитель",
food_desc: "Незабываемые вкусы и ароматы вьетнамского побережья.",
food_1_title: "Свежие морепродукты",
food_1_desc: "Лобстеры, креветки, кальмары и рыба, приготовленные на гриле или по традиционным рецептам.",
food_2_title: "Суп Фо и рыбный суп Бун Ка",
food_2_desc: "Ароматный традиционный суп фо с говядиной или фирменный рыбный суп с рыбными котлетками.",
food_3_title: "Блинчики Бань Хео",
food_3_desc: "Хрустящие вьетнамские блинчики с начинкой из креветок и кальмаров, подаваемые с зеленью.",
book_title: "Бронирование тура и консультация",
book_desc: "Позвольте нам организовать для вас незабываемое путешествие.",
form_name: "Ваше имя",
form_email: "Эл. почта",
form_phone: "Телефон",
form_package: "Выберите тур",
pkg_1: "Обзорный тур + VinWonders",
pkg_2: "Морская прогулка & Дайвинг",
pkg_3: "Спа-отдых & Термальные источники",
form_notes: "Пожелания / Заметки",
form_submit: "Отправить заявку",
form_error: "Не удалось отправить заявку. Пожалуйста, попробуйте позже.",
footer_copy: "© 2026 Nha Trang Travel Guide. Все права защищены.",
modal_title: "Успешно!",
modal_desc: "Ваша заявка отправлена. Мы свяжемся с вами в ближайшее время.",
modal_btn: "Закрыть"
},
en: {
page_title: "Nha Trang — Vietnam's Coastal Paradise",
meta_description: "Explore Nha Trang, Phan Rang, and Vĩnh Hy Bay: top attractions, local weather, cuisine, and tours in Vietnam.",
logo_sub: "Paradise Bay",
nav_about: "About",
nav_attractions: "Attractions",
nav_weather: "Weather",
nav_food: "Cuisine",
nav_cta: "Book Tour",
hero_badge: "🇻🇳 Vietnam's Premier Beach Destination",
hero_title: "Discover the Wonders of Nha Trang",
hero_subtitle: "Enjoy turquoise waters, fine white sand beaches, tropical sunshine, and unforgettable coastal adventures.",
hero_btn_explore: "Explore Now",
hero_btn_book: "Book Tour",
why_title: "Why Choose Nha Trang?",
why_desc: "The top destination for an unforgettable vacation with family and friends.",
feature_1_title: "Ideal Climate",
feature_1_desc: "Over 300 sunny days per year, clear blue skies, and refreshing sea breezes.",
feature_2_title: "Paradise Beaches",
feature_2_desc: "Miles of powdery white sand coastline surrounded by crystal-clear turquoise waters.",
feature_3_title: "Rich Cultural Heritage",
feature_3_desc: "Explore ancient Ponagar Cham Towers, serene Buddhist pagodas, and vibrant history.",
feature_4_title: "Seafood Heaven",
feature_4_desc: "Savor ocean-fresh seafood caught directly from the bay and authentic Vietnamese delicacies.",
attr_title: "Top Attractions",
attr_desc: "Must-visit places and iconic highlights when visiting the coastal city.",
filter_all: "All",
filter_culture: "Culture",
filter_fun: "Entertainment",
filter_nature: "Nature",
cat_culture: "Culture",
cat_fun: "Entertainment",
cat_nature: "Nature",
attr_1_title: "Ponagar Cham Towers",
attr_1_desc: "An ancient Cham temple complex dating back to the 8th century, set atop a hill overlooking the Cai River.",
attr_1_loc: "2 Thang 4 Street, Vinh Phuoc",
attr_2_title: "VinWonders Nha Trang",
attr_2_desc: "World-class theme park on Hon Tre Island featuring cross-sea cable cars, water park, and aquariums.",
attr_2_loc: "Hon Tre Island, Vinh Nguyen",
attr_3_title: "Mineral Springs & Mud Baths",
attr_3_desc: "Relaxing natural thermal mud baths designed to rejuvenate your body, health, and skin.",
attr_3_loc: "Thap Ba / I-Resort Nha Trang",
attr_4_title: "Coral Reef Snorkeling Tour",
attr_4_desc: "Explore vibrant coral reefs in the clear waters of Nha Trang Bay with a guide and snorkeling gear.",
attr_4_loc: "Nha Trang Bay, Khanh Hoa",
attr_5_title: "Phan Rang and Vĩnh Hy Bay",
attr_5_desc: "Explore a scenic coastal road, the clear waters of Vĩnh Hy Bay, and unspoiled landscapes near Phan Rang.",
attr_5_loc: "Phan Rang–Tháp Chàm, Ninh Thuận",
weather_title: "Best Time to Visit",
weather_desc: "Plan your trip with accurate seasonal weather insights.",
weather_loading: "Loading weather...",
weather_unavailable: "Unavailable",
weather_clear: "Clear",
weather_mainly_clear: "Mainly clear",
weather_partly_cloudy: "Partly cloudy",
weather_overcast: "Overcast",
weather_fog: "Fog",
weather_drizzle: "Drizzle",
weather_rain: "Rain",
weather_snow: "Snow",
weather_showers: "Showers",
weather_thunderstorm: "Thunderstorm",
season_dry_title: "January — August (Dry Season)",
season_dry_desc: "The absolute best season for beach holidays. Bright sunshine, calm seas, and crystal-clear water, perfect for snorkeling and island hopping.",
season_dry_tag: "✨ Recommended for Vacations",
season_rain_title: "September — December (Rainy Season)",
season_rain_desc: "Short tropical showers with warm temperatures. Ideal for budget travelers wanting cozy spa days and culinary explorations.",
season_rain_tag: "💡 Great Value Season",
food_title: "Nha Trang Cuisine Guide",
food_desc: "Unforgettable flavors from the heart of the sea.",
food_1_title: "Fresh Seafood",
food_1_desc: "Lobsters, grilled squid, and fresh shellfish prepared live with authentic coastal spices.",
food_2_title: "Fish Cake Noodle & Pho",
food_2_desc: "Savory fish cake noodle soup or traditional Vietnamese beef Pho prepared to perfection.",
food_3_title: "Squid Crispy Pancakes",
food_3_desc: "Crispy Vietnamese Banh Xeo filled with fresh local squid, served with fresh herbs and dipping sauce.",
book_title: "Book Your Tour & Free Consultation",
book_desc: "Let us help you design the perfect itinerary for your getaway.",
form_name: "Full Name",
form_email: "Email Address",
form_phone: "Phone Number",
form_package: "Select Package",
pkg_1: "City Highlights & VinWonders",
pkg_2: "Island Hopping & Scuba Diving",
pkg_3: "Wellness Spa & Mineral Mud Baths",
form_notes: "Special Requests",
form_submit: "Submit Request",
form_error: "Your request could not be sent. Please try again later.",
footer_copy: "© 2026 Nha Trang Travel Guide. All rights reserved.",
modal_title: "Success!",
modal_desc: "Your booking request has been sent. We will contact you shortly.",
modal_btn: "Close"
},
zh: {
page_title: "芽庄 — 越南海滨度假天堂",
meta_description: "探索越南芽庄、潘朗与永希湾:热门景点、天气、当地美食与旅游体验。",
logo_sub: "Paradise Bay",
nav_about: "关于芽庄",
nav_attractions: "热门景点",
nav_weather: "天气指南",
nav_food: "美食推荐",
nav_cta: "预订行程",
hero_badge: "🇻🇳 越南海滨度假天堂",
hero_title: "探索芽庄的迷人魅力",
hero_subtitle: "尽享碧海蓝天、细软白沙滩、温暖阳光与难忘的海滨度假时光。",
hero_btn_explore: "立即探索",
hero_btn_book: "预订行程",
why_title: "为什么选择芽庄?",
why_desc: "家庭亲友度假与休闲放松的绝佳首选目的地。",
feature_1_title: "宜人气候",
feature_1_desc: "全年阳光明媚超过300天,蓝天白云,海风习习。",
feature_2_title: "天堂沙滩",
feature_2_desc: "绵延数公里的细软白沙滩,清澈见底的翡翠色海水。",
feature_3_title: "深厚文化",
feature_3_desc: "探索古老的占婆塔、灵验的佛教寺庙与独特占婆文化。",
feature_4_title: "海鲜盛宴",
feature_4_desc: "品尝从海湾直接捕捞的冰鲜海鲜与地道越南风味美食。",
attr_title: "精选热门景点",
attr_desc: "来到芽庄不可错过的标志性打卡胜地。",
filter_all: "全部",
filter_culture: "历史文化",
filter_fun: "主题娱乐",
filter_nature: "自然休养",
cat_culture: "历史文化",
cat_fun: "主题娱乐",
cat_nature: "自然休养",
attr_1_title: "婆那加占婆塔",
attr_1_desc: "建于公元8世纪的古老占婆印度教寺庙建筑群,矗立于山丘之上俯瞰丐河。",
attr_1_loc: "Vinh Phuoc区 2 Thang 4路",
attr_2_title: "芽庄珍珠岛乐园 (VinWonders)",
attr_2_desc: "位于竹岛上的旗舰级主题乐园,拥有跨海缆车、大型水上乐园和海洋水族馆。",
attr_2_loc: "Vinh Nguyen区 竹岛 (Hon Tre)",
attr_3_title: "温泉与矿物泥浆浴",
attr_3_desc: "体验天然热矿物泥浆浴,放松身心、舒缓疲劳并滋养肌肤。",
attr_3_loc: "Thap Ba / I-Resort 泥浴中心",
attr_4_title: "芽庄珊瑚礁浮潜之旅",
attr_4_desc: "在向导陪同下,穿戴浮潜装备,探索芽庄湾清澈海水中的绚丽珊瑚礁。",
attr_4_loc: "庆和省芽庄湾",
attr_5_title: "潘朗与永希湾",
attr_5_desc: "探索风景优美的海岸公路、永希湾清澈的海水,以及潘朗附近未受破坏的自然风光。",
attr_5_loc: "宁顺省潘朗—塔占",
weather_title: "最佳旅游季节",
weather_desc: "根据精准气候指南,轻松规划您的完美行程。",
weather_loading: "正在加载天气...",
weather_unavailable: "暂无数据",
weather_clear: "晴朗",
weather_mainly_clear: "大致晴朗",
weather_partly_cloudy: "局部多云",
weather_overcast: "阴天",
weather_fog: "有雾",
weather_drizzle: "毛毛雨",
weather_rain: "下雨",
weather_snow: "下雪",
weather_showers: "阵雨",
weather_thunderstorm: "雷暴",
season_dry_title: "1月 — 8月 (旱季)",
season_dry_desc: "海滨旅游的黄金季节。阳光灿烂,风平浪静,海水清澈,极其适合潜水、游泳及跳岛游。",
season_dry_tag: "✨ 度假强烈推荐",
season_rain_title: "9月 — 12月 (雨季)",
season_rain_desc: "阵雨短暂且气温舒适宜人。非常适合预算游、享受SPA水疗与品尝地道美食。",
season_rain_tag: "💡 超值实惠季节",
food_title: "芽庄美食指南",
food_desc: "令人回味无穷的大海鲜香与地道风味。",
food_1_title: "新鲜海鲜盛宴",
food_1_desc: "龙虾、炭烤鱿鱼、各类海螺,海边餐厅现捞现做,佐以特制调味。",
food_2_title: "芽庄鱼饼粉 & 越南河粉",
food_2_desc: "鲜美清甜的芽庄特色鱼饼米粉,或正宗浓郁的越南牛肉河粉。",
food_3_title: "鲜鱿鱼煎饼 (Banh Xeo)",
food_3_desc: "香脆的越南煎饼裹着新鲜小鱿鱼,搭配新鲜蘸酱与时令蔬菜。",
book_title: "行程预订 & 免费咨询",
book_desc: "让我们为您量身定制最完美的芽庄之旅。",
form_name: "您的姓名",
form_email: "电子邮箱",
form_phone: "联系电话",
form_package: "选择套餐",
pkg_1: "市区经典 & 珍珠岛乐园",
pkg_2: "出海跳岛 & 潜水体验",
pkg_3: "温泉泥浴 & 养生SPA",
form_notes: "特殊需求 / 备注",
form_submit: "提交预订申请",
form_error: "暂时无法发送您的请求,请稍后重试。",
footer_copy: "© 2026 Nha Trang Travel Guide. 保留所有权利。",
modal_title: "提交成功!",
modal_desc: "您的预订申请已成功发送,我们将尽快与您联系。",
modal_btn: "关闭"
},
de: {
page_title: "Nha Trang — Vietnams Küstenparadies",
meta_description: "Entdecken Sie Nha Trang, Phan Rang und die Bucht Vĩnh Hy: Sehenswürdigkeiten, Wetter, lokale Küche und Ausflüge.",
logo_sub: "Paradiesische Bucht",
nav_about: "Über Nha Trang",
nav_attractions: "Sehenswürdigkeiten",
nav_weather: "Wetter",
nav_food: "Kulinarik",
nav_cta: "Tour buchen",
hero_badge: "🇻🇳 Vietnams schönstes Strandziel",
hero_title: "Entdecken Sie die Wunder von Nha Trang",
hero_subtitle: "Genießen Sie türkisblaues Wasser, feine weiße Sandstrände, tropische Sonne und unvergessliche Erlebnisse am Meer.",
hero_btn_explore: "Jetzt entdecken",
hero_btn_book: "Tour buchen",
why_title: "Warum Nha Trang?",
why_desc: "Das ideale Reiseziel für einen unvergesslichen Urlaub mit Familie und Freunden.",
feature_1_title: "Ideales Klima",
feature_1_desc: "Über 300 Sonnentage im Jahr, ein klarer Himmel und eine erfrischende Meeresbrise.",
feature_2_title: "Traumstrände",
feature_2_desc: "Kilometerlange, puderweiße Sandstrände und kristallklares türkisfarbenes Wasser.",
feature_3_title: "Reiches Kulturerbe",
feature_3_desc: "Entdecken Sie die alten Cham-Türme von Ponagar, buddhistische Pagoden und die lebendige Geschichte der Region.",
feature_4_title: "Meeresfrüchte",
feature_4_desc: "Genießen Sie fangfrische Meeresfrüchte aus der Bucht und authentische vietnamesische Spezialitäten.",
attr_title: "Sehenswürdigkeiten",
attr_desc: "Diese Highlights sollten Sie in der Küstenstadt nicht verpassen.",
filter_all: "Alle",
filter_culture: "Kultur",
filter_fun: "Freizeit",
filter_nature: "Natur",
cat_culture: "Kultur",
cat_fun: "Freizeit",
cat_nature: "Natur",
attr_1_title: "Cham-Türme von Ponagar",
attr_1_desc: "Eine alte Cham-Tempelanlage aus dem 8. Jahrhundert auf einem Hügel mit Blick auf den Fluss Cai.",
attr_1_loc: "Straße 2 Tháng 4, Vĩnh Phước",
attr_2_title: "VinWonders Nha Trang",
attr_2_desc: "Ein Freizeitpark der Spitzenklasse auf der Insel Hòn Tre mit Seilbahn, Wasserpark und modernem Aquarium.",
attr_2_loc: "Insel Hòn Tre, Vĩnh Nguyên",
attr_3_title: "Heilquellen und Schlammbäder",
attr_3_desc: "Entspannen Sie bei natürlichen heißen Mineral-Schlammbädern, die Körper und Haut verwöhnen.",
attr_3_loc: "Tháp Bà / I-Resort Nha Trang",
attr_4_title: "Schnorcheltour zu den Korallenriffen",
attr_4_desc: "Entdecken Sie mit Guide und Schnorchelausrüstung die farbenfrohen Korallenriffe im klaren Wasser der Bucht von Nha Trang.",
attr_4_loc: "Bucht von Nha Trang, Khánh Hòa",
attr_5_title: "Phan Rang und die Bucht Vĩnh Hy",
attr_5_desc: "Entdecken Sie eine malerische Küstenstraße, das klare Wasser der Bucht Vĩnh Hy und unberührte Landschaften nahe Phan Rang.",
attr_5_loc: "Phan Rang–Tháp Chàm, Ninh Thuận",
weather_title: "Beste Reisezeit",
weather_desc: "Planen Sie Ihre Reise mit verlässlichen Informationen zum saisonalen Wetter.",
weather_loading: "Wetter wird geladen...",
weather_unavailable: "Keine Daten",
weather_clear: "Klar",
weather_mainly_clear: "Überwiegend klar",
weather_partly_cloudy: "Teilweise bewölkt",
weather_overcast: "Bedeckt",
weather_fog: "Nebel",
weather_drizzle: "Nieselregen",
weather_rain: "Regen",
weather_snow: "Schnee",
weather_showers: "Regenschauer",
weather_thunderstorm: "Gewitter",
season_dry_title: "Januar — August (Trockenzeit)",
season_dry_desc: "Die beste Zeit für einen Strandurlaub: viel Sonne, ruhige See und klares Wasser. Ideal zum Schnorcheln, Baden und für Inselbesuche.",
season_dry_tag: "✨ Ideal für einen Erholungsurlaub",
season_rain_title: "September — Dezember (Regenzeit)",
season_rain_desc: "Kurze tropische Schauer bei angenehm warmen Temperaturen. Eine gute Zeit für preisbewusste Reisen, gemütliche Küche und Spa-Erlebnisse.",
season_rain_tag: "💡 Besonders preiswert",
food_title: "Kulinarischer Reiseführer für Nha Trang",
food_desc: "Unvergessliche Aromen direkt vom Meer.",
food_1_title: "Frische Meeresfrüchte",
food_1_desc: "Hummer, gegrillter Tintenfisch und frische Muscheln, direkt am Meer mit regionalen Gewürzen zubereitet.",
food_2_title: "Fischkuchen-Nudelsuppe und Pho",
food_2_desc: "Herzhafte Nudelsuppe mit Fischkuchen oder traditionelle vietnamesische Pho mit Rindfleisch.",
food_3_title: "Knusprige Pfannkuchen mit Tintenfisch",
food_3_desc: "Knusprige vietnamesische Bánh Xèo mit frischem Tintenfisch, Kräutern und würziger Dip-Sauce.",
book_title: "Tour buchen und kostenlos beraten lassen",
book_desc: "Wir helfen Ihnen gern, die perfekte Reise zu planen.",
form_name: "Vor- und Nachname",
form_email: "E-Mail-Adresse",
form_phone: "Telefonnummer",
form_package: "Tour auswählen",
pkg_1: "Stadtrundfahrt und VinWonders",
pkg_2: "Inselrundfahrt und Tauchen",
pkg_3: "Wellness und Mineral-Schlammbäder",
form_notes: "Besondere Wünsche",
form_submit: "Anfrage senden",
form_error: "Ihre Anfrage konnte nicht gesendet werden. Bitte versuchen Sie es später erneut.",
footer_copy: "© 2026 Nha Trang Travel Guide. Alle Rechte vorbehalten.",
modal_title: "Erfolgreich!",
modal_desc: "Ihre Anfrage wurde gesendet. Wir melden uns in Kürze bei Ihnen.",
modal_btn: "Schließen"
},
fr: {
page_title: "Nha Trang — Le paradis côtier du Vietnam",
meta_description: "Découvrez Nha Trang, Phan Rang et la baie de Vĩnh Hy : sites incontournables, météo, cuisine locale et excursions.",
logo_sub: "Baie paradisiaque",
nav_about: "À propos de Nha Trang",
nav_attractions: "Sites à découvrir",
nav_weather: "Météo",
nav_food: "Gastronomie",
nav_cta: "Réserver une excursion",
hero_badge: "🇻🇳 La destination balnéaire incontournable du Vietnam",
hero_title: "Découvrez les merveilles de Nha Trang",
hero_subtitle: "Profitez des eaux turquoise, des plages de sable fin, du soleil tropical et d'expériences inoubliables en bord de mer.",
hero_btn_explore: "Explorer",
hero_btn_book: "Réserver",
why_title: "Pourquoi choisir Nha Trang ?",
why_desc: "Une destination idéale pour des vacances inoubliables en famille ou entre amis.",
feature_1_title: "Un climat idéal",
feature_1_desc: "Plus de 300 jours de soleil par an, un ciel bleu et une brise marine rafraîchissante.",
feature_2_title: "Des plages de rêve",
feature_2_desc: "Des kilomètres de sable blanc et fin bordés d'une eau turquoise cristalline.",
feature_3_title: "Un riche patrimoine culturel",
feature_3_desc: "Découvrez les anciennes tours Cham de Po Nagar, des pagodes paisibles et une histoire fascinante.",
feature_4_title: "Un paradis de fruits de mer",
feature_4_desc: "Savourez des produits de la mer fraîchement pêchés dans la baie et des spécialités vietnamiennes.",
attr_title: "Les incontournables",
attr_desc: "Les lieux à ne pas manquer dans cette ville côtière.",
filter_all: "Tout",
filter_culture: "Culture",
filter_fun: "Loisirs",
filter_nature: "Nature",
cat_culture: "Culture",
cat_fun: "Loisirs",
cat_nature: "Nature",
attr_1_title: "Tours Cham de Po Nagar",
attr_1_desc: "Un ancien sanctuaire cham du VIIIe siècle, perché sur une colline qui domine la rivière Cai.",
attr_1_loc: "Rue 2 Tháng 4, Vĩnh Phước",
attr_2_title: "VinWonders Nha Trang",
attr_2_desc: "Un parc à thème exceptionnel sur l'île de Hòn Tre, avec téléphérique au-dessus de la mer, parc aquatique et aquarium moderne.",
attr_2_loc: "Île de Hòn Tre, Vĩnh Nguyên",
attr_3_title: "Sources minérales et bains de boue",
attr_3_desc: "Détendez-vous dans des bains naturels de boue minérale chaude, bénéfiques pour le corps et la peau.",
attr_3_loc: "Tháp Bà / I-Resort Nha Trang",
attr_4_title: "Excursion de snorkeling sur les récifs coralliens",
attr_4_desc: "Explorez les récifs colorés de la baie de Nha Trang avec un guide et du matériel de snorkeling.",
attr_4_loc: "Baie de Nha Trang, Khánh Hòa",
attr_5_title: "Phan Rang et la baie de Vĩnh Hy",
attr_5_desc: "Découvrez une route côtière pittoresque, les eaux limpides de la baie de Vĩnh Hy et les paysages préservés près de Phan Rang.",
attr_5_loc: "Phan Rang–Tháp Chàm, Ninh Thuận",
weather_title: "Quand partir ?",
weather_desc: "Planifiez votre séjour grâce à nos informations sur le climat selon les saisons.",
weather_loading: "Chargement de la météo...",
weather_unavailable: "Données indisponibles",
weather_clear: "Ciel dégagé",
weather_mainly_clear: "Globalement dégagé",
weather_partly_cloudy: "Partiellement nuageux",
weather_overcast: "Couvert",
weather_fog: "Brouillard",
weather_drizzle: "Bruine",
weather_rain: "Pluie",
weather_snow: "Neige",
weather_showers: "Averses",
weather_thunderstorm: "Orage",
season_dry_title: "Janvier — août (saison sèche)",
season_dry_desc: "La meilleure période pour profiter de la plage : soleil généreux, mer calme et eau limpide. Parfaite pour le snorkeling, la baignade et les excursions dans les îles.",
season_dry_tag: "✨ Idéal pour des vacances détente",
season_rain_title: "Septembre — décembre (saison des pluies)",
season_rain_desc: "De courtes averses tropicales sous des températures agréables. Une période idéale pour voyager à petit prix, savourer la cuisine locale et profiter des spas.",
season_rain_tag: "💡 Des tarifs avantageux",
food_title: "Guide gastronomique de Nha Trang",
food_desc: "Des saveurs marines inoubliables.",
food_1_title: "Fruits de mer frais",
food_1_desc: "Homard, calamars grillés et coquillages préparés sur place dans les restaurants du bord de mer.",
food_2_title: "Soupe de nouilles au poisson et phở",
food_2_desc: "Savourez une soupe de nouilles au gâteau de poisson ou un phở traditionnel au bœuf.",
food_3_title: "Crêpe croustillante au calamar",
food_3_desc: "La bánh xèo vietnamienne, garnie de calamars frais et servie avec des herbes et une sauce maison.",
book_title: "Réservez une excursion et profitez de conseils gratuits",
book_desc: "Nous vous aidons à organiser le séjour idéal.",
form_name: "Nom complet",
form_email: "Adresse e-mail",
form_phone: "Numéro de téléphone",
form_package: "Choisissez une formule",
pkg_1: "Visite de la ville et VinWonders",
pkg_2: "Excursion dans les îles et plongée",
pkg_3: "Spa et bains de boue minérale",
form_notes: "Demandes particulières",
form_submit: "Envoyer la demande",
form_error: "Votre demande n'a pas pu être envoyée. Veuillez réessayer plus tard.",
footer_copy: "© 2026 Nha Trang Travel Guide. Tous droits réservés.",
modal_title: "Demande envoyée !",
modal_desc: "Votre demande a bien été envoyée. Nous vous contacterons bientôt.",
modal_btn: "Fermer"
}
};
const languageLocales = {
vi: 'vi_VN',
ru: 'ru_RU',
en: 'en_US',
zh: 'zh_CN',
de: 'de_DE',
fr: 'fr_FR'
};
let currentLang = 'vi';
let currentWeatherCondition = 'weather_loading';
function getWeatherPresentation(code) {
if (code === 0) return { key: 'weather_clear', icon: 'fa-sun', color: 'text-amber-500' };
if (code === 1) return { key: 'weather_mainly_clear', icon: 'fa-cloud-sun', color: 'text-amber-500' };
if (code === 2) return { key: 'weather_partly_cloudy', icon: 'fa-cloud-sun', color: 'text-amber-500' };
if (code === 3) return { key: 'weather_overcast', icon: 'fa-cloud', color: 'text-gray-500' };
if ([45, 48].includes(code)) return { key: 'weather_fog', icon: 'fa-smog', color: 'text-gray-500' };
if ([51, 53, 55, 56, 57].includes(code)) return { key: 'weather_drizzle', icon: 'fa-cloud-rain', color: 'text-sky-500' };
if ([61, 63, 65, 66, 67].includes(code)) return { key: 'weather_rain', icon: 'fa-cloud-rain', color: 'text-sky-600' };
if ([71, 73, 75, 77].includes(code)) return { key: 'weather_snow', icon: 'fa-snowflake', color: 'text-sky-500' };
if ([80, 81, 82, 85, 86].includes(code)) return { key: 'weather_showers', icon: 'fa-cloud-showers-heavy', color: 'text-sky-600' };
if ([95, 96, 99].includes(code)) return { key: 'weather_thunderstorm', icon: 'fa-cloud-bolt', color: 'text-indigo-500' };
return { key: 'weather_partly_cloudy', icon: 'fa-cloud-sun', color: 'text-amber-500' };
}
function renderWeatherCondition() {
const condition = document.getElementById('weather-condition');
if (condition) condition.textContent = translations[currentLang][currentWeatherCondition] || translations.en[currentWeatherCondition];
}
async function loadCurrentWeather() {
const temperature = document.getElementById('weather-temperature');
const icon = document.getElementById('weather-icon');
try {
const response = await fetch('https://api.open-meteo.com/v1/forecast?latitude=12.2388&longitude=109.1967&current=temperature_2m,weather_code&timezone=Asia%2FHo_Chi_Minh');
if (!response.ok) throw new Error('Weather request failed');
const data = await response.json();
const presentation = getWeatherPresentation(data.current.weather_code);
temperature.textContent = `${Math.round(data.current.temperature_2m)}°C`;
icon.className = `fa-solid ${presentation.icon} text-2xl ${presentation.color}`;
currentWeatherCondition = presentation.key;
} catch {
temperature.textContent = '--°C';
icon.className = 'fa-solid fa-cloud text-2xl text-gray-400';
currentWeatherCondition = 'weather_unavailable';
}
renderWeatherCondition();
}
function getPreferredLanguage() {
const supported = Object.keys(translations);
const preferences = navigator.languages?.length
? navigator.languages
: [navigator.language];
for (const locale of preferences) {
const language = locale.toLowerCase().split(/[-_]/)[0];
if (supported.includes(language)) return language;
}
return 'vi';
}
function getRequestedLanguage() {
const requested = new URLSearchParams(window.location.search).get('lang');
return translations[requested] ? requested : null;
}
function setLanguage(lang) {
if (!translations[lang]) lang = 'vi';
currentLang = lang;
document.querySelectorAll('[data-i18n]').forEach(el => {
const key = el.getAttribute('data-i18n');
if (translations[lang] && translations[lang][key]) {
el.textContent = translations[lang][key];
}
});
// Reset language button styles
const langs = ['vi', 'ru', 'en', 'zh', 'de', 'fr'];
langs.forEach(l => {
const btn = document.getElementById(`btn-${l}`);
if (btn) {
if (l === lang) {
btn.className = "px-2.5 py-1.5 font-bold rounded-lg transition bg-white text-brand-600 shadow-sm";
} else {
btn.className = "px-2.5 py-1.5 font-bold rounded-lg transition text-gray-600 hover:text-brand-600";
}
}
});
document.documentElement.lang = lang;
const languageUrl = new URL(window.location.href);
languageUrl.searchParams.set('lang', lang);
history.replaceState(null, '', `${languageUrl.pathname}${languageUrl.search}${languageUrl.hash}`);
const canonicalUrl = new URL(`/?lang=${lang}`, window.location.origin).href;
document.getElementById('canonical-url').href = canonicalUrl;
document.getElementById('meta-description').content = translations[lang].meta_description;
document.getElementById('og-title').content = translations[lang].page_title;
document.getElementById('og-description').content = translations[lang].meta_description;
document.getElementById('og-url').content = canonicalUrl;
document.getElementById('og-locale').content = languageLocales[lang];
renderWeatherCondition();
}
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, 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.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) {
card.style.display = 'flex';
} else {
card.style.display = 'none';
}
});
}
async function handleBooking(event) {
event.preventDefault();
const form = event.currentTarget;
const submitButton = form.querySelector('[type="submit"]');
const status = document.getElementById('form-status');
status.classList.add('hidden');
submitButton.disabled = true;
try {
const response = await fetch(form.action, {
method: form.method,
body: new FormData(form),
headers: { Accept: 'application/json' }
});
if (!response.ok) throw new Error('Form submission failed');
form.reset();
document.getElementById('success-modal').classList.remove('hidden');
} catch {
status.classList.remove('hidden');
} finally {
submitButton.disabled = false;
}
}
function closeModal() {
document.getElementById('success-modal').classList.add('hidden');
}
setLanguage(getRequestedLanguage() || getPreferredLanguage());
loadCurrentWeather();
setInterval(loadCurrentWeather, 30 * 60 * 1000);
</script>
</body>
</html>