Create a 16:9 widescreen UI scene showing the entire “Double Spin Loot Box” sequence for Nioplay. Only include the loot box spin carousel, the “LOOT BOX SPIN” label, the multiplier slider, the “MULTIPLIER” label, one SPIN button, and the final prize pop-up. No extra text.
cfea9c9
verified
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Neon Loot Spinner</title> | |
| <link rel="stylesheet" href="style.css"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;700&display=swap'); | |
| body { | |
| font-family: 'Orbitron', sans-serif; | |
| background: radial-gradient(ellipse at center, #0f0f15 0%, #000000 100%); | |
| overflow: hidden; | |
| } | |
| </style> | |
| </head> | |
| <body class="h-screen w-full flex flex-col items-center justify-center overflow-hidden"> | |
| <div class="container mx-auto w-full max-w-4xl aspect-video relative"> | |
| <!-- Loot Box SPIN Section --> | |
| <div class="relative h-1/2 w-full"> | |
| <h2 class="text-orange-300 text-xl text-center mb-4 text-shadow-orange">LOOT BOX SPIN</h2> | |
| <div id="spinTrack" class="absolute h-32 w-full overflow-hidden"> | |
| <div id="lootBoxes" class="absolute h-full flex transition-transform duration-3000 ease-out"> | |
| <!-- Loot boxes will be generated by JS --> | |
| </div> | |
| <div class="selection-window absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"></div> | |
| </div> | |
| </div> | |
| <!-- Multiplier Section --> | |
| <div class="relative h-1/4 w-full pt-8"> | |
| <h2 class="text-orange-300 text-xl text-center mb-4 text-shadow-orange">MULTIPLIER</h2> | |
| <div id="multiplierTrack" class="relative h-12 w-full overflow-hidden"> | |
| <div id="multipliers" class="absolute h-full flex items-center"> | |
| <!-- Multipliers will be generated by JS --> | |
| </div> | |
| <div class="selection-window absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 h-16"></div> | |
| </div> | |
| </div> | |
| <!-- Spin Button --> | |
| <div class="relative h-1/4 w-full flex items-center justify-center pt-8"> | |
| <button id="spinButton" class="spin-button relative px-12 py-4 rounded-full text-xl font-bold text-white"> | |
| SPIN | |
| </button> | |
| </div> | |
| <!-- Prize Popup --> | |
| <div id="prizePopup" class="prize-popup hidden absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"> | |
| <div id="prizeValue" class="text-6xl font-bold text-yellow-300 text-shadow-gold"></div> | |
| </div> | |
| </div> | |
| <script src="script.js"></script> | |
| <script> | |
| feather.replace(); | |
| // Initialize the animations | |
| initLootBoxes(); | |
| initMultipliers(); | |
| </script> | |
| <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> | |
| </body> | |
| </html> |