<!doctype html>
<html lang="en">
<he
<title>Roleta da Sorte</
body {
margin: 0;
min-height: 100vh;
background: #111;
color: white;
font-family: Arial, sans-serif;
text-align: center;
padding: 25px 15px;
box-sizing: border-box;
}
h1 { color: #ffd700; }
.roleta-container {
position: relative;
width: min(85vw, 350px);
margin: 30px auto;
}
canvas {
width: 100%;
border-radius: 50%;
}
.seta {
position: absolute;
top: -8px;
left: 50%;
transform: translateX(-50%);
font-size: 35px;
color: white;
}
button {
background: #ffd700;
color: #111;
border: none;
padding: 15px 30px;
border-radius: 10px;
font-size: 18px;
font-weight: bold;
cursor: pointer;
}
button:disabled { opacity: .5; }
#resultado {
display: none;
position: fixed;
inset: 0;
background: #000c;
align-items: center;
justify-content: center;
padding: 20px;
}
.popup {
background: #222;
border: 2px solid #ffd700;
border-radius: 15px;
padding: 25px;
max-width: 350px;
}
#valor {
color: #ffd700;
font-size: 32px;
font-weight: bold;
}
.aviso {
color: #bbb;
font-size: 13px;
max-width: 350px;
margin: 25px auto;
}
</style>
</head>
<body>
<h1>🎉 Roleta da Sorte</h1>
<p>Gire e descubra o valor da sua rodada!</p>
<div class="roleta-container">
<div class="seta">▼</div>
<canvas id="roleta" width="400" height="400"></canvas>
</div>
<button id="girar">GIRAR ROLETA</button>
<p class="aviso">
Demonstração promocional. Os valores exibidos são ilustrativos
e não representam prêmios em dinheiro ou valores resgatáveis.
</p>
<div id="resultado">
<div class="popup">
<h2>Resultado da rodada</h2>
<p>Valor demonstrativo:</p>
<div id="valor"></div>
<p>Este resultado não representa um prêmio em dinheiro.</p>
<button onclick="fechar()">Fechar</button>
</div>
</div>
<script>
const valores = [
"R$ 50", "R$ 100", "R$ 200", "R$ 300",
"R$ 400", "R$ 3.000", "R$ 5.000", "R$ 10.000"
];
const canvas = document.getElementById("roleta");
const ctx = canvas.getContext("2d");
const tamanho = valores.length;
const fatia = Math.PI * 2 / tamanho;
let angulo = 0;
let girando = false;
function desenhar() {
ctx.clearRect(0, 0, 400, 400);
valores.forEach((valor, i) => {
const inicio = angulo + i * fatia;
ctx.beginPath();
ctx.moveTo(200, 200);
ctx.arc(200, 200, 195, inicio, inicio + fatia);
ctx.fillStyle = i % 2 ? "#222" : "#d4a900";
ctx.fill();
ctx.strokeStyle = "#fff";
ctx.lineWidth = 2;
ctx.stroke();
ctx.save();
ctx.translate(200, 200);
ctx.rotate(inicio + fatia / 2);
ctx.textAlign = "right";
ctx.fillStyle = i % 2 ? "#fff" : "#111";
ctx.font = "bold 20px Arial";
ctx.fillText(valor, 175, 7);
ctx.restore();
});
ctx.beginPath();
ctx.arc(200, 200, 35, 0, Math.PI * 2);
ctx.fillStyle = "#111";
ctx.fill();
}
function girar() {
if (girando) return;
girando = true;
document.getElementById("girar").disabled = true;
const inicio = angulo;
const destino = inicio + Math.PI * 2 * 6 + Math.random() * Math.PI * 2;
const duracao = 4000;
const tempoInicial = performance.now();
function animar(agora) {
const progresso = Math.min((agora - tempoInicial) / duracao, 1);
const suavizado = 1 - Math.pow(1 - progresso, 4);
angulo = inicio + (destino - inicio) * suavizado;
desenhar();
if (progresso < 1) {
requestAnimationFrame(animar);
} else {
girando = false;
document.getElementById("girar").disabled = false;
const posicao = ((-angulo % (Math.PI * 2)) + Math.PI * 2)
% (Math.PI * 2);
const indice = Math.floor(posicao / fatia);
document.getElementById("valor").textContent = valores[indice];
document.getElementById("resultado").style.display = "flex";
}
}
requestAnimationFrame(animar);
}
function fechar() {
document.getElementById("resultado").style.display = "none";
}
document.getElementById("girar").addEventListener("click", girar);
desenhar();
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Roleta da Sorte</title>
<style>
body {
margin: 0;
min-height: 100vh;
background: #111;
color: white;
font-family: Arial, sans-serif;
text-align: center;
padding: 25px 15px;
box-sizing: border-box;
}
h1 { color: #ffd700; }
.roleta-container {
position: relative;
width: min(85vw, 350px);
margin: 30px auto;
}
canvas {
width: 100%;
border-radius: 50%;
}
.seta {
position: absolute;
top: -8px;
left: 50%;
transform: translateX(-50%);
font-size: 35px;
color: white;
}
button {
background: #ffd700;
color: #111;
border: none;
padding: 15px 30px;
border-radius: 10px;
font-size: 18px;
font-weight: bold;
cursor: pointer;
}
button:disabled { opacity: .5; }
#resultado {
display: none;
position: fixed;
inset: 0;
background: #000c;
align-items: center;
justify-content: center;
padding: 20px;
}
.popup {
background: #222;
border: 2px solid #ffd700;
border-radius: 15px;
padding: 25px;
max-width: 350px;
}
#valor {
color: #ffd700;
font-size: 32px;
font-weight: bold;
}
.aviso {
color: #bbb;
font-size: 13px;
max-width: 350px;
margin: 25px auto;
}
</style>
</head>
<body>
<h1>🎉 Roleta da Sorte</h1>
<p>Gire e descubra o valor da sua rodada!</p>
<div class="roleta-container">
<div class="seta">▼</div>
<canvas id="roleta" width="400" height="400"></canvas>
</div>
<button id="girar">GIRAR ROLETA</button>
<p class="aviso">
Demonstração promocional. Os valores exibidos são ilustrativos
e não representam prêmios em dinheiro ou valores resgatáveis.
</p>
<div id="resultado">
<div class="popup">
<h2>Resultado da rodada</h2>
<p>Valor demonstrativo:</p>
<div id="valor"></div>
<p>Este resultado não representa um prêmio em dinheiro.</p>
<button onclick="fechar()">Fechar</button>
</div>
</div>
<script>
const valores = [
"R$ 50", "R$ 100", "R$ 200", "R$ 300",
"R$ 400", "R$ 3.000", "R$ 5.000", "R$ 10.000"
];
const canvas = document.getElementById("roleta");
const ctx = canvas.getContext("2d");
const tamanho = valores.length;
const fatia = Math.PI * 2 / tamanho;
let angulo = 0;
let girando = false;
function desenhar() {
ctx.clearRect(0, 0, 400, 400);
valores.forEach((valor, i) => {
const inicio = angulo + i * fatia;
ctx.beginPath();
ctx.moveTo(200, 200);
ctx.arc(200, 200, 195, inicio, inicio + fatia);
ctx.fillStyle = i % 2 ? "#222" : "#d4a900";
ctx.fill();
ctx.strokeStyle = "#fff";
ctx.lineWidth = 2;
ctx.stroke();
ctx.save();
ctx.translate(200, 200);
ctx.rotate(inicio + fatia / 2);
ctx.textAlign = "right";
ctx.fillStyle = i % 2 ? "#fff" : "#111";
ctx.font = "bold 20px Arial";
ctx.fillText(valor, 175, 7);
ctx.restore();
});
ctx.beginPath();
ctx.arc(200, 200, 35, 0, Math.PI * 2);
ctx.fillStyle = "#111";
ctx.fill();
}
function girar() {
if (girando) return;
girando = true;
document.getElementById("girar").disabled = true;
const inicio = angulo;
const destino = inicio + Math.PI * 2 * 6 + Math.random() * Math.PI * 2;
const duracao = 4000;
const tempoInicial = performance.now();
function animar(agora) {
const progresso = Math.min((agora - tempoInicial) / duracao, 1);
const suavizado = 1 - Math.pow(1 - progresso, 4);
angulo = inicio + (destino - inicio) * suavizado;
desenhar();
if (progresso < 1) {
requestAnimationFrame(animar);
} else {
girando = false;
document.getElementById("girar").disabled = false;
const posicao = ((-angulo % (Math.PI * 2)) + Math.PI * 2)
% (Math.PI * 2);
const indice = Math.floor(posicao / fatia);
document.getElementById("valor").textContent = valores[indice];
document.getElementById("resultado").style.display = "flex";
}
}
requestAnimationFrame(animar);
}
function fechar() {
document.getElementById("resultado").style.display = "none";
}
document.getElementById("girar").addEventListener("click", girar);
desenhar();
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Roleta da Sorte</title>
<style>
body {
margin: 0;
min-height: 100vh;
background: #111;
color: white;
font-family: Arial, sans-serif;
text-align: center;
padding: 25px 15px;
box-sizing: border-box;
}
h1 { color: #ffd700; }
.roleta-container {
position: relative;
width: min(85vw, 350px);
margin: 30px auto;
}
canvas {
width: 100%;
border-radius: 50%;
}
.seta {
position: absolute;
top: -8px;
left: 50%;
transform: translateX(-50%);
font-size: 35px;
color: white;
}
button {
background: #ffd700;
color: #111;
border: none;
padding: 15px 30px;
border-radius: 10px;
font-size: 18px;
font-weight: bold;
cursor: pointer;
}
button:disabled { opacity: .5; }
#resultado {
display: none;
position: fixed;
inset: 0;
background: #000c;
align-items: center;
justify-content: center;
padding: 20px;
}
.popup {
background: #222;
border: 2px solid #ffd700;
border-radius: 15px;
padding: 25px;
max-width: 350px;
}
#valor {
color: #ffd700;
font-size: 32px;
font-weight: bold;
}
.aviso {
color: #bbb;
font-size: 13px;
max-width: 350px;
margin: 25px auto;
}
</style>
</head>
<body>
<h1>🎉 Roleta da Sorte</h1>
<p>Gire e descubra o valor da sua rodada!</p>
<div class="roleta-container">
<div class="seta">▼</div>
<canvas id="roleta" width="400" height="400"></canvas>
</div>
<button id="girar">GIRAR ROLETA</button>
<p class="aviso">
Demonstração promocional. Os valores exibidos são ilustrativos
e não representam prêmios em dinheiro ou valores resgatáveis.
</p>
<div id="resultado">
<div class="popup">
<h2>Resultado da rodada</h2>
<p>Valor demonstrativo:</p>
<div id="valor"></div>
<p>Este resultado não representa um prêmio em dinheiro.</p>
<button onclick="fechar()">Fechar</button>
</div>
</div>
<script>
const valores = [
"R$ 50", "R$ 100", "R$ 200", "R$ 300",
"R$ 400", "R$ 3.000", "R$ 5.000", "R$ 10.000"
];
const canvas = document.getElementById("roleta");
const ctx = canvas.getContext("2d");
const tamanho = valores.length;
const fatia = Math.PI * 2 / tamanho;
let angulo = 0;
let girando = false;
function desenhar() {
ctx.clearRect(0, 0, 400, 400);
valores.forEach((valor, i) => {
const inicio = angulo + i * fatia;
ctx.beginPath();
ctx.moveTo(200, 200);
ctx.arc(200, 200, 195, inicio, inicio + fatia);
ctx.fillStyle = i % 2 ? "#222" : "#d4a900";
ctx.fill();
ctx.strokeStyle = "#fff";
ctx.lineWidth = 2;
ctx.stroke();
ctx.save();
ctx.translate(200, 200);
ctx.rotate(inicio + fatia / 2);
ctx.textAlign = "right";
ctx.fillStyle = i % 2 ? "#fff" : "#111";
ctx.font = "bold 20px Arial";
ctx.fillText(valor, 175, 7);
ctx.restore();
});
ctx.beginPath();
ctx.arc(200, 200, 35, 0, Math.PI * 2);
ctx.fillStyle = "#111";
ctx.fill();
}
function girar() {
if (girando) return;
girando = true;
document.getElementById("girar").disabled = true;
const inicio = angulo;
const destino = inicio + Math.PI * 2 * 6 + Math.random() * Math.PI * 2;
const duracao = 4000;
const tempoInicial = performance.now();
function animar(agora) {
const progresso = Math.min((agora - tempoInicial) / duracao, 1);
const suavizado = 1 - Math.pow(1 - progresso, 4);
angulo = inicio + (destino - inicio) * suavizado;
desenhar();
if (progresso < 1) {
requestAnimationFrame(animar);
} else {
girando = false;
document.getElementById("girar").disabled = false;
const posicao = ((-angulo % (Math.PI * 2)) + Math.PI * 2)
% (Math.PI * 2);
const indice = Math.floor(posicao / fatia);
document.getElementById("valor").textContent = valores[indice];
document.getElementById("resultado").style.display = "flex";
}
}
requestAnimationFrame(animar);
}
function fechar() {
document.getElementById("resultado").style.display = "none";
}
document.getElementById("girar").addEventListener("click", girar);
desenhar();
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Roleta da Sorte</title>
<style>
body {
margin: 0;
min-height: 100vh;
background: #111;
color: white;
font-family: Arial, sans-serif;
text-align: center;
padding: 25px 15px;
box-sizing: border-box;
}
h1 { color: #ffd700; }
.roleta-container {
position: relative;
width: min(85vw, 350px);
margin: 30px auto;
}
canvas {
width: 100%;
border-radius: 50%;
}
.seta {
position: absolute;
top: -8px;
left: 50%;
transform: translateX(-50%);
font-size: 35px;
color: white;
}
button {
background: #ffd700;
color: #111;
border: none;
padding: 15px 30px;
border-radius: 10px;
font-size: 18px;
font-weight: bold;
cursor: pointer;
}
button:disabled { opacity: .5; }
#resultado {
display: none;