natcom
/
LotteryV2


			
				
					
						
						
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788
							@using LotteryV2.Web.Language
@{
    Layout = null;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login - Mega Loto</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="~/css/flash_view.css" />
    <style>
        body { font-family: 'Inter', sans-serif; }
    </style>
</head>
<body class="bg-gray-100 flex justify-center items-center h-screen">

    <!-- Full Height Responsive Frame -->
    <div class="relative w-full h-screen max-w-[450px] bg-[#EE0033] sm:shadow-2xl sm:rounded-2xl overflow-hidden flex flex-col items-center">

        <!-- 1. LOGO SECTION (Y: 15px) -->
        <div class="absolute top-[15px] left-[55px] w-[283px] h-[137px] flex justify-center">
            <img src="~/images/logo.png" alt="MEGA LOTO Logo" class="w-full h-full object-contain">
        </div>

        <!-- 2. LOGIN FORM SECTION (Y: 180px) -->
        <div class="absolute top-[180px] w-full px-[35px] flex flex-col space-y-[20px] z-20">
            
            <!-- Phone Input with Prefix -->
            <div class="flex items-center bg-white border border-black rounded-[12px] h-[44px] overflow-hidden">
                <!-- Country Code -->
                <div class="flex items-center justify-center bg-[#DCDCDC] text-black font-semibold text-[18px] px-3 h-full">
                    +509
                </div>
                <!-- Number Input -->
                <input type="tel" class="flex-1 px-4 text-black text-[18px] font-semibold outline-none placeholder-gray-400" placeholder="888 999 888" />
            </div>

            <!-- Get OTP Button -->
            <button class="w-full h-[47px] bg-gradient-to-r from-[#EFAD19] to-[#FFF385] border-2 border-white rounded-[12px] text-black font-extrabold text-[20px] shadow-lg flex justify-center items-center active:scale-95 transition-transform">
                @Language.ResourceManager.GetString("GetOTP")
            </button>
        </div>

        <!-- 3. DECORATIVE BACKGROUND BALLS (Y: 300px, X: 16px) -->
        <div class="absolute top-[300px] left-[16px] w-[352px] h-[345px] z-10 pointer-events-none flex justify-center">
            <img src="~/images/login_decorations.png" alt="decorations" class="w-full h-full object-contain">
        </div>

        <!-- 4. LANGUAGE SWITCHER (Bottom context) -->
        <div class="absolute bottom-[40px] flex justify-center items-center space-x-[20px] w-[199px] h-[43px] bg-red-700/80 backdrop-blur-md rounded-[12px] px-[16px] text-white font-semibold text-[15px] z-20">
            <button onclick="setLanguage('en')" class="flex items-center space-x-1 cursor-pointer hover:opacity-80 active:scale-95 transition-all">
                <span>🏴󠁧󠁢󠁥󠁮󠁧󠁿</span> <span class="text-white">EN</span>
            </button>
            <div class="w-[1px] h-[16px] bg-white/30"></div>
            <button onclick="setLanguage('vi')" class="flex items-center space-x-1 cursor-pointer hover:opacity-80 active:scale-95 transition-all">
                <span>🇭🇹</span> <span>HT</span>
            </button>
        </div>

    </div>

    <!-- Load jQuery for AJAX -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

    <!-- AJAX for Language Switching -->
    <script>
        function setLanguage(culture) {
            $.ajax({
                url: '/Home/SetLanguage',
                type: 'POST',
                data: { culture: culture },
                success: function (response) {
                    if (response.success) {
                        window.location.reload();
                    }
                },
                error: function (xhr, status, error) {
                    console.error('Error setting language:', error);
                }
            });
        }
    </script>

</body>
</html>