Design a premium, cinematic “Double Spin Loot Box” feature module for an online sweepstakes casino platform called Nioplay.

This module should feel like a hero feature section that can be dropped into Nioplay’s existing desktop layout: dark, neon, glassmorphism, and high-end. The entire design should be centered around two stacked RNG interactions:

1) A top horizontal loot box carousel (primary spin).
2) A bottom horizontal multiplier slider styled like a minimal glowing meter (secondary spin).

Overall visual style and theme:
- Theme: modern online casino / sweepstakes gaming, inspired by Stake.com but with Nioplay’s own identity.
- Colors: deep black and charcoal background, neon orange (#FF8C00) as the main accent, warm gold (#FFCC66 / #FFD700) for highlights, with subtle amber glows.
- Background: dark radial gradient with a warm, smoky casino atmosphere. Soft light beams, faint particles, and glow around the main module.
- UI style: clean, sharp edges mixed with rounded glassmorphism cards. Translucent panels with blur and inner/outer glow. No cartoon look; everything should feel sleek, premium, and high-value.
- Lighting: cinematic and directional, with subtle volumetric lighting behind the loot box track and multiplier slider to draw the eye.

Layout structure (top to bottom):
1) Header / Title Row:
- Left: A bold feature label such as “MYSTERY LOOT BOX ROLL” in uppercase, spaced lettering, with a subtle gradient fill (gold to warm white) and a soft glow.
- Subheading under it: one or two lines explaining the mechanic in clear UI copy, e.g. “Roll across mystery boxes, unlock a random reward, then boost it with a multiplier spin.”
- Right side: a small info badge and stat line such as “Today’s Legendary Boost: +3%” or “Daily Bonus Loot Active”. Use a pill-shaped glass badge with small icon or subtle SC coin emblem.

2) Main Loot Box Track (top spin):
- Centered horizontally in the module.
- A wide, horizontal track that looks like a glassmorphic rail or shelf.
- On this rail, display a row of at least 10–14 loot boxes spread horizontally. The boxes should be evenly spaced, slightly floating above the track.
- Each loot box:
- Shape: rounded rectangular or cube-like, with metallic and glass surfaces.
- Rarity colors:
- Common: subtle green glow.
- Rare: blue glow.
- Epic: purple glow.
- Legendary: intense gold/orange glow.
- Each box has a glowing seam or lid outline, suggesting it can open. Optional faint SC icon emboss on the front.
- Use small rarity labels beneath them: “COMMON”, “RARE”, “EPIC”, “LEGENDARY” in uppercase micro text.
- Add a centered “selection frame” overlay: a vertical, rounded rectangle aligned in the center of the track, slightly translucent with a white/orange glow. This indicates where the boxes must land to be selected.
- Convey animation/state:
- Use motion blur, ghosted duplicates, or streaks to suggest that the whole row of boxes can rapidly slide horizontally left and right.
- Show a final state where one loot box is perfectly centered in the selection frame. That centered box should glow brighter, be slightly larger (scaled up), and appear as the chosen box.
- Optionally show the lid of the chosen box slightly opened with a burst of light and SC coins emerging, while the other boxes are dimmer in comparison.

