Spaces:

ProjectGenesis
/

loot-spin-royale

Running

App Files Files Community

ProjectGenesis commited on Nov 18

Commit

f2768a5

verified ·

1 Parent(s): 66ba528

<!DOCTYPE html>

Browse files

<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Nioplay Loot Box + Multiplier Demo</title>
<style>
:root {
--bg: #050505;
--accent: #ff8c00;
--accent-soft: rgba(255, 140, 0, 0.3);
--gold: #ffcc66;
--text-main: #f7f7f7;
--text-dim: #a7a7a7;
--loot-box-size: 90px;
--pill-width: 90px;
--pill-height: 40px;
--gap: 18px;
--transition-duration: 1100ms;
}

* {
box-sizing: border-box;
margin: 0;
padding: 0;
}

body {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
background: radial-gradient(circle at top, #1a0d00 0%, #000 55%);
font-family: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text",
"Segoe UI", sans-serif;
color: var(--text-main);
}

.module {
width: 1100px;
max-width: 100%;
border-radius: 24px;
padding: 28px 32px 36px;
background:
radial-gradient(circle at top, rgba(255, 140, 0, 0.16), transparent 65%),
linear-gradient(135deg, rgba(255, 255, 255, 0.06), rgba(10, 10, 10, 0.95));
box-shadow:
0 0 40px rgba(0, 0, 0, 0.9),
0 0 60px rgba(255, 140, 0, 0.35);
border: 1px solid rgba(255, 255, 255, 0.08);
backdrop-filter: blur(18px);
}

.label {
font-size: 12px;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--text-dim);
margin-bottom: 6px;
}

.section {
margin-bottom: 24px;
}

.track-shell {
position: relative;
padding: 22px 0;
border-radius: 18px;
background:
radial-gradient(circle at top, rgba(255, 140, 0, 0.18), transparent 60%),
linear-gradient(to bottom, rgba(10, 10, 10, 0.98), rgba(5, 5, 5, 0.98));
box-shadow:
0 12px 30px rgba(0, 0, 0, 0.85),
inset 0 0 0 1px rgba(255, 255, 255, 0.04);
overflow: hidden;
}

.track-wrapper {
overflow: hidden;
padding: 0 70px;
}

.track {
display: flex;
align-items: center;
gap: var(--gap);
transform: translateX(0px);
will-change: transform;
}

.selection-window {
position: absolute;
top: 16px;
left: 50%;
transform: translateX(-50%);
border-radius: 16px;
border: 2px solid var(--accent);
box-shadow:
0 0 18px rgba(255, 140, 0, 0.9),
0 0 40px rgba(255, 140, 0, 0.4);
pointer-events: none;
z-index: 4;
}

.selection-window--loot {
width: var(--loot-box-size);
height: var(--loot-box-size) + 20px;
}

.selection-window--multi {
width: var(--pill-width);
height: var(--pill-height) + 12px;
}

.selection-window::before {
content: "";
position: absolute;
inset: -16px;
border-radius: inherit;
background: radial-gradient(
circle at center,
rgba(255, 140, 0, 0.14),
transparent 60%
);
opacity: 0.8;
}

/* Loot boxes */

