<!DOCTYPE html>
<html>
<head>
<title>Ruleta de premios</title>
<style>
/* Estilos para el diseño de la ruleta */
.ruleta {
width: 300px;
height: 300px;
background-color: #f2f2f2;
border-radius: 50%;
position: relative;
margin: 0 auto;
overflow: hidden;
}
.sector {
width: 0;
height: 0;
position: absolute;
top: 0;
left: 0;
border-right: 150px solid transparent;
border-top: 150px solid #c72727;
border-left: 150px solid transparent;
border-bottom: 150px solid #c72727;
transform-origin: 150px 150px;
transition: 4s ease-out;
z-index: 5;
}
.premio {
position: absolute;
top: 10px;
left: 10px;
right: 10px;
bottom: 10px;
background-color: #fff;
border-radius: 50%;
border: 5px solid #f2f2f2;
display: flex;
justify-content: center;
align-items: center;
font-weight: bold;
font-size: 24px;
box-shadow: 0 0 5px rgba(0,0,0,0.2);
z-index: 10;
cursor: pointer;
transition: all 0.5s ease-out;
}
.premio:hover {
transform: scale(1.1);
box-shadow: 0 0 20px rgba(0,0,0,0.5);
z-index: 15;
}
.numero {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 36px;
font-weight: bold;
color: #fff;
text-shadow: 2px 2px #000;
}
/* Estilos para el botón de girar la ruleta */
.button {
display: block;
margin: 50px auto;
padding: 20px 50px;
background-color: #c72727;
color: #fff;
font-size: 24px;
font-weight: bold;
border: none;
border-radius: 50px;
cursor: pointer;
transition: all 0.5s ease-out;
}
.button:hover {
background-color: #fff;
color: #c72727;
box-shadow: 0 0 10px rgba(0,0,0,0.2);
}
</style>
</head>
<body>
<div class="ruleta">
<?php
// Definir los premios y sus respectivos porcentajes de acierto
$premios = array(
array('id' => 1, 'texto' => 'Premio 1', 'porcentaje' => 10),
array('id' => 2, 'texto' => 'Premio 2', 'porcentaje' => 10),
array('id' => 3, 'texto' => 'Premio 3', 'porcentaje' => 10),
array('id' => 4, 'texto' => 'Premio 4', 'porcentaje' => 10),
array('id' => 5, 'texto' => 'Premio 5', 'porcentaje' => 10),
array('id' => 6, 'texto' => 'Premio 6', 'porcentaje' => 10),
array('id' => 7, 'texto' => 'Premio 7', 'porcentaje' => 10),
array('id' => 8, 'texto' => 'Premio 8', 'porcentaje' => 10),
array('id' => 9, 'texto' => 'Premio 9', 'porcentaje' => 10),
array('id' => 10, 'texto' => 'Premio 10', 'porcentaje' => 10),
);
// Calcular los grados y los sectores para cada premio
$grados = 0;
foreach ($premios as $premio) {
$grados += $premio['porcentaje'] * 3.6;
echo '<div class="premio" style="transform: rotate('.$grados.'deg);">
<span class="numero">'.$premio['id'].'</span>
<p>'.$premio['texto'].'</p>
<div class="sector" style="transform: rotate(-'.$grados.'deg);"></div>
</div>';
}
// Calcular el ángulo de la ruleta
$angulo = $grados - 180;
?>
</div>
<button class="button" id="girar">¡Girar la ruleta!</button>
<script>
// Añadir funcionalidad para girar la ruleta
var ruleta = document.querySelector('.ruleta');
var botonGirar = document.querySelector('#girar');
var sectores = document.querySelectorAll('.sector');
var angulo = <?php echo $angulo; ?>;
botonGirar.addEventListener('click', () => {
// Generar un ángulo aleatorio entre -180 y 180 grados
var anguloAleatorio = angulo + Math.floor(Math.random() * 360 - 180);
ruleta.style.transform = 'rotate(' + anguloAleatorio + 'deg)';
sectores.forEach(sector => sector.style.transform = 'rotate(' + (-anguloAleatorio) + 'deg)');
});
</script>
</body>
</html>