3) Primary Action and Status:
- Below the loot box track, place a prominent circular or pill-shaped button labeled “ROLL” or “ROLL LOOT BOX” in uppercase.
- Button styling:
- Big, satisfying CTA.
- Gradient from golden yellow to neon orange (#FF8C00), with strong glow and subtle inner light.
- Slight 3D depth and drop shadow to feel clickable.
- Next to or under the button, include a small status label area, e.g. “Status: Ready”, “Rolling…”, or “Landed on: EPIC BOX”. This status text should feel like a slim HUD indicator.

4) Secondary Multiplier Slider (bottom spin, meter style):
- Directly beneath the loot box track and main button, design a second horizontal component: a simple, elegant multiplier slider that feels like a digital meter.
- Concept: instead of more boxes or graphics, this second slider is a row of minimal glowing “multiplier pills” with text only.
- Layout:
- A long horizontal strip, visually lighter and thinner than the loot box rail.
- A central “selection window” overlay (like the top selection frame, but smaller) that shows which multiplier is finally chosen.
- Inside the slider, display several multiplier values as repeating items, for example:
- ×1
- ×1.25
- ×1.5
- ×2
- ×3
- ×5
- Each multiplier item:
- Appears as a soft, rounded pill or mini-rectangle.
- Has a glassmorphism background (translucent, blurred, slightly reflective).
- Contains only the multiplier text (e.g. “×2”) in a bold, clean sans-serif font.
- Text color: warm gold or off-white with a subtle glow.
- The slider behavior to visualize:
- The entire row of multiplier pills can scroll horizontally at high speed, similar to a ticker or roulette, aligned with the central selection window.
- Show a sense of motion with slight blur or multiple trailing copies, indicating that the strip can move quickly.
- The final state should show one multiplier pill perfectly centered inside the selection window, enlarged slightly and glowing brighter than the rest.
- The chosen pill should have a stronger neon orange edge glow, inner light, and maybe a subtle pulse to indicate it’s locked in.
- Style of the multiplier slider:
- Overall feel like a “power meter” or “data strip” rather than another heavy loot box row.
- Minimalistic, tech-flavored, clean.
- Background of the slider strip should be darker, with a subtle gradient and faint grid or texture to suggest precision and control.
- No icons, no complex graphics, just glowing pills with text.

5) Combined Result / Payout Indication:
- Somewhere near the bottom or to the side, include a small “Result” or “Win Breakdown” panel showing how the top box and bottom multiplier combine.
- For example, a small glassmorphism card that reads:
- “Base Reward: 30 SC”
- “Multiplier: ×2”
- “Total Win: 60 SC”
- Use a visual hierarchy:
- Base reward text smaller and more subtle.
- Multiplier slightly larger.
- Total Win much larger, bold, with a neon glow and SC coin icon.
- This panel should still match the Nioplay theme: dark glass, thin glowing borders, subtle particle or light streaks.

Stylistic details to enforce:
- Typography: modern, clean, all-caps for labels and main CTAs; slightly rounded sans-serif with tight letter spacing.
- Use microcopy around the module to hint at the mechanic: “Spin the boxes”, “Then boost with a multiplier”, “Every roll is RNG-based”, etc.
- Use icons only where subtle: SC coins can appear as small circular gold coins with “SC” engraved, floating around the selected loot box.
- Emphasis on depth: shadows under boxes, layered glass panels, and overlapping glows to convey a rich, layered interface.
- Aspect ratio: design this as a wide, desktop-first module, roughly 16:9 feel (like a wide hero strip inside a page), with breathing room around it.
- Make the animations “visually implied”: use blur, streaks, ghosted positions, and slight offsets, but the final render is a still image that clearly communicates that both the top track and bottom slider are capable of animated RNG spins.
- Ensure the second slider (multiplier) is visually simpler than the top loot boxes: less graphic content, more about clean numbers on glowing pills. It should feel like a modern, horizontal meter.

Final composition:
- The viewer should instantly understand that:
1) The top row is a loot box RNG roll that picks a random box.
2) The bottom row is a separate multiplier RNG roll in a simple, horizontal meter-style slider.
3) The player presses one main button to trigger these spins.
4) The final prize = base reward from the loot box × multiplier from the second slider.
- The design should feel immersive, cinematic, and uniquely Nioplay, ready to be implemented as a functional double-spin module in a real product UI.

README.md

@@ -1,10 +1,13 @@
 ---
-title: Neon Loot Spinner Spectacle
-emoji: 💻
-colorFrom: yellow
-colorTo: red
+title: Neon Loot Spinner Spectacle 🎰
+colorFrom: green
+colorTo: purple
+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/lootbox.js

