<!DOCTYPE html>
<html lang="th">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Blue Mobile - ร้านโทรศัพท์มือถือออนไลน์</title>
<meta name="description" content="Blue Mobile ร้านโทรศัพท์มือถือออนไลน์ มั่นใจได้ของแท้ ราคายุติธรรม บริการดี พร้อมส่งฟรีทั่วประเทศ">
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.2/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-icons/1.11.1/font/bootstrap-icons.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Prompt:wght@300;400;600;700&display=swap&subset=thai" rel="stylesheet">
<link rel="stylesheet" href="styles.css">
<link rel="manifest" href="manifest.json">
<meta name="theme-color" content="#1e88ff">
<link rel="icon" href="icons/icon-192.png" sizes="192x192">
<link rel="apple-touch-icon" href="icons/icon-512.png" sizes="512x512">
<!-- Open Graph / Social -->
<meta property="og:title" content="Blue Mobile - ร้านโทรศัพท์มือถือออนไลน์">
<meta property="og:description" content="ร้านโทรศัพท์มือถือออนไลน์ คุณภาพดี ราคายุติธรรม ส่งฟรีทั่วประเทศ">
<meta property="og:image" content="https://images.unsplash.com/photo-1511707171634-5f897ff02aa9?w=1200&h=630&fit=crop">
<meta property="og:type" content="website">
<meta name="twitter:card" content="summary_large_image">
<meta name="mobile-web-app-capable" content="yes">
<!-- iOS meta & splash (basic) -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="default">
<link rel="apple-touch-icon" href="icons/icon-192.png">
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-expand-lg fixed-top">
<div class="container">
<a class="navbar-brand" href="#" aria-label="Blue Mobile ร้านโทรศัพท์มือถือ"> <i class="bi bi-phone" aria-hidden="true"></i> Blue Mobile</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav me-auto">
<li class="nav-item"><a class="nav-link" href="#home">หน้าแรก</a></li>
<li class="nav-item"><a class="nav-link" href="#products">สินค้า</a></li>
<li class="nav-item"><a class="nav-link" href="#about">เกี่ยวกับเรา</a></li>
<li class="nav-item"><a class="nav-link" href="#contact">ติดต่อ</a></li>
</ul>
<button class="btn btn-gold me-2" data-bs-toggle="modal" data-bs-target="#cartModal">
<i class="bi bi-cart"></i> ตะกร้า <span class="cart-count" id="cartCount">0</span>
</button>
</div>
</div>
</nav>
<!-- Page-level heading for accessibility (visually hidden) -->
<h1 class="visually-hidden">Blue Mobile - ร้านโทรศัพท์มือถือออนไลน์</h1>
<!-- Hero Carousel -->
<section id="home" style="margin-top: 76px;">
<div id="heroCarousel" class="carousel slide hero-carousel" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#heroCarousel" data-bs-slide-to="0" class="active" aria-label="สไลด์ 1"></button>
<button type="button" data-bs-target="#heroCarousel" data-bs-slide-to="1" aria-label="สไลด์ 2"></button>
<button type="button" data-bs-target="#heroCarousel" data-bs-slide-to="2" aria-label="สไลด์ 3"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="images/hero-1-1200.webp" class="d-block w-100" alt="iPhone">
<div class="carousel-caption">
<h2 class="display-4 fw-bold">iPhone 15 Pro Max</h2>
<p class="lead">ประสบการณ์ใหม่แห่งการใช้งาน ด้วยเทคโนโลยีล้ำสมัย</p>
<button class="btn btn-gold btn-lg" onclick="scrollToProducts()">เลือกซื้อเลย</button>
</div>
</div>
<div class="carousel-item">
<img src="images/hero-2-1200.webp" class="d-block w-100" alt="Samsung">
<div class="carousel-caption">
<h2 class="display-4 fw-bold">Samsung Galaxy S24</h2>
<p class="lead">นวัตกรรมแห่งอนาคต ในราคาที่คุณจับต้องได้</p>
<button class="btn btn-gold btn-lg" onclick="scrollToProducts()">สั่งซื้อทันที</button>
</div>
</div>
<div class="carousel-item">
<img src="images/hero-3-1200.webp" class="d-block w-100" alt="Xiaomi">
<div class="carousel-caption">
<h2 class="display-4 fw-bold">รับประกันสินค้า 1 ปี</h2>
<p class="lead">บริการหลังการขายดี ส่งฟรีทั่วประเทศ</p>
<button class="btn btn-gold btn-lg" onclick="scrollToProducts()">ดูสินค้าทั้งหมด</button>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#heroCarousel" data-bs-slide="prev" aria-label="สไลด์ก่อนหน้า">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#heroCarousel" data-bs-slide="next" aria-label="สไลด์ถัดไป">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
</button>
</div>
</section>
<!-- Products Section -->
<section id="products" class="py-5">
<div class="container">
<h2 class="text-center section-title">สินค้าแนะนำ</h2>
<div class="loading" id="loading">
<div class="spinner"></div>
<p>กำลังโหลดสินค้า...</p>
</div>
<div class="row" id="productsContainer">
<!-- Products will be loaded here by JavaScript -->
</div>
</div>
</section>
<!-- About Section -->
<section id="about" class="py-5">
<div class="container">
<h2 class="text-center section-title">เกี่ยวกับ Blue Mobile</h2>
<div class="row align-items-center">
<div class="col-lg-6">
<h3 class="text-gold mb-4">ร้านโทรศัพท์มือถือที่คุณไว้ใจได้</h3>
<p>Blue Mobile เป็นร้านขายโทรศัพท์มือถือออนไลน์ที่มีประสบการณ์มากกว่า 10 ปี เรามุ่งมั่นในการให้บริการลูกค้าด้วยสินค้าคุณภาพสูง ราคายุติธรรม และบริการหลังการขายที่ดีที่สุด</p>
<ul class="list-unstyled">
<li><i class="bi bi-check-circle-fill text-warning me-2"></i> สินค้าของแท้ 100%</li>
<li><i class="bi bi-check-circle-fill text-warning me-2"></i> รับประกันสินค้า 1 ปีเต็ม</li>
<li><i class="bi bi-check-circle-fill text-warning me-2"></i> ส่งฟรีทั่วประเทศ</li>
<li><i class="bi bi-check-circle-fill text-warning me-2"></i> บริการหลังการขาย 24/7</li>
</ul>
</div>
<div class="col-lg-6 text-center">
<img src="images/about.webp" class="img-fluid rounded" alt="About">
</div>
</div>
</div>
</section>
<!-- Contact Section -->
<section id="contact" class="py-5">
<div class="container">
<h2 class="text-center section-title">ติดต่อเรา</h2>
<div class="row">
<div class="col-lg-4 text-center mb-4">
<div class="card h-100">
<div class="card-body">
<i class="bi bi-geo-alt-fill text-warning fs-1 mb-3"></i>
<h5>ที่อยู่ร้าน</h5>
<p>123 ถนนสุขุมวิท แขวงคลองเตย<br>เขตคลองเตย กรุงเทพฯ 10110</p>
</div>
</div>
</div>
<div class="col-lg-4 text-center mb-4">
<div class="card h-100">
<div class="card-body">
<i class="bi bi-telephone-fill text-warning fs-1 mb-3"></i>
<h5>โทรศัพท์</h5>
<p>02-123-4567<br>086-123-4567</p>
</div>
</div>
</div>
<div class="col-lg-4 text-center mb-4">
<div class="card h-100">
<div class="card-body">
<i class="bi bi-clock-fill text-warning fs-1 mb-3"></i>
<h5>เวลาทำการ</h5>
<p>จันทร์ - เสาร์: 9:00 - 20:00<br>อาทิตย์: 10:00 - 18:00</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="footer py-4">
<div class="container">
<div class="row">
<div class="col-lg-6">
<h5 class="text-warning mb-3">Blue Mobile</h5>
<p>ร้านขายโทรศัพท์มือถือออนไลน์ที่คุณไว้ใจได้ สินค้าของแท้ ราคายุติธรรม บริการดีที่สุด</p>
</div>
<div class="col-lg-6 text-lg-end">
<h6 class="mb-3">ติดตามเรา</h6>
<div class="d-flex justify-content-lg-end justify-content-center">
<a href="#" class="social-icon" aria-label="Facebook"><i class="bi bi-facebook" aria-hidden="true"></i></a>
<a href="#" class="social-icon" aria-label="Instagram"><i class="bi bi-instagram" aria-hidden="true"></i></a>
<a href="#" class="social-icon" aria-label="Line"><i class="bi bi-line" aria-hidden="true"></i></a>
<a href="#" class="social-icon" aria-label="โทรศัพท์"><i class="bi bi-telephone" aria-hidden="true"></i></a>
</div>
</div>
</div>
<hr class="my-4">
<div class="text-center">
<p>© 2024 Blue Mobile. สงวนลิขสิทธิ์</p>
</div>
</div>
</footer>
<!-- Install prompt removed per user request -->
<!-- Cart Modal -->
<div class="modal fade" id="cartModal" tabindex="-1">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title text-warning"><i class="bi bi-cart"></i> ตะกร้าสินค้า</h5>
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="ปิดหน้าต่าง"></button>
</div>
<div class="modal-body">
<div id="cartItems"></div>
<div class="d-flex justify-content-between align-items-center mt-3 pt-3 border-top">
<h5>รวมทั้งสิ้น: <span id="cartTotal" class="text-warning">0</span> บาท</h5>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">ปิด</button>
<button type="button" class="btn btn-gold" onclick="proceedToCheckout()" id="checkoutBtn">ดำเนินการชำระเงิน</button>
</div>
</div>
</div>
</div>
<!-- Checkout Modal -->
<div class="modal fade" id="checkoutModal" tabindex="-1">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title text-warning"><i class="bi bi-credit-card"></i> ชำระเงิน</h5>
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="ปิดหน้าต่าง"></button>
</div>
<div class="modal-body">
<form id="checkoutForm">
<div class="row">
<div class="col-lg-8">
<h6 class="text-warning mb-3">ข้อมูลการจัดส่ง</h6>
<div class="row mb-3">
<div class="col-md-6">
<input type="text" class="form-control" placeholder="ชื่อ" required>
</div>
<div class="col-md-6">
<input type="text" class="form-control" placeholder="นามสกุล" required>
</div>
</div>
<div class="mb-3">
<input type="tel" class="form-control" placeholder="เบอร์โทรศัพท์" required>
</div>
<div class="mb-3">
<textarea class="form-control" rows="3" placeholder="ที่อยู่จัดส่ง" required></textarea>
</div>
<div class="row mb-3">
<div class="col-md-4">
<select class="form-select" required>
<option value="">เลือกจังหวัด</option>
<option>กรุงเทพฯ</option>
<option>เชียงใหม่</option>
<option>ขอนแก่น</option>
</select>
</div>
<div class="col-md-4">
<input type="text" class="form-control" placeholder="รหัสไปรษณีย์" required>
</div>
</div>
<h6 class="text-warning mb-3 mt-4">วิธีการชำระเงิน</h6>
<div class="mb-3">
<div class="form-check mb-2">
<input class="form-check-input" type="radio" name="payment" id="creditCard" value="credit" checked>
<label class="form-check-label" for="creditCard">
<i class="bi bi-credit-card"></i> บัตรเครดิต/เดบิต
</label>
</div>
<div class="form-check mb-2">
<input class="form-check-input" type="radio" name="payment" id="banking" value="banking">
<label class="form-check-label" for="banking">
<i class="bi bi-bank"></i> โอนผ่านธนาคาร
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="payment" id="cod" value="cod">
<label class="form-check-label" for="cod">
<i class="bi bi-cash"></i> เก็บเงินปลายทาง
</label>
</div>
</div>
<div id="creditCardForm" class="mt-3">
<div class="mb-3">
<input type="text" class="form-control" placeholder="หมายเลขบัตร (1234 5678 9012 3456)" maxlength="19">
</div>
<div class="row">
<div class="col-md-6">
<input type="text" class="form-control" placeholder="MM/YY" maxlength="5">
</div>
<div class="col-md-6">
<input type="text" class="form-control" placeholder="CVV" maxlength="3">
</div>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="card">
<div class="card-header">
<h6 class="mb-0 text-warning">สรุปคำสั่งซื้อ</h6>
</div>
<div class="card-body">
<div id="orderSummary"></div>
<hr>
<div class="d-flex justify-content-between">
<strong>รวมทั้งสิ้น:</strong>
<strong class="text-warning" id="orderTotal">0 บาท</strong>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">ยกเลิก</button>
<button type="button" id="processPaymentBtn" class="btn btn-gold" onclick="processPayment()">
<i class="bi bi-lock"></i> ชำระเงิน
</button>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.2/js/bootstrap.bundle.min.js"></script>
<script src="app.js"></script>
</body>
</html>