| <!DOCTYPE html> |
| <html lang="ru"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Casino Payouts - 3D Phone Interface</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script> |
| <style> |
| @keyframes float { |
| 0%, 100% { transform: translateY(0) rotate(0deg); } |
| 50% { transform: translateY(-10px) rotate(5deg); } |
| } |
| .phone-3d { |
| transform-style: preserve-3d; |
| perspective: 1000px; |
| transform: rotateY(-15deg) rotateX(10deg); |
| box-shadow: 20px 30px 50px rgba(0, 0, 0, 0.3); |
| } |
| .phone-screen { |
| background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%); |
| box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.5); |
| transform: translateZ(10px); |
| } |
| .phone-side { |
| position: absolute; |
| background: #020617; |
| transform: translateZ(-5px); |
| } |
| .card-gradient { |
| background: linear-gradient(135deg, #3b82f6 0%, #6366f1 50%, #8b5cf6 100%); |
| } |
| .transaction-item { |
| background: rgba(255, 255, 255, 0.05); |
| backdrop-filter: blur(10px); |
| } |
| .glare { |
| position: absolute; |
| top: 0; |
| left: 0; |
| width: 100%; |
| height: 100%; |
| background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 60%); |
| pointer-events: none; |
| } |
| .chip { |
| background: linear-gradient(135deg, #f59e0b 0%, #fcd34d 100%); |
| } |
| .animate-float { |
| animation: float 4s ease-in-out infinite; |
| } |
| .casino-logo { |
| background: linear-gradient(135deg, #ef4444 0%, #f97316 100%); |
| } |
| </style> |
| </head> |
| <body class="bg-gray-950 text-white overflow-x-hidden"> |
| <div class="min-h-screen flex items-center justify-center p-4"> |
| |
| <div class="relative w-80 h-[580px] phone-3d animate-float"> |
| |
| <div class="absolute inset-0 rounded-[40px] overflow-hidden phone-screen flex flex-col p-6"> |
| |
| <div class="glare"></div> |
| |
| |
| <div class="flex justify-between items-center mb-6 z-10"> |
| <span class="text-sm font-medium" id="current-time">14:25</span> |
| <div class="flex items-center space-x-2"> |
| <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"> |
| <path fill-rule="evenodd" d="M17.778 8.222c-4.296-4.296-11.26-4.296-15.556 0A1 1 0 01.808 6.808c5.076-5.077 13.308-5.077 18.384 0a1 1 0 01-1.414 1.414zM14.95 11.05a7 7 0 00-9.9 0 1 1 0 01-1.414-1.414 9 9 0 0112.728 0 1 1 0 01-1.414 1.414zM12.12 13.88a3 3 0 00-4.242 0 1 1 0 01-1.415-1.415 5 5 0 017.072 0 1 1 0 01-1.415 1.415z" clip-rule="evenodd"></path> |
| </svg> |
| <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"> |
| <path d="M2 11a1 1 0 011-1h2a1 1 0 011 1v5a1 1 0 01-1 1H3a1 1 0 01-1-1v-5zM8 7a1 1 0 011-1h2a1 1 0 011 1v9a1 1 0 01-1 1H9a1 1 0 01-1-1V7zM14 4a1 1 0 011-1h2a1 1 0 011 1v12a1 1 0 01-1 1h-2a1 1 0 01-1-1V4z"></path> |
| </svg> |
| <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"> |
| <path fill-rule="evenodd" d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z" clip-rule="evenodd"></path> |
| </svg> |
| </div> |
| </div> |
| |
| |
| <div class="card-gradient rounded-2xl p-5 mb-6 relative overflow-hidden z-10"> |
| <div class="absolute top-0 right-0 w-24 h-24 bg-white/10 rounded-bl-full"></div> |
| <div class="flex justify-between items-start mb-8"> |
| <div> |
| <p class="text-xs text-white/70 mb-1">Баланс</p> |
| <h3 class="text-2xl font-bold text-white" id="balance">$1,240.00</h3> |
| </div> |
| <div class="chip w-10 h-7 rounded-md flex items-center justify-center"> |
| <svg class="w-6 h-6 text-yellow-800" fill="currentColor" viewBox="0 0 24 24"> |
| <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm4.59-12.42L10 14.17l-2.59-2.58L6 13l4 4 8-8z"/> |
| </svg> |
| </div> |
| </div> |
| <div class="flex justify-between items-center"> |
| <div> |
| <p class="text-xs text-white/70 mb-1">Номер карты</p> |
| <p class="text-sm font-medium text-white">•••• •••• •••• 4242</p> |
| </div> |
| <div class="text-right"> |
| <p class="text-xs text-white/70 mb-1">Срок действия</p> |
| <p class="text-sm font-medium text-white">12/25</p> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="flex-1 overflow-hidden z-10"> |
| <h4 class="text-sm font-medium mb-3">Последние выплаты</h4> |
| |
| <div class="space-y-3" id="transactions-container"> |
| |
| </div> |
| </div> |
| |
| |
| <div class="flex justify-around items-center pt-3 border-t border-gray-800/50 mt-auto z-10"> |
| <button class="p-2 rounded-full"> |
| <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"> |
| <path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z"></path> |
| </svg> |
| </button> |
| <button class="p-2 rounded-full"> |
| <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"> |
| <path d="M4 4a2 2 0 00-2 2v1h16V6a2 2 0 00-2-2H4z"></path> |
| <path fill-rule="evenodd" d="M18 9H2v5a2 2 0 002 2h12a2 2 0 002-2V9zM4 13a1 1 0 011-1h1a1 1 0 110 2H5a1 1 0 01-1-1zm5-1a1 1 0 100 2h1a1 1 0 100-2H9z" clip-rule="evenodd"></path> |
| </svg> |
| </button> |
| <button class="p-2 rounded-full bg-blue-500 text-white"> |
| <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"> |
| <path fill-rule="evenodd" d="M10 2a4 4 0 00-4 4v1H5a1 1 0 00-.994.89l-1 9A1 1 0 004 18h12a1 1 0 00.994-1.11l-1-9A1 1 0 0015 7h-1V6a4 4 0 00-4-4zm2 5V6a2 2 0 10-4 0v1h4zm-6 3a1 1 0 112 0 1 1 0 01-2 0zm7-1a1 1 0 100 2 1 1 0 000-2z" clip-rule="evenodd"></path> |
| </svg> |
| </button> |
| <button class="p-2 rounded-full"> |
| <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"> |
| <path fill-rule="evenodd" d="M11.49 3.17c-.38-1.56-2.6-1.56-2.98 0a1.532 1.532 0 01-2.286.948c-1.372-.836-2.942.734-2.106 2.106.54.886.061 2.042-.947 2.287-1.561.379-1.561 2.6 0 2.978a1.532 1.532 0 01.947 2.287c-.836 1.372.734 2.942 2.106 2.106a1.532 1.532 0 012.287.947c.379 1.561 2.6 1.561 2.978 0a1.533 1.533 0 012.287-.947c1.372.836 2.942-.734 2.106-2.106a1.533 1.533 0 01.947-2.287c1.561-.379 1.561-2.6 0-2.978a1.532 1.532 0 01-.947-2.287c.836-1.372-.734-2.942-2.106-2.106a1.532 1.532 0 01-2.287-.947zM10 13a3 3 0 100-6 3 3 0 000 6z" clip-rule="evenodd"></path> |
| </svg> |
| </button> |
| </div> |
| </div> |
| |
| |
| <div class="phone-side absolute top-0 left-0 w-2 h-full rounded-l-[30px]"></div> |
| <div class="phone-side absolute top-0 right-0 w-2 h-full rounded-r-[30px]"></div> |
| <div class="phone-side absolute bottom-0 left-0 w-full h-2 rounded-b-[30px]"></div> |
| </div> |
| </div> |
|
|
| <script> |
| |
| const CASINO_NAMES = [ |
| "Lucky Spin Casino", |
| "Golden Jackpot", |
| "Royal Flush Club", |
| "Diamond VIP", |
| "High Rollers" |
| ]; |
| |
| const GAME_NAMES = [ |
| "Book of Ra", |
| "Mega Fortune", |
| "Starburst", |
| "Gonzo's Quest", |
| "Dead or Alive" |
| ]; |
| |
| |
| let balance = { val: 1240.00 }; |
| let transactions = []; |
| |
| |
| function updateTime() { |
| const now = new Date(); |
| const hours = now.getHours().toString().padStart(2, '0'); |
| const minutes = now.getMinutes().toString().padStart(2, '0'); |
| document.getElementById('current-time').textContent = `${hours}:${minutes}`; |
| } |
| |
| setInterval(updateTime, 60000); |
| updateTime(); |
| |
| |
| function generateRandomAmount() { |
| const baseAmount = Math.random() * 1000; |
| const roundedAmount = Math.floor(baseAmount / 10) * 10 + 5; |
| return Math.max(50, roundedAmount); |
| } |
| |
| |
| function addTransaction() { |
| const isBigWin = Math.random() > 0.85; |
| const casinoName = isBigWin ? "JACKPOT! " + CASINO_NAMES[Math.floor(Math.random() * CASINO_NAMES.length)] : |
| CASINO_NAMES[Math.floor(Math.random() * CASINO_NAMES.length)]; |
| |
| const gameName = GAME_NAMES[Math.floor(Math.random() * GAME_NAMES.length)]; |
| const amount = isBigWin ? generateRandomAmount() * 3 : generateRandomAmount(); |
| const minutesAgo = Math.floor(Math.random() * 15) + 1; |
| |
| const transaction = { |
| id: Date.now(), |
| casino: casinoName, |
| game: gameName, |
| amount: amount, |
| time: `${minutesAgo} min ago` |
| }; |
| |
| |
| transactions.unshift(transaction); |
| |
| |
| if (transactions.length > 5) { |
| transactions.pop(); |
| } |
| |
| |
| balance.val += amount; |
| document.getElementById("balance").textContent = `$${balance.val.toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ",")}`; |
| |
| |
| renderTransactions(); |
| |
| |
| const newTransaction = document.getElementById(`transaction-${transaction.id}`); |
| gsap.from(newTransaction, { |
| opacity: 0, |
| y: 20, |
| duration: 0.5, |
| ease: "power2.out" |
| }); |
| } |
| |
| |
| function renderTransactions() { |
| const container = document.getElementById('transactions-container'); |
| container.innerHTML = ''; |
| |
| transactions.forEach(t => { |
| const transactionEl = document.createElement('div'); |
| transactionEl.id = `transaction-${t.id}`; |
| transactionEl.className = 'transaction-item rounded-xl p-3 flex items-center'; |
| |
| const isJackpot = t.casino.includes("JACKPOT!"); |
| |
| transactionEl.innerHTML = ` |
| <div class="w-8 h-8 rounded-full ${isJackpot ? 'casino-logo' : 'bg-green-500/20'} flex items-center justify-center mr-3"> |
| <svg class="w-4 h-4 ${isJackpot ? 'text-white' : 'text-green-400'}" fill="currentColor" viewBox="0 0 20 20"> |
| <path fill-rule="evenodd" d="M4 4a2 2 0 00-2 2v4a2 2 0 002 2V6h10a2 2 0 00-2-2H4zm2 6a2 2 0 012-2h8a2 2 0 012 2v4a2 2 0 01-2 2H8a2 2 0 01-2-2v-4zm6 4a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd"></path> |
| </svg> |
| </div> |
| <div class="flex-1"> |
| <p class="text-sm font-medium">${t.casino}</p> |
| <p class="text-xs text-gray-400">${t.game} • ${t.time}</p> |
| </div> |
| <p class="text-sm font-medium ${isJackpot ? 'text-yellow-400' : 'text-green-400'}">+$${t.amount.toFixed(2)}</p> |
| `; |
| |
| container.appendChild(transactionEl); |
| }); |
| } |
| |
| |
| function initTransactions() { |
| for (let i = 0; i < 3; i++) { |
| setTimeout(addTransaction, i * 1000); |
| } |
| } |
| |
| |
| function startTransactionCycle() { |
| addTransaction(); |
| setInterval(addTransaction, 15000); |
| } |
| |
| |
| const phone = document.querySelector('.phone-3d'); |
| document.addEventListener('mousemove', (e) => { |
| const x = e.clientX / window.innerWidth; |
| const y = e.clientY / window.innerHeight; |
| |
| gsap.to(phone, { |
| rotationY: -15 + (x * 10), |
| rotationX: 10 - (y * 10), |
| duration: 1, |
| ease: "power2.out" |
| }); |
| }); |
| |
| |
| document.addEventListener('DOMContentLoaded', () => { |
| initTransactions(); |
| setTimeout(startTransactionCycle, 5000); |
| |
| |
| gsap.to(balance, { |
| val: 2000.00, |
| duration: 30, |
| ease: "power2.out", |
| onUpdate: () => { |
| document.getElementById("balance").textContent = `$${balance.val.toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ",")}`; |
| } |
| }); |
| }); |
| </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=timoon811/phase4" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
