Beneath the loot box spin carousel, add a SECOND horizontal RNG slider for the “Multiplier Roll.”
0a557cb
verified
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>LootBox Animation Concept</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/ScrollTrigger.min.js"></script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&display=swap'); | |
| </style> | |
| <link rel="stylesheet" href="style.css"> | |
| </head> | |
| <body class="bg-black overflow-hidden font-['Orbitron']"> | |
| <div class="relative w-full h-screen flex items-center justify-center"> | |
| <!-- Background Elements --> | |
| <div class="absolute inset-0 bg-gradient-to-b from-black to-gray-900 opacity-90 z-0"></div> | |
| <div class="particles absolute inset-0 z-10"></div> | |
| <!-- Main Animation Container --> | |
| <div id="animation-container" class="relative w-full max-w-4xl h-80 z-20"> | |
| <!-- Track --> | |
| <div class="absolute bottom-0 left-0 right-0 h-2 bg-gradient-to-r from-transparent via-amber-500/50 to-transparent rounded-full blur-sm"></div> | |
| <div class="absolute bottom-0 left-0 right-0 h-1.5 bg-gradient-to-r from-transparent via-amber-500/20 to-transparent rounded-full"></div> | |
| <!-- Loot Boxes --> | |
| <div id="loot-boxes" class="absolute bottom-10 left-0 flex space-x-8 transition-transform duration-1000"> | |
| <!-- Boxes will be generated via JS --> | |
| </div> | |
| <!-- Multiplier Track --> | |
| <div id="multiplier-track" class="absolute bottom-32 left-0 right-0 h-16 z-20"> | |
| <div id="multiplier-slider" class="absolute bottom-0 left-0 flex space-x-6 px-1/2 transition-transform duration-1000"> | |
| <div class="multiplier-pill">×1</div> | |
| <div class="multiplier-pill">×1.25</div> | |
| <div class="multiplier-pill">×1.5</div> | |
| <div class="multiplier-pill">×2</div> | |
| <div class="multiplier-pill">×3</div> | |
| <div class="multiplier-pill">×5</div> | |
| <div class="multiplier-pill">×1</div> | |
| <div class="multiplier-pill">×1.25</div> | |
| <div class="multiplier-pill">×1.5</div> | |
| <div class="multiplier-pill">×2</div> | |
| <div class="multiplier-pill">×3</div> | |
| <div class="multiplier-pill">×5</div> | |
| </div> | |
| <div class="multiplier-selection-frame"></div> | |
| <div class="absolute bottom-0 left-0 right-0 h-1 bg-gradient-to-r from-transparent via-amber-500/20 to-transparent rounded-full blur-sm"></div> | |
| </div> | |
| <!-- ROLL Button --> | |
| <div id="roll-button" class="absolute -bottom-16 left-1/2 transform -translate-x-1/2 px-10 py-3 bg-gradient-to-br from-amber-500 to-orange-600 rounded-full cursor-pointer shadow-lg shadow-amber-500/30 hover:shadow-amber-500/50 transition-all duration-300 group"> | |
| <span class="text-lg font-bold text-white tracking-widest">ROLL</span> | |
| <div class="absolute inset-0 rounded-full border-2 border-amber-300/50 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div> | |
| <div class="absolute -inset-1 rounded-full bg-amber-500 blur opacity-0 group-hover:opacity-50 transition-opacity duration-300"></div> | |
| </div> | |
| <!-- Light Effects --> | |
| <div class="light-beam absolute w-40 h-40 bg-amber-500/10 rounded-full blur-3xl -z-10"></div> | |
| <div class="light-beam-2 absolute w-60 h-60 bg-orange-500/5 rounded-full blur-3xl -z-10"></div> | |
| </div> | |
| </div> | |
| <script src="script.js"></script> | |
| <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> | |
| </body> | |
| </html> |