<!DOCTYPE html>
<html lang="th">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
<meta name="theme-color" content="#00b8a9">
<meta name="color-scheme" content="light">
<title>กาญจนบุรี ทริป 1 วัน | สัมผัสธรรมชาติและประวัติศาสตร์</title>
<meta name="description" content="เที่ยวกาญจนบุรี 1 วัน สัมผัสความงามของสะพานข้ามแม่น้ำแคว น้ำตกเอราวัณ ต้นจามจุรียักษ์ และสกายวอล์ค">
<!-- Performance hints -->
<meta http-equiv="x-dns-prefetch-control" content="on">
<!-- DNS prefetch for external domains -->
<link rel="dns-prefetch" href="https://fonts.googleapis.com">
<link rel="dns-prefetch" href="https://fonts.gstatic.com">
<link rel="dns-prefetch" href="https://cdnjs.cloudflare.com">
<!-- Preconnect to external domains -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="preconnect" href="https://cdnjs.cloudflare.com">
<!-- Preload critical images -->
<link rel="preload" href="images/bridge.webp" as="image" type="image/webp">
<link rel="preload" href="images/bridge.jpg" as="image" type="image/jpeg">
<!-- Critical CSS inline -->
<style>
/* Critical above-the-fold CSS */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--primary-color: #00b8a9;
--secondary-color: #f8f8f8;
--accent-color: #ff6f61;
--text-dark: #2c3e50;
--text-light: #7f8c8d;
--light-color: #f8f9fa;
--dark-color: #34495e;
--border-radius: 15px;
--shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
--shadow-light: 0 5px 15px rgba(0, 0, 0, 0.08);
--transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
}
body {
font-family: system-ui, -apple-system, sans-serif;
line-height: 1.7;
color: var(--text-dark);
background: linear-gradient(135deg, var(--light-color) 0%, #ffffff 100%);
overflow-x: hidden;
font-display: swap;
}
/* Navigation - Critical */
#navbar {
position: fixed;
top: 0;
left: 0;
right: 0;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
z-index: 1000;
transition: var(--transition);
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}
.nav-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 2rem;
}
.nav-container ul {
display: flex;
justify-content: center;
list-style: none;
padding: 0;
}
.nav-container li {
margin: 0 2rem;
}
.nav-container a {
text-decoration: none;
color: var(--text-dark);
font-weight: 500;
transition: var(--transition);
display: flex;
align-items: center;
gap: 0.5rem;
}
/* Hero Section - Critical */
.hero {
min-height: 100vh;
background: linear-gradient(135deg, var(--primary-color) 0%, var(--dark-color) 100%);
display: flex;
align-items: center;
justify-content: center;
text-align: center;
color: white;
position: relative;
overflow: hidden;
}
.hero-content {
position: relative;
z-index: 2;
max-width: 800px;
padding: 2rem;
}
.hero h1 {
font-size: 4rem;
font-weight: 700;
margin-bottom: 1rem;
background: linear-gradient(45deg, #ffffff, var(--secondary-color));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.hero p {
font-size: 1.3rem;
margin-bottom: 2rem;
opacity: 0.9;
}
.cta-button {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 1rem 2rem;
background: var(--accent-color);
color: white;
text-decoration: none;
border-radius: var(--border-radius);
font-weight: 600;
transition: var(--transition);
}
.cta-button:hover {
transform: translateY(-3px);
box-shadow: var(--shadow);
}
@media (max-width: 768px) {
.hero h1 {
font-size: 2.5rem;
}
.hero p {
font-size: 1.1rem;
}
.nav-container ul {
flex-direction: column;
gap: 1rem;
}
.nav-container li {
margin: 0;
}
}
</style>
<!-- Load non-critical CSS asynchronously -->
<link rel="preload" href="style.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript>
<link rel="stylesheet" href="style.css">
</noscript>
<!-- Load fonts asynchronously with font-display: swap -->
<link rel="preload" href="https://fonts.googleapis.com/css2?family=Prompt:wght@300;400;500;600;700;800&family=Playfair+Display:wght@400;500;600;700&display=swap" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Prompt:wght@300;400;500;600;700;800&family=Playfair+Display:wght@400;500;600;700&display=swap">
</noscript>
<!-- Critical font loading with fallback -->
<style>
@font-face {
font-family: 'Prompt-Fallback';
src: local('system-ui'), local('-apple-system'), local('BlinkMacSystemFont');
font-display: swap;
}
@font-face {
font-family: 'Playfair-Fallback';
src: local('Times New Roman'), local('Georgia'), local('serif');
font-display: swap;
}
</style>
</head>
<body>
<!-- Navigation -->
<nav id="navbar">
<div class="nav-container">
<ul>
<li><a href="#hero" class="active"><i class="fas fa-home"></i><span>หน้าแรก</span></a></li>
<li><a href="#attractions"><i class="fas fa-map-marker-alt"></i><span>สถานที่ท่องเที่ยว</span></a></li>
<li><a href="#gallery"><i class="fas fa-images"></i><span>แกลเลอรี่</span></a></li>
</ul>
</div>
</nav>
<!-- Hero Section -->
<section id="hero" class="hero">
<div class="hero-content">
<h1>ทริป 1 วัน เที่ยวกาญจนบุรี</h1>
<p>สัมผัสธรรมชาติ ประวัติศาสตร์ และวัฒนธรรมในเมืองกาญจน์ที่เต็มไปด้วยเรื่องราวและความงาม</p>
<a href="#attractions" class="cta-button">
<i class="fas fa-compass"></i> เริ่มต้นการเดินทาง
</a>
</div>
</section>
<!-- Gallery Section -->
<section id="gallery" class="slideshow-section">
<div class="section-title fade-in-up">
<h2>แกลเลอรี่ภาพ</h2>
<p>ชมความงามของสถานที่ท่องเที่ยวในกาญจนบุรี</p>
</div>
<div class="slideshow-container fade-in-up">
<div class="slide active">
<picture>
<source srcset="images/bridge.webp" type="image/webp">
<img src="images/bridge.jpg" alt="River Kwai Bridge" loading="lazy">
</picture>
<div class="slide-caption">
<h3>สะพานข้ามแม่น้ำแคว</h3>
<p>แลนด์มาร์คประวัติศาสตร์ที่มีชื่อเสียงระดับโลก</p>
</div>
</div>
<div class="slide">
<picture>
<source srcset="images/erawan.webp" type="image/webp">
<img src="images/erawan.jpg" alt="Erawan Waterfall" loading="lazy">
</picture>
<div class="slide-caption">
<h3>น้ำตกเอราวัณ</h3>
<p>น้ำตก 7 ชั้นที่มีความงามตระการตา</p>
</div>
</div>
<div class="slide">
<picture>
<source srcset="images/tree.webp" type="image/webp">
<img src="images/tree.jpg" alt="Giant Tree" loading="lazy">
</picture>
<div class="slide-caption">
<h3>ต้นจามจุรียักษ์</h3>
<p>ความยิ่งใหญ่ของธรรมชาติอายุกว่า 100 ปี</p>
</div>
</div>
<div class="slide">
<picture>
<source srcset="images/skywalk.webp" type="image/webp">
<img src="images/skywalk.jpg" alt="Skywalk" loading="lazy">
</picture>
<div class="slide-caption">
<h3>สกายวอล์คเมืองกาญจนบุรี</h3>
<p>ชมวิวแม่น้ำแควจากมุมสูง</p>
</div>
</div>
<button class="slide-nav prev" onclick="changeSlide(-1)">
<i class="fas fa-chevron-left"></i>
</button>
<button class="slide-nav next" onclick="changeSlide(1)">
<i class="fas fa-chevron-right"></i>
</button>
</div>
<div class="slide-indicators">
<span class="indicator active" onclick="goToSlide(1)"></span>
<span class="indicator" onclick="goToSlide(2)"></span>
<span class="indicator" onclick="goToSlide(3)"></span>
<span class="indicator" onclick="goToSlide(4)"></span>
</div>
</section>
<!-- Attractions Section -->
<section id="attractions" class="main-content">
<div class="section-title fade-in-up">
<h2>สถานที่ท่องเที่ยว</h2>
<p>สำรวจความงามและประวัติศาสตร์ของกาญจนบุรี</p>
</div>
<div class="content-grid">
<div class="content-card fade-in-up" data-delay="100">
<picture>
<source srcset="images/bridge.webp" type="image/webp">
<img src="images/bridge.jpg" alt="River Kwai Bridge">
</picture>
<div class="card-content">
<h3><i class="fas fa-bridge-water"></i> สะพานข้ามแม่น้ำแคว</h3>
<p>สะพานข้ามแม่น้ำแควเป็นแลนด์มาร์คสำคัญของกาญจนบุรี สร้างขึ้นในช่วงสงครามโลกครั้งที่ 2 โดยเชลยศึกฝ่ายสัมพันธมิตร เป็นส่วนหนึ่งของทางรถไฟสายมรณะที่เชื่อมไทยและพม่า</p>
<div class="card-info">
<p><strong><i class="fas fa-map-marker-alt"></i> ที่ตั้ง:</strong> ต.ท่ามะขาม อ.เมืองกาญจนบุรี</p>
<p><strong><i class="fas fa-clock"></i> เวลาเปิด:</strong> 24 ชั่วโมง</p>
<p><strong><i class="fas fa-car"></i> การเดินทาง:</strong> จากตัวเมืองกาญจนบุรี 10 นาที (4.8 กม.)</p>
<p><strong><i class="fas fa-ticket-alt"></i> ค่าเข้า:</strong> ฟรี</p>
</div>
<a href="#" class="learn-more" onclick="openModal('bridge')">เรียนรู้เพิ่มเติม <i class="fas fa-arrow-right"></i></a>
</div>
</div>
<div class="content-card fade-in-up" data-delay="200">
<picture>
<source srcset="images/erawan.webp" type="image/webp">
<img src="images/erawan.jpg" alt="Erawan Waterfall">
</picture>
<div class="card-content">
<h3><i class="fas fa-water"></i> น้ำตกเอราวัณ</h3>
<p>น้ำตกเอราวัณตั้งอยู่ในอุทยานแห่งชาติเอราวัณ เป็นน้ำตก 7 ชั้นที่มีน้ำใสสีฟ้ามรกต แต่ละชั้นมีความสวยงามแตกต่างกัน เหมาะสำหรับเล่นน้ำและถ่ายรูป</p>
<div class="card-info">
<p><strong><i class="fas fa-map-marker-alt"></i> ที่ตั้ง:</strong> ต.ท่ากระดาน อ.ศรีสวัสดิ์</p>
<p><strong><i class="fas fa-clock"></i> เวลาเปิด:</strong> 07:00-16:30</p>
<p><strong><i class="fas fa-hiking"></i> เวลาเดิน:</strong> ประมาณ 3 ชั่วโมง (ทั้ง 7 ชั้น)</p>
<p><strong><i class="fas fa-ticket-alt"></i> ค่าเข้า:</strong> ผู้ใหญ่ 60 บาท, เด็ก 30 บาท</p>
</div>
<a href="#" class="learn-more" onclick="openModal('erawan')">เรียนรู้เพิ่มเติม <i class="fas fa-arrow-right"></i></a>
</div>
</div>
<div class="content-card fade-in-up" data-delay="300">
<picture>
<source srcset="images/tree.webp" type="image/webp">
<img src="images/tree.jpg" alt="Giant Tree">
</picture>
<div class="card-content">
<h3><i class="fas fa-tree"></i> ต้นจามจุรียักษ์</h3>
<p>ต้นจามจุรียักษ์ตั้งอยู่ในเขตพื้นที่กองการสัตว์และเกษตรกรรมที่ 1 มีอายุกว่า 100 ปี ขนาด 10 คนโอบ รัศมีทรงพุ่มกว่า 25 เมตร เป็นสถานที่ถ่ายรูปยอดนิยม</p>
<div class="card-info">
<p><strong><i class="fas fa-map-marker-alt"></i> ที่ตั้ง:</strong> ต.เกาะสำโรง อ.เมืองกาญจนบุรี</p>
<p><strong><i class="fas fa-clock"></i> เวลาเปิด:</strong> 08:30-16:30</p>
<p><strong><i class="fas fa-birthday-cake"></i> อายุ:</strong> มากกว่า 100 ปี</p>
<p><strong><i class="fas fa-ticket-alt"></i> ค่าเข้า:</strong> ฟรี</p>
</div>
<a href="#" class="learn-more" onclick="openModal('tree')">เรียนรู้เพิ่มเติม <i class="fas fa-arrow-right"></i></a>
</div>
</div>
<div class="content-card fade-in-up" data-delay="400">
<picture>
<source srcset="images/skywalk.webp" type="image/webp">
<img src="images/skywalk.jpg" alt="Skywalk">
</picture>
<div class="card-content">
<h3><i class="fas fa-eye"></i> สกายวอล์คเมืองกาญจนบุรี</h3>
<p>สกายวอล์คเมืองกาญจนบุรีเป็นทางเดินกระจกใสสูง 12 เมตร ยาว 150 เมตร ริมแม่น้ำแคว มองเห็นวิวแม่น้ำสองสีที่แม่น้ำแควใหญ่และแควน้อยมาบรรจบกัน</p>
<div class="card-info">
<p><strong><i class="fas fa-map-marker-alt"></i> ที่ตั้ง:</strong> ต.บ้านใต้ อ.เมืองกาญจนบุรี</p>
<p><strong><i class="fas fa-clock"></i> เวลาเปิด:</strong> 09:00-17:00</p>
<p><strong><i class="fas fa-ruler-vertical"></i> ความสูง:</strong> 12 เมตร, ยาว 150 เมตร</p>
<p><strong><i class="fas fa-ticket-alt"></i> ค่าเข้า:</strong> ค่ารองเท้า 60 บาท</p>
</div>
<a href="#" class="learn-more" onclick="openModal('skywalk')">เรียนรู้เพิ่มเติม <i class="fas fa-arrow-right"></i></a>
</div>
</div>
</div>
</section>
<!-- Modal Structure -->
<div id="attractionModal" class="modal">
<div class="modal-content">
<div class="modal-header">
<h2 id="modalTitle"></h2>
<span class="close" onclick="closeModal()">×</span>
</div>
<div class="modal-body">
<div class="modal-image">
<img id="modalImage" src="" alt="">
</div>
<div class="modal-details">
<div id="modalDescription"></div>
<div class="modal-info-grid">
<div id="modalInfo"></div>
</div>
<div class="modal-highlights">
<h4><i class="fas fa-star"></i> ไฮไลท์</h4>
<ul id="modalHighlights"></ul>
</div>
<div class="modal-tips">
<h4><i class="fas fa-lightbulb"></i> เคล็ดลับการเที่ยว</h4>
<ul id="modalTips"></ul>
</div>
</div>
</div>
</div>
</div>
<!-- Footer -->
<footer>
<div class="footer-content">
<p><i class="fas fa-heart"></i> สร้างด้วยความรักสำหรับการท่องเที่ยวไทย</p>
<p>© 2025 Kanchanaburi Travel Guide. All rights reserved.</p>
</div>
</footer>
<!-- Scripts -->
<script>
// Load Font Awesome asynchronously
function loadFontAwesome() {
var link = document.createElement('link');
link.rel = 'stylesheet';
link.href = 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css';
link.media = 'print';
link.onload = function() {this.media = 'all';};
link.onerror = function() {
// Fallback to local icons if CDN fails
console.warn('Font Awesome CDN failed, using fallback');
};
document.head.appendChild(link);
}
// Critical JavaScript for immediate functionality
document.addEventListener('DOMContentLoaded', function() {
// Initialize basic navigation
var navbar = document.getElementById('navbar');
if (navbar) {
window.addEventListener('scroll', function() {
if (window.scrollY > 100) {
navbar.style.background = 'rgba(255,255,255,0.98)';
navbar.style.boxShadow = '0 5px 20px rgba(0,0,0,0.1)';
} else {
navbar.style.background = 'rgba(255,255,255,0.95)';
navbar.style.boxShadow = '0 2px 10px rgba(0,0,0,0.05)';
}
});
}
});
// Load non-critical resources after page load
window.addEventListener('load', function() {
loadFontAwesome();
// Preload other images for smoother transitions
var images = ['erawan.webp', 'tree.webp', 'skywalk.webp'];
images.forEach(function(img) {
var link = document.createElement('link');
link.rel = 'preload';
link.as = 'image';
link.type = 'image/webp';
link.href = 'images/' + img;
document.head.appendChild(link);
});
});
</script>
<!-- Load JavaScript with proper loading strategy -->
<script>
// Load DOMPurify asynchronously
function loadDOMPurify() {
var script = document.createElement('script');
script.src = 'https://cdnjs.cloudflare.com/ajax/libs/dompurify/2.4.0/purify.min.js';
script.async = true;
document.head.appendChild(script);
}
// Load main script after DOM is ready
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', function() {
loadDOMPurify();
var script = document.createElement('script');
script.src = 'script.js';
script.async = true;
document.head.appendChild(script);
});
} else {
loadDOMPurify();
var script = document.createElement('script');
script.src = 'script.js';
script.async = true;
document.head.appendChild(script);
}
</script>
</body>
</html>