.loot-box {
width: var(--loot-box-size);
height: var(--loot-box-size);
border-radius: 18px;
position: relative;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid rgba(255, 255, 255, 0.08);
background: radial-gradient(circle at top, #171717, #050505);
box-shadow:
0 8px 18px rgba(0, 0, 0, 0.85),
0 0 18px rgba(0, 0, 0, 0.7);
overflow: hidden;
transition:
transform 160ms ease-out,
box-shadow 160ms ease-out,
border-color 160ms ease-out,
filter 160ms ease-out;
}

.loot-box::before {
content: "";
position: absolute;
inset: 8px;
border-radius: 14px;
border: 2px solid rgba(255, 255, 255, 0.16);
box-shadow: inset 0 0 14px rgba(0, 0, 0, 0.9);
z-index: 1;
}

.loot-box-inner {
position: relative;
z-index: 2;
width: 48px;
height: 48px;
border-radius: 14px;
background: radial-gradient(circle at top, #222, #000);
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 0 14px rgba(0, 0, 0, 0.8);
}

.loot-box-inner::before {
content: "";
width: 22px;
height: 22px;
border-radius: 6px;
border: 2px solid rgba(255, 255, 255, 0.6);
box-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}

.loot-box[data-rarity="green"] {
box-shadow: 0 0 18px rgba(0, 200, 120, 0.7);
}

.loot-box[data-rarity="blue"] {
box-shadow: 0 0 18px rgba(80, 160, 255, 0.8);
}

.loot-box[data-rarity="purple"] {
box-shadow: 0 0 20px rgba(160, 80, 255, 0.85);
}

.loot-box[data-rarity="gold"] {
box-shadow: 0 0 22px rgba(255, 190, 70, 0.95);
}

.loot-box.selected {
transform: scale(1.12);
border-color: rgba(255, 140, 0, 0.95);
filter: brightness(1.1);
box-shadow:
0 0 26px rgba(255, 140, 0, 0.95),
0 0 60px rgba(255, 140, 0, 0.75);
}

.loot-box.motion-blur {
filter: blur(1px) brightness(0.9);
opacity: 0.9;
}

/* Multiplier pills */

.multi-pill {
min-width: var(--pill-width);
height: var(--pill-height);
border-radius: 999px;
display: flex;
align-items: center;
justify-content: center;
font-size: 17px;
font-weight: 700;
color: #ffd8a0;
background: rgba(255, 255, 255, 0.08);
backdrop-filter: blur(6px);
box-shadow:
0 0 8px rgba(0, 0, 0, 0.6),
inset 0 0 6px rgba(255, 255, 255, 0.1);
transition:
transform 140ms ease-out,
color 140ms ease-out,
box-shadow 140ms ease-out,
filter 140ms ease-out;
}

.multi-pill.selected {
transform: scale(1.18);
color: #fff2cc;
box-shadow:
0 0 20px rgba(255, 140, 0, 0.95),
0 0 50px rgba(255, 140, 0, 0.6);
}

.multi-pill.motion-blur {
filter: blur(1px) brightness(0.95);
opacity: 0.9;
}

/* Spin button */

.actions {
display: flex;
justify-content: center;
margin-top: 10px;
}

.spin-btn {
min-width: 220px;
border: none;
border-radius: 999px;
padding: 12px 32px;
font-size: 14px;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
cursor: pointer;
background: radial-gradient(circle at top, #ffe5a8, #ff8c00);
color: #1a0900;
box-shadow:
0 0 30px rgba(255, 140, 0, 0.95),
0 14px 26px rgba(0, 0, 0, 0.9);
position: relative;
overflow: hidden;
transition:
transform 120ms ease-out,
box-shadow 120ms ease-out,
filter 120ms ease-out;
}

.spin-btn::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(circle at 20% 0%, rgba(255, 255, 255, 0.35), transparent 60%);
opacity: 0.8;
pointer-events: none;
mix-blend-mode: screen;
}

.spin-btn:active {
transform: translateY(1px) scale(0.98);
box-shadow:
0 0 18px rgba(255, 140, 0, 0.8),
0 6px 10px rgba(0, 0, 0, 0.9);
filter: brightness(0.96);
}

.spin-btn.disabled {
cursor: wait;
filter: grayscale(0.1) brightness(0.9);
box-shadow:
0 0 14px rgba(255, 140, 0, 0.6),
0 8px 18px rgba(0, 0, 0, 0.9);
}

/* Popup */

.popup-backdrop {
position: fixed;
inset: 0;
display: none;
align-items: center;
justify-content: center;
background: radial-gradient(circle at center, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.95));
z-index: 50;
}

.popup-backdrop.visible {
display: flex;
}

.popup {
width: 360px;
max-width: 90%;
padding: 22px 22px 20px;
border-radius: 20px;
background:
radial-gradient(circle at top, rgba(255, 140, 0, 0.22), transparent 60%),
linear-gradient(135deg, rgba(25, 25, 25, 0.98), rgba(5, 5, 5, 0.98));
border: 1px solid rgba(255, 255, 255, 0.12);
box-shadow:
0 0 40px rgba(0, 0, 0, 1),
0 0 50px rgba(255, 140, 0, 0.85);
text-align: center;
position: relative;
overflow: hidden;
}

.popup::before {
content: "";
position: absolute;
inset: -40%;
background: radial-gradient(circle at center, rgba(255, 140, 0, 0.25), transparent 70%);
opacity: 0.7;
pointer-events: none;
}

.popup-title {
position: relative;
z-index: 1;
font-size: 14px;
letter-spacing: 0.25em;
text-transform: uppercase;
color: var(--text-dim);
margin-bottom: 8px;
}

.popup-total {
position: relative;
z-index: 1;
font-size: 30px;
font-weight: 800;
color: var(--gold);
text-shadow:
0 0 18px rgba(255, 204, 102, 0.9),
0 0 40px rgba(255, 140, 0, 0.85);
margin-bottom: 6px;
}

.popup-line {
position: relative;
z-index: 1;
font-size: 13px;
color: var(--text-dim);
margin-bottom: 3px;
}

.popup-close {
position: relative;
z-index: 1;
margin-top: 12px;
border: none;
border-radius: 999px;
padding: 8px 20px;
font-size: 13px;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
cursor: pointer;
background: radial-gradient(circle at top, #ffe0a0, #ff8c00);
color: #1a0900;
box-shadow:
0 0 20px rgba(255, 140, 0, 0.9),
0 8px 16px rgba(0, 0, 0, 0.9);
}

@media
(max-width: 900px) {
.module {
padding: 20px 16px 24px;
}
.track-wrapper {
padding: 0 40px;
}
}
</style>
</head>
<body>
<div class="module">

<div class="section">
<div class="label">LOOT BOX SPIN</div>
<div class="track-shell">
<div class="selection-window selection-window--loot"></div>
<div class="track-wrapper" id="lootWrapper">
<div cl

Files changed (6) hide show

README.md +7 -4
components/footer.js +43 -0
components/header.js +37 -0
index.html +90 -19
script.js +152 -0
style.css +79 -18

README.md CHANGED Viewed

@@ -1,10 +1,13 @@
 ---
-title: Loot Spin Royale
-emoji: 🦀
 colorFrom: red
-colorTo: red
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: Loot Spin Royale  🎰
 colorFrom: red
+colorTo: blue
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).

components/footer.js ADDED Viewed

	@@ -0,0 +1,43 @@

+class CustomFooter extends HTMLElement {
+    connectedCallback() {
+        this.attachShadow({ mode: 'open' });
+        this.shadowRoot.innerHTML = `
+            <style>
+                footer {
+                    background: rgba(10, 10, 10, 0.8);
+                    backdrop-filter: blur(10px);
+                    border-top: 1px solid rgba(255, 255, 255, 0.1);
+                }
+                .social-icon {
+                    transition: all 0.3s ease;
+                }
+                .social-icon:hover {
+                    color: #ff8c00;
+                    transform: translateY(-2px);
+                }
+            </style>
+            <footer class="py-6 px-6 mt-12">
+                <div class="container mx-auto">
+                    <div class="flex flex-col md:flex-row justify-between items-center">
+                        <div class="text-gray-400 text-sm mb-4 md:mb-0">
+                            © 2023 Loot Spin Royale. All rights reserved.
+                        </div>
+                        <div class="flex gap-4">
+                            <a href="#" class="social-icon text-gray-400">
+                                <i data-feather="twitter"></i>
+                            </a>
+                            <a href="#" class="social-icon text-gray-400">
+                                <i data-feather="instagram"></i>
+                            </a>
+                            <a href="#" class="social-icon text-gray-400">
+                                <i data-feather="facebook"></i>
+                            </a>
+                        </div>
+                    </div>
+                    <div class="text-center text-xs text-gray-500 mt-4">
+                        This is a demo game. No real money is involved.
+                    </div>
+                </div>
+            </

components/header.js ADDED Viewed

	@@ -0,0 +1,37 @@

+class CustomHeader extends HTMLElement {
+    connectedCallback() {
+        this.attachShadow({ mode: 'open' });
+        this.shadowRoot.innerHTML = `
+            <style>
+                header {
+                    background: rgba(10, 10, 10, 0.8);
+                    backdrop-filter: blur(10px);
+                    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+                }
+                .logo {
+                    background: linear-gradient(135deg, #ff8c00, #ffcc00);
+                    -webkit-background-clip: text;
+                    background-clip: text;
+                    color: transparent;
+                }
+                nav a:hover {
+                    color: #ff8c00;
+                }
+            </style>
+            <header class="py-4 px-6">
+                <div class="container mx-auto flex justify-between items-center">
+                    <div class="logo text-2xl font-bold">Loot Spin Royale  🎰</div>
+                    <nav class="flex gap-6">
+                        <a href="#" class="text-gray-300 hover:text-orange-400 transition-colors">Home</a>
+                        <a href="#" class="text-gray-300 hover:text-orange-400 transition-colors">Prizes</a>
+                        <a href="#" class="text-gray-300 hover:text-orange-400 transition-colors">About</a>
+                    </nav>
+                </div>
+            </header>
+        `;
+    }
+}
+customElements.define('custom-header', CustomHeader);

index.html CHANGED Viewed

@@ -1,19 +1,90 @@
-<!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>Loot Spin Royale  🎰</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body class="bg-gray-900 text-white">
+    <custom-header></custom-header>
+    <main class="container mx-auto px-4 py-12">
+        <div class="max-w-4xl mx-auto bg-gray-800 rounded-2xl shadow-2xl overflow-hidden">
+            <!-- Game Module -->
+            <div class="p-8">
+                <h1 class="text-3xl font-bold text-center mb-8 text-orange-400">Loot Spin Royale</h1>
+                <!-- Loot Box Section -->
+                <div class="mb-12">
+                    <h2 class="text-xl font-semibold mb-4 text-gray-300">LOOT BOX SPIN <i data-feather="gift" class="inline"></i></h2>
+                    <div class="relative bg-gray-900 rounded-xl p-6 shadow-inner">
+                        <div class="overflow-hidden">
+                            <div class="flex gap-6 transition-transform duration-1000" id="lootTrack">
+                                <!-- Loot boxes will be generated by JS -->
+                            </div>
+                        </div>
+                        <div class="absolute inset-0 flex items-center justify-center pointer-events-none">
+                            <div class="w-24 h-24 border-2 border-orange-400 rounded-xl shadow-lg shadow-orange-500/20"></div>
+                        </div>
+                    </div>
+                </div>
+                <!-- Multiplier Section -->
+                <div class="mb-12">
+                    <h2 class="text-xl font-semibold mb-4 text-gray-300">MULTIPLIER <i data-feather="zap" class="inline"></i></h2>
+                    <div class="relative bg-gray-900 rounded-xl p-6 shadow-inner">
+                        <div class="overflow-hidden">
+                            <div class="flex gap-4 transition-transform duration-1000" id="multiTrack">
+                                <!-- Multipliers will be generated by JS -->
+                            </div>
+                        </div>
+                        <div class="absolute inset-0 flex items-center justify-center pointer-events-none">
+                            <div class="w-20 h-12 border-2 border-orange-400 rounded-full shadow-lg shadow-orange-500/20"></div>
+                        </div>
+                    </div>
+                </div>
+                <!-- Spin Button -->
+                <div class="text-center">
+                    <button id="spinBtn" class="bg-gradient-to-br from-orange-400 to-orange-600 hover:from-orange-500 hover:to-orange-700 text-gray-900 font-bold py-3 px-8 rounded-full shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-opacity-50">
+                        SPIN NOW <i data-feather="rotate-cw" class="inline ml-2"></i>
+                    </button>
+                </div>
+            </div>
+        </div>
+    </main>
+    <!-- Result Modal -->
+    <div id="resultModal" class="fixed inset-0 bg-black bg-opacity-80 flex items-center justify-center z-50 hidden">
+        <div class="bg-gray-800 rounded-2xl p-8 max-w-md w-full mx-4 shadow-2xl border border-orange-400">
+            <div class="text-center">
+                <h2 class="text-2xl font-bold mb-2 text-orange-400">YOU WON!</h2>
+                <div id="resultAmount" class="text-5xl font-extrabold my-6 text-white">0 SC</div>
+                <div id="resultDetails" class="text-gray-300 mb-6">
+                    <p>Base: <span id="baseAmount">0</span> SC</p>
+                    <p>Multiplier: ×<span id="multiplier">1</span></p>
+                </div>
+                <button id="closeModal" class="bg-orange-500 hover:bg-orange-600 text-white font-bold py-2 px-6 rounded-full transition-colors duration-300">
+                    CLAIM PRIZE <i data-feather="check" class="inline ml-2"></i>
+                </button>
+            </div>
+        </div>
+    </div>
+    <custom-footer></custom-footer>
+    <!-- Web Components -->
+    <script src="components/header.js"></script>
+    <script src="components/footer.js"></script>
+    <script src="script.js"></script>
+    <script>
+        feather.replace();
+    </script>
+<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+</body>
+</html>

script.js ADDED Viewed

	@@ -0,0 +1,152 @@

+document.addEventListener('DOMContentLoaded', function() {
+    // Generate loot boxes
+    const lootTrack = document.getElementById('lootTrack');
+    const lootBoxes = [
+        { prize: 10, rarity: 'green' },
+        { prize: 15, rarity: 'blue' },
+        { prize: 20, rarity: 'blue' },
+        { prize: 25, rarity: 'green' },
+        { prize: 30, rarity: 'purple' },
+        { prize: 35, rarity: 'purple' },
+        { prize: 40, rarity: 'green' },
+        { prize: 45, rarity: 'blue' },
+        { prize: 50, rarity: 'purple' },
+        { prize: 100, rarity: 'gold' }
+    ];
+    lootBoxes.forEach(box => {
+        const boxElement = document.createElement('div');
+        boxElement.className = 'loot-box flex-shrink-0';
+        boxElement.dataset.prize = box.prize;
+        boxElement.dataset.rarity = box.rarity;
+        const inner = document.createElement('div');
+        inner.className = 'loot-box-inner';
+        inner.innerHTML = `<span class="text-xs font-bold">${box.prize} SC</span>`;
+        boxElement.appendChild(inner);
+        lootTrack.appendChild(boxElement);
+        // Add rarity glow
+        if (box.rarity === 'green') {
+            boxElement.style.boxShadow += ', 0 0 15px rgba(0, 200, 120, 0.7)';
+        } else if (box.rarity === 'blue') {
+            boxElement.style.boxShadow += ', 0 0 15px rgba(80, 160, 255, 0.8)';
+        } else if (box.rarity === 'purple') {
+            boxElement.style.boxShadow += ', 0 0 18px rgba(160, 80, 255, 0.9)';
+        } else if (box.rarity === 'gold') {
+            boxElement.style.boxShadow += ', 0 0 20px rgba(255, 190, 70, 1)';
+        }
+    });
+    // Generate multipliers
+    const multiTrack = document.getElementById('multiTrack');
+    const multipliers = [1, 1.25, 1.5, 2, 3, 5, 1, 1.25, 1.5, 2, 3, 5];
+    multipliers.forEach(m => {
+        const multiElement = document.createElement('div');
+        multiElement.className = 'multiplier flex-shrink-0';
+        multiElement.textContent = `×${m}`;
+        multiElement.dataset.multiplier = m;
+        multiTrack.appendChild(multiElement);
+    });
+    // Spin functionality
+    const spinBtn = document.getElementById('spinBtn');
+    const resultModal = document.getElementById('resultModal');
+    const resultAmount = document.getElementById('resultAmount');
+    const baseAmount = document.getElementById('baseAmount');
+    const multiplier = document.getElementById('multiplier');
+    const closeModal = document.getElementById('closeModal');
+    spinBtn.addEventListener('click', async function() {
+        if (spinBtn.classList.contains('disabled')) return;
+        spinBtn.classList.add('disabled');
+        // Add loading state
+        spinBtn.innerHTML = 'SPINNING <i data-feather="loader" class="inline ml-2 animate-spin"></i>';
+        feather.replace();
+        // Simulate spinning animation
+        const lootBoxes = document.querySelectorAll('.loot-box');
+        const multipliers = document.querySelectorAll('.multiplier');
+        // Reset previous selections
+        lootBoxes.forEach(box => box.classList.remove('selected'));
+        multipliers.forEach(m => m.classList.remove('selected'));
+        // Randomly select loot box and multiplier
+        const randomLootIndex = Math.floor(Math.random() * lootBoxes.length);
+        const randomMultiIndex = Math.floor(Math.random() * multipliers.length);
+        // Simulate spinning animation
+        await spinAnimation(lootTrack, randomLootIndex, 1500);
+        await spinAnimation(multiTrack, randomMultiIndex, 1200);
+        // Select the winners
+        const selectedBox = lootBoxes[randomLootIndex];
+        const selectedMulti = multipliers[randomMultiIndex];
+        selectedBox.classList.add('selected');
+        selectedMulti.classList.add('selected');
+        // Calculate prize
+        const prize = parseFloat(selectedBox.dataset.prize);
+        const multi = parseFloat(selectedMulti.dataset.multiplier);
+        const total = prize * multi;
+        // Show result
+        resultAmount.textContent = `${total.toFixed(2)} SC`;
+        baseAmount.textContent = prize;
+        multiplier.textContent = multi;
+        // Show modal with slight delay
+        setTimeout(() => {
+            resultModal.classList.remove('hidden');
+            resultModal.classList.add('flex', 'fade-in');
+        }, 500);
+        // Reset button
+        spinBtn.classList.remove('disabled');
+        spinBtn.innerHTML = 'SPIN AGAIN <i data-feather="rotate-cw" class="inline ml-2"></i>';
+        feather.replace();
+    });
+    closeModal.addEventListener('click', function() {
+        resultModal.classList.add('hidden');
+        resultModal.classList.remove('flex', 'fade-in');
+    });
+    // Helper function for spinning animation
+    function spinAnimation(track, targetIndex, duration) {
+        return new Promise(resolve => {
+            const items = track.querySelectorAll('div');
+            const itemWidth = items[0].offsetWidth + 24; // width + gap
+            // Calculate final position to center the target item
+            const wrapperWidth = track.parentElement.offsetWidth;
+            const targetPosition = -((targetIndex * itemWidth) - (wrapperWidth / 2) + (itemWidth / 2));
+            // Add some extra spins
+            const extraSpins = 3 + Math.floor(Math.random() * 3);
+            const extraDistance = extraSpins * items.length * itemWidth;
+            const direction = Math.random() > 0.5 ? 1 : -1;
+            const startPosition = targetPosition - (extraDistance * direction);
+            // Set initial position
+            track.style.transition = 'none';
+            track.style.transform = `translateX(${startPosition}px)`;
+            // Force reflow
+            track.offsetHeight;
+            // Animate to final position
+            track.style.transition = `transform ${duration}ms cubic-bezier(0.25, 0.1, 0.25, 1)`;
+            track.style.transform = `translateX(${targetPosition}px)`;
+            setTimeout(() => {
+                resolve();
+            }, duration);
+        });
+    }
+});

style.css CHANGED Viewed

@@ -1,28 +1,89 @@
 body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 }
-h1 {
-	font-size: 16px;
-	margin-top: 0;
 }
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
 }
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
 }
-.card p:last-child {
-	margin-bottom: 0;
 }

+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');
 body {
+    font-family: 'Poppins', sans-serif;
+    background: radial-gradient(circle at top, #1a0d00 0%, #000 55%);
+    min-height: 100vh;
+}
+/* Loot Box Styles */
+.loot-box {
+    width: 90px;
+    height: 90px;
+    border-radius: 18px;
+    background: linear-gradient(145deg, #1e1e1e, #0a0a0a);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.85);
+    transition: all 0.3s ease;
+    position: relative;
+    overflow: hidden;
+}
+.loot-box::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    border-radius: 16px;
+    padding: 2px;
+    background: linear-gradient(135deg, rgba(255, 140, 0, 0.5), rgba(255, 140, 0, 0.1));
+    -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.selected {
+    transform: scale(1.1);
+    box-shadow: 0 0 20px rgba(255, 140, 0, 0.7);
+}
+.loot-box-inner {
+    width: 60px;
+    height: 60px;
+    border-radius: 12px;
+    background: linear-gradient(145deg, #222, #111);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
 }
+/* Multiplier Styles */
+.multiplier {
+    min-width: 80px;
+    height: 40px;
+    border-radius: 999px;
+    background: rgba(255, 255, 255, 0.1);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-weight: 600;
+    transition: all 0.3s ease;
 }
+.multiplier.selected {
+    background: rgba(255, 140, 0, 0.2);
+    color: #ff8c00;
+    transform: scale(1.1);
 }
+/* Animation Classes */
+.animate-spin {
+    animation: spin 0.5s linear infinite;
 }
+@keyframes spin {
+    from { transform: rotate(0deg); }
+    to { transform: rotate(360deg); }
 }
+.fade-in {
+    animation: fadeIn 0.3s ease-in-out;
+}
+@keyframes fadeIn {
+    from { opacity: 0; }
+    to { opacity: 1; }
+}