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.

=====================
LOOT BOX SPIN — ANIMATED STATE
=====================

At the top, show the loot box carousel in a dynamic animation state. Depict the boxes in mid-roll, showing the exact visual cues of a fast horizontal spin decelerating into a final snap-to-center.

Loot Box Carousel Structure:
- A long horizontal row of glowing rarity boxes.
- Each box is a square neon-outline frame with colors representing rarity: green, blue, purple, gold.
- Each box contains a small cube icon in the center.
- Use 10–14 boxes in view.

Animation Detail (Very Important):
- Boxes near the edges of the screen should appear stretched, with horizontal direction blur and subtle luminous streaks trailing behind them.
- Boxes closer to the center should appear progressively sharper.
- One box must be perfectly aligned inside a vertical selection window at the exact center:
- The selected box must appear crisp, with zero motion blur.
- It should be slightly enlarged (as if it just completed its final easing motion).
- The outline glow should intensify, radiating a smooth neon-orange bloom.
- Add a tiny forward-lean “settle snap” effect: the box visually tilts forward by a few degrees, suggesting the physical snap of landing.
- Boxes behind the selected one should be slightly offset or ghosted, indicating the tail end of the spin.
- The selection window:
- A thin neon-orange (#FF8C00) rectangular frame.
- Soft pulsing glow.
- Transparent center.
- Must visually lock the winning box in place.

Above the carousel, place the label “LOOT BOX SPIN”.

=====================
MULTIPLIER SLIDER — SECOND SPIN ANIMATION
=====================

Directly under the loot box track, show the multiplier slider in mid-spin animation. This is a horizontal meter-like strip with glowing multiplier pills.

Multiplier Pills:
- ×1, ×1.25, ×1.5, ×2, ×3, ×5 (repeat sequence twice for length).
- Each pill is a rounded rectangular glassmorphism capsule.
- Text is warm white or soft gold with faint glow.
- Pills float slightly above the track.

Animation Detail (Very Important):
- Pills not in the center should be shown with clear horizontal motion blur, slightly stretched, as if scrolling rapidly past the viewer.
- Pills should have streaking light trails extending horizontally, giving a high-speed rolling effect.
- The pills closer to the center should show less blur, transitioning into the final chosen multiplier.
- The selected multiplier pill must:
- Sit perfectly inside a smaller centered selection frame matching the neon-orange aesthetic.
- Be scaled up slightly (subtle enlargement).
- Glow much brighter than the others, with a halo that pulses outward.
- Appear perfectly sharp and in freeze-frame clarity.
- The slider track:
- Thin translucent LED bar with reflective highlights.
- Slight gold/orange underglow.

Above it, place the label “MULTIPLIER”.

=====================
SPIN BUTTON
=====================

Below both tracks:
- A single pill-shaped SPIN button.
- Gold-to-neon-orange gradient.
- Soft outer glow, subtle inner light.
- Label: “SPIN”.
- No additional UI text.

=====================
PRIZE POP-UP — FINAL RESULT MOMENT
=====================

Display a reward pop-up floating over the interface to show the end of the animation sequence.

Pop-up Details:
- A glassmorphism panel with neon-orange rim light and bloom.
- Inside, show the payout number ONLY (no text)—for example “×5” or a currency amount.
- Surround it with floating SC coins, light streaks, small particles, and a faint explosion of glow as if the pop-up just appeared.
- The pop-up must feel like it just animated in: rising slightly from below, glowing intensely for a moment, with subtle confetti sparks.

=====================
STYLE REQUIREMENTS
=====================

- Match Nioplay’s dark neon aesthetic: neon orange, gold highlights, black/charcoal base.
- Use soft volumetric lighting and subtle particle effects.
- No characters, no extra icons, no paragraphs of text.
- ONLY include:
- The loot box carousel
- “LOOT BOX SPIN”
- The multiplier slider
- “MULTIPLIER”
- SPIN button
- The prize pop-up
- Everything must be perfectly centered and aligned in a clean 16:9 frame.

README.md

@@ -1,10 +1,13 @@
 ---
-title: Neon Loot Spinner Extravaganza
-emoji: 😻
-colorFrom: red
-colorTo: pink
+title: Neon Loot Spinner Extravaganza 🎰
+colorFrom: gray
+colorTo: green
+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).

index.html

@@ -1,19 +1,66 @@
-<!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>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>

script.js

