Spaces:
Running
Running
make a fake gambling site with hundreds of gambling games with a slick ui and fake money - Initial Deployment
c1c34ea verified | <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>LuckySpin Casino - Play for Fun!</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&display=swap'); | |
| body { | |
| font-family: 'Montserrat', sans-serif; | |
| background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%); | |
| min-height: 100vh; | |
| color: white; | |
| } | |
| .game-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3); | |
| } | |
| .blinking { | |
| animation: blink 1.5s infinite; | |
| } | |
| @keyframes blink { | |
| 0% { opacity: 1; } | |
| 50% { opacity: 0.5; } | |
| 100% { opacity: 1; } | |
| } | |
| .jackpot-counter { | |
| background: linear-gradient(90deg, #f5af19, #f12711); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| color: transparent; | |
| } | |
| .category-btn.active { | |
| background-color: #3b82f6; | |
| color: white; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-900"> | |
| <!-- Top Navigation Bar --> | |
| <nav class="bg-gray-800 shadow-lg"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex items-center justify-between h-16"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0"> | |
| <span class="text-2xl font-bold text-blue-400">Lucky<span class="text-yellow-400">Spin</span></span> | |
| </div> | |
| <div class="hidden md:block"> | |
| <div class="ml-10 flex items-baseline space-x-4"> | |
| <a href="#" class="px-3 py-2 rounded-md text-sm font-medium text-white bg-blue-600">Home</a> | |
| <a href="#" class="px-3 py-2 rounded-md text-sm font-medium text-gray-300 hover:text-white">Games</a> | |
| <a href="#" class="px-3 py-2 rounded-md text-sm font-medium text-gray-300 hover:text-white">Promotions</a> | |
| <a href="#" class="px-3 py-2 rounded-md text-sm font-medium text-gray-300 hover:text-white">VIP</a> | |
| <a href="#" class="px-3 py-2 rounded-md text-sm font-medium text-gray-300 hover:text-white">Support</a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="hidden md:block"> | |
| <div class="ml-4 flex items-center md:ml-6"> | |
| <div class="mr-4 bg-gray-700 px-3 py-1 rounded-full"> | |
| <span class="text-yellow-400 font-bold">$</span> | |
| <span id="balance" class="font-bold">10,000.00</span> | |
| </div> | |
| <button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md text-sm font-medium"> | |
| <i class="fas fa-coins mr-1"></i> Deposit | |
| </button> | |
| <div class="ml-3 relative"> | |
| <div> | |
| <button class="max-w-xs flex items-center text-sm rounded-full focus:outline-none" id="user-menu"> | |
| <img class="h-8 w-8 rounded-full" src="https://ui-avatars.com/api/?name=Player&background=3b82f6&color=fff" alt=""> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="-mr-2 flex md:hidden"> | |
| <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none" aria-controls="mobile-menu" aria-expanded="false"> | |
| <span class="sr-only">Open main menu</span> | |
| <svg class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" /> | |
| </svg> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <div class="relative overflow-hidden"> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="relative z-10 pb-8 sm:pb-16 md:pb-20 lg:max-w-2xl lg:w-full lg:pb-28 xl:pb-32"> | |
| <div class="pt-10 sm:pt-16 lg:pt-8 lg:pb-14 lg:overflow-hidden"> | |
| <div class="mt-10 mx-auto max-w-7xl px-4 sm:mt-12 sm:px-6 md:mt-16 lg:mt-20 lg:px-8 xl:mt-28"> | |
| <div class="sm:text-center lg:text-left"> | |
| <h1 class="text-4xl tracking-tight font-extrabold text-white sm:text-5xl md:text-6xl"> | |
| <span class="block">Play & Win Big at</span> | |
| <span class="block text-blue-400">LuckySpin Casino</span> | |
| </h1> | |
| <p class="mt-3 text-base text-gray-300 sm:mt-5 sm:text-lg sm:max-w-xl sm:mx-auto md:mt-5 md:text-xl lg:mx-0"> | |
| The ultimate gaming experience with over 500+ games and massive jackpots! | |
| </p> | |
| <div class="mt-5 sm:mt-8 sm:flex sm:justify-center lg:justify-start"> | |
| <div class="rounded-md shadow"> | |
| <a href="#" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 md:py-4 md:text-lg md:px-10"> | |
| <i class="fas fa-play mr-2"></i> Play Now | |
| </a> | |
| </div> | |
| <div class="mt-3 sm:mt-0 sm:ml-3"> | |
| <a href="#" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-blue-600 bg-white hover:bg-gray-100 md:py-4 md:text-lg md:px-10"> | |
| <i class="fas fa-gift mr-2"></i> Get Bonus | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="lg:absolute lg:inset-y-0 lg:right-0 lg:w-1/2"> | |
| <div class="h-56 w-full sm:h-72 md:h-96 lg:w-full lg:h-full"> | |
| <div class="absolute inset-0 flex items-center justify-center"> | |
| <div class="relative w-64 h-64 sm:w-80 sm:h-80 md:w-96 md:h-96"> | |
| <div class="absolute inset-0 rounded-full bg-blue-500 opacity-20 animate-ping"></div> | |
| <div class="absolute inset-4 rounded-full bg-blue-600 opacity-30 animate-pulse"></div> | |
| <div class="absolute inset-8 rounded-full bg-blue-700 flex items-center justify-center"> | |
| <div class="text-center"> | |
| <div class="text-4xl font-bold text-white mb-2">$<span class="jackpot-counter">12,459,732</span></div> | |
| <div class="text-white uppercase text-sm">Current Jackpot</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Featured Games --> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12"> | |
| <div class="flex justify-between items-center mb-8"> | |
| <h2 class="text-2xl font-bold text-white">Featured Games</h2> | |
| <a href="#" class="text-blue-400 hover:text-blue-300 flex items-center"> | |
| View All <i class="fas fa-chevron-right ml-1"></i> | |
| </a> | |
| </div> | |
| <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6"> | |
| <!-- Game Card 1 --> | |
| <div class="game-card bg-gray-800 rounded-lg overflow-hidden shadow-lg transition duration-300 cursor-pointer"> | |
| <div class="relative"> | |
| <img src="https://via.placeholder.com/300x200/3b82f6/ffffff?text=Mega+Slot" alt="Mega Slot" class="w-full h-48 object-cover"> | |
| <div class="absolute top-2 right-2 bg-yellow-500 text-xs font-bold px-2 py-1 rounded-full">NEW</div> | |
| <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-4"> | |
| <h3 class="text-white font-bold text-lg">Mega Slot</h3> | |
| <div class="flex items-center text-yellow-400 text-sm"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star-half-alt"></i> | |
| <span class="text-gray-300 ml-1">(4.7)</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-green-400 text-sm font-bold">$1 - $5000</span> | |
| <button class="bg-blue-600 hover:bg-blue-700 text-white px-3 py-1 rounded text-sm"> | |
| <i class="fas fa-play mr-1"></i> Play | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Game Card 2 --> | |
| <div class="game-card bg-gray-800 rounded-lg overflow-hidden shadow-lg transition duration-300 cursor-pointer"> | |
| <div class="relative"> | |
| <img src="https://via.placeholder.com/300x200/ef4444/ffffff?text=Roulette+Pro" alt="Roulette Pro" class="w-full h-48 object-cover"> | |
| <div class="absolute top-2 right-2 bg-red-500 text-xs font-bold px-2 py-1 rounded-full">HOT</div> | |
| <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-4"> | |
| <h3 class="text-white font-bold text-lg">Roulette Pro</h3> | |
| <div class="flex items-center text-yellow-400 text-sm"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <span class="text-gray-300 ml-1">(5.0)</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-green-400 text-sm font-bold">$5 - $10,000</span> | |
| <button class="bg-blue-600 hover:bg-blue-700 text-white px-3 py-1 rounded text-sm"> | |
| <i class="fas fa-play mr-1"></i> Play | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Game Card 3 --> | |
| <div class="game-card bg-gray-800 rounded-lg overflow-hidden shadow-lg transition duration-300 cursor-pointer"> | |
| <div class="relative"> | |
| <img src="https://via.placeholder.com/300x200/10b981/ffffff?text=Blackjack+21" alt="Blackjack 21" class="w-full h-48 object-cover"> | |
| <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-4"> | |
| <h3 class="text-white font-bold text-lg">Blackjack 21</h3> | |
| <div class="flex items-center text-yellow-400 text-sm"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="far fa-star"></i> | |
| <span class="text-gray-300 ml-1">(4.2)</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-green-400 text-sm font-bold">$10 - $20,000</span> | |
| <button class="bg-blue-600 hover:bg-blue-700 text-white px-3 py-1 rounded text-sm"> | |
| <i class="fas fa-play mr-1"></i> Play | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Game Card 4 --> | |
| <div class="game-card bg-gray-800 rounded-lg overflow-hidden shadow-lg transition duration-300 cursor-pointer"> | |
| <div class="relative"> | |
| <img src="https://via.placeholder.com/300x200/8b5cf6/ffffff?text=Poker+Stars" alt="Poker Stars" class="w-full h-48 object-cover"> | |
| <div class="absolute top-2 right-2 bg-purple-500 text-xs font-bold px-2 py-1 rounded-full">VIP</div> | |
| <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-4"> | |
| <h3 class="text-white font-bold text-lg">Poker Stars</h3> | |
| <div class="flex items-center text-yellow-400 text-sm"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star-half-alt"></i> | |
| <span class="text-gray-300 ml-1">(4.6)</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-green-400 text-sm font-bold">$50 - $50,000</span> | |
| <button class="bg-blue-600 hover:bg-blue-700 text-white px-3 py-1 rounded text-sm"> | |
| <i class="fas fa-play mr-1"></i> Play | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Game Categories --> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12 bg-gray-800 rounded-lg"> | |
| <h2 class="text-2xl font-bold text-white mb-8">Game Categories</h2> | |
| <div class="flex flex-wrap gap-3 mb-8"> | |
| <button class="category-btn active px-4 py-2 rounded-full bg-gray-700 text-white text-sm font-medium">All Games</button> | |
| <button class="category-btn px-4 py-2 rounded-full bg-gray-700 text-white text-sm font-medium">Slots</button> | |
| <button class="category-btn px-4 py-2 rounded-full bg-gray-700 text-white text-sm font-medium">Table Games</button> | |
| <button class="category-btn px-4 py-2 rounded-full bg-gray-700 text-white text-sm font-medium">Live Casino</button> | |
| <button class="category-btn px-4 py-2 rounded-full bg-gray-700 text-white text-sm font-medium">Jackpots</button> | |
| <button class="category-btn px-4 py-2 rounded-full bg-gray-700 text-white text-sm font-medium">Popular</button> | |
| <button class="category-btn px-4 py-2 rounded-full bg-gray-700 text-white text-sm font-medium">New Releases</button> | |
| </div> | |
| <!-- Search and Filter --> | |
| <div class="mb-8 flex flex-col md:flex-row gap-4"> | |
| <div class="relative flex-grow"> | |
| <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"> | |
| <i class="fas fa-search text-gray-400"></i> | |
| </div> | |
| <input type="text" class="block w-full pl-10 pr-3 py-2 border border-gray-600 rounded-md bg-gray-700 text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="Search games..."> | |
| </div> | |
| <select class="bg-gray-700 border border-gray-600 text-white text-sm rounded-md focus:ring-blue-500 focus:border-blue-500 block w-full md:w-auto p-2"> | |
| <option selected>Sort by: Popular</option> | |
| <option>Sort by: Newest</option> | |
| <option>Sort by: A-Z</option> | |
| <option>Sort by: Highest RTP</option> | |
| </select> | |
| </div> | |
| <!-- All Games Grid --> | |
| <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-4"> | |
| <!-- This will be populated with JavaScript --> | |
| </div> | |
| <div class="mt-8 flex justify-center"> | |
| <button class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-md font-medium"> | |
| Load More Games | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Promotions Banner --> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12"> | |
| <div class="bg-gradient-to-r from-blue-600 to-purple-600 rounded-xl overflow-hidden shadow-xl"> | |
| <div class="md:flex"> | |
| <div class="md:flex-shrink-0"> | |
| <img class="h-48 w-full object-cover md:h-full md:w-48" src="https://via.placeholder.com/300x200/3b82f6/ffffff?text=Welcome+Bonus" alt="Welcome Bonus"> | |
| </div> | |
| <div class="p-8"> | |
| <div class="uppercase tracking-wide text-sm text-blue-200 font-semibold">Limited Time Offer</div> | |
| <h3 class="mt-2 text-2xl font-extrabold text-white">Get 100% Bonus Up To $1000 + 100 Free Spins!</h3> | |
| <p class="mt-3 text-blue-100">New players only. Min deposit $20. Wagering requirements apply.</p> | |
| <div class="mt-6"> | |
| <button class="bg-white text-blue-600 hover:bg-gray-100 px-6 py-3 rounded-md font-bold"> | |
| Claim Bonus Now | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Live Casino Section --> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12"> | |
| <div class="flex justify-between items-center mb-8"> | |
| <h2 class="text-2xl font-bold text-white">Live Casino</h2> | |
| <a href="#" class="text-blue-400 hover:text-blue-300 flex items-center"> | |
| View All <i class="fas fa-chevron-right ml-1"></i> | |
| </a> | |
| </div> | |
| <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6"> | |
| <!-- Live Game 1 --> | |
| <div class="game-card bg-gray-800 rounded-lg overflow-hidden shadow-lg transition duration-300 cursor-pointer"> | |
| <div class="relative"> | |
| <img src="https://via.placeholder.com/400x250/ef4444/ffffff?text=Live+Roulette" alt="Live Roulette" class="w-full h-48 object-cover"> | |
| <div class="absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center"> | |
| <div class="bg-red-500 text-white px-2 py-1 rounded-full text-xs font-bold flex items-center"> | |
| <div class="w-2 h-2 bg-white rounded-full mr-1 blinking"></div> | |
| LIVE | |
| </div> | |
| </div> | |
| <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-4"> | |
| <h3 class="text-white font-bold">Live Roulette</h3> | |
| <div class="text-gray-300 text-sm">With dealer: <span class="text-blue-300">Anna</span></div> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-green-400 text-sm font-bold">$5 - $10,000</span> | |
| <span class="text-gray-400 text-sm">12 players</span> | |
| </div> | |
| <button class="mt-3 w-full bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded text-sm font-medium"> | |
| <i class="fas fa-play mr-1"></i> Join Now | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Live Game 2 --> | |
| <div class="game-card bg-gray-800 rounded-lg overflow-hidden shadow-lg transition duration-300 cursor-pointer"> | |
| <div class="relative"> | |
| <img src="https://via.placeholder.com/400x250/10b981/ffffff?text=Live+Blackjack" alt="Live Blackjack" class="w-full h-48 object-cover"> | |
| <div class="absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center"> | |
| <div class="bg-red-500 text-white px-2 py-1 rounded-full text-xs font-bold flex items-center"> | |
| <div class="w-2 h-2 bg-white rounded-full mr-1 blinking"></div> | |
| LIVE | |
| </div> | |
| </div> | |
| <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-4"> | |
| <h3 class="text-white font-bold">Live Blackjack</h3> | |
| <div class="text-gray-300 text-sm">With dealer: <span class="text-blue-300">Michael</span></div> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-green-400 text-sm font-bold">$10 - $5,000</span> | |
| <span class="text-gray-400 text-sm">8 players</span> | |
| </div> | |
| <button class="mt-3 w-full bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded text-sm font-medium"> | |
| <i class="fas fa-play mr-1"></i> Join Now | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Live Game 3 --> | |
| <div class="game-card bg-gray-800 rounded-lg overflow-hidden shadow-lg transition duration-300 cursor-pointer"> | |
| <div class="relative"> | |
| <img src="https://via.placeholder.com/400x250/8b5cf6/ffffff?text=Live+Baccarat" alt="Live Baccarat" class="w-full h-48 object-cover"> | |
| <div class="absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center"> | |
| <div class="bg-red-500 text-white px-2 py-1 rounded-full text-xs font-bold flex items-center"> | |
| <div class="w-2 h-2 bg-white rounded-full mr-1 blinking"></div> | |
| LIVE | |
| </div> | |
| </div> | |
| <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-4"> | |
| <h3 class="text-white font-bold">Live Baccarat</h3> | |
| <div class="text-gray-300 text-sm">With dealer: <span class="text-blue-300">Sophia</span></div> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-green-400 text-sm font-bold">$20 - $50,000</span> | |
| <span class="text-gray-400 text-sm">5 players</span> | |
| </div> | |
| <button class="mt-3 w-full bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded text-sm font-medium"> | |
| <i class="fas fa-play mr-1"></i> Join Now | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Footer --> | |
| <footer class="bg-gray-800"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> | |
| <div> | |
| <h3 class="text-white font-bold text-lg mb-4">LuckySpin Casino</h3> | |
| <p class="text-gray-400 text-sm"> | |
| The ultimate gaming experience with hundreds of games, massive jackpots and exciting promotions. | |
| </p> | |
| <div class="mt-4 flex space-x-4"> | |
| <a href="#" class="text-gray-400 hover:text-white"> | |
| <i class="fab fa-facebook-f"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white"> | |
| <i class="fab fa-twitter"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white"> | |
| <i class="fab fa-instagram"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white"> | |
| <i class="fab fa-youtube"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="text-white font-bold text-lg mb-4">Games</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white text-sm">Slots</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white text-sm">Table Games</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white text-sm">Live Casino</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white text-sm">Jackpots</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white text-sm">New Games</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-white font-bold text-lg mb-4">Information</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white text-sm">About Us</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white text-sm">Promotions</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white text-sm">VIP Program</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white text-sm">Tournaments</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white text-sm">Blog</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-white font-bold text-lg mb-4">Support</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white text-sm">Help Center</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white text-sm">Contact Us</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white text-sm">FAQ</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white text-sm">Responsible Gaming</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white text-sm">Terms & Conditions</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="mt-12 pt-8 border-t border-gray-700"> | |
| <div class="flex flex-col md:flex-row justify-between items-center"> | |
| <div class="flex space-x-6"> | |
| <img src="https://via.placeholder.com/100x40/3b82f6/ffffff?text=Payment+1" alt="Payment Method" class="h-8"> | |
| <img src="https://via.placeholder.com/100x40/ef4444/ffffff?text=Payment+2" alt="Payment Method" class="h-8"> | |
| <img src="https://via.placeholder.com/100x40/10b981/ffffff?text=Payment+3" alt="Payment Method" class="h-8"> | |
| </div> | |
| <div class="mt-4 md:mt-0 text-gray-400 text-sm"> | |
| © 2023 LuckySpin Casino. All rights reserved. | |
| </div> | |
| </div> | |
| <div class="mt-4 text-gray-500 text-xs"> | |
| <p>LuckySpin Casino is for entertainment purposes only. This is a fake gambling site with no real money involved.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <!-- Game Modal --> | |
| <div id="gameModal" class="fixed inset-0 z-50 hidden overflow-y-auto"> | |
| <div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"> | |
| <div class="fixed inset-0 transition-opacity" aria-hidden="true"> | |
| <div class="absolute inset-0 bg-gray-900 opacity-90"></div> | |
| </div> | |
| <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">​</span> | |
| <div class="inline-block align-bottom bg-gray-800 rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-4xl sm:w-full"> | |
| <div class="px-4 pt-5 pb-4 sm:p-6 sm:pb-4"> | |
| <div class="sm:flex sm:items-start"> | |
| <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full"> | |
| <div class="flex justify-between items-start"> | |
| <h3 class="text-2xl leading-6 font-bold text-white" id="modal-title"> | |
| Game Title | |
| </h3> | |
| <button onclick="closeModal()" class="text-gray-400 hover:text-white"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <div class="mt-4"> | |
| <div class="aspect-w-16 aspect-h-9"> | |
| <img id="modalGameImage" src="" alt="Game" class="w-full h-64 object-cover rounded"> | |
| </div> | |
| <div class="mt-4 flex justify-between items-center"> | |
| <div> | |
| <span id="modalGameBet" class="text-green-400 font-bold"></span> | |
| <div class="flex items-center text-yellow-400 text-sm mt-1"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star-half-alt"></i> | |
| <span id="modalGameRating" class="text-gray-300 ml-1"></span> | |
| </div> | |
| </div> | |
| <div class="flex space-x-3"> | |
| <button class="bg-gray-700 hover:bg-gray-600 text-white px-4 py-2 rounded"> | |
| <i class="fas fa-info-circle mr-1"></i> Info | |
| </button> | |
| <button id="playForFunBtn" class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded font-bold"> | |
| <i class="fas fa-play mr-1"></i> Play for Fun | |
| </button> | |
| </div> | |
| </div> | |
| <p id="modalGameDesc" class="mt-4 text-gray-300 text-sm"></p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Game Play Modal --> | |
| <div id="playModal" class="fixed inset-0 z-50 hidden overflow-y-auto bg-gray-900"> | |
| <div class="flex items-center justify-center min-h-screen"> | |
| <div class="relative w-full max-w-4xl bg-gray-800 rounded-lg overflow-hidden shadow-xl"> | |
| <div class="absolute top-4 right-4 z-10"> | |
| <button onclick="closePlayModal()" class="text-white bg-gray-700 hover:bg-gray-600 rounded-full p-2"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <div class="relative pt-16 pb-4 px-4"> | |
| <div class="aspect-w-16 aspect-h-9"> | |
| <div class="bg-gray-700 rounded-lg flex items-center justify-center h-96"> | |
| <div class="text-center"> | |
| <div class="text-4xl font-bold text-blue-400 mb-4">Playing Game...</div> | |
| <div class="text-white">This is a demo version. No real money is involved.</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-6 flex justify-between items-center"> | |
| <div class="bg-gray-700 px-4 py-2 rounded-full"> | |
| <span class="text-yellow-400 font-bold">$</span> | |
| <span id="playBalance" class="font-bold">10,000.00</span> | |
| </div> | |
| <div class="flex space-x-4"> | |
| <button onclick="placeBet(10)" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded font-bold"> | |
| Bet $10 | |
| </button> | |
| <button onclick="placeBet(50)" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded font-bold"> | |
| Bet $50 | |
| </button> | |
| <button onclick="placeBet(100)" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded font-bold"> | |
| Bet $100 | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Game data - this would normally come from an API | |
| const games = [ | |
| { id: 1, name: "Mega Fortune", category: "slots", image: "https://via.placeholder.com/300x200/3b82f6/ffffff?text=Mega+Fortune", bet: "$1 - $5000", rating: 4.5, desc: "Spin the reels of fortune in this exciting slot game with massive jackpots!" }, | |
| { id: 2, name: "European Roulette", category: "table", image: "https://via.placeholder.com/300x200/ef4444/ffffff?text=European+Roulette", bet: "$5 - $10,000", rating: 4.8, desc: "The classic casino game with a single zero for better player odds." }, | |
| { id: 3, name: "Texas Hold'em", category: "poker", image: "https://via.placeholder.com/300x200/10b981/ffffff?text=Texas+Hold'em", bet: "$10 - $20,000", rating: 4.7, desc: "The most popular poker variant. Test your skills against other players." }, | |
| { id: 4, name: "Dragon's Treasure", category: "slots", image: "https://via.placeholder.com/300x200/f59e0b/ffffff?text=Dragon's+Treasure", bet: "$0.50 - $2000", rating: 4.3, desc: "Embark on a mythical journey with dragons and hidden treasures." }, | |
| { id: 5, name: "Baccarat Deluxe", category: "table", image: "https://via.placeholder.com/300x200/8b5cf6/ffffff?text=Baccarat+Deluxe", bet: "$20 - $50,000", rating: 4.6, desc: "The elegant game of baccarat with high stakes and premium experience." }, | |
| { id: 6, name: "Book of Ra", category: "slots", image: "https://via.placeholder.com/300x200/ec4899/ffffff?text=Book+of+Ra", bet: "$1 - $5000", rating: 4.9, desc: "The legendary Egyptian-themed slot with free spins and expanding symbols." }, | |
| { id: 7, name: "Craps", category: "table", image: "https://via.placeholder.com/300x200/14b8a6/ffffff?text=Craps", bet: "$5 - $25,000", rating: 4.2, desc: "The exciting dice game with multiple betting options and high energy." }, | |
| { id: 8, name: "Caribbean Stud", category: "poker", image: "https://via.placeholder.com/300x200/f97316/ffffff?text=Caribbean+Stud", bet: "$5 - $10,000", rating: 4.0, desc: "Poker against the house with progressive jackpot side bets." }, | |
| { id: 9, name: "Starburst", category: "slots", image: "https://via.placeholder.com/300x200/6366f1/ffffff?text=Starburst", bet: "$0.20 - $1000", rating: 4.8, desc: "The cosmic slot with expanding wilds and both-ways wins." }, | |
| { id: 10, name: "Three Card Poker", category: "poker", image: "https://via.placeholder.com/300x200/84cc16/ffffff?text=Three+Card+Poker", bet: "$5 - $5000", rating: 4.1, desc: "Fast-paced poker variant where you play with just three cards." }, | |
| { id: 11, name: "Gonzo's Quest", category: "slots", image: "https://via.placeholder.com/300x200/06b6d4/ffffff?text=Gonzo's+Quest", bet: "$0.30 - $1500", rating: 4.7, desc: "Join Gonzo in his quest for Eldorado with avalanche reels and free falls." }, | |
| { id: 12, name: "Sic Bo", category: "table", image: "https://via.placeholder.com/300x200/f43f5e/ffffff?text=Sic+Bo", bet: "$2 - $10,000", rating: 3.9, desc: "Ancient Chinese dice game with multiple betting options and big wins." }, | |
| { id: 13, name: "Dead or Alive", category: "slots", image: "https://via.placeholder.com/300x200/a855f7/ffffff?text=Dead+or+Alive", bet: "$0.40 - $2000", rating: 4.6, desc: "Wild west themed slot with sticky wilds and high volatility." }, | |
| { id: 14, name: "Pai Gow Poker", category: "poker", image: "https://via.placeholder.com/300x200/22c55e/ffffff?text=Pai+Gow+Poker", bet: "$10 - $10,000", rating: 4.0, desc: "Chinese poker game where you make two hands - one with five cards and one with two." }, | |
| { id: 15, name: "Mega Moolah", category: "slots", image: "https://via.placeholder.com/300x200/eab308/ffffff?text=Mega+Moolah", bet: "$0.25 - $1250", rating: 5.0, desc: "The millionaire-maker slot with progressive jackpots that change lives." }, | |
| { id: 16, name: "Let It Ride", category: "poker", image: "https://via.placeholder.com/300x200/0ea5e9/ffffff?text=Let+It+Ride", bet: "$5 - $5000", rating: 3.8, desc: "Poker game where you can pull back your bets as the hand progresses." }, | |
| { id: 17, name: "Thunderstruck II", category: "slots", image: "https://via.placeholder.com/300x200/d946ef/ffffff?text=Thunderstruck+II", bet: "$0.30 - $1500", rating: 4.4, desc: "Norse mythology themed slot with four different free games features." }, | |
| { id: 18, name: "Casino War", category: "table", image: "https://via.placeholder.com/300x200/10b981/ffffff?text=Casino+War", bet: "$1 - $5000", rating: 3.5, desc: "Simple card game based on the classic children's game War." }, | |
| { id: 19, name: "Immortal Romance", category: "slots", image: "https://via.placeholder.com/300x200/64748b/ffffff?text=Immortal+Romance", bet: "$0.30 - $1500", rating: 4.7, desc: "Vampire-themed slot with a deep storyline and multiple bonus features." }, | |
| { id: 20, name: "Oasis Poker", category: "poker", image: "https://via.placeholder.com/300x200/f97316/ffffff?text=Oasis+Poker", bet: "$5 - $10,000", rating: 4.1, desc: "Poker variant where you can exchange cards for better ones." } | |
| ]; | |
| // Generate more games to reach 100+ | |
| for (let i = 21; i <= 120; i++) { | |
| const categories = ["slots", "table", "poker", "live", "jackpot"]; | |
| const randomCat = categories[Math.floor(Math.random() * categories.length)]; | |
| const names = [ | |
| "Golden", "Diamond", "Lucky", "Fortune", "Wild", "Mystery", "Secret", "Magic", | |
| "Treasure", "Joker", "Ace", "King", "Queen", "Jack", "Pharaoh", "Pirate", | |
| "Viking", "Dragon", "Unicorn", "Wizard", "Ninja", "Samurai", "Zeus", "Thor" | |
| ]; | |
| const types = [ | |
| "Slots", "Roulette", "Blackjack", "Poker", "Baccarat", "Wheel", "Reels", | |
| "Cards", "Dice", "Spins", "Coins", "Gold", "Gems", "Jewels" | |
| ]; | |
| const randomName = names[Math.floor(Math.random() * names.length)] + " " + types[Math.floor(Math.random() * types.length)]; | |
| const randomBet = `$${Math.floor(Math.random() * 10) + 1} - $${(Math.floor(Math.random() * 50) + 5) * 1000}`; | |
| const randomRating = (Math.random() * 1.5 + 3.5).toFixed(1); | |
| games.push({ | |
| id: i, | |
| name: randomName, | |
| category: randomCat, | |
| image: `https://via.placeholder.com/300x200/${Math.floor(Math.random()*16777215).toString(16)}/ffffff?text=${encodeURIComponent(randomName)}`, | |
| bet: randomBet, | |
| rating: parseFloat(randomRating), | |
| desc: `Experience the thrill of ${randomName}, a ${randomCat} game with exciting features and big win potential!` | |
| }); | |
| } | |
| // Initialize the page | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // Populate games grid | |
| const gamesGrid = document.querySelector('.grid-cols-2.sm\\:grid-cols-3.md\\:grid-cols-4.lg\\:grid-cols-5.xl\\:grid-cols-6'); | |
| games.slice(0, 18).forEach(game => { | |
| const gameCard = createGameCard(game); | |
| gamesGrid.appendChild(gameCard); | |
| }); | |
| // Add click event to all game cards | |
| document.querySelectorAll('.game-card').forEach(card => { | |
| card.addEventListener('click', function() { | |
| const gameId = parseInt(this.getAttribute('data-game-id')); | |
| const game = games.find(g => g.id === gameId); | |
| openModal(game); | |
| }); | |
| }); | |
| // Add click event to category buttons | |
| document.querySelectorAll('.category-btn').forEach(btn => { | |
| btn.addEventListener('click', function() { | |
| document.querySelectorAll('.category-btn').forEach(b => b.classList.remove('active')); | |
| this.classList.add('active'); | |
| // In a real app, we would filter games here | |
| }); | |
| }); | |
| // Animate jackpot counter | |
| animateJackpot(); | |
| }); | |
| // Create a game card element | |
| function createGameCard(game) { | |
| const card = document.createElement('div'); | |
| card.className = 'game-card bg-gray-800 rounded-lg overflow-hidden shadow-lg transition duration-300 cursor-pointer'; | |
| card.setAttribute('data-game-id', game.id); | |
| const stars = []; | |
| const fullStars = Math.floor(game.rating); | |
| const hasHalfStar = game.rating % 1 >= 0.5; | |
| for (let i = 0; i < fullStars; i++) { | |
| stars.push('<i class="fas fa-star"></i>'); | |
| } | |
| if (hasHalfStar) { | |
| stars.push('<i class="fas fa-star-half-alt"></i>'); | |
| } | |
| const emptyStars = 5 - stars.length; | |
| for (let i = 0; i < emptyStars; i++) { | |
| stars.push('<i class="far fa-star"></i>'); | |
| } | |
| card.innerHTML = ` | |
| <div class="relative"> | |
| <img src="${game.image}" alt="${game.name}" class="w-full h-32 sm:h-40 object-cover"> | |
| <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-3"> | |
| <h3 class="text-white font-bold text-sm sm:text-base">${game.name}</h3> | |
| <div class="flex items-center text-yellow-400 text-xs sm:text-sm"> | |
| ${stars.join('')} | |
| <span class="text-gray-300 ml-1">(${game.rating})</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p-3"> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-green-400 text-xs sm:text-sm font-bold">${game.bet}</span> | |
| <button class="bg-blue-600 hover:bg-blue-700 text-white px-2 py-1 rounded text-xs sm:text-sm"> | |
| <i class="fas fa-play mr-1"></i> Play | |
| </button> | |
| </div> | |
| </div> | |
| `; | |
| return card; | |
| } | |
| // Open game modal | |
| function openModal(game) { | |
| document.getElementById('modal-title').textContent = game.name; | |
| document.getElementById('modalGameImage').src = game.image; | |
| document.getElementById('modalGameImage').alt = game.name; | |
| document.getElementById('modalGameBet').textContent = game.bet; | |
| document.getElementById('modalGameRating').textContent = `(${game.rating})`; | |
| document.getElementById('modalGameDesc').textContent = game.desc; | |
| // Set up play button | |
| document.getElementById('playForFunBtn').onclick = function() { | |
| closeModal(); | |
| openPlayModal(game); | |
| }; | |
| document.getElementById('gameModal').classList.remove('hidden'); | |
| } | |
| // Close game modal | |
| function closeModal() { | |
| document.getElementById('gameModal').classList.add('hidden'); | |
| } | |
| // Open play modal | |
| function openPlayModal(game) { | |
| document.getElementById('playModal').classList.remove('hidden'); | |
| document.title = `Playing ${game.name} | LuckySpin Casino`; | |
| } | |
| // Close play modal | |
| function closePlayModal() { | |
| document.getElementById('playModal').classList.add('hidden'); | |
| document.title = "LuckySpin Casino - Play for Fun!"; | |
| } | |
| // Place a bet (demo functionality) | |
| function placeBet(amount) { | |
| const balanceElement = document.getElementById('playBalance'); | |
| const mainBalanceElement = document.getElementById('balance'); | |
| let balance = parseFloat(balanceElement.textContent.replace(/,/g, '')); | |
| if (balance >= amount) { | |
| // Deduct bet amount | |
| balance -= amount; | |
| balanceElement.textContent = balance.toLocaleString('en-US', {minimumFractionDigits: 2, maximumFractionDigits: 2}); | |
| mainBalanceElement.textContent = balance.toLocaleString('en-US', {minimumFractionDigits: 2, maximumFractionDigits: 2}); | |
| // Simulate game outcome | |
| setTimeout(() => { | |
| // 45% chance to win, 55% chance to lose | |
| const win = Math.random() < 0.45; | |
| const winAmount = win ? Math.floor(amount * (1 + Math.random() * 5)) : 0; | |
| if (win) { | |
| balance += winAmount; | |
| alert(`You won $${winAmount.toLocaleString()}!`); | |
| } else { | |
| alert(`You lost $${amount}. Try again!`); | |
| } | |
| balanceElement.textContent = balance.toLocaleString('en-US', {minimumFractionDigits: 2, maximumFractionDigits: 2}); | |
| mainBalanceElement.textContent = balance.toLocaleString('en-US', {minimumFractionDigits: 2, maximumFractionDigits: 2}); | |
| }, 1000); | |
| } else { | |
| alert("Not enough balance! Please deposit more funds."); | |
| } | |
| } | |
| // Animate jackpot counter | |
| function animateJackpot() { | |
| const jackpotElement = document.querySelector('.jackpot-counter'); | |
| let jackpot = 12459732; | |
| setInterval(() => { | |
| // Random increase | |
| jackpot += Math.floor(Math.random() * 1000); | |
| jackpotElement.textContent = jackpot.toLocaleString('en-US'); | |
| }, 3000); | |
| } | |
| </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=tyleristrying/fake-gamble" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |