|
|
<!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> |