@@ -0,0 +1,237 @@
+class CustomLootbox extends HTMLElement {
+    connectedCallback() {
+        this.attachShadow({ mode: 'open' });
+        this.shadowRoot.innerHTML = `
+            <style>
+                :host {
+                    display: block;
+                    position: relative;
+                }
+                
+                .track-container {
+                    position: relative;
+                    width: 100%;
+                    height: 180px;
+                    margin: 2rem 0;
+                }
+                
+                .loot-box-track {
+                    position: absolute;
+                    top: 50%;
+                    left: 0;
+                    transform: translateY(-50%);
+                    width: 100%;
+                    height: 120px;
+                    background: rgba(30, 30, 30, 0.5);
+                    border-radius: 8px;
+                    border: 1px solid rgba(255, 255, 255, 0.05);
+                    display: flex;
+                    align-items: center;
+                    overflow: hidden;
+                }
+                
+                .loot-box-scroll {
+                    display: flex;
+                    transition: transform 0.1s linear;
+                    will-change: transform;
+                }
+                
+                .loot-box {
+                    width: 90px;
+                    height: 90px;
+                    margin: 0 10px;
+                    border-radius: 8px;
+                    display: flex;
+                    flex-direction: column;
+                    align-items: center;
+                    justify-content: center;
+                    position: relative;
+                    transition: all 0.3s ease;
+                    transform-origin: center;
+                    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
+                }
+                
+                .loot-box::before {
+                    content: '';
+                    position: absolute;
+                    inset: 0;
+                    border-radius: 8px;
+                    padding: 2px;
+                    background: linear-gradient(45deg, var(--glow-color) 0%, transparent 30%);
+                    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+                    -webkit-mask-composite: xor;
+                    mask-composite: exclude;
+                    pointer-events: none;
+                }
+                
+                .loot-box.common { background: rgba(30, 30, 30, 0.9); }
+                .loot-box.rare { background: rgba(30, 30, 40, 0.9); }
+                .loot-box.epic { background: rgba(40, 30, 45, 0.9); }
+                .loot-box.legendary { background: rgba(45, 35, 20, 0.9); }
+                
+                .loot-box-icon {
+                    width: 40px;
+                    height: 40px;
+                    margin-bottom: 8px;
+                }
+                
+                .loot-box-rarity {
+                    font-size: 0.6rem;
+                    font-weight: 700;
+                    text-transform: uppercase;
+                    letter-spacing: 1px;
+                    margin-top: 4px;
+                }
+                
+                .common .loot-box-rarity { color: #4CAF50; }
+                .rare .loot-box-rarity { color: #2196F3; }
+                .epic .loot-box-rarity { color: #9C27B0; }
+                .legendary .loot-box-rarity { color: #FFD700; }
+                
+                .selection-frame {
+                    position: absolute;
+                    left: 50%;
+                    top: 50%;
+                    transform: translate(-50%, -50%);
+                    width: 110px;
+                    height: 110px;
+                    border-radius: 12px;
+                    border: 2px solid rgba(255, 215, 0, 0.5);
+                    box-shadow: 0 0 20px rgba(255, 215, 0, 0.3);
+                    pointer-events: none;
+                    z-index: 10;
+                    animation: pulse-glow 2s infinite;
+                }
+                
+                .selected-box {
+                    transform: scale(1.15);
+                    box-shadow: 0 0 30px var(--glow-color);
+                    z-index: 5;
+                }
+                
+                .selected-box::before {
+                    background: linear-gradient(45deg, var(--glow-color) 0%, transparent 20%);
+                    opacity: 0.8;
+                }
+                
+                @keyframes pulse-glow {
+                    0% { box-shadow: 0 0 0 0 rgba(255, 215, 0, 0.4); }
+                    70% { box-shadow: 0 0 0 10px rgba(255, 215, 0, 0); }
+                    100% { box-shadow: 0 0 0 0 rgba(255, 215, 0, 0); }
+                }
+            </style>
+            
+            <div class="track-container">
+                <div class="loot-box-track">
+                    <div class="loot-box-scroll" id="lootBoxScroll">
+                        <!-- Loot boxes will be added dynamically -->
+                    </div>
+                </div>
+                <div class="selection-frame"></div>
+            </div>
+        `;
+        
+        // Generate loot boxes
+        this.generateLootBoxes();
+    }
+    
+    generateLootBoxes() {
+        const scrollContainer = this.shadowRoot.getElementById('lootBoxScroll');
+        
+        // Clear existing boxes
+        scrollContainer.innerHTML = '';
+        
+        // Rarity distribution
+        const rarities = [
+            { class: 'common', name: 'COMMON', count: 6 },
+            { class: 'rare', name: 'RARE', count: 4 },
+            { class: 'epic', name: 'EPIC', count: 3 },
+            { class: 'legendary', name: 'LEGENDARY', count: 1 }
+        ];
+        
+        // Create loot boxes
+        let allBoxes = [];
+        
+        rarities.forEach(rarity => {
+            for (let i = 0; i < rarity.count; i++) {
+                const box = document.createElement('div');
+                box.className = `loot-box ${rarity.class}`;
+                box.innerHTML = `
+                    <div class="loot-box-icon">
+                        <i data-feather="box"></i>
+                    </div>
+                    <div class="loot-box-rarity">${rarity.name}</div>
+                `;
+                allBoxes.push(box);
+            }
+        });
+        
+        // Shuffle and duplicate to create a longer track
+        allBoxes = this.shuffleArray(allBoxes);
+        const duplicateCount = 3; // How many times to duplicate the set
+        
+        for (let i = 0; i < duplicateCount; i++) {
+            allBoxes.forEach(box => {
+                scrollContainer.appendChild(box.cloneNode(true));
+            });
+        }
+        
+        // Initialize feather icons
+        if (window.feather) {
+            window.feather.replace();
+        }
+    }
+    
+    shuffleArray(array) {
+        for (let i = array.length - 1; i > 0; i--) {
+            const j = Math.floor(Math.random() * (i + 1));
+            [array[i], array[j]] = [array[j], array[i]];
+        }
+        return array;
+    }
+    
+    startSpin() {
+        const scrollContainer = this.shadowRoot.getElementById('lootBoxScroll');
+        scrollContainer.style.transition = 'transform 3s cubic-bezier(0.2, 0.8, 0.4, 1)';
+        
+        // Random end position (simulate spin)
+        const boxWidth = 90 + 20; // width + margin
+        const boxCount = scrollContainer.children.length;
+        const randomOffset = Math.floor(Math.random() * boxCount) * boxWidth;
+        
+        scrollContainer.style.transform = `translateX(-${randomOffset}px)`;
+        
+        // Reset selected boxes
+        const boxes = scrollContainer.querySelectorAll('.loot-box');
+        boxes.forEach(box => {
+            box.classList.remove('selected-box');
+        });
+    }
+    
+    stopSpin() {
+        const scrollContainer = this.shadowRoot.getElementById('lootBoxScroll');
+        const boxes = scrollContainer.children;
+        
+        // Find which box is in the center
+        const containerRect = scrollContainer.getBoundingClientRect();
+        const containerCenter = containerRect.left + containerRect.width / 2;
+        
+        let selectedBox = null;
+        
+        for (let i = 0; i < boxes.length; i++) {
+            const boxRect = boxes[i].getBoundingClientRect();
+            const boxCenter = boxRect.left + boxRect.width / 2;
+            
+            if (Math.abs(boxCenter - containerCenter) < boxRect.width / 2) {
+                selectedBox = boxes[i];
+                break;
+            }
+        }
+        
+        if (selectedBox) {
+            selectedBox.classList.add('selected-box');
+        }
+    }
+}
+
+customElements.define('custom-lootbox', CustomLootbox);

