<!DOCTYPE html>
<html lang="bn">
<head>
<meta charset="UTF-8">
<title>Login - CV111</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800;900&display=swap">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
    *{box-sizing:border-box; margin:0; padding:0;}
    :root{
        --bg:#0A0714; --card:#181129; --border:rgba(255,255,255,.07); --border-hi:rgba(155,93,229,.35);
        --gold:#F5C542; --purple:#9B5DE5;
        --grad-main:linear-gradient(135deg,#6C3FC5 0%,#9B5DE5 50%,#B57EF0 100%);
        --grad-gold:linear-gradient(135deg,#F5C542,#E0A926);
        --text:#FFFFFF; --muted:#9691B0; --red:#FF5C7A;
    }
    body{
        min-height:100vh; font-family:'Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; color:var(--text);
        background:radial-gradient(circle at 20% 0%, rgba(155,93,229,.18), transparent 45%),
                   radial-gradient(circle at 90% 100%, rgba(245,197,66,.1), transparent 40%), var(--bg);
        display:flex; align-items:center; justify-content:center; padding:20px; position:relative; overflow:hidden;
    }
    body::before{content:''; position:absolute; width:300px; height:300px; border-radius:50%;
        background:radial-gradient(circle, rgba(155,93,229,.12), transparent 70%); top:-100px; left:-100px; animation:float 8s ease-in-out infinite;}
    body::after{content:''; position:absolute; width:220px; height:220px; border-radius:50%;
        background:radial-gradient(circle, rgba(245,197,66,.1), transparent 70%); bottom:-80px; right:-60px; animation:float 10s ease-in-out infinite reverse;}
    @keyframes float{0%,100%{transform:translateY(0);} 50%{transform:translateY(-20px);}}

    .card{width:100%; max-width:400px; position:relative; z-index:1;}
    .logo{text-align:center; margin-bottom:8px;}
    .logo-icon{width:64px; height:64px; margin:0 auto 14px; border-radius:20px; background:var(--grad-gold);
        display:flex; align-items:center; justify-content:center; box-shadow:0 16px 34px -8px rgba(245,197,66,.5);}
    .logo-icon i{font-size:26px; color:#1a1400;}
    .logo .txt{font-size:26px; font-weight:900; font-style:italic; letter-spacing:1px;
        background:var(--grad-gold); -webkit-background-clip:text; background-clip:text; color:transparent;}
    .logo .tagline{font-size:11.5px; color:var(--muted); margin-top:4px; letter-spacing:.5px;}

    .panel{background:linear-gradient(160deg, #1D1533 0%, #120D24 100%); border:1px solid var(--border-hi);
        border-radius:24px; padding:30px 24px; margin-top:22px; box-shadow:0 24px 60px -15px rgba(108,63,197,.4);}
    .panel h2{font-size:21px; font-weight:800; margin-bottom:6px;}
    .panel .sub{font-size:12.5px; color:var(--muted); margin-bottom:24px;}

    .social-row{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:20px;}
    .social-btn{display:flex; align-items:center; justify-content:center; gap:8px; background:var(--card); border:1.5px solid var(--border);
        border-radius:14px; padding:12px; color:var(--text); font-weight:700; font-size:13px; cursor:pointer; transition:.15s;}
    .social-btn:active{transform:scale(.96);}
    .social-btn.google i{color:#EA4335;}
    .social-btn.facebook i{color:#1877F2;}

    .divider{display:flex; align-items:center; gap:12px; margin-bottom:20px;}
    .divider .line{flex:1; height:1px; background:var(--border);}
    .divider span{font-size:11px; color:var(--muted); font-weight:600;}

    .field-box{background:var(--card); border:1.5px solid var(--border); border-radius:14px; padding:14px 16px; margin-bottom:16px; transition:.2s; position:relative;}
    .field-box:focus-within{border-color:var(--purple); box-shadow:0 0 0 4px rgba(155,93,229,.12);}
    .field-box label{display:block; font-size:10.5px; color:var(--muted); text-transform:uppercase; letter-spacing:.5px; font-weight:700; margin-bottom:6px;}
    .field-box input{width:100%; background:none; border:none; outline:none; color:var(--text); font-size:14.5px; font-weight:600; font-family:'Poppins';}
    .field-box .eye{position:absolute; right:16px; top:50%; transform:translateY(-4px); color:var(--muted); cursor:pointer; font-size:14px;}

    .forgot{text-align:right; margin-bottom:20px;}
    .forgot a{font-size:12px; color:var(--purple); font-weight:600; text-decoration:none;}

    .btn-login{width:100%; padding:16px; border-radius:16px; border:none; font-weight:800; font-size:15px; cursor:pointer;
        background:var(--grad-main); color:#fff; box-shadow:0 14px 30px -10px rgba(108,63,197,.6); transition:transform .12s;}
    .btn-login:active{transform:scale(.98);}

    .footer-link{text-align:center; margin-top:22px; font-size:13px; color:var(--muted);}
    .footer-link a{color:var(--gold); font-weight:700; text-decoration:none;}

    .msg{padding:12px 14px; border-radius:12px; font-size:12.5px; font-weight:600; margin-bottom:16px; display:flex; align-items:center; gap:8px;}
    .msg-err{background:rgba(255,92,122,.1); border:1px solid rgba(255,92,122,.3); color:var(--red);}
    .hidden{display:none !important;}
    .toast{position:fixed; top:20px; left:50%; transform:translateX(-50%); background:var(--card); border:1px solid var(--border-hi);
        padding:12px 20px; border-radius:12px; font-size:13px; z-index:99; display:none;}
</style>
</head>
<body>

<div class="card">
    <div class="logo">
        <div class="logo-icon"><i class="fa-solid fa-dice"></i></div>
        <div class="txt">CV111</div>
        <div class="tagline">Premium Gaming Experience</div>
    </div>

    <div class="panel">
        <h2>স্বাগতম ফিরে!</h2>
        <div class="sub">Login করে আবার খেলা শুরু করো</div>

        <div class="social-row">
            <button class="social-btn google" onclick="comingSoon()"><i class="fa-brands fa-google"></i> Google</button>
            <button class="social-btn facebook" onclick="comingSoon()"><i class="fa-brands fa-facebook"></i> Facebook</button>
        </div>

        <div class="divider"><div class="line"></div><span>অথবা Mobile দিয়ে</span><div class="line"></div></div>

        <div id="errorBox" class="hidden"></div>

        <div class="field-box">
            <label>Mobile Number</label>
            <input type="tel" id="username" placeholder="01XXXXXXXXX">
        </div>

        <div class="field-box">
            <label>Password</label>
            <input type="password" id="password" placeholder="••••••••">
            <i class="fa-regular fa-eye eye" onclick="togglePwd()" id="eyeIcon"></i>
        </div>

        <div class="forgot"><a href="/newforgotpassword.php">Password ভুলে গেছো?</a></div>

        <button class="btn-login" onclick="doLogin()" id="loginBtn">Login করো</button>

        <div class="footer-link">Account নেই? <a href="/newregister.php">Register করো</a></div>
    </div>
</div>

<div class="toast" id="toast">শীঘ্রই আসছে! আপাতত Mobile দিয়ে Login করো।</div>

<script>
function comingSoon() {
    const toast = document.getElementById('toast');
    toast.style.display = 'block';
    setTimeout(() => toast.style.display = 'none', 2500);
}

function togglePwd() {
    const input = document.getElementById('password');
    const icon = document.getElementById('eyeIcon');
    if (input.type === 'password') {
        input.type = 'text';
        icon.className = 'fa-regular fa-eye-slash eye';
    } else {
        input.type = 'password';
        icon.className = 'fa-regular fa-eye eye';
    }
}

function md5(str) {
    function rotateLeft(n, s) { return (n << s) | (n >>> (32 - s)); }
    function toHex(n) { let s = '', v; for (let i = 0; i < 4; i++) { v = (n >>> (i * 8)) & 255; s += ('0' + v.toString(16)).slice(-2); } return s; }
    function utf8Encode(str) { return unescape(encodeURIComponent(str)); }
    str = utf8Encode(str);
    const msgLen = str.length;
    const numBlocks = (((msgLen + 8) >>> 6) + 1) * 16;
    const M = new Array(numBlocks).fill(0);
    for (let i = 0; i < msgLen; i++) M[i >> 2] |= str.charCodeAt(i) << ((i % 4) * 8);
    M[msgLen >> 2] |= 0x80 << ((msgLen % 4) * 8);
    M[numBlocks - 2] = msgLen * 8;
    let a = 1732584193, b = -271733879, c = -1732584194, d = 271733878;
    const S = [7,12,17,22,7,12,17,22,7,12,17,22,7,12,17,22,5,9,14,20,5,9,14,20,5,9,14,20,5,9,14,20,4,11,16,23,4,11,16,23,4,11,16,23,4,11,16,23,6,10,15,21,6,10,15,21,6,10,15,21,6,10,15,21];
    const K = [];
    for (let i = 0; i < 64; i++) K[i] = (Math.floor(Math.abs(Math.sin(i + 1)) * 4294967296)) | 0;
    for (let i = 0; i < numBlocks; i += 16) {
        let A = a, B = b, C = c, D = d;
        for (let j = 0; j < 64; j++) {
            let F, g;
            if (j < 16) { F = (B & C) | (~B & D); g = j; }
            else if (j < 32) { F = (D & B) | (~D & C); g = (5 * j + 1) % 16; }
            else if (j < 48) { F = B ^ C ^ D; g = (3 * j + 5) % 16; }
            else { F = C ^ (B | ~D); g = (7 * j) % 16; }
            F = (F + A + K[j] + (M[i + g] | 0)) | 0;
            A = D; D = C; C = B;
            B = (B + rotateLeft(F, S[j])) | 0;
        }
        a = (a + A) | 0; b = (b + B) | 0; c = (c + C) | 0; d = (d + D) | 0;
    }
    return toHex(a) + toHex(b) + toHex(c) + toHex(d);
}

async function doLogin() {
    const username = document.getElementById('username').value.trim();
    const password = document.getElementById('password').value;
    const errorBox = document.getElementById('errorBox');
    const btn = document.getElementById('loginBtn');

    errorBox.className = 'hidden';

    if (!username || !password) {
        errorBox.className = 'msg msg-err';
        errorBox.innerHTML = '<i class="fa-solid fa-circle-exclamation"></i> Mobile Number আর Password দুটোই দাও।';
        return;
    }

    btn.textContent = 'Login হচ্ছে...';

    const language = 1, logintype = 'mobile', phonetype = 2;
    const random = Math.random().toString(36).substring(2, 15);
    const shonustr = `{"language":${language},"logintype":"${logintype}","phonetype":${phonetype},"pwd":"${password}","random":"${random}","username":"${username}"}`;
    const signature = md5(shonustr).toUpperCase();

    const payload = { language, logintype, phonetype, pwd: password, random, signature, username, timestamp: Date.now() };

    try {
        const res = await fetch('/deepanshu/api/webapi/Login.php', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify(payload)
        });
        const data = await res.json();

        if (data.code === 0 && data.data && data.data.token) {
            localStorage.setItem('token', data.data.token);
            window.location.href = '/newhome.php';
        } else {
            errorBox.className = 'msg msg-err';
            errorBox.innerHTML = '<i class="fa-solid fa-circle-exclamation"></i> ' + (data.msg || 'Login ব্যর্থ হয়েছে। Mobile/Password চেক করো।');
        }
    } catch (e) {
        errorBox.className = 'msg msg-err';
        errorBox.innerHTML = '<i class="fa-solid fa-circle-exclamation"></i> একটা সমস্যা হয়েছে, আবার চেষ্টা করো।';
    }

    btn.textContent = 'Login করো';
}
</script>

</body>
</html>