@@ -0,0 +1,144 @@
+// Loot Box Generator
+function initLootBoxes() {
+    const lootBoxes = document.getElementById('lootBoxes');
+    const rarities = ['common', 'rare', 'epic', 'legendary'];
+    const colors = {
+        'common': '#2ecc71',
+        'rare': '#3498db',
+        'epic': '#9b59b6',
+        'legendary': '#f1c40f'
+    };
+    
+    // Create 24 loot boxes (12 visible, 12 for seamless looping)
+    for (let i = 0; i < 24; i++) {
+        const rarity = rarities[Math.floor(Math.random() * rarities.length)];
+        const box = document.createElement('div');
+        box.className = `loot-box ${rarity} flex-shrink-0`;
+        box.innerHTML = `<i data-feather="box" stroke="${colors[rarity]}"></i>`;
+        lootBoxes.appendChild(box);
+    }
+    
+    // Animate the loot boxes
+    let position = 0;
+    let speed = 20;
+    let deceleration = 0.95;
+    let selectedBox = Math.floor(Math.random() * 12) + 6; // Random box between 6-18
+    
+    const animate = () => {
+        position += speed;
+        speed *= deceleration;
+        
+        // Stop when we reach the selected box
+        if (speed < 0.5 && Math.abs(position % 120) < 1) {
+            // Select the center box
+            lootBoxes.style.transform = `translateX(calc(-${selectedBox * 110}px + 50%))`;
+            
+            // Highlight the selected box
+            const boxes = document.querySelectorAll('.loot-box');
+            boxes.forEach((box, index) => {
+                if (index === selectedBox) {
+                    box.classList.add('selected');
+                    
+                    // Show prize popup after slight delay
+                    setTimeout(() => {
+                        showPrize(selectedBox);
+                    }, 800);
+                } else {
+                    box.style.filter = index < selectedBox - 3 || index > selectedBox + 3 ? 
+                        'blur(3px) opacity(0.5)' : 'blur(1px) opacity(0.8)';
+                }
+            });
+        } else {
+            lootBoxes.style.transform = `translateX(calc(-${position % 2400}px + 50%))`;
+            requestAnimationFrame(animate);
+        }
+    };
+    
+    animate();
+}
+
+// Multiplier Generator
+function initMultipliers() {
+    const multipliers = document.getElementById('multipliers');
+    multiplierValues = ['×1', '×1.25', '×1.5', '×2', '×3', '×5', '×1', '×1.25', '×1.5', '×2', '×3', '×5'];
+    
+    multiplierValues.forEach(value => {
+        const pill = document.createElement('div');
+        pill.className = 'multiplier-pill flex-shrink-0';
+        pill.textContent = value;
+        multipliers.appendChild(pill);
+    });
+    
+    // Animate multipliers
+    let position = 0;
+    let speed = 15;
+    let deceleration = 0.93;
+    let selectedMultiplier = Math.floor(Math.random() * 6) + 3; // Random between 3-8
+    
+    const animateMultipliers = () => {
+        position += speed;
+        speed *= deceleration;
+        
+        if (speed < 0.5 && Math.abs(position % 480) < 1) {
+            // Select the center multiplier
+            multipliers.style.transform = `translateX(calc(-${selectedMultiplier * 100}px + 50%))`;
+            
+            // Highlight the selected multiplier
+            const pills = document.querySelectorAll('.multiplier-pill');
+            pills.forEach((pill, index) => {
+                if (index === selectedMultiplier) {
+                    pill.classList.add('selected');
+                } else {
+                    pill.style.filter = index < selectedMultiplier - 2 || index > selectedMultiplier + 2 ? 
+                        'blur(3px) opacity(0.5)' : 'blur(1px) opacity(0.8)';
+                }
+            });
+        } else {
+            multipliers.style.transform = `translateX(calc(-${position % 1200}px + 50%))`;
+            requestAnimationFrame(animateMultipliers);
+        }
+    };
+    
+    animateMultipliers();
+}
+
+// Show prize popup
+function showPrize(boxIndex) {
+    const prizeValues = ['×1', '×1.5', '×2', '×3', '×5'];
+    const prizePopup = document.getElementById('prizePopup');
+    const prizeValue = document.getElementById('prizeValue');
+    
+    // Determine prize based on box index (just for demo)
+    const prize = prizeValues[boxIndex % prizeValues.length];
+    prizeValue.textContent = prize;
+    
+    prizePopup.classList.remove('hidden');
+    
+    // Add confetti effect
+    setTimeout(() => {
+        prizePopup.style.animation = 'none';
+        void prizePopup.offsetWidth; // Trigger reflow
+        prizePopup.style.animation = 'rise-up 0.5s ease-out, glow-intense 1s ease-in-out';
+    }, 50);
+}
+
+// Spin button handler
+document.getElementById('spinButton').addEventListener('click', () => {
+    // Reset animations
+    document.querySelectorAll('.loot-box, .multiplier-pill').forEach(el => {
+        el.classList.remove('selected');
+        el.style.filter = '';
+    });
+    
+    // Hide prize popup
+    document.getElementById('prizePopup').classList.add('hidden');
+    
+    // Restart animations
+    document.getElementById('lootBoxes').style.transform = 'translateX(0)';
+    document.getElementById('multipliers').style.transform = 'translateX(0)';
+    
+    setTimeout(() => {
+        initLootBoxes();
+        initMultipliers();
+    }, 100);
+});