components/multiplier.js

@@ -0,0 +1,149 @@
+class CustomMultiplier extends HTMLElement {
+    connectedCallback() {
+        this.attachShadow({ mode: 'open' });
+        this.shadowRoot.innerHTML = `
+            <style>
+                :host {
+                    display: block;
+                    position: relative;
+                    margin-top: 3rem;
+                    height: 80px;
+                }
+                
+                .multiplier-track {
+                    position: relative;
+                    width: 100%;
+                    height: 60px;
+                    margin: 1rem 0;
+                    background: rgba(20, 20, 20, 0.7);
+                    border-radius: 9999px;
+                    border: 1px solid rgba(255, 255, 255, 0.05);
+                    overflow: hidden;
+                }
+                
+                .multiplier-scroll {
+                    display: flex;
+                    align-items: center;
+                    height: 100%;
+                    transition: transform 0.1s linear;
+                    will-change: transform;
+                }
+                
+                .multiplier-pill {
+                    min-width: 80px;
+                    height: 40px;
+                    margin: 0 10px;
+                    border-radius: 9999px;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    background: rgba(255, 255, 255, 0.05);
+                    border: 1px solid rgba(255, 255, 255, 0.1);
+                    font-weight: 700;
+                    font-size: 1.1rem;
+                    color: rgba(255, 255, 255, 0.7);
+                    transition: all 0.3s ease;
+                }
+                
+                .selection-window {
+                    position: absolute;
+                    left: 50%;
+                    top: 50%;
+                    transform: translate(-50%, -50%);
+                    width: 100px;
+                    height: 50px;
+                    border-radius: 9999px;
+                    border: 2px solid rgba(255, 140, 0, 0.5);
+                    box-shadow: 0 0 15px rgba(255, 140, 0, 0.3);
+                    pointer-events: none;
+                    z-index: 10;
+                }
+                
+                .selected-pill {
+                    background: rgba(255, 140, 0, 0.2);
+                    border: 1px solid rgba(255, 140, 0, 0.5);
+                    color: #FF8C00;
+                    box-shadow: 0 0 15px rgba(255, 140, 0, 0.3);
+                    transform: scale(1.1);
+                }
+            </style>
+            
+            <div class="multiplier-track">
+                <div class="multiplier-scroll" id="multiplierScroll">
+                    <!-- Multiplier pills will be added dynamically -->
+                </div>
+                <div class="selection-window"></div>
+            </div>
+        `;
+        
+        // Generate multiplier pills
+        this.generateMultipliers();
+    }
+    
+    generateMultipliers() {
+        const scrollContainer = this.shadowRoot.getElementById('multiplierScroll');
+        
+        // Clear existing pills
+        scrollContainer.innerHTML = '';
+        
+        // Multiplier values
+        const multipliers = ['×1', '×1.25', '×1.5', '×2', '×3', '×5'];
+        
+        // Create multiplier pills
+        const duplicateCount = 5; // How many times to duplicate the set
+        
+        for (let i = 0; i < duplicateCount; i++) {
+            multipliers.forEach(value => {
+                const pill = document.createElement('div');
+                pill.className = 'multiplier-pill';
+                pill.textContent = value;
+                scrollContainer.appendChild(pill);
+            });
+        }
+    }
+    
+    startSpin() {
+        const scrollContainer = this.shadowRoot.getElementById('multiplierScroll');
+        scrollContainer.style.transition = 'transform 2s cubic-bezier(0.2, 0.8, 0.4, 1)';
+        
+        // Random end position (simulate spin)
+        const pillWidth = 80 + 20; // width + margin
+        const pillCount = scrollContainer.children.length;
+        const randomOffset = Math.floor(Math.random() * pillCount) * pillWidth;
+        
+        scrollContainer.style.transform = `translateX(-${randomOffset}px)`;
+        
+        // Reset selected pills
+        const pills = scrollContainer.querySelectorAll('.multiplier-pill');
+        pills.forEach(pill => {
+            pill.classList.remove('selected-pill');
+        });
+    }
+    
+    stopSpin() {
+        const scrollContainer = this.shadowRoot.getElementById('multiplierScroll');
+        const pills = scrollContainer.children;
+        
+        // Find which pill is in the center
+        const containerRect = scrollContainer.getBoundingClientRect();
+        const containerCenter = containerRect.left + containerRect.width / 2;
+        
+        let selectedPill = null;
+        
+        for (let i = 0; i < pills.length; i++) {
+            const pillRect = pills[i].getBoundingClientRect();
+            const pillCenter = pillRect.left + pillRect.width / 2;
+            
+            if (Math.abs(pillCenter - containerCenter) < pillRect.width / 2) {
+                selectedPill = pills[i];
+                break;
+            }
+        }
+        
+        if (selectedPill) {
+            selectedPill.classList.add('selected-pill');
+        }
+    }
+}
+
+customElements.define('custom-multiplier', CustomMultiplier);

