-
1.52 kB
initial commit
-
222 Bytes
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Nioplay - America's Premier Sweepstakes Casino</title> <script src="https://cdn.tailwindcss.com"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/11.0.5/swiper-bundle.min.js"></script> <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700;800;900&family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/11.0.5/swiper-bundle.min.css"> <style> :root { --neon-orange: #FF6A00; --neon-blue: #00E4FF; --glow-orange: 0 0 10px rgba(255, 106, 0, 0.7), 0 0 20px rgba(255, 106, 0, 0.5), 0 0 30px rgba(255, 106, 0, 0.3); --glow-blue: 0 0 10px rgba(0, 228, 255, 0.7), 0 0 20px rgba(0, 228, 255, 0.5), 0 0 30px rgba(0, 228, 255, 0.3); --glow-white: 0 0 5px rgba(245, 245, 245, 0.8), 0 0 10px rgba(245, 245, 245, 0.6); } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Poppins', sans-serif; background-color: #000; color: #F5F5F5; overflow-x: hidden; position: relative; } .orbitron { font-family: 'Orbitron', sans-serif; text-transform: uppercase; } .neon-orange { color: var(--neon-orange); text-shadow: var(--glow-orange); } .neon-blue { color: var(--neon-blue); text-shadow: var(--glow-blue); } .neon-glow-orange { text-shadow: var(--glow-orange); } .neon-glow-blue { text-shadow: var(--glow-blue); } .neon-glow-white { text-shadow: var(--glow-white); } .glass-card { background: rgba(20, 20, 20, 0.4); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255, 106, 0, 0.2); box-shadow: 0 0 15px rgba(255, 106, 0, 0.1); } .btn-orange { background: linear-gradient(135deg, #FF6A00, #FF4500); box-shadow: var(--glow-orange); transition: all 0.3s ease; } .btn-orange:hover { transform: translateY(-3px); box-shadow: 0 0 25px rgba(255, 106, 0, 0.8); animation: pulse-orange 1.5s infinite; } .btn-blue { background: transparent; border: 2px solid var(--neon-blue); box-shadow: var(--glow-blue); transition: all 0.3s ease; } .btn-blue:hover { background: rgba(0, 228, 255, 0.1); animation: flicker-blue 0.5s infinite alternate; } .pill-badge { background: rgba(255, 106, 0, 0.2); border: 1px solid var(--neon-orange); box-shadow: var(--glow-orange); animation: pulse-orange 2s infinite; } .coin-burst { position: absolute; width: 20px; height: 20px; background: radial-gradient(circle, #FFD700, #FFA500); border-radius: 50%; box-shadow: 0 0 10px #FFD700, 0 0 20px #FFA500; pointer-events: none; opacity: 0; } .game-card:hover { transform: scale(1.05); box-shadow: 0 0 30px rgba(255, 106, 0, 0.5); z-index: 10; } .accordion-item { border-bottom: 1px solid rgba(255, 106, 0, 0.3); } .accordion-header { cursor: pointer; transition: all 0.3s ease; } .accordion-header:hover { color: var(--neon-orange); } .accordion-content { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; } .accordion-content.open { max-height: 300px; } .trust-icon { transition: all 0.3s ease; } .trust-icon:hover { transform: scale(1.2); animation: pulse-blue 1s infinite; } .feature-card:hover { transform: translateY(-10px); box-shadow: 0 0 30px rgba(0, 228, 255, 0.3); } .social-icon:hover { color: var(--neon-blue); text-shadow: var(--glow-blue); } .nav-scrolled { background: rgba(10, 10, 10, 0.9); backdrop-filter: blur(15px); box-shadow: 0 5px 20px rgba(255, 106, 0, 0.1); } @keyframes pulse-orange { 0% { box-shadow: 0 0 10px rgba(255, 106, 0, 0.7); } 50% { box-shadow: 0 0 25px rgba(255, 106, 0, 0.9); } 100% { box-shadow: 0 0 10px rgba(255, 106, 0, 0.7); } } @keyframes pulse-blue { 0% { box-shadow: 0 0 10px rgba(0, 228, 255, 0.7); } 50% { box-shadow: 0 0 25px rgba(0, 228, 255, 0.9); } 100% { box-shadow: 0 0 10px rgba(0, 228, 255, 0.7); } } @keyframes flicker-blue { 0% { box-shadow: var(--glow-blue); } 100% { box-shadow: 0 0 15px rgba(0, 228, 255, 0.9), 0 0 30px rgba(0, 228, 255, 0.6); } } @keyframes float { 0% { transform: translateY(0); } 50% { transform: translateY(-10px); } 100% { transform: translateY(0); } } .floating { animation: float 3s ease-in-out infinite; } .section-title { position: relative; display: inline-block; } .section-title::after { content: ''; position: absolute; bottom: -10px; left: 0; width: 100%; height: 3px; background: linear-gradient(90deg, transparent, var(--neon-orange), transparent); box-shadow: var(--glow-orange); } .volatility-bar { height: 8px; background: rgba(255, 255, 255, 0.1); border-radius: 4px; overflow: hidden; } .volatility-fill { height: 100%; background: linear-gradient(90deg, #FF6A00, #FF4500); border-radius: 4px; } .rtp-bar { height: 8px; background: rgba(255, 255, 255, 0.1); border-radius: 4px; overflow: hidden; } .rtp-fill { height: 100%; background: linear-gradient(90deg, #00E4FF, #0099FF); border-radius: 4px; } .testimonial-card { transition: all 0.3s ease; } .testimonial-card:hover { transform: translateY(-5px); box-shadow: 0 0 30px rgba(0, 228, 255, 0.3); } .feature-tag { background: rgba(255, 106, 0, 0.2); border: 1px solid var(--neon-orange); box-shadow: var(--glow-orange); transition: all 0.3s ease; } .feature-tag:hover { background: rgba(255, 106, 0, 0.4); animation: pulse-orange 1s infinite; } .coin-canvas { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; } </style> </head> <body> <!-- Coin Canvas Background --> <canvas id="coinCanvas" class="coin-canvas"></canvas> <!-- Sticky Navbar --> <nav id="navbar" class="fixed top-0 left-0 w-full py-4 px-4 md:px-8 flex justify-between items-center z-50 backdrop-blur-md transition-all duration-300"> <div class="flex items-center"> <h1 class="orbitron text-2xl md:text-3xl neon-orange">NIOPLAY</h1> </div> <div class="flex items-center space-x-4"> <button class="btn-blue px-4 py-2 rounded-full orbitron text-sm md:text-base">Log In</button> <button class="btn-orange px-4 py-2 rounded-full orbitron text-sm md:text-base">Sign Up</button> </div> </nav> <!-- Hero Section --> <section class="min-h-screen flex flex-col justify-center items-center px-4 pt-16 pb-24 relative overflow-hidden"> <div class="text-center max-w-4xl z-10"> <h1 class="orbitron text-4xl md:text-6xl lg:text-7xl mb-6 neon-orange floating">PLAY FOR FREE & WIN REAL PRIZES.</h1> <p class="text-xl md:text-2xl mb-10 neon-glow-white max-w-3xl mx-auto">Nioplay is America's most popular Social Sweepstakes Casino Fully legal, Fast rewards, and Always Free to Play.</p> <div class="flex flex-col sm:flex-row justify-center gap-4 mb-8"> <button class="btn-orange px-8 py-4 rounded-full orbitron text-lg">Start Playing</button> <button class="btn-blue px-8 py-4 rounded-full orbitron text-lg">See How It Works</button> </div> <p class="text-sm md:text-base opacity-80">100% Legal · Instant Redeems · 18+ Only · No Purchase Necessary</p> </div> <!-- Floating coins behind headline --> <div class="absolute top-1/4 left-1/4 w-6 h-6 rounded-full bg-gradient-to-br from-yellow-300 to-orange-500 shadow-lg shadow-yellow-500/50"></div> <div class="absolute top-1/3 right-1/4 w-5 h-5 rounded-full bg-gradient-to-br from-yellow-300 to-orange-500 shadow-lg shadow-yellow-500/50"></div> <div class="absolute top-1/2 left-1/3 w-7 h-7 rounded-full bg-gradient-to-br from-yellow-300 to-orange-500 shadow-lg shadow-yellow-500/50"></div> </section> <!-- Trust Bar --> <section class="trust-bar relative z-20 bg-black/60 py-6 border-y border-white/10"> <div class="max-w-7xl mx-auto px-4 flex flex-wrap justify-center"> <div class="trust-icon flex items-center m-2 px-4 py-2 rounded-full transition-all"> <span class="text-primary mr-2">✔</span> <span class="text-sm">U.S. Legal</span> </div> <div class="trust-icon flex items-center m-2 px-4 py-2 rounded-full transition-all"> <span class="text-secondary mr-2">🔐</span> <span class="text-sm">KYC Compliant</span> </div> <div class="trust-icon flex items-center m-2 px-4 py-2 rounded-full transition-all"> <span class="text-accent mr-2">🪙</span> <span class="text-sm">Crypto Friendly</span> </div> <div class="trust-icon flex items-center m-2 px-4 py-2 rounded-full transition-all"> <span class="text-primary mr-2">⚡</span> <span class="text-sm">Instant Redeems</span> </div> <div class="trust-icon flex items-center m-2 px-4 py-2 rounded-full transition-all"> <span class="text-secondary mr-2">🔞</span> <span class="text-sm">18+ Verified</span> </div> </div> </section> <!-- How Nioplay Works --> <section class="py-20 px-4"> <div class="max-w-4xl mx-auto text-center mb-16"> <h2 class="orbitron text-3xl md:text-4xl mb-4 neon-orange section-title">HOW NIOPLAY WORKS</h2> <p class="text-lg opacity-90 max-w-2xl mx-auto">Join millions of players winning real cash prizes every day with our simple three-step process</p> </div> <div class="max-w-4xl mx-auto space-y-16"> <!-- Step 1 --> <div class="glass-card rounded-2xl p-6 md:p-8 relative overflow-hidden"> <div class="flex flex-col md:flex-row items-center gap-8"> <div class="flex-shrink-0 w-16 h-16 rounded-full bg-gradient-to-br from-black-600 to-black-800 flex items-center justify-center text-6xl"> ✅ </div> <div class="text-center md:text-left"> <h3 class="orbitron text-2xl mb-2 neon-orange">Sign Up & Verify</h3> <p class="mb-4 opacity-90">Create your account in seconds. Verify your identity to unlock daily bonuses and redemptions.</p> <div class="pill-badge orbitron text-sm py-2 px-4 rounded-full inline-block">+300% FREE COINS ON VERIFICATION</div> </div> </div> </div> <!-- Step 2 --> <div class="glass-card rounded-2xl p-6 md:p-8 relative overflow-hidden"> <div class="flex flex-col md:flex-row items-center gap-8"> <div class="flex-shrink-0 w-16 h-16 rounded-full bg-gradient-to-br from-black-600 to-black-800 flex items-center justify-center text-6xl"> 🎰 </div> <div class="text-center md:text-left"> <h3 class="orbitron text-2xl mb-2 neon-orange">Play Games & Win</h3> <p class="mb-4 opacity-90">Explore 1,000+ games including Megaways slots, fish shooters, blackjack, and live dealers. Earn Gold Coins or Sweeps Coins with every spin.</p> <div class="pill-badge orbitron text-sm py-2 px-4 rounded-full inline-block">100% MOBILE FRIENDLY – NO DOWNLOAD NEEDED</div> </div> </div> </div> <!-- Step 3 --> <div class="glass-card rounded-2xl p-6 md:p-8 relative overflow-hidden"> <div class="flex flex-col md:flex-row items-center gap-8"> <div class="flex-shrink-0 w-16 h-16 rounded-full bg-gradient-to-br from-black-600 to-black-800 flex items-center justify-center text-6xl"> 💳 </div> <div class="text-center md:text-left"> <h3 class="orbitron text-2xl mb-2 neon-orange">Redeem for Real Rewards</h3> <p class="mb-4 opacity-90">Withdraw prizes in 24 hours or less via Debit Card, Bank Transfer, Crypto, or Gift Cards. Fast, easy, secure.</p> <div class="pill-badge orbitron text-sm py-2 px-4 rounded-full inline-block">24H Debit card, Bank Transfer, Crypto REDEMPTION GUARANTEED</div> </div> </div> </div> </div> </section> <!-- Featured Games --> <section class="py-20 px-4"> <div class="max-w-6xl mx-auto"> <div class="text-center mb-16"> <h2 class="orbitron text-3xl md:text-4xl mb-4 neon-orange section-title">FEATURED GAMES</h2> <p class="text-lg opacity-90">Top-rated games with massive win potential</p> </div> <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8"> <!-- Game Card 1 --> <div class="game-card glass-card rounded-2xl p-6 transition-all duration-300 relative overflow-hidden"> <div class="aspect-video rounded-xl mb-4 bg-gradient-to-br from-gray-900 to-black border border-orange-500/30 flex items-center justify-center"> <span class="orbitron text-xl neon-orange">GOLDEN JACKPOT</span> </div> <h3 class="orbitron text-xl mb-2 neon-orange">Golden Jackpot</h3> <div class="flex items-center mb-3"> <div class="flex text-yellow-400 mr-2"> <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> <span class="text-sm">4.7 / 5</span> </div> <div class="mb-3"> <div class="flex justify-between text-sm mb-1"> <span>Volatility</span> <span>High</span> </div> <div class="volatility-bar"> <div class="volatility-fill w-4/5"></div> </div> </div> <div class="mb-4"> <div class="flex justify-between text-sm mb-1"> <span>RTP</span> <span>96.5%</span> </div> <div class="rtp-bar"> <div class="rtp-fill w-11/12"></div> </div> </div> <div class="flex flex-wrap gap-2 mb-4"> <span class="feature-tag text-xs py-1 px-3 rounded-full">Jackpot</span> <span class="feature-tag text-xs py-1 px-3 rounded-full">Bonus Buy</span> <span class="feature-tag text-xs py-1 px-3 rounded-full">Megaways</span> </div> <div class="pill-badge orbitron text-xs py-1 px-3 rounded-full mb-4">+1,000 FREE COINS</div> <button class="btn-blue w-full py-3 rounded-full orbitron">Play Now</button> </div> <!-- Game Card 2 --> <div class="game-card glass-card rounded-2xl p-6 transition-all duration-300 relative overflow-hidden"> <div class="aspect-video rounded-xl mb-4 bg-gradient-to-br from-gray-900 to-black border border-blue-500/30 flex items-center justify-center"> <span class="orbitron text-xl neon-blue">FISH FRENZY X</span> </div> <h3 class="orbitron text-xl mb-2 neon-blue">Fish Frenzy X</h3> <div class="flex items-center mb-3"> <div class="flex text-yellow-400 mr-2"> <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> <span class="text-sm">5.0 / 5</span> </div> <div class="mb-3"> <div class="flex justify-between text-sm mb-1"> <span>Volatility</span> <span>Medium</span> </div> <div class="volatility-bar"> <div class="volatility-fill w-3/5"></div> </div> </div> <div class="mb-4"> <div class="flex justify-between text-sm mb-1"> <span>RTP</span> <span>97.2%</span> </div> <div class="rtp-bar"> <div class="rtp-fill w-full"></div> </div> </div> <div class="flex flex-wrap gap-2 mb-4"> <span class="feature-tag text-xs py-1 px-3 rounded-full">Multiplier</span> <span class="feature-tag text-xs py-1 px-3 rounded-full">Big Bonus</span> </div> <div class="pill-badge orbitron text-xs py-1 px-3 rounded-full mb-4">+1,000 FREE COINS</div> <button class="btn-blue w-full py-3 rounded-full orbitron">Play Now</button> </div> <!-- Game Card 3 --> <div class="game-card glass-card rounded-2xl p-6 transition-all duration-300 relative overflow-hidden"> <div class="aspect-video rounded-xl mb-4 bg-gradient-to-br from-gray-900 to-black border border-orange-500/30 flex items-center justify-center"> <span class="orbitron text-xl neon-orange">BLACKJACK VIP</span> </div> <h3 class="orbitron text-xl mb-2 neon-orange">Blackjack VIP</h3> <div class="flex items-center mb-3"> <div class="flex text-yellow-400 mr-2"> <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> </div> <span class="text-sm">4.2 / 5</span> </div> <div class="mb-3"> <div class="flex justify-between text-sm mb-1"> <span>Volatility</span> <span>Low</span> </div> <div class="volatility-bar"> <div class="volatility-fill w-2/5"></div> </div> </div> <div class="mb-4"> <div class="flex justify-between text-sm mb-1"> <span>RTP</span> <span>99.2%</span> </div> <div class="rtp-bar"> <div class="rtp-fill w-10/12"></div> </div> </div> <div class="flex flex-wrap gap-2 mb-4"> <span class="feature-tag text-xs py-1 px-3 rounded-full">Live Dealer</span> <span class="feature-tag text-xs py-1 px-3 rounded-full">VIP Tables</span> </div> <div class="pill-badge orbitron text-xs py-1 px-3 rounded-full mb-4">+1,000 FREE COINS</div> <button class="btn-blue w-full py-3 rounded-full orbitron">Play Now</button> </div> </div> </div> </section> <!-- Promo Banner --> <section class="py-20 px-4 relative overflow-hidden"> <div class="max-w-4xl mx-auto glass-card rounded-3xl p-8 md:p-12 text-center"> <div class="mb-6"> <span class="text-4xl">🎁</span> <h2 class="orbitron text-3xl md:text-4xl mb-4 neon-orange">LIMITED-TIME BONUS: GET 300% MORE IN FREE COINS</h2> <p class="text-lg mb-8 opacity-90">Verify your account and claim your free coins instantly — No Purchase Necessary.</p> </div> <div class="max-w-md mx-auto mb-8"> <div class="flex"> <input type="text" placeholder="Enter bonus code (optional)" class="flex-grow bg-gray-900 border border-orange-500/50 rounded-l-full py-4 px-6 focus:outline-none focus:ring-2 focus:ring-orange-500"> <button class="btn-blue px-6 py-4 rounded-r-full orbitron">Apply</button> </div> </div> <button class="btn-orange px-12 py-4 rounded-full orbitron text-xl mx-auto">CLAIM NOW</button> <p class="text-xs opacity-60 mt-8">No purchase necessary. Offer valid for verified accounts only. 18+ to play.</p> </div> <!-- Decorative coins --> <div class="absolute top-20 left-10 w-8 h-8 rounded-full bg-gradient-to-br from-yellow-300 to-orange-500 shadow-lg shadow-yellow-500/50"></div> <div class="absolute bottom-20 right-10 w-10 h-10 rounded-full bg-gradient-to-br from-yellow-300 to-orange-500 shadow-lg shadow-yellow-500/50"></div> </section> <!-- Why Nioplay --> <section class="py-20 px-4"> <div class="max-w-6xl mx-auto"> <div class="text-center mb-16"> <h2 class="orbitron text-3xl md:text-4xl mb-4 neon-orange section-title">WHY PLAYERS CHOOSE NIOPLAY</h2> <p class="text-lg opacity-90">Experience the future of sweepstakes gaming</p> </div> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> <!-- Feature 1 --> <div class="feature-card glass-card rounded-2xl p-6 transition-all duration-300"> <div class="text-4xl mb-4 neon-blue">🕒</div> <h3 class="orbitron text-xl mb-3 neon-blue">Same Day 24HR Redemptions</h3> <p class="opacity-90">Get your winnings fast — verified redemptions processed in 24 hours.</p> </div> <!-- Feature 2 --> <div class="feature-card glass-card rounded-2xl p-6 transition-all duration-300"> <div class="text-4xl mb-4 neon-orange">🧾</div> <h3 class="orbitron text-xl mb-3 neon-orange">Legal Sweepstakes Model</h3> <p class="opacity-90">Nioplay is fully U.S.-compliant under federal sweepstakes law.</p> </div> <!-- Feature 3 --> <div class="feature-card glass-card rounded-2xl p-6 transition-all duration-300"> <div class="text-4xl mb-4 neon-blue">📱</div> <h3 class="orbitron text-xl mb-3 neon-blue">No Download Needed</h3> <p class="opacity-90">Instant-play on mobile or desktop with no app required.</p> </div> <!-- Feature 4 --> <div class="feature-card glass-card rounded-2xl p-6 transition-all duration-300"> <div class="text-4xl mb-4 neon-orange">🧠</div> <h3 class="orbitron text-xl mb-3 neon-orange">VIP Rakeback System</h3> <p class="opacity-90">Climb tiers and earn daily rakeback, streak bonuses, and exclusive perks.</p> </div> <!-- Feature 5 --> <div class="feature-card glass-card rounded-2xl p-6 transition-all duration-300"> <div class="text-4xl mb-4 neon-blue">🎲</div> <h3 class="orbitron text-xl mb-3 neon-blue">1,000+ Game Catalog</h3> <p class="opacity-90">From classic slots to high-volatility bonus buys — something for everyone.</p> </div> <!-- Feature 6 --> <div class="feature-card glass-card rounded-2xl p-6 transition-all duration-300"> <div class="text-4xl mb-4 neon-orange">✅</div> <h3 class="orbitron text-xl mb-3 neon-orange">Fast KYC Process</h3> <p class="opacity-90">Identity verification is instant — no waiting days to redeem.</p> </div> </div> </div> </section> <!-- Testimonials --> <section class="py-20 px-4"> <div class="max-w-6xl mx-auto"> <div class="text-center mb-16"> <h2 class="orbitron text-3xl md:text-4xl mb-4 neon-orange section-title">REAL WINNERS. REAL PRIZES.</h2> <p class="text-lg opacity-90">Hear from players who have won on Nioplay</p> </div> <div class="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-16 h-16 rounded-full bg-gradient-to-br from-orange-600 to-orange-800 flex items-center justify-center text-2xl mr-4"> T </div> <div> <h3 class="orbitron text-xl neon-orange">@TonyTrickz</h3> <p class="text-sm opacity-80">🎮 Fish Frenzy X</p> </div> </div> <div class="flex text-yellow-400 mb-4"> <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> <p class="mb-4 italic opacity-90">"Hit the jackpot on my third spin! Couldn't believe how fast the debit redemption was."</p> <div class="pill-badge orbitron text-xs py-1 px-3 rounded-full inline-block">$720 Debit Card Redeem.</div> </div> <!-- Testimonial 2 --> <div class="testimonial-card glass-card rounded-2xl p-6"> <div class="flex items-center mb-4"> <div class="w-16 h-16 rounded-full bg-gradient-to-br from-blue-600 to-blue-800 flex items-center justify-center text-2xl mr-4"> S </div> <div> <h3 class="orbitron text-xl neon-blue">@SarahSlots</h3> <p class="text-sm opacity-80">🎮 Golden Jackpot</p> </div> </div> <div class="flex text-yellow-400 mb-4"> <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> <p class="mb-4 italic opacity-90">"Verified in minutes, won 200 the next day. Withdrawal hit my bank in 2 hours!"</p> <div class="pill-badge orbitron text-xs py-1 px-3 rounded-full inline-block">Redeemed $200 Cash Prize</div> </div> <!-- Testimonial 3 --> <div class="testimonial-card glass-card rounded-2xl p-6"> <div class="flex items-center mb-4"> <div class="w-16 h-16 rounded-full bg-gradient-to-br from-orange-600 to-orange-800 flex items-center justify-center text-2xl mr-4"> J </div> <div> <h3 class="orbitron text-xl neon-orange">@JackpotJake</h3> <p class="text-sm opacity-80">🎮 Blackjack VIP</p> </div> </div> <div class="flex text-yellow-400 mb-4"> <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> <p class="mb-4 italic opacity-90">"The VIP rakeback system is insane. I earn coins just for playing my favorite games!"</p> <div class="pill-badge orbitron text-xs py-1 px-3 rounded-full inline-block">VIP Tier 4 Player</div> </div> </div> </div> </section> <!-- FAQ --> <section class="py-20 px-4"> <div class="max-w-4xl mx-auto"> <div class="text-center mb-16"> <h2 class="orbitron text-3xl md:text-4xl mb-4 neon-orange section-title">FREQUENTLY ASKED QUESTIONS</h2> <p class="text-lg opacity-90">Everything you need to know about Nioplay</p> </div> <div class="space-y-4"> <!-- FAQ 1 --> <div class="accordion-item glass-card rounded-2xl overflow-hidden"> <div class="accordion-header p-6 flex justify-between items-center"> <h3 class="orbitron text-xl neon-orange">Is Nioplay legal?</h3> <span class="text-xl">+</span> </div> <div class="accordion-content"> <div class="p-6 pt-0 opacity-90"> <p>Yes. Nioplay is a U.S.-based sweepstakes casino, fully compliant with sweepstakes gaming laws in all states where we operate. Our platform operates under the same legal framework as national sweepstakes promotions.</p> </div> </div> </div> <!-- FAQ 2 --> <div class="accordion-item glass-card rounded-2xl overflow-hidden"> <div class="accordion-header p-6 flex justify-between items-center"> <h3 class="orbitron text-xl neon-orange">Can I win real money?</h3> <span class="text-xl">+</span> </div> <div class="accordion-content"> <div class="p-6 pt-0 opacity-90"> <p>Absolutely. You can win gift cards, crypto redemptions, and other cash-equivalent prizes. All prizes have real-world value and can be redeemed through our secure platform.</p> </div> </div> </div> <!-- FAQ 3 --> <div class="accordion-item glass-card rounded-2xl overflow-hidden"> <div class="accordion-header p-6 flex justify-between items-center"> <h3 class="orbitron text-xl neon-orange">What games can I play?</h3> <span class="text-xl">+</span> </div> <div class="accordion-content"> <div class="p-6 pt-0 opacity-90"> <p>Nioplay offers slots, table games, live dealers, fish games, and instant win titles from top providers. Our library includes over 1,000 games with new releases added weekly.</p> </div> </div> </div> <!-- FAQ 4 --> <div class="accordion-item glass-card rounded-2xl overflow-hidden"> <div class="accordion-header p-6 flex justify-between items-center"> <h3 class="orbitron text-xl neon-orange">Do I need to make a purchase?</h3> <span class="text-xl">+</span> </div> <div class="accordion-content"> <div class="p-6 pt-0 opacity-90"> <p>No purchase is required. You'll receive daily free coins just for logging in, plus additional bonuses through our mail system. All games can be played completely free.</p> </div> </div> </div> <!-- FAQ 5 --> <div class="accordion-item glass-card rounded-2xl overflow-hidden"> <div class="accordion-header p-6 flex justify-between items-center"> <h3 class="orbitron text-xl neon-orange">How fast are redeems?</h3> <span class="text-xl">+</span> </div> <div class="accordion-content"> <div class="p-6 pt-0 opacity-90"> <p>All redemptions are processed within 24 hours for verified users. Crypto withdrawals typically complete in under 4 hours, while bank transfers take 1-3 business days.</p> </div> </div> </div> </div> </div> </section> <!-- Final CTA --> <section class="py-20 bg-gradient-to-b from-black to-orange-900/20"> <div class="max-w-4xl mx-auto text-center"> <h2 class="orbitron text-3xl md:text-5xl mb-6 neon-orange">JOIN 1,000,000+ PLAYERS WINNING DAILY ON NIOPLAY</h2> <button class="px-16 py-5 rounded-full btn-orange text-2xl font-bold pulse mb-8 scroll-fade"> START PLAYING NOW </button> <p class="text-sm opacity-60 max-w-2xl mx-auto">No purchase necessary. 18+ only. Nioplay is a sweepstakes gaming platform and is fully compliant with all Federal and State laws. Nioplay's Sweepstakes offerings are invalid for all residents in Idaho, Louisiana, Michigan, Montana, Nevada, New York, and Washington. For more information, please see our Terms & Conditions or email us at support@nioplay.net.</p> </div> </div> </div> </div> </div> </section> <!-- Footer --> <footer class="pt-16 pb-8 px-4 border-t border-gray-800"> <div class="max-w-6xl mx-auto"> <div class="flex flex-col md:flex-row justify-between items-center mb-12"> <div class="mb-6 md:mb-0"> <h2 class="orbitron text-2xl neon-orange">NIOPLAY</h2> </div> <div class="flex flex-wrap justify-center gap-6 mb-6 md:mb-0"> <a href="#" class="orbitron text-sm hover:text-orange-500 transition-all">Terms of Service</a> <a href="#" class="orbitron text-sm hover:text-orange-500 transition-all">Privacy Policy</a> <a href="#" class="orbitron text-sm hover:text-orange-500 transition-all">FAQ</a> <a href="#" class="orbitron text-sm hover:text-orange-500 transition-all">Responsible Gaming</a> <a href="#" class="orbitron text-sm hover:text-orange-500 transition-all">Contact Support</a> </div> <div class="flex space-x-6"> <a href="#" class="social-icon text-xl hover:text-blue-500 transition-all"><i class="fab fa-facebook"></i></a> <a href="#" class="social-icon text-xl hover:text-blue-500 transition-all"><i class="fab fa-instagram"></i></a> <a href="#" class="social-icon text-xl hover:text-blue-500 transition-all"><i class="fab fa-twitter"></i></a> <a href="#" class="social-icon text-xl hover:text-blue-500 transition-all"><i class="fab fa-discord"></i></a> </div> </div> <div class="text-center pt-8 border-t border-gray-800"> <p class="text-sm opacity-60">© 2025 Nioplay Inc. All rights reserved.</p> </div> </div> </footer> <script> // Coin animation canvas const canvas = document.getElementById('coinCanvas'); const ctx = canvas.getContext('2d'); // Set canvas size canvas.width = window.innerWidth; canvas.height = window.innerHeight; // Coin class class Coin { constructor() { this.reset(); this.x = Math.random() * canvas.width; this.y = -20; } reset() { this.size = Math.random() * 10 + 5; this.speed = Math.random() * 3 + 1; this.x = Math.random() * canvas.width * 1.2; this.y = -20; this.opacity = Math.random() * 0.5 + 0.3; this.trailLength = Math.floor(Math.random() * 10) + 5; this.trail = []; } update() { this.x -= this.speed * 0.7; this.y += this.speed; // Store position for trail this.trail.push({x: this.x, y: this.y}); if (this.trail.length > this.trailLength) { this.trail.shift(); } // Reset if off screen if (this.y > canvas.height + 20 || this.x < -20) { this.reset(); } } draw() { // Draw trail for (let i = 0; i < this.trail.length; i++) { const pos = this.trail[i]; const trailOpacity = this.opacity * (i / this.trail.length); ctx.beginPath(); ctx.arc(pos.x, pos.y, this.size * 0.3, 0, Math.PI * 2); ctx.fillStyle = `rgba(255, 215, 0, ${trailOpacity * 0.5})`; ctx.fill(); } // Draw coin ctx.beginPath(); ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2); const gradient = ctx.createRadialGradient( this.x, this.y, 0, this.x, this.y, this.size ); gradient.addColorStop(0, 'rgba(255, 215, 0, 1)'); gradient.addColorStop(1, 'rgba(255, 165, 0, 0.8)'); ctx.fillStyle = gradient; ctx.fill(); // Draw shine ctx.beginPath(); ctx.arc(this.x - this.size/3, this.y - this.size/3, this.size/3, 0, Math.PI * 2); ctx.fillStyle = 'rgba(255, 255, 255, 0.7)'; ctx.fill(); } } // Create coins const coins = []; const coinCount = 25; for (let i = 0; i < coinCount; i++) { coins.push(new Coin()); } // Animation loop function animate() { ctx.clearRect(0, 0, canvas.width, canvas.height); coins.forEach(coin => { coin.update(); coin.draw(); }); requestAnimationFrame(animate); } // Handle window resize window.addEventListener('resize', () => { canvas.width = window.innerWidth; canvas.height = window.innerHeight; }); // Start animation animate(); // Navbar scroll effect window.addEventListener('scroll', () => { const navbar = document.getElementById('navbar'); if (window.scrollY > 50) { navbar.classList.add('nav-scrolled'); } else { navbar.classList.remove('nav-scrolled'); } }); // Accordion functionality const accordionHeaders = document.querySelectorAll('.accordion-header'); accordionHeaders.forEach(header => { header.addEventListener('click', () => { const content = header.nextElementSibling; content.classList.toggle('open'); // Toggle icon const icon = header.querySelector('span'); icon.textContent = icon.textContent === '+' ? '−' : '+'; }); }); // Coin burst effect on CTA hover const ctas = document.querySelectorAll('button'); ctas.forEach(cta => { cta.addEventListener('mouseenter', createCoinBurst); }); function createCoinBurst(e) { const rect = e.target.getBoundingClientRect(); const centerX = rect.left + rect.width / 2; const centerY = rect.top + rect.height / 2; for (let i = 0; i < 6; i++) { setTimeout(() => { const coin = document.createElement('div'); coin.classList.add('coin-burst'); coin.style.left = `${centerX}px`; coin.style.top = `${centerY}px`; document.body.appendChild(coin); // Animate gsap.to(coin, { x: (Math.random() - 0.5) * 100, y: (Math.random() - 1) * 100, opacity: 1, duration: 0.3, ease: "power2.out" }); // Remove after animation setTimeout(() => { coin.remove(); }, 1000); }, i * 50); } } // Initialize GSAP animations for scroll-triggered effects document.addEventListener('DOMContentLoaded', () => { // Animate sections on scroll gsap.utils.toArray('section').forEach(section => { gsap.from(section, { scrollTrigger: { trigger: section, start: 'top 80%', toggleActions: 'play none none none' }, opacity: 0, y: 50, duration: 1 }); }); // Create coin burst when scrolling to new sections ScrollTrigger.create({ trigger: "section", start: "top 70%", onEnter: () => { createCoinBurst({target: document.body}); } }); }); </script> </body> </html> - Initial Deployment
-
83.5 kB
Promote version 82f6bce to main
-
2.74 kB
Add a randomize alternating rewards Floating Pill underneath the "Sticky Payment Marquee"
