html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Winner Draw</title>
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
margin: 0;
color: #333;
}
.container {
background: white;
padding: 2rem;
border-radius: 15px;
box-shadow: 0 10px 30px rgba(0,0,0,0.2);
text-align: center;
max-width: 500px;
width: 90%;
}
h1 {
color: #4a5568;
margin-bottom: 1.5rem;
}
textarea {
width: 100%;
height: 200px;
padding: 1rem;
border: 2px solid #e2e8f0;
border-radius: 10px;
font-size: 1rem;
resize: vertical;
margin-bottom: 1rem;
box-sizing: border-box;
}
textarea:focus {
outline: none;
border-color: #667eea;
}
button {
background: #667eea;
color: white;
border: none;
padding: 0.75rem 1.5rem;
border-radius: 10px;
font-size: 1rem;
cursor: pointer;
margin: 0 0.5rem;
transition: background 0.3s;
}
button:hover {
background: #5a67d8;
}
button.reset {
background: #e53e3e;
}
button.reset:hover {
background: #c53030;
}
#winner {
margin-top: 2rem;
min-height: 60px;
font-size: 1.5rem;
font-weight: bold;
color: #2d3748;
opacity: 0;
transform: translateY(20px);
transition: all 0.5s ease;
}
#winner.show {
opacity: 1;
transform: translateY(0);
animation: celebrate 1s ease-in-out;
}
@keyframes celebrate {
0% { transform: scale(0.5) rotate(-10deg); }
50% { transform: scale(1.2) rotate(10deg); }
100% { transform: scale(1) rotate(0deg); }
}
.confetti {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 1000;
}
.confetti-piece {
position: absolute;
width: 10px;
height: 10px;
background: #ff6b6b;
animation: confetti-fall 3s linear infinite;
}
.confetti-piece:nth-child(2) { background: #4ecdc4; animation-delay: 0.5s; }
.confetti-piece:nth-child(3) { background: #45b7d1; animation-delay: 1s; }
.confetti-piece:nth-child(4) { background: #96ceb4; animation-delay: 1.5s; }
.confetti-piece:nth-child(5) { background: #feca57; animation-delay: 2s; }
@keyframes confetti-fall {
0% { transform: translateY(-100vh) rotate(0deg); opacity: 1; }
100% { transform: translateY(100vh) rotate(360deg); opacity: 0; }
}
</style>
</head>
<body>
<div class="container">
<h1>Draw a Winner</h1>
<textarea id="participants" placeholder="Enter participant names, one per line..."></textarea>
<div>
<button onclick="drawWinner()">Draw Winner</button>
<button class="reset" onclick="reset()">Reset</button>
</div>
<div id="winner"></div>
</div>
<script>
let audioContext;
function drawWinner() {
const textarea = document.getElementById('participants');
const names = textarea.value.trim().split('\n').filter(name => name.trim() !== '');
if (names.length === 0) {
alert('Please enter some participants!');
return;
}
const winner = names[Math.floor(Math.random() * names.length)];
const winnerDiv = document.getElementById('winner');
winnerDiv.textContent = `Congratulations! Winner: ${winner}`;
winnerDiv.classList.add('show');
createConfetti();
playCelebration();
}
function reset() {
document.getElementById('participants').value = '';
document.getElementById('winner').textContent = '';
document.getElementById('winner').classList.remove('show');
document.querySelector('.confetti')?.remove();
}
function createConfetti() {
const confetti = document.createElement('div');
confetti.classList.add('confetti');
for (let i = 0; i < 50; i++) {
const piece = document.createElement('div');
piece.classList.add('confetti-piece');
piece.style.left = Math.random() * 100 + '%';
piece.style.animationDuration = (Math.random() * 3 + 2) + 's';
piece.style.animationDelay = Math.random() * 3 + 's';
confetti.appendChild(piece);
}
document.body.appendChild(confetti);
setTimeout(() => confetti.remove(), 5000);
}
function playCelebration() {
if (!audioContext) {
audioContext = new (window.AudioContext || window.webkitAudioContext)();
}
if (audioContext.state === 'suspended') {
audioContext.resume();
}
const notes = [
{ freq: 523.25, duration: 0.2 }, // C5
{ freq: 587.33, duration: 0.2 }, // D5
{ freq: 659.25, duration: 0.2 }, // E5
{ freq: 783.99, duration: 0.4 }, // G5
{ freq: 1046.50, duration: 0.6 } // C6
];
let time = 0;
notes.forEach(note => {
const oscillator = audioContext.createOscillator();
const gainNode = audioContext.createGain();
oscillator.connect(gainNode);
gainNode.connect(audioContext.destination);
oscillator.frequency.setValueAtTime(note.freq, audioContext.currentTime + time);
oscillator.type = 'sine';
gainNode.gain.setValueAtTime(0, audioContext.currentTime + time);
gainNode.gain.linearRampToValueAtTime(0.3, audioContext.currentTime + time + 0.01);
gainNode.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + time + note.duration);
oscillator.start(audioContext.currentTime + time);
oscillator.stop(audioContext.currentTime + time + note.duration);
time += note.duration;
});
}
</script>
</body>
</html>
