 |
TIS-620 แปลงเป็น HTMl code เปิดเป็น UTF-8 โดย Java Script |
| |
 |
|
|
 |
 |
|
<!DOCTYPE html>
<html lang="th">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AI Camera POS - Founder Edition</title>
<style>
body { font-family: 'Kanit', sans-serif; margin: 0; background: #f8f9fa; padding-bottom: 100px; }
header { background: #2c3e50; color: white; padding: 15px; text-align: center; position: sticky; top: 0; z-index: 100; }
#video-container { position: relative; width: 100%; max-width: 500px; margin: auto; background: #000; overflow: hidden; }
video { width: 100%; display: block; }
#status { position: absolute; top: 10px; left: 10px; background: rgba(46, 204, 113, 0.8); color: white; padding: 5px 15px; border-radius: 20px; font-size: 0.8em; }
.container { max-width: 500px; margin: auto; padding: 15px; }
.stock-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 15px; }
.product-card { background: white; padding: 12px; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.05); }
.product-name { font-weight: bold; display: block; }
.product-price { color: #27ae60; font-size: 0.9em; }
.stock-count { font-size: 0.8em; color: #7f8c8d; display: block; margin-top: 5px; }
.checkout-bar { position: fixed; bottom: 0; left: 0; right: 0; background: white; padding: 15px; box-shadow: 0 -5px 15px rgba(0,0,0,0.1); display: flex; justify-content: space-between; align-items: center; max-width: 500px; margin: auto; }
.total-info { font-size: 1.2em; font-weight: bold; }
.btn-pay { background: #2ecc71; color: white; border: none; padding: 12px 25px; border-radius: 10px; font-weight: bold; cursor: pointer; }
.simulate-btn { width: 100%; background: #3498db; color: white; border: none; padding: 15px; margin-top: 10px; border-radius: 10px; font-weight: bold; cursor: pointer; }
</style>
</head>
<body>
<header>Smart Retail POS</header>
<div id="video-container">
<video id="video" autoplay playsinline></video>
<div id="status">กำลังสแกน (AI Active)</div>
</div>
<div class="container">
<button class="simulate-btn" onclick="randomScan()">กดเพื่อจำลองการสแกนสินค้า</button>
<div class="stock-grid" id="inventory-list">
<!-- สินค้า 20 อย่างจะขึ้นตรงนี้ -->
</div>
</div>
<div class="checkout-bar">
<div class="total-info">ยอดรวม: <span id="total-price">0</span> ฿</div>
<button class="btn-pay" onclick="checkout()">ชำระเงิน</button>
</div>
<script>
// ฐานข้อมูลสินค้า 20 อย่าง
let products = [
{ id: 1, name: "น้ำเปล่า", price: 10, stock: 20 },
{ id: 2, name: "กาแฟเขียว", price: 15, stock: 20 },
{ id: 3, name: "กาแฟแดง", price: 15, stock: 20 },
{ id: 4, name: "นมรสจืด", price: 12, stock: 20 },
{ id: 5, name: "นมรสหวาน", price: 12, stock: 20 },
{ id: 6, name: "ขนมปังแผ่น", price: 20, stock: 20 },
{ id: 7, name: "แซนวิชทูน่า", price: 25, stock: 20 },
{ id: 8, name: "แซนวิชแฮม", price: 25, stock: 20 },
{ id: 9, name: "มาม่าต้มยำ", price: 15, stock: 20 },
{ id: 10, name: "มาม่าหมูสับ", price: 15, stock: 20 },
{ id: 11, name: "ไข่ต้มคู่", price: 16, stock: 20 },
{ id: 12, name: "ข้าวสวยถ้วย", price: 15, stock: 20 },
{ id: 13, name: "เลย์เหลือง", price: 20, stock: 20 },
{ id: 14, name: "เลย์ส้ม", price: 20, stock: 20 },
{ id: 15, name: "ป็อกกี้", price: 20, stock: 20 },
{ id: 16, name: "หมากฝรั่ง", price: 35, stock: 20 },
{ id: 17, name: "ทิชชู่ห่อ", price: 5, stock: 20 },
{ id: 18, name: "สบู่ก้อน", price: 18, stock: 20 },
{ id: 19, name: "ยาสีฟัน", price: 45, stock: 20 },
{ id: 20, name: "แปรงสีฟัน", price: 25, stock: 20 }
];
let totalAmount = 0;
// เริ่มการทำงานของกล้อง
async function startCamera() {
try {
const stream = await navigator.mediaDevices.getUserMedia({ video: { facingMode: "environment" } });
document.getElementById('video').srcObject = stream;
} catch (err) {
console.error("Error accessing camera: ", err);
}
}
// ฟังก์ชันหัวใจหลักที่คุณต้องการ (onScanSuccess)
function onScanSuccess(detectedProduct) {
const product = products.find(p => p.name === detectedProduct);
if (product && product.stock > 0) {
product.stock--; // ตัดสต็อก
totalAmount += product.price; // เพิ่มยอดเงิน
updateUI(); // อัปเดตหน้าจอ
console.log(`สแกน: ${detectedProduct} คงเหลือ: ${product.stock}`);
} else if (product && product.stock <= 0) {
alert(`${detectedProduct} หมดสต็อกแล้ว!`);
}
}
// จำลองการสแกนแบบสุ่ม
function randomScan() {
const randomIndex = Math.floor(Math.random() * products.length);
const pName = products[randomIndex].name;
onScanSuccess(pName);
}
function updateUI() {
// อัปเดตตารางสินค้า
const list = document.getElementById('inventory-list');
list.innerHTML = '';
products.forEach(p => {
list.innerHTML += `
<div class="product-card">
<span class="product-name">${p.name}</span>
<span class="product-price">${p.price} ฿</span>
<span class="stock-count">คงเหลือ: ${p.stock}</span>
</div>
`;
});
// อัปเดตยอดรวม
document.getElementById('total-price').innerText = totalAmount;
}
function checkout() {
if(totalAmount === 0) return alert("กรุณาสแกนสินค้าก่อน");
alert(`ยอดชำระทั้งหมด: ${totalAmount} บาท\nขอบคุณที่ใช้บริการ!`);
totalAmount = 0;
updateUI();
}
// เริ่มต้น
startCamera();
updateUI();
</script>
</body>
</html>
|
 |
 |
 |
 |
| Date :
2026-05-11 07:34:58 |
By :
สุพรรษา อ่ำอ่อน |
|
 |
 |
 |
 |
|
|
 |
 |
|
 |
 |
|
|