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.

This module contains TWO stacked RNG systems:
1) A primary horizontal loot box spin roller (Stake.com style).
2) A secondary horizontal multiplier slider styled as a sleek, glowing meter.

A final REWARD POP-UP must appear once both spins finish.

-----

### OVERALL VISUAL STYLE:
- Theme: Premium sweepstakes gaming mixed with cinematic neon energy.
- Color palette: Deep black and charcoal base, neon orange (#FF8C00) accents, warm gold (#FFCC66 and #FFD700) for highlights.
- Lighting: Subtle volumetric glow behind the tracks, amber light beams, light mist particles, and faint sparks around active elements.
- UI theme: Modern, glassmorphism, futuristic but still clean. No cartoon style. Realistic rendering with premium digital surfaces.
- Depth: Soft shadows, floating elements, layered UI panels, blurred backgrounds.

Background must be:
- A deep black-to-warm radial gradient.
- Soft glowing embers and floating particles.
- No patterns, no clutter.

-----

### 1. HEADER TITLE SECTION:
Place this at the top center or slightly left-aligned within the module.

- Title: “MYSTERY LOOT BOX ROLL”
- All caps, bold, gold-to-warm white gradient fill.
- Soft glow and subtle extruded shadow.
- Subtitle under it:
“Spin across the mystery boxes, unlock a random reward, then boost it with a multiplier roll.”
- Smaller, clean sans-serif, dim warm-grey color.
- To the right: a glassmorphic badge reading:
“Today’s Legendary Chance: +3%”
- Rounded-pill shape, translucent black, thin neon orange rim, soft internal glow.

-----

### 2. PRIMARY LOOT BOX CAROUSEL (TOP SPIN):
This is the main attraction section.

**Structure:**
- A long horizontal track (glassmorphic panel) that extends across most of the 16:9 width.
- The track should feel like a glossy, futuristic shelf or digital rail.
- Slight inner glow and reflective surface.

**Loot Boxes:**
- Display 10–14 boxes shown horizontally.
- Spaced evenly.
- Each box should be floating slightly above the track.
- Box style: metallic + glass hybrid design, with lit seams and embossed SC coin symbol.
- Rarity glows:
- Common: green halo glow
- Rare: cool blue glow
- Epic: purple glow
- Legendary: intense gold/orange glow, brighter outline
- Beneath each box, small rarity labels (e.g., “EPIC”) in tiny uppercase text.

**Selection Window:**
- A vertical glowing frame at the exact center of the track.
- Rounded rectangle, transparent inside, thin neon-orange border.
- Purpose: the selected box must land perfectly centered within this frame.

**Motion Indicators:**
- Slight motion blur on boxes not centered.
- Light streaks or trailing ghosts implying the boxes can slide quickly.
- One box should appear “final selected”: slightly larger, glowing brighter, centered in the selection window, and partially opening with a cinematic burst of light and floating SC coins.

-----

### 3. PRIMARY CTA (BUTTON) + STATUS:
Centered below the loot box track.

- Big button labeled “ROLL”
- Wide, rounded pill.
- Golden-to-orange gradient.
- Strong outer glow.
- Inner highlight.
- Slight depth and shadow.
- Status text below or beside the button:
- Example: “Status: Rolling…” or “Selected: Legendary Loot Box”
- Clean, small, warm-grey text.

-----

### 4. SECONDARY MULTIPLIER SLIDER (METER-STYLE) – UNDERNEATH THE LOOT TRACK:
This is the second RNG component.

**Style:**
- Minimalistic.
- Sleek.
- Meter-like horizontal strip — NOT boxes or icons.

**Structure:**
- A long, thin horizontal track.
- Inside it, a row of glowing “multiplier pills” scrolling horizontally.
- Multipliers (repeat the sequence twice for realism):
- ×1
- ×1.25
- ×1.5
- ×2
- ×3
- ×5

Each multiplier pill:
- Soft pill shape, slightly rounded rectangle.
- Glassmorphism: translucent black with blur.
- Thin white or gold highlight.
- Multiplier text in bold warm-white/gold, glowing faintly.
- Slight reflection and soft shadow.

**Multiplier Selection Window:**
- A small glowing rectangular frame at the center of this track.
- Thin neon-orange border.
- This frame indicates which multiplier is “picked.”

**Motion Visualization:**
- Show horizontal scrolling implied through blur.
- Far left/right pills slightly stretched/blurred to mimic speed.
- The selected pill should be perfectly centered, slightly enlarged, glowing neon orange, and pulsing softly.

-----

### 5. FINAL REWARD POP-UP (MANDATORY):
Once both spins finish, a reward modal must appear in the scene — like a celebration pop-up.

**Pop-up Style:**
- Floating glassmorphism window.
- Centered on screen OR slightly above the CTA area.
- Thick neon-orange rim glow.
- Soft backdrop blur behind it.

**Pop-up Contents:**
- Title: “WIN REVEALED!”
- Bold, gold gradient, glowing.
- Subtext summarizing the combined result:
- “Base Reward: 30 SC”
- “Multiplier: ×2”
- “Final Payout: 60 SC”
- Arrange in a clean, stacked layout.
- The final payout (“60 SC”) should be larger, glowing neon gold/orange, with small floating SC coins around it.
- Optional: confetti particles (warm gold/amber), subtle trails, glowing sparks.
- Include a “Continue” button:
- Small pill, gold gradient, soft glow.
- Not overpowering; just functional.

**Visual Behavior:**
- The pop-up should appear as if it animated into place.
- Slight upward float, fade-in, and glow bloom shown in the render.

-----

### 6. OVERALL COMPOSITION & REQUIREMENTS:
- MUST be rendered in a **16:9 WIDESCREEN** format.
- The scene should appear as a complete UI module.
- Clear hierarchy:
- Loot box spin → Multiplier slider → Result pop-up.
- Use depth, glow, and cinematic design to make it feel like a premium sweepstakes feature inside Nioplay.
- No browser UI, no device frames.
- Image should feel like a polished concept deliverable ready for developers.

The final output should look like the fully designed, production-ready “Double Spin Loot Box Feature” for Nioplay, complete with the loot box spinner, multiplier slider, and reward pop-up all visible in the same 16:9 composition.

README.md

@@ -1,10 +1,13 @@
 ---
-title: Nioplay Double Fortune Spin Vault
-emoji: 📉
-colorFrom: red
-colorTo: blue
+title: Nioplay Double Fortune Spin Vault 🔮🎰
+colorFrom: blue
+colorTo: yellow
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).

