<!DOCTYPE html>
<html lang="pt">
<head>
<meta charset="UTF-8">
<title>Roleta Herbalife</title>
<style>
body {
background: #f2f2f2;
display: flex;
flex-direction: column;
align-items: center;
padding-top: 20px;
font-family: Arial, sans-serif;
}
#pointer {
width: 0; height: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-bottom: 25px solid #e63946;
margin-bottom: -5px;
}
#wheel {
width: 330px;
height: 330px;
transition: transform 4s cubic-bezier(0.2, 0.9, 0.1, 1);
}
#btn {
margin-top: 20px;
padding: 12px 30px;
background: #1fb586;
border: none;
border-radius: 8px;
font-size: 20px;
color: white;
cursor: pointer;
}
#result {
margin-top: 18px;
font-size: 22px;
font-weight: bold;
}
</style>
</head>
<body>
<div id="pointer"></div>
<!-- ROUELETE SVG BONITA E PERFEITA -->
<svg id="wheel" viewBox="0 0 100 100">
<!-- 5 FATIAS (cada uma 72º) -->
<g id="slices">
<path d="M50,50 L50,0 A50,50 0 0,1 94,29 Z" fill="#1fb586"></path>
<text x="70" y="18" font-size="5" transform="rotate(18 70 18)" text-anchor="middle" fill="#000">Mini Brinde</text>
<path d="M50,50 L94,29 A50,50 0 0,1 81,81 Z" fill="#e6e6e6"></path>
<text x="88" y="55" font-size="5" transform="rotate(90 88 55)" text-anchor="middle">15% Desconto</text>
<path d="M50,50 L81,81 A50,50 0 0,1 19,81 Z" fill="#f5d742"></path>
<text x="50" y="90" font-size="5" transform="rotate(162 50 90)" text-anchor="middle">Receita de Natal</text>
<path d="M50,50 L19,81 A50,50 0 0,1 6,29 Z" fill="#ff6f61"></path>
<text x="12" y="55" font-size="5" transform="rotate(234 12 55)" text-anchor="middle">Avaliação Bem-Estar</text>
<path d="M50,50 L6,29 A50,50 0 0,1 50,0 Z" fill="#b4f1d8"></path>
<text x="30" y="18" font-size="5" transform="rotate(306 30 18)" text-anchor="middle">Voucher Oferta</text>
</g>
<!-- CÍRCULO CENTRAL -->
<circle cx="50" cy="50" r="8" fill="#1fb586" stroke="#fff" stroke-width="1.5"></circle>
</svg>
<button id="btn">Girar</button>
<div id="result"></div>
<script>
const premios = [
"Mini Brinde",
"15% Desconto",
"Receita Exclusiva de Natal",
"Avaliação de Bem-Estar Gratuita",
"Voucher para Oferecer"
];
let rotation = 0;
document.getElementById("btn").onclick = () => {
const randomSpin = Math.floor(Math.random() * 360) + 720;
rotation += randomSpin;
document.getElementById("wheel").style.transform =
`rotate(${rotation}deg)`;
setTimeout(() => {
const deg = rotation % 360;
const index = Math.floor((360 - deg) / 72) % 5;
document.getElementById("result").innerText =
"🎁 Resultado: " + premios[index];
}, 4000);
};
</script>
</body>
</html>