mainweb.html 35 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581
  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', // Dark grey for modals
  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)' // Approximate for the link banner
  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-3 gap-2">
  135. <button onclick="openModal('modal-notification')" class="bg-gray-700 text-xs py-2 rounded border border-gray-600">Open Notification</button>
  136. <button onclick="openModal('modal-add-home')" class="bg-gray-700 text-xs py-2 rounded border border-gray-600">Open Add Home</button>
  137. <button onclick="openModal('modal-link-phone')" class="bg-gray-700 text-xs py-2 rounded border border-gray-600">Open Link Phone</button>
  138. </section>
  139. <!-- Quick Stats / Bonus Progress -->
  140. <section id="bonus-progress" class="px-3 mt-4">
  141. <div class="bg-casino-card rounded-xl p-3 border border-gray-800 shadow-lg flex items-center justify-between">
  142. <div class="flex items-center gap-3 flex-1">
  143. <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">
  144. <i class="fa-solid fa-star"></i>
  145. </div>
  146. <div>
  147. <div class="text-xs text-gray-400">Total Free Bonus</div>
  148. <div class="text-sm font-bold text-yellow-400">$10.5 <span class="text-gray-500 text-[10px] font-normal">/ $40</span></div>
  149. <div class="w-full bg-gray-700 h-1.5 rounded-full mt-1 overflow-hidden">
  150. <div class="bg-gradient-to-r from-green-400 to-green-600 h-full rounded-full" style="width: 25%"></div>
  151. </div>
  152. </div>
  153. </div>
  154. <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">
  155. <i class="fa-solid fa-arrow-right-from-bracket mr-1"></i> Withdraw
  156. </button>
  157. </div>
  158. </section>
  159. <!-- Notice Bar -->
  160. <section id="notice" class="px-3 mt-3">
  161. <div class="bg-black/40 rounded-lg px-3 py-2 flex items-center gap-2 border border-white/5">
  162. <i class="fa-solid fa-bullhorn text-orange-500 animate-pulse"></i>
  163. <div class="overflow-hidden h-5 relative w-full">
  164. <div class="text-xs text-gray-300 whitespace-nowrap absolute animate-[marquee_10s_linear_infinite]">
  165. 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!
  166. </div>
  167. </div>
  168. </div>
  169. </section>
  170. <!-- Game Categories Navigation -->
  171. <section id="categories" class="mt-4 px-2">
  172. <div class="flex gap-2 overflow-x-auto pb-2 no-scrollbar">
  173. <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">
  174. <i class="fa-solid fa-fire"></i> Popular
  175. </button>
  176. <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">
  177. <i class="fa-solid fa-gem text-purple-400"></i> Slots
  178. </button>
  179. <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">
  180. <i class="fa-solid fa-fish text-blue-400"></i> Fishing
  181. </button>
  182. <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">
  183. <i class="fa-solid fa-cards text-red-400"></i> Table
  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">
  186. Pragmatic Play
  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">
  189. JILI
  190. </button>
  191. </div>
  192. </section>
  193. <!-- Games Grid -->
  194. <main id="games-grid" class="px-2 mt-2 pb-4 grid grid-cols-3 gap-2">
  195. <!-- Game Card 1 -->
  196. <div class="game-card-hover relative group rounded-xl overflow-hidden aspect-[3/4] bg-gray-800 shadow-lg border border-gray-800">
  197. <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>
  198. <div class="w-full h-full overflow-hidden">
  199. <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" />
  200. </div>
  201. <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">
  202. <h3 class="text-[10px] font-bold text-white leading-tight uppercase gold-text-shadow">Buffalo King</h3>
  203. <div class="text-[8px] text-gray-400 mt-0.5 flex items-center gap-1">
  204. <i class="fa-solid fa-fire-flame-curved text-orange-500"></i> Pragmatic
  205. </div>
  206. </div>
  207. </div>
  208. <!-- Game Card 2 -->
  209. <div class="game-card-hover relative group rounded-xl overflow-hidden aspect-[3/4] bg-gray-800 shadow-lg border border-gray-800">
  210. <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">
  211. <i class="fa-solid fa-star"></i>
  212. </div>
  213. <div class="w-full h-full overflow-hidden">
  214. <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" />
  215. </div>
  216. <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">
  217. <h3 class="text-[10px] font-bold text-white leading-tight uppercase gold-text-shadow">Gates of Olympus</h3>
  218. <div class="text-[8px] text-gray-400 mt-0.5 flex items-center gap-1">
  219. <i class="fa-solid fa-bolt text-yellow-400"></i> Pragmatic
  220. </div>
  221. </div>
  222. </div>
  223. <!-- Game Card 3 -->
  224. <div class="game-card-hover relative group rounded-xl overflow-hidden aspect-[3/4] bg-gray-800 shadow-lg border border-gray-800">
  225. <div class="w-full h-full overflow-hidden">
  226. <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" />
  227. </div>
  228. <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">
  229. <h3 class="text-[10px] font-bold text-white leading-tight uppercase gold-text-shadow">Crazy 777</h3>
  230. <div class="text-[8px] text-gray-400 mt-0.5 flex items-center gap-1">
  231. JILI
  232. </div>
  233. </div>
  234. </div>
  235. <!-- Game Card 4 -->
  236. <div class="game-card-hover relative group rounded-xl overflow-hidden aspect-[3/4] bg-gray-800 shadow-lg border border-gray-800">
  237. <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>
  238. <div class="w-full h-full overflow-hidden">
  239. <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" />
  240. </div>
  241. <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">
  242. <h3 class="text-[10px] font-bold text-white leading-tight uppercase gold-text-shadow">Big Bass Splash</h3>
  243. <div class="text-[8px] text-gray-400 mt-0.5 flex items-center gap-1">
  244. Reel Kingdom
  245. </div>
  246. </div>
  247. </div>
  248. <!-- Game Card 5 -->
  249. <div class="game-card-hover relative group rounded-xl overflow-hidden aspect-[3/4] bg-gray-800 shadow-lg border border-gray-800">
  250. <div class="w-full h-full overflow-hidden">
  251. <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" />
  252. </div>
  253. <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">
  254. <h3 class="text-[10px] font-bold text-white leading-tight uppercase gold-text-shadow">Cleopatra</h3>
  255. <div class="text-[8px] text-gray-400 mt-0.5 flex items-center gap-1">
  256. IGT
  257. </div>
  258. </div>
  259. </div>
  260. <!-- Game Card 6 -->
  261. <div class="game-card-hover relative group rounded-xl overflow-hidden aspect-[3/4] bg-gray-800 shadow-lg border border-gray-800">
  262. <div class="w-full h-full overflow-hidden">
  263. <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" />
  264. </div>
  265. <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">
  266. <h3 class="text-[10px] font-bold text-white leading-tight uppercase gold-text-shadow">Wolf Gold</h3>
  267. <div class="text-[8px] text-gray-400 mt-0.5 flex items-center gap-1">
  268. Pragmatic
  269. </div>
  270. </div>
  271. </div>
  272. <!-- Game Card 7 -->
  273. <div class="game-card-hover relative group rounded-xl overflow-hidden aspect-[3/4] bg-gray-800 shadow-lg border border-gray-800">
  274. <div class="w-full h-full overflow-hidden">
  275. <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" />
  276. </div>
  277. <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">
  278. <h3 class="text-[10px] font-bold text-white leading-tight uppercase gold-text-shadow">Irish Magic</h3>
  279. <div class="text-[8px] text-gray-400 mt-0.5 flex items-center gap-1">
  280. IGT
  281. </div>
  282. </div>
  283. </div>
  284. <!-- Game Card 8 -->
  285. <div class="game-card-hover relative group rounded-xl overflow-hidden aspect-[3/4] bg-gray-800 shadow-lg border border-gray-800">
  286. <div class="w-full h-full overflow-hidden">
  287. <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" />
  288. </div>
  289. <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">
  290. <h3 class="text-[10px] font-bold text-white leading-tight uppercase gold-text-shadow">Cash Eruption</h3>
  291. <div class="text-[8px] text-gray-400 mt-0.5 flex items-center gap-1">
  292. IGT
  293. </div>
  294. </div>
  295. </div>
  296. <!-- Game Card 9 -->
  297. <div class="game-card-hover relative group rounded-xl overflow-hidden aspect-[3/4] bg-gray-800 shadow-lg border border-gray-800">
  298. <div class="w-full h-full overflow-hidden">
  299. <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" />
  300. </div>
  301. <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">
  302. <h3 class="text-[10px] font-bold text-white leading-tight uppercase gold-text-shadow">Smash Pig</h3>
  303. <div class="text-[8px] text-gray-400 mt-0.5 flex items-center gap-1">
  304. IGT
  305. </div>
  306. </div>
  307. </div>
  308. </main>
  309. <!-- Bottom Navigation -->
  310. <nav id="footer" class="fixed bottom-0 left-0 w-full bg-[#151922] border-t border-gray-800 bottom-nav-shadow z-30">
  311. <div class="flex justify-around items-center py-2 px-2">
  312. <a href="#" class="flex flex-col items-center gap-1 text-green-400 nav-item-active">
  313. <i class="fa-solid fa-house text-xl"></i>
  314. <span class="text-[10px] font-semibold">Home</span>
  315. </a>
  316. <a href="#" class="flex flex-col items-center gap-1 text-gray-400">
  317. <i class="fa-solid fa-trophy text-xl"></i>
  318. <span class="text-[10px] font-medium">Rewards</span>
  319. </a>
  320. <a href="#" class="flex flex-col items-center gap-1 text-gray-400 relative -mt-6">
  321. <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]">
  322. <i class="fa-solid fa-play text-white text-xl ml-0.5"></i>
  323. </div>
  324. <span class="text-[10px] font-medium mt-1">Play</span>
  325. </a>
  326. <a href="#" class="flex flex-col items-center gap-1 text-gray-400">
  327. <i class="fa-solid fa-wallet text-xl"></i>
  328. <span class="text-[10px] font-medium">Wallet</span>
  329. </a>
  330. <a href="#" class="flex flex-col items-center gap-1 text-gray-400">
  331. <i class="fa-solid fa-user text-xl"></i>
  332. <span class="text-[10px] font-medium">Profile</span>
  333. </a>
  334. </div>
  335. </nav>
  336. <!-- ================= MODALS ================= -->
  337. <!-- Modal 1: Notification (Simple) -->
  338. <div id="modal-notification" class="modal fixed inset-0 z-[60] flex items-center justify-center bg-modal-overlay backdrop-blur-sm p-6">
  339. <div class="modal-content bg-[#363B48] w-full max-w-[320px] rounded-2xl p-6 text-center shadow-2xl border border-gray-700 relative">
  340. <p class="text-gray-200 text-base font-medium leading-relaxed mb-6">
  341. The latest bonuses and activities to earn money, don't miss out.
  342. </p>
  343. <div class="flex gap-3 justify-center">
  344. <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">
  345. Reject
  346. </button>
  347. <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">
  348. Accept
  349. </button>
  350. </div>
  351. </div>
  352. </div>
  353. <!-- Modal 2: Add to Home Screen -->
  354. <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">
  355. <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">
  356. <!-- Header -->
  357. <div class="relative pt-6 px-4 pb-2">
  358. <button onclick="closeModal('modal-add-home')" class="absolute top-4 right-4 text-gray-400 hover:text-white transition">
  359. <i class="fa-solid fa-xmark text-xl"></i>
  360. </button>
  361. <h2 class="text-white font-bold text-lg">Add to Home Screen to earn <span class="text-yellow-400">$177</span></h2>
  362. <p class="text-gray-400 text-xs mt-1">3 steps to claim bonus $177</p>
  363. </div>
  364. <!-- Steps Container -->
  365. <div class="px-5 pb-8 pt-2 relative">
  366. <!-- Vertical Line -->
  367. <div class="absolute left-[29px] top-6 bottom-10 w-0.5 bg-gray-600"></div>
  368. <!-- Step 1 -->
  369. <div class="relative flex gap-4 mb-6">
  370. <div class="w-3 h-3 rounded-full bg-yellow-400 z-10 mt-1.5 flex-shrink-0"></div>
  371. <div class="text-left flex-1">
  372. <div class="text-yellow-400 font-bold text-sm mb-2">Step 1</div>
  373. <div class="bg-[#1C212E] rounded-lg p-2 border border-gray-700">
  374. <!-- Safari Toolbar Mockup -->
  375. <div class="bg-[#3A3F4B] rounded h-8 flex items-center justify-around px-2 mb-2">
  376. <i class="fa-solid fa-chevron-left text-gray-500 text-xs"></i>
  377. <i class="fa-solid fa-chevron-right text-gray-500 text-xs"></i>
  378. <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>
  379. <i class="fa-solid fa-book-open text-blue-400 text-xs"></i>
  380. <i class="fa-regular fa-clone text-blue-400 text-xs"></i>
  381. </div>
  382. <div class="text-[10px] text-gray-300 flex items-center gap-1">
  383. Click <i class="fa-solid fa-arrow-up-from-bracket text-yellow-400"></i> on the square toolbar
  384. </div>
  385. </div>
  386. </div>
  387. </div>
  388. <!-- Step 2 -->
  389. <div class="relative flex gap-4 mb-6">
  390. <div class="w-3 h-3 rounded-full bg-yellow-400 z-10 mt-1.5 flex-shrink-0"></div>
  391. <div class="text-left flex-1">
  392. <div class="text-yellow-400 font-bold text-sm mb-2">Step 2</div>
  393. <div class="bg-[#1C212E] rounded-lg p-2 border border-gray-700">
  394. <!-- Menu Mockup -->
  395. <div class="bg-white rounded p-1.5 mb-2">
  396. <div class="flex justify-between items-center border-b border-gray-200 pb-1 mb-1">
  397. <span class="text-[8px] text-black">Add to Quick Note</span>
  398. <i class="fa-regular fa-note-sticky text-black text-[8px]"></i>
  399. </div>
  400. <div class="bg-orange-500 rounded px-1 py-1 flex justify-between items-center relative">
  401. <span class="text-[8px] text-white font-bold">Add to Home Screen</span>
  402. <i class="fa-regular fa-square-plus text-white text-[8px]"></i>
  403. <i class="fa-solid fa-hand-pointer absolute right-4 bottom-[-5px] text-white drop-shadow-md text-lg transform rotate-[-20deg]"></i>
  404. </div>
  405. </div>
  406. <div class="text-[10px] text-gray-300 flex items-center gap-1">
  407. Select <i class="fa-regular fa-square-plus text-yellow-400"></i> "Add to Home Screen"
  408. </div>
  409. </div>
  410. </div>
  411. </div>
  412. <!-- Step 3 -->
  413. <div class="relative flex gap-4">
  414. <div class="w-3 h-3 rounded-full bg-yellow-400 z-10 mt-1.5 flex-shrink-0"></div>
  415. <div class="text-left flex-1">
  416. <div class="text-yellow-400 font-bold text-sm mb-2">Step 3</div>
  417. <div class="bg-[#1C212E] rounded-lg p-3 border border-gray-700 flex items-center gap-3">
  418. <div class="w-20 h-10 bg-black rounded border border-gray-600 relative overflow-hidden flex items-center justify-center">
  419. <div class="text-[8px] text-green-500 font-bold">APP ICON</div>
  420. <i class="fa-solid fa-arrow-pointer absolute bottom-1 right-1 text-yellow-400 text-xs"></i>
  421. </div>
  422. <div class="text-[10px] text-gray-300">
  423. Open the app on your home screen and earn <span class="text-yellow-400">$177</span>
  424. </div>
  425. </div>
  426. </div>
  427. </div>
  428. </div>
  429. <!-- Bottom Indicator -->
  430. <div class="bg-[#232730] py-3 flex flex-col items-center justify-center gap-2">
  431. <i class="fa-solid fa-hand-point-up text-3xl text-white animate-bounce"></i>
  432. <i class="fa-solid fa-arrow-up-from-bracket text-yellow-400 text-xl"></i>
  433. </div>
  434. </div>
  435. </div>
  436. <!-- Modal 3: Link Phone Number -->
  437. <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">
  438. <div class="modal-content bg-[#242833] w-full max-w-[340px] rounded-2xl p-5 text-center shadow-2xl border border-gray-700 relative">
  439. <h2 class="text-white font-bold text-xl mb-4">Link</h2>
  440. <!-- Promo Banner inside Modal -->
  441. <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">
  442. <div class="z-10 text-left">
  443. <div class="text-white font-bold text-lg leading-tight drop-shadow-md">Link your <br> phone to get</div>
  444. <div class="text-[8px] text-white/80 mt-1">Each account can only get the bonus once</div>
  445. </div>
  446. <div class="text-yellow-300 font-black text-4xl drop-shadow-lg z-10">$5</div>
  447. <!-- Decorative Elements for Banner -->
  448. <div class="absolute right-[-10px] bottom-[-10px] opacity-30">
  449. <i class="fa-solid fa-coins text-6xl text-yellow-200"></i>
  450. </div>
  451. <div class="absolute left-10 top-2 w-2 h-2 bg-yellow-300 rounded-full blur-[1px]"></div>
  452. <div class="absolute right-20 bottom-4 w-1 h-1 bg-white rounded-full blur-[1px]"></div>
  453. </div>
  454. <!-- Form -->
  455. <div class="space-y-3">
  456. <!-- Phone Input -->
  457. <div class="bg-[#151922] rounded-full flex items-center px-4 py-3 border border-gray-700 focus-within:border-gray-500 transition">
  458. <span class="text-white font-bold mr-3 border-r border-gray-600 pr-3 text-sm">+1</span>
  459. <input type="tel" placeholder="Telephone" class="bg-transparent border-none outline-none text-white text-sm w-full placeholder-gray-500">
  460. <i class="fa-solid fa-mobile-screen text-gray-500 text-lg"></i>
  461. </div>
  462. <!-- SMS Code Input -->
  463. <div class="flex gap-2">
  464. <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">
  465. <input type="text" placeholder="Enter SMS" class="bg-transparent border-none outline-none text-white text-sm w-full placeholder-gray-500">
  466. </div>
  467. <button class="bg-gray-400 text-white font-bold text-xs px-5 rounded-full whitespace-nowrap hover:bg-gray-300 transition shadow-lg">
  468. SMS
  469. </button>
  470. </div>
  471. <!-- Submit Button -->
  472. <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">
  473. Link Now
  474. </button>
  475. </div>
  476. <!-- Close Button (Optional if needed, usually clicking outside or a specific close button) -->
  477. <button onclick="closeModal('modal-link-phone')" class="absolute top-3 right-3 text-gray-500 hover:text-white p-2">
  478. <i class="fa-solid fa-xmark"></i>
  479. </button>
  480. </div>
  481. </div>
  482. <style>
  483. @keyframes marquee {
  484. 0% { transform: translateX(0%); }
  485. 100% { transform: translateX(-50%); }
  486. }
  487. .no-scrollbar::-webkit-scrollbar {
  488. display: none;
  489. }
  490. .no-scrollbar {
  491. -ms-overflow-style: none;
  492. scrollbar-width: none;
  493. }
  494. </style>
  495. <script>
  496. // Close top banner
  497. document.querySelector('#top-banner .fa-xmark').addEventListener('click', function() {
  498. document.getElementById('top-banner').style.display = 'none';
  499. });
  500. // Modal Logic
  501. function openModal(modalId) {
  502. const modal = document.getElementById(modalId);
  503. if (modal) {
  504. modal.classList.add('active');
  505. document.body.style.overflow = 'hidden'; // Prevent background scrolling
  506. }
  507. }
  508. function closeModal(modalId) {
  509. const modal = document.getElementById(modalId);
  510. if (modal) {
  511. modal.classList.remove('active');
  512. document.body.style.overflow = ''; // Restore background scrolling
  513. }
  514. }
  515. // Close modal when clicking outside content
  516. document.querySelectorAll('.modal').forEach(modal => {
  517. modal.addEventListener('click', function(e) {
  518. if (e.target === this) {
  519. this.classList.remove('active');
  520. document.body.style.overflow = '';
  521. }
  522. });
  523. });
  524. // Auto open one modal for demonstration (e.g., Notification) after 1 second
  525. setTimeout(() => {
  526. // openModal('modal-notification');
  527. }, 1000);
  528. </script>
  529. </body>
  530. </html>