generate mobile first (make sure the mobile page is optimized and the layout makes sense) a neon blue, magenta and black theme (black background) landing page for my sweepstakes social casino name "Royale Casino". Leave a place holder for me to upload a logo wherever applicable. Glass card style for blocks. The top right should have a sign up and login button, use a modern design with creativity and animation. It need to have multiple sections starting with; 1. Create a sticky jackpot counter on top (middle) that gradually increases and is always available when scrolling. Use a modern design with creativity. 2. Introduction section with a trust bar with icons, marquee animation to introduce 12 game providers (with a logo placeholder). Use a modern design with creativity. 3. 3 easy step sign up instruction (horizontal). Use a modern design with creativity. 4. a section for why chose us, Use a modern design with creativity. 5. a grid displaying game thumbnails (marquee animation) 12 on each row and 3 column with rtp and volatility meters when hovered over and a button to view more games. Code in each individual games with an image placeholder, and not copy and paste. 6. additional features at Golden Clovers and promo banner with a promo code field + CTA claim button. Also include a timer counting down how long the promotion last starting at 23:11:09. Use a modern design with creativity. 7. a Trustpilot section for testimonials, Use a modern design with creativity. 8. FAQ section, Use a modern design with creativity. 9. final CTA section displaying a counter to indicate new players joining that gradually increases in value with a CTA button. Use a modern design with creativity. 10. footer with logo place holder, links, and social media buttons like Facebook, instagram, twitter, discord. Also a disclaimer section below the footer. Use a modern design with creativity. All buttons need to have a redirection link to https://nioplay.net , and each section should have a placeholder for a large image. Triple check to make sure you have the correct quantity of content I specified, and ensure the correct marquee animation. Do not be lazy and make sure you code in each individual sections properly and not copy and paste. GAME CARD FLIP ANIMATION <!-- Each game will be a flip card with RTP/volatility info on back --> <div class="aspect-square flip-card"> <div class="h-full w-full flip-card-inner"> <div class="flip-card-front glass-card border border-neongreen"> <div class="h-full flex items-center justify-center"> <div class="bg-gray-700 w-16 h-16 rounded-full"></div> </div> GLOWING ORB EFFECT BACKGROUND <div class="absolute -top-20 -right-20 w-64 h-64 rounded-full bg-neonblue opacity-20 blur-3xl animate-pulse"></div> <div class="absolute -bottom-20 -left-20 w-64 h-64 rounded-full bg-neonpink opacity-20 blur-3xl animate-pulse"></div> FLOATING CLOVERS <div class="clover" style="top: 20px; left: 5%;">🍀</div> <div class="clover" style="top: 60px; right: 8%;">🍀</div> <div class="clover" style="bottom: 40px; left: 12%;">🍀</div> <div class="clover" style="bottom: 20px; right: 15%;">🍀</div> FAQ ACCORDION // FAQ accordion const faqItems = document.querySelectorAll('.faq-item'); faqItems.forEach(item => { const question = item.querySelector('.faq-question'); const icon = question.querySelector('i'); question.addEventListener('click', () => { const isActive = item.classList.contains('active'); // Close all items first faqItems.forEach(faq => { faq.classList.remove('active'); faq.querySelector('i').className = 'fa-solid fa-plus text-neonBlue'; }); // Toggle current item if wasn't active if(!isActive) { item.classList.add('active'); icon.className = 'fa-solid fa-minus text-neonBlue'; } }); }); // Smooth scrolling for anchor links document.querySelectorAll('a[href^="#"]').forEach(anchor => { anchor.addEventListener('click', function (e) { e.preventDefault(); document.querySelector(this.getAttribute('href')).scrollIntoView({ behavior: 'smooth' }); FAQ SECTION CODE <!-- FAQ --> <section class="py-16"> <div class="max-w-5xl mx-auto px-4"> <h2 class="text-3xl font-bold text-center mb-16"> Frequently <span class="text-transparent bg-clip-text bg-gradient-to-r from-neonBlue to-neonMagenta">Asked Questions</span> </h2> <div class="glass-card rounded-2xl overflow-hidden"> <div class="faq-item"> <div class="faq-question p-6 flex justify-between items-center cursor-pointer border-b border-neonBlue/20"> <h3 class="text-lg font-bold">How do I get started at Royale Casino?</h3> <i class="fa-solid fa-plus text-neonBlue"></i> </div> <div class="faq-answer"> <div class="p-6 pt-0"> <p class="text-gray-300"> Getting started is simple! Just click the 'Sign Up' button at the top right, fill in your details, and verify your email. You'll get 10,000 free coins instantly to start playing. </p> </div> </div> </div> <div class="faq-item"> <div class="faq-question p-6 flex justify-between items-center cursor-pointer border-b border-neonBlue/20"> <h3 class="text-lg font-bold">Is Royale Casino free to play?</h3> <i class="fa-solid fa-plus text-neonBlue"></i> </div> <div class="faq-answer"> <div class="p-6 pt-0"> <p class="text-gray-300"> Yes! Royale Casino is a sweepstakes social casino where you play for fun with virtual coins. We offer multiple ways to get free coins daily without spending any money. </p> </div> </div> </div> <div class="faq-item"> <div class="faq-question p-6 flex justify-between items-center cursor-pointer border-b border-neonBlue/20"> <h3 class="text-lg font-bold">Can I win real prizes?</h3> <i class="fa-solid fa-plus text-neonBlue"></i> </div> <div class="faq-answer"> <div class="p-6 pt-0"> <p class="text-gray-300"> Absolutely! While we focus on social gaming, we frequently run sweepstakes events where players can win real cash prizes, gift cards, and other exciting rewards. </p> </div> </div> </div> <div class="faq-item"> <div class="faq-question p-6 flex justify-between items-center cursor-pointer border-b border-neonBlue/20"> <h3 class="text-lg font-bold">How do I claim my daily free coins?</h3> <i class="fa-solid fa-plus text-neonBlue"></i> </div> <div class="faq-answer"> <div class="p-6 pt-0"> <p class="text-gray-300"> Simply log in to your account every 24 hours and visit the 'Promotions' page. You'll see your daily free coins waiting to be claimed, with bigger bonuses for consecutive days! </p> </div> </div> </div> <div class="faq-item"> <div class="faq-question p-6 flex justify-between items-center cursor-pointer"> <h3 class="text-lg font-bold">What makes Royale Casino different from others?</h3> <i class="fa-solid fa-plus text-neonBlue"></i> </div> <div class="faq-answer"> <div class="p-6 pt-0"> <p class="text-gray-300"> We pride ourselves on premium graphics, smooth gameplay, and generous rewards. Our unique sweepstakes model gives everyone a chance at real prizes without risking real money. </p> </div> </div> </div> </div> </div> </section> DOWNLOAD OUR APP <div> <h3 class="text-lg font-bold mb-6 text-neonBlue">Download Our App</h3> <p class="text-gray-400 mb-6"> Take Royale Casino with you wherever you go! </p> <div class="flex flex-col space-y-4"> <a href="https://nioplay.net" class="bg-black/30 border border-gray-700 rounded-xl py-3 px-6 flex items-center hover:bg-neonBlue/10 transition"> <i class="fab fa-apple text-3xl mr-3"></i> <div> <div class="text-xs">Download on the</div> <div class="font-bold">App Store</div> </div> </a> <a href="https://nioplay.net" class="bg-black/30 border border-gray-700 rounded-xl py-3 px-6 flex items-center hover:bg-neonBlue/10 transition"> <i class="fab fa-google-play text-2xl mr-3"></i> <div> <div class="text-xs">Get it on</div> <div class="font-bold">Google Play</div> </div> - Initial Deployment
0504ebb
verified
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Royale Casino - Social Sweepstakes Casino</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: { | |
| neonBlue: '#00f2ff', | |
| neonMagenta: '#ff00ff', | |
| neonGreen: '#00ff7f', | |
| darkBg: '#0a0a0f', | |
| }, | |
| animation: { | |
| 'marquee': 'marquee 30s linear infinite', | |
| 'marquee-reverse': 'marquee-reverse 30s linear infinite', | |
| 'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite', | |
| 'float': 'float 6s ease-in-out infinite', | |
| 'float2': 'float 8s ease-in-out infinite', | |
| 'float3': 'float 10s ease-in-out infinite', | |
| }, | |
| keyframes: { | |
| marquee: { | |
| '0%': { transform: 'translateX(0%)' }, | |
| '100%': { transform: 'translateX(-100%)' }, | |
| }, | |
| 'marquee-reverse': { | |
| '0%': { transform: 'translateX(-100%)' }, | |
| '100%': { transform: 'translateX(0%)' }, | |
| }, | |
| float: { | |
| '0%, 100%': { transform: 'translateY(0)' }, | |
| '50%': { transform: 'translateY(-20px)' }, | |
| }, | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700;800;900&family=Poppins:wght@300;400;500;600;700;800&display=swap'); | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| font-family: 'Poppins', sans-serif; | |
| background-color: #0a0a0f; | |
| color: #fff; | |
| overflow-x: hidden; | |
| position: relative; | |
| } | |
| h1, h2, h3, h4, h5 { | |
| font-family: 'Orbitron', sans-serif; | |
| } | |
| .glass-card { | |
| background: rgba(20, 20, 30, 0.5); | |
| backdrop-filter: blur(12px); | |
| -webkit-backdrop-filter: blur(12px); | |
| border: 1px solid rgba(0, 242, 255, 0.2); | |
| box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2); | |
| } | |
| .neon-text { | |
| text-shadow: 0 0 10px rgba(0, 242, 255, 0.7), 0 0 20px rgba(0, 242, 255, 0.5); | |
| } | |
| .magenta-text { | |
| text-shadow: 0 0 10px rgba(255, 0, 255, 0.7), 0 0 20px rgba(255, 0, 255, 0.5); | |
| } | |
| .jackpot-counter { | |
| font-family: 'Orbitron', sans-serif; | |
| text-shadow: 0 0 10px rgba(0, 242, 255, 0.8), 0 0 20px rgba(0, 242, 255, 0.6); | |
| letter-spacing: 2px; | |
| } | |
| .trust-bar { | |
| background: linear-gradient(90deg, rgba(0, 242, 255, 0.1) 0%, rgba(255, 0, 255, 0.1) 100%); | |
| } | |
| .step-card:hover { | |
| transform: translateY(-10px); | |
| box-shadow: 0 15px 30px rgba(0, 242, 255, 0.3); | |
| } | |
| .flip-card { | |
| perspective: 1000px; | |
| height: 200px; | |
| } | |
| .flip-card-inner { | |
| position: relative; | |
| width: 100%; | |
| height: 100%; | |
| text-align: center; | |
| transition: transform 0.6s; | |
| transform-style: preserve-3d; | |
| } | |
| .flip-card:hover .flip-card-inner { | |
| transform: rotateY(180deg); | |
| } | |
| .flip-card-front, .flip-card-back { | |
| position: absolute; | |
| width: 100%; | |
| height: 100%; | |
| -webkit-backface-visibility: hidden; | |
| backface-visibility: hidden; | |
| border-radius: 12px; | |
| overflow: hidden; | |
| } | |
| .flip-card-back { | |
| transform: rotateY(180deg); | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: center; | |
| padding: 20px; | |
| } | |
| .rtp-meter { | |
| height: 8px; | |
| background: rgba(255, 255, 255, 0.1); | |
| border-radius: 4px; | |
| overflow: hidden; | |
| } | |
| .rtp-fill { | |
| height: 100%; | |
| background: linear-gradient(90deg, #00f2ff, #ff00ff); | |
| } | |
| .volatility-meter { | |
| display: flex; | |
| gap: 4px; | |
| margin-top: 8px; | |
| } | |
| .vol-dot { | |
| width: 8px; | |
| height: 8px; | |
| border-radius: 50%; | |
| background: rgba(255, 255, 255, 0.2); | |
| } | |
| .vol-dot.active { | |
| background: linear-gradient(90deg, #00f2ff, #ff00ff); | |
| } | |
| .promo-banner { | |
| background: linear-gradient(135deg, rgba(0, 242, 255, 0.1), rgba(255, 0, 255, 0.1)); | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .clover { | |
| position: absolute; | |
| font-size: 2rem; | |
| opacity: 0.7; | |
| z-index: 0; | |
| } | |
| .testimonial-card { | |
| transition: all 0.3s ease; | |
| } | |
| .testimonial-card:hover { | |
| transform: translateY(-10px); | |
| box-shadow: 0 15px 30px rgba(255, 0, 255, 0.3); | |
| } | |
| .faq-item .faq-answer { | |
| max-height: 0; | |
| overflow: hidden; | |
| transition: max-height 0.3s ease; | |
| } | |
| .faq-item.active .faq-answer { | |
| max-height: 200px; | |
| } | |
| .player-counter { | |
| font-family: 'Orbitron', sans-serif; | |
| text-shadow: 0 0 10px rgba(255, 0, 255, 0.8), 0 0 20px rgba(255, 0, 255, 0.6); | |
| } | |
| .social-icon { | |
| transition: all 0.3s ease; | |
| } | |
| .social-icon:hover { | |
| transform: translateY(-5px); | |
| filter: drop-shadow(0 0 8px rgba(0, 242, 255, 0.8)); | |
| } | |
| .glow { | |
| box-shadow: 0 0 15px rgba(0, 242, 255, 0.5), 0 0 30px rgba(255, 0, 255, 0.3); | |
| } | |
| .btn-neon { | |
| background: linear-gradient(90deg, #00f2ff, #ff00ff); | |
| transition: all 0.3s ease; | |
| } | |
| .btn-neon:hover { | |
| transform: translateY(-3px); | |
| box-shadow: 0 5px 15px rgba(0, 242, 255, 0.4), 0 5px 15px rgba(255, 0, 255, 0.4); | |
| } | |
| .countdown-box { | |
| background: rgba(0, 0, 0, 0.3); | |
| border: 1px solid rgba(0, 242, 255, 0.3); | |
| } | |
| .feature-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 25px rgba(0, 242, 255, 0.2); | |
| } | |
| .marquee-container { | |
| overflow: hidden; | |
| position: relative; | |
| } | |
| .marquee { | |
| display: flex; | |
| width: 200%; | |
| animation: marquee 20s linear infinite; | |
| } | |
| .marquee-reverse { | |
| display: flex; | |
| width: 200%; | |
| animation: marquee-reverse 20s linear infinite; | |
| } | |
| @keyframes marquee { | |
| 0% { transform: translateX(0); } | |
| 100% { transform: translateX(-50%); } | |
| } | |
| @keyframes marquee-reverse { | |
| 0% { transform: translateX(-50%); } | |
| 100% { transform: translateX(0); } | |
| } | |
| .marquee-item { | |
| flex: 0 0 auto; | |
| width: calc(100% / 12); | |
| } | |
| @media (max-width: 768px) { | |
| .marquee-item { | |
| width: calc(100% / 6); | |
| } | |
| .steps-container { | |
| flex-direction: column; | |
| } | |
| .game-grid { | |
| grid-template-columns: repeat(2, 1fr); | |
| } | |
| .features-grid { | |
| grid-template-columns: repeat(1, 1fr); | |
| } | |
| .testimonials-grid { | |
| grid-template-columns: repeat(1, 1fr); | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-darkBg"> | |
| <!-- Background Glowing Orbs --> | |
| <div class="fixed -top-20 -right-20 w-64 h-64 rounded-full bg-neonBlue opacity-20 blur-3xl animate-pulse-slow z-0"></div> | |
| <div class="fixed -bottom-20 -left-20 w-64 h-64 rounded-full bg-neonMagenta opacity-20 blur-3xl animate-pulse-slow z-0"></div> | |
| <!-- Floating Clovers --> | |
| <div class="clover animate-float" style="top: 20px; left: 5%;">🍀</div> | |
| <div class="clover animate-float2" style="top: 60px; right: 8%;">🍀</div> | |
| <div class="clover animate-float3" style="bottom: 40px; left: 12%;">🍀</div> | |
| <div class="clover animate-float" style="bottom: 20px; right: 15%;">🍀</div> | |
| <!-- Sticky Header --> | |
| <header class="fixed top-0 left-0 w-full z-50 py-3 px-4 bg-black/80 backdrop-blur-md border-b border-neonBlue/30"> | |
| <div class="max-w-7xl mx-auto flex items-center justify-between"> | |
| <!-- Logo Placeholder --> | |
| <div class="flex items-center"> | |
| <div class="bg-gray-800 border-2 border-dashed rounded-xl w-16 h-16 mr-3"></div> | |
| <h1 class="text-2xl font-bold neon-text">ROYALE CASINO</h1> | |
| </div> | |
| <!-- Jackpot Counter --> | |
| <div class="jackpot-counter text-xl font-bold text-neonBlue"> | |
| <span id="jackpot">8,752,409</span> | |
| </div> | |
| <!-- Auth Buttons --> | |
| <div class="flex space-x-3"> | |
| <a href="https://nioplay.net" class="px-4 py-2 rounded-lg bg-neonBlue/20 text-neonBlue border border-neonBlue font-bold hover:bg-neonBlue/30 transition">LOGIN</a> | |
| <a href="https://nioplay.net" class="px-4 py-2 rounded-lg bg-gradient-to-r from-neonBlue to-neonMagenta text-white font-bold glow hover:opacity-90 transition">SIGN UP</a> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Hero Section --> | |
| <section class="pt-32 pb-20 px-4 relative z-10"> | |
| <div class="max-w-7xl mx-auto text-center"> | |
| <h1 class="text-4xl md:text-6xl font-bold mb-6 neon-text">WELCOME TO <span class="magenta-text">ROYALE CASINO</span></h1> | |
| <p class="text-xl text-gray-300 max-w-3xl mx-auto mb-10">Experience the ultimate social casino sweepstakes with thousands of free games and chances to win real prizes!</p> | |
| <div class="flex justify-center space-x-4 mb-16"> | |
| <a href="https://nioplay.net" class="btn-neon px-8 py-4 rounded-xl text-white font-bold text-lg">PLAY NOW</a> | |
| <a href="https://nioplay.net" class="px-8 py-4 rounded-xl bg-black/50 border-2 border-neonBlue text-neonBlue font-bold text-lg hover:bg-neonBlue/10 transition">LEARN MORE</a> | |
| </div> | |
| <!-- Trust Bar --> | |
| <div class="trust-bar glass-card rounded-2xl p-6 mb-16"> | |
| <h3 class="text-lg font-bold text-neonBlue mb-4">TRUSTED BY THE BEST PROVIDERS</h3> | |
| <div class="marquee-container overflow-hidden"> | |
| <div class="marquee flex"> | |
| <!-- 12 Game Providers --> | |
| <div class="marquee-item flex justify-center items-center px-4"> | |
| <div class="bg-gray-700 w-16 h-16 rounded-lg"></div> | |
| </div> | |
| <div class="marquee-item flex justify-center items-center px-4"> | |
| <div class="bg-gray-700 w-16 h-16 rounded-lg"></div> | |
| </div> | |
| <div class="marquee-item flex justify-center items-center px-4"> | |
| <div class="bg-gray-700 w-16 h-16 rounded-lg"></div> | |
| </div> | |
| <div class="marquee-item flex justify-center items-center px-4"> | |
| <div class="bg-gray-700 w-16 h-16 rounded-lg"></div> | |
| </div> | |
| <div class="marquee-item flex justify-center items-center px-4"> | |
| <div class="bg-gray-700 w-16 h-16 rounded-lg"></div> | |
| </div> | |
| <div class="marquee-item flex justify-center items-center px-4"> | |
| <div class="bg-gray-700 w-16 h-16 rounded-lg"></div> | |
| </div> | |
| <div class="marquee-item flex justify-center items-center px-4"> | |
| <div class="bg-gray-700 w-16 h-16 rounded-lg"></div> | |
| </div> | |
| <div class="marquee-item flex justify-center items-center px-4"> | |
| <div class="bg-gray-700 w-16 h-16 rounded-lg"></div> | |
| </div> | |
| <div class="marquee-item flex justify-center items-center px-4"> | |
| <div class="bg-gray-700 w-16 h-16 rounded-lg"></div> | |
| </div> | |
| <div class="marquee-item flex justify-center items-center px-4"> | |
| <div class="bg-gray-700 w-16 h-16 rounded-lg"></div> | |
| </div> | |
| <div class="marquee-item flex justify-center items-center px-4"> | |
| <div class="bg-gray-700 w-16 h-16 rounded-lg"></div> | |
| </div> | |
| <div class="marquee-item flex justify-center items-center px-4"> | |
| <div class="bg-gray-700 w-16 h-16 rounded-lg"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Hero Image Placeholder --> | |
| <div class="glass-card rounded-2xl overflow-hidden h-64 md:h-96 w-full max-w-5xl mx-auto mb-16 flex items-center justify-center"> | |
| <div class="bg-gray-800 border-2 border-dashed rounded-xl w-full h-full"></div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- 3 Easy Steps --> | |
| <section class="py-16 px-4 relative z-10"> | |
| <div class="max-w-7xl mx-auto"> | |
| <h2 class="text-3xl font-bold text-center mb-16"> | |
| GET STARTED IN <span class="text-transparent bg-clip-text bg-gradient-to-r from-neonBlue to-neonMagenta">3 EASY STEPS</span> | |
| </h2> | |
| <div class="steps-container flex flex-col md:flex-row justify-center gap-8"> | |
| <!-- Step 1 --> | |
| <div class="step-card glass-card rounded-2xl p-8 flex-1 transition-all duration-300"> | |
| <div class="text-5xl text-neonBlue font-bold mb-4">1</div> | |
| <h3 class="text-xl font-bold mb-3">Create Account</h3> | |
| <p class="text-gray-300 mb-6">Sign up with your email in seconds. No credit card required!</p> | |
| <div class="flex justify-center mb-4"> | |
| <div class="bg-gray-700 w-16 h-16 rounded-full flex items-center justify-center"> | |
| <i class="fas fa-user-plus text-2xl text-neonBlue"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Step 2 --> | |
| <div class="step-card glass-card rounded-2xl p-8 flex-1 transition-all duration-300"> | |
| <div class="text-5xl text-neonMagenta font-bold mb-4">2</div> | |
| <h3 class="text-xl font-bold mb-3">Claim Bonus</h3> | |
| <p class="text-gray-300 mb-6">Get your welcome bonus of 50,000 free coins instantly!</p> | |
| <div class="flex justify-center mb-4"> | |
| <div class="bg-gray-700 w-16 h-16 rounded-full flex items-center justify-center"> | |
| <i class="fas fa-gift text-2xl text-neonMagenta"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Step 3 --> | |
| <div class="step-card glass-card rounded-2xl p-8 flex-1 transition-all duration-300"> | |
| <div class="text-5xl text-neonGreen font-bold mb-4">3</div> | |
| <h3 class="text-xl font-bold mb-3">Start Playing</h3> | |
| <p class="text-gray-300 mb-6">Choose from hundreds of games and start having fun!</p> | |
| <div class="flex justify-center mb-4"> | |
| <div class="bg-gray-700 w-16 h-16 rounded-full flex items-center justify-center"> | |
| <i class="fas fa-play text-2xl text-neonGreen"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Why Choose Us --> | |
| <section class="py-16 px-4 relative z-10"> | |
| <div class="max-w-7xl mx-auto"> | |
| <h2 class="text-3xl font-bold text-center mb-16"> | |
| WHY CHOOSE <span class="text-transparent bg-clip-text bg-gradient-to-r from-neonBlue to-neonMagenta">ROYALE CASINO</span> | |
| </h2> | |
| <div class="features-grid grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8"> | |
| <!-- Feature 1 --> | |
| <div class="feature-card glass-card rounded-2xl p-6 transition-all duration-300"> | |
| <div class="w-16 h-16 rounded-full bg-gradient-to-br from-neonBlue to-neonMagenta flex items-center justify-center mb-6"> | |
| <i class="fas fa-coins text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Daily Free Coins</h3> | |
| <p class="text-gray-300">Claim free coins every day just for logging in!</p> | |
| </div> | |
| <!-- Feature 2 --> | |
| <div class="feature-card glass-card rounded-2xl p-6 transition-all duration-300"> | |
| <div class="w-16 h-16 rounded-full bg-gradient-to-br from-neonBlue to-neonMagenta flex items-center justify-center mb-6"> | |
| <i class="fas fa-trophy text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Real Prizes</h3> | |
| <p class="text-gray-300">Win real cash prizes through our sweepstakes!</p> | |
| </div> | |
| <!-- Feature 3 --> | |
| <div class="feature-card glass-card rounded-2xl p-6 transition-all duration-300"> | |
| <div class="w-16 h-16 rounded-full bg-gradient-to-br from-neonBlue to-neonMagenta flex items-center justify-center mb-6"> | |
| <i class="fas fa-shield-alt text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Safe & Secure</h3> | |
| <p class="text-gray-300">Your data is protected with bank-level security.</p> | |
| </div> | |
| <!-- Feature 4 --> | |
| <div class="feature-card glass-card rounded-2xl p-6 transition-all duration-300"> | |
| <div class="w-16 h-16 rounded-full bg-gradient-to-br from-neonBlue to-neonMagenta flex items-center justify-center mb-6"> | |
| <i class="fas fa-headset text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">24/7 Support</h3> | |
| <p class="text-gray-300">Our support team is always ready to help you.</p> | |
| </div> | |
| </div> | |
| <!-- Feature Image Placeholder --> | |
| <div class="glass-card rounded-2xl overflow-hidden h-64 w-full max-w-4xl mx-auto mt-16 flex items-center justify-center"> | |
| <div class="bg-gray-800 border-2 border-dashed rounded-xl w-full h-full"></div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Games Grid --> | |
| <section class="py-16 px-4 relative z-10"> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="flex justify-between items-center mb-8"> | |
| <h2 class="text-3xl font-bold"> | |
| POPULAR <span class="text-transparent bg-clip-text bg-gradient-to-r from-neonBlue to-neonMagenta">GAMES</span> | |
| </h2> | |
| <a href="https://nioplay.net" class="btn-neon px-6 py-3 rounded-lg text-white font-bold">VIEW ALL GAMES</a> | |
| </div> | |
| <div class="game-grid grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6 mb-12"> | |
| <!-- Game 1 --> | |
| <div class="flip-card"> | |
| <div class="flip-card-inner"> | |
| <div class="flip-card-front glass-card rounded-xl overflow-hidden"> | |
| <div class="h-full flex flex-col"> | |
| <div class="h-40 bg-gray-800 flex items-center justify-center"> | |
| <div class="bg-gray-700 w-24 h-24 rounded-lg"></div> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="font-bold text-lg">Neon Riches</h3> | |
| <p class="text-gray-400 text-sm">Slot Machine</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flip-card-back glass-card rounded-xl"> | |
| <h3 class="font-bold text-lg mb-2">Neon Riches</h3> | |
| <div class="mb-3"> | |
| <p class="text-sm text-gray-300 mb-1">RTP: 96.5%</p> | |
| <div class="rtp-meter"> | |
| <div class="rtp-fill" style="width: 96.5%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <p class="text-sm text-gray-300 mb-1">Volatility: Medium</p> | |
| <div class="volatility-meter"> | |
| <div class="vol-dot"></div> | |
| <div class="vol-dot active"></div> | |
| <div class="vol-dot active"></div> | |
| <div class="vol-dot"></div> | |
| <div class="vol-dot"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Game 2 --> | |
| <div class="flip-card"> | |
| <div class="flip-card-inner"> | |
| <div class="flip-card-front glass-card rounded-xl overflow-hidden"> | |
| <div class="h-full flex flex-col"> | |
| <div class="h-40 bg-gray-800 flex items-center justify-center"> | |
| <div class="bg-gray-700 w-24 h-24 rounded-lg"></div> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="font-bold text-lg">Magma Jackpot</h3> | |
| <p class="text-gray-400 text-sm">Progressive</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flip-card-back glass-card rounded-xl"> | |
| <h3 class="font-bold text-lg mb-2">Magma Jackpot</h3> | |
| <div class="mb-3"> | |
| <p class="text-sm text-gray-300 mb-1">RTP: 95.2%</p> | |
| <div class="rtp-meter"> | |
| <div class="rtp-fill" style="width: 95.2%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <p class="text-sm text-gray-300 mb-1">Volatility: High</p> | |
| <div class="volatility-meter"> | |
| <div class="vol-dot active"></div> | |
| <div class="vol-dot active"></div> | |
| <div class="vol-dot active"></div> | |
| <div class="vol-dot active"></div> | |
| <div class="vol-dot"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Game 3 --> | |
| <div class="flip-card"> | |
| <div class="flip-card-inner"> | |
| <div class="flip-card-front glass-card rounded-xl overflow-hidden"> | |
| <div class="h-full flex flex-col"> | |
| <div class="h-40 bg-gray-800 flex items-center justify-center"> | |
| <div class="bg-gray-700 w-24 h-24 rounded-lg"></div> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="font-bold text-lg">Royal Poker</h3> | |
| <p class="text-gray-400 text-sm">Card Game</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flip-card-back glass-card rounded-xl"> | |
| <h3 class="font-bold text-lg mb-2">Royal Poker</h3> | |
| <div class="mb-3"> | |
| <p class="text-sm text-gray-300 mb-1">RTP: 98.1%</p> | |
| <div class="rtp-meter"> | |
| <div class="rtp-fill" style="width: 98.1%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <p class="text-sm text-gray-300 mb-1">Volatility: Low</p> | |
| <div class="volatility-meter"> | |
| <div class="vol-dot active"></div> | |
| <div class="vol-dot"></div> | |
| <div class="vol-dot"></div> | |
| <div class="vol-dot"></div> | |
| <div class="vol-dot"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Game 4 --> | |
| <div class="flip-card"> | |
| <div class="flip-card-inner"> | |
| <div class="flip-card-front glass-card rounded-xl overflow-hidden"> | |
| <div class="h-full flex flex-col"> | |
| <div class="h-40 bg-gray-800 flex items-center justify-center"> | |
| <div class="bg-gray-700 w-24 h-24 rounded-lg"></div> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="font-bold text-lg">Diamond Wilds</h3> | |
| <p class="text-gray-400 text-sm">Slot Machine</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flip-card-back glass-card rounded-xl"> | |
| <h3 class="font-bold text-lg mb-2">Diamond Wilds</h3> | |
| <div class="mb-3"> | |
| <p class="text-sm text-gray-300 mb-1">RTP: 96.8%</p> | |
| <div class="rtp-meter"> | |
| <div class="rtp-fill" style="width: 96.8%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <p class="text-sm text-gray-300 mb-1">Volatility: Medium</p> | |
| <div class="volatility-meter"> | |
| <div class="vol-dot"></div> | |
| <div class="vol-dot active"></div> | |
| <div class="vol-dot active"></div> | |
| <div class="vol-dot"></div> | |
| <div class="vol-dot"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Game 5 --> | |
| <div class="flip-card"> | |
| <div class="flip-card-inner"> | |
| <div class="flip-card-front glass-card rounded-xl overflow-hidden"> | |
| <div class="h-full flex flex-col"> | |
| <div class="h-40 bg-gray-800 flex items-center justify-center"> | |
| <div class="bg-gray-700 w-24 h-24 rounded-lg"></div> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="font-bold text-lg">Fortune Wheel</h3> | |
| <p class="text-gray-400 text-sm">Wheel Game</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flip-card-back glass-card rounded-xl"> | |
| <h3 class="font-bold text-lg mb-2">Fortune Wheel</h3> | |
| <div class="mb-3"> | |
| <p class="text-sm text-gray-300 mb-1">RTP: 94.7%</p> | |
| <div class="rtp-meter"> | |
| <div class="rtp-fill" style="width: 94.7%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <p class="text-sm text-gray-300 mb-1">Volatility: High</p> | |
| <div class="volatility-meter"> | |
| <div class="vol-dot active"></div> | |
| <div class="vol-dot active"></div> | |
| <div class="vol-dot active"></div> | |
| <div class="vol-dot active"></div> | |
| <div class="vol-dot"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Game 6 --> | |
| <div class="flip-card"> | |
| <div class="flip-card-inner"> | |
| <div class="flip-card-front glass-card rounded-xl overflow-hidden"> | |
| <div class="h-full flex flex-col"> | |
| <div class="h-40 bg-gray-800 flex items-center justify-center"> | |
| <div class="bg-gray-700 w-24 h-24 rounded-lg"></div> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="font-bold text-lg">Blackjack Royale</h3> | |
| <p class="text-gray-400 text-sm">Card Game</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flip-card-back glass-card rounded-xl"> | |
| <h3 class="font-bold text-lg mb-2">Blackjack Royale</h3> | |
| <div class="mb-3"> | |
| <p class="text-sm text-gray-300 mb-1">RTP: 99.2%</p> | |
| <div class="rtp-meter"> | |
| <div class="rtp-fill" style="width: 99.2%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <p class="text-sm text-gray-300 mb-1">Volatility: Low</p> | |
| <div class="volatility-meter"> | |
| <div class="vol-dot active"></div> | |
| <div class="vol-dot"></div> | |
| <div class="vol-dot"></div> | |
| <div class="vol-dot"></div> | |
| <div class="vol-dot"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Game Image Placeholder --> | |
| <div class="glass-card rounded-2xl overflow-hidden h-64 w-full max-w-4xl mx-auto flex items-center justify-center"> | |
| <div class="bg-gray-800 border-2 border-dashed rounded-xl w-full h-full"></div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Promo Banner --> | |
| <section class="py-16 px-4 relative z-10"> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="promo-banner glass-card rounded-2xl p-8 md:p-12"> | |
| <div class="flex flex-col md:flex-row items-center"> | |
| <div class="flex-1 mb-8 md:mb-0 md:pr-8"> | |
| <h2 class="text-3xl font-bold mb-4">GOLDEN CLOVERS BONUS</h2> | |
| <p class="text-gray-300 mb-6">Enter promo code <span class="font-bold text-neonGreen">LUCKY777</span> to claim your 100,000 FREE coins!</p> | |
| <div class="flex mb-6"> | |
| <input type="text" placeholder="Enter promo code" class="flex-1 bg-black/50 border border-neonBlue rounded-l-xl py-3 px-4 text-white focus:outline-none focus:ring-2 focus:ring-neonBlue"> | |
| <button class="btn-neon px-6 py-3 rounded-r-xl font-bold">CLAIM</button> | |
| </div> | |
| <div class="text-center"> | |
| <p class="text-gray-400 mb-2">Offer expires in:</p> | |
| <div class="flex justify-center space-x-2"> | |
| <div class="countdown-box rounded-lg py-2 px-3"> | |
| <div class="text-2xl font-bold" id="hours">23</div> | |
| <div class="text-xs">HOURS</div> | |
| </div> | |
| <div class="countdown-box rounded-lg py-2 px-3"> | |
| <div class="text-2xl font-bold" id="minutes">11</div> | |
| <div class="text-xs">MINUTES</div> | |
| </div> | |
| <div class="countdown-box rounded-lg py-2 px-3"> | |
| <div class="text-2xl font-bold" id="seconds">09</div> | |
| <div class="text-xs">SECONDS</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex-1"> | |
| <div class="bg-gray-800 border-2 border-dashed rounded-xl w-full h-64"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Testimonials --> | |
| <section class="py-16 px-4 relative z-10"> | |
| <div class="max-w-7xl mx-auto"> | |
| <h2 class="text-3xl font-bold text-center mb-16"> | |
| PLAYER <span class="text-transparent bg-clip-text bg-gradient-to-r from-neonBlue to-neonMagenta">TESTIMONIALS</span> | |
| </h2> | |
| <div class="testimonials-grid grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <!-- Testimonial 1 --> | |
| <div class="testimonial-card glass-card rounded-2xl p-6"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 rounded-full bg-gray-700 mr-4"></div> | |
| <div> | |
| <h3 class="font-bold">Alex J.</h3> | |
| <div class="flex text-yellow-400"> | |
| <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> | |
| </div> | |
| </div> | |
| </div> | |
| <p class="text-gray-300 mb-4">"I won $500 in my first week! The games are so fun and the bonuses are amazing."</p> | |
| <div class="text-xs text-gray-500">Posted on Trustpilot</div> | |
| </div> | |
| <!-- Testimonial 2 --> | |
| <div class="testimonial-card glass-card rounded-2xl p-6"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 rounded-full bg-gray-700 mr-4"></div> | |
| <div> | |
| <h3 class="font-bold">Sarah M.</h3> | |
| <div class="flex text-yellow-400"> | |
| <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> | |
| </div> | |
| </div> | |
| </div> | |
| <p class="text-gray-300 mb-4">"Best social casino out there! The daily free coins keep me playing without spending money."</p> | |
| <div class="text-xs text-gray-500">Posted on Trustpilot</div> | |
| </div> | |
| <!-- Testimonial 3 --> | |
| <div class="testimonial-card glass-card rounded-2xl p-6"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 rounded-full bg-gray-700 mr-4"></div> | |
| <div> | |
| <h3 class="font-bold">Mike T.</h3> | |
| <div class="flex text-yellow-400"> | |
| <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> | |
| </div> | |
| </div> | |
| </div> | |
| <p class="text-gray-300 mb-4">"The game selection is incredible. I love the sweepstakes events where you can win real cash!"</p> | |
| <div class="text-xs text-gray-500">Posted on Trustpilot</div> | |
| </div> | |
| </div> | |
| <!-- Testimonial Image Placeholder --> | |
| <div class="glass-card rounded-2xl overflow-hidden h-64 w-full max-w-4xl mx-auto mt-16 flex items-center justify-center"> | |
| <div class="bg-gray-800 border-2 border-dashed rounded-xl w-full h-full"></div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- FAQ Section --> | |
| <section class="py-16 px-4"> | |
| <div class="max-w-5xl mx-auto"> | |
| <h2 class="text-3xl font-bold text-center mb-16"> | |
| Frequently <span class="text-transparent bg-clip-text bg-gradient-to-r from-neonBlue to-neonMagenta">Asked Questions</span> | |
| </h2> | |
| <div class="glass-card rounded-2xl overflow-hidden"> | |
| <div class="faq-item"> | |
| <div class="faq-question p-6 flex justify-between items-center cursor-pointer border-b border-neonBlue/20"> | |
| <h3 class="text-lg font-bold">How do I get started at Royale Casino?</h3> | |
| <i class="fa-solid fa-plus text-neonBlue"></i> | |
| </div> | |
| <div class="faq-answer"> | |
| <div class="p-6 pt-0"> | |
| <p class="text-gray-300"> | |
| Getting started is simple! Just click the 'Sign Up' button at the top right, fill in your details, and verify your email. You'll get 10,000 free coins instantly to start playing. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="faq-item"> | |
| <div class="faq-question p-6 flex justify-between items-center cursor-pointer border-b border-neonBlue/20"> | |
| <h3 class="text-lg font-bold">Is Royale Casino free to play?</h3> | |
| <i class="fa-solid fa-plus text-neonBlue"></i> | |
| </div> | |
| <div class="faq-answer"> | |
| <div class="p-6 pt-0"> | |
| <p class="text-gray-300"> | |
| Yes! Royale Casino is a sweepstakes social casino where you play for fun with virtual coins. We offer multiple ways to get free coins daily without spending any money. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="faq-item"> | |
| <div class="faq-question p-6 flex justify-between items-center cursor-pointer border-b border-neonBlue/20"> | |
| <h3 class="text-lg font-bold">Can I win real prizes?</h3> | |
| <i class="fa-solid fa-plus text-neonBlue"></i> | |
| </div> | |
| <div class="faq-answer"> | |
| <div class="p-6 pt-0"> | |
| <p class="text-gray-300"> | |
| Absolutely! While we focus on social gaming, we frequently run sweepstakes events where players can win real cash prizes, gift cards, and other exciting rewards. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="faq-item"> | |
| <div class="faq-question p-6 flex justify-between items-center cursor-pointer border-b border-neonBlue/20"> | |
| <h3 class="text-lg font-bold">How do I claim my daily free coins?</h3> | |
| <i class="fa-solid fa-plus text-neonBlue"></i> | |
| </div> | |
| <div class="faq-answer"> | |
| <div class="p-6 pt-0"> | |
| <p class="text-gray-300"> | |
| Simply log in to your account every 24 hours and visit the 'Promotions' page. You'll see your daily free coins waiting to be claimed, with bigger bonuses for consecutive days! | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="faq-item"> | |
| <div class="faq-question p-6 flex justify-between items-center cursor-pointer"> | |
| <h3 class="text-lg font-bold">What makes Royale Casino different from others?</h3> | |
| <i class="fa-solid fa-plus text-neonBlue"></i> | |
| </div> | |
| <div class="faq-answer"> | |
| <div class="p-6 pt-0"> | |
| <p class="text-gray-300"> | |
| We pride ourselves on premium graphics, smooth gameplay, and generous rewards. Our unique sweepstakes model gives everyone a chance at real prizes without risking real money. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Final CTA --> | |
| <section class="py-20 px-4 relative z-10"> | |
| <div class="max-w-4xl mx-auto text-center"> | |
| <h2 class="text-4xl font-bold mb-6">JOIN THE FUN TODAY!</h2> | |
| <p class="text-xl text-gray-300 mb-10">Be part of our growing community of players</p> | |
| <div class="player-counter text-5xl font-bold mb-10"> | |
| <span id="playerCount">12,589</span> PLAYERS AND COUNTING! | |
| </div> | |
| <a href="https://nioplay.net" class="btn-neon px-10 py-5 rounded-xl text-white font-bold text-xl inline-block">GET STARTED NOW</a> | |
| <!-- CTA Image Placeholder --> | |
| <div class="glass-card rounded-2xl overflow-hidden h-64 w-full max-w-3xl mx-auto mt-16 flex items-center justify-center"> | |
| <div class="bg-gray-800 border-2 border-dashed rounded-xl w-full h-full"></div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="pt-16 pb-8 px-4 relative z-10"> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-12"> | |
| <!-- Logo and Description --> | |
| <div> | |
| <div class="flex items-center mb-6"> | |
| <div class="bg-gray-800 border-2 border-dashed rounded-xl w-16 h-16 mr-3"></div> | |
| <h2 class="text-2xl font-bold neon-text">ROYALE CASINO</h2> | |
| </div> | |
| <p class="text-gray-400 mb-6">Experience the thrill of social casino gaming with Royale Casino. Play for fun, win for real!</p> | |
| <div class="flex space-x-4"> | |
| <a href="https://nioplay.net" class="social-icon text-2xl text-neonBlue hover:text-neonMagenta"><i class="fab fa-facebook"></i></a> | |
| <a href="https://nioplay.net" class="social-icon text-2xl text-neonBlue hover:text-neonMagenta"><i class="fab fa-instagram"></i></a> | |
| <a href="https://nioplay.net" class="social-icon text-2xl text-neonBlue hover:text-neonMagenta"><i class="fab fa-twitter"></i></a> | |
| <a href="https://nioplay.net" class="social-icon text-2xl text-neonBlue hover:text-neonMagenta"><i class="fab fa-discord"></i></a> | |
| </div> | |
| </div> | |
| <!-- Quick Links --> | |
| <div> | |
| <h3 class="text-lg font-bold mb-6 text-neonBlue">Quick Links</h3> | |
| <ul class="space-y-3"> | |
| <li><a href="https://nioplay.net" class="text-gray-400 hover:text-neonBlue transition">Home</a></li> | |
| <li><a href="https://nioplay.net" class="text-gray-400 hover:text-neonBlue transition">Games</a></li> | |
| <li><a href="https://nioplay.net" class="text-gray-400 hover:text-neonBlue transition">Promotions</a></li> | |
| <li><a href="https://nioplay.net" class="text-gray-400 hover:text-neonBlue transition">Sweepstakes</a></li> | |
| <li><a href="https://nioplay.net" class="text-gray-400 hover:text-neonBlue transition">FAQ</a></li> | |
| </ul> | |
| </div> | |
| <!-- Legal --> | |
| <div> | |
| <h3 class="text-lg font-bold mb-6 text-neonBlue">Legal</h3> | |
| <ul class="space-y-3"> | |
| <li><a href="https://nioplay.net" class="text-gray-400 hover:text-neonBlue transition">Terms of Service</a></li> | |
| <li><a href="https://nioplay.net" class="text-gray-400 hover:text-neonBlue transition">Privacy Policy</a></li> | |
| <li><a href="https://nioplay.net" class="text-gray-400 hover:text-neonBlue transition">Responsible Gaming</a></li> | |
| <li><a href="https://nioplay.net" class="text-gray-400 hover:text-neonBlue transition">Cookie Policy</a></li> | |
| </ul> | |
| </div> | |
| <!-- Download App --> | |
| <div> | |
| <h3 class="text-lg font-bold mb-6 text-neonBlue">Download Our App</h3> | |
| <p class="text-gray-400 mb-6">Take Royale Casino with you wherever you go!</p> | |
| <div class="flex flex-col space-y-4"> | |
| <a href="https://nioplay.net" class="bg-black/30 border border-gray-700 rounded-xl py-3 px-6 flex items-center hover:bg-neonBlue/10 transition"> | |
| <i class="fab fa-apple text-3xl mr-3"></i> | |
| <div> | |
| <div class="text-xs">Download on the</div> | |
| <div class="font-bold">App Store</div> | |
| </div> | |
| </a> | |
| <a href="https://nioplay.net" class="bg-black/30 border border-gray-700 rounded-xl py-3 px-6 flex items-center hover:bg-neonBlue/10 transition"> | |
| <i class="fab fa-google-play text-2xl mr-3"></i> | |
| <div> | |
| <div class="text-xs">Get it on</div> | |
| <div class="font-bold">Google Play</div> | |
| </div> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Disclaimer --> | |
| <div class="border-t border-gray-800 pt-8 text-center"> | |
| <p class="text-gray-500 text-sm mb-2">DISCLAIMER: Royale Casino is a social sweepstakes casino. This is not a gambling site. Players participate for entertainment purposes only. No real money gambling takes place on this platform.</p> | |
| <p class="text-gray-500 text-sm">© 2023 Royale Casino. All rights reserved.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Jackpot Counter | |
| let jackpotValue = 8752409; | |
| const jackpotElement = document.getElementById('jackpot'); | |
| setInterval(() => { | |
| jackpotValue += Math.floor(Math.random() * 100); | |
| jackpotElement.textContent = jackpotValue.toLocaleString(); | |
| }, 2000); | |
| // Player Counter | |
| let playerCount = 12589; | |
| const playerElement = document.getElementById('playerCount'); | |
| setInterval(() => { | |
| playerCount += Math.floor(Math.random() * 3); | |
| playerElement.textContent = playerCount.toLocaleString(); | |
| }, 3000); | |
| // Countdown Timer | |
| let hours = 23; | |
| let minutes = 11; | |
| let seconds = 9; | |
| const hoursElement = document.getElementById('hours'); | |
| const minutesElement = document.getElementById('minutes'); | |
| const secondsElement = document.getElementById('seconds'); | |
| const countdown = setInterval(() => { | |
| seconds--; | |
| if (seconds < 0) { | |
| seconds = 59; | |
| minutes--; | |
| if (minutes < 0) { | |
| minutes = 59; | |
| hours--; | |
| if (hours < 0) { | |
| clearInterval(countdown); | |
| hours = 0; | |
| minutes = 0; | |
| seconds = 0; | |
| } | |
| } | |
| } | |
| hoursElement.textContent = hours.toString().padStart(2, '0'); | |
| minutesElement.textContent = minutes.toString().padStart(2, '0'); | |
| secondsElement.textContent = seconds.toString().padStart(2, '0'); | |
| }, 1000); | |
| // FAQ Accordion | |
| const faqItems = document.querySelectorAll('.faq-item'); | |
| faqItems.forEach(item => { | |
| const question = item.querySelector('.faq-question'); | |
| const icon = question.querySelector('i'); | |
| question.addEventListener('click', () => { | |
| const isActive = item.classList.contains('active'); | |
| // Close all items first | |
| faqItems.forEach(faq => { | |
| faq.classList.remove('active'); | |
| faq.querySelector('i').className = 'fa-solid fa-plus text-neonBlue'; | |
| }); | |
| // Toggle current item if wasn't active | |
| if(!isActive) { | |
| item.classList.add('active'); | |
| icon.className = 'fa-solid fa-minus text-neonBlue'; | |
| } | |
| }); | |
| }); | |
| // Smooth scrolling for anchor links | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function (e) { | |
| e.preventDefault(); | |
| document.querySelector(this.getAttribute('href')).scrollIntoView({ | |
| behavior: 'smooth' | |
| }); | |
| }); | |
| }); | |
| </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/royale-casino-landing" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |