<!DOCTYPE html>
<html lang="zh-TW">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>幸運大抽獎</title>
    <script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.6.0/dist/confetti.browser.min.js"></script>
    <style>
        :root {
            --primary-color: #d32f2f;
            --accent-color: #ffca28;
            --bg-gradient: linear-gradient(135deg, #ff9a9e 0%, #fecfef 99%, #fecfef 100%);
            --card-bg: rgba(255, 255, 255, 0.95);
        }

        body {
            font-family: 'Segoe UI', 'Microsoft JhengHei', sans-serif;
            margin: 0;
            padding: 0;
            min-height: 100vh;
            background: var(--bg-gradient);
            display: flex;
            justify-content: center;
            align-items: center;
            color: #333;
        }

        .container {
            background: var(--card-bg);
            padding: 2rem;
            border-radius: 20px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.2);
            text-align: center;
            max-width: 500px;
            width: 90%;
            position: relative;
            overflow: hidden;
            border: 4px solid var(--accent-color);
        }

        h1 {
            color: var(--primary-color);
            margin-bottom: 1.5rem;
            font-size: 2rem;
            text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
        }

        /* 顯示抽獎結果的區域 */
        .display-box {
            background: #fff;
            border: 3px solid var(--primary-color);
            border-radius: 15px;
            height: 150px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            margin-bottom: 2rem;
            box-shadow: inset 0 0 20px rgba(0,0,0,0.05);
            position: relative;
        }

        .prize-rank {
            font-size: 1.2rem;
            color: #666;
            margin-bottom: 5px;
            font-weight: bold;
        }

        .prize-name {
            font-size: 2rem;
            color: var(--primary-color);
            font-weight: 800;
            padding: 0 10px;
        }

        /* 抽獎按鈕 */
        .draw-btn {
            background: linear-gradient(to bottom, #ffca28, #ff6f00);
            color: white;
            border: none;
            padding: 15px 50px;
            font-size: 1.5rem;
            border-radius: 50px;
            cursor: pointer;
            transition: transform 0.1s, box-shadow 0.3s;
            font-weight: bold;
            box-shadow: 0 5px 15px rgba(255, 111, 0, 0.4);
            text-shadow: 1px 1px 0 rgba(0,0,0,0.2);
        }

        .draw-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(255, 111, 0, 0.5);
        }

        .draw-btn:active {
            transform: translateY(2px);
            box-shadow: 0 2px 10px rgba(255, 111, 0, 0.3);
        }

        .draw-btn:disabled {
            background: #ccc;
            cursor: not-allowed;
            box-shadow: none;
            transform: none;
        }

        /* 獎項列表表格 */
        .prize-list {
            margin-top: 2rem;
            width: 100%;
            border-collapse: collapse;
            font-size: 0.9rem;
        }

        .prize-list th, .prize-list td {
            padding: 8px;
            border-bottom: 1px solid #eee;
            text-align: left;
        }
        
        .prize-list th {
            color: var(--primary-color);
        }
        
        .prize-list tr:last-child td {
            border-bottom: none;
        }

        /* 中獎時的閃爍動畫 */
        @keyframes winPulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.05); }
            100% { transform: scale(1); }
        }

        .winner-animation {
            animation: winPulse 0.5s ease-in-out infinite;
        }
    </style>
</head>
<body>

<div class="container">
    <h1>🎉 幸運大抽獎 🎉</h1>
    
    <div class="display-box" id="displayBox">
        <div class="prize-rank">準備好了嗎？</div>
        <div class="prize-name">點擊抽獎</div>
    </div>

    <button class="draw-btn" id="drawBtn" onclick="startLottery()">開始抽獎</button>

    <table class="prize-list">
        <thead>
            <tr>
                <th>獎項</th>
                <th>內容</th>
                <th style="text-align:right">機率</th>
            </tr>
        </thead>
        <tbody id="prizeTableBody">
            </tbody>
    </table>
</div>

<script>
    // 根據你提供的 CSV 資料建立獎項物件
    // 機率加總應為 1.0 (100%)
    const prizes = [
        { rank: "第 1 獎", name: "全單再9折", prob: 0.01 },
        { rank: "第 2 獎", name: "1000元抵用券", prob: 0.03 },
        { rank: "第 3 獎", name: "褶疊靜坐墊D75", prob: 0.10 },
        { rank: "第 4 獎", name: "500元抵用券", prob: 0.06 },
        { rank: "第 5 獎", name: "銀纖枕頭套", prob: 0.10 },
        { rank: "第 6 獎", name: "拍打棒", prob: 0.10 },
        { rank: "第 7 獎", name: "200元抵用券", prob: 0.20 },
        { rank: "第 8 獎", name: "100元刮刮樂", prob: 0.40 }
    ];

    const displayBox = document.getElementById('displayBox');
    const rankText = displayBox.querySelector('.prize-rank');
    const nameText = displayBox.querySelector('.prize-name');
    const drawBtn = document.getElementById('drawBtn');
    const tableBody = document.getElementById('prizeTableBody');

    // 初始化：渲染獎項列表
    function initTable() {
        prizes.forEach(p => {
            const row = document.createElement('tr');
            row.innerHTML = `
                <td>${p.rank}</td>
                <td>${p.name}</td>
                <td style="text-align:right">${(p.prob * 100).toFixed(0)}%</td>
            `;
            tableBody.appendChild(row);
        });
    }

    // 核心邏輯：加權隨機算法
    function getLotteryResult() {
        const random = Math.random(); // 0.0 ~ 1.0 之間的隨機數
        let cumulativeProb = 0;

        for (let prize of prizes) {
            cumulativeProb += prize.prob;
            if (random < cumulativeProb) {
                return prize;
            }
        }
        // 防止浮點數誤差導致沒有回傳，預設回傳最後一個獎項
        return prizes[prizes.length - 1];
    }

    // 抽獎流程
    function startLottery() {
        // 1. 鎖定按鈕
        drawBtn.disabled = true;
        displayBox.classList.remove('winner-animation');
        
        let count = 0;
        const totalDuration = 3000; // 動畫總時間 3秒
        const intervalTime = 50;    // 每 50ms 跳動一次
        const steps = totalDuration / intervalTime;
        
        // 2. 跑馬燈動畫效果
        const interval = setInterval(() => {
            // 隨機顯示一個獎項來製造視覺效果
            const randomPrize = prizes[Math.floor(Math.random() * prizes.length)];
            rankText.textContent = randomPrize.rank;
            nameText.textContent = randomPrize.name;
            rankText.style.color = '#999';
            nameText.style.color = '#333';
            
            count++;
            
            // 3. 動畫結束，顯示真正結果
            if (count >= steps) {
                clearInterval(interval);
                const finalPrize = getLotteryResult();
                
                // 顯示結果
                rankText.textContent = "恭喜獲得 " + finalPrize.rank;
                nameText.textContent = finalPrize.name;
                
                // 樣式強調
                rankText.style.color = '#d32f2f';
                nameText.style.color = '#d32f2f';
                displayBox.classList.add('winner-animation');
                
                // 釋放按鈕
                drawBtn.disabled = false;
                drawBtn.textContent = "再次抽獎";

                // 觸發彩帶特效
                fireConfetti();
            }
        }, intervalTime);
    }

    // 慶祝特效函數
    function fireConfetti() {
        if (typeof confetti === 'function') {
            confetti({
                particleCount: 150,
                spread: 70,
                origin: { y: 0.6 }
            });
        }
    }

    // 執行初始化
    initTable();

</script>

</body>
</html>