<!DOCTYPE html>
<html lang="pt">
<head>
<meta charset="UTF-8">
<title>Roleta Herbalife</title>
<style>
body {
display: flex;
flex-direction: column;
align-items: center;
font-family: Arial, sans-serif;
margin-top: 40px;
}
#wheel {
width: 350px;
height: 350px;
border-radius: 50%;
border: 10px solid #1fb586;
position: relative;
overflow: hidden;
transition: transform 5s cubic-bezier(0.1, 0.8, 0.1, 1);
}
section {
position: absolute;
width: 50%;
height: 50%;
background: #eee;
transform-origin: 100% 100%;
display: flex;
justify-content: center;
align-items: center;
font-size: 14px;
padding: 10px;
text-align: center;
font-weight: bold;
}
#btn {
margin-top: 25px;
padding: 15px 35px;
background: #1fb586;
color: white;
border: none;
border-radius: 10px;
cursor: pointer;
font-size: 20px;
}
#pointer {
width: 0; height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 35px solid #e63946;
margin-bottom: -10px;
}
</style>
</head>
<body>
<div id="pointer"></div>
<div id="wheel"></div>
<button id="btn">Girar</button>
<h2 id="result"></h2>
<script>
// Premios Herbalife
const premios = [
"Mini Brinde",
"15% Desconto",
"Receita Exclusiva de Natal",
"Avaliação de Bem-Estar Gratuita",
"Voucher para Oferecer"
];
const cores = ["#1fb586", "#e8e8e8", "#f5d742", "#ff6f61", "#b4f1d8"];
const wheel = document.getElementById("wheel");
// Criar 5 secções da roleta
premios.forEach((p, i) => {
const slice = document.createElement("section");
slice.style.background = cores[i];
slice.style.transform = `rotate(${i * 72}deg) skewY(-18deg)`;
slice.innerHTML = p;
wheel.appendChild(slice);
});
let rotation = 0;
document.getElementById("btn").onclick = () => {
const randomSpin = Math.floor(Math.random() * 360) + 720; // gira 2 voltas + aleatório
rotation += randomSpin;
wheel.style.transform = `rotate(${rotation}deg)`;
// calcular resultado
setTimeout(() => {
const deg = rotation % 360;
const index = Math.floor((360 - deg) / 72) % 5;
document.getElementById("result").innerText =
"🎁 Resultado: " + premios[index];
}, 5200);
};
</script>
</body>
</html>