components/loot-box.js

@@ -0,0 +1,216 @@
+class LootBoxCarousel extends HTMLElement {
+    constructor() {
+        super();
+        this.boxes = [
+            { rarity: 'common', value: 5, color: 'green' },
+            { rarity: 'common', value: 5, color: 'green' },
+            { rarity: 'common', value: 10, color: 'green' },
+            { rarity: 'rare', value: 15, color: 'blue' },
+            { rarity: 'rare', value: 20, color: 'blue' },
+            { rarity: 'epic', value: 30, color: 'purple' },
+            { rarity: 'legendary', value: 50, color: 'gold' },
+            { rarity: 'epic', value: 25, color: 'purple' },
+            { rarity: 'rare', value: 15, color: 'blue' },
+            { rarity: 'common', value: 10, color: 'green' }
+        ];
+        this.selectedIndex = 0;
+    }
+
+    connectedCallback() {
+        this.attachShadow({ mode: 'open' });
+        this.render();
+    }
+
+    render() {
+        this.shadowRoot.innerHTML = `
+            <style>
+                :host {
+                    display: block;
+                    width: 100%;
+                    position: relative;
+                    height: 180px;
+                    margin-bottom: 20px;
+                }
+                
+                .track {
+                    position: relative;
+                    height: 100%;
+                    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);
+                    overflow: hidden;
+                }
+                
+                .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%);
+                }
+                
+                .boxes-container {
+                    position: absolute;
+                    display: flex;
+                    height: 100%;
+                    align-items: center;
+                    gap: 20px;
+                    padding: 0 50%;
+                    will-change: transform;
+                    transition: transform 0.1s linear;
+                }
+                
+                .loot-box {
+                    width: 100px;
+                    height: 100px;
+                    border-radius: 8px;
+                    display: flex;
+                    flex-direction: column;
+                    justify-content: center;
+                    align-items: center;
+                    position: relative;
+                    transition: all 0.3s ease;
+                    z-index: 5;
+                }
+                
+                .loot-box.common {
+                    background: rgba(30, 30, 30, 0.8);
+                    border: 2px solid var(--premium-green);
+                    box-shadow: 0 0 15px var(--premium-green);
+                }
+                
+                .loot-box.rare {
+                    background: rgba(30, 30, 30, 0.8);
+                    border: 2px solid var(--premium-blue);
+                    box-shadow: 0 0 15px var(--premium-blue);
+                }
+                
+                .loot-box.epic {
+                    background: rgba(30, 30, 30, 0.8);
+                    border: 2px solid var(--premium-purple);
+                    box-shadow: 0 0 20px var(--premium-purple);
+                }
+                
+                .loot-box.legendary {
+                    background: rgba(30, 30, 30, 0.8);
+                    border: 2px solid var(--premium-gold);
+                    box-shadow: 0 0 25px var(--premium-gold);
+                }
+                
+                .loot-box.selected {
+                    transform: scale(1.2);
+                    z-index: 10;
+                }
+                
+                .loot-box.selected.common {
+                    box-shadow: 0 0 25px var(--premium-green);
+                }
+                
+                .loot-box.selected.rare {
+                    box-shadow: 0 0 30px var(--premium-blue);
+                }
+                
+                .loot-box.selected.epic {
+                    box-shadow: 0 0 35px var(--premium-purple);
+                }
+                
+                .loot-box.selected.legendary {
+                    box-shadow: 0 0 40px var(--premium-gold);
+                }
+                
+                .box-icon {
+                    font-size: 24px;
+                    margin-bottom: 5px;
+                }
+                
+                .rarity {
+                    font-size: 10px;
+                    text-transform: uppercase;
+                    font-weight: bold;
+                    margin-top: 5px;
+                }
+                
+                .selection-window {
+                    position: absolute;
+                    left: 50%;
+                    transform: translateX(-50%);
+                    height: 120px;
+                    width: 120px;
+                    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: 4;
+                    pointer-events: none;
+                }
+            </style>
+            
+            <div class="track">
+                <div class="selection-window"></div>
+                <div class="boxes-container">
+                    ${this.boxes.map((box, index) => `
+                        <div class="loot-box ${box.rarity} ${index === this.selectedIndex ? 'selected' : ''}" data-index="${index}">
+                            <i data-feather="box" class="box-icon"></i>
+                            <span class="rarity">${box.rarity}</span>
+                        </div>
+                    `).join('')}
+                </div>
+            </div>
+        `;
+        
+        // Initialize feather icons
+        feather.replace();
+    }
+
+    startSpin() {
+        const container = this.shadowRoot.querySelector('.boxes-container');
+        const boxes = this.shadowRoot.querySelectorAll('.loot-box');
+        
+        // Reset selection
+        boxes.forEach(box => box.classList.remove('selected'));
+        
+        // Animate spin
+        let currentPosition = 0;
+        let speed = 0;
+        const maxSpeed = 30;
+        const deceleration = 0.5;
+        const targetIndex = Math.floor(Math.random() * this.boxes.length);
+        
+        const animate = () => {
+            currentPosition += speed;
+            speed = Math.max(0, speed - deceleration);
+            
+            // Apply movement
+            container.style.transform = `translateX(${currentPosition}px)`;
+            
+            // Highlight box in center
+            const centerPosition = -currentPosition - container.offsetWidth / 2 + this.offsetWidth / 2;
+            const boxWidth = 120; // box width + gap
+            
+            const centerIndex = Math.round(centerPosition / boxWidth) % this.boxes.length;
+            const selectedIndex = (centerIndex + this.boxes.length) % this.boxes.length;
+            
+            boxes.forEach((box, i) => {
+                box.classList.toggle('selected', i === selectedIndex);
+            });
+            
+            // Continue animation until stopped
+            if (speed > 0) {
+                requestAnimationFrame(animate);
+            } else {
+                // Final selection
+                this.selectedIndex = targetIndex;
+                this.render();
+            }
+        };
+        
+        // Initial acceleration
+        speed = maxSpeed;
+        animate();
+    }
+
+    getSelectedBox() {
+        return this.boxes[this.selectedIndex];
+    }
+}
+
+customElements.define('loot-box-carousel', LootBoxCarousel);