style.css

@@ -1,28 +1,129 @@
-body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
+/* Base styles */
+.text-shadow-orange {
+    text-shadow: 0 0 8px rgba(255, 140, 0, 0.7);
 }
 
-h1 {
-	font-size: 16px;
-	margin-top: 0;
+.text-shadow-gold {
+    text-shadow: 0 0 12px rgba(255, 215, 0, 0.8);
 }
 
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
+/* Loot Box Styles */
+.loot-box {
+    width: 80px;
+    height: 80px;
+    margin: 0 15px;
+    border-radius: 8px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    transition: transform 0.3s ease, filter 0.3s ease;
 }
 
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
+.loot-box.common {
+    border: 2px solid #2ecc71;
+    box-shadow: 0 0 15px rgba(46, 204, 113, 0.5);
 }
 
-.card p:last-child {
-	margin-bottom: 0;
+.loot-box.rare {
+    border: 2px solid #3498db;
+    box-shadow: 0 0 15px rgba(52, 152, 219, 0.5);
 }
+
+.loot-box.epic {
+    border: 2px solid #9b59b6;
+    box-shadow: 0 0 15px rgba(155, 89, 182, 0.5);
+}
+
+.loot-box.legendary {
+    border: 2px solid #f1c40f;
+    box-shadow: 0 0 20px rgba(241, 196, 15, 0.7);
+}
+
+.loot-box.selected {
+    transform: scale(1.2) perspective(500px) rotateX(5deg);
+    z-index: 10;
+}
+
+/* Selection Window */
+.selection-window {
+    width: 100px;
+    height: 100px;
+    border: 2px solid #FF8C00;
+    border-radius: 12px;
+    box-shadow: 0 0 20px rgba(255, 140, 0, 0.7);
+    pointer-events: none;
+    opacity: 0.8;
+    animation: pulse-glow 2s infinite;
+}
+
+/* Multiplier Styles */
+.multiplier-pill {
+    min-width: 80px;
+    padding: 8px 16px;
+    margin: 0 10px;
+    border-radius: 20px;
+    background: rgba(255, 255, 255, 0.1);
+    backdrop-filter: blur(5px);
+    border: 1px solid rgba(255, 215, 0, 0.3);
+    color: white;
+    font-weight: bold;
+    text-align: center;
+    transition: all 0.3s ease;
+}
+
+.multiplier-pill.selected {
+    background: linear-gradient(135deg, rgba(255, 140, 0, 0.8), rgba(255, 215, 0, 0.8));
+    transform: scale(1.3);
+    box-shadow: 0 0 25px rgba(255, 215, 0, 0.7);
+}
+
+/* Spin Button */
+.spin-button {
+    background: linear-gradient(135deg, #f1c40f, #FF8C00);
+    box-shadow: 0 0 20px rgba(255, 140, 0, 0.5);
+    transition: all 0.3s ease;
+}
+
+.spin-button:hover {
+    transform: scale(1.05);
+    box-shadow: 0 0 30px rgba(255, 140, 0, 0.8);
+}
+
+.spin-button:active {
+    transform: scale(0.95);
+}
+
+/* Prize Popup */
+.prize-popup {
+    width: 200px;
+    height: 200px;
+    background: rgba(0, 0, 0, 0.8);
+    backdrop-filter: blur(10px);
+    border-radius: 20px;
+    border: 2px solid #FF8C00;
+    box-shadow: 0 0 40px rgba(255, 140, 0, 0.8);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 100;
+    animation: rise-up 0.5s ease-out, glow-intense 1s ease-in-out;
+}
+
+/* Animations */
+@keyframes pulse-glow {
+    0% { box-shadow: 0 0 20px rgba(255, 140, 0, 0.7); }
+    50% { box-shadow: 0 0 30px rgba(255, 140, 0, 0.9); }
+    100% { box-shadow: 0 0 20px rgba(255, 140, 0, 0.7); }
+}
+
+@keyframes rise-up {
+    from { transform: translate(-50%, -30%); opacity: 0; }
+    to { transform: translate(-50%, -50%); opacity: 1; }
+}
+
+@keyframes glow-intense {
+    0% { box-shadow: 0 0 20px rgba(255, 140, 0, 0.7); }
+    50% { box-shadow: 0 0 60px rgba(255, 215, 0, 0.9); }
+    100% { box-shadow: 0 0 40px rgba(255, 140, 0, 0.8); }
+}