|
@@ -58,49 +58,50 @@
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<!-- Right: Illustration from image overlay & button -->
|
|
<!-- Right: Illustration from image overlay & button -->
|
|
|
- <div class="col-span-3 flex flex-col items-center justify-end h-full pb-2 relative">
|
|
|
|
|
- <img src="/LotteryV2/img/gold.png" alt="Chest" class="absolute -top-1 right-2 w-14 h-14 object-contain animate__animated animate__pulse animate__infinite animate__slow">
|
|
|
|
|
- <button class="bg-gradient-to-b from-yellow-300 to-yellow-400 text-red-700 font-extrabold px-3 py-1.5 rounded-xl text-[10px] shadow-md hover:from-yellow-200 hover:to-yellow-300" onclick="changeGame()" id="MEGA_LOTO_ID" value="@Constants.MEGA_LOTO">@Lang.play</button>
|
|
|
|
|
|
|
+ <div class="col-span-3 flex flex-col items-center justify-end h-full pb-4 relative">
|
|
|
|
|
+ <img src="/LotteryV2/img/gold.png" alt="Chest" class="absolute bottom-[44px] left-1/2 -translate-x-1/2 w-16 h-12 object-contain filter drop-shadow-md z-10">
|
|
|
|
|
+ <button class="bg-gradient-to-b from-yellow-300 to-yellow-400 text-red-700 font-extrabold px-8 py-1.5 rounded-xl text-[10px] shadow-md hover:from-yellow-200 hover:to-yellow-300 relative z-0" onclick="changeGame()" id="MEGA_LOTO_ID" value="@Constants.MEGA_LOTO">@Lang.play</button>
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<!-- Card 2 and 3 commented out by user previously -->
|
|
<!-- Card 2 and 3 commented out by user previously -->
|
|
|
- <!-- Game Card 2: Millionair (Dynamic Language) -->
|
|
|
|
|
- @* <div class="card-blue relative w-full h-[110px] rounded-2xl overflow-hidden shadow-lg transform hover:scale-[1.01] transition-all duration-200 cursor-pointer animate__animated animate__slideInUp animate__delay-1s">
|
|
|
|
|
|
|
+ <!-- Game Card 2: Millionair (Dynamic Language) -->
|
|
|
|
|
+ <div class="card-blue relative w-full h-[110px] rounded-2xl overflow-hidden shadow-md opacity-60 grayscale-[0.3] pointer-events-none animate__animated animate__slideInUp animate__delay-1s">
|
|
|
<div class="absolute -left-4 -top-4 w-16 h-16 bg-white/10 rounded-full blur-xl"></div>
|
|
<div class="absolute -left-4 -top-4 w-16 h-16 bg-white/10 rounded-full blur-xl"></div>
|
|
|
|
|
|
|
|
<div class="absolute inset-0 grid grid-cols-10 items-center px-3 text-white">
|
|
<div class="absolute inset-0 grid grid-cols-10 items-center px-3 text-white">
|
|
|
<!-- Left: Millionair text content -->
|
|
<!-- Left: Millionair text content -->
|
|
|
<div class="col-span-3 flex items-center h-full relative">
|
|
<div class="col-span-3 flex items-center h-full relative">
|
|
|
<!-- Left Illustration overlapping -->
|
|
<!-- Left Illustration overlapping -->
|
|
|
- <img src="/LotteryV2/img/m1.png" alt="Icon" class="absolute -left-1 bottom-0 h-[85px] object-contain">
|
|
|
|
|
- <div class="pl-12 text-[14px] font-black italic tracking-wider text-white mt-1">Millionair</div>
|
|
|
|
|
|
|
+ <img src="/LotteryV2/img/m1.png" alt="Icon" class="absolute -left-1 bottom-0 h-[85px] object-contain z-0">
|
|
|
|
|
+ <div class="absolute left-4 top-1/2 -translate-y-1/2 z-10 text-[14px] font-black italic tracking-wider text-white drop-shadow-xl pointer-events-none">@Lang.millionair</div>
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<div class="col-span-4 flex flex-col items-center justify-center text-center">
|
|
<div class="col-span-4 flex flex-col items-center justify-center text-center">
|
|
|
- <div class="text-[10px] uppercase font-bold text-gray-200 tracking-wider">Jackpot Prize</div>
|
|
|
|
|
|
|
+ <div class="text-[10px] uppercase font-bold text-gray-200 tracking-wider">@Lang.jackpot_prize</div>
|
|
|
<div class="text-2xl font-black text-yellow-400 mt-0.5" style="text-shadow: 0 2px 4px rgba(0,0,0,0.3)">500.000<span class="text-xs font-normal text-white"> HTG</span></div>
|
|
<div class="text-2xl font-black text-yellow-400 mt-0.5" style="text-shadow: 0 2px 4px rgba(0,0,0,0.3)">500.000<span class="text-xs font-normal text-white"> HTG</span></div>
|
|
|
- <div class="text-[9px] text-gray-200 mt-1 flex gap-1">Next round <span class="font-bold text-white">05:00</span></div>
|
|
|
|
|
|
|
+ <div class="text-[9px] text-gray-200 mt-1 flex gap-1">@Lang.next_round <span class="font-bold text-white">05:00</span></div>
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
- <div class="col-span-3 flex flex-col items-center justify-end h-full pb-2 relative">
|
|
|
|
|
|
|
+ <div class="col-span-3 flex flex-col items-center justify-end h-full pb-4 relative">
|
|
|
|
|
+ <img src="/LotteryV2/img/money_bag_large.png" alt="Money Bag" class="absolute bottom-[44px] left-1/2 -translate-x-1/2 w-16 h-12 object-contain filter drop-shadow-md z-10">
|
|
|
<!-- Assuming multiple icons overlay, can absolute them. m1 was cash illustration downloaded earlier -->
|
|
<!-- Assuming multiple icons overlay, can absolute them. m1 was cash illustration downloaded earlier -->
|
|
|
- <button class="bg-gradient-to-b from-yellow-300 to-yellow-400 text-red-700 font-extrabold px-3 py-1.5 rounded-xl text-[10px] shadow-md hover:from-yellow-200 hover:to-yellow-300">Play now</button>
|
|
|
|
|
|
|
+ <button class="bg-gradient-to-b from-yellow-300 to-yellow-400 text-red-700 font-extrabold px-8 py-1.5 rounded-xl text-[10px] shadow-md hover:from-yellow-200 hover:to-yellow-300" disabled>@Lang.play</button>
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
- </div> *@
|
|
|
|
|
|
|
+ </div>
|
|
|
|
|
|
|
|
<!-- Game Card 3: Mega Bet -->
|
|
<!-- Game Card 3: Mega Bet -->
|
|
|
- @* <div class="card-orange relative w-full h-[110px] rounded-2xl overflow-hidden shadow-lg transform hover:scale-[1.01] transition-all duration-200 cursor-pointer animate__animated animate__slideInUp animate__delay-2s">
|
|
|
|
|
|
|
+ <div class="card-orange relative w-full h-[110px] rounded-2xl overflow-hidden shadow-md opacity-60 grayscale-[0.3] pointer-events-none animate__animated animate__slideInUp animate__delay-2s">
|
|
|
<div class="absolute -left-4 -top-4 w-16 h-16 bg-white/10 rounded-full blur-xl"></div>
|
|
<div class="absolute -left-4 -top-4 w-16 h-16 bg-white/10 rounded-full blur-xl"></div>
|
|
|
|
|
|
|
|
<div class="absolute inset-0 grid grid-cols-10 items-center px-3 text-white">
|
|
<div class="absolute inset-0 grid grid-cols-10 items-center px-3 text-white">
|
|
|
<!-- Left: Standard dynamic texts with overlay red car if any layout overlaps -->
|
|
<!-- Left: Standard dynamic texts with overlay red car if any layout overlaps -->
|
|
|
<div class="col-span-3 flex flex-col items-start justify-center pl-2">
|
|
<div class="col-span-3 flex flex-col items-start justify-center pl-2">
|
|
|
<div class="relative">
|
|
<div class="relative">
|
|
|
- <div class="text-[13px] font-black italic tracking-wider text-white">MEGA</div>
|
|
|
|
|
- <div class="text-[14px] font-black italic tracking-wider text-red-200 -mt-1">Bet</div>
|
|
|
|
|
|
|
+ <div class="text-[13px] font-black italic tracking-wider text-white">@Lang.MEGA</div>
|
|
|
|
|
+ <div class="text-[14px] font-black italic tracking-wider text-red-200 -mt-1">@Lang.Bet</div>
|
|
|
<div class="absolute left-10 top-1 flex">
|
|
<div class="absolute left-10 top-1 flex">
|
|
|
<span class="w-5 h-5 rounded-full bg-white text-gray-800 text-[10px] font-bold flex items-center justify-center border border-gray-300 -mr-1 shadow-sm">88</span>
|
|
<span class="w-5 h-5 rounded-full bg-white text-gray-800 text-[10px] font-bold flex items-center justify-center border border-gray-300 -mr-1 shadow-sm">88</span>
|
|
|
<span class="w-5 h-5 rounded-full bg-red-500 text-white text-[10px] font-bold flex items-center justify-center border border-white shadow-sm">99</span>
|
|
<span class="w-5 h-5 rounded-full bg-red-500 text-white text-[10px] font-bold flex items-center justify-center border border-white shadow-sm">99</span>
|
|
@@ -109,18 +110,18 @@
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<div class="col-span-4 flex flex-col items-center justify-center text-center">
|
|
<div class="col-span-4 flex flex-col items-center justify-center text-center">
|
|
|
- <div class="text-[10px] uppercase font-bold text-gray-200 tracking-wider">Jackpot Prize</div>
|
|
|
|
|
|
|
+ <div class="text-[10px] uppercase font-bold text-gray-200 tracking-wider">@Lang.jackpot_prize</div>
|
|
|
<div class="text-2xl font-black text-yellow-400 mt-0.5" style="text-shadow: 0 2px 4px rgba(0,0,0,0.3)">800.000<span class="text-xs font-normal text-white"> HTG</span></div>
|
|
<div class="text-2xl font-black text-yellow-400 mt-0.5" style="text-shadow: 0 2px 4px rgba(0,0,0,0.3)">800.000<span class="text-xs font-normal text-white"> HTG</span></div>
|
|
|
- <div class="text-[9px] text-gray-200 mt-1 flex gap-1">Next round <span class="font-bold text-white">05:00</span></div>
|
|
|
|
|
|
|
+ <div class="text-[9px] text-gray-200 mt-1 flex gap-1">@Lang.next_round <span class="font-bold text-white">05:00</span></div>
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
- <div class="col-span-3 flex flex-col items-center justify-end h-full pb-2 relative">
|
|
|
|
|
|
|
+ <div class="col-span-3 flex flex-col items-center justify-end h-full pb-4 relative" >
|
|
|
<!-- illustration3 is Red Car, absolute positioned overlay at the top edge of back section layout -->
|
|
<!-- illustration3 is Red Car, absolute positioned overlay at the top edge of back section layout -->
|
|
|
- <img src="/LotteryV2/img/illustration3.png" alt="Car" class="absolute -top-1 -right-1 w-16 h-12 object-contain filter drop-shadow-md">
|
|
|
|
|
- <button class="bg-gradient-to-b from-yellow-300 to-yellow-400 text-red-700 font-extrabold px-3 py-1.5 rounded-xl text-[10px] shadow-md hover:from-yellow-200 hover:to-yellow-300">Play now</button>
|
|
|
|
|
|
|
+ <img src="/LotteryV2/img/illustration3.png" alt="Car" class="absolute bottom-[44px] left-1/2 -translate-x-1/2 w-16 h-12 object-contain filter drop-shadow-md z-10">
|
|
|
|
|
+ <button class="bg-gradient-to-b from-yellow-300 to-yellow-400 text-red-700 font-extrabold px-8 py-1.5 rounded-xl text-[10px] shadow-md hover:from-yellow-200 hover:to-yellow-300 relative z-0" disabled>@Lang.play</button>
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
- </div> *@
|
|
|
|
|
|
|
+ </div>
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|