Spaces:

ProjectGenesis
/

lootbox-bonanza-spinner

Running

App Files Files Community

ProjectGenesis commited on 24 days ago

Commit

0dfe679

verified ·

1 Parent(s): 550b2d4

<!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 (5) hide show

README.md +8 -5
components/loot-box.js +9 -0
index.html +111 -19
script.js +198 -0
style.css +88 -19

README.md CHANGED Viewed

@@ -1,10 +1,13 @@
 ---
-title: Lootbox Bonanza Spinner
-emoji: 🌍
-colorFrom: pink
-colorTo: pink
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: LootBox Bonanza Spinner  🎰
+colorFrom: purple
+colorTo: gray
+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/loot-box.js ADDED Viewed

	@@ -0,0 +1,9 @@

+class LootBox extends HTMLElement {
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+  }
+  connectedCallback() {
+    const type = this.getAttribute('type') || 'common';
+    const value = this.get

index.html CHANGED Viewed

@@ -1,19 +1,111 @@
-<!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>LootBox Bonanza Spinner</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 min-h-screen flex items-center justify-center p-6">
+  <div class="max-w-4xl w-full rounded-3xl p-8 bg-gradient-to-br from-gray-800 to-gray-900 border border-gray-700 shadow-2xl">
+    <!-- Header -->
+    <div class="flex justify-between items-center mb-8">
+      <h1 class="text-3xl font-bold text-orange-400 flex items-center">
+        <i data-feather="gift" class="mr-2"></i> LootBox Bonanza
+      </h1>
+      <div class="flex items-center space-x-4">
+        <div class="bg-gray-700 px-4 py-2 rounded-full flex items-center">
+          <i data-feather="star" class="text-yellow-400 mr-2"></i>
+          <span class="font-bold text-white">5,000</span>
+        </div>
+        <button class="bg-orange-500 hover:bg-orange-600 text-white px-4 py-2 rounded-full transition-all">
+          <i data-feather="plus" class="mr-1"></i> Add Funds
+        </button>
+      </div>
+    </div>
+    <!-- Main Game Area -->
+    <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
+      <!-- Loot Box Section -->
+      <div class="bg-gray-800 rounded-2xl p-6 border border-gray-700 shadow-lg">
+        <h2 class="text-xl font-semibold text-white mb-4 flex items-center">
+          <i data-feather="box" class="mr-2 text-orange-400"></i> Loot Boxes
+        </h2>
+        <div class="relative h-40 overflow-hidden">
+          <div class="absolute inset-0 flex items-center">
+            <div class="w-full h-32 bg-gray-900 rounded-xl border-2 border-orange-500 shadow-[0_0_20px_rgba(255,140,0,0.5)]"></div>
+          </div>
+          <div id="lootBoxTrack" class="absolute inset-0 flex items-center space-x-6 px-4">
+            <!-- Loot boxes will be added here by JavaScript -->
+          </div>
+        </div>
+        <div class="mt-6 flex justify-center">
+          <button id="spinLootBtn" class="bg-gradient-to-r from-orange-500 to-yellow-500 hover:from-orange-600 hover:to-yellow-600 text-white font-bold py-3 px-8 rounded-full shadow-lg transition-all transform hover:scale-105">
+            Spin Loot Box (10 coins)
+          </button>
+        </div>
+      </div>
+      <!-- Multiplier Section -->
+      <div class="bg-gray-800 rounded-2xl p-6 border border-gray-700 shadow-lg">
+        <h2 class="text-xl font-semibold text-white mb-4 flex items-center">
+          <i data-feather="zap" class="mr-2 text-yellow-400"></i> Multiplier
+        </h2>
+        <div class="relative h-24 overflow-hidden">
+          <div class="absolute inset-0 flex items-center">
+            <div class="w-full h-16 bg-gray-900 rounded-xl border-2 border-yellow-500 shadow-[0_0_20px_rgba(255,215,0,0.3)]"></div>
+          </div>
+          <div id="multiplierTrack" class="absolute inset-0 flex items-center space-x-4 px-4">
+            <!-- Multipliers will be added here by JavaScript -->
+          </div>
+        </div>
+        <div class="mt-6 flex justify-center">
+          <button id="spinMultiplierBtn" class="bg-gradient-to-r from-yellow-500 to-orange-500 hover:from-yellow-600 hover:to-orange-600 text-white font-bold py-3 px-8 rounded-full shadow-lg transition-all transform hover:scale-105">
+            Spin Multiplier (5 coins)
+          </button>
+        </div>
+      </div>
+    </div>
+    <!-- Result Display -->
+    <div class="mt-8 bg-gray-800 rounded-2xl p-6 border border-gray-700 shadow-lg">
+      <h2 class="text-xl font-semibold text-white mb-4 flex items-center">
+        <i data-feather="award" class="mr-2 text-yellow-400"></i> Your Prize
+      </h2>
+      <div class="flex flex-col items-center">
+        <div id="prizeDisplay" class="text-5xl font-bold text-yellow-400 mb-2">0</div>
+        <div class="text-gray-300 mb-4">SC</div>
+        <div id="prizeDetails" class="text-gray-400 text-center">
+          Spin to win amazing prizes!
+        </div>
+        <button id="claimBtn" class="mt-4 bg-green-600 hover:bg-green-700 text-white font-bold py-2 px-6 rounded-full shadow transition-all transform hover:scale-105 hidden">
+          Claim Prize
+        </button>
+      </div>
+    </div>
+  </div>
+  <!-- Modal -->
+  <div id="winModal" class="fixed inset-0 bg-black bg-opacity-80 flex items-center justify-center hidden z-50">
+    <div class="bg-gradient-to-br from-gray-800 to-gray-900 rounded-3xl p-8 max-w-md w-full border-2 border-yellow-500 shadow-[0_0_40px_rgba(255,215,0,0.5)]">
+      <div class="text-center">
+        <i data-feather="award" class="text-yellow-400 w-16 h-16 mx-auto mb-4"></i>
+        <h3 class="text-2xl font-bold text-white mb-2">Congratulations!</h3>
+        <p class="text-gray-300 mb-6">You won <span id="modalPrize" class="text-yellow-400 font-bold">0</span> SC!</p>
+        <button id="modalCloseBtn" class="bg-orange-500 hover:bg-orange-600 text-white font-bold py-2 px-6 rounded-full transition-all">
+          Awesome!
+        </button>
+      </div>
+    </div>
+  </div>
+  <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,198 @@

+document.addEventListener('DOMContentLoaded', function() {
+  // Initialize game state
+  let coins = 5000;
+  let currentPrize = 0;
+  let lootBoxes = [];
+  let multipliers = [];
+  // DOM elements
+  const lootBoxTrack = document.getElementById('lootBoxTrack');
+  const multiplierTrack = document.getElementById('multiplierTrack');
+  const spinLootBtn = document.getElementById('spinLootBtn');
+  const spinMultiplierBtn = document.getElementById('spinMultiplierBtn');
+  const prizeDisplay = document.getElementById('prizeDisplay');
+  const prizeDetails = document.getElementById('prizeDetails');
+  const claimBtn = document.getElementById('claimBtn');
+  const winModal = document.getElementById('winModal');
+  const modalPrize = document.getElementById('modalPrize');
+  const modalCloseBtn = document.getElementById('modalCloseBtn');
+  // Initialize loot boxes
+  function initLootBoxes() {
+    const boxTypes = [
+      { type: 'common', value: 10, color: 'gray-500' },
+      { type: 'common', value: 15, color: 'gray-500' },
+      { type: 'common', value: 20, color: 'gray-500' },
+      { type: 'rare', value: 30, color: 'blue-500' },
+      { type: 'rare', value: 40, color: 'blue-500' },
+      { type: 'epic', value: 60, color: 'purple-500' },
+      { type: 'epic', value: 80, color: 'purple-500' },
+      { type: 'legendary', value: 120, color: 'yellow-500' },
+      { type: 'legendary', value: 150, color: 'yellow-500' },
+      { type: 'jackpot', value: 300, color: 'orange-500' }
+    ];
+    // Create enough boxes for smooth scrolling
+    for (let i = 0; i < 30; i++) {
+      const box = boxTypes[i % boxTypes.length];
+      lootBoxes.push(box);
+      const boxElement = document.createElement('div');
+      boxElement.className = `loot-box ${box.type} flex-shrink-0 mx-2`;
+      boxElement.innerHTML = `
+        <div class="text-${box.color} text-2xl mb-1">
+          ${box.type === 'common' ? '📦' :
+            box.type === 'rare' ? '🎁' :
+            box.type === 'epic' ? '💎' :
+            box.type === 'legendary' ? '🏆' : '💰'}
+        </div>
+        <div class="text-white text-sm">${box.value} SC</div>
+      `;
+      lootBoxTrack.appendChild(boxElement);
+    }
+  }
+  // Initialize multipliers
+  function initMultipliers() {
+    const multiplierValues = [1, 1.25, 1.5, 2, 3, 5, 1, 1.25, 1.5, 2, 3, 5];
+    // Create enough multipliers for smooth scrolling
+    for (let i = 0; i < 24; i++) {
+      const value = multiplierValues[i % multiplierValues.length];
+      multipliers.push(value);
+      const chip = document.createElement('div');
+      chip.className = 'multiplier-chip flex-shrink-0 mx-1';
+      chip.textContent = `×${value}`;
+      chip.dataset.value = value;
+      multiplierTrack.appendChild(chip);
+    }
+  }
+  // Spin animation
+  function spin(element, items, spinTime, callback) {
+    const startTime = Date.now();
+    const speed = 0.5; // pixels per millisecond
+    function animate() {
+      const elapsed = Date.now() - startTime;
+      const progress = Math.min(elapsed / spinTime, 1);
+      // Ease-out function
+      const easeProgress = 1 - Math.pow(1 - progress, 3);
+      // Calculate distance (more at start, less at end)
+      const distance = speed * spinTime * (1 - easeProgress * 0.9);
+      element.style.transform = `translateX(-${distance}px)`;
+      if (progress < 1) {
+        requestAnimationFrame(animate);
+      } else {
+        // Snap to nearest item
+        const itemWidth = items[0].offsetWidth + 8; // 8px for margin
+        const totalDistance = parseInt(element.style.transform.replace('translateX(-', '').replace('px)', ''));
+        const itemIndex = Math.round(totalDistance / itemWidth) % items.length;
+        const snapDistance = itemIndex * itemWidth;
+        element.style.transition = 'transform 0.5s ease-out';
+        element.style.transform = `translateX(-${snapDistance}px)`;
+        setTimeout(() => {
+          element.style.transition = '';
+          if (callback) callback(itemIndex);
+        }, 500);
+      }
+    }
+    animate();
+  }
+  // Spin loot box
+  spinLootBtn.addEventListener('click', function() {
+    if (coins < 10) {
+      alert('Not enough coins!');
+      return;
+    }
+    coins -= 10;
+    updateCoinDisplay();
+    spinLootBtn.disabled = true;
+    spin(lootBoxTrack, lootBoxTrack.children, 3000, function(index) {
+      const selectedBox = lootBoxes[index % lootBoxes.length];
+      currentPrize = selectedBox.value;
+      prizeDisplay.textContent = currentPrize;
+      prizeDetails.innerHTML = `
+        You got a <span class="text-${selectedBox.color} font-bold">${selectedBox.type}</span> loot box!
+      `;
+      spinLootBtn.disabled = false;
+      claimBtn.classList.remove('hidden');
+    });
+  });
+  // Spin multiplier
+  spinMultiplierBtn.addEventListener('click', function() {
+    if (coins < 5) {
+      alert('Not enough coins!');
+      return;
+    }
+    if (currentPrize === 0) {
+      alert('Spin a loot box first!');
+      return;
+    }
+    coins -= 5;
+    updateCoinDisplay();
+    spinMultiplierBtn.disabled = true;
+    spin(multiplierTrack, multiplierTrack.children, 2500, function(index) {
+      const selectedMultiplier = multipliers[index % multipliers.length];
+      const totalPrize = Math.round(currentPrize * selectedMultiplier);
+      prizeDisplay.textContent = totalPrize;
+      prizeDetails.innerHTML += `
+        <div class="mt-2">Multiplier: <span class="text-yellow-400 font-bold">×${selectedMultiplier}</span></div>
+      `;
+      currentPrize = totalPrize;
+      spinMultiplierBtn.disabled = false;
+      // Show win modal for big prizes
+      if (totalPrize >= 100) {
+        modalPrize.textContent = totalPrize;
+        winModal.classList.remove('hidden');
+        prizeDisplay.classList.add('winner-animation');
+      }
+    });
+  });
+  // Claim prize
+  claimBtn.addEventListener('click', function() {
+    coins += currentPrize;
+    currentPrize = 0;
+    updateCoinDisplay();
+    prizeDisplay.textContent = '0';
+    prizeDetails.textContent = 'Spin to win amazing prizes!';
+    prizeDisplay.classList.remove('winner-animation');
+    claimBtn.classList.add('hidden');
+  });
+  // Close modal
+  modalCloseBtn.addEventListener('click', function() {
+    winModal.classList.add('hidden');
+  });
+  // Update coin display
+  function updateCoinDisplay() {
+    document.querySelector('.bg-gray-700 span').textContent = coins.toLocaleString();
+  }
+  // Initialize the game
+  initLootBoxes();
+  initMultipliers();
+});

style.css CHANGED Viewed

@@ -1,28 +1,97 @@
-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;
 }

