<!DOCTYPE html>

<head>

<title>2026 Lucky Draw Tournament | Pro Edition</title>

<style>

:root {

/* Modern Deep Gradient Background */

--bg-gradient: linear-gradient(135deg, #0f2027, #203a43, #2c5364);

/* Glassmorphism Variables */

--glass-bg: rgba(255, 255, 255, 0.05);

--glass-border: rgba(255, 255, 255, 0.1);

--glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);

/* Text & Accents */

--text-main: #f8fafc;

--text-muted: #94a3b8;

--gold: #fbbf24;

--gold-glow: rgba(251, 191, 36, 0.4);

/* Button Gradients */

--btn-success: linear-gradient(135deg, #11998e, #38ef7d);

--btn-success-hover: linear-gradient(135deg, #0f877d, #2bd96b);

--btn-secondary: linear-gradient(135deg, #475569, #334155);

}

body {

font-family: 'Kanit', sans-serif;

background: var(--bg-gradient);

background-attachment: fixed;

color: var(--text-main);

margin: 0;

padding: 40px 20px;

display: flex;

flex-direction: column;

align-items: center;

min-height: 100vh;

}

.container {

width: 100%;

max-width: 900px;

animation: fadeIn 0.8s ease-out;

}

.header {

text-align: center;

margin-bottom: 30px;

}

.header h1 {

font-size: 2.5rem;

font-weight: 700;

margin: 0;

text-transform: uppercase;

letter-spacing: 2px;

background: -webkit-linear-gradient(#fff, #cbd5e1);

-webkit-background-clip: text;

-webkit-text-fill-color: transparent;

text-shadow: 0px 4px 10px rgba(0,0,0,0.2);

}

/* Glassmorphism Cards */

.card {

background: var(--glass-bg);

backdrop-filter: blur(12px);

-webkit-backdrop-filter: blur(12px);

border-radius: 16px;

padding: 30px;

margin-bottom: 25px;

box-shadow: var(--glass-shadow);

border: 1px solid var(--glass-border);

}

/* Display Section (The Stage) */

.display-area {

text-align: center;

padding: 50px 20px;

border: 1px solid rgba(251, 191, 36, 0.3);

background: radial-gradient(circle at center, rgba(45,55,72,0.6) 0%, rgba(15,32,39,0.8) 100%);

box-shadow: inset 0 0 40px rgba(0,0,0,0.5), 0 8px 32px 0 rgba(0,0,0,0.37);

min-height: 180px;

display: flex;

flex-direction: column;

justify-content: center;

align-items: center;

}

.prize-info {

font-size: 20px;

font-weight: 400;

color: var(--text-muted);

margin-bottom: 25px;

letter-spacing: 0.5px;

}

.prize-info strong {

color: var(--text-main);

}

.winner-text {

font-size: 36px;

font-weight: 700;

color: var(--gold);

margin: 0;

display: flex;

flex-wrap: wrap;

justify-content: center;

gap: 20px;

}

.winner-badge {

background: rgba(0, 0, 0, 0.4);

padding: 12px 28px;

border-radius: 12px;

border: 1px solid var(--gold);

box-shadow: 0 0 15px var(--gold-glow);

transition: transform 0.2s;

}

.winner-badge:hover {

transform: scale(1.05);

}

/* Input & Controls Section */

label {

display: block;

margin-bottom: 10px;

font-size: 16px;

color: var(--text-main);

letter-spacing: 0.5px;

}

textarea {

width: 100%;

height: 140px;

background: rgba(0, 0, 0, 0.2);

color: var(--text-main);

border: 1px solid rgba(255, 255, 255, 0.2);

border-radius: 10px;

padding: 15px;

font-size: 15px;

font-family: 'Kanit', sans-serif;

box-sizing: border-box;

resize: vertical;

transition: border-color 0.3s;

}

textarea:focus {

outline: none;

border-color: var(--gold);

box-shadow: 0 0 10px rgba(251, 191, 36, 0.2);

}

.controls {

display: grid;

grid-template-columns: 2fr 2fr 1fr;

gap: 15px;

margin-top: 20px;

}

select, input[type="number"] {

font-family: 'Kanit', sans-serif;

padding: 14px;

border-radius: 10px;

border: 1px solid rgba(255, 255, 255, 0.2);

background-color: rgba(15, 32, 39, 0.9);

color: white;

font-size: 16px;

cursor: pointer;

transition: all 0.3s;

}

select:focus, input[type="number"]:focus {

outline: none;

border-color: #38ef7d;

}

button {

font-family: 'Kanit', sans-serif;

padding: 14px;

border-radius: 10px;

border: none;

color: white;

font-weight: 600;

font-size: 16px;

cursor: pointer;

transition: all 0.3s ease;

}

.btn-draw {

grid-column: span 3;

font-size: 22px;

padding: 18px;

background: var(--btn-success);

text-transform: uppercase;

letter-spacing: 1px;

box-shadow: 0 4px 15px rgba(56, 239, 125, 0.4);

}

.btn-draw:hover:not(:disabled) {

background: var(--btn-success-hover);

transform: translateY(-2px);

box-shadow: 0 6px 20px rgba(56, 239, 125, 0.6);

}

.btn-draw:active:not(:disabled) {

transform: translateY(1px);

}

button:disabled {

background: #475569;

box-shadow: none;

cursor: not-allowed;

opacity: 0.7;

}

/* History Section */

.history-header {

display: flex;

justify-content: space-between;

align-items: center;

margin-bottom: 20px;

border-bottom: 1px solid var(--glass-border);

padding-bottom: 15px;

}

.history-header h3 {

margin: 0;

font-weight: 500;

font-size: 1.2rem;

}

.btn-copy {

background: var(--btn-secondary);

font-size: 14px;

padding: 8px 16px;

}

.btn-copy:hover {

background: linear-gradient(135deg, #64748b, #475569);

transform: translateY(-1px);

}

.history-list {

list-style: none;

padding: 0;

margin: 0;

max-height: 350px;

overflow-y: auto;

padding-right: 5px;

}

/* Custom Scrollbar for History */

.history-list::-webkit-scrollbar {

width: 8px;

}

.history-list::-webkit-scrollbar-track {

background: rgba(255, 255, 255, 0.05);

border-radius: 10px;

}

.history-list::-webkit-scrollbar-thumb {

background: rgba(255, 255, 255, 0.2);

border-radius: 10px;

}

.history-list::-webkit-scrollbar-thumb:hover {

background: rgba(255, 255, 255, 0.4);

}

.history-item {

background: rgba(0, 0, 0, 0.2);

padding: 16px;

border-radius: 10px;

margin-bottom: 10px;

border: 1px solid var(--glass-border);

transition: background 0.2s;

}

.history-item:hover {

background: rgba(0, 0, 0, 0.3);

}

.history-item-top {

display: flex;

justify-content: space-between;

margin-bottom: 10px;

border-bottom: 1px solid rgba(255,255,255,0.05);

padding-bottom: 10px;

font-size: 14px;

color: var(--text-muted);

}

.history-winners {

color: var(--gold);

font-size: 16px;

font-weight: 500;

line-height: 1.6;

}

/* Mobile Responsiveness */

@media (max-width: 600px) {

.controls {

grid-template-columns: 1fr;

}

.btn-draw {

grid-column: span 1;

}

.header h1 {

font-size: 2rem;

}

.winner-text {

font-size: 24px;

}

/* Animations */

@keyframes fadeIn {

from { opacity: 0; transform: translateY(20px); }

to { opacity: 1; transform: translateY(0); }

}

</style>

</head>

<body>

<h1>VS Tournament Lucky Draw 2026</h1>

</div>

<div id="prizeDetails" class="prize-info">กรุณาเลือกรอบและรางวัลที่จะสุ่ม</div>

<span>รอการสุ่ม...</span>

</div>

<label><b>1) วางรายชื่อ / เลขบัตรผู้เข้าร่วม (1 บรรทัดต่อ 1 สิทธิ์)</b></label>

จำนวนผู้มีสิทธิ์: <strong id="participantCount" style="color: var(--text-main);">0</strong>

</div>

<option value="">-- เลือกรอบ --</option>

</select>

<option value="">-- เลือกรางวัล --</option>

</select>

<button class="btn-draw" id="drawBtn" onclick="startDraw()">เริ่มสุ่มรางวัล 🎉</button>

</div>

<h3>รายชื่อผู้โชคดี (ประวัติการสุ่ม)</h3>

<button class="btn-copy" onclick="copyHistory()">📋 คัดลอกผล</button>

</div>

</ul>

</div>

const drawStructure = {

"Day #1 (Lucky Draw #1)": [

{ id: "gold_3", name: "ทองคำ (ลำดับ 3)", total: 1, remaining: 1 },

{ id: "lotus500", name: "Voucher Lotus 500", total: 10, remaining: 10 },

{ id: "lotus200", name: "Voucher Lotus 200", total: 30, remaining: 30 }

"Day #2 (After lunch #2)": [

{ id: "gold_1", name: "ทองคำ (ลำดับ 1)", total: 1, remaining: 1 },

{ id: "lotus1000", name: "Voucher lotus 1,000", total: 10, remaining: 10 },

{ id: "lotus500", name: "Voucher Lotus 500", total: 5, remaining: 5 },

{ id: "lotus200", name: "Voucher Lotus 200", total: 30, remaining: 30 }

"Night #3": [

{ id: "gold_1", name: "ทองคำ (ลำดับ 1)", total: 1, remaining: 1 },

{ id: "gold_silver_2", name: "ทองคำ / เงิน (ลำดับ 2)", total: 1, remaining: 1 },

{ id: "lotus1000", name: "Voucher lotus 1,000", total: 5, remaining: 5 },

{ id: "lotus500", name: "Voucher Lotus 500", total: 10, remaining: 10 },

{ id: "lotus200", name: "Voucher Lotus 200", total: 40, remaining: 40 }

"Night #4": [

{ id: "gold_1", name: "ทองคำ (ลำดับ 1)", total: 1, remaining: 1 },

{ id: "gold_silver_2", name: "ทองคำ / เงิน (ลำดับ 2)", total: 1, remaining: 1 },

{ id: "gold_3", name: "ทองคำ (ลำดับ 3)", total: 1, remaining: 1 },

{ id: "lotus1000", name: "Voucher lotus 1,000", total: 5, remaining: 5 },

{ id: "lotus500", name: "Voucher Lotus 500", total: 8, remaining: 8 },

{ id: "lotus200", name: "Voucher Lotus 200", total: 40, remaining: 40 }

]

};

let participants = [];

let isDrawing = false;

let drawInterval;

let historyDataRaw = [];

window.onload = function() {

const roundSelect = document.getElementById('roundSelect');

for (let round in drawStructure) {

let option = document.createElement('option');

option.value = round;

option.text = round;

roundSelect.appendChild(option);

}

document.getElementById('participantInput').addEventListener('input', parseParticipants);

};

function parseParticipants() {

const text = document.getElementById('participantInput').value;

participants = text.split('\n').map(p => p.trim()).filter(p => p !== '');

document.getElementById('participantCount').innerText = participants.length;

}

function updatePrizeDropdown() {

const round = document.getElementById('roundSelect').value;

const prizeSelect = document.getElementById('prizeSelect');

const currentSelection = prizeSelect.value;

prizeSelect.innerHTML = '<option value="">-- เลือกรางวัล --</option>';

if (round && drawStructure[round]) {

drawStructure[round].forEach((prize, index) => {

let option = document.createElement('option');

option.value = index;

option.text = `${prize.name} (เหลือ ${prize.remaining}/${prize.total})`;

if (prize.remaining === 0) {

option.disabled = true;

}

prizeSelect.appendChild(option);

});

if (currentSelection !== "" && prizeSelect.options[parseInt(currentSelection) + 1]) {

prizeSelect.value = currentSelection;

}

updatePrizeInfo();

}

function updatePrizeInfo() {

const round = document.getElementById('roundSelect').value;

const prizeIdx = document.getElementById('prizeSelect').value;

const prizeDetails = document.getElementById('prizeDetails');

const drawCountInput = document.getElementById('drawCount');

if (round && prizeIdx !== "") {

const prize = drawStructure[round][prizeIdx];

prizeDetails.innerHTML = `รอบ: <strong>${round}</strong> | รางวัล: <strong>${prize.name}</strong> | คงเหลือ: <strong>${prize.remaining} / ${prize.total}</strong>`;

drawCountInput.max = prize.remaining;

if(parseInt(drawCountInput.value) > prize.remaining) {

drawCountInput.value = prize.remaining;

}

} else {

prizeDetails.innerHTML = 'กรุณาเลือกรอบและรางวัลที่จะสุ่ม';

}

function startDraw() {

if (isDrawing) return;

parseParticipants();

const round = document.getElementById('roundSelect').value;

const prizeIdx = document.getElementById('prizeSelect').value;

let count = parseInt(document.getElementById('drawCount').value);

if (!round || prizeIdx === "") {

alert("กรุณาเลือกรอบและรางวัลก่อนเริ่มสุ่ม!");

return;

}

if (participants.length === 0) {

alert("กรุณาใส่รายชื่อผู้เข้าร่วม!");

return;

}

const prize = drawStructure[round][prizeIdx];

if (prize.remaining <= 0) {

alert("รางวัลนี้ถูกสุ่มออกไปหมดแล้ว!");

return;

}

if (isNaN(count) || count < 1) count = 1;

if (count > prize.remaining) count = prize.remaining;

if (count > participants.length) {

alert("จำนวนที่ต้องการสุ่มมากกว่าจำนวนผู้มีสิทธิ์!");

return;

}

isDrawing = true;

document.getElementById('drawBtn').disabled = true;

document.getElementById('drawBtn').innerText = "กำลังสุ่ม... 🎲";

const winnerDisplay = document.getElementById('winnerDisplay');

let ticks = 0;

const maxTicks = 35;

drawInterval = setInterval(() => {

let tempDisplay = '';

for(let i=0; i<count; i++) {

let randomIdx = Math.floor(Math.random() * participants.length);

tempDisplay += `<span class="winner-badge" style="border-color: rgba(255,255,255,0.3); color: white; box-shadow: none;">${participants[randomIdx]}</span>`;

}

winnerDisplay.innerHTML = tempDisplay;

ticks++;

if (ticks >= maxTicks) {

clearInterval(drawInterval);

finalizeDraw(round, prize, count);

}

}, 80);

}

function finalizeDraw(round, prize, count) {

let winners = [];

for(let i=0; i<count; i++) {

let winIdx = Math.floor(Math.random() * participants.length);

winners.push(participants[winIdx]);

participants.splice(winIdx, 1);

}

document.getElementById('participantInput').value = participants.join('\n');

document.getElementById('participantCount').innerText = participants.length;

// Display final winners with neon success styling

let finalHtml = winners.map(w => `<span class="winner-badge" style="background: rgba(17, 153, 142, 0.2); border-color: #38ef7d; color: #38ef7d; box-shadow: 0 0 20px rgba(56, 239, 125, 0.4); transform: scale(1.05);">${w}</span>`).join('');

document.getElementById('winnerDisplay').innerHTML = finalHtml;

prize.remaining -= count;

updatePrizeDropdown();

addHistory(round, prize.name, winners);

isDrawing = false;

document.getElementById('drawBtn').disabled = false;

document.getElementById('drawBtn').innerText = "เริ่มสุ่มรางวัล 🎉";

}

function addHistory(round, prizeName, winners) {

const historyList = document.getElementById('historyList');

const timestamp = new Date().toLocaleTimeString('th-TH');

const li = document.createElement('li');

li.className = 'history-item';

const topDiv = document.createElement('div');

topDiv.className = 'history-item-top';

topDiv.innerHTML = `<span><strong>${round}</strong> - ${prizeName}</span> <span>⏱️ ${timestamp}</span>`;

const winnerDiv = document.createElement('div');

winnerDiv.className = 'history-winners';

winnerDiv.innerText = winners.join(' • '); // Using a dot separator for a cleaner look

li.appendChild(topDiv);

li.appendChild(winnerDiv);

historyList.prepend(li);

historyDataRaw.push(`[${timestamp}] ${round} | ${prizeName} : ${winners.join(', ')}`);

}

function copyHistory() {

if (historyDataRaw.length === 0) {

alert("ยังไม่มีประวัติการสุ่ม");

return;

}

const textToCopy = historyDataRaw.join('\n');

navigator.clipboard.writeText(textToCopy).then(() => {

alert("📋 คัดลอกประวัติเรียบร้อยแล้ว!");

}).catch(err => {

console.error('Could not copy text: ', err);

alert("เกิดข้อผิดพลาดในการคัดลอก");

});

}

</script>

</body>

</html>