Spaces:

openfree
/

testhtml

Running

App Files Files Community

openfree commited on Nov 14, 2024

Commit

c15970c

verified ·

1 Parent(s): c6207dc

Create roolet.html

Browse files

Files changed (1) hide show

roolet.html +273 -0

roolet.html ADDED Viewed

	@@ -0,0 +1,273 @@

+<!DOCTYPE html>
+<html>
+<head>
+    <title>Colorful Lucky Roulette</title>
+    <style>
+        body {
+            background: #1c1c1c;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            min-height: 100vh;
+            margin: 0;
+            font-family: 'Arial', sans-serif;
+        }
+        #roulette-container {
+            position: relative;
+            width: 500px;
+            height: 500px;
+            perspective: 1000px;
+        }
+        .roulette {
+            width: 100%;
+            height: 100%;
+            border-radius: 50%;
+            position: relative;
+            border: 15px solid #ffd700;
+            box-shadow:
+                0 0 30px rgba(255, 215, 0, 0.3),
+                inset 0 0 50px rgba(0,0,0,0.5);
+            transition: transform 4s cubic-bezier(0.17, 0.67, 0.12, 0.99);
+            background: conic-gradient(
+                #ff6b6b, #4ecdc4, #45b7d1, #96c93d,
+                #e056fd, #f7d794, #ff7675, #74b9ff,
+                #a8e6cf, #fdcb6e, #4834d4, #6c5ce7
+            );
+        }
+        .segment {
+            position: absolute;
+            width: 50%;
+            height: 2px;
+            top: 50%;
+            left: 50%;
+            transform-origin: left;
+            background: rgba(255,255,255,0.8);
+            box-shadow: 0 0 5px rgba(255,255,255,0.5);
+        }
+        .number {
+            position: absolute;
+            width: 45px;
+            height: 45px;
+            background: rgba(255,255,255,0.95);
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-weight: bold;
+            font-size: 18px;
+            transform-origin: center;
+            border: 2px solid #ffd700;
+            box-shadow: 0 0 10px rgba(0,0,0,0.3);
+            color: #222;
+        }
+        .prize {
+            position: absolute;
+            color: #fff;
+            transform-origin: center;
+            font-size: 14px;
+            font-weight: bold;
+            text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
+            white-space: nowrap;
+            background: rgba(0,0,0,0.4);
+            padding: 3px 8px;
+            border-radius: 15px;
+        }
+        .arrow {
+            position: absolute;
+            top: -40px;
+            left: 50%;
+            transform: translateX(-50%);
+            width: 0;
+            height: 0;
+            border-left: 25px solid transparent;
+            border-right: 25px solid transparent;
+            border-top: 40px solid #ffd700;
+            filter: drop-shadow(0 0 10px rgba(255,215,0,0.5));
+        }
+        #shoot-btn {
+            position: absolute;
+            bottom: -80px;
+            left: 50%;
+            transform: translateX(-50%);
+            padding: 15px 40px;
+            font-size: 22px;
+            background: linear-gradient(45deg, #ffd700, #ffeb3b);
+            color: #222;
+            border: none;
+            border-radius: 25px;
+            cursor: pointer;
+            transition: all 0.3s;
+            font-weight: bold;
+            box-shadow: 0 5px 15px rgba(255,215,0,0.3);
+        }
+        #shoot-btn:hover {
+            transform: translateX(-50%) scale(1.05);
+            box-shadow: 0 7px 20px rgba(255,215,0,0.4);
+        }
+        #result {
+            position: absolute;
+            top: -80px;
+            left: 0;
+            width: 100%;
+            text-align: center;
+            color: #ffd700;
+            font-size: 28px;
+            font-weight: bold;
+            opacity: 0;
+            transition: opacity 0.3s;
+            text-shadow: 0 0 10px rgba(255,215,0,0.5);
+        }
+        #result.show {
+            opacity: 1;
+        }
+        .center-dot {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            width: 30px;
+            height: 30px;
+            background: #ffd700;
+            border-radius: 50%;
+            transform: translate(-50%, -50%);
+            box-shadow: 0 0 20px rgba(255,215,0,0.5);
+        }
+        .glow {
+            position: absolute;
+            top: -10px;
+            left: -10px;
+            right: -10px;
+            bottom: -10px;
+            border-radius: 50%;
+            background: transparent;
+            border: 2px solid rgba(255,215,0,0.3);
+            animation: glowPulse 2s infinite;
+        }
+        @keyframes glowPulse {
+            0% { transform: scale(1); opacity: 0.5; }
+            50% { transform: scale(1.05); opacity: 0.8; }
+            100% { transform: scale(1); opacity: 0.5; }
+        }
+    </style>
+</head>
+<body>
+    <div id="roulette-container">
+        <div id="result"></div>
+        <div class="arrow"></div>
+        <div class="roulette">
+            <div class="glow"></div>
+            <div class="center-dot"></div>
+        </div>
+        <button id="shoot-btn">SHOOT! 🎯</button>
+    </div>
+    <script>
+        const roulette = document.querySelector('.roulette');
+        const shootBtn = document.getElementById('shoot-btn');
+        const result = document.getElementById('result');
+        const numSegments = 12;
+        const prizes = [
+            '꽝 😭', '1만원 💫', '3만원 ✨', '5만원 🌟',
+            '10만원 💎', '20만원 🎯', '30만원 🎨',
+            '40만원 🎭', '50만원 ⭐', '70만원 🌈',
+            '90만원 🏆', '100만원 👑'
+        ];
+        let shuffledPrizes = [...prizes];
+        function shufflePrizes() {
+            shuffledPrizes = [...prizes];
+            for (let i = shuffledPrizes.length - 1; i > 0; i--) {
+                const j = Math.floor(Math.random() * (i + 1));
+                [shuffledPrizes[i], shuffledPrizes[j]] = [shuffledPrizes[j], shuffledPrizes[i]];
+            }
+        }
+        function createRouletteSegments() {
+            const radius = 220;
+            const angleIncrement = (2 * Math.PI) / numSegments;
+            for (let i = 0; i < numSegments; i++) {
+                const segment = document.createElement('div');
+                segment.className = 'segment';
+                segment.style.transform = `rotate(${i * (360 / numSegments)}deg)`;
+                roulette.appendChild(segment);
+                const number = document.createElement('div');
+                number.className = 'number';
+                number.textContent = i + 1;
+                const angle = i * angleIncrement;
+                const x = Math.cos(angle) * radius + 230;
+                const y = Math.sin(angle) * radius + 230;
+                number.style.left = `${x}px`;
+                number.style.top = `${y}px`;
+                roulette.appendChild(number);
+                const prize = document.createElement('div');
+                prize.className = 'prize';
+                prize.textContent = shuffledPrizes[i];
+                const prizeRadius = radius - 60;
+                const prizeX = Math.cos(angle) * prizeRadius + 230;
+                const prizeY = Math.sin(angle) * prizeRadius + 230;
+                prize.style.left = `${prizeX}px`;
+                prize.style.top = `${prizeY}px`;
+                prize.style.transform = `translate(-50%, -50%) rotate(${i * (360 / numSegments)}deg)`;
+                roulette.appendChild(prize);
+            }
+        }
+        let isSpinning = false;
+        let currentRotation = 0;
+        shufflePrizes();
+        createRouletteSegments();
+        shootBtn.addEventListener('click', () => {
+            if (isSpinning) return;
+            isSpinning = true;
+            result.classList.remove('show');
+            shootBtn.style.opacity = '0.5';
+            shootBtn.style.cursor = 'not-allowed';
+            const randomSegment = Math.floor(Math.random() * numSegments);
+            const segmentAngle = (360 / numSegments) * randomSegment;
+            const extraSpins = 720 + Math.random() * 720;
+            const totalRotation = extraSpins + segmentAngle;
+            currentRotation += totalRotation;
+            roulette.style.transform = `rotate(${currentRotation}deg)`;
+            setTimeout(() => {
+                isSpinning = false;
+                result.textContent = `🎊 ${randomSegment + 1}번: ${shuffledPrizes[randomSegment]} 🎊`;
+                result.classList.add('show');
+                shootBtn.style.opacity = '1';
+                shootBtn.style.cursor = 'pointer';
+            }, 4000);
+        });
+        let baseRotation = 0;
+        function animate() {
+            if (!isSpinning) {
+                baseRotation += 0.2;
+                roulette.style.transform = `rotate(${baseRotation}deg)`;
+            }
+            requestAnimationFrame(animate);
+        }
+        animate();
+    </script>
+</body>
+</html>