<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta name="keywords" content="活动抽奖,在线抽奖工具,免费抽奖,大屏抽奖活动">
	<meta name="description" content="企讯达活动抽奖，完全免费，支持名单导入、自定义标题、名额设置，适合快速发起基础抽奖。">
    <title>幸运大抽奖 v2.1</title>
    <style>
        body {
            background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
            height: 100vh;
            margin: 0;
            display: flex;
            font-family: 'Arial', sans-serif;
        }

        #resultContainer {
            width: 200px;
            background: rgba(255, 255, 255, 0.2);
            padding: 20px;
            overflow-y: auto;
			text-align:center;
        }

        #resultList {
            color: white;
			margin: auto;
        }

        #resultList th {
            text-align: left;
            padding: 8px;
            border-bottom: 2px solid white;
        }

        #resultList td {
            padding: 8px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);

        }

        .mainContent {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

        #countDisplay {
            color: white;
            font-size: 1.2em;
            margin-bottom: 10px;
        }

        #display {
            font-size: 4em;
            color: #fff;
            text-shadow: 0 0 20px rgba(0,0,0,0.3);
            margin: 30px 0;
            min-height: 120px;
            transition: all 0.3s;
            text-align: center;
        }

        .btn {
            padding: 15px 30px;
            font-size: 1.2em;
            margin: 20px;
            border: none;
            border-radius: 25px;
            cursor: pointer;
            background: #ffffff;
            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
        }

        audio { display: none; }
		        /* 新增样式：浮动礼盒 DIV */
        #giftBox {
            position: absolute;
            top: 60%;
            left: 57%;
            transform: translate(-50%, -50%);
            z-index: 1000;
            display: none;
            animation: float 5s ease-in-out;
        }

        @keyframes float {
            0% { opacity: 1; }
            80% { opacity: 1; }
            100% { opacity: 0; }
        }
		#settings-link {
            position: absolute;
            top: 10px;
            right: 10px;
            cursor: pointer;
            color: blue;
            text-decoration: underline;
        }
        #overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
        }
        #settings-window {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 500px;
            height: 430px;
            background: white;
            border-radius: 10px;
            box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
            overflow: hidden;
        }
        #settings-header {
            background: linear-gradient(90deg, #6dd5ed, #2193b0);
            color: white;
            padding: 15px;
            font-size: 18px;
            font-weight: bold;
        }
        #close-btn {
            position: absolute;
            top: 10px;
            right: 10px;
            cursor: pointer;
            font-size: 20px;
            color: white;
        }
        #close-btn:hover {
            color: #ffeb3b;
        }
        .input-group {
            margin: 20px auto;
            width: 75%;
        }
        .input-group label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
            color: #333;
        }
        .input-group input {
            width: 100%;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
            box-sizing: border-box;
            font-size: 14px;
        }
        #confirm-btn {
            display: block;
            margin: 20px auto;
            padding: 10px 30px;
            background: #2196f3;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 16px;
            transition: background 0.3s ease;
        }
        #confirm-btn:hover {
            background: #1976d2;
        }
    </style>
	    <style>
        /* 新增删除按钮样式 */
        #resultList td {
            position: relative;
            padding-right: 25px;
        }

        .delete-btn {
            position: absolute;
            right: 5px;
            top: 50%;
            transform: translateY(-50%);
            cursor: pointer;
            color: #ff4444;
            font-weight: bold;
            display: none;
            transition: all 0.2s;
        }

        tr:hover .delete-btn {
            display: inline-block;
        }

        .delete-btn:hover {
            color: #cc0000;
            transform: translateY(-50%) scale(1.2);
        }
    </style>
	 <style>
        .fixed-bottom {
            position: fixed;
            bottom: 0;
            left: 0;
            width: 200px;
            
            color: white;
            text-align: center;
            padding: 10px 20px 15px 20px;
            box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1);
        }
    </style>
</head>
<body>


    <div id="resultContainer">
        <h3 style="color: white;">中奖名单</h3>
        <table id="resultList">
            <thead>
                <tr><th>序号</th><th>姓 名</th></tr>
            </thead>
            <tbody id="resultBody">
            </tbody>
        </table>
		<div class="fixed-bottom"><a href="qiandao.html">微信扫码会议签到</a></div>
    </div>

    <div class="mainContent">
		<div id="settings-link" onclick="openSettings()">设置</div>
		<div id="page-title-display" style="text-align:center;font-size: 5em;color:#C71585;">企讯达幸运大抽奖</div>
        <div id="countDisplay">请点击导入名单按钮，选择txt或csv文本导入，一行一个姓名。</div>
        <div id="display">等待导入数据...</div>
        <input type="file" id="fileInput" accept=".csv,text/plain" hidden>
        <button class="btn" onclick="document.getElementById('fileInput').click()">📁 导入名单</button>
        <button class="btn" id="startBtn" onclick="toggleDraw()">🎉 开始抽奖</button>
    
        <audio id="scrollSound" src="1.mp3" loop></audio>
        <audio id="winSound" src="2.mp3"></audio>
		<div style="margin-top: 120px;font-size: 1.8em; color: white; margin-bottom: 20px;"><span id="currentDate"></span></div>
		<!-- 新增：浮动礼盒 DIV -->
        <div id="giftBox">
            <img src="gift-box.png" alt="大礼盒" style="width: 400px; height: 400px;">
        </div>
    </div>
	    

    <div id="overlay">
        <div id="settings-window">
            <div id="settings-header">
                <span>抽奖设置</span>
                <span id="close-btn" onclick="closeSettings()">X</span>
            </div>
            <div class="input-group">
                <label for="page-title">页面标题</label>
                <input type="text" id="page-title">
            </div>
            <div class="input-group">
                <label for="total-prizes">抽奖总数量</label>
                <input type="number" id="total-prizes">
            </div>
            <div class="input-group">
                <label for="prizes-per-draw">单次抽奖数量</label>
                <input type="number" id="prizes-per-draw">
            </div>
            <button id="confirm-btn" onclick="saveSettings()">确定</button>
			<div style="text-align:center;">
                <label for="total-prizes">软件定制联系QQ：35491331（微信同号）</label>

            </div>
        </div>
    </div>
    <script>
        let names = [];
        let isDrawing = false;
        let intervalId;
        let resultCounter = 1;
		let coun = 1 ;//单次抽取人数
		let zongshu=0;//待抽取总人数
		let renshu=0;//已中奖人数
		//var url = document.URL;
		//var n =url[url.length - 6];
		//if(n>0)coun = n ;
        document.getElementById('fileInput').addEventListener('change', function(e) {
            const file = e.target.files[0];
            if (!file) return;

            const reader = new FileReader();
            reader.onload = function(e) {
                try {
                    names = e.target.result.split('\n').map(name => name.trim()).filter(Boolean);
					// 修改点1: 导入时自动去重
                    names = [...new Set(e.target.result.split('\n')
                        .map(name => name.trim())
                        .filter(Boolean))];
					//----
                    if (names.length === 0) throw new Error('文件内容为空');
                    document.getElementById('startBtn').disabled = false;
                    document.getElementById('countDisplay').textContent = `已加载${names.length}个姓名`;
					document.getElementById('display').textContent ='等待抽奖...';
					zongshu=names.length;
                } catch (error) {
                    alert('文件读取失败，请确保是CSV或txt格式');
                }
            };
            reader.readAsText(file);
        });

        function getRandomNames(count) {
            const selected = new Set();
            while (zongshu>0 && selected.size < count && selected.size < names.length) {
                const randomIndex = Math.floor(Math.random() * names.length);
                selected.add(names[randomIndex]);
				zongshu=zongshu-1;
				renshu=renshu+1;
            }
            return Array.from(selected);
        }

        function addToResultList__(winners) {
            const tbody = document.getElementById('resultBody');
            winners.forEach(name => {
                const row = document.createElement('tr');
                row.innerHTML = `<td>${resultCounter++}</td><td>${name}</td>`;
                tbody.appendChild(row);
            });
        }

        function toggleDraw() {
			if (zongshu<=0)
			{
				return;
			}
            const btn = document.getElementById('startBtn');
            const display = document.getElementById('display');
            const scrollSound = document.getElementById('scrollSound');
            const winSound = document.getElementById('winSound');

            if (!isDrawing) {
                if (names.length < 5) return alert('至少需要5个姓名才能抽奖！');
                isDrawing = true;
                btn.textContent = '⏹ 停止抽奖';
                scrollSound.currentTime = 0;
                scrollSound.play();
                intervalId = setInterval(() => {
                    display.textContent = names[Math.floor(Math.random() * names.length)];
                }, 50);

                
            } else {
                clearInterval(intervalId);
                isDrawing = false;
                btn.textContent = '🎉 开始抽奖';
                scrollSound.pause();
                winSound.play();

                const winners = getRandomNames(coun);
                display.innerHTML = winners.join('&nbsp;&nbsp;&nbsp;&nbsp;');
                addToResultList(winners);
				// 修改点2: 移除已中奖姓名
                names = names.filter(name => !winners.includes(name));
                // 修改点3: 更新剩余人数显示
                document.getElementById('countDisplay').textContent = `已抽取${renshu}名中奖者，待抽取${zongshu}名`;
				// 显示礼盒图片
                giftBox.style.display = 'block';
                setTimeout(() => {
                    giftBox.style.display = 'none';
                }, 5000); // 5秒后隐藏
            }
        }
		function openSettings() {
            document.getElementById('overlay').style.display = 'block';
			document.getElementById('page-title').value=document.getElementById('page-title-display').innerText;
            document.getElementById('total-prizes').value=zongshu;
            document.getElementById('prizes-per-draw').value=coun;
        }

        function closeSettings() {
            document.getElementById('overlay').style.display = 'none';
        }

        function saveSettings() {
            const pageTitle = document.getElementById('page-title').value;
            const totalPrizes = document.getElementById('total-prizes').value;
            const prizesPerDraw = document.getElementById('prizes-per-draw').value;

            document.getElementById('page-title-display').innerText = pageTitle;
            zongshu= totalPrizes;
            coun = prizesPerDraw;

            closeSettings();
        }
    </script>
	    <script>
        // 修改后的添加中奖名单函数
        function addToResultList(winners) {
            const tbody = document.getElementById('resultBody');
            winners.forEach(name => {
                const row = document.createElement('tr');
                row.innerHTML = `
                    <td>${resultCounter}</td>
                    <td>
                        <span class="name">${name}</span>
                        <span class="delete-btn">×</span>
                    </td>
                `;
                tbody.appendChild(row);
                resultCounter++;
            });
        }

        // 新增：删除行并更新序号的功能
        document.getElementById('resultBody').addEventListener('click', function(e) {
            if (e.target.classList.contains('delete-btn')) {
                const row = e.target.closest('tr');
                row.remove();
				updateRowNumbers();

				zongshu=zongshu+1;
				renshu=renshu-1;
				document.getElementById('countDisplay').textContent = `已抽取${renshu}名中奖者，待抽取${zongshu}名`;
                
            }
        });

        function updateRowNumbers() {
            const rows = document.querySelectorAll('#resultBody tr');
            rows.forEach((row, index) => {
                row.cells[0].textContent = index + 1;
            });
            resultCounter = rows.length + 1;
        }
    </script>

	<script>
	 window.onload = function() {
    // 这里是你要自动运行的函数
		document.getElementById('currentDate').textContent = new Date().toLocaleDateString('zh-CN', { year: 'numeric', month: '2-digit', day: '2-digit' });
     };
    </script>
</body>
</html>