|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Neon Casino Tournament</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap" rel="stylesheet"> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
<script> |
|
|
tailwind.config = { |
|
|
theme: { |
|
|
extend: { |
|
|
colors: { |
|
|
'dark-bg': '#0C0C0C', |
|
|
'neon-yellow': '#FFD700', |
|
|
'neon-orange': '#FFA500', |
|
|
'glass-bg': 'rgba(20, 20, 20, 0.65)', |
|
|
'card-bg': 'rgba(30, 30, 30, 0.7)' |
|
|
}, |
|
|
boxShadow: { |
|
|
'glow-yellow': '0 0 15px rgba(255, 215, 0, 0.7)', |
|
|
'glow-orange': '0 0 15px rgba(255, 165, 0, 0.7)', |
|
|
'inner-glow': 'inset 0 0 10px rgba(255, 215, 0, 0.5)' |
|
|
}, |
|
|
animation: { |
|
|
'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite', |
|
|
'glow': 'glow 1.5s ease-in-out infinite alternate' |
|
|
}, |
|
|
keyframes: { |
|
|
glow: { |
|
|
'from': { 'box-shadow': '0 0 5px rgba(255, 215, 0, 0.5)' }, |
|
|
'to': { 'box-shadow': '0 0 20px rgba(255, 215, 0, 0.8)' } |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
</script> |
|
|
<style> |
|
|
* { |
|
|
margin: 0; |
|
|
padding: 0; |
|
|
box-sizing: border-box; |
|
|
} |
|
|
|
|
|
body { |
|
|
font-family: 'Poppins', sans-serif; |
|
|
background-color: #0C0C0C; |
|
|
background-image: radial-gradient(circle at 20% 30%, rgba(255, 165, 0, 0.1) 0%, transparent 40%), |
|
|
radial-gradient(circle at 80% 70%, rgba(255, 215, 0, 0.1) 0%, transparent 40%); |
|
|
color: #fff; |
|
|
min-height: 100vh; |
|
|
overflow-x: hidden; |
|
|
} |
|
|
|
|
|
.glass-panel { |
|
|
background: rgba(20, 20, 20, 0.65); |
|
|
backdrop-filter: blur(12px); |
|
|
-webkit-backdrop-filter: blur(12px); |
|
|
border: 1px solid rgba(255, 215, 0, 0.2); |
|
|
border-radius: 24px; |
|
|
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5); |
|
|
} |
|
|
|
|
|
.glow-border { |
|
|
position: relative; |
|
|
} |
|
|
|
|
|
.glow-border::before { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
top: 0; |
|
|
left: 0; |
|
|
right: 0; |
|
|
bottom: 0; |
|
|
border-radius: 24px; |
|
|
border: 2px solid transparent; |
|
|
background: linear-gradient(45deg, #FFD700, #FFA500, #FFD700) border-box; |
|
|
-webkit-mask: |
|
|
linear-gradient(#fff 0 0) padding-box, |
|
|
linear-gradient(#fff 0 0); |
|
|
mask: |
|
|
linear-gradient(#fff 0 0) padding-box, |
|
|
linear-gradient(#fff 0 0); |
|
|
-webkit-mask-composite: destination-out; |
|
|
mask-composite: exclude; |
|
|
animation: glow 1.5s ease-in-out infinite alternate; |
|
|
} |
|
|
|
|
|
.neon-text { |
|
|
text-shadow: 0 0 10px rgba(255, 215, 0, 0.7), 0 0 20px rgba(255, 215, 0, 0.5); |
|
|
} |
|
|
|
|
|
.gradient-btn { |
|
|
background: linear-gradient(45deg, #FFA500, #FFD700); |
|
|
box-shadow: 0 0 15px rgba(255, 165, 0, 0.7); |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.gradient-btn:hover { |
|
|
transform: translateY(-2px); |
|
|
box-shadow: 0 0 25px rgba(255, 215, 0, 0.8); |
|
|
} |
|
|
|
|
|
.progress-track { |
|
|
height: 10px; |
|
|
border-radius: 5px; |
|
|
background: rgba(255, 255, 255, 0.1); |
|
|
} |
|
|
|
|
|
.progress-fill { |
|
|
height: 100%; |
|
|
border-radius: 5px; |
|
|
background: linear-gradient(90deg, #FFA500, #FFD700); |
|
|
box-shadow: 0 0 10px rgba(255, 215, 0, 0.5); |
|
|
} |
|
|
|
|
|
.carousel-item { |
|
|
flex: 0 0 auto; |
|
|
width: 300px; |
|
|
scroll-snap-align: start; |
|
|
transition: transform 0.3s ease; |
|
|
} |
|
|
|
|
|
.carousel-item:hover { |
|
|
transform: translateY(-10px); |
|
|
} |
|
|
|
|
|
.trophy-gold { |
|
|
background: linear-gradient(145deg, #FFD700, #FFA500); |
|
|
-webkit-background-clip: text; |
|
|
-webkit-text-fill-color: transparent; |
|
|
filter: drop-shadow(0 0 5px rgba(255, 215, 0, 0.7)); |
|
|
} |
|
|
|
|
|
.trophy-silver { |
|
|
background: linear-gradient(145deg, #C0C0C0, #808080); |
|
|
-webkit-background-clip: text; |
|
|
-webkit-text-fill-color: transparent; |
|
|
} |
|
|
|
|
|
.trophy-bronze { |
|
|
background: linear-gradient(145deg, #CD7F32, #8B4513); |
|
|
-webkit-background-clip: text; |
|
|
-webkit-text-fill-color: transparent; |
|
|
} |
|
|
|
|
|
.leaderboard-row { |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.leaderboard-row:hover { |
|
|
background: rgba(255, 215, 0, 0.1); |
|
|
transform: scale(1.02); |
|
|
} |
|
|
|
|
|
.modal-overlay { |
|
|
position: fixed; |
|
|
top: 0; |
|
|
left: 0; |
|
|
right: 0; |
|
|
bottom: 0; |
|
|
background: rgba(0, 0, 0, 0.8); |
|
|
backdrop-filter: blur(10px); |
|
|
display: flex; |
|
|
justify-content: center; |
|
|
align-items: center; |
|
|
z-index: 1000; |
|
|
} |
|
|
|
|
|
.modal-content { |
|
|
max-height: 90vh; |
|
|
overflow-y: auto; |
|
|
} |
|
|
|
|
|
.referral-badge { |
|
|
animation: pulse-slow 2s infinite; |
|
|
} |
|
|
|
|
|
.avatar-placeholder { |
|
|
background: linear-gradient(45deg, #FFA500, #FFD700); |
|
|
width: 50px; |
|
|
height: 50px; |
|
|
border-radius: 50%; |
|
|
display: flex; |
|
|
justify-content: center; |
|
|
align-items: center; |
|
|
font-weight: bold; |
|
|
color: #0C0C0C; |
|
|
} |
|
|
|
|
|
@media (max-width: 768px) { |
|
|
.stats-grid { |
|
|
grid-template-columns: repeat(2, 1fr); |
|
|
} |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
|
|
|
<div class="min-h-screen w-full max-w-7xl mx-auto px-4 py-8"> |
|
|
|
|
|
<header class="flex justify-between items-center py-4 mb-8"> |
|
|
<div class="flex items-center"> |
|
|
<div class="w-12 h-12 rounded-full bg-gradient-to-r from-neon-orange to-neon-yellow flex items-center justify-center mr-3"> |
|
|
<i class="fas fa-dice text-2xl text-dark-bg"></i> |
|
|
</div> |
|
|
<h1 class="text-3xl font-bold text-white">NEON<span class="text-neon-yellow">CASINO</span></h1> |
|
|
</div> |
|
|
<div class="flex items-center space-x-4"> |
|
|
<div class="relative"> |
|
|
<button class="bg-glass-bg text-white px-4 py-2 rounded-full flex items-center"> |
|
|
<i class="fas fa-coins text-neon-yellow mr-2"></i> |
|
|
<span>5,250</span> |
|
|
</button> |
|
|
<span class="absolute -top-2 -right-2 bg-neon-orange text-dark-bg text-xs font-bold rounded-full h-6 w-6 flex items-center justify-center">+25</span> |
|
|
</div> |
|
|
<button class="bg-glass-bg w-10 h-10 rounded-full flex items-center justify-center"> |
|
|
<i class="fas fa-bell text-neon-yellow"></i> |
|
|
</button> |
|
|
<button class="bg-glass-bg w-10 h-10 rounded-full flex items-center justify-center"> |
|
|
<img src="https://i.pravatar.cc/150?img=32" class="rounded-full w-8 h-8" alt="User"> |
|
|
</button> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
|
|
|
<section class="glass-panel glow-border mb-8 relative overflow-hidden"> |
|
|
<div class="absolute top-0 left-0 w-full h-full z-0 opacity-20" style="background: radial-gradient(circle at top right, rgba(255, 165, 0, 0.5) 0%, transparent 70%);"></div> |
|
|
<div class="relative z-10 p-6 md:p-8"> |
|
|
<div class="flex flex-col md:flex-row justify-between items-start md:items-center"> |
|
|
<div class="mb-6 md:mb-0"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<span class="px-3 py-1 bg-neon-orange text-dark-bg rounded-full text-sm font-bold mr-3">5SC ENTRY</span> |
|
|
<span class="px-3 py-1 bg-neon-yellow text-dark-bg rounded-full text-sm font-bold">100 PLAYERS</span> |
|
|
</div> |
|
|
<h2 class="text-3xl md:text-4xl font-bold text-white mb-2 neon-text">MEGA WEEKEND SLOTS BATTLE</h2> |
|
|
<p class="text-xl text-gray-300 mb-4">Compete for the grand prize and exclusive rewards!</p> |
|
|
<div class="flex items-center"> |
|
|
<i class="fas fa-trophy text-neon-yellow mr-2 text-xl"></i> |
|
|
<span class="text-2xl font-bold text-white">$5,000</span> |
|
|
<span class="mx-4 text-gray-400">|</span> |
|
|
<i class="fas fa-clock text-neon-orange mr-2 text-xl"></i> |
|
|
<span class="text-xl font-bold text-white" id="countdown">23:48:12</span> |
|
|
</div> |
|
|
</div> |
|
|
<button class="gradient-btn px-8 py-4 rounded-full text-dark-bg font-bold text-lg transform transition duration-300 hover:scale-105"> |
|
|
JOIN TOURNAMENT |
|
|
<i class="fas fa-arrow-right ml-2"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="mb-10"> |
|
|
<h3 class="text-2xl font-bold text-white mb-6 flex items-center"> |
|
|
<i class="fas fa-chart-line text-neon-yellow mr-3"></i> |
|
|
YOUR TOURNAMENT STATS |
|
|
</h3> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-5 stats-grid"> |
|
|
|
|
|
<div class="glass-panel p-6 relative"> |
|
|
<div class="absolute top-4 right-4 w-12 h-12 rounded-full bg-gradient-to-r from-neon-orange to-neon-yellow flex items-center justify-center"> |
|
|
<i class="fas fa-crown text-dark-bg"></i> |
|
|
</div> |
|
|
<h4 class="text-gray-400 mb-1">Current Rank</h4> |
|
|
<p class="text-3xl font-bold text-white mb-3">#27</p> |
|
|
<div class="flex items-center text-sm text-gray-400"> |
|
|
<i class="fas fa-arrow-up text-green-400 mr-1"></i> |
|
|
<span>Up 3 positions</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="glass-panel p-6 relative"> |
|
|
<div class="absolute top-4 right-4 w-12 h-12 rounded-full bg-gradient-to-r from-neon-orange to-neon-yellow flex items-center justify-center"> |
|
|
<i class="fas fa-bolt text-dark-bg"></i> |
|
|
</div> |
|
|
<h4 class="text-gray-400 mb-1">Points Earned</h4> |
|
|
<p class="text-3xl font-bold text-white mb-3">1,850</p> |
|
|
<div class="flex items-center text-sm text-gray-400"> |
|
|
<span>Next tier at 2,000 points</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="glass-panel p-6 relative"> |
|
|
<div class="absolute top-4 right-4 w-12 h-12 rounded-full bg-gradient-to-r from-neon-orange to-neon-yellow flex items-center justify-center"> |
|
|
<i class="fas fa-dice-d20 text-dark-bg"></i> |
|
|
</div> |
|
|
<h4 class="text-gray-400 mb-1">Games Played</h4> |
|
|
<p class="text-3xl font-bold text-white mb-3">42</p> |
|
|
<div class="flex items-center text-sm text-gray-400"> |
|
|
<i class="fas fa-check-circle text-green-400 mr-1"></i> |
|
|
<span>Qualified for rewards</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="glass-panel p-6 relative"> |
|
|
<div class="absolute top-4 right-4 w-12 h-12 rounded-full bg-gradient-to-r from-neon-orange to-neon-yellow flex items-center justify-center"> |
|
|
<i class="fas fa-coins text-dark-bg"></i> |
|
|
</div> |
|
|
<h4 class="text-gray-400 mb-1">Prizes Won</h4> |
|
|
<p class="text-3xl font-bold text-white mb-3">$120</p> |
|
|
<div class="progress-track w-full"> |
|
|
<div class="progress-fill w-3/4"></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="mb-10"> |
|
|
<div class="flex justify-between items-center mb-6"> |
|
|
<h3 class="text-2xl font-bold text-white flex items-center"> |
|
|
<i class="fas fa-trophy text-neon-yellow mr-3"></i> |
|
|
LEADERBOARD |
|
|
</h3> |
|
|
<div class="flex items-center"> |
|
|
<span class="text-gray-400 mr-3">Your position: #27</span> |
|
|
<button class="px-4 py-2 rounded-full bg-glass-bg text-white flex items-center"> |
|
|
<i class="fas fa-sync-alt mr-2"></i> Refresh |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="glass-panel overflow-x-auto"> |
|
|
<table class="w-full"> |
|
|
<thead> |
|
|
<tr class="border-b border-gray-700"> |
|
|
<th class="py-4 px-6 text-left text-gray-400 font-semibold">RANK</th> |
|
|
<th class="py-4 px-6 text-left text-gray-400 font-semibold">USERNAME</th> |
|
|
<th class="py-4 px-6 text-left text-gray-400 font-semibold">SCORE</th> |
|
|
<th class="py-4 px-6 text-left text-gray-400 font-semibold">PRIZE</th> |
|
|
</tr> |
|
|
</thead> |
|
|
<tbody> |
|
|
|
|
|
<tr class="leaderboard-row border-b border-gray-800 hover:border-neon-yellow"> |
|
|
<td class="py-4 px-6"> |
|
|
<div class="w-8 h-8 rounded-full bg-gradient-to-r from-yellow-300 to-yellow-500 flex items-center justify-center"> |
|
|
<span class="font-bold text-dark-bg">1</span> |
|
|
</div> |
|
|
</td> |
|
|
<td class="py-4 px-6"> |
|
|
<div class="flex items-center"> |
|
|
<div class="w-10 h-10 rounded-full overflow-hidden mr-3"> |
|
|
<img src="https://i.pravatar.cc/150?img=12" alt="Player"> |
|
|
</div> |
|
|
<div> |
|
|
<p class="font-bold">LuckyStar77</p> |
|
|
<p class="text-xs text-gray-400">VIP Platinum</p> |
|
|
</div> |
|
|
</div> |
|
|
</td> |
|
|
<td class="py-4 px-6 font-bold text-xl">9,850</td> |
|
|
<td class="py-4 px-6 font-bold text-neon-yellow">$1,500</td> |
|
|
</tr> |
|
|
|
|
|
|
|
|
<tr class="leaderboard-row border-b border-gray-800 hover:border-gray-500"> |
|
|
<td class="py-4 px-6"> |
|
|
<div class="w-8 h-8 rounded-full bg-gradient-to-r from-gray-300 to-gray-500 flex items-center justify-center"> |
|
|
<span class="font-bold text-dark-bg">2</span> |
|
|
</div> |
|
|
</td> |
|
|
<td class="py-4 px-6"> |
|
|
<div class="flex items-center"> |
|
|
<div class="w-10 h-10 rounded-full overflow-hidden mr-3"> |
|
|
<img src="https://i.pravatar.cc/150?img=23" alt="Player"> |
|
|
</div> |
|
|
<div> |
|
|
<p class="font-bold">JackpotKing</p> |
|
|
<p class="text-xs text-gray-400">VIP Gold</p> |
|
|
</div> |
|
|
</div> |
|
|
</td> |
|
|
<td class="py-4 px-6 font-bold text-xl">8,920</td> |
|
|
<td class="py-4 px-6 font-bold text-gray-300">$1,000</td> |
|
|
</tr> |
|
|
|
|
|
|
|
|
<tr class="leaderboard-row border-b border-gray-800 hover:border-amber-800"> |
|
|
<td class="py-4 px-6"> |
|
|
<div class="w-8 h-8 rounded-full bg-gradient-to-r from-amber-700 to-amber-900 flex items-center justify-center"> |
|
|
<span class="font-bold text-white">3</span> |
|
|
</div> |
|
|
</td> |
|
|
<td class="py-4 px-6"> |
|
|
<div class="flex items-center"> |
|
|
<div class="w-10 h-10 rounded-full overflow-hidden mr-3"> |
|
|
<img src="https://i.pravatar.cc/150?img=45" alt="Player"> |
|
|
</div> |
|
|
<div> |
|
|
<p class="font-bold">DiamondDice</p> |
|
|
<p class="text-xs text-gray-400">VIP Silver</p> |
|
|
</div> |
|
|
</div> |
|
|
</td> |
|
|
<td class="py-4 px-6 font-bold text-xl">7,640</td> |
|
|
<td class="py-4 px-6 font-bold text-amber-600">$750</td> |
|
|
</tr> |
|
|
|
|
|
|
|
|
<tr class="leaderboard-row border-b border-gray-800"> |
|
|
<td class="py-4 px-6">4</td> |
|
|
<td class="py-4 px-6">WildCardWilly</td> |
|
|
<td class="py-4 px-6">6,980</td> |
|
|
<td class="py-4 px-6">$500</td> |
|
|
</tr> |
|
|
<tr class="leaderboard-row border-b border-gray-800"> |
|
|
<td class="py-4 px-6">5</td> |
|
|
<td class="py-4 px-6">RouletteRider</td> |
|
|
<td class="py-4 px-6">6,420</td> |
|
|
<td class="py-4 px-6">$400</td> |
|
|
</tr> |
|
|
|
|
|
|
|
|
<tr class="leaderboard-row bg-gradient-to-r from-gray-900 to-dark-bg border-t-2 border-neon-yellow"> |
|
|
<td class="py-4 px-6 font-bold">27</td> |
|
|
<td class="py-4 px-6 font-bold flex items-center"> |
|
|
<div class="w-10 h-10 rounded-full overflow-hidden mr-3 border-2 border-neon-yellow"> |
|
|
<img src="https://i.pravatar.cc/150?img=32" alt="You"> |
|
|
</div> |
|
|
You (Player32) |
|
|
</td> |
|
|
<td class="py-4 px-6 font-bold text-neon-yellow">1,850</td> |
|
|
<td class="py-4 px-6 font-bold text-neon-yellow">$120</td> |
|
|
</tr> |
|
|
</tbody> |
|
|
</table> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="mb-10"> |
|
|
<div class="flex justify-between items-center mb-6"> |
|
|
<h3 class="text-2xl font-bold text-white flex items-center"> |
|
|
<i class="fas fa-fire text-neon-orange mr-3"></i> |
|
|
ACTIVE TOURNAMENTS |
|
|
</h3> |
|
|
<div class="flex space-x-2"> |
|
|
<button class="px-4 py-2 rounded-full bg-neon-yellow text-dark-bg font-bold">LIVE</button> |
|
|
<button class="px-4 py-2 rounded-full bg-glass-bg text-white">UPCOMING</button> |
|
|
<button class="px-4 py-2 rounded-full bg-glass-bg text-white">COMPLETED</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex space-x-6 overflow-x-auto pb-4 scrollbar-hide" style="scrollbar-width: none;"> |
|
|
|
|
|
<div class="carousel-item glass-panel min-w-[300px] p-6 cursor-pointer"> |
|
|
<div class="flex justify-between items-start mb-4"> |
|
|
<span class="px-3 py-1 bg-neon-orange text-white rounded-full text-sm font-bold">FREE</span> |
|
|
<span class="px-3 py-1 bg-red-500 text-white rounded-full text-sm font-bold flex items-center"> |
|
|
<span class="w-2 h-2 bg-white rounded-full mr-2 animate-pulse"></span> |
|
|
LIVE |
|
|
</span> |
|
|
</div> |
|
|
<h4 class="text-xl font-bold text-white mb-2">Slots Mania Rush</h4> |
|
|
<p class="text-gray-400 text-sm mb-4">Fast-paced slots competition</p> |
|
|
<div class="flex justify-between items-center mb-4"> |
|
|
<div> |
|
|
<p class="text-gray-400 text-sm">Prize Pool</p> |
|
|
<p class="text-xl font-bold text-neon-yellow">$1,200</p> |
|
|
</div> |
|
|
<div> |
|
|
<p class="text-gray-400 text-sm">Players</p> |
|
|
<p class="text-xl font-bold text-white">87/100</p> |
|
|
</div> |
|
|
</div> |
|
|
<button class="w-full gradient-btn py-3 rounded-full text-dark-bg font-bold mt-2"> |
|
|
JOIN NOW |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="carousel-item glass-panel min-w-[300px] p-6 cursor-pointer"> |
|
|
<div class="flex justify-between items-start mb-4"> |
|
|
<span class="px-3 py-1 bg-neon-yellow text-white rounded-full text-sm font-bold">50 SC</span> |
|
|
<span class="px-3 py-1 bg-orange-500 text-white rounded-full text-sm font-bold">STARTING SOON</span> |
|
|
</div> |
|
|
<h4 class="text-xl font-bold text-white mb-2">Blackjack Showdown</h4> |
|
|
<p class="text-gray-400 text-sm mb-4">Master the tables</p> |
|
|
<div class="flex justify-between items-center mb-4"> |
|
|
<div> |
|
|
<p class="text-gray-400 text-sm">Prize Pool</p> |
|
|
<p class="text-xl font-bold text-neon-yellow">$2,500</p> |
|
|
</div> |
|
|
<div> |
|
|
<p class="text-gray-400 text-sm">Starts In</p> |
|
|
<p class="text-xl font-bold text-white">12:34:22</p> |
|
|
</div> |
|
|
</div> |
|
|
<button class="w-full bg-glass-bg py-3 rounded-full text-white font-bold border border-neon-yellow mt-2"> |
|
|
NOTIFY ME |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="carousel-item glass-panel min-w-[300px] p-6 cursor-pointer"> |
|
|
<div class="flex justify-between items-start mb-4"> |
|
|
<span class="px-3 py-1 bg-yellow-500 text-white rounded-full text-sm font-bold">10 SC</span> |
|
|
<span class="px-3 py-1 bg-orange-500 text-white rounded-full text-sm font-bold">VIP</span> |
|
|
</div> |
|
|
<h4 class="text-xl font-bold text-white mb-2">High Roller Roulette</h4> |
|
|
<p class="text-gray-400 text-sm mb-4">For the elite players</p> |
|
|
<div class="flex justify-between items-center mb-4"> |
|
|
<div> |
|
|
<p class="text-gray-400 text-sm">Prize Pool</p> |
|
|
<p class="text-xl font-bold text-neon-yellow">$10,000</p> |
|
|
</div> |
|
|
<div> |
|
|
<p class="text-gray-400 text-sm">Entry</p> |
|
|
<p class="text-xl font-bold text-white">500 Coins</p> |
|
|
</div> |
|
|
</div> |
|
|
<button class="w-full bg-glass-bg py-3 rounded-full text-white font-bold border border-neon-yellow mt-2"> |
|
|
PRE-REGISTER |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="carousel-item glass-panel min-w-[300px] p-6 cursor-pointer"> |
|
|
<div class="flex justify-between items-start mb-4"> |
|
|
<span class="px-3 py-1 bg-yellow-500 text-white rounded-full text-sm font-bold">25 SC</span> |
|
|
<span class="px-3 py-1 bg-orange-500 text-white rounded-full text-sm font-bold">VIP</span> |
|
|
</div> |
|
|
<h4 class="text-xl font-bold text-white mb-2">Poker Night Fever</h4> |
|
|
<p class="text-gray-400 text-sm mb-4">Texas Hold'em tournament</p> |
|
|
<div class="flex justify-between items-center mb-4"> |
|
|
<div> |
|
|
<p class="text-gray-400 text-sm">Prize Pool</p> |
|
|
<p class="text-xl font-bold text-neon-yellow">$3,000</p> |
|
|
</div> |
|
|
<div> |
|
|
<p class="text-gray-400 text-sm">Starts In</p> |
|
|
<p class="text-xl font-bold text-white">06:45:18</p> |
|
|
</div> |
|
|
</div> |
|
|
<button class="w-full bg-glass-bg py-3 rounded-full text-white font-bold border border-neon-yellow mt-2"> |
|
|
PRE-REGISTER |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="carousel-item glass-panel min-w-[300px] p-6 cursor-pointer"> |
|
|
<div class="flex justify-between items-start mb-4"> |
|
|
<span class="px-3 py-1 bg-yellow-500 text-white rounded-full text-sm font-bold">100 SC</span> |
|
|
<span class="px-3 py-1 bg-red-500 text-white rounded-full text-sm font-bold flex items-center"> |
|
|
<span class="w-2 h-2 bg-white rounded-full mr-2 animate-pulse"></span> |
|
|
LIVE |
|
|
</span> |
|
|
</div> |
|
|
<h4 class="text-xl font-bold text-white mb-2">Baccarat Blitz</h4> |
|
|
<p class="text-gray-400 text-sm mb-4">High-stakes baccarat</p> |
|
|
<div class="flex justify-between items-center mb-4"> |
|
|
<div> |
|
|
<p class="text-gray-400 text-sm">Prize Pool</p> |
|
|
<p class="text-xl font-bold text-neon-yellow">$5,000</p> |
|
|
</div> |
|
|
<div> |
|
|
<p class="text-gray-400 text-sm">Players</p> |
|
|
<p class="text-xl font-bold text-white">32/50</p> |
|
|
</div> |
|
|
</div> |
|
|
<button class="w-full gradient-btn py-3 rounded-full text-dark-bg font-bold mt-2"> |
|
|
JOIN NOW |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="mb-10"> |
|
|
<h3 class="text-2xl font-bold text-white mb-6 flex items-center"> |
|
|
<i class="fas fa-medal text-neon-yellow mr-3"></i> |
|
|
HALL OF FAME |
|
|
</h3> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6"> |
|
|
|
|
|
<div class="p-6 flex flex-col items-center text-center"> |
|
|
<div class="mb-4"> |
|
|
<i class="fas fa-trophy text-5xl trophy-gold"></i> |
|
|
</div> |
|
|
<div class="w-20 h-20 rounded-full overflow-hidden border-4 border-neon-yellow mb-4"> |
|
|
<img src="https://i.pravatar.cc/150?img=8" alt="Winner"> |
|
|
</div> |
|
|
<h4 class="text-xl font-bold text-white mb-1">LuckyStar77</h4> |
|
|
<p class="text-gray-400 mb-2">Slot Master Tournament</p> |
|
|
<p class="text-2xl font-bold text-neon-yellow mb-4">$2,800</p> |
|
|
<p class="text-gray-400 text-sm">Dec 15, 2023</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="p-6 flex flex-col items-center text-center"> |
|
|
<div class="mb-4"> |
|
|
<i class="fas fa-trophy text-5xl trophy-silver"></i> |
|
|
</div> |
|
|
<div class="w-20 h-20 rounded-full overflow-hidden border-4 border-gray-400 mb-4"> |
|
|
<img src="https://i.pravatar.cc/150?img=19" alt="Winner"> |
|
|
</div> |
|
|
<h4 class="text-xl font-bold text-white mb-1">BlackjackPro</h4> |
|
|
<p class="text-gray-400 mb-2">Card Masters Championship</p> |
|
|
<p class="text-2xl font-bold text-gray-300 mb-4">$1,950</p> |
|
|
<p class="text-gray-400 text-sm">Nov 28, 2023</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="p-6 flex flex-col items-center text-center"> |
|
|
<div class="mb-4"> |
|
|
<i class="fas fa-trophy text-5xl trophy-bronze"></i> |
|
|
</div> |
|
|
<div class="w-20 h-20 rounded-full overflow-hidden border-4 border-amber-700 mb-4"> |
|
|
<img src="https://i.pravatar.cc/150?img=27" alt="Winner"> |
|
|
</div> |
|
|
<h4 class="text-xl font-bold text-white mb-1">RouletteRoyal</h4> |
|
|
<p class="text-gray-400 mb-2">Spin to Win Challenge</p> |
|
|
<p class="text-2xl font-bold text-amber-600 mb-4">$1,200</p> |
|
|
<p class="text-gray-400 text-sm">Nov 12, 2023</p> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="glass-panel p-8 mb-10 relative overflow-hidden"> |
|
|
<div class="absolute top-0 right-0 w-1/2 h-full opacity-20" style="background: radial-gradient(circle at center, rgba(255, 215, 0, 0.3) 0%, transparent 70%);"></div> |
|
|
<div class="relative z-10 flex flex-col md:flex-row justify-between items-center"> |
|
|
<div class="mb-6 md:mb-0 text-center md:text-left"> |
|
|
<h3 class="text-2xl font-bold text-white mb-2">Invite Friends & Earn Rewards</h3> |
|
|
<p class="text-gray-300 max-w-md">Get 100 coins for every friend who joins and plays their first tournament!</p> |
|
|
</div> |
|
|
<div class="flex flex-col items-center"> |
|
|
<div class="referral-badge bg-gradient-to-r from-neon-orange to-neon-yellow text-dark-bg font-bold px-6 py-3 rounded-full mb-3"> |
|
|
<i class="fas fa-gift mr-2"></i> You've invited 3 / 5 friends |
|
|
</div> |
|
|
<button id="inviteBtn" class="gradient-btn px-8 py-3 rounded-full text-dark-bg font-bold flex items-center"> |
|
|
<i class="fas fa-user-plus mr-2"></i> INVITE FRIENDS NOW |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
</div> |
|
|
|
|
|
|
|
|
<footer class="py-8 text-center text-gray-500 text-sm"> |
|
|
<p>© 2023 NeonCasino. All rights reserved. Gambling can be addictive. Please play responsibly.</p> |
|
|
<p class="mt-2">Minimum age 18+. Terms and conditions apply.</p> |
|
|
</footer> |
|
|
|
|
|
|
|
|
<div id="inviteModal" class="modal-overlay hidden"> |
|
|
<div class="glass-panel p-8 max-w-md w-full relative"> |
|
|
<button id="closeModal" class="absolute top-4 right-4 text-gray-400 hover:text-white"> |
|
|
<i class="fas fa-times text-2xl"></i> |
|
|
</button> |
|
|
|
|
|
<div class="text-center mb-6"> |
|
|
<div class="w-16 h-16 rounded-full bg-gradient-to-r from-neon-orange to-neon-yellow flex items-center justify-center mx-auto mb-4"> |
|
|
<i class="fas fa-gift text-2xl text-dark-bg"></i> |
|
|
</div> |
|
|
<h3 class="text-2xl font-bold text-white mb-2">Invite Friends & Earn</h3> |
|
|
<p class="text-gray-300">Share your referral link and earn 100 coins per friend!</p> |
|
|
</div> |
|
|
|
|
|
<div class="mb-6"> |
|
|
<label class="block text-gray-400 mb-2">Your Referral Link</label> |
|
|
<div class="flex"> |
|
|
<input type="text" value="https://neoncasino.com/ref/player32" class="flex-grow bg-glass-bg border border-gray-700 rounded-l-lg py-3 px-4 text-white focus:outline-none focus:border-neon-yellow" readonly> |
|
|
<button class="gradient-btn px-4 rounded-r-lg font-bold"> |
|
|
<i class="fas fa-copy"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mb-6"> |
|
|
<label class="block text-gray-400 mb-3">Share via</label> |
|
|
<div class="flex justify-center space-x-4"> |
|
|
<button class="w-12 h-12 rounded-full bg-blue-600 flex items-center justify-center"> |
|
|
<i class="fab fa-facebook-f text-white"></i> |
|
|
</button> |
|
|
<button class="w-12 h-12 rounded-full bg-green-500 flex items-center justify-center"> |
|
|
<i class="fab fa-whatsapp text-white"></i> |
|
|
</button> |
|
|
<button class="w-12 h-12 rounded-full bg-red-500 flex items-center justify-center"> |
|
|
<i class="fas fa-envelope text-white"></i> |
|
|
</button> |
|
|
<button class="w-12 h-12 rounded-full bg-purple-600 flex items-center justify-center"> |
|
|
<i class="fab fa-discord text-white"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="glass-panel p-4 rounded-lg"> |
|
|
<h4 class="font-bold text-neon-yellow mb-2">Your Referral Progress</h4> |
|
|
<div class="flex items-center mb-2"> |
|
|
<div class="flex-grow h-3 bg-gray-800 rounded-full"> |
|
|
<div class="h-3 bg-gradient-to-r from-neon-orange to-neon-yellow rounded-full" style="width: 60%"></div> |
|
|
</div> |
|
|
<span class="ml-3 font-bold">3/5</span> |
|
|
</div> |
|
|
<p class="text-sm text-gray-400">Invite 2 more friends to unlock a 500 coin bonus!</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
|
|
|
function updateCountdown() { |
|
|
const now = new Date(); |
|
|
const tomorrow = new Date(now); |
|
|
tomorrow.setDate(tomorrow.getDate() + 1); |
|
|
tomorrow.setHours(0, 0, 0, 0); |
|
|
|
|
|
const diff = tomorrow - now; |
|
|
|
|
|
const hours = Math.floor(diff / (1000 * 60 * 60)); |
|
|
const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60)); |
|
|
const seconds = Math.floor((diff % (1000 * 60)) / 1000); |
|
|
|
|
|
document.getElementById('countdown').textContent = |
|
|
`${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`; |
|
|
} |
|
|
|
|
|
setInterval(updateCountdown, 1000); |
|
|
updateCountdown(); |
|
|
|
|
|
|
|
|
const inviteBtn = document.getElementById('inviteBtn'); |
|
|
const inviteModal = document.getElementById('inviteModal'); |
|
|
const closeModal = document.getElementById('closeModal'); |
|
|
|
|
|
inviteBtn.addEventListener('click', () => { |
|
|
inviteModal.classList.remove('hidden'); |
|
|
}); |
|
|
|
|
|
closeModal.addEventListener('click', () => { |
|
|
inviteModal.classList.add('hidden'); |
|
|
}); |
|
|
|
|
|
|
|
|
window.addEventListener('click', (event) => { |
|
|
if (event.target === inviteModal) { |
|
|
inviteModal.classList.add('hidden'); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
const observerOptions = { |
|
|
root: null, |
|
|
rootMargin: '0px', |
|
|
threshold: 0.1 |
|
|
}; |
|
|
|
|
|
const observer = new IntersectionObserver((entries) => { |
|
|
entries.forEach(entry => { |
|
|
if (entry.isIntersecting) { |
|
|
entry.target.style.opacity = 1; |
|
|
entry.target.style.transform = 'translateY(0)'; |
|
|
} |
|
|
}); |
|
|
}, observerOptions); |
|
|
|
|
|
document.querySelectorAll('.glass-panel').forEach(panel => { |
|
|
panel.style.opacity = 0; |
|
|
panel.style.transform = 'translateY(20px)'; |
|
|
panel.style.transition = 'opacity 0.5s ease, transform 0.5s ease'; |
|
|
observer.observe(panel); |
|
|
}); |
|
|
</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=ProjectGenesis/tournament-ui-redesign" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
