<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Prize Wheel</title>
<style>
body {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
font-family: 'Arial', sans-serif;
}
.wheel-container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
gap: 2rem;
}
.wheel {
width: 400px;
height: 400px;
border-radius: 50%;
border: 15px solid #fff;
box-shadow: 0 0 40px rgba(0, 0, 0, 0.3);
position: relative;
transition: transform 4s cubic-bezier(0.17, 0.67, 0.12, 0.99);
}
.wheel-segment {
position: absolute;
width: 50%;
height: 50%;
transform-origin: 100% 100%;
clip-path: polygon(0 0, 100% 0, 100% 100%);
display: flex;
align-items: center;
justify-content: center;
}
.segment-text {
position: absolute;
left: 60%;
top: 30%;
transform: rotate(-22.5deg);
font-weight: bold;
color: white;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
font-size: 14px;
}
.pointer {
position: absolute;
top: -30px;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 40px solid #ff6b6b;
z-index: 10;
filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.3));
}
.center-circle {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 60px;
height: 60px;
background: white;
border-radius: 50%;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
z-index: 5;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
color: #667eea;
}
.spin-button {
padding: 15px 40px;
font-size: 18px;
font-weight: bold;
color: white;
background: linear-gradient(135deg, #ff6b6b, #ee5a6f);
border: none;
border-radius: 50px;
cursor: pointer;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
transition: transform 0.2s, box-shadow 0.2s;
}
.spin-button:hover {
transform: translateY(-2px);
box-shadow: 0 7px 25px rgba(0, 0, 0, 0.4);
}
.spin-button:active {
transform: translateY(0);
}
.spin-button:disabled {
opacity: 0.6;
cursor: not-allowed;
}
.result {
font-size: 24px;
color: white;
font-weight: bold;
text-align: center;
min-height: 30px;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}
</style>
</head>
<body>
<div class="wheel-container">
<div class="result" id="result"></div>
<div style="position: relative;">
<div class="pointer"></div>
<div class="wheel" id="wheel">
<div class="center-circle">SPIN</div>
</div>
</div>
<button class="spin-button" id="spinButton">Spin the Wheel!</button>
</div>
<script>
// Configure your prizes here
const prizes = [
'🎁 Prize 1',
'🏆 Prize 2',
'⭐ Prize 3',
'💎 Prize 4',
'🎯 Prize 5',
'🎪 Prize 6',
'🎨 Prize 7',
'🎭 Prize 8'
];
const colors = [
'#FF6B6B', '#4ECDC4', '#45B7D1', '#FFA07A',
'#98D8C8', '#F7DC6F', '#BB8FCE', '#85C1E2'
];
const wheel = document.getElementById('wheel');
const spinButton = document.getElementById('spinButton');
const resultDisplay = document.getElementById('result');
let currentRotation = 0;
let isSpinning = false;
// Create wheel segments
function createWheel() {
const segmentAngle = 360 / prizes.length;
prizes.forEach((prize, index) => {
const segment = document.createElement('div');
segment.className = 'wheel-segment';
segment.style.background = colors[index % colors.length];
segment.style.transform = `rotate(${segmentAngle * index}deg)`;
const text = document.createElement('div');
text.className = 'segment-text';
text.textContent = prize;
segment.appendChild(text);
wheel.appendChild(segment);
});
}
// Spin the wheel
function spinWheel() {
if (isSpinning) return;
isSpinning = true;
spinButton.disabled = true;
resultDisplay.textContent = '';
// Random spins between 5-10 full rotations plus random angle
const spins = 5 + Math.random() * 5;
const randomAngle = Math.random() * 360;
const totalRotation = (spins * 360) + randomAngle;
currentRotation += totalRotation;
wheel.style.transform = `rotate(${currentRotation}deg)`;
// Calculate winning segment
setTimeout(() => {
const normalizedRotation = currentRotation % 360;
const segmentAngle = 360 / prizes.length;
const winningIndex = Math.floor((360 - normalizedRotation + (segmentAngle / 2)) / segmentAngle) % prizes.length;
resultDisplay.textContent = `🎉 You won: ${prizes[winningIndex]}! 🎉`;
isSpinning = false;
spinButton.disabled = false;
}, 4000);
}
// Initialize
createWheel();
spinButton.addEventListener('click', spinWheel);
</script>
</body>
</html>