components/multiplier-track.js

@@ -0,0 +1,158 @@
+class MultiplierTrack extends HTMLElement {
+    constructor() {
+        super();
+        this.multipliers = [
+            { value: 1 },
+            { value: 1.25 },
+            { value: 1.5 },
+            { value: 2 },
+            { value: 3 },
+            { value: 5 },
+            { value: 1 },
+            { value: 1.25 },
+            { value: 1.5 },
+            { value: 2 },
+            { value: 3 },
+            { value: 5 }
+        ];
+        this.selectedIndex = 0;
+    }
+
+    connectedCallback() {
+        this.attachShadow({ mode: 'open' });
+        this.render();
+    }
+
+    render() {
+        this.shadowRoot.innerHTML = `
+            <style>
+                :host {
+                    display: block;
+                    width: 100%;
+                    position: relative;
+                    height: 80px;
+                }
+                
+                .track {
+                    position: relative;
+                    height: 60px;
+                    background: rgba(20, 20, 20, 0.5);
+                    border-radius: 30px;
+                    border: 1px solid rgba(255, 140, 0, 0.2);
+                    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
+                    overflow: hidden;
+                }
+                
+                .multipliers-container {
+                    position: absolute;
+                    display: flex;
+                    height: 100%;
+                    align-items: center;
+                    gap: 15px;
+                    padding: 0 50%;
+                    will-change: transform;
+                    transition: transform 0.1s linear;
+                }
+                
+                .multiplier {
+                    min-width: 80px;
+                    height: 40px;
+                    border-radius: 20px;
+                    display: flex;
+                    justify-content: center;
+                    align-items: center;
+                    background: rgba(30, 30, 30, 0.8);
+                    border: 1px solid rgba(255, 215, 0, 0.3);
+                    color: rgba(255, 215, 0, 0.8);
+                    font-weight: bold;
+                    transition: all 0.3s ease;
+                }
+                
+                .multiplier.selected {
+                    background: rgba(255, 140, 0, 0.3);
+                    border: 1px solid rgba(255, 215, 0, 0.8);
+                    color: white;
+                    box-shadow: 0 0 15px rgba(255, 140, 0, 0.5);
+                    transform: scale(1.1);
+                }
+                
+                .selection-window {
+                    position: absolute;
+                    left: 50%;
+                    transform: translateX(-50%);
+                    height: 50px;
+                    width: 90px;
+                    border: 2px solid rgba(255, 140, 0, 0.8);
+                    border-radius: 25px;
+                    box-shadow: 0 0 15px rgba(255, 140, 0, 0.5);
+                    z-index: 4;
+                    pointer-events: none;
+                }
+            </style>
+            
+            <div class="track">
+                <div class="selection-window"></div>
+                <div class="multipliers-container">
+                    ${this.multipliers.map((mult, index) => `
+                        <div class="multiplier ${index === this.selectedIndex ? 'selected' : ''}" data-index="${index}">
+                            ×${mult.value}
+                        </div>
+                    `).join('')}
+                </div>
+            </div>
+        `;
+    }
+
+    startSpin() {
+        const container = this.shadowRoot.querySelector('.multipliers-container');
+        const multipliers = this.shadowRoot.querySelectorAll('.multiplier');
+        
+        // Reset selection
+        multipliers.forEach(mult => mult.classList.remove('selected'));
+        
+        // Animate spin
+        let currentPosition = 0;
+        let speed = 0;
+        const maxSpeed = 20;
+        const deceleration = 0.3;
+        const targetIndex = Math.floor(Math.random() * this.multipliers.length);
+        
+        const animate = () => {
+            currentPosition += speed;
+            speed = Math.max(0, speed - deceleration);
+            
+            // Apply movement
+            container.style.transform = `translateX(${currentPosition}px)`;
+            
+            // Highlight multiplier in center
+            const centerPosition = -currentPosition - container.offsetWidth / 2 + this.offsetWidth / 2;
+            const multWidth = 95; // multiplier width + gap
+            
+            const centerIndex = Math.round(centerPosition / multWidth) % this.multipliers.length;
+            const selectedIndex = (centerIndex + this.multipliers.length) % this.multipliers.length;
+            
+            multipliers.forEach((mult, i) => {
+                mult.classList.toggle('selected', i === selectedIndex);
+            });
+            
+            // Continue animation until stopped
+            if (speed > 0) {
+                requestAnimationFrame(animate);
+            } else {
+                // Final selection
+                this.selectedIndex = targetIndex;
+                this.render();
+            }
+        };
+        
+        // Initial acceleration
+        speed = maxSpeed;
+        animate();
+    }
+
+    getSelectedMultiplier() {
+        return this.multipliers[this.selectedIndex];
+    }
+}
+
+customElements.define('multiplier-track', MultiplierTrack);

