| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620 |
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>Home</title>
- <script src="https://cdn.tailwindcss.com"></script>
- <script>
- window.FontAwesomeConfig = { autoReplaceSvg: 'nest'};
- tailwind.config = {
- theme: {
- extend: {
- colors: {
- 'casino-dark': '#0F131C',
- 'casino-card': '#1C212E',
- 'casino-green': '#00C853',
- 'casino-gold': '#FFD700',
- 'casino-red': '#D32F2F',
- 'casino-purple': '#6200EA',
- 'nav-active': '#00E676',
- 'modal-bg': '#2C313C',
- 'modal-overlay': 'rgba(0, 0, 0, 0.75)'
- },
- backgroundImage: {
- 'hero-gradient': 'linear-gradient(to right, #0f131c, #1a2332)',
- 'gold-gradient': 'linear-gradient(135deg, #FFD700 0%, #FDB931 50%, #FFD700 100%)',
- 'btn-gradient': 'linear-gradient(to bottom, #00E676, #00C853)',
- 'vip-gradient': 'linear-gradient(135deg, #303030 0%, #1a1a1a 100%)',
- 'link-banner-gradient': 'linear-gradient(to right, #6a74bc, #8a94d8)',
- 'alert-gradient': 'linear-gradient(180deg, #383E4C 0%, #2C313C 100%)'
- },
- fontFamily: {
- 'sans': ['Inter', 'sans-serif'],
- 'display': ['Montserrat', 'sans-serif']
- }
- }
- }
- }
- </script>
- <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/js/all.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
- <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Montserrat:wght@700;800&display=swap" rel="stylesheet">
- <style>
- ::-webkit-scrollbar { display: none;}
- .glow-text { text-shadow: 0 0 10px rgba(0, 200, 83, 0.5); }
- .gold-text-shadow { text-shadow: 0 1px 2px rgba(0,0,0,0.5); }
- .nav-item-active { color: #00E676; }
- .game-card-hover:active { transform: scale(0.98); transition: transform 0.1s; }
- .bottom-nav-shadow { box-shadow: 0 -4px 20px rgba(0,0,0,0.5); }
- .floating-play-btn { box-shadow: 0 0 15px rgba(0, 230, 118, 0.4); }
-
- /* Modal Transitions */
- .modal {
- transition: opacity 0.3s ease, visibility 0.3s ease;
- opacity: 0;
- visibility: hidden;
- pointer-events: none;
- }
- .modal.active {
- opacity: 1;
- visibility: visible;
- pointer-events: auto;
- }
- .modal-content {
- transform: scale(0.95);
- transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
- }
- .modal.active .modal-content {
- transform: scale(1);
- }
- </style>
- </head>
- <body class="bg-casino-dark text-white font-sans antialiased min-h-screen relative pb-24 overflow-x-hidden">
- <!-- Top Banner -->
- <div id="top-banner" class="bg-green-600 text-white px-4 py-2 flex justify-between items-center text-xs font-bold sticky top-0 z-40 shadow-lg">
- <div class="flex items-center gap-2">
- <i class="fa-solid fa-download"></i>
- <span>Download to get BONUS $5</span>
- </div>
- <div class="flex items-center gap-3">
- <button class="bg-yellow-400 text-black px-3 py-1 rounded-full uppercase text-[10px] font-extrabold hover:bg-yellow-300 transition">Download</button>
- <i class="fa-solid fa-xmark cursor-pointer text-lg"></i>
- </div>
- </div>
- <!-- Header -->
- <header id="header" class="px-4 py-3 flex justify-between items-center bg-casino-dark/95 backdrop-blur-sm sticky top-[36px] z-30 border-b border-gray-800">
- <div class="flex items-center gap-2">
- <div class="text-2xl font-display font-extrabold italic tracking-tighter text-green-500 flex items-center">
- <span class="text-white">Win</span><span class="text-green-400">US</span><span class="text-green-500 text-3xl ml-1">777</span>
- </div>
- </div>
- <div class="flex items-center gap-3">
- <div class="text-right">
- <div class="text-[10px] text-gray-400">Balance</div>
- <div class="text-sm font-bold text-yellow-400">$1,240.50</div>
- </div>
- <button class="bg-yellow-500 hover:bg-yellow-400 w-8 h-8 rounded-lg flex items-center justify-center text-black shadow-lg shadow-yellow-500/20">
- <i class="fa-solid fa-plus"></i>
- </button>
- <div class="relative">
- <i class="fa-regular fa-envelope text-2xl text-gray-300"></i>
- <span class="absolute -top-1 -right-1 bg-red-500 text-white text-[8px] w-4 h-4 rounded-full flex items-center justify-center font-bold">3</span>
- </div>
- <div class="w-9 h-9 rounded-full overflow-hidden border-2 border-gray-700">
- <img src="https://storage.googleapis.com/uxpilot-auth.appspot.com/avatars/avatar-3.jpg" alt="User" class="w-full h-full object-cover">
- </div>
- </div>
- </header>
- <!-- Hero Section: Banner Carousel -->
- <section id="hero" class="mt-2 px-2">
- <div class="relative w-full h-48 rounded-2xl overflow-hidden shadow-2xl border border-gray-800">
- <div class="absolute inset-0 bg-gradient-to-r from-black/80 to-transparent z-10 pointer-events-none"></div>
- <img class="w-full h-full object-cover" src="https://storage.googleapis.com/uxpilot-auth.appspot.com/c418736a82-da5a554e497b614ee16c.png" alt="cinematic shot of a happy man holding a suitcase full of cash dollars, casino background with flying money and gold coins, vibrant colors, photorealistic, 8k" />
-
- <div class="absolute top-0 left-0 h-full w-2/3 z-20 p-5 flex flex-col justify-center">
- <div class="text-yellow-400 font-bold text-sm mb-1 tracking-wider uppercase animate-pulse">Limited Time Offer</div>
- <h1 class="text-3xl font-display font-black text-white leading-tight mb-2">
- FIRST DEPOSIT <br>
- <span class="text-green-400 text-4xl drop-shadow-lg">270% BONUS</span>
- </h1>
- <button onclick="openModal('modal-link-phone')" class="bg-btn-gradient text-black font-bold py-2 px-6 rounded-full w-max shadow-lg shadow-green-500/30 transform active:scale-95 transition text-sm uppercase">
- Claim Now
- </button>
- </div>
- <!-- Pagination Dots -->
- <div class="absolute bottom-3 left-1/2 transform -translate-x-1/2 z-20 flex gap-2">
- <div class="w-6 h-1.5 bg-white rounded-full"></div>
- <div class="w-1.5 h-1.5 bg-gray-500 rounded-full"></div>
- <div class="w-1.5 h-1.5 bg-gray-500 rounded-full"></div>
- </div>
-
- <!-- Bonus Tag -->
- <div class="absolute top-0 right-0 bg-orange-500 text-white text-xs font-bold px-3 py-1 rounded-bl-xl z-20 shadow-md">
- Bonus +270%
- </div>
- </div>
- </section>
- <!-- Trigger Buttons for Demo Purposes -->
- <section class="px-3 mt-4 grid grid-cols-2 gap-2">
- <button onclick="openModal('modal-notification')" class="bg-gray-700 text-xs py-2 rounded border border-gray-600 hover:bg-gray-600 transition">1. Notification</button>
- <button onclick="openModal('modal-add-home')" class="bg-gray-700 text-xs py-2 rounded border border-gray-600 hover:bg-gray-600 transition">2. Add Home</button>
- <button onclick="openModal('modal-link-phone')" class="bg-gray-700 text-xs py-2 rounded border border-gray-600 hover:bg-gray-600 transition">3. Link Phone</button>
- <button onclick="openModal('modal-confirmation')" class="bg-gray-700 text-xs py-2 rounded border border-gray-600 hover:bg-gray-600 transition">4. Confirmation (New)</button>
- </section>
- <!-- Quick Stats / Bonus Progress -->
- <section id="bonus-progress" class="px-3 mt-4">
- <div class="bg-casino-card rounded-xl p-3 border border-gray-800 shadow-lg flex items-center justify-between">
- <div class="flex items-center gap-3 flex-1">
- <div class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center text-yellow-500 text-xl border border-gray-700">
- <i class="fa-solid fa-star"></i>
- </div>
- <div>
- <div class="text-xs text-gray-400">Total Free Bonus</div>
- <div class="text-sm font-bold text-yellow-400">$10.5 <span class="text-gray-500 text-[10px] font-normal">/ $40</span></div>
- <div class="w-full bg-gray-700 h-1.5 rounded-full mt-1 overflow-hidden">
- <div class="bg-gradient-to-r from-green-400 to-green-600 h-full rounded-full" style="width: 25%"></div>
- </div>
- </div>
- </div>
- <button class="bg-green-600 hover:bg-green-500 text-white text-xs font-bold py-2 px-4 rounded-lg ml-2 transition shadow-lg shadow-green-900/50">
- <i class="fa-solid fa-arrow-right-from-bracket mr-1"></i> Withdraw
- </button>
- </div>
- </section>
- <!-- Notice Bar -->
- <section id="notice" class="px-3 mt-3">
- <div class="bg-black/40 rounded-lg px-3 py-2 flex items-center gap-2 border border-white/5">
- <i class="fa-solid fa-bullhorn text-orange-500 animate-pulse"></i>
- <div class="overflow-hidden h-5 relative w-full">
- <div class="text-xs text-gray-300 whitespace-nowrap absolute animate-[marquee_10s_linear_infinite]">
- Congratulations to user <span class="text-yellow-400">Mike***99</span> for winning <span class="text-green-400">$5,420</span> in Buffalo King! New game "Zeus Lightning" is now live!
- </div>
- </div>
- </div>
- </section>
- <!-- Game Categories Navigation -->
- <section id="categories" class="mt-4 px-2">
- <div class="flex gap-2 overflow-x-auto pb-2 no-scrollbar">
- <button class="flex-shrink-0 bg-gradient-to-r from-green-600 to-green-500 text-white px-4 py-2 rounded-lg text-sm font-bold shadow-lg shadow-green-900/40 flex items-center gap-2 border border-green-400/30">
- <i class="fa-solid fa-fire"></i> Popular
- </button>
- <button class="flex-shrink-0 bg-casino-card text-gray-300 px-4 py-2 rounded-lg text-sm font-medium border border-gray-700 whitespace-nowrap flex items-center gap-2">
- <i class="fa-solid fa-gem text-purple-400"></i> Slots
- </button>
- <button class="flex-shrink-0 bg-casino-card text-gray-300 px-4 py-2 rounded-lg text-sm font-medium border border-gray-700 whitespace-nowrap flex items-center gap-2">
- <i class="fa-solid fa-fish text-blue-400"></i> Fishing
- </button>
- <button class="flex-shrink-0 bg-casino-card text-gray-300 px-4 py-2 rounded-lg text-sm font-medium border border-gray-700 whitespace-nowrap flex items-center gap-2">
- <i class="fa-solid fa-cards text-red-400"></i> Table
- </button>
- <button class="flex-shrink-0 bg-casino-card text-gray-300 px-4 py-2 rounded-lg text-sm font-medium border border-gray-700 whitespace-nowrap">
- Pragmatic Play
- </button>
- <button class="flex-shrink-0 bg-casino-card text-gray-300 px-4 py-2 rounded-lg text-sm font-medium border border-gray-700 whitespace-nowrap">
- JILI
- </button>
- </div>
- </section>
- <!-- Games Grid -->
- <main id="games-grid" class="px-2 mt-2 pb-4 grid grid-cols-3 gap-2">
-
- <!-- Game Card 1 -->
- <div class="game-card-hover relative group rounded-xl overflow-hidden aspect-[3/4] bg-gray-800 shadow-lg border border-gray-800">
- <div class="absolute top-1 left-1 z-10 bg-red-600 text-white text-[9px] font-bold px-1.5 py-0.5 rounded shadow-sm">HOT</div>
- <div class="w-full h-full overflow-hidden">
- <img class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-110" src="https://storage.googleapis.com/uxpilot-auth.appspot.com/6b80bf04be-5e1c5ae9ffa0bbab30f7.png" alt="illustration of a fierce buffalo head with glowing eyes, golden horns, desert canyon background, slot game icon style, vibrant orange and yellow colors" />
- </div>
- <div class="absolute bottom-0 left-0 w-full bg-gradient-to-t from-black via-black/80 to-transparent p-2 pt-6 flex flex-col items-center text-center">
- <h3 class="text-[10px] font-bold text-white leading-tight uppercase gold-text-shadow">Buffalo King</h3>
- <div class="text-[8px] text-gray-400 mt-0.5 flex items-center gap-1">
- <i class="fa-solid fa-fire-flame-curved text-orange-500"></i> Pragmatic
- </div>
- </div>
- </div>
- <!-- Game Card 2 -->
- <div class="game-card-hover relative group rounded-xl overflow-hidden aspect-[3/4] bg-gray-800 shadow-lg border border-gray-800">
- <div class="absolute top-1 right-1 z-10 bg-yellow-500 text-black rounded-full w-4 h-4 flex items-center justify-center text-[8px] font-bold">
- <i class="fa-solid fa-star"></i>
- </div>
- <div class="w-full h-full overflow-hidden">
- <img class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-110" src="https://storage.googleapis.com/uxpilot-auth.appspot.com/46cbc86c56-90de2b2012c32dc24432.png" alt="illustration of zeus god of thunder, white beard, glowing blue eyes, holding lightning bolt, mount olympus background, slot game style" />
- </div>
- <div class="absolute bottom-0 left-0 w-full bg-gradient-to-t from-black via-black/80 to-transparent p-2 pt-6 flex flex-col items-center text-center">
- <h3 class="text-[10px] font-bold text-white leading-tight uppercase gold-text-shadow">Gates of Olympus</h3>
- <div class="text-[8px] text-gray-400 mt-0.5 flex items-center gap-1">
- <i class="fa-solid fa-bolt text-yellow-400"></i> Pragmatic
- </div>
- </div>
- </div>
- <!-- Game Card 3 -->
- <div class="game-card-hover relative group rounded-xl overflow-hidden aspect-[3/4] bg-gray-800 shadow-lg border border-gray-800">
- <div class="w-full h-full overflow-hidden">
- <img class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-110" src="https://storage.googleapis.com/uxpilot-auth.appspot.com/c0e9498788-40d10307e7b4c073d640.png" alt="big golden 777 numbers with diamonds, sparkling background, classic slot machine style, luxury theme" />
- </div>
- <div class="absolute bottom-0 left-0 w-full bg-gradient-to-t from-black via-black/80 to-transparent p-2 pt-6 flex flex-col items-center text-center">
- <h3 class="text-[10px] font-bold text-white leading-tight uppercase gold-text-shadow">Crazy 777</h3>
- <div class="text-[8px] text-gray-400 mt-0.5 flex items-center gap-1">
- JILI
- </div>
- </div>
- </div>
- <!-- Game Card 4 -->
- <div class="game-card-hover relative group rounded-xl overflow-hidden aspect-[3/4] bg-gray-800 shadow-lg border border-gray-800">
- <div class="absolute top-1 left-1 z-10 bg-purple-600 text-white text-[9px] font-bold px-1.5 py-0.5 rounded shadow-sm">NEW</div>
- <div class="w-full h-full overflow-hidden">
- <img class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-110" src="https://storage.googleapis.com/uxpilot-auth.appspot.com/f56b58d51b-d1230f4731b564e470cc.png" alt="cartoon fisherman holding a big bass fish, water splash effect, fishing rod, sunny lake background, slot game icon" />
- </div>
- <div class="absolute bottom-0 left-0 w-full bg-gradient-to-t from-black via-black/80 to-transparent p-2 pt-6 flex flex-col items-center text-center">
- <h3 class="text-[10px] font-bold text-white leading-tight uppercase gold-text-shadow">Big Bass Splash</h3>
- <div class="text-[8px] text-gray-400 mt-0.5 flex items-center gap-1">
- Reel Kingdom
- </div>
- </div>
- </div>
- <!-- Game Card 5 -->
- <div class="game-card-hover relative group rounded-xl overflow-hidden aspect-[3/4] bg-gray-800 shadow-lg border border-gray-800">
- <div class="w-full h-full overflow-hidden">
- <img class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-110" src="https://storage.googleapis.com/uxpilot-auth.appspot.com/b6298e7d00-d9b33e7f65174e7a4964.png" alt="egyptian queen cleopatra, golden jewelry, hieroglyphs background, mysterious blue and gold lighting, slot game style" />
- </div>
- <div class="absolute bottom-0 left-0 w-full bg-gradient-to-t from-black via-black/80 to-transparent p-2 pt-6 flex flex-col items-center text-center">
- <h3 class="text-[10px] font-bold text-white leading-tight uppercase gold-text-shadow">Cleopatra</h3>
- <div class="text-[8px] text-gray-400 mt-0.5 flex items-center gap-1">
- IGT
- </div>
- </div>
- </div>
- <!-- Game Card 6 -->
- <div class="game-card-hover relative group rounded-xl overflow-hidden aspect-[3/4] bg-gray-800 shadow-lg border border-gray-800">
- <div class="w-full h-full overflow-hidden">
- <img class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-110" src="https://storage.googleapis.com/uxpilot-auth.appspot.com/7115242a4f-90d0815ae0868b1d3609.png" alt="wolf howling at the moon, mystical purple night sky, native american theme, slot game icon" />
- </div>
- <div class="absolute bottom-0 left-0 w-full bg-gradient-to-t from-black via-black/80 to-transparent p-2 pt-6 flex flex-col items-center text-center">
- <h3 class="text-[10px] font-bold text-white leading-tight uppercase gold-text-shadow">Wolf Gold</h3>
- <div class="text-[8px] text-gray-400 mt-0.5 flex items-center gap-1">
- Pragmatic
- </div>
- </div>
- </div>
- <!-- Game Card 7 -->
- <div class="game-card-hover relative group rounded-xl overflow-hidden aspect-[3/4] bg-gray-800 shadow-lg border border-gray-800">
- <div class="w-full h-full overflow-hidden">
- <img class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-110" src="https://storage.googleapis.com/uxpilot-auth.appspot.com/80dc346632-b387a37d218e0449a21b.png" alt="lucky irish leprechaun with a pot of gold, rainbow background, green hat, four leaf clover, slot game icon" />
- </div>
- <div class="absolute bottom-0 left-0 w-full bg-gradient-to-t from-black via-black/80 to-transparent p-2 pt-6 flex flex-col items-center text-center">
- <h3 class="text-[10px] font-bold text-white leading-tight uppercase gold-text-shadow">Irish Magic</h3>
- <div class="text-[8px] text-gray-400 mt-0.5 flex items-center gap-1">
- IGT
- </div>
- </div>
- </div>
-
- <!-- Game Card 8 -->
- <div class="game-card-hover relative group rounded-xl overflow-hidden aspect-[3/4] bg-gray-800 shadow-lg border border-gray-800">
- <div class="w-full h-full overflow-hidden">
- <img class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-110" src="https://storage.googleapis.com/uxpilot-auth.appspot.com/6c0d262d6d-88bb19adb1e65b8bac8d.png" alt="volcano erupting gold coins, lava background, intense red and orange colors, slot game icon" />
- </div>
- <div class="absolute bottom-0 left-0 w-full bg-gradient-to-t from-black via-black/80 to-transparent p-2 pt-6 flex flex-col items-center text-center">
- <h3 class="text-[10px] font-bold text-white leading-tight uppercase gold-text-shadow">Cash Eruption</h3>
- <div class="text-[8px] text-gray-400 mt-0.5 flex items-center gap-1">
- IGT
- </div>
- </div>
- </div>
-
- <!-- Game Card 9 -->
- <div class="game-card-hover relative group rounded-xl overflow-hidden aspect-[3/4] bg-gray-800 shadow-lg border border-gray-800">
- <div class="w-full h-full overflow-hidden">
- <img class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-110" src="https://storage.googleapis.com/uxpilot-auth.appspot.com/fc01916ef9-1a92a09fbbe8fd8b7df5.png" alt="cute rich pig cartoon character wearing sunglasses, pink background, piggy bank theme, slot game icon" />
- </div>
- <div class="absolute bottom-0 left-0 w-full bg-gradient-to-t from-black via-black/80 to-transparent p-2 pt-6 flex flex-col items-center text-center">
- <h3 class="text-[10px] font-bold text-white leading-tight uppercase gold-text-shadow">Smash Pig</h3>
- <div class="text-[8px] text-gray-400 mt-0.5 flex items-center gap-1">
- IGT
- </div>
- </div>
- </div>
- </main>
- <!-- Bottom Navigation -->
- <nav id="footer" class="fixed bottom-0 left-0 w-full bg-[#151922] border-t border-gray-800 bottom-nav-shadow z-30">
- <div class="flex justify-around items-center py-2 px-2">
- <a href="#" class="flex flex-col items-center gap-1 text-green-400 nav-item-active">
- <i class="fa-solid fa-house text-xl"></i>
- <span class="text-[10px] font-semibold">Home</span>
- </a>
- <a href="#" class="flex flex-col items-center gap-1 text-gray-400">
- <i class="fa-solid fa-trophy text-xl"></i>
- <span class="text-[10px] font-medium">Rewards</span>
- </a>
- <a href="#" class="flex flex-col items-center gap-1 text-gray-400 relative -mt-6">
- <div class="bg-gradient-to-br from-green-500 to-green-600 w-14 h-14 rounded-full flex items-center justify-center shadow-xl floating-play-btn border-4 border-[#151922]">
- <i class="fa-solid fa-play text-white text-xl ml-0.5"></i>
- </div>
- <span class="text-[10px] font-medium mt-1">Play</span>
- </a>
- <a href="#" class="flex flex-col items-center gap-1 text-gray-400">
- <i class="fa-solid fa-wallet text-xl"></i>
- <span class="text-[10px] font-medium">Wallet</span>
- </a>
- <a href="#" class="flex flex-col items-center gap-1 text-gray-400">
- <i class="fa-solid fa-user text-xl"></i>
- <span class="text-[10px] font-medium">Profile</span>
- </a>
- </div>
- </nav>
- <!-- ================= MODALS ================= -->
- <!-- Modal 1: Notification (Simple) -->
- <div id="modal-notification" class="modal fixed inset-0 z-[60] flex items-center justify-center bg-modal-overlay backdrop-blur-sm p-6">
- <div class="modal-content bg-[#363B48] w-full max-w-[320px] rounded-2xl p-6 text-center shadow-2xl border border-gray-700 relative">
-
- <p class="text-gray-200 text-base font-medium leading-relaxed mb-6">
- The latest bonuses and activities to earn money, don't miss out.
- </p>
- <div class="flex gap-3 justify-center">
- <button onclick="closeModal('modal-notification')" class="flex-1 bg-[#D85140] hover:bg-[#c44333] text-white font-bold py-2.5 rounded-full shadow-lg transform active:scale-95 transition">
- Reject
- </button>
- <button onclick="closeModal('modal-notification')" class="flex-1 bg-[#00D67D] hover:bg-[#00c271] text-white font-bold py-2.5 rounded-full shadow-lg transform active:scale-95 transition">
- Accept
- </button>
- </div>
- </div>
- </div>
- <!-- Modal 2: Add to Home Screen -->
- <div id="modal-add-home" class="modal fixed inset-0 z-[60] flex items-end sm:items-center justify-center bg-modal-overlay backdrop-blur-sm sm:p-4">
- <div class="modal-content bg-[#2C313C] w-full sm:max-w-[380px] rounded-t-2xl sm:rounded-2xl p-0 text-center shadow-2xl border-t sm:border border-gray-700 relative overflow-hidden">
-
- <!-- Header -->
- <div class="relative pt-6 px-4 pb-2">
- <button onclick="closeModal('modal-add-home')" class="absolute top-4 right-4 text-gray-400 hover:text-white transition">
- <i class="fa-solid fa-xmark text-xl"></i>
- </button>
- <h2 class="text-white font-bold text-lg">Add to Home Screen to earn <span class="text-yellow-400">$177</span></h2>
- <p class="text-gray-400 text-xs mt-1">3 steps to claim bonus $177</p>
- </div>
- <!-- Steps Container -->
- <div class="px-5 pb-8 pt-2 relative">
- <!-- Vertical Line -->
- <div class="absolute left-[29px] top-6 bottom-10 w-0.5 bg-gray-600"></div>
- <!-- Step 1 -->
- <div class="relative flex gap-4 mb-6">
- <div class="w-3 h-3 rounded-full bg-yellow-400 z-10 mt-1.5 flex-shrink-0"></div>
- <div class="text-left flex-1">
- <div class="text-yellow-400 font-bold text-sm mb-2">Step 1</div>
- <div class="bg-[#1C212E] rounded-lg p-2 border border-gray-700">
- <!-- Safari Toolbar Mockup -->
- <div class="bg-[#3A3F4B] rounded h-8 flex items-center justify-around px-2 mb-2">
- <i class="fa-solid fa-chevron-left text-gray-500 text-xs"></i>
- <i class="fa-solid fa-chevron-right text-gray-500 text-xs"></i>
- <div class="text-blue-400 border border-red-500 rounded px-1"><i class="fa-solid fa-arrow-up-from-bracket text-xs"></i></div>
- <i class="fa-solid fa-book-open text-blue-400 text-xs"></i>
- <i class="fa-regular fa-clone text-blue-400 text-xs"></i>
- </div>
- <div class="text-[10px] text-gray-300 flex items-center gap-1">
- Click <i class="fa-solid fa-arrow-up-from-bracket text-yellow-400"></i> on the square toolbar
- </div>
- </div>
- </div>
- </div>
- <!-- Step 2 -->
- <div class="relative flex gap-4 mb-6">
- <div class="w-3 h-3 rounded-full bg-yellow-400 z-10 mt-1.5 flex-shrink-0"></div>
- <div class="text-left flex-1">
- <div class="text-yellow-400 font-bold text-sm mb-2">Step 2</div>
- <div class="bg-[#1C212E] rounded-lg p-2 border border-gray-700">
- <!-- Menu Mockup -->
- <div class="bg-white rounded p-1.5 mb-2">
- <div class="flex justify-between items-center border-b border-gray-200 pb-1 mb-1">
- <span class="text-[8px] text-black">Add to Quick Note</span>
- <i class="fa-regular fa-note-sticky text-black text-[8px]"></i>
- </div>
- <div class="bg-orange-500 rounded px-1 py-1 flex justify-between items-center relative">
- <span class="text-[8px] text-white font-bold">Add to Home Screen</span>
- <i class="fa-regular fa-square-plus text-white text-[8px]"></i>
- <i class="fa-solid fa-hand-pointer absolute right-4 bottom-[-5px] text-white drop-shadow-md text-lg transform rotate-[-20deg]"></i>
- </div>
- </div>
- <div class="text-[10px] text-gray-300 flex items-center gap-1">
- Select <i class="fa-regular fa-square-plus text-yellow-400"></i> "Add to Home Screen"
- </div>
- </div>
- </div>
- </div>
- <!-- Step 3 -->
- <div class="relative flex gap-4">
- <div class="w-3 h-3 rounded-full bg-yellow-400 z-10 mt-1.5 flex-shrink-0"></div>
- <div class="text-left flex-1">
- <div class="text-yellow-400 font-bold text-sm mb-2">Step 3</div>
- <div class="bg-[#1C212E] rounded-lg p-3 border border-gray-700 flex items-center gap-3">
- <div class="w-20 h-10 bg-black rounded border border-gray-600 relative overflow-hidden flex items-center justify-center">
- <div class="text-[8px] text-green-500 font-bold">APP ICON</div>
- <i class="fa-solid fa-arrow-pointer absolute bottom-1 right-1 text-yellow-400 text-xs"></i>
- </div>
- <div class="text-[10px] text-gray-300">
- Open the app on your home screen and earn <span class="text-yellow-400">$177</span>
- </div>
- </div>
- </div>
- </div>
- </div>
- <!-- Bottom Indicator -->
- <div class="bg-[#232730] py-3 flex flex-col items-center justify-center gap-2">
- <i class="fa-solid fa-hand-point-up text-3xl text-white animate-bounce"></i>
- <i class="fa-solid fa-arrow-up-from-bracket text-yellow-400 text-xl"></i>
- </div>
- </div>
- </div>
- <!-- Modal 3: Link Phone Number -->
- <div id="modal-link-phone" class="modal fixed inset-0 z-[60] flex items-center justify-center bg-modal-overlay backdrop-blur-sm p-4">
- <div class="modal-content bg-[#242833] w-full max-w-[340px] rounded-2xl p-5 text-center shadow-2xl border border-gray-700 relative">
-
- <h2 class="text-white font-bold text-xl mb-4">Link</h2>
- <!-- Promo Banner inside Modal -->
- <div class="w-full h-24 rounded-lg bg-link-banner-gradient mb-5 relative overflow-hidden flex items-center justify-between px-4 border border-white/10 shadow-inner">
- <div class="z-10 text-left">
- <div class="text-white font-bold text-lg leading-tight drop-shadow-md">Link your <br> phone to get</div>
- <div class="text-[8px] text-white/80 mt-1">Each account can only get the bonus once</div>
- </div>
- <div class="text-yellow-300 font-black text-4xl drop-shadow-lg z-10">$5</div>
-
- <!-- Decorative Elements for Banner -->
- <div class="absolute right-[-10px] bottom-[-10px] opacity-30">
- <i class="fa-solid fa-coins text-6xl text-yellow-200"></i>
- </div>
- <div class="absolute left-10 top-2 w-2 h-2 bg-yellow-300 rounded-full blur-[1px]"></div>
- <div class="absolute right-20 bottom-4 w-1 h-1 bg-white rounded-full blur-[1px]"></div>
- </div>
- <!-- Form -->
- <div class="space-y-3">
- <!-- Phone Input -->
- <div class="bg-[#151922] rounded-full flex items-center px-4 py-3 border border-gray-700 focus-within:border-gray-500 transition">
- <span class="text-white font-bold mr-3 border-r border-gray-600 pr-3 text-sm">+1</span>
- <input type="tel" placeholder="Telephone" class="bg-transparent border-none outline-none text-white text-sm w-full placeholder-gray-500">
- <i class="fa-solid fa-mobile-screen text-gray-500 text-lg"></i>
- </div>
- <!-- SMS Code Input -->
- <div class="flex gap-2">
- <div class="bg-[#151922] rounded-full flex items-center px-4 py-3 border border-gray-700 focus-within:border-gray-500 transition flex-1">
- <input type="text" placeholder="Enter SMS" class="bg-transparent border-none outline-none text-white text-sm w-full placeholder-gray-500">
- </div>
- <button class="bg-gray-400 text-white font-bold text-xs px-5 rounded-full whitespace-nowrap hover:bg-gray-300 transition shadow-lg">
- SMS
- </button>
- </div>
- <!-- Submit Button -->
- <button class="w-full bg-gray-400 text-white font-bold text-lg py-3 rounded-full mt-2 shadow-lg hover:bg-gray-300 transition">
- Link Now
- </button>
- </div>
- <!-- Close Button -->
- <button onclick="closeModal('modal-link-phone')" class="absolute top-3 right-3 text-gray-500 hover:text-white p-2">
- <i class="fa-solid fa-xmark"></i>
- </button>
- </div>
- </div>
- <!-- Modal 4: Confirmation / Generic Alert (NEW) -->
- <div id="modal-confirmation" class="modal fixed inset-0 z-[60] flex items-center justify-center bg-modal-overlay backdrop-blur-sm p-6">
- <div class="modal-content bg-alert-gradient w-full max-w-[320px] rounded-2xl p-0 text-center shadow-2xl border border-gray-600 relative overflow-hidden">
-
- <!-- Decorative Top Glow -->
- <div class="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-transparent via-gray-400 to-transparent opacity-50"></div>
- <!-- Close Button -->
- <button onclick="closeModal('modal-confirmation')" class="absolute top-3 right-3 text-gray-400 hover:text-white p-2 transition z-20">
- <i class="fa-solid fa-xmark text-lg"></i>
- </button>
- <div class="px-6 pt-10 pb-8">
- <!-- Icon or Image Placeholder -->
- <div class="w-16 h-16 bg-gray-700/50 rounded-full mx-auto mb-4 flex items-center justify-center border border-gray-600 shadow-inner">
- <i class="fa-solid fa-circle-exclamation text-3xl text-yellow-400"></i>
- </div>
- <!-- Text Content -->
- <h3 class="text-white font-bold text-lg mb-2">Are you sure?</h3>
- <p class="text-gray-400 text-sm leading-relaxed mb-6">
- Do you want to proceed with this action? This cannot be undone.
- </p>
- <!-- Action Buttons -->
- <div class="flex gap-3 justify-center">
- <button onclick="closeModal('modal-confirmation')" class="flex-1 bg-gray-600 hover:bg-gray-500 text-white font-bold py-3 rounded-xl shadow-lg transform active:scale-95 transition text-sm border border-gray-500">
- No, Cancel
- </button>
- <button onclick="closeModal('modal-confirmation')" class="flex-1 bg-gradient-to-b from-green-500 to-green-600 hover:from-green-400 hover:to-green-500 text-white font-bold py-3 rounded-xl shadow-lg transform active:scale-95 transition text-sm border border-green-400/30">
- Yes, Confirm
- </button>
- </div>
- </div>
- </div>
- </div>
- <style>
- @keyframes marquee {
- 0% { transform: translateX(0%); }
- 100% { transform: translateX(-50%); }
- }
- .no-scrollbar::-webkit-scrollbar {
- display: none;
- }
- .no-scrollbar {
- -ms-overflow-style: none;
- scrollbar-width: none;
- }
- </style>
- <script>
- // Close top banner
- document.querySelector('#top-banner .fa-xmark').addEventListener('click', function() {
- document.getElementById('top-banner').style.display = 'none';
- });
- // Modal Logic
- function openModal(modalId) {
- const modal = document.getElementById(modalId);
- if (modal) {
- modal.classList.add('active');
- document.body.style.overflow = 'hidden'; // Prevent background scrolling
- }
- }
- function closeModal(modalId) {
- const modal = document.getElementById(modalId);
- if (modal) {
- modal.classList.remove('active');
- document.body.style.overflow = ''; // Restore background scrolling
- }
- }
- // Close modal when clicking outside content
- document.querySelectorAll('.modal').forEach(modal => {
- modal.addEventListener('click', function(e) {
- if (e.target === this) {
- this.classList.remove('active');
- document.body.style.overflow = '';
- }
- });
- });
- // Auto open the new modal for demonstration
- setTimeout(() => {
- openModal('modal-confirmation');
- }, 1000);
- </script>
- </body>
- </html>
|