556 lines
43 KiB
HTML
Executable File
556 lines
43 KiB
HTML
Executable File
<!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>
|
||
<link rel="stylesheet" href="css/styles.css">
|
||
</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>
|
||
|
||
<!-- Item 6 -->
|
||
<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="images/hon-chong.jpg" alt="Coastal rocks at Hòn Chồng" 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_6_title">Hòn Chồng</h3>
|
||
<p class="text-gray-600 text-sm leading-relaxed mb-4" data-i18n="attr_6_desc">Cụm đá ven biển với những khối đá lớn xếp chồng tự nhiên, hướng ra vịnh Nha Trang, là điểm ngắm cảnh và chụp ảnh nổi tiếng.</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_6_loc">Vĩnh Phước, Nha Trang</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Item 7 -->
|
||
<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/long-son-pagoda.jpg" alt="Long Sơn Pagoda in Nha Trang" 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_7_title">Chùa Long Sơn</h3>
|
||
<p class="text-gray-600 text-sm leading-relaxed mb-4" data-i18n="attr_7_desc">Ngôi chùa nổi tiếng dưới chân đồi Trại Thủy, nổi bật với tượng Kim Thân Phật Tổ màu trắng và tầm nhìn toàn cảnh thành phố.</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_7_loc">22 Đường 23 Tháng 10, Nha Trang</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 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">
|
||
<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_8_title">Tháp Po Klong Garai</h3>
|
||
<p class="text-gray-600 text-sm leading-relaxed mb-4" data-i18n="attr_8_desc">Quần thể tháp Chăm cổ trên đồi Trầu, được xây dựng vào cuối thế kỷ XIII để thờ vua Po Klong Garai.</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_8_loc">Đồi Trầu, Phan Rang–Tháp Chàm</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Item 9 -->
|
||
<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="Coast and coral reef near Vĩnh Hy" 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_9_title">Hang Rái & Vườn quốc gia Núi Chúa</h3>
|
||
<p class="text-gray-600 text-sm leading-relaxed mb-4" data-i18n="attr_9_desc">Khám phá bãi đá ven biển độc đáo, rạn san hô cổ và cảnh quan núi rừng trong Khu dự trữ sinh quyển Núi Chúa.</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_9_loc">Vĩnh Hy, Ninh Hải</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 sm:grid-cols-2 gap-6 max-w-4xl mx-auto mb-12">
|
||
<article class="bg-gradient-to-br from-sky-50 to-white border border-sky-100 p-6 sm:p-8 rounded-3xl shadow-sm">
|
||
<h3 class="text-lg font-bold text-gray-900 mb-5" data-i18n="weather_current">Thời tiết hiện tại</h3>
|
||
<div class="flex items-center gap-4">
|
||
<i id="weather-current-icon" class="fa-solid fa-cloud-sun text-4xl text-amber-500" aria-hidden="true"></i>
|
||
<div>
|
||
<div id="weather-current-temperature" class="text-3xl font-extrabold text-gray-900">--°C</div>
|
||
<div id="weather-current-condition" class="text-sm text-gray-600" data-i18n="weather_loading" aria-live="polite">Đang tải thời tiết...</div>
|
||
</div>
|
||
</div>
|
||
<div class="flex gap-4 mt-5 text-sm text-gray-600">
|
||
<span><span data-i18n="weather_high">Cao nhất</span>: <span id="weather-today-high">--°</span></span>
|
||
<span><span data-i18n="weather_low">Thấp nhất</span>: <span id="weather-today-low">--°</span></span>
|
||
</div>
|
||
</article>
|
||
|
||
<article class="bg-gradient-to-br from-indigo-50 to-white border border-indigo-100 p-6 sm:p-8 rounded-3xl shadow-sm">
|
||
<div class="flex items-baseline justify-between gap-3 mb-5">
|
||
<h3 class="text-lg font-bold text-gray-900" data-i18n="weather_tomorrow">Ngày mai</h3>
|
||
<time id="weather-tomorrow-date" class="text-sm text-gray-500"></time>
|
||
</div>
|
||
<div class="flex items-center gap-4">
|
||
<i id="weather-tomorrow-icon" class="fa-solid fa-cloud-sun text-4xl text-amber-500" aria-hidden="true"></i>
|
||
<div id="weather-tomorrow-condition" class="text-sm text-gray-600" data-i18n="weather_loading" aria-live="polite">Đang tải thời tiết...</div>
|
||
</div>
|
||
<div class="flex gap-4 mt-5 text-sm text-gray-600">
|
||
<span><span data-i18n="weather_high">Cao nhất</span>: <span id="weather-tomorrow-high">--°</span></span>
|
||
<span><span data-i18n="weather_low">Thấp nhất</span>: <span id="weather-tomorrow-low">--°</span></span>
|
||
</div>
|
||
</article>
|
||
</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 src="js/translations.js"></script>
|
||
<script src="js/main.js"></script>
|
||
</body>
|
||
</html> |