File manager - Edit - /var/www/sme-os.tech.cm.in.th/index.php
Back
<?php header('Content-Type: text/html; charset=utf-8'); /** * SME Restaurant OS - B2B Merchant Landing Page Portal * Modern Glassmorphism Dual Theme Architecture */ $plans = [ ['id'=>1,'name'=>'Starter Package','price'=>490,'subtitle'=>'เหมาะกับร้านขนาดเล็ก','trial_days'=>30,'color'=>'#10B981'], ['id'=>2,'name'=>'Standard Package','price'=>990,'subtitle'=>'เหมาะกับร้านหมูกระทะ/ชาบู','highlight'=>true,'trial_days'=>30,'color'=>'#FF6B00'], ['id'=>3,'name'=>'Premium Package','price'=>1590,'subtitle'=>'ร้านอาหารเต็มรูปแบบ','trial_days'=>30,'color'=>'#10B981'], ]; ?> <!DOCTYPE html> <html lang="th" data-theme="dark"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content="SME Restaurant OS - ระบบบริหารจัดการและสั่งอาหารออนไลน์อัจฉริยะ สั่งง่าย ไม่ต้องโหลดแอปฯ เสิร์ฟไว รู้เวลารอจริง ราคาสบายกระเป๋าสำหรับ SMEs"> <title>SME Restaurant OS - ระบบบริหารจัดการและสั่งอาหารออนไลน์อัจฉริยะ</title> <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=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Kanit:wght@300;400;500;600;700;800&display=swap" rel="stylesheet"> <link rel="stylesheet" href="style.css?v=<?php echo time(); ?>"> <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script> <script src="js/nav_sound_swal.js?v=<?php echo time(); ?>"></script> <!-- Zero-Flicker Theme Bootstrap --> <script> (function() { var t = localStorage.getItem('cmtc_theme') || 'dark'; document.documentElement.setAttribute('data-theme', t); if (t === 'light') { document.documentElement.classList.add('light-theme'); } })(); </script> <style> /* ============================== INLINE CRITICAL NAVBAR STYLES ============================== */ .portal-navbar { position: fixed; top: 0; left: 0; right: 0; height: 76px; background: var(--bg-navbar, rgba(8, 12, 22, 0.88)); backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%); border-bottom: 1px solid var(--border-glass, rgba(255,255,255,0.08)); z-index: 9999; transition: all 0.3s ease; } .nav-inner { height: 76px; max-width: 1320px; margin: 0 auto; padding: 0 32px; display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 20px; } /* LEFT: Brand */ .nav-brand { display: flex; flex-direction: row; align-items: center; gap: 14px; text-decoration: none; flex-shrink: 0; min-width: 0; } .brand-logo-wrap { position: relative; display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 12px; background: linear-gradient(135deg, rgba(255, 107, 0, 0.15), rgba(0, 229, 255, 0.1)); border: 1px solid rgba(255, 255, 255, 0.12); padding: 3px; overflow: hidden; box-shadow: 0 4px 15px rgba(0,0,0,0.25); } .brand-logo { width: 100%; height: 100%; object-fit: contain; border-radius: 9px; } .brand-name { font-size: 1.22rem; font-weight: 800; white-space: nowrap; color: var(--text-primary, #F8FAFC); display: flex; flex-direction: column; line-height: 1.15; letter-spacing: -0.2px; } .brand-name .brand-highlight { background: linear-gradient(135deg, #FF6B00 0%, #FF9500 50%, #FFC107 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .brand-name .brand-os { color: var(--accent-cyan, #00E5FF); font-weight: 900; padding: 1px 6px; background: rgba(0, 229, 255, 0.12); border-radius: 6px; border: 1px solid rgba(0, 229, 255, 0.25); font-size: 0.82rem; margin-left: 4px; display: inline-block; vertical-align: middle; -webkit-text-fill-color: var(--accent-cyan, #00E5FF); } .brand-tagline { font-size: 0.65rem; font-weight: 700; color: var(--text-muted, #94A3B8); letter-spacing: 1.5px; margin-top: 3px; text-transform: uppercase; } /* CENTER: Navigation Links */ .nav-links { display: flex; flex-direction: row; align-items: center; gap: 28px; list-style: none; margin: 0; padding: 0; flex: 1; justify-content: center; } .nav-links a { font-size: 0.94rem; font-weight: 600; color: var(--text-secondary, #94A3B8); text-decoration: none; padding: 8px 4px; position: relative; transition: color 0.25s ease; white-space: nowrap; } .nav-links a::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0%; height: 2px; background: linear-gradient(90deg, #FF6B00, #00E5FF); transition: width 0.25s ease; border-radius: 2px; } .nav-links a:hover { color: var(--text-primary, #FFFFFF); } .nav-links a:hover::after { width: 100%; } /* RIGHT: Action Buttons */ .nav-actions { display: flex; flex-direction: row; align-items: center; gap: 12px; flex-shrink: 0; } .btn-sound { padding: 8px 14px; border-radius: 30px; font-size: 0.8rem; font-weight: 700; cursor: pointer; border: 1px solid var(--border-glass); background: rgba(255, 255, 255, 0.05); color: var(--text-secondary); display: inline-flex; align-items: center; gap: 6px; transition: all 0.2s; } .btn-signin { display: inline-flex; flex-direction: row; align-items: center; gap: 8px; padding: 10px 22px; background: linear-gradient(135deg, #FF6B00, #FF8800); color: #fff; font-size: 0.9rem; font-weight: 700; border-radius: 30px; text-decoration: none; white-space: nowrap; transition: all 0.25s ease; box-shadow: 0 4px 20px rgba(255, 107, 0, 0.35); border: 1px solid rgba(255, 255, 255, 0.15); } .btn-signin:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(255, 107, 0, 0.55); } .btn-theme { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--border-glass, rgba(255,255,255,0.12)); background: rgba(255, 255, 255, 0.04); color: var(--text-primary, #F8FAFC); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.25s ease; } .btn-theme:hover { border-color: #FF6B00; color: #FF6B00; background: rgba(255, 107, 0, 0.1); transform: rotate(15deg); } /* Hamburger Toggle Button */ .btn-hamburger { display: none; width: 42px; height: 42px; border-radius: 10px; border: 1px solid var(--border-glass, rgba(255,255,255,0.12)); background: rgba(255, 255, 255, 0.04); color: var(--text-primary, #F8FAFC); cursor: pointer; align-items: center; justify-content: center; flex-direction: column; gap: 5px; padding: 0; transition: all 0.25s ease; z-index: 10001; } .btn-hamburger:hover { border-color: #FF6B00; background: rgba(255, 107, 0, 0.1); } .btn-hamburger span { display: block; width: 20px; height: 2px; background-color: currentColor; border-radius: 2px; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); transform-origin: center; } .btn-hamburger.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .btn-hamburger.active span:nth-child(2) { opacity: 0; transform: scale(0); } .btn-hamburger.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* Mobile Drawer Menu */ .mobile-nav-backdrop { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.7); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); z-index: 9998; opacity: 0; visibility: hidden; transition: all 0.35s ease; } .mobile-nav-backdrop.active { opacity: 1; visibility: visible; } .mobile-nav-drawer { position: fixed; top: 76px; right: 0; bottom: 0; width: min(320px, 85vw); background: var(--bg-navbar, #0f172a); border-left: 1px solid var(--border-glass, rgba(255,255,255,0.1)); box-shadow: -10px 0 30px rgba(0,0,0,0.5); z-index: 9999; transform: translateX(100%); transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1); display: flex; flex-direction: column; padding: 24px 20px; overflow-y: auto; } .mobile-nav-drawer.active { transform: translateX(0); } .mobile-nav-links { list-style: none; padding: 0; margin: 0 0 24px 0; display: flex; flex-direction: column; gap: 10px; } .mobile-nav-links a { display: flex; align-items: center; gap: 12px; padding: 12px 16px; color: var(--text-primary, #F8FAFC); font-size: 1.05rem; font-weight: 600; text-decoration: none; border-radius: 12px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.05); transition: all 0.2s ease; } .mobile-nav-links a:hover, .mobile-nav-links a:active { background: rgba(255, 107, 0, 0.15); border-color: rgba(255, 107, 0, 0.3); color: #FF6B00; transform: translateX(4px); } .mobile-nav-footer { margin-top: auto; display: flex; flex-direction: column; gap: 12px; padding-top: 16px; border-top: 1px solid var(--border-glass, rgba(255,255,255,0.1)); } .mobile-nav-footer .btn-sound { display: flex; justify-content: center; width: 100%; padding: 10px 16px; } /* Responsive Breakpoints */ @media (max-width: 900px) { .nav-links { display: none; } .btn-sound { display: none; } .btn-hamburger { display: flex; } } @media (max-width: 600px) { .portal-navbar { height: 62px; } .nav-inner { height: 62px; padding: 0 12px; } .brand-logo-wrap { width: 36px; height: 36px; border-radius: 8px; } .brand-name { font-size: 0.95rem; } .brand-name .brand-os { font-size: 0.7rem; padding: 1px 4px; } .brand-tagline { font-size: 0.52rem; letter-spacing: 0.8px; } .btn-signin { padding: 7px 12px; font-size: 0.8rem; } .btn-signin span.label-text { display: none; } .btn-theme { width: 34px; height: 34px; } .btn-hamburger { width: 34px; height: 34px; } .mobile-nav-drawer { top: 62px; } } @media (max-width: 400px) { .nav-inner { padding: 0 8px; gap: 6px; } .brand-name { font-size: 0.88rem; } .nav-actions { gap: 4px; } .btn-signin { padding: 6px 8px; } } .kitchen-banner-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 40px; align-items: center; } @media (max-width: 900px) { .kitchen-banner-grid { grid-template-columns: 1fr; gap: 20px; } } </style> </head> <body> <!-- ============================================================ NAVIGATION BAR 3-Part Flexbox: [Brand LEFT] [Links CENTER] [Actions RIGHT] ============================================================ --> <nav class="portal-navbar" role="navigation" aria-label="Main Navigation"> <div class="nav-inner"> <!-- LEFT: Logo + Brand Name & Tagline --> <a href="index.php" class="nav-brand" title="SME Restaurant OS - ระบบสั่งอาหารและจัดการร้านอาหารอัจฉริยะ"> <div class="brand-logo-wrap"> <img src="images/logo.png?v=<?php echo time(); ?>" class="brand-logo" alt="SME Restaurant OS Logo"> </div> <div class="brand-name"> <div><span class="brand-highlight">SME Restaurant</span> <span class="brand-os">OS</span></div> <div class="brand-tagline">INNOVATE • CONNECT • SOLVE</div> </div> </a> <!-- CENTER: Navigation Menu Links (Desktop) --> <ul class="nav-links"> <li><a href="#features" class="nav-sound-trigger">จุดเด่นระบบ</a></li> <li><a href="#why-us" class="nav-sound-trigger">จุดเด่นเหนือคู่แข่ง</a></li> <li><a href="#pricing" class="nav-sound-trigger">แพ็กเกจราคา</a></li> <li><a href="manual.php" class="nav-sound-trigger" style="color: var(--accent-orange); font-weight: 700;">📖 คู่มือการใช้งาน</a></li> <li><a href="#faq" class="nav-sound-trigger">คำถามที่พบบ่อย</a></li> </ul> <!-- RIGHT: Sign In + Sound Toggle + Theme Toggle + Mobile Hamburger --> <div class="nav-actions"> <button class="btn-sound nav-sound-toggle-btn" onclick="toggleNavSound()" title="เปิด/ปิดเสียงระบบ"> 🔊 เสียง: เปิด </button> <a href="https://pos.cm.in.th/" target="_blank" class="btn-signin" title="เข้าสู่ระบบ SME Restaurant OS"> <!-- SVG Lock Icon --> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"> <rect x="3" y="11" width="18" height="11" rx="2" ry="2"/> <path d="M7 11V7a5 5 0 0 1 10 0v4"/> </svg> <span class="label-text">เข้าสู่ระบบ (Sign In)</span> </a> <button class="btn-theme" id="themeBtn" onclick="toggleTheme()" title="สลับโหมด Light / Dark"> <svg id="themeIcon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/> </svg> </button> <!-- Mobile Hamburger Button --> <button class="btn-hamburger" id="hamburgerBtn" onclick="toggleMobileNav()" aria-label="เปิดเมนูนำทาง" title="เมนู"> <span></span> <span></span> <span></span> </button> </div> </div> </nav> <!-- Mobile Navigation Drawer & Backdrop --> <div class="mobile-nav-backdrop" id="mobileNavBackdrop" onclick="toggleMobileNav(false)"></div> <div class="mobile-nav-drawer" id="mobileNavDrawer"> <ul class="mobile-nav-links"> <li><a href="#features" onclick="toggleMobileNav(false)" class="nav-sound-trigger">✨ จุดเด่นระบบ</a></li> <li><a href="#why-us" onclick="toggleMobileNav(false)" class="nav-sound-trigger">🚀 จุดเด่นเหนือคู่แข่ง</a></li> <li><a href="#pricing" onclick="toggleMobileNav(false)" class="nav-sound-trigger">💎 แพ็กเกจราคา</a></li> <li><a href="manual.php" onclick="toggleMobileNav(false)" class="nav-sound-trigger" style="color: var(--accent-orange); font-weight: 700; background: rgba(255, 107, 0, 0.1);">📖 คู่มือการใช้งาน (Manual)</a></li> <li><a href="#faq" onclick="toggleMobileNav(false)" class="nav-sound-trigger">❓ คำถามที่พบบ่อย</a></li> </ul> <div class="mobile-nav-footer"> <button class="btn-sound nav-sound-toggle-btn" onclick="toggleNavSound()" title="เปิด/ปิดเสียงระบบ"> 🔊 เสียง: เปิด </button> </div> </div> <!-- ============================================================ HERO SECTION ============================================================ --> <section class="portal-section hero-section"> <div class="container hero-wrapper"> <!-- Hero Content Left --> <div class="hero-content"> <div class="hero-badge">SME Restaurant OS • นวัตกรรมระบบสั่งและจัดการร้านอาหารอัจฉริยะ</div> <h1 class="hero-title"> ยกระดับร้านอาหารของคุณสู่ยุคดิจิทัล<br> ด้วย <span class="glow-text-orange">SME Restaurant OS</span> ระบบสั่งอาหารอัจฉริยะ </h1> <p class="hero-description"> สั่งง่าย ไม่ต้องโหลดแอปฯ | เสิร์ฟไว รู้เวลารอจริง | จัดการครัวและโต๊ะครบวงจร | ราคาสบายกระเป๋าสำหรับ SMEs </p> <div class="hero-cta-group"> <a href="#pricing" class="btn-cta-primary">ทดลองใช้งานฟรี 30 วัน</a> <a href="https://pos.cm.in.th/" target="_blank" class="btn-cta-secondary">เข้าสู่ระบบ (Sign In)</a> </div> </div> <!-- Hero Showcase Card Right (Interactive Live Demo Experience) --> <div class="hero-showcase-card"> <!-- Authentic System Tablet Frame --> <div class="tablet-mockup-frame"> <div class="tablet-camera-notch"></div> <img src="images/real_system_dashboard.png" class="tablet-screen-img" alt="SME Restaurant OS Real System Dashboard"> </div> <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom: 14px;"> <div style="font-weight: 800; font-size: 1.15rem; color: var(--accent-orange);"> 🖥️ ระบบจัดการร้านค้าจริง (Live Dashboard) </div> <span class="adv-badge" style="margin-bottom:0; font-size:0.75rem; padding:3px 10px; background:rgba(16,185,129,0.15); border-color:#10B981; color:#10B981;"> ● Active System </span> </div> <p style="font-size: 0.92rem; color: var(--text-secondary); line-height: 1.6; margin-bottom: 18px;"> หน้าจอใช้งานจริงของ <strong>SME Restaurant OS</strong>: แผงควบคุม, จอรับออเดอร์ครัว (KDS), ย้ายโต๊ะอาหาร และระบบสรุปยอดขายครบวงจร </p> <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 18px;"> <div style="background: rgba(0,0,0,0.25); border: 1px solid var(--border-glass); border-radius: 12px; padding: 14px; text-align: left;"> <div style="display:flex; align-items:center; gap:8px; margin-bottom:4px;"> <span style="font-size:1.2rem;">📱</span> <div style="font-size: 0.85rem; font-weight: 800; color:var(--text-primary);">QR Order</div> </div> <div style="font-size: 0.78rem; color: var(--text-muted);">ลูกค้าสั่งผ่านเว็บ ไม่ต้องโหลดแอป</div> </div> <div style="background: rgba(0,0,0,0.25); border: 1px solid var(--border-glass); border-radius: 12px; padding: 14px; text-align: left;"> <div style="display:flex; align-items:center; gap:8px; margin-bottom:4px;"> <span style="font-size:1.2rem;">⏱️</span> <div style="font-size: 0.85rem; font-weight: 800; color:var(--accent-orange);">12-15 นาที</div> </div> <div style="font-size: 0.78rem; color: var(--text-muted);">เวลารอประเมินอัตโนมัติ</div> </div> </div> <div style="background: linear-gradient(135deg, rgba(255,107,0,0.12), rgba(0,229,255,0.08)); border: 1px solid var(--border-glass); border-radius: 14px; padding: 14px; display:flex; align-items:center; justify-content:space-between;"> <div> <div style="font-size: 0.84rem; font-weight: 700; color: var(--text-primary);">โต๊ะ 08 • สเต็กวากิว & ราเมง</div> <div style="font-size: 0.76rem; color: var(--accent-teal);">สถานะ: กำลังปรุงในห้องครัว (KDS)</div> </div> <a href="#pricing" style="padding: 8px 14px; border-radius: 8px; background: var(--accent-orange); color:#fff; font-size:0.82rem; font-weight:700; text-decoration:none;">ดูแพ็กเกจ</a> </div> </div> </div> </section> <!-- ============================================================ KEY FEATURES GRID (4 GLASSMORPHIC CARDS) ============================================================ --> <section id="features" class="portal-section"> <div class="container"> <div class="section-header"> <h2 class="section-title">4 จุดเด่นหลักนวัตกรรม <span class="glow-text-orange">SME Restaurant OS</span></h2> <p class="section-subtitle">ยกระดับการบริหารร้านอาหารด้วยระบบดิจิทัลสุดล้ำ ออกแบบเพื่อตอบโจทย์ผู้ประกอบการยุคใหม่</p> </div> <div class="features-grid"> <!-- Card 1 --> <div class="feature-card" onclick="openCardDetailModal('qr-no-app')"> <div class="feature-icon-wrapper"> <!-- Smartphone QR Icon --> <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"> <rect x="5" y="2" width="14" height="20" rx="2" ry="2"></rect> <line x1="12" y1="18" x2="12.01" y2="18"></line> <path d="M9 6h6"></path> <path d="M9 10h6"></path> </svg> </div> <h3>สั่งง่าย ไม่ต้องโหลดแอปฯ (No App Required)</h3> <p>ลูกค้าสแกน QR Code ประจำโต๊ะ แล้วสั่งอาหารผ่าน Web Browser บนสมาร์ตโฟนได้ทันที สะดวกรวดเร็ว</p> <div class="card-expand-hint">คลิกดูรายละเอียดเชิงลึก →</div> </div> <!-- Card 2 --> <div class="feature-card" onclick="openCardDetailModal('lead-time')"> <div class="feature-icon-wrapper"> <!-- Real-time Timer / Clock Icon --> <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"> <circle cx="12" cy="12" r="10"></circle> <polyline points="12 6 12 12 16 14"></polyline> <path d="M16 2l4 4"></path> </svg> </div> <h3>ระบบคำนวณเวลารออาหารจริง (Real-time Lead Time Module)</h3> <p>ฟีเจอร์หนึ่งเดียวในไทยที่คำนวณและแจ้งเวลารออาหารให้ลูกค้าเห็นแบบเรียลไทม์ ลดความหงุดหงิดจากการรอคอย</p> <div class="card-expand-hint">คลิกดูรายละเอียดเชิงลึก →</div> </div> <!-- Card 3 --> <div class="feature-card" onclick="openCardDetailModal('kitchen-queue')"> <div class="feature-icon-wrapper"> <!-- Kitchen KDS / Chef Flame Icon --> <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"> <path d="M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5z"></path> </svg> </div> <h3>ระบบคิวครัว & จัดการโต๊ะอัจฉริยะ (All-in-One Solution)</h3> <p>ผสานการทำงานหน้าร้าน ห้องครัว และระบบชำระเงิน PromptPay QR Code ไร้เงินสดครบวงจร</p> <div class="card-expand-hint">คลิกดูรายละเอียดเชิงลึก →</div> </div> <!-- Card 4 --> <div class="feature-card" onclick="openCardDetailModal('zero-error')"> <div class="feature-icon-wrapper"> <!-- Target Accuracy 100% Icon --> <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"> <circle cx="12" cy="12" r="10"></circle> <circle cx="12" cy="12" r="6"></circle> <circle cx="12" cy="12" r="2"></circle> </svg> </div> <h3>ลดข้อผิดพลาด 100%</h3> <p>ตัดปัญหาการจดมือ ออเดอร์ตกหล่น หรือการเสิร์ฟผิดโต๊ะอย่างสิ้นเชิงด้วยระบบจัดคิวอัตโนมัติ</p> <div class="card-expand-hint">คลิกดูรายละเอียดเชิงลึก →</div> </div> </div> </div> </section> <!-- ============================================================ WHY CHOOSE US / COMPETITOR ADVANTAGES SECTION ============================================================ --> <section id="why-us" class="portal-section"> <div class="container"> <div class="section-header"> <h2 class="section-title">ทำไมต้องเลือก <span class="glow-text-orange">SME Restaurant OS</span>?</h2> <p class="section-subtitle">ข้อดีและจุดเด่นที่เหนือกว่าระบบ POS รายใหญ่ทั่วไปในท้องตลาด</p> </div> <div class="comparison-grid"> <!-- Advantage 1 --> <div class="advantage-card" onclick="openCardDetailModal('adv-sme')"> <div class="adv-badge"> <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><circle cx="12" cy="12" r="10"/><path d="M16 8h-6a2 2 0 1 0 0 4h4a2 2 0 1 1 0 4H8"/><line x1="12" y1="6" x2="12" y2="18"/></svg> ราคาสบายกระเป๋า </div> <h3>ราคามิตรภาพสำหรับ SMEs</h3> <p>เริ่มต้นเพียง 490 บาท/เดือน ต่างจากระบบ POS รายใหญ่ที่มีค่าบริการแพงเกินจำเป็น ช่วยประหยัดงบประมาณและไม่มีค่าซ่อนแอบ</p> <div class="card-expand-hint">คลิกดูรายละเอียดเชิงลึก →</div> </div> <!-- Advantage 2 (Highlight) --> <div class="advantage-card highlight" onclick="openCardDetailModal('adv-leadtime')"> <div class="adv-badge unique"> <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg> ฟีเจอร์หนึ่งเดียวในไทย </div> <h3>มีระบบประเมินเวลาครัว (Lead Time)</h3> <p>คู่แข่งทั่วไปรับได้แค่ออเดอร์ แต่เราช่วยประเมินความเร็วครัวแจ้งลูกค้าแบบเรียลไทม์ เพิ่มประสบการณ์ที่ดีและความประทับใจ</p> <div class="card-expand-hint">คลิกดูรายละเอียดเชิงลึก →</div> </div> <!-- Advantage 3 --> <div class="advantage-card" onclick="openCardDetailModal('adv-simple')"> <div class="adv-badge"> <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z"/><path d="m12 15-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z"/></svg> ใช้งานได้ทันที </div> <h3>เรียบง่าย ไม่ซับซ้อน</h3> <p>พนักงานและเจ้าของร้านใช้งานได้ทันที ไม่ต้องผ่านการฝึกอบรมที่ยุ่งยาก ทำงานผ่านเว็บเบราว์เซอร์ 100% บนทุกอุปกรณ์</p> <div class="card-expand-hint">คลิกดูรายละเอียดเชิงลึก →</div> </div> </div> </div> </section> <!-- ============================================================ KITCHEN & RESTAURANT ATMOSPHERE SHOWCASE BANNER ============================================================ --> <section class="portal-section kitchen-banner-section" style="padding: 50px 0;"> <div class="container"> <div class="kitchen-banner-grid" style="background: var(--bg-card); border: 1px solid var(--border-glass); border-radius: 24px; padding: clamp(20px, 4vw, 40px); backdrop-filter: blur(24px) saturate(160%); -webkit-backdrop-filter: blur(24px) saturate(160%); box-shadow: var(--shadow-card);"> <div> <div class="hero-badge" style="margin-bottom: 14px;">🔥 ยกระดับมาตรฐานห้องครัวยุคใหม่</div> <h3 style="font-size: 1.85rem; font-weight: 800; color: var(--text-primary); margin-bottom: 16px; line-height: 1.3;"> ผสานรสชาติระดับพรีเมียม <br>กับ <span class="glow-text-orange">ความเร็วที่แม่นยำ</span> </h3> <p style="color: var(--text-secondary); font-size: 0.95rem; line-height: 1.7; margin-bottom: 24px;"> จัดการทุกออเดอร์ในครัวได้แบบไร้รอยต่อ เชฟปรุงทันใจ ลูกค้าทราบเวลารอจริงแบบนาทีต่อนาที ยกระดับร้านอาหารของคุณสู่มาตรฐานมืออาชีพ </p> <div style="display: flex; gap: 20px; flex-wrap: wrap;"> <div style="border-left: 3px solid var(--accent-orange); padding-left: 14px;"> <div style="font-size: 1.4rem; font-weight: 800; color: var(--text-primary);">0%</div> <div style="font-size: 0.8rem; color: var(--text-muted);">ออเดอร์ตกหล่น</div> </div> <div style="border-left: 3px solid var(--accent-cyan); padding-left: 14px;"> <div style="font-size: 1.4rem; font-weight: 800; color: var(--text-primary);">< 3 นาที</div> <div style="font-size: 0.8rem; color: var(--text-muted);">เริ่มเปิดโต๊ะพร้อมรับออเดอร์</div> </div> <div style="border-left: 3px solid var(--accent-teal); padding-left: 14px;"> <div style="font-size: 1.4rem; font-weight: 800; color: var(--text-primary);">+35%</div> <div style="font-size: 0.8rem; color: var(--text-muted);">รอบหมุนเวียนโต๊ะอาหาร</div> </div> </div> </div> <div style="position: relative; border-radius: 20px; overflow: hidden; border: 1px solid var(--border-glass); background: #0A0F1D; box-shadow: 0 16px 48px rgba(0,0,0,0.6), 0 0 30px rgba(0, 229, 255, 0.15);"> <img src="images/real_kds_screen.png" alt="จอรับออเดอร์ครัว KDS SME Restaurant OS" style="width: 100%; height: auto; max-height: 330px; object-fit: contain; background:#0B1120; display: block;"> <div style="position: absolute; bottom: 14px; right: 14px; background: rgba(0,0,0,0.85); backdrop-filter: blur(10px); padding: 8px 16px; border-radius: 30px; border: 1px solid rgba(0,229,255,0.3); font-size: 0.8rem; font-weight: 700; color: #fff; display: flex; align-items: center; gap: 6px;"> <span style="color: var(--accent-cyan);">●</span> หน้าจอห้องครัวจริง (KDS Live Screen) </div> </div> </div> </div> </section> <!-- ============================================================ PRICING TIERS SECTION (3 PACKAGES) ============================================================ --> <section id="pricing" class="portal-section"> <div class="container"> <div class="section-header"> <h2 class="section-title">อัตราค่าบริการและ <span class="glow-text-orange">แพ็กเกจ SME Restaurant OS</span></h2> <p class="section-subtitle">เลือกแผนบริการที่ตอบโจทย์ขนาดร้านอาหารของคุณ ทดลองใช้งานฟรี 30 วัน ทุกแพ็กเกจ</p> </div> <div class="pricing-grid"> <!-- Starter Package --> <div class="pricing-card" onclick="openCardDetailModal('starter-pkg')"> <div class="pricing-header"> <div class="pricing-title">Starter Package</div> <div style="font-size: 0.85rem; color: var(--text-muted); margin-bottom: 4px;">เหมาะกับร้านขนาดเล็ก</div> <div class="pricing-price">฿490 <span>/ เดือน</span></div> <div class="pricing-trial-tag" style="background:rgba(16,185,129,.15);border:1px solid #10B981;color:#10B981;">ทดลองใช้งานฟรี 30 วัน</div> </div> <ul class="pricing-features"> <li> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#10B981" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg> สั่งอาหารผ่าน QR Code ไม่ต้องลงแอปฯ </li> <li> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#10B981" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg> ระบบจัดการรายการเมนูและราคาพื้นฐาน </li> <li> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#10B981" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg> รองรับอุปกรณ์สมาร์ตโฟนและแท็บเล็ต </li> </ul> <div class="card-expand-hint" style="margin-bottom:12px;">คลิกดูฟีเจอร์ฉบับเต็ม →</div> <button onclick="event.stopPropagation(); openSubModal('Starter Package','490')" class="btn-pricing-select secondary">เลือกแพ็กเกจ Starter</button> </div> <!-- Standard Package (HIGHLIGHT MOST POPULAR) --> <div class="pricing-card featured" onclick="openCardDetailModal('standard-pkg')"> <div class="pricing-badge">🔥 ยอดนิยมสูงสุด</div> <div class="pricing-header"> <div class="pricing-title" style="color:var(--accent-orange);">Standard Package</div> <div style="font-size: 0.85rem; color: var(--accent-orange); margin-bottom: 4px; font-weight:600;">เหมาะกับร้านหมูกระทะ / ชาบู</div> <div class="pricing-price">฿990 <span>/ เดือน</span></div> <div class="pricing-trial-tag" style="background:rgba(255,107,0,.15);border:1px solid #FF6B00;color:#FF6B00;">ทดลองใช้งานฟรี 30 วัน</div> </div> <ul class="pricing-features"> <li> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#10B981" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg> สั่งอาหารผ่าน QR Code ไม่ต้องโหลดแอปฯ </li> <li> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#10B981" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg> ระบบจัดการโต๊ะอาหารอัจฉริยะ </li> <li> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#10B981" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg> โมดูลจัดการคิวห้องครัวเรียลไทม์ </li> <li> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#10B981" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg> ระบบรับชำระเงิน PromptPay QR Code </li> </ul> <div class="card-expand-hint" style="margin-bottom:12px;">คลิกดูฟีเจอร์ฉบับเต็ม →</div> <button onclick="event.stopPropagation(); openSubModal('Standard Package','990')" class="btn-pricing-select primary">เลือกแพ็กเกจ Standard</button> </div> <!-- Premium Package --> <div class="pricing-card" onclick="openCardDetailModal('premium-pkg')"> <div class="pricing-header"> <div class="pricing-title">Premium Package</div> <div style="font-size: 0.85rem; color: var(--text-muted); margin-bottom: 4px;">ร้านอาหารเต็มรูปแบบ</div> <div class="pricing-price">฿1,590 <span>/ เดือน</span></div> <div class="pricing-trial-tag" style="background:rgba(16,185,129,.15);border:1px solid #10B981;color:#10B981;">ทดลองใช้งานฟรี 30 วัน</div> </div> <ul class="pricing-features"> <li> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#10B981" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg> ฟังก์ชันทั้งหมดของ SME Restaurant OS ครบวงจร </li> <li> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#10B981" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg> โมดูลคำนวณเวลารออาหารจริง (Lead Time) </li> <li> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#10B981" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg> ระบบรายงาน Dashboard และวิเคราะห์ยอดขายหลังบ้าน </li> <li> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#10B981" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg> ทีมงานดูแลและช่วยเหลือตลอด 24 ชั่วโมง </li> </ul> <div class="card-expand-hint" style="margin-bottom:12px;">คลิกดูฟีเจอร์ฉบับเต็ม →</div> <button onclick="event.stopPropagation(); openSubModal('Premium Package','1590')" class="btn-pricing-select secondary">เลือกแพ็กเกจ Premium</button> </div> </div> </div> </section> <!-- ============================================================ FAQ SECTION ============================================================ --> <section id="faq" class="portal-section"> <div class="container"> <div class="section-header"> <h2 class="section-title">คำถามที่พบบ่อยสำหรับร้านค้า</h2> <p class="section-subtitle">คำตอบสำหรับการเตรียมความพร้อมและการสมัครใช้งานระบบ</p> </div> <div class="faq-accordion"> <div class="faq-item"> <div class="faq-header" onclick="toggleFaq(this)"> <span>ต้องซื้อฮาร์ดแวร์หรือตู้คีออสเพิ่มไหม?</span> <span class="faq-icon">+</span> </div> <div class="faq-body"> ไม่ต้องซื้ออุปกรณ์ราคาแพงเลยครับ ระบบ SME Restaurant OS ทำงานผ่านเว็บเบราว์เซอร์ 100% สามารถใช้โทรศัพท์มือถือ แท็บเล็ต หรือ iPad ที่ร้านค้ามีอยู่แล้วเปิดดูบอร์ดครัวและจัดการระบบได้ทันที </div> </div> <div class="faq-item"> <div class="faq-header" onclick="toggleFaq(this)"> <span>สามารถแก้ไขราคาและเพิ่มเมนูอาหารเองได้ไหม?</span> <span class="faq-icon">+</span> </div> <div class="faq-body"> สามารถทำได้ตลอดเวลาครับ ร้านค้ามีสิทธิ์ในการเพิ่ม แก้ไข ลบเมนูอาหาร กำหนดราคา อัปโหลดรูปภาพ และกดสลับวัตถุดิบหมดด่วนผ่านระบบหลังบ้านได้เองอย่างอิสระ </div> </div> <div class="faq-item"> <div class="faq-header" onclick="toggleFaq(this)"> <span>สมัครแล้วเริ่มใช้งานได้ทันทีไหม?</span> <span class="faq-icon">+</span> </div> <div class="faq-body"> เริ่มใช้งานได้ทันทีหลังลงทะเบียนครับ ระบบจะสร้าง QR Code ประจำโต๊ะให้อัตโนมัติ สามารถดาวน์โหลดนำไปปริ้นติดโต๊ะอาหาร และตั้งค่าเมนูเริ่มรับออเดอร์ได้ภายในไม่กี่นาที </div> </div> </div> </div> </section> <!-- ============================================================ FOOTER ============================================================ --> <footer class="portal-footer"> <div class="container"> <div style="font-weight: 800; color: var(--accent-gold); margin-bottom: 6px; font-size: 1.15rem; letter-spacing: 0.5px;">SME RESTAURANT OS</div> <div style="color: var(--accent-orange); font-size: 0.82rem; font-weight: 700; letter-spacing: 1.5px; margin-bottom: 8px;">INNOVATE • CONNECT • SOLVE</div> <div style="color: var(--text-secondary); font-size: 0.88rem;">SME Restaurant OS • ระบบบริหารจัดการและสั่งอาหารออนไลน์อัจฉริยะ © <?php echo date('Y'); ?></div> </div> </footer> <!-- ============================================================ REGISTRATION MODAL ============================================================ --> <div class="modal-backdrop" id="subModal" onclick="closeSubModal()"> <div class="modal-card" onclick="event.stopPropagation()"> <button class="modal-close-btn" onclick="closeSubModal()">×</button> <div style="margin-bottom: 20px;"> <div id="subModalTitle" style="font-size: 1.4rem; font-weight: 800; color: var(--accent-orange);">Starter Plan</div> <div id="subModalPrice" style="font-size: 1.1rem; font-weight: 700; color: var(--text-secondary); margin-top: 4px;">฿490 / เดือน</div> </div> <form id="regForm" onsubmit="handleRegSubmit(event)"> <div style="margin-bottom: 12px;"> <label style="display:block; font-size:0.88rem; font-weight:600; margin-bottom:5px; color:var(--text-primary);">ชื่อร้านอาหาร *</label> <input type="text" id="f_shop" required placeholder="เช่น ครัวอร่อยเด็ด" style="width:100%; padding:10px 14px; border-radius:8px; border:1px solid var(--border-glass); background:rgba(0,0,0,0.25); color:var(--text-primary); font-size:0.92rem;"> </div> <div style="margin-bottom: 12px;"> <label style="display:block; font-size:0.88rem; font-weight:600; margin-bottom:5px; color:var(--text-primary);">ชื่อผู้ติดต่อ *</label> <input type="text" id="f_owner" required placeholder="เช่น นายสมชาย ใจดี" style="width:100%; padding:10px 14px; border-radius:8px; border:1px solid var(--border-glass); background:rgba(0,0,0,0.25); color:var(--text-primary); font-size:0.92rem;"> </div> <div style="margin-bottom: 16px;"> <label style="display:block; font-size:0.88rem; font-weight:600; margin-bottom:5px; color:var(--text-primary);">เบอร์โทรศัพท์ *</label> <input type="tel" id="f_phone" required placeholder="081-XXX-XXXX" style="width:100%; padding:10px 14px; border-radius:8px; border:1px solid var(--border-glass); background:rgba(0,0,0,0.25); color:var(--text-primary); font-size:0.92rem;"> </div> <div style="display:flex; gap:10px; margin-top:4px;"> <button type="button" onclick="closeSubModal()" style="flex:1; padding:11px; border-radius:8px; border:1px solid var(--border-glass); background:transparent; color:var(--text-primary); font-weight:600; cursor:pointer;">ยกเลิก</button> <button type="button" id="btnDirectGo" style="flex:1.5; padding:11px; border-radius:8px; border:1px solid var(--accent-cyan); background:rgba(0,229,255,0.1); color:var(--accent-cyan); font-weight:700; cursor:pointer;">ไปสมัครที่ pos.cm.in.th</button> <button type="submit" style="flex:2; padding:11px; border-radius:8px; border:none; background:var(--accent-orange); color:#fff; font-weight:700; cursor:pointer;">ยืนยันสมัครเข้าร่วม</button> </div> </form> </div> </div> <!-- ============================================================ FEATURE & ADVANTAGE CARD DETAIL EXPAND MODAL ============================================================ --> <div class="modal-backdrop" id="cardDetailModal" onclick="closeCardDetailModal()"> <div class="modal-card detail-modal-card" onclick="event.stopPropagation()"> <button class="modal-close-btn" onclick="closeCardDetailModal()">×</button> <div class="detail-modal-header"> <div id="detailModalIcon" class="detail-modal-icon">📱</div> <div> <span id="detailModalBadge" class="adv-badge">ฟีเจอร์เด่น</span> <h2 id="detailModalTitle" class="detail-modal-title">สั่งง่าย ไม่ต้องโหลดแอปฯ</h2> </div> </div> <div id="detailModalBody" class="detail-modal-body"> <!-- Dynamic Content Injected Here --> </div> <div class="detail-modal-footer"> <button onclick="closeCardDetailModal()" class="btn-detail-close">ปิดหน้าต่าง</button> <a href="#pricing" onclick="closeCardDetailModal()" class="btn-detail-cta">ทดลองใช้งานฟรี 30 วัน</a> </div> </div> </div> <!-- ============================================================ JAVASCRIPT (DOMContentLoaded wrapped) ============================================================ --> <script> document.addEventListener('DOMContentLoaded', function() { // --- Theme Management --- var iconMoon = '<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>'; var iconSun = '<circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/>'; function applyThemeIcon() { var t = document.documentElement.getAttribute('data-theme') || 'dark'; var icon = document.getElementById('themeIcon'); if (icon) { icon.innerHTML = (t === 'light') ? iconSun : iconMoon; } } applyThemeIcon(); window.toggleTheme = function() { var current = document.documentElement.getAttribute('data-theme') || 'dark'; var next = (current === 'light') ? 'dark' : 'light'; document.documentElement.setAttribute('data-theme', next); localStorage.setItem('cmtc_theme', next); if (next === 'light') { document.body.classList.add('light-theme'); } else { document.body.classList.remove('light-theme'); } applyThemeIcon(); }; // --- FAQ Accordion --- window.toggleFaq = function(header) { var item = header.parentElement; var isOpen = item.classList.contains('open'); document.querySelectorAll('.faq-item.open').forEach(function(el) { el.classList.remove('open'); }); if (!isOpen) { item.classList.add('open'); } }; // --- Subscription Modal --- var currentPlan = 'Starter'; var currentPrice = '490'; window.openSubModal = function(plan, price) { currentPlan = plan; currentPrice = price; document.getElementById('subModalTitle').textContent = plan + ' Plan'; document.getElementById('subModalPrice').textContent = '\u0e3f' + Number(price).toLocaleString() + ' / \u0e40\u0e14\u0e37\u0e2d\u0e19'; document.getElementById('btnDirectGo').onclick = function() { closeSubModal(); window.open('https://pos.cm.in.th/register?plan=' + encodeURIComponent(plan), '_blank'); }; document.getElementById('subModal').classList.add('open'); }; window.closeSubModal = function() { document.getElementById('subModal').classList.remove('open'); }; // --- Card Detail Expand Modal Data & Logic --- var cardDetailsData = { 'qr-no-app': { icon: '📱', badge: 'นวัตกรรม QR Ordering', title: 'สั่งง่าย ไม่ต้องโหลดแอปฯ (No App Required)', content: '<h4>Workflow การทำงานฝั่งลูกค้า:</h4>' + '<ul>' + '<li><strong>สแกน QR Code ประจำโต๊ะ:</strong> ลูกค้าใช้กล้องสมาร์ตโฟนสแกน Dynamic QR Code บนโต๊ะอาหารเพื่อเข้าสู่หน้าเมนูดิจิทัลบน Web Browser ได้ทันที</li>' + '<li><strong>ผูก Session โต๊ะอัตโนมัติ:</strong> ระบบทำการระบุและผูกหมายเลขโต๊ะอาหารให้อัตโนมัติ ไม่ต้องกรอกรหัส หรือดาวน์โหลดแอปพลิเคชันใดๆ ให้หนักเครื่อง</li>' + '<li><strong>เลือกเมนู & ปรับแต่งตัวเลือก:</strong> ดูรูปเมนูอาหารคมชัด ปรับระดับความเผ็ด เพิ่มท็อปปิ้ง และระบุหมายเหตุพิเศษส่งตรงเข้าห้องครัว</li>' + '<li><strong>รองรับ Dine-in & Takeaway:</strong> เลือกระบุสั่งทานที่ร้านหรือนำกลับบ้าน พร้อมคำนวณราคารวมให้อย่างแม่นยำ</li>' + '</ul>' }, 'lead-time': { icon: '⏱️', badge: 'ฟีเจอร์หนึ่งเดียวในไทย', title: 'ระบบคำนวณเวลารออาหารจริง (Real-time Lead Time Module)', content: '<h4>อัลกอริทึมประเมินเวลาครัวอัจฉริยะ:</h4>' + '<ul>' + '<li><strong>ประเมินจากคิวครัวจริง:</strong> ระบบคำนวณเวลารออาหารโดยวิเคราะห์จากจำนวนออเดอร์สะสมในห้องครัว ความเร็วเฉลี่ยในการปรุงแต่ละเมนู และจำนวนเชฟที่กำลังทำงาน</li>' + '<li><strong>แจ้งเวลารายโต๊ะแบบ Real-time:</strong> แสดงระยะเวลารออาหารโดยประมาณ (เช่น 12 - 15 นาที) บนหน้าจอมือถือของลูกค้าทันทีหลังสั่งอาหาร</li>' + '<li><strong>ลดความหงุดหงิดจากการรอคอย:</strong> ช่วยให้ลูกค้าบริหารเวลาและวางแผนได้ ลดการสอบถามพนักงานว่าอาหารได้หรือยัง สร้างความประทับใจระดับพรีเมียม</li>' + '<li><strong>แจ้งเตือนเมื่ออาหารพร้อมเสิร์ฟ:</strong> ระบบส่งสัญญาณแจ้งเตือนบนมือถือเมื่อเชฟปรุงอาหารเสร็จเรียบร้อย</li>' + '</ul>' }, 'kitchen-queue': { icon: '🍳', badge: 'All-in-One Kitchen & POS', title: 'ระบบคิวครัว & การชำระเงิน (Kitchen Board & PromptPay QR)', content: '<h4>ระบบการทำงานผสานหน้าร้าน ห้องครัว และระบบการชำระเงิน:</h4>' + '<ul>' + '<li><strong>Kitchen Display System (KDS):</strong> หน้าจอห้องครัวแยกหมวดหมู่ต้ม ผัด ทอด ทันทีพร้อมเสียงแจ้งเตือนออเดอร์ใหม่</li>' + '<li><strong>จัดการสถานะออเดอร์:</strong> เชฟและพนักงานแตะสลับสถานะอาหาร (กำลังปรุง / ปรุงเสร็จ / เสิร์ฟแล้ว) ได้อย่างง่ายดาย</li>' + '<li><strong>ระบบผังโต๊ะ 2D อัจฉริยะ:</strong> ผู้ประกอบการเห็นสถานะโต๊ะว่าง โต๊ะกำลังทาน และโต๊ะรอชำระเงินได้แบบเรียลไทม์</li>' + '<li><strong>PromptPay QR Code ไร้เงินสด:</strong> ระบบสร้าง Dynamic PromptPay QR Code ตามยอดเงินจริง ให้ลูกค้าสแกนจ่ายเงินและเช็คสลิปอัตโนมัติ</li>' + '</ul>' }, 'zero-error': { icon: '🎯', badge: 'ความแม่นยำ 100%', title: 'ลดข้อผิดพลาด 100% ด้วยระบบจัดคิวอัตโนมัติ', content: '<h4>ยกระดับการบริการ ไร้ข้อผิดพลาดจุกจิก:</h4>' + '<ul>' + '<li><strong>ตัดปัญหาลายมืออ่านไม่ออก:</strong> ออเดอร์ถูกส่งจากมือถือลูกค้าตรงเข้าจอครัว ตัวหนังสือชัดเจน ไม่ต้องผ่านการจดกระดาษ</li>' + '<li><strong>ป้องกันการเสิร์ฟผิดโต๊ะ:</strong> ทุกรายการสั่งซื้อผูกกับเลขโต๊ะอย่างแม่นยำ พนักงานเสิร์ฟอาหารได้ถูกต้อง 100%</li>' + '<li><strong>อัปเดตวัตถุดิบหมดด่วน (Out of Stock):</strong> ร้านค้ากดปิดเมนูหมดผ่านหลังบ้านได้ทันที รายการนั้นจะซ่อนจากเมนูลูกค้าทันที</li>' + '<li><strong>บันทึกประวัติย้อนหลังครบถ้วน:</strong> ตรวจสอบย้อนหลังได้ทุกออเดอร์ พร้อมระบุเวลาสั่ง เวลาปรุง และเวลาเสิร์ฟอย่างละเอียด</li>' + '</ul>' }, 'adv-sme': { icon: '💰', badge: 'ราคาสบายกระเป๋าสำหรับ SMEs', title: 'ราคามิตรภาพสำหรับ SMEs (เริ่มต้นเพียง 490 บาท/เดือน)', content: '<h4>ความคุ้มค่าที่เหนือกว่าระบบ POS ทั่วไป:</h4>' + '<ul>' + '<li><strong>ไม่ต้องลงทุนซื้อฮาร์ดแวร์แพง:</strong> ไม่ต้องซื้อตู้คีออสหรือเครื่อง POS หลักแสน สามารถใช้อุปกรณ์มือถือ/แท็บเล็ตเดิมที่มีได้เลย</li>' + '<li><strong>ไม่มีค่าธรรมเนียมแอบแฝง:</strong> จ่ายตามจริงตามแพ็กเกจ ไม่มีค่าธรรมเนียมต่อออเดอร์หรือค่าซ่อมบำรุงจุกจิก</li>' + '<li><strong>คุ้มทุนรวดเร็ว:</strong> ช่วยประหยัดค่าจ้างพนักงานจดออเดอร์ 1-2 คน เพิ่มยอดหมุนเวียนโต๊ะ คุ้มทุนตั้งแต่เดือนแรก</li>' + '</ul>' }, 'adv-leadtime': { icon: '⚡', badge: 'นวัตกรรมหนึ่งเดียวในไทย', title: 'มีระบบประเมินเวลาครัว (Lead Time Module)', content: '<h4>ความได้เปรียบเชิงการแข่งขัน:</h4>' + '<ul>' + '<li><strong>คู่แข่งทั่วไปในท้องตลาด:</strong> ทำได้เพียงรับออเดอร์ แต่ไม่สามารถบอกเวลารออาหารให้ลูกค้าทราบได้</li>' + '<li><strong>SME Restaurant OS:</strong> คำนวณความเร็วของห้องครัวและแจ้งเวลารอจริงแบบ Dynamic สร้างความเหนือชั้นให้ร้านค้าของคุณ</li>' + '<li><strong>เพิ่มประสบการณ์ที่ดีให้ลูกค้า:</strong> ลูกค้ารู้เวลารอจริง ไม่รู้สึกโดนทอดทิ้ง เพิ่มความพึงพอใจในการใช้บริการ</li>' + '</ul>' }, 'adv-simple': { icon: '🚀', badge: 'เรียบง่าย ไม่ซับซ้อน', title: 'ใช้งานง่ายทันที ไม่ต้องผ่านการฝึกอบรมที่ยุ่งยาก', content: '<h4>ออกแบบตามหลัก UX/UI สำหรับคนไทย:</h4>' + '<ul>' + '<li><strong>พนักงานเรียนรู้ได้ใน 5 นาที:</strong> เมนูภาษาไทย 100% ปุ่มกดขนาดใหญ่ ไอคอนเข้าใจง่าย ไม่ต้องมีความรู้คอมพิวเตอร์</li>' + '<li><strong>ระบบ Cloud บน Web Browser:</strong> ไม่ต้องติดตั้งโปรแกรม เปิดใช้งานผ่าน Chrome, Safari, Edge ได้ทันที</li>' + '<li><strong>อัปเดตฟังก์ชันใหม่ให้อัตโนมัติ:</strong> ระบบได้รับการพัฒนาและอัปเดตฟีเจอร์ใหม่ๆ ฟรีบนระบบ Cloud</li>' + '</ul>' }, 'starter-pkg': { icon: '🌱', badge: 'Starter Package • ฿490/เดือน', title: 'รายละเอียดเชิงลึก Starter Package', content: '<h4>แพ็กเกจเริ่มต้นสำหรับร้านค้าขนาดเล็ก:</h4>' + '<ul>' + '<li><strong>ระบบสั่งอาหารผ่าน QR Code:</strong> รองรับสูงสุด 10 โต๊ะอาหาร ลูกค้าสแกนสั่งจากมือถือได้ทันที</li>' + '<li><strong>จัดการเมนูอาหาร & ราคา:</strong> อัปโหลดรูปภาพ ปรับราคา และตั้งค่าหมวดหมู่เมนูได้อย่างอิสระ</li>' + '<li><strong>สิทธิ์ทดลองใช้งานฟรี 30 วัน:</strong> ทดลองระบบเต็มรูปแบบฟรีโดยไม่มีข้อผูกมัด</li>' + '</ul>' }, 'standard-pkg': { icon: '🔥', badge: 'Standard Package • ฿990/เดือน (ยอดนิยม)', title: 'รายละเอียดเชิงลึก Standard Package', content: '<h4>แพ็กเกจยอดนิยมสำหรับร้านหมูกระทะ / ชาบู / บุฟเฟต์:</h4>' + '<ul>' + '<li><strong>ระบบสั่งอาหารผ่าน QR Code:</strong> ไม่จำกัดจำนวนการสั่ง รองรับผังโต๊ะอาหารแบบครบวงจร</li>' + '<li><strong>โมดูลคิวห้องครัวเรียลไทม์ (KDS):</strong> จอบอร์ดครัวพร้อมเสียงเตือนออเดอร์ใหม่ สลับสถานะอาหารเสิร์ฟแล้ว</li>' + '<li><strong>ระบบชำระเงิน PromptPay QR Code:</strong> ออกใบเสร็จและ QR ชำระเงินไร้เงินสดตรงตามยอดออเดอร์</li>' + '<li><strong>ระบบจัดการสต็อกวัตถุดิบหมดด่วน:</strong> สลับปิดเมนูหมดได้ทันทีจากจอห้องครัวหรือหน้าร้าน</li>' + '<li><strong>สิทธิ์ทดลองใช้งานฟรี 30 วัน:</strong> ทดลองระบบเต็มรูปแบบฟรีโดยไม่มีข้อผูกมัด</li>' + '</ul>' }, 'premium-pkg': { icon: '💎', badge: 'Premium Package • ฿1,590/เดือน', title: 'รายละเอียดเชิงลึก Premium Package', content: '<h4>แพ็กเกจเต็มรูปแบบสำหรับร้านอาหารขนาดใหญ่ & แฟรนไชส์:</h4>' + '<ul>' + '<li><strong>ปลดล็อกทุกฟังก์ชันของ SME Restaurant OS:</strong> รวมระบบสั่ง QR, บอร์ดคิวครัว, ผังโต๊ะ, และชำระเงินครบวงจร</li>' + '<li><strong>โมดูลคำนวณเวลารออาหารจริง (Lead Time):</strong> อัลกอริทึมประเมินเวลาทำอาหารและแจ้งลูกค้ารายโต๊ะแบบ Real-time</li>' + '<li><strong>แดชบอร์ดสรุปยอดขายเชิงลึก (Sales Analytics):</strong> วิเคราะห์เมนูขายดี ยอดขายตามช่วงเวลา และสถิติลูกค้า</li>' + '<li><strong>ทีมงานสนับสนุน 24 ชั่วโมง:</strong> ทีมงานทางเทคนิคดูแลและช่วยเหลือตลอด 24/7</li>' + '<li><strong>สิทธิ์ทดลองใช้งานฟรี 30 วัน:</strong> ทดลองระบบเต็มรูปแบบฟรีโดยไม่มีข้อผูกมัด</li>' + '</ul>' } }; window.openCardDetailModal = function(cardId) { var data = cardDetailsData[cardId]; if (!data) return; document.getElementById('detailModalIcon').textContent = data.icon; document.getElementById('detailModalBadge').textContent = data.badge; document.getElementById('detailModalTitle').textContent = data.title; document.getElementById('detailModalBody').innerHTML = data.content; document.getElementById('cardDetailModal').classList.add('open'); }; window.closeCardDetailModal = function() { var modal = document.getElementById('cardDetailModal'); if (modal) modal.classList.remove('open'); }; // Close modals on Esc key document.addEventListener('keydown', function(e) { if (e.key === 'Escape') { closeSubModal(); closeCardDetailModal(); } }); // --- Registration Form --- window.handleRegSubmit = function(e) { e.preventDefault(); var shop = document.getElementById('f_shop').value.trim(); var owner = document.getElementById('f_owner').value.trim(); var phone = document.getElementById('f_phone').value.trim(); if (!shop || !owner || !phone) { alert('\u0e01\u0e23\u0e38\u0e13\u0e32\u0e01\u0e23\u0e2d\u0e01\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e43\u0e2b\u0e49\u0e04\u0e23\u0e1a\u0e16\u0e49\u0e27\u0e19'); return; } var params = '?plan=' + encodeURIComponent(currentPlan) + '&shop=' + encodeURIComponent(shop) + '&phone=' + encodeURIComponent(phone); fetch('https://pos.cm.in.th/api/register', { method: 'POST', body: new FormData(document.getElementById('regForm')) }) .then(function(r) { if (!r.ok) throw new Error('offline'); return r.json(); }) .then(function(d) { if (d.success) { alert('\u0e2a\u0e21\u0e31\u0e04\u0e23\u0e2a\u0e33\u0e40\u0e23\u0e47\u0e08! \u0e19\u0e33\u0e04\u0e38\u0e13\u0e44\u0e1b\u0e22\u0e31\u0e07 pos.cm.in.th'); closeSubModal(); window.location.href = 'https://pos.cm.in.th/'; } else { alert(d.message || '\u0e40\u0e01\u0e34\u0e14\u0e02\u0e49\u0e2d\u0e1c\u0e34\u0e14\u0e1e\u0e25\u0e32\u0e14'); } }) .catch(function() { closeSubModal(); window.open('https://pos.cm.in.th/register' + params, '_blank'); }); }; // --- Mobile Drawer Menu Toggle --- window.toggleMobileNav = function(forceState) { var hamburger = document.getElementById('hamburgerBtn'); var drawer = document.getElementById('mobileNavDrawer'); var backdrop = document.getElementById('mobileNavBackdrop'); if (!hamburger || !drawer || !backdrop) return; var shouldOpen = (typeof forceState === 'boolean') ? forceState : !drawer.classList.contains('active'); if (shouldOpen) { hamburger.classList.add('active'); drawer.classList.add('active'); backdrop.classList.add('active'); document.body.style.overflow = 'hidden'; if (window.playNavSound) window.playNavSound('nav'); } else { hamburger.classList.remove('active'); drawer.classList.remove('active'); backdrop.classList.remove('active'); document.body.style.overflow = ''; if (window.playNavSound) window.playNavSound('toggle'); } }; }); </script> </body> </html>
| ver. 1.4 |
Github
|
.
| PHP 7.4.33 | Generation time: 0.24 |
proxy
|
phpinfo
|
Settings