Tryag File Manager
Home
||
Turbo Force
||
B-F Config_Cpanel
Current Path :
/
home
/
ynormeco
/
.trash
/
ynormedemos
/
spinningwheel
/
Or
Select Your Path :
Upload File :
New :
File
Dir
/home/ynormeco/.trash/ynormedemos/spinningwheel/index.php
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Spinning Wheel</title> <style> body { display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100vh; margin: 0; background-color: #f4f4f4; } .wheel-container { position: relative; width: 300px; height: 300px; } .wheel { width: 100%; height: 100%; border-radius: 50%; border: 5px solid #333; position: absolute; background: conic-gradient( #ff5733 0% 10%, #ffbd33 10% 20%, #75ff33 20% 30%, #33fff6 30% 40%, #3338ff 40% 50%, #a633ff 50% 60%, #ff33ae 60% 70%, #ff3360 70% 80%, #ffc233 80% 90%, #75ff33 90% 100% ); transform: rotate(0deg); transition: transform 5s linear; } .number { position: absolute; width: 50px; height: 50px; line-height: 50px; text-align: center; font-size: 20px; font-weight: bold; color: #fff; transform-origin: 50% 150%; transform: rotate(0deg); } .indicator { position: absolute; top: -20px; left: 50%; transform: translateX(-50%); width: 20px; height: 40px; background: red; clip-path: polygon(50% 0%, 0% 100%, 100% 100%); z-index: 10; } .result { text-align: center; margin-top: 20px; font-size: 24px; font-weight: bold; } .spin-button { margin-top: 20px; padding: 10px 20px; font-size: 18px; cursor: pointer; } .spin-button:disabled { background-color: #ccc; cursor: not-allowed; } </style> </head> <body> <div class="wheel-container"> <div class="indicator"></div> <div class="wheel" id="wheel"> <!-- Add numbers to the wheel --> <div class="number" style="top: 10px; left: 130px; transform: rotate(0deg);">0</div> <div class="number" style="top: 10px; left: 130px; transform: rotate(36deg);">1</div> <div class="number" style="top: 10px; left: 130px; transform: rotate(72deg);">2</div> <div class="number" style="top: 10px; left: 130px; transform: rotate(108deg);">3</div> <div class="number" style="top: 10px; left: 130px; transform: rotate(144deg);">4</div> <div class="number" style="top: 10px; left: 130px; transform: rotate(180deg);">5</div> <div class="number" style="top: 10px; left: 130px; transform: rotate(216deg);">6</div> <div class="number" style="top: 10px; left: 130px; transform: rotate(252deg);">7</div> <div class="number" style="top: 10px; left: 130px; transform: rotate(288deg);">8</div> <div class="number" style="top: 10px; left: 130px; transform: rotate(324deg);">9</div> </div> </div> <button id="spinButton" class="spin-button">Spin the Wheel</button> <div class="result" id="result"></div> <script> document.addEventListener('DOMContentLoaded', () => { const wheel = document.getElementById('wheel'); const result = document.getElementById('result'); const spinButton = document.getElementById('spinButton'); spinButton.addEventListener('click', () => { spinButton.disabled = true; // Disable the button during spin result.textContent = ""; // Clear previous result // Fetch random number from server fetch('random_number.php') .then(response => response.text()) .then(randomNumber => { randomNumber = parseInt(randomNumber); // Ensure the response is a number const rotations = Math.floor(Math.random() * 5) + 5; // Random rotations const finalRotation = rotations * 360 + (randomNumber * 36); // Stop at the correct number // Start spinning the wheel wheel.style.transition = "transform 3s linear"; // Increase speed wheel.style.transform = `rotate(${finalRotation}deg)`; setTimeout(() => { result.textContent = `The wheel stopped on: ${randomNumber}`; spinButton.disabled = false; // Re-enable the button after spin }, 3000); // Show result after spinning stops (3 seconds duration) }) .catch(err => { console.error('Error fetching random number:', err); spinButton.disabled = false; // Re-enable button if error occurs }); }); }); </script> </body> </html>