Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <title>Spin the Wheel - MysteryMart</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap'); | |
| * { | |
| font-family: 'Poppins', sans-serif; | |
| } | |
| .wheel-container { | |
| position: relative; | |
| width: 400px; | |
| height: 400px; | |
| margin: 0 auto; | |
| } | |
| #wheel { | |
| width: 100%; | |
| height: 100%; | |
| border-radius: 50%; | |
| position: relative; | |
| overflow: hidden; | |
| box-shadow: 0 0 0 10px #FFD700, 0 0 20px rgba(255, 215, 0, 0.5); | |
| transform: rotate(0deg); | |
| transition: transform 4s cubic-bezier(.17,.67,.83,.67); | |
| background: #1f003a; | |
| } | |
| .segment { | |
| position: absolute; | |
| width: 50%; | |
| height: 50%; | |
| top: 50%; | |
| left: 50%; | |
| transform-origin: 0% 0%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: flex-end; | |
| padding-right: 30px; | |
| font-size: 1rem; | |
| font-weight: bold; | |
| color: #fff; | |
| text-shadow: 1px 1px 3px rgba(0,0,0,0.7); | |
| } | |
| .pointer-container { | |
| position: absolute; | |
| top: -25px; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| z-index: 20; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| } | |
| #pointer { | |
| width: 0; | |
| height: 0; | |
| border-left: 25px solid transparent; | |
| border-right: 25px solid transparent; | |
| border-top: 40px solid #FFD700; | |
| filter: drop-shadow(0px 2px 3px rgba(0,0,0,0.3)); | |
| } | |
| .pointer-base { | |
| width: 50px; | |
| height: 25px; | |
| background: #FFD700; | |
| border-radius: 50% 50% 0 0; | |
| } | |
| .confetti { | |
| position: absolute; | |
| width: 15px; | |
| height: 15px; | |
| opacity: 0; | |
| z-index: 100; | |
| } | |
| @keyframes pulse { | |
| 0% { transform: scale(1); } | |
| 50% { transform: scale(1.05); } | |
| 100% { transform: scale(1); } | |
| } | |
| .pulse { | |
| animation: pulse 0.5s infinite; | |
| } | |
| .stop-pulse { | |
| animation: none; | |
| } | |
| .segment-icon { | |
| font-size: 1.5rem; | |
| margin-right: 5px; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gradient-to-br from-purple-900 via-indigo-900 to-blue-900 min-h-screen flex flex-col items-center justify-start py-10 px-4"> | |
| <!-- Header --> | |
| <header class="w-full max-w-4xl flex justify-between items-center mb-8"> | |
| <div class="flex items-center space-x-2"> | |
| <div class="w-10 h-10 rounded-full bg-yellow-400 flex items-center justify-center"> | |
| <i class="fas fa-gift text-purple-900 text-xl"></i> | |
| </div> | |
| <h1 class="text-2xl font-bold text-white">MysteryMart</h1> | |
| </div> | |
| <div class="flex space-x-4"> | |
| <button class="bg-purple-700 hover:bg-purple-600 text-white px-4 py-2 rounded-lg transition-all"> | |
| <i class="fas fa-user mr-2"></i>Login | |
| </button> | |
| <button class="bg-yellow-400 hover:bg-yellow-300 text-purple-900 px-4 py-2 rounded-lg transition-all"> | |
| <i class="fas fa-star mr-2"></i>Rewards | |
| </button> | |
| </div> | |
| </header> | |
| <!-- Main Content --> | |
| <main class="flex flex-col items-center w-full max-w-6xl"> | |
| <!-- Heading --> | |
| <div class="text-center mb-10"> | |
| <h1 class="text-4xl md:text-5xl font-extrabold text-transparent bg-clip-text bg-gradient-to-r from-yellow-300 via-yellow-400 to-yellow-500 mb-4"> | |
| 🎡 Spin & Win Rewards! | |
| </h1> | |
| <p class="text-lg text-purple-100 text-center max-w-2xl mb-6"> | |
| Test your luck! Spin the wheel and grab amazing rewards. | |
| Every user gets <span class="font-bold text-yellow-300">1 free spin per day</span>! | |
| </p> | |
| <div class="bg-purple-800 bg-opacity-50 rounded-xl p-4 inline-flex items-center space-x-2"> | |
| <div class="w-8 h-8 rounded-full bg-yellow-400 flex items-center justify-center"> | |
| <i class="fas fa-coins text-purple-900"></i> | |
| </div> | |
| <p class="text-white">Your spins: <span class="font-bold text-yellow-400">1</span></p> | |
| </div> | |
| </div> | |
| <div class="flex flex-col md:flex-row items-center justify-center w-full gap-10"> | |
| <!-- Wheel Container --> | |
| <div class="wheel-container"> | |
| <div class="pointer-container"> | |
| <div id="pointer"></div> | |
| <div class="pointer-base"></div> | |
| </div> | |
| <div id="wheel"> | |
| <!-- Segments --> | |
| <div class="segment bg-gradient-to-br from-yellow-500 to-yellow-600 rotate-[0deg]"> | |
| <i class="segment-icon fas fa-tag"></i> ₹100 OFF | |
| </div> | |
| <div class="segment bg-gradient-to-br from-pink-500 to-pink-600 rotate-[60deg]"> | |
| <i class="segment-icon fas fa-gift"></i> Free Box | |
| </div> | |
| <div class="segment bg-gradient-to-br from-blue-500 to-blue-600 rotate-[120deg]"> | |
| <i class="segment-icon fas fa-percent"></i> 5% OFF | |
| </div> | |
| <div class="segment bg-gradient-to-br from-gray-500 to-gray-600 rotate-[180deg]"> | |
| <i class="segment-icon fas fa-redo"></i> Try Again | |
| </div> | |
| <div class="segment bg-gradient-to-br from-orange-500 to-orange-600 rotate-[240deg]"> | |
| <i class="segment-icon fas fa-percent"></i> 10% OFF | |
| </div> | |
| <div class="segment bg-gradient-to-br from-red-500 to-red-600 rotate-[300deg]"> | |
| <i class="segment-icon fas fa-tag"></i> ₹200 OFF | |
| </div> | |
| </div> | |
| <!-- Decorative outer circle --> | |
| <div class="absolute -inset-4 border-4 border-yellow-400 border-opacity-40 rounded-full z-0"></div> | |
| <div class="absolute -inset-6 border-4 border-yellow-400 border-opacity-20 rounded-full z-0"></div> | |
| </div> | |
| <!-- Rewards Panel --> | |
| <div class="bg-gradient-to-b from-purple-800 to-indigo-900 rounded-2xl p-6 shadow-xl w-full max-w-md"> | |
| <h2 class="text-2xl font-bold text-yellow-300 mb-6 text-center">Your Rewards</h2> | |
| <div class="space-y-4 mb-8"> | |
| <div class="flex items-center justify-between p-4 bg-purple-700 bg-opacity-50 rounded-xl"> | |
| <div class="flex items-center space-x-3"> | |
| <div class="w-10 h-10 rounded-full bg-yellow-400 flex items-center justify-center"> | |
| <i class="fas fa-tag text-purple-900"></i> | |
| </div> | |
| <div> | |
| <p class="text-white font-medium">Discount Coupons</p> | |
| <p class="text-purple-200 text-sm">3 active</p> | |
| </div> | |
| </div> | |
| <button class="text-yellow-400 hover:text-yellow-300"> | |
| <i class="fas fa-chevron-right"></i> | |
| </button> | |
| </div> | |
| <div class="flex items-center justify-between p-4 bg-purple-700 bg-opacity-50 rounded-xl"> | |
| <div class="flex items-center space-x-3"> | |
| <div class="w-10 h-10 rounded-full bg-green-400 flex items-center justify-center"> | |
| <i class="fas fa-gift text-purple-900"></i> | |
| </div> | |
| <div> | |
| <p class="text-white font-medium">Free Mystery Boxes</p> | |
| <p class="text-purple-200 text-sm">1 available</p> | |
| </div> | |
| </div> | |
| <button class="text-yellow-400 hover:text-yellow-300"> | |
| <i class="fas fa-chevron-right"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="bg-purple-900 bg-opacity-60 rounded-xl p-4"> | |
| <h3 class="text-yellow-400 font-bold mb-2">Today's Special</h3> | |
| <p class="text-purple-200 text-sm">Spin now for double rewards chance!</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Spin Button --> | |
| <button id="spinBtn" | |
| class="mt-12 px-12 py-5 bg-gradient-to-r from-yellow-400 to-yellow-500 hover:from-yellow-500 hover:to-yellow-600 text-purple-900 text-xl font-extrabold rounded-full shadow-lg transform hover:scale-105 transition-all duration-300 pulse"> | |
| <i class="fas fa-sync-alt mr-3"></i> SPIN NOW | |
| </button> | |
| <!-- Result --> | |
| <div id="result" class="mt-8 p-6 bg-gradient-to-r from-purple-700 to-indigo-800 rounded-2xl shadow-xl max-w-md text-center hidden"> | |
| <div class="w-16 h-16 rounded-full bg-green-400 flex items-center justify-center mx-auto mb-4"> | |
| <i class="fas fa-trophy text-white text-2xl"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold text-white mb-2">Congratulations!</h3> | |
| <p class="text-purple-100">You've won: <span id="prizeText" class="text-yellow-400 font-bold text-xl"></span></p> | |
| <button class="mt-4 px-6 py-2 bg-white bg-opacity-20 text-white rounded-full hover:bg-opacity-30 transition"> | |
| Claim Reward | |
| </button> | |
| </div> | |
| </main> | |
| <!-- Info / FAQ --> | |
| <div class="mt-16 max-w-3xl text-center text-white/80"> | |
| <h2 class="text-2xl font-bold text-yellow-300 mb-6">✨ How it works</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6 text-left"> | |
| <div class="bg-purple-800 bg-opacity-40 p-5 rounded-xl"> | |
| <div class="w-12 h-12 rounded-full bg-yellow-400 flex items-center justify-center mb-3 mx-auto"> | |
| <i class="fas fa-sign-in-alt text-purple-900"></i> | |
| </div> | |
| <h3 class="font-semibold text-white mb-2 text-center">Login Daily</h3> | |
| <p class="text-purple-200 text-sm">Log in to your MysteryMart account to get your free daily spin</p> | |
| </div> | |
| <div class="bg-purple-800 bg-opacity-40 p-5 rounded-xl"> | |
| <div class="w-12 h-12 rounded-full bg-yellow-400 flex items-center justify-center mb-3 mx-auto"> | |
| <i class="fas fa-ticket-alt text-purple-900"></i> | |
| </div> | |
| <h3 class="font-semibold text-white mb-2 text-center">Instant Rewards</h3> | |
| <p class="text-purple-200 text-sm">Your reward will be automatically added to your wallet or coupons</p> | |
| </div> | |
| <div class="bg-purple-800 bg-opacity-40 p-5 rounded-xl"> | |
| <div class="w-12 h-12 rounded-full bg-yellow-400 flex items-center justify-center mb-3 mx-auto"> | |
| <i class="fas fa-share-alt text-purple-900"></i> | |
| </div> | |
| <h3 class="font-semibold text-white mb-2 text-center">Share & Earn</h3> | |
| <p class="text-purple-200 text-sm">Share your win with friends to earn extra spins</p> | |
| </div> | |
| <div class="bg-purple-800 bg-opacity-40 p-5 rounded-xl"> | |
| <div class="w-12 h-12 rounded-full bg-yellow-400 flex items-center justify-center mb-3 mx-auto"> | |
| <i class="fas fa-calendar-alt text-purple-900"></i> | |
| </div> | |
| <h3 class="font-semibold text-white mb-2 text-center">Daily Bonuses</h3> | |
| <p class="text-purple-200 text-sm">Come back every day for bigger rewards and special bonuses</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Confetti elements --> | |
| <div id="confetti-container" class="fixed inset-0 pointer-events-none z-50 overflow-hidden"></div> | |
| <script> | |
| const wheel = document.getElementById("wheel"); | |
| const btn = document.getElementById("spinBtn"); | |
| const result = document.getElementById("result"); | |
| const prizeText = document.getElementById("prizeText"); | |
| const confettiContainer = document.getElementById("confetti-container"); | |
| let currentRotation = 0; | |
| let isSpinning = false; | |
| // Create confetti elements | |
| function createConfetti() { | |
| confettiContainer.innerHTML = ''; | |
| const colors = ['#FFD700', '#FF4136', '#0074D9', '#2ECC40', '#B10DC9', '#FF851B']; | |
| for (let i = 0; i < 100; i++) { | |
| const confetti = document.createElement('div'); | |
| confetti.className = 'confetti'; | |
| confetti.style.left = Math.random() * 100 + 'vw'; | |
| confetti.style.top = '-20px'; | |
| confetti.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)]; | |
| confetti.style.width = (Math.random() * 15 + 5) + 'px'; | |
| confetti.style.height = (Math.random() * 15 + 5) + 'px'; | |
| confetti.style.borderRadius = Math.random() > 0.5 ? '50%' : '0'; | |
| confettiContainer.appendChild(confetti); | |
| // Animate confetti | |
| setTimeout(() => { | |
| confetti.style.transition = `top ${Math.random() * 2 + 2}s linear, left ${Math.random() * 1 + 1}s ease-in-out, opacity ${Math.random() * 1 + 1}s ease-in`; | |
| confetti.style.opacity = '1'; | |
| confetti.style.top = '100vh'; | |
| confetti.style.left = (parseFloat(confetti.style.left) + (Math.random() * 200 - 100)) + 'px'; | |
| setTimeout(() => { | |
| confetti.style.opacity = '0'; | |
| }, 2000); | |
| }, i * 30); | |
| } | |
| } | |
| btn.addEventListener("click", () => { | |
| if (isSpinning) return; | |
| isSpinning = true; | |
| // Remove pulse animation during spin | |
| btn.classList.remove('pulse'); | |
| // Hide previous result | |
| result.classList.add('hidden'); | |
| // Spin at least 3 turns (1080 deg) + random within 360 | |
| const spinDegrees = 1080 + Math.floor(Math.random() * 360); | |
| currentRotation += spinDegrees; | |
| wheel.style.transition = "transform 4s cubic-bezier(.17,.67,.83,.67)"; | |
| wheel.style.transform = `rotate(${currentRotation}deg)`; | |
| setTimeout(() => { | |
| // Get where we landed (0-360) | |
| const normalized = currentRotation % 360; | |
| let prize = ""; | |
| if (normalized >= 0 && normalized < 60) prize = "₹100 OFF"; | |
| else if (normalized >= 60 && normalized < 120) prize = "Free Box 🎁"; | |
| else if (normalized >= 120 && normalized < 180) prize = "5% OFF"; | |
| else if (normalized >= 180 && normalized < 240) prize = "Try Again 😢"; | |
| else if (normalized >= 240 && normalized < 300) prize = "10% OFF"; | |
| else prize = "₹200 OFF"; | |
| // Show result | |
| prizeText.innerText = prize; | |
| result.classList.remove('hidden'); | |
| // Add celebration for wins (not for Try Again) | |
| if (!prize.includes("Try Again")) { | |
| createConfetti(); | |
| } | |
| // Restore pulse animation | |
| setTimeout(() => { | |
| btn.classList.add('pulse'); | |
| }, 500); | |
| isSpinning = false; | |
| }, 4200); | |
| }); | |
| </script> | |
| </body> | |
| </html> |