File manager - Edit - /var/www/sme-os.tech.cm.in.th/sme-os-new1082569/index.php
Back
<?php header('Content-Type: text/html; charset=utf-8'); /** * SmartDine 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="SmartDine OS - ระบบบริหารจัดการและสั่งอาหารออนไลน์อัจฉริยะ สั่งง่าย ไม่ต้องโหลดแอปฯ เสิร์ฟไว รู้เวลารอจริง ราคาสบายกระเป๋าสำหรับ SMEs"> <title>SmartDine 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=Kanit:wght@300;400;500;600;700;800&display=swap" rel="stylesheet"> <link rel="stylesheet" href="style.css?v=<?php echo time(); ?>"> <!-- 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 (Force override any conflicts) ============================== */ .portal-navbar { position: fixed; top: 0; left: 0; right: 0; height: 70px; background: var(--bg-navbar, rgba(11,15,25,0.92)); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid var(--border-glass, rgba(255,255,255,0.1)); z-index: 9999; } .nav-inner { height: 70px; max-width: 1280px; margin: 0 auto; padding: 0 32px; display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 0; } /* LEFT: Brand */ .nav-brand { display: flex; flex-direction: row; align-items: center; gap: 12px; text-decoration: none; flex-shrink: 0; min-width: 0; } .brand-logo { width: 44px; height: 44px; object-fit: contain; flex-shrink: 0; border-radius: 8px; background: rgba(255, 255, 255, 0.04); padding: 2px; } .brand-name { font-size: 1.15rem; font-weight: 800; white-space: nowrap; color: var(--text-primary, #F8FAFC); display: flex; flex-direction: column; line-height: 1.15; } .brand-name span { color: #FF6B00; } .brand-tagline { font-size: 0.62rem; font-weight: 700; color: var(--accent-gold, #F59E0B); letter-spacing: 1.2px; margin-top: 2px; } /* CENTER: Navigation Links */ .nav-links { display: flex; flex-direction: row; align-items: center; gap: 24px; list-style: none; margin: 0; padding: 0; flex: 1; justify-content: center; } .nav-links a { font-size: 0.92rem; font-weight: 600; color: var(--text-secondary, #E2E8F0); text-decoration: none; padding: 6px 2px; border-bottom: 2px solid transparent; transition: color 0.2s, border-color 0.2s; white-space: nowrap; } .nav-links a:hover { color: #FF6B00; border-bottom-color: #FF6B00; } /* RIGHT: Action Buttons */ .nav-actions { display: flex; flex-direction: row; align-items: center; gap: 12px; flex-shrink: 0; } .btn-signin { display: inline-flex; flex-direction: row; align-items: center; gap: 7px; padding: 9px 20px; background: linear-gradient(135deg, #FF6B00, #FF9500); color: #fff; font-size: 0.88rem; font-weight: 700; border-radius: 30px; text-decoration: none; white-space: nowrap; transition: all 0.2s; box-shadow: 0 4px 15px rgba(255,107,0,0.35); } .btn-signin:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(255,107,0,0.5); } .btn-theme { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--border-glass, rgba(255,255,255,0.12)); background: transparent; color: var(--text-primary, #F8FAFC); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s; } .btn-theme:hover { border-color: #FF6B00; color: #FF6B00; } /* Mobile: hide nav-links */ @media (max-width: 820px) { .nav-links { display: none; } } @media (max-width: 480px) { .nav-inner { padding: 0 16px; } .btn-signin span.label-text { display: none; } } </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="CMTC TECH SOLUTIONS - INNOVATE • CONNECT • SOLVE"> <img src="logo.png?v=<?php echo time(); ?>" class="brand-logo" alt="CMTC TECH SOLUTIONS Logo"> <div class="brand-name"> <div>CMTC <span>TECH SOLUTIONS</span></div> <div class="brand-tagline">INNOVATE • CONNECT • SOLVE</div> </div> </a> <!-- CENTER: Navigation Menu Links --> <ul class="nav-links"> <li><a href="#features">จุดเด่นระบบ</a></li> <li><a href="#why-us">จุดเด่นเหนือคู่แข่ง</a></li> <li><a href="#pricing">แพ็กเกจราคา</a></li> <li><a href="#faq">คำถามที่พบบ่อย</a></li> </ul> <!-- RIGHT: Sign In + Theme Toggle --> <div class="nav-actions"> <a href="https://pos.cm.in.th/" target="_blank" class="btn-signin" title="เข้าสู่ระบบ POS CM"> <!-- SVG Lock Icon --> <svg width="15" height="15" 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="17" height="17" 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> </div> </div> </nav> <!-- ============================================================ HERO SECTION ============================================================ --> <section class="portal-section hero-section"> <div class="container hero-wrapper"> <!-- Hero Content Left --> <div class="hero-content"> <div class="hero-badge">SmartDine OS • ระบบสั่งอาหารอัจฉริยะสำหรับ SMEs</div> <h1 class="hero-title"> ยกระดับร้านอาหารของคุณสู่ยุคดิจิทัล<br> ด้วย <span class="glow-text-orange">SmartDine 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 --> <div class="hero-showcase-card"> <div style="font-weight: 800; font-size: 1.05rem; color: var(--accent-orange); margin-bottom: 12px;"> SmartDine OS Ecosystem </div> <p style="font-size: 0.9rem; color: var(--text-secondary); line-height: 1.6; margin-bottom: 20px;"> แพลตฟอร์มระบบเดียวจบครบทุกฟังก์ชัน: สแกนสั่งผ่านเว็บ, บอร์ดคิวครัวพร้อมคำนวณ Lead Time เรียลไทม์ และระบบรายงาน Dashboard </p> <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 12px;"> <div style="background: var(--bg-card); border: 1px solid var(--border-glass); border-radius: 12px; padding: 16px; text-align: center;"> <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="var(--accent-cyan)" stroke-width="1.5" style="margin-bottom:6px;"><rect x="5" y="2" width="14" height="20" rx="2"/><line x1="12" y1="18" x2="12" y2="18" stroke-width="3"/></svg> <div style="font-size: 0.82rem; font-weight: 700;">No App QR Order</div> </div> <div style="background: var(--bg-card); border: 1px solid var(--border-glass); border-radius: 12px; padding: 16px; text-align: center;"> <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="var(--accent-teal)" stroke-width="1.5" style="margin-bottom:6px;"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg> <div style="font-size: 0.82rem; font-weight: 700;">Real-time Lead Time</div> </div> <div style="background: var(--bg-card); border: 1px solid var(--border-glass); border-radius: 12px; padding: 16px; text-align: center;"> <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="var(--accent-orange)" stroke-width="1.5" style="margin-bottom:6px;"><line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/></svg> <div style="font-size: 0.82rem; font-weight: 700;">Kitchen & Sales Board</div> </div> <div style="background: var(--bg-card); border: 1px solid var(--border-glass); border-radius: 12px; padding: 16px; text-align: center;"> <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="var(--accent-gold)" stroke-width="1.5" style="margin-bottom:6px;"><rect x="2" y="4" width="20" height="16" rx="2"/><line x1="6" y1="12" x2="10" y2="12"/><line x1="14" y1="12" x2="18" y2="12"/></svg> <div style="font-size: 0.82rem; font-weight: 700;">PromptPay QR</div> </div> </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">SmartDine 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">📱</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">⏱️</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">🍳</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">🎯</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" style="background: var(--bg-card-hover);"> <div class="container"> <div class="section-header"> <h2 class="section-title">ทำไมต้องเลือก <span class="glow-text-orange">SmartDine 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">ราคาสบายกระเป๋า</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">ฟีเจอร์หนึ่งเดียวในไทย</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">ใช้งานได้ทันที</div> <h3>เรียบง่าย ไม่ซับซ้อน</h3> <p>พนักงานและเจ้าของร้านใช้งานได้ทันที ไม่ต้องผ่านการฝึกอบรมที่ยุ่งยาก ทำงานผ่านเว็บเบราว์เซอร์ 100% บนทุกอุปกรณ์</p> <div class="card-expand-hint">คลิกดูรายละเอียดเชิงลึก →</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">แพ็กเกจ SmartDine 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> ฟังก์ชันทั้งหมดของ SmartDine 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" style="background: var(--bg-card-hover);"> <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"> ไม่ต้องซื้ออุปกรณ์ราคาแพงเลยครับ ระบบ CMTC Smart 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.05rem;">CMTC TECH SOLUTIONS</div> <div style="color: var(--accent-orange); font-size: 0.8rem; font-weight: 700; letter-spacing: 1.5px; margin-bottom: 8px;">INNOVATE • CONNECT • SOLVE</div> <div style="color: var(--text-secondary); font-size: 0.88rem;">SmartDine OS • ระบบบริหารจัดการและสั่งอาหารออนไลน์อัจฉริยะ © 2026</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>SmartDine 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>ปลดล็อกทุกฟังก์ชันของ SmartDine 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'); }); }; }); </script> </body> </html>
| ver. 1.4 |
Github
|
.
| PHP 7.4.33 | Generation time: 0.23 |
proxy
|
phpinfo
|
Settings