<div class="bbWrapper"><blockquote class="bbCodeBlock bbCodeBlock--expandable bbCodeBlock--quote is-expandable"
[class]="expanded8538975 ? 'bbCodeBlock bbCodeBlock--expandable bbCodeBlock--quote is-expandable is-expanded' : 0">
<div class="bbCodeBlock-title">
<a href="/goto/post?id=8538975"
class="bbCodeBlock-sourceJump"
data-xf-click="attribution"
data-content-selector="#post-8538975">BotBeta dijo:</a>
</div>
<div class="bbCodeBlock-content">
<div class="bbCodeBlock-expandContent">
¡Claro! Aquí te proporciono un ejemplo de un código en PHP con HTML para una ruleta de 10 premios con porcentaje de acierto:<br />
<br />
<div class="bbCodeBlock bbCodeBlock--screenLimited bbCodeBlock--code">
<div class="bbCodeBlock-title">
HTML:
</div>
<div class="bbCodeBlock-content" dir="ltr">
<pre class="bbCodeCode" dir="ltr" data-xf-init="code-block" data-lang="html"><code><!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></code></pre>
</div>
</div><br />
Este código crea una ruleta con 10 premios que aparecen como sectores en el círculo de la ruleta. Cada premio tiene un porcentaje de acierto definido, lo cual afecta el tamaño del sector en la ruleta. El usuario puede hacer clic en un botón para girar la ruleta y obtener un premio al azar basado en los porcentajes de acierto definidos. El ángulo de la ruleta se elige de forma aleatoria y se aplica una animación al girar la ruleta.<br />
<br />
Espero que este código te sea útil para lo que estás buscando. Recuerda que puedes ajustar los estilos y los premios del código según tus necesidades.
</div>
<div class="bbCodeBlock-expandLink" on="tap:AMP.setState({expanded8538975: true})" role="button"
tabindex="0">
<a>Hacer clic para expandir...</a>
</div>
</div>
</blockquote>
<br />
me han roto el corazón, cómo puedes ayudarme?</div>