Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Fruit Spin - Fun Gambling Game</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| @keyframes spin { | |
| 0% { transform: translateY(0); } | |
| 100% { transform: translateY(-100%); } | |
| } | |
| .slot-wheel { | |
| height: 100px; | |
| overflow: hidden; | |
| position: relative; | |
| } | |
| .slot-items { | |
| position: absolute; | |
| width: 100%; | |
| transition: transform 3s cubic-bezier(0.17, 0.85, 0.45, 1); | |
| } | |
| .slot-item { | |
| height: 100px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 3rem; | |
| } | |
| .win-animation { | |
| animation: pulse 0.5s infinite alternate; | |
| } | |
| @keyframes pulse { | |
| from { box-shadow: 0 0 5px rgba(255, 255, 255, 0.5); } | |
| to { box-shadow: 0 0 30px rgba(255, 215, 0, 0.8); } | |
| } | |
| .coin { | |
| transition: all 0.3s ease; | |
| } | |
| .coin:hover { | |
| transform: scale(1.1); | |
| } | |
| .coin:active { | |
| transform: scale(0.9); | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gradient-to-b from-blue-900 to-purple-900 min-h-screen text-white"> | |
| <div class="container mx-auto px-4 py-8"> | |
| <header class="text-center mb-8"> | |
| <h1 class="text-4xl md:text-6xl font-bold mb-2 bg-clip-text text-transparent bg-gradient-to-r from-yellow-400 to-red-500"> | |
| 🍒 Fruit Spin | |
| </h1> | |
| <p class="text-lg text-gray-300">A fun gambling game with no real money involved</p> | |
| </header> | |
| <div class="max-w-3xl mx-auto bg-gray-800 bg-opacity-50 rounded-xl shadow-2xl overflow-hidden backdrop-blur-sm"> | |
| <div class="p-6"> | |
| <!-- Balance Display --> | |
| <div class="flex justify-between items-center mb-8 p-4 bg-gray-900 rounded-lg"> | |
| <div> | |
| <h2 class="text-xl font-semibold">Your Balance</h2> | |
| <p class="text-3xl font-bold text-yellow-400" id="balance">200000</p> | |
| </div> | |
| <div class="flex space-x-2"> | |
| <button id="reset-btn" class="px-4 py-2 bg-red-600 hover:bg-red-700 rounded-lg font-medium transition"> | |
| <i class="fas fa-sync-alt mr-2"></i>Reset | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Bet Controls --> | |
| <div class="mb-8 p-4 bg-gray-900 rounded-lg"> | |
| <h2 class="text-xl font-semibold mb-4">Place Your Bet</h2> | |
| <div class="flex flex-wrap items-center justify-between"> | |
| <div class="flex space-x-2 mb-4 md:mb-0"> | |
| <button class="coin px-4 py-2 bg-blue-600 hover:bg-blue-700 rounded-lg font-medium transition" data-bet="10"> | |
| <i class="fas fa-coins mr-2"></i>10 | |
| </button> | |
| <button class="coin px-4 py-2 bg-blue-600 hover:bg-blue-700 rounded-lg font-medium transition" data-bet="50"> | |
| <i class="fas fa-coins mr-2"></i>50 | |
| </button> | |
| <button class="coin px-4 py-2 bg-blue-600 hover:bg-blue-700 rounded-lg font-medium transition" data-bet="100"> | |
| <i class="fas fa-coins mr-2"></i>100 | |
| </button> | |
| </div> | |
| <div class="flex items-center"> | |
| <span class="mr-2">Bet Amount:</span> | |
| <input type="number" id="bet-amount" value="10" min="10" max="1000000" class="w-24 px-3 py-2 bg-gray-800 rounded-lg text-white border border-gray-700"> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Slot Machine --> | |
| <div class="mb-8"> | |
| <div class="flex justify-center space-x-2 md:space-x-4 mb-6"> | |
| <div class="slot-wheel w-24 md:w-32 bg-gray-900 rounded-lg overflow-hidden border-2 border-yellow-500" id="wheel1"> | |
| <div class="slot-items" id="items1"></div> | |
| </div> | |
| <div class="slot-wheel w-24 md:w-32 bg-gray-900 rounded-lg overflow-hidden border-2 border-yellow-500" id="wheel2"> | |
| <div class="slot-items" id="items2"></div> | |
| </div> | |
| <div class="slot-wheel w-24 md:w-32 bg-gray-900 rounded-lg overflow-hidden border-2 border-yellow-500" id="wheel3"> | |
| <div class="slot-items" id="items3"></div> | |
| </div> | |
| </div> | |
| <div class="text-center"> | |
| <button id="spin-btn" class="px-8 py-4 bg-gradient-to-r from-green-500 to-emerald-600 hover:from-green-600 hover:to-emerald-700 rounded-full text-xl font-bold uppercase tracking-wider shadow-lg transition transform hover:scale-105"> | |
| <i class="fas fa-play mr-2"></i> Spin | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Results --> | |
| <div id="result" class="hidden p-4 bg-gray-900 rounded-lg mb-4 text-center"> | |
| <h2 class="text-2xl font-bold mb-2" id="result-text"></h2> | |
| <p class="text-xl" id="win-amount"></p> | |
| </div> | |
| <!-- Game Info --> | |
| <div class="bg-gray-900 bg-opacity-70 rounded-lg p-4"> | |
| <h2 class="text-xl font-semibold mb-2">How to Play</h2> | |
| <ul class="list-disc pl-5 space-y-1 text-gray-300"> | |
| <li>Set your bet amount using the buttons or input field</li> | |
| <li>Click SPIN to start the game</li> | |
| <li>Match 3 symbols to win!</li> | |
| <li>🍒🍒🍒 = 5x | 🍊🍊 = 10x | 🍋🍋 = 15x | 🍉🍉 = 20x | 7️⃣7️⃣7️⃣ = 50x</li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| <footer class="text-center mt-8 text-gray-400 text-sm"> | |
| <p>This is a fake gambling game for entertainment purposes only. No real money is used or won.</p> | |
| </footer> | |
| </div> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // Game variables | |
| let balance = 200000; | |
| let currentBet = 10; | |
| let isSpinning = false; | |
| // Fruit symbols | |
| const symbols = ['🍒', '🍊', '🍋', '🍉', '7️⃣']; | |
| const payouts = { | |
| '🍒🍒🍒': 5, | |
| '🍊🍊🍊': 10, | |
| '🍋🍋🍋': 15, | |
| '🍉🍉🍉': 20, | |
| '7️⃣7️⃣7️⃣': 50 | |
| }; | |
| // DOM elements | |
| const balanceEl = document.getElementById('balance'); | |
| const betAmountInput = document.getElementById('bet-amount'); | |
| const spinBtn = document.getElementById('spin-btn'); | |
| const resetBtn = document.getElementById('reset-btn'); | |
| const resultEl = document.getElementById('result'); | |
| const resultTextEl = document.getElementById('result-text'); | |
| const winAmountEl = document.getElementById('win-amount'); | |
| const wheels = [ | |
| document.getElementById('wheel1'), | |
| document.getElementById('wheel2'), | |
| document.getElementById('wheel3') | |
| ]; | |
| const itemsContainers = [ | |
| document.getElementById('items1'), | |
| document.getElementById('items2'), | |
| document.getElementById('items3') | |
| ]; | |
| // Initialize slot items | |
| function initSlots() { | |
| itemsContainers.forEach(container => { | |
| container.innerHTML = ''; | |
| // Add extra items for smooth spinning | |
| for (let i = 0; i < 20; i++) { | |
| const randomSymbol = symbols[Math.floor(Math.random() * symbols.length)]; | |
| const item = document.createElement('div'); | |
| item.className = 'slot-item'; | |
| item.textContent = randomSymbol; | |
| container.appendChild(item); | |
| } | |
| }); | |
| } | |
| // Update balance display | |
| function updateBalance() { | |
| balanceEl.textContent = balance; | |
| } | |
| // Handle bet buttons | |
| document.querySelectorAll('.coin').forEach(button => { | |
| button.addEventListener('click', function() { | |
| currentBet = parseInt(this.dataset.bet); | |
| betAmountInput.value = currentBet; | |
| }); | |
| }); | |
| // Handle bet amount input | |
| betAmountInput.addEventListener('change', function() { | |
| currentBet = parseInt(this.value); | |
| if (currentBet < 10) currentBet = 10; | |
| if (currentBet > 10000) currentBet = 10000; | |
| if (currentBet > balance) currentBet = balance; | |
| this.value = currentBet; | |
| }); | |
| // Spin the wheels | |
| function spin() { | |
| if (isSpinning || currentBet > balance || currentBet < 10 || currentBet > 1000000) return; | |
| isSpinning = true; | |
| balance -= currentBet; | |
| updateBalance(); | |
| resultEl.classList.add('hidden'); | |
| // Reset wheels to top position | |
| itemsContainers.forEach(container => { | |
| container.style.transform = 'translateY(0)'; | |
| }); | |
| // Generate random positions for each wheel | |
| const spins = [ | |
| Math.floor(Math.random() * symbols.length), | |
| Math.floor(Math.random() * symbols.length), | |
| Math.floor(Math.random() * symbols.length) | |
| ]; | |
| // 10% chance for a winning combination (for demo purposes) | |
| if (Math.random() < 0.3) { | |
| const winningSymbol = symbols[Math.floor(Math.random() * symbols.length)]; | |
| spins[0] = symbols.indexOf(winningSymbol); | |
| spins[1] = symbols.indexOf(winningSymbol); | |
| spins[2] = symbols.indexOf(winningSymbol); | |
| } | |
| // Calculate final positions | |
| const positions = spins.map(spin => { | |
| return -((spin + 1) * 100 + Math.floor(Math.random() * 10) * 100); | |
| }); | |
| // Animate wheels | |
| itemsContainers.forEach((container, index) => { | |
| setTimeout(() => { | |
| container.style.transform = `translateY(${positions[index]}px)`; | |
| }, 100 * index); | |
| }); | |
| // Check result after animation | |
| setTimeout(() => { | |
| checkResult(spins); | |
| isSpinning = false; | |
| }, 3500); | |
| } | |
| // Check the spin result | |
| function checkResult(spins) { | |
| const result = [ | |
| symbols[spins[0]], | |
| symbols[spins[1]], | |
| symbols[spins[2]] | |
| ].join(''); | |
| resultEl.classList.remove('hidden'); | |
| if (payouts[result]) { | |
| const winAmount = currentBet * payouts[result]; | |
| balance += winAmount; | |
| updateBalance(); | |
| resultTextEl.textContent = 'YOU WIN!'; | |
| resultTextEl.className = 'text-2xl font-bold mb-2 text-green-400'; | |
| winAmountEl.textContent = `+${winAmount} coins!`; | |
| winAmountEl.className = 'text-xl text-yellow-400'; | |
| // Add win animation to wheels | |
| wheels.forEach(wheel => { | |
| wheel.classList.add('win-animation'); | |
| setTimeout(() => { | |
| wheel.classList.remove('win-animation'); | |
| }, 2000); | |
| }); | |
| } else { | |
| resultTextEl.textContent = 'TRY AGAIN!'; | |
| resultTextEl.className = 'text-2xl font-bold mb-2 text-red-400'; | |
| winAmountEl.textContent = `Better luck next time!`; | |
| winAmountEl.className = 'text-xl text-gray-300'; | |
| } | |
| } | |
| // Reset game | |
| function resetGame() { | |
| balance = 200000; | |
| currentBet = 10; | |
| betAmountInput.value = currentBet; | |
| updateBalance(); | |
| resultEl.classList.add('hidden'); | |
| initSlots(); | |
| } | |
| // Event listeners | |
| spinBtn.addEventListener('click', spin); | |
| resetBtn.addEventListener('click', resetGame); | |
| // Initialize game | |
| initSlots(); | |
| updateBalance(); | |
| // Keyboard support | |
| document.addEventListener('keydown', function(e) { | |
| if (e.code === 'Space' && !isSpinning) { | |
| e.preventDefault(); | |
| spin(); | |
| } | |
| }); | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=1developerintheworld/gamling" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |