<!DOCTYPE html>
<html lang="th">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Luxury Hotel - จองห้องพักออนไลน์</title>
<meta name="description" content="จองห้องพักออนไลน์ที่โรงแรมหรู พร้อมสิ่งอำนวยความสะดวกครบครัน ราคาพิเศษ">
<meta name="keywords" content="จองห้องพัก, โรงแรม, ที่พัก, ห้องพักหรู">
<meta property="og:title" content="Luxury Hotel - จองห้องพักออนไลน์">
<meta property="og:description" content="จองห้องพักออนไลน์ที่โรงแรมหรู พร้อมสิ่งอำนวยความสะดวกครบครัน">
<meta property="og:type" content="website">
<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Kanit:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<!-- Font Awesome Icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<!-- Project styles -->
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- Header -->
<header class="header">
<nav class="nav container">
<div class="logo">
<i class="fas fa-crown"></i> Luxury Hotel
</div>
<ul class="nav-menu" id="navMenu">
<li><a href="#" class="nav-link active" data-page="home">หน้าแรก</a></li>
<li><a href="#" class="nav-link" data-page="rooms">ห้องพัก</a></li>
<li><a href="#" class="nav-link" data-page="gallery">แกลเลอรี่</a></li>
<li><a href="#" class="nav-link" data-page="bookings">การจอง</a></li>
<li><a href="#" class="nav-link" data-page="admin">จัดการ</a></li>
</ul>
<div class="mobile-menu" id="mobileMenu">
<i class="fas fa-bars"></i>
</div>
</nav>
</header>
<main class="main-content">
<!-- Home Page -->
<div id="home" class="page active">
<section class="hero">
<div class="hero-content fade-in">
<h1>ยินดีต้อนรับสู่โรงแรมหรู</h1>
<p>สัมผัสประสบการณ์การพักผ่อนที่ไม่เหมือนใคร</p>
<a href="#" class="btn" onclick="app.showPage('rooms')">เลือกห้องพัก</a>
<a href="#" class="btn btn-outline" onclick="app.showPage('gallery')">ชมแกลเลอรี่</a>
</div>
</section>
<div class="container">
<div class="search-form fade-in">
<h3 style="margin-bottom: 1rem; text-align: center; color: var(--secondary-color);">
<i class="fas fa-search"></i> ค้นหาห้องพัก
</h3>
<form id="searchForm">
<div class="form-row">
<div class="form-group">
<label for="checkin">วันที่เข้าพัก</label>
<input type="date" id="checkin" class="form-control" required>
</div>
<div class="form-group">
<label for="checkout">วันที่ออก</label>
<input type="date" id="checkout" class="form-control" required>
</div>
<div class="form-group">
<label for="guests">จำนวนผู้เข้าพัก</label>
<select id="guests" class="form-control">
<option value="1">1 คน</option>
<option value="2" selected>2 คน</option>
<option value="3">3 คน</option>
<option value="4">4 คน</option>
</select>
</div>
<div class="form-group">
<label> </label>
<button type="submit" class="btn" style="width: 100%;">
<i class="fas fa-search"></i> ค้นหา
</button>
</div>
</div>
</form>
</div>
<section class="section">
<h2 class="section-title fade-in">ห้องพักแนะนำ</h2>
<div id="featuredRooms" class="rooms-grid"></div>
</section>
<!-- New: Why choose / Amenities / Offers -->
<section class="section">
<div class="container">
<div class="features-grid fade-in" style="margin-top: 1rem;">
<div class="feature-card">
<div class="icon"><i class="fas fa-award"></i></div>
<h4>บริการระดับพรีเมียม</h4>
<p>ทีมงานมืออาชีพ พร้อมดูแลทุกความต้องการของคุณตลอดการเข้าพัก</p>
</div>
<div class="feature-card">
<div class="icon"><i class="fas fa-shield-alt"></i></div>
<h4>การจองปลอดภัย</h4>
<p>ระบบชำระเงินและการยืนยันการจองที่ปลอดภัย และมีตัวเลือกการชำระหลากหลาย</p>
</div>
<div class="feature-card">
<div class="icon"><i class="fas fa-concierge-bell"></i></div>
<h4>สิ่งอำนวยความสะดวกครบครัน</h4>
<p>สระว่ายน้ำ ฟิตเนส สปา และห้องอาหารคุณภาพ พร้อมบริการแบบครบวงจร</p>
</div>
</div>
<div class="amenities-grid fade-in" style="margin-top: 2rem;">
<div class="amenity"><i class="fas fa-wifi"></i><span>WiFi ฟรี</span></div>
<div class="amenity"><i class="fas fa-swimming-pool"></i><span>สระว่ายน้ำ</span></div>
<div class="amenity"><i class="fas fa-spa"></i><span>สปา & เวลเนส</span></div>
<div class="amenity"><i class="fas fa-utensils"></i><span>ห้องอาหาร</span></div>
<div class="amenity"><i class="fas fa-parking"></i><span>ที่จอดรถ</span></div>
<div class="amenity"><i class="fas fa-dumbbell"></i><span>ฟิตเนส</span></div>
</div>
<div class="offers-banner fade-in" style="margin-top: 2.5rem;">
<div class="offer-left">
<h3>ข้อเสนอพิเศษช่วงนี้</h3>
<p>ส่วนลด 20% สำหรับการจองล่วงหน้า 30 วัน และแพ็คเกจรวมอาหารเช้า</p>
<button class="btn" onclick="app.showPage('rooms')">จองเลย</button>
</div>
<div class="offer-right">
<img src="https://images.unsplash.com/photo-1571896349842-33c89424de2d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80" alt="special offer">
</div>
</div>
<div class="testimonials fade-in" style="margin-top: 2.5rem;">
<h3 style="text-align: center; margin-bottom: 1rem;">รีวิวจากผู้เข้าพัก</h3>
<div class="test-grid">
<div class="testimonial">
<p>"บริการดีมาก ห้องสวย สะอาด ทำเลสะดวกใจกลางเมือง — จะกลับมาอีกแน่นอน"</p>
<div class="author">— Somchai P.</div>
</div>
<div class="testimonial">
<p>"อาหารเช้าอร่อย วิวสวย และบรรยากาศเงียบสงบ เหมาะกับการพักผ่อนจริงๆ"</p>
<div class="author">— Maria L.</div>
</div>
<div class="testimonial">
<p>"ทีมงานให้บริการรวดเร็ว แนะนำกิจกรรมท้องถิ่นได้ดีมากๆ"</p>
<div class="author">— David K.</div>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
<!-- Rooms Page -->
<div id="rooms" class="page">
<div class="container">
<section class="section">
<h1 class="section-title">ห้องพักทั้งหมด</h1>
<div id="roomsContainer" class="rooms-grid"></div>
</section>
</div>
</div>
<!-- Gallery Page -->
<div id="gallery" class="page">
<div class="container">
<section class="section">
<h1 class="section-title">แกลเลอรี่</h1>
<!-- Main Gallery Slideshow -->
<div id="mainGallerySlideshow" class="main-gallery-slideshow">
<div class="gallery-slideshow-container">
<div id="gallerySlides" class="gallery-slides"></div>
<button class="gallery-prev" id="galleryPrev" aria-label="Previous">❮</button>
<button class="gallery-next" id="galleryNext" aria-label="Next">❯</button>
<div id="galleryDots" class="gallery-dots"></div>
</div>
</div>
<!-- Gallery Info -->
<div id="galleryInfo" class="gallery-info">
<h3 id="currentImageTitle"></h3>
<p id="currentImageCategory"></p>
</div>
<!-- Thumbnail Grid -->
<div class="gallery-thumbnails">
<h3>ภาพทั้งหมด</h3>
<div id="galleryContainer" class="gallery-grid"></div>
</div>
</section>
</div>
</div>
<!-- Bookings Page -->
<div id="bookings" class="page">
<div class="container">
<section class="section">
<h1 class="section-title">การจองของฉัน</h1>
<div id="bookingsContainer"></div>
</section>
</div>
</div>
<!-- Admin Page -->
<div id="admin" class="page">
<div class="admin-nav">
<div class="container">
<ul>
<li><a href="#" class="admin-link active" data-section="bookings">การจอง</a></li>
<li><a href="#" class="admin-link" data-section="rooms">จัดการห้อง</a></li>
<li><a href="#" class="admin-link" data-section="reports">รายงาน</a></li>
</ul>
</div>
</div>
<div class="container">
<div id="adminContent"></div>
</div>
</div>
</main>
<!-- Footer -->
<footer class="site-footer">
<div class="container footer-inner">
<div class="footer-col">
<h4>Luxury Hotel</h4>
<p>โรงแรมหรูใจกลางเมือง บริการห้องพักที่สะดวกสบาย พร้อมสิ่งอำนวยความสะดวกครบครัน และประสบการณ์การพักผ่อนที่น่าจดจำ</p>
</div>
<div class="footer-col">
<h4>Contact</h4>
<p>123/4 Sukhumvit Rd, Bangkok, Thailand</p>
<p>Email: info@luxuryhotel.example</p>
<p>Phone: +66 2 123 4567</p>
</div>
<div class="footer-col">
<h4>Quick Links</h4>
<p><a href="#" onclick="app.showPage('rooms')">Rooms</a></p>
<p><a href="#" onclick="app.showPage('gallery')">Gallery</a></p>
<p><a href="#" onclick="app.showPage('bookings')">My Bookings</a></p>
</div>
</div>
<div class="container footer-bottom">© <span id="year"></span> Luxury Hotel — All rights reserved.</div>
</footer>
<!-- Booking Modal -->
<div id="bookingModal" class="modal">
<div class="modal-content">
<div class="modal-header">
<h2><i class="fas fa-calendar-check"></i> จองห้องพัก</h2>
<span class="close">×</span>
</div>
<div id="bookingContent"></div>
</div>
</div>
<!-- Room Details Modal -->
<div id="roomModal" class="modal">
<div class="modal-content">
<div class="modal-header">
<h2 id="roomModalTitle">รายละเอียดห้องพัก</h2>
<span class="close">×</span>
</div>
<div id="roomModalContent"></div>
</div>
</div>
<!-- Gallery Modal -->
<div id="galleryModal" class="modal">
<div class="modal-content" style="max-width: 90%; max-height: 90%;">
<div class="modal-header">
<h2 id="galleryModalTitle">รูปภาพ</h2>
<span class="close">×</span>
</div>
<div id="galleryModalContent" style="text-align: center;"></div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>