components/navbar.js

@@ -0,0 +1,101 @@
+class CustomNavbar extends HTMLElement {
+    connectedCallback() {
+        this.attachShadow({ mode: 'open' });
+        this.shadowRoot.innerHTML = `
+            <style>
+                :host {
+                    display: block;
+                    width: 100%;
+                    background: rgba(10, 10, 10, 0.8);
+                    backdrop-filter: blur(10px);
+                    -webkit-backdrop-filter: blur(10px);
+                    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+                    z-index: 50;
+                }
+                
+                .navbar-container {
+                    display: flex;
+                    justify-content: space-between;
+                    align-items: center;
+                    max-width: 1200px;
+                    margin: 0 auto;
+                    padding: 1rem 2rem;
+                }
+                
+                .logo {
+                    font-weight: 700;
+                    font-size: 1.5rem;
+                    letter-spacing: 1px;
+                    background: linear-gradient(90deg, #FF8C00 0%, #FFD700 100%);
+                    -webkit-background-clip: text;
+                    background-clip: text;
+                    color: transparent;
+                }
+                
+                .nav-links {
+                    display: flex;
+                    gap: 2rem;
+                }
+                
+                .nav-link {
+                    color: rgba(255, 255, 255, 0.7);
+                    text-decoration: none;
+                    font-weight: 500;
+                    font-size: 0.9rem;
+                    letter-spacing: 0.5px;
+                    transition: color 0.3s ease;
+                }
+                
+                .nav-link:hover {
+                    color: white;
+                }
+                
+                .nav-link.active {
+                    color: #FF8C00;
+                }
+                
+                .user-section {
+                    display: flex;
+                    align-items: center;
+                    gap: 1rem;
+                }
+                
+                .balance {
+                    background: rgba(255, 215, 0, 0.1);
+                    padding: 0.5rem 1rem;
+                    border-radius: 9999px;
+                    font-size: 0.9rem;
+                    display: flex;
+                    align-items: center;
+                    gap: 0.5rem;
+                }
+                
+                .balance-amount {
+                    font-weight: 600;
+                    color: #FFD700;
+                }
+            </style>
+            
+            <nav class="navbar-container">
+                <a href="/" class="logo">NIOPLAY</a>
+                
+                <div class="nav-links">
+                    <a href="/" class="nav-link active">Home</a>
+                    <a href="/games" class="nav-link">Games</a>
+                    <a href="/promotions" class="nav-link">Promotions</a>
+                    <a href="/vip" class="nav-link">VIP</a>
+                </div>
+                
+                <div class="user-section">
+                    <div class="balance">
+                        <i data-feather="dollar-sign"></i>
+                        <span class="balance-amount">10,245 SC</span>
+                    </div>
+                    <i data-feather="user"></i>
+                </div>
+            </nav>
+        `;
+    }
+}
+
+customElements.define('custom-navbar', CustomNavbar);