components/reward-popup.js

@@ -0,0 +1,203 @@
+class RewardPopup extends HTMLElement {
+    constructor() {
+        super();
+        this.visible = false;
+    }
+
+    connectedCallback() {
+        this.attachShadow({ mode: 'open' });
+        this.render();
+    }
+
+    render() {
+        this.shadowRoot.innerHTML = `
+            <style>
+                :host {
+                    display: ${this.visible ? 'block' : 'none'};
+                    position: fixed;
+                    top: 0;
+                    left: 0;
+                    width: 100%;
+                    height: 100%;
+                    background: rgba(0, 0, 0, 0.7);
+                    backdrop-filter: blur(5px);
+                    z-index: 100;
+                    display: flex;
+                    justify-content: center;
+                    align-items: center;
+                    opacity: ${this.visible ? 1 : 0};
+                    transition: opacity 0.3s ease;
+                }
+                
+                .popup {
+                    background: rgba(20, 20, 20, 0.9);
+                    border-radius: 16px;
+                    border: 2px solid var(--premium-glow);
+                    box-shadow: 0 0 30px rgba(255, 140, 0, 0.5);
+                    width: 90%;
+                    max-width: 500px;
+                    padding: 30px;
+                    text-align: center;
+                    position: relative;
+                    overflow: hidden;
+                    animation: popIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+                }
+                
+                @keyframes popIn {
+                    0% { transform: scale(0.8); opacity: 0; }
+                    100% { transform: scale(1); opacity: 1; }
+                }
+                
+                .popup::before {
+                    content: '';
+                    position: absolute;
+                    top: -50%;
+                    left: -50%;
+                    width: 200%;
+                    height: 200%;
+                    background: radial-gradient(circle, rgba(255, 140, 0, 0.1) 0%, transparent 70%);
+                    z-index: -1;
+                }
+                
+                .title {
+                    font-size: 28px;
+                    font-weight: bold;
+                    margin-bottom: 20px;
+                    background: linear-gradient(to right, var(--premium-gold), var(--premium-glow));
+                    -webkit-background-clip: text;
+                    background-clip: text;
+                    color: transparent;
+                    text-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
+                }
+                
+                .reward-details {
+                    margin-bottom: 30px;
+                }
+                
+                .reward-line {
+                    display: flex;
+                    justify-content: space-between;
+                    margin-bottom: 10px;
+                    font-size: 16px;
+                    color: rgba(255, 255, 255, 0.8);
+                }
+                
+                .final-reward {
+                    font-size: 36px;
+                    font-weight: bold;
+                    margin: 20px 0;
+                    color: var(--premium-gold);
+                    text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
+                    animation: pulse 2s infinite;
+                }
+                
+                @keyframes pulse {
+                    0% { transform: scale(1); }
+                    50% { transform: scale(1.05); }
+                    100% { transform: scale(1); }
+                }
+                
+                .continue-btn {
+                    padding: 12px 30px;
+                    border-radius: 25px;
+                    background: linear-gradient(to right, var(--premium-gold), var(--premium-glow));
+                    color: var(--premium-dark);
+                    font-weight: bold;
+                    border: none;
+                    cursor: pointer;
+                    transition: transform 0.2s, box-shadow 0.2s;
+                }
+                
+                .continue-btn:hover {
+                    transform: translateY(-2px);
+                    box-shadow: 0 5px 15px rgba(255, 140, 0, 0.4);
+                }
+                
+                .confetti {
+                    position: absolute;
+                    width: 10px;
+                    height: 10px;
+                    background: var(--premium-gold);
+                    opacity: 0;
+                }
+            </style>
+            
+            <div class="popup">
+                <h2 class="title">WIN REVEALED!</h2>
+                
+                <div class="reward-details">
+                    <div class="reward-line">
+                        <span>Base Reward:</span>
+                        <span id="baseReward">0 SC</span>
+                    </div>
+                    <div class="reward-line">
+                        <span>Multiplier:</span>
+                        <span id="multiplier">×0</span>
+                    </div>
+                </div>
+                
+                <div class="final-reward" id="finalReward">0 SC</div>
+                
+                <button class="continue-btn" id="continueBtn">Continue</button>
+            </div>
+        `;
+        
+        // Add event listener for continue button
+        if (this.shadowRoot.getElementById('continueBtn')) {
+            this.shadowRoot.getElementById('continueBtn').addEventListener('click', () => this.hide());
+        }
+    }
+
+    show(data) {
+        this.visible = true;
+        this.render();
+        
+        // Update reward details
+        if (data) {
+            this.shadowRoot.getElementById('baseReward').textContent = `${data.baseReward} SC`;
+            this.shadowRoot.getElementById('multiplier').textContent = `×${data.multiplier}`;
+            this.shadowRoot.getElementById('finalReward').textContent = `${data.finalReward} SC`;
+            
+            // Add rarity class for additional styling
+            const finalRewardElement = this.shadowRoot.getElementById('finalReward');
+            finalRewardElement.className = 'final-reward ' + data.rarity;
+        }
+        
+        // Create confetti effect
+        this.createConfetti();
+    }
+
+    hide() {
+        this.visible = false;
+        this.render();
+    }
+
+    createConfetti() {
+        const popup = this.shadowRoot.querySelector('.popup');
+        
+        for (let i = 0; i < 50; i++) {
+            const confetti = document.createElement('div');
+            confetti.className = 'confetti';
+            confetti.style.left = Math.random() * 100 + '%';
+            confetti.style.top = -10 + 'px';
+            confetti.style.backgroundColor = i % 2 === 0 ? 'var(--premium-gold)' : 'var(--premium-glow)';
+            confetti.style.transform = `rotate(${Math.random() * 360}deg)`;
+            
+            popup.appendChild(confetti);
+            
+            // Animate confetti
+            const animation = confetti.animate([
+                { top: -10 + 'px', opacity: 1, transform: `rotate(${Math.random() * 360}deg)` },
+                { top: 100 + 'px', opacity: 0, transform: `rotate(${Math.random() * 360}deg)` }
+            ], {
+                duration: 1000 + Math.random() * 2000,
+                delay: Math.random() * 1000,
+                easing: 'cubic-bezier(0.1, 0.8, 0.9, 1)'
+            });
+            
+            animation.onfinish = () => confetti.remove();
+        }
+    }
+}
+
+customElements.define('reward-popup', RewardPopup);

