| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Loot Spin Deluxe</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <script src="https://unpkg.com/feather-icons"></script> |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
| <link rel="stylesheet" href="style.css"> |
| </head> |
| <body class="bg-gray-900 text-white"> |
| <custom-header></custom-header> |
| |
| <main class="container mx-auto px-4 py-12"> |
| <div class="max-w-4xl mx-auto bg-gray-800 rounded-2xl shadow-2xl overflow-hidden"> |
| |
| <section class="p-8 border-b border-gray-700"> |
| <h2 class="text-xl font-bold mb-6 flex items-center gap-2"> |
| <i data-feather="gift" class="text-orange-400"></i> |
| <span>Loot Box Spin</span> |
| </h2> |
| <div class="relative h-48 bg-gray-900 rounded-xl overflow-hidden"> |
| <div class="absolute inset-0 flex items-center justify-center"> |
| <div class="h-24 w-24 border-4 border-orange-400 rounded-xl shadow-lg shadow-orange-400/30 z-10"></div> |
| </div> |
| <div id="lootTrack" class="h-full flex items-center gap-8 px-16"> |
| |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="p-8 border-b border-gray-700"> |
| <h2 class="text-xl font-bold mb-6 flex items-center gap-2"> |
| <i data-feather="zap" class="text-yellow-400"></i> |
| <span>Multiplier</span> |
| </h2> |
| <div class="relative h-20 bg-gray-900 rounded-xl overflow-hidden"> |
| <div class="absolute inset-0 flex items-center justify-center"> |
| <div class="h-12 w-24 border-2 border-yellow-400 rounded-full shadow-lg shadow-yellow-400/30 z-10"></div> |
| </div> |
| <div id="multiTrack" class="h-full flex items-center gap-6 px-16"> |
| |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="p-8"> |
| <button id="spinBtn" class="w-full py-4 bg-gradient-to-r from-orange-500 to-yellow-500 rounded-xl font-bold text-lg shadow-lg hover:shadow-orange-500/30 transition-all duration-300 flex items-center justify-center gap-2"> |
| <i data-feather="rotate-cw"></i> |
| <span>SPIN TO WIN</span> |
| </button> |
| </section> |
| </div> |
| </main> |
|
|
| |
| <div id="resultModal" class="fixed inset-0 bg-black bg-opacity-80 hidden items-center justify-center z-50"> |
| <div class="bg-gray-800 rounded-2xl p-8 max-w-md w-full mx-4 relative overflow-hidden"> |
| <div class="absolute inset-0 bg-gradient-to-br from-orange-500/10 to-yellow-500/10"></div> |
| <div class="relative z-10"> |
| <h3 class="text-2xl font-bold mb-6 text-center">YOU WON!</h3> |
| <div class="text-center mb-8"> |
| <div id="resultAmount" class="text-5xl font-bold bg-gradient-to-r from-orange-400 to-yellow-400 bg-clip-text text-transparent mb-2">0 SC</div> |
| <div id="resultDetails" class="text-gray-400"></div> |
| </div> |
| <button id="closeModal" class="w-full py-3 bg-orange-500 rounded-lg font-bold hover:bg-orange-600 transition-colors"> |
| CLAIM PRIZE |
| </button> |
| </div> |
| </div> |
| </div> |
|
|
| <custom-footer></custom-footer> |
|
|
| <script src="components/header.js"></script> |
| <script src="components/footer.js"></script> |
| <script src="script.js"></script> |
| <script> |
| feather.replace(); |
| </script> |
| <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> |
| </body> |
| </html> |
