Create a premium, cinematic “Double Spin Loot Box Module” for an online sweepstakes casino platform called Nioplay. This should be a single, complete hero-style UI scene rendered in a WIDESCREEN 16:9 ASPECT RATIO. The image should not look like a webpage screenshot — instead, it should look like a high-end product UI render designed for presentation and implementation.
60c16c9
verified
| /* Background Effects */ | |
| .bg-radial-gradient { | |
| background: radial-gradient(ellipse at center, #1a1a1a 0%, #0a0a0a 70%, #000000 100%); | |
| } | |
| .particle-field { | |
| background-image: | |
| radial-gradient(1px 1px at 10% 20%, rgba(255, 140, 0, 0.4), transparent), | |
| radial-gradient(1px 1px at 30% 50%, rgba(255, 215, 0, 0.3), transparent), | |
| radial-gradient(1px 1px at 70% 80%, rgba(255, 140, 0, 0.4), transparent); | |
| background-size: 200px 200px; | |
| animation: particles 15s linear infinite; | |
| } | |
| @keyframes particles { | |
| 0% { background-position: 0% 0%; } | |
| 100% { background-position: 100% 100%; } | |
| } | |
| /* Glassmorphism Effect */ | |
| .glass-effect { | |
| background: rgba(15, 15, 15, 0.6); | |
| backdrop-filter: blur(10px); | |
| -webkit-backdrop-filter: blur(10px); | |
| border: 1px solid rgba(255, 215, 0, 0.1); | |
| box-shadow: 0 8px 32px 0 rgba(255, 140, 0, 0.05); | |
| } | |
| /* Glow Effects */ | |
| .glow-effect { | |
| filter: drop-shadow(0 0 8px rgba(255, 140, 0, 0.7)); | |
| } | |
| .text-glow { | |
| text-shadow: 0 0 10px rgba(255, 215, 0, 0.7); | |
| } | |
| /* Animation for selected elements */ | |
| @keyframes pulse-glow { | |
| 0% { box-shadow: 0 0 0 0 rgba(255, 215, 0, 0.7); } | |
| 70% { box-shadow: 0 0 0 10px rgba(255, 215, 0, 0); } | |
| 100% { box-shadow: 0 0 0 0 rgba(255, 215, 0, 0); } | |
| } | |
| .pulse { | |
| animation: pulse-glow 2s infinite; | |
| } | |
| /* Track Styles */ | |
| .track { | |
| position: relative; | |
| height: 120px; | |
| background: rgba(20, 20, 20, 0.5); | |
| border-radius: 8px; | |
| border: 1px solid rgba(255, 140, 0, 0.2); | |
| box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.5); | |
| } | |
| .track::before { | |
| content: ''; | |
| position: absolute; | |
| inset: 0; | |
| background: linear-gradient(90deg, rgba(255, 140, 0, 0.1) 0%, transparent 50%, rgba(255, 140, 0, 0.1) 100%); | |
| } | |
| /* Selection Window */ | |
| .selection-window { | |
| position: absolute; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| height: 100%; | |
| width: 100px; | |
| border: 2px solid rgba(255, 140, 0, 0.8); | |
| border-radius: 8px; | |
| box-shadow: 0 0 20px rgba(255, 140, 0, 0.5); | |
| z-index: 10; | |
| } |