index.html

@@ -1,19 +1,81 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Nioplay - Double Spin Loot Box</title>
+    <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>
+    <link rel="stylesheet" href="style.css">
+    <script src="components/loot-box.js"></script>
+    <script src="components/multiplier-track.js"></script>
+    <script src="components/reward-popup.js"></script>
+    <script>
+        tailwind.config = {
+            theme: {
+                extend: {
+                    colors: {
+                        premium: {
+                            dark: '#0a0a0a',
+                            glow: '#FF8C00',
+                            gold: '#FFD700',
+                            softgold: '#FFCC66',
+                            purple: '#8A2BE2',
+                            blue: '#1E90FF',
+                            green: '#32CD32'
+                        }
+                    }
+                }
+            }
+        }
+    </script>
+</head>
+<body class="bg-premium-dark text-white font-sans overflow-hidden w-full h-screen flex items-center justify-center relative">
+    <!-- Background Elements -->
+    <div class="absolute inset-0 bg-radial-gradient opacity-90 z-0"></div>
+    <div class="absolute inset-0 particle-field z-0"></div>
+    
+    <!-- Main Container -->
+    <div class="relative z-10 w-full max-w-6xl mx-auto p-8 rounded-2xl backdrop-blur-lg bg-premium-dark/70 border border-premium-glow/20 shadow-2xl shadow-premium-glow/10">
+        <!-- Header Section -->
+        <div class="flex flex-col md:flex-row justify-between items-center mb-12">
+            <div>
+                <h1 class="text-4xl font-bold bg-gradient-to-r from-premium-gold to-premium-softgold bg-clip-text text-transparent tracking-wider uppercase drop-shadow-lg">
+                    Mystery Loot Box Roll
+                </h1>
+                <p class="text-premium-glow/70 mt-2">
+                    Spin across the mystery boxes, unlock a random reward, then boost it with a multiplier roll.
+                </p>
+            </div>
+            <div class="mt-4 md:mt-0 px-6 py-2 rounded-full bg-premium-dark/50 border border-premium-glow/30 backdrop-blur-sm">
+                <span class="text-premium-glow font-medium">Today's Legendary Chance: +3%</span>
+            </div>
+        </div>
+
+        <!-- Loot Box Carousel -->
+        <loot-box-carousel></loot-box-carousel>
+
+        <!-- Roll Button -->
+        <div class="flex flex-col items-center mt-10">
+            <button id="rollButton" class="px-12 py-4 rounded-full bg-gradient-to-r from-premium-gold to-premium-glow text-premium-dark font-bold text-xl uppercase tracking-wider shadow-lg hover:shadow-premium-glow/40 transition-all duration-300 relative overflow-hidden group">
+                <span class="relative z-10">Roll</span>
+                <span class="absolute inset-0 bg-gradient-to-r from-premium-glow to-premium-gold opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
+            </button>
+            <p id="statusText" class="text-premium-glow/80 mt-3 text-sm">Ready to spin</p>
+        </div>
+
+        <!-- Multiplier Track -->
+        <multiplier-track class="mt-16"></multiplier-track>
+    </div>
+
+    <!-- Reward Popup (Hidden by default) -->
+    <reward-popup></reward-popup>
+
+    <script src="script.js"></script>
+    <script>
+        feather.replace();
+    </script>
+<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+</body>
+</html>

