pop2.html 39 KB

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