<!DOCTYPE html>
<html lang="zh-TW">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>家庭雜物與食材庫存管理 V2</title>
    <!-- 引入掃碼核心庫 -->
    <script src="https://unpkg.com/html5-qrcode"></script>
    <style>
        :root {
            --primary: #4CAF50;
            --bg-color: #f5f7fa;
            --card-bg: #ffffff;
            --warning: #fff3cd;
            --danger: #ffebee;
        }
        body { 
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; 
            margin: 0; 
            padding: 16px; 
            background-color: var(--bg-color); 
            color: #333;
        }
        .container { 
            max-width: 600px; 
            margin: auto; 
        }
        .header { 
            display: flex; 
            justify-content: space-between; 
            align-items: center; 
            margin-bottom: 16px;
        }
        h2 { margin: 0; font-size: 22px; color: #2c3e50; }
        .btn { 
            padding: 8px 16px; 
            border: none; 
            border-radius: 8px; 
            background: var(--primary); 
            color: white; 
            font-weight: bold;
            cursor: pointer; 
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        .btn-scan { 
            background: #2196F3; 
            width: 100%; 
            padding: 12px;
            font-size: 16px;
            margin-bottom: 16px;
        }
        #reader {
            width: 100%;
            border-radius: 8px;
            overflow: hidden;
            display: none; /* 預設隱藏，點擊掃碼才顯示 */
            margin-bottom: 16px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        }
        .item-card { 
            background: var(--card-bg);
            padding: 16px; 
            margin-bottom: 12px; 
            border-radius: 12px; 
            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .item-info h3 { margin: 0 0 4px 0; font-size: 18px; }
        .item-info p { margin: 2px 0; font-size: 14px; color: #666; }
        .tag { 
            display: inline-block;
            padding: 2px 8px;
            border-radius: 12px;
            font-size: 12px;
            background: #e0e0e0;
            margin-right: 6px;
        }
        .expired { background-color: var(--danger); border-left: 4px solid #f44336; }
        .expiring-soon { background-color: var(--warning); border-left: 4px solid #ff9800; }
        
        .quantity-control {
            display: flex;
            align-items: center;
            gap: 12px;
            background: #f0f0f0;
            padding: 4px 8px;
            border-radius: 20px;
        }
        .qty-btn {
            background: none;
            border: none;
            font-size: 18px;
            font-weight: bold;
            color: #555;
            cursor: pointer;
            padding: 0 8px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h2> 家庭食材庫存 V2</h2>
            <button class="btn" onclick="alert('手動添加功能介面')">+ 添加</button>
        </div>

        <!-- 掃碼按鈕與掃碼區域 -->
        <button class="btn btn-scan" id="scanBtn" onclick="toggleScanner()"> 掃碼錄入商品</button>
        <div id="reader"></div>

        <!-- 庫存列表預覽 -->
        <div id="inventory-list">
            <div class="item-card expiring-soon">
                <div class="item-info">
                    <h3>純牛奶</h3>
                    <p><span class="tag">食材/生鮮</span>  冰箱冷藏</p>
                    <p style="color:#d32f2f; font-weight:bold;"> 2026-08-06 (即將過期)</p>
                </div>
                <div class="quantity-control">
                    <button class="qty-btn">-</button>
                    <span>2盒</span>
                    <button class="qty-btn">+</button>
                </div>
            </div>
            
            <div class="item-card">
                <div class="item-info">
                    <h3>洗潔精</h3>
                    <p><span class="tag">清潔用品</span>  廚房櫥櫃</p>
                    <p> 長期有效</p>
                </div>
                <div class="quantity-control">
                    <button class="qty-btn">-</button>
                    <span>1瓶</span>
                    <button class="qty-btn">+</button>
                </div>
            </div>
        </div>
    </div>

    <script>
        let html5QrcodeScanner = null;
        let isScanning = false;

        function toggleScanner() {
            const readerDiv = document.getElementById('reader');
            const scanBtn = document.getElementById('scanBtn');

            if (isScanning) {
                // 停止掃碼
                if (html5QrcodeScanner) {
                    html5QrcodeScanner.clear();
                }
                readerDiv.style.display = 'none';
                scanBtn.innerHTML = ' 掃碼錄入商品';
                scanBtn.style.background = '#2196F3';
                isScanning = false;
            } else {
                // 啟動掃碼
                readerDiv.style.display = 'block';
                scanBtn.innerHTML = '關閉鏡頭';
                scanBtn.style.background = '#f44336';
                
                // 初始化掃描器
                html5QrcodeScanner = new Html5QrcodeScanner(
                    "reader", 
                    { 
                        fps: 10, 
                        qrbox: { width: 250, height: 150 },
                        aspectRatio: 1.0,
                        showTorchButtonIfSupported: true // 支援手電筒
                    }, 
                    false
                );
                
                html5QrcodeScanner.render(onScanSuccess, onScanFailure);
                isScanning = true;
            }
        }

        function onScanSuccess(decodedText, decodedResult) {
            // 掃碼成功時觸發
            alert("掃碼成功！條碼編號: " + decodedText + "\n\n系統可根據此條碼自動帶入商品名稱或建立新檔案。");
            
            // 掃描成功後自動關閉鏡頭
            toggleScanner();
        }

        function onScanFailure(error) {
            // 掃碼失敗或正在對焦時的背景處理，通常忽略即可
        }
    </script>
</body>
</html>