script.js

@@ -0,0 +1,48 @@
+document.addEventListener('DOMContentLoaded', () => {
+    const rollButton = document.getElementById('rollButton');
+    const statusText = document.getElementById('statusText');
+    const rewardPopup = document.querySelector('reward-popup');
+    
+    // Simulate loot box spin
+    rollButton.addEventListener('click', () => {
+        // Disable button during animation
+        rollButton.disabled = true;
+        statusText.textContent = "Rolling...";
+        
+        // Get components
+        const lootBoxCarousel = document.querySelector('loot-box-carousel');
+        const multiplierTrack = document.querySelector('multiplier-track');
+        
+        // Start both animations
+        lootBoxCarousel.startSpin();
+        multiplierTrack.startSpin();
+        
+        // After animations complete, show reward
+        setTimeout(() => {
+            const selectedBox = lootBoxCarousel.getSelectedBox();
+            const selectedMultiplier = multiplierTrack.getSelectedMultiplier();
+            
+            // Calculate reward
+            const baseReward = selectedBox.value;
+            const multiplier = selectedMultiplier.value;
+            const finalReward = baseReward * multiplier;
+            
+            // Update status
+            statusText.textContent = `Selected: ${selectedBox.rarity} Loot Box (${baseReward} SC) ×${multiplier}`;
+            
+            // Show reward popup
+            rewardPopup.show({
+                baseReward,
+                multiplier,
+                finalReward,
+                rarity: selectedBox.rarity
+            });
+            
+            // Re-enable button
+            rollButton.disabled = false;
+        }, 5000); // Match this with animation duration
+    });
+    
+    // Initialize reward popup as hidden
+    rewardPopup.hide();
+});

style.css

@@ -1,28 +1,77 @@
-body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
+/* Background Effects */
+.bg-radial-gradient {
+    background: radial-gradient(ellipse at center, #1a1a1a 0%, #0a0a0a 70%, #000000 100%);
 }
 
-h1 {
-	font-size: 16px;
-	margin-top: 0;
+.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;
 }
 
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
+@keyframes particles {
+    0% { background-position: 0% 0%; }
+    100% { background-position: 100% 100%; }
 }
 
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
+/* 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);
 }
 
-.card p:last-child {
-	margin-bottom: 0;
+/* 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;
+}