pop.html 37 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>Home</title>
  7. <script src="https://cdn.tailwindcss.com"></script>
  8. <script>
  9. window.FontAwesomeConfig = { autoReplaceSvg: 'nest'};
  10. tailwind.config = {
  11. theme: {
  12. extend: {
  13. colors: {
  14. 'casino-dark': '#0F131C',
  15. 'casino-card': '#1C212E',
  16. 'casino-green': '#00C853',
  17. 'casino-gold': '#FFD700',
  18. 'casino-red': '#D32F2F',
  19. 'casino-purple': '#6200EA',
  20. 'nav-active': '#00E676',
  21. 'modal-bg': '#2C313C',
  22. 'modal-overlay': 'rgba(0, 0, 0, 0.75)'
  23. },
  24. backgroundImage: {
  25. 'hero-gradient': 'linear-gradient(to right, #0f131c, #1a2332)',
  26. 'gold-gradient': 'linear-gradient(135deg, #FFD700 0%, #FDB931 50%, #FFD700 100%)',
  27. 'btn-gradient': 'linear-gradient(to bottom, #00E676, #00C853)',
  28. 'vip-gradient': 'linear-gradient(135deg, #303030 0%, #1a1a1a 100%)',
  29. 'link-banner-gradient': 'linear-gradient(to right, #6a74bc, #8a94d8)',
  30. 'alert-gradient': 'linear-gradient(180deg, #383E4C 0%, #2C313C 100%)'
  31. },
  32. fontFamily: {
  33. 'sans': ['Inter', 'sans-serif'],
  34. 'display': ['Montserrat', 'sans-serif']
  35. }
  36. }
  37. }
  38. }
  39. </script>
  40. <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/js/all.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  41. <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Montserrat:wght@700;800&display=swap" rel="stylesheet">
  42. <style>
  43. ::-webkit-scrollbar { display: none;}
  44. .glow-text { text-shadow: 0 0 10px rgba(0, 200, 83, 0.5); }
  45. .gold-text-shadow { text-shadow: 0 1px 2px rgba(0,0,0,0.5); }
  46. .nav-item-active { color: #00E676; }
  47. .game-card-hover:active { transform: scale(0.98); transition: transform 0.1s; }
  48. .bottom-nav-shadow { box-shadow: 0 -4px 20px rgba(0,0,0,0.5); }
  49. .floating-play-btn { box-shadow: 0 0 15px rgba(0, 230, 118, 0.4); }
  50. /* Modal Transitions */
  51. .modal {
  52. transition: opacity 0.3s ease, visibility 0.3s ease;
  53. opacity: 0;
  54. visibility: hidden;
  55. pointer-events: none;
  56. }
  57. .modal.active {
  58. opacity: 1;
  59. visibility: visible;
  60. pointer-events: auto;
  61. }
  62. .modal-content {
  63. transform: scale(0.95);
  64. transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  65. }
  66. .modal.active .modal-content {
  67. transform: scale(1);
  68. }
  69. </style>
  70. </head>
  71. <body class="bg-casino-dark text-white font-sans antialiased min-h-screen relative pb-24 overflow-x-hidden">
  72. <!-- Top Banner -->
  73. <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">
  74. <div class="flex items-center gap-2">
  75. <i class="fa-solid fa-download"></i>
  76. <span>Download to get BONUS $5</span>
  77. </div>
  78. <div class="flex items-center gap-3">
  79. <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>
  80. <i class="fa-solid fa-xmark cursor-pointer text-lg"></i>
  81. </div>
  82. </div>
  83. <!-- Header -->
  84. <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">
  85. <div class="flex items-center gap-2">
  86. <div class="text-2xl font-display font-extrabold italic tracking-tighter text-green-500 flex items-center">
  87. <span class="text-white">Win</span><span class="text-green-400">US</span><span class="text-green-500 text-3xl ml-1">777</span>
  88. </div>
  89. </div>
  90. <div class="flex items-center gap-3">
  91. <div class="text-right">
  92. <div class="text-[10px] text-gray-400">Balance</div>
  93. <div class="text-sm font-bold text-yellow-400">$1,240.50</div>
  94. </div>
  95. <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">
  96. <i class="fa-solid fa-plus"></i>
  97. </button>
  98. <div class="relative">
  99. <i class="fa-regular fa-envelope text-2xl text-gray-300"></i>
  100. <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>
  101. </div>
  102. <div class="w-9 h-9 rounded-full overflow-hidden border-2 border-gray-700">
  103. <img src="https://storage.googleapis.com/uxpilot-auth.appspot.com/avatars/avatar-3.jpg" alt="User" class="w-full h-full object-cover">
  104. </div>
  105. </div>
  106. </header>
  107. <!-- Hero Section: Banner Carousel -->
  108. <section id="hero" class="mt-2 px-2">
  109. <div class="relative w-full h-48 rounded-2xl overflow-hidden shadow-2xl border border-gray-800">
  110. <div class="absolute inset-0 bg-gradient-to-r from-black/80 to-transparent z-10 pointer-events-none"></div>
  111. <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" />
  112. <div class="absolute top-0 left-0 h-full w-2/3 z-20 p-5 flex flex-col justify-center">
  113. <div class="text-yellow-400 font-bold text-sm mb-1 tracking-wider uppercase animate-pulse">Limited Time Offer</div>
  114. <h1 class="text-3xl font-display font-black text-white leading-tight mb-2">
  115. FIRST DEPOSIT <br>
  116. <span class="text-green-400 text-4xl drop-shadow-lg">270% BONUS</span>
  117. </h1>
  118. <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">
  119. Claim Now
  120. </button>
  121. </div>
  122. <!-- Pagination Dots -->
  123. <div class="absolute bottom-3 left-1/2 transform -translate-x-1/2 z-20 flex gap-2">
  124. <div class="w-6 h-1.5 bg-white rounded-full"></div>
  125. <div class="w-1.5 h-1.5 bg-gray-500 rounded-full"></div>
  126. <div class="w-1.5 h-1.5 bg-gray-500 rounded-full"></div>
  127. </div>
  128. <!-- Bonus Tag -->
  129. <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">
  130. Bonus +270%
  131. </div>
  132. </div>
  133. </section>
  134. <!-- Trigger Buttons for Demo Purposes -->
  135. <section class="px-3 mt-4 grid grid-cols-2 gap-2">
  136. <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>
  137. <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>
  138. <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>
  139. <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>
  140. </section>
  141. <!-- Quick Stats / Bonus Progress -->
  142. <section id="bonus-progress" class="px-3 mt-4">
  143. <div class="bg-casino-card rounded-xl p-3 border border-gray-800 shadow-lg flex items-center justify-between">
  144. <div class="flex items-center gap-3 flex-1">
  145. <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">
  146. <i class="fa-solid fa-star"></i>
  147. </div>
  148. <div>
  149. <div class="text-xs text-gray-400">Total Free Bonus</div>
  150. <div class="text-sm font-bold text-yellow-400">$10.5 <span class="text-gray-500 text-[10px] font-normal">/ $40</span></div>
  151. <div class="w-full bg-gray-700 h-1.5 rounded-full mt-1 overflow-hidden">
  152. <div class="bg-gradient-to-r from-green-400 to-green-600 h-full rounded-full" style="width: 25%"></div>
  153. </div>
  154. </div>
  155. </div>
  156. <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">
  157. <i class="fa-solid fa-arrow-right-from-bracket mr-1"></i> Withdraw
  158. </button>
  159. </div>
  160. </section>
  161. <!-- Notice Bar -->
  162. <section id="notice" class="px-3 mt-3">
  163. <div class="bg-black/40 rounded-lg px-3 py-2 flex items-center gap-2 border border-white/5">
  164. <i class="fa-solid fa-bullhorn text-orange-500 animate-pulse"></i>
  165. <div class="overflow-hidden h-5 relative w-full">
  166. <div class="text-xs text-gray-300 whitespace-nowrap absolute animate-[marquee_10s_linear_infinite]">
  167. Congratulations to user <span class="text-yellow-400">Mike***99</span> for winning <span class="text-green-400">$5,420</span> in Buffalo King! &nbsp;&nbsp;&nbsp;&nbsp; New game "Zeus Lightning" is now live!
  168. </div>
  169. </div>
  170. </div>
  171. </section>
  172. <!-- Game Categories Navigation -->
  173. <section id="categories" class="mt-4 px-2">
  174. <div class="flex gap-2 overflow-x-auto pb-2 no-scrollbar">
  175. <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">
  176. <i class="fa-solid fa-fire"></i> Popular
  177. </button>
  178. <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">
  179. <i class="fa-solid fa-gem text-purple-400"></i> Slots
  180. </button>
  181. <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">
  182. <i class="fa-solid fa-fish text-blue-400"></i> Fishing
  183. </button>
  184. <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">
  185. <i class="fa-solid fa-cards text-red-400"></i> Table
  186. </button>
  187. <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">
  188. Pragmatic Play
  189. </button>
  190. <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">
  191. JILI
  192. </button>
  193. </div>
  194. </section>
  195. <!-- Games Grid -->
  196. <main id="games-grid" class="px-2 mt-2 pb-4 grid grid-cols-3 gap-2">
  197. <!-- Game Card 1 -->
  198. <div class="game-card-hover relative group rounded-xl overflow-hidden aspect-[3/4] bg-gray-800 shadow-lg border border-gray-800">
  199. <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>
  200. <div class="w-full h-full overflow-hidden">
  201. <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" />
  202. </div>
  203. <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">
  204. <h3 class="text-[10px] font-bold text-white leading-tight uppercase gold-text-shadow">Buffalo King</h3>
  205. <div class="text-[8px] text-gray-400 mt-0.5 flex items-center gap-1">
  206. <i class="fa-solid fa-fire-flame-curved text-orange-500"></i> Pragmatic
  207. </div>
  208. </div>
  209. </div>
  210. <!-- Game Card 2 -->
  211. <div class="game-card-hover relative group rounded-xl overflow-hidden aspect-[3/4] bg-gray-800 shadow-lg border border-gray-800">
  212. <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">
  213. <i class="fa-solid fa-star"></i>
  214. </div>
  215. <div class="w-full h-full overflow-hidden">
  216. <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" />
  217. </div>
  218. <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">
  219. <h3 class="text-[10px] font-bold text-white leading-tight uppercase gold-text-shadow">Gates of Olympus</h3>
  220. <div class="text-[8px] text-gray-400 mt-0.5 flex items-center gap-1">
  221. <i class="fa-solid fa-bolt text-yellow-400"></i> Pragmatic
  222. </div>
  223. </div>
  224. </div>
  225. <!-- Game Card 3 -->
  226. <div class="game-card-hover relative group rounded-xl overflow-hidden aspect-[3/4] bg-gray-800 shadow-lg border border-gray-800">
  227. <div class="w-full h-full overflow-hidden">
  228. <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" />
  229. </div>
  230. <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">
  231. <h3 class="text-[10px] font-bold text-white leading-tight uppercase gold-text-shadow">Crazy 777</h3>
  232. <div class="text-[8px] text-gray-400 mt-0.5 flex items-center gap-1">
  233. JILI
  234. </div>
  235. </div>
  236. </div>
  237. <!-- Game Card 4 -->
  238. <div class="game-card-hover relative group rounded-xl overflow-hidden aspect-[3/4] bg-gray-800 shadow-lg border border-gray-800">
  239. <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>
  240. <div class="w-full h-full overflow-hidden">
  241. <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" />
  242. </div>
  243. <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">
  244. <h3 class="text-[10px] font-bold text-white leading-tight uppercase gold-text-shadow">Big Bass Splash</h3>
  245. <div class="text-[8px] text-gray-400 mt-0.5 flex items-center gap-1">
  246. Reel Kingdom
  247. </div>
  248. </div>
  249. </div>
  250. <!-- Game Card 5 -->
  251. <div class="game-card-hover relative group rounded-xl overflow-hidden aspect-[3/4] bg-gray-800 shadow-lg border border-gray-800">
  252. <div class="w-full h-full overflow-hidden">
  253. <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" />
  254. </div>
  255. <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">
  256. <h3 class="text-[10px] font-bold text-white leading-tight uppercase gold-text-shadow">Cleopatra</h3>
  257. <div class="text-[8px] text-gray-400 mt-0.5 flex items-center gap-1">
  258. IGT
  259. </div>
  260. </div>
  261. </div>
  262. <!-- Game Card 6 -->
  263. <div class="game-card-hover relative group rounded-xl overflow-hidden aspect-[3/4] bg-gray-800 shadow-lg border border-gray-800">
  264. <div class="w-full h-full overflow-hidden">
  265. <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" />
  266. </div>
  267. <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">
  268. <h3 class="text-[10px] font-bold text-white leading-tight uppercase gold-text-shadow">Wolf Gold</h3>
  269. <div class="text-[8px] text-gray-400 mt-0.5 flex items-center gap-1">
  270. Pragmatic
  271. </div>
  272. </div>
  273. </div>
  274. <!-- Game Card 7 -->
  275. <div class="game-card-hover relative group rounded-xl overflow-hidden aspect-[3/4] bg-gray-800 shadow-lg border border-gray-800">
  276. <div class="w-full h-full overflow-hidden">
  277. <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" />
  278. </div>
  279. <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">
  280. <h3 class="text-[10px] font-bold text-white leading-tight uppercase gold-text-shadow">Irish Magic</h3>
  281. <div class="text-[8px] text-gray-400 mt-0.5 flex items-center gap-1">
  282. IGT
  283. </div>
  284. </div>
  285. </div>
  286. <!-- Game Card 8 -->
  287. <div class="game-card-hover relative group rounded-xl overflow-hidden aspect-[3/4] bg-gray-800 shadow-lg border border-gray-800">
  288. <div class="w-full h-full overflow-hidden">
  289. <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" />
  290. </div>
  291. <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">
  292. <h3 class="text-[10px] font-bold text-white leading-tight uppercase gold-text-shadow">Cash Eruption</h3>
  293. <div class="text-[8px] text-gray-400 mt-0.5 flex items-center gap-1">
  294. IGT
  295. </div>
  296. </div>
  297. </div>
  298. <!-- Game Card 9 -->
  299. <div class="game-card-hover relative group rounded-xl overflow-hidden aspect-[3/4] bg-gray-800 shadow-lg border border-gray-800">
  300. <div class="w-full h-full overflow-hidden">
  301. <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" />
  302. </div>
  303. <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">
  304. <h3 class="text-[10px] font-bold text-white leading-tight uppercase gold-text-shadow">Smash Pig</h3>
  305. <div class="text-[8px] text-gray-400 mt-0.5 flex items-center gap-1">
  306. IGT
  307. </div>
  308. </div>
  309. </div>
  310. </main>
  311. <!-- Bottom Navigation -->
  312. <nav id="footer" class="fixed bottom-0 left-0 w-full bg-[#151922] border-t border-gray-800 bottom-nav-shadow z-30">
  313. <div class="flex justify-around items-center py-2 px-2">
  314. <a href="#" class="flex flex-col items-center gap-1 text-green-400 nav-item-active">
  315. <i class="fa-solid fa-house text-xl"></i>
  316. <span class="text-[10px] font-semibold">Home</span>
  317. </a>
  318. <a href="#" class="flex flex-col items-center gap-1 text-gray-400">
  319. <i class="fa-solid fa-trophy text-xl"></i>
  320. <span class="text-[10px] font-medium">Rewards</span>
  321. </a>
  322. <a href="#" class="flex flex-col items-center gap-1 text-gray-400 relative -mt-6">
  323. <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]">
  324. <i class="fa-solid fa-play text-white text-xl ml-0.5"></i>
  325. </div>
  326. <span class="text-[10px] font-medium mt-1">Play</span>
  327. </a>
  328. <a href="#" class="flex flex-col items-center gap-1 text-gray-400">
  329. <i class="fa-solid fa-wallet text-xl"></i>
  330. <span class="text-[10px] font-medium">Wallet</span>
  331. </a>
  332. <a href="#" class="flex flex-col items-center gap-1 text-gray-400">
  333. <i class="fa-solid fa-user text-xl"></i>
  334. <span class="text-[10px] font-medium">Profile</span>
  335. </a>
  336. </div>
  337. </nav>
  338. <!-- ================= MODALS ================= -->
  339. <!-- Modal 1: Notification (Simple) -->
  340. <div id="modal-notification" class="modal fixed inset-0 z-[60] flex items-center justify-center bg-modal-overlay backdrop-blur-sm p-6">
  341. <div class="modal-content bg-[#363B48] w-full max-w-[320px] rounded-2xl p-6 text-center shadow-2xl border border-gray-700 relative">
  342. <p class="text-gray-200 text-base font-medium leading-relaxed mb-6">
  343. The latest bonuses and activities to earn money, don't miss out.
  344. </p>
  345. <div class="flex gap-3 justify-center">
  346. <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">
  347. Reject
  348. </button>
  349. <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">
  350. Accept
  351. </button>
  352. </div>
  353. </div>
  354. </div>
  355. <!-- Modal 2: Add to Home Screen -->
  356. <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">
  357. <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">
  358. <!-- Header -->
  359. <div class="relative pt-6 px-4 pb-2">
  360. <button onclick="closeModal('modal-add-home')" class="absolute top-4 right-4 text-gray-400 hover:text-white transition">
  361. <i class="fa-solid fa-xmark text-xl"></i>
  362. </button>
  363. <h2 class="text-white font-bold text-lg">Add to Home Screen to earn <span class="text-yellow-400">$177</span></h2>
  364. <p class="text-gray-400 text-xs mt-1">3 steps to claim bonus $177</p>
  365. </div>
  366. <!-- Steps Container -->
  367. <div class="px-5 pb-8 pt-2 relative">
  368. <!-- Vertical Line -->
  369. <div class="absolute left-[29px] top-6 bottom-10 w-0.5 bg-gray-600"></div>
  370. <!-- Step 1 -->
  371. <div class="relative flex gap-4 mb-6">
  372. <div class="w-3 h-3 rounded-full bg-yellow-400 z-10 mt-1.5 flex-shrink-0"></div>
  373. <div class="text-left flex-1">
  374. <div class="text-yellow-400 font-bold text-sm mb-2">Step 1</div>
  375. <div class="bg-[#1C212E] rounded-lg p-2 border border-gray-700">
  376. <!-- Safari Toolbar Mockup -->
  377. <div class="bg-[#3A3F4B] rounded h-8 flex items-center justify-around px-2 mb-2">
  378. <i class="fa-solid fa-chevron-left text-gray-500 text-xs"></i>
  379. <i class="fa-solid fa-chevron-right text-gray-500 text-xs"></i>
  380. <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>
  381. <i class="fa-solid fa-book-open text-blue-400 text-xs"></i>
  382. <i class="fa-regular fa-clone text-blue-400 text-xs"></i>
  383. </div>
  384. <div class="text-[10px] text-gray-300 flex items-center gap-1">
  385. Click <i class="fa-solid fa-arrow-up-from-bracket text-yellow-400"></i> on the square toolbar
  386. </div>
  387. </div>
  388. </div>
  389. </div>
  390. <!-- Step 2 -->
  391. <div class="relative flex gap-4 mb-6">
  392. <div class="w-3 h-3 rounded-full bg-yellow-400 z-10 mt-1.5 flex-shrink-0"></div>
  393. <div class="text-left flex-1">
  394. <div class="text-yellow-400 font-bold text-sm mb-2">Step 2</div>
  395. <div class="bg-[#1C212E] rounded-lg p-2 border border-gray-700">
  396. <!-- Menu Mockup -->
  397. <div class="bg-white rounded p-1.5 mb-2">
  398. <div class="flex justify-between items-center border-b border-gray-200 pb-1 mb-1">
  399. <span class="text-[8px] text-black">Add to Quick Note</span>
  400. <i class="fa-regular fa-note-sticky text-black text-[8px]"></i>
  401. </div>
  402. <div class="bg-orange-500 rounded px-1 py-1 flex justify-between items-center relative">
  403. <span class="text-[8px] text-white font-bold">Add to Home Screen</span>
  404. <i class="fa-regular fa-square-plus text-white text-[8px]"></i>
  405. <i class="fa-solid fa-hand-pointer absolute right-4 bottom-[-5px] text-white drop-shadow-md text-lg transform rotate-[-20deg]"></i>
  406. </div>
  407. </div>
  408. <div class="text-[10px] text-gray-300 flex items-center gap-1">
  409. Select <i class="fa-regular fa-square-plus text-yellow-400"></i> "Add to Home Screen"
  410. </div>
  411. </div>
  412. </div>
  413. </div>
  414. <!-- Step 3 -->
  415. <div class="relative flex gap-4">
  416. <div class="w-3 h-3 rounded-full bg-yellow-400 z-10 mt-1.5 flex-shrink-0"></div>
  417. <div class="text-left flex-1">
  418. <div class="text-yellow-400 font-bold text-sm mb-2">Step 3</div>
  419. <div class="bg-[#1C212E] rounded-lg p-3 border border-gray-700 flex items-center gap-3">
  420. <div class="w-20 h-10 bg-black rounded border border-gray-600 relative overflow-hidden flex items-center justify-center">
  421. <div class="text-[8px] text-green-500 font-bold">APP ICON</div>
  422. <i class="fa-solid fa-arrow-pointer absolute bottom-1 right-1 text-yellow-400 text-xs"></i>
  423. </div>
  424. <div class="text-[10px] text-gray-300">
  425. Open the app on your home screen and earn <span class="text-yellow-400">$177</span>
  426. </div>
  427. </div>
  428. </div>
  429. </div>
  430. </div>
  431. <!-- Bottom Indicator -->
  432. <div class="bg-[#232730] py-3 flex flex-col items-center justify-center gap-2">
  433. <i class="fa-solid fa-hand-point-up text-3xl text-white animate-bounce"></i>
  434. <i class="fa-solid fa-arrow-up-from-bracket text-yellow-400 text-xl"></i>
  435. </div>
  436. </div>
  437. </div>
  438. <!-- Modal 3: Link Phone Number -->
  439. <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">
  440. <div class="modal-content bg-[#242833] w-full max-w-[340px] rounded-2xl p-5 text-center shadow-2xl border border-gray-700 relative">
  441. <h2 class="text-white font-bold text-xl mb-4">Link</h2>
  442. <!-- Promo Banner inside Modal -->
  443. <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">
  444. <div class="z-10 text-left">
  445. <div class="text-white font-bold text-lg leading-tight drop-shadow-md">Link your <br> phone to get</div>
  446. <div class="text-[8px] text-white/80 mt-1">Each account can only get the bonus once</div>
  447. </div>
  448. <div class="text-yellow-300 font-black text-4xl drop-shadow-lg z-10">$5</div>
  449. <!-- Decorative Elements for Banner -->
  450. <div class="absolute right-[-10px] bottom-[-10px] opacity-30">
  451. <i class="fa-solid fa-coins text-6xl text-yellow-200"></i>
  452. </div>
  453. <div class="absolute left-10 top-2 w-2 h-2 bg-yellow-300 rounded-full blur-[1px]"></div>
  454. <div class="absolute right-20 bottom-4 w-1 h-1 bg-white rounded-full blur-[1px]"></div>
  455. </div>
  456. <!-- Form -->
  457. <div class="space-y-3">
  458. <!-- Phone Input -->
  459. <div class="bg-[#151922] rounded-full flex items-center px-4 py-3 border border-gray-700 focus-within:border-gray-500 transition">
  460. <span class="text-white font-bold mr-3 border-r border-gray-600 pr-3 text-sm">+1</span>
  461. <input type="tel" placeholder="Telephone" class="bg-transparent border-none outline-none text-white text-sm w-full placeholder-gray-500">
  462. <i class="fa-solid fa-mobile-screen text-gray-500 text-lg"></i>
  463. </div>
  464. <!-- SMS Code Input -->
  465. <div class="flex gap-2">
  466. <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">
  467. <input type="text" placeholder="Enter SMS" class="bg-transparent border-none outline-none text-white text-sm w-full placeholder-gray-500">
  468. </div>
  469. <button class="bg-gray-400 text-white font-bold text-xs px-5 rounded-full whitespace-nowrap hover:bg-gray-300 transition shadow-lg">
  470. SMS
  471. </button>
  472. </div>
  473. <!-- Submit Button -->
  474. <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">
  475. Link Now
  476. </button>
  477. </div>
  478. <!-- Close Button -->
  479. <button onclick="closeModal('modal-link-phone')" class="absolute top-3 right-3 text-gray-500 hover:text-white p-2">
  480. <i class="fa-solid fa-xmark"></i>
  481. </button>
  482. </div>
  483. </div>
  484. <!-- Modal 4: Confirmation / Generic Alert (NEW) -->
  485. <div id="modal-confirmation" class="modal fixed inset-0 z-[60] flex items-center justify-center bg-modal-overlay backdrop-blur-sm p-6">
  486. <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">
  487. <!-- Decorative Top Glow -->
  488. <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>
  489. <!-- Close Button -->
  490. <button onclick="closeModal('modal-confirmation')" class="absolute top-3 right-3 text-gray-400 hover:text-white p-2 transition z-20">
  491. <i class="fa-solid fa-xmark text-lg"></i>
  492. </button>
  493. <div class="px-6 pt-10 pb-8">
  494. <!-- Icon or Image Placeholder -->
  495. <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">
  496. <i class="fa-solid fa-circle-exclamation text-3xl text-yellow-400"></i>
  497. </div>
  498. <!-- Text Content -->
  499. <h3 class="text-white font-bold text-lg mb-2">Are you sure?</h3>
  500. <p class="text-gray-400 text-sm leading-relaxed mb-6">
  501. Do you want to proceed with this action? This cannot be undone.
  502. </p>
  503. <!-- Action Buttons -->
  504. <div class="flex gap-3 justify-center">
  505. <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">
  506. No, Cancel
  507. </button>
  508. <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">
  509. Yes, Confirm
  510. </button>
  511. </div>
  512. </div>
  513. </div>
  514. </div>
  515. <style>
  516. @keyframes marquee {
  517. 0% { transform: translateX(0%); }
  518. 100% { transform: translateX(-50%); }
  519. }
  520. .no-scrollbar::-webkit-scrollbar {
  521. display: none;
  522. }
  523. .no-scrollbar {
  524. -ms-overflow-style: none;
  525. scrollbar-width: none;
  526. }
  527. </style>
  528. <script>
  529. // Close top banner
  530. document.querySelector('#top-banner .fa-xmark').addEventListener('click', function() {
  531. document.getElementById('top-banner').style.display = 'none';
  532. });
  533. // Modal Logic
  534. function openModal(modalId) {
  535. const modal = document.getElementById(modalId);
  536. if (modal) {
  537. modal.classList.add('active');
  538. document.body.style.overflow = 'hidden'; // Prevent background scrolling
  539. }
  540. }
  541. function closeModal(modalId) {
  542. const modal = document.getElementById(modalId);
  543. if (modal) {
  544. modal.classList.remove('active');
  545. document.body.style.overflow = ''; // Restore background scrolling
  546. }
  547. }
  548. // Close modal when clicking outside content
  549. document.querySelectorAll('.modal').forEach(modal => {
  550. modal.addEventListener('click', function(e) {
  551. if (e.target === this) {
  552. this.classList.remove('active');
  553. document.body.style.overflow = '';
  554. }
  555. });
  556. });
  557. // Auto open the new modal for demonstration
  558. setTimeout(() => {
  559. openModal('modal-confirmation');
  560. }, 1000);
  561. </script>
  562. </body>
  563. </html>