+@keyframes pulse {
+  0%, 100% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.05);
+  }
 }
+@keyframes float {
+  0%, 100% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-10px);
+  }
 }
+.loot-box {
+  transition: all 0.3s ease;
+  min-width: 100px;
+  height: 120px;
+  background: linear-gradient(145deg, #2d3748, #1a202c);
+  border-radius: 12px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  border: 2px solid #4a5568;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
 }
+.loot-box:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.2);
 }
+.loot-box.common {
+  border-color: #718096;
 }
+.loot-box.rare {
+  border-color: #4299e1;
+  box-shadow: 0 0 15px rgba(66, 153, 225, 0.5);
+}
+.loot-box.epic {
+  border-color: #9f7aea;
+  box-shadow: 0 0 20px rgba(159, 122, 234, 0.6);
+}
+.loot-box.legendary {
+  border-color: #f6ad55;
+  animation: pulse 2s infinite;
+  box-shadow: 0 0 25px rgba(246, 173, 85, 0.7);
+}
+.multiplier-chip {
+  min-width: 80px;
+  height: 50px;
+  background: linear-gradient(145deg, #2d3748, #1a202c);
+  border-radius: 25px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 2px solid #4a5568;
+  font-weight: bold;
+  transition: all 0.3s ease;
+}
+.multiplier-chip:hover {
+  transform: scale(1.05);
+}
+.multiplier-chip.active {
+  background: linear-gradient(145deg, #f6ad55, #f56565);
+  color: white;
+  border-color: #f6ad55;
+  box-shadow: 0 0 15px rgba(245, 101, 101, 0.5);
+}
+.spinning {
+  animation: spin 0.1s linear infinite;
+}
+@keyframes spin {
+  0% {
+    transform: translateX(0);
+  }
+  100% {
+    transform: translateX(-100%);
+  }
+}
+.winner-animation {
+  animation: float 2s ease-in-out infinite, pulse 1.5s ease-in-out infinite;
+}