demo.html

53.71 KB
03/08/2025 14:32
HTML
demo.html
Preview Raw Download
<!DOCTYPE html>
<html lang="th">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Fashion Store - ร้านเสื้อผ้าออนไลน์</title>
  <link href="https://fonts.googleapis.com/css2?family=Prompt:wght@300;400;500;600;700&display=swap" rel="stylesheet">
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: 'Prompt', sans-serif;
      line-height: 1.6;
      color: #333;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      min-height: 100vh;
    }

    .container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 20px;
    }

    /* Header */
    header {
      background: rgba(255, 255, 255, 0.95);
      backdrop-filter: blur(10px);
      padding: 1rem 0;
      position: sticky;
      top: 0;
      z-index: 1000;
      box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
    }

    nav {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .logo {
      font-size: 1.8rem;
      font-weight: 700;
      color: #667eea;
      text-decoration: none;
    }

    .nav-links {
      display: flex;
      list-style: none;
      gap: 2rem;
    }

    .nav-links a {
      text-decoration: none;
      color: #333;
      font-weight: 500;
      transition: color 0.3s;
    }

    .nav-links a:hover {
      color: #667eea;
    }

    .cart-icon {
      position: relative;
      cursor: pointer;
      font-size: 1.5rem;
      color: #667eea;
      transition: transform 0.3s;
    }

    .cart-icon:hover {
      transform: scale(1.1);
    }

    .cart-count {
      position: absolute;
      top: -8px;
      right: -8px;
      background: #ff4757;
      color: white;
      border-radius: 50%;
      width: 20px;
      height: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.8rem;
      font-weight: 600;
    }

    /* Hero Section */
    .hero {
      background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
        url('https://images.unsplash.com/photo-1441986300917-64674bd600d8?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80');
      background-size: cover;
      background-position: center;
      height: 70vh;
      display: flex;
      align-items: center;
      text-align: center;
      color: white;
    }

    .hero-content h1 {
      font-size: 3.5rem;
      margin-bottom: 1rem;
      font-weight: 700;
    }

    .hero-content p {
      font-size: 1.2rem;
      margin-bottom: 2rem;
      opacity: 0.9;
    }

    .btn {
      display: inline-block;
      padding: 12px 30px;
      background: linear-gradient(45deg, #667eea, #764ba2);
      color: white;
      text-decoration: none;
      border-radius: 50px;
      font-weight: 600;
      transition: all 0.3s;
      border: none;
      cursor: pointer;
    }

    .btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
    }

    /* Filters */
    .filters {
      background: white;
      padding: 2rem 0;
      margin: 2rem 0;
      border-radius: 15px;
      box-shadow: 0 5px 30px rgba(0, 0, 0, 0.1);
    }

    .filter-group {
      display: flex;
      gap: 1rem;
      align-items: center;
      flex-wrap: wrap;
      justify-content: center;
    }

    .filter-group select,
    .filter-group input {
      padding: 10px 15px;
      border: 2px solid #e0e0e0;
      border-radius: 25px;
      font-family: inherit;
      transition: border-color 0.3s;
    }

    .filter-group select:focus,
    .filter-group input:focus {
      outline: none;
      border-color: #667eea;
    }

    /* Products Grid */
    .products-section {
      padding: 2rem 0;
    }

    .section-title {
      text-align: center;
      font-size: 2.5rem;
      margin-bottom: 3rem;
      color: white;
      font-weight: 700;
    }

    .products-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 2rem;
      margin-bottom: 3rem;
    }

    .product-card {
      background: white;
      border-radius: 20px;
      overflow: hidden;
      box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
      transition: all 0.3s;
      cursor: pointer;
    }

    .product-card:hover {
      transform: translateY(-10px);
      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
    }

    .product-image {
      width: 100%;
      height: 300px;
      object-fit: cover;
    }

    .product-info {
      padding: 1.5rem;
    }

    .product-name {
      font-size: 1.2rem;
      font-weight: 600;
      margin-bottom: 0.5rem;
      color: #333;
    }

    .product-description {
      color: #666;
      margin-bottom: 1rem;
      font-size: 0.9rem;
    }

    .product-price {
      font-size: 1.5rem;
      font-weight: 700;
      color: #667eea;
      margin-bottom: 1rem;
    }

    .product-options {
      margin-bottom: 1rem;
    }

    .product-options select {
      width: 100%;
      padding: 8px 12px;
      border: 2px solid #e0e0e0;
      border-radius: 10px;
      margin-bottom: 0.5rem;
    }

    .add-to-cart-btn {
      width: 100%;
      padding: 12px;
      background: linear-gradient(45deg, #667eea, #764ba2);
      color: white;
      border: none;
      border-radius: 10px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.3s;
    }

    .add-to-cart-btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    }

    /* Cart Modal */
    .modal {
      display: none;
      position: fixed;
      z-index: 2000;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.7);
      backdrop-filter: blur(5px);
    }

    .modal-content {
      background-color: white;
      margin: 5% auto;
      padding: 2rem;
      border-radius: 20px;
      width: 90%;
      max-width: 600px;
      max-height: 80vh;
      overflow-y: auto;
      position: relative;
    }

    .close {
      position: absolute;
      right: 20px;
      top: 20px;
      font-size: 2rem;
      cursor: pointer;
      color: #999;
    }

    .close:hover {
      color: #333;
    }

    .cart-item {
      display: flex;
      align-items: center;
      padding: 1rem;
      border-bottom: 1px solid #eee;
      gap: 1rem;
    }

    .cart-item img {
      width: 80px;
      height: 80px;
      object-fit: cover;
      border-radius: 10px;
    }

    .cart-item-info {
      flex: 1;
    }

    .cart-item-name {
      font-weight: 600;
      margin-bottom: 0.5rem;
    }

    .cart-item-details {
      font-size: 0.9rem;
      color: #666;
      margin-bottom: 0.5rem;
    }

    .cart-item-price {
      font-weight: 600;
      color: #667eea;
    }

    .quantity-controls {
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }

    .quantity-btn {
      background: #667eea;
      color: white;
      border: none;
      border-radius: 50%;
      width: 30px;
      height: 30px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .remove-item {
      background: #ff4757;
      color: white;
      border: none;
      border-radius: 5px;
      padding: 5px 10px;
      cursor: pointer;
    }

    .cart-total {
      text-align: right;
      font-size: 1.5rem;
      font-weight: 700;
      margin: 1rem 0;
      color: #667eea;
    }

    .checkout-section {
      margin-top: 2rem;
      padding-top: 2rem;
      border-top: 2px solid #eee;
    }

    .customer-form {
      display: grid;
      gap: 1rem;
      margin-bottom: 2rem;
    }

    .form-group {
      display: flex;
      flex-direction: column;
    }

    .form-group label {
      margin-bottom: 0.5rem;
      font-weight: 600;
    }

    .form-group input,
    .form-group textarea {
      padding: 12px;
      border: 2px solid #e0e0e0;
      border-radius: 10px;
      font-family: inherit;
    }

    .form-group input:focus,
    .form-group textarea:focus {
      outline: none;
      border-color: #667eea;
    }

    .qr-payment {
      text-align: center;
      padding: 2rem;
      background: #f8f9fa;
      border-radius: 15px;
      margin: 2rem 0;
    }

    .qr-code {
      width: 200px;
      height: 200px;
      margin: 1rem auto;
      border: 3px solid #667eea;
      border-radius: 15px;
    }

    .payment-info {
      margin: 1rem 0;
      font-size: 1.1rem;
    }

    .payment-amount {
      font-size: 2rem;
      font-weight: 700;
      color: #667eea;
      margin: 1rem 0;
    }

    /* Responsive */
    @media (max-width: 768px) {
      .nav-links {
        display: none;
      }

      .hero-content h1 {
        font-size: 2.5rem;
      }

      .filter-group {
        flex-direction: column;
        align-items: stretch;
      }

      .products-grid {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 1rem;
      }

      .modal-content {
        margin: 10% auto;
        width: 95%;
      }

      .cart-item {
        flex-direction: column;
        text-align: center;
      }
    }

    .loading {
      text-align: center;
      padding: 2rem;
      color: white;
    }

    .empty-cart {
      text-align: center;
      padding: 3rem;
      color: #666;
    }

    .success-message {
      background: #2ecc71;
      color: white;
      padding: 1rem;
      border-radius: 10px;
      margin: 1rem 0;
      text-align: center;
    }

    /* AR Try-On Styles */
    .ar-btn {
      background: linear-gradient(45deg, #ff6b6b, #ee5a6f);
      color: white;
      border: none;
      padding: 10px 20px;
      border-radius: 25px;
      font-weight: 600;
      cursor: pointer;
      margin-top: 10px;
      width: 100%;
      transition: all 0.3s;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
    }

    .ar-btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 25px rgba(255, 107, 107, 0.3);
    }

    .ar-modal {
      display: none;
      position: fixed;
      z-index: 3000;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.9);
      backdrop-filter: blur(10px);
    }

    .ar-content {
      background: white;
      margin: 2% auto;
      padding: 20px;
      border-radius: 20px;
      width: 95%;
      max-width: 900px;
      height: 90vh;
      position: relative;
      display: flex;
      flex-direction: column;
    }

    .ar-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
      padding-bottom: 15px;
      border-bottom: 2px solid #eee;
    }

    .ar-header h2 {
      color: #333;
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .ar-close {
      font-size: 2rem;
      cursor: pointer;
      color: #999;
      transition: color 0.3s;
    }

    .ar-close:hover {
      color: #333;
    }

    .ar-container {
      flex: 1;
      display: flex;
      gap: 20px;
      min-height: 0;
    }

    .ar-camera {
      flex: 2;
      background: #000;
      border-radius: 15px;
      position: relative;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .ar-video {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 15px;
    }

    .ar-overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
    }

    .ar-controls {
      flex: 1;
      background: #f8f9fa;
      border-radius: 15px;
      padding: 20px;
      display: flex;
      flex-direction: column;
      gap: 15px;
    }

    .ar-product-info {
      background: white;
      padding: 15px;
      border-radius: 10px;
      text-align: center;
    }

    .ar-product-image {
      width: 100px;
      height: 100px;
      object-fit: cover;
      border-radius: 10px;
      margin: 0 auto 10px;
    }

    .ar-options {
      background: white;
      padding: 15px;
      border-radius: 10px;
    }

    .ar-options h4 {
      margin-bottom: 10px;
      color: #333;
    }

    .color-selector {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      margin-bottom: 15px;
    }

    .color-option {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      border: 3px solid transparent;
      cursor: pointer;
      transition: all 0.3s;
    }

    .color-option.active {
      border-color: #667eea;
      transform: scale(1.1);
    }

    .size-selector {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
    }

    .size-option {
      padding: 8px 15px;
      border: 2px solid #e0e0e0;
      border-radius: 20px;
      cursor: pointer;
      transition: all 0.3s;
      background: white;
    }

    .size-option.active {
      border-color: #667eea;
      background: #667eea;
      color: white;
    }

    .ar-actions {
      display: flex;
      flex-direction: column;
      gap: 10px;
      margin-top: auto;
    }

    .ar-capture-btn {
      background: linear-gradient(45deg, #4CAF50, #45a049);
      color: white;
      border: none;
      padding: 12px;
      border-radius: 10px;
      font-weight: 600;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
    }

    .ar-share-btn {
      background: linear-gradient(45deg, #2196F3, #1976D2);
      color: white;
      border: none;
      padding: 12px;
      border-radius: 10px;
      font-weight: 600;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
    }

    .ar-loading {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      color: white;
      text-align: center;
    }

    .ar-error {
      color: #ff4757;
      text-align: center;
      padding: 20px;
    }

    .ar-instructions {
      background: linear-gradient(45deg, #667eea, #764ba2);
      color: white;
      padding: 15px;
      border-radius: 10px;
      font-size: 0.9rem;
      line-height: 1.4;
    }

    .ar-instructions h4 {
      margin-bottom: 8px;
    }

    .ar-instructions ul {
      margin: 0;
      padding-left: 20px;
    }

    /* Mobile AR Styles */
    @media (max-width: 768px) {
      .ar-content {
        width: 100%;
        height: 100vh;
        margin: 0;
        border-radius: 0;
      }

      .ar-container {
        flex-direction: column;
      }

      .ar-controls {
        flex: none;
        max-height: 40vh;
        overflow-y: auto;
      }
    }
  </style>
</head>

<body>
  <header>
    <nav class="container">
      <a href="#" class="logo">
        <i class="fas fa-tshirt"></i> Fashion Store
      </a>
      <ul class="nav-links">
        <li><a href="#home">หน้าแรก</a></li>
        <li><a href="#products">สินค้า</a></li>
        <li><a href="#about">เกี่ยวกับเรา</a></li>
        <li><a href="#contact">ติดต่อ</a></li>
      </ul>
      <div class="cart-icon" onclick="toggleCart()">
        <i class="fas fa-shopping-cart"></i>
        <span class="cart-count" id="cartCount">0</span>
      </div>
    </nav>
  </header>

  <main>
    <section class="hero" id="home">
      <div class="container">
        <div class="hero-content">
          <h1>แฟชั่นสุดชิค</h1>
          <p>เสื้อผ้าแฟชั่นคุณภาพดี ราคาย่อมเยา ส่งถึงบ้าน</p>
          <a href="#products" class="btn">เลือกซื้อสินค้า</a>
        </div>
      </div>
    </section>

    <div class="container">
      <section class="filters">
        <div class="filter-group">
          <select id="categoryFilter">
            <option value="">หมวดหมู่ทั้งหมด</option>
            <option value="เสื้อ">เสื้อ</option>
            <option value="กางเกง">กางเกง</option>
            <option value="กระโปรง">กระโปรง</option>
            <option value="เดรส">เดรส</option>
            <option value="เสื้อนอก">เสื้อนอก</option>
          </select>
          <select id="sizeFilter">
            <option value="">ไซส์ทั้งหมด</option>
            <option value="XS">XS</option>
            <option value="S">S</option>
            <option value="M">M</option>
            <option value="L">L</option>
            <option value="XL">XL</option>
            <option value="XXL">XXL</option>
          </select>
          <select id="priceFilter">
            <option value="">ช่วงราคา</option>
            <option value="0-500">0 - 500 บาท</option>
            <option value="500-1000">500 - 1,000 บาท</option>
            <option value="1000-2000">1,000 - 2,000 บาท</option>
            <option value="2000+">มากกว่า 2,000 บาท</option>
          </select>
          <input type="text" id="searchInput" placeholder="ค้นหาสินค้า..." />
        </div>
      </section>

      <section class="products-section" id="products">
        <h2 class="section-title">สินค้าแนะนำ</h2>
        <div class="loading" id="loading">
          <i class="fas fa-spinner fa-spin"></i> กำลังโหลดสินค้า...
        </div>
        <div class="products-grid" id="productsGrid"></div>
      </section>
    </div>
  </main>

  <!-- Cart Modal -->
  <div id="cartModal" class="modal">
    <div class="modal-content">
      <span class="close" onclick="toggleCart()">&times;</span>
      <h2>ตะกร้าสินค้า</h2>
      <div id="cartItems"></div>
      <div class="cart-total" id="cartTotal">รวม: 0 บาท</div>

      <div class="checkout-section" id="checkoutSection" style="display: none;">
        <h3>ข้อมูลการสั่งซื้อ</h3>
        <form class="customer-form" id="customerForm">
          <div class="form-group">
            <label>ชื่อ-นามสกุล *</label>
            <input type="text" id="customerName" required>
          </div>
          <div class="form-group">
            <label>เบอร์โทร *</label>
            <input type="tel" id="customerPhone" required>
          </div>
          <div class="form-group">
            <label>อีเมล</label>
            <input type="email" id="customerEmail">
          </div>
          <div class="form-group">
            <label>ที่อยู่จัดส่ง *</label>
            <textarea id="customerAddress" rows="3" required></textarea>
          </div>
        </form>

        <div class="qr-payment" id="qrPayment" style="display: none;">
          <h3>ชำระเงินผ่าน PromptPay</h3>
          <img class="qr-code" id="qrCode" alt="QR Code PromptPay">
          <div class="payment-info">
            <p>สแกน QR Code เพื่อชำระเงิน</p>
            <div class="payment-amount" id="paymentAmount">0 บาท</div>
            <p>หมายเลข PromptPay: 0812345678</p>
          </div>
          <button class="btn" onclick="confirmPayment()">ยืนยันการชำระเงิน</button>
        </div>

        <button class="btn" id="proceedToPayment" onclick="proceedToPayment()" style="width: 100%; margin-top: 1rem;">
          ดำเนินการชำระเงิน
        </button>
      </div>
    </div>
  </div>

  <!-- AR Try-On Modal -->
  <div id="arModal" class="ar-modal">
    <div class="ar-content">
      <div class="ar-header">
        <h2><i class="fas fa-magic"></i> ทดลองใส่เสื้อผ้า AR</h2>
        <span class="ar-close" onclick="closeARTryOn()">&times;</span>
      </div>
      <div class="ar-container">
        <div class="ar-camera">
          <video id="arVideo" class="ar-video" autoplay muted></video>
          <canvas id="arOverlay" class="ar-overlay"></canvas>
          <div class="ar-loading" id="arLoading">
            <i class="fas fa-spinner fa-spin fa-2x"></i>
            <p>กำลังเปิดกล้อง...</p>
          </div>
        </div>
        <div class="ar-controls">
          <div class="ar-product-info" id="arProductInfo">
            <img id="arProductImage" class="ar-product-image" alt="Product">
            <h4 id="arProductName">ชื่อสินค้า</h4>
            <p id="arProductPrice">ราคา</p>
          </div>

          <div class="ar-options">
            <h4>เลือกสี</h4>
            <div class="color-selector" id="arColorSelector"></div>

            <h4>เลือกไซส์</h4>
            <div class="size-selector" id="arSizeSelector"></div>
          </div>

          <div class="ar-instructions">
            <h4>วิธีใช้งาน:</h4>
            <ul>
              <li>หันหน้าตรงเข้ากล้อง</li>
              <li>ยืนห่างจากกล้อง 1-2 เมตร</li>
              <li>เลือกสีและไซส์ที่ต้องการ</li>
              <li>ถ่ายภาพบันทึกหรือแชร์</li>
            </ul>
          </div>

          <div class="ar-actions">
            <button class="ar-capture-btn" onclick="captureARPhoto()">
              <i class="fas fa-camera"></i> ถ่ายภาพ
            </button>
            <button class="ar-share-btn" onclick="shareARPhoto()">
              <i class="fas fa-share"></i> แชร์
            </button>
            <button class="add-to-cart-btn" onclick="addToCartFromAR()">
              <i class="fas fa-shopping-cart"></i> เพิ่มไปยังตะกร้า
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>

  <script>
    // จำลองข้อมูลสินค้า (ปกติจะมาจาก API)
    const productsData = [
      {
        id: 7,
        name: "เดรสป้ายแขนสั้นแบบเทเลอร์",
        description: "เดรสป้ายแขนสั้นแบบเทเลอร์เรียบหรู รังสรรค์จากผ้าวูลทวิล โดดเด่นด้วยรูปทรงเสื้อแขนสั้นสมาร์ท พร้อมปกเสื้อสูทแบบ Notch และกระโปรงทรง ช่วงเอวเสริมดีเทลกระดุมสีทองสองเม็ด สะท้อนความหรูหราด้วยเอฟเฟ็กต์กระดุมสองแถว ตกแต่งแถบ Monogram Flower บริเวณแขนซ้าย มอบเสน่ห์สไตล์เมซงอย่างสมบูรณ์แบบ",
        price: 150000,
        category: "เสื้อ",
        image: "assets/images/dress.webp",
        sizes: ["S", "M", "L", "XL"],
        colors: ["ขาว", "ดำ", "เทา", "ฟ้า"]
      },
      {
        id: 1,
        name: "เสื้อยืดแฟชั่น",
        description: "เสื้อยืดคอตตอน 100% นุ่มสบาย",
        price: 290,
        category: "เสื้อ",
        image: "https://images.unsplash.com/photo-1521572163474-6864f9cf17ab?ixlib=rb-4.0.3&auto=format&fit=crop&w=1000&q=80",
        sizes: ["S", "M", "L", "XL"],
        colors: ["ขาว", "ดำ", "เทา", "ฟ้า"]
      },
      {
        id: 2,
        name: "เดรสลำลอง",
        description: "เดรสผ้าไหมเทียม สวยงาม เหมาะกับทุกโอกาส",
        price: 890,
        category: "เดรส",
        image: "https://images.unsplash.com/photo-1515372039744-b8f02a3ae446?ixlib=rb-4.0.3&auto=format&fit=crop&w=1000&q=80",
        sizes: ["XS", "S", "M", "L"],
        colors: ["ดำ", "น้ำเงิน", "แดง", "เขียว"]
      },
      {
        id: 3,
        name: "กางเกงยีนส์",
        description: "กางเกงยีนส์ทรงสกินนี่ แฟชั่นทันสมัย",
        price: 690,
        category: "กางเกง",
        image: "https://images.unsplash.com/photo-1542272604-787c3835535d?ixlib=rb-4.0.3&auto=format&fit=crop&w=1000&q=80",
        sizes: ["S", "M", "L", "XL", "XXL"],
        colors: ["น้ำเงินเข้ม", "น้ำเงินอ่อน", "ดำ"]
      },
      {
        id: 4,
        name: "เสื้อเชิ้ตคลาสสิค",
        description: "เสื้อเชิ้ตแขนยาว เหมาะกับการทำงาน",
        price: 590,
        category: "เสื้อ",
        image: "https://images.unsplash.com/photo-1596755094514-f87e34085b2c?ixlib=rb-4.0.3&auto=format&fit=crop&w=1000&q=80",
        sizes: ["S", "M", "L", "XL"],
        colors: ["ขาว", "ฟ้าอ่อน", "ชมพูอ่อน"]
      },
      {
        id: 5,
        name: "กระโปรงจีบ",
        description: "กระโปรงสั้นแฟชั่น สไตล์เกาหลี",
        price: 450,
        category: "กระโปรง",
        image: "https://images.unsplash.com/photo-1594633312681-425c7b97ccd1?ixlib=rb-4.0.3&auto=format&fit=crop&w=1000&q=80",
        sizes: ["XS", "S", "M", "L"],
        colors: ["ดำ", "กรม", "เทา", "เบจ"]
      },
      {
        id: 6,
        name: "เสื้อแจ็คเก็ต",
        description: "เสื้อแจ็คเก็ตกันลม ใส่สบาย",
        price: 1290,
        category: "เสื้อนอก",
        image: "https://images.unsplash.com/photo-1551698618-1dfe5d97d256?ixlib=rb-4.0.3&auto=format&fit=crop&w=1000&q=80",
        sizes: ["S", "M", "L", "XL"],
        colors: ["ดำ", "กรม", "เขียวทหาร"]
      }
    ];

    // ตัวแปรสำหรับระบบตะกร้า
    let cart = [];
    let filteredProducts = [...productsData];
    let currentARProduct = null;
    let arStream = null;
    let arCanvas = null;
    let arContext = null;
    let arProductImg = null;

    // โหลดข้อมูลสินค้า
    function loadProducts() {
      const loading = document.getElementById('loading');
      const productsGrid = document.getElementById('productsGrid');

      setTimeout(() => {
        loading.style.display = 'none';
        displayProducts(filteredProducts);
      }, 1000);
    }

    // แสดงสินค้า
    function displayProducts(products) {
      const productsGrid = document.getElementById('productsGrid');

      if (products.length === 0) {
        productsGrid.innerHTML = '<p style="text-align: center; color: white; grid-column: 1/-1;">ไม่พบสินค้าที่ค้นหา</p>';
        return;
      }

      productsGrid.innerHTML = products.map(product => `
                <div class="product-card">
                    <img src="${product.image}" alt="${product.name}" class="product-image">
                    <div class="product-info">
                        <h3 class="product-name">${product.name}</h3>
                        <p class="product-description">${product.description}</p>
                        <div class="product-price">${product.price.toLocaleString()} บาท</div>
                        <div class="product-options">
                            <select id="size-${product.id}">
                                <option value="">เลือกไซส์</option>
                                ${product.sizes.map(size => `<option value="${size}">${size}</option>`).join('')}
                            </select>
                            <select id="color-${product.id}">
                                <option value="">เลือกสี</option>
                                ${product.colors.map(color => `<option value="${color}">${color}</option>`).join('')}
                            </select>
                        </div>
                        <button class="add-to-cart-btn" onclick="addToCart(${product.id})">
                            <i class="fas fa-shopping-cart"></i> เพิ่มไปยังตะกร้า
                        </button>
                        <button class="ar-btn" onclick="openARTryOn(${product.id})">
                            <i class="fas fa-camera"></i> ทดลองใส่ AR
                        </button>
                    </div>
                </div>
            `).join('');
    }

    // เพิ่มสินค้าไปยังตะกร้า
    function addToCart(productId) {
      const product = productsData.find(p => p.id === productId);
      const sizeSelect = document.getElementById(`size-${productId}`);
      const colorSelect = document.getElementById(`color-${productId}`);

      const selectedSize = sizeSelect.value;
      const selectedColor = colorSelect.value;

      if (!selectedSize || !selectedColor) {
        alert('กรุณาเลือกไซส์และสีก่อนเพิ่มไปยังตะกร้า');
        return;
      }

      const cartItemId = `${productId}-${selectedSize}-${selectedColor}`;
      const existingItem = cart.find(item => item.cartItemId === cartItemId);

      if (existingItem) {
        existingItem.quantity += 1;
      } else {
        cart.push({
          cartItemId,
          ...product,
          selectedSize,
          selectedColor,
          quantity: 1
        });
      }

      updateCartUI();

      // Animation effect
      const btn = event.target;
      btn.style.background = '#2ecc71';
      btn.innerHTML = '<i class="fas fa-check"></i> เพิ่มแล้ว';
      setTimeout(() => {
        btn.style.background = 'linear-gradient(45deg, #667eea, #764ba2)';
        btn.innerHTML = '<i class="fas fa-shopping-cart"></i> เพิ่มไปยังตะกร้า';
      }, 1500);
    }

    // อัพเดท UI ตะกร้า
    function updateCartUI() {
      const cartCount = document.getElementById('cartCount');
      const cartItems = document.getElementById('cartItems');
      const cartTotal = document.getElementById('cartTotal');
      const checkoutSection = document.getElementById('checkoutSection');

      const totalItems = cart.reduce((sum, item) => sum + item.quantity, 0);
      const totalPrice = cart.reduce((sum, item) => sum + (item.price * item.quantity), 0);

      cartCount.textContent = totalItems;
      cartTotal.textContent = `รวม: ${totalPrice.toLocaleString()} บาท`;

      if (cart.length === 0) {
        cartItems.innerHTML = '<div class="empty-cart"><i class="fas fa-shopping-cart" style="font-size: 3rem; margin-bottom: 1rem; opacity: 0.3;"></i><p>ตะกร้าสินค้าว่าง</p></div>';
        checkoutSection.style.display = 'none';
      } else {
        cartItems.innerHTML = cart.map(item => `
                    <div class="cart-item">
                        <img src="${item.image}" alt="${item.name}">
                        <div class="cart-item-info">
                            <div class="cart-item-name">${item.name}</div>
                            <div class="cart-item-details">ไซส์: ${item.selectedSize} | สี: ${item.selectedColor}</div>
                            <div class="cart-item-price">${item.price.toLocaleString()} บาท</div>
                        </div>
                        <div class="quantity-controls">
                            <button class="quantity-btn" onclick="updateQuantity('${item.cartItemId}', -1)">-</button>
                            <span>${item.quantity}</span>
                            <button class="quantity-btn" onclick="updateQuantity('${item.cartItemId}', 1)">+</button>
                        </div>
                        <button class="remove-item" onclick="removeFromCart('${item.cartItemId}')">
                            <i class="fas fa-trash"></i>
                        </button>
                    </div>
                `).join('');
        checkoutSection.style.display = 'block';
      }
    }

    // อัพเดทจำนวนสินค้า
    function updateQuantity(cartItemId, change) {
      const item = cart.find(item => item.cartItemId === cartItemId);
      if (item) {
        item.quantity += change;
        if (item.quantity <= 0) {
          removeFromCart(cartItemId);
        } else {
          updateCartUI();
        }
      }
    }

    // ลบสินค้าออกจากตะกร้า
    function removeFromCart(cartItemId) {
      cart = cart.filter(item => item.cartItemId !== cartItemId);
      updateCartUI();
    }

    // เปิด/ปิดตะกร้า
    function toggleCart() {
      const modal = document.getElementById('cartModal');
      modal.style.display = modal.style.display === 'block' ? 'none' : 'block';
    }

    // ดำเนินการชำระเงิน
    function proceedToPayment() {
      const form = document.getElementById('customerForm');
      const name = document.getElementById('customerName').value;
      const phone = document.getElementById('customerPhone').value;
      const address = document.getElementById('customerAddress').value;

      if (!name || !phone || !address) {
        alert('กรุณากรอกข้อมูลให้ครบถ้วน');
        return;
      }

      // สร้าง QR Code PromptPay
      const totalAmount = cart.reduce((sum, item) => sum + (item.price * item.quantity), 0);
      generateQRCode(totalAmount);

      document.getElementById('proceedToPayment').style.display = 'none';
      document.getElementById('qrPayment').style.display = 'block';
      document.getElementById('paymentAmount').textContent = `${totalAmount.toLocaleString()} บาท`;
    }

    // สร้าง QR Code PromptPay
    function generateQRCode(amount) {
      // ในการใช้งานจริง ควรใช้ API PromptPay QR Code Generator
      // ที่นี่จะใช้ placeholder QR code
      const phoneNumber = '0812345678'; // เปลี่ยนเป็นหมายเลขจริง
      const qrData = `https://promptpay.io/${phoneNumber}/${amount}`;

      // ใช้ QR Code API ฟรี
      const qrCodeUrl = `https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=${encodeURIComponent(qrData)}`;
      document.getElementById('qrCode').src = qrCodeUrl;
    }

    // ยืนยันการชำระเงิน
    function confirmPayment() {
      const orderData = {
        orderId: Date.now(),
        customer: {
          name: document.getElementById('customerName').value,
          phone: document.getElementById('customerPhone').value,
          email: document.getElementById('customerEmail').value,
          address: document.getElementById('customerAddress').value
        },
        items: cart,
        total: cart.reduce((sum, item) => sum + (item.price * item.quantity), 0),
        timestamp: new Date().toISOString(),
        status: 'pending'
      };

      // บันทึกคำสั่งซื้อ (ในการใช้งานจริงจะส่งไป API)
      console.log('Order Data:', orderData);

      // แสดงข้อความสำเร็จ
      document.getElementById('qrPayment').innerHTML = `
                <div class="success-message">
                    <h3><i class="fas fa-check-circle"></i> คำสั่งซื้อสำเร็จ!</h3>
                    <p>หมายเลขคำสั่งซื้อ: ${orderData.orderId}</p>
                    <p>เราจะติดต่อกลับภายใน 24 ชั่วโมง</p>
                </div>
            `;

      // เคลียร์ตะกร้า
      setTimeout(() => {
        cart = [];
        updateCartUI();
        toggleCart();
      }, 3000);
    }

    // ระบบค้นหาและกรอง
    function filterProducts() {
      const category = document.getElementById('categoryFilter').value;
      const size = document.getElementById('sizeFilter').value;
      const priceRange = document.getElementById('priceFilter').value;
      const search = document.getElementById('searchInput').value.toLowerCase();

      filteredProducts = productsData.filter(product => {
        const matchCategory = !category || product.category === category;
        const matchSize = !size || product.sizes.includes(size);
        const matchSearch = !search || product.name.toLowerCase().includes(search) ||
          product.description.toLowerCase().includes(search);

        let matchPrice = true;
        if (priceRange) {
          const [min, max] = priceRange.split('-').map(p => p.replace('+', ''));
          const minPrice = parseInt(min);
          const maxPrice = max ? parseInt(max) : Infinity;
          matchPrice = product.price >= minPrice && product.price <= maxPrice;
        }

        return matchCategory && matchSize && matchSearch && matchPrice;
      });

      displayProducts(filteredProducts);
    }

    // Event Listeners
    document.getElementById('categoryFilter').addEventListener('change', filterProducts);
    document.getElementById('sizeFilter').addEventListener('change', filterProducts);
    document.getElementById('priceFilter').addEventListener('change', filterProducts);
    document.getElementById('searchInput').addEventListener('input', filterProducts);

    // ปิด modal เมื่อคลิกนอกพื้นที่
    window.onclick = function(event) {
      const modal = document.getElementById('cartModal');
      const arModal = document.getElementById('arModal');

      if (event.target === modal) {
        modal.style.display = 'none';
      }
      if (event.target === arModal) {
        closeARTryOn();
      }
    }

    // Smooth scrolling
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
      anchor.addEventListener('click', function(e) {
        e.preventDefault();
        const target = document.querySelector(this.getAttribute('href'));
        if (target) {
          target.scrollIntoView({
            behavior: 'smooth',
            block: 'start'
          });
        }
      });
    });

    // เริ่มต้นโหลดข้อมูล
    window.addEventListener('DOMContentLoaded', () => {
      loadProducts();
    });

    // API Simulation Functions (สำหรับการพัฒนาต่อ)
    const API = {
      // ดึงข้อมูลสินค้า
      async getProducts() {
        // จำลองการเรียก API
        return new Promise(resolve => {
          setTimeout(() => resolve(productsData), 1000);
        });
      },

      // บันทึกคำสั่งซื้อ
      async saveOrder(orderData) {
        // จำลองการส่งข้อมูลไป API
        return new Promise(resolve => {
          setTimeout(() => {
            console.log('Order saved to API:', orderData);
            resolve({success: true, orderId: orderData.orderId});
          }, 1000);
        });
      },

      // อัพเดทสถานะคำสั่งซื้อ
      async updateOrderStatus(orderId, status) {
        return new Promise(resolve => {
          setTimeout(() => {
            console.log(`Order ${orderId} status updated to: ${status}`);
            resolve({success: true});
          }, 500);
        });
      }
    };

    // AR Try-On Functions
    async function openARTryOn(productId) {
      currentARProduct = productsData.find(p => p.id === productId);
      if (!currentARProduct) return;

      document.getElementById('arModal').style.display = 'block';
      setupARInterface();
      // เตรียมโหลดภาพสินค้าไว้ล่วงหน้า
      arProductImg = null;
      if (currentARProduct.image) {
        arProductImg = new window.Image();
        // ถ้าเป็นไฟล์ local ไม่ต้องตั้ง crossOrigin
        if (/^https?:\/\//.test(currentARProduct.image)) {
          arProductImg.crossOrigin = "anonymous";
        }
        arProductImg.src = currentARProduct.image;
        // ถ้าโหลดภาพล้มเหลว ให้ arProductImg = null
        arProductImg.onerror = function() {
          arProductImg = null;
        };
      }
      await initializeCamera();
    }

    function setupARInterface() {
      // แสดงข้อมูลสินค้า
      document.getElementById('arProductImage').src = currentARProduct.image;
      document.getElementById('arProductName').textContent = currentARProduct.name;
      document.getElementById('arProductPrice').textContent = `${currentARProduct.price.toLocaleString()} บาท`;

      // สร้าง Color Selector
      const colorSelector = document.getElementById('arColorSelector');
      colorSelector.innerHTML = currentARProduct.colors.map((color, index) => {
        const colorCode = getColorCode(color);
        return `<div class="color-option ${index === 0 ? 'active' : ''}"
                             style="background-color: ${colorCode}"
                             onclick="selectARColor('${color}', this)"
                             title="${color}"></div>`;
      }).join('');

      // สร้าง Size Selector
      const sizeSelector = document.getElementById('arSizeSelector');
      sizeSelector.innerHTML = currentARProduct.sizes.map((size, index) =>
        `<div class="size-option ${index === 0 ? 'active' : ''}"
                      onclick="selectARSize('${size}', this)">${size}</div>`
      ).join('');
    }

    function getColorCode(colorName) {
      const colorMap = {
        'ขาว': '#FFFFFF',
        'ดำ': '#000000',
        'เทา': '#808080',
        'ฟ้า': '#87CEEB',
        'น้ำเงิน': '#0066CC',
        'แดง': '#FF0000',
        'เขียว': '#008000',
        'ชมพู': '#FFC0CB',
        'เหลือง': '#FFFF00',
        'ม่วง': '#800080',
        'กรม': '#003366',
        'เบจ': '#F5F5DC',
        'น้ำเงินเข้ม': '#000080',
        'น้ำเงินอ่อน': '#ADD8E6',
        'ฟ้าอ่อน': '#B0E0E6',
        'ชมพูอ่อน': '#FFB6C1',
        'เขียวทหาร': '#556B2F'
      };
      return colorMap[colorName] || '#CCCCCC';
    }

    function selectARColor(color, element) {
      document.querySelectorAll('.color-option').forEach(el => el.classList.remove('active'));
      element.classList.add('active');
      // อัพเดท AR overlay ตามสีที่เลือก
      updateAROverlay(color);
    }

    function selectARSize(size, element) {
      document.querySelectorAll('.size-option').forEach(el => el.classList.remove('active'));
      element.classList.add('active');
      // อัพเดท AR overlay ตามไซส์ที่เลือก
      updateAROverlay(null, size);
    }

    async function initializeCamera() {
      const video = document.getElementById('arVideo');
      const loading = document.getElementById('arLoading');

      try {
        // ขอสิทธิ์ใช้กล้อง
        arStream = await navigator.mediaDevices.getUserMedia({
          video: {
            facingMode: 'user',
            width: {ideal: 640},
            height: {ideal: 480}
          }
        });

        video.srcObject = arStream;
        video.onloadedmetadata = () => {
          loading.style.display = 'none';
          initializeAROverlay();
        };

      } catch (error) {
        console.error('Error accessing camera:', error);
        loading.innerHTML = `
                    <div class="ar-error">
                        <i class="fas fa-exclamation-triangle fa-2x"></i>
                        <p>ไม่สามารถเปิดกล้องได้</p>
                        <p>กรุณาอนุญาตการใช้กล้องในเบราว์เซอร์</p>
                    </div>
                `;
      }
    }

    function initializeAROverlay() {
      arCanvas = document.getElementById('arOverlay');
      arContext = arCanvas.getContext('2d');
      const video = document.getElementById('arVideo');

      // ตั้งค่าขนาด canvas ให้เท่ากับ video
      arCanvas.width = video.videoWidth || 640;
      arCanvas.height = video.videoHeight || 480;

      // เริ่ม AR rendering loop
      startARRendering();
    }

    function startARRendering() {
      function render() {
        if (arContext && currentARProduct) {
          drawAROverlay();
        }
        if (document.getElementById('arModal').style.display === 'block') {
          requestAnimationFrame(render);
        }
      }
      render();
    }

    function drawAROverlay() {
      if (!arContext) return;

      // เคลียร์ canvas
      arContext.clearRect(0, 0, arCanvas.width, arCanvas.height);

      // จำลองการวาดเสื้อผ้าบนตัวผู้ใช้
      // ในการใช้งานจริงจะใช้ AI/ML สำหรับ body detection
      drawVirtualGarment();
    }

    function drawVirtualGarment() {
      const centerX = arCanvas.width / 2;
      const centerY = arCanvas.height / 2;

      // วาดรูปสินค้าจริง (product image) แบบ overlay ขนาดกลาง (โหลดภาพไว้ล่วงหน้า)
      if (arProductImg && arProductImg.complete && arProductImg.naturalWidth > 0) {
        try {
          const imgW = arCanvas.width * 0.35;
          const imgH = arCanvas.height * 0.35;
          arContext.drawImage(arProductImg, centerX - imgW / 2, centerY - imgH / 2, imgW, imgH);
        } catch (e) {
          // ถ้าวาดไม่ได้ ให้ข้าม
        }
      }
      //drawOverlayShape();
      drawProductInfo();
      // ฟังก์ชันย่อยสำหรับวาด overlay เสื้อผ้า
      function drawOverlayShape() {
        arContext.save();
        const selectedColor = document.querySelector('.color-option.active')?.style.backgroundColor || '#CCCCCC';
        arContext.fillStyle = selectedColor;
        arContext.strokeStyle = '#333';
        arContext.lineWidth = 2;
        switch (currentARProduct.category) {
          case 'เสื้อ':
            drawShirt(centerX, centerY - 50);
            break;
          case 'เดรส':
            drawDress(centerX, centerY - 30);
            break;
          case 'กางเกง':
            drawPants(centerX, centerY + 20);
            break;
          case 'กระโปรง':
            drawSkirt(centerX, centerY + 20);
            break;
          default:
            drawShirt(centerX, centerY - 50);
        }
        arContext.restore();
      }
    }

    function drawShirt(x, y) {
      arContext.beginPath();
      // วาดรูปเสื้อแบบง่าย
      arContext.rect(x - 60, y, 120, 100);
      arContext.fill();
      arContext.stroke();

      // วาดแขนเสื้อ
      arContext.rect(x - 80, y + 10, 20, 60);
      arContext.fill();
      arContext.stroke();

      arContext.rect(x + 60, y + 10, 20, 60);
      arContext.fill();
      arContext.stroke();
    }

    function drawDress(x, y) {
      arContext.beginPath();
      // วาดรูปเดรส
      arContext.rect(x - 70, y, 140, 180);
      arContext.fill();
      arContext.stroke();

      // วาดแขน
      arContext.rect(x - 90, y + 10, 20, 40);
      arContext.fill();
      arContext.stroke();

      arContext.rect(x + 70, y + 10, 20, 40);
      arContext.fill();
      arContext.stroke();
    }

    function drawPants(x, y) {
      arContext.beginPath();
      // วาดกางเกง
      arContext.rect(x - 50, y, 100, 120);
      arContext.fill();
      arContext.stroke();

      // แบ่งขา
      arContext.beginPath();
      arContext.moveTo(x, y);
      arContext.lineTo(x, y + 120);
      arContext.stroke();
    }

    function drawSkirt(x, y) {
      arContext.beginPath();
      // วาดกระโปรง
      arContext.moveTo(x - 40, y);
      arContext.lineTo(x + 40, y);
      arContext.lineTo(x + 60, y + 80);
      arContext.lineTo(x - 60, y + 80);
      arContext.closePath();
      arContext.fill();
      arContext.stroke();
    }

    function drawProductInfo() {
      arContext.fillStyle = 'rgba(0, 0, 0, 0.7)';
      arContext.fillRect(10, 10, 200, 80);

      arContext.fillStyle = 'white';
      arContext.font = '16px Prompt';
      arContext.fillText(currentARProduct.name, 20, 30);
      arContext.fillText(`${currentARProduct.price.toLocaleString()} บาท`, 20, 50);

      const selectedSize = document.querySelector('.size-option.active')?.textContent || '';
      const selectedColor = document.querySelector('.color-option.active')?.title || '';
      arContext.fillText(`${selectedSize} | ${selectedColor}`, 20, 70);
    }

    function updateAROverlay(color, size) {
      // อัพเดท AR overlay เมื่อเปลี่ยนสีหรือไซส์
      // ฟังก์ชันนี้จะถูกเรียกเมื่อผู้ใช้เลือกสีหรือไซส์ใหม่
    }

    function captureARPhoto() {
      const video = document.getElementById('arVideo');
      const canvas = document.createElement('canvas');
      const ctx = canvas.getContext('2d');

      canvas.width = video.videoWidth;
      canvas.height = video.videoHeight;

      // วาดภาพจากวิดีโอ
      ctx.drawImage(video, 0, 0);

      // วาด AR overlay
      ctx.drawImage(arCanvas, 0, 0);

      // แปลงเป็น blob และดาวน์โหลด
      canvas.toBlob(blob => {
        const url = URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.href = url;
        a.download = `ar-tryeon-${currentARProduct.name}-${Date.now()}.png`;
        a.click();
        URL.revokeObjectURL(url);
      });

      // แสดงข้อความสำเร็จ
      showARMessage('ถ่ายภาพสำเร็จ! กำลังดาวน์โหลด...');
    }

    function shareARPhoto() {
      const video = document.getElementById('arVideo');
      const canvas = document.createElement('canvas');
      const ctx = canvas.getContext('2d');

      canvas.width = video.videoWidth;
      canvas.height = video.videoHeight;

      ctx.drawImage(video, 0, 0);
      ctx.drawImage(arCanvas, 0, 0);

      canvas.toBlob(blob => {
        if (navigator.share) {
          const file = new File([blob], 'ar-tryeon.png', {type: 'image/png'});
          navigator.share({
            title: `ทดลองใส่ ${currentARProduct.name}`,
            text: `ดูฉันในชุด ${currentARProduct.name} จาก Fashion Store`,
            files: [file]
          });
        } else {
          // Fallback สำหรับเบราว์เซอร์ที่ไม่รองรับ Web Share API
          const url = URL.createObjectURL(blob);
          const shareText = `ดูฉันในชุด ${currentARProduct.name} จาก Fashion Store`;

          if (navigator.clipboard) {
            navigator.clipboard.writeText(shareText);
            showARMessage('คัดลอกข้อความแชร์แล้ว!');
          }

          // เปิดหน้าต่างใหม่สำหรับแชร์
          window.open(`https://twitter.com/intent/tweet?text=${encodeURIComponent(shareText)}`, '_blank');
        }
      });
    }

    function addToCartFromAR() {
      const selectedSize = document.querySelector('.size-option.active')?.textContent;
      const selectedColor = document.querySelector('.color-option.active')?.title;

      if (!selectedSize || !selectedColor) {
        showARMessage('กรุณาเลือกไซส์และสีก่อนเพิ่มไปยังตะกร้า');
        return;
      }

      const cartItemId = `${currentARProduct.id}-${selectedSize}-${selectedColor}`;
      const existingItem = cart.find(item => item.cartItemId === cartItemId);

      if (existingItem) {
        existingItem.quantity += 1;
      } else {
        cart.push({
          cartItemId,
          ...currentARProduct,
          selectedSize,
          selectedColor,
          quantity: 1
        });
      }

      updateCartUI();
      showARMessage('เพิ่มสินค้าไปยังตะกร้าแล้ว!');
    }

    function showARMessage(message) {
      // สร้าง toast message
      const toast = document.createElement('div');
      toast.style.cssText = `
                position: fixed;
                bottom: 20px;
                right: 20px;
                background: #2ecc71;
                color: white;
                padding: 15px 20px;
                border-radius: 10px;
                z-index: 4000;
                font-weight: 600;
                box-shadow: 0 5px 15px rgba(0,0,0,0.3);
            `;
      toast.textContent = message;
      document.body.appendChild(toast);

      setTimeout(() => {
        document.body.removeChild(toast);
      }, 3000);
    }

    function closeARTryOn() {
      document.getElementById('arModal').style.display = 'none';

      // ปิดกล้อง
      if (arStream) {
        arStream.getTracks().forEach(track => track.stop());
        arStream = null;
      }

      currentARProduct = null;
    }
  </script>
</body>

</html>