File manager - Edit - /var/www/sme-os.tech.cm.in.th/manual.php
Back
<?php header('Content-Type: text/html; charset=utf-8'); ?> <!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 - เรียนรู้วิธีการใช้งานตั้งแต่การสมัครแพ็กเกจ การจัดการร้านค้า และระบบผู้ดูแลระบบ (Admin)"> <title>คู่มือการใช้งานระบบ (User Manual) - 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)); } /* 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; } } .manual-hero { padding: 130px 0 40px; text-align: center; position: relative; } .manual-badge { display: inline-flex; align-items: center; gap: 8px; padding: 6px 18px; border-radius: 30px; background: rgba(255, 107, 0, 0.12); border: 1px solid rgba(255, 107, 0, 0.3); color: var(--accent-orange, #FF6B00); font-size: 0.88rem; font-weight: 700; margin-bottom: 18px; } .manual-hero-actions { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; } .manual-layout { display: grid; grid-template-columns: 280px 1fr; gap: 36px; align-items: start; margin-bottom: 80px; } /* Sticky Sidebar Navigation */ .manual-sidebar { position: sticky; top: 100px; background: var(--bg-card, rgba(15, 23, 42, 0.75)); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid var(--border-glass, rgba(255, 255, 255, 0.08)); border-radius: 20px; padding: 24px; box-shadow: var(--shadow-card); } .manual-nav-title { font-size: 0.85rem; font-weight: 800; color: var(--text-muted, #94A3B8); text-transform: uppercase; letter-spacing: 1.2px; margin-bottom: 14px; padding-left: 8px; } .manual-nav-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; } .manual-nav-item a { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 12px; color: var(--text-secondary, #94A3B8); text-decoration: none; font-size: 0.92rem; font-weight: 600; transition: all 0.2s ease; } .manual-nav-item a:hover, .manual-nav-item a.active { background: rgba(255, 107, 0, 0.15); color: var(--accent-orange, #FF6B00); border-left: 3px solid var(--accent-orange, #FF6B00); padding-left: 18px; } /* Content Sections */ .manual-card { background: var(--bg-card, rgba(15, 23, 42, 0.75)); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid var(--border-glass, rgba(255, 255, 255, 0.08)); border-radius: 24px; padding: 36px; margin-bottom: 32px; box-shadow: var(--shadow-card); scroll-margin-top: 100px; transition: all 0.3s ease; } .manual-card:hover { border-color: var(--border-hover, rgba(255, 107, 0, 0.4)); } .section-tag { display: inline-block; padding: 4px 12px; border-radius: 8px; font-size: 0.8rem; font-weight: 700; margin-bottom: 12px; text-transform: uppercase; letter-spacing: 0.5px; } .tag-sub { background: rgba(16, 185, 129, 0.15); color: #10B981; border: 1px solid rgba(16,185,129,0.3); } .tag-merchant { background: rgba(255, 107, 0, 0.15); color: #FF6B00; border: 1px solid rgba(255,107,0,0.3); } .tag-admin { background: rgba(168, 85, 247, 0.15); color: #A855F7; border: 1px solid rgba(168,85,247,0.3); } .manual-card h2 { font-size: 1.45rem; font-weight: 800; color: var(--text-primary, #FFFFFF); margin-bottom: 14px; line-height: 1.3; } .manual-card p { font-size: 0.96rem; color: var(--text-secondary, #94A3B8); line-height: 1.7; margin-bottom: 18px; } .step-box { background: rgba(0, 0, 0, 0.25); border: 1px solid var(--border-glass, rgba(255,255,255,0.06)); border-radius: 16px; padding: 20px; margin-bottom: 22px; } .step-title { font-size: 1.05rem; font-weight: 700; color: var(--text-primary, #F8FAFC); margin-bottom: 12px; display: flex; align-items: center; gap: 10px; } .step-badge { width: 28px; height: 28px; border-radius: 50%; background: var(--accent-orange, #FF6B00); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 0.85rem; font-weight: 800; flex-shrink: 0; } .step-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; } .step-list li { font-size: 0.93rem; color: var(--text-secondary, #94A3B8); display: flex; align-items: flex-start; gap: 10px; line-height: 1.6; } .step-list li::before { content: "✓"; color: #10B981; font-weight: 800; flex-shrink: 0; } /* Screenshot Container */ .manual-img-container { border-radius: 16px; overflow: hidden; border: 1px solid var(--border-glass, rgba(255,255,255,0.1)); background: #080C16; margin: 18px 0; box-shadow: 0 12px 30px rgba(0,0,0,0.4); position: relative; } .manual-img-container img { width: 100%; height: auto; display: block; object-fit: cover; transition: transform 0.3s ease; } .manual-img-container:hover img { transform: scale(1.01); } .img-caption { background: rgba(8, 12, 22, 0.9); padding: 10px 18px; font-size: 0.82rem; color: var(--text-muted, #94A3B8); display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--border-glass, rgba(255,255,255,0.06)); flex-wrap: wrap; gap: 6px; } .callout-box { border-left: 4px solid var(--accent-cyan, #00E5FF); background: rgba(0, 229, 255, 0.08); border-radius: 0 12px 12px 0; padding: 16px 20px; margin: 18px 0; font-size: 0.92rem; color: var(--text-primary, #F8FAFC); line-height: 1.6; } @media (max-width: 992px) { .manual-layout { grid-template-columns: 1fr; gap: 24px; } .manual-sidebar { display: none; } .manual-hero { padding: 100px 0 30px; } .manual-card { padding: 24px 18px; border-radius: 18px; } .step-box { padding: 16px 14px; } } @media (max-width: 600px) { .manual-hero h1 { font-size: 1.6rem !important; } .manual-hero p { font-size: 0.9rem !important; } .manual-hero-actions { flex-direction: column; width: 100%; } .manual-hero-actions a { width: 100%; text-align: center; justify-content: center; } .manual-card h2 { font-size: 1.2rem; } .manual-card p { font-size: 0.88rem; } .step-list li { font-size: 0.86rem; } .img-caption { font-size: 0.76rem; padding: 8px 12px; } .callout-box { padding: 12px 14px; font-size: 0.85rem; } } </style> </head> <body> <!-- NAVIGATION BAR --> <nav class="portal-navbar" role="navigation" aria-label="Main Navigation"> <div class="nav-inner"> <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> <ul class="nav-links"> <li><a href="index.php#features" class="nav-sound-trigger">จุดเด่นระบบ</a></li> <li><a href="index.php#why-us" class="nav-sound-trigger">จุดเด่นเหนือคู่แข่ง</a></li> <li><a href="index.php#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="index.php#faq" class="nav-sound-trigger">คำถามที่พบบ่อย</a></li> </ul> <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 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="index.php#features" onclick="toggleMobileNav(false)" class="nav-sound-trigger">✨ จุดเด่นระบบ</a></li> <li><a href="index.php#why-us" onclick="toggleMobileNav(false)" class="nav-sound-trigger">🚀 จุดเด่นเหนือคู่แข่ง</a></li> <li><a href="index.php#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="index.php#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 --> <header class="manual-hero"> <div class="container"> <div class="manual-badge">📘 Official Documentation & User Manual</div> <h1 style="font-size: 2.4rem; font-weight: 800; color: var(--text-primary); margin-bottom: 12px;"> คู่มือการใช้งานระบบ <span class="glow-text-orange">SME Restaurant OS</span> </h1> <p style="font-size: 1.05rem; color: var(--text-secondary); max-width: 780px; margin: 0 auto 20px;"> คำแนะนำขั้นตอนการใช้งานระบบฉบับสมบูรณ์ ตั้งแต่การเลือกแพ็กเกจสมัครใช้บริการ การจัดการระบบหลังบ้านร้านค้า และระบบผู้ดูแลระบบ (Admin) </p> <div class="manual-hero-actions"> <a href="SME_Restaurant_OS_Manual.docx" download class="btn-signin" style="background:linear-gradient(135deg, #10B981, #059669); text-decoration:none;"> 📥 ดาวน์โหลดคู่มือ Word (.docx) </a> <a href="index.php" class="btn-cta-secondary" style="padding:10px 22px; font-size:0.9rem; text-decoration:none;"> ← กลับสู่หน้าหลัก </a> </div> </div> </header> <!-- MAIN CONTENT LAYOUT --> <div class="container"> <div class="manual-layout"> <!-- SIDEBAR NAVIGATION --> <aside class="manual-sidebar"> <div class="manual-nav-title">สารบัญคู่มือ</div> <ul class="manual-nav-list"> <li class="manual-nav-item"><a href="#section-1" class="active">1. สมัครบริการ & แพ็กเกจ</a></li> <li class="manual-nav-item"><a href="#section-2-login">2.1 เข้าสู่ระบบร้านค้า</a></li> <li class="manual-nav-item"><a href="#section-2-menus">2.2 จัดการ & เพิ่มเมนูอาหาร</a></li> <li class="manual-nav-item"><a href="#section-2-tables">2.3 จัดการผังโต๊ะ & QR Code</a></li> <li class="manual-nav-item"><a href="#section-2-kds">2.4 จอรับออเดอร์ครัว (KDS)</a></li> <li class="manual-nav-item"><a href="#section-2-pos">2.5 POS แคชเชียร์ & เช็คบิล</a></li> <li class="manual-nav-item"><a href="#section-3-admin">3.1 เข้าสู่ระบบ Admin</a></li> <li class="manual-nav-item"><a href="#section-3-impersonate">3.2 สวมสิทธิ์ร้านค้า (Impersonate)</a></li> <li class="manual-nav-item"><a href="#section-3-permissions">3.3 แก้ไขสิทธิ์ร้านค้า & แพ็กเกจ</a></li> </ul> </aside> <!-- CONTENT BODY --> <main> <!-- SECTION 1 --> <section id="section-1" class="manual-card"> <span class="section-tag tag-sub">Part 1 : Subscription</span> <h2>1. การสมัครใช้บริการและการเลือกแพ็กเกจ (Subscription & Pricing)</h2> <p> ระบบ <strong>SME Restaurant OS</strong> เปิดโอกาสให้ผู้ประกอบการทดลองใช้งานระบบจริงฟรี 30 วัน ครอบคลุมทุกความต้องการของร้านอาหารขนาดเล็ก ร้านหมูกระทะ ชาบู และร้านอาหารเต็มรูปแบบ </p> <div class="step-box"> <div class="step-title"> <span class="step-badge">1</span> เลือกระดับแพ็กเกจที่เหมาะสม </div> <ul class="step-list"> <li><strong>Starter Package (฿490/ด.):</strong> เหมาะกับร้านขนาดเล็ก สั่งผ่าน QR Code จัดการเมนูพื้นฐาน</li> <li><strong>Standard Package (฿990/ด. - ยอดนิยม):</strong> มีผังโต๊ะ จอรับออเดอร์ครัว (KDS) และ PromptPay QR Code</li> <li><strong>Premium Package (฿1,590/ด.):</strong> ร้านอาหารเต็มรูปแบบ ปลดล็อกระบบประเมินเวลารออาหารจริง (Lead Time)</li> </ul> </div> <div class="manual-img-container"> <img src="images/02_landing_packages.png" alt="ตารางแพ็กเกจราคา SME Restaurant OS"> <div class="img-caption"> <span>ภาพที่ 1.1: ตารางแพ็กเกจราคาและสิทธิ์ทดลองใช้ฟรี 30 วัน</span> <span style="color:var(--accent-orange);">● pos.cm.in.th</span> </div> </div> <div class="step-box" style="margin-top:24px;"> <div class="step-title"> <span class="step-badge">2</span> กรอกแบบฟอร์มลงทะเบียนเข้าร่วม </div> <ul class="step-list"> <li>คลิกปุ่มเลือกแพ็กเกจที่ต้องการเพื่อเปิดหน้าต่างลงทะเบียน</li> <li>กรอกชื่อร้านอาหาร (Shop Name), ชื่อผู้ติดต่อ (Contact Person), และเบอร์โทรศัพท์ (Phone Number)</li> <li>กดปุ่ม <strong>"ยืนยันสมัครเข้าร่วม"</strong> หรือ <strong>"ไปสมัครที่ pos.cm.in.th"</strong> เพื่อเริ่มต้นเปิดร้านค้าทันที</li> </ul> </div> <div class="manual-img-container"> <img src="images/03_package_registration_modal.png" alt="หน้าต่างลงทะเบียนสมัครแพ็กเกจ"> <div class="img-caption"> <span>ภาพที่ 1.2: หน้าต่างแบบฟอร์มลงทะเบียนสมัครใช้งานร้านอาหาร</span> <span style="color:var(--accent-cyan);">● Direct Registration</span> </div> </div> </section> <!-- SECTION 2: SHOP LOGIN --> <section id="section-2-login" class="manual-card"> <span class="section-tag tag-shop">Part 2.1 : Restaurant Flow</span> <h2>2.1 การเข้าสู่ระบบของร้านค้า (Restaurant Portal Login)</h2> <p> ร้านค้าสามารถเข้าใช้งานระบบได้จากทุกอุปกรณ์ เช่น คอมพิวเตอร์, โน้ตบุ๊ก, แท็บเล็ต หรือสมาร์ตโฟน ผ่านเว็บบราวเซอร์ 100% ไม่ต้องลงแอปพลิเคชัน </p> <div class="step-box"> <div class="step-title"> <span class="step-badge">1</span> ขั้นตอนการล็อกอินร้านค้า </div> <ul class="step-list"> <li>ไปที่เว็บไซต์หลัก <strong>https://pos.cm.in.th/</strong></li> <li>ในส่วนกล่อง <strong>"เข้าสู่ระบบร้านค้า"</strong> กรอกชื่อผู้ใช้งาน (Username) และรหัสผ่าน (Password) ที่ลงทะเบียนไว้</li> <li>กดปุ่ม <strong>"เข้าสู่ระบบ"</strong> ระบบจะนำท่านเข้าสู่แดชบอร์ดจัดการร้านค้าทันที</li> </ul> </div> <div class="manual-img-container"> <img src="images/04_pos_portal_entry.png" alt="หน้าจอเข้าสู่ระบบร้านค้า pos.cm.in.th"> <div class="img-caption"> <span>ภาพที่ 2.1: หน้าทางเข้าสู่ระบบ POS Portal</span> <span style="color:var(--accent-orange);">● Shop Login Box</span> </div> </div> <div class="manual-img-container"> <img src="images/06_shop_dashboard.png" alt="แดชบอร์ดภาพรวมหลังบ้านร้านค้า"> <div class="img-caption"> <span>ภาพที่ 2.2: หน้าแดชบอร์ดหลักของร้านค้า (Shop Overview Dashboard)</span> <span style="color:#10B981;">● Active Dashboard</span> </div> </div> </section> <!-- SECTION 2: MENUS --> <section id="section-2-menus" class="manual-card"> <span class="section-tag tag-shop">Part 2.2 : Menu Management</span> <h2>2.2 ขั้นตอนการจัดการและเพิ่มเมนูอาหาร (Food Menu Management)</h2> <p> ระบบช่วยให้ร้านค้าสามารถควบคุมรายการอาหาร ราคา หมวดหมู่ และการเปิด/ปิดเมนูหมดด่วน (Out of Stock) ได้อย่างอิสระแบบเรียลไทม์ </p> <div class="step-box"> <div class="step-title"> <span class="step-badge">1</span> วิธีการเพิ่มรายการอาหารใหม่ </div> <ul class="step-list"> <li>จากแถบเมนูด้านข้าง คลิกเลือกเมนู <strong>"จัดการเมนูอาหาร"</strong></li> <li>กดปุ่ม <strong>"เพิ่มรายการอาหาร"</strong> ด้านบนขวา</li> <li>ระบุชื่อเมนู, เลือกหมวดหมู่ (เช่น ต้ม ผัด ทอด หรือเครื่องดื่ม), กำหนดราคาขาย</li> <li>ตั้งค่าเวลาเฉลี่ยในการปรุง (Cooking Lead Time) สำหรับใช้ในระบบประเมินเวลาครัว</li> <li>อัปโหลดรูปภาพเมนู และกดปุ่ม <strong>"บันทึกข้อมูล"</strong> เมนูจะขึ้นบนหน้าสั่งของลูกค้าทันที</li> </ul> </div> <div class="manual-img-container"> <img src="images/07_shop_menu_management.png" alt="หน้ารายการเมนูอาหารทั้งหมด"> <div class="img-caption"> <span>ภาพที่ 2.3: หน้ารายการเมนูอาหารทั้งหมดของร้านค้า</span> <span style="color:var(--accent-orange);">● Menu Catalog</span> </div> </div> <div class="manual-img-container"> <img src="images/08_shop_add_menu_modal.png" alt="หน้าต่างเพิ่มเมนูอาหารใหม่"> <div class="img-caption"> <span>ภาพที่ 2.4: หน้าต่างกรอกข้อมูลและอัปโหลดรูปภาพเมนูใหม่</span> <span style="color:var(--accent-cyan);">● Add Food Modal</span> </div> </div> </section> <!-- SECTION 2: TABLES --> <section id="section-2-tables" class="manual-card"> <span class="section-tag tag-shop">Part 2.3 : Table & QR Ordering</span> <h2>2.3 การจัดการผังโต๊ะอาหาร และสร้าง QR Code สั่งอาหาร (Table & QR)</h2> <p> ลดภาระพนักงานในการเดินจดออเดอร์ ด้วยการสร้าง Dynamic QR Code ประจำแต่ละโต๊ะ ให้ลูกค้าใช้มือถือสแกนสั่งเองได้ทันที </p> <div class="step-box"> <div class="step-title"> <span class="step-badge">1</span> ขั้นตอนการตั้งค่าโต๊ะและพิมพ์ QR Code </div> <ul class="step-list"> <li>คลิกเลือกเมนู <strong>"จัดการโต๊ะ & QR Code"</strong></li> <li>กดปุ่ม <strong>"เพิ่มโต๊ะอาหารใหม่"</strong> ระบุเลขโต๊ะ เช่น โต๊ะ 01, โต๊ะ 02 และจำนวนที่นั่ง</li> <li>คลิกปุ่ม <strong>"พิมพ์ QR Code"</strong> หรือบันทึกภาพ QR นำไปติดที่โต๊ะอาหาร</li> <li>เมื่อลูกค้าสแกน ระบบจะผูก Session โต๊ะให้อัตโนมัติ สั่งแล้วออเดอร์เด้งเข้าครัวทันที</li> </ul> </div> <div class="manual-img-container"> <img src="images/09_shop_table_management.png" alt="หน้าจัดการผังโต๊ะอาหาร"> <div class="img-caption"> <span>ภาพที่ 2.5: ผังโต๊ะอาหารและสถานะโต๊ะแบบเรียลไทม์</span> <span style="color:var(--accent-orange);">● Table Overview</span> </div> </div> <div class="manual-img-container"> <img src="images/10_shop_add_table_modal.png" alt="หน้าต่างเพิ่มโต๊ะอาหารใหม่"> <div class="img-caption"> <span>ภาพที่ 2.6: หน้าต่างการเพิ่มหมายเลขโต๊ะอาหารในระบบ</span> <span style="color:var(--accent-cyan);">● Add Table Modal</span> </div> </div> </section> <!-- SECTION 2: KDS --> <section id="section-2-kds" class="manual-card"> <span class="section-tag tag-shop">Part 2.4 : Kitchen Display System</span> <h2>2.4 หน้าจอรับออเดอร์ห้องครัวอัจฉริยะ (Kitchen Display System - KDS)</h2> <p> หน้าจอ KDS ถูกออกแบบมาเพื่อติดตั้งในห้องครัวสำหรับเชฟ รองรับระบบตัดคิวอัตโนมัติ ไม่ต้องพึ่งพาใบกระดาษจด </p> <div class="step-box"> <div class="step-title"> <span class="step-badge">1</span> การทำงานของหน้าจอห้องครัว </div> <ul class="step-list"> <li>เปิดเมนู <strong>"จอรับออเดอร์ครัว (KDS)"</strong> บนหน้าจอแท็บเล็ตหรือสมาร์ตทีวีในครัว</li> <li>เมื่อมีออเดอร์ใหม่จากลูกค้า ระบบจะส่งสัญญาณเสียงเตือนพร้อมแสดงรายการทันที</li> <li>แสดงรายละเอียดชัดเจน: หมายเลขโต๊ะ, รายการเมนู, จำนวน, หมายเหตุพิเศษ (เช่น เผ็ดน้อย)</li> <li>เชฟแตะที่การ์ดเพื่อเปลี่ยนสถานะจาก <strong>"กำลังปรุง"</strong> เป็น <strong>"ปรุงเสร็จพร้อมเสิร์ฟ"</strong></li> </ul> </div> <div class="manual-img-container"> <img src="images/11_shop_kitchen_kds.png" alt="หน้าจอรับออเดอร์ครัว KDS"> <div class="img-caption"> <span>ภาพที่ 2.7: หน้าจอแสดงรายการคิวอาหารในห้องครัว KDS</span> <span style="color:#10B981;">● Real-time KDS</span> </div> </div> </section> <!-- SECTION 2: POS --> <section id="section-2-pos" class="manual-card"> <span class="section-tag tag-shop">Part 2.5 : POS & Cashier</span> <h2>2.5 ระบบแคชเชียร์และรับชำระเงินหน้าร้าน (POS & Billing)</h2> <p> คำนวณยอดเงินรวม ตรวจสอบรายการอาหาร และสร้าง PromptPay QR Code ตามยอดเงินจริงเพื่อรับชำระเงินแบบไร้เงินสด </p> <div class="step-box"> <div class="step-title"> <span class="step-badge">1</span> ขั้นตอนการเช็คบิลและปิดโต๊ะ </div> <ul class="step-list"> <li>คลิกเลือกเมนู <strong>"POS / แคชเชียร์"</strong></li> <li>เลือกโต๊ะที่ต้องการเช็คบิล ระบบจะรวมยอดรายการอาหารทั้งหมดให้อัตโนมัติ</li> <li>เลือกระบุวิธีชำระเงิน: เงินสด หรือแสดง <strong>PromptPay QR Code</strong> ให้ลูกค้าสแกนจ่าย</li> <li>กดปุ่ม <strong>"รับชำระเงินและพิมพ์ใบเสร็จ"</strong> โต๊ะจะถูกเคลียร์สถานะกลับเป็นโต๊ะว่างพร้อมรับลูกค้าใหม่</li> </ul> </div> <div class="manual-img-container"> <img src="images/12_shop_pos_screen.png" alt="หน้าจอ POS แคชเชียร์"> <div class="img-caption"> <span>ภาพที่ 2.8: หน้าจอ POS แคชเชียร์สำหรับรวมบิลและคิดเงิน</span> <span style="color:var(--accent-orange);">● Cashier POS</span> </div> </div> </section> <!-- SECTION 3: ADMIN LOGIN --> <section id="section-3-admin" class="manual-card"> <span class="section-tag tag-admin">Part 3.1 : Admin Portal</span> <h2>3.1 การเข้าสู่ระบบของผู้ดูแลระบบ (Admin Portal Login)</h2> <p> ระบบศูนย์กลางสำหรับผู้ดูแลระบบ (System Administrator) เพื่อควบคุม ติดตามสถานะร้านค้าทั้งหมด และให้ความช่วยเหลือแก่ผู้ประกอบการ </p> <div class="step-box"> <div class="step-title"> <span class="step-badge">1</span> ขั้นตอนการเข้าสู่ระบบ Admin </div> <ul class="step-list"> <li>ไปที่เว็บไซต์ <strong>https://pos.cm.in.th/</strong> ในส่วน <strong>"เข้าสู่ระบบแอดมิน (Admin Portal)"</strong></li> <li>กรอกอีเมล/ชื่อผู้ใช้งานของผู้ดูแลระบบ และรหัสผ่าน</li> <li>กดปุ่ม <strong>"เข้าสู่ระบบ"</strong> เพื่อเข้าสู่แดชบอร์ดบริหารจัดการส่วนกลาง</li> </ul> </div> <div class="manual-img-container"> <img src="images/15_admin_dashboard.png" alt="แดชบอร์ดหลักของผู้ดูแลระบบ Admin"> <div class="img-caption"> <span>ภาพที่ 3.1: แดชบอร์ดภาพรวมระบบส่วนกลางของผู้ดูแลระบบ (Admin Dashboard)</span> <span style="color:var(--accent-purple, #A855F7);">● Admin Center</span> </div> </div> </section> <!-- SECTION 3: IMPERSONATE --> <section id="section-3-impersonate" class="manual-card"> <span class="section-tag tag-admin">Part 3.2 : Store Impersonation</span> <h2>3.2 การจัดการร้านอาหารทั้งหมด และฟังก์ชัน "สวมสิทธิ์ร้านค้า" (Impersonation)</h2> <p> ผู้ดูแลระบบสามารถตรวจสอบรายชื่อร้านอาหารทั้งหมด และใช้ฟังก์ชัน <strong>"สวมสิทธิ์ร้านค้า"</strong> เพื่อเข้าไปช่วยเหลือร้านค้าได้ทันทีโดยไม่ต้องขอรหัสผ่านของร้าน </p> <div class="step-box"> <div class="step-title"> <span class="step-badge">1</span> ขั้นตอนการใช้งานฟังก์ชันสวมสิทธิ์ </div> <ul class="step-list"> <li>ไปที่เมนู <strong>"ร้านอาหารทั้งหมด"</strong> หรือ <strong>"จัดการร้านค้า (Restaurants Management)"</strong></li> <li>ค้นหาร้านอาหารที่ต้องการจากตารางรายชื่อร้านค้า</li> <li>คลิกปุ่ม <strong>"สวมสิทธิ์" (Login as Store)</strong> ในแถวของร้านค้านั้น</li> <li>ระบบจะสลับเข้าสู่หน้าจอของร้านค้านั้นทันที เพื่อให้ Admin ตรวจสอบข้อผิดพลาด ช่วยเพิ่มเมนู หรือตั้งค่าให้ลูกค้าได้สะดวกรวดเร็ว</li> </ul> </div> <div class="manual-img-container"> <img src="images/16_admin_stores_management.png" alt="ตารางร้านอาหารและการสวมสิทธิ์"> <div class="img-caption"> <span>ภาพที่ 3.2: หน้ารายชื่อร้านอาหารทั้งหมด และปุ่มกดสวมสิทธิ์ร้านค้า</span> <span style="color:var(--accent-purple, #A855F7);">● Store List & Impersonate</span> </div> </div> </section> <!-- SECTION 3: PERMISSIONS --> <section id="section-3-permissions" class="manual-card"> <span class="section-tag tag-admin">Part 3.3 : Permission Management</span> <h2>3.3 การแก้ไขสิทธิ์และขอบเขตการใช้งานของร้านค้า (Permissions & Packages)</h2> <p> ปรับแต่งโมดูลการเข้าถึง ขยายเวลาทดลองใช้งาน และกำหนดสิทธิ์การเข้าถึงฟังก์ชันระดับสูงของแต่ละร้านอาหาร </p> <div class="step-box"> <div class="step-title"> <span class="step-badge">1</span> ขั้นตอนการแก้ไขสิทธิ์ร้านค้า </div> <ul class="step-list"> <li>ในตารางรายชื่อร้านค้า คลิกปุ่ม <strong>"แก้ไขสิทธิ์" (Edit Permissions)</strong></li> <li>เปิด/ปิดสิทธิ์โมดูลสำคัญ: โมดูลจอรับออเดอร์ครัว (KDS), โมดูลคำนวณเวลารออาหารจริง (Lead Time), ระบบชำระเงิน PromptPay</li> <li>กำหนดจำนวนโต๊ะสูงสุดที่อนุญาตให้เปิดได้ และขยายระยะเวลาใช้งาน (Extend Trial Period)</li> <li>กดปุ่ม <strong>"บันทึกการแก้ไขสิทธิ์"</strong> ข้อมูลจะอัปเดตและมีผลกับร้านค้าทันที</li> </ul> </div> <div class="manual-img-container"> <img src="images/17_admin_edit_store_permissions.png" alt="หน้าต่างแก้ไขสิทธิ์ร้านค้า"> <div class="img-caption"> <span>ภาพที่ 3.3: หน้าต่างการแก้ไขสิทธิ์และเปิด/ปิดโมดูลระบบร้านค้า</span> <span style="color:var(--accent-cyan);">● Permission Settings</span> </div> </div> <div class="manual-img-container" style="margin-top:24px;"> <img src="images/18_admin_packages_management.png" alt="หน้าจัดการแพ็กเกจราคา"> <div class="img-caption"> <span>ภาพที่ 3.4: หน้าจัดการแพ็กเกจราคาและการตั้งค่าส่วนกลาง</span> <span style="color:var(--accent-orange);">● Packages Center</span> </div> </div> </section> </main> </div> </div> <!-- 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> <script> document.addEventListener('DOMContentLoaded', function() { // Theme Icon Init 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(); }; // Sidebar active scroll listener var links = document.querySelectorAll('.manual-nav-item a'); var sections = document.querySelectorAll('.manual-card'); window.addEventListener('scroll', function() { var current = ''; sections.forEach(function(sec) { var top = sec.offsetTop - 150; if (window.pageYOffset >= top) { current = sec.getAttribute('id'); } }); links.forEach(function(link) { link.classList.remove('active'); if (link.getAttribute('href') === '#' + current) { link.classList.add('active'); } }); }); // 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.23 |
proxy
|
phpinfo
|
Settings