Hugging Face's logo

Spaces:
ProjectGenesis
/
new-ui-1
Running

App Files Community
new-ui-1 / index.html
ProjectGenesis's picture
ProjectGenesis
Replace the "Exclusive Giveaways" panel with a "Your Nioplay Perks" panel with corresponding elements like Rakeback %, VIP Support, 24hr Redeems, etc. With Icons indicating each element.
2d57ed2 verified
raw
history blame contribute delete
74.2 kB
 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Nioplay Casino Lobby</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">
<script>
tailwind.config = {
theme: {
extend: {
colors: {
'niogold': '#D4AF37',
'niopurple': '#000000',
'nioblack': '#0F0F0F',
'nioglass': 'rgba(30, 30, 30, 0.75)'
},
boxShadow: {
'glass': '0 4px 20px rgba(0, 0, 0, 0.7), 0 0 15px rgba(212, 175, 55, 0.4)',
'glow': '0 0 15px rgba(212, 175, 55, 0.7)',
'button': '0 0 10px rgba(212, 175, 55, 0.7)'
}
}
}
}
</script>
<style type="text/css">
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap');
body {
font-family: 'Montserrat', sans-serif;
background: #000000;
color: white;
overflow-x: hidden;
}
.glass-panel {
background: rgba(40, 40, 40, 0.6);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(212, 175, 55, 0.3);
border-radius: 12px;
box-shadow: 0 0 10px rgba(212, 175, 55, 0.3),
inset 0 0 10px rgba(212, 175, 55, 0.2);
position: relative;
}
.glass-panel::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 12px;
border: 1px solid transparent;
background: linear-gradient(45deg,
rgba(212, 175, 55, 0.2),
rgba(0, 0, 0, 0.2),
rgba(212, 175, 55, 0.2)) border-box;
-webkit-mask: linear-gradient(#fff 0 0) padding-box,
linear-gradient(#fff 0 0);
-webkit-mask-composite: destination-out;
mask-composite: exclude;
pointer-events: none;
}
.premium-gradient {
background: linear-gradient(45deg, rgba(0, 0, 0, 0.4), rgba(212, 175, 55, 0.4));
}
.card-hover {
transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
border: 1px solid transparent;
position: relative;
}
.card-hover::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: inherit;
padding: 1px;
background: linear-gradient(45deg,
rgba(212, 175, 55, 0.6),
rgba(125, 60, 152, 0.6),
rgba(212, 175, 55, 0.6));
-webkit-mask: linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
-webkit-mask-composite: destination-out;
mask-composite: exclude;
pointer-events: none;
opacity: 0;
transition: opacity 0.3s ease;
}
.card-hover:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(212, 175, 55, 0.4),
0 0 20px rgba(125, 60, 152, 0.5);
}
.card-hover:hover::before {
opacity: 1;
}
.marquee-container {
overflow: hidden;
white-space: nowrap;
}
.marquee {
display: inline-block;
animation: marquee 25s linear infinite;
}
@keyframes marquee {
0% { transform: translateX(100%); }
100% { transform: translateX(-100%); }
}
.pulse {
animation: pulse 2s infinite;
}
@keyframes pulse {
0% { box-shadow: 0 0 0 0 rgba(212, 175, 55, 0.6); }
70% { box-shadow: 0 0 0 10px rgba(212, 175, 55, 0); }
100% { box-shadow: 0 0 0 0 rgba(212, 175, 55, 0); }
}
.floating {
animation: floating 3s ease-in-out infinite;
}
@keyframes floating {
0% { transform: translateY(0px); }
50% { transform: translateY(-10px); }
100% { transform: translateY(0px); }
}
.glow-text {
text-shadow: 0 0 5px rgba(212, 175, 55, 0.8);
}
.category-btn.active {
background: linear-gradient(to right, #D4AF37, #7D3C98);
box-shadow: 0 0 15px rgba(212, 175, 55, 0.7);
position: relative;
overflow: hidden;
}
.category-btn.active::after {
content: '';
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
border-radius: 9999px;
background: linear-gradient(45deg,
rgba(212, 175, 55, 0.8),
rgba(0, 0, 0, 0.8),
rgba(212, 175, 55, 0.8));
z-index: -1;
filter: blur(2px);
animation: borderGlow 2s linear infinite;
}
@keyframes borderGlow {
0% { opacity: 0.8; }
50% { opacity: 1; }
100% { opacity: 0.8; }
}
@keyframes iconBounce {
0%, 100% { transform: translateY(0) scale(1); }
50% { transform: translateY(-5px) scale(1.1); }
}
@keyframes magnify {
0% { transform: scale(1); }
50% { transform: scale(1.2); }
100% { transform: scale(1); }
}
@keyframes pulseGlow {
0% { text-shadow: 0 0 5px rgba(212, 175, 55, 0.8); }
50% { text-shadow: 0 0 15px rgba(212, 175, 55, 0.8); }
100% { text-shadow: 0 0 5px rgba(212, 175, 55, 0.8); }
}
@keyframes providerBounce {
0%, 100% {
transform: translateY(0) scale(1);
color: #9CA3AF;
}
50% {
transform: translateY(-5px) scale(1.1);
color: #D4AF37;
}
}
.vip-gradient-bg {
background: linear-gradient(to right, #1A1A1A, #2D1420, #1A1A1A);
position: relative;
overflow: hidden;
}
.vip-gradient-bg::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(45deg,
rgba(212, 175, 55, 0.1) 0%,
rgba(125, 60, 152, 0.1) 20%,
rgba(212, 175, 55, 0.1) 40%,
rgba(125, 60, 152, 0.1) 60%,
rgba(212, 175, 55, 0.1) 80%,
rgba(125, 60, 152, 0.1) 100%);
animation: gradient-move 8s linear infinite;
z-index: 0;
}
@keyframes gradient-move {
0% { transform: translateX(-100%); }
100% { transform: translateX(100%); }
}
.scroll-container {
scrollbar-width: thin;
scrollbar-color: #D4AF37 transparent;
}
.scroll-container::-webkit-scrollbar {
height: 6px;
}
.scroll-container::-webkit-scrollbar-track {
background: rgba(30, 30, 30, 0.5);
border-radius: 10px;
}
.scroll-container::-webkit-scrollbar-thumb {
background: linear-gradient(to right, #D4AF37, #7D3C98);
border-radius: 10px;
}
@keyframes spin-slow {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
@keyframes rotate-y-180 {
0% { transform: rotateY(0deg); }
100% { transform: rotateY(180deg); }
}
.provider-card:hover .provider-front {
animation: rotate-y-180 0.5s ease-in-out forwards;
}
.provider-card {
perspective: 1000px;
}
@keyframes slide-down {
0%, 20% { transform: translateY(0); }
25%, 45% { transform: translateY(-100%); }
50%, 70% { transform: translateY(-200%); }
75%, 95% { transform: translateY(-300%); }
100% { transform: translateY(0); }
}
@keyframes progress {
0% { width: 0%; }
80% { width: 85%; }
100% { width: 100%; }
}
@keyframes shine {
0% { left: -50%; }
100% { left: 150%; }
}
@keyframes rise {
0% { transform: translateY(0); opacity: 0; }
10% { opacity: 1; }
100% { transform: translateY(-20px); opacity: 0; }
}
@keyframes iconGlow {
0% { filter: drop-shadow(0 0 2px rgba(212, 175, 55, 0.5)); }
50% { filter: drop-shadow(0 0 8px rgba(212, 175, 55, 0.9)); }
100% { filter: drop-shadow(0 0 2px rgba(212, 175, 55, 0.5)); }
}
@keyframes iconBounce {
0%, 100% { transform: translateY(0) scale(1); }
50% { transform: translateY(-3px) scale(1.1); }
}
@keyframes float-1 {
0%, 100% { transform: translate(0, 0); }
50% { transform: translate(0, -10px); }
}
@keyframes float-2 {
0%, 100% { transform: translate(0, 0); }
50% { transform: translate(0, -8px) rotate(3deg); }
}
@keyframes float-3 {
0%, 100% { transform: translate(0, 0); }
50% { transform: translate(0, -12px) scale(1.05); }
}
.animate-float-1 {
animation: float-1 4s ease-in-out infinite;
}
.animate-float-2 {
animation: float-2 5s ease-in-out infinite;
}
.animate-float-3 {
animation: float-3 6s ease-in-out infinite;
}
@keyframes spin-slow {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
@keyframes magnify {
0% { transform: scale(1); }
50% { transform: scale(1.3); }
100% { transform: scale(1); }
}
.animate-spin {
animation: spin 4s linear infinite;
}
.animate-slide-down {
animation: slide-down 12s ease infinite;
}
.animate-progress {
animation: progress 3s ease-out infinite alternate;
}
</style>
</head>
<body class="relative min-h-screen overflow-x-hidden">
<!-- Navbar -->
<header class="fixed top-0 left-0 right-0 z-50 flex justify-between items-center px-4 py-3 glass-panel">
<div class="flex items-center">
<div class="w-10 h-10 flex items-center justify-center bg-niogold rounded-full">
<span class="text-xl font-bold text-white">N</span>
</div>
<span class="ml-2 text-xl font-bold text-niogold">Nioplay</span>
</div>
<div class="flex-1 mx-4">
<div class="relative glass-panel">
<input type="text" placeholder="Search games..." class="w-full py-2 px-4 bg-nioglass rounded-full text-sm focus:outline-none focus:ring-2 focus:ring-niogold">
<i class="fas fa-search absolute right-3 top-2.5 text-gray-400"></i>
</div>
</div>
<div class="glass-panel px-4 py-1 flex items-center">
<i class="fas fa-coins text-niogold mr-2"></i>
<span class="mr-2 text-white" style="text-shadow: 0 0 5px #FFD700, 0 0 10px #FFD700;">GC: 25,000</span>
<div class="h-5 w-px bg-gray-600 mx-2"></div>
<i class="fas fa-trophy text-niogold mr-2"></i>
<span class="mr-2 text-white" style="text-shadow: 0 0 5px #00ff00, 0 0 10px #00ff00;">SC: 450</span>
<div class="h-5 w-px bg-gray-600 mx-2"></div>
<div class="group relative">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-niogold hover:animate-[iconBounce_0.5s_ease-in-out] animate-[iconGlow_2s_ease-in-out_infinite]" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z" />
</svg>
<div class="absolute -top-1 -right-1 w-4 h-4 bg-red-500 rounded-full flex items-center justify-center text-xs animate-pulse">3</div>
<div class="absolute left-1/2 -translate-x-1/2 bg-black text-white text-xs px-2 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity duration-300 whitespace-nowrap">
Shopping Cart
</div>
</div>
</div>
<div class="ml-4 flex items-center">
<div class="relative group">
<!-- Profile Avatar with animated border -->
<div class="w-12 h-12 rounded-full bg-gradient-to-br from-niogold via-amber-200 to-niopurple p-0.5 animate-spin-slow">
<div class="w-full h-full rounded-full bg-gradient flex items-center justify-center relative overflow-hidden">
<i class="fas fa-crown text-niogold text-xl z-10"></i>
<!-- Shimmer effect -->
<div class="absolute inset-0 bg-gradient-to-r from-transparent via-white/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
</div>
</div>
<!-- VIP Badge with glow -->
<div class="absolute -bottom-1 -right-1 w-6 h-6 rounded-full bg-gradient-to-br from-niogold to-amber-200 flex items-center justify-center shadow-glow animate-pulse">
<span class="text-xs font-bold text-black">5</span>
</div>
<!-- VIP Level Indicator with animation -->
<div class="absolute -top-2 left-1/2 -translate-x-1/2 bg-gradient-to-r from-niopurple to-niogold px-2 py-0.5 rounded-full text-xs font-bold whitespace-nowrap transform -translate-y-full opacity-0 group-hover:opacity-100 group-hover:translate-y-0 transition-all duration-300">
<span class="text-white">Diamond Tier</span>
<div class="absolute bottom-0 left-1/2 w-2 h-2 bg-gradient-to-r from-niopurple to-niogold transform -translate-x-1/2 translate-y-1/2 rotate-45"></div>
</div>
</div>
<!-- Notification Bell -->
<div class="relative ml-3 group">
<i class="fas fa-bell text-xl text-niogold cursor-pointer hover:animate-[iconBounce_0.5s_ease-in-out]"></i>
<div class="absolute -top-1 -right-1 w-4 h-4 bg-red-500 rounded-full flex items-center justify-center text-xs">3</div>
<div class="absolute left-1/2 -translate-x-1/2 bg-black text-white text-xs px-2 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity duration-300 whitespace-nowrap">
Notifications
</div>
</div>
</div>
</header>
<!-- Side Navigation -->
<div class="fixed left-0 top-14 bottom-20 w-16 flex flex-col items-center py-4 z-40">
<div class="flex flex-col space-y-4 mt-4">
<a href="#" class="w-12 h-12 flex items-center justify-center glass-panel rounded-xl text-niogold hover:bg-opacity-100 transition-all group">
<i class="fas fa-home text-xl group-hover:animate-[iconBounce_0.5s_ease-in-out]"></i>
<span class="absolute left-16 bg-black text-white text-xs px-2 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity">Home</span>
</a>
<a href="#" class="w-12 h-12 flex items-center justify-center glass-panel rounded-xl text-niogold hover:bg-opacity-100 transition-all group">
<i class="fas fa-dice text-xl group-hover:animate-[iconBounce_0.5s_ease-in-out]"></i>
<span class="absolute left-16 bg-black text-white text-xs px-2 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity">Slots</span>
</a>
<a href="#" class="w-12 h-12 flex items-center justify-center glass-panel rounded-xl text-niogold hover:bg-opacity-100 transition-all group">
<i class="fas fa-chess-queen text-xl group-hover:animate-[iconBounce_0.5s_ease-in-out]"></i>
<span class="absolute left-16 bg-black text-white text-xs px-2 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity">Table Games</span>
</a>
<a href="#" class="w-12 h-12 flex items-center justify-center glass-panel rounded-xl text-niogold hover:bg-opacity-100 transition-all group">
<i class="fas fa-video text-xl group-hover:animate-[iconBounce_0.5s_ease-in-out]"></i>
<span class="absolute left-16 bg-black text-white text-xs px-2 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity">Live Casino</span>
</a>
<a href="#" class="w-12 h-12 flex items-center justify-center glass-panel rounded-xl text-niogold hover:bg-opacity-100 transition-all group">
<i class="fas fa-trophy text-xl group-hover:animate-[iconBounce_0.5s_ease-in-out]"></i>
<span class="absolute left-16 bg-black text-white text-xs px-2 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity">Tournaments</span>
</a>
<a href="#" class="w-12 h-12 flex items-center justify-center glass-panel rounded-xl text-niogold hover:bg-opacity-100 transition-all group">
<i class="fas fa-crown text-xl group-hover:animate-[iconBounce_0.5s_ease-in-out]"></i>
<span class="absolute left-16 bg-black text-white text-xs px-2 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity">VIP</span>
</a>
<a href="#" class="w-12 h-12 flex items-center justify-center glass-panel rounded-xl text-niogold hover:bg-opacity-100 transition-all group">
<i class="fas fa-wallet text-xl group-hover:animate-[iconBounce_0.5s_ease-in-out]"></i>
<span class="absolute left-16 bg-black text-white text-xs px-2 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity">Wallet</span>
</a>
<a href="#" class="w-12 h-12 flex items-center justify-center glass-panel rounded-xl text-niogold hover:bg-opacity-100 transition-all group">
<i class="fas fa-question-circle text-xl group-hover:animate-[iconBounce_0.5s_ease-in-out]"></i>
<span class="absolute left-16 bg-black text-white text-xs px-2 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity">FAQ</span>
</a>
<a href="#" class="w-12 h-12 flex items-center justify-center glass-panel rounded-xl text-niogold hover:bg-opacity-100 transition-all group">
<i class="fas fa-headset text-xl group-hover:animate-[iconBounce_0.5s_ease-in-out]"></i>
<span class="absolute left-16 bg-black text-white text-xs px-2 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity">Support</span>
</a>
</div>
</div>
<main class="ml-16 pt-24 pb-28 px-4 relative">
<!-- Progressive Jackpots - Modern Pill Style -->
<div class="flex justify-center space-x-2 mb-4">
<!-- Minor Jackpot - Green Theme -->
<div class="glass-panel px-4 py-1 rounded-full relative overflow-hidden group hover:shadow-glow transition-all duration-300 animate-[float-1_4s_ease-in-out_infinite]">
<div class="absolute inset-0 bg-gradient-to-br from-emerald-500/20 to-emerald-800/10 opacity-30"></div>
<div class="flex flex-col items-center relative z-10">
<div class="text-xs uppercase font-medium text-gray-400 group-hover:text-emerald-300 transition-colors">Minor</div>
<div class="text-sm font-bold text-emerald-300 flex items-center">
<i class="fas fa-leaf text-emerald-300 text-xs mr-1 animate-[spin-slow_5s_linear_infinite]"></i>
<span class="animate-[pulseGlow_2s_ease-in-out_infinite]">$12,345</span>
</div>
</div>
<div class="absolute bottom-0 left-0 right-0 h-1 bg-gradient-to-r from-emerald-300/80 to-transparent"></div>
</div>
<!-- Major Jackpot - Blue Theme -->
<div class="glass-panel px-4 py-1 rounded-full relative overflow-hidden group hover:shadow-glow transition-all duration-300 animate-[float-2_4s_ease-in-out_infinite]">
<div class="absolute inset-0 bg-gradient-to-br from-blue-500/20 to-blue-800/10 opacity-30"></div>
<div class="flex flex-col items-center relative z-10">
<div class="text-xs uppercase font-medium text-gray-400 group-hover:text-blue-300 transition-colors">Major</div>
<div class="text-sm font-bold text-blue-300 flex items-center">
<i class="fas fa-bolt text-blue-300 text-xs mr-1 animate-[magnify_1.5s_ease-in-out_infinite]"></i>
<span class="animate-[pulseGlow_1.5s_ease-in-out_infinite]">$98,765</span>
</div>
</div>
<div class="absolute bottom-0 left-0 right-0 h-1 bg-gradient-to-r from-blue-300/80 to-transparent"></div>
</div>
<!-- Grand Jackpot - Gold Theme -->
<div class="glass-panel px-4 py-1 rounded-full relative overflow-hidden group hover:shadow-glow transition-all duration-300 animate-[float-3_4s_ease-in-out_infinite]">
<div class="absolute inset-0 bg-gradient-to-br from-amber-500/20 to-yellow-800/10 opacity-30"></div>
<div class="flex flex-col items-center relative z-10">
<div class="text-xs uppercase font-medium text-gray-400 group-hover:text-amber-300 transition-colors">Grand</div>
<div class="text-sm font-bold text-amber-300 flex items-center">
<i class="fas fa-crown text-amber-300 text-xs mr-1 animate-[iconBounce_1s_ease-in-out_infinite]"></i>
<span class="animate-[pulseGlow_1s_ease-in-out_infinite]">$1.2M</span>
</div>
</div>
<div class="absolute bottom-0 left-0 right-0 h-1 bg-gradient-to-r from-amber-300/80 to-transparent"></div>
</div>
</div>
<!-- Hero Banner -->
<div class="relative rounded-xl overflow-hidden mb-4 h-52 glass-panel premium-gradient">
<div class="absolute inset-0 flex">
<div class="w-full h-full bg-black opacity-30"></div>
</div>
<div class="absolute bottom-0 left-0 right-0 p-4">
<h2 class="text-2xl font-bold glow-text">NEW: Diamond Riches Megaways™</h2>
<p class="text-sm mb-3">Unlock unlimited ways to win with cascading symbols!</p>
<button class="px-6 py-2 glass-panel rounded-full text-sm font-semibold glow-text hover:shadow-glow transition-all duration-300 flex items-center">
<span class="relative z-10">PLAY NOW</span>
<i class="fas fa-play ml-2 text-xs relative z-10"></i>
<div class="absolute inset-0 rounded-full bg-gradient-to-r from-niogold/80 to-black/80 opacity-70 hover:opacity-100 transition-opacity duration-300"></div>
</button>
</div>
</div>
<!-- Promotional Banners -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
<div class="glass-panel p-4 rounded-xl relative overflow-hidden vip-gradient-bg">
<div class="relative z-10">
<div class="flex items-center mb-2">
<div class="w-10 h-10 rounded-full bg-gradient-to-r from-niogold to-niopurple flex items-center justify-center mr-2 group">
<i class="fas fa-calendar-day group-hover:animate-[iconBounce_0.5s_ease-in-out]"></i>
</div>
<h3 class="font-bold">Daily Bonus</h3>
</div>
<p class="text-sm mb-3">Login now to get 100 free spins!</p>
<div class="h-1 w-full bg-gray-700 rounded-full mb-1">
<div class="h-1 bg-gradient-to-r from-niogold to-yellow-300 rounded-full w-4/5"></div>
</div>
<p class="text-xs text-gray-400">1h 23m remaining</p>
</div>
</div>
<div class="glass-panel p-4 rounded-xl relative overflow-hidden vip-gradient-bg">
<div class="relative z-10">
<div class="flex items-center mb-2">
<div class="w-10 h-10 rounded-full bg-gradient-to-r from-green-500 to-emerald-400 flex items-center justify-center mr-2 group">
<i class="fas fa-piggy-bank group-hover:animate-[iconBounce_0.5s_ease-in-out]"></i>
</div>
<h3 class="font-bold">Jackpot Pool</h3>
</div>
<p class="text-xl text-niogold mb-2 font-bold">$1,245,120</p>
<p class="text-xs">Next draw in 3h 15m</p>
</div>
</div>
<div class="glass-panel p-4 rounded-xl relative overflow-hidden vip-gradient-bg">
<div class="relative z-10">
<div class="flex items-center mb-2">
<div class="w-10 h-10 rounded-full bg-gradient-to-r from-red-500 to-pink-600 flex items-center justify-center mr-2 group">
<i class="fas fa-clock group-hover:animate-[iconBounce_0.5s_ease-in-out]"></i>
</div>
<h3 class="font-bold">Flash Offer</h3>
</div>
<p class="text-sm mb-3">200% bonus + 50 free spins on first deposit!</p>
<button class="px-4 py-1.5 glass-panel rounded-full text-xs font-semibold glow-text hover:shadow-glow transition-all duration-300 flex items-center">
<span class="relative z-10">CLAIM NOW</span>
<div class="absolute inset-0 rounded-full bg-gradient-to-r from-gold-500/80 to-black-600/80 opacity-70 hover:opacity-100 transition-opacity duration-300"></div>
</button>
</div>
</div>
</div>
<!-- Payment Methods -->
<div class="flex space-x-6 mb-2 justify-center">
<div class="group">
<div class="w-12 h-12 flex items-center justify-center rounded-lg">
<i class="fab fa-cc-visa text-gray-400 text-2xl group-hover:text-niogold group-hover:scale-110 transition-all"></i>
</div>
</div>
<div class="group">
<div class="w-12 h-12 flex items-center justify-center rounded-lg">
<i class="fab fa-cc-mastercard text-gray-400 text-2xl group-hover:text-niogold group-hover:scale-110 transition-all"></i>
</div>
</div>
<div class="group">
<div class="w-12 h-12 flex items-center justify-center rounded-lg">
<i class="fas fa-landmark text-gray-400 text-xl group-hover:text-niogold group-hover:scale-110 transition-all"></i>
</div>
</div>
<div class="group">
<div class="w-12 h-12 flex items-center justify-center rounded-lg">
<i class="fab fa-bitcoin text-gray-400 text-xl group-hover:text-niogold group-hover:scale-110 transition-all"></i>
</div>
</div>
<div class="group">
<div class="w-12 h-12 flex items-center justify-center rounded-lg">
<i class="fab fa-apple-pay text-gray-400 text-2xl group-hover:text-niogold group-hover:scale-110 transition-all"></i>
</div>
</div>
<div class="group">
<div class="w-12 h-12 flex items-center justify-center rounded-lg">
<i class="fab fa-google-pay text-gray-400 text-2xl group-hover:text-niogold group-hover:scale-110 transition-all"></i>
</div>
</div>
<div class="group">
<div class="w-12 h-12 flex items-center justify-center rounded-lg">
<i class="fab fa-cc-paypal text-gray-400 text-2xl group-hover:text-niogold group-hover:scale-110 transition-all"></i>
</div>
</div>
<div class="group">
<div class="w-12 h-12 flex items-center justify-center rounded-lg">
<span class="text-gray-400 text-[0.6rem] font-medium group-hover:text-niogold group-hover:scale-110 transition-all">Venmo</span>
</div>
</div>
<div class="group">
<div class="w-12 h-12 flex items-center justify-center rounded-lg">
<span class="text-gray-400 text-[0.6rem] font-medium group-hover:text-niogold group-hover:scale-110 transition-all">CashApp</span>
</div>
</div>
</div>
<!-- Live Now Marquee -->
<div class="glass-panel px-3 py-4 rounded-xl mb-6">
<div class="flex items-center mb-3">
<div class="w-3 h-6 bg-gradient-to-r from-niogold to-amber-200 rounded mr-2"></div>
<h3 class="font-bold">Recent Games</h3>
<span class="ml-2 text-red-500 flex items-center">
<span class="w-2 h-2 bg-red-500 rounded-full mr-1 animate-pulse"></span> LIVE
</span>
</div>
<div class="relative overflow-hidden pb-2">
<div class="marquee-container">
<div class="marquee flex space-x-4 py-2" style="animation-duration: 40s;">
<!-- Repeat 10 game cards -->
<div class="relative card-hover">
<div class="w-28 h-28 rounded-xl overflow-hidden">
<div class="relative w-full h-full">
<img src="https://i.postimg.cc/MTQFQdpj/temp-Image-ONx-Xwu.avif" class="w-full h-full object-cover">
<div class="absolute top-1 right-1 bg-red-500 rounded-full w-6 h-6 flex items-center justify-center">
<i class="fas fa-play text-xs"></i>
</div>
</div>
</div>
<div class="text-xs text-center mt-1">Starburst</div>
<div class="absolute -top-1 -right-1 bg-red-500 rounded-full text-xs px-1">Live</div>
</div>
<div class="relative card-hover">
<div class="w-28 h-28 rounded-xl overflow-hidden">
<div class="relative w-full h-full">
<img src="https://i.postimg.cc/MTQFQdpj/temp-Image-ONx-Xwu.avif" class="w-full h-full object-cover">
<div class="absolute top-1 right-1 bg-red-500 rounded-full w-6 h-6 flex items-center justify-center">
<i class="fas fa-play text-xs"></i>
</div>
</div>
</div>
<div class="text-xs text-center mt-1">Sweet Bonanza</div>
</div>
<div class="relative card-hover">
<div class="w-28 h-28 rounded-xl overflow-hidden">
<div class="relative w-full h-full">
<img src="https://i.postimg.cc/MTQFQdpj/temp-Image-ONx-Xwu.avif" class="w-full h-full object-cover">
<div class="absolute top-1 right-1 bg-red-500 rounded-full w-6 h-6 flex items-center justify-center">
<i class="fas fa-play text-xs"></i>
</div>
</div>
</div>
<div class="text-xs text-center mt-1">Book of Dead</div>
<div class="absolute -top-1 -right-1 bg-red-500 rounded-full text-xs px-1">Live</div>
</div>
<div class="relative card-hover">
<div class="w-28 h-28 rounded-xl overflow-hidden">
<div class="relative w-full h-full">
<img src="https://i.postimg.cc/MTQFQdpj/temp-Image-ONx-Xwu.avif" class="w-full h-full object-cover">
<div class="absolute top-1 right-1 bg-red-500 rounded-full w-6 h-6 flex items-center justify-center">
<i class="fas fa-play text-xs"></i>
</div>
</div>
</div>
<div class="text-xs text-center mt-1">Gates of Olympus</div>
</div>
<div class="relative card-hover">
<div class="w-28 h-28 rounded-xl overflow-hidden">
<div class="relative w-full h-full">
<img src="https://i.postimg.cc/MTQFQdpj/temp-Image-ONx-Xwu.avif" class="w-full h-full object-cover">
<div class="absolute top-1 right-1 bg-red-500 rounded-full w-6 h-6 flex items-center justify-center">
<i class="fas fa-play text-xs"></i>
</div>
</div>
</div>
<div class="text-xs text-center mt-1">Big Bass Bonanza</div>
<div class="absolute -top-1 -right-1 bg-red-500 rounded-full text-xs px-1">Live</div>
</div>
<div class="relative card-hover">
<div class="w-28 h-28 rounded-xl overflow-hidden">
<div class="relative w-full h-full">
<img src="https://i.postimg.cc/MTQFQdpj/temp-Image-ONx-Xwu.avif" class="w-full h-full object-cover">
<div class="absolute top-1 right-1 bg-red-500 rounded-full w-6 h-6 flex items-center justify-center">
<i class="fas fa-play text-xs"></i>
</div>
</div>
</div>
<div class="text-xs text-center mt-1">Money Train 3</div>
<div class="absolute -top-1 -right-1 bg-red-500 rounded-full text-xs px-1">Live</div>
</div>
<div class="relative card-hover">
<div class="w-28 h-28 rounded-xl overflow-hidden">
<div class="relative w-full h-full">
<img src="https://i.postimg.cc/MTQFQdpj/temp-Image-ONx-Xwu.avif" class="w-full h-full object-cover">
<div class="absolute top-1 right-1 bg-red-500 rounded-full w-6 h-6 flex items-center justify-center">
<i class="fas fa-play text-xs"></i>
</div>
</div>
</div>
<div class="text-xs text-center mt-1">Buffalo King</div>
</div>
<div class="relative card-hover">
<div class="w-28 h-28 rounded-xl overflow-hidden">
<div class="relative w-full h-full">
<img src="https://via.placeholder.com/112x112/1A1A1A/333333?text=Game" class="w-full h-full object-cover">
<div class="absolute top-1 right-1 bg-red-500 rounded-full w-6 h-6 flex items-center justify-center">
<i class="fas fa-play text-xs"></i>
</div>
</div>
</div>
<div class="text-xs text-center mt-1">Jammin' Jars</div>
<div class="absolute -top-1 -right-1 bg-red-500 rounded-full text-xs px-1">Live</div>
</div>
<div class="relative card-hover">
<div class="w-28 h-28 rounded-xl overflow-hidden">
<div class="relative w-full h-full">
<img src="https://via.placeholder.com/112x112/1A1A1A/333333?text=Game" class="w-full h-full object-cover">
<div class="absolute top-1 right-1 bg-red-500 rounded-full w-6 h-6 flex items-center justify-center">
<i class="fas fa-play text-xs"></i>
</div>
</div>
</div>
<div class="text-xs text-center mt-1">Reactoonz 2</div>
</div>
<div class="relative card-hover">
<div class="w-28 h-28 rounded-xl overflow-hidden">
<div class="relative w-full h-full">
<img src="https://via.placeholder.com/112x112/1A1A1A/333333?text=Game" class="w-full h-full object-cover">
<div class="absolute top-1 right-1 bg-red-500 rounded-full w-6 h-6 flex items-center justify-center">
<i class="fas fa-play text-xs"></i>
</div>
</div>
</div>
<div class="text-xs text-center mt-1">Dead or Alive 2</div>
<div class="absolute -top-1 -right-1 bg-red-500 rounded-full text-xs px-1">Live</div>
</div>
</div>
</div>
</div>
<!-- Rewards & Tournaments -->
<div class="glass-panel p-4 rounded-xl mb-6">
<h3 class="font-bold mb-4 text-center">Rewards & Tournaments</h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<!-- Your Nioplay Perks -->
<div class="glass-panel p-4 rounded-xl relative overflow-hidden h-full" style="background: linear-gradient(135deg, #1A1A1A 0%, #1E2B3A 50%, #1A1A1A 100%);">
<div class="flex items-center mb-3">
<div class="w-10 h-10 rounded-full bg-gradient-to-r from-amber-500 to-yellow-300 flex items-center justify-center mr-2 animate-pulse">
<i class="fas fa-star text-black"></i>
</div>
<div>
<h4 class="font-bold text-transparent bg-clip-text bg-gradient-to-r from-amber-300 to-yellow-200">Your Nioplay Perks</h4>
<p class="text-xs text-gray-400">Diamond Tier Benefits</p>
</div>
</div>
<div class="space-y-3 mb-4">
<div class="flex items-center">
<div class="w-8 h-8 rounded-full bg-gradient-to-r from-green-500 to-emerald-300 flex items-center justify-center mr-2 animate-float-1">
<i class="fas fa-percentage text-xs text-white"></i>
</div>
<div>
<p class="text-sm">30% Weekly Rakeback</p>
<p class="text-xs text-gray-400">Next cashback: $120</p>
</div>
</div>
<div class="flex items-center">
<div class="w-8 h-8 rounded-full bg-gradient-to-r from-blue-500 to-cyan-300 flex items-center justify-center mr-2 animate-float-2">
<i class="fas fa-headset text-xs text-white"></i>
</div>
<div>
<p class="text-sm">VIP Support Team</p>
<p class="text-xs text-gray-400">Instant response</p>
</div>
</div>
<div class="flex items-center">
<div class="w-8 h-8 rounded-full bg-gradient-to-r from-purple-500 to-pink-300 flex items-center justify-center mr-2 animate-float-3">
<i class="fas fa-clock text-xs text-white"></i>
</div>
<div>
<p class="text-sm">24hr Redeems</p>
<p class="text-xs text-gray-400">Instant withdrawals</p>
</div>
</div>
<div class="flex items-center">
<div class="w-8 h-8 rounded-full bg-gradient-to-r from-red-500 to-amber-300 flex items-center justify-center mr-2">
<i class="fas fa-gift text-xs text-white"></i>
</div>
<div>
<p class="text-sm">Monthly Gifts</p>
<p class="text-xs text-gray-400">Next gift: 5 days</p>
</div>
</div>
</div>
<button class="w-full py-2 glass-panel rounded-full text-sm font-semibold glow-text hover:shadow-glow transition-all duration-300 flex items-center justify-center">
<span class="relative z-10">VIEW ALL PERKS</span>
<div class="absolute inset-0 rounded-full bg-gradient-to-r from-amber-500/80 to-yellow-300/80 opacity-70 hover:opacity-100 transition-opacity duration-300"></div>
</button>
</div>
<!-- Tournament Leaderboard -->
<div class="glass-panel p-4 rounded-xl relative overflow-hidden vip-gradient-bg" style="height: 100%;">
<div class="flex justify-between items-center mb-3">
<h4 class="font-bold text-niogold">Mega Tournament</h4>
<div class="text-sm flex items-center">
<i class="far fa-clock mr-1 text-amber-300"></i>
<span>12:45:21</span>
</div>
</div>
<div class="space-y-2">
<div class="flex items-center justify-between py-1 px-2 bg-gray-800 rounded">
<div class="flex items-center">
<span class="w-5 h-5 bg-gradient-to-r from-amber-300 to-amber-100 text-xs text-gray-900 rounded-full flex items-center justify-center mr-2">1</span>
<span class="text-sm">BigWinner88</span>
</div>
<span class="text-niogold font-bold">$1,250</span>
</div>
<div class="flex items-center justify-between py-1 px-2">
<div class="flex items-center">
<span class="w-5 h-5 bg-gray-700 text-xs rounded-full flex items-center justify-center mr-2">2</span>
<span class="text-sm">LuckySpin99</span>
</div>
<span>$850</span>
</div>
<div class="flex items-center justify-between py-1 px-2 bg-gray-800 rounded">
<div class="flex items-center">
<span class="w-5 h-5 bg-gray-700 text-xs rounded-full flex items-center justify-center mr-2">3</span>
<span class="text-sm">MidasTouch</span>
</div>
<span>$620</span>
</div>
</div>
<div class="flex justify-between mt-3">
<span class="text-sm">Your position: #24</span>
<button class="px-3 py-1 bg-gradient-to-r from-niogold to-black-600 rounded-full text-xs font-semibold">PLAY NOW</button>
</div>
</div>
</div>
</div>
<!-- Game Providers Section -->
<div class="mb-6">
<div class="flex justify-center mb-4">
<h3 class="font-bold text-center">Premium Game Providers</h3>
</div>
<div class="relative">
<div class="marquee-container overflow-hidden">
<div class="marquee flex space-x-4 py-2">
<!-- Provider Logos with simple gray icons -->
<div class="flex-shrink-0 flex flex-col items-center px-4 group">
<i class="fas fa-dice text-gray-400 text-xl mb-1 group-hover:animate-[providerBounce_0.5s_ease-in-out]"></i>
<span class="text-xs text-gray-300 group-hover:text-niogold transition-colors">Pragmatic</span>
</div>
<div class="flex-shrink-0 flex flex-col items-center px-4 group">
<i class="fas fa-chess-queen text-gray-400 text-xl mb-1 group-hover:animate-[providerBounce_0.5s_ease-in-out]"></i>
<span class="text-xs text-gray-300 group-hover:text-niogold transition-colors">Playtech</span>
</div>
<div class="flex-shrink-0 flex flex-col items-center px-4">
<i class="fas fa-leaf text-gray-400 text-xl mb-1"></i>
<span class="text-xs text-gray-300">NetEnt</span>
</div>
<div class="flex-shrink-0 flex flex-col items-center px-4">
<i class="fas fa-gamepad text-gray-400 text-xl mb-1"></i>
<span class="text-xs text-gray-300">Microgaming</span>
</div>
<div class="flex-shrink-0 flex flex-col items-center px-4">
<i class="fas fa-fire text-gray-400 text-xl mb-1"></i>
<span class="text-xs text-gray-300">Evolution</span>
</div>
<div class="flex-shrink-0 flex flex-col items-center px-4">
<i class="fas fa-tree text-gray-400 text-xl mb-1"></i>
<span class="text-xs text-gray-300">Yggdrasil</span>
</div>
<div class="flex-shrink-0 flex flex-col items-center px-4">
<i class="fas fa-paw text-gray-400 text-xl mb-1"></i>
<span class="text-xs text-gray-300">Red Tiger</span>
</div>
<div class="flex-shrink-0 flex flex-col items-center px-4">
<i class="fas fa-play text-gray-400 text-xl mb-1"></i>
<span class="text-xs text-gray-300">Play'n GO</span>
</div>
<div class="flex-shrink-0 flex flex-col items-center px-4">
<i class="fas fa-moon text-gray-400 text-xl mb-1"></i>
<span class="text-xs text-gray-300">BGaming</span>
</div>
<div class="flex-shrink-0 flex flex-col items-center px-4">
<i class="fas fa-bolt text-gray-400 text-xl mb-1"></i>
<span class="text-xs text-gray-300">Thunderkick</span>
</div>
<div class="flex-shrink-0 flex flex-col items-center px-4">
<i class="fas fa-question text-gray-400 text-xl mb-1"></i>
<span class="text-xs text-gray-300">Quickspin</span>
</div>
<div class="flex-shrink-0 flex flex-col items-center px-4">
<i class="fas fa-horse text-gray-400 text-xl mb-1"></i>
<span class="text-xs text-gray-300">Hacksaw</span>
</div>
<div class="flex-shrink-0 flex flex-col items-center px-4">
<i class="fas fa-ship text-gray-400 text-xl mb-1"></i>
<span class="text-xs text-gray-300">Push Gaming</span>
</div>
<div class="flex-shrink-0 flex flex-col items-center px-4">
<i class="fas fa-snowflake text-gray-400 text-xl mb-1"></i>
<span class="text-xs text-gray-300">Relax Gaming</span>
</div>
<div class="flex-shrink-0 flex flex-col items-center px-4">
<i class="fas fa-feather text-gray-400 text-xl mb-1"></i>
<span class="text-xs text-gray-300">Nolimit City</span>
</div>
<div class="flex-shrink-0 flex flex-col items-center px-4">
<i class="fas fa-cube text-gray-400 text-xl mb-1"></i>
<span class="text-xs text-gray-300">Blueprint</span>
</div>
<div class="flex-shrink-0 flex flex-col items-center px-4">
<i class="fas fa-infinity text-gray-400 text-xl mb-1"></i>
<span class="text-xs text-gray-300">ELK Studios</span>
</div>
<div class="flex-shrink-0 flex flex-col items-center px-4">
<i class="fas fa-dragon text-gray-400 text-xl mb-1"></i>
<span class="text-xs text-gray-300">Wazdan</span>
</div>
<div class="flex-shrink-0 flex flex-col items-center px-4">
<i class="fas fa-chess-knight text-gray-400 text-xl mb-1"></i>
<span class="text-xs text-gray-300">iSoftBet</span>
</div>
</div>
</div>
<div class="absolute top-0 right-0 h-full w-16 bg-gradient-to-l from-black to-transparent z-10 pointer-events-none"></div>
<div class="absolute top-0 left-0 h-full w-16 bg-gradient-to-r from-black to-transparent z-10 pointer-events-none"></div>
</div>
<div class="flex justify-center mt-4">
<button class="px-3 py-1 rounded-full text-xs font-semibold glow-text hover:shadow-glow transition-all duration-300 flex items-center bg-gradient-to-r from-niogold/80 to-amber-100/80">
<i class="fas fa-th-large mr-1 text-xs"></i>
<span>View All</span>
</button>
</div>
</div>
<!-- Game Categories -->
<div class="glass-panel p-4 rounded-xl">
<div class="flex items-center mb-4">
<h3 class="font-bold text-xl mr-4">Featured Games</h3>
<div class="flex-1 scroll-container overflow-x-auto pb-2">
<div class="flex space-x-2" style="min-width: max-content;">
<button class="category-btn active px-4 py-2 rounded-full text-sm glow-text hover:shadow-glow transition-all duration-300 relative overflow-hidden">
<span class="relative z-10">Slots</span>
<div class="absolute inset-0 rounded-full bg-gradient-to-r from-niogold/80 to-niopurple/80"></div>
</button>
<button class="category-btn glass-panel px-4 py-2 rounded-full text-sm hover:shadow-glow transition-all duration-300 relative overflow-hidden">
<span class="relative z-10">Live Casino</span>
<div class="absolute inset-0 rounded-full bg-gray-800/50 hover:bg-gray-800/70 transition-all duration-300"></div>
</button>
<button class="category-btn glass-panel px-4 py-2 rounded-full text-sm hover:shadow-glow transition-all duration-300 relative overflow-hidden">
<span class="relative z-10">Table Games</span>
<div class="absolute inset-0 rounded-full bg-gray-800/50 hover:bg-gray-800/70 transition-all duration-300"></div>
</button>
<button class="category-btn glass-panel px-4 py-2 rounded-full text-sm hover:shadow-glow transition-all duration-300 relative overflow-hidden">
<span class="relative z-10">Jackpots</span>
<div class="absolute inset-0 rounded-full bg-gray-800/50 hover:bg-gray-800/70 transition-all duration-300"></div>
</button>
<button class="category-btn glass-panel px-4 py-2 rounded-full text-sm hover:shadow-glow transition-all duration-300 relative overflow-hidden">
<span class="relative z-10">New Games</span>
<div class="absolute inset-0 rounded-full bg-gray-800/50 hover:bg-gray-800/70 transition-all duration-300"></div>
</button>
<button class="category-btn glass-panel px-4 py-2 rounded-full text-sm hover:shadow-glow transition-all duration-300 relative overflow-hidden">
<span class="relative z-10">Popular</span>
<div class="absolute inset-0 rounded-full bg-gray-800/50 hover:bg-gray-800/70 transition-all duration-300"></div>
</button>
</div>
</div>
</div>
<div class="relative">
<!-- Featured Games Carousel with 3D effect -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<div class="transform transition-transform duration-500 card-hover floating" style="transform: perspective(1000px) rotateY(5deg) rotateX(5deg);">
<div class="relative">
<div class="rounded-xl overflow-hidden h-40">
<img src="https://i.postimg.cc/MTQFQdpj/temp-Image-ONx-Xwu.avif" class="w-full h-full object-cover">
<div class="absolute inset-0 bg-gradient-to-t from-black to-transparent"></div>
</div>
<div class="absolute bottom-0 left-0 right-0 p-3">
<h4 class="font-bold text-sm mb-1">Diamond Riches Megaways™</h4>
<div class="flex justify-between items-center">
<div class="text-xs">
<i class="fas fa-star text-amber-300"></i> 4.8
</div>
<button class="px-3 py-1 glass-panel text-xs rounded-full font-semibold glow-text hover:shadow-glow transition-all duration-300 flex items-center justify-center">
<span class="relative z-10">PLAY</span>
<div class="absolute inset-0 rounded-full bg-gradient-to-r from-niogold/80 to-black-100/80 opacity-70 hover:opacity-100 transition-opacity duration-300"></div>
</button>
</div>
</div>
</div>
</div>
<div class="transform transition-transform duration-500 card-hover floating" style="transform: perspective(1000px) rotateY(0deg) rotateX(0deg);">
<div class="relative">
<div class="rounded-xl overflow-hidden h-40">
<img src="https://i.postimg.cc/MTQFQdpj/temp-Image-ONx-Xwu.avif" class="w-full h-full object-cover">
<div class="absolute inset-0 bg-gradient-to-t from-black to-transparent"></div>
<div class="absolute top-2 left-2 bg-niopurple rounded-full px-2 py-0.5 text-xs">
New
</div>
</div>
<div class="absolute bottom-0 left-0 right-0 p-3">
<h4 class="font-bold text-sm mb-1">Fortune Tiger</h4>
<div class="flex justify-between items-center">
<div class="text-xs">
<i class="fas fa-star text-amber-300"></i> 4.9
</div>
<button class="px-3 py-1 glass-panel text-xs rounded-full font-semibold glow-text hover:shadow-glow transition-all duration-300 flex items-center justify-center">
<span class="relative z-10">PLAY</span>
<div class="absolute inset-0 rounded-full bg-gradient-to-r from-niogold/80 to-black-100/80 opacity-70 hover:opacity-100 transition-opacity duration-300"></div>
</button>
</div>
</div>
</div>
</div>
<div class="transform transition-transform duration-500 card-hover floating" style="transform: perspective(1000px) rotateY(-5deg) rotateX(5deg);">
<div class="relative">
<div class="rounded-xl overflow-hidden h-40">
<img src="https://i.postimg.cc/MTQFQdpj/temp-Image-ONx-Xwu.avif" class="w-full h-full object-cover">
<div class="absolute inset-0 bg-gradient-to-t from-black to-transparent"></div>
</div>
<div class="absolute bottom-0 left-0 right-0 p-3">
<h4 class="font-bold text-sm mb-1">Pirates Plenty: Battle</h4>
<div class="flex justify-between items-center">
<div class="text-xs">
<i class="fas fa-star text-amber-300"></i> 4.7
</div>
<button class="px-3 py-1 glass-panel text-xs rounded-full font-semibold glow-text hover:shadow-glow transition-all duration-300 flex items-center justify-center">
<span class="relative z-10">PLAY</span>
<div class="absolute inset-0 rounded-full bg-gradient-to-r from-niogold/80 to-black-100/80 opacity-70 hover:opacity-100 transition-opacity duration-300"></div>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Popular Slots -->
<div class="glass-panel p-4 rounded-xl mb-6">
<h3 class="font-bold text-xl mb-4">Popular Slots</h3>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<div class="relative card-hover floating">
<div class="relative">
<div class="rounded-xl overflow-hidden h-40">
<img src="https://i.postimg.cc/MTQFQdpj/temp-Image-ONx-Xwu.avif" class="w-full h-full object-cover">
<div class="absolute inset-0 bg-gradient-to-t from-black to-transparent"></div>
</div>
<div class="absolute bottom-0 left-0 right-0 p-3">
<h4 class="font-bold text-sm mb-1">Sweet Bonanza</h4>
<div class="flex justify-between items-center">
<div class="text-xs">
<i class="fas fa-star text-amber-300"></i> 4.9
</div>
<button class="px-3 py-1 glass-panel text-xs rounded-full font-semibold glow-text hover:shadow-glow transition-all duration-300 flex items-center justify-center">
<span class="relative z-10">PLAY</span>
<div class="absolute inset-0 rounded-full bg-gradient-to-r from-niogold/80 to-black-100/80 opacity-70 hover:opacity-100 transition-opacity duration-300"></div>
</button>
</div>
</div>
</div>
</div>
<div class="relative card-hover floating">
<div class="relative">
<div class="rounded-xl overflow-hidden h-40">
<img src="https://i.postimg.cc/MTQFQdpj/temp-Image-ONx-Xwu.avif" class="w-full h-full object-cover">
<div class="absolute inset-0 bg-gradient-to-t from-black to-transparent"></div>
</div>
<div class="absolute bottom-0 left-0 right-0 p-3">
<h4 class="font-bold text-sm mb-1">Gates of Olympus</h4>
<div class="flex justify-between items-center">
<div class="text-xs">
<i class="fas fa-star text-amber-300"></i> 4.8
</div>
<button class="px-3 py-1 glass-panel text-xs rounded-full font-semibold glow-text hover:shadow-glow transition-all duration-300 flex items-center justify-center">
<span class="relative z-10">PLAY</span>
<div class="absolute inset-0 rounded-full bg-gradient-to-r from-niogold/80 to-black-100/80 opacity-70 hover:opacity-100 transition-opacity duration-300"></div>
</button>
</div>
</div>
</div>
</div>
<div class="relative card-hover floating">
<div class="relative">
<div class="rounded-xl overflow-hidden h-40">
<img src="https://i.postimg.cc/MTQFQdpj/temp-Image-ONx-Xwu.avif" class="w-full h-full object-cover">
<div class="absolute inset-0 bg-gradient-to-t from-black to-transparent"></div>
</div>
<div class="absolute bottom-0 left-0 right-0 p-3">
<h4 class="font-bold text-sm mb-1">Big Bass Bonanza</h4>
<div class="flex justify-between items-center">
<div class="text-xs">
<i class="fas fa-star text-amber-300"></i> 4.7
</div>
<button class="px-3 py-1 glass-panel text-xs rounded-full font-semibold glow-text hover:shadow-glow transition-all duration-300 flex items-center justify-center">
<span class="relative z-10">PLAY</span>
<div class="absolute inset-0 rounded-full bg-gradient-to-r from-niogold/80 to-black-100/80 opacity-70 hover:opacity-100 transition-opacity duration-300"></div>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- New Releases -->
<div class="glass-panel p-4 rounded-xl mb-6">
<h3 class="font-bold text-xl mb-4">New Releases</h3>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<div class="relative card-hover floating">
<div class="relative">
<div class="rounded-xl overflow-hidden h-40">
<img src="https://i.postimg.cc/MTQFQdpj/temp-Image-ONx-Xwu.avif" class="w-full h-full object-cover">
<div class="absolute inset-0 bg-gradient-to-t from-black to-transparent"></div>
<div class="absolute top-2 left-2 bg-niopurple rounded-full px-2 py-0.5 text-xs">
New
</div>
</div>
<div class="absolute bottom-0 left-0 right-0 p-3">
<h4 class="font-bold text-sm mb-1">Lucky Diamond</h4>
<div class="flex justify-between items-center">
<div class="text-xs">
<i class="fas fa-star text-amber-300"></i> 4.6
</div>
<button class="px-3 py-1 glass-panel text-xs rounded-full font-semibold glow-text hover:shadow-glow transition-all duration-300 flex items-center justify-center">
<span class="relative z-10">PLAY</span>
<div class="absolute inset-0 rounded-full bg-gradient-to-r from-niogold/80 to-black-100/80 opacity-70 hover:opacity-100 transition-opacity duration-300"></div>
</button>
</div>
</div>
</div>
</div>
<div class="relative card-hover floating">
<div class="relative">
<div class="rounded-xl overflow-hidden h-40">
<img src="https://i.postimg.cc/MTQFQdpj/temp-Image-ONx-Xwu.avif" class="w-full h-full object-cover">
<div class="absolute inset-0 bg-gradient-to-t from-black to-transparent"></div>
<div class="absolute top-2 left-2 bg-niopurple rounded-full px-2 py-0.5 text-xs">
New
</div>
</div>
<div class="absolute bottom-0 left-0 right-0 p-3">
<h4 class="font-bold text-sm mb-1">Egyptian Riches</h4>
<div class="flex justify-between items-center">
<div class="text-xs">
<i class="fas fa-star text-amber-300"></i> 4.5
</div>
<button class="px-3 py-1 glass-panel text-xs rounded-full font-semibold glow-text hover:shadow-glow transition-all duration-300 flex items-center justify-center">
<span class="relative z-10">PLAY</span>
<div class="absolute inset-0 rounded-full bg-gradient-to-r from-niogold/80 to-black-100/80 opacity-70 hover:opacity-100 transition-opacity duration-300"></div>
</button>
</div>
</div>
</div>
</div>
<div class="relative card-hover floating">
<div class="relative">
<div class="rounded-xl overflow-hidden h-40">
<img src="https://i.postimg.cc/MTQFQdpj/temp-Image-ONx-Xwu.avif" class="w-full h-full object-cover">
<div class="absolute inset-0 bg-gradient-to-t from-black to-transparent"></div>
<div class="absolute top-2 left-2 bg-niopurple rounded-full px-2 py-0.5 text-xs">
New
</div>
</div>
<div class="absolute bottom-0 left-0 right-0 p-3">
<h4 class="font-bold text-sm mb-1">Wolf Fortune</h4>
<div class="flex justify-between items-center">
<div class="text-xs">
<i class="fas fa-star text-amber-300"></i> 4.8
</div>
<button class="px-3 py-1 glass-panel text-xs rounded-full font-semibold glow-text hover:shadow-glow transition-all duration-300 flex items-center justify-center">
<span class="relative z-10">PLAY</span>
<div class="absolute inset-0 rounded-full bg-gradient-to-r from-niogold/80 to-black-100/80 opacity-70 hover:opacity-100 transition-opacity duration-300"></div>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
<footer class="fixed bottom-0 left-0 right-0 z-50 glass-panel py-3 px-4 flex justify-between">
<div class="flex">
<i class="fas fa-info-circle mr-3 text-gray-400"></i>
<i class="fas fa-history mr-3 text-gray-400"></i>
<i class="fas fa-cog text-gray-400"></i>
</div>
<div class="flex">
<div class="w-4 h-4 bg-gradient-to-r from-niogold to-amber-100 rounded-full flex items-center justify-center mr-2">
<div class="w-2 h-2 bg-black rounded-full animate-pulse"></div>
</div>
<span class="text-xs">Connected</span>
</div>
</footer>
<script>
// Initialize
document.addEventListener('DOMContentLoaded', () => {
// Category buttons interaction
const categoryButtons = document.querySelectorAll('.category-btn');
categoryButtons.forEach(button => {
button.addEventListener('click', () => {
categoryButtons.forEach(btn => btn.classList.remove('active'));
button.classList.add('active');
});
});
// Simulate game hover effects
const gameCards = document.querySelectorAll('.card-hover');
gameCards.forEach(card => {
card.addEventListener('mouseenter', () => {
card.style.transform = 'translateY(-5px)';
});
card.addEventListener('mouseleave', () => {
card.style.transform = '';
});
});
});
</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/new-ui-1" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>