Fetch Participants from the Database:
In Bubble, use a workflow or a Repeating Group to fetch data from the “Company” table. Make sure the table contains the participants.
html, body {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background-color: #f4f4f4;
}
.spiral-container {
perspective: 1000px;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: black;
}
.spiral {
position: relative;
width: 360px;
height: 360px;
transform-style: preserve-3d;
display: flex;
justify-content: center;
align-items: center;
}
.slice {
position: absolute;
width: 144px;
height: 72px;
border: 2px solid white;
border-radius: 10px;
display: flex;
justify-content: center;
align-items: center;
font-weight: bold;
font-size: 1rem;
color: white;
opacity: 0.9;
transform-origin: center;
}
/* Posicionamento das fatias retangulares */
.slice:nth-child(1) { transform: rotateX(calc(360deg / 10 * 0)) translateZ(180px); }
.slice:nth-child(2) { transform: rotateX(calc(360deg / 10 * 1)) translateZ(180px); }
.slice:nth-child(3) { transform: rotateX(calc(360deg / 10 * 2)) translateZ(180px); }
.slice:nth-child(4) { transform: rotateX(calc(360deg / 10 * 3)) translateZ(180px); }
.slice:nth-child(5) { transform: rotateX(calc(360deg / 10 * 4)) translateZ(180px); }
.slice:nth-child(6) { transform: rotateX(calc(360deg / 10 * 5)) translateZ(180px); }
.slice:nth-child(7) { transform: rotateX(calc(360deg / 10 * 6)) translateZ(180px); }
.slice:nth-child(8) { transform: rotateX(calc(360deg / 10 * 7)) translateZ(180px); }
.slice:nth-child(9) { transform: rotateX(calc(360deg / 10 * 8)) translateZ(180px); }
.slice:nth-child(10) { transform: rotateX(calc(360deg / 10 * 9)) translateZ(180px); }
/* Animação de giro lento */
@keyframes slow-spin {
0% { transform: rotateX(0deg); }
100% { transform: rotateX(360deg); } /* Rotação lenta */
}
/* Animação de giro rápido e aleatório */
.spiral.spin {
animation: spin var(--duration) cubic-bezier(0.42, 0, 0.58, 1); /* Bounce In aleatório */
}
@keyframes spin {
0% { transform: rotateX(0deg); }
100% { transform: rotateX(calc(var(--rotations) * 360deg)); }
}
#spin-button {
padding: 10px 20px;
background: #28a745;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
transition: background 0.3s;
margin-top: 20px;
}
#spin-button:hover {
background: #218838;
}
/* Estilo da contagem regressiva */
#countdown {
font-size: 24px;
font-weight: bold;
color: white;
margin-top: 20px;
text-align: center; /* Centraliza o texto */
}
</style>
<div class="spiral-container">
<div class="spiral" id="spiral">
<!-- Aqui você pode adicionar os nomes dos usuários dinamicamente -->
<div class="slice" style="background-color: #ff4d4d;">Usuário 1</div>
<div class="slice" style="background-color: #4dff4d;">Usuário 2</div>
<div class="slice" style="background-color: #4d4dff;">Usuário 3</div>
<div class="slice" style="background-color: #ffff4d;">Usuário 4</div>
<div class="slice" style="background-color: #ff4dff;">Usuário 5</div>
<div class="slice" style="background-color: #4dffff;">Usuário 6</div>
<div class="slice" style="background-color: #ff9c4d;">Usuário 7</div>
<div class="slice" style="background-color: #4d4dff;">Usuário 8</div>
<div class="slice" style="background-color: #9c4dff;">Usuário 9</div>
<div class="slice" style="background-color: #4dff9c;">Usuário 10</div>
</div>
<button id="spin-button" onclick="startCountdown()">Sortear</button>
<div id="countdown"></div>
</div>
<script>
let countdownValue = 20; // 20 segundos de contagem regressiva
let countdownInterval;
let users = ["Usuário 1", "Usuário 2", "Usuário 3", "Usuário 4", "Usuário 5", "Usuário 6", "Usuário 7", "Usuário 8", "Usuário 9", "Usuário 10"];
// Função para iniciar a contagem regressiva
function startCountdown() {
const countdownElement = document.getElementById('countdown');
const spinButton = document.getElementById('spin-button');
const spiral = document.getElementById('spiral');
// Esconde o botão Sortear
spinButton.style.display = 'none';
// Inicia o giro lento da roleta
spiral.style.animation = 'slow-spin 20s linear infinite';
// Adiciona a quebra de linha e centraliza o texto
countdownElement.innerHTML = `A roleta começa em:<br>${countdownValue} segundos`;
// Inicia o intervalo da contagem regressiva
countdownInterval = setInterval(() => {
countdownValue--;
countdownElement.innerHTML = `A roleta começa em:<br>${countdownValue} segundos`;
if (countdownValue <= 0) {
clearInterval(countdownInterval); // Para a contagem
countdownElement.innerText = ''; // Limpa a mensagem da tela
spinSpiral(); // Inicia a rotação rápida com bounce-in
}
}, 1000); // Intervalo de 1 segundo
}
// Função para girar a roleta com animação e vencedor aleatório
function spinSpiral() {
const spiral = document.getElementById('spiral');
spiral.style.animation = ''; // Reset da animação lenta
const totalSlices = users.length;
const rotations = Math.floor(Math.random() * 4) + 3; // Rotação aleatória entre 3 e 6 vezes
const winnerIndex = Math.floor(Math.random() * totalSlices); // Ganhador aleatório
const sliceAngle = 360 / totalSlices;
const finalRotation = (rotations * 360) + (winnerIndex * sliceAngle); // Calcula a rotação final para parar no ganhador
// Define a rotação aleatória e o tempo da animação
spiral.style.setProperty('--rotations', rotations);
spiral.style.setProperty('--duration', '4s');
setTimeout(() => {
spiral.classList.add('spin');
}, 10);
// Após a rotação rápida e animação aleatória
setTimeout(() => {
spiral.classList.remove('spin');
alert("O vencedor é: " + users[winnerIndex]); // Exibe o vencedor
}, 4000); // Tempo igual à duração da animação (4s)
}
</script>