index.html

@@ -1,19 +1,95 @@
-<!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>
+    <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>
+    <script src="components/navbar.js"></script>
+    <script src="components/lootbox.js"></script>
+    <script src="components/multiplier.js"></script>
+    <style>
+        :root {
+            --primary: #FF8C00;
+            --gold: #FFD700;
+            --purple: #9C27B0;
+            --blue: #2196F3;
+            --green: #4CAF50;
+        }
+    </style>
+</head>
+<body class="bg-gradient-to-br from-gray-900 via-black to-gray-900 min-h-screen overflow-x-hidden">
+    <custom-navbar></custom-navbar>
+    
+    <main class="container mx-auto px-4 py-12 max-w-6xl">
+        <!-- Double Spin Loot Box Module -->
+        <div class="glass-panel relative rounded-2xl p-8 overflow-hidden">
+            <!-- Glow effects -->
+            <div class="absolute inset-0 overflow-hidden">
+                <div class="absolute -top-20 -left-20 w-80 h-80 bg-orange-500 rounded-full filter blur-3xl opacity-10"></div>
+                <div class="absolute -bottom-20 -right-20 w-80 h-80 bg-amber-500 rounded-full filter blur-3xl opacity-10"></div>
+            </div>
+            
+            <!-- Header -->
+            <div class="flex flex-col md:flex-row justify-between items-start md:items-end mb-12">
+                <div>
+                    <h1 class="text-3xl md:text-4xl font-bold uppercase tracking-wider text-transparent bg-clip-text bg-gradient-to-r from-amber-200 to-amber-400">
+                        Mystery Loot Box Roll
+                    </h1>
+                    <p class="text-gray-300 mt-2 max-w-lg">
+                        Roll across mystery boxes, unlock a random reward, then boost it with a multiplier spin.
+                    </p>
+                </div>
+                <div class="mt-4 md:mt-0 glass-badge px-4 py-2 rounded-full flex items-center">
+                    <i data-feather="zap" class="w-4 h-4 text-amber-400 mr-2"></i>
+                    <span class="text-xs font-bold text-amber-100">Today's Legendary Boost: +3%</span>
+                </div>
+            </div>
+            
+            <!-- Loot Box Track -->
+            <custom-lootbox></custom-lootbox>
+            
+            <!-- Roll Button & Status -->
+            <div class="flex flex-col items-center mt-8">
+                <button id="spinButton" class="spin-button glow-effect relative px-12 py-4 rounded-full text-lg font-bold uppercase tracking-wider transform transition-all hover:scale-105 active:scale-95">
+                    Roll Loot Box
+                </button>
+                <div id="statusDisplay" class="text-amber-100 text-sm font-medium mt-3 tracking-wider">Status: Ready</div>
+            </div>
+            
+            <!-- Multiplier Slider -->
+            <custom-multiplier></custom-multiplier>
+            
+            <!-- Result Panel -->
+            <div id="resultPanel" class="glass-panel mt-10 p-6 rounded-xl opacity-0 transition-opacity duration-500">
+                <div class="grid grid-cols-3 gap-2 items-end">
+                    <div>
+                        <p class="text-gray-400 text-xs uppercase tracking-wider">Base Reward</p>
+                        <p class="text-white font-medium">30 SC</p>
+                    </div>
+                    <div>
+                        <p class="text-gray-400 text-xs uppercase tracking-wider">Multiplier</p>
+                        <p class="text-amber-300 font-medium text-xl">×2</p>
+                    </div>
+                    <div>
+                        <p class="text-gray-400 text-xs uppercase tracking-wider">Total Win</p>
+                        <p class="text-amber-400 font-bold text-2xl flex items-center">
+                            60 SC
+                            <i data-feather="award" class="ml-2 w-5 h-5"></i>
+                        </p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </main>
+
+    <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,41 @@
+document.addEventListener('DOMContentLoaded', function() {
+    const spinButton = document.getElementById('spinButton');
+    const statusDisplay = document.getElementById('statusDisplay');
+    const resultPanel = document.getElementById('resultPanel');
+    
+    // Simulate spin animation
+    spinButton.addEventListener('click', function() {
+        // Disable button during spin
+        spinButton.disabled = true;
+        statusDisplay.textContent = "Rolling...";
+        
+        // Trigger loot box and multiplier animations
+        const lootBoxComponent = document.querySelector('custom-lootbox');
+        const multiplierComponent = document.querySelector('custom-multiplier');
+        
+        if (lootBoxComponent && multiplierComponent) {
+            lootBoxComponent.startSpin();
+            multiplierComponent.startSpin();
+            
+            // Simulate spin completion
+            setTimeout(() => {
+                lootBoxComponent.stopSpin();
+                
+                // Second spin starts after first completes
+                setTimeout(() => {
+                    multiplierComponent.stopSpin();
+                    
+                    // Show results
+                    setTimeout(() => {
+                        resultPanel.style.opacity = '1';
+                        statusDisplay.textContent = "Landed on: EPIC BOX";
+                        spinButton.disabled = false;
+                    }, 500);
+                }, 1000);
+            }, 3000);
+        }
+    });
+    
+    // Initialize feather icons
+    feather.replace();
+});

