Tryag File Manager

/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">
            
            <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>

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>