style.css

@@ -1,28 +1,76 @@
+/* Base Styles */
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap');
+
 body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
+    font-family: 'Inter', sans-serif;
+    color: white;
+}
+
+/* Glassmorphism Effects */
+.glass-panel {
+    background: rgba(15, 15, 15, 0.65);
+    backdrop-filter: blur(12px);
+    -webkit-backdrop-filter: blur(12px);
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.36), 
+                inset 0 0 0 1px rgba(255, 255, 255, 0.05);
+}
+
+.glass-badge {
+    background: rgba(255, 140, 0, 0.1);
+    backdrop-filter: blur(5px);
+    -webkit-backdrop-filter: blur(5px);
+    border: 1px solid rgba(255, 140, 0, 0.15);
 }
 
-h1 {
-	font-size: 16px;
-	margin-top: 0;
+/* Spin Button */
+.spin-button {
+    background: linear-gradient(135deg, #FFCC66 0%, #FF8C00 100%);
+    color: rgba(0, 0, 0, 0.8);
+    box-shadow: 0 4px 20px rgba(255, 140, 0, 0.4), 
+                inset 0 2px 0 rgba(255, 255, 255, 0.2);
 }
 
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
+.glow-effect {
+    position: relative;
+    z-index: 1;
 }
 
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
+.glow-effect::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: linear-gradient(135deg, #FFCC66 0%, #FF8C00 100%);
+    border-radius: 9999px;
+    z-index: -1;
+    filter: blur(15px);
+    opacity: 0.6;
+    transition: opacity 0.3s ease;
 }
 
-.card p:last-child {
-	margin-bottom: 0;
+.glow-effect:hover::after {
+    opacity: 0.8;
 }
+
+/* Selection Frame Animation */
+@keyframes pulse-glow {
+    0% { box-shadow: 0 0 0 0 rgba(255, 215, 0, 0.4); }
+    70% { box-shadow: 0 0 0 10px rgba(255, 215, 0, 0); }
+    100% { box-shadow: 0 0 0 0 rgba(255, 215, 0, 0); }
+}
+
+/* Loot Box Rarity Colors */
+.common { --glow-color: #4CAF50; }
+.rare { --glow-color: #2196F3; }
+.epic { --glow-color: #9C27B0; }
+.legendary { --glow-color: #FF8C00; }
+
+/* Responsive Adjustments */
+@media (max-width: 640px) {
+    .glass-panel {
+        padding: 1.5rem